/** Shopify CDN: Minification failed Line 15618:5 Cannot use type selector "--uppercase" directly after nesting selector "&" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:article-carousel (INDEX:1) */ @media screen and (min-width: 750px) { .article-carousel-section__wrapper { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .article-carousel-section__wrapper { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } .article-carousel-section__wrapper slideshow-slides { gap: var(--article-carousel-column-gap); } } /* Dots pagination */ .article-carousel-pagination { padding-top: 12px; padding-bottom: 12px; } .article-carousel-pagination__dots { align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .article-carousel-pagination__dots--mobile { display: flex; } .article-carousel-pagination__dots--desktop { display: none; } @media (min-width: 750px) { .article-carousel-pagination__dots--mobile { display: none; } .article-carousel-pagination__dots--desktop { display: flex; } } .article-carousel-pagination__dot { display: block; width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background-color: rgb(var(--color-foreground-rgb) / var(--opacity-30)); transition: background-color 0.2s ease; } .article-carousel-pagination__dot[aria-current='true'] { background-color: var(--color-foreground); } .article-carousel-pagination__dot:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); } /* * Article cards: avoid slideshow-slide flex stretch + .resource-list__item { height: 100% } * inflating one slide when slide widths differ from the base clamp formula. */ .article-carousel-section__wrapper .resource-list__carousel .resource-list__item { height: auto; } .article-carousel-section__wrapper .resource-list__carousel .article-card { height: auto; } /* END_SECTION:article-carousel */ /* START_SECTION:article-grid (INDEX:2) */ @media screen and (min-width: 750px) { .article-grid-section__wrapper { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .article-grid-section__wrapper { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:article-grid */ /* START_SECTION:cart-drawer (INDEX:4) */ .cart-drawer { --cart-drawer-padding: var(--padding-lg) var(--padding-xl); --cart-drawer-padding-desktop: var(--padding-lg) var(--padding-sm); --cart-font-size--2xs: var(--font-size--2xs); --cart-font-size--xs: var(--font-size--xs); --cart-font-size--sm: var(--font-size--sm); --cart-font-size--md: var(--font-size--md); --cart-font-size--lg: var(--font-size--lg); --cart-font-size--xl: var(--font-size--xl); --cart-font-size--2xl: var(--font-size--2xl); } .cart-items-component { width: 100%; height: 100%; display: flex; flex-direction: column; } .cart-drawer__dialog { position: fixed; overflow: hidden; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; height: 100%; margin: 0 0 0 auto; padding: 0; border-left: var(--style-border-drawer); box-shadow: var(--shadow-drawer); background-color: var(--color-background); } /* Needed to ensure the drawer is full height */ .cart-drawer__dialog:modal { max-height: 100dvh; overflow-y: hidden; } .cart-drawer__inner { height: 100%; overflow: hidden; } .cart-drawer__content { height: calc(100% - var(--header-height)); display: flex; flex-direction: column; padding: 0; background-color: var(--color-background); flex-grow: 1; overflow-y: auto; } .cart-drawer__header { background-color: var(--color-background); display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 12px 12px; border-bottom: var(--style-border-width) solid none; position: sticky; top: 0; z-index: 1; gap: var(--gap-xs); } .cart-drawer__heading { display: flex; align-items: center; gap: var(--gap-xs); font-size: var(--font-size--xl); line-height: 110%; color: var(--color-foreground); } .cart-drawer__heading.h3 { --font-h3--size: 20px; } .cart-drawer__heading .cart-bubble { width: fit-content; border-radius: var(--style-border-radius-buttons-primary); aspect-ratio: auto; padding: var(--cart-padding); } .cart-drawer__heading .cart-bubble[data-maintain-ratio] { aspect-ratio: 1; width: 16px; height: 16px; min-width: 16px; } .cart-drawer__heading .cart-bubble__background { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-brand-1); } .cart-drawer__heading .cart-bubble__text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-paragraph--family); font-weight: var(--font-paragraph--weight); color: var(--color-foreground); font-size: var(--font-size--xs); } .cart-drawer__heading .cart-bubble__text-count { font-size: var(--font-size--3xs); font-weight: 700; line-height: 150%; padding-top: 50%; } .cart-bubble--animating .cart-bubble__background { animation: grow var(--animation-speed) var(--animation-easing); } .cart-bubble--animating .cart-bubble__text { --start-y: -1em; --start-opacity: 1; transform: translate(0, var(--start-y, -1em)); opacity: var(--start-opacity, 1); animation: move-and-fade var(--animation-speed) var(--animation-easing); } .cart-drawer__close-button { width: 24px; height: 24px; } .cart-drawer__close-button .svg-wrapper { width: 24px; height: 24px; } .cart-drawer__items { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-inline: 12px; overflow-y: auto; gap: 12px; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) { border-bottom: none; margin-bottom: 0; } .cart-drawer__items .cart-items__table-row:last-child { border-bottom: none; padding-block-end: 0; margin-block-end: 0; } .cart-drawer__summary { --cart-drawer-summary-padding: 12px; position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); padding: 0 var(--cart-drawer-summary-padding) var(--padding-lg); margin-top: auto; background-color: var(--color-background); } .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary { position: static; } .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items { overflow: unset; } .cart-actions summary, .cart-actions .disclosure-trigger { padding-inline: 0; padding-block: var(--padding-xl); line-height: 1.2; min-height: var(--minimum-touch-target); } .cart-actions .disclosure-trigger[aria-expanded="true"] { padding-bottom: var(--padding-xs); } /* .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)) { padding-block-start: var(--padding-2xl); } */ .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)):not(:has(cart-discount-component)) { border-block-start: var(--style-border-width) solid var(--color-border); } .cart-drawer__summary .cart-note { @media screen and (min-width: 750px) { margin-block-start: var(--margin-3xs); } } .cart-drawer--empty .cart-drawer__content { text-align: left; min-height: auto; gap: 2.25rem; padding: var(--padding-lg) var(--padding-sm); } .cart-drawer__heading--empty.h3 { display: flex; --font-h3--size: 30px; margin-bottom: unset; } .cart-drawer--empty .close-button { position: relative; top: unset; --minimum-touch-target: 24px; } .cart-drawer--empty .cart-drawer__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; margin-top: 0; } .cart-drawer--empty .cart-drawer__header { justify-content: right; border-bottom: none; padding: 16px 12px 12px 12px; } .cart-drawer:not(:has(.cart-form)) .cart-drawer__content { padding: var(--cart-drawer-padding-desktop); } .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .cart-drawer .cart-items__wrapper { padding-top: var(--padding-2xs); } .cart-drawer__empty-blocks { display: flex; flex-direction: column; gap: var(--gap-lg); margin-top: var(--margin-lg); } .cart-drawer__empty-message { text-align: center; color: var(--color-foreground); } .cart-drawer__empty-button { display: flex; justify-content: center; } .cart-drawer__divider { border: none; border-top: var(--style-border-width) solid var(--color-border); margin: var(--margin-md) 0; } .cart-drawer__note { padding: var(--padding-md); } @media screen and (max-width: 749px) { .cart-drawer__dialog { width: 100%; max-width: 100%; margin: 0; border-left: none; } } /* END_SECTION:cart-drawer */ /* START_SECTION:cart-page-recommendations (INDEX:5) */ /* Hides outer wrapper when JS error path fires (inject mode adds .hidden to inner element) */ .cart-recommendations:has(product-recommendations.hidden) { display: none; } /* Start at the content column, extend to the right viewport edge */ .cart-page-recommendations > .cart-recommendations { grid-column: 2 / -1; padding: 0; } /* Constrain the header to the page content width — right-pad by the page margin */ .cart-page-recommendations .cart-recommendations__header { padding-inline-end: var(--page-margin); } /* Reset heading padding — section spacing bleeds in via block: section in the text snippet */ .cart-page-recommendations .cart-recommendations__heading { padding: 0; } .cart-page-recommendations .cart-recommendations__carousel { --peek-next-slide-size: 3rem !important; } @container resource-list-carousel (max-width: 749px) { .cart-page-recommendations .resource-list__slide { --slide-width: calc( (100% - (var(--resource-list-column-gap) * (var(--cart-rec-columns-mobile, 2) - 1)) - var(--peek-next-slide-size, 0px)) / var(--cart-rec-columns-mobile, 2) ) !important; } } @container resource-list-carousel (max-width: 749px) { body.template-cart .recently-viewed .resource-list__slide { --slide-width: calc( (100% - (var(--resource-list-column-gap-mobile, var(--resource-list-column-gap)) * (var(--column-count-mobile, 2) - 1))) / var(--column-count-mobile, 2) ); } } .cart-page-recommendations .cart-recommendations__heading p { font-size: 30px; @media screen and (min-width: 750px) { font-size: 36px; } } /* END_SECTION:cart-page-recommendations */ /* START_SECTION:cart-recommendations (INDEX:6) */ product-recommendations[data-has-recommendations="false"] { display: none; } /* END_SECTION:cart-recommendations */ /* START_SECTION:cms-accordion (INDEX:7) */ .cms-accordion .text-block, .cms-accordion .accordion, .cms-accordion .group { max-width: var(--content-max-width, 100%); } @media screen and (min-width: 750px) { .cms-accordion { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .cms-accordion { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:cms-accordion */ /* START_SECTION:cms-banner-grid (INDEX:8) */ .cms-banner-grid-section .link, .cms-banner-grid-section a:not(.button, .button-secondary, .button-tertiary) { color: var(--color-foreground); } @media screen and (min-width: 750px) { .cms-banner-grid-section { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .cms-banner-grid-section { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:cms-banner-grid */ /* START_SECTION:cms-editorial-gallery (INDEX:9) */ .cms-editorial-gallery { position: relative; } .cms-editorial-gallery .editorial-gallery__container { position: relative; } .cms-editorial-gallery .editorial-gallery__grid { display: flex; flex-direction: column; gap: var(--editorial-gallery-gap, 16px); min-height: auto; } .cms-editorial-gallery .editorial-gallery__banner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; } .cms-editorial-gallery .editorial-gallery__media { width: 100%; height: auto; aspect-ratio: 692 / 924; } /* Desktop Layouts 1–5 */ @media screen and (min-width: 750px) { /* Shared desktop grid for layouts 1–5, 7–8: horizontal flex row */ .cms-editorial-gallery--layout-1 .editorial-gallery__grid, .cms-editorial-gallery--layout-2 .editorial-gallery__grid, .cms-editorial-gallery--layout-3 .editorial-gallery__grid, .cms-editorial-gallery--layout-4 .editorial-gallery__grid, .cms-editorial-gallery--layout-5 .editorial-gallery__grid, .cms-editorial-gallery--layout-7 .editorial-gallery__grid, .cms-editorial-gallery--layout-8 .editorial-gallery__grid { flex-direction: row; gap: var(--editorial-gallery-gap, 16px); align-items: flex-start; } /* Shared desktop banner for layouts 1–5, 7–8: equal-width flex columns */ .cms-editorial-gallery--layout-1 .editorial-gallery__banner, .cms-editorial-gallery--layout-2 .editorial-gallery__banner, .cms-editorial-gallery--layout-3 .editorial-gallery__banner, .cms-editorial-gallery--layout-4 .editorial-gallery__banner, .cms-editorial-gallery--layout-5 .editorial-gallery__banner, .cms-editorial-gallery--layout-7 .editorial-gallery__banner, .cms-editorial-gallery--layout-8 .editorial-gallery__banner { flex: 1 0 0; width: auto; } /* --- Layout 1: Left Tall --- */ .cms-editorial-gallery--layout-1 .editorial-gallery__banner:nth-child(2) { align-self: stretch; } /* Block-inner carries the 96px inset for layout 1 banner 2. */ .cms-editorial-gallery--layout-1 .editorial-gallery__banner:nth-child(2) .editorial-gallery__block-inner { flex: 1; padding: var(--spacing-spacing-24, 96px); justify-content: center; } /* --- Layout 2: Right Tall --- */ .cms-editorial-gallery--layout-2 .editorial-gallery__banner:nth-child(1) { align-self: stretch; } /* Block-inner carries the 96px inset for layout 2 banner 1 */ .cms-editorial-gallery--layout-2 .editorial-gallery__banner:nth-child(1) .editorial-gallery__block-inner { flex: 1; padding: var(--spacing-spacing-24, 96px); justify-content: center; } /* --- Layout 3: Two Equal */ .cms-editorial-gallery--layout-3 .editorial-gallery__banner { align-self: stretch; } /* --- Layout 4: Left Offset */ .cms-editorial-gallery--layout-4 .editorial-gallery__banner:nth-child(1) { padding-top: var(--spacing-spacing-64, 256px); align-self: stretch; } /* --- Layout 5: Right Offset */ .cms-editorial-gallery--layout-5 .editorial-gallery__banner:nth-child(1) { align-self: stretch; } .cms-editorial-gallery--layout-5 .editorial-gallery__banner:nth-child(2) { padding-top: var(--spacing-spacing-64, 256px); } /* --- Layouts 7 and 8: all banners stretch to match the tallest column height --- */ .cms-editorial-gallery--layout-7 .editorial-gallery__banner, .cms-editorial-gallery--layout-8 .editorial-gallery__banner { align-self: stretch; } /* --- Layout 6: Centered single banner --- */ .cms-editorial-gallery--layout-6 .editorial-gallery__grid { align-items: center; } .cms-editorial-gallery--layout-6 .editorial-gallery__banner { max-width: 798px; width: 100%; } .cms-editorial-gallery--layout-6 .editorial-gallery__block-inner { padding: var(--spacing-spacing-24, 96px); justify-content: center; } /* --- Layout 9: Full-width single banner --- */ .cms-editorial-gallery--layout-9 .editorial-gallery__media { aspect-ratio: 1360 / 924; } } /* Mobile layouts */ @media screen and (max-width: 749px) { /* Stack layout: vertical column of banners, full width */ .cms-editorial-gallery--mobile-stack .editorial-gallery__grid { flex-direction: column; gap: var( --editorial-gallery-mobile-stack-gap, var(--editorial-gallery-gap, 40px) ); } .cms-editorial-gallery--mobile-stack .editorial-gallery__banner { width: 100%; padding: 0; } /* Row layout: banners side by side, equal flex */ .cms-editorial-gallery--mobile-row .editorial-gallery__grid { flex-direction: row; gap: var( --editorial-gallery-mobile-row-gap, var(--editorial-gallery-gap, 16px) ); } .cms-editorial-gallery--mobile-row .editorial-gallery__banner { flex: 1 1 0%; min-width: 0; width: auto; padding: 0; } /* --- Layout 1 mobile: banner 2 --- */ .cms-editorial-gallery--layout-1 .editorial-gallery__banner:nth-child(2) .editorial-gallery__block-inner { flex: 1; padding: var(--spacing-spacing-9, 36px) var(--spacing-spacing-6, 24px); justify-content: center; } /* --- Layout 2 mobile: banner 1 --- */ .cms-editorial-gallery--layout-2 .editorial-gallery__banner:nth-child(1) .editorial-gallery__block-inner { flex: 1; padding: var(--spacing-spacing-9, 36px) var(--spacing-spacing-6, 24px); justify-content: center; } /* --- Layout 6 mobile: block-inner inset padding --- */ .cms-editorial-gallery--layout-6 .editorial-gallery__block-inner { padding: var(--spacing-spacing-9, 36px) var(--spacing-spacing-6, 24px); justify-content: center; } /* --- Layout 4 mobile row: banner 1 (left) --- */ .cms-editorial-gallery--layout-4.cms-editorial-gallery--mobile-row .editorial-gallery__banner:nth-child(1) { padding-top: var(--spacing-spacing-12, 48px); } /* --- Layout 5 mobile row: banner 2 (right) */ .cms-editorial-gallery--layout-5.cms-editorial-gallery--mobile-row .editorial-gallery__banner:nth-child(2) { padding-top: var(--spacing-spacing-12, 48px); } /* --- Layout 8 mobile row: 2×2 wrapping grid --- */ .cms-editorial-gallery--layout-8.cms-editorial-gallery--mobile-row .editorial-gallery__grid { flex-wrap: wrap; row-gap: var( --editorial-gallery-mobile-stack-gap, var(--editorial-gallery-gap, 40px) ); column-gap: var( --editorial-gallery-mobile-row-gap, var(--editorial-gallery-gap, 16px) ); } .cms-editorial-gallery--layout-8.cms-editorial-gallery--mobile-row .editorial-gallery__banner { flex: 0 0 calc( 50% - var( --editorial-gallery-mobile-row-gap, var(--editorial-gallery-gap, 16px) ) / 2 ); } } /* Section spacing */ @media screen and (min-width: 750px) { .cms-editorial-gallery--spacing-above-desktop-sm { margin-block-start: 1rem; } .cms-editorial-gallery--spacing-above-desktop-md { margin-block-start: 2rem; } .cms-editorial-gallery--spacing-above-desktop-lg { margin-block-start: 4rem; } } @media screen and (max-width: 749px) { .cms-editorial-gallery--spacing-above-mobile-sm { margin-block-start: 1rem; } .cms-editorial-gallery--spacing-above-mobile-md { margin-block-start: 2rem; } .cms-editorial-gallery--spacing-above-mobile-lg { margin-block-start: 4rem; } } @media screen and (min-width: 750px) { .cms-editorial-gallery--spacing-below-desktop-sm { margin-block-end: 1rem; } .cms-editorial-gallery--spacing-below-desktop-md { margin-block-end: 2rem; } .cms-editorial-gallery--spacing-below-desktop-lg { margin-block-end: 4rem; } } @media screen and (max-width: 749px) { .cms-editorial-gallery--spacing-below-mobile-sm { margin-block-end: 1rem; } .cms-editorial-gallery--spacing-below-mobile-md { margin-block-end: 2rem; } .cms-editorial-gallery--spacing-below-mobile-lg { margin-block-end: 4rem; } } /* Block limit per layout */ /* Layout 6 (Centered), 9 (Full Width): Show only 1 block */ .cms-editorial-gallery--layout-6 .editorial-gallery__banner:nth-child(n+2), .cms-editorial-gallery--layout-9 .editorial-gallery__banner:nth-child(n+2) { display: none; } /* Layout 1, 2, 3, 4, 5 (Two-column layouts): Show only 2 blocks */ .cms-editorial-gallery--layout-1 .editorial-gallery__banner:nth-child(n+3), .cms-editorial-gallery--layout-2 .editorial-gallery__banner:nth-child(n+3), .cms-editorial-gallery--layout-3 .editorial-gallery__banner:nth-child(n+3), .cms-editorial-gallery--layout-4 .editorial-gallery__banner:nth-child(n+3), .cms-editorial-gallery--layout-5 .editorial-gallery__banner:nth-child(n+3) { display: none; } /* Layout 7 (Three Columns): Show only 3 blocks */ .cms-editorial-gallery--layout-7 .editorial-gallery__banner:nth-child(n+4) { display: none; } /* Layout 8 (Four Columns): Show only 4 blocks */ .cms-editorial-gallery--layout-8 .editorial-gallery__banner:nth-child(n+5) { display: none; } /* Hotspot component */ /* Hide hotspots without products on touch devices */ @media (hover: none) { .cms-editorial-gallery product-hotspot-component.hotspot--hidden-touch { display: none; } } /* Hide dialog on mobile — tooltip is shown instead */ @media screen and (max-width: 749px) { .cms-editorial-gallery product-hotspot-component .hotspot-dialog { display: none; } } .cms-editorial-gallery product-hotspot-component { position: absolute; cursor: pointer; width: var(--button-size); height: var(--button-size); display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; font: inherit; color: inherit; outline: none; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; z-index: var(--layer-flat); } .cms-editorial-gallery product-hotspot-component:has(.hotspot-dialog[open]) { z-index: var(--layer-raised); } .cms-editorial-gallery product-hotspot-component .hotspot-trigger { padding: 0; border: none; } /* Trigger button fills the component */ .cms-editorial-gallery .hotspot-trigger { width: 100%; height: 100%; background: transparent; border-radius: 50%; cursor: pointer; position: relative; } @media screen and (max-width: 749px) { .cms-editorial-gallery .hotspot-trigger { cursor: pointer; -webkit-tap-highlight-color: transparent; } } /* Outer ring */ .cms-editorial-gallery .hotspot-trigger::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--hotspot-size, 16px); height: var(--hotspot-size, 16px); background: var(--hotspot-bg, rgba(17, 17, 17, 0.4)); border-radius: 50%; } /* Inner dot */ .cms-editorial-gallery .hotspot-trigger::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--hotspot-bullseye, #fff); border-radius: 50%; opacity: 0.9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); z-index: 1; } /* Dialog popup — position, dimensions, placement */ .cms-editorial-gallery product-hotspot-component .hotspot-dialog { position: absolute; padding: 8px; border-radius: 2px; border: none; width: 251px; background: #fff; box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); &[data-placement*='bottom'] { --offset-y: 0px; --origin-y: calc(var(--hotspot-size) / 2); top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px)); bottom: unset; } &[data-placement*='top'] { --offset-y: 0px; --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); top: unset; bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px)); } &[data-placement*='left'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5); --origin-x: calc(100% - (var(--hotspot-size) * 0.5)); left: unset; right: 100%; } &[data-placement*='right'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5); --origin-x: calc(var(--hotspot-size) * 0.5); left: 100%; right: unset; } &[data-placement*='center'] { left: 50%; translate: -50% 0; right: unset; } &[data-placement*='center'][data-placement*='bottom'] { --origin-y: calc(var(--hotspot-size) * 0.5); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; top: 100%; bottom: unset; margin: 0; } &[data-placement*='center'][data-placement*='top'] { --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; bottom: 100%; } } .cms-editorial-gallery product-hotspot-component .hotspot-dialog:is(:focus, :focus-visible), .cms-editorial-gallery product-hotspot-component .hotspot-dialog__link:is(:focus, :focus-visible) { outline: none; } /* Downward caret when dialog is above the hotspot */ .cms-editorial-gallery product-hotspot-component .hotspot-dialog[data-placement*='top']::before { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5.2px solid transparent; border-right: 5.2px solid transparent; border-top: 7px solid #fff; pointer-events: none; } /* Two-column dialog layout: image left, content right */ .cms-editorial-gallery .hotspot-dialog__product { display: flex; flex-direction: row; align-items: center; gap: 8px; } .cms-editorial-gallery .hotspot-dialog__product-image, .cms-editorial-gallery .hotspot-dialog svg.hotspot-dialog__placeholder-product-image { width: 36px; height: 46px; aspect-ratio: unset; padding: 0; object-fit: cover; border-radius: 0; flex-shrink: 0; } .cms-editorial-gallery .hotspot-dialog__product-content { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; overflow: hidden; flex: 1; } .cms-editorial-gallery .hotspot-dialog__product-title { font-size: 12px; line-height: 1.1; font-weight: 400; color: rgb(36, 36, 32); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; min-width: 0; } .cms-editorial-gallery .hotspot-dialog__product-price { font-size: 11px; line-height: 1.5; font-weight: 400; color: rgb(36, 36, 32); } /* Full-area link overlay inside the dialog */ .cms-editorial-gallery .hotspot-dialog__link { position: absolute; inset: 0; z-index: var(--layer-flat); } /* Sold-out badge */ .cms-editorial-gallery product-hotspot-component .hotspot-dialog .hotspot-dialog__sold-out-badge { display: flex; width: fit-content; justify-self: flex-end; align-self: flex-end; justify-content: center; align-items: center; font-size: var(--font-body--size); padding: var(--padding-2xs) var(--padding-sm); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); border-radius: var(--border-radius-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-sm); opacity: var(--opacity-80); } /* Dialog transitions */ .cms-editorial-gallery product-hotspot-component .hotspot-dialog { --hotspot-blur: 4px; --hotspot-scale: 0.8; --hotspot-entry-duration: 0.2s; --hotspot-exit-duration: 0.1s; filter: blur(var(--hotspot-blur)); opacity: 0; transform: scale(var(--hotspot-scale)) translate(0, 0); transition-property: display, opacity, filter, transform; transition-duration: var(--hotspot-entry-duration); transition-timing-function: ease; transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12); &[data-closing='true'] { transition-duration: var(--hotspot-exit-duration); transition-timing-function: ease-out; transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25)); } &[data-showing='true'] { transition-behavior: allow-discrete; } } .cms-editorial-gallery product-hotspot-component .hotspot-dialog[open][data-showing='true'] { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0px); } @starting-style { .cms-editorial-gallery product-hotspot-component .hotspot-dialog[open][data-showing='true'] { opacity: 0; filter: blur(var(--hotspot-blur)); transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); } } /* Safety triangles — prevent dialog from closing when moving mouse from trigger to dialog */ .cms-editorial-gallery product-hotspot-component .hotspot-dialog::after { content: ''; position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; pointer-events: all; transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out; scale: var(--scale-x, 1) var(--scale-y, 1); z-index: var(--layer-flat); } .cms-editorial-gallery .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 100% 100%); width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); } .cms-editorial-gallery .hotspot-dialog[open][data-placement*='right']::after { right: 100%; left: unset; } .cms-editorial-gallery .hotspot-dialog[open][data-placement*='left']::after { left: 100%; right: unset; --scale-x: -1; } .cms-editorial-gallery .hotspot-dialog[open][data-placement*='top']::after { --scale-y: -1; } .cms-editorial-gallery .hotspot-dialog[open][data-placement*='center']::after { height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); width: 100%; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25)); --scale-x: 1; --scale-y: 1; } .cms-editorial-gallery .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after { top: unset; bottom: 100%; --scale-y: -1; } .cms-editorial-gallery .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after { top: 100%; bottom: unset; } /* Quick-add button inside dialog */ .cms-editorial-gallery .hotspot-dialog[open] { .quick-add { display: flex; flex-direction: column; justify-content: flex-end; width: auto; height: auto; position: relative; z-index: var(--layer-flat); } .quick-add__button { position: relative; padding-block: 0; box-shadow: none; align-items: center; justify-self: flex-end; height: fit-content; translate: var(--padding-2xs) 0; border: none; color: var(--color-foreground); background-color: var(--color-background); overflow: visible; pointer-events: all; opacity: 1; animation: elementSlideInTop var(--animation-speed) var(--animation-easing); transition-property: translate; transition-duration: var(--animation-speed); transition-timing-function: var(--ease-out-cubic); &::before { content: ''; position: absolute; inset: -2px; border-radius: calc(50px + 2px); border: 2px solid transparent; pointer-events: none; transition-property: border-color; transition-duration: 0s; transition-timing-function: var(--ease-out-cubic); } &:is(:hover, :focus, :focus-visible, :active) { translate: 0 0; transition-delay: var(--animation-speed-slow); &::before { border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15)); transition-duration: var(--animation-speed); transition-delay: var(--animation-speed-slow); } } } } /* END_SECTION:cms-editorial-gallery */ /* START_SECTION:cms-feature-grid (INDEX:10) */ .cms-feature-grid { display: flex; flex-direction: column; row-gap: var(--gap); } .cms-feature-grid--centered .feature-grid-item { align-items: center; text-align: center; } .cms-feature-grid .link { color: var(--color-foreground); } @media screen and (max-width: 749px) { .cms-feature-grid { row-gap: var(--gap-mobile, var(--gap)); } } /* Section spacing via custom properties */ @media screen and (min-width: 750px) { .cms-feature-grid { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .cms-feature-grid { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:cms-feature-grid */ /* START_SECTION:cms-product-hotspots (INDEX:11) */ .cms-product-hotspots .cms-product-hotspots__title-bar:has(*) { margin-bottom: 40px; } .cms-product-hotspots .cms-product-hotspots__media { position: relative; overflow: hidden; aspect-ratio: var(--media-ratio, 16 / 9); } .cms-product-hotspots .cms-product-hotspots__media-link { position: absolute; inset: 0; z-index: 1; } .cms-product-hotspots .cms-product-hotspots__content { display: flex; --content-gap: 16px; gap: var(--content-gap); } @media screen and (min-width: 750px) { .cms-product-hotspots .cms-product-hotspots__media { align-self: stretch; aspect-ratio: unset; flex: 0 0 calc(50% - var(--content-gap) / 2); } .cms-product-hotspots .cms-product-hotspots__products { flex: 1 1 0%; min-width: 0; } .cms-product-hotspots .cms-product-hotspots__content.cms-product-hotspots--banner-left-desktop { flex-direction: row; } .cms-product-hotspots .cms-product-hotspots__content.cms-product-hotspots--banner-right-desktop { flex-direction: row-reverse; } .cms-product-hotspots .cms-product-hotspots__media:only-child { flex: 1 1 100%; } } @media screen and (max-width: 749px) { .cms-product-hotspots .cms-product-hotspots__content { gap: 40px; } .cms-product-hotspots .cms-product-hotspots__content.cms-product-hotspots--banner-top-mobile { flex-direction: column; } .cms-product-hotspots .cms-product-hotspots__content.cms-product-hotspots--banner-bottom-mobile { flex-direction: column-reverse; } .cms-product-hotspots .cms-product-hotspots__media, .cms-product-hotspots .cms-product-hotspots__products { width: 100%; } } .cms-product-hotspots .cms-product-hotspots__grid { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 40px; } .cms-product-hotspots .cms-product-hotspots__grid > * { width: calc(50% - 4px); } @media screen and (min-width: 750px) { .cms-product-hotspots .cms-product-hotspots__grid { row-gap: 16px; } } /* Hotspot container */ .cms-product-hotspots .cms-product-hotspots__hotspots { position: absolute; inset: 0; z-index: var(--layer-flat); overflow: clip; pointer-events: none; } /* Hide hotspots without products on touch devices */ @media (hover: none) { .cms-product-hotspots product-hotspot-component.hotspot--hidden-touch { display: none; } } /* Hotspot button — positioned element with clickable area */ .cms-product-hotspots product-hotspot-component { position: absolute; cursor: pointer; width: var(--button-size); height: var(--button-size); display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; font: inherit; color: inherit; outline: none; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; z-index: var(--layer-flat); pointer-events: auto; } .cms-product-hotspots product-hotspot-component:has(.hotspot-dialog[open]) { z-index: var(--layer-raised); } .cms-product-hotspots product-hotspot-component .hotspot-trigger { padding: 0; border: none; } .cms-product-hotspots .hotspot-dialog__product-content { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; overflow: hidden; flex: 1; } /* Transparent full-area clickable button */ .cms-product-hotspots .hotspot-trigger { width: 100%; height: 100%; background: transparent; border-radius: 50%; cursor: pointer; position: relative; } /* On mobile, ensure trigger is tappable */ @media screen and (max-width: 749px) { .cms-product-hotspots .hotspot-trigger { cursor: pointer; -webkit-tap-highlight-color: transparent; } } /* Outer ring */ .cms-product-hotspots .hotspot-trigger::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--hotspot-size, 16px); height: var(--hotspot-size, 16px); background: var(--hotspot-bg, rgba(17, 17, 17, 0.4)); border-radius: 50%; } /* Inner dot */ .cms-product-hotspots .hotspot-trigger::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--hotspot-bullseye, #fff); border-radius: 50%; opacity: 0.9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); z-index: 1; } /* Dialog positioning */ .cms-product-hotspots product-hotspot-component .hotspot-dialog { position: absolute; padding: 8px; border-radius: 2px; border: none; width: 251px; background: #fff; box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); &[data-placement*='bottom'] { --offset-y: 0px; --origin-y: calc(var(--hotspot-size) / 2); top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px)); bottom: unset; } &[data-placement*='top'] { --offset-y: 0px; --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); top: unset; bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px)); } &[data-placement*='left'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5); --origin-x: calc(100% - (var(--hotspot-size) * 0.5)); left: unset; right: 100%; } &[data-placement*='right'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5); --origin-x: calc(var(--hotspot-size) * 0.5); left: 100%; right: unset; } &[data-placement*='center'] { left: 50%; translate: -50% 0; right: unset; } &[data-placement*='center'][data-placement*='bottom'] { --origin-y: calc(var(--hotspot-size) * 0.5); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; top: 100%; bottom: unset; margin: 0; } &[data-placement*='center'][data-placement*='top'] { --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; bottom: 100%; } } .cms-product-hotspots product-hotspot-component .hotspot-dialog:is(:focus, :focus-visible), .cms-product-hotspots product-hotspot-component .hotspot-dialog__link:is(:focus, :focus-visible) { outline: none; } /* Downward caret when dialog is above the hotspot */ .cms-product-hotspots product-hotspot-component .hotspot-dialog[data-placement*='top']::before { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5.2px solid transparent; border-right: 5.2px solid transparent; border-top: 7px solid #fff; pointer-events: none; } .cms-product-hotspots .hotspot-dialog__product { display: flex; flex-direction: row; align-items: center; gap: 8px; } .cms-product-hotspots .hotspot-dialog__product-image, .cms-product-hotspots .hotspot-dialog svg.hotspot-dialog__placeholder-product-image { width: 36px; height: 46px; aspect-ratio: unset; padding: 0; object-fit: cover; border-radius: 0; flex-shrink: 0; } .cms-product-hotspots .hotspot-dialog__link { position: absolute; inset: 0; z-index: var(--layer-flat); } .cms-product-hotspots .hotspot-dialog__product-title { font-size: 12px; line-height: 1.1; font-weight: 400; color: rgb(36, 36, 32); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; min-width: 0; } .cms-product-hotspots .hotspot-dialog__product-price { font-size: 11px; line-height: 1.5; font-weight: 400; color: rgb(36, 36, 32); } .cms-product-hotspots product-hotspot-component .hotspot-dialog .hotspot-dialog__sold-out-badge { display: flex; width: fit-content; justify-self: flex-end; align-self: flex-end; justify-content: center; align-items: center; font-size: var(--font-body--size); padding: var(--padding-2xs) var(--padding-sm); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); border-radius: var(--border-radius-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-sm); opacity: var(--opacity-80); } /* Dialog transitions */ .cms-product-hotspots product-hotspot-component .hotspot-dialog { --hotspot-blur: 4px; --hotspot-scale: 0.8; --hotspot-entry-duration: 0.2s; --hotspot-exit-duration: 0.1s; filter: blur(var(--hotspot-blur)); opacity: 0; transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); transition-property: display, opacity, filter, transform; transition-duration: var(--hotspot-entry-duration); transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12); &[data-closing='true'] { transition-duration: var(--hotspot-exit-duration); transition-timing-function: ease-out; transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25)); } /* We can only set transition-behavior once we've measured the dialog dimensions */ &[data-showing='true'] { transition-behavior: allow-discrete; } } .cms-product-hotspots product-hotspot-component .hotspot-dialog[open][data-showing='true'] { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0px); } @starting-style { .cms-product-hotspots product-hotspot-component .hotspot-dialog[open][data-showing='true'] { opacity: 0; filter: blur(var(--hotspot-blur)); transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); } } /* Safety triangles for dialogs */ .cms-product-hotspots product-hotspot-component .hotspot-dialog::after { content: ''; position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; pointer-events: all; transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out; scale: var(--scale-x, 1) var(--scale-y, 1); z-index: var(--layer-flat); } .cms-product-hotspots .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 100% 100%); width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); } .cms-product-hotspots .hotspot-dialog[open][data-placement*='right']::after { right: 100%; left: unset; } .cms-product-hotspots .hotspot-dialog[open][data-placement*='left']::after { left: 100%; right: unset; --scale-x: -1; } .cms-product-hotspots .hotspot-dialog[open][data-placement*='top']::after { --scale-y: -1; } .cms-product-hotspots .hotspot-dialog[open][data-placement*='center']::after { height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); width: 100%; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25)); --scale-x: 1; --scale-y: 1; } .cms-product-hotspots .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after { top: unset; bottom: 100%; --scale-y: -1; } .cms-product-hotspots .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after { top: 100%; bottom: unset; } /* Hide quick-add and sold-out badge — not part of the CMS dialog design */ .cms-product-hotspots .hotspot-dialog .quick-add, .cms-product-hotspots .hotspot-dialog .quick-add__button, .cms-product-hotspots .hotspot-dialog .hotspot-dialog__sold-out-badge { display: none; } /* Section spacing (margin) using Figma tokens */ @media screen and (min-width: 750px) { .cms-product-hotspots { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .cms-product-hotspots { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:cms-product-hotspots */ /* START_SECTION:cms-roundel-banner-grid (INDEX:12) */ .roundel-grid-section { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } .roundel-grid__header { margin-block-end: var(--roundel-gap, 12px); } @media screen and (max-width: 749px) { .roundel-grid-section { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .roundel-grid__feed { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--roundel-columns-gap, 4px); row-gap: var(--roundel-rows-gap, 0px); } @media screen and (max-width: 749px) { [data-mobile-layout="stacking"] .roundel-grid__feed { grid-template-columns: 1fr; } } @media screen and (min-width: 750px) { .roundel-grid__feed { grid-template-columns: repeat(var(--roundel-columns, 6), 1fr); column-gap: var(--roundel-columns-gap, 48px); row-gap: var(--roundel-rows-gap, 0px); } } .roundel-grid__feed > * { min-width: 0; } /* END_SECTION:cms-roundel-banner-grid */ /* START_SECTION:cms-testimonial-carousel (INDEX:13) */ .cms-testimonial-carousel { background-color: var(--custom-bg-color, rgb(var(--color-background))); border-radius: var(--corner-radius, 0); overflow: hidden; slideshow-arrows { inset-inline: calc(-1 * var(--padding-inline-start, 0px)) calc(-1 * var(--padding-inline-end, 0px)); } slideshow-arrows .slideshow-control { opacity: 1; animation: none; } slideshow-arrows .slideshow-control:first-of-type { margin-inline-start: var(--padding-xs); } slideshow-arrows .slideshow-control:last-of-type { margin-inline-end: var(--padding-xs); } } @media screen and (min-width: 750px) { .cms-testimonial-carousel { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .cms-testimonial-carousel { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:cms-testimonial-carousel */ /* START_SECTION:cms-text-marquee (INDEX:14) */ marquee-component { display: block; width: 100%; overflow: hidden; } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } .cms-text-marquee .text-block { max-width: none; } /* END_SECTION:cms-text-marquee */ /* START_SECTION:cms-text (INDEX:15) */ @media screen and (min-width: 750px) { .cms-text { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .cms-text { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .cms-text .text-block, .cms-text .cta-buttons { max-width: var(--content-max-width, 100%); } .cms-text a.link { font-size: var(--font-size--md); line-height: 150%; } /* END_SECTION:cms-text */ /* START_SECTION:collection-heading (INDEX:16) */ /* * Column flex + align-items: flex-start + width: fit-content made the accordion * shrink to min-content (~0) when accordion-preview layout lived only in a block stylesheet. */ .accordion.accordion--collection-description { width: 100%; max-width: min(100%, 800px); align-self: stretch; min-width: 0; box-sizing: border-box; } .collection-heading__breadcrumbs { width: 100%; } /* * Scoped padding override — beats the global `.spacing-style` rule in base.css * on mobile (same specificity issue caused Padding (Mobile) to be ignored). * Reads from the CSS variables emitted by the `spacing-style` snippet. */ .section-content-wrapper.section-content-wrapper--collection-heading { padding-block: var(--padding-block-start, 28px) var(--padding-block-end, 0px); } @media screen and (max-width: 749px) { .section-content-wrapper.section-content-wrapper--collection-heading { padding-block: var(--padding-block-start-mob, 16px) var(--padding-block-end-mob, 0px); } } /* SEO pills: hidden by default, shown when accordion is expanded */ .collection-seo-pills { display: none; margin-block-start: var(--gap); } .accordion:has(accordion-preview[data-expanded="true"]) + .collection-seo-pills { --pills-gutter: var(--page-margin); display: flex; align-items: center; gap: var(--gap-md); margin-inline-start: calc(-1 * var(--pills-gutter)); width: calc(100% + var(--pills-gutter)); } .collection-seo-pills__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; } .collection-seo-pills__track { --gap: 8px; display: flex; flex-wrap: nowrap; gap: var(--gap); overflow-x: auto; overflow-y: hidden; padding-inline-end: var(--pills-gutter); scroll-snap-type: x proximity; scroll-padding-inline-start: var(--pills-gutter); -webkit-overflow-scrolling: touch; } .collection-seo-pills__gutter-spacer { flex-shrink: 0; width: calc(var(--pills-gutter) - var(--gap)); } .collection-seo-pills__track::-webkit-scrollbar { display: none; } .collection-seo-pills__track { -ms-overflow-style: none; scrollbar-width: none; } .collection-seo-pills__pill { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; display: flex; padding: 6px 10px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--color-border); background: var(--color-background); border-radius: 9999px; height: 29px } @media (hover: hover) { .collection-seo-pills__pill:hover { background: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } } .collection-seo-pills__pill-title { color: var(--color-foreground); font-family: var(--font-body--family); font-size: 11px; font-style: normal; font-weight: 400; line-height: 1; user-select: none; } .collection-seo-pills__fade { position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none; background: linear-gradient(to right, transparent, rgb(var(--color-background-rgb))); } .collection-seo-pills__arrows { flex-shrink: 0; display: flex; gap: var(--gap-xs); } .collection-seo-pills__arrows--desktop-only { display: none; } .collection-seo-pills__arrows[hidden] { display: none !important; } @media screen and (min-width: 750px) { .collection-seo-pills__arrows--desktop-only:not([hidden]) { display: flex; } } .collection-seo-pills__arrow { width: 18px; height: 18px; cursor: pointer; aspect-ratio: 1/1; } .collection-seo-pills__arrow:disabled { opacity: 0.3; cursor: default; } /* END_SECTION:collection-heading */ /* START_SECTION:collection-links (INDEX:17) */ collection-links-component { --alignment: flex-start; display: grid; align-items: center; grid-gap: var(--gap-3xl); &:has([ratio='portrait']) { --template-column-ratio: 0.8fr; } &:has([ratio='square']) { --template-column-ratio: 1fr; } &:has([ratio='landscape']) { --template-column-ratio: 1.4fr; } &[alignment='center'] { --alignment: center; .text-block { text-align: center; } } &[alignment='right'] { --alignment: flex-end; .text-block { text-align: right; } } &[layout='spotlight'] { position: relative; grid-template-columns: 1fr var(--template-column-ratio); grid-template-areas: 'text image'; @media (min-width: 749px) { &[reverse] { grid-template-areas: 'image text'; grid-template-columns: var(--template-column-ratio) 1fr; } } .collection-links__container { align-items: var(--alignment); } @media (max-width: 749px) { grid-template-columns: 1fr; grid-template-areas: 'text' 'image'; grid-gap: var(--gap-2xl); .collection-links__container { gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl); justify-content: var(--alignment); } } } &[layout='text'] { grid-gap: 0; grid-template-areas: 'text'; .collection-links__container { gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl); flex-wrap: wrap; flex-direction: row; justify-content: var(--alignment); } } } .collection-links__container { display: flex; gap: var(--gap-md); flex-direction: column; } .collection-links__images { overflow: hidden; grid-area: image; @media (max-width: 749px) { image-block { max-width: 100%; } } } /* END_SECTION:collection-links */ /* START_SECTION:collection-list (INDEX:18) */ .section-resource-list__header--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__header--with-arrows > :first-child { flex: 1; min-width: 0; } .section-resource-list__header--with-arrows .group-block-content > *:last-child:not(:first-child) { display: none; } .section-resource-list__header--with-arrows .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* END_SECTION:collection-list */ /* START_SECTION:collection-subcategory-banner (INDEX:19) */ .collection-subcategory-banner { --subcategory-gap: 8px; } .collection-subcategory-banner__inner { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; } .collection-subcategory-banner__track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--subcategory-gap); margin: 0; padding-block: 0; /* Matches page text gutters on full-bleed rows (see _search-suggestions, resource-list-carousel). */ padding-inline: var(--util-page-margin-offset); scroll-padding-inline: var(--util-page-margin-offset); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .collection-subcategory-banner__track::-webkit-scrollbar { display: none; } .collection-subcategory-banner__item { flex: 0 0 106px; width: 106px; max-width: 106px; min-width: 0; scroll-snap-align: start; scroll-snap-stop: normal; } .collection-subcategory-banner__tile { display: flex; flex-direction: column; align-items: center; gap: 8px; /* image ↔ title */ width: 100%; height: 100%; text-decoration: none; color: inherit; border-radius: 2px; box-sizing: border-box; } .collection-subcategory-banner__tile:focus-visible { outline: 2px solid rgb(var(--color-foreground-rgb)); outline-offset: 3px; } .collection-subcategory-banner__media { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(var(--color-foreground-rgb) / 0.06); } .collection-subcategory-banner__image { width: 100%; height: 100%; object-fit: cover; display: block; } .collection-subcategory-banner__placeholder { width: 100%; height: 100%; min-height: 0; background: rgb(var(--color-foreground-rgb) / 0.08); } .collection-subcategory-banner__label { font-family: var(--font-body--family); font-size: 12px; font-weight: 700; line-height: 150%; text-wrap: balance; width: 100%; } @media screen and (max-width: 749px) { /* Avoid double horizontal inset with .spacing-style on mobile (see _horizon/spacing-style.css). */ .collection-subcategory-banner.spacing-style { padding-inline: 0; } } @media screen and (min-width: 750px) { /* Flex (not 1fr grid): fixed-width cards + gap only — grid 1fr columns left huge empty space between 120px-wide items. */ .collection-subcategory-banner__track { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: var(--subcategory-gap); overflow-x: visible; scroll-snap-type: none; padding-block: 0; } .collection-subcategory-banner__item { flex: 0 0 120px; width: 120px; max-width: 120px; min-width: 0; scroll-snap-align: unset; } } @media (forced-colors: active) { .collection-subcategory-banner__tile:focus-visible { outline: 2px solid transparent; } } /* END_SECTION:collection-subcategory-banner */ /* START_SECTION:double-text-media (INDEX:22) */ /* Section spacing */ @media screen and (min-width: 750px) { .double-text-media { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .double-text-media { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* Layout — the .double-text-media__row sits inside column 2 of the .section page grid */ .double-text-media__row { display: flex; flex-direction: column; gap: 40px; @media screen and (min-width: 750px) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } } /* Block layout — default: image left, 1/2 width */ .double-text-media__block { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'media content'; gap: 16px; } /* Desktop media position: right */ @media screen and (min-width: 750px) { .double-text-media__block--media-right-desktop { grid-template-areas: 'content media'; } } /* Mobile media position: right */ @media screen and (max-width: 749px) { .double-text-media__block--media-right-mobile { grid-template-areas: 'content media'; } } /* Full-width section: row spans all columns */ .section--full-width .double-text-media__row { grid-column: 1 / -1; } /* Media area */ .double-text-media__media { grid-area: media; position: relative; overflow: hidden; } .double-text-media__media-image { width: 100%; aspect-ratio: 183 / 258; object-fit: cover; object-position: center; display: block; @media screen and (min-width: 750px) { aspect-ratio: 328 / 448; } } .double-text-media__media-link { display: block; height: 100%; } .double-text-media__placeholder { width: 100%; height: 100%; object-fit: cover; } /* Content area */ .double-text-media .media-with-content__content { grid-area: content; display: flex; flex-direction: column; justify-content: center; align-items: center; } .double-text-media .media-with-content__content > .group-block-content { padding-inline: 20px; } .double-text-media .button, .double-text-media .button-secondary { white-space: nowrap; } /* END_SECTION:double-text-media */ /* START_SECTION:featured-product (INDEX:25) */ .featured-product-section .section-content-wrapper { grid-template-columns: 1fr; display: grid; overflow: hidden; @media (min-width: 750px) { grid-template-columns: 1fr 1fr; } } /* Here I should maybe set the width to auto when the ratio is set to adapt */ .featured-product-section .product-media-container.constrain-height { /* arbitrary offset value based on average theme spacing and header height */ --viewport-offset: 400px; --constrained-min-height: var(--visual-preview--height, 80dvh); @media screen and (min-width: 750px) { --viewport-offset: 300px; } } .featured-product-section .product-grid__card { --padding-block: 20px; --padding-inline: 20px; @media screen and (min-width: 750px) { --padding-block: 40px; --padding-inline: 40px; } } @media screen and (max-width: 749px) { .featured-product-section .media-block { order: -1; } } /* END_SECTION:featured-product */ /* START_SECTION:footer-utilities (INDEX:26) */ .utilities { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--gap); text-wrap: nowrap; color: var(--color-foreground-muted); @media screen and (min-width: 750px) { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: center; gap: var(--gap); align-items: center; text-align: left; } } .utilities a { color: var(--color-foreground-muted); } .utilities > * { text-align: center; @media screen and (min-width: 750px) { text-align: left; justify-self: start; } } @media screen and (max-width: 1023.95px) { .utilities .footer-utilities__country-selector { display: none; } .utilities { flex-direction: column; align-items: center; } .utilities.spacing-style { padding-block-start: var(--padding-block-start-mob); padding-block-end: var(--padding-block-end-mob); padding-inline-start: var(--padding-inline-start-mob, 16px); padding-inline-end: var(--padding-inline-end-mob, 16px); } .utilities--blocks-1, .utilities--blocks-2, .utilities--blocks-3 { display: flex; flex-direction: column; align-items: center; text-align: center; } } /* Dynamic positioning based on number of blocks */ @media screen and (min-width: 1023.95px) { .utilities.spacing-style { min-height: 96px; padding-block-start: var(--padding-block-start); padding-block-end: var(--padding-block-end); padding-inline-start: var(--padding-inline-start, 40px); padding-inline-end: var(--padding-inline-end, 40px); } /* 1 block: Single column, left aligned */ .utilities--blocks-1 { grid-template-columns: 1fr; justify-content: start; } .utilities--blocks-1 > * { justify-self: start; text-align: left; } /* 2 blocks: Two equal columns, start and end aligned */ .utilities--blocks-2 { grid-template-columns: 1fr 1fr; } .utilities--blocks-2 > *:nth-child(2) { justify-self: end; text-align: right; } /* 3 blocks: Three equal columns (1fr 1fr 1fr), start/center/end aligned */ .utilities--blocks-3 { grid-template-columns: 1fr 1fr 1fr; } .utilities--blocks-3 > *:nth-child(1) { justify-self: start; text-align: left; } .utilities--blocks-3 > *:nth-child(2) { justify-self: center; text-align: center; } .utilities--blocks-3 > *:nth-child(3) { justify-self: end; text-align: right; } .utilities .footer-utilities__group-copyright { grid-column: -1; justify-self: end; text-align: right; } } /* END_SECTION:footer-utilities */ /* START_SECTION:footer (INDEX:27) */ .footer-container { display: flex; flex-direction: column; } footer .footer-logo { padding-bottom: var(--gap, 64px); } footer .layout-panel-flex--column { justify-content: flex-start; } @media screen and (min-width: 1024px) { footer .footer-container.spacing-style { padding-block-start: var(--padding-block-start); padding-block-end: var(--padding-block-end); padding-inline-start: var(--padding-inline-start, 40px); padding-inline-end: var(--padding-inline-end, 40px); } .footer-content { display: flex; flex-wrap: wrap; column-gap: var(--gap, 32px); } .footer-content > .footer-logo { width: 100%; } .footer-content > *:not(.footer-logo) { display: flex; flex-direction: column; align-items: flex-start; gap: 0 16px; flex: 1 0 0; } .footer-content > *:not(.footer-logo):first-child { width: 403px; flex: 0 0 403px; } } @media screen and (min-width: 990px) { .footer-content > .group-block:first-of-type > .group-block-content { min-width: 340px; } } footer h2:not(.text-block *), footer h3:not(.text-block *), footer h4:not(.text-block *), footer h5:not(.text-block *) { font-size: 24px; font-weight: 400; line-height: 1.5; } footer .footer-container .footer-content p:not(.text-block *), footer .footer-container .footer-content a:not(.text-block *), footer .footer-container .footer-content li:not(.text-block *) { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--color-foreground-secondary); } footer .menu__item a:hover { color: var(--color-foreground); } footer summary { padding-block: 0; } footer .menu__heading__default { font-size: 24px; font-style: normal; font-weight: 400; } .footer-mobile-country { display: none; padding-top: 16px; } @media screen and (max-width: 1023.95px) { .footer-mobile-country { display: block; } } .footer-localization-mobile { display: contents; } .footer-utilities__country-selector { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; background: transparent; border: none; cursor: pointer; text-align: left; } .footer-utilities__country-selector .country-flag { display: block; width: 18px; height: 18px; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 50%; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); } .footer-utilities__country-selector .country-name { color: inherit; text-decoration: underline; white-space: nowrap; } /* Mobile localization dialog */ /* Footer mobile localization drawer - full-screen slide from left */ .footer-localization-mobile .localization-drawer__dialog { --animation-speed: 0.3s; position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: 100%; max-width: 414px; height: 100%; max-height: 100vh; margin: 0; padding: 0; border: none; border-radius: 0; overflow: hidden; z-index: calc(var(--layer-menu-drawer) + 1); background-color: var(--color-background); } .footer-localization-mobile .localization-drawer__dialog[open] { animation: footer-localization-drawer-slide-in-left var(--animation-speed) var(--ease-out-quad) forwards; } .footer-localization-mobile .localization-drawer__dialog[open].dialog-closing { animation: footer-localization-drawer-slide-out-left var(--animation-speed) var(--ease-out-quad); } @keyframes footer-localization-drawer-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes footer-localization-drawer-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } .footer-localization-mobile .localization-drawer__inner { display: flex; flex-direction: column; height: 100%; background-color: var(--color-background); } .footer-localization-mobile .localization-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--padding-lg) var(--padding-md); min-height: 60px; } .footer-localization-mobile .localization-drawer__heading { margin: 0; font-family: var(--font-heading--family); font-size: 20px; font-weight: 400; line-height: 1.2; flex: 1; color: var(--color-foreground); } .footer-localization-mobile .localization-drawer__close-button { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; cursor: pointer; } .footer-localization-mobile .localization-drawer__close-button .svg-wrapper { width: 18px; height: 18px; color: var(--color-foreground); } .footer-localization-mobile .localization-drawer__content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 0 var(--padding-md) var(--padding-md); } .footer-localization-mobile .localization-drawer__content localization-form-component { display: flex; flex-direction: column; flex: 1; } .footer-localization-mobile .localization-drawer__content .localization-form { display: flex; flex-direction: column; flex: 1; } .footer-localization-mobile .localization-drawer__content .country-filter { padding: 0 0 var(--padding-md); margin-bottom: var(--padding-xs); } .footer-localization-mobile .localization-drawer__content .country-filter__input { border: 1px solid var(--color-border); border-radius: 4px; background-color: var(--color-background); } .footer-localization-mobile .localization-drawer__content .country-filter__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-80)); } .footer-localization-mobile .localization-drawer__content .country-selector-form__wrapper { flex: 1; overflow-y: auto; } .footer-localization-mobile .localization-drawer__content .localization-form__list { padding-inline: 0; padding-block: 0; } .footer-localization-mobile .localization-drawer__content .localization-form__list-item:not([hidden]) { padding: var(--padding-sm) var(--padding-md); margin: 0; border-radius: 0; min-height: 48px; display: flex; align-items: center; gap: var(--padding-sm); } .footer-localization-mobile .localization-drawer__content .localization-form__list-item .country { flex: 1; font-size: var(--font-size-base); } .footer-localization-mobile .localization-drawer__content .localization-form__list-item .localization-form__currency { font-size: var(--font-size-sm); color: inherit; margin-left: auto; } .footer-localization-mobile .localization-drawer__content .language-selector { padding: var(--padding-md); border-top: 1px solid var(--color-border); margin-top: var(--padding-xs); } .footer-localization-mobile .localization-form__list-item[aria-current='true'] { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } .footer-localization-mobile .localization-form__list-item[aria-current='true'] .country { font-weight: 500; } footer .email-signup__input-group { gap: 8px; } footer .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not( .email-signup__input-group--integrated ) { flex-direction: row; } footer .email-signup__input { width: auto; flex: 1; height: 48px; padding: 12px; background: var(--color-input-background); border: var(--border-width) solid var(--color-input-border); border-radius: var(--border-radius); font-size: 14px; line-height: 1; } footer .email-signup__button { width: auto; height: 48px; white-space: nowrap; padding: 16px 14px; font-size: 14px; font-weight: 700; line-height: 1; } @media screen and (max-width: 1023.95px) { footer h2:not(.text-block *), footer h3:not(.text-block *), footer h4:not(.text-block *), footer h5:not(.text-block *), footer .menu__heading__accordion { font-size: 18px; font-style: normal; font-weight: 400; } footer .footer-container.spacing-style { padding-block-start: var(--padding-block-start-mob, 40px); padding-block-end: var(--padding-block-end-mob, 40px); padding-inline-start: var(--padding-inline-start-mob, 16px); padding-inline-end: var(--padding-inline-end-mob, 16px); } /* Apply mobile padding to text blocks at footer's mobile breakpoint */ footer .text-block.spacing-style { padding-block: calc(var(--padding-block-start-mob, var(--padding-block-start)) + var(--section-top-offset, 0px)) var(--padding-block-end-mob, var(--padding-block-end)); padding-inline: var(--padding-inline-start-mob, var(--padding-inline-start)) var(--padding-inline-end-mob, var(--padding-inline-end)); } footer .footer-logo { padding-bottom: var(--gap, 40px); } footer .footer-content > *:not(.menu):not(.group-block:has(.menu)) { padding-bottom: var(--gap, 40px); } footer .footer-content > *:not(.footer-logo) { border-bottom: 1px solid #d4d2cf; width: 100%; } footer .footer-mobile-country { padding-top: var(--gap, 40px); } footer .menu--accordion .menu__heading--empty { display: flex; } footer .menu--accordion .menu__heading__accordion { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 16px; padding-bottom: 16px; } footer .menu--accordion .menu__heading__default { display: none; } footer .menu--accordion .details-content { margin-block-start: 16px; } footer .menu--accordion .menu__details { padding-inline: 0; } footer .menu--accordion summary { pointer-events: auto; cursor: pointer; padding: 0; } footer .menu__heading__toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 9px; background: white; border: 1px solid #ececec; border-radius: 2px; flex-shrink: 0; } footer .menu__heading__toggle svg { width: 18px; height: 18px; } footer .icon-minus { --icon-stroke-width: 0.5px; } footer .menu--accordion details[open] .icon-caret { transform: rotate(180deg); } footer .menu--caret .icon-plus { display: none; } footer .menu--plus .icon-caret { display: none; } } /* END_SECTION:footer */ /* START_SECTION:get-the-look-carousel (INDEX:28) */ .section-resource-list__content--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__content--with-arrows > .section-resource-list__content-blocks { flex: 1; min-width: 0; } .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* Hide section when no products resolve */ section:has([data-has-products='false']) { display: none; } /* END_SECTION:get-the-look-carousel */ /* START_SECTION:get-the-look-drawer (INDEX:29) */ get-the-look-drawer { display: contents; } /* === Desktop: Right-side drawer === */ .get-the-look-drawer__dialog { position: fixed; overflow: hidden; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; height: 100%; margin: 0 0 0 auto; padding: 0; border-left: var(--style-border-drawer); box-shadow: var(--shadow-drawer); background: var(--color-background); } .get-the-look-drawer__dialog:modal { max-height: 100dvh; overflow-y: hidden; } .get-the-look-drawer__layout { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .get-the-look-drawer__header { display: flex; gap: 8px; align-items: center; padding: 16px 12px; flex-shrink: 0; } .get-the-look-drawer__title { display: contents; } .get-the-look-drawer__header .text-block { flex: 1; min-width: 0; display: block; padding: 0; margin: 0; width: auto; } .get-the-look-drawer__close { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; color: var(--color-foreground); flex-shrink: 0; } .get-the-look-drawer__close .svg-wrapper { width: 13.2px; height: 13.2px; } .get-the-look-drawer__body { overflow-y: auto; flex: 1; padding: 0 12px 16px; } .get-the-look-drawer__body .product-media-container img { aspect-ratio: 171/214; } .get-the-look-drawer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 8px; list-style: none; margin: 0; padding: 0; } /* Desktop: hide mobile-only nav arrows */ .get-the-look-drawer__nav { display: none; } .get-the-look-drawer__nav-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: none; cursor: pointer; color: var(--color-foreground); } .get-the-look-drawer__nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .get-the-look-drawer__nav-btn svg { width: 20px; height: 20px; } /* Section hiding when no products */ get-the-look-drawer:has([data-has-products='false']) { display: none; } /* === Mobile: Bottom-sheet drawer === */ @media screen and (max-width: 749px) { .get-the-look-drawer__dialog { /* Override .dialog-modal mobile defaults (base.css) */ height: auto; max-height: 50vh; width: 100%; max-width: 100%; padding: 0; /* Bottom positioning */ margin: auto 0 0 0; inset-block-end: 0; inset-block-start: auto; inset-inline: 0; /* Bottom-sheet styling */ border-left: none; border-radius: var(--style-border-radius-popover, 8px) var(--style-border-radius-popover, 8px) 0 0; } /* Override dialog-drawer X-axis animation to Y-axis for bottom-sheet slide-up. Reuses the existing move-and-fade keyframe — no custom @keyframes needed. */ .get-the-look-drawer__dialog[open] { --start-x: 0; --start-y: 100%; --end-x: 0; --end-y: 0px; } .get-the-look-drawer__dialog[open].dialog-closing { --start-x: 0; --start-y: 0; --end-x: 0; --end-y: 100%; } /* Suppress dialog-modal backdrop slide-in animation (use fade only) */ .get-the-look-drawer__dialog[open]::backdrop { animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards; } /* Mobile: show nav arrows in header */ .get-the-look-drawer__nav { display: flex; gap: 8px; } /* Mobile: horizontal scroll layout */ .get-the-look-drawer__grid { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .get-the-look-drawer__grid::-webkit-scrollbar { display: none; } .get-the-look-drawer__card { flex: 0 0 auto; width: calc((100% - 12px) / 2.25); scroll-snap-align: start; } .get-the-look-drawer__body { overflow-y: hidden; overflow-x: hidden; padding: 0 0 24px 12px; } .get-the-look-drawer__body .product-media-container img { aspect-ratio: 167/209; } } /* === Focus styles (WCAG AA) === */ .get-the-look-drawer__close:focus-visible, .get-the-look-drawer__nav-btn:focus-visible { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } /* END_SECTION:get-the-look-drawer */ /* START_SECTION:header-announcements (INDEX:30) */ .announcement-bar { border-block-end: none; } .announcement-bar__wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--gap-lg); } .section--full-width .announcement-bar__wrapper { padding-inline: var(--page-margin, 40px); } .announcement-bar__localization { flex-shrink: 0; } @media screen and (max-width: 989px) { .announcement-bar__localization { display: none; } } .announcement-bar__localization .dropdown-localization__button { display: flex; align-items: center; gap: var(--gap-2xs, 6px); padding: 0; margin: 0; text-decoration: none; } .announcement-bar__localization .currency-symbol { font-weight: 500; } .announcement-bar__localization .country-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } /* Announcement dialog positioning - shared styles in localization-dialog class */ .announcement-localization__dialog { top: 50px; left: 40px; } .announcement-bar__slider { display: flex; flex-direction: row; align-items: center; position: relative; flex: 1; @media screen and (max-width: 989px) { grid-column: 1 / -1; } } .announcement-bar__slides { width: calc(100% - var(--button-size) * 2); max-width: 680px; margin-inline: auto; @media screen and (max-width: 989px) { display: grid; grid: [stack] auto / [stack] auto; } @media screen and (min-width: 990px) { display: flex; gap: var(--gap-2xl, 2rem); width: 100%; max-width: 100%; justify-content: center; align-items: center; } } @media screen and (max-width: 989px) { .announcement-bar__slides > * { grid-area: stack; } } .announcement-bar__slide { place-content: center; @media screen and (max-width: 989px) { transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; &[aria-hidden='true'] { opacity: 0; visibility: hidden; } } @media screen and (min-width: 990px) { flex: 0 1 auto; white-space: nowrap; &[aria-hidden='true'] { opacity: 1; visibility: visible; } } } .announcement-bar__text:first-child { margin: 0; } .announcement-bar__text { cursor: default; } .announcement-bar__text .announcement-bar__link { text-decoration: none; color: inherit; cursor: pointer; } .announcement-bar__text .announcement-bar__link:hover { text-decoration: none; color: inherit; } /* END_SECTION:header-announcements */ /* START_SECTION:header-promo-banner (INDEX:31) */ /* Hide promo banner when header has transparent background */ .header-section:has(.header[transparent]) ~ .shopify-section:has(.promo-banner) { display: none; } /* END_SECTION:header-promo-banner */ /* START_SECTION:header (INDEX:32) */ body { --header-height: 60px; --header-group-height: var(--header-height); --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */ } .header { display: block; } .header[transparent] { --language-button-background-color: transparent; --language-button-border-color: transparent; /* used to apply transparency to .header__row, will only ever be transparent or unset */ --header-bg-color: transparent; /* used to display the appropriate logo based on transparency state */ --header-logo-display: none; --header-logo-inverse-display: block; position: absolute; top: 0; left: 0; right: 0; /* transparent color scheme on .header should never apply its background color */ background-color: transparent; z-index: var(--layer-overlay); &[transparent='not-sticky'][data-sticky-state='active'], /* Only show opaque background when hovering over menu items with children (mega menu) Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */ &:has(.mega-menu__list:hover), &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])), &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) { --header-logo-display: unset; --header-logo-inverse-display: unset; --header-bg-color: unset; --color-foreground: inherit; --color-foreground-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; .header__row { /* Faster transition for "in" animation */ transition: color var(--animation-values-fast), border-color var(--animation-values-fast), background-color var(--animation-values-fast); } } .header__row { /* Slower transition for "out" animation */ transition: color var(--animation-values-slow), border-color var(--animation-values-slow), background-color var(--animation-values-slow); } } :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active']) .header__row:not( :has( .mega-menu__list:hover, .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]), .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating]) ) ) { /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */ --color-foreground: inherit; --color-foreground-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-primary-button-background: inherit; --color-primary-button-text: inherit; } /* Cart bubble background should be black when header is transparent */ :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active']) .cart-bubble__background { background-color: var(--color-black); } .header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row, .header--inherit-color-scheme-on-menu-open:has( .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]) ) .header__row, .header--inherit-color-scheme-on-menu-open:has( .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating]) ) .header__row { --color-foreground: inherit; --color-foreground-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; } .header-section { position: relative; z-index: var(--layer-heightened); } #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-sticky); } .header[data-sticky-state] { transition: opacity var(--animation-speed) var(--animation-easing); opacity: 1; } .header[data-sticky-state='active'] { view-transition-name: sticky-header; } .header[data-sticky-state='idle'], .header[data-sticky-state='active'][data-animating] { opacity: 0; } .header__row { position: relative; /* will default to bg from its color scheme unless --header-bg-color is transparent */ background-color: var(--header-bg-color, var(--color-background)); } .header__row--top:not(.divider--page-width), .header__row--top.divider--page-width .header__columns, .header__row--bottom { border-bottom: var(--border-bottom-width) solid var(--color-border); } @media screen and (max-width: 989px) { .header__row--top:not(.divider--page-width), .header__row--top.divider--page-width .header__columns { border-bottom-width: var(--border-bottom-width-mobile); } } .header__row.divider--page-width:not(.section--page-width) .header__columns { @media screen and (min-width: 990px) { 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: 989px) { display: contents; } } .header__column--left, .header__column--center { gap: var(--gap-3xl); 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: 990px) { --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: 989px) { --header-template-columns: var(--header-mobile-bookend) 0 1fr auto auto; grid-template-areas: 'leftA leftB center rightA rightB'; grid-column: span 3; column-gap: 0.5rem; align-items: center; padding-block: 0; padding-inline: 0 var(--padding-sm); .header-logo { grid-area: center; justify-self: start; margin-inline-end: var(--gap-3xl); } &:not(:has(header-actions)) .search-action { grid-area: leftB; } &:not(:has(.account-actions)) .search-action { grid-area: rightA; } .search-action { grid-area: rightA; margin-inline-start: 1rem; } header-actions { grid-area: rightB; } } } /* Single column layout if there are no columns within */ .header__columns:not(:has(.header__column)) { grid-template-columns: 1fr; } /* Set header paddings based on height setting */ .header { --header-padding: var(--padding-sm); --font-paragraph--line-height: 1; contain: layout style; } .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; } } /* When the header is transparent, add a margin to a potential header-section below it */ .header-section:has(.header[transparent]) + .shopify-section { margin-top: var(--header-height); } /* When the header is transparent, and when there is no header-section below it, offset the first main-section with * the height of the header */ main > .shopify-section:first-child .section:not(.disable-section-top-offset) { &.spacing-style, .spacing-style { --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean)); /* Any nested sections should not be offset */ :is(.spacing-style, .inherit-spacing) { --section-top-offset: 0px; } } /* Make sticky content immediately stick to the top of the page */ .sticky-content { margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1); } } /* Prevent desktop menu flashing at 750–989px before JS initialises */ @media screen and (min-width: 750px) and (max-width: 989px) { .header-menu { display: none !important; } .header__drawer { display: block !important; } } /* Optimize layout performance for hidden menus */ .header-menu .menu-list__submenu { content-visibility: auto; contain-intrinsic-size: 0px 500px; } /* Force visibility when open/animating to prevent layout issues */ .header-menu details[open] .menu-list__submenu, .header-menu .menu-list__submenu[data-active] { content-visibility: visible; } .menu-list__list-item:has(a[aria-expanded='true']), .menu-list__list-item.border-active { border-bottom: 1px solid var(--color-selected-variant-border, #111); } /* END_SECTION:header */ /* START_SECTION:help-category-grid (INDEX:33) */ .help-category-grid { display: flex; flex-direction: column; gap: 28px; } .help-category-grid__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media screen and (max-width: 749px) { .help-category-grid { gap: 24px; } .help-category-grid__feed { grid-template-columns: 1fr; } } /* END_SECTION:help-category-grid */ /* START_SECTION:help-centre-content (INDEX:34) */ .help-centre-content__inner { display: grid; grid-template-columns: 330px 1fr; gap: 64px; } .help-centre-content__article-list { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .help-centre-content__article-list > .shopify-block:not(.rte) { display: contents; } .help-centre-content__page-title { font-family: var(--font-heading--family); font-weight: 400; font-size: 2.25rem; line-height: 110%; color: var(--color-foreground); margin: 0; } .help-centre-content__sidebar { min-width: 0; } .help-still-need-help { margin-top: 40px; padding: 24px 0; } .help-still-need-help__heading { font-family: var(--font-heading--family); font-weight: 400; font-size: var(--font-size--2xl, 1.5rem); line-height: 1.2; color: var(--color-foreground); margin: 0 0 16px; } @media screen and (max-width: 749px) { .help-centre-content__inner { grid-template-columns: 1fr; gap: 40px; } .help-centre-content__article-list { order: 1; gap: 40px; } .help-centre-content__sidebar { order: 2; width: 100%; } } /* END_SECTION:help-centre-content */ /* START_SECTION:help-quick-actions (INDEX:35) */ .help-quick-actions { display: flex; flex-direction: column; gap: 24px; @media screen and (min-width: 750px) { gap: 28px; } } .help-quick-actions__feed { display: grid; grid-template-columns: repeat(var(--action-count, 4), 1fr); gap: 8px; } @media screen and (max-width: 749px) { .help-quick-actions__feed { grid-template-columns: 1fr; } } .help-quick-actions__heading.text-card-header__title { font-size: 30px; line-height: 110%; @media screen and (min-width: 750px) { font-size: 36px; } } /* END_SECTION:help-quick-actions */ /* START_SECTION:hero-banner-mosaic (INDEX:36) */ .hero-banner-block-section { position: relative; padding-block-start: var(--padding-block-start, 0); padding-block-end: var(--padding-block-end, 0); z-index: 0; isolation: isolate; } @media screen and (max-width: 749px) { .hero-banner-block-section { padding-block-start: var(--padding-block-start-mob, var(--padding-block-start, 0)); padding-block-end: var(--padding-block-end-mob, var(--padding-block-end, 0)); } } .hero-banner-block { display: grid; gap: var(--layout-gap, 8px); width: 100%; overflow: hidden; } .hero-banner-block slideshow-slide { display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; min-height: var(--row-min-height, 300px); } .hero-banner-block slideshow-slide .slide__content { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; animation: none !important; opacity: 1 !important; } /* ========================================== DESKTOP LAYOUT - 12-column grid ========================================== */ @media screen and (min-width: 750px) { .hero-banner-block--per-block-layout { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(var(--row-min-height, 300px), auto); grid-auto-flow: dense; } /* Column spans - Width options */ .hero-banner-block--per-block-layout slideshow-slide[data-col-span='2'] { grid-column: span 2; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='3'] { grid-column: span 3; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='4'] { grid-column: span 4; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='5'] { grid-column: span 5; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='6'] { grid-column: span 6; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='7'] { grid-column: span 7; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='8'] { grid-column: span 8; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='9'] { grid-column: span 9; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='10'] { grid-column: span 10; } .hero-banner-block--per-block-layout slideshow-slide[data-col-span='12'] { grid-column: span 12; } /* Row spans */ .hero-banner-block--per-block-layout slideshow-slide[data-row-span='2'] { grid-row: span 2; } .hero-banner-block--per-block-layout slideshow-slide[data-row-span='3'] { grid-row: span 3; } .hero-banner-block--per-block-layout slideshow-slide[data-row-span='4'] { grid-row: span 4; } } /* ========================================== MOBILE LAYOUT - Stack or 2-column ========================================== */ @media screen and (max-width: 749px) { .hero-banner-block { display: flex; flex-wrap: wrap; gap: var(--layout-gap, 8px); } .hero-banner-block slideshow-slide { min-height: 300px; width: 100%; } .hero-banner-block slideshow-slide[data-mobile-width='50'] { width: calc(50% - var(--layout-gap, 8px) / 2); } } /* Section spacing */ @media screen and (min-width: 750px) { .hero-banner-block--spacing-above-desktop-sm { margin-block-start: 1rem; } .hero-banner-block--spacing-above-desktop-md { margin-block-start: 2rem; } .hero-banner-block--spacing-above-desktop-lg { margin-block-start: 4rem; } } @media screen and (max-width: 749px) { .hero-banner-block--spacing-above-mobile-sm { margin-block-start: 1rem; } .hero-banner-block--spacing-above-mobile-md { margin-block-start: 2rem; } .hero-banner-block--spacing-above-mobile-lg { margin-block-start: 4rem; } } @media screen and (min-width: 750px) { .hero-banner-block--spacing-below-desktop-sm { margin-block-end: 1rem; } .hero-banner-block--spacing-below-desktop-md { margin-block-end: 2rem; } .hero-banner-block--spacing-below-desktop-lg { margin-block-end: 4rem; } } @media screen and (max-width: 749px) { .hero-banner-block--spacing-below-mobile-sm { margin-block-end: 1rem; } .hero-banner-block--spacing-below-mobile-md { margin-block-end: 2rem; } .hero-banner-block--spacing-below-mobile-lg { margin-block-end: 4rem; } } /* Content below media layout - hide content inside grid slides */ .hero-banner-block--content-below-media slideshow-slide .slide__content { display: none; } /* Content below container - hide images, show only content */ .hero-banner-block__content-below { padding-block-start: 1rem; } .hero-banner-block__content-below slideshow-slide { display: block; width: 100%; min-height: auto; overflow: visible; content-visibility: visible; } .hero-banner-block__content-below .slide__image-container { display: none; } .hero-banner-block__content-below .slide__content { display: block; position: static; height: auto; pointer-events: auto; } .hero-banner-block__content-below .slide__content .group-block-content { height: auto; min-height: auto; } /* Rounded corners */ .hero-banner-block slideshow-slide .slide__image-container--rounded { border-radius: var(--corner-radius, 0); overflow: hidden; } /* END_SECTION:hero-banner-mosaic */ /* START_SECTION:hero-banner-split (INDEX:37) */ .hero-banner-split-section { position: relative; padding-block-start: var(--padding-block-start, 0); padding-block-end: var(--padding-block-end, 0); z-index: 0; isolation: isolate; } .hero-banner-split { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--spacing-sizing-grid-grid-2-xl-product-gap, 8px); width: 100%; justify-content: center; overflow: hidden; } .hero-banner-split slideshow-slide { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: visible; } .hero-banner-split slideshow-slide .slide__content { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; animation: none !important; opacity: 1 !important; } /* Mobile layout - stack vertically */ @media screen and (max-width: 749px) { .hero-banner-split { flex-direction: column; flex-wrap: wrap; } .hero-banner-split slideshow-slide { width: 100%; min-height: 400px; } } /* Desktop layout - widths based on banner count (flex-basis handles sizing) */ @media screen and (min-width: 750px) { .hero-banner-split.hero-banner-split--count-2 slideshow-slide { flex: 1 1 50%; } .hero-banner-split.hero-banner-split--count-3 slideshow-slide { flex: 1 1 33.333%; } .hero-banner-split.hero-banner-split--count-4 slideshow-slide { flex: 1 1 25%; } } /* Height variations based on slide_height setting */ @media screen and (min-width: 750px) { /* Small height */ .hero-banner-split-section[data-slide-height="small"] .hero-banner-split slideshow-slide { height: 450px; } /* Medium height - default 606px */ .hero-banner-split-section[data-slide-height="medium"] .hero-banner-split slideshow-slide { height: 606px; } /* Large height */ .hero-banner-split-section[data-slide-height="large"] .hero-banner-split slideshow-slide { height: 750px; } /* Auto height - adapts to content */ .hero-banner-split-section[data-slide-height="auto"] .hero-banner-split slideshow-slide { height: auto; min-height: 400px; } } /* Section spacing - uses CSS custom properties set inline */ .hero-banner-split-section { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } @media screen and (min-width: 750px) { .hero-banner-split-section { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } /* Content below media layout */ .hero-banner-split--content-below-media slideshow-slide { display: grid; grid-template-rows: auto auto !important; height: auto !important; min-height: 400px; } .hero-banner-split--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) { position: static; } /* Mobile: auto height for images */ @media screen and (max-width: 749px) { .hero-banner-split--content-below-media slideshow-slide .slide__image-container { height: auto; min-height: 300px; } .hero-banner-split--content-below-media slideshow-slide .slide__image-container > :is(.slide__image, .slide__video) { position: relative; height: auto; } } /* Desktop: use slide height setting from customizer */ @media screen and (min-width: 750px) { .hero-banner-split-section[data-slide-height="small"] .hero-banner-split--content-below-media slideshow-slide .slide__image-container { height: 450px; min-height: 450px; } .hero-banner-split-section[data-slide-height="medium"] .hero-banner-split--content-below-media slideshow-slide .slide__image-container { height: 606px; min-height: 606px; } .hero-banner-split-section[data-slide-height="large"] .hero-banner-split--content-below-media slideshow-slide .slide__image-container { height: 750px; min-height: 750px; } .hero-banner-split-section[data-slide-height="auto"] .hero-banner-split--content-below-media slideshow-slide .slide__image-container { height: auto; min-height: 400px; } .hero-banner-split--content-below-media slideshow-slide .slide__image-container > :is(.slide__image, .slide__video) { position: relative; width: 100%; height: 100%; object-fit: cover; } /* Ensure consistent padding for content area */ .hero-banner-split--content-below-media slideshow-slide .slide__content { padding-block-start: 1rem; min-height: auto !important; height: auto !important; } /* Force outer group-block-content to not expand */ .hero-banner-split--content-below-media slideshow-slide > .slide__content > .group-block-content { height: fit-content !important; min-height: auto !important; justify-content: flex-start !important; align-items: flex-start !important; } /* Override group block heights to ensure consistent spacing - only for direct children */ .hero-banner-split--content-below-media slideshow-slide > .slide__content > .group-block-content > .group-block, .hero-banner-split--content-below-media slideshow-slide > .slide__content > .group-block-content > .group-block.group-block--height-custom, .hero-banner-split--content-below-media slideshow-slide > .slide__content > .group-block-content > .group-block.group-block--height-fill { height: auto !important; min-height: auto !important; } } /* Rounded corners */ .hero-banner-split slideshow-slide .slide__image-container--rounded { border-radius: var(--corner-radius, 0); overflow: hidden; } /* END_SECTION:hero-banner-split */ /* START_SECTION:hero-banner (INDEX:38) */ /* Override shared slideshow min-height with hero-banner-specific Figma-calibrated values. slideshow.liquid still generates --slide-min-height on — intentionally superseded. */ .hero-banner-section slideshow-slides { min-height: var(--hero-min-height); } @media screen and (min-width: 750px) { .hero-banner-section slideshow-slides { min-height: var(--hero-min-height-desktop); } } .hero-banner-section { position: relative; } .hero-banner-section slideshow-arrows .slideshow-control:first-of-type { margin-inline-start: var(--padding-xs); } .hero-banner-section slideshow-arrows .slideshow-control:last-of-type { margin-inline-end: var(--padding-xs); } /* Section spacing */ @media screen and (min-width: 750px) { .hero-banner--spacing-above-desktop-sm { margin-block-start: 1rem; } .hero-banner--spacing-above-desktop-md { margin-block-start: 2rem; } .hero-banner--spacing-above-desktop-lg { margin-block-start: 4rem; } } @media screen and (max-width: 749px) { .hero-banner--spacing-above-mobile-sm { margin-block-start: 1rem; } .hero-banner--spacing-above-mobile-md { margin-block-start: 2rem; } .hero-banner--spacing-above-mobile-lg { margin-block-start: 4rem; } } @media screen and (min-width: 750px) { .hero-banner--spacing-desktop-sm { margin-block-end: 1rem; } .hero-banner--spacing-desktop-md { margin-block-end: 2rem; } .hero-banner--spacing-desktop-lg { margin-block-end: 4rem; } } @media screen and (max-width: 749px) { .hero-banner--spacing-mobile-sm { margin-block-end: 1rem; } .hero-banner--spacing-mobile-md { margin-block-end: 2rem; } .hero-banner--spacing-mobile-lg { margin-block-end: 4rem; } } /* Content-below-media layout */ slideshow-component.hero-banner--content-below-media slideshow-slide { display: grid; grid-template-rows: auto 1fr; } .hero-banner--content-below-media .hero-banner-slide__image-container { position: relative; height: auto; } .hero-banner--content-below-media .hero-banner-slide__content { position: static; } .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__image, .hero-banner--content-below-media .hero-banner-slide__image-container > picture > img { position: relative; height: auto; } .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__video-wrapper--desktop, .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__video-wrapper--mobile { position: relative; height: auto; } /* Media height → Aspect ratio: slide / media box sizes from custom ratio (mobile vs desktop) */ .hero-banner-section--media-aspect-ratio slideshow-slides { min-height: 0; } .hero-banner-section--media-aspect-ratio .hero-banner--content-on-media slideshow-slide { max-height: none; aspect-ratio: var(--hero-banner-aspect-mobile, 16 / 9); width: 100%; } @media screen and (min-width: 750px) { .hero-banner-section--media-aspect-ratio .hero-banner--content-on-media slideshow-slide { aspect-ratio: var(--hero-banner-aspect-desktop, 16 / 9); } } .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container { aspect-ratio: var(--hero-banner-aspect-mobile, 16 / 9); width: 100%; overflow: hidden; } @media screen and (min-width: 750px) { .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container { aspect-ratio: var(--hero-banner-aspect-desktop, 16 / 9); } } .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > picture { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__image, .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__video-wrapper--desktop, .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__video-wrapper--mobile { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__video-wrapper--desktop > video, .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__video-wrapper--mobile > video { width: 100%; height: 100%; object-fit: cover; } .hero-banner-section--media-aspect-ratio .hero-banner--content-below-media .hero-banner-slide__image-container > .hero-banner-slide__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* END_SECTION:hero-banner */ /* START_SECTION:hero-carousel (INDEX:39) */ .hero-carousel-section { position: relative; } .hero-carousel-section slideshow-arrows .slideshow-control:first-of-type { margin-inline-start: var(--padding-xs); } .hero-carousel-section slideshow-arrows .slideshow-control:last-of-type { margin-inline-end: var(--padding-xs); } /* Section spacing */ @media screen and (min-width: 750px) { .hero-carousel--spacing-above-desktop-sm { margin-block-start: 1rem; } .hero-carousel--spacing-above-desktop-md { margin-block-start: 2rem; } .hero-carousel--spacing-above-desktop-lg { margin-block-start: 4rem; } } @media screen and (max-width: 749px) { .hero-carousel--spacing-above-mobile-sm { margin-block-start: 1rem; } .hero-carousel--spacing-above-mobile-md { margin-block-start: 2rem; } .hero-carousel--spacing-above-mobile-lg { margin-block-start: 4rem; } } @media screen and (min-width: 750px) { .hero-carousel--spacing-desktop-sm { margin-block-end: 1rem; } .hero-carousel--spacing-desktop-md { margin-block-end: 2rem; } .hero-carousel--spacing-desktop-lg { margin-block-end: 4rem; } } @media screen and (max-width: 749px) { .hero-carousel--spacing-mobile-sm { margin-block-end: 1rem; } .hero-carousel--spacing-mobile-md { margin-block-end: 2rem; } .hero-carousel--spacing-mobile-lg { margin-block-end: 4rem; } } /* Content below media layout */ slideshow-component.hero-carousel--content-below-media slideshow-slide { display: grid; grid-template-rows: auto 1fr !important; } .hero-carousel--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) { position: static; } .hero-carousel--content-below-media slideshow-slide .slide__image-container { height: auto; } .hero-carousel--content-below-media slideshow-slide .slide__image-container > :is(.slide__image, .slide__video) { position: relative; height: auto; } .hero-carousel--with-hints--mobile-with-hints { gap: var(--slideshow-gap, 0); grid-column: 1 / -1; } .hero-carousel--with-hints--mobile-with-hints slideshow-arrows .slideshow-control { transition: opacity 0.3s ease; } slideshow-component.hero-carousel--with-hints--mobile-with-hints:has( slideshow-slide:first-child:not([aria-hidden='true']) ) > slideshow-container > slideshow-arrows .slideshow-control--previous, slideshow-component.hero-carousel--with-hints--mobile-with-hints:has( slideshow-slide:last-child:not([aria-hidden='true']) ) > slideshow-container > slideshow-arrows .slideshow-control--next { animation: none; opacity: 0; pointer-events: none; } @media screen and (max-width: 749px) { .hero-carousel--with-hints--mobile-with-hints slideshow-slides { padding-inline: var(--page-margin); } .hero-carousel--with-hints--mobile-with-hints slideshow-slide { width: 96%; } .hero-carousel--with-hints--mobile-with-hints slideshow-slides { gap: min(var(--slideshow-gap, 0), 10px); } } @media screen and (min-width: 750px) { .hero-carousel--with-hints { gap: var(--slideshow-gap, 0); grid-column: 1 / -1; } .hero-carousel--with-hints slideshow-slides { padding-inline: var(--page-margin); gap: var(--slideshow-gap, 0); } .hero-carousel--with-hints slideshow-slide { width: calc((100vw - var(--page-margin) * 2)); overflow: hidden; } .hero-carousel--with-hints slideshow-arrows .slideshow-control { transition: opacity 0.3s ease; } slideshow-component.hero-carousel--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true'])) > slideshow-container > slideshow-arrows .slideshow-control--previous, slideshow-component.hero-carousel--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true'])) > slideshow-container > slideshow-arrows .slideshow-control--next { animation: none; opacity: 0; pointer-events: none; } } /* END_SECTION:hero-carousel */ /* START_SECTION:hero-product-carousel (INDEX:40) */ .cms-hero-banner-wrapper { --hero-height-offset: 0px; } /* Header offset calculation for first section */ body:has(> #header-group > .header-section > #header-component) .cms-hero-banner-wrapper:first-child { --hero-height-offset: var(--header-group-height, 0); } .cms-hero-banner { position: relative; min-height: calc(var(--hero-min-height) - var(--hero-height-offset)); } .cms-hero-banner[data-shopify-visual-preview] { --hero-min-height: 600px; min-height: 600px; } .cms-hero-banner__container { position: relative; min-height: inherit; } .cms-hero-banner__media-wrapper { position: absolute; inset: 0; overflow: hidden; } .cms-hero-banner__image, .cms-hero-banner__video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cms-hero-banner__video-wrapper { position: absolute; inset: 0; } /* Desktop/Mobile media visibility */ .cms-hero-banner__image--mobile, .cms-hero-banner__video-wrapper--mobile { display: none; } .cms-hero-banner__image--desktop, .cms-hero-banner__video-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .cms-hero-banner__image--desktop, .cms-hero-banner__video-wrapper--desktop { display: none; } .cms-hero-banner__image--mobile, .cms-hero-banner__video-wrapper--mobile { display: block; } /* Mobile-only images */ .cms-hero-banner__image--mobile-only { display: block; } } @media screen and (min-width: 750px) { .cms-hero-banner__image--mobile-only { display: none; } } .cms-hero-banner__placeholder { width: 100%; height: 100%; object-fit: cover; } /* Overlay layers */ .cms-hero-banner__overlay { position: absolute; inset: 0; pointer-events: none; } .cms-hero-banner__overlay--top-gradient { background: linear-gradient( to bottom, var(--top-gradient-start), var(--top-gradient-end) 50% ); z-index: var(--layer-flat); } .cms-hero-banner__overlay--bottom-gradient { background: linear-gradient( to top, var(--bottom-gradient-start), var(--bottom-gradient-end) 50% ); z-index: var(--layer-flat); } .cms-hero-banner__overlay--full { background: var(--overlay-color); z-index: var(--layer-flat); } /* Banner link wrapper */ .cms-hero-banner__banner-link { position: absolute; inset: 0; z-index: var(--layer-base); cursor: pointer; } /* Content wrapper for CTAs and carousel */ .cms-hero-banner__content-wrapper { position: absolute; inset: 0; z-index: var(--layer-raised); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .cms-hero-banner__content-wrapper > * { pointer-events: auto; } /* CTA buttons wrapper */ .cms-hero-banner__cta-wrapper { display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem 2rem 2rem; align-items: center; justify-content: center; flex: 0 0 auto; order: 2; } /* Product Carousel */ .cms-hero-banner__carousel-wrapper { width: 100%; max-width: 100%; padding-left: 1.94%; padding-right: 0; order: 1; } .cms-hero-banner__carousel { display: block; width: 100%; } .cms-hero-banner__carousel slideshow-container { display: block; width: 100%; } /* Desktop adjustments */ @media screen and (min-width: 750px) { /* Page-width mode handled by .section grid system */ } /* Mobile adjustments */ @media screen and (max-width: 749px) { .cms-hero-banner__content-wrapper { position: absolute; padding: 0; } .cms-hero-banner__carousel-wrapper { position: absolute; bottom: 98px; left: 0; right: 0; padding-left: 5.8%; padding-right: 0; } .cms-hero-banner__cta-wrapper { position: absolute; bottom: 32px; left: 0; right: 0; padding: 0 1rem; } /* Mobile carousel dimensions */ .cms-hero-banner__carousel slideshow-slide { width: 133px; height: 166px; } .cms-hero-banner__carousel slideshow-slides { --slideshow-gap: 4px; gap: 4px; } .cms-hero-banner__carousel-slide { width: 133px; height: 166px; } .cms-hero-banner__image-placeholder { width: 133px; height: 166px; } } /* Carousel slide sizing */ .cms-hero-banner__carousel slideshow-slides { --slideshow-gap: var(--carousel-gap, 8px); display: flex !important; gap: var(--carousel-gap, 8px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .cms-hero-banner__carousel slideshow-slide { flex: 0 0 auto; scroll-snap-align: start; width: 208px; height: 260px; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Hide disabled carousel controls */ .cms-hero-banner__carousel .slideshow-control[disabled] { display: none; } /* Carousel arrow positioning */ .cms-hero-banner__carousel slideshow-arrows { padding-inline: 0; } .cms-hero-banner__carousel .slideshow-control--next { margin-inline-start: auto; } /* Image styling within carousel */ .cms-hero-banner__carousel-slide { position: relative; width: 208px; height: 260px; overflow: hidden; } .cms-hero-banner__image-link { display: block; width: 100%; height: 100%; } .cms-hero-banner__image-link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.95), inset 0 0 0 6px rgba(0, 0, 0, 0.9); position: relative; z-index: 1; } .cms-hero-banner__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .cms-hero-banner__image-placeholder { position: relative; width: 208px; height: 260px; display: flex; align-items: center; justify-content: center; background-color: var(--color-background-secondary, #f5f5f5); } .cms-hero-banner__image-placeholder svg { width: 100%; height: 100%; object-fit: cover; } /* END_SECTION:hero-product-carousel */ /* START_SECTION:hero (INDEX:41) */ .hero-wrapper { --hero-height-offset: 0px; } /* Being extra specific in the selector for performance reasons */ body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child { --hero-height-offset: var(--header-group-height, 0); } .hero { position: relative; min-height: calc(var(--hero-min-height) - var(--hero-height-offset)); } .hero[data-shopify-visual-preview] { --hero-min-height: 600px; min-height: 600px; } .hero__container { position: relative; overflow: hidden; border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity)); min-height: inherit; align-items: var(--vertical-alignment-mobile); justify-content: var(--horizontal-alignment); z-index: var(--layer-base); @media screen and (min-width: 750px) { align-items: var(--vertical-alignment); } } .hero__content-wrapper.page-width { grid-column: 2 / 3; } .hero__content-wrapper { position: relative; inset: 0; z-index: var(--layer-flat); } .hero__content-wrapper .group-block-content { position: relative; } .hero__media-wrapper { position: absolute; inset: 0; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(var(--hero-media-count, 1), 1fr); } .hero--auto .hero__image, .hero--auto .hero__video { aspect-ratio: var(--hero-media-aspect-ratio); } .hero--no-blocks-auto-height { :is(.hero__image, .hero__video) { width: 100%; aspect-ratio: auto; } .hero__media-wrapper { /* When there are no blocks and the height is auto, allow the image to appear. */ position: relative; } } .hero__image, .hero__video, .hero__video-poster { height: 100%; width: 100%; object-fit: cover; object-position: center center; overflow: hidden; position: relative; z-index: var(--layer-base); } /* Mobile/Desktop media visibility */ .hero__image--mobile, .hero__video--mobile, .hero__video-wrapper--mobile { display: none; } .hero__image--desktop, .hero__video--desktop, .hero__video-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .hero__image--desktop, .hero__video--desktop, .hero__video-wrapper--desktop { display: none; } .hero__image--mobile, .hero__video--mobile, .hero__video-wrapper--mobile { display: block; } .hero__media-wrapper { grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr); } /* Mobile stacking */ .hero--stack-mobile .hero__media-wrapper { grid-template-columns: 1fr; grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1))); } } .hero__video-wrapper--desktop { position: relative; } .hero__video-poster--desktop { position: absolute; } .hero__link { position: absolute; inset: 0; grid-column: 1 / -1; } .hero__media-wrapper, .hero__content-wrapper { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } .hero__content-wrapper--design-mode * { pointer-events: auto; } .hero[data-blur-shadow='true'] { --blurred-reflection-filter-saturate: saturate(1.5); --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem; --blurred-reflection-filter-blur: blur(20px); --blurred-reflection-scale: scale(2, 1.25); --blurred-reflection-padding-block-end: 60px; } .hero[data-blur-shadow='true'] .hero__container::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .hero__blurred-image { position: absolute; inset: 0; z-index: -1; mask-image: var(--blurred-reflection-mask-image); filter: var(--blurred-reflection-filter-saturate); pointer-events: none; transform: translateY(50%); overflow: hidden; } .hero__blurred-image--desktop { display: none; @media screen and (min-width: 750px) { display: block; } } .hero__blurred-image--mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .hero__blurred-image img, .hero__blurred-image svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: var(--blurred-reflection-filter-blur); opacity: var(--blur-opacity); transform: var(--blurred-reflection-scale); padding-block-end: var(--blurred-reflection-padding-block-end); &:not(:only-child) { width: 50%; &:last-child { right: 0; left: auto; } } } /* Respect user preference for reduced motion — pause autoplaying videos */ @media (prefers-reduced-motion: reduce) { .hero__video { animation-play-state: paused; } } /* END_SECTION:hero */ /* START_SECTION:layered-slideshow (INDEX:42) */ .layered-slideshow-section { position: relative; } layered-slideshow-component { display: block; width: 100%; } .layered-slideshow__container { --radius: calc(var(--corner-radius, 1) * 1rem); --button-width: 56px; --border-color: var(--color-background); --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width)); --active-panel-width: calc(100cqi - var(--inactive-tabs-width)); width: 100%; position: relative; container-type: inline-size; border-radius: var(--radius); overflow: hidden; } .layered-slideshow__container:not([size='auto']) { height: 100%; } .layered-slideshow__container[size='auto'] { height: auto; } @media screen and (min-width: 750px) { layered-slideshow-component { min-height: var(--layered-min-height-desktop, 0px); } } .layered-slideshow__tablist { display: grid; grid-template-columns: var(--active-tab); position: absolute; inset: 0; height: 100%; pointer-events: none; z-index: 10; } .layered-slideshow__tablist button { width: var(--button-width); height: 100%; pointer-events: all; opacity: 0; cursor: grab; border: none; background: transparent; padding: 0; position: relative; outline: none; transition: opacity 0.2s ease; } .layered-slideshow__tablist button:active { cursor: grabbing; } .layered-slideshow__tablist button[aria-selected='true'] { cursor: default; } .layered-slideshow__tablist button:focus-visible { opacity: 1; } .layered-slideshow__container[data-dragging] { cursor: grabbing; } .layered-slideshow__container[data-instant-transitions], .layered-slideshow__container:is([data-dragging], [data-instant-transitions]) :is( .layered-slideshow__tablist, .layered-slideshow__panels, .layered-slideshow__panel-content, .layered-slideshow__content ) { transition: none; } .layered-slideshow__panels { display: grid; grid-template-columns: var(--active-tab); height: 100%; overflow: hidden; } [role='tabpanel'] { position: relative; height: 100%; min-width: var(--button-width); border-radius: var(--radius); z-index: calc(var(--total-tabs) - var(--index)); } [role='tabpanel']:first-child .layered-slideshow__panel-content { width: var(--active-panel-width); border-left: var(--border-width) solid var(--border-color); } [role='tabpanel']:not(:first-child) .layered-slideshow__content { padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px)); } .layered-slideshow__panel-content { border: var(--border-width) solid var(--border-color); border-left: none; border-radius: var(--radius); position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; width: calc(var(--active-panel-width) + (var(--radius) * 2)); } .layered-slideshow__panel-content :is(img, video, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Video poster visibility - poster shows initially and hides when panel becomes active */ .layered-slideshow__video-poster { z-index: 1; } .layered-slideshow__video { z-index: 0; } /* When panel is active, hide poster so video is visible */ [role='tabpanel']:not([inert]) .layered-slideshow__video-poster { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .layered-slideshow__video-poster { transition: opacity 0.3s ease; } } .layered-slideshow__content { height: 100%; position: relative; z-index: 1; } .layered-slideshow__content > * { margin: auto; } .layered-slideshow__content.background-transparent { background-color: transparent; } /* Shared transitions (desktop and mobile) */ @media (prefers-reduced-motion: no-preference) { .layered-slideshow__panels, .layered-slideshow__tablist { transition-property: grid-template-columns, grid-template-rows; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .layered-slideshow__content { opacity: 0; transform: translateY(0.5lh); transition: opacity 0.48s, transform 0.48s; } [role='tabpanel']:not([inert]) .layered-slideshow__content { opacity: 1; transform: translateY(0); transition-delay: 0.24s; } } @media screen and (max-width: 749px) { .layered-slideshow__container { --button-height: 44px; --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height)); } .layered-slideshow__container:not([size='auto']) { --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height)); --active-panel-height: var(--layered-panel-height-mobile, 260px); min-height: var(--layered-total-height); height: var(--layered-total-height); } .layered-slideshow__container[size='auto'] { height: auto; } .layered-slideshow__tablist { grid-template-rows: var(--active-tab); grid-template-columns: 1fr; grid-auto-flow: row; } .layered-slideshow__tablist button { width: 100%; height: var(--button-height); } .layered-slideshow__panels { grid-template-rows: var(--active-tab); grid-template-columns: 1fr; grid-auto-flow: row; } [role='tabpanel'] { min-height: var(--button-height); width: 100%; height: 100%; position: relative; z-index: calc(var(--total-tabs) - var(--index) + 10); } [role='tabpanel']:first-child .layered-slideshow__panel-content { width: 100%; height: var(--active-panel-height); border-top: var(--border-width) solid var(--border-color); left: 0; right: 0; border-left: var(--border-width) solid var(--border-color); } .layered-slideshow__panel-content { position: absolute; border: var(--border-width) solid var(--border-color); border-radius: var(--radius); box-sizing: border-box; width: 100%; /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */ height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width))); top: unset; left: 0; right: 0; bottom: 0; overflow: hidden; } [role='tabpanel']:not(:first-child) .layered-slideshow__panel-content { border-top: none; } [role='tabpanel']:not(:first-child) { margin-top: calc(var(--border-width) * -1); } .layered-slideshow__content { padding-inline-start: var(--padding-inline-start, 0px); padding-inline-end: var(--padding-inline-end, 0px); } /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */ [role='tabpanel']:not(:first-child) .layered-slideshow__content { padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px)); padding-inline-start: var(--padding-inline-start, 0px); } } /* END_SECTION:layered-slideshow */ /* START_SECTION:logo-banner-grid (INDEX:43) */ .logo-banner-grid-section { display: flex; flex-direction: column; gap: var(--logo-banner-grid-title-gap, 0px); } .logo-banner-grid-section .link, .logo-banner-grid-section a:not(.button, .button-secondary, .button-tertiary) { color: var(--color-foreground); } .logo-banner-grid { display: grid; grid-template-columns: var(--logo-banner-grid-columns-mobile, repeat(2, 1fr)); gap: var(--logo-banner-grid-row-gap, 4px) var(--logo-banner-grid-gap, 8px); } @media screen and (min-width: 750px) { .logo-banner-grid { grid-template-columns: var(--logo-banner-grid-columns, repeat(6, 1fr)); gap: var(--logo-banner-grid-row-gap, 8px) var(--logo-banner-grid-gap, 8px); } .logo-banner-grid-wrapper { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .logo-banner-grid-wrapper { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } /* END_SECTION:logo-banner-grid */ /* START_SECTION:logo-marquee (INDEX:44) */ marquee-component { display: block; width: 100%; overflow: hidden; } .logo-marquee { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } @media screen and (max-width: 749px) { .logo-marquee { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_SECTION:logo-marquee */ /* START_SECTION:logo (INDEX:45) */ .logo-section { width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end)); max-width: 100%; max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end)); font-size: var(--logo-height); display: flex; @media screen and (max-width: 750px) { max-height: calc( var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end) ); font-size: var(--logo-height-mobile, var(--logo-height)); width: calc( var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end) ); } } .logo-section--center { margin-inline: auto; } .logo-section--flex-end { margin-inline-start: auto; } .logo-section--flex-start { margin-inline-end: auto; } .logo-section__image-wrapper { display: flex; width: 100%; max-width: 100%; max-height: 100%; } .logo-section__image { object-fit: contain; width: 100%; } /* END_SECTION:logo */ /* START_SECTION:lookbook (INDEX:46) */ .lookbook-section .lookbook { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: 100%; max-width: 100%; box-sizing: border-box; grid-column: 1 / -1; @media screen and (min-width: 750px) { display: flex; flex-direction: column; gap: 16px; } } .lookbook__row { display: contents; @media screen and (min-width: 750px) { display: grid; grid-template-columns: repeat(var(--lookbook-cols, 1), minmax(0, 1fr)); width: 100%; gap: 16px; } } .lookbook__slot { min-width: 0; } .lookbook__cell { width: 100%; min-height: 0; } .lookbook__media { position: relative; width: 100%; overflow: hidden; aspect-ratio: 3 / 4; background: rgb(var(--color-foreground-rgb) / 0.04); } .lookbook__row--single .lookbook__media { aspect-ratio: 16 / 9; } .lookbook__image, .lookbook__video { display: block; width: 100%; height: 100%; object-fit: cover; } .lookbook__video:focus-visible { outline: 3px solid rgb(var(--color-foreground-rgb)); outline-offset: 2px; } .lookbook__empty { margin: 0; padding: 1.5rem; text-align: center; color: rgb(var(--color-foreground-rgb) / 0.7); } /* END_SECTION:lookbook */ /* START_SECTION:main-blog-post-enriched (INDEX:48) */ .main-blog-post__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gap-md, 1rem); width: 100%; } .main-blog-post__header-primary { flex: 1 1 12rem; min-width: 0; } .main-blog-post__share { flex: 0 0 auto; } .blog-post-comments-container { width: 100%; max-width: var(--normal-content-width); margin: 0 auto; } .blog-post-comments { display: flex; flex-direction: column; gap: var(--gap-3xl); } .blog-post-comment__author { display: flex; align-items: center; gap: var(--gap-2xs); margin-top: var(--margin-md); font-size: var(--font-size--body-sm); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .blog-post-comments-pagination { display: flex; justify-content: center; gap: var(--gap-2xs); } .blog-post-comments-pagination, .blog-post-comments-pagination a { color: var(--color-foreground); } .blog-post-comments-pagination .current { color: var(--color-foreground); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a { display: block; padding: var(--padding-2xs) var(--padding-xs); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a:hover { border-bottom: 1px solid var(--color-foreground); } /* END_SECTION:main-blog-post-enriched */ /* START_SECTION:main-blog-post-events (INDEX:49) */ .main-blog-post__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gap-md, 1rem); width: 100%; } .main-blog-post--lookbooks .blog-post-title { text-align: left; } .main-blog-post__header-primary { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .main-blog-post__share { flex: 0 0 auto; } .blog-post-comments-container { width: 100%; max-width: var(--normal-content-width); margin: 0 auto; } .blog-post-comments { display: flex; flex-direction: column; gap: var(--gap-3xl); } .blog-post-comment__author { display: flex; align-items: center; gap: var(--gap-2xs); margin-top: var(--margin-md); font-size: var(--font-size--body-sm); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .blog-post-comments-pagination { display: flex; justify-content: center; gap: var(--gap-2xs); } .blog-post-comments-pagination, .blog-post-comments-pagination a { color: var(--color-foreground); } .blog-post-comments-pagination .current { color: var(--color-foreground); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a { display: block; padding: var(--padding-2xs) var(--padding-xs); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a:hover { border-bottom: 1px solid var(--color-foreground); } /* END_SECTION:main-blog-post-events */ /* START_SECTION:main-blog-post-lookbooks (INDEX:50) */ .main-blog-post__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gap-md, 1rem); width: 100%; } .main-blog-post--lookbooks .blog-post-title { text-align: left; } .main-blog-post__header-primary { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .main-blog-post__share { flex: 0 0 auto; } .blog-post-comments-container { width: 100%; max-width: var(--normal-content-width); margin: 0 auto; } .blog-post-comments { display: flex; flex-direction: column; gap: var(--gap-3xl); } .blog-post-comment__author { display: flex; align-items: center; gap: var(--gap-2xs); margin-top: var(--margin-md); font-size: var(--font-size--body-sm); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .blog-post-comments-pagination { display: flex; justify-content: center; gap: var(--gap-2xs); } .blog-post-comments-pagination, .blog-post-comments-pagination a { color: var(--color-foreground); } .blog-post-comments-pagination .current { color: var(--color-foreground); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a { display: block; padding: var(--padding-2xs) var(--padding-xs); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a:hover { border-bottom: 1px solid var(--color-foreground); } /* END_SECTION:main-blog-post-lookbooks */ /* START_SECTION:main-blog-post (INDEX:51) */ .main-blog-post__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gap-md, 1rem); width: 100%; } .main-blog-post__header-primary { flex: 1 1 12rem; min-width: 0; } .main-blog-post__share { flex: 0 0 auto; } .blog-post-comments-container { width: 100%; max-width: var(--normal-content-width); margin: 0 auto; } .blog-post-comments { display: flex; flex-direction: column; gap: var(--gap-3xl); } .blog-post-comment__author { display: flex; align-items: center; gap: var(--gap-2xs); margin-top: var(--margin-md); font-size: var(--font-size--body-sm); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .blog-post-comments-pagination { display: flex; justify-content: center; gap: var(--gap-2xs); } .blog-post-comments-pagination, .blog-post-comments-pagination a { color: var(--color-foreground); } .blog-post-comments-pagination .current { color: var(--color-foreground); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a { display: block; padding: var(--padding-2xs) var(--padding-xs); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a:hover { border-bottom: 1px solid var(--color-foreground); } /* END_SECTION:main-blog-post */ /* START_SECTION:main-blog (INDEX:52) */ /** * Blog posts page layout */ .blog-posts { --columns-gap: 8px; --rows-gap: 40px; @media screen and (min-width: 750px) { --rows-gap: 64px; } } .blog-posts-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; width: 100%; column-gap: var(--columns-gap); row-gap: var(--rows-gap); padding-block: 40px; /* Prevents iOS Safari scroll jump when Load more appends posts */ overflow-anchor: none; @media screen and (max-width: 749px) { grid-column: 1 / -1; } @media screen and (min-width: 750px) { padding-block: 64px; } &.blog-posts-container--lookbooks { grid-template-columns: repeat(4, 1fr); } } .blog-post-item { grid-column: span 2; @media screen and (max-width: 749px) { grid-column: span 6; } } .blog-posts-container--lookbooks { .blog-post-item { grid-column: span 2; @media screen and (max-width: 749px) { grid-column: span 4; } } } /** * When there's no featured image, article-card uses a placeholder — show a frame like before. */ .blog-post-item { border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20)); padding: 0 1rem 1rem; } .blog-post-item:has(.article-card__image) { border: none; padding: 0; } /* END_SECTION:main-blog */ /* START_SECTION:main-cart (INDEX:53) */ .cart-page { --cart-font-size--2xs: var(--font-size--2xs); --cart-font-size--xs: var(--font-size--xs); --cart-font-size--sm: var(--font-size--sm); --cart-font-size--md: var(--font-size--md); --cart-font-size--lg: var(--font-size--lg); --cart-font-size--xl: var(--font-size--xl); --cart-font-size--2xl: var(--font-size--2xl); display: grid; grid-template-columns: 1fr; gap: 0 var(--padding-5xl); } .cart-page--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; } .cart-page--empty .cart-page__title { margin-top: 40px; } .cart-page__bag-blocks { grid-column: 1; display: flex; flex-direction: column; gap: var(--gap-xs); width: 100%; } .cart-page__bag-blocks .promotional-banner { margin-top: var(--margin-lg); } .cart-page .cart-items__table .cart-items__size-dropdown { left: unset; right: 0; } .cart-page .cart-items__table .cart-item__error-text { padding-top: 2px; } .cart-page__bag-blocks > .shopify-block:not(:has(*)) { display: none; } .cart-page--empty .cart-page__bag-blocks { display: flex; justify-content: center; margin-top: 0; } .cart-page--empty .cart-page__bag-blocks .promotional-banner { margin-top: 0; } .cart-page__right-container .cart-free-delivery { display: none; } .cart-page--empty .cart-title { text-align: center; } .cart-page--empty .cart-title h1{ font-size: 36px; line-height: 110%; @media screen and (min-width: 750px) { font-size: var(--font-size--5xl); } } .cart-page__left-container { max-width: 768px; } .cart-page__right-container { max-width: 390px; } .cart-page__summary { padding-top: var(--padding-xl); } @media screen and (min-width: 750px) { .section--page-width .cart-page:has(.cart__container--extend) { grid-template-columns: 1fr minmax( var(--sidebar-width), calc((100vw - var(--page-width)) / 2 + var(--sidebar-width)) ); } .cart__container--extend { height: 100%; } } @media screen and (min-width: 1024px) { .cart-page { display: flex; align-items: flex-start; justify-content: center; } .cart-page__left-container { flex: 1 1 0; min-width: 0; } .cart-page__right-container { flex: 0 0 390px; } .cart-page__summary { padding-top: 0; position: relative; } } @media screen and (min-width: 1400px) { .cart-page { gap: 64px; } } /* Empty state: full-width left container overrides the cart-layout max-width constraint */ .cart-page--empty .cart-page__left-container { width: 100%; max-width: 100%; } /* Defensive: restore align-items: center overridden by the 1024px .cart-page rule */ @media screen and (min-width: 1024px) { .cart-page--empty { align-items: center; } } /* Empty state: centre CTA button and match Figma title-group → button gap (24px) */ .cart-page--empty .cart-title__cta { display: block; width: fit-content; margin-inline: auto; margin-block-start: 24px; } /* Empty state: match Figma heading → subtitle gap (8px) */ .cart-page--empty .cart-title__subtitle { margin-block-start: 8px; line-height: 150%; color: var(--color-foreground-secondary); } .cart-page .cart-items__wrapper { padding-top: var(--padding-2xl); } /* END_SECTION:main-cart */ /* START_SECTION:main-collection (INDEX:55) */ .main-collection-grid { grid-column: var(--grid-column--mobile); @media screen and (min-width: 750px) { grid-column: var(--grid-column--desktop); } } .collection-wrapper:has(.facets-block-wrapper--full-width), .collection-wrapper:has(.collection-wrapper--full-width) { @media screen and (min-width: 750px) { grid-column: 1 / -1; grid-template-columns: var(--page-margin) repeat( var(--centered-column-number), minmax(0, calc((100% - var(--page-margin) * 2) / var(--centered-column-number))) ) var(--page-margin); } } .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid { @media screen and (min-width: 750px) { grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number); } } .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) { @media screen and (min-width: 750px) { grid-column: 1 / -1; grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr; } } :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); } } :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); } } /* Make product media go edge-to-edge by using negative margins */ :is(.collection-wrapper--full-width) .card-gallery, :is(.collection-wrapper--full-width-on-mobile) .card-gallery { @media screen and (max-width: 749px) { margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start))); margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end))); } } /* END_SECTION:main-collection */ /* START_SECTION:marquee (INDEX:57) */ marquee-component { display: block; width: 100%; overflow: hidden; } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_SECTION:marquee */ /* START_SECTION:media-with-content (INDEX:58) */ .section--page-width { &.media-with-content { grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right'; @media screen and (min-width: 750px) { /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */ --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 12) * 7) calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin); grid-template-areas: 'margin-left media content margin-right'; } } &.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 12) * 5) calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin); grid-template-areas: 'margin-left content media margin-right'; } } &.media-with-content--medium { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin); } } &.media-with-content--narrow.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 3) * 2) calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin); } } &.media-with-content--narrow { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 3) calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin); } } } .section--full-width { &.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 2.5fr 3.5fr; grid-template-areas: 'content media'; } } &.media-with-content--medium { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 1fr 1fr; } } &.media-with-content--narrow { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 2fr 4fr; } } &.media-with-content--narrow.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 4fr 2fr; } } } /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */ .media-with-content.media-with-content--media-extend { grid-template-columns: var(--media-with-content-grid-columns); grid-template-areas: 'media media media' 'margin-left content margin-right'; @media screen and (min-width: 750px) { grid-template-areas: 'media media content margin-right'; } } .media-with-content--media-extend.media-with-content--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media media'; } } .media-with-content--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media media'; } } .media-with-content { --media-with-content-grid-columns: var(--full-page-grid-with-margins); grid-template-columns: var(--media-with-content-grid-columns); grid-template-areas: 'media media media' 'content content content'; @media screen and (min-width: 750px) { --media-with-content-grid-columns: 3.5fr 2.5fr; /* Default desktop layout is wide media, on the left, in full page section */ grid-template-areas: 'media content'; } .media-block { grid-area: media; } .media-with-content__content { grid-area: content; } /* Inner blocks spacing */ .media-with-content__content > .group-block-content { padding-inline: var(--page-margin); padding-block: calc(2 * var(--page-margin)); @media screen and (min-width: 750px) { padding-block: var(--page-margin); } } &.section--page-width .media-with-content__content > .group-block-content { padding-inline: 0; @media screen and (min-width: 750px) { padding-inline-start: var(--page-margin); } } &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content { padding-inline-end: var(--page-margin); padding-inline-start: 0; } } .media-with-content[data-shopify-visual-preview] { --hero-min-height: 500px; min-height: 500px; } /* END_SECTION:media-with-content */ /* START_SECTION:password (INDEX:60) */ .section-password { flex-grow: 1; display: flex; } .password-main-content { flex: 1; display: flex; flex-direction: column; } .password-content { text-align: center; } .password-enter { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); padding-block: var(--padding-xl); } .password-enter__powered-by { margin: 0; display: flex; align-items: center; gap: var(--padding-xs); height: 1em; a { display: flex; } svg { display: inline; height: 1.3em; color: var(--color-foreground); } } .password-enter__links { display: flex; align-items: center; gap: var(--gap-2xl); @media screen and (max-width: 749px) { flex-direction: column; gap: var(--gap-sm); } } .password-enter__admin-link { margin: 0; } .password-enter__button { height: var(--minimum-touch-target); background-color: transparent; color: var(--color-primary); cursor: pointer; text-decoration: underline; &:hover { color: var(--color-primary-hover); text-decoration: none; } } .password-dialog { max-width: 100vw; max-height: calc(100svh - var(--header-group-height, 0)); width: 100vw; height: calc(100svh - var(--header-group-height, 0)); border: none; transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete, overlay var(--animation-speed) allow-discrete; &::backdrop { display: none; } } .password-dialog[open] { opacity: 1; top: 0; left: 0; } @starting-style { .password-dialog[open] { opacity: 0; } } .password-dialog:not([open]) { opacity: 0; } @starting-style { .password-dialog:not([open]) { opacity: 1; } } .password-dialog__close-button { cursor: pointer; } .password-dialog__header { position: absolute; top: 0; right: 0; padding: var(--padding-lg); z-index: var(--layer-raised); } .password-dialog__content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--padding-lg); height: 100%; transition: transform var(--animation-values); } .password-dialog__content .email-signup__message { padding-block-start: var(--padding-xl); } .password-dialog[open] .password-dialog__content { transform: translateY(0); } @starting-style { .password-dialog[open] .password-dialog__content { transform: translateY(1em); } } .password-dialog:not([open]) .password-dialog__content { transform: translateY(1em); } @starting-style { .password-dialog:not([open]) .password-dialog__content { transform: translateY(0); } } .storefront-password-form { max-width: 400px; width: 100%; } .email-signup__input-group, .password-dialog__submit-button { width: 100%; @media screen and (min-width: 750px) { width: auto; } } /* END_SECTION:password */ /* START_SECTION:plp-banner (INDEX:61) */ /* Banner: block padding on container, inline padding on content (Mob 8px/48px/16px, Dsk 16px/40px/40px) */ .plp-banner { padding-block-start: 8px; padding-block-end: 48px; } .plp-banner__content { padding-inline: 16px; } @media screen and (min-width: 750px) { .plp-banner { padding-block-start: 16px; padding-block-end: 40px; } .plp-banner__content { padding-inline: 40px; } } /* END_SECTION:plp-banner */ /* START_SECTION:predictive-search (INDEX:63) */ input[type='search']::-webkit-search-decoration { -webkit-appearance: none; /* stylelint-disable-line */ } .predictive-search-dropdown { display: flex; flex-direction: column; position: relative; top: 0; left: 0; right: 0; z-index: var(--layer-base); } .search-action .predictive-search { z-index: calc(var(--layer-header-menu) + 2); } .search-action .search-modal .predictive-search { z-index: var(--layer-window-overlay); } .header__column--right .predictive-search-form__content-wrapper { right: 0; left: unset; } .search-modal .predictive-search-form__content-wrapper { width: 100%; @media screen and (min-width: 750px) { height: fit-content; } } .dialog-modal .predictive-search-form__header-inner { @media screen and (min-width: 750px) { border: 0; } } .header[transparent] :is(.predictive-search):not(:focus-within) { background-color: transparent; } .header[transparent] .predictive-search-form__header-inner { border-color: var(--color-foreground); } .search-modal__content .predictive-search-form__content { max-height: var(--modal-max-height); } .predictive-search:has(.predictive-search-dropdown) .search-input { outline-color: transparent; } .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; @media screen and (max-width: 749px) { border-bottom-color: transparent; } } .predictive-search:has(.predictive-search-dropdown[aria-expanded='true']) .predictive-search-form__header-inner:focus-within { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; border-radius: var(--search-border-radius); @media screen and (max-width: 749px) { border-radius: var(--style-border-radius-inputs); } } .dialog-modal .predictive-search-form__header { border: 0; border-radius: 0; background-color: var(--color-background); border-bottom: var(--style-border-width) solid var(--color-border); @media screen and (min-width: 750px) { border-bottom: var(--search-border-width) solid var(--color-border); } @media screen and (max-width: 749px) { transition: box-shadow 0.2s ease; box-shadow: none; } } .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within { border-radius: var(--search-border-radius) var(--search-border-radius) 0 0; transition: box-shadow var(--animation-speed) var(--animation-easing); background-color: var(--color-background); @media screen and (max-width: 749px) { border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0; } } .dialog-modal[open] { @media screen and (max-width: 749px) { border-radius: 0; } } .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) { @media screen and (min-width: 750px) { border-bottom-color: transparent; } } @media screen and (max-width: 749px) { .dialog-modal { .predictive-search__reset-button-icon { display: none; } .predictive-search__reset-button-text { display: block; } .predictive-search-form__content { /* The parent has overflow auto, we want to prevent a double scrollbar during animation */ max-height: 100%; } .predictive-search-form__content-wrapper { box-shadow: none; } .predictive-search-form__header { box-shadow: none; } } } .predictive-search-results__pill { display: block; padding: 6px 8px; font-weight: 500; white-space: nowrap; color: var(--color-foreground); transition: opacity var(--animation-speed-medium) var(--animation-timing-bounce); border-radius: var(--style-border-radius-inputs); border: 1px solid var(--color-border); color: var(--color-foreground); font-size: 11px; line-height: 1; min-height: 29px; display: flex; align-items: center; gap: 2px; user-select: none; } .predictive-search-results__pill mark { background-color: transparent; font-weight: 200; color: rgb(var(--color-foreground-rgb) / var(--opacity-80)); } .predictive-search-results__pill:focus, .predictive-search-results__pill:hover, .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill { opacity: 0.6 } .predictive-search-results__section:nth-child(1 of .predictive-search-results__section) .predictive-search-results__title { margin-block-start: 0 !important; } .predictive-search-results__title { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-family: var(--font-body--family); font-weight: 700; margin-block: 1rem 0.5rem !important; width: 100%; text-transform: var(--title-case); line-height: 1.5; padding-inline: 12px; @media screen and (max-width: 749px) { margin-block: var(--margin-lg) var(--margin-sm); } } .predictive-search-results__wrapper.predictive-search-results__wrapper-queries { display: flex; flex-wrap: wrap; margin-bottom: 1rem; padding-inline: 12px; gap: 8px; } .predictive-search-results__wrapper-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); padding-inline: 12px; overflow: visible; @media screen and (min-width: 750px) { grid-template-columns: repeat(4, 1fr); } } /* Pills: horizontal scroll, overlap padding when scrolling */ .predictive-search-results__section--pills .predictive-search-results__wrapper-queries { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-inline: 12px; gap: 8px; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } } .predictive-search-results__section--pills { overflow-x: clip; } .predictive-search-results__section--pills .predictive-search-results__title { padding-inline: 12px; flex-shrink: 0; animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards; } .predictive-search-results__card { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm)) calc(var(--padding-xl) + var(--button-padding-block) * 2); transition: transform var(--animation-speed-medium) var(--animation-timing-default), background-color var(--animation-speed-medium) var(--animation-timing-hover), border-color var(--animation-speed-medium) var(--animation-timing-hover); &:nth-last-child(3) { scroll-snap-align: end; } &:active { transform: scale(0.97); transition: transform 100ms var(--animation-timing-active); } } .recently-viewed-wrapper .predictive-search-results__card { opacity: 1; transform: translateY(0); transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .recently-viewed-wrapper.removing .predictive-search-results__card { opacity: 0; transform: translateY(-10px); pointer-events: none; } .predictive-search-results__card--product, .predictive-search-results__card--article, .predictive-search-results__card--collection, .recently-viewed-wrapper .predictive-search-results__card--product { &:active { transform: scale(0.97); transition: transform 100ms var(--animation-timing-active); } &:hover { border-radius: var(--product-corner-radius); } &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) { background-color: var(--card-bg-hover); padding: calc(var(--padding-2xs) + 1px); margin: calc((var(--padding-2xs) + 1px) * -1); outline: var(--border-width-sm) solid var(--color-border); border-radius: calc(var(--product-corner-radius) + 1px); border-color: var(--card-border-focus); } } .predictive-search-results__section--pills .predictive-search-results__card--query { scroll-snap-align: start; flex-shrink: 0; user-select: none; } .predictive-search-results__card:not(.predictive-search-results__card--product):not(.predictive-search-results__card--article):not(.predictive-search-results__card--page) { width: fit-content; content-visibility: visible; &:hover { border-color: var(--card-border-hover); background-color: var(--card-bg-hover); } &[aria-selected='true'].keyboard-focus { border-color: var(--card-border-hover); background-color: var(--card-bg-hover); } &:active { transform: scale(0.97); transition: transform var(--animation-speed-medium) var(--animation-timing-active); } } @keyframes search-element-scale-in { 0% { transform: scale(0.95); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes search-element-scale-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0; } } @keyframes search-element-slide-in-top { from { margin-top: calc(var(--modal-top-margin) + var(--padding-sm)); opacity: 0; } to { margin-top: var(--modal-top-margin); opacity: 1; } } @keyframes search-element-slide-out-top { from { margin-top: var(--modal-top-margin); opacity: 1; } to { margin-top: calc(var(--modal-top-margin) + var(--padding-sm)); opacity: 0; } } @keyframes content-slide { from { transform: translateY(var(--slide-from, 0)); opacity: var(--slide-opacity-from, 1); } to { transform: translateY(var(--slide-to, 0)); opacity: var(--slide-opacity-to, 1); } } .predictive-search-results__list { --slide-width: 27.5%; --slideshow-gap: var(--gap-md); /* Make space for the outline to be visible */ padding-block-start: var(--border-width-sm); } .predictive-search-results__list slideshow-arrows { @media screen and (max-width: 749px) { display: none; } } .predictive-search-results__no-results { animation-delay: 100ms; transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in); margin: 0 !important; text-align: left !important; padding-inline: 12px !important; font-family: var(--font-body--family); font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .predictive-search-results__inner:has(.predictive-search-results__section) .predictive-search-results__no-results { padding-block-end: 16px; } .predictive-search-results__no-results, .predictive-search-results__wrapper, .predictive-search-results__wrapper-products .predictive-search-results__card, .predictive-search-results__wrapper-pages .predictive-search-results__card, .predictive-search-results__wrapper--article .predictive-search-results__card, .predictive-search-results__wrapper--collection .predictive-search-results__card { animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards; } .predictive-search-results__no-results:last-child { margin-block: var(--margin-lg); text-align: center; } slideshow-slide .resource-card { /* stylelint-disable-next-line declaration-no-important */ animation-delay: 0ms !important; } .predictive-search-results__list, .predictive-search-results__wrapper { animation-duration: var(--animation-speed-medium); } .predictive-search-results__wrapper-queries { animation-delay: 50ms; } .predictive-search-results__list:nth-of-type(2) { animation-delay: 150ms; } .predictive-search-results__list:nth-of-type(3) { animation-delay: 200ms; } .predictive-search-results__list:nth-of-type(4) { animation-delay: 250ms; } .predictive-search-results__list:last-child { margin-block-end: 0; } [data-resource-type] { /* stylelint-disable-next-line declaration-no-important */ animation-delay: 0ms !important; } .predictive-search-results__no-results.removing, .predictive-search-results__wrapper.removing { animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards; } .predictive-search-results__card.removing { animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards; } .predictive-search-results__wrapper { transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in); } @keyframes search-element-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes search-element-slide-down { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } .predictive-search-results__card--query { transition: transform var(--animation-speed-medium) var(--animation-timing-bounce); transform-origin: center; &:active { transform: scale(0.97); } } /* END_SECTION:predictive-search */ /* START_SECTION:product-carousel-feature (INDEX:64) */ /* Feature Product Carousel Section */ .product-carousel-feature { position: relative; padding-top: var(--padding-top, 48px); padding-bottom: var(--padding-bottom, 48px); margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); container-type: inline-size; overflow: hidden; } @media screen and (max-width: 749px) { .product-carousel-feature { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .product-carousel-feature.section--page-width { max-width: var(--page-width, 1440px); margin-inline: auto; padding-inline: var(--util-page-margin, 20px); } .product-carousel-feature.section--full-width { width: 100%; padding-inline: 0; } /* When peek is active, remove right padding so cards bleed to the edge */ .product-carousel-feature--has-peek.section--page-width { padding-inline-end: 0; } /* Header, footer, and banner content still need right padding when peek is active */ .product-carousel-feature--has-peek.section--page-width .product-carousel__title-bar, .product-carousel-feature--has-peek.section--page-width .product-carousel__footer-bar, .product-carousel-feature--has-peek.section--page-width .product-carousel-feature__banner-wrapper { padding-inline-end: var(--util-page-margin, 20px); } /* Title bar: align controls to bottom of heading on desktop */ @media screen and (min-width: 750px) { .product-carousel-feature .product-carousel__title-bar { align-items: flex-end; } } /* Background Layer */ .product-carousel-feature__background { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: var(--section-bg-color, transparent); } .product-carousel-feature__background-image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .product-carousel-feature__background-gradient { position: absolute; inset: 0; background: linear-gradient( to bottom, var(--gradient-start, transparent) 0%, var(--gradient-end, transparent) 100% ); pointer-events: none; } /* Content Layer */ .product-carousel-feature__section-content { position: relative; z-index: 1; display: flex; width: 100%; flex-direction: column; } /* Carousel wrapper */ .product-carousel-feature__carousel-wrapper { flex: 1 1 auto; width: 100%; } /* Carousel container */ .product-carousel-feature__carousel-container { width: 100%; container-type: inline-size; } /* Slideshow customization */ .product-carousel-feature__slideshow { --slide-width: calc((100cqw - var(--next-card-peek, 0px) - (var(--cards-desktop, 4) - 1) * var(--card-gap, 8px)) / var(--cards-desktop, 4)); --slide-gap: var(--card-gap, 8px); display: block; width: 100%; } .product-carousel-feature__slideshow slideshow-container { display: block; width: 100%; } /* Individual slide content */ .product-carousel-feature__slide { width: 100%; height: 100%; display: flex; flex-direction: column; } /* Mobile responsive sizing */ @media screen and (max-width: 749px) { .product-carousel-feature__slideshow { --slide-width: calc((100cqw - var(--next-card-peek, 0px) - (var(--cards-mobile, 2) - 1) * var(--card-gap, 8px)) / var(--cards-mobile, 2)); } } /* Slideshow slides visibility and scrolling behavior */ .product-carousel-feature__slideshow slideshow-slides { display: flex !important; gap: var(--slide-gap, 8px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .product-carousel-feature__slideshow slideshow-slide { flex: 0 0 auto; scroll-snap-align: start; width: var(--slide-width); height: auto; min-height: 100px; display: block !important; visibility: visible !important; opacity: 1 !important; content-visibility: visible !important; } /* Inner slide wrapper sizing */ .product-carousel-feature__slide-wrapper { width: 100%; height: 100%; } /* Empty state styling */ .product-carousel-feature__empty-state { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 32px; text-align: center; color: var(--color-foreground); background-color: rgba(255, 255, 255, 0.1); border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 4px; } .product-carousel-feature__empty-state p { margin: 0; font-size: 16px; } /* Banner present: adjust layout */ .product-carousel-feature--has-banner .product-carousel-feature__section-content { gap: 24px; } /* Banner wrapper */ .product-carousel-feature__banner-wrapper { flex: 0 0 auto; display: flex; } /* Mobile: vertical stacking */ @media screen and (max-width: 749px) { .product-carousel-feature--has-banner .product-carousel-feature__banner-wrapper { width: 100%; aspect-ratio: 4 / 3; } .product-carousel-feature--has-banner .product-carousel-feature__carousel-wrapper { width: 100%; } } /* Desktop: horizontal layout */ @media screen and (min-width: 750px) { .product-carousel-feature--has-banner .product-carousel-feature__banner-wrapper { flex: 0 0 45%; min-width: 0; align-self: stretch; } .product-carousel-feature--has-banner .product-carousel-feature__carousel-wrapper { flex: 1 1 55%; min-width: 0; } .product-carousel-feature--has-banner .product-carousel-feature__banner-wrapper .banner-block { height: 100%; } } /* END_SECTION:product-carousel-feature */ /* START_SECTION:product-carousel (INDEX:65) */ /* Section Layout */ .product-carousel { padding-top: var(--padding-top, 48px); padding-bottom: var(--padding-bottom, 48px); container-type: inline-size; } .product-carousel.section--page-width { max-width: var(--page-width, 1440px); margin-inline: auto; padding-inline: var(--util-page-margin, 20px); } .product-carousel.section--full-width { width: 100%; padding-inline: 0; } /* Carousel wrapper */ .product-carousel__carousel-wrapper { width: 100%; } /* Carousel container */ .product-carousel__carousel-container { width: 100%; container-type: inline-size; } /* Slideshow customization for product carousel */ .product-carousel__slideshow { --slide-width: calc((100cqw - (var(--cards-desktop, 4) - 1) * var(--card-gap, 8px)) / var(--cards-desktop, 4)); --slide-gap: var(--card-gap, 8px); display: block; width: 100%; } .product-carousel__slideshow slideshow-container { display: block; width: 100%; } /* Individual slide content */ .product-carousel__slide { width: 100%; height: 100%; display: flex; flex-direction: column; } /* Mobile responsive sizing */ @media screen and (max-width: 749px) { .product-carousel__slideshow { --slide-width: calc((100cqw - (var(--cards-mobile, 2) - 1) * var(--card-gap, 8px)) / var(--cards-mobile, 2)); } } /* Slideshow slides visibility and scrolling behavior */ .product-carousel__slideshow slideshow-slides { display: flex !important; gap: var(--slide-gap, 8px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .product-carousel__slideshow slideshow-slide { flex: 0 0 auto; scroll-snap-align: start; width: var(--slide-width); height: auto; min-height: 100px; display: block !important; visibility: visible !important; opacity: 1 !important; content-visibility: visible !important; } /* Inner slide wrapper sizing */ .product-carousel__slide-wrapper { width: 100%; height: 100%; } /* Empty state styling */ .product-carousel__empty-state { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 32px; text-align: center; color: var(--color-foreground); background-color: var(--color-background); border: 1px dashed var(--color-border); border-radius: 4px; } .product-carousel__empty-state p { margin: 0; font-size: 16px; } .product-carousel__title-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; } .product-carousel__title-bar-left { flex: 1 1 auto; min-width: 0; } .product-carousel__title-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* CTA link styles */ .product-carousel__cta-link { display: inline-flex; align-items: center; color: var(--color-link); text-decoration: underline; font-size: 16px; line-height: 1.5; transition: color 0.2s ease; } .product-carousel__cta-link:hover { color: var(--color-link-hover); } .product-carousel__cta-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Pagination styles */ .product-carousel__pagination { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; } .product-carousel__pagination-current, .product-carousel__pagination-total { font-weight: 600; } /* Carousel controls in title bar */ .product-carousel__controls { display: flex; align-items: center; gap: 16px; } .product-carousel__control { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: none; cursor: pointer; color: var(--color-foreground, #242420); transition: opacity 0.2s ease; } .product-carousel__control:hover { opacity: 0.7; } .product-carousel__control:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .product-carousel__control:disabled { opacity: 0.3; cursor: not-allowed; } .product-carousel__control .svg-wrapper { width: 24px; height: 24px; display: block; } .product-carousel__control svg { width: 100%; height: 100%; } /* Mobile responsive adjustments */ @media screen and (max-width: 749px) { .product-carousel__title-bar { gap: 16px; } .product-carousel__heading { font-size: 24px; } } /* Desktop heading size */ @media screen and (min-width: 750px) { .product-carousel__heading { font-size: 32px; } } /* Banner-Carousel Flex Layout */ .product-carousel__section-content { display: flex; width: 100%; flex-direction: column; } /* Banner present: adjust layout */ .product-carousel--has-banner .product-carousel__section-content { gap: 24px; } /* Banner wrapper */ .product-carousel__banner-wrapper { flex: 0 0 auto; display: flex; } /* Carousel wrapper adjustments when banner present */ .product-carousel__carousel-wrapper { flex: 1 1 auto; width: 100%; } /* Mobile: vertical stacking */ @media screen and (max-width: 749px) { /* Top position (default) */ .product-carousel--banner-top-mobile .product-carousel__section-content { flex-direction: column; } /* Bottom position */ .product-carousel--banner-bottom-mobile .product-carousel__section-content { flex-direction: column-reverse; } .product-carousel--has-banner .product-carousel__banner-wrapper { width: 100%; aspect-ratio: 4 / 3; } .product-carousel--has-banner .product-carousel__carousel-wrapper { width: 100%; } } /* Desktop: horizontal layout */ @media screen and (min-width: 750px) { /* Left position (default) */ .product-carousel--banner-left-desktop .product-carousel__section-content { flex-direction: row; } /* Right position */ .product-carousel--banner-right-desktop .product-carousel__section-content { flex-direction: row-reverse; } .product-carousel--has-banner .product-carousel__banner-wrapper { flex: 0 0 45%; min-width: 0; align-self: stretch; } .product-carousel--has-banner .product-carousel__carousel-wrapper { flex: 1 1 55%; min-width: 0; } /* Banner fills wrapper height on desktop */ .product-carousel--has-banner .product-carousel__banner-wrapper .banner-block { height: 100%; } } /* END_SECTION:product-carousel */ /* START_SECTION:product-grid (INDEX:66) */ .product-grid-section__wrapper .resource-list--grid { gap: var(--product-grid-row-gap) var(--product-grid-column-gap); } /* Section spacing via custom properties */ @media screen and (min-width: 750px) { .product-grid-section__wrapper { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .product-grid-section__wrapper { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .product-grid__empty-state { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 32px; text-align: center; color: var(--color-foreground); background-color: var(--color-background); border: 1px dashed var(--color-border); border-radius: 4px; } .product-grid__empty-state p { margin: 0; font-size: 16px; } /* END_SECTION:product-grid */ /* START_SECTION:product-hotspots (INDEX:67) */ /* Section layout */ .section-product-hotspots { position: relative; } .section-product-hotspots__wrapper { display: flex; flex-direction: column; gap: var(--gap); width: 100%; height: 100%; } /* Image container */ .section-product-hotspots__content { position: relative; aspect-ratio: var(--ratio, 21 / 9); overflow: hidden; } /* Hide hotspots without products on touch devices (tablets included) */ @media (hover: none) { product-hotspot-component.hotspot--hidden-touch { display: none; } } /* Responsive adjustments */ @media screen and (max-width: 749px) { /* Hide dialog on mobile - hotspot opens quick-add modal instead */ product-hotspot-component .hotspot-dialog { display: none; } } /* Hotspot button - positioned element with clickable area */ product-hotspot-component { position: absolute; cursor: pointer; width: var(--button-size); height: var(--button-size); display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; font: inherit; color: inherit; outline: none; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; z-index: var(--layer-flat); } product-hotspot-component:has(.hotspot-dialog[open]) { z-index: var(--layer-raised); } product-hotspot-component .hotspot-trigger { padding: 0; border: none; } .hotspot-dialog__product-content { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; overflow: hidden; flex: 1; } /* Transparent full-area clickable button */ .hotspot-trigger { width: 100%; height: 100%; background: transparent; border-radius: 50%; cursor: pointer; position: relative; } /* On mobile, ensure trigger is tappable */ @media screen and (max-width: 749px) { .hotspot-trigger { cursor: pointer; -webkit-tap-highlight-color: transparent; } } /* Outer ring */ .hotspot-trigger::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--hotspot-size, 16px); height: var(--hotspot-size, 16px); background: var(--hotspot-bg, rgba(17, 17, 17, 0.4)); border-radius: 50%; } /* Inner dot */ .hotspot-trigger::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--hotspot-bullseye, #fff); border-radius: 50%; opacity: 0.9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); z-index: 1; } .hotspots-container { position: absolute; inset: 0; z-index: var(--layer-flat); overflow: clip; } .hotspots__background-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Dialog positioning */ product-hotspot-component .hotspot-dialog { position: absolute; padding: 8px; border-radius: 2px; border: none; width: min(251px, 100cqi); background: #fff; box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); &[data-placement*='bottom'] { --offset-y: 0px; --origin-y: calc(var(--hotspot-size) / 2); top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px)); bottom: unset; } &[data-placement*='top'] { --offset-y: 0px; --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); top: unset; bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px)); } &[data-placement*='left'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5); --origin-x: calc(100% - (var(--hotspot-size) * 0.5)); left: unset; right: 100%; } &[data-placement*='right'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5); --origin-x: calc(var(--hotspot-size) * 0.5); left: 100%; right: unset; } &[data-placement*='center'] { left: 50%; translate: -50% 0; right: unset; } &[data-placement*='center'][data-placement*='bottom'] { --origin-y: calc(var(--hotspot-size) * 0.5); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; top: 100%; bottom: unset; margin: 0; } &[data-placement*='center'][data-placement*='top'] { --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; bottom: 100%; } } product-hotspot-component .hotspot-dialog:is(:focus, :focus-visible), product-hotspot-component .hotspot-dialog__link:is(:focus, :focus-visible) { outline: none; } /* Downward caret when dialog is above the hotspot */ product-hotspot-component .hotspot-dialog[data-placement*='top']::before { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5.2px solid transparent; border-right: 5.2px solid transparent; border-top: 7px solid #fff; pointer-events: none; } .hotspot-dialog__product { display: flex; flex-direction: row; align-items: center; gap: 8px; } .hotspot-dialog__product-image, .hotspot-dialog svg.hotspot-dialog__placeholder-product-image { width: 36px; height: 46px; aspect-ratio: unset; padding: 0; object-fit: cover; border-radius: 0; flex-shrink: 0; } .hotspot-dialog__link { position: absolute; inset: 0; z-index: var(--layer-flat); } .hotspot-dialog__product-title { font-size: 12px; line-height: 1.1; font-weight: 400; color: rgb(36, 36, 32); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; min-width: 0; } .hotspot-dialog__product-price { font-size: 11px; line-height: 1.5; font-weight: 400; color: rgb(36, 36, 32); } product-hotspot-component .hotspot-dialog .hotspot-dialog__sold-out-badge { display: flex; width: fit-content; justify-self: flex-end; align-self: flex-end; justify-content: center; align-items: center; font-size: var(--font-body--size); padding: var(--padding-2xs) var(--padding-sm); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); border-radius: var(--border-radius-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-sm); opacity: var(--opacity-80); } /* Dialog transitions */ product-hotspot-component .hotspot-dialog { --hotspot-blur: 4px; --hotspot-scale: 0.8; --hotspot-entry-duration: 0.2s; --hotspot-exit-duration: 0.1s; /* Firefox doesn't have reverse transitions */ /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */ filter: blur(var(--hotspot-blur)); opacity: 0; transform: scale(var(--hotspot-scale)) translate(0, 0); transition-property: display, opacity, filter, transform; transition-duration: var(--hotspot-entry-duration); transition-timing-function: ease; transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12); &[data-closing='true'] { transition-duration: var(--hotspot-exit-duration); transition-timing-function: ease-out; transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25)); } /* We can only set transition-behavior once we've measured the dialog dimensions */ &[data-showing='true'] { transition-behavior: allow-discrete; } } product-hotspot-component .hotspot-dialog[open][data-showing='true'] { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0px); } @starting-style { product-hotspot-component .hotspot-dialog[open][data-showing='true'] { opacity: 0; filter: blur(var(--hotspot-blur)); transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); } } /* Safety triangles for dialogs */ product-hotspot-component .hotspot-dialog::after { content: ''; position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; pointer-events: all; transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out; scale: var(--scale-x, 1) var(--scale-y, 1); z-index: var(--layer-flat); } .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 100% 100%); width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); } .hotspot-dialog[open][data-placement*='right']::after { right: 100%; left: unset; } .hotspot-dialog[open][data-placement*='left']::after { left: 100%; right: unset; --scale-x: -1; } .hotspot-dialog[open][data-placement*='top']::after { --scale-y: -1; } .hotspot-dialog[open][data-placement*='center']::after { height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); width: 100%; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25)); --scale-x: 1; --scale-y: 1; } .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after { top: unset; bottom: 100%; --scale-y: -1; } .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after { top: 100%; bottom: unset; } /* Quick add button */ .hotspot-dialog[open] { .quick-add { display: flex; flex-direction: column; justify-content: flex-end; width: auto; height: auto; position: relative; z-index: var(--layer-flat); } .quick-add__button { position: relative; padding-block: 0; box-shadow: none; align-items: center; justify-self: flex-end; height: fit-content; translate: var(--padding-2xs) 0; border: none; color: var(--color-foreground); background-color: var(--color-background); overflow: visible; pointer-events: all; opacity: 1; animation: elementSlideInTop var(--animation-speed) var(--animation-easing); transition-property: translate; transition-duration: var(--animation-speed); transition-timing-function: var(--ease-out-cubic); &::before { content: ''; position: absolute; inset: -2px; border-radius: calc(50px + 2px); border: 2px solid transparent; pointer-events: none; transition-property: border-color; transition-duration: 0s; transition-timing-function: var(--ease-out-cubic); } &:is(:hover, :focus, :focus-visible, :active) { translate: 0 0; transition-delay: var(--animation-speed-slow); &::before { border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15)); transition-duration: var(--animation-speed); transition-delay: var(--animation-speed-slow); } } } } /* END_SECTION:product-hotspots */ /* START_SECTION:product-information (INDEX:68) */ .sticky-add-to-cart__bar { position: fixed; right: 32px; bottom: calc(-100% - 40px); opacity: 0; z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */ width: 436px; background-color: var(--color-background, #fff); border: 1px solid var(--color-border, #ececec); border-radius: var(--style-border-radius-buttons-primary, 2px); height: 48px; display: flex; align-items: stretch; @starting-style { opacity: 0; bottom: calc(-100% - 40px); } } @media (prefers-reduced-motion: no-preference) { .sticky-add-to-cart__bar { transition-property: bottom, opacity, display; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; } } .sticky-add-to-cart__bar[data-stuck='true'] { bottom: 20px; opacity: 1; } sticky-add-to-cart:not([data-variant-available]) .sticky-add-to-cart__bar, sticky-add-to-cart[data-variant-available=''] .sticky-add-to-cart__bar { opacity: 0; bottom: calc(-100% - 40px); display: none; } /* Colour cell */ .sticky-add-to-cart__colour-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--spacing-4, 16px); border-right: 1px solid var(--color-border, #ececec); cursor: pointer; flex-shrink: 0; min-width: 96px; } .sticky-add-to-cart__colour-cell:focus-visible { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } .sticky-add-to-cart__mini-swatches { display: flex; align-items: center; gap: 4px; } .sticky-add-to-cart__mini-swatch { width: 15px; height: 15px; border-radius: 9999px; border: 1px solid #ececec; background-color: var(--swatch-color, #ccc); flex-shrink: 0; } .sticky-add-to-cart__mini-swatch--selected { border-color: #111; background-image: none; background: radial-gradient( circle, var(--swatch-color, #ccc) calc(100% - 3px), transparent calc(100% - 3px), transparent calc(100% - 2px), #111 calc(100% - 2px) ); background-color: transparent; } .sticky-add-to-cart__remaining-count { font-size: 12px; font-weight: bold; line-height: 1; color: var(--color-foreground); } .sticky-add-to-cart__cell-label { font-size: 12px; font-weight: 700; line-height: 150%; white-space: nowrap; } /* Size cell */ .sticky-add-to-cart__size-cell { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 96px; border-right: 1px solid var(--color-border, #ececec); } .sticky-add-to-cart__size-icon { display: flex; align-items: center; justify-content: center; } .sticky-add-to-cart__size-icon.svg-wrapper { margin-inline-start: unset; width: 30px; height: 17px; } .sticky-add-to-cart__size-icon.svg-wrapper > svg { width: 100%; height: 100%; } /* Dropdown trigger (summary) */ .sticky-add-to-cart__dropdown-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--spacing-4, 16px); cursor: pointer; list-style: none; height: 100%; } .sticky-add-to-cart__dropdown-trigger::-webkit-details-marker { display: none; } .sticky-add-to-cart__dropdown-trigger[data-has-selection] { align-items: center; } .sticky-add-to-cart__dropdown-trigger[data-has-selection] .sticky-add-to-cart__size-icon { display: none; } .sticky-add-to-cart__dropdown-trigger:focus-visible { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } /* Upward dropdown panel */ .sticky-add-to-cart__dropdown-details { position: static; } .sticky-add-to-cart__dropdown-panel { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; background-color: var(--color-background, white); border: 1px solid var(--color-border, #ececec); border-radius: var(--style-border-radius-buttons-primary, 2px); max-height: 315px; z-index: 1; } .sticky-add-to-cart__dropdown-header { display: none; } .sticky-add-to-cart__dropdown-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; } /* Dropdown row — same structure as PDP dropdown */ .sticky-add-to-cart__dropdown-row { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; position: relative; border-radius: 2px; font-size: var(--font-size--sm); } .sticky-add-to-cart__dropdown-row:hover { background-color: rgb(var(--color-foreground-rgb) / 0.03); } .sticky-add-to-cart__dropdown-row:has(:checked) { background-color: var(--color-border); } .sticky-add-to-cart__dropdown-row:has([data-option-available='false']) { color: rgb(var(--color-foreground-rgb) / 0.5); } .sticky-add-to-cart__dropdown-row input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; } .sticky-add-to-cart__dropdown-row-label { min-width: 18px; font-weight: bold; } .sticky-add-to-cart__dropdown-row-status { font-size: var(--font-size--sm); } .sticky-add-to-cart__dropdown-row-separator, .sticky-add-to-cart__dropdown-row-price { font-weight: bold; } .sticky-add-to-cart__dropdown-row-icon { margin-inline-start: auto; display: flex; align-items: center; } .sticky-add-to-cart__dropdown-checkmark { display: none; width: 18px; height: 18px; } .sticky-add-to-cart__dropdown-row:has(:checked) .sticky-add-to-cart__dropdown-checkmark { display: block; } .sticky-add-to-cart__dropdown-row:has(:focus-visible) { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } /* Stock indicators */ .sticky-add-to-cart__stock-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size--sm); line-height: 1.5; } .sticky-add-to-cart__stock-dot { width: 10px; height: 10px; border-radius: 9999px; } .sticky-add-to-cart__stock-indicator--low_stock .sticky-add-to-cart__stock-dot { background-color: var(--color-warning, #f5a623); } /* Size chart link — sticky at bottom of dropdown */ .sticky-add-to-cart__size-chart { width: 100%; padding: var(--spacing-4, 16px) var(--spacing-6, 24px); border: none; border-top: 1px solid var(--color-border, #ececec); background: none; font-size: 12px; font-weight: bold; line-height: 1.5; text-decoration: underline; text-align: left; flex-shrink: 0; cursor: pointer; color: var(--color-foreground); } .sticky-add-to-cart__size-chart:focus-visible { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } /* Add to bag button */ .sticky-add-to-cart__button { flex: 1; position: relative; min-width: 0; border-radius: 0; white-space: nowrap; } .sticky-add-to-cart__button.add-to-cart-button { height: 100%; } /* Colour panel (positioned above sticky bar) */ .sticky-add-to-cart__colour-panel { display: none; position: fixed; z-index: calc(var(--layer-sticky) - 1); flex-direction: column; background: #fff; border: 1px solid var(--color-border, #ececec); border-radius: var(--style-border-radius-buttons-primary, 2px); overflow: clip; } .sticky-add-to-cart__colour-panel[data-open] { display: flex; } .sticky-add-to-cart__colour-panel-header { display: none; } .sticky-add-to-cart__colour-panel-content { padding: var(--padding-lg); } .sticky-add-to-cart__colour-panel-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; } .sticky-add-to-cart__colour-panel-grid .sibling-swatch__item { min-width: 0; max-width: 52px; justify-self: center; } .sticky-add-to-cart__colour-panel-grid .sibling-swatch__label { box-sizing: border-box; width: 100%; max-width: 100%; } /* Backdrop — covers viewport below bar z-index */ .sticky-add-to-cart__backdrop { display: none; } .sticky-add-to-cart__backdrop[data-open] { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: calc(var(--layer-sticky) - 2); } /* Desktop colour panel — anchored above sticky bar */ @media screen and (min-width: 750px) { .sticky-add-to-cart__colour-panel[data-open] { bottom: calc(20px + 48px + 8px); /* bar-bottom + bar-height + gap */ right: 32px; width: 436px; } } /* Mobile */ @media screen and (max-width: 749px) { .sticky-add-to-cart__bar { width: auto; left: 36px; right: 36px; } .sticky-add-to-cart__bar[data-stuck='true'] { bottom: 36px; } /* Mobile size dropdown — bottom sheet anchored to viewport bottom */ .sticky-add-to-cart__dropdown-panel { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-height: 70vh; border: none; border-radius: var(--style-border-radius-popover, 8px) var(--style-border-radius-popover, 8px) 0 0; box-shadow: var(--shadow-md); /* Override desktop z-index: 1 — panel must appear above backdrop (layer-sticky - 2) */ z-index: calc(var(--layer-sticky)); } /* Mobile dropdown header */ .sticky-add-to-cart__dropdown-header { display: flex; align-items: center; position: relative; padding: 20px 20px 0 20px; } .sticky-add-to-cart__dropdown-header-title { font-weight: bold; font-size: var(--font-size--base, 16px); line-height: 1.5; } .sticky-add-to-cart__dropdown-close { position: absolute; right: 24px; top: 22px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; } .sticky-add-to-cart__dropdown-close svg { width: 16px; height: 16px; } .sticky-add-to-cart__dropdown-close:focus-visible { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } /* Mobile colour panel — bottom sheet above sticky bar */ .sticky-add-to-cart__colour-panel[data-open] { bottom: 0; left: 0; right: 0; width: 100%; z-index: calc(var(--layer-sticky)); border: none; border-radius: var(--style-border-radius-popover, 8px) var(--style-border-radius-popover, 8px) 0 0; box-shadow: var(--shadow-md); gap: 12px; } .sticky-add-to-cart__colour-panel-header { display: flex; align-items: center; position: relative; padding: 20px 20px 0 20px; } .sticky-add-to-cart__colour-panel-title { font-weight: bold; font-size: var(--font-size--base, 16px); line-height: 1.5; } .sticky-add-to-cart__colour-panel-close { position: absolute; right: 24px; top: 22px; transform: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; } .sticky-add-to-cart__colour-panel-close svg { width: 16px; height: 16px; } .sticky-add-to-cart__colour-panel-close:focus-visible { outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } .sticky-add-to-cart__colour-panel-content { padding: 0 0 20px 20px; } .sticky-add-to-cart__colour-panel-grid { display: flex; flex-wrap: wrap; gap: 6px; } .sticky-add-to-cart__colour-panel-grid .sibling-swatch__item { flex: 1 1 0; min-width: 0; max-width: 52px; touch-action: manipulation; } } @media screen and (max-width: 390px) { .sticky-add-to-cart__bar { left: 16px; right: 16px; } } /* END_SECTION:product-information */ /* START_SECTION:product-list (INDEX:69) */ .section-resource-list__header--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__header--with-arrows > :first-child { flex: 1; min-width: 0; } .section-resource-list__header--with-arrows .group-block-content > *:last-child:not(:first-child) { display: none; } .section-resource-list__header--with-arrows .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* END_SECTION:product-list */ /* START_SECTION:product-recommendations (INDEX:70) */ .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; } .section-resource-list__content--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__content--with-arrows > .section-resource-list__content-blocks { flex: 1; min-width: 0; } product-recommendations:not([data-recommendations-performed="true"]) .article-carousel-title-bar__arrows { visibility: hidden; } .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* END_SECTION:product-recommendations */ /* START_SECTION:search-results (INDEX:72) */ .search-pages-inner { grid-column: 1 / -1; display: flex; flex-direction: column; } /* Pages/Content Grid Layout */ .search-pages-header { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; margin-block-end: 12px; padding-inline: var(--page-margin); @media screen and (min-width: 750px) { padding-inline: 0; margin-block-end: 16px; } } .search-pages-count { font-family: var(--font-body--family); font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--color-foreground-secondary); } .search-pages-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; padding-inline: var(--page-margin); row-gap: 40px; @media screen and (min-width: 750px) { grid-template-columns: repeat(3, 1fr); padding-inline: 0; row-gap: 56px; column-gap: 8px; } } .search-pages-grid__item { min-width: 0; } /* Match product-grid load-more pagination layout (snippets/pagination-controls.liquid) */ .product-grid-container .collection-wrapper .pagination.pagination--load-more { grid-column: 1 / -1; padding-block-start: 40px; padding-inline: var(--page-margin); @media screen and (min-width: 750px) { padding-block-start: 48px; padding-inline: 0; } } /* END_SECTION:search-results */ /* START_SECTION:slideshow (INDEX:77) */ .slideshow-section { slideshow-arrows .slideshow-control:first-of-type { margin-inline-start: var(--padding-xs); } slideshow-arrows .slideshow-control:last-of-type { margin-inline-end: var(--padding-xs); } .slideshow--with-hints--mobile-with-hints { gap: var(--slideshow-gap, 0); grid-column: 1 / -1; } /* Hide navigation arrows at boundaries for with-hints mode */ .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control { transition: opacity 0.3s ease; } /* Override animation for boundary arrows in with-hints mode on hover */ slideshow-component.slideshow--with-hints--mobile-with-hints:has( slideshow-slide:first-child:not([aria-hidden='true']) ) > slideshow-container > slideshow-arrows .slideshow-control--previous, slideshow-component.slideshow--with-hints--mobile-with-hints:has( slideshow-slide:last-child:not([aria-hidden='true']) ) > slideshow-container > slideshow-arrows .slideshow-control--next { animation: none; opacity: 0; pointer-events: none; } @media screen and (max-width: 749px) { .slideshow--with-hints--mobile-with-hints slideshow-slides { padding-inline: var(--page-margin); } .slideshow--with-hints--mobile-with-hints slideshow-slide { width: 96%; } .slideshow--with-hints--mobile-with-hints slideshow-slides { gap: min(var(--slideshow-gap, 0), 10px); } } @media screen and (min-width: 750px) { .slideshow--with-hints { gap: var(--slideshow-gap, 0); grid-column: 1 / -1; } .slideshow--with-hints slideshow-slides { padding-inline: var(--page-margin); gap: var(--slideshow-gap, 0); } .slideshow--with-hints slideshow-slide { width: calc((100vw - var(--page-margin) * 2)); overflow: hidden; } .slideshow--with-hints slideshow-arrows .slideshow-control { transition: opacity 0.3s ease; } slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true'])) > slideshow-container > slideshow-arrows .slideshow-control--previous, slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true'])) > slideshow-container > slideshow-arrows .slideshow-control--next { animation: none; opacity: 0; pointer-events: none; } } } /* END_SECTION:slideshow */ /* START_SECTION:slim-banner (INDEX:78) */ .slim-banner-section { min-height: 128px; } @media screen and (min-width: 750px) { .slim-banner-section { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .slim-banner-section { min-height: 200px; margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .slim-banner__inner { position: relative; overflow: hidden; min-height: inherit; } .slim-banner__background { position: absolute; inset: 0; } .slim-banner__content { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; pointer-events: none; gap: 24px; min-height: inherit; padding-block-start: var(--slim-banner-padding-block-start, 40px); padding-block-end: var(--slim-banner-padding-block-end, 40px); padding-inline: var(--slim-banner-padding-inline, 40px); } @media screen and (max-width: 749px) { .slim-banner__content { flex-direction: column; align-items: flex-start; gap: 16px; padding-block-start: var(--slim-banner-padding-block-start-mobile, 16px); padding-block-end: var(--slim-banner-padding-block-end-mobile, 16px); padding-inline: var(--slim-banner-padding-inline-mobile, 16px); } } .slim-banner__media-link { position: absolute; inset: 0; z-index: 1; text-decoration: none; } .slim-banner__content > *, .slim-banner__content .layout-panel-flex { position: relative; z-index: 2; pointer-events: none; } .slim-banner__content a, .slim-banner__content button, .slim-banner__content input, .slim-banner__content countdown-timer, .slim-banner__content .countdown__item, .slim-banner__content [role="button"] { pointer-events: auto; } @media screen and (min-width: 750px) { .slim-banner-section countdown-timer { flex-shrink: 0; } } /* END_SECTION:slim-banner */ /* START_SECTION:store-locator (INDEX:79) */ /* ============================================================ Store Locator — store-locator.liquid BEM namespace: .store-locator__* ============================================================ */ /* --- Section shell ---------------------------------------- */ .store-locator { container-type: inline-size; } store-locator-component { display: block; } /* --- Heading ---------------------------------------------- */ .store-locator__heading { margin-block-end: var(--margin-4xl); font-size: 2.25rem; line-height: 110%; } /* --- Search bar ------------------------------------------- */ .store-locator__search { margin-block-end: var(--margin-lg); } .store-locator__search-input-wrapper { position: relative; display: flex; align-items: stretch; } .store-locator__search-input { width: 100%; padding-block: 0.75rem; padding-inline-start: 1rem; padding-inline-end: 6.5rem; border: var(--style-border-width, 1px) solid var(--color-border); background-color: var(--color-background); color: var(--color-foreground); font-size: 1rem; line-height: 1.5; appearance: none; } .store-locator__search-input:focus { outline: 2px solid var(--color-foreground); outline-offset: -2px; } .store-locator__search-input::placeholder { color: inherit; opacity: 0.5; } .store-locator__clear-button { position: absolute; inset-block: 0; inset-inline-end: 2.125rem; display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--color-foreground); } .store-locator__clear-button[hidden] { display: none; } .store-locator__clear-button .svg-wrapper, .store-locator__search-button .svg-wrapper { width: 18px; height: 18px; } .store-locator__clear-button svg { width: 100%; height: 100%; transform: translate(25%, 25%); } .store-locator__search-button svg { width: 100%; height: 100%; } .store-locator__search-button { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; align-items: center; justify-content: center; padding: var(--padding-xs); padding-right: 12px; background: none; border: none; cursor: pointer; color: var(--color-foreground); } .store-locator__clear-button:not([hidden])::after { content: ''; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 1px; height: var(--icon-size-sm); background: var(--color-input-border); } /* --- Toolbar ---------------------------------------------- */ .store-locator__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--margin-lg); } .store-locator__use-location { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-foreground); text-decoration: underline; font-size: var(--font-size--sm); text-align: start; line-height: 150%; } .store-locator__use-location:disabled, .store-locator__use-location[disabled] { opacity: 0.5; cursor: not-allowed; } .store-locator__filter-toggle { display: flex; align-items: center; gap: 0.5rem; background: none; border: none; padding: 0; cursor: pointer; color: var(--color-foreground); font-size: var(--font-size--sm); text-decoration: underline; } .store-locator__filter-icon { display: flex; align-items: center; line-height: 0; } /* Uniform 20×20 wrapper so filter and close-2 glyphs share the same baseline (Issue 7) */ /* display is intentionally omitted — base.css already sets display:inline-flex on .svg-wrapper */ .store-locator__filter-icon > .svg-wrapper { width: 20px; height: 20px; align-items: center; justify-content: center; } .store-locator__filter-icon > .svg-wrapper > svg { width: 100%; height: 100%; } /* Filter icon: show filter SVG by default; swap to close SVG when .is-open. Child-combinator selector (0,2,0) beats the wrapper width/height rule above at the same specificity. */ .store-locator__filter-icon > .store-locator__filter-icon--close { display: none; } .store-locator__filter-toggle.is-open .store-locator__filter-icon--filter { display: none; } .store-locator__filter-toggle.is-open .store-locator__filter-icon--close { display: flex; } .store-locator__filter-icon--close svg{ transform: translate(25%, 25%); } /* --- Filter panel (grid-template-rows expand/collapse) ---- */ .store-locator__filters { display: grid; grid-template-rows: 0fr; opacity: 0; transition-property: grid-template-rows, opacity; transition-duration: var(--surface-transition-duration, 300ms); transition-timing-function: var(--animation-easing, ease); } .store-locator__filters:not([inert]) { grid-template-rows: 1fr; opacity: 1; } .store-locator__filters-inner { overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* Padding only when open — padding-block in collapsed state contributes to intrinsic height (4.9) */ .store-locator__filters:not([inert]) .store-locator__filters-inner { padding-bottom: var(--padding-lg); } /* Apply filters button — spans both checkbox columns; margin-top uses calc so grid row-gap + margin = 16px (W8 option a) */ .store-locator__apply-filters { grid-column: 1 / -1; width: 100%; margin-top: calc(16px - 0.75rem); padding: 16px 14px; border: 1px solid var(--color-foreground); border-radius: 2px; background: var(--color-foreground); color: var(--color-background); font-family: var(--font-body--family); font-size: var(--font-size--sm); font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .store-locator__filters { transition: none; } } /* --- Results info ----------------------------------------- */ .store-locator__results-info { font-size: 0.875rem; padding-block: var(--padding-lg); color: var(--color-foreground); border-top: 1px solid var(--color-border); } /* --- Tabs (mobile only — hidden on desktop) --------------- */ .store-locator__tabs { display: none; border-bottom: var(--style-border-width, 1px) solid var(--color-border); } .store-locator__tab { flex: 1; padding-block: 0.75rem; padding-inline: 1rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-size: 0.875rem; color: var(--color-foreground); opacity: 0.5; } .store-locator__tab--active { border-bottom-color: var(--color-foreground); opacity: 1; font-weight: bold; } /* --- Content area ----------------------------------------- */ .store-locator__content { display: block; } /* --- Left column ------------------------------------------ */ .store-locator__left-column { display: flex; flex-direction: column; } /* --- List panel ------------------------------------------- */ .store-locator__list-panel { min-height: 400px; } /* --- Map panel -------------------------------------------- */ .store-locator__map-panel { min-height: 400px; background-color: var(--color-background); } .store-locator__map { width: 100%; height: 100%; min-height: 400px; } /* --- Store cards ------------------------------------------ */ .store-locator__results { display: flex; flex-direction: column; gap: 16px; } .store-locator__card { padding: 16px; border: 1px solid var(--color-border); border-radius: 2px; cursor: pointer; transition: border-color var(--animation-speed, 200ms) var(--animation-easing, ease); } .store-locator__card--active { border-color: var(--color-foreground); } .store-locator__card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-block-end: var(--margin-xs); } .store-locator__card-name { font-size: var(--font-size--lg); font-weight: 400; margin: 0; line-height: 110%; } .store-locator__card-distance { font-size: 0.875rem; color: var(--color-foreground-secondary); white-space: nowrap; flex-shrink: 0; padding-block-start: 0.125rem; line-height: 150%; } .store-locator__card-address { font-style: normal; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.125rem; margin-block-end: 0.5rem; color: var(--color-foreground); line-height: 150%; } .store-locator__card-phone { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--color-foreground); text-decoration: underline; } .store-locator__card-phone .svg-wrapper { display: flex; align-items: center; flex-shrink: 0; } .store-locator__card-phone .icon { width: 1rem; height: 1rem; } .store-locator__card-departments { display: flex; flex-wrap: wrap; gap: 0; margin-block: var(--margin-lg); } .store-locator__card-department { font-size: var(--font-size--sm); line-height: 1.5; color: var(--color-foreground-secondary); } .store-locator__card-department:not(:last-child)::after { content: '\00a0\2022\00a0'; color: var(--color-foreground-secondary); } .store-locator__card-actions { display: flex; gap: 0.5rem; } .store-locator__card-actions .button-secondary { flex: 1; min-width: 0; padding-block: 0.625rem; padding-inline: 0.75rem; font-size: 0.875rem; text-align: center; } /* --- Empty state ------------------------------------------ */ .store-locator__empty { padding: 2rem 1rem; text-align: center; color: var(--color-foreground); } /* --- Desktop layout (≥750px) ------------------------------ */ @media screen and (min-width: 750px) { .store-locator__content { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: var(--gap-lg); } .store-locator__map-panel { position: sticky; top: var(--header-height, 0px); height: 80vh; min-height: unset; } .store-locator__map { min-height: unset; } .store-locator__tabs { display: none; } } /* --- Mobile layout (<750px) ------------------------------- */ @media screen and (max-width: 749px) { store-locator-component { display: flex; flex-direction: column; } .store-locator__map-panel { height: 60vh; } /* Tab panels hidden/shown by JS via aria-hidden on mobile */ .store-locator__map-panel[aria-hidden="true"], .store-locator__list-panel[aria-hidden="true"] { display: none; } .store-locator__tabs { display: flex; } } /* --- Idle / Active two-state model ------------------------ */ /* Intro text base */ .store-locator__intro { max-width: 600px; width: 100%; margin-block-end: var(--margin-lg); } /* Idle state: centered narrow layout */ store-locator-component[data-state="idle"] { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Override desktop grid; width:100% prevents shrink-to-fit from align-items:center on component */ store-locator-component[data-state="idle"] .store-locator__content { display: block; width: 100%; } store-locator-component[data-state="idle"] .store-locator__left-column { max-width: 600px; width: 100%; text-align: center; margin-inline: auto; } store-locator-component[data-state="idle"] .store-locator__toolbar { justify-content: center; } store-locator-component[data-state="idle"] .store-locator__filter-toggle { display: none; } store-locator-component[data-state="idle"] .store-locator__filters, store-locator-component[data-state="idle"] .store-locator__results-info, store-locator-component[data-state="idle"] .store-locator__tabs, store-locator-component[data-state="idle"] .store-locator__list-panel, store-locator-component[data-state="idle"] .store-locator__map-panel { display: none; } /* Active state: hide intro text; enforce min-height for sticky-map layout (Issue 1) */ store-locator-component[data-state="active"] .store-locator__intro { display: none; } store-locator-component[data-state="active"] .store-locator__content { min-height: 600px; } /* Opacity transition for idle→active reveal */ store-locator-component .store-locator__content { transition: opacity var(--surface-transition-duration, 300ms) var(--animation-easing, ease); } @media (prefers-reduced-motion: reduce) { store-locator-component .store-locator__content { transition: none; } } @media screen and (max-width: 749px) { store-locator-component[data-state="idle"] { align-items: flex-start; text-align: left; } store-locator-component[data-state="idle"] .store-locator__left-column { text-align: left; } store-locator-component[data-state="idle"] .store-locator__toolbar { justify-content: flex-start; } } /* --- Map pins --------------------------------------------- */ .store-locator__pin { display: block; cursor: pointer; } /* --- Map tooltip (InfoWindow content) --------------------- */ /* Strip native InfoWindow chrome */ .store-locator .gm-style-iw-c { padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .store-locator .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; } .store-locator__tooltip { width: 236px; padding: 0.75rem; display: flex; flex-direction: column; background-color: var(--color-background); } .store-locator__tooltip-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .store-locator__tooltip-name { font-size: var(--font-size--sm); font-weight: 700; color: var(--color-foreground); line-height: 150%; } .store-locator__tooltip-distance { font-size: var(--font-size--sm); color: var(--color-foreground); white-space: nowrap; flex-shrink: 0; line-height: 150%; } .store-locator__tooltip-address { font-style: normal; font-size: var(--font-size--sm); color: var(--color-foreground); display: flex; flex-direction: column; gap: 0.125rem; padding-bottom: 12px; line-height: 150%; font-weight: 400; } .store-locator__tooltip-phone { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--color-foreground); text-decoration: underline; padding-bottom: 12px; line-height: 150%; font-weight: 400; } .store-locator__tooltip-actions { display: flex; gap: 0.5rem; } .store-locator__tooltip-actions .button-secondary { flex: 1; min-width: 0; padding-block: 0.5rem; padding-inline: 0.5rem; font-size: 0.75rem; font-weight: 700; text-align: center; } /* --- Long text overflow protection ----------------------- */ .store-locator__card-name, .store-locator__card-address, .store-locator__tooltip-name, .store-locator__tooltip-address { overflow-wrap: break-word; } /* --- No API key — list-only mode (data-no-map) ----------- */ store-locator-component[data-no-map] .store-locator__map-panel, store-locator-component[data-no-map] .store-locator__tabs { display: none !important; } @media screen and (min-width: 750px) { store-locator-component[data-no-map] .store-locator__content { grid-template-columns: 1fr; } } /* --- prefers-reduced-motion additions -------------------- */ @media (prefers-reduced-motion: reduce) { .store-locator__card { transition: none; } } /* --- Print: hide map, show list only --------------------- */ @media print { .store-locator__map-panel, .store-locator__tabs, store-locator-drawer { display: none !important; } .store-locator__list-panel { max-height: none !important; overflow: visible !important; } store-locator-component[data-state="active"] .store-locator__content { display: block; } } /* END_SECTION:store-locator */ /* START_SECTION:text-card-grid (INDEX:80) */ .text-card-section .text-block:not(.custom-color) > p { color: var(--color-foreground-secondary); } /* Section spacing via custom properties */ @media screen and (min-width: 750px) { .text-card-section { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .text-card-section { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .text-card-section .link { color: var(--color-foreground); } /* END_SECTION:text-card-grid */ /* START_SECTION:text-media (INDEX:81) */ @media screen and (min-width: 750px) { .text-media { margin-block-start: var(--spacing-above-desktop, 0); margin-block-end: var(--spacing-below-desktop, 0); } } @media screen and (max-width: 749px) { .text-media { margin-block-start: var(--spacing-above-mobile, 0); margin-block-end: var(--spacing-below-mobile, 0); } } .text-media { --text-media-grid-columns: 1fr; grid-template-areas: 'media' 'content'; @media screen and (min-width: 750px) { --text-media-grid-columns: 1fr 1fr; grid-template-areas: 'media content'; } grid-template-columns: var(--text-media-grid-columns); } /* Page-width layout */ .section--page-width { &.text-media { @media screen and (min-width: 750px) { --text-media-grid-columns: var(--full-page-grid-margin) repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin); grid-template-areas: 'margin-left media content margin-right'; } } &.text-media--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media margin-right'; } } &.text-media--two-thirds { @media screen and (min-width: 750px) { --text-media-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 5) * 3) calc((var(--full-page-grid-central-column-width) / 5) * 2) var(--full-page-grid-margin); } } &.text-media--two-thirds.text-media--media-right { @media screen and (min-width: 750px) { --text-media-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 5) * 2) calc((var(--full-page-grid-central-column-width) / 5) * 3) var(--full-page-grid-margin); } } } /* Full-width layout */ .section--full-width { &.text-media { @media screen and (min-width: 750px) { --text-media-grid-columns: 1fr 1fr; grid-template-areas: 'media content'; } } &.text-media--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'content media'; } } &.text-media--two-thirds { @media screen and (min-width: 750px) { --text-media-grid-columns: 3fr 2fr; } } &.text-media--two-thirds.text-media--media-right { @media screen and (min-width: 750px) { --text-media-grid-columns: 2fr 3fr; } } } /* Mobile media position: bottom */ @media screen and (max-width: 749px) { .text-media--media-bottom-mobile { grid-template-areas: 'content' 'media'; } } /* Media area */ .text-media__media { grid-area: media; position: relative; overflow: hidden; @media screen and (min-width: 750px) { min-height: 608px; } } .section--page-width .text-media__media { @media screen and (max-width: 749px) { padding-inline: var(--page-margin); } } .text-media__media-image, .text-media__media-video { width: 100%; height: 100%; object-fit: cover; object-position: center; @media screen and (max-width: 749px) { aspect-ratio: 1 / 1; } } .text-media__media-image { @media screen and (min-width: 750px) { position: absolute; inset: 0; } } .text-media__media-link { display: block; height: 100%; } .text-media__placeholder { width: 100%; height: 100%; object-fit: cover; } /* Hotspot overlay */ .text-media__hotspots { position: absolute; inset: 0; z-index: var(--layer-flat); overflow: clip; pointer-events: none; } .text-media__hotspots > * { pointer-events: auto; } /* Content area */ .text-media .media-with-content__content { grid-area: content; } .text-media .media-with-content__content > .group-block-content { padding-inline: var(--page-margin); padding-block: calc(2 * var(--page-margin)); @media screen and (max-width: 749px) { padding-block-end: 0; } @media screen and (min-width: 750px) { padding-block: var(--page-margin); } } .section--page-width.text-media .media-with-content__content > .group-block-content { padding-inline: 0; @media screen and (min-width: 750px) { padding-inline-start: var(--page-margin); } } .section--page-width.text-media--media-right .media-with-content__content > .group-block-content { padding-inline-end: var(--page-margin); padding-inline-start: 0; } /* END_SECTION:text-media */ /* START_SECTION:tyz-best-sellers (INDEX:82) */ .section-resource-list__header--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__header--with-arrows > :first-child { flex: 1; min-width: 0; } .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* END_SECTION:tyz-best-sellers */ /* START_SECTION:tyz-explore (INDEX:84) */ .section-resource-list__header--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__header--with-arrows > :first-child { flex: 1; min-width: 0; } .section-resource-list__header--with-arrows .group-block-content > *:last-child:not(:first-child) { display: none; } .section-resource-list__header--with-arrows .article-carousel-title-bar__arrows { display: flex; flex-direction: row; gap: var(--spacing-sm, 16px); } .section-resource-list__header--with-arrows .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* END_SECTION:tyz-explore */ /* START_SECTION:tyz-recently-viewed-list (INDEX:85) */ .section-resource-list__header--with-arrows { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .section-resource-list__header--with-arrows > :first-child { flex: 1; min-width: 0; } .article-carousel-title-bar__arrows button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } @media screen and (max-width: 749px) { .section-resource-list__header--with-arrows .layout-panel-flex > .text-block { flex: 1; display: block; } } /* END_SECTION:tyz-recently-viewed-list */ /* START_SECTION:tyz-trending (INDEX:87) */ .tyz-trending { display: flex; flex-direction: column; gap: var(--gap-xs, 8px); } /* END_SECTION:tyz-trending */ /* START_SECTION:wishlist-page (INDEX:88) */ .wishlist-page { position: relative; } /* ----------------------------------------------------------------------- Overview header: title + actions row ----------------------------------------------------------------------- */ .wishlist-page__overview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 64px; } .wishlist-page__title { font-family: var(--font-heading--family); font-style: var(--font-heading--style); font-size: 36px; line-height: 110%; color: var(--color-foreground-heading); margin: 0; flex: 1 1 auto; } .wishlist-page__overview-actions { display: flex; align-items: center; gap: var(--gap-lg); flex-shrink: 0; } /* ----------------------------------------------------------------------- Create new list button (outlined) ----------------------------------------------------------------------- */ .wishlist-page__create-btn { font-family: var(--button-font-family-primary); text-transform: var(--button-text-case-primary); font-size: var(--font-size--sm); font-weight: 700; line-height: normal; padding: 16px 14px; border: 1px solid var(--color-border); background: transparent; color: var(--color-foreground); cursor: pointer; white-space: nowrap; border-radius: var(--style-border-radius-buttons-primary); transition: background 0.15s ease, color 0.15s ease; } .wishlist-page__create-btn:hover { /* background: var(--color-foreground); */ border-color: var(--color-foreground); /* color: var(--color-background); */ } .wishlist-page__create-btn:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } /* ----------------------------------------------------------------------- Login nudge (guest only) ----------------------------------------------------------------------- */ .wishlist-page__login-nudge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body--family); font-style: var(--font-body--style); font-size: var(--font-size--sm); color: var(--color-foreground); text-decoration: none; white-space: nowrap; line-height: 150%; } .wishlist-page__login-nudge:hover { text-decoration: underline; } /* ----------------------------------------------------------------------- Card grid: 1-col mobile → 3-col desktop ----------------------------------------------------------------------- */ .wishlist-page__card-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 40px; } @media screen and (min-width: 750px) { .wishlist-page__card-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } /* ----------------------------------------------------------------------- Overview card ----------------------------------------------------------------------- */ .wishlist-card { display: flex; flex-direction: column; gap: 24px; border: 1px solid var(--border-color); padding: var(--padding-2xl); height: 100%; } .wishlist-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .wishlist-card__header-meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .wishlist-card__name { font-family: var(--font-heading--family); font-style: var(--font-heading--style); font-size: var(--font-size--xl); line-height: 110%; color: var(--color-foreground-heading); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wishlist-card__count { font-family: var(--font-body--family); font-style: var(--font-body--style); font-size: var(--font-size--2xs); line-height: 150%; color: var(--color-foreground-secondary); margin: 0; } .wishlist-card__share { flex-shrink: 0; background: transparent; border: none; padding: 0; cursor: pointer; color: var(--color-foreground); line-height: 0; } .wishlist-card__share:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } /* ----------------------------------------------------------------------- Thumbnail grid: 3 equal columns with 8px gap ----------------------------------------------------------------------- */ .wishlist-card__images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wishlist-card__thumb-wrap { aspect-ratio: 106.00/132.63; overflow: hidden; @media screen and (min-width: 750px) { aspect-ratio: 126.22/157.94; } } .wishlist-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.2s ease; } .wishlist-card__thumb-wrap--loaded .wishlist-card__thumb { opacity: 1; } /* ----------------------------------------------------------------------- Card footer ----------------------------------------------------------------------- */ .wishlist-card__footer { margin-block-start: auto; } .wishlist-card__view-link { font-family: var(--font-body--family); font-style: var(--font-body--style); font-size: var(--font-size--sm); line-height: 150%; color: var(--color-foreground); text-decoration: underline; } .wishlist-card__view-link:hover { text-decoration: none; } /* ----------------------------------------------------------------------- Error state ----------------------------------------------------------------------- */ .wishlist-page__error:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 48px; text-align: center; } .wishlist-page__error-message { font-family: var(--font-body--family); font-style: var(--font-body--style); font-size: var(--font-size--md); color: var(--color-foreground); margin: 0; } .wishlist-page__retry-btn { font-family: var(--button-font-family-primary); text-transform: var(--button-text-case-primary); font-size: var(--font-size--sm); line-height: 1; padding: 10px 20px; border: 1px solid var(--color-foreground); background: transparent; color: var(--color-foreground); cursor: pointer; border-radius: var(--style-border-radius-buttons-primary); transition: background 0.15s ease, color 0.15s ease; } .wishlist-page__retry-btn:hover { background: var(--color-foreground); color: var(--color-background); } .wishlist-page__retry-btn:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } /* ----------------------------------------------------------------------- Overview header: mobile stack ----------------------------------------------------------------------- */ @media screen and (max-width: 749px) { .wishlist-page__overview-header { flex-direction: column; align-items: stretch; gap: var(--gap-xl); margin-block-end: 40px; } .wishlist-page__overview-actions { flex-direction: column; gap: var(--gap-xl); align-items: stretch; } .wishlist-page__create-btn { width: 100%; } } /* ----------------------------------------------------------------------- Overview header: reduced margin on the Individual view ----------------------------------------------------------------------- */ wishlist-page[data-view="list"] .wishlist-page__overview-header { margin-block-end: var(--margin-2xl); } /* ----------------------------------------------------------------------- Loading-state: fade the active view while data is fetching ----------------------------------------------------------------------- */ wishlist-page[data-state="loading"] .wishlist-page__overview { opacity: 0; pointer-events: none; } wishlist-page[data-state="ready"] .wishlist-page__overview, wishlist-page[data-state="error"] .wishlist-page__overview { opacity: 1; } wishlist-page[data-state="loading"] .wishlist-page__list-view { opacity: 0; pointer-events: none; } wishlist-page[data-state="ready"] .wishlist-page__list-view, wishlist-page[data-state="error"] .wishlist-page__list-view { opacity: 1; } /* ----------------------------------------------------------------------- View routing: show/hide containers based on active view ----------------------------------------------------------------------- */ wishlist-page[data-view="overview"] .wishlist-page__list-view { display: none; } wishlist-page[data-view="list"] .wishlist-page__overview { display: none; } wishlist-page[data-view="list"] .wishlist-page__create-btn { display: none; } /* ----------------------------------------------------------------------- Product grid: 1-col very small → 2-col mobile → 4-col desktop ----------------------------------------------------------------------- */ .wishlist-page__product-grid { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 4px; } @media screen and (max-width: 360px) { .wishlist-page__product-grid { grid-template-columns: 1fr; } } @media screen and (min-width: 750px) { .wishlist-page__product-grid { grid-template-columns: repeat(4, 1fr); gap: 56px 8px; } } @media screen and (max-width: 749px) { .wishlist-page__product-grid { margin-inline: calc(var(--page-margin) * -1); } } /* END_SECTION:wishlist-page */ /* CSS from block stylesheet tags */ /* START_BLOCK:_accordion-row-preview (INDEX:89) */ .accordion-preview { display: flex; flex-direction: row-reverse; justify-content: flex-end; width: fit-content; gap: 8px; cursor: pointer; width: 100%; user-select: none; } /* Line-clamp applied when collapsed; values from block settings via CSS variables */ .accordion-preview__line-clamp p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: var(--preview-line-clamp-mobile, 5); line-clamp: var(--preview-line-clamp-mobile, 5); } @media screen and (min-width: 750px) { .accordion-preview__line-clamp p { -webkit-line-clamp: var(--preview-line-clamp-desktop, 2); line-clamp: var(--preview-line-clamp-desktop, 2); } } .accordion-preview[data-expanded="true"] .accordion-preview__line-clamp p { display: block; -webkit-box-orient: unset; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; } .details__icon { height: auto; margin-inline-end: var(--margin-xs); } /* END_BLOCK:_accordion-row-preview */ /* START_BLOCK:_accordion-row (INDEX:90) */ .details__icon { height: auto; margin-inline-end: var(--margin-xs); } .details__heading { width: 100%; text-align: var(--heading-text-align, left); font-family: var(--heading-font, var(--font-heading--family)); } .details__title-stack { display: flex; flex-direction: column; gap: 2px; width: 100%; } .details__subtitle { color: var(--color-foreground-secondary); font-size: 12px; line-height: 150%; font-weight: 400; } .icon-toggle-wrapper { position: relative; } /* END_BLOCK:_accordion-row */ /* START_BLOCK:_announcement (INDEX:91) */ .text-block:not(.text-block--full-width).rte, .text-block:not(.text-block--full-width).paragraph { /* Safari doesn't support pretty, so fallback to balance */ text-wrap: balance; text-wrap: pretty; } .text-block:not(.text-block--full-width).h1, .text-block:not(.text-block--full-width).h2, .text-block:not(.text-block--full-width).h3, .text-block:not(.text-block--full-width).h4, .text-block:not(.text-block--full-width).h5, .text-block:not(.text-block--full-width).h6 { text-wrap: balance; } /* Hide underline unless text is using paragraph styles. */ .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a { text-decoration-color: transparent; } .text-block h1, .text-block.h1 > * { margin-block: var(--font-h1--spacing); } .text-block h2, .text-block.h2 > * { margin-block: var(--font-h2--spacing); } .text-block h3, .text-block.h3 > * { margin-block: var(--font-h3--spacing); } .text-block h4, .text-block.h4 > * { margin-block: var(--font-h4--spacing); } .text-block h5, .text-block.h5 > * { margin-block: var(--font-h5--spacing); } .text-block h6, .text-block.h6 > * { margin-block: var(--font-h6--spacing); } .text-block > *:first-child { margin-block-start: 0; } .text-block > *:last-child { margin-block-end: 0; } .text-block--align-center, .text-block--align-center > * { margin-inline: auto; } .text-block--align-right, .text-block--align-right > * { margin-inline-start: auto; } /* END_BLOCK:_announcement */ /* START_BLOCK:_article-component-title (INDEX:93) */ .article-carousel-title-bar__cta.link { color: var(--color-foreground); text-decoration: underline; text-underline-offset: 0.2em; &:hover { text-decoration-color: transparent; } } /* END_BLOCK:_article-component-title */ /* START_BLOCK:_banner (INDEX:94) */ .banner-block { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; } .banner-block__media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .banner-block__image, .banner-block__video, .banner-block__placeholder { width: 100%; height: 100%; object-fit: cover; object-position: center; } .banner-block__video-wrapper { width: 100%; height: 100%; } .banner-block__video-wrapper--desktop { display: block; } .banner-block__video-wrapper--mobile { display: none; } .banner-block__image--desktop { display: block; } .banner-block__image--mobile { display: none; } @media screen and (max-width: 749px) { .banner-block__video-wrapper--desktop, .banner-block__image--desktop { display: none; } .banner-block__video-wrapper--mobile, .banner-block__image--mobile { display: block; } } .banner-block__media-link { position: absolute; inset: 0; z-index: 1; } .banner-block__hotspots { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .banner-block__hotspots > * { pointer-events: auto; } .banner-block__content { position: absolute; inset: 0; display: flex; align-items: var(--banner-v-align, flex-start); justify-content: var(--banner-h-align, flex-start); padding: 24px; z-index: 3; pointer-events: none; } .banner-block__content-inner { display: flex; flex-direction: column; gap: 12px; pointer-events: auto; } .banner-block__content-inner--has-bg { background-color: var(--content-bg, rgba(255, 255, 255, 0.9)); padding: 16px 20px; border-radius: 4px; } .banner-block__title { margin: 0; font-family: var(--title-font, inherit); color: var(--title-color, currentColor); font-size: var(--title-size, 1.5rem); font-weight: var(--title-weight, 600); line-height: 1.2; } .banner-block__description { margin: 0; font-family: var(--desc-font, inherit); color: var(--desc-color, currentColor); font-size: var(--desc-size, 1rem); font-weight: var(--desc-weight, 400); line-height: 1.5; } .banner-block__cta-container { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .banner-block__text-link { color: currentColor; text-decoration: underline; text-underline-offset: 0.2em; } .banner-block__text-link:hover { text-decoration-color: transparent; } /* END_BLOCK:_banner */ /* START_BLOCK:_blog-post-content (INDEX:96) */ .blog-post-content { max-width: 768px; margin: 0 auto; } .main-blog-post--events .blog-post-content { max-width: 672px; margin-left: 0; h2 { font-size: 30px; } } /* END_BLOCK:_blog-post-content */ /* START_BLOCK:_blog-post-description (INDEX:97) */ .blog-post-card__content-text a { color: var(--color-primary); } .custom-color, .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) { color: var(--color); } /* END_BLOCK:_blog-post-description */ /* START_BLOCK:_blog-post-featured-image-enriched (INDEX:98) */ .blog-post-featured-image { --width: 100%; --custom-width: 100%; display: block; position: relative; width: var(--width); } .blog-post-featured-image.size-style { --width: var(--size-style-width, 100%); } .blog-post-featured-image--height-fit { height: fit-content; } .blog-post-featured-image--height-fill { height: 100%; } .blog-post-featured-image__image { aspect-ratio: var(--ratio-mobile); width: 100%; height: 100%; object-fit: cover; object-position: center center; @media screen and (min-width: 750px) { aspect-ratio: var(--ratio); } } @media screen and (max-width: 749px) { .blog-post-featured-image { --width: var(--width-mobile, var(--width)); --custom-width: var(--custom-width-mobile, var(--custom-width)); } .blog-post-featured-image.size-style { --width: var(--size-style-width-mobile, var(--size-style-width, 100%)); } } /* END_BLOCK:_blog-post-featured-image-enriched */ /* START_BLOCK:_blog-post-featured-image (INDEX:99) */ .blog-post-featured-image { --width: 100%; --custom-width: 100%; display: block; position: relative; width: var(--width); } .blog-post-featured-image.size-style { --width: var(--size-style-width, 100%); } .blog-post-featured-image--height-fit { height: fit-content; } .blog-post-featured-image--height-fill { height: 100%; } .blog-post-featured-image__image { aspect-ratio: var(--ratio-mobile); width: 100%; height: 100%; object-fit: cover; object-position: center center; @media screen and (min-width: 750px) { aspect-ratio: var(--ratio); } } @media screen and (max-width: 749px) { .blog-post-featured-image { --width: var(--width-mobile, var(--width)); --custom-width: var(--custom-width-mobile, var(--custom-width)); } .blog-post-featured-image.size-style { --width: var(--size-style-width-mobile, var(--size-style-width, 100%)); } } /* END_BLOCK:_blog-post-featured-image */ /* START_BLOCK:_blog-post-image (INDEX:100) */ .blog-post-card__image { width: 100%; object-fit: cover; object-position: center center; height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale)); } .blog-post-card__image--small { --blog-post-card-img-height: 280px; } .blog-post-card__image--medium { --blog-post-card-img-height: 340px; } .blog-post-card__image--large { --blog-post-card-img-height: 400px; } /* END_BLOCK:_blog-post-image */ /* START_BLOCK:_blog-post-info-text (INDEX:101) */ .blog-post-details { display: flex; gap: 4px; font-size: 11px; color: var(--color-foreground-secondary); white-space: nowrap; flex-wrap: wrap; text-transform: uppercase; justify-content: var(--blog-details-justify-mobile, center); } @media screen and (min-width: 750px) { .blog-post-details { justify-content: var(--blog-details-justify, center); } } .blog-post-details > span { text-overflow: clip; overflow: hidden; } .blog-post-details__event-details { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .blog-post-details__date-time, .blog-post-details__location { display: flex; align-items: center; gap: 6px; color: var(--color-foreground); } .blog-post-details__location { text-decoration: underline; } /* END_BLOCK:_blog-post-info-text */ /* START_BLOCK:_blog-post-title (INDEX:102) */ .blog-post-title { text-align: left; @media screen and (min-width: 750px) { text-align: center; } } .main-blog-post--events .blog-post-title { @media screen and (min-width: 750px) { text-align: left; } } /* END_BLOCK:_blog-post-title */ /* START_BLOCK:_blog-tag-filter (INDEX:103) */ .blog-tag-filter { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding-block: 40px 0; gap: 16px; @media screen and (min-width: 750px) { gap: 12px; padding-block-end: 40px; } } .blog-tag-filter__heading { font-family: var(--font-heading--family); font-weight: 400; line-height: 1.1; color: rgb(var(--color-foreground-rgb)); font-size: 36px; text-transform: capitalize; @media screen and (min-width: 750px) { font-size: 48px; } } .blog-tag-filter__nav { width: 100%; max-width: 100%; } .blog-tag-filter__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.5rem; list-style: none; margin: 0; padding: 0; } .blog-tag-filter__item { margin: 0; } .blog-tag-filter__pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; min-height: 30px; font-size: 12px; color: rgb(var(--color-foreground-rgb)); text-decoration: none; background-color: rgb(var(--color-background-rgb)); border: 1px solid rgb(var(--color-foreground-rgb) / 0.18); border-radius: 2px; box-sizing: border-box; transition: border-color 0.15s ease, color 0.15s ease; line-height: 1; text-transform: capitalize; user-select: none; } .blog-tag-filter__pill:hover { border-color: rgb(var(--color-foreground-rgb) / 0.45); } .blog-tag-filter__pill:focus { outline: none; } .blog-tag-filter__pill:focus-visible { outline: 2px solid rgb(var(--color-foreground-rgb)); outline-offset: 2px; } .blog-tag-filter__pill--active { border-color: rgb(var(--color-foreground-rgb)); border-width: 1px; } /* END_BLOCK:_blog-tag-filter */ /* START_BLOCK:_card (INDEX:104) */ .card { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; height: 100%; border-radius: var(--border-radius, 0); border-width: var(--border-width, 0); border-style: var(--border-style, none); border-color: var(--border-color); container-type: inline-size; } .card__content { width: 100%; height: 100%; position: relative; z-index: var(--layer-flat); display: flex; flex-direction: column; aspect-ratio: var(--card-ratio, 1); } .card__content.background-transparent { background-color: transparent; } /* When card has both image and content, use min-height from container query */ .card__content--has-min-height { min-height: calc(100cqw / var(--card-ratio-numeric)); } .card__inner { flex: 1; } .card__media-wrapper { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .card__media-wrapper video { z-index: var(--layer-raised); } .card__link { position: absolute; inset: 0; z-index: var(--layer-raised); } .card__link ~ :is(.card__content, .card__media-wrapper) { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } /* Needs the .card__link ~ to be specific enough to take effect. */ .card__link ~ .card__content--design-mode { pointer-events: auto; } /* END_BLOCK:_card */ /* START_BLOCK:_carousel-content (INDEX:105) */ .carousel-content slideshow-slides { --slideshow-gap: var(--carousel-gap); } .carousel-content slideshow-slides > .card { flex: 0 0 auto; width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-mobile-columns, 2) ); } @media (min-width: 750px) { .carousel-content slideshow-slides > .card { width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-columns, 4) ); } } .carousel-content .slideshow-control[disabled] { display: none; } .carousel-content slideshow-arrows { padding-inline: var(--util-page-margin-offset); } .carousel-content .slideshow-control--next { margin-inline-start: auto; } /* END_BLOCK:_carousel-content */ /* START_BLOCK:_cart-products (INDEX:106) */ .cart-page--empty .cart-items__wrapper { display: flex; flex-direction: column; align-items: center; margin-block-start: 0; text-align: center; } .cart-page__title + .cart-page__items { margin-block-start: var(--margin-lg); } /* END_BLOCK:_cart-products */ /* START_BLOCK:_cart-summary (INDEX:107) */ .cart__summary-item { display: flex; align-items: center; justify-content: space-between; } .cart__summary-item.tax-note small { font-size: var(--font-size--2xs); } .cart__discount-label { display: flex; align-items: center; gap: var(--gap-2xs); } .cart__total { align-items: baseline; font-weight: var(--font-weight-bold); } .cart__tax-note { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .cart__discount-label svg { width: var(--icon-size-sm); height: var(--icon-size-sm); display: inline-block; } .cart__summary-inner { display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap-2xl) - var(--gap-xs)); container-type: inline-size; padding: 0; position: sticky; top: 0; align-self: start; @media screen and (min-width: 750px) { grid-row: 1 / -1; } } body:has(> #header-group .header[sticky]) .cart__summary-inner { top: var(--header-height, 0); } .cart__summary-container { @media screen and (max-width: 749px) { border: none; } @media screen and (min-width: 750px) { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; } } .cart__summary-container:not(.cart__container--extend), .cart__summary-container:not(.cart__container--extend) .cart__summary-inner { height: auto; } .cart__container--extend { height: 100%; @media screen and (min-width: 750px) { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } } /* If extend is on, only include top and bottom borders when the border radius is 0. */ .cart__container--extend:not(.has-border-radius) { @media screen and (min-width: 750px) { border-top: none; border-bottom: none; } } .cart__container--extend .cart__summary-inner { height: 100%; @media screen and (min-width: 750px) { grid-row: 2 / -1; } } /* If extend is off, apply the border radius to the inner summary container */ .cart__summary-inner.has-border-radius { border-radius: var(--border-radius); } @media screen and (max-width: 749px) { .inherit-parent-scheme--mobile { --color-background: inherit; --color-background-rgb: inherit; --color-foreground: inherit; --color-foreground-rgb: inherit; --color-primary: inherit; --color-primary-rgb: inherit; --color-primary-hover: inherit; --color-primary-hover-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-shadow: inherit; --color-shadow-rgb: inherit; --color-foreground-heading: inherit; --color-primary-button-text: inherit; --color-primary-button-background: inherit; --color-primary-button-border: inherit; --color-primary-button-hover-text: inherit; --color-primary-button-hover-background: inherit; --color-primary-button-hover-border: inherit; --color-secondary-button-text: inherit; --color-secondary-button-background: inherit; --color-secondary-button-border: inherit; --color-secondary-button-hover-text: inherit; --color-secondary-button-hover-background: inherit; --color-secondary-button-hover-border: inherit; --color-input-text: inherit; --color-input-text-rgb: inherit; --color-input-background: inherit; } } /* END_BLOCK:_cart-summary */ /* START_BLOCK:_cart-title (INDEX:108) */ .cart-title__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cart-title__header h1 { line-height: 110%; } .cart-title__count { line-height: 150%; } .cart-title h1 { margin-block-end: 0; display: inline-flex; align-items: center; gap: var(--gap-sm); } .cart-title .cart-bubble { width: fit-content; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--style-border-radius-buttons-primary); aspect-ratio: auto; padding: var(--cart-padding); } .cart-title .cart-bubble[data-maintain-ratio] { aspect-ratio: 1; min-width: 26px; } .cart-title .cart-bubble__background { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } .cart-title .cart-bubble__text { color: var(--color-foreground); font-family: var(--font-paragraph--family); font-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs)); } .cart-title__subtitle { margin-block-start: var(--gap-sm); margin-block-end: 0; } .cart-title__cta { margin-block-start: var(--gap-md); } /* END_BLOCK:_cart-title */ /* START_BLOCK:_cms-banner-card (INDEX:109) */ .cms-banner-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; } .cms-banner-card__media { position: relative; width: 100%; aspect-ratio: var(--cms-banner-aspect-ratio, 2 / 3); } .cms-banner-card__image, .cms-banner-card__video, .cms-banner-card__placeholder { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cms-banner-card__video-wrapper { width: 100%; height: 100%; } .cms-banner-card__video-wrapper--desktop { display: block; } .cms-banner-card__video-wrapper--mobile { display: none; } .cms-banner-card__image--desktop { display: block; } .cms-banner-card__image--mobile { display: none; } @media screen and (max-width: 749px) { .cms-banner-card__video-wrapper--desktop, .cms-banner-card__image--desktop { display: none; } .cms-banner-card__video-wrapper--mobile, .cms-banner-card__image--mobile { display: block; } } /* Card URL sits behind media so nested Shop links / buttons receive clicks (Issue 3). */ .cms-banner-card__link { position: absolute; inset: 0; z-index: 0; } .cms-banner-card--has-card-link .cms-banner-card__media { position: relative; z-index: 1; } /* Clicks pass through image/video to the card link; interactive descendants stay clickable. */ .cms-banner-card--has-card-link :is(.cms-banner-card__image, .cms-banner-card__video, .cms-banner-card__placeholder) { pointer-events: none; } .cms-banner-card__link ~ :is(.cms-banner-card__media, .cms-banner-card__below-content) { pointer-events: none; :is(a, button, input, [role='button']) { pointer-events: auto; } } /* Over-image content */ .cms-banner-card__over-content { position: absolute; inset: 0; display: flex; align-items: var(--banner-v-align, flex-end); justify-content: var(--banner-h-align, flex-start); padding: 24px; z-index: 2; pointer-events: none; } .cms-banner-card__over-content-inner { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; position: relative; z-index: 1; } /* Below-image content — above the full-bleed card link */ .cms-banner-card__below-content { display: flex; flex-direction: column; gap: 4px; padding: 16px 0 0; position: relative; z-index: 2; } .cms-banner-card__below-content .link, .cms-banner-card__below-content a { color: var(--color-foreground); } /* Hotspot layer — always positioned over the media */ .cms-banner-card__hotspot-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .cms-banner-card__hotspot-layer > :not(.hotspot-group) { display: none; } .cms-banner-card__hotspot-layer > .hotspot-group { pointer-events: auto; overflow: visible; } /* Hide hotspot groups from the content areas (they render in __hotspot-layer instead) */ .cms-banner-card__over-content .hotspot-group, .cms-banner-card__below-content .hotspot-group { display: none; } /* END_BLOCK:_cms-banner-card */ /* START_BLOCK:_cms-banner (INDEX:110) */ /* Default grab cursor + inactive-slide pointer imply the whole banner is clickable (PN-879 / RIBLD-1086 pattern). */ .cms-banner-carousel-content:not([dragging]) { --cursor: default; } /* Carousel layout */ .cms-banner-carousel-content slideshow-slides { --slideshow-gap: var(--carousel-gap); } .cms-banner-carousel-content slideshow-slides > .cms-banner-card { flex: 0 0 auto; width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-mobile-columns, 2) ); } @media (min-width: 750px) { .cms-banner-carousel-content slideshow-slides > .cms-banner-card { width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 6) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-columns, 6) ); } } /* Grid layout */ .cms-banner-grid { display: grid; grid-template-columns: var(--cms-banner-grid-columns-mobile); gap: var(--cms-banner-grid-gap); } @media screen and (min-width: 750px) { .cms-banner-grid { grid-template-columns: var(--cms-banner-grid-columns); } } .cms-banner-grid > * { min-width: 0; } .cms-banner-grid .cms-banner-card { height: 100%; } /* Pagination responsive padding */ .cms-banner-pagination { padding-top: var(--pagination-pt-mobile); padding-bottom: var(--pagination-pb-mobile); } @media (min-width: 750px) { .cms-banner-pagination { padding-top: var(--pagination-pt-desktop); padding-bottom: var(--pagination-pb-desktop); } } /* Dots pagination */ .cms-banner-pagination__dots { align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .cms-banner-pagination__dots--mobile { display: flex; } .cms-banner-pagination__dots--desktop { display: none; } @media (min-width: 750px) { .cms-banner-pagination__dots--mobile { display: none; } .cms-banner-pagination__dots--desktop { display: flex; } } .cms-banner-pagination__dot { display: block; width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background-color: rgb(var(--color-foreground-rgb) / var(--opacity-30)); transition: background-color 0.2s ease; } .cms-banner-pagination__dot[aria-current='true'] { background-color: var(--color-foreground); } .cms-banner-pagination__dot:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); } /* END_BLOCK:_cms-banner */ /* START_BLOCK:_cms-editorial-gallery-banner (INDEX:111) */ .cms-editorial-gallery .editorial-gallery__banner { position: relative; } /* Hidden banners use visibility:hidden to preserve grid space on desktop and mobile row layouts. Mobile stacked layouts remove the banner entirely since vertical stacking doesn't need the placeholder space. */ .cms-editorial-gallery .editorial-gallery__banner--hidden { visibility: hidden; } @media screen and (max-width: 749px) { .cms-editorial-gallery--mobile-stack .editorial-gallery__banner--hidden { display: none !important; } } .cms-editorial-gallery .editorial-gallery__banner-link { position: absolute; inset: 0; } .cms-editorial-gallery .editorial-gallery__banner-link ~ :is(.editorial-gallery__block-inner, .editorial-gallery__media, .editorial-gallery__content) { pointer-events: none; } .cms-editorial-gallery .editorial-gallery__banner-link ~ :is(.editorial-gallery__block-inner, .editorial-gallery__media, .editorial-gallery__content) :is(a, button, dialog) { pointer-events: auto; } /* Block inner wrapper */ .cms-editorial-gallery .editorial-gallery__block-inner { display: flex; flex-direction: column; align-items: center; align-self: stretch; flex-shrink: 0; width: 100%; gap: var(--spacing-spacing-4, 16px); } .cms-editorial-gallery .editorial-gallery__media-wrapper { position: relative; width: 100%; } .cms-editorial-gallery .editorial-gallery__media { position: relative; overflow: hidden; border-radius: var(--border-radius, 0); } .cms-editorial-gallery .editorial-gallery__media img, .cms-editorial-gallery .editorial-gallery__media video, .cms-editorial-gallery .editorial-gallery__media svg { width: 100%; height: 100%; object-fit: cover; } .cms-editorial-gallery .editorial-gallery__placeholder { width: 100%; height: 100%; background-color: var(--color-background-secondary, #f5f5f5); } .cms-editorial-gallery .editorial-gallery__placeholder svg { width: 100%; height: 100%; object-fit: cover; } .cms-editorial-gallery .editorial-gallery__hotspots { position: absolute; inset: 0; z-index: var(--layer-flat); pointer-events: none; } .cms-editorial-gallery .editorial-gallery__hotspots > * { pointer-events: auto; } /* Content container — rendered below the media via block.blocks iteration. Consumes alignment, position, and padding CSS variables. */ .cms-editorial-gallery .editorial-gallery__content-container { position: relative; z-index: var(--layer-flat); display: flex; flex-direction: column; align-self: stretch; align-items: var(--content-align-items, flex-start); justify-content: var(--content-justify-content, flex-start); gap: 4px; } /* END_BLOCK:_cms-editorial-gallery-banner */ /* START_BLOCK:_cms-testimonial-slide (INDEX:112) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); background-color: var(--custom-bg-color, rgb(var(--color-background))); color: rgb(var(--color-foreground)); } .slide__content > .group-block-content { margin: auto; } .slide__content--align-left .text-block > * { text-align: left; } .slide__content--align-center .text-block > * { text-align: center; } .slide__content--align-right .text-block > * { text-align: right; } .slide__content--align-left .author { justify-content: flex-start; } .slide__content--align-center .author { justify-content: center; } .slide__content--align-right .author { justify-content: flex-end; } /* END_BLOCK:_cms-testimonial-slide */ /* START_BLOCK:_collection-image (INDEX:115) */ .collection-image { width: var(--image-width); } .collection-image .collection-image__featured-image { aspect-ratio: var(--ratio); object-fit: cover; } /* END_BLOCK:_collection-image */ /* START_BLOCK:_collection-link (INDEX:117) */ .collection-links__link { --min-font-size: var(--font-size--4xl); --max-font-size: var(--font-size--6xl); display: flex; color: inherit; text-decoration: none; text-wrap: pretty; font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size)); @media (hover: hover) { opacity: var(--disabled-opacity); } [layout='spotlight'] & { opacity: var(--disabled-opacity); } &[aria-current='true'] { opacity: 1; } .text-block { display: inline-block; } @media (max-width: 749px) { --min-font-size: var(--font-size--3xl); --max-font-size: var(--font-size--5xl); [layout='spotlight'] & { white-space: normal; scroll-snap-align: start; text-wrap: pretty; span { text-wrap: pretty; } } } } .collection-links__count { font-size: 0.5em; opacity: var(--disabled-opacity); font-weight: var(--font-paragraph--weight); } .collection-links__image { align-items: center; justify-content: center; &:not([hidden]) { display: flex; } &[reveal] { --offset: 15px; position: fixed; top: 0; left: 0; z-index: var(--layer-temporary); display: block; translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset)); pointer-events: none; width: auto; image-block { --image-height-basis: 5rem; height: var(--image-height); } } } /* END_BLOCK:_collection-link */ /* START_BLOCK:_content-without-appearance (INDEX:118) */ @media screen and (max-width: 749px) { .media-with-content__content { min-height: var(--mobile-content-min-height, auto); } } /* END_BLOCK:_content-without-appearance */ /* START_BLOCK:_desktop-quick-add (INDEX:120) */ .desktop-quick-add-block { display: contents; } /* END_BLOCK:_desktop-quick-add */ /* START_BLOCK:_feature-grid-item (INDEX:122) */ .feature-grid-item { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; height: 100%; } .feature-grid-item__link { position: absolute; inset: 0; z-index: var(--layer-raised); } .feature-grid-item__link ~ :is(.feature-grid-item__content, .feature-grid-item__media-wrapper) { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } .feature-grid-item__media-wrapper { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .feature-grid-item__content { position: relative; z-index: var(--layer-flat); width: 100%; } /* END_BLOCK:_feature-grid-item */ /* START_BLOCK:_featured-blog-posts-card (INDEX:124) */ .featured-blog-posts-card { text-align: var(--text-align); } .featured-blog-posts-card__inner { gap: var(--gap); } .resource-list--grid .resource-list__item { min-width: 0; } /* Editorial layout */ .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { .featured-blog-posts-card__content { --flex-wrap: nowrap; } } @media (max-width: 768px) { .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { .featured-blog-posts-card__image, .blog-placeholder-svg { aspect-ratio: unset; } } } .featured-blog-posts-card__inner a, .featured-blog-posts-card__inner button { pointer-events: auto; } /* allow all blocks to be selectable in editor preview */ .shopify-design-mode .featured-blog-posts-card__content * { pointer-events: auto; } .featured-blog-posts-card__content { --flex-wrap: wrap; } .featured-blog-posts-card__content h4 { margin: 0; } /* END_BLOCK:_featured-blog-posts-card */ /* START_BLOCK:_featured-blog-posts-image (INDEX:125) */ .featured-blog-posts-card__image { width: 100%; } .featured-blog-posts-card__image .blog-placeholder-svg { object-fit: cover; width: 100%; height: 100%; } /* END_BLOCK:_featured-blog-posts-image */ /* START_BLOCK:_featured-product (INDEX:130) */ .featured-product-content-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); } .featured-product-content-bottom:not(:has(product-swatches)) { display: none; } /* END_BLOCK:_featured-product */ /* START_BLOCK:_footer-policy-list (INDEX:132) */ .policy-list-trigger { anchor-name: --terms-policies-trigger; cursor: pointer; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } .policy_list { li { border-radius: calc(var(--style-border-radius-popover) - 8px); a { color: var(--color-foreground); display: inline-block; padding: 8px; text-align: start; width: 100%; outline-color: #0000; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } &:is(:hover, :focus-within) { background: rgb(var(--color-foreground-rgb) / 0.15); } } } .terms-policies-popover { position-anchor: --terms-policies-trigger; inset: unset; bottom: calc(anchor(top) + 1rem); left: anchor(left); border-radius: var(--style-border-radius-popover); background: linear-gradient(var(--color-background) 0 100%), linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%); background-clip: padding-box, border-box; border: 1px solid #0000; box-shadow: var(--shadow-popover); padding: 8px; margin: 0; opacity: 0; scale: 0.94; translate: 0 6px; transform-origin: 6ch 100%; } .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 1; translate: 0 0; scale: 1; } @media screen and (max-width: 750px) { .terms-policies-popover { left: anchor(center); transform: translate(-50%, 0); transform-origin: 0% 100%; } } @supports not (position-anchor: --account-button-trigger) { .terms-policies-popover { bottom: unset; top: calc(var(--anchor-top) * 1px); left: calc(var(--anchor-left) * 1px); transform: translate(0, calc(-100% - 1.25rem)); } @media screen and (max-width: 750px) { .terms-policies-popover { left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px); transform: translate(-50%, calc(-100% - 1.25rem)); } } } @media (prefers-reduced-motion: no-preference) { .terms-policies-popover { transition-property: display, overlay, opacity, scale, translate; transition-behavior: allow-discrete; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); } @starting-style { .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 0.7; translate: 0 6px; scale: 0.94; } } } /* END_BLOCK:_footer-policy-list */ /* START_BLOCK:_footer-social-icons (INDEX:133) */ .social-icons__wrapper { display: flex; gap: var(--gap-sm); flex-wrap: wrap; justify-content: center; align-self: stretch; } /* END_BLOCK:_footer-social-icons */ /* START_BLOCK:_help-accordion (INDEX:136) */ .help-accordion { display: flex; flex-direction: column; gap: 0; width: 100%; } .help-accordion__title { font-family: var(--font-heading--family); font-weight: 400; font-size: 30px; line-height: 110%; color: var(--color-foreground); margin: 0 0 16px; } .help-accordion__rows { display: flex; flex-direction: column; width: 100%; } .help-accordion__rows accordion-custom { border-top: 1px solid var(--color-border); } .help-accordion__rows accordion-custom:first-child { border-top: none; } .help-accordion__row { width: 100%; } .help-accordion__summary { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; cursor: pointer; list-style: none; min-height: 44px; } accordion-custom:last-child .help-accordion__summary { padding-bottom: 0; } .help-accordion__summary::-webkit-details-marker { display: none; } .help-accordion__question { font-family: var(--font-heading--family); font-weight: 400; font-size: var(--font-size--lg); line-height: 110%; color: var(--color-foreground); flex: 1; } .help-accordion__summary .icon-caret { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .help-accordion__summary .icon-caret svg { width: 100%; height: 100%; transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease); } .help-accordion__row[open] .icon-caret svg { transform: rotate(180deg); } .help-accordion__answer { padding-bottom: 16px; font-family: var(--font-body--family); font-size: 0.875rem; line-height: 1.6; color: var(--color-foreground); } .help-accordion__answer > * { margin: 0; } .help-accordion__answer > * + * { margin-top: 8px; } accordion-custom:last-child .help-accordion__answer { padding-top: 24px; } /* END_BLOCK:_help-accordion */ /* START_BLOCK:_help-article-list (INDEX:137) */ .help-article-list { display: flex; flex-direction: column; gap: 0; width: 100%; } .help-article-list__heading { font-family: var(--font-heading--family); font-weight: 400; font-size: 30px; line-height: 110%; color: var(--color-foreground); margin: 0 0 40px; } .help-article-list__rows { display: flex; flex-direction: column; width: 100%; } .help-article-list__row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 36px; min-height: 44px; padding-block: 24px; border-top: 1px solid var(--color-border); text-decoration: none; color: var(--color-foreground); } .help-article-list__row--first { border-top: none; min-height: 20px; padding-top: 0; } .help-article-list__row:last-child { padding-bottom: 0; } .help-article-list__row-title { font-family: var(--font-heading--family); font-weight: 400; font-size: 1rem; line-height: 110%; color: var(--color-foreground); flex: 1; } .help-article-list__row-chevron { width: 20px; height: 20px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .help-article-list__row-chevron svg { width: 7px; height: 12px; } /* END_BLOCK:_help-article-list */ /* START_BLOCK:_help-category-card (INDEX:138) */ .help-category-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 2px; border: 1px solid var(--color-border); overflow: hidden; text-decoration: none; color: var(--color-foreground); } .help-category-card:hover { border-color: var(--color-foreground); } .help-category-card__header { display: flex; flex-direction: row; align-items: center; gap: 16px; } .help-category-card__icon { width: 32px; height: 32px; overflow: hidden; flex-shrink: 0; } .help-category-card__icon img { width: 100%; height: 100%; object-fit: contain; } .help-category-card__heading { font-family: var(--font-heading--family); font-weight: 400; font-size: var(--font-size--lg, 1.125rem); line-height: 110%; color: var(--color-foreground); margin: 0; } .help-category-card__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .help-category-card__article-link { font-family: var(--font-body--family); font-size: var(--font-size--sm, 0.875rem); font-weight: 400; color: var(--color-foreground); text-decoration-line: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; line-height: 150%; } .help-category-card__article-link:hover { text-decoration-line: none; } .help-category-card__view-all { font-family: var(--font-body--family); font-size: var(--font-size--sm, 0.875rem); font-weight: 700; color: var(--color-foreground); text-decoration-line: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; line-height: 150%; } /* END_BLOCK:_help-category-card */ /* START_BLOCK:_help-quick-action (INDEX:139) */ .help-quick-action { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; border-radius: 2px; border: 1px solid #ececec; overflow: hidden; text-decoration: none; color: var(--color-foreground); } .help-quick-action:hover { border-color: var(--color-foreground); } .help-quick-action__icon { width: 40px; height: 40px; overflow: hidden; flex-shrink: 0; } .help-quick-action__icon img { width: 100%; height: 100%; object-fit: contain; } .help-quick-action__label { font-family: var(--font-heading--family); font-weight: 400; font-size: var(--font-size--xl); line-height: 110%; color: var(--color-foreground); } @media screen and (max-width: 749px) { .help-quick-action { flex-direction: row; align-items: center; gap: 16px; } } /* END_BLOCK:_help-quick-action */ /* START_BLOCK:_hero-banner-slide (INDEX:141) */ slideshow-slide > .hero-banner-slide__image-container { display: grid; grid-template-columns: repeat(var(--hero-media-count, 1), 1fr); position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--corner-radius, 0); } .hero-banner-slide__image-container > .hero-banner-slide__image { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: var(--media-position-desktop, center); } .hero-banner-slide__image-container > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--media-position-desktop, center); } /* Mobile/Desktop media visibility */ .hero-banner-slide__image--mobile, .hero-banner-slide__video-wrapper--mobile { display: none; } .hero-banner-slide__image--desktop, .hero-banner-slide__video-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .hero-banner-slide__image--desktop, .hero-banner-slide__video-wrapper--desktop { display: none; } .hero-banner-slide__image--mobile, .hero-banner-slide__video-wrapper--mobile { display: block; } slideshow-slide > .hero-banner-slide__image-container { grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr); } /* Mobile stacking */ slideshow-slide > .hero-banner-slide__image-container.hero-banner-slide__image-container--stack-mobile { grid-template-columns: 1fr; grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1))); } .hero-banner-slide__image-container > .hero-banner-slide__image, .hero-banner-slide__image-container > picture > img { object-position: var(--media-position-mobile, center); } } .hero-banner-slide__video-wrapper--desktop, .hero-banner-slide__video-wrapper--mobile { position: relative; width: 100%; height: 100%; } .hero-banner-slide__video-wrapper--desktop > video, .hero-banner-slide__video-wrapper--mobile > video { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hero-banner-slide__placeholder { width: 100%; height: 100%; object-fit: cover; } .hero-banner-slide__content { height: 100%; position: relative; z-index: var(--layer-flat); pointer-events: none; } .hero-banner-slide__content :is(a, button, input, textarea, select) { pointer-events: auto; } .hero-banner-slide__content > * { margin: auto; } /* Expand sole group to fill slide height; explicit height ensures children's percentage heights resolve on all browsers. Scoped to height=fill so user-selected fit/custom heights win. */ .hero-banner--content-on-media .hero-banner-slide__content > .group-block-content > .group-block.group-block--height-fill:only-child { flex: 1; min-height: 0; height: 100%; } .hero-banner-slide__content.background-transparent { background-color: transparent; } .hero-banner-slide__content-inner--has-background { background-color: var(--content-bg, rgba(255, 255, 255, 0.9)); padding: 16px; border-radius: 4px; } /* Blurred reflection */ .hero-banner-slide__image-container[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-banner-slide__image-container[data-blur-shadow='true']::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .hero-banner-slide__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-banner-slide__blurred-image--desktop { display: none; } @media (min-width: 750px) { .hero-banner-slide__blurred-image--desktop { display: block; } } .hero-banner-slide__blurred-image--mobile { display: block; } @media (min-width: 750px) { .hero-banner-slide__blurred-image--mobile { display: none; } } .hero-banner-slide__blurred-image img, .hero-banner-slide__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); } .hero-banner-slide__blurred-image img:not(:only-child), .hero-banner-slide__blurred-image svg:not(:only-child) { width: 50%; } .hero-banner-slide__blurred-image img:not(:only-child):last-child, .hero-banner-slide__blurred-image svg:not(:only-child):last-child { right: 0; left: auto; } /* Hotspot container */ .hero-banner-slide__hotspots-container { position: absolute; inset: 0; pointer-events: none; } .hero-banner-slide__hotspots-container > * { pointer-events: auto; } /* Media link */ .hero-banner-slide__link { position: absolute; inset: 0; z-index: var(--layer-below); } /* Button alignment within group-hero */ .hero-banner-wrapper .cta-buttons--dual-custom-width { justify-content: var(--horizontal-alignment, flex-start); } .hero-banner-wrapper .layout-panel-flex--column > :is(.button, .button-secondary, .button-tertiary).size-style, .hero-banner-wrapper .layout-panel-flex--column > .cta-buttons:not(.cta-buttons--dual-custom-width) { align-self: var(--horizontal-alignment, flex-start); } @media screen and (max-width: 749px) { .hero-banner-wrapper .cta-buttons--dual-custom-width { justify-content: var(--align-items-mobile, var(--horizontal-alignment, flex-start)); } .hero-banner-wrapper .layout-panel-flex--column > :is(.button, .button-secondary, .button-tertiary).size-style, .hero-banner-wrapper .layout-panel-flex--column > .cta-buttons:not(.cta-buttons--dual-custom-width) { align-self: var(--align-items-mobile, var(--horizontal-alignment, flex-start)); } } /* END_BLOCK:_hero-banner-slide */ /* START_BLOCK:_hero-banner-split-slide (INDEX:142) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); pointer-events: none; } .slide__content :is(a, button, input, textarea, select) { pointer-events: auto; } .slide__content.background-transparent { background-color: transparent; } slideshow-slide > .slide__image-container { display: grid; grid-template-columns: 1fr; width: 100%; height: 100%; overflow: hidden; position: absolute; } .slide__image-container > .slide__image, .slide__image-container > .slide__video { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Mobile/Desktop media visibility */ .slide__image--mobile, .slide__video--mobile, .slide__video-wrapper--mobile { display: none; } .slide__image--desktop, .slide__video--desktop, .slide__video-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .slide__image--desktop, .slide__video--desktop, .slide__video-wrapper--desktop { display: none; } .slide__image--mobile, .slide__video--mobile, .slide__video-wrapper--mobile { display: block; } } .slide__video-wrapper--desktop, .slide__video-wrapper--mobile { position: relative; } .slide__link { position: absolute; inset: 0; z-index: var(--layer-below); } .slide__image-container .slide__content { pointer-events: none; } .slide__image-container :is(a, button, input, textarea, select, .slide__link) { pointer-events: auto; } .slide__hotspots-container { position: absolute; inset: 0; pointer-events: none; } .slide__hotspots-container > * { pointer-events: auto; } /* Blurred reflection */ .slide__image-container[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; } .slide__image-container[data-blur-shadow='true']::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .slide__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; } .slide__blurred-image--desktop { display: none; @media screen and (min-width: 750px) { display: block; } } .slide__blurred-image--mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .slide__blurred-image img, .slide__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); } /* END_BLOCK:_hero-banner-split-slide */ /* START_BLOCK:_hero-carousel-slide (INDEX:143) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); pointer-events: none; } .slide__content :is(a, button, input, textarea, select) { pointer-events: auto; } .slide__content > * { margin: auto; } .slide__content.background-transparent { background-color: transparent; } slideshow-slide > .slide__image-container { display: grid; grid-template-columns: repeat(var(--hero-media-count, 1), 1fr); width: 100%; height: 100%; overflow: hidden; position: absolute; } .slide__image-container > .slide__image, .slide__image-container > .slide__video, .slide__image-container > .slide__video-poster { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .slide__image-container > .slide__video-poster { position: absolute; } /* Mobile/Desktop media visibility */ .slide__image--mobile, .slide__video--mobile, .slide__video-wrapper--mobile { display: none; } .slide__image--desktop, .slide__video--desktop, .slide__video-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .slide__image--desktop, .slide__video--desktop, .slide__video-wrapper--desktop { display: none; } .slide__image--mobile, .slide__video--mobile, .slide__video-wrapper--mobile { display: block; } slideshow-slide > .slide__image-container { grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr); } /* Mobile stacking */ slideshow-slide > .slide__image-container.slide__image-container--stack-mobile { grid-template-columns: 1fr; grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1))); } } .slide__video-wrapper--desktop, .slide__video-wrapper--mobile { position: relative; } .slide__link { position: absolute; inset: 0; z-index: var(--layer-below); } .slide__image-container .slide__content { pointer-events: none; } .slide__image-container :is(a, button, input, textarea, select, .slide__link) { pointer-events: auto; } .slide__hotspots-container { position: absolute; inset: 0; pointer-events: none; } .slide__hotspots-container > * { pointer-events: auto; } /* Blurred reflection */ .slide__image-container[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; } .slide__image-container[data-blur-shadow='true']::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .slide__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; } .slide__blurred-image--desktop { display: none; @media screen and (min-width: 750px) { display: block; } } .slide__blurred-image--mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .slide__blurred-image img, .slide__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; } } } /* Button alignment within group-hero */ .hero-carousel-wrapper .cta-buttons--dual-custom-width { justify-content: var(--horizontal-alignment, flex-start); } .hero-carousel-wrapper .layout-panel-flex--column > :is(.button, .button-secondary, .button-tertiary).size-style, .hero-carousel-wrapper .layout-panel-flex--column > .cta-buttons:not(.cta-buttons--dual-custom-width) { align-self: var(--horizontal-alignment, flex-start); } @media screen and (max-width: 749px) { .hero-carousel-wrapper .cta-buttons--dual-custom-width { justify-content: var(--align-items-mobile, var(--horizontal-alignment, flex-start)); } .hero-carousel-wrapper .layout-panel-flex--column > :is(.button, .button-secondary, .button-tertiary).size-style, .hero-carousel-wrapper .layout-panel-flex--column > .cta-buttons:not(.cta-buttons--dual-custom-width) { align-self: var(--align-items-mobile, var(--horizontal-alignment, flex-start)); } } /* END_BLOCK:_hero-carousel-slide */ /* START_BLOCK:_hero-mosaic (INDEX:144) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); pointer-events: none; } .slide__content :is(a, button, input, textarea, select) { pointer-events: auto; } .slide__content.background-transparent { background-color: transparent; } slideshow-slide > .slide__image-container { display: grid; grid-template-columns: 1fr; width: 100%; height: 100%; overflow: hidden; position: absolute; } .slide__image-container > .slide__image, .slide__image-container > .slide__video { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Mobile/Desktop media visibility */ .slide__image--mobile, .slide__video--mobile, .slide__video-wrapper--mobile { display: none; } .slide__image--desktop, .slide__video--desktop, .slide__video-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .slide__image--desktop, .slide__video--desktop, .slide__video-wrapper--desktop { display: none; } .slide__image--mobile, .slide__video--mobile, .slide__video-wrapper--mobile { display: block; } } .slide__video-wrapper--desktop, .slide__video-wrapper--mobile { position: relative; } .slide__link { position: absolute; inset: 0; z-index: var(--layer-below); } .slide__image-container .slide__content { pointer-events: none; } .slide__image-container :is(a, button, input, textarea, select, .slide__link) { pointer-events: auto; } .slide__hotspots-container { position: absolute; inset: 0; pointer-events: none; } .slide__hotspots-container > * { pointer-events: auto; } /* Blurred reflection */ .slide__image-container[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; } .slide__image-container[data-blur-shadow='true']::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .slide__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; } .slide__blurred-image--desktop { display: none; @media screen and (min-width: 750px) { display: block; } } .slide__blurred-image--mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .slide__blurred-image img, .slide__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); } /* END_BLOCK:_hero-mosaic */ /* START_BLOCK:_hotspot-group (INDEX:145) */ .hotspot-group { position: absolute; inset: 0; z-index: var(--layer-flat); overflow: clip; pointer-events: none; container-type: inline-size; } .hotspot-group > * { pointer-events: auto; } /* END_BLOCK:_hotspot-group */ /* START_BLOCK:_hotspot-product (INDEX:146) */ .hotspot-tooltip { display: none; position: absolute; top: 50%; transform: translateY(-50%); min-width: 42px; height: 21px; border-radius: 2px; background: rgba(17, 17, 17, 0.75); padding: 2px 4px; align-items: center; justify-content: center; gap: 8px; pointer-events: none; z-index: 1; cursor: default; } .hotspot-tooltip__price { color: #FFF; font-family: var(--font-body--family); font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; white-space: nowrap; } /* Show tooltip on mobile only */ @media screen and (max-width: 749px) { .hotspot-tooltip { display: inline-flex; pointer-events: auto; cursor: pointer; } /* Position tooltip to the right — edge of visible circle + small gap */ .hotspot--mobile-right .hotspot-tooltip { left: calc((var(--button-size, 44px) + var(--hotspot-size, 20px)) / 2 + 4px); } /* Position tooltip to the left — edge of visible circle + small gap */ .hotspot--mobile-left .hotspot-tooltip { right: calc((var(--button-size, 44px) + var(--hotspot-size, 20px)) / 2 + 4px); } } @media screen and (max-width: 749px) { .hotspot-dialog { display: none; } } .hotspot-dialog__product-price .price--sale { color: var(--sale-color, #ff3230); } .hotspot-dialog__product-price .compare-at-price { color: var(--compare-at-color, #595959); } .hotspot-dialog__product-info { display: flex; flex-direction: column; gap: var(--product-title-gap, 8px); } /* END_BLOCK:_hotspot-product */ /* START_BLOCK:_image (INDEX:147) */ image-block { --image-height-basis: 10rem; --image-height-small: calc(var(--image-height-basis) * 2); --image-height-medium: calc(var(--image-height-basis) * 3); --image-height-large: calc(var(--image-height-basis) * 4); display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio); width: 100%; max-width: calc(var(--image-height) * var(--ratio)); height: var(--image-height); overflow: hidden; @media screen and (min-width: 750px) { --image-height-small: calc(var(--image-height-basis) * 2.5); --image-height-medium: calc(var(--image-height-basis) * 3.5); --image-height-large: calc(var(--image-height-basis) * 4.5); } @media screen and (max-width: 749px) { height: auto; } &[height='small'] { --image-height: var(--image-height-small); } &[height='medium'] { --image-height: var(--image-height-medium); } &[height='large'] { --image-height: var(--image-height-large); } &[ratio='portrait'] { --ratio: 4 / 5; } &[ratio='portrait_large'] { --ratio: 179 / 239; } &[ratio='square'] { --ratio: 1 / 1; @media screen and (min-width: 750px) { max-width: var(--image-height); } } &[ratio='landscape'] { --ratio: 16 / 9; } img { object-fit: cover; width: 100%; height: auto; aspect-ratio: var(--ratio); border-radius: var(--border-radius); } } /* END_BLOCK:_image */ /* START_BLOCK:_logo-banner-card (INDEX:151) */ .logo-banner-card { position: relative; overflow: hidden; width: 100%; } .logo-banner-card__link { position: absolute; inset: 0; z-index: 3; } .logo-banner-card__media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .logo-banner-card__image, .logo-banner-card__placeholder { width: 100%; height: 100%; object-fit: cover; object-position: center; } .logo-banner-card__placeholder { background: var(--color-background-secondary, #f0f0f0); } .logo-banner-card__logo-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } .logo-banner-card__logo { max-width: 113px; max-height: 40px; width: auto; height: auto; object-fit: contain; } /* END_BLOCK:_logo-banner-card */ /* START_BLOCK:_marquee (INDEX:153) */ marquee-component { display: block; width: 100%; overflow: hidden; background-color: var(--color-background); } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } .hero__content-wrapper.layout-panel-flex--column marquee-component { --margin-inline: var(--full-page-margin-inline-offset); width: -webkit-fill-available; min-height: max-content; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_BLOCK:_marquee */ /* START_BLOCK:_product-carousel-footer (INDEX:160) */ /* Footer styles */ .product-carousel__footer-bar { font-family: var(--footer-font, inherit); color: var(--footer-color, currentColor); font-size: var(--footer-size, 1.5rem); font-weight: var(--footer-weight, 600); } /* END_BLOCK:_product-carousel-footer */ /* START_BLOCK:_product-carousel-header (INDEX:161) */ /* Heading styles */ .product-carousel__heading { margin: 0; font-family: var(--title-font, inherit); color: var(--title-color, currentColor); font-size: var(--title-size, 1.5rem); font-weight: var(--title-weight, 600); line-height: 1.2; } .product-carousel__overline-text { font-family: var(--overline-font, inherit); color: var(--overline-color, currentColor); font-size: var(--overline-size, 0.75rem); font-weight: var(--overline-weight, 400); line-height: 1.2; letter-spacing: 0.72px; margin-bottom: 8px; } @media screen and (max-width: 749px) { .product-carousel__heading { font-size: var(--title-size-mobile, var(--title-size, 1.5rem)); } .product-carousel__overline-text { font-size: var(--overline-size-mobile, var(--overline-size, 0.75rem)); } } .product-carousel__pagination { color: var(--controls-primary-color); } .product-carousel__pagination-label { color: var(--controls-primary-color); } .product-carousel__pagination-separator { color: var(--controls-secondary-color); } /* Mobile vertical layout: stack title and controls */ @media screen and (max-width: 749px) { .product-carousel__title-bar--mobile-vertical { flex-direction: column; align-items: flex-start; } .product-carousel__title-bar--mobile-vertical .product-carousel__title-bar-right { width: 100%; } } /* Mobile horizontal layout: single row with title left, arrows right */ @media screen and (max-width: 749px) { .product-carousel__title-bar--mobile-horizontal { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: 8px; } .product-carousel__title-bar--mobile-horizontal .product-carousel__title-bar-left { flex: 1 1 0%; min-width: 0; } .product-carousel__title-bar--mobile-horizontal .product-carousel__title-bar-left .product-carousel__overline-text { margin-bottom: 4px; } .product-carousel__title-bar--mobile-horizontal .product-carousel__title-bar-right { flex: 0 0 auto; } } /* END_BLOCK:_product-carousel-header */ /* START_BLOCK:_product-details (INDEX:162) */ /* Clear padding on mobile, if not full-width */ @media screen and (max-width: 749px) { .product-information.section--page-width .product-details > .group-block { padding-inline: 0; } } .view-product-title { display: none; } /* Container styles */ .product-details { display: flex; align-self: start; justify-content: center; } /* PDP accordion overrides — match design spec */ .product-details .accordion .details__header { min-height: auto; padding-block: var(--padding-xl); font-size: var(--font-size--2xs); font-weight: bold; line-height: 150%; gap: 12px; } .product-details .accordion--plus .details__header .icon-plus { --icon-size-xs: 18px; --icon-size-sm: 18px; width: 18px; height: 18px; flex: 0 0 auto; } .product-details .accordion--plus .details__header .icon-plus > svg { width: 18px; height: 18px; } /* PDP mobile: keep title and price side-by-side in row layouts */ @media screen and (max-width: 749px) { .product-details .layout-panel-flex--mobile-row > .text-block { width: auto; flex: 1 1 0; min-width: 0; } .product-details .layout-panel-flex--mobile-row > product-price.text-block { flex: 0 0 auto; width: auto; } } @media screen and (min-width: 750px) { .product-details > .group-block { height: min-content; } .full-height--desktop { height: 100%; max-height: calc(100vh - var(--header-group-height, 0)); min-height: fit-content; } .full-height--desktop .group-block { align-self: var(--details-position, 'flex-start'); } } /* END_BLOCK:_product-details */ /* START_BLOCK:_product-grid-header (INDEX:163) */ .product-grid-title-bar--inline { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .product-grid-title-bar--inline .product-grid-title-bar__title { flex: 1; min-width: 0; } .product-grid-title-bar--inline .product-grid-title-bar__controls { display: flex; align-items: center; gap: 24px; flex-shrink: 0; white-space: nowrap; } .product-grid-title-bar--stacked .product-grid-title-bar__controls { display: flex; align-items: center; gap: 24px; justify-content: var(--cta-justify, flex-start); margin-top: 16px; } .product-grid-title-bar__cta.link { text-decoration: underline; text-underline-offset: 0.2em; &:hover { text-decoration-color: transparent; } } /* END_BLOCK:_product-grid-header */ /* START_BLOCK:_roundel-banner (INDEX:169) */ .roundel-banner { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--color-foreground); } .roundel-banner__image-link { display: block; width: 100%; } .roundel-banner__image { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } .roundel-banner__img, .roundel-banner__image img, .roundel-banner__video { width: 100%; height: 100%; object-fit: cover; } .roundel-banner__placeholder { width: 100%; height: 100%; } .roundel-banner__placeholder svg { width: 100%; height: 100%; } .roundel-banner__content { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--content-margin-top, 16px); gap: var(--content-gap, 8px); } .roundel-banner__content .link { padding-block: 0; } @media (prefers-reduced-motion: reduce) { .roundel-banner__video { animation: none; } } /* END_BLOCK:_roundel-banner */ /* START_BLOCK:_search-input (INDEX:171) */ .search-page-input { width: 100%; color: var(--color-input-text); background-color: var(--color-input-background); height: 48px; padding-inline: 38px; text-overflow: ellipsis; overflow: hidden; border-radius: var(--style-border-radius-inputs); border: var(--style-border-width-inputs) solid var(--color-input-border); font-size: 14px; @media screen and (max-width: 749px) { padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md)); } } .search-page-input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); } .search-page-input__parent { display: flex; flex-direction: column; align-items: var(--horizontal-alignment); width: 100%; max-width: 662px; } .search-results__no-results { opacity: var(--opacity-subdued-text); } search-page-input-component { position: relative; width: 100%; display: flex; top: 0; max-width: var(--size-style-width); align-items: center; background-color: var(--color-background); margin-block-start: 4px; @media screen and (max-width: 749px) { max-width: 100%; } } search-page-input-component .search__icon, search-page-input-component .search__icon:hover { background: transparent; position: absolute; top: auto; width: 18px; height: 18px; } search-page-input-component .search__icon svg { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-input-text); } search-page-input-component .search__icon { left: 12px; } search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button { opacity: 1; visibility: visible; pointer-events: auto; } /* END_BLOCK:_search-input */ /* START_BLOCK:_search-suggestions (INDEX:172) */ .search-suggestions { margin-inline-start: calc(var(--page-margin) * -1); width: calc(100% + (var(--page-margin) * 2)); } .search-suggestions__inner { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding-block-start: 12px; @media screen and (min-width: 750px) { padding-block-start: 16px; } } .search-suggestions__heading { font-family: var(--font-heading--family); font-size: 1rem; margin: 0; padding-inline: var(--util-page-margin-offset); } .search-suggestions__carousel-wrapper { overflow: hidden; } .search-suggestions__pills { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; padding-inline: var(--util-page-margin-offset); scroll-snap-type: x mandatory; scroll-padding-inline: var(--util-page-margin-offset); scrollbar-width: none; -ms-overflow-style: none; list-style: none; margin: 0; } .search-suggestions__pills::-webkit-scrollbar { display: none; } .search-suggestions__pills > * { flex: 0 0 auto; scroll-snap-align: start; } .search-suggestions__pill-item { list-style: none; margin: 0; border-radius: 2px; border: 1px solid #ECECEC; background: #FFF; } .search-suggestions__pill-item:hover { background: #F5F5F5; } .search-suggestions__pill-item .search-suggestions__pill { display: inline-flex; margin: 0; font-size: 11px; height: 29px; align-items: center; justify-content: center; display: flex; padding-inline: 8px; color: var(--color-foreground); } .search-suggestions__pills--loading { min-height: 101px; } /* END_BLOCK:_search-suggestions */ /* START_BLOCK:_slide (INDEX:173) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); } .slide__content > * { margin: auto; } .slide__content.background-transparent { background-color: transparent; } slideshow-slide > .slide__image-container { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; } .slide__image-container > .slide__image, .slide__image-container > .slide__video, .slide__image-container > .slide__video-poster { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .slide__image-container > .slide__video-poster { position: absolute; } /* END_BLOCK:_slide */ /* START_BLOCK:_social-link (INDEX:174) */ .social-icons__icon-wrapper { display: flex; align-items: center; justify-content: center; height: var(--icon-size-lg); } .social-icons__icon { display: flex; flex-shrink: 0; width: var(--icon-size-lg); height: var(--icon-size-lg); } .social-icons__icon { display: none; } .social-icons__icon-wrapper:has(.social-icons__icon path) { width: var(--icon-size-lg); .social-icons__icon { display: block; } .social-icons__icon-label { display: none; } } /* Disabled state for editor */ .shopify-design-mode .social-icons__icon-wrapper--disabled { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .shopify-design-mode .social-icons__icon-wrapper--disabled a { pointer-events: none; } /* END_BLOCK:_social-link */ /* START_BLOCK:_text-card-group (INDEX:175) */ .card { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; height: 100%; border-radius: var(--border-radius, 0); border-width: var(--border-width, 0); border-style: var(--border-style, none); border-color: var(--border-color); container-type: inline-size; } .card__content { width: 100%; height: 100%; position: relative; z-index: var(--layer-flat); display: flex; flex-direction: column; aspect-ratio: var(--card-ratio, 1); } .card__content.background-transparent { background-color: transparent; } /* When card has both image and content, use min-height from container query */ .card__content--has-min-height { min-height: calc(100cqw / var(--card-ratio-numeric)); } .card__inner { flex: 1; } .card__media-wrapper { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .card__media-wrapper video { z-index: var(--layer-raised); } .card__link { position: absolute; inset: 0; z-index: var(--layer-raised); } .card__link ~ :is(.card__content, .card__media-wrapper) { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } /* Needs the .card__link ~ to be specific enough to take effect. */ .card__link ~ .card__content--design-mode { pointer-events: auto; } /* END_BLOCK:_text-card-group */ /* START_BLOCK:_text-card-header (INDEX:176) */ .text-card-header__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 2.25rem; line-height: 110%; color: var(--color-foreground-heading); } @media screen and (max-width: 749px) { .text-card-header__title { font-size: 1.875rem; } } .text-card-header__title-link { color: inherit; text-decoration: none; } .text-card-header__cta-link { font-family: var(--font-body--family); font-weight: 400; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.2em; } .text-card-header__cta-link:hover { text-decoration-color: transparent; } .text-card-header__arrows-inner { display: flex; align-items: center; gap: 8px; } /* END_BLOCK:_text-card-header */ /* START_BLOCK:_text-card (INDEX:177) */ .carousel-content slideshow-slides { --slideshow-gap: var(--carousel-gap); } .carousel-content slideshow-slides > .card { flex: 0 0 auto; width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-mobile-columns, 2) ); } @media (min-width: 750px) { .carousel-content slideshow-slides > .card { width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-tablet-columns, 3) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-tablet-columns, 3) ); } } @media (min-width: 990px) { .carousel-content slideshow-slides > .card { width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-columns, 4) ); } } .carousel-content .slideshow-control[disabled] { display: none; } /* Grid layout styles */ .resource-list--grid { display: grid; grid-template-columns: var(--resource-list-columns-mobile); column-gap: var(--resource-list-column-gap-desktop); row-gap: var(--resource-list-row-gap-desktop, var(--resource-list-column-gap-desktop)); } @media screen and (min-width: 750px) { .resource-list--grid { grid-template-columns: var(--resource-list-columns-tablet); } } @media screen and (min-width: 990px) { .resource-list--grid { grid-template-columns: var(--resource-list-columns); } } .resource-list--grid > * { min-width: 0; } .resource-list--grid .card { height: 100%; } /* END_BLOCK:_text-card */ /* START_BLOCK:_trending-terms-list (INDEX:179) */ .trending-terms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--gap-xs, 8px); } .trending-terms-list__pill { display: inline-flex; align-items: center; justify-content: center; height: 1.8125rem; padding: 0.375rem 0.5rem; border: 0.0625rem solid var(--color-secondary-button-border, #ECECEC); border-radius: var(--style-border-radius-inputs, 0.125rem); font-size: 0.6875rem; color: var(--color-foreground); background-color: var(--color-background); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .trending-terms-list__pill:hover { background-color: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); } .trending-terms-list__pill:focus-visible { outline: 0.125rem solid var(--color-foreground); outline-offset: 0.125rem; } /* END_BLOCK:_trending-terms-list */ /* START_BLOCK:accelerated-checkout (INDEX:185) */ .accelerated-checkout-block[data-shopify-visual-preview] { width: 300px; } more-payment-options-link { font-size: smaller; } more-payment-options-link a { --button-color: var(--color-primary); } more-payment-options-link a:hover { --button-color: var(--color-primary-hover); } .shopify-payment-button__more-options[aria-hidden='true'] { display: none; } /* END_BLOCK:accelerated-checkout */ /* START_BLOCK:accordion (INDEX:186) */ .accordion { flex: 1; width: 100%; } .accordion--dividers accordion-custom:not(:first-child) .details { border-block-start: var(--style-border-width) solid var(--color-border); } /* When accordion borders are not set, show fallback borders */ .accordion--dividers { /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --show-fallback-borders: 0; } .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'], .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] { --show-fallback-borders: 1; } .accordion--dividers accordion-custom:first-child .details { border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border); } .accordion--dividers accordion-custom:last-child .details { border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border); } .accordion--dividers .details-content { padding-block-end: var(--padding-sm); } .accordion--caret .icon-plus, .accordion--plus .icon-caret { display: none; } .accordion--caret .icon-minus { display: none; } .accordion--plus .details__header .icon-plus > svg, .accordion--plus .details__header .icon-minus { transition: opacity var(--animation-speed) var(--animation-easing); } .accordion--plus .details__header .icon-minus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } .accordion--plus details[open] > .details__header .icon-plus > svg { opacity: 0; } .accordion--plus details[open] > .details__header .icon-minus { opacity: 1; pointer-events: auto; } .accordion--icon-right .details__header .svg-wrapper { order: 1; margin-inline-start: auto; margin-inline-end: 0; } .accordion--icon-right .details__heading { order: 0; } .accordion--icon-right .details__icon { order: -1; } /* because we can't pass apply a specific class on a block based on its parent block setting */ .accordion .details__header { font-family: var(--summary-font-family); font-style: var(--summary-font-style); font-weight: var(--summary-font-weight); font-size: var(--summary-font-size); line-height: var(--summary-font-line-height); text-transform: var(--summary-font-case); min-height: var(--minimum-touch-target); } /* END_BLOCK:accordion */ /* START_BLOCK:author (INDEX:189) */ .author { display: flex; align-items: center; justify-content: center; width: 100%; } .author__profile { display: flex; align-items: center; gap: var(--margin-sm); } .author__image { flex-shrink: 0; } .author__photo { border-radius: 50%; object-fit: cover; width: 48px; height: 48px; } .author__info { display: flex; flex-direction: column; gap: var(--margin-xs); } .author__name { font-size: var(--font-size-base); font-weight: 400; color: var(--color-foreground); margin: 0; text-align: var(--author-text-align, left); } .author__title { font-size: var(--font-size-base); font-weight: 400; color: var(--color-foreground); margin: 0; text-align: var(--author-text-align, left); } .author__press { display: flex; align-items: center; justify-content: center; } .author__logo { display: flex; align-items: center; } .author__press-logo { width: var(--logo-width, 150px); height: auto; object-fit: contain; } /* END_BLOCK:author */ /* START_BLOCK:buy-buttons (INDEX:191) */ .buy-buttons-block { --buy-button-preferred-width: 185px; width: 100%; } .product-form-buttons { display: flex; flex-wrap: wrap; } .product-form-buttons:not(:has(.quantity-rules)) { gap: calc(var(--gap-sm) / 2); @media screen and (min-width: 750px) { gap: var(--gap-sm); } } .product-form-buttons > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) { flex: 1 1 var(--buy-button-preferred-width, 0); min-width: fit-content; } .product-form-buttons--stacked > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) { flex-basis: 51%; } .product-form-buttons button { width: 100%; padding-block: var(--padding-lg); } .quantity-selector { flex-grow: 0; flex-shrink: 0; height: var(--height-buy-buttons); } .quantity-label { flex: 1 0 100%; width: 100%; font-size: var(--font-size--sm); margin-block-end: var(--gap-xs); } .quantity-label__cart-count { color: var(--color-foreground-secondary); } .quantity-rules { display: flex; flex-wrap: wrap; gap: 0; row-gap: calc(var(--gap-xs) / 2); flex: 1 0 100%; width: 100%; font-size: var(--font-size--xs); color: var(--color-foreground-secondary); margin-block-start: var(--gap-xs); margin-block-end: var(--gap); } .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules { margin-block-end: var(--gap-md); } .quantity-rules__item { position: relative; display: inline-block; color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .quantity-rules__item:not(:last-child) { padding-right: var(--padding-xl); margin-right: var(--margin-2xs); } .quantity-rules__item:not(:last-child)::after { content: '•'; position: absolute; inset-inline-end: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.5em; line-height: 0; } .buy-button-row { display: flex; gap: 8px; width: 100%; } .buy-button-row > *:first-child { flex: 1 1 0; min-width: 0; } .buy-button-row--full-width > *:first-child { flex-basis: 100%; } .buy-button-row__wishlist { flex: 0 0 48px; width: 48px; height: var(--height-buy-buttons); display: flex; align-items: center; justify-content: center; background-color: var(--color-secondary-button-background, #ffffff); border: var(--style-border-width-buttons-tertiary, 1px) solid var(--color-border); border-radius: var(--style-border-radius-inputs); cursor: pointer; padding: 0; } .buy-button-row__wishlist:disabled { opacity: var(--opacity-60); cursor: default; } .buy-button-row__wishlist-icon { display: inline-flex; } .buy-button-row__wishlist-icon svg { width: 15.468770027160645px; height: 14.32046127319336px; display: block; } @media screen and (max-width: 749px) { .buy-button-row__wishlist-icon svg { width: 16.875px; height: 16.875px; } } /* Default: outline shown, filled hidden. Saved: swap. */ .buy-button-row__wishlist-icon--filled { display: none; } .buy-button-row__wishlist--saved .buy-button-row__wishlist-icon--outline { display: none; } .buy-button-row__wishlist--saved .buy-button-row__wishlist-icon--filled { display: inline-flex; } .add-to-cart-button { height: var(--height-buy-buttons); text-transform: var(--button-text-case-primary); } .add-to-cart-button.button-secondary { text-transform: var(--button-text-case-secondary); } .product-form-text__error { display: flex; align-items: flex-start; gap: var(--gap-xs); margin-block-end: var(--gap-xs); } .product__pickup-availabilities { width: 100%; } .pickup-availability__column { display: flex; flex-direction: column; justify-content: flex-start; } .pickup-availability__row { display: flex; gap: var(--padding-xs); } .pickup-availability__dialog-row { display: flex; justify-content: space-between; align-items: flex-start; } .pickup-availability__header-container { padding-block-end: var(--padding-2xl); } .pickup-location__wrapper { display: flex; flex-direction: column; padding-block: var(--padding-2xl); border-top: 1px solid var(--color-border); gap: var(--padding-xs); } .pickup-location__address-wrapper { display: flex; flex-direction: column; gap: var(--padding-md); } .pickup-location__dialog { padding: var(--padding-2xl); position: fixed; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; height: 100%; margin: 0 0 0 auto; border: var(--style-border-drawer); box-shadow: var(--shadow-drawer); background-color: var(--color-background); } .pickup-location__dialog:modal { max-height: 100dvh; } .pickup-location__text-sm { font-size: var(--font-size--sm); margin: 0; } .pickup-location__text-xs { font-size: var(--font-size--xs); margin: 0; } .pickup-location__button { width: fit-content; color: var(--color-primary); font-size: var(--font-size--xs); font-family: var(--font-body--family); padding: 0; cursor: pointer; margin-block: var(--margin-xs); } .pickup-location__button:hover { color: var(--color-primary-hover); } .pickup-location__h4 { margin: 0; } .pickup-location__text-bold { font-size: var(--font-size--md); font-weight: 600; margin: 0; } .pickup-location__availability-wrapper { display: flex; align-items: center; gap: var(--gap-xs); font-family: var(--font-paragraph--family); } .pickup-location__address { font-style: normal; } .pickup-location__close-button { top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2)); right: calc(var(--padding-2xl) - var(--icon-size-xs)); } .volume-pricing { display: block; width: 100%; margin-bottom: var(--gap); } .volume-pricing:not(:has(.volume-pricing__title)) { margin-top: 0; margin-bottom: 0; } .volume-pricing__title { display: block; margin-block-end: var(--gap-sm); font-size: var(--font-size--sm); font-weight: var(--font-body--weight); color: var(--color-foreground); } .volume-pricing__table { width: 100%; } .volume-pricing__row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--padding-sm); padding-inline: var(--padding-md); font-size: var(--font-size--sm); } .volume-pricing__row--even { background: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .volume-pricing__row--odd { background: var(--color-background); } .volume-pricing__collapsible-wrapper { block-size: 0; overflow-y: clip; opacity: 0; interpolate-size: allow-keywords; transition: opacity var(--animation-speed-slow) var(--animation-easing), block-size var(--animation-speed-slow) var(--animation-easing); } .volume-pricing__toggle { width: 100%; padding-bottom: 0; padding-inline: 0; text-align: left; color: var(--color-foreground-secondary); font-size: var(--font-size--xs); cursor: default; margin-block-start: 0; pointer-events: none; } button.volume-pricing__toggle { /* Need the extra specificity to override .product-form-buttons button */ padding-block: var(--padding-sm); } .volume-pricing__toggle-text { cursor: pointer; display: inline-block; pointer-events: auto; } .volume-pricing__show-less { display: none; } .volume-pricing--expanded .volume-pricing__collapsible-wrapper { opacity: 1; block-size: auto; @starting-style { block-size: 0; opacity: 0; overflow-y: clip; } } .volume-pricing--expanded .volume-pricing__show-more { display: none; } .volume-pricing--expanded .volume-pricing__show-less { display: inline; } .price-per-item { display: block; color: var(--color-foreground); font-size: var(--font-size--sm); font-weight: normal; } /* END_BLOCK:buy-buttons */ /* START_BLOCK:comparison-slider (INDEX:197) */ comparison-slider-component { display: block; } .comparison-slider { position: relative; overflow: hidden; aspect-ratio: var(--ratio); } .comparison-slider:not(:has(img)) { min-width: 25dvh; } .comparison-slider__container { position: relative; width: 100%; height: 100%; } /* Container and Layout */ .comparison-slider__media-wrapper { --compare: 50; position: relative; width: 100%; height: 100%; display: grid; grid-template: 1fr / 1fr; overflow: hidden; } /* Layer Containers */ .comparison-slider__layer { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; transition: clip-path var(--transition-duration, 0s) ease-in-out; } .comparison-slider__layer--after { z-index: var(--layer-base); } /* Before Layer Clipping (inverse of after layer) */ [data-orientation='horizontal'] .comparison-slider__layer--before { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0); } [data-orientation='vertical'] .comparison-slider__layer--before { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 0 calc(var(--compare) * 1%) 0); } /* After Layer Clipping */ [data-orientation='horizontal'] .comparison-slider__layer--after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 0 0 calc(var(--compare) * 1%)); } [data-orientation='vertical'] .comparison-slider__layer--after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0); } /* Images and Placeholders */ .before-image, .after-image, .comparison-slider__placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio); } .comparison-slider__placeholder { position: absolute; inset: 0; } .comparison-slider__placeholder svg { width: 100%; height: 100%; background-color: var(--color-background); fill: var(--color-foreground); } /* Range Input (Hidden but Functional) */ .cs-slider { position: absolute; inset: 0; z-index: var(--layer-heightened); width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit; appearance: none; } [data-orientation='horizontal'] .cs-slider { cursor: ew-resize; } [data-orientation='vertical'] .cs-slider { cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; } /* Range Input Thumb */ .cs-slider::-webkit-slider-thumb, .cs-slider::-moz-range-thumb { width: var(--button-size); height: var(--button-size); border: 0; background: transparent; cursor: inherit; appearance: none; } /* Range Input Track */ .cs-slider::-webkit-slider-track, .cs-slider::-moz-range-track { background: transparent; border: 0; appearance: none; } /* Visual Slider Elements */ .comparison-slider__media-wrapper::before, .comparison-slider__media-wrapper::after { content: ''; position: absolute; pointer-events: none; transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out; z-index: var(--layer-raised); } /* Slider Track Line */ .comparison-slider__media-wrapper::after { background: var(--color-background); box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1); } .comparison-slider__media-wrapper::before { background: var(--color-background); } .comparison-slider__media-wrapper[data-orientation='horizontal']::after { inset: 0 auto; left: calc(var(--compare) * 1%); width: 4px; transform: translateX(-50%); } .comparison-slider__media-wrapper[data-orientation='vertical']::after { inset: auto 0; top: calc((100 - var(--compare)) * 1%); height: 4px; transform: translateY(-50%); } /* Slider Handle */ .cs-slider__handle { position: absolute; z-index: var(--layer-heightened); pointer-events: none; width: var(--button-size); height: var(--button-size); background: var(--color-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1); transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out, gap 0.2s ease-in-out; gap: var(--gap-sm); padding: var(--padding-xs); } .comparison-slider__media-wrapper:hover .cs-slider__handle { gap: var(--gap-2xs); } .cs-slider__chevron { display: flex; align-items: center; justify-content: center; } [data-orientation='horizontal'] .cs-slider__handle { top: 50%; left: calc(var(--compare) * 1%); transform: translate(-50%, -50%); flex-direction: row; } [data-orientation='vertical'] .cs-slider__handle { left: 50%; top: calc((100 - var(--compare)) * 1%); transform: translate(-50%, -50%) rotate(90deg); } /* Text Labels */ .comparison-slider__text { position: absolute; padding: var(--padding-xs); pointer-events: none; } .comparison-slider__text--with-bg { background: var(--text-background-color); border-radius: var(--text-corner-radius); } /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */ [data-orientation='horizontal'] .comparison-slider__text--before { inset-inline-start: var(--padding-sm); } [data-orientation='horizontal'] .comparison-slider__text--after { inset-inline-end: var(--padding-sm); } [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text { inset-block-start: var(--padding-sm); } [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text { inset-block-end: var(--padding-sm); } /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */ [data-orientation='vertical'] .comparison-slider__text--before { inset-block-start: var(--padding-sm); } [data-orientation='vertical'] .comparison-slider__text--after { inset-block-end: var(--padding-sm); } [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text { inset-inline-start: var(--padding-sm); } [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text { inset-inline-end: var(--padding-sm); } /* END_BLOCK:comparison-slider */ /* START_BLOCK:contact-form-submit-button (INDEX:198) */ .submit-button { min-width: max-content; } /* END_BLOCK:contact-form-submit-button */ /* START_BLOCK:contact-form (INDEX:199) */ .contact-form__form { display: flex; flex-direction: column; gap: var(--gap-md); } .contact-form__form-row { display: flex; flex-direction: column; gap: var(--gap-md); @media screen and (min-width: 750px) { flex-direction: row; align-items: center; } } .contact-form__input { width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--color-input-text); background-color: var(--color-input-background); padding: var(--padding-lg) var(--padding-xl); border-radius: var(--style-border-radius-inputs); border: var(--style-border-width-inputs) solid var(--color-input-border); -webkit-font-smoothing: antialiased; } .contact-form__input--textarea { resize: vertical; min-height: var(--input-textarea-min-height); } .contact-form__error, .contact-form__success { display: flex; align-items: center; gap: var(--gap-xs); } /* END_BLOCK:contact-form */ /* START_BLOCK:countdown-timer (INDEX:200) */ .countdown-timer { display: flex; align-items: center; } /* Width options */ .countdown-timer--width-fit-content { width: fit-content; } .countdown-timer--width-fill { width: 100%; } .countdown-timer--width-custom { width: var(--size-style-width, 100%); } @media screen and (max-width: 749px) { .countdown-timer--width-custom { width: var(--size-style-width-mobile, 100%); } } /* Alignment and positioning via custom properties */ @media screen and (min-width: 750px) { .countdown-timer { justify-content: var(--align-justify, inherit); align-self: var(--align-self, inherit); margin-inline: var(--align-margin, inherit); position: var(--pos-type, inherit); top: var(--pos-top, auto); bottom: var(--pos-bottom, auto); left: 0; right: 0; transform: var(--pos-transform, none); z-index: var(--layer-above, 2); } } @media screen and (max-width: 749px) { .countdown-timer { justify-content: var(--align-justify-mobile, inherit); align-self: var(--align-self-mobile, inherit); margin-inline: var(--align-margin-mobile, inherit); position: var(--pos-type-mobile, inherit); top: var(--pos-top-mobile, auto); bottom: var(--pos-bottom-mobile, auto); left: 0; right: 0; transform: var(--pos-transform-mobile, none); z-index: var(--layer-above, 2); } } .countdown__container { display: flex; align-items: stretch; justify-content: center; gap: var(--countdown-gap, 4px); } .countdown__item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 81.5px; height: 73px; padding: 12px 16px; background-color: var(--countdown-bg, #1a1a1a); border-radius: var(--countdown-border-radius, 0px); color: var(--countdown-text, #ffffff); flex-shrink: 0; } .countdown__value { font-family: var(--font-heading--family); font-size: var(--countdown-value-font-size, 36px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; } .countdown__label { font-size: var(--countdown-label-font-size, 10px); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } @media screen and (max-width: 749px) { .countdown__container { gap: var(--countdown-gap-mobile, 2px); } .countdown__item { width: 79.5px; height: 73px; padding: 8px 10px; } .countdown__value { font-size: var(--countdown-value-font-size, 36px); } .countdown__label { font-size: var(--countdown-label-font-size, 10px); } } /* Background enabled - default behavior */ .countdown-timer--bg .countdown__item { background-color: var(--countdown-bg, #1a1a1a); } /* Background disabled - transparent with dividers */ .countdown-timer--no-bg .countdown__item { background: transparent; padding: 8px 16px; border-right: 1px solid var(--countdown-text, #242420); border-radius: 0; } .countdown-timer--no-bg .countdown__item:last-child { border-right: none; } @media screen and (max-width: 749px) { .countdown-timer--no-bg .countdown__item { padding: 6px 10px; } } /* END_BLOCK:countdown-timer */ /* START_BLOCK:email-signup (INDEX:202) */ .email-signup-block { --arrow-button-size: 58px; --arrow-button-size-integrated: 42px; --arrow-button-size-small: 20px; --arrow-icon-size: 32px; --arrow-icon-size-small: 24px; min-width: fit-content; @media screen and (min-width: 990px) { min-width: 395px; } @media screen and (max-width: 749px) { width: 100%; min-width: unset; } } .email-signup__heading { padding-block: var(--padding-sm); } .email-signup__form { display: flex; flex-direction: column; } .email-signup__input-group { display: flex; align-items: stretch; background-color: transparent; } .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) { gap: var(--gap-xs); align-items: center; } .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not( .email-signup__input-group--integrated ) { @media screen and (max-width: 749px) { flex-direction: column; } } .email-signup__input-group--integrated { border-width: var(--border-width); border-radius: var(--border-radius); border-style: solid; border-color: var(--color-input-border); background-color: var(--color-input-background); } .email-signup__input-group--integrated.email-signup__input-group--no-border { border: none; } .email-signup__input { flex: 1; min-width: 0; border-width: var(--border-width); border-radius: var(--border-radius); border-style: solid; border-color: var(--color-input-border); @media screen and (max-width: 749px) { width: 100%; } } .email-signup__input-group--integrated .email-signup__input { background-color: transparent; border: none; border-radius: 0; } .email-signup__input { &:focus-visible { outline: none; } } .email-signup__input.paragraph { color: var(--color-input-text); outline-color: var(--color-input-background); } .email-signup__button:disabled { opacity: 1; cursor: pointer; } .email-signup__button { white-space: nowrap; padding: 0; @media screen and (max-width: 749px) { width: 100%; } } .email-signup__input, .email-signup__button--text { padding: var(--padding-lg) var(--padding-3xl); } .email-signup__input-group--underline { --box-shadow-color: var(--color-input-border); --box-shadow-multiplier: 1; --box-shadow-focused-multiplier: 1.75; box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color); transition: box-shadow var(--animation-values); margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier)); &:focus-within { --box-shadow-multiplier: var(--box-shadow-focused-multiplier); --box-shadow-color: var(--color-input-text); } } .email-signup__input-group .email-signup__input--underline { color: var(--color-input-text); background-color: transparent; padding: 12px 0; border: none; border-radius: 0; &:focus-visible { outline: none; } } .email-signup__input::placeholder { color: rgb(var(--color-input-text-rgb) / 0.5); } .email-signup__input-group .email-signup__input--none { color: var(--color-input-text); background-color: var(--color-input-background); border: none; } .email-signup__button-icon { color: currentcolor; padding: 5px; @media screen and (max-width: 749px) { padding: 0; align-self: center; justify-self: center; width: var(--icon-size-lg); height: var(--icon-size-lg); } } .email-signup__button--arrow { width: var(--arrow-button-size-small); height: var(--arrow-button-size-small); padding: 0; &:not(.email-signup__button--integrated) { width: var(--arrow-button-size); height: var(--arrow-button-size); display: flex; align-items: center; justify-content: center; > .email-signup__button-icon { width: var(--arrow-icon-size); height: var(--arrow-icon-size); padding: 0; } } } .email-signup__button--integrated { --button-offset: var(--margin-xs); align-self: stretch; margin: var(--button-offset); flex-shrink: 0; @media screen and (max-width: 749px) { width: fit-content; } &.email-signup__button--text { padding: 0 var(--padding-3xl); } &.email-signup__button--text.button-unstyled { padding: 0 var(--padding-xl); } &.button-unstyled { border-radius: var(--border-radius); } > .email-signup__button-icon { padding: 0; } &.email-signup__button--arrow { width: var(--arrow-button-size-integrated); height: var(--arrow-button-size-integrated); align-self: center; display: flex; align-items: center; justify-content: center; > .email-signup__button-icon { width: var(--arrow-icon-size-small); height: var(--arrow-icon-size-small); } } } .email-signup__input--underline + .email-signup__button--integrated { margin: 0; align-self: center; &.email-signup__button--text { padding-block: 9px; } &.email-signup__button--text.button-unstyled { padding-inline: 0; } &.button-unstyled { border-radius: 0; } &.email-signup__button--arrow { width: var(--arrow-button-size-integrated); height: var(--arrow-button-size-integrated); display: flex; align-items: center; justify-content: center; > .email-signup__button-icon { width: var(--arrow-icon-size-small); height: var(--arrow-icon-size-small); } } } .email-signup__button:not(.button-unstyled) { background-color: var(--button-background-color); color: var(--button-color); text-transform: var(--button-text-case-primary); --button-border-color: var(--color-input-border); --button-border-width: 1px; } .email-signup__button.button-secondary { text-transform: var(--button-text-case-secondary); } .email-signup__button.button-unstyled { background-color: transparent; color: var(--color-input-text); } .email-signup__button.button:hover { --button-color: var(--color-primary-button-text); --button-background-color: var(--color-primary-button-background); --button-border-color: #000; --button-border-width: 1px; } .email-signup__button.button-secondary:hover { --button-color: var(--color-secondary-button-text); --button-background-color: var(--color-secondary-button-background); --button-border-color: #000; --button-border-width: 1px; } .email-signup__button.button-unstyled:hover { color: rgb(var(--color-input-text-rgb) / var(--opacity-70)); cursor: pointer; } .email-signup__message { display: flex; align-items: center; gap: var(--gap-xs); } .email-signup__message--error { color: var(--color-error); font-size: 11px; } .email-signup__input[aria-invalid='true'] { border-color: var(--color-error); color: var(--color-error); } .email-signup__message-text { margin: 0; } .email-signup__success { display: flex; flex-direction: column; gap: var(--gap-sm); } .email-signup__success-message { margin: 0; } .group-block-content:has(email-signup[data-signup-success]) > :not(email-signup) { display: none; } /* END_BLOCK:email-signup */ /* START_BLOCK:filters (INDEX:204) */ .collection-wrapper { @media screen and (min-width: 750px) { --facets-vertical-col-width: 6; } @media screen and (min-width: 990px) { --facets-vertical-col-width: 5; } } .facets-block-wrapper { @media screen and (min-width: 750px) { margin: var(--facets-margin); grid-column: var(--grid-column--desktop); } } .facets-block-wrapper--vertical { @media screen and (min-width: 750px) { grid-column: var(--grid-column--desktop); } } .facets-toggle { --icon-offset: -3px; display: flex; justify-content: space-between; align-items: center; height: fit-content; margin: var(--facets-margin-mobile); padding-block: var(--facets-inner-padding-block); padding-inline: var(--facets-inner-padding-inline); @media screen and (min-width: 750px) { display: none; } } .facets-toggle .products-count-wrapper { display: flex; margin-inline-start: auto; @media screen and (min-width: 750px) { display: none; } } .facets-toggle__wrapper { margin-left: var(--icon-offset); } .facets-toggle__button { box-shadow: none; gap: 0.5rem; color: var(--color-foreground); font-size: 12px; font-weight: 700; line-height: 150%; @media screen and (min-width: 750px) { display: none; } } .facets-sticky-sentinel { width: 100%; height: 1px; grid-column: 1 / -1; pointer-events: none; } .facets-sticky-bar { position: fixed; bottom: calc(36px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: var(--layer-sticky); display: flex; flex-direction: column; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .facets-sticky-bar.facets-sticky-bar--visible { opacity: 1; pointer-events: auto; } .facets-sticky-bar__inner { display: flex; align-items: center; justify-content: center; } .facets-sticky-bar__button { display: inline-flex !important; align-items: center; gap: 0.5rem; color: var(--color-foreground); height: 48px; border: 1px solid var(--color-border); background-color: white; padding-inline: 14px; border-radius: 2px; transition: background-color 0.25s ease, opacity 0.25s ease; &:hover { background-color: var(--color-background); opacity: 0.8; } svg, .svg-wrapper { width: 16px; height: 16px; } } .facets-sticky-bar__count { font-weight: inherit; } .facets-sticky-bar .sorting-filter { max-width: 200px; } .facets-sticky-bar .sorting-filter__container { /* Override desktop:hidden so sort is visible on all viewports in sticky bar */ display: flex !important; background: var(--color-background); border: 1px solid rgb(var(--color-foreground-rgb) / 0.15); border-radius: var(--style-border-radius); padding: var(--padding-sm) var(--padding-lg); box-shadow: 0 4px 14px 0 rgb(var(--color-foreground-rgb) / 0.12); } .facets-sticky-bar .facets__panel { display: none; } .filter-count-bubble { position: relative; width: 20px; aspect-ratio: 1; border-radius: 50%; display: grid; line-height: normal; place-content: center; color: var(--color-foreground); border: var(--icon-stroke-width) solid var(--color-background); } .facets-mobile__title-wrapper .h3 { margin-block-end: 0; display: inline-flex; align-items: center; gap: var(--gap-xs); } .facets-mobile__title-wrapper .filter-count-bubble { width: 22px; height: 22px; } .facets-mobile__title-wrapper .filter-count-bubble__text { font-size: var(--font-size--xs); } .filter-count-bubble__background { position: absolute; inset: 0; background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); border-radius: var(--style-border-radius-50); } .filter-count-bubble__text { font-size: 11px; font-weight: var(--font-paragraph--weight); aspect-ratio: 1 / 1; } .facets-toggle--no-filters { @media screen and (max-width: 749px) { /* stylelint-disable-next-line declaration-no-important */ justify-content: unset !important; & > .facets-mobile-wrapper { width: 100%; } } } .facets-block-wrapper--vertical + .facets-toggle { @media screen and (max-width: 749px) { margin: 0; } } .facets-mobile-wrapper { display: flex; align-items: center; gap: var(--gap-sm); justify-content: flex-end; } .facets-mobile-wrapper--multiple-controls { justify-content: space-between; } @media screen and (min-width: 750px) { dialog-component.facets-block-wrapper { position: absolute; width: 0; height: 0; } } .variant-option__swatch-wrapper { position: relative; overflow: visible; border-radius: var(--options-border-radius); } .variant-option--swatches-disabled .variant-option__swatch-wrapper { overflow: hidden; } .facets { --facets-form-horizontal-gap: 20px; --facets-horizontal-max-input-wrapper-height: 230px; --facets-upper-z-index: var(--layer-raised); --facets-open-z-index: var(--layer-heightened); --facets-sticky-z-index: var(--layer-sticky); --facets-panel-min-width: 120px; --facets-panel-height: 300px; --facets-grid-panel-width: 300px; --facets-clear-padding: var(--padding-md); --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity)); --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60)); --facets-clear-all-min-width: 120px; --facets-see-results-min-width: 55%; --facets-mobile-gap: 16px; --facets-low-opacity: 10%; --facets-hover-opacity: 75%; top: auto; bottom: 0; height: var(--drawer-height); max-height: var(--drawer-height); width: var(--drawer-width); max-width: var(--drawer-max-width); box-shadow: none; padding-block: 0; &:not(.facets--drawer) { @media screen and (min-width: 750px) { padding-inline: var(--page-margin); width: 100%; max-width: 100%; } } } .facets--horizontal { display: none; @media screen and (min-width: 750px) { padding-block: var(--padding-block-start) var(--padding-block-end); display: flex; align-items: center; position: relative; z-index: var(--facets-upper-z-index); border: none; height: auto; top: initial; bottom: initial; max-height: none; width: auto; overflow: visible; padding-block-end: 24px; } } .facets--vertical { display: none; @media screen and (min-width: 750px) { padding-block: 0 var(--padding-block-end); display: block; position: static; top: auto; bottom: auto; height: auto; max-height: none; width: auto; overflow: visible; } } .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) { @media screen and (min-width: 750px) { padding-inline: var(--page-margin); } } .facets--drawer { border-radius: 0; border-right: var(--style-border-drawer); box-shadow: var(--shadow-drawer); padding-inline: 0; margin-inline-start: 0; } .facets--drawer[open] { display: flex; flex-direction: column; height: 100%; overflow: hidden; z-index: var(--layer-menu-drawer); } .facets-drawer__form-wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .facets-drawer__form-wrapper .facets__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .facets-drawer__filters { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; } .facets-drawer__filters .facets__filters-wrapper, .facets-drawer__filters .filter-remove-buttons, .facets-drawer__filters .sorting-filter-component { overflow: visible; } .facets--drawer .facets__actions { flex-shrink: 0; background-color: var(--color-background); } .facets.facets-controls-wrapper { @media screen and (min-width: 750px) { grid-column: column-1 / column-12; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); gap: 0 var(--facets-form-horizontal-gap); padding-bottom: var(--padding-xs); } } .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper { @media screen and (max-width: 749px) { display: none; } } .facets__inputs { display: flex; flex-direction: column; gap: var(--padding-lg); width: 100%; } :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) { padding-block-end: 20px; } /* Facets - Form */ .facets__form-wrapper { display: flex; flex-direction: column; color: var(--color-foreground-muted); width: 100%; } .facets--horizontal .facets__form-wrapper { @media screen and (min-width: 750px) { flex-direction: row; height: auto; } } .facets__form { display: flex; flex-flow: column; width: 100%; height: 100%; } .facets--horizontal .facets__form { @media screen and (min-width: 750px) { flex-flow: row nowrap; height: auto; align-items: center; } } .facets:not(.facets--drawer) .facets__filters-wrapper { @media screen and (min-width: 750px) { margin-inline-end: var(--margin-md); } } .facets--horizontal .facets__filters-wrapper { @media screen and (min-width: 750px) { max-width: 60%; display: flex; /* flex-wrap: wrap; */ column-gap: var(--gap-xl); margin-inline-end: 0; } } .facets__filters-wrapper--horizontal-limited { @media screen and (min-width: 750px) { align-items: center; gap: 8px var(--gap-xl); height: 18px; } /* 750px–1150px: show max 4 filters; 1150px+: show max 6 */ @media screen and (min-width: 750px) and (max-width: 1149px) { .facets__item:nth-child(n + 5) { display: none; } } /* 5–6 filters: More button only needed in mid range; hide at 1150px+ when all visible */ &.facets__filters-wrapper--more-mid-only .facets__more-filters-button { @media screen and (min-width: 1150px) { display: none; } } } .facets__more-filters-button { color: var(--color-foreground); font-size: 12px; font-weight: 700; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; white-space: nowrap; min-width: 94px; border: none; background: none; cursor: pointer; font-family: var(--font-paragraph-family); text-align: start; &:hover { text-decoration-line: none; } &--uppercase { text-transform: uppercase; } @media screen and (min-width: 750px) { padding: 0 !important; } } .facets--drawer .facets-remove:has(facet-remove-component) + .facets__filters-wrapper { padding-block-start: 20px; } /* Facets - Summary */ .facets__summary { --variant-picker-swatch-width: 32px; --variant-picker-swatch-height: 32px; --icon-opacity: 0.5; @media screen and (min-width: 750px) { --variant-picker-swatch-width: 26px; --variant-picker-swatch-height: 26px; height: fit-content; } font-size: var(--font-h5--size); display: flex; justify-content: space-between; padding-block: 0; &:hover { --icon-opacity: 1; } } .facets__filters-wrapper:hover .facets__summary, .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary { opacity: var(--facets-hover-opacity); } .facets__filters-wrapper .facets__summary:hover, .facets__filters-wrapper .facets__panel[open] .facets__summary { opacity: 1; } .facets--horizontal .facets__summary { @media screen and (min-width: 750px) { font-size: 12px; justify-content: flex-start; height: fit-content; } } .facets__summary .icon-caret { color: rgba(36 36 32 / 0.5); margin-block: var(--margin-2xs); transition: color var(--animation-speed) var(--animation-easing); } .facets__summary .icon-caret svg { width: 18px; height: 18px; } .facets--drawer .facets__summary .icon-caret { margin-inline-start: var(--margin-2xs); } /* Facets - Bubble */ .facets__bubble { display: inline-flex; font-family: var(--font-paragraph--family); font-weight: var(--font-paragraph--weight); aspect-ratio: 1 / 1; width: 16px; height: 16px; min-width: 16px; padding: 0; font-size: 11px; } .facets__bubble--drawer { width: 1rem; height: 1rem; min-width: 1rem; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; } /* Facets - Inputs */ .facets__inputs-wrapper { margin-block: var(--padding-xs) var(--padding-xs); } .facets__inputs .show-more { display: flex; flex-direction: column; gap: 20px; margin-block-end: 20px; } .facets:not(.facets--drawer) .facets__inputs-wrapper { @media screen and (min-width: 750px) { gap: 10px; } } .facets--horizontal .facets__inputs .show-more { @media screen and (min-width: 750px) { display: contents; } } .facets--horizontal .facets__inputs-wrapper { @media screen and (min-width: 750px) { max-height: var(--facets-horizontal-max-input-wrapper-height); overflow-x: auto; padding: 14px; margin-block: 0; width: fit-content; display: flex; flex-direction: column; } } .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper { padding-block: var(--padding-sm); padding-inline: var(--padding-sm); margin-block: calc(var(--padding-sm) * -1); margin-inline: calc(var(--padding-sm) * -1); } @media screen and (max-width: 749px) { .facets__inputs:has(.show-more) .facets__inputs-wrapper { padding-block: var(--padding-sm); padding-inline: var(--padding-sm); margin-block: calc(var(--padding-sm) * -1); margin-inline: calc(var(--padding-sm) * -1); } } .facets__inputs-wrapper:not(:has(.facets__inputs-list)), .facets__inputs-wrapper .facets__inputs-list { display: flex; gap: var(--facets-mobile-gap); flex-direction: column; @media screen and (min-width: 750px) { gap: var(--gap-sm); } } @media screen and (min-width: 750px) { .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches { gap: var(--gap-sm); } .facets--horizontal .facets__inputs-wrapper .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) { display: grid; grid-template-columns: repeat(var(--swatch-columns, 4), 1fr); } } .facets__inputs-wrapper .facets__inputs-list--grid { --min-column-width: 20%; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr)); gap: var(--gap-sm); @media screen and (min-width: 750px) { --min-column-width: 50px; } } .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid { @media screen and (min-width: 750px) { width: var(--facets-grid-panel-width); } } .facets__inputs .show-more__button { --show-more-icon-size: 10px; --show-more-gap: 6px; gap: var(--show-more-gap); .icon-chevron, svg { width: var(--show-more-icon-size); height: var(--show-more-icon-size); } } .facets__inputs .show-more__button .icon-plus { width: var(--show-more-icon-size); height: var(--show-more-icon-size); svg { width: var(--show-more-icon-size); height: var(--show-more-icon-size); } } /* Facets - Panel */ .facets__panel { padding: 0 var(--drawer-padding); } .facets:not(.facets--drawer) .facets__panel, .facets-controls-wrapper .facets__panel { @media screen and (min-width: 750px) { padding: 0; } } .facets--horizontal .facets__panel { @media screen and (min-width: 750px) { position: relative; } } .facets-mobile-wrapper .facets__panel-content { border-radius: var(--style-border-radius-popover); } .facets-mobile-wrapper { --facets-upper-z-index: var(--layer-raised); --facets-panel-min-width: 120px; --facets-panel-height: 300px; } .facets--horizontal .facets__panel-content { @media screen and (min-width: 750px) { border-radius: var(--style-border-radius-popover); position: absolute; top: 100%; width: max-content; min-width: var(--facets-panel-min-width); max-width: var(--facets-panel-width); max-height: var(--facets-panel-height); z-index: var(--facets-upper-z-index); box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); overflow-y: hidden; gap: 0; } } :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before { content: ''; display: block; height: 0; width: calc(100% - var(--drawer-padding) * 2); border-top: var(--style-border-width) solid var(--color-border); margin: 0 auto; } @media screen and (min-width: 750px) { .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before { width: 100%; } .facets--horizontal .facets__item:not(:first-of-type)::before, .facets--horizontal .sorting-filter::before { content: none; } } @media screen and (min-width: 750px) { .facets--vertical .facets__item:not(:first-of-type)::before, .facets--vertical .sorting-filter::before { content: ''; } } .facets__item, .facets__form-wrapper .products-count-wrapper, .sorting-filter { @media screen and (min-width: 750px) { user-select: none; } } .products-count-wrapper > span { line-height: 1; display: flex; } /* Facets - Text */ .facets__label, .facets__clear-all, .clear-filter { text-decoration-color: transparent; text-decoration-thickness: 0.075em; text-underline-offset: 0.125em; transition: text-decoration-color var(--animation-speed) var(--animation-easing); } .facets__label, .products-count-wrapper { text-transform: var(--facet-label-transform); } .clear-filter { background-color: transparent; box-shadow: none; padding: 0; } /* Facets - Label */ .facets__label { color: var(--color-foreground); cursor: pointer; white-space: nowrap; margin-inline-end: 8px; font-size: 12px; font-weight: 700; line-height: 150%; } .facets__label--sorting { @media screen and (min-width: 750px) { font-weight: 400; } } .facets--drawer .facets__summary { padding-block: 20px; .facets__label { font-size: 18px; color: var(--color-foreground); font-family: var(--font-heading--family); font-weight: 400; line-height: 110%; } .facets__status-wrapper facet-status-component, .facets__status-wrapper .facets__status { display: none; } .svg-wrapper { width: 20px; height: 20px; margin: 0; } } /* Products count */ .products-count-wrapper { display: none; color: var(--color-foreground-secondary); font-size: 12px; line-height: 1; } .facets--horizontal .products-count-wrapper { @media screen and (min-width: 750px) { display: flex; margin-left: auto; flex-shrink: 0; align-items: center; height: fit-content; color: rgba(var(--color-foreground-rgb) / 0.75); text-align: right; font-size: 12px; font-weight: 400; height: 18px; line-height: 150%; } } /* Mobile specific components */ .facets__title-wrapper { background-color: var(--color-background); color: var(--color-foreground); position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding-block: 4px; padding-inline: var(--drawer-padding); z-index: var(--facets-sticky-z-index); } :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper { @media screen and (min-width: 750px) { display: none; } } .facets-drawer__title { --variant-picker-swatch-width: 32px; --variant-picker-swatch-height: 32px; margin: 0; display: flex; align-items: center; gap: var(--gap-xs); color: var(--color-foreground); font-family: var(--font-heading--family); font-size: 20px; font-weight: 400; line-height: 110%; @media screen and (min-width: 750px) { --variant-picker-swatch-width: 26px; --variant-picker-swatch-height: 26px; } } .facets-drawer__close { position: relative; top: 0; right: 0; padding: 0; cursor: pointer; } .facets-drawer__close { .svg-wrapper, svg { width: 24px; height: 24px; } } /* Status */ .facets__status:not(:empty) { width: max-content; display: flex; margin-inline-start: auto; font-weight: 500; color: var(--color-foreground); } .facets--filters-title { margin-block-end: 0; color: var(--color-foreground); height: fit-content; @media screen and (max-width: 749px) { display: none; } } .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) { @media screen and (min-width: 750px) { display: flex; margin-inline-end: 4px; } } /* Horizontal filter style */ .facets--horizontal .facets__form { @media screen and (min-width: 750px) { gap: 0 var(--facets-form-horizontal-gap); } } .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] { @media screen and (min-width: 750px) { z-index: var(--facets-open-z-index); } } @media screen and (min-width: 750px) { .facets--horizontal .facets__status { user-select: none; color: var(--color-foreground); font-size: 12px; font-weight: 400; line-height: 150%; } } /* END_BLOCK:filters */ /* START_BLOCK:footer-copyright (INDEX:206) */ .footer-utilities__text { font-family: var(--font-body-family); font-weight: 400; line-height: 1.5; color: var(--color-foreground-secondary); text-align: center; } .custom-typography.custom-font-size .footer-utilities__text { font-size: var(--font-size, 14px); text-transform: var(--text-transform, none); } .footer-utilities__text a { color: inherit; text-decoration: none; } /* END_BLOCK:footer-copyright */ /* START_BLOCK:footer-country-selector (INDEX:207) */ .footer-localization { display: contents; } .footer-utilities__country-selector { display: flex; align-items: center; gap: var(--gap-xs, 8px); padding: 0; margin: 0; background: transparent; border: none; cursor: pointer; text-align: left; } .footer-utilities__country-selector .country-name { text-decoration: underline; } /* Footer dialog positioning - shared styles in localization-dialog class */ .footer-localization__dialog { bottom: 60px; left: 60px; top: auto; } @media screen and (max-width: 749px) { .footer-localization__dialog { bottom: 80px; left: 50%; transform: translateX(-50%); } } /* END_BLOCK:footer-country-selector */ /* START_BLOCK:footer-logo (INDEX:208) */ .footer-logo { display: block; text-decoration: none; padding-top: var(--footer-logo-padding-top, 0); padding-bottom: var(--footer-logo-padding-bottom, 0); padding-left: var(--footer-logo-padding-left, 0); padding-right: var(--footer-logo-padding-right, 0); } .footer-logo__image { object-fit: contain; height: var(--footer-logo-image-height-mobile); width: var(--footer-logo-image-width-mobile); @media screen and (min-width: 1023.95px) { height: var(--footer-logo-image-height); width: var(--footer-logo-image-width); } } /* END_BLOCK:footer-logo */ /* START_BLOCK:footer-policy-list (INDEX:209) */ .policy-list-trigger { anchor-name: --terms-policies-trigger; cursor: pointer; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } .policy_list { li { border-radius: calc(var(--style-border-radius-popover) - 8px); a { color: var(--color-foreground); display: inline-block; padding: 8px; text-align: start; width: 100%; outline-color: #0000; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } &:is(:hover, :focus-within) { background: rgb(var(--color-foreground-rgb) / 0.15); } } } .terms-policies-popover { position-anchor: --terms-policies-trigger; inset: unset; bottom: calc(anchor(top) + 1rem); left: anchor(left); border-radius: var(--style-border-radius-popover); background: linear-gradient(var(--color-background) 0 100%), linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%); background-clip: padding-box, border-box; border: 1px solid #0000; box-shadow: var(--shadow-popover); padding: 8px; margin: 0; opacity: 0; scale: 0.94; translate: 0 6px; transform-origin: 3.9em 100%; } .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 1; translate: 0 0; scale: 1; } @media screen and (max-width: 750px) { .terms-policies-popover { left: anchor(center); transform: translate(-50%, 0); transform-origin: 0% 100%; } } @supports not (position-anchor: --account-button-trigger) { .terms-policies-popover { bottom: unset; top: calc(var(--anchor-top) * 1px); left: calc(var(--anchor-left) * 1px); transform: translate(0, calc(-100% - 1.25rem)); } @media screen and (max-width: 750px) { .terms-policies-popover { left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px); transform: translate(-50%, calc(-100% - 1.25rem)); } } } @media (prefers-reduced-motion: no-preference) { .terms-policies-popover { transition-property: display, overlay, opacity, scale, translate; transition-behavior: allow-discrete; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); } @starting-style { .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 0.7; translate: 0 6px; scale: 0.94; } } } /* END_BLOCK:footer-policy-list */ /* START_BLOCK:footer-utilities (INDEX:210) */ .footer-utilities { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg); text-wrap: nowrap; border-top: var(--border-width) solid var(--color-border); color: var(--color-foreground-muted); @media screen and (min-width: 750px) { flex-direction: row; justify-content: space-between; gap: var(--gap-md); align-items: center; text-align: left; padding-inline: var(--padding-xs, 10px); } } .footer-utilities a { color: var(--color-foreground-muted); } .footer-utilities__group { width: 100%; display: flex; flex: 1 1 max-content; text-align: center; flex-direction: column; align-items: center; flex-wrap: wrap; gap: var(--gap-md); @media screen and (min-width: 750px) { flex-direction: row; align-items: baseline; gap: var(--gap-2xs) var(--gap-xl); text-align: left; } } .footer-utilities__group--right { @media screen and (min-width: 750px) { justify-content: flex-end; } } .footer-utilities__group:empty { @media screen and (max-width: 749px) { display: none; } } /* END_BLOCK:footer-utilities */ /* START_BLOCK:icon (INDEX:212) */ .icon-block { display: flex; flex-shrink: 0; } .icon-block__media { height: auto; } /* END_BLOCK:icon */ /* START_BLOCK:image (INDEX:213) */ .placeholder-image { position: relative; aspect-ratio: var(--ratio); overflow: hidden; } @media screen and (max-width: 749px) { .placeholder-image { aspect-ratio: var(--ratio-mobile, var(--ratio)); } } placeholder-image img { width: 100%; height: 100%; aspect-ratio: var(--ratio); } .image-block { display: flex; /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */ justify-content: var(--horizontal-alignment, 'inline-start'); } .image-block__picture { display: block; width: 100%; } .image-block--height-fill .image-block__image { height: 100%; } .image-block__image { object-fit: cover; aspect-ratio: var(--ratio); width: 100%; max-width: 100%; } @media screen and (max-width: 749px) { .image-block__image { aspect-ratio: var(--ratio-mobile, var(--ratio)); } } .image-block__icon { height: auto; display: block; } /* END_BLOCK:image */ /* START_BLOCK:logo-marquee-item (INDEX:215) */ .logo-marquee-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-marquee-item__image { height: var(--logo-marquee-item-height, 33px); width: auto; object-fit: contain; } @media screen and (max-width: 749px) { .logo-marquee-item__image { height: var(--logo-marquee-item-height-mobile, 28px); } } .logo-marquee-item__placeholder { height: var(--logo-marquee-item-height, 33px); display: flex; align-items: center; padding-inline: 16px; color: var(--color-foreground); opacity: 0.5; } /* END_BLOCK:logo-marquee-item */ /* START_BLOCK:logo (INDEX:216) */ .logo-block { width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end)); max-width: 100%; max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end)); font-size: var(--logo-height); display: flex; @media screen and (max-width: 750px) { max-height: calc( var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end) ); font-size: var(--logo-height-mobile, var(--logo-height)); width: calc( var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end) ); } } .logo-block__image-wrapper { display: flex; width: 100%; max-width: 100%; max-height: 100%; } .logo-block__image { object-fit: contain; width: 100%; } /* END_BLOCK:logo */ /* START_BLOCK:menu (INDEX:217) */ .menu { width: 100%; } .menu:not(:has(.menu__heading--empty)) .details-content { margin-block-start: var(--spacing--size); } .menu__item + .menu__item { margin-block-start: var(--spacing--size); } .menu .menu__heading--empty { display: none; } .menu__heading__default { display: contents; } .menu__heading__accordion { display: none; } @media screen and (max-width: 749px) { /* Always show the fallback heading on mobile when accordion is enabled */ .menu--accordion .menu__heading--empty { display: flex; } .menu--accordion .menu__heading__accordion { display: contents; } .menu--accordion .menu__heading__default { display: none; } .menu--accordion .details-content { margin-block-start: var(--spacing--size); } .menu--accordion .menu__details { padding-inline: 0; } .menu--dividers .menu__details { border-block-end: var(--style-border-width) solid var(--color-border); } .menu--dividers .details-content { padding-block-end: var(--padding-sm); } } .menu--caret .icon-plus, .menu--caret .icon-minus, .menu--plus .icon-caret, .menu--plus .icon-minus { display: none; } .menu--plus details[open] .icon-plus { display: none; } .menu--plus details[open] .icon-minus { display: flex; } /* END_BLOCK:menu */ /* START_BLOCK:page (INDEX:219) */ .page-block { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; width: 100%; height: auto; align-items: flex-start; } .page-title { margin-bottom: var(--margin-xl); } .placeholder-image { position: relative; aspect-ratio: var(--ratio); overflow: hidden; } .page-placeholder { width: 100%; height: 100%; } /* END_BLOCK:page */ /* START_BLOCK:payment-icons (INDEX:220) */ .payment-icons { width: 100%; } .payment-icons__list { display: flex; align-items: center; justify-content: var(--alignment); flex-wrap: wrap; gap: var(--icon-gap); margin: 0; padding: 0; } .payment-icons__item { display: flex; align-items: center; } /* END_BLOCK:payment-icons */ /* START_BLOCK:plus-add (INDEX:221) */ .plus-add { position: absolute; inset: 0; pointer-events: none; display: none; } .plus-add__product-form-component { height: 100%; } .plus-add__product-form-component .shopify-product-form { display: flex; justify-content: center; align-items: flex-end; height: 100%; padding-bottom: 0.75rem; } .plus-add__button { display: flex; align-items: center; gap: 0.375rem; background-color: var(--color-background); cursor: pointer; pointer-events: auto; font-size: var(--font-size--xs); font-weight: var(--font-weight-medium); color: var(--color-foreground); transition-property: all; transition-duration: 200ms; transition-timing-function: ease-in-out; } .plus-add__button-label { line-height: 1; } .plus-add__button svg { flex-shrink: 0; } /* END_BLOCK:plus-add */ /* START_BLOCK:popup-link (INDEX:222) */ .popup-link__button svg { display: inline-block; position: relative; top: var(--margin-2xs); } .popup-link__content { box-shadow: var(--shadow-popover); border: var(--style-border-popover); border-radius: var(--style-border-radius-popover); background-color: var(--color-background); padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl); max-width: var(--normal-content-width); max-height: var(--modal-max-height); @media screen and (min-width: 750px) { padding: var(--padding-5xl); } } .popup-link__content[open] { animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards; } .popup-link__content.dialog-closing { animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards; } .popup-link__content--drawer { position: fixed; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; height: 100%; margin: 0 0 0 auto; } /* Needed to ensure the drawer is full height */ .popup-link__content--drawer:modal { max-height: 100dvh; } .popup-link__close { top: var(--margin-2xs); right: var(--margin-2xs); opacity: 0.8; animation: none; } /* END_BLOCK:popup-link */ /* START_BLOCK:price (INDEX:223) */ product-price.text-block { flex: 1; align-items: flex-end; } .tax-note:empty { display: none; } form.payment-terms { padding-top: 0.5em; font-size: min(0.85em, var(--font-paragraph--size)); font-weight: var(--font-paragraph--weight); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .installments:not(:has(shopify-payment-terms)) { display: none; } /* Volume pricing note should match unit-price styling (small, grey text) */ product-price .volume-pricing-note, product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note { display: block; font-family: var(--font-body--family); font-weight: normal; font-size: var(--font-size--xs); line-height: normal; letter-spacing: normal; text-transform: none; color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } /* Price layout */ product-price .price__container { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; } .quick-add-price-link-wrapper product-price .price__container { align-items: flex-start; } product-price .price { color: var(--price-color, inherit); } product-price .price--sale { color: var(--sale-color, inherit); } product-price .compare-at-price { color: var(--compare-at-color, #595959); opacity: 0.6; } /* Secondary row: save label + compare-at price */ product-price .price__secondary { display: flex; gap: 4px; align-items: center; justify-content: flex-end; font-size: var(--secondary-font-size, 0.875rem); line-height: 1.1; } /* Wrap compare-at + save when they don't fit side-by-side; override base flex-end alignment */ .product-card product-price .price__secondary:has(.price__save) { flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } product-price .price__save { color: var(--save-label-color, #595959); opacity: 0.6; } /* EU lowest price line */ product-price .price__lowest { display: block; font-family: var(--font-body--family); font-weight: normal; font-size: var(--secondary-font-size, 0.875rem); line-height: 1.1; color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } /* END_BLOCK:price */ /* START_BLOCK:product-custom-property (INDEX:225) */ product-custom-property-component { display: block; width: 100%; } product-custom-property-component .__heading { margin-inline: 0; margin-block: 0 var(--padding-sm); } product-custom-property-component .__heading:has(+ .__description) { margin-block-end: var(--padding-2xs); } product-custom-property-component .__description { font-size: min(0.85em, var(--font-paragraph--size)); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); margin-inline: 0; margin-block: 0 var(--padding-md); } product-custom-property-component .__field { position: relative; } product-custom-property-component .__input-wrapper { position: relative; } product-custom-property-component input, product-custom-property-component textarea { width: 100%; /* stylelint-disable-next-line declaration-no-important */ color: var(--color-input-text) !important; } /* Add padding for inputs with counter inside */ product-custom-property-component .__input-wrapper input { padding-bottom: calc(var(--padding-sm) * 3); } product-custom-property-component .__input-wrapper textarea { padding-bottom: calc(var(--padding-sm) * 3); scroll-padding-bottom: calc(var(--padding-sm) * 3); } product-custom-property-component textarea { min-height: 80px; } @supports (resize: vertical) { @media (hover: hover) and (pointer: fine) { product-custom-property-component textarea { resize: vertical; /* stylelint-disable-line */ } } } product-custom-property-component .__character-label { position: absolute; left: var(--input-padding-x); bottom: var(--padding-sm); pointer-events: none; } product-custom-property-component .__character-count { font-style: italic; /* stylelint-disable-next-line declaration-no-important */ color: var(--color-input-text) !important; } /* We should consolidate input styles that share the same behavior */ .custom-property__input { border: var(--style-border-width-inputs) solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); /* this is needed to override the styles from field__input */ box-shadow: none; &:is(:hover, :focus) { /* this is needed to override the styles from field__input */ box-shadow: none; } &:focus { /* this is needed to override the styles from field__input */ outline: var(--focus-outline-width) solid var(--color-input-background); } } /* END_BLOCK:product-custom-property */ /* START_BLOCK:product-inventory (INDEX:227) */ .product-inventory__status { display: flex; align-items: center; font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); gap: var(--padding-xs); } .product-inventory__icon, .product-inventory__icon svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .product-inventory__icon-low { color: var(--color-lowstock); } .product-inventory__icon-in_stock { color: var(--color-instock); } .product-inventory__icon-out_of_stock { color: var(--color-outofstock); } .product-inventory__icon circle:first-of-type { opacity: 0.3; } /* END_BLOCK:product-inventory */ /* START_BLOCK:product-recommendations (INDEX:228) */ .product-recommendations-wrapper { width: 100%; } .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) { width: 100vw; } .product-recommendations { display: block; } .block-resource-list { border-radius: var(--border-radius, 0); } .product-recommendations__skeleton-item { aspect-ratio: 3 / 4; background-color: var(--color-foreground); opacity: var(--skeleton-opacity); border-radius: 4px; } /* END_BLOCK:product-recommendations */ /* START_BLOCK:review (INDEX:232) */ .rating-wrapper { gap: var(--gap-xs); min-width: fit-content; } .rating-color--primary { --star-fill-color: var(--color-primary); --star-fill-color-rgb: var(--color-primary-rgb); --color: var(--color-primary); } .rating-color--foreground { --star-fill-color: var(--color-foreground); --star-fill-color-rgb: var(--color-foreground-rgb); --color: var(--color-foreground); } .rating-wrapper, .rating { display: flex; align-items: center; } .rating-wrapper.justify-right { flex-direction: row-reverse; } .rating { gap: var(--gap-3xs); } .rating-wrapper .rating-count, .rating-wrapper .rating-count-separator { color: var(--star-fill-color); margin: 0; white-space: nowrap; } .rating-count-separator { opacity: var(--opacity-20); padding-left: calc(var(--padding-xs) / 2); padding-right: var(--padding-xs); } .stars { height: var(--star-size); fill: var(--empty-star-fill-color); } .filled-star { fill: var(--star-fill-color); } /* END_BLOCK:review */ /* START_BLOCK:search-input (INDEX:233) */ .search-input-block { width: 100%; align-self: stretch; } .search-input-block__wrapper { position: relative; width: 100%; max-width: 662px; } .search-input-block__icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; display: flex; align-items: center; } .search-input-block__icon svg { width: 18px; height: 18px; } .search-input-block__input { height: 48px; width: 100%; padding: var(--input-padding-y, 12px) var(--input-padding-x, 12px) var(--input-padding-y, 12px) calc(12px + 18px + var(--spacing-2xs, 8px)); border-radius: var(--style-border-radius-inputs, 2px); border: 1px solid var(--color-secondary-button-border, #ECECEC); font-size: 0.875rem; color: var(--color-foreground); box-sizing: border-box; background: var(--Color-Inputs-color-input-background, #FFF); } .search-input-block__input::placeholder { color: var(--color-foreground); opacity: 0.5; } /* END_BLOCK:search-input */ /* START_BLOCK:social-links (INDEX:236) */ .social-icons__wrapper { display: flex; gap: var(--icon-gap, 9px); flex-wrap: nowrap; justify-content: center; align-items: center; } footer .social-icons__wrapper { justify-content: center; } @media screen and (min-width: 1024px) { .social-icons__wrapper { gap: var(--icon-gap-desktop, 12px); } } .social-icons__icon-wrapper { display: flex; align-items: center; justify-content: center; height: 24px; } .social-icons__icon-wrapper a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .social-icons__icon-wrapper img { width: 100%; height: 100%; object-fit: contain; } @media screen and (min-width: 1024px) { footer .social-icons__icon-wrapper { height: 28px; } footer .social-icons__icon-wrapper a { width: 28px; height: 28px; } } /* END_BLOCK:social-links */ /* START_BLOCK:spacer (INDEX:237) */ /* Fill opposite direction */ .layout-panel-flex--column > .spacer-block { width: 100%; } .layout-panel-flex--row > .spacer-block { height: 100%; } /* Flex - Percent */ :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent { flex: var(--spacer-size); } /* Flex - Pixel */ .layout-panel-flex--row > .spacer-block--size-pixel { width: var(--spacer-size); } .layout-panel-flex--column > .spacer-block--size-pixel { height: var(--spacer-size); } /* Mobile */ @media screen and (max-width: 750px) { /* Percent */ .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent { flex: var(--spacer-size-mobile); height: 100%; } .layout-panel-flex--column > .spacer-block--size-mobile-percent, .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) { width: 100%; flex: var(--spacer-size-mobile); } /* Pixel */ .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel { width: var(--spacer-size-mobile); height: 100%; } .layout-panel-flex--column > .spacer-block--size-mobile-pixel, .mobile-column > .spacer-block--size-mobile-pixel { width: 100%; height: var(--spacer-size-mobile); } } /* END_BLOCK:spacer */ /* START_BLOCK:swatches (INDEX:238) */ product-swatches { width: 100%; display: flex; position: relative; overflow: hidden; gap: 0; flex-shrink: 0; } .product-swatches.product-swatches--no-overflow { overflow: visible; } swatches-variant-picker-component, sibling-swatches-component { display: flex; width: 100%; flex-direction: row; justify-content: var(--product-swatches-alignment-mobile); @media (min-width: 750px) { justify-content: var(--product-swatches-alignment); } --overflow-list-padding-block: calc( var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width) ) calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)); --overflow-list-padding-inline: calc( var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + var(--focus-outline-width) ) calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width)); overflow-list::part(list) { gap: 8px; } } .variant-option--swatches { overflow-list::part(list) { padding-block: var(--overflow-list-padding-block, 0); padding-inline: var(--overflow-list-padding-inline, 0); } } .hidden-swatches__count { display: flex; align-self: center; align-items: center; justify-content: center; color: rgb(var(--color-foreground-rgb)); background-color: transparent; font-size: 12px; padding: 0; border: 0; border-radius: 0; &::before { /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */ counter-reset: overflow-count var(--overflow-count); content: '+' counter(overflow-count); line-height: 1; font-size: 12px; cursor: pointer; } } .hidden-swatches__count:hover { color: var(--color-foreground-rgb); } product-swatches .swatch { --swatch-width: 12px; --swatch-height: 12px; } product-swatches .variant-option__swatch[data-available="false"] .variant-option__button-label { position: relative; display: grid; place-items: center; } @media (hover: hover) { product-swatches .variant-option__swatch[data-available="false"] .variant-option__button-label:hover { background-color: transparent; } } product-swatches .variant-option__swatch[data-available="false"] .variant-option__button-label::before { content: ''; position: absolute; height: 100%; width: 1px; background-color: var(--color-variant-border); transform: rotate(45deg); } .overflow-list-fade-wrapper { opacity: 0; transition: opacity 0.2s ease-in; } .overflow-list-fade-wrapper.is-ready { opacity: 1; } /* END_BLOCK:swatches */ /* START_BLOCK:tyz-delivery-content (INDEX:241) */ .delivery-content { display: flex; flex-direction: column; gap: 8px; } .delivery-table { width: 100%; border-collapse: collapse; } .delivery-table td { padding: 1px 0; vertical-align: top; } .delivery-row-label { width: 40%; white-space: nowrap; padding-right: 12px; } .delivery-row-label, .delivery-row-value, .delivery-collect-heading { font-size: var(--font-size--2xs); line-height: 150%; color: var(--color-foreground); } .delivery-collect-table { margin-top: 16px; } .delivery-collect-heading { font-size: var(--font-size--sm); font-weight: 700; } .delivery-link { font-size: var(--font-size--2xs); line-height: 150%; color: var(--color-foreground); text-decoration: underline; } /* END_BLOCK:tyz-delivery-content */ /* START_BLOCK:tyz-returns-content (INDEX:244) */ .returns-content { display: flex; flex-direction: column; gap: 8px; } .returns-policy-group { display: flex; flex-direction: column; gap: 2px; } .returns-policy-row { display: flex; flex-direction: column; gap: 2px; } .returns-policy-row p { margin-block: var(--font-paragraph--spacing); } .returns-policy-row p:first-of-type { margin-block-start: 0; } .returns-row-label, .returns-row-value { font-size: var(--font-size--sm); line-height: 150%; color: var(--color-foreground); } .returns-row-label { font-weight: bold; } .returns-link { font-size: var(--font-size--sm); line-height: 150%; color: var(--color-foreground); text-decoration: underline; } /* END_BLOCK:tyz-returns-content */ /* START_BLOCK:tyz-shop-the-look (INDEX:245) */ .shop-the-look-modal { --shop-the-look-border-radius: var(--style-border-radius-popover); --shop-the-look-border-width: var(--style-border-width); --slideshow-gap: 12px; } .shop-the-look-modal__content { /* Approx set the top so when the content is at max height, the modal is centered */ --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem); --modal-width: 350px; --color-background: rgb(255 255 255 / 1.0); --color-foreground: rgb(0 0 0 / 1.0); --color-foreground-heading: rgb(0 0 0 / 1.0); --color-primary: rgb(0 15 159 / 1.0); --color-primary-hover: rgb(0 0 0 / 1.0); --color-border: rgb(0 0 0 / 0.19); --color-shadow: rgb(0 0 0 / 1.0); --color-primary-button-text: rgb(255 255 255 / 1.0); --color-primary-button-background: rgb(0 0 0 / 1.0); --color-primary-button-border: rgb(0 0 0 / 1.0); --color-primary-button-hover-text: rgb(255 255 255 / 1.0); --color-primary-button-hover-background: rgb(0 0 0 / 1.0); --color-primary-button-hover-border: rgb(0 0 0 / 1.0); --color-secondary-button-text: rgb(0 0 0 / 1.0); --color-secondary-button-background: rgb(255 255 255 / 1.0); --color-secondary-button-border: rgb(0 0 0 / 1.0); --color-secondary-button-hover-text: rgb(0 0 0 / 1.0); --color-secondary-button-hover-background: rgb(222 222 222 / 1.0); --color-secondary-button-hover-border: rgb(0 0 0 / 1.0); padding: 24px; border: var(--style-border-popover); @media screen and (max-width: 749px) { max-height: fit-content; bottom: 0; top: unset; } } @media screen and (min-width: 750px) { .shop-the-look-modal__content { width: var(--modal-width); margin-block-start: var(--modal-top-margin); overflow: hidden; } } .dialog-modal:not([open]) { display: none; } .dialog-modal[open].shop-the-look-modal__content { transform-origin: bottom center; animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards; border-radius: var(--shop-the-look-border-radius); box-shadow: var(--shadow-popover); } .dialog-modal.shop-the-look-modal__content.dialog-closing { animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards; } .shop-the-look-modal__content[open] { display: flex; } .shop-the-look-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) { position: relative; } .shop-the-look-modal__content .product-grid__card { --padding-block: 0 !important; --padding-inline: 0 !important; } .shop-the-look-modal__content slideshow-component { display: flex !important; } .shop-the-look-modal__content slideshow-controls { padding-top: 20px; mix-blend-mode: initial; --color: #1a1a1a50; --color-active: #1a1a1a; } .shop-the-look-modal__content slideshow-controls button { --color: #1a1a1a50; --color-active: #1a1a1a; } /* END_BLOCK:tyz-shop-the-look */ /* START_BLOCK:video (INDEX:247) */ .placeholder-video { aspect-ratio: 5 / 3; } /* END_BLOCK:video */ /* CSS from snippet stylesheet tags */ /* START_SNIPPET:account-actions (INDEX:248) */ .account-actions { background-color: var(--color-background); display: flex; flex-direction: column; position: relative; transition: height var(--animation-values); &:has([data-active]) .account-actions__main-menu { visibility: hidden; } } .account-actions__header { padding: var(--padding-xl); display: flex; flex-direction: column; gap: var(--gap-2xs); } .account-actions__title { /* Ideally we set the font-size here, but specificity issues make this necessary */ --font-h5--size: var(--font-size--lg); margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .account-actions__email { display: flex; align-items: center; gap: var(--gap-2xs); color: rgb(var(--color-foreground-rgb) / var(--opacity-60)); max-width: var(--account-actions-max-width); word-break: break-all; } .account-actions__sign-ins { padding: var(--padding-xl); padding-block-start: 0; padding-block-end: var(--padding-md); display: flex; flex-direction: column; gap: var(--gap-sm); } .account-actions__sign-in-text { display: inline; } .account-actions__fallback-text { display: none; } .account-actions__sign-ins:not(:has(shop-login-button)) { gap: 0; .account-actions__sign-in-text { display: none; } .account-actions__fallback-text { display: block; } } /* Makes the shop login button radius match the theme settings */ .account-actions__shop-login { --buttons-radius: var(--style-border-radius-buttons-primary); } .account-actions__nav { padding: var(--padding-xl); padding-block-start: 0; } .account-actions__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); width: 100%; list-style: none; margin: 0; padding: 0; @media screen and (max-width: 300px) { grid-template-columns: 1fr; } } .account-actions__link { width: auto; display: flex; justify-content: center; align-items: center; gap: var(--gap-2xs); } .account-actions__icon { display: flex; width: var(--icon-size-sm); height: var(--icon-size-sm); margin-block: -4px; } /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */ @supports not (background-color: rgb(from red 150 g b / alpha)) { /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. Using element selector to increase specificity. **/ .account-actions :is(a.button, a.button-secondary):focus-visible { outline: none; overflow: visible; position: relative; &::after { content: ''; position: absolute; inset: calc(-1 * var(--focus-outline-offset)); border: var(--focus-outline-width) solid currentColor; border-radius: var(--style-border-radius-buttons-secondary); display: inherit; } } .account-actions a.button:focus-visible::after { border-color: var(--button-background-color); border-radius: var(--style-border-radius-buttons-primary); } } /* END_SNIPPET:account-actions */ /* START_SNIPPET:account-button (INDEX:249) */ .account-button { color: var(--color-foreground); appearance: none; border: none; background: none; height: var(--button-size); width: var(--button-size); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; transition: color var(--animation-speed) var(--animation-easing); anchor-name: --account-button-trigger; } .account-button-custom { display: flex; align-items: center; justify-content: center; gap: 0.25rem; height: 36px; width: 84px; background-color:var(--color-secondary-button-background); border: 1px solid var(--color-secondary-button-border, #ECECEC); border-radius: 2px; @media screen and (max-width: 989px) { width: 36px; padding: 0; } } .account-button-custom:hover { border: 1px solid #111; border-radius: 2px; } .account-button-custom .account-icon { display: flex; align-items: center; flex-shrink: 0; } .account-button-custom .account-icon svg { width: 16px; height: 16px; color: var(--color-secondary-button-text); } .account-button-custom .account-icon svg path { fill: #000000; stroke: #000000; } .account-button-custom .account-text { font-weight: var(--font-paragraph--weight); font-size: var(--font-size--2xs); line-height: 1; display: flex; align-items: center; white-space: nowrap; color: var(--color-secondary-button-text); @media screen and (max-width: 989px) { display: none; } } .account-button__avatar { --account-button-size: 1.3rem; display: flex; align-items: center; justify-content: center; width: var(--account-button-size); height: var(--account-button-size); border-radius: var(--style-border-radius-50); background-color: var(--color-primary-button-background); font-size: var(--font-size--xs); font-weight: 500; color: var(--color-primary-button-text); text-transform: uppercase; line-height: 1; } .account-button__icon { color: currentColor; display: inline-flex; justify-content: center; align-items: center; } /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */ .account-button shop-user-avatar { pointer-events: none; } /* END_SNIPPET:account-button */ /* START_SNIPPET:account-drawer-side (INDEX:250) */ @media screen and (max-width: 989px) { .account-drawer-side { display: contents; } .account-drawer-side > .account-button { display: none !important; } } .account-drawer-side__dialog { position: fixed; width: 414px; max-width: 95vw; height: 100%; margin: 0 0 0 auto; @media screen and (max-width: 989px) { width: 100%; max-width: 100vw; } padding: 0; border-radius: 0; border: none; background-color: var(--color-background); box-shadow: var(--shadow-drawer); overflow: hidden; display: flex; flex-direction: column; } .account-drawer-side__dialog:modal { max-height: 100dvh; } .account-drawer-side__header { width: 100%; height: 52px; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 16px 12px 12px; flex-shrink: 0; } .account-drawer-side__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 20px; line-height: 0.7763; color: var(--color-foreground); } .account-drawer-side__close { margin-inline-start: auto; flex-shrink: 0; min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground); background: transparent; border: none; cursor: pointer; } .account-drawer-side__close .svg-wrapper { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; } .account-drawer-side__close svg { width: 24px; height: 24px; } .account-drawer-side__scroll-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 24px; padding: 16px 12px; overflow-y: auto; position: relative; } .account-drawer-side__content { width: 100%; display: flex; flex-direction: column; gap: 8px; } .account-drawer-side__greeting { margin: 0; width: 100%; font-family: var(--font-heading--family); font-weight: 400; font-size: 30px; line-height: 0.7763; color: var(--color-foreground); } .account-drawer-side__welcome { margin: 0; width: 100%; font-family: var(--font-paragraph--family); font-weight: 400; font-size: 14px; line-height: 1.2931; color: var(--color-foreground); } .account-drawer-side__cta { width: 100%; display: flex; flex-direction: column; gap: 8px; } .account-drawer-side__sign-in-button { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 14px; border-radius: 2px; background-color: rgb(235, 231, 23); border: 1px solid rgb(235, 231, 23); font-family: var(--font-paragraph--family); font-weight: 700; font-size: 14px; line-height: 1; text-align: center; text-decoration: none; color: rgb(36, 36, 32); overflow: hidden; cursor: pointer; } .account-drawer-side__sign-in-button:hover { background-color: rgb(225, 221, 13); border-color: rgb(225, 221, 13); } .account-drawer-side__shop-login { --buttons-radius: 2px; display: block; width: 100%; } .account-drawer-side__divider { width: 100%; height: 0; margin: 0; border: none; border-top: 1px solid rgb(236, 236, 236); } .account-drawer-side__nav-wrapper { width: 100%; } .account-drawer-side__nav { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; } .account-drawer-side__nav li { width: 100%; } .account-drawer-side__nav-item { width: 100%; height: 24px; display: flex; flex-direction: row; align-items: center; gap: 8px; text-decoration: none; color: var(--color-foreground); } .account-drawer-side__nav-item--button { background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .account-drawer-side__nav-item-icon { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground); } .account-drawer-side__nav-item-icon svg { width: 24px; height: 24px; } .account-drawer-side__nav-item-label { flex: 1; font-family: var(--font-paragraph--family); font-weight: 400; font-size: 14px; line-height: 1.2931; text-align: left; color: var(--color-foreground); } .account-drawer-side__nav-item:focus-visible { outline: var(--focus-outline-width) solid currentColor; outline-offset: 2px; } .account-drawer-side__recently-viewed { width: 100%; display: flex; flex-direction: column; gap: 24px; } .account-drawer-side__rv-header { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 24px; } .account-drawer-side__rv-title { margin: 0; flex: 1; min-width: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 20px; line-height: 0.7763; color: var(--color-foreground); } .account-drawer-side__rv-carousel { container-name: account-drawer-rv-carousel; container-type: inline-size; width: 100%; } .account-drawer-side__rv-slideshow { width: 100%; } .account-drawer-side__rv-carousel .resource-list__slide { --section-slide-width: calc( (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count) ); --slide-width: var(--section-slide-width); } .account-drawer-side__scroll-gradient { position: sticky; bottom: -16px; margin-bottom: -16px; width: 100%; height: 48px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); pointer-events: none; flex-shrink: 0; } [data-recently-viewed-wrapper][style*='display: none'] + .account-drawer-side__scroll-gradient { display: none; } /* END_SNIPPET:account-drawer-side */ /* START_SNIPPET:account-drawer (INDEX:251) */ .account-drawer { @media screen and (min-width: 750px) { display: none; } } .account-drawer__dialog { --animation-speed: 0.24s; --dialog-drawer-opening-animation: account-drawer-slide-in; --dialog-drawer-closing-animation: account-drawer-slide-out; height: fit-content; margin: 0; inset-block-end: 0; inset-block-start: auto; border-radius: 0; padding: 0; } .account-drawer__close-button { z-index: 1; inset-block-start: var(--padding-xs); inset-inline-end: var(--padding-xs); color: var(--color-foreground); background-color: transparent; } .account-drawer__close-button .svg-wrapper { display: flex; width: var(--button-size); height: var(--button-size); align-items: center; justify-content: center; } @keyframes account-drawer-slide-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes account-drawer-slide-out { from { transform: translateY(0); } to { transform: translateY(100%); } } /* END_SNIPPET:account-drawer */ /* START_SNIPPET:account-popover (INDEX:252) */ .account-popover { --account-popover-min-width: 22rem; --account-actions-max-width: 22rem; } .account-popover__summary { padding: 0; &:hover { color: var(--color-foreground); } } .account-popover__panel { --account-popover-opacity: 0; --account-popover-y: 20px; position-anchor: --account-button-trigger; border-radius: var(--style-border-radius-popover); margin: 0; left: unset; width: max-content; min-width: var(--account-popover-min-width); box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); overflow-y: hidden; opacity: var(--account-popover-opacity); translate: 0 var(--account-popover-y); transition-property: display, opacity, translate; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; top: calc(anchor(bottom) + var(--header-padding)); right: anchor(right); &:popover-open { --account-popover-opacity: 1; --account-popover-y: 0px; } @supports not (position-anchor: --account-button-trigger) { top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding)); right: calc(var(--anchor-right) * 1px); } @supports not selector(:popover-open) { &.\:popover-open { --account-popover-opacity: 1; --account-popover-y: 0px; } } } @starting-style { .account-popover__panel { --account-popover-opacity: 0.7; --account-popover-y: 20px; } .account-popover__panel:popover-open { --account-popover-opacity: 0.7; --account-popover-y: 20px; } } /* END_SNIPPET:account-popover */ /* START_SNIPPET:account-qr-modal (INDEX:253) */ .account-id-qr-modal { width: 390px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; border: none; border-radius: 8px; background-color: rgb(255, 255, 255); box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: auto; } .account-id-qr-modal:modal { position: fixed; inset: 0; width: fit-content; height: fit-content; margin: auto; } .account-id-qr-modal[open] { animation: account-qr-modal-in var(--animation-speed) var(--animation-easing) forwards; } .account-id-qr-modal.dialog-closing { animation: account-qr-modal-out var(--animation-speed) var(--animation-easing) forwards; } @keyframes account-qr-modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes account-qr-modal-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } } .account-id-qr-modal__inner { display: flex; flex-direction: column; gap: 32px; padding: 16px 12px; } @media screen and (max-width: 749px) { .account-id-qr-modal { height: fit-content; width: 100%; max-width: 100%; max-height: calc(100dvh - 48px); padding: 0; border-radius: 16px 16px 0 0; } .account-id-qr-modal:modal { inset: auto 0 0 0; margin: 0; width: 100%; } .account-id-qr-modal[open] { animation: account-qr-modal-slide-in var(--animation-speed) var(--animation-easing) forwards; } .account-id-qr-modal.dialog-closing { animation: account-qr-modal-slide-out var(--animation-speed) var(--animation-easing) forwards; } .account-id-qr-modal__inner { gap: 16px; } .account-id-qr-modal__body { gap: 12px; padding-bottom: 8px; } } @keyframes account-qr-modal-slide-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes account-qr-modal-slide-out { from { transform: translateY(0); } to { transform: translateY(100%); } } .account-id-qr-modal__header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .account-id-qr-modal__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 20px; line-height: 22px; color: rgb(36, 36, 32); } .account-id-qr-modal__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgb(36, 36, 32); background: transparent; border: none; cursor: pointer; padding: 0; margin: -10px -10px -10px 0; } .account-id-qr-modal__close .svg-wrapper { display: inline-flex; width: 24px; height: 24px; } .account-id-qr-modal__close svg { width: 24px; height: 24px; } .account-id-qr-modal__body { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 16px; } .account-id-qr-modal__customer-info { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; } .account-id-qr-modal__customer-name { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 24px; line-height: 26.4px; color: rgb(36, 36, 32); text-align: center; } .account-id-qr-modal__member-since { margin: 0; font-family: var(--font-paragraph--family); font-weight: 400; font-size: 12px; line-height: 18px; color: rgb(89, 89, 89); text-align: center; } .account-id-qr-modal__qr-code { width: 160px; height: 160px; flex-shrink: 0; } .account-id-qr-modal__qr-code img { width: 160px; height: 160px; display: block; } .account-id-qr-modal__id-info { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; } .account-id-qr-modal__customer-id { margin: 0; font-family: var(--font-paragraph--family); font-weight: 400; font-size: 12px; line-height: 18px; color: rgb(36, 36, 32); text-align: center; } .account-id-qr-modal__learn-more { margin: 0; font-family: var(--font-paragraph--family); font-weight: 400; font-size: 12px; line-height: 18px; color: rgb(36, 36, 32); text-align: center; } .account-id-qr-modal__learn-more-link { color: inherit; text-decoration: underline; } .account-id-qr-modal__wallet { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; } .account-id-qr-modal__wallet-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; width: 160px; height: 48px; align-items: center; justify-content: center; } .account-id-qr-modal__wallet-btn img { display: block; width: 160px; height: 48px; object-fit: contain; } /* END_SNIPPET:account-qr-modal */ /* START_SNIPPET:add-to-cart-button (INDEX:254) */ /* Loading spinner state */ .add-to-cart-button[data-loading='true'] { position: relative; pointer-events: none; } .add-to-cart-button[data-loading='true'] .add-to-cart-text { visibility: hidden; } .add-to-cart-button[data-loading='true'] .add-to-cart__added { display: none; } .add-to-cart-button[data-loading='true']::after { content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: add-to-cart-spin 0.6s linear infinite; } @media (prefers-reduced-motion: reduce) { .add-to-cart-button[data-loading='true']::after { animation-duration: 1.5s; } } @keyframes add-to-cart-spin { to { rotate: 360deg; } } .add-to-cart-button { --text-speed: 0.26; user-select: none; transition-property: color, box-shadow, background-color, scale, translate; transition-duration: var(--animation-speed); transition-timing-function: var(--ease-out-cubic); &:active { scale: 0.99; translate: 0 1px; } } .add-to-cart-text { --atc-opacity: 0; --atc-destination: -1em; display: flex; gap: var(--gap-2xs); align-items: center; justify-content: center; animation-duration: var(--animation-speed); animation-timing-function: var(--animation-easing); animation-fill-mode: forwards; transition: width var(--animation-speed) var(--animation-easing), opacity var(--animation-speed) var(--animation-easing); /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: circle(100% at 50% 50%); } .add-to-cart__added { --atc-opacity: 1; --atc-destination: 0px; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; align-items: center; justify-content: center; } /* “Added” copy: visually hidden until success (`data-added` set in product-form.js) */ .add-to-cart-button:not([data-added='true']) .add-to-cart-text--added { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .add-to-cart-button[data-added='true'] .add-to-cart-text--added { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; white-space: nowrap; font-weight: 700; line-height: 1.2; } [data-added='true'] .add-to-cart-text, [data-added='true'] .add-to-cart__added { animation-name: atc-slide; } .add-to-cart-button[data-added='true'] .add-to-cart-text { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: circle(0% at 50% 50%); filter: blur(2px); opacity: 0; translate: 0 4px; } @media (prefers-reduced-motion: no-preference) { .add-to-cart-text { transition-property: clip-path, opacity, filter, translate; transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s)); transition-timing-function: ease-out; } } @keyframes atc-slide { to { opacity: var(--atc-opacity, 1); translate: 0px var(--atc-destination, 0px); } } /* END_SNIPPET:add-to-cart-button */ /* START_SNIPPET:article-card (INDEX:255) */ .article-card { display: flex; flex-direction: column; position: relative; height: 100%; opacity: 0; animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards; } .article-card__link { position: absolute; inset: 0; z-index: 1; } .article-card__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .article-card__media { position: relative; aspect-ratio: 207 / 130; overflow: hidden; border-radius: var(--card-corner-radius, 0); background-color: rgb(var(--color-foreground-rgb) / 0.05); @media screen and (min-width: 750px) { aspect-ratio: 448 / 281; } } .article-card--lookbook .article-card__media { aspect-ratio: 414 / 553; @media screen and (min-width: 750px) { aspect-ratio: 676 / 903; } } .article-card--event .article-card__media { aspect-ratio: 382 / 503; @media screen and (min-width: 750px) { aspect-ratio: 414 / 553; } } .article-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--animation-speed-medium) var(--animation-timing-default); } .article-card:hover .article-card__image, .article-card:focus-within .article-card__image { transform: scale(1.02); } .article-card__image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--padding-md); background-color: rgb(var(--color-foreground-rgb) / 0.05); text-align: center; } .article-card__placeholder-text { font-family: var(--font-heading--family); font-size: var(--font-size--lg); line-height: var(--line-height--display-tight); color: rgb(var(--color-foreground-rgb) / 0.4); word-break: break-word; } .article-card__content { display: flex; flex-direction: column; padding-block-start: 16px; row-gap: 20px; } .blog-posts-container .article-card__content { @media screen and (max-width: 749px) { padding-inline: 12px; } } .article-card__content-inner { row-gap: 8px; display: flex; flex-direction: column; } .article-card__category { font-family: var(--font-body--family); color: var(--color-foreground-secondary); font-size: 11px; font-weight: 400; line-height: 150%; letter-spacing: 0.66px; text-transform: uppercase; } .article-card__title { margin: 0; font-family: var(--font-heading--family); color: var(--color-foreground); font-size: 20px; font-weight: 400; line-height: 110%; } .article-card__description { margin: 0; font-family: var(--font-body--family); color: var(--color-foreground); font-size: 14px; font-weight: 400; line-height: 150%; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .article-card__read-more { font-family: var(--font-body--family); font-size: 12px; font-weight: 400; line-height: 150%; } .article-card__event-details { display: flex; flex-direction: column; gap: 4px; } .article-card__date-time, .article-card__location { display: flex; align-items: center; gap: 6px; color: var(--color-foreground); } .article-card__location { text-decoration: underline; } /* END_SNIPPET:article-card */ /* START_SNIPPET:article-resource-image (INDEX:256) */ .resource-image { z-index: var(--layer-base); aspect-ratio: var(--ratio); } /* END_SNIPPET:article-resource-image */ /* START_SNIPPET:article-share (INDEX:257) */ .article-share { position: relative; display: inline-flex; justify-content: flex-end; } .article-share__disclosure { position: relative; text-align: right; width: 24px; height: 24px; } .article-share__summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 0 auto; padding: 0; color: var(--color-foreground); background: transparent; border: none; border-radius: 50%; } .article-share__summary::-webkit-details-marker { display: none; } .article-share__summary::marker { content: ''; } .article-share__summary:hover { opacity: 0.85; } .article-share__summary:focus { outline: none; } .article-share__summary:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; } .article-share__summary-icon { display: block; width: 1.5rem; height: 1.5rem; } .article-share__panel { position: absolute; z-index: 2; right: 0; top: calc(100% + 0.35rem); display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 14px 21px; background: #fff; border-radius: var(--Border-Border-Radius-border-radius-popover, 8px); border: 1px solid #ececec; box-shadow: 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.08), 0 3px 6px -1.5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.06), 0 24px 40px -12px rgba(0, 0, 0, 0.06), 0 32px 48px -12px rgba(0, 0, 0, 0.06), 0 -0.5px 1.5px 0 rgba(0, 0, 0, 0.09); } .article-share__link { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #242420; border-radius: 50%; text-decoration: none; } .article-share__link:focus { outline: none; } .article-share__link:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } .article-share__icon { display: block; width: 20px; height: auto; max-height: 21px; } @media (forced-colors: active) { .article-share__summary:focus-visible, .article-share__link:focus-visible { outline: 2px solid transparent; } } /* END_SNIPPET:article-share */ /* START_SNIPPET:background-media (INDEX:259) */ @media (prefers-reduced-motion: reduce) { video-background-component video { display: none; } } /* END_SNIPPET:background-media */ /* START_SNIPPET:background-video (INDEX:260) */ @media (prefers-reduced-motion: reduce) { video-background-component video { display: none; } } /* END_SNIPPET:background-video */ /* START_SNIPPET:bento-grid (INDEX:261) */ .bento-box { display: grid; column-gap: var(--bento-gap); row-gap: calc(var(--bento-gap) * 1.5); width: 100%; } .bento-box:has(.collection-card--image-bg) { row-gap: var(--bento-gap); } .bento-box ~ .bento-box { padding-block-start: var(--bento-gap); } @media (max-width: 900px) { .bento-box { grid-template-columns: repeat(2, 1fr); } .bento-box__item { /* Prevent grid items from overflowing their cells when children have aspect-ratio */ min-width: 0; overflow: hidden; } .bento-box__item:nth-child(3n + 1) { grid-column: span 1; } .bento-box__item:nth-child(3n + 2) { grid-column: span 1; } .bento-box__item:nth-child(3n + 3) { grid-column: span 2; } /* Ensure last items create a full row */ .bento-box__item:last-child:nth-child(3n + 5) { grid-column: span 1; } .bento-box__item:last-child:nth-child(3n + 4) { grid-column: span 2; } } @media (min-width: 901px) { .bento-box { grid-template-columns: repeat(12, 1fr); grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H I I I I I I' 'J J J J K K K K L L L L'; } .bento-box__item:nth-child(1) { grid-area: A; } .bento-box__item:nth-child(2) { grid-area: B; } .bento-box__item:nth-child(3) { grid-area: C; } .bento-box__item:nth-child(4) { grid-area: D; } .bento-box__item:nth-child(5) { grid-area: E; } .bento-box__item:nth-child(6) { grid-area: F; } .bento-box__item:nth-child(7) { grid-area: G; } .bento-box__item:nth-child(8) { grid-area: H; } .bento-box__item:nth-child(9) { grid-area: I; } .bento-box__item:nth-child(10) { grid-area: J; } .bento-box__item:nth-child(11) { grid-area: K; } .bento-box__item:nth-child(12) { grid-area: L; } /* === Overrides for specific item counts === */ /* Exactly 1 item */ .bento-box--items-1 { grid-template-areas: 'A A A A A A A A A A A A'; } /* Exactly 2 items */ .bento-box--items-2 { grid-template-areas: 'A A A A A A B B B B B B'; } /* Exactly 4 items */ .bento-box--items-4 { grid-template-areas: 'A A A A B B B B B B B B' 'C C C C C C C C D D D D'; } /* Exactly 5 items */ .bento-box--items-5 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E E E E'; } /* Exactly 7 items */ .bento-box--items-7 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D D D D E E E' 'F F F F F F G G G G G G'; } /* Exactly 8 items */ .bento-box--items-8 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H H H H H H H'; } /* Exactly 10 items */ .bento-box--items-10 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G G G G G G G H H H' 'I I I J J J J J J J J J'; } /* Exactly 11 items */ .bento-box--items-11 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H I I I I I I' 'J J J J K K K K K K K K'; } } /* END_SNIPPET:bento-grid */ /* START_SNIPPET:blog-comment-form (INDEX:262) */ .blog-post-comments__form-container { --comment-form-gap: var(--gap-md); width: 100%; max-width: var(--normal-content-width); margin: var(--margin-4xl) auto 0; } .blog-post-comments__form { display: grid; grid-template-columns: 1fr; gap: var(--comment-form-gap); @media screen and (min-width: 750px) { grid-template-columns: 1fr 1fr; } } .blog-post-comments__form-input { padding: var(--padding-lg) var(--padding-xl); border: var(--style-border-width-inputs) solid var(--color-input-border); } .blog-post-comments__form-input--textarea { resize: vertical; min-height: var(--input-textarea-min-height); } .blog-post-comments__form-message { display: flex; align-items: center; gap: var(--gap-xs); } .blog-post-comments__form-body { grid-column: 1 / -1; } .blog-post-comments__form-input:focus-visible { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } .blog-post-comments__form-moderated { font-size: var(--font-size--xs); } .blog-post-comments__form-submit { margin-block-start: var(--comment-form-gap); } /* END_SNIPPET:blog-comment-form */ /* START_SNIPPET:button (INDEX:264) */ .cta-buttons { display: flex; flex-wrap: wrap; gap: var(--cta-gap, 12px); align-items: center; } .cta-buttons--dual { width: fit-content; } .cta-buttons--dual-custom-width { width: 100%; } .link { color: var(--color-foreground); text-decoration: underline; text-decoration-color: currentcolor; text-underline-offset: 0.2em; text-decoration-thickness: 1px; &:hover { color: var(--color-primary-hover); text-decoration-color: currentcolor; } } /* END_SNIPPET:button */ /* START_SNIPPET:card-gallery (INDEX:265) */ .card-gallery { overflow: hidden; container-type: inline-size; /* Make card-gallery a container */ container-name: card-gallery-container; /* Optional: name the container */ } .card-gallery .product-media-container img { object-fit: cover !important; } /* First image as slideshow container background to prevent gap flash during infinite loop transition */ .card-gallery slideshow-component { position: relative; height: 100%; } .card-gallery slideshow-container, .card-gallery slideshow-container * { height: 100%; } .card-gallery slideshow-component::before { content: ''; position: absolute; inset: 0; background-image: var(--container-lqip-bg, none); background-size: cover; background-position: center center; z-index: 0; pointer-events: none; } .card-gallery slideshow-component > * { position: relative; z-index: 1; } .card-gallery__placeholder svg { height: 100%; width: 100%; } .card-gallery svg { aspect-ratio: var(--gallery-aspect-ratio, var(--ratio)); } .product-card-gallery__title-placeholder { padding: var(--padding-md); font-size: var(--font-size--2xl); line-height: var(--line-height--display-loose); word-break: break-word; color: var(--color-foreground); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); aspect-ratio: var(--gallery-aspect-ratio); border-radius: var(--product-corner-radius); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .product-card-gallery__title-placeholder a { color: var(--color-foreground); } @media screen and (max-width: 749px) { .product-card-gallery__title-placeholder { font-size: var(--font-size--xl); padding: var(--padding-md); aspect-ratio: var(--gallery-aspect-ratio-mobile, var(--gallery-aspect-ratio)); } } [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; } /* * Mobile gallery progress hint: only on product cards in the main collection / search grid * (#ResultsList from snippets/product-grid.liquid). Carousels, recommendations, etc. keep it off. */ @media screen and (max-width: 749px) { .card-gallery__progress { display: none; } #ResultsList .card-gallery:has(> .card-gallery__progress) { display: flex; flex-direction: column; } #ResultsList .card-gallery__progress { display: block; flex: 0 0 auto; flex-shrink: 0; order: 1; width: 100%; height: 2px; min-height: 2px; max-height: 2px; margin: 0; padding: 0; border: none; overflow: hidden; pointer-events: none; position: relative; z-index: 3; background-color: #e5e5e5; position: absolute; bottom: 0; left: 0; } #ResultsList .card-gallery__progress-fill { display: block; height: 100%; min-height: 2px; width: calc(var(--progress, 0) * 100%); background-color: rgb(var(--color-foreground-rgb)); transition: width 0.2s ease; } } @media screen and (min-width: 750px) { .card-gallery__progress { display: none; } } /* END_SNIPPET:card-gallery */ /* START_SNIPPET:carousel-control-arrows (INDEX:266) */ .article-carousel-title-bar__arrows .slideshow-control--large .svg-wrapper, .article-carousel-title-bar__arrows .slideshow-control--large .svg-wrapper svg { width: 32px; height: 32px; } /* END_SNIPPET:carousel-control-arrows */ /* START_SNIPPET:cart-discount (INDEX:269) */ .cart-discount__input { background-color: var(--color-input-background); color: var(--color-input-text); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); border-style: solid; border-radius: var(--style-border-radius-inputs); padding: var(--padding-sm) var(--padding-md); height: 100%; flex-grow: 1; min-width: 0; } .cart-discount__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); } .cart-discount__pill-code { overflow: hidden; max-width: 100px; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .cart-discount { width: 100%; } .cart-discount__codes { display: none; gap: var(--padding-xs); flex-wrap: wrap; list-style: none; padding-inline: 0; margin: 0; } .cart-discount__codes:has(.cart-discount__pill) { display: flex; } .cart-discount__button { height: 100%; } .cart-discount__content { height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm)); } .cart-discount__pill { display: flex; color: var(--color-foreground); gap: var(--padding-xs); align-items: center; padding: var(--padding-xs) var(--padding-sm); border-radius: var(--style-border-radius-pills); background-color: var(--color-input-background); text-transform: uppercase; } .cart-discount__form { display: flex; gap: var(--padding-md); align-items: center; height: 100%; padding-block: 0; } :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) { --close-icon-opacity: 0.4; color: var(--color-foreground); background-color: transparent; pointer-events: all; cursor: pointer; height: 100%; } .cart-discount__error { display: flex; align-items: center; width: 100%; padding-bottom: var(--padding-xs); } .cart-discount__error .svg-wrapper { flex-shrink: 0; width: var(--icon-size-xs); height: var(--icon-size-xs); margin-inline: var(--margin-3xs) var(--margin-xs); } .cart-discount__error-text { margin-block-start: var(--margin-3xs); } /* END_SNIPPET:cart-discount */ /* START_SNIPPET:cart-free-delivery (INDEX:271) */ .cart-free-delivery { width: 100%; display: flex; flex-direction: column; gap: 12px; } .cart-free-delivery__label { display: flex; align-items: center; gap: var(--gap-xs); } .cart-free-delivery__icon { flex-shrink: 0; width: 18px; height: 18px; } .cart-free-delivery__text { font-size: var(--font-size--sm); color: var(--color-foreground); line-height: 150%; } .cart-free-delivery__progress { width: 100%; height: 0.25rem; appearance: none; border: none; background-color: #e5e5e5; } .cart-free-delivery__progress::-webkit-progress-bar { background-color: #E5E5E5; } .cart-free-delivery__progress::-webkit-progress-value { background-color: var(--color-black, #111); transition: width 0.3s ease; } .cart-free-delivery__progress::-moz-progress-bar { background-color: var(--color-black, #111); transition: width 0.3s ease; } .cart-free-delivery__info-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: pointer; background: none; border: none; padding: 0; } /* END_SNIPPET:cart-free-delivery */ /* START_SNIPPET:cart-icon-component (INDEX:272) */ cart-icon:has(.cart-bubble__text-count:empty) { --cart-bubble-size: 10px; --cart-bubble-top: 9px; --cart-bubble-right: 9px; .svg-wrapper { --cart-bubble-top: 4px; --cart-bubble-right: 4px; } } /* END_SNIPPET:cart-icon-component */ /* START_SNIPPET:cart-info-modal (INDEX:273) */ /* Custom open/close animations — use transform/opacity only to preserve margin: auto centering */ @keyframes cart-info-modal-in { from { opacity: 0; transform: translateY(calc(-1 * var(--padding-sm))); } to { opacity: 1; transform: translateY(0); } } @keyframes cart-info-modal-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(calc(-1 * var(--padding-sm))); } } .cart-info-modal__dialog { padding: var(--padding-lg); width: 100%; margin: auto; } @media screen and (min-width: 750px) { .cart-info-modal__dialog { max-width: 480px; padding: var(--padding-xl); } } /* Override base .dialog-modal[open] / .dialog-closing animations from base.css */ .cart-info-modal__dialog[open] { animation: cart-info-modal-in var(--animation-speed) var(--animation-easing) forwards; } .cart-info-modal__dialog.dialog-closing { animation: cart-info-modal-out var(--animation-speed) var(--animation-easing) forwards; } .cart-info-modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-md); margin-block-end: var(--margin-md); } .cart-info-modal__title { font-family: var(--font-heading--family); font-size: var(--font-size--xl); font-weight: 400; line-height: 110%; margin: 0; } .cart-info-modal__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--minimum-touch-target); height: var(--minimum-touch-target); margin: calc(-1 * var(--padding-xs)) calc(-1 * var(--padding-xs)) 0 0; cursor: pointer; color: var(--color-foreground); background: none; border: none; } .cart-info-modal__close svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .cart-info-modal__body { font-size: var(--font-size--sm); line-height: 1.5; color: var(--color-foreground); } /* Override base .dialog-modal mobile full-screen rule; body-only scroll keeps header visible */ @media screen and (max-width: 749px) { .cart-info-modal__dialog { display: flex; flex-direction: column; height: fit-content; /* vh fallback first, dvh override last — supporting browsers use dvh (adapts to iOS dynamic toolbar); older WebKit falls back to vh. */ max-height: 90vh; max-height: 90dvh; width: calc(100% - 2 * var(--padding-lg)); max-width: 480px; overflow: hidden; border-radius: var(--style-border-radius-popover); } .cart-info-modal__dialog[open] { border-radius: var(--style-border-radius-popover); } .cart-info-modal__body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; } } /* END_SNIPPET:cart-info-modal */ /* START_SNIPPET:cart-message (INDEX:274) */ .cart-message { background-color: var(--cart-message-bg, #ececec); color: var(--cart-message-text-color, var(--color-foreground)); padding: var(--padding-xs) var(--padding-lg); text-align: center; font-family: var(--font-family, var(--font-body--family)); font-size: var(--font-size, 0.75rem); font-weight: var(--font-weight, 700); text-transform: var(--text-transform, none); letter-spacing: var(--letter-spacing, normal); line-height: 1.5; } .cart-message__text { margin: 0; } /* END_SNIPPET:cart-message */ /* START_SNIPPET:cart-products (INDEX:276) */ .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; opacity: var(--disabled-opacity); transition: opacity var(--animation-values); } .cart-items__table { width: 100%; border-spacing: 0; } .cart-page__items .cart-items__body { gap: var(--cart-items-gap); } .cart-items__body { display: flex; flex-direction: column; gap: var(--gap-xl); } .cart-items__table * { margin: 0; } .cart-items__table-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; column-gap: var(--gap-lg); align-items: stretch; grid-template-areas: 'media details' 'media quantity' 'media stock' 'media error'; } .cart-items__table-row--with-divider-padding { padding-bottom: var(--cart-items-gap); } .cart-items__table-row.cart-items__nested-line td:first-child { width: 60%; justify-self: right; } html:active-view-transition-type(page-navigation) .cart-items__table-row { /* stylelint-disable-next-line declaration-no-important */ view-transition-name: none !important; } .cart-items__table-row.removing { overflow: hidden; animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards; animation-delay: var(--animation-speed); } @keyframes removeRow { 0% { height: var(--row-height); } 100% { opacity: 0; height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; } } .cart-items__table-row:last-child { padding-bottom: 0; } .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid var(--color-border); } .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-child { border-block-end: none; padding-block-end: 0; margin-bottom: 0; } .cart-items__details { display: flex; flex-direction: column; gap: 6px; grid-area: details; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); } .cart-items__details * { font-size: var(--cart-font-size--md); } .cart-page__items .cart-items__details .cart-items__header * { font-size: var(--cart-font-size--lg); line-height: 110%; } .cart-items__details a, .cart-items__details .cart-items__title { text-decoration: none; } .cart-items__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; } .cart-items__info { flex: 1; min-width: 0; } .cart-items__title { display: block; line-height: 110%; font-size: var(--cart-font-size--md); font-family: var(--font-heading--family); color: var(--color-foreground); text-transform: var(--product-title-case); } .cart-items__price-inline { flex-shrink: 0; text-align: right; color: var(--color-foreground-secondary); } .cart-items__price-wrapper { display: flex; flex-direction: column; align-items: flex-end; } .cart-items__line-price { display: block; line-height: 130%; font-size: var(--font-size--sm); } .cart-items__line-price--sale { color: var(--color-state-negative, #FF3230); } .cart-items__compare-price { color: var(--color-foreground-secondary, #595959); text-decoration: line-through; opacity: var(--opacity-60); line-height: 130%; font-size: var(--font-size--sm); } .cart-items__variant { display: inline-block; font-family: var(--font-body--family); font-size: var(--font-size--2xs); color: var(--color-foreground-secondary); border-right: 1px solid #ECECEC; padding-right: var(--margin-xs); margin-right: var(--padding-xs); line-height: 150%; font-size: var(--font-size--2xs); } .cart-page__items .cart-items__variant, .cart-page__items .cart-items__size-button span { font-size: calc(var(--margin-lg) - var(--margin-3xs)); } .cart-drawer__items .cart-items__size-button span { font-size: var(--font-size--2xs); } .cart-items__variant:last-child { border-right: none; margin-right: 0; } .cart-items__variant--size:last-child { border-right: none; margin-right: 0; } .cart-items__variant--size { position: relative; user-select: none; } .cart-items__variants { line-height: 1; } .cart-items__size-button { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; color: var(--color-foreground-secondary); cursor: pointer; transition: color 0.2s ease; line-height: 150%; font-family: var(--font-body--family); } .cart-items__size-text { display: inline-flex; align-items: center; gap: 8px; } .cart-items__size-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; opacity: 0.5; transition: transform 0.2s ease-in-out, opacity 0.2s ease; } .cart-items__size-button:hover { color: var(--color-foreground); } .cart-items__size-button:hover .cart-items__size-icon, .cart-items__size-button[aria-expanded="true"] .cart-items__size-icon { opacity: 1; } .cart-items__size-button[aria-expanded="true"] .cart-items__size-icon { transform: rotate(180deg); } .cart-items__size-button:hover .cart-items__size-icon { transform: translateY(1px); } .cart-items__size-button[aria-expanded="true"]:hover .cart-items__size-icon { transform: rotate(180deg) translateY(-1px); } .cart-items__size-dropdown { position: absolute; top: 100%; left: 0; margin-top: 0.25rem; padding: 0.25rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 0.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); list-style: none; z-index: 10; min-width: 4rem; overflow-y: auto; } .cart-items__size-dropdown[hidden] { display: none; } .cart-items__size-dropdown [aria-selected="true"], .cart-items__size-dropdown li:hover { background-color: var(--color-white); } .cart-items__size-option { display: block; width: 100%; padding: 0.375rem 0.5rem; background: none; border: none; font-family: inherit; font-size: var(--font-size--2xs); color: var(--color-foreground); cursor: pointer; text-align: left; transition: background-color 0.2s ease; border-radius: 0.125rem; } .cart-items__size-option:hover { background-color: var(--color-background-secondary); } .cart-items__size-option--selected { font-weight: var(--font-weight-semibold); background-color: rgba(var(--color-foreground-rgb), 0.05); } .cart-items__quantity { display: flex; align-items: baseline; flex-direction: column; justify-content: flex-start; gap: var(--gap-xs); width: 100%; grid-area: quantity; @media screen and (min-width: 954px) { justify-content: space-between; flex-direction: row; } } .cart-drawer__items .cart-items__quantity { flex-direction: row; align-items: center; gap: var(--gap-lg); @media screen and (max-width: 396px) { gap: 6px; } } .cart-drawer__items .cart-items__quantity-controls { height: auto; } .cart-drawer__items .cart-items__action-controls { order: 1; margin-inline-start: auto; } .cart-items__quantity-controls { display: flex; justify-content: flex-start; gap: var(--gap-xs); width: fit-content; height: 100%; align-items: end; } .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(--cart-font-size--sm); height: auto; } .cart-drawer__items .cart-items__quantity .quantity-selector { height: 32px; align-items: center; overflow: visible; } .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-unit { font-size: var(--cart-font-size--xs); } .cart-items__actions { display: flex; gap: var(--gap-lg); flex-wrap: wrap; @media screen and (max-width: 396px) { gap: 6px; } } .cart-items__action-link { font-size: var(--font-size--2xs); text-decoration: underline; color: var(--color-foreground-secondary); background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; min-height: var(--minimum-touch-target); display: inline-flex; align-items: center; } .cart-items__action-link[disabled] { opacity: 0.45; cursor: default; } .cart-items__media-container { display: flex; aspect-ratio: var(--ratio); position: relative; width: 6rem; height: 7.75rem; overflow: hidden; } .cart-items__media-image { aspect-ratio: inherit; object-fit: cover; object-position: center center; width: 100%; height: auto; } .cart-items__empty-button { margin-top: var(--margin-md); padding-inline: var(--padding-4xl); padding-block: var(--padding-lg); } /* Stock status row */ .cart-items__stock-row { grid-area: stock; } .cart-items__stock-row.hidden { display: none; } /* 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-items__error.hidden { display: none; } .cart-item__error { display: flex; align-items: flex-start; width: 100%; font-size: 11px; line-height: 150%; padding-block: var(--padding-2xs); color: var(--color-foreground-secondary); gap: 4px; } .cart-item__error .svg-wrapper { flex-shrink: 0; width: 14px; height: 14px; margin-inline: 1px; margin-block-start: var(--margin-3xs); } .cart__original-total-container, .cart__total-container { display: flex; flex-direction: column; } .cart__original-total-container:empty { display: none; } .cart__summary-totals { display: flex; flex-direction: column; gap: var(--gap-lg); width: 100%; border-block-start: none; &:has(> :first-child:not(.cart__original-total-container, .cart__total-container)) { padding-block-start: 0; border-block-start: none; } @media screen and (min-width: 750px) { padding-block-start: 0; } } .cart__original-total-container, .cart__original-total-container * { font-size: var(--cart-font-size--sm); line-height: 150%; } .cart__total { font-weight: var(--font-weight-bold); } .cart-primary-typography { font-family: var(--cart-primary-font-family); font-style: var(--cart-primary-font-style); font-weight: var(--cart-primary-font-weight); } .cart-secondary-typography { font-family: var(--cart-secondary-font-family); font-style: var(--cart-secondary-font-style); font-weight: var(--cart-secondary-font-weight); } .cart__ctas { width: 100%; display: grid; gap: var(--checkout-button-gap); grid-auto-flow: row; grid-template-columns: 1fr; } .cart__additional-checkout-buttons { width: 100%; } .cart__ctas .cart__checkout-button { width: 100%; height: 48px; padding-inline: 14px; font-weight: 700; } shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-inline-alignment: center; --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary); --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px); } .cart-note { width: 100%; } @starting-style { .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content { block-size: auto; opacity: 1; overflow-y: visible; } } .cart-note__inner { padding-block: var(--padding-2xs) var(--padding-sm); } .cart-note__summary { display: flex; align-items: center; justify-content: space-between; } .cart-note__summary:hover { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .cart-note__label { display: flex; align-items: flex-start; gap: var(--gap-2xs); font-size: var(--cart-font-size--2xs); font-weight: 500; } .cart-note__instructions { color: var(--color-input-text); background-color: var(--color-input-background); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); transition: box-shadow var(--animation-speed) ease; box-shadow: var(--input-box-shadow); min-height: 5.5rem; min-width: 100%; max-width: 100%; font-size: var(--cart-font-size--sm); padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg)))); } .cart-note .svg-wrapper { height: var(--icon-size-sm); width: var(--icon-size-sm); margin: 0; } .cart-note .icon-plus { height: var(--icon-size-xs); width: var(--icon-size-xs); } /* Remove animation — scoped to .cart-items__remove */ .cart-items__remove .remove-icon-bottom, .cart-items__remove .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__properties dt, .cart-items__properties dd { display: inline; } .quantity-selector { --quantity-selector-width: 100px; } @media screen and (max-width: 749px) { .cart-items__quantity-controls .quantity-selector { flex: 0 0 var(--quantity-selector-width); max-width: var(--quantity-selector-width); } } /* Stock status indicator */ .cart-items__stock-status { display: flex; align-items: center; gap: var(--gap-2xs); margin: 14px 0 8px; } /* Out-of-stock: fade media and detail elements individually so that the stock indicator, action controls, and size dropdown remain fully visible. Opacity is NOT applied to the to avoid a compositing group that would prevent descendants from exceeding the parent's opacity level. */ .cart-items__table-row--out-of-stock .cart-items__media { opacity: var(--opacity-50); } .cart-items__table-row--out-of-stock .cart-items__header { opacity: var(--opacity-50); } .cart-items__table-row--out-of-stock .cart-items__bundle { opacity: var(--opacity-50); } /* Fades non-size variant labels (colour etc.) but exempts the size dropdown component, which is a direct child of
. */ .cart-items__table-row--out-of-stock .cart-items__variants > *:not(cart-variant-selector-component) { opacity: var(--opacity-50); } /* Fades the discount allocations