/** Shopify CDN: Minification failed Line 327:2 All "@import" rules must come first **/ /* START_SECTION:footer (INDEX:13) */ /* ========================================== GLOBAL FOOTER CONTAINER & LAYOUT Rebranded to MyNightmate's dark palette: deep burgundy background, brand pink (#E01B4C) accents, Playfair Display headings + Inter body (already defined globally on in header.liquid). ========================================== */ .custom-pawzy-footer { position: relative; background-color: var(--footer-bg, #ffffff); color: rgb(0 0 0 / 0.75); font-family: var(--font-header-body, Inter, sans-serif); padding-top: 60px; padding-bottom: 30px; } .custom-pawzy-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(224 27 76 / 0.5), transparent); } .pawzy-footer__inner { max-width: var(--page-width, 1200px); margin: 0 auto; padding: 0 20px; } /* ========================================== 1. TOP SECTION (LOGO, BIO, SOCIALS) ========================================== */ .pawzy-footer__top { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 550px; margin: 0 auto 50px auto; } .pawzy-footer__logo img { max-width: 180px !important; width: 100% !important; height: auto !important; display: block; margin: 0 auto 15px auto; } .pawzy-footer__brand-title { font-family: var(--font-header-heading, 'Playfair Display', serif); font-size: 1.85rem; font-weight: 700; margin: 0 0 10px 0; color: #1a1a1a; } .pawzy-footer__bio { font-size: 0.95rem; line-height: 1.65; color: rgb(0 0 0 / 0.6); margin: 0 0 20px 0; } .pawzy-footer__socials { display: flex; gap: 12px; justify-content: center; } .pawzy-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgb(0 0 0 / 0.15); color: #1a1a1a; text-decoration: none; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .pawzy-footer__socials svg { width: 18px; height: 18px; } .pawzy-footer__socials a:hover { transform: translateY(-3px); background: linear-gradient(135deg, #E01B4C, #8A0524); border-color: transparent; color: #ffffff; } /* ========================================== 2. MIDDLE SECTION (4-COLUMN GRID) ========================================== */ .pawzy-footer__grid { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 50px; justify-content: space-between; align-items: flex-start; } .pawzy-footer__grid > * { flex: 1 1 100%; min-width: 0; } @media screen and (min-width: 600px) { .pawzy-footer__grid > * { flex: 1 1 calc(50% - 30px); } } @media screen and (min-width: 990px) { .pawzy-footer__grid > * { flex: 1 1 calc(25% - 30px); } } .pawzy-footer__grid h3, .pawzy-footer__grid h4, .pawzy-footer__grid .menu__heading__default { position: relative; display: inline-block; font-family: var(--font-header-heading, 'Playfair Display', serif); font-size: 1.1rem; font-weight: 700; color: #1a1a1a; margin-top: 0; padding-bottom: 0.6rem; margin-bottom: 20px; } .pawzy-footer__grid h3::after, .pawzy-footer__grid h4::after, .pawzy-footer__grid .menu__heading__default::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #E01B4C, #8A0524); } .pawzy-footer__grid p, .pawzy-footer__grid li, .pawzy-footer__grid a { font-size: 0.9rem; color: rgb(0 0 0 / 0.62); line-height: 1.65; text-decoration: none; } .pawzy-footer__grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .pawzy-footer__grid a { transition: color 0.25s ease; } .pawzy-footer__grid a:hover { color: #E01B4C; text-decoration: underline; } .pawzy-footer__contact-line { display: flex; align-items: flex-start; gap: 0.6rem; } .pawzy-footer__contact-line + .pawzy-footer__contact-line { margin-top: 12px; } /* Form & Input Pill Styling */ .pawzy-footer__grid .email-signup-form, .pawzy-footer__grid form { display: flex; align-items: center; background: rgb(0 0 0 / 0.03); border-radius: 50px; padding: 4px 5px 4px 18px; margin-top: 15px; border: 1px solid rgb(0 0 0 / 0.12); } .pawzy-footer__grid form input[type='email'] { border: none !important; background: transparent !important; outline: none !important; box-shadow: none !important; font-size: 0.875rem; color: #1a1a1a; width: 100%; padding: 8px 0; } .pawzy-footer__grid form input[type='email']::placeholder { color: rgb(0 0 0 / 0.4); } .pawzy-footer__grid form button, .pawzy-footer__grid form input[type='submit'] { background: linear-gradient(135deg, #E01B4C, #8A0524) !important; color: #ffffff !important; border: none !important; border-radius: 50px !important; padding: 10px 22px !important; font-size: 0.875rem !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap; transition: box-shadow 0.25s ease; } .pawzy-footer__grid form button:hover, .pawzy-footer__grid form input[type='submit']:hover { box-shadow: 0 8px 18px -6px rgb(224 27 76 / 0.6); } /* ========================================== 3. BOTTOM SECTION (DIVIDER + COPYRIGHT) ========================================== */ .pawzy-footer__bottom { border-top: 1px solid rgb(0 0 0 / 0.1); padding-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 15px; } @media screen and (min-width: 750px) { .pawzy-footer__bottom { flex-direction: row; justify-content: space-between; } } .pawzy-footer__copyright p { font-size: 0.85rem; color: rgb(0 0 0 / 0.5); margin: 0; } .pawzy-footer__payments { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pawzy-footer__payments .payment-icon { height: 22px; width: auto; border-radius: 3px; } /* ========================================== 4. BACK-TO-TOP BUTTON ========================================== */ .pawzy-footer__back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: var(--layer-raised, 40); display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #E01B4C, #8A0524); color: #ffffff; box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease; } .pawzy-footer__back-to-top:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -8px rgb(224 27 76 / 0.6); } .pawzy-footer__back-to-top svg { width: 20px; height: 20px; } @media screen and (max-width: 749px) { .pawzy-footer__back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; } } /* END_SECTION:footer */ /* START_SECTION:header (INDEX:15) */ /* ========================================================================== Custom brand fonts + gradient header - Headings / logo: Playfair Display (serif) - Body / menu / UI text: Inter - Header background: brand gradient (dark burgundy -> crimson red) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap'); body { --header-height: 60px; --header-group-height: var(--header-height); --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */ /* Brand fonts available anywhere in the header */ --font-header-heading: 'Playfair Display', serif; --font-header-body: 'Inter', sans-serif; } .header { /* Set header paddings based on height setting */ --header-padding: var(--padding-sm); --font-paragraph--line-height: 1; --header-content-transition-timing: 0s; display: block; contain: layout style; background: transparent; /* Apply the brand fonts across the whole header */ font-family: var(--font-header-body); a, .button, .button-secondary, .header-actions__action { /* reset style from base.css */ transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing); font-family: var(--font-header-body); } } /* Logo and heading-level text use Playfair Display */ .header .header-logo, .header .header-logo *, .header h1, .header h2 { font-family: var(--font-header-heading); } /* Menu links use Inter for readability — cover default, active, and hover/focus states */ .header .menu-list__link, .header .menu-list__link[aria-haspopup], .header .menu-list__link--active, .header .menu-list__link[aria-current="page"], .header .menu-list__link:hover, .header .menu-list__link:focus, .header .menu-list__link-title { font-family: var(--font-header-body) !important; font-weight: normal; } /* ========================================================================== Lusty-style layout polish: logo hugs the left, menu sits right next to it, hover/active links and dropdown carets pick up the brand pink. ========================================================================== */ .header__columns { grid-gap: var(--gap-lg, 24px); } .header__column--left { gap: var(--gap-lg, 24px); } /* Brand pink for hover + active/expanded menu items */ .header .menu-list__link:hover, .header .menu-list__link[aria-current='true'], .header .menu-list__link[aria-expanded='true'] { color: #E01B4C; } /* Caret next to dropdown-capable menu items, rotates + tints pink on open/hover */ .header .menu-list__link[aria-haspopup] .icon-caret, .header .menu-list__link[aria-haspopup] .svg-wrapper { transition: transform var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing); } .header .menu-list__link[aria-haspopup]:hover .icon-caret, .header .menu-list__link[aria-haspopup][aria-expanded='true'] .icon-caret { color: #E01B4C; transform: rotate(180deg); } #header-component :is(.header-menu, .dropdown-localization) { display: none; } @media screen and (min-width: 750px) { #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) { display: flex; } } #header-component[data-menu-style='drawer'] .header__column { display: contents; } @media screen and (min-width: 750px) { #header-component[data-menu-style='menu'] .header__navigation-bar-row { display: none; } } /* ================================================================================ SIMPLE HEADER: always white background, always brand-pink (#E01B4C) text. No transparency, no gradient, no scroll/hover color swapping — removed per request. The per-template "Transparent background" checkboxes further down in settings still exist (original theme feature) but no longer do anything visually, since there's nothing here to make transparent. ================================================================================ */ .header { background: #ffffff; } .header__underlay-closed, .header__underlay-open { background: #ffffff; } .header, .header__row, .header .menu-list__link, .header .header-actions__action, .header .icon-caret, .header .header-logo, .header .header-logo * { color: #E01B4C; } .header .menu-list__link:hover, .header .menu-list__link[aria-current='true'], .header .menu-list__link[aria-expanded='true'] { color: #E01B4C; } /* === DROPDOWN FIX === */ .header .menu-list__list-item { position: relative; } /* The submenu box itself — this is the only element from the theme's own markup this file still touches. Everything inside it is rebuilt by the script at the bottom of this file, so no mega-menu/grid/image class names are referenced anywhere below. */ .header .menu-list__submenu, .header .menu-list__submenu * { max-height: none !important; height: auto !important; overflow: visible !important; aspect-ratio: auto !important; } .header:has(.menu-list__submenu) { contain: none !important; } /* Plain rebuilt list — the only markup this dropdown ever shows. box-sizing: border-box everywhere here so padding never fights width. */ .header .simple-dropdown-list { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; } .header .simple-dropdown-link { box-sizing: border-box; display: block; width: 100%; padding: 12px 24px; color: #1a1a1a; font-family: var(--font-header-body, Inter, sans-serif); font-size: 0.875rem; line-height: 1.5; white-space: nowrap; text-decoration: none; } .header .simple-dropdown-link:hover, .header .simple-dropdown-link:focus-visible { color: #E01B4C; background: rgb(224 27 76 / 0.06); } /* === PREVENT HEADER EXPANSION === */ .header__underlay-open { display: none !important; } .header__underlay-closed { height: 100% !important; } /* Keep panel within viewport on narrower desktop widths instead of overflowing right */ @media screen and (max-width: 1100px) { .header .menu-list__submenu { left: auto; right: 0; } } /* On mobile the drawer menu takes over entirely (see #header-component[data-menu-style='drawer'] rules elsewhere in this file), so the desktop submenu positioning simply doesn't apply there — nothing further needed here. */ /* ============================== END DROPDOWN FIX ============================== */ /* ============================== END HEADER STYLES ============================== */ /* When top row has transparent background, make it inherit colors from header component */ [data-transparent-background='top']:hover .header__row--top, [data-transparent-background='top']:focus-within .header__row--top, [data-transparent-background='both']:hover .header__row--top, [data-transparent-background='both']:focus-within .header__row--top { --color-foreground: inherit; --color-foreground-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-primary-button-background: inherit; --color-primary-button-text: inherit; } /* When bottom row has transparent background, make it inherit colors from header component */ [data-transparent-background='bottom']:hover .header__row--bottom, [data-transparent-background='bottom']:focus-within .header__row--bottom, [data-transparent-background='both']:hover .header__row--bottom, [data-transparent-background='both']:focus-within .header__row--bottom { --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-section { position: relative; z-index: var(--layer-menu-drawer); } /* need default values for non-flash transitions on first overflow menu open */ #header-component { --submenu-height: 0px; --full-open-header-height: 0px; } #header-group:has(#header-component[sticky]) { display: contents; } .header-section:has(> #header-component[sticky='always']), .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) { position: sticky; /* Use -1 instead of 0 so intersection observer can track sticky state */ top: -1px; z-index: var(--layer-menu-drawer); } .header[data-sticky-state] { transition: opacity var(--animation-speed) var(--animation-easing); opacity: 1; } .header[data-sticky-state='active'] { view-transition-name: sticky-header; } :active-view-transition-type(empty-cart-drawer) { .header[data-sticky-state='active'] { view-transition-name: none; } } .header[data-sticky-state='idle'] { opacity: 0; } /* ================================ * Underlays * ================================ */ .header__underlay { position: absolute; inset: 0; } .header__underlay-closed { height: var(--closed-underlay-height, 100%); z-index: var(--layer-lowest); background: #ffffff; transition: height var(--animation-speed-slow) var(--ease-out-cubic); } .header__underlay-open { height: var(--full-open-header-height); background: linear-gradient( var(--color-background-top-row) 0 var(--top-row-height), var(--color-background-bottom-row) var(--top-row-height) var(--header-height), var(--color-submenu) var(--header-height) 100% ); /* header-height is updated via js, the transition works automagically */ transition: height var(--submenu-animation-speed) var(--ease-out-cubic); } .header__underlay-open::after { content: ''; position: absolute; inset: 0; box-shadow: var(--shadow-popover); clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */ transition: height var(--submenu-animation-speed) var(--ease-out-cubic); } /* Real submenu positioning/box — the ONE definition of .menu-list__submenu in this file. height:auto / max-height:none override any inline height the theme's own JS may set (calculated for the original mega-menu grid layout), which was too short for our simplified single-column list and let the last item overflow past the white background, exposing the page behind it. */ .header .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu, .header .menu-list__submenu { position: absolute !important; top: 100% !important; left: 0 !important; box-sizing: border-box !important; width: 240px !important; min-width: 240px !important; max-width: 240px !important; height: auto !important; max-height: none !important; z-index: 9999 !important; margin: 0 !important; background: #ffffff !important; border-radius: 8px !important; border: none !important; outline: none !important; box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.25) !important; padding: 12px 0 !important; overflow: visible !important; clip-path: none !important; opacity: 0 !important; translate: 0 8px !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s linear 0.18s !important; } .header .menu-list__list-item:hover > .menu-list__submenu, .header .menu-list__list-item:focus-within > .menu-list__submenu, .header .menu-list__list-item.mnm-open > .menu-list__submenu { opacity: 1 !important; translate: 0 0 !important; visibility: visible !important; pointer-events: auto !important; transition-delay: 0s !important; clip-path: none !important; } .header-menu .menu-list__submenu { content-visibility: visible !important; } /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */ [data-transparent-background='top']:hover, [data-transparent-background='top']:focus-within, [data-transparent-background='both']:hover, [data-transparent-background='both']:focus-within { :is(.header__underlay-open, .header__underlay-closed) { --color-background-top-row: var(--color-background); } } /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */ [data-transparent-background='bottom']:hover, [data-transparent-background='bottom']:focus-within, [data-transparent-background='both']:hover, [data-transparent-background='both']:focus-within { :is(.header__underlay-open, .header__underlay-closed) { --color-background-bottom-row: var(--color-background); } } [data-submenu-overlap-bottom-row] { .header__underlay-open { background: linear-gradient( var(--color-background-top-row) 0 var(--top-row-height), var(--color-submenu) var(--top-row-height) 100% ); } .header__row--bottom { z-index: var(--layer-lowest); } } /* End Underlays ================ */ .header__row { /* The account component uses a different background color, but we need to override it to inherit the color of the header row */ --color-account-icon: var(--color-foreground); position: relative; /* Overwrite color from section settings, background is controlled by the underlays */ /* stylelint-disable-next-line declaration-no-important */ background-color: transparent !important; &:has(.mega-menu__list:hover), &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])), &:has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])) { /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */ z-index: var(--layer-heightened); } } .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(--border-bottom-color, 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); border-bottom-color: var(--border-bottom-color-mobile); } } #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width), #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns { border-bottom-width: var(--border-bottom-width-mobile); border-bottom-color: var(--border-bottom-color-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; /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */ @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 { /* Three column layout */ --header-left: 1fr; --header-center: auto; --header-right: 1fr; --header-template-columns: var(--header-left) var(--header-center) var(--header-right); /* Mobile layout */ --header-mobile-bookend: 44px; display: grid; grid-template-areas: 'left center right'; grid-gap: var(--gap-xl); grid-template-columns: var(--header-template-columns); /* If menu is in center column */ &:has(.header__column--center header-menu) { --header-center: auto; --header-left: minmax(max-content, 1fr); --header-right: minmax(max-content, 1fr); } /* If there is no center column, make the column the menu is in grow eagerly */ &: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'; } /* If the header-menu is in the right column */ &:has(.header__column--right header-menu) { --header-right: auto; --header-left: minmax(max-content, 1fr); } /* If the header-menu is in the left column */ &: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(shopify-account)) .search-action { grid-area: rightA; } .search-action { grid-area: leftB; } header-actions { grid-area: rightB; } } } /* not ideal but we need to duplicate these styles for when touch comes into play We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */ #header-component[data-menu-style='drawer'] .header__columns { --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(shopify-account)) .search-action { grid-area: rightA; } .search-action { grid-area: leftB; } header-actions { grid-area: rightB; } } /* Single column layout if there are no columns within */ .header__columns:not(:has(.header__column)) { grid-template-columns: 1fr; } /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */ @media (hover: hover) { /* Column-specific dimming effect when any interactive element is hovered Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */ .header__column:has(header-menu:hover), .header__column:has(.header-actions__action:hover), .header__column:has(.header__icon--menu:hover) { header-menu:not(:hover), .header-actions__action:not(:hover), .header__icon--menu:not(:hover) { opacity: var(--opacity-subdued-text); transition: opacity var(--animation-speed) var(--animation-easing); } } } /* Ensure smooth transitions for all interactive elements */ header-menu, .header-actions__action, .header__icon--menu { transition: opacity var(--animation-speed) var(--animation-easing); } /* Header action button styles */ .header-actions__action { --button-color: var(--color-foreground); color: var(--button-color); cursor: pointer; display: flex; justify-content: center; &:hover { --button-color: var(--color-foreground); } } .header-actions__action:not(.account-button) .svg-wrapper { height: var(--button-size); width: var(--button-size); } .header-actions__action:not(.account-button) svg { width: var(--icon-size-md); height: var(--icon-size-md); } .header:has(#Details-menu-drawer-container[open]) { contain: style; } .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; } } /* Optimize layout performance for hidden menus */ .header-menu .menu-list__submenu { content-visibility: auto; contain-intrinsic-size: 0px 500px; } /* Force visibility when open/animating and in overflow submenu to prevent layout issues */ .header-menu details[open] .menu-list__submenu, .header-menu .menu-list__submenu[data-active], .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu { content-visibility: visible; } /* Dropdown Localization Styles */ .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 .svg-wrapper.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); } .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; } .dropdown-localization__button .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; } 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; } } dropdown-localization-component { position: relative; background-color: transparent; } dropdown-localization-component .country-filter { position: relative; padding: 8px; } 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 .localization-form__select:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } 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(.language-selector--top-shadow)) { font-weight: var(--menu-top-level-font-weight); } .dropdown-localization:not(dropdown-localization-component) .language-selector { font-family: var(--menu-localization-font); font-size: var(--menu-localization-font-size); } /* END_SECTION:header */ /* START_SECTION:hero (INDEX:16) */ .hero-wrapper { --hero-height-offset: 0px; margin: 0 !important; } /* 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-grid { position: absolute; inset: 0; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(var(--hero-media-count, 1), 1fr); } .hero--auto .hero__media { aspect-ratio: var(--hero-media-aspect-ratio); } .hero--no-blocks-auto-height { .hero__media { width: 100%; aspect-ratio: auto; } .hero__media-grid { /* When there are no blocks and the height is auto, allow the image to appear. */ position: relative; } } .hero__media-wrapper { overflow: hidden; position: relative; } .hero__media { 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__media-wrapper--mobile { display: none; } .hero__media-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .hero__media-wrapper--desktop { display: none; } .hero__media-wrapper--mobile { display: block; } .hero__media-grid { grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr); } /* Mobile stacking */ .hero--stack-mobile .hero__media-grid { grid-template-columns: 1fr; grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1))); } } .hero__link { position: absolute; inset: 0; grid-column: 1 / -1; } .hero__media-grid, .hero__content-wrapper { pointer-events: none; :is(a, button, input, textarea, select, details, summary) { 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; } } } /* ================================================================================ LUSTY-STYLE ADDITIONS 1) Rotating full-bleed background slideshow with brand duotone overlay 2) Floating vertical quick-action dock (cart / wishlist / account) 3) Pill-shaped primary button + refined overlay text sizing for the hero ================================================================================ */ .hero__slideshow { position: absolute; inset: 0; grid-column: 1 / -1; overflow: hidden; } .hero__slideshow-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; } .hero__slideshow-slide.is-active { opacity: 1; } .hero__slideshow-slide .hero__media { height: 100%; width: 100%; object-fit: cover; } /* Blue-to-pink duotone wash + dark vignette so white text stays legible, matching the reference's moody lighting */ .hero__slideshow--duotone::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, var(--slideshow-duotone-color-1) 0%, transparent 55%), linear-gradient(315deg, var(--slideshow-duotone-color-2) 0%, transparent 55%), linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.1) 45%, rgb(0 0 0 / 0.25) 100%); mix-blend-mode: color, color, normal; pointer-events: none; } .hero--slideshow .hero__content-wrapper { z-index: var(--layer-raised); } /* Eyebrow + heading + button sizing tuned for this hero style. Uses the type-preset classes already applied by text/button blocks. */ .hero .h6.h6 { letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-accent, #E01B4C); font-size: 0.8125rem; } .hero .h1.h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; max-width: 20ch; } .hero .button { border-radius: 999px; padding-inline: 2rem; padding-block: 0.9rem; font-weight: 600; letter-spacing: 0.02em; margin: 30px 0; } /* Floating quick-action dock, fixed to the right edge of the hero */ .hero__quick-dock { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: var(--layer-raised); display: flex; flex-direction: column; pointer-events: auto; } .hero__quick-dock-item { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--brand-accent, #E01B4C); color: #fff; transition: background-color var(--animation-speed, 0.2s) ease; } .hero__quick-dock-item:hover { background: var(--brand-accent-dark, #B80935); } .hero__quick-dock-item .svg-wrapper { width: 22px; height: 22px; } .hero__quick-dock-item .svg-wrapper svg { width: 100%; height: 100%; } .hero__quick-dock-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding-inline: 3px; border-radius: 999px; background: #fff; color: var(--brand-accent-dark, #B80935); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 749px) { .hero__quick-dock { display: none; } } /* ================================================================================ SLICK HERO SLIDER Block-based slides (image + heading + subheading + CTA). Height is fixed up front from the "Slide height" setting (px) so there is no layout shift while Slick's JS/CSS load and initialize. Tablet/mobile scale proportionally off that same base value. ================================================================================ */ .hero--slick { --hero-slick-height: var(--hero-slick-height-desktop, 700px); } .hero--slick .hero__container { min-height: var(--hero-slick-height); } @media screen and (max-width: 989px) { .hero--slick { --hero-slick-height: calc(var(--hero-slick-height-desktop, 700px) * 0.85); } } @media screen and (max-width: 749px) { .hero--slick { --hero-slick-height: calc(var(--hero-slick-height-desktop, 700px) * 0.75); } } .hero-slick { position: absolute; inset: 0; grid-column: 1 / -1; height: 100%; overflow: hidden; } /* Before Slick initializes, stack slides so only the first is visible — avoids a flash of all slides at once and prevents CLS. */ .hero-slick:not(.slick-initialized) .hero-slick__slide { display: none; } .hero-slick:not(.slick-initialized) .hero-slick__slide:first-child { display: block; } .hero-slick .slick-list, .hero-slick .slick-track, .hero-slick__slide { height: 100%; } .hero-slick__slide { position: relative; } .hero-slick__media { position: absolute; inset: 0; } .hero-slick__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hero-slick__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.15) 45%, rgb(0 0 0 / 0.25) 100% ); pointer-events: none; } .hero-slick__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.75rem; max-width: 40rem; padding-block: 3rem; color: #fff; } .hero-slick__heading { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; margin: 0; color: #fff; } .hero-slick__subheading { font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 34ch; margin: 0; color: rgb(255 255 255 / 0.9); } .hero-slick__button { margin-top: 0.5rem; } /* Slick's default markup/behavior needs these core rules even without slick-theme.css, so arrows/dots always render correctly on brand. */ .hero-slick .slick-slide { position: relative; } .hero-slick .slick-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: none; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 1.75rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } .hero-slick .slick-arrow:hover { background: var(--brand-accent, #E01B4C); } .hero-slick__arrow--prev { left: 24px; } .hero-slick__arrow--next { right: 24px; } .hero-slick .slick-dots { position: absolute; bottom: 24px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .hero-slick .slick-dots li { margin: 0; } .hero-slick .slick-dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: none; background: rgb(255 255 255 / 0.4); text-indent: -9999px; overflow: hidden; cursor: pointer; transition: background-color 0.2s ease; } .hero-slick .slick-dots li.slick-active button { background: var(--brand-accent, #E01B4C); } @media screen and (max-width: 749px) { .hero-slick__content { padding-block: 2rem; } .hero-slick .slick-arrow { display: none; } } /* ================================================================================ PREMIUM GLASS HERO CARD Left-aligned glassmorphism content card: badge, accent heading, paragraph, primary/secondary CTAs, trust-stat row. Fades up on load; independent of whichever background mode (static media / slideshow / this section's own zoom) is active behind it. ================================================================================ */ .hero--premium-zoom .hero__media, .hero--premium-zoom .hero__slideshow-slide .hero__media { animation: heroPremiumZoom 18s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .hero--premium-zoom .hero__media, .hero--premium-zoom .hero__slideshow-slide .hero__media { animation: none; } } @keyframes heroPremiumZoom { from { transform: scale(1); } to { transform: scale(1.08); } } /* Keep the hero flush below the header, regardless of any leftover [transparent] attribute on the header (base.css applies a negative margin-top to the first section whenever that attribute is present — this cancels it out so the hero never tucks under the header). */ .shopify-section:has(> .hero-wrapper) { /* stylelint-disable-next-line declaration-no-important */ margin-top: 0 !important; } .hero-premium { position: relative; z-index: var(--layer-raised); width: 100%; height: 100%; display: flex; align-items: center; /* Align with the site's actual page-width container (same left edge as the header logo/nav), instead of an approximate padding value. */ max-width: var(--page-width, 1600px); margin-inline: auto; padding-inline: var(--page-margin, 24px); padding-block: 3rem; } .hero-premium__card { max-width: 700px; } .hero-premium__fade { opacity: 0; transform: translateY(24px); animation: heroPremiumFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--fade-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .hero-premium__fade { opacity: 1; transform: none; animation: none; } } @keyframes heroPremiumFadeUp { to { opacity: 1; transform: translateY(0); } } .hero-premium__badge { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 999px; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.2); color: #fff; font-family: var(--font-header-body, Inter, sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .hero-premium__heading { margin: 30px 0; color: #fff; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.08; } .hero-premium__accent { color: var(--brand-accent, #E01B4C); font-style: italic; } .hero-premium__paragraph { margin: 0; max-width: 42ch; color: rgb(255 255 255 / 0.85); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; } .hero-premium__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.25rem; } .hero-premium__button { position: relative; overflow: hidden; border-radius: 999px; padding-inline: 2rem; padding-block: 0.9rem; font-weight: 600; letter-spacing: 0.02em; transition: transform 0.25s ease, box-shadow 0.25s ease; } .hero-premium__button--primary { background: linear-gradient(135deg, var(--brand-accent, #E01B4C), var(--brand-accent-dark, #B80935)); } .hero-premium__button--secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.6); } .hero-premium__button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgb(184 9 53 / 0.5); } .hero-premium__button--secondary:hover { box-shadow: inset 0 0 0 1.5px #fff, 0 12px 24px -8px rgb(0 0 0 / 0.35); background: rgb(255 255 255 / 0.08); } .hero-premium__stats { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.15); width: 100%; } .hero-premium__stat { display: flex; align-items: center; gap: 0.5rem; color: rgb(255 255 255 / 0.9); font-size: 0.875rem; font-weight: 500; transition: transform 0.2s ease; } .hero-premium__stat:hover { transform: translateY(-2px); } .hero-premium__stat-icon { font-size: 1.05rem; line-height: 1; } @media screen and (max-width: 749px) { .hero-premium { padding-block: 2rem; align-items: flex-end; } .hero-premium__card { max-width: 100%; padding: 1.75rem 1.5rem; } .hero-premium__stats { gap: 0.9rem 1.25rem; } } /* END_SECTION:hero */ /* START_BLOCK:_header-logo (INDEX:72) */ .header-logo { display: flex; height: 100%; font-size: var(--font-size--md); font-family: var(--font-family); font-weight: var(--font-weight); font-style: var(--font-style); color: var(--color-foreground); justify-content: center; align-items: center; text-decoration: none; &[data-hidden-on-home-page] { display: none; #header-component:is( [sticky='always']:not([data-scroll-direction='none']), [sticky='scroll-up'][data-scroll-direction='up'] ) & { display: flex; } } @media screen and (max-width: 749px) { padding: 0; } @media screen and (min-width: 750px) { flex-shrink: 0; } &:hover { text-decoration: none; } } .header-logo__image { object-fit: contain; height: var(--header-logo-image-height-mobile); width: var(--header-logo-image-width-mobile); @media screen and (min-width: 750px) { height: var(--header-logo-image-height); width: var(--header-logo-image-width); } } .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original { display: var(--header-logo-display, block); } .header-logo__image-container--inverse { display: var(--header-logo-inverse-display, none); } /* END_BLOCK:_header-logo */ /* START_BLOCK:_header-menu (INDEX:73) */ .header__drawer { --header-drawer-min-height: 60px; display: flex; min-height: var(--header-drawer-min-height); align-items: center; } #header-component[data-menu-style='drawer'] .header__drawer { display: flex; min-height: var(--header-drawer-min-height); } @media screen and (min-width: 750px) { #header-component[data-menu-style='menu'] .header__drawer { display: none; min-height: 0; } } .header--compact .header__drawer { min-height: var(--minimum-touch-target); } .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); } .menu-list { --menu-horizontal-gap: var(--gap-xl); --menu-vertical-gap: var(--gap-xl); display: flex; height: 100%; } .menu-list__list { display: flex; justify-content: var(--grid-area-alignment); } .menu-list__list-item { flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; height: 100%; } .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: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: center; cursor: pointer; height: 100%; margin-block: 0; &::after { content: ''; position: absolute; display: none; top: var(--header-padding); height: var(--box-height); left: 0; right: 0; } &[data-safety-box='true']::after { display: block; } &:hover, &:focus { color: var(--menu-top-level-font-color); } @media screen and (min-width: 750px) { font-size: var(--menu-top-level-font-size-desktop); } } .menu-list__link-title { padding-inline: calc(var(--gap-xl) / 2); } [slot='overflow'] .menu-list__link-title { padding-inline: 0; } .menu-list__list-item:not([slot='overflow']) { flex-direction: column; } .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::after { content: ''; width: 100%; height: var(--header-padding); margin-bottom: calc(-1 * var(--header-padding)); } [slot='overflow'] > .menu-list__link::after { content: none; } /* 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:is([slot='more'], [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; margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2); } .overflow-menu { /* stylelint-disable-next-line declaration-no-important */ background-color: transparent !important; padding: var(--focus-outline-size); margin: calc(-1 * var(--focus-outline-size)); } /** 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.background-matches-parent, .overflow-menu.background-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); visibility: hidden; position: absolute; width: 100%; left: 0; top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height))); z-index: var(--layer-header-menu); padding-inline: var(--padding-inline); /* Clip path starts at header height so it doesn't mess with the pointer events in the header */ clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */ transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */ } [data-submenu-overlap-bottom-row] { .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu, .overflow-menu::part(overflow) { clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */ } } /* 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-list), /* Keep the submenus open when they are hovered */ .menu-list__submenu:is(:hover), .overflow-menu::part(overflow):hover { --submenu-content-opacity: 1; visibility: visible; } .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) { position: relative; display: grid; grid-template-columns: minmax(auto, 200px) 1fr; grid-template-areas: 'left right'; grid-template-rows: max-content; grid-gap: 0; grid-column: 2; } .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 { grid-area: left; grid-row: auto; height: min-content; font-size: var(--font-size--xl); 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 { transform: none; grid-column: unset; padding-block: 0; } .menu-list__link[aria-expanded='true'] + .menu-list__submenu { visibility: visible; } } .header-menu { height: 100%; } .menu-list__submenu-inner { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; } .menu-list__submenu-inner, .overflow-menu::part(overflow-list) { padding-block-start: var(--submenu-padding-block-start); padding-block-end: var(--submenu-padding-block-end); padding-inline: var(--section-padding-inline); opacity: var(--submenu-content-opacity); transition: var(--submenu-content-animation); transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height))); /* Make overflow menu scrollable when content exceeds viewport */ 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; } .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; &: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__submenu { /* preserves the inherited grid layout when this submenu wrapper is used */ display: contents; } /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */ .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component { display: none; } /* END_BLOCK:_header-menu */ /* START_SNIPPET:card-gallery (INDEX:170) */ .card-gallery { position: relative; overflow: hidden; container-type: inline-size; /* Make card-gallery a container */ container-name: card-gallery-container; /* Optional: name the container */ } @container (max-width: 70px) { .card-gallery:hover .quick-add__button { display: none; } } .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: block; } .product-card-gallery__title-placeholder .title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text { -webkit-line-clamp: 3; line-clamp: 3; } @media screen and (min-width: 750px) { .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder { padding: var(--padding-3xl); font-size: var(--font-size--3xl); } .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder { padding: var(--padding-2xl); font-size: var(--font-size--2xl); } .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder { padding: var(--padding-xl); font-size: var(--font-size--xl); } .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder { padding: var(--padding-sm); font-size: var(--font-size--lg); } .product-grid[data-product-card-size='extra-large'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-3xl) + 50px); } .product-grid[data-product-card-size='large'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-2xl) + 50px); } .product-grid[data-product-card-size='medium'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-xl) + 50px); } .product-grid[data-product-card-size='small'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-sm) + 50px); } .product-grid[data-product-card-size='extra-large'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-3xl) + 40px); } .product-grid[data-product-card-size='large'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-2xl) + 40px); } .product-grid[data-product-card-size='medium'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-xl) + 40px); } .product-grid[data-product-card-size='small'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-sm) + 40px); } .product-grid[data-product-card-size='extra-large'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-3xl) + 40px); } .product-grid[data-product-card-size='large'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-2xl) + 40px); } .product-grid[data-product-card-size='medium'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-xl) + 40px); } .product-grid[data-product-card-size='small'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-sm) + 40px); } } @media screen and (max-width: 749px) { .product-card-gallery__title-placeholder { font-size: var(--font-size--xl); padding: var(--padding-md); } .product-grid[data-product-card-size] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-sm) + 50px); } .product-grid[data-product-card-size] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-sm) + 40px); } .product-grid[data-product-card-size] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-sm) + 40px); } } [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder { /* stylelint-disable-next-line declaration-no-important */ padding: var(--padding-xs) !important; font-size: var(--font-size--xs); } [product-grid-view='zoom-out'] .card-gallery .slideshow-control { min-width: auto; } ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery { display: block; } [product-grid-view='zoom-out'] .card-gallery > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { display: none; } ul[product-grid-view='zoom-out'] .card-gallery > img { display: block; } .card-gallery slideshow-arrows .slideshow-control { /* Align icons with quick-add button */ padding-inline: var(--padding-xl); @container (max-width: 249px) { padding-inline: 0 var(--padding-sm); } } /* * Card galleries preview the next or previous images on 'pointerenter', so we * try to kick load them beforehand (they are lazy loaded otherwise). */ .card-gallery :is( slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), slideshow-slide[aria-hidden='false'] + slideshow-slide ) { content-visibility: auto; slideshow-component[actioned] & { content-visibility: visible; } } /* END_SNIPPET:card-gallery */ /* START_SNIPPET:cart-bubble (INDEX:171) */ .cart-bubble { --cart-padding: 0.2em; position: relative; width: 20px; aspect-ratio: 1; border-radius: 50%; border-width: 0; display: flex; line-height: normal; align-items: center; justify-content: center; color: var(--cart-bubble-text, var(--cart-bubble-text-fallback)); padding-inline: var(--cart-padding); } .cart-bubble[data-maintain-ratio] { aspect-ratio: 1; } .cart-bubble[data-maintain-ratio] .cart-bubble__background { border-radius: var(--style-border-radius-50); } .cart-bubble__background { position: absolute; inset: 0; background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback)); border-radius: var(--style-border-radius-lg); } .cart-bubble__text { font-size: var(--font-size--3xs); z-index: var(--layer-flat); line-height: 1; display: flex; align-items: center; justify-content: center; } /* END_SNIPPET:cart-bubble */ /* START_SNIPPET:cart-disclosure-tooltip (INDEX:172) */ .cart-disclosure-tooltip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--minimum-touch-target); height: var(--minimum-touch-target); flex-shrink: 0; } .cart-disclosure-tooltip__button { display: inline-flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; color: var(--color-foreground-secondary); line-height: 1; transition: color var(--animation-speed) var(--animation-easing); cursor: pointer; } .cart-items__title-row .cart-disclosure-tooltip { position: static; align-self: flex-start; width: 1em; height: 1em; margin-block-start: calc((1lh - 1em) / 2 + 0.3rem); line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height)); } .cart-page .cart-items__title-row .cart-disclosure-tooltip { margin-block-start: calc((1lh - 1em) / 2); } .cart-items__title-row .cart-disclosure-tooltip__button { position: relative; justify-content: center; width: 1em; height: 1em; } .cart-items__title-row .cart-disclosure-tooltip__button::before { content: ''; position: absolute; inset-block: calc((1em - var(--minimum-touch-target)) / 2); inset-inline-start: 0; inset-inline-end: calc(1em - var(--minimum-touch-target)); } .cart-disclosure-tooltip__button:hover { color: var(--color-foreground); } .cart-disclosure-tooltip__button .svg-wrapper, .cart-disclosure-tooltip__button .svg-wrapper > svg { width: 1em; height: 1em; } .cart-disclosure-tooltip__popover { --cart-disclosure-tooltip-popover-max-width: 280px; --cart-disclosure-tooltip-popover-spacing: 8px; --cart-disclosure-tooltip-popover-offset-block: -4px; --cart-disclosure-tooltip-popover-viewport-margin: 16px; --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md); --cart-disclosure-tooltip-popover-native-fallback-top: calc( anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) + var(--cart-disclosure-tooltip-popover-offset-block) ); --cart-disclosure-tooltip-popover-fixed-fallback-top: calc( (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) + var(--cart-disclosure-tooltip-popover-offset-block) ); inset: unset; top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top)); left: max( var(--cart-disclosure-tooltip-popover-viewport-margin), min( calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)), calc( 100vw - var(--cart-disclosure-tooltip-popover-max-width) - var(--cart-disclosure-tooltip-popover-viewport-margin) ) ) ); min-inline-size: 240px; max-inline-size: var(--cart-disclosure-tooltip-popover-max-width); padding: 0; margin: 0; color: var(--color-foreground); background: var(--color-background); border: var(--style-border-popover); border-radius: var(--style-border-radius-popover, 0); box-shadow: var(--shadow-popover); opacity: 0; transition-property: display, opacity, translate; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; translate: 0 20px; overflow: hidden; } @supports not (position-anchor: --cart-disclosure-trigger) { .cart-disclosure-tooltip__popover { position: fixed; top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top); left: max( var(--cart-disclosure-tooltip-popover-viewport-margin), min( calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)), calc( 100vw - var(--cart-disclosure-tooltip-popover-max-width) - var(--cart-disclosure-tooltip-popover-viewport-margin) ) ) ); } } .cart-disclosure-tooltip__popover:popover-open { opacity: 1; translate: 0 0; } .cart-disclosure-tooltip__list { display: flex; flex-direction: column; } .cart-disclosure-tooltip__row { display: flex; align-items: flex-start; gap: var(--gap-sm); padding-block: var(--padding-xs); padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md); font-size: var(--font-size--sm); color: var(--color-foreground); background: var(--color-background); overflow-wrap: break-word; } .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) { --cart-disclosure-tooltip-symbol-height: 1em; --cart-disclosure-tooltip-symbol-slot-width: calc( var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1) ); display: grid; grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr); min-inline-size: 0; } .cart-disclosure-tooltip__symbol { justify-self: center; width: auto; max-inline-size: 100%; height: var(--cart-disclosure-tooltip-symbol-height, 1em); margin: 0; object-fit: contain; translate: 0 1px; } .cart-disclosure-tooltip__title { min-width: 0; margin: 0; line-height: var(--line-height--body-tight); } .cart-disclosure-tooltip__dialog { display: contents; } .cart-disclosure-modal { --cart-disclosure-modal-width: 28rem; --cart-disclosure-modal-max-height: 72dvh; --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px); position: fixed; top: 50%; left: 50%; width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2))); max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2))); padding: 0; margin: 0; color: var(--color-foreground); background: var(--color-background); border: var(--style-border-popover); border-radius: var(--cart-disclosure-modal-border-radius); box-shadow: var(--shadow-popover); overflow: hidden; isolation: isolate; translate: -50% -50%; } .cart-disclosure-modal.dialog-modal[open] { animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards; } .cart-disclosure-modal.dialog-modal.dialog-closing { animation: modalSlideOutTop var(--animation-speed) var(--animation-easing); } .cart-disclosure-modal::backdrop { backdrop-filter: brightness(0.65) blur(2px); background: rgb(var(--color-foreground-rgb) / var(--opacity-60)); } .cart-disclosure-modal__content { display: flex; flex-direction: column; gap: var(--gap-xl); max-height: inherit; padding: var(--padding-2xl); overflow-y: auto; overscroll-behavior: contain; } .cart-disclosure-modal .cart-disclosure-modal__heading { margin: 0; padding-inline-end: var(--minimum-touch-target); font-size: var(--font-size--2xl); font-weight: 700; line-height: 1.15; overflow-wrap: break-word; } .cart-disclosure-modal__list { display: flex; flex-direction: column; gap: var(--gap-xl); } .cart-disclosure-modal__item { --cart-disclosure-modal-symbol-height: 1.5em; --cart-disclosure-modal-symbol-slot-width: calc( var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1) ); --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2); display: grid; grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr); align-items: flex-start; column-gap: var(--gap-xs); row-gap: var(--gap-xs); min-width: 0; font-size: var(--font-size--md); overflow-wrap: break-word; } .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) { grid-template-columns: minmax(0, 1fr); } .cart-disclosure-modal__symbol { justify-self: center; width: auto; max-inline-size: 100%; height: var(--cart-disclosure-modal-symbol-height); margin: 0; object-fit: contain; } .cart-disclosure-modal__item-content { display: contents; } .cart-disclosure-modal__item-heading { margin: 0; font-size: inherit; font-weight: 700; line-height: 1; overflow-wrap: break-word; } .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading { grid-column: 2; padding-block-start: var(--cart-disclosure-modal-heading-offset); } .cart-disclosure-modal__body { grid-column: 1 / -1; margin: 0; font-size: var(--font-size--sm); line-height: 1.35; overflow-wrap: break-word; } .cart-disclosure-modal__body > * { margin-block: 0; } .cart-disclosure-modal__close { position: absolute; inset-block-start: var(--padding-sm); inset-inline-end: var(--padding-sm); z-index: var(--layer-raised); overflow: visible; } @media screen and (min-width: 750px) { .cart-disclosure-modal__content { padding-block: var(--padding-2xl); padding-inline: var(--padding-2xl); } } @media screen and (max-width: 749px) { .cart-disclosure-modal { position: fixed; top: auto; left: 0; inset-block-start: auto; inset-block-end: 0; inset-inline: 0; width: 100%; height: fit-content; max-width: 100%; max-height: 100dvh; margin: auto 0 0; border-start-start-radius: var(--cart-disclosure-modal-border-radius); border-start-end-radius: var(--cart-disclosure-modal-border-radius); border-end-start-radius: 0; border-end-end-radius: 0; overflow: clip; translate: 0 0; } .cart-disclosure-modal__content { max-height: min(var(--modal-max-height), 100dvh); } } /* END_SNIPPET:cart-disclosure-tooltip */ /* START_SNIPPET:cart-items-component (INDEX:174) */ .cart-items-component { width: 100%; height: 100%; display: flex; flex-direction: column; } @media screen and (prefers-reduced-motion: no-preference) { html:active-view-transition-type(empty-cart-drawer), html:active-view-transition-type(fill-cart-drawer) { .cart-items-component { view-transition-name: cart-drawer-content; } } html:active-view-transition-type(empty-cart-page) { .cart-items-component { view-transition-name: cart-page-content; } } } ::view-transition-old(cart-page-content) { animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards; } @keyframes cart-page-content-old { from { opacity: 1; } to { opacity: 0; filter: blur(4px); } } ::view-transition-old(cart-drawer-content) { transform-origin: 50% 33%; animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards; } ::view-transition-new(cart-drawer-content) { transform-origin: top center; animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards; } @keyframes cart-contents-old { to { scale: 0.92; opacity: 0; } } @keyframes cart-contents-new { from { scale: 1.05; translate: 0 128px; filter: blur(1px); opacity: 0; } } /* END_SNIPPET:cart-items-component */ /* START_SNIPPET:cart-products (INDEX:175) */ .cart-items { --cart-item-media-width-min: 2.5rem; --cart-item-media-width-max: 7.5rem; container-name: cart-items; container-type: inline-size; width: 100%; } .cart-items-disabled { pointer-events: none; } .cart-items__wrapper { display: flex; flex-direction: column; } .cart-page--empty .cart-items__wrapper { align-items: center; margin-block-start: 0; text-align: center; } .cart-items__wrapper--drawer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .cart-items__table { width: 100%; border-spacing: 0; } .cart-items__table * { margin: 0; } .cart-items__table-row { --cart-item-price-width: 6rem; display: grid; grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto); grid-template-areas: 'media details price' 'media quantity price' 'media error error'; column-gap: var(--gap-md); align-items: start; padding-bottom: var(--cart-items-gap); margin-bottom: var(--margin-lg); } .cart-items__details { grid-area: details; min-width: 0; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); } .cart-items__product-info { min-width: 0; } /* Cart drawer: separate grid areas for variants and unit price */ .cart-items__table-row--full-width-variants { grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto; grid-template-rows: repeat(4, min-content) 1fr; grid-template-areas: 'media details price' 'media variants variants' 'media unit_price unit_price' 'media quantity quantity' 'media error error'; .cart-items__details { display: contents; } .cart-items__product-info { grid-area: details; } .cart-items__variants-wrapper { grid-area: variants; &:empty { display: none; } p { margin: 0; } } .cart-items__unit-price-wrapper { grid-area: unit_price; font-size: var(--font-size--sm); } .cart-items__price { min-width: auto; width: max-content; } } .cart-items__table-row.cart-items__nested-line td:first-child { width: 60%; justify-self: right; } html:active-view-transition-type(page-navigation) .cart-items__table-row { /* stylelint-disable-next-line declaration-no-important */ view-transition-name: none !important; } .cart-items__table-row.removing { overflow: hidden; animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards; animation-delay: var(--animation-speed); } @keyframes removeRow { 0% { height: var(--row-height); } 100% { opacity: 0; height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; } } .cart-items__table-row.adding { interpolate-size: allow-keywords; overflow: hidden; animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards; } @keyframes addRow { 0% { opacity: 0; height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; } 100% { opacity: 1; height: auto; } } .cart-items__table-row:last-child { padding-bottom: 0; } .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); margin-bottom: var(--cart-items-gap); } .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) { border-bottom: none; margin-bottom: 0; } .cart-items--dividers .cart-items__table-row:last-of-type { border-block-end: none; padding-block-end: 0; margin-bottom: 0; } .cart-items__details > * + *, .cart-items__bundle li { margin-block-start: var(--margin-3xs); } .cart-items__details * { font-size: var(--font-size--sm); } .cart-items__details a { text-decoration: none; } .cart-items__title-row { display: inline-flex; align-items: center; gap: var(--gap-xs); max-width: 100%; min-width: 0; } .cart-items__title { font-size: var(--font-size--md); color: var(--color-foreground); text-transform: var(--product-title-case); display: block; margin-block-start: 0; min-width: 0; overflow-wrap: break-word; } .cart-items__variants { display: block; } .cart-items__variant { display: inline; } .cart-items__variant dt, .cart-items__variant dd { display: inline; margin: 0; } .cart-items__quantity { grid-area: quantity; margin-block-start: var(--margin-xs); display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-xs); width: fit-content; } .cart-items__quantity-controls { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-xs); width: fit-content; } .cart-items__quantity-controls > .volume-pricing-info { margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs)); } .cart-items__quantity .quantity-selector { display: inline-flex; font-size: var(--font-size--sm); height: auto; } .cart-items__remove { background-color: transparent; color: var(--color-foreground); width: var(--minimum-touch-target); height: var(--minimum-touch-target); justify-content: center; box-shadow: none; padding: 0; } .cart-items__media { grid-area: media; padding: 0; } .cart-items__price { grid-area: price; min-height: unset; min-width: var(--cart-item-price-width); text-align: end; display: block; font-size: var(--font-size--sm); line-height: var(--line-height); } .cart-items__price-unit { font-size: var(--font-size--xs); padding-block-start: var(--padding-2xs); } .cart-items__media-container { display: flex; aspect-ratio: var(--ratio); position: relative; width: 100%; overflow: hidden; } .cart-items__media-image { aspect-ratio: inherit; object-fit: cover; object-position: center center; width: 100%; height: auto; } .cart-items__empty-button { margin-top: var(--margin-md); margin-inline: auto; padding-inline: var(--padding-4xl); padding-block: var(--padding-lg); } /* Error message */ .cart-items__error { display: flex; align-items: flex-start; width: 100%; grid-area: error; margin-block-start: var(--margin-xs); opacity: 1; overflow: hidden; transform: translateY(0); transition: opacity var(--drawer-animation-speed) var(--animation-easing), transform var(--drawer-animation-speed) var(--animation-easing); @starting-style { opacity: 0; transform: translateY(-0.5rem); } } .cart-item__error { display: flex; align-items: flex-start; width: 100%; font-size: var(--font-size--sm); padding-block: var(--padding-2xs); } .cart-item__error .svg-wrapper { flex-shrink: 0; width: var(--icon-size-xs); height: var(--icon-size-xs); margin-inline: var(--margin-3xs) var(--margin-xs); margin-block-start: var(--margin-3xs); } @container cart-items (min-width: 720px) { /* Cart page: original layout */ .cart-items__table-row { --cart-item-price-width: 6rem; grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto); grid-template-rows: min-content 1fr; grid-template-areas: 'media details quantity price' 'media details error error'; } .cart-items__quantity, .cart-items__price { grid-area: initial; } .cart-items__quantity { margin-top: 0; } .cart-items__price { min-height: var(--minimum-touch-target); display: flex; flex-direction: column; align-items: flex-end; } /* Cart drawer: separate areas for variants and unit price */ .cart-items__table-row--full-width-variants { grid-template-rows: min-content min-content min-content 1fr; grid-template-areas: 'media details quantity price' 'media variants variants variants' 'media unit_price unit_price unit_price' 'media error error error'; .cart-items__quantity, .cart-items__price { grid-area: initial; } } } .cart__subtotal-container, .cart__total-container { display: flex; flex-direction: column; } .cart__total-container { row-gap: var(--gap-2xs); &.cart__total-container--has-installments { row-gap: var(--gap-xs); } } .cart__subtotal-container:empty { display: none; } .cart__summary-totals { display: flex; flex-direction: column; gap: var(--gap-xl); width: 100%; border-block-start: none; &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) { padding-block-start: 0; border-block-start: none; } @media screen and (min-width: 750px) { padding-block-start: 0; } } .cart__subtotal-container, .cart__subtotal-container * { font-size: var(--font-size--sm); } .cart__total { font-weight: var(--font-weight-bold); } .cart__total-label { font-size: var(--font-size--sm); } .cart__total-value { font-size: var(--font-size--xl); @media screen and (max-width: 749px) { font-size: var(--font-size--lg); } } .cart__ctas { width: 100%; display: grid; gap: var(--checkout-button-gap); grid-auto-flow: row; grid-template-columns: 1fr; } .cart__additional-checkout-buttons { width: 100%; } shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-inline-alignment: center; --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px); } /* Remove animation */ .remove-icon-bottom, .remove-icon-top { transition: transform var(--animation-speed) var(--animation-easing); } .cart-items__remove:hover .remove-icon-top { transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg); } .cart-items__remove:is(:hover, :active) .remove-icon-bottom { transform: translateY(var(--icon-stroke-width)); } .cart-items__table-row.removing .remove-icon-bottom { transform: translateY(0); } .cart-items__table-row.removing .remove-icon-top { animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards; } @keyframes removeButtonClickedIconTop { 50% { transform: translate(0, calc(-1 * var(--icon-stroke-width))); } 100% { transform: translate(0, 0); } } .cart-items__properties { display: block; margin-block-start: var(--margin-2xs); } .cart-items__property { display: block; } .cart-items__properties dt, .cart-items__properties dd { display: inline; margin: 0; overflow-wrap: break-word; } @media screen and (min-width: 750px) { .cart-items .quantity-selector { --quantity-selector-width: 105px; height: var(--button-size-md); width: var(--quantity-selector-width); } .cart-items .quantity-selector button { width: var(--button-size-md); height: var(--button-size-md); } .cart-items .quantity-selector input { max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2); } } @media screen and (prefers-reduced-motion: no-preference) { html:active-view-transition-type(empty-cart-drawer) { .cart-items__empty-button, .cart__checkout-button { view-transition-name: cart-drawer-primary-action; & > .button-text { view-transition-name: cart-drawer-primary-action-text; } } } } ::view-transition-old(cart-drawer-primary-action-text), ::view-transition-new(cart-drawer-primary-action-text) { height: 100%; object-fit: none; overflow: clip; overflow-clip-margin: 1em; } ::view-transition-old(cart-drawer-primary-action-text) { animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards; } ::view-transition-new(cart-drawer-primary-action-text) { animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards; } ::view-transition-old(cart-drawer-primary-action), ::view-transition-new(cart-drawer-primary-action) { height: 100%; } ::view-transition-group(cart-drawer-primary-action-text), ::view-transition-group(cart-drawer-primary-action) { animation-duration: var(--spring-d300-b0-duration); animation-timing-function: var(--spring-d300-b0-easing); } @keyframes cart-drawer-primary-action-text { from { filter: blur(3px); opacity: 0; } to { filter: none; opacity: 1; } } /* END_SNIPPET:cart-products */ /* START_SNIPPET:gift-card-recipient-form-styles (INDEX:197) */ .recipient-form { --options-border-radius: var(--variant-picker-button-radius); --options-border-width: var(--variant-picker-button-border-width); display: flex; flex-direction: column; color: var(--color, var(--color-foreground)); padding-bottom: var(--padding-2xl); } .recipient-form__send-to { padding: 0; margin-block-end: var(--margin-xs); } .gift-card-form-option { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); padding: 0; border: none; } .gift-card-form-option__button-label { display: flex; align-items: center; position: relative; padding-block: var(--padding-sm); padding-inline: var(--padding-lg); border: var(--style-border-width) solid var(--color-variant-border); border-radius: var(--options-border-radius); border-width: var(--options-border-width); overflow: clip; justify-content: center; min-width: auto; background-color: var(--color-variant-background); color: var(--color-variant-text); transition: background-color var(--animation-speed) var(--animation-easing), border-color var(--animation-speed) var(--animation-easing); &:hover { background-color: var(--color-variant-hover-background); border-color: var(--color-variant-hover-border); color: var(--color-variant-hover-text); } } .gift-card-form-option__button-label:has(:focus-visible) { --variant-picker-stroke-color: var(--color-foreground); border-color: var(--color-foreground); outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } .gift-card-form-option__button-label:has(:checked) { color: var(--color-selected-variant-text); background-color: var(--color-selected-variant-background); border-color: var(--color-selected-variant-border); transition: background-color var(--animation-speed) var(--animation-easing), border-color var(--animation-speed) var(--animation-easing); &:hover { background-color: var(--color-selected-variant-hover-background); border-color: var(--color-selected-variant-hover-border); color: var(--color-selected-variant-hover-text); } } .gift-card-form-option__button-label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; } .recipient-fields { display: flex; flex-direction: column; gap: var(--gap-sm); transition: opacity 0.3s var(--animation-easing); padding-block-start: var(--padding-xl); } .recipient-fields[hidden] { display: none; } .field--send-on { display: flex; flex-direction: column; } .recipient-form__message { display: flex; flex-direction: row; align-items: center; gap: var(--gap-sm); margin-top: var(--margin-sm); } .recipient-form-field-label { position: absolute; left: var(--padding-sm); bottom: var(--padding-sm); font-style: italic; color: var(--color-input-text); } .recipient-fields__textarea { min-height: 5.5rem; overflow-y: auto; /* Space for the character count */ padding-bottom: calc(var(--padding-sm) * 3); scroll-padding-bottom: calc(var(--padding-sm) * 3); } .recipient-fields__input { flex-grow: 1; 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-styles */ /* START_SNIPPET:grid-density-controls (INDEX:199) */ .column-options-wrapper { --icon-offset: -3px; display: flex; gap: var(--gap-sm); min-width: fit-content; justify-content: flex-end; height: var(--minimum-touch-target); align-items: center; margin-right: var(--icon-offset); } .column-options-wrapper:only-child { margin-left: auto; } .facets__form-wrapper > .column-options-wrapper:first-child { margin-left: auto; } .facets .column-options-wrapper { display: none; @media screen and (min-width: 750px) { display: flex; } } .column-options { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin: 0; padding: 0; border: none; @media screen and (min-width: 750px) { gap: var(--gap-2xs); } } .column-options__option { display: none; position: relative; } .column-options__option:has(.column-picker-mobile--single), .column-options__option:has(.column-picker-mobile--double) { @media screen and (max-width: 749px) { display: flex; } } .column-options__option:has(.column-picker--default), .column-options__option:has(.column-picker--zoom-out) { @media screen and (min-width: 750px) { display: flex; } } /* Override base rule for grid density controls - only when visible */ .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single), .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) { @media screen and (max-width: 749px) { display: flex; } } .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default), .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) { @media screen and (min-width: 750px) { display: flex; } } .column-options__legend { padding: 0; margin: 0; } .column-options__option-input { /* this is a repeating pattern a bit with the variant picker buttons */ /* remove the checkbox from the page flow */ position: absolute; /* set the dimensions to match those of the label */ inset: 0; /* hide it */ opacity: 0; margin: 0; padding: 0; width: auto; height: auto; aspect-ratio: unset; border: none; border-radius: 0; background: transparent; appearance: auto; display: block; cursor: pointer; } .column-picker { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50)); padding: var(--padding-2xs); border-radius: var(--style-border-radius-xs); transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease; } .column-options__option:hover .column-picker { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .column-options__option-input:checked ~ .column-picker { color: rgb(var(--color-rgb, var(--color-foreground-rgb))); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } /* END_SNIPPET:grid-density-controls */ /* START_SNIPPET:overlay (INDEX:218) */ .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:219) */ .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; isolation: isolate; } .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'], .pagination__link--gap, .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, .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, .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:product-grid (INDEX:233) */ /* Product grid */ .product-grid-container { display: block; width: 100%; padding-block: var(--padding-block-start) var(--padding-block-end); @media screen and (min-width: 750px) { display: grid; } } [product-grid-view='default'] { --product-grid-gap: 16px; --padding-block-start: 24px; --padding-block-end: 24px; --padding-inline-start: 0px; --padding-inline-end: 0px; } .product-grid { --product-grid-gap: var(--product-grid-gap-mobile); --mobile-columns: 2; /* Default value */ display: grid; grid-template-columns: 1fr 1fr; gap: var(--product-grid-gap); margin: auto; padding: 0; list-style: none; isolation: isolate; @media screen and (min-width: 750px) { --product-grid-gap: var(--product-grid-gap-desktop); grid-template-columns: var(--product-grid-columns-desktop); } } .product-grid :is(h3, p) { margin: 0; } .product-grid__item { border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity)); } [product-grid-view='default'] .product-grid__item { padding-block: 0; } .product-grid--organic[product-grid-view='default'] .product-grid__item { height: fit-content; } [product-grid-view='zoom-out'] .product-grid__card.product-grid__card { row-gap: var(--padding-xs); } [product-grid-view='mobile-single'], .product-grid-mobile--large { @media screen and (max-width: 749px) { grid-template-columns: 1fr; } } ul[product-grid-view='zoom-out'] .product-grid__card > * { display: none; } [product-grid-view='zoom-out'] { --product-grid-columns-desktop: repeat( 10, minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr) ); } @media (prefers-reduced-motion: no-preference) { :root:active-view-transition-type(product-grid) { details[open] floating-panel-component { view-transition-name: panel-content; .checkbox *, .facets__pill-label { transition: none; } .facets--vertical & { view-transition-name: none; } } .product-grid { view-transition-name: product-grid; } footer { view-transition-name: footer; } .product-grid__item, floating-panel-component { transition: none; } } } ::view-transition-group(panel-content) { z-index: 1; } ::view-transition-new(product-grid) { animation-delay: 150ms; animation-name: fadeInUp; animation-duration: var(--animation-speed); animation-timing-function: var(--animation-easing); } results-list[initialized] { .product-grid__item { transition: opacity var(--animation-speed) var(--animation-easing), transform var(--animation-speed) var(--animation-easing); @starting-style { opacity: 0; transform: translateY(10px); } } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Product card title truncation - applied only to zoom-out view */ [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; } .product-grid slideshow-arrows .slideshow-control { display: none; @media screen and (min-width: 750px) { display: grid; } } /* This triggers iOS < 16.4 */ @supports not (background-color: rgb(from red 150 g b / alpha)) { /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */ .product-grid .product-media, .product-grid .product-media-container { aspect-ratio: auto; } } .main-collection-grid { grid-column: var(--grid-column--mobile); padding: var(--grid--margin--mobile); @media screen and (min-width: 750px) { grid-column: var(--grid-column--desktop); padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start); } } .main-collection-grid__empty { padding-block: var(--padding-6xl); padding-inline: var(--page-margin); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--padding-sm); } .main-collection-grid__empty-title { margin: 0; } /* END_SNIPPET:product-grid */ /* START_SNIPPET:product-recommendations-styles (INDEX:239) */ .product-recommendations { display: block; } .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_SNIPPET:product-recommendations-styles */ /* START_SNIPPET:quick-add-styles (INDEX:244) */ /* Quick Add */ .quick-add { --quick-add-offset: var(--padding-sm); --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end)); --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end)); --quick-add-inset-inline-end: max( var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))) ); --quick-add-inset-block-end: max( var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))) ); position: absolute; inset: 0; z-index: var(--layer-raised); pointer-events: none; @media screen and (min-width: 750px) { --quick-add-offset: var(--padding-md); } } .quick-add .variant-option__button-label input[data-option-available='false'] { cursor: not-allowed; } /* Hide "Add" button when "Choose" button is shown */ [data-quick-add-button='choose'] add-to-cart-component { display: none; } /* Hide "Choose" button when "Add" button is shown */ [data-quick-add-button='add'] .quick-add__button--choose { display: none; } product-card:is(:hover, :focus-within) .quick-add__button { opacity: 1; } button.quick-add__button { --quick-add-collapsed-width: var(--button-size-md); --quick-add-icon-width: calc(var(--button-size-md) - 4px); --quick-add-expanded-width: max-content; display: var(--quick-add-mobile-display, none); align-items: center; justify-content: flex-start; gap: 0; background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box; padding: 0; border-radius: 50px; border: 2px solid hsl(0 0% 0% / 0.15); height: var(--button-size-md); width: var(--quick-add-collapsed-width); cursor: pointer; opacity: var(--quick-add-mobile-opacity, 0); overflow: hidden; color: var(--quick-add-foreground, var(--color-foreground)); pointer-events: all; position: absolute; inset-inline-end: var(--quick-add-inset-inline-end); inset-block-end: var(--quick-add-inset-block-end); max-inline-size: calc(100% - var(--quick-add-inset-inline-end)); min-inline-size: 0; white-space: nowrap; backdrop-filter: blur(20px) saturate(180%); interpolate-size: allow-keywords; &:hover { scale: 1.03; /* Hover stabilizer: extends hit area to maintain hover state */ &::before { content: ''; position: absolute; inset: -10px; z-index: -1; } } &:active { scale: 0.99; } .quick-add[stay-visible] & { display: flex; } @media screen and (min-width: 750px) { display: var(--quick-add-display, flex); opacity: 0; } } .quick-add__button.add-to-cart-button { height: var(--button-size-md); } .quick-add__button .svg-wrapper .checkmark-burst { width: 22px; height: 22px; } .quick-add__button > .add-to-cart-icon { flex-shrink: 0; width: var(--quick-add-icon-width); height: 100%; } .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; } @media screen and (min-width: 750px) { .quick-add__button:is(:hover, :focus-visible) { width: var(--quick-add-expanded-width); padding-inline-end: var(--padding-sm); } } .quick-add__button[data-added='true'] { width: var(--quick-add-collapsed-width); color: transparent; } .quick-add__button[data-added='true'] > .add-to-cart-icon { opacity: 0; } .quick-add__button[data-added='true'] .add-to-cart__added { color: var(--quick-add-foreground, var(--color-foreground)); } @media (prefers-reduced-motion: no-preference) { button.quick-add__button { transition-property: scale, translate, opacity, width; transition-duration: var(--animation-speed); transition-timing-function: var(--ease-out-cubic); } } /* END_SNIPPET:quick-add-styles */ /* START_SNIPPET:resource-list-styles (INDEX:250) */ .resource-list { --resource-list-mobile-gap-max: 9999px; --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max)); --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max)); width: 100%; @media screen and (max-width: 749px) { --resource-list-mobile-gap-max: 12px; } @container resource-list (max-width: 749px) { --resource-list-mobile-gap-max: 12px; } } .resource-list--grid { display: grid; gap: var(--resource-list-row-gap) var(--resource-list-column-gap); grid-template-columns: var(--resource-list-columns-mobile); @media screen and (min-width: 750px) { grid-template-columns: var(--resource-list-columns); } @container resource-list (max-width: 449px) { grid-template-columns: var(--resource-list-columns-mobile); } @container resource-list(min-width: 450px) and (max-width: 749px) { --resource-list-columns-per-row: 3; grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr); /* Avoid orphan in last row when there are 4, 7, or 10 items */ &:has(.resource-list__item:first-child:nth-last-child(3n + 1)), /* Clean two full rows when there are 8 items */ &:has(.resource-list__item:first-child:nth-last-child(8n)) { --resource-list-columns-per-row: 4; } } @container resource-list (min-width: 750px) { grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr); &:has(.resource-list__item:first-child:nth-last-child(n + 9)) { --resource-list-columns-per-row: 5; } &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) { --resource-list-columns-per-row: 4; } &:has(.resource-list__item:first-child:nth-last-child(6)) { --resource-list-columns-per-row: 3; } &:has(.resource-list__item:first-child:nth-last-child(5)) { --resource-list-columns-per-row: 5; } &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) { --resource-list-columns-per-row: 4; } } @container resource-list (min-width: 1200px) { &:has(.resource-list__item:first-child:nth-last-child(6)) { --resource-list-columns-per-row: 6; } } } .resource-list__item { height: 100%; color: var(--color-foreground); text-decoration: none; } /* END_SNIPPET:resource-list-styles */ /* START_SNIPPET:search (INDEX:254) */ .search-action { --search-border-radius: var(--style-border-radius-inputs); --search-border-width: var(--style-border-width-inputs); display: flex; } @media screen and (max-width: 749px) { .search-action--hidden-on-drawer { display: none; } } @media screen and (min-width: 750px) { [data-menu-style='drawer'] .search-action--hidden-on-drawer { display: none; } [data-menu-style='menu'] .search-action--hidden-on-menu { display: none; } } [data-menu-style='menu'] .header__column--left .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); } } @media screen and (min-width: 750px) { .header__column--right .search-action--text { margin-inline: 0; } [data-menu-style='menu'] .header__column--left .search-action--text { margin-inline: 0; } } /* END_SNIPPET:search */ /* START_SNIPPET:slideshow-arrows (INDEX:260) */ slideshow-arrows { --cursor-previous: w-resize; --cursor-next: e-resize; position: absolute; inset: 0; display: flex; z-index: var(--layer-heightened); pointer-events: none; mix-blend-mode: difference; align-items: flex-end; &[position='left'] { justify-content: flex-start; padding-inline: var(--padding-xs); } &[position='right'] { justify-content: flex-end; padding-inline: var(--padding-xs); } &[position='center'] { justify-content: space-between; align-items: center; } } slideshow-arrows:has(.slideshow-control--shape-square), slideshow-arrows:has(.slideshow-control--shape-circle) { mix-blend-mode: normal; } slideshow-component[disabled='true'] slideshow-arrows { display: none; } slideshow-arrows .slideshow-control { pointer-events: auto; opacity: 0; min-height: var(--minimum-touch-target); min-width: var(--minimum-touch-target); padding: 0 var(--padding-xs); color: var(--color-white); } slideshow-arrows .slideshow-control.slideshow-control--style-none { display: none; } /* END_SNIPPET:slideshow-arrows */ /* START_SNIPPET:swatch-styles (INDEX:271) */ /* Swatches */ .swatch { --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity)); --min-width-unitless: 15.9999; /* want to avoid division by 0 */ --min-height-unitless: 15.9999; /* want to avoid division by 0 */ --min-height: 16px; --min-width: 16px; /* mobile values */ --scaling-factor: 0.5; --max-swatch-size: 28px; --max-pill-size: 20px; --max-filter-size: 32px; /* From the settings */ --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless)); --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless)); /** Offset values are obtained from the following formulas: offset-width = width - min-width offset-height = height - min-height The offset-scaled-width and heigth are obtained by extending the line from [min,min] to [W,H] and taking the intersection with a square that starts at [min,min] and ends at [max,max]. The extending line forms right angle triangles with the [min,min]->[max,max] box that enable us to derive the following formulas We also want the result to always be smaller than the input (pdp > everywhere else) by some scaling factor. */ --offset-scaled-width: calc( var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size) ); --offset-scaled-height: calc( var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size) ); --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width)); /* width = min(m + sU, (m + s * W'/H' * M'), M) */ --swatch-width: min( calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), calc(var(--min-width) + var(--offset-scaled-width)), var(--max-swatch-size) ); /* height = min(m + sV, (m + s * H'/W' * M'), M) */ --swatch-height: min( calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), calc(var(--min-height) + var(--offset-scaled-height)), var(--max-swatch-size) ); display: block; background: var(--swatch-background); background-position: var(--swatch-focal-point, center); border-radius: var(--variant-picker-swatch-radius); border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border); width: var(--swatch-width); height: var(--swatch-height); /* This is different than `background-size: cover` because we use `box-sizing: border-box`, * doing it like makes the background clip under the border without repeating. */ background-size: var(--swatch-width) var(--swatch-height); &.swatch--unavailable { border-style: dashed; } &.swatch--unscaled { /* for when you want fixed sizing (e.g. pdp) */ --swatch-width: var(--variant-picker-swatch-width); --swatch-height: var(--variant-picker-swatch-height); } &.swatch--filter { --swatch-width: var(--max-filter-size); --swatch-height: var(--max-filter-size); border-radius: var(--variant-picker-swatch-radius); } &.swatch--pill { --swatch-width: var(--max-pill-size); --swatch-height: var(--max-pill-size); border-radius: var(--variant-picker-swatch-radius); } /* swatches in filters and pills always have a border */ &.swatch--filter, &.swatch--pill { --style-border-swatch-width: var(--variant-picker-border-width); --style-border-swatch-style: var(--variant-picker-border-style); --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity)); } &.swatch--variant-image { background-size: cover; } @media screen and (min-width: 750px) { /* desktop values */ --max-swatch-size: 32px; --max-pill-size: 16px; --max-filter-size: 28px; --scaling-factor: 0.65; } } /* END_SNIPPET:swatch-styles */ /* START_SNIPPET:text-component-shimmer-styles (INDEX:274) */ text-component { --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10)); --shimmer-speed: 1.25s; display: inline-block; position: relative; transition: color var(--animation-speed-slow) ease; line-height: 1; &::after { /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content. Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */ content: attr(value) / ''; position: absolute; inset: 0; color: transparent; opacity: 0; transition: opacity var(--animation-speed-slow) var(--animation-easing); pointer-events: none; background-image: linear-gradient( -85deg, var(--shimmer-text-color) 10%, var(--shimmer-color-light) 50%, var(--shimmer-text-color) 90% ); background-clip: text; background-size: 200% 100%; background-position: 100% 0; place-content: center; } &[shimmer] { color: transparent; &::after { opacity: 1; animation: text-shimmer var(--shimmer-speed) infinite linear; } } } @keyframes text-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* END_SNIPPET:text-component-shimmer-styles */