scale-announcement-bar {
display: block;
background-color: rgb(var(--color-background));
color: rgb(var(--color-foreground));
}
.announcement-bar {
position: relative;
padding-block: var(--padding-v);
font-size: var(--text-size);
line-height: 1.4;
text-align: center;
overflow: hidden;
}
.announcement-bar--border {
border-block-end: 1px solid rgba(var(--color-border), 0.3);
}
.announcement-bar--dismissed {
display: none;
}
/* Static */
.announcement-bar__static {
display: flex;
justify-content: center;
padding-inline: var(--space-4);
}
/* Slider */
.announcement-bar__slider {
position: relative;
display: flex;
align-items: center;
padding-inline: var(--space-8);
}
.announcement-bar__slides {
position: relative;
width: 100%;
}
.announcement-bar__slides > * {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.announcement-bar__slides > :first-child {
position: relative;
visibility: visible;
}
.announcement-bar__slides > .is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.announcement-bar__nav {
display: flex;
gap: var(--space-1);
}
.announcement-bar__arrow {
display: flex;
align-items: center;
justify-content: center;
inline-size: 24px;
block-size: 24px;
flex: 0 0 24px;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.announcement-bar__arrow:hover,
.announcement-bar__arrow:focus-visible { opacity: 1; }
/* Marquee */
.announcement-bar__marquee {
overflow: hidden;
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.announcement-bar__marquee-track {
display: flex;
width: max-content;
animation: marquee var(--marquee-duration, 30s) linear infinite;
}
.announcement-bar__marquee-group {
display: flex;
align-items: center;
gap: var(--space-8);
padding-inline-end: var(--space-8);
flex-shrink: 0;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(var(--marquee-offset, -50%)); }
}
[data-pause-on-hover]:hover .announcement-bar__marquee-track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.announcement-bar__marquee-track {
animation: none;
}
}
/* Close button */
.announcement-bar__close {
position: absolute;
inset-inline-end: var(--space-2);
inset-block-start: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-1);
opacity: 0.6;
transition: opacity 0.2s ease;
}
.announcement-bar__close:hover { opacity: 1; }
/* ═══ BANNER BASE ═══ */
/* clip, not hidden: a hidden box is a scroll container, and a scroll
container with an aspect-ratio (adapt, mobile ratio) keeps its ratio height
and cuts the copy that does not fit, call to action included. A clipped
box still trims the media and the rounded corners but grows with its copy. */
.banner {
position: relative;
overflow: clip;
width: 100%;
}
.banner__img,
.banner__video,
.banner__placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
/* An outside video plays over the banner image, which shows until the first frame arrives,
and stays when reduced motion hides the video. */
.banner__media > :is(picture, .banner__img) + .banner__video {
position: absolute;
inset: 0;
}
.banner__placeholder {
background: rgba(var(--color-foreground), 0.04);
}
.banner__link {
position: absolute;
inset: 0;
z-index: 4;
text-decoration: none;
}
/* ═══ ROUNDED HERO ═══ */
/* Overlay only. The .container wrapper supplies the side margin (full-padded);
the radius clips the absolute media to the corners via the base overflow. */
.banner--rounded {
border-radius: var(--banner-radius);
}
/* ═══ MEDIA THAT OPENS WITH THE SCROLL ═══ */
/* The photo starts as a rounded card and opens to the edges of the hero as the page is
scrolled. It is tied to the scroll itself, so nothing runs while nothing moves. With
reduced motion, or without a view timeline (Firefox today), the photo is simply whole. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.banner--expand-media > .banner__media {
border-radius: var(--banner-radius);
overflow: clip;
animation: banner-expand-media linear both;
animation-timeline: view();
animation-range: entry 10% cover 50%;
}
@keyframes banner-expand-media {
from { scale: 0.8; }
to { scale: 1; border-radius: 0; }
}
}
}
/* ═══ OVERLAY MODE ═══ */
.banner:not(.banner--split) > .banner__media {
position: absolute;
inset: 0;
z-index: 0;
}
.banner__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
z-index: 1;
}
.banner:not(.banner--split) > .banner__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-height: var(--banner-min-h);
gap: var(--banner-gap, var(--space-4));
padding-block: var(--banner-pad-v);
padding-block-start: calc(var(--banner-pad-v) + var(--immersive-header-clearance, 0px));
padding-inline: var(--banner-pad-h);
justify-content: var(--banner-pos-v);
align-items: var(--banner-pos-h);
text-align: var(--banner-text-align);
}
@media (width < 750px) {
.banner:not(.banner--split) > .banner__content {
justify-content: var(--banner-pos-v-m);
align-items: var(--banner-pos-h-m);
}
.banner--adapt:not(.banner--split):not(.banner--mobile-stacked) {
aspect-ratio: var(--banner-aspect-m, var(--banner-aspect));
min-height: auto;
}
.banner--adapt:not(.banner--split):not(.banner--mobile-stacked) > .banner__content {
min-height: 0;
}
.banner--mobile-ratio:not(.banner--split):not(.banner--mobile-stacked) {
aspect-ratio: var(--banner-aspect-m);
min-height: auto;
}
.banner--mobile-ratio:not(.banner--split):not(.banner--mobile-stacked) > .banner__content {
min-height: 0;
}
}
@media (width >= 750px) {
.banner--adapt:not(.banner--split) {
aspect-ratio: var(--banner-aspect);
}
.banner--adapt:not(.banner--split) > .banner__content {
min-height: 0;
}
}
@media (width >= 750px) {
.banner__content--narrow > * { max-width: 32rem; }
.banner__content--normal > * { max-width: 48rem; }
}
.banner:not(.banner--split) > .banner__content :is(a, button, input, textarea, select) {
position: relative;
z-index: 3;
}
/* ═══ MOBILE STACKED (overlay) ═══ */
/* Below 750px: image flows on top at its natural ratio, content sits below.
Specificity beats .banner:not(.banner--split) overlay rules (absolute media +
min-height content) so stacked is not treated as overlay on mobile. */
@media (width < 750px) {
.banner.banner--mobile-stacked:not(.banner--split) {
display: flex;
flex-direction: column;
min-height: 0;
}
.banner.banner--mobile-stacked:not(.banner--split) > .banner__media {
position: relative;
inset: auto;
height: auto;
z-index: auto;
aspect-ratio: var(--banner-stack-aspect, 4 / 3);
width: 100%;
}
.banner.banner--mobile-stacked:not(.banner--split) > .banner__media > picture {
display: block;
height: 100%;
}
.banner.banner--mobile-stacked:not(.banner--split) > .banner__content {
position: relative;
z-index: auto;
min-height: 0;
justify-content: flex-start;
align-items: stretch;
padding-block: var(--space-6);
padding-inline: var(--space-4);
}
/* In the rounded-hero gutter the image is a card: the copy takes its width. */
.container--full-padded .banner.banner--mobile-stacked:not(.banner--split) > .banner__content {
padding-inline: 0;
}
.banner.banner--mobile-stacked:not(.banner--split) .banner__overlay {
display: none;
}
/* Beats inline color_override on hero copy when stacked mobile drops the overlay */
.banner.banner--mobile-stacked:not(.banner--split) > .banner__content .block-text {
--text-color-override: rgb(var(--color-foreground));
color: rgb(var(--color-foreground));
}
.banner.banner--mobile-stacked:not(.banner--split) > .banner__content .block-jumbo:not(.block-jumbo--gradient) {
color: rgb(var(--color-foreground));
}
}
/* ═══ SPLIT MODE ═══ */
.banner--split {
display: grid;
grid-template-columns: var(--banner-img-width) minmax(0, 1fr);
}
.banner--split:not(.banner--split-bleed) {
gap: var(--banner-split-gap);
}
.banner--split > .banner__media {
position: relative;
grid-column: 1;
grid-row: 1;
overflow: hidden;
min-height: var(--banner-min-h);
}
.banner--split:not(.banner--split-bleed) > .banner__media {
border-radius: var(--banner-radius, var(--radius-media));
}
.banner--split.banner--adapt > .banner__media {
width: 100%;
aspect-ratio: var(--banner-aspect);
align-self: stretch;
min-height: 0;
}
.banner--split > .banner__content {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: var(--banner-content-valign);
gap: var(--banner-gap, var(--space-4));
padding-block: var(--banner-pad-v);
padding-inline: var(--banner-pad-h);
min-width: 0;
}
/* Image right — :where() keeps specificity 0 so mobile override wins */
.banner--split:where(.banner--img-right) {
grid-template-columns: minmax(0, 1fr) var(--banner-img-width);
}
.banner--split:where(.banner--img-right) > .banner__media { grid-column: 2; }
.banner--split:where(.banner--img-right) > .banner__content { grid-column: 1; }
/* Bleed: content aligns with page container */
@media (width >= 750px) {
.banner--split-bleed.banner--img-left > .banner__content {
padding-inline: var(--banner-split-gap) var(--banner-content-inset);
}
.banner--split-bleed.banner--img-right > .banner__content {
padding-inline: var(--banner-content-inset) var(--banner-split-gap);
}
}
/* Mobile: stack vertically */
@media (width < 750px) {
.banner--split {
grid-template-columns: 1fr;
}
.banner--split > .banner__media {
grid-column: 1;
grid-row: 1;
min-height: 0;
height: var(--banner-min-h);
}
.banner--split.banner--adapt > .banner__media,
.banner--split.banner--mobile-ratio > .banner__media {
height: auto;
aspect-ratio: var(--banner-aspect-m, var(--banner-aspect, 4 / 3));
}
.banner--split > .banner__content {
grid-column: 1;
grid-row: 2;
}
/* Stacked, the image card sits in the page container: the column gap would only
push the copy down, and the copy takes the card's width. */
.banner--split:not(.banner--split-bleed) {
gap: 0;
}
.banner--split:not(.banner--split-bleed) > .banner__content {
padding-inline: 0;
}
}
/* ═══ CAROUSEL ═══ */
/* A single panel: the slider and its track step out of the layout. */
.banner-carousel:not(:has(> .banner-carousel__track > .banner + .banner)),
.banner-carousel:not(:has(> .banner-carousel__track > .banner + .banner)) > .banner-carousel__track {
display: contents;
}
/* Every slide is a full banner panel; the track shows one at a time. */
.banner-carousel .banner-carousel__track {
gap: 0;
}
.banner-carousel .banner-carousel__track > .banner {
flex: 0 0 100%;
}
/* A contained split is a page-width container. In a track every panel must
fill the slide, so the carousel takes the container's width and the panels
keep only its gutter. Both halves of that move need a second panel: alone,
a banner keeps its own container, since nothing above it holds the width. */
.banner-carousel:has(.banner + .banner.container) {
max-width: var(--page-width);
margin-inline: auto;
}
.banner-carousel:has(.banner + .banner.container--narrow) {
max-width: var(--page-width-narrow);
}
.banner-carousel:has(.banner + .banner.container--full) {
max-width: 100%;
}
.banner-carousel:has(.banner + .banner) .banner-carousel__track > .banner.container {
max-width: none;
margin-inline: 0;
}
.banner-carousel .banner-carousel__nav {
inset-inline: var(--space-4);
}
.banner-carousel .banner-carousel__arrow {
width: 44px;
height: 44px;
background: rgba(var(--color-background), 0.8);
backdrop-filter: blur(4px);
border: none;
box-shadow: none;
}
.banner-carousel .banner-carousel__arrow:hover,
.banner-carousel .banner-carousel__arrow[disabled] {
transform: none;
}
/* Overlay: arrows and dots sit on the image, the dots on a pill that keeps
them legible over any photo. */
.banner-carousel__controls {
display: contents;
}
.banner-carousel .banner-carousel__pagination {
position: absolute;
inset-block-end: var(--space-4);
inset-inline-start: 50%;
z-index: 5;
margin: 0;
padding-inline: var(--space-2);
border-radius: 999px;
background: rgba(var(--color-background), 0.8);
backdrop-filter: blur(4px);
transform: translateX(-50%);
}
/* Split, and the stacked mobile overlay: the copy fills the panel, so the
controls leave it for one row under the carousel — arrow, dots, arrow. */
.banner-carousel:has(.banner + .banner--split) .banner-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-block-start: var(--space-4);
}
.banner-carousel:has(.banner + .banner--split) :is(.banner-carousel__nav, .banner-carousel__pagination) {
position: static;
inset: auto;
transform: none;
background: none;
backdrop-filter: none;
}
.banner-carousel:has(.banner + .banner--split) .banner-carousel__nav:not([hidden]) {
display: contents;
}
.banner-carousel:has(.banner + .banner--split) .banner-carousel__arrow--prev { order: -1; }
.banner-carousel:has(.banner + .banner--split) .banner-carousel__arrow--next { order: 1; }
.banner-carousel:has(.banner + .banner--split) .banner-carousel__arrow {
background: rgba(var(--color-foreground), 0.06);
}
@media (width < 750px) {
/* Every slide takes the tallest one's height. A stacked split keeps its
rows at their own size, as the stacked overlay does: the image keeps its
ratio and the copy starts under it on every slide, the slack goes below. */
.banner-carousel__track > .banner--split {
align-content: start;
}
.banner-carousel:has(.banner + .banner--mobile-stacked) .banner-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-block-start: var(--space-4);
}
.banner-carousel:has(.banner + .banner--mobile-stacked) .banner-carousel__pagination {
position: static;
transform: none;
background: none;
backdrop-filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.banner-carousel .banner-carousel__track {
scroll-behavior: auto;
}
}
/* ═══ SHARED ═══ */
@media (prefers-reduced-motion: reduce) {
.banner__video { display: none; }
}
.banner[data-visual-preview-mode] .banner__content {
min-height: 400px;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(var(--bento-cols), 1fr);
grid-auto-rows: var(--bento-row-h);
grid-auto-flow: dense;
gap: var(--bento-gap);
}
@media (width >= 750px) {
.bento-grid {
grid-template-columns: repeat(var(--bento-cols-d), 1fr);
grid-auto-rows: var(--bento-row-h-d);
gap: var(--bento-gap-d);
}
}
.breadcrumb {
padding-block: var(--space-3);
}
.breadcrumb__list {
display: flex;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
font-size: 0.8125rem;
line-height: 1.4;
color: rgb(var(--color-foreground-secondary));
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.breadcrumb__list::-webkit-scrollbar {
display: none;
}
.breadcrumb--center .breadcrumb__list {
justify-content: center;
}
.breadcrumb--right .breadcrumb__list {
justify-content: flex-end;
}
.breadcrumb__item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.breadcrumb__item + .breadcrumb__item::before {
flex-shrink: 0;
color: rgb(var(--color-foreground-secondary));
opacity: 0.6;
}
.breadcrumb--sep-chevron .breadcrumb__item + .breadcrumb__item::before {
content: "›";
}
.breadcrumb--sep-slash .breadcrumb__item + .breadcrumb__item::before {
content: "/";
}
.breadcrumb--sep-dot .breadcrumb__item + .breadcrumb__item::before {
content: "·";
}
.breadcrumb--sep-arrow .breadcrumb__item + .breadcrumb__item::before {
content: "→";
}
.breadcrumb__link {
color: inherit;
text-decoration: none;
transition: color var(--duration-fast);
}
.breadcrumb__link:hover {
color: rgb(var(--color-foreground));
text-decoration: underline;
}
.breadcrumb__item--current {
color: rgb(var(--color-foreground));
}
s-view-event {
display: contents;
}
/* Totals, line prices and quantities change in place: fixed-width digits keep them still. */
scale-cart-page,
.cart-drawer__dialog {
font-variant-numeric: tabular-nums;
}
/* An amount that changes rolls to its new value (rollText stacks the old and new text). */
.cart-roll {
display: inline-grid;
transition: opacity var(--duration-normal) var(--ease-out);
}
.cart-roll > * {
grid-area: 1 / 1;
}
/* An estimate waiting for Shopify is muted, with a sheen running over it, in its own color (a button's too). */
.cart-roll.is-pending {
opacity: 0.6;
}
@keyframes cart-roll-pending {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: no-preference) {
.cart-roll.is-pending > * {
-webkit-text-fill-color: transparent;
background: linear-gradient(100deg, currentColor 40%, color-mix(in srgb, currentColor 25%, transparent) 50%, currentColor 60%) 0 0 / 300% 100%;
-webkit-background-clip: text;
background-clip: text;
animation: cart-roll-pending calc(var(--duration-slow) * 2) linear infinite;
}
}
/* A block that comes and goes with savings (a line discount, the total saved) opens and folds its height. */
.cart-fold {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows var(--duration-slow) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}
.cart-fold.is-open {
grid-template-rows: 1fr;
opacity: 1;
}
/* Clipped along the fold only, so a highlighted discount keeps its sides. */
.cart-fold > * {
min-block-size: 0;
overflow: visible clip;
}
/* A discount that has just started to apply, on a line or on the order, is lit up once as it opens. */
@keyframes cart-deal {
from { background-color: rgba(var(--color-accent-2), 0.2); }
}
@media (prefers-reduced-motion: no-preference) {
.cart-fold.is-new :is(.cart-item__discount, .cart-drawer__discount, .cart-page__discount) {
animation: cart-deal calc(var(--duration-slow) * 3) var(--ease-out) var(--duration-fast) backwards;
}
}
@media (prefers-reduced-motion: reduce) {
.cart-fold {
transition: opacity var(--duration-normal) var(--ease-out);
}
}
/* ═══ DRAWER STYLES ═══ */
.cart-drawer__dialog {
position: fixed;
inset: 0;
inset-inline-start: auto;
width: min(var(--drawer-width, 490px), 90vw);
height: 100%;
max-height: 100dvh;
margin: var(--drawer-margin, 0);
padding: 0;
border: none;
border-radius: var(--drawer-radius, 0);
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
z-index: var(--z-drawer);
overflow: hidden;
touch-action: pan-y;
}
.cart-drawer__dialog--floating {
height: calc(100% - 24px);
box-shadow: var(--shadow-drawer);
}
.cart-drawer__dialog--rounded {
box-shadow: var(--shadow-drawer);
}
.cart-drawer__inner {
display: flex;
flex-direction: column;
height: 100%;
}
.cart-drawer__header {
flex-shrink: 0;
padding: var(--space-4);
border-block-end: 1px solid rgba(var(--color-border), 0.15);
}
.cart-drawer__header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.cart-drawer__title {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.cart-drawer__count {
font-weight: 400;
color: rgb(var(--color-foreground-secondary));
}
.cart-drawer__close {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-2);
}
.cart-drawer__body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
}
.cart-drawer__items {
padding: var(--space-4);
}
.cart-drawer__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-8);
gap: var(--space-4);
min-height: 300px;
}
/* Empty cart, drawer and page: a soft icon, the title, the empty zone (best sellers by default), then the way back. */
.cart-empty__icon {
display: grid;
place-items: center;
inline-size: 3.5rem;
block-size: 3.5rem;
border-radius: var(--radius-full);
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.cart-empty__title {
font-size: 1.125rem;
font-weight: 600;
}
.cart-empty .cart-zone--empty {
align-self: stretch;
}
.cart-drawer__footer {
flex-shrink: 0;
padding: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.15);
}
.cart-drawer__discounts {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-end: var(--space-3);
}
.cart-drawer__discount {
display: flex;
align-items: center;
gap: var(--space-2);
padding-inline: var(--space-1);
margin-inline: calc(-1 * var(--space-1));
border-radius: var(--radius-xs);
font-size: 0.8125rem;
color: rgb(var(--color-accent-2));
}
.cart-drawer__discount-amount {
margin-inline-start: auto;
}
.cart-drawer__savings {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
color: rgb(var(--color-accent-2));
font-weight: 500;
padding-block-end: var(--space-2);
}
.cart-drawer__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-block: var(--space-3);
font-size: 1rem;
font-weight: 600;
}
.cart-drawer__tax-note {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
text-align: center;
margin: 0 0 var(--space-3);
}
.cart-drawer__checkout {
padding-block-end: var(--space-3);
}
.cart-drawer__checkout-btn {
width: 100%;
}
@media (width < 750px) {
.cart-drawer__dialog {
width: 90vw;
}
}
/* ═══ PAGE STYLES ═══ */
.cart-page__header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-block-end: var(--space-6);
}
.cart-page__title {
margin: 0;
}
.cart-page__count {
font-weight: 400;
color: rgb(var(--color-foreground-secondary));
}
.cart-page__continue-link {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
text-decoration: underline;
text-underline-offset: 3px;
}
.cart-page__continue-link:hover {
color: rgb(var(--color-foreground));
}
.cart-page__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (width >= 750px) {
.cart-page__grid {
grid-template-columns: 1fr 380px;
grid-template-areas:
'items summary'
'body summary';
gap: var(--space-8);
align-items: start;
}
.cart-page__items { grid-area: items; }
.cart-page__summary { grid-area: summary; align-self: start; }
.cart-page__grid > .cart-zone--body { grid-area: body; }
}
.cart-page__summary-inner {
position: sticky;
inset-block-start: calc(var(--header-height, 80px) + var(--space-4));
padding: var(--space-5);
border: 1px solid rgba(var(--color-border), 0.15);
border-radius: var(--radius-card);
}
.cart-page__discounts {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-end: var(--space-3);
}
.cart-page__discount {
display: flex;
align-items: center;
gap: var(--space-2);
padding-inline: var(--space-1);
margin-inline: calc(-1 * var(--space-1));
border-radius: var(--radius-xs);
font-size: 0.8125rem;
color: rgb(var(--color-accent-2));
}
.cart-page__discount-amount {
margin-inline-start: auto;
}
.cart-page__savings {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
color: rgb(var(--color-accent-2));
font-weight: 500;
padding-block-end: var(--space-2);
}
.cart-page__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-block: var(--space-3);
font-size: 1.125rem;
font-weight: 600;
border-block-start: 1px solid rgba(var(--color-border), 0.15);
}
.cart-page__tax-note {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
text-align: center;
margin: 0 0 var(--space-3);
}
.cart-page__checkout {
padding-block-end: var(--space-3);
}
.cart-page__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-10) 0;
gap: var(--space-4);
}
.cart-page__empty .cart-zone--empty {
align-self: center;
inline-size: min(100%, 28rem);
}
scale-category-showcase {
display: block;
}
.showcase__heading {
margin-block-end: var(--space-6);
}
.showcase__nav {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
border-block-end: 1px solid rgba(var(--color-border), 0.2);
margin-block-end: var(--space-6);
}
.showcase__nav::-webkit-scrollbar {
display: none;
}
.showcase__tab {
flex-shrink: 0;
padding: var(--space-3) var(--space-4);
border: none;
background: none;
font-size: 0.9375rem;
font-weight: 500;
color: rgb(var(--color-foreground-secondary));
cursor: pointer;
border-block-end: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.showcase__tab[aria-selected="true"] {
color: rgb(var(--color-foreground));
border-block-end-color: rgb(var(--color-accent-1));
}
.showcase__tab:hover {
color: rgb(var(--color-foreground));
}
.showcase__tab:focus-visible {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: -2px;
}
/* ==========================================================
LAYOUT — heading position (top or side)
========================================================== */
.ct-layout {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.ct-layout--side {
gap: var(--space-6);
}
@media (width >= 750px) {
.ct-layout--side {
flex-direction: row;
align-items: start;
gap: var(--space-10);
}
.ct-layout--side .ct-heading {
flex: 0 0 35%;
position: sticky;
top: var(--space-6);
}
.ct-layout--side .ct-wrapper {
flex: 1;
min-width: 0;
}
}
/* ==========================================================
BASE — structure commune à tous les styles
========================================================== */
.ct-wrapper {
display: block;
}
.ct {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.ct-cell {
word-break: break-word;
overflow-wrap: break-word;
transition: background-color var(--duration-fast) var(--ease-out);
}
/* Optional border modifiers (combinable with any style) */
.ct--borders-rows .ct-row + .ct-row:not(.ct-row--header) .ct-cell {
border-block-start: 1px solid rgba(var(--color-border), 0.12);
}
.ct--borders-columns .ct-cell + .ct-cell {
border-inline-start: 1px solid rgba(var(--color-border), 0.12);
}
.ct--borders-all .ct-cell {
border: 1px solid rgba(var(--color-border), 0.12);
}
/* Mobile nav (versus mode) */
.ct-mobile-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-3);
border-block-end: 1px solid rgba(var(--color-border), 0.12);
background: rgba(var(--color-foreground), 0.02);
}
.ct-mobile-nav[hidden] { display: none; }
.ct-pill {
flex: 1;
min-width: 80px;
padding: var(--space-2) var(--space-3);
border: 1px solid rgba(var(--color-border), 0.2);
border-radius: 999px;
background: rgb(var(--color-background));
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
.ct-pill.is-active {
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
border-color: rgb(var(--color-foreground));
}
/* Mobile compact */
@media (width < 750px) {
.ct-cell { padding: var(--space-3); font-size: 0.8125rem; line-height: 1.4; }
.ct-cell--header { font-size: 0.6875rem; white-space: normal; hyphens: auto; }
}
/* ==========================================================
STYLE: card — elevated surface, soft shadow, rounded
Use: default modern e-commerce on light backgrounds
========================================================== */
.ct-wrapper--card {
border: 1px solid rgba(var(--color-border), 0.18);
border-radius: var(--radius-card);
overflow: hidden;
background: rgb(var(--color-background));
box-shadow: var(--shadow-card);
}
.ct--style-card .ct-cell--header {
background-color: rgba(var(--color-foreground), 0.05);
padding-block: var(--space-5);
}
.ct--style-card .ct-row:nth-child(even):not(.ct-row--header) .ct-cell {
background-color: rgba(var(--color-foreground), 0.03);
}
@media (width >= 750px) {
.ct--style-card .ct-row:not(.ct-row--header):hover .ct-cell {
background-color: rgba(var(--color-foreground), 0.06);
}
}
/* ==========================================================
STYLE: minimal — thin frame, no fill, airy editorial
Transparent background shows the section color through,
subtle border + radius keep the shape clean.
========================================================== */
.ct-wrapper--minimal {
background: transparent;
border: 1px solid rgba(var(--color-foreground), 0.1);
border-radius: var(--radius-card);
overflow: hidden;
}
.ct--style-minimal .ct-cell--header {
background: transparent;
border-block-end: 2px solid rgba(var(--color-foreground), 0.25);
padding-block: var(--space-4);
}
.ct--style-minimal .ct-row:not(.ct-row--header) + .ct-row:not(.ct-row--header) .ct-cell {
border-block-start: 1px solid rgba(var(--color-foreground), 0.1);
}
.ct--style-minimal .ct-row:nth-child(even):not(.ct-row--header) .ct-cell {
background-color: transparent;
}
/* ==========================================================
STYLE: split — each value column is its own standalone card
Structure only; colors inherit from the section palette scope.
Use: pricing tiers, "pick one" visual, strong column separation
========================================================== */
.ct-wrapper--split { background: transparent; }
.ct--style-split {
border-spacing: var(--space-4) 0;
border-collapse: separate;
}
.ct--style-split .ct-row > .ct-cell:first-child {
background: transparent;
font-weight: 500;
padding-inline-start: 0;
}
/* Column cards inherit the section palette scope; the same surface shows
through between columns. */
.ct--style-split .ct-row > .ct-cell:not(:first-child) {
background-color: rgb(var(--color-background));
border-inline: 1px solid rgba(var(--color-foreground), 0.15);
padding-inline: var(--space-6);
}
.ct--style-split .ct-row:first-child > .ct-cell:not(:first-child) {
border-block-start: 1px solid rgba(var(--color-foreground), 0.15);
border-start-start-radius: var(--radius-card);
border-start-end-radius: var(--radius-card);
padding-block-start: var(--space-6);
}
.ct--style-split .ct-row:last-child > .ct-cell:not(:first-child) {
border-block-end: 1px solid rgba(var(--color-foreground), 0.15);
border-end-start-radius: var(--radius-card);
border-end-end-radius: var(--radius-card);
padding-block-end: var(--space-6);
}
.ct--style-split .ct-cell--header {
background-color: rgba(var(--color-foreground), 0.06);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.8125rem;
padding-block: var(--space-5);
}
/* ==========================================================
STYLE: inverted — background and foreground are swapped
Still respects the palette scope (uses its CSS vars, just
reverses bg/text roles). For high-contrast, spotlight feel.
========================================================== */
.ct-wrapper--inverted {
border-radius: var(--radius-card);
overflow: hidden;
background: rgb(var(--color-foreground));
}
.ct--style-inverted { background: rgb(var(--color-foreground)); }
.ct--style-inverted .ct-cell { color: rgba(var(--color-background), 0.85); }
.ct--style-inverted .ct-row > .ct-cell:first-child {
color: rgb(var(--color-background));
font-weight: 500;
}
.ct--style-inverted .ct-cell--header {
color: rgb(var(--color-background));
background-color: rgba(var(--color-background), 0.08);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-block: var(--space-5);
}
.ct--style-inverted .ct-row:nth-child(even):not(.ct-row--header) .ct-cell {
background-color: rgba(var(--color-background), 0.04);
}
.ct--style-inverted .ct-cell__icon--check {
background-color: rgb(var(--color-accent-1));
color: rgb(var(--color-foreground));
}
.ct--style-inverted .ct-cell__icon--cross {
background-color: rgba(var(--color-background), 0.12);
color: rgba(var(--color-background), 0.45);
}
.ct--style-inverted .ct-mobile-nav {
background: rgba(var(--color-background), 0.06);
border-block-end-color: rgba(var(--color-background), 0.15);
}
.custom-section {
position: relative;
}
/* Flex mode — child sizing handled by .layout-flex in layout-flex.css */
.custom-section__inner--flex {
display: flex;
flex-direction: var(--cs-direction);
justify-content: var(--cs-justify);
align-items: var(--cs-align);
flex-wrap: var(--cs-wrap);
gap: var(--cs-gap);
--flex-gap: var(--cs-gap);
}
/* Column direction: children take full row (mobile only — desktop uses --cs-direction-d) */
@media (width < 750px) {
.custom-section__inner--flex[style*="--cs-direction: column"] > * {
flex: 0 0 auto;
width: 100%;
}
/* A row icon-with-text spans the column like every child; its content
follows the section's cross-axis alignment instead of sticking left. */
.custom-section__inner--flex[style*="--cs-direction: column"] > .block-iwt--row {
justify-content: var(--cs-align);
}
/* A group keeps its own width (NN%) inside a column: the section's
align-items then centres or aligns it. */
.custom-section__inner--flex[style*="--cs-direction: column"] > .block-group {
width: var(--width-m, 100%);
}
}
@media (width >= 750px) {
.custom-section__inner--flex {
flex-direction: var(--cs-direction-d);
justify-content: var(--cs-justify-d);
align-items: var(--cs-align-d);
flex-wrap: var(--cs-wrap-d);
gap: var(--cs-gap-d);
--flex-gap: var(--cs-gap-d);
}
.custom-section__inner--flex[style*="--cs-direction-d: column"] > * {
flex: 0 0 auto;
width: 100%;
}
.custom-section__inner--flex[style*="--cs-direction-d: column"] > .block-iwt--row {
justify-content: var(--cs-align-d);
}
.custom-section__inner--flex[style*="--cs-direction-d: column"] > .block-group {
width: var(--width-d, var(--width-m, 100%));
}
}
/* Grid mode */
.custom-section__inner--grid {
display: grid;
grid-template-columns: repeat(var(--cs-cols), minmax(0, 1fr));
gap: var(--cs-gap);
}
.custom-section__inner--grid > * {
min-width: 0;
}
@media (width >= 750px) {
.custom-section__inner--grid {
grid-template-columns: repeat(var(--cs-cols-d), minmax(0, 1fr));
gap: var(--cs-gap-d);
}
}
.featured-blog__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
margin-block-end: var(--space-6);
}
.featured-blog__title {
margin: 0;
}
.featured-blog__grid {
display: grid;
grid-template-columns: repeat(var(--fb-cols), 1fr);
gap: var(--fb-gap);
}
@media (width >= 750px) {
.featured-blog__grid {
grid-template-columns: repeat(var(--fb-cols-d), 1fr);
}
}
.article-card__media {
display: block;
position: relative;
aspect-ratio: var(--fb-aspect);
overflow: hidden;
border-radius: var(--radius-card);
margin-block-end: var(--space-4);
}
.article-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-normal) var(--ease-out);
}
.article-card:hover .article-card__img {
transform: scale(1.03);
}
.article-card__placeholder {
width: 100%;
height: 100%;
background: rgba(var(--color-foreground), 0.04);
}
.article-card__meta {
display: flex;
gap: var(--space-2);
font-size: var(--font-body--size-small);
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-2);
}
.article-card__meta > :not(:last-child)::after {
content: "\b7";
margin-inline-start: var(--space-2);
}
.article-card__title {
margin: 0;
}
.article-card__title a {
color: inherit;
text-decoration: none;
}
.article-card__title a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.article-card__excerpt {
margin-block-start: var(--space-2);
color: rgb(var(--color-foreground-secondary));
font-size: var(--font-body--size-small);
line-height: var(--line-height--body);
}
.product-page {
display: grid;
grid-template-columns: var(--layout-split) 1fr;
gap: var(--product-gap);
align-items: start;
}
.product-page--has-sidebar {
grid-template-columns: var(--layout-split) 1fr var(--sidebar-width);
}
/* Sticky columns */
.product-page--media-sticky > .product-media-zone {
position: sticky;
top: calc(var(--header-height, 0px) + var(--space-4));
height: fit-content;
}
.product-page--info-sticky > .product-info-zone {
position: sticky;
top: calc(var(--header-height, 0px) + var(--space-4));
height: fit-content;
}
/* Tablet: sidebar goes full-width below */
@media (width >= 750px) and (width < 1200px) {
.product-page--has-sidebar {
grid-template-columns: var(--layout-split) 1fr;
}
}
/* Mobile: single column with configurable order */
@media (width < 750px) {
.product-page {
grid-template-columns: 1fr;
}
.product-media-zone {
order: var(--mobile-order-media, 1);
}
.product-info-zone {
order: var(--mobile-order-info, 2);
}
.product-sidebar-zone {
order: var(--mobile-order-sidebar, 3);
}
.product-page--media-sticky > .product-media-zone,
.product-page--info-sticky > .product-info-zone {
position: static;
}
}
.footer--border-top { border-block-start: 1px solid rgba(var(--color-border), 0.3); }
.footer__content {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-m);
}
.footer--flex .footer__content {
display: flex;
flex-direction: var(--direction-m);
flex-wrap: wrap;
justify-content: var(--justify-m, start);
gap: var(--gap-m);
--flex-gap: var(--gap-m);
}
@media (width >= 750px) {
.footer--grid .footer__content {
grid-template-columns: repeat(var(--cols), 1fr);
gap: var(--gap);
}
.footer--flex .footer__content {
flex-direction: var(--direction);
justify-content: var(--justify, start);
gap: var(--gap);
--flex-gap: var(--gap);
}
}
.footer--split {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
}
.footer__split-media {
position: relative;
overflow: hidden;
min-height: 300px;
}
.footer__split-img,
.footer__split-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.footer__split-placeholder {
background: rgba(var(--color-foreground), 0.05);
}
.footer__split-content {
display: flex;
flex-direction: column;
gap: var(--gap-m);
padding: var(--space-6) var(--space-4);
}
@media (width >= 750px) {
.footer--split {
grid-template-columns: var(--footer-split-image-width) 1fr;
grid-template-rows: 1fr auto auto;
}
.footer--split-img-right {
grid-template-columns: 1fr var(--footer-split-image-width);
}
.footer--split-img-right > .footer__split-media {
order: 2;
}
.footer--split-img-right > .footer__split-content {
order: 1;
}
.footer__split-media {
min-height: unset;
}
.footer__split-content {
padding: var(--space-8) var(--footer-split-gap);
gap: var(--gap);
justify-content: center;
}
}
scale-image-scatter {
display: block;
}
.scatter__canvas {
position: relative;
height: var(--scatter-h);
overflow: visible;
}
/* Non-scatter blocks (text, button, group) are centered content overlay */
.scatter__canvas > :not(.scatter-img):not(style):not(script) {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 20;
text-align: center;
padding: var(--space-4);
pointer-events: none;
}
.scatter__canvas > :not(.scatter-img):not(style):not(script) :is(a, button, input, select, textarea),
.scatter__canvas > .block-button {
pointer-events: auto;
}
.iwt__grid {
display: flex;
flex-direction: column;
gap: var(--iwt-gap);
align-items: stretch;
}
@media (width >= 750px) {
.iwt__grid {
flex-direction: row;
align-items: center;
}
.iwt__grid--right {
flex-direction: row-reverse;
}
}
.iwt__media {
flex-shrink: 0;
width: var(--iwt-img-width);
overflow: hidden;
border-radius: var(--radius-card);
}
.iwt__media:has(.iwt-media--collage),
.iwt__media:has(.iwt-media--overlap-cards) {
overflow: visible;
}
.iwt__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-block: var(--iwt-content-pad);
padding-inline: var(--iwt-content-pad);
}
/* Hide media block when rendered inside content zone (non-static context) */
.iwt__content > .iwt-media {
display: none;
}
@media (width >= 750px) {
.iwt__content {
width: var(--iwt-content-width);
padding-block: 0;
}
}
.main-404__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-6);
}
.main-404__title {
font-size: clamp(3rem, 8vw, 6rem);
line-height: 1;
}
.main-404__text {
color: rgb(var(--color-foreground-secondary));
max-width: var(--max-width-body);
}
.main-account {
min-height: 50vh;
}
.main-article__hero {
border-radius: var(--radius-card);
margin-block-end: var(--space-8);
overflow: hidden;
}
.main-article__hero--framed {
aspect-ratio: var(--media-aspect);
}
.main-article__hero--framed img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.main-article__header { margin-block-end: var(--space-8); }
.main-article__breadcrumb {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-4);
display: flex;
gap: var(--space-2);
}
.main-article__breadcrumb a { color: inherit; text-decoration: none; }
.main-article__breadcrumb a:hover { text-decoration: underline; }
.main-article__title { margin-block-end: var(--space-4); }
.main-article__meta {
display: flex;
gap: var(--space-4);
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
}
.main-article__content { margin-block-end: var(--space-8); }
.main-article__blocks {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-block-end: var(--space-8);
}
.main-article__comments {
border-block-start: 1px solid rgba(var(--color-border), 0.2);
padding-block-start: var(--space-8);
}
.main-article__comments-title { margin-block-end: var(--space-6); }
.main-article__comments-list {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-block-end: var(--space-8);
}
.main-article__comment {
padding-block-end: var(--space-6);
border-block-end: 1px solid rgba(var(--color-border), 0.15);
}
.main-article__comment-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-block-end: var(--space-2);
font-size: 0.875rem;
}
.main-article__comment-header time {
color: rgb(var(--color-foreground-secondary));
font-size: 0.75rem;
}
.main-article__comment-form { margin-block-start: var(--space-8); }
.main-article__comment-form h3 { margin-block-end: var(--space-4); }
.main-article__comment-fields {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.main-article__comment-error {
color: rgb(var(--color-error));
font-size: 0.875rem;
margin-block-end: var(--space-4);
}
.main-article__comment-success {
color: rgb(var(--color-success));
font-size: 0.875rem;
margin-block-end: var(--space-4);
}
.main-article__comments-pagination {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-block-start: var(--space-6);
}
.main-blog__header {
margin-block-end: var(--space-8);
}
.main-blog__title {
margin-block-end: var(--space-4);
}
.main-blog__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.main-blog__tag {
font-size: 0.875rem;
padding: var(--space-1) var(--space-3);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-badge);
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
transition: all var(--duration-fast);
}
.main-blog__tag:hover,
.main-blog__tag--active {
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
border-color: rgb(var(--color-foreground));
}
.main-blog__card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-card);
}
.main-blog__card-media {
display: block;
overflow: hidden;
}
.main-blog__card-media--framed {
aspect-ratio: var(--media-aspect);
}
.main-blog__card-media--framed img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-blog__card-media img {
display: block;
transition: transform var(--duration-slow) ease;
}
.main-blog__card:hover .main-blog__card-media img {
transform: scale(1.03);
}
.main-blog__card-content {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-start: var(--space-4);
}
.main-blog__date {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
text-transform: uppercase;
letter-spacing: 0.05em;
}
.main-blog__card-title a {
text-decoration: none;
color: inherit;
}
.main-blog__card-title a:hover {
text-decoration: underline;
}
.main-blog__author {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
}
.main-blog__excerpt {
color: rgb(var(--color-foreground-secondary));
font-size: 0.875rem;
line-height: 1.6;
}
.main-blog__read-more {
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
color: rgb(var(--color-accent-1));
}
.main-blog__pagination {
margin-block-start: var(--space-12);
display: flex;
justify-content: center;
gap: var(--space-2);
}
.main-blog__pagination a,
.main-blog__pagination span {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-badge);
font-size: 0.875rem;
text-decoration: none;
}
.main-blog__pagination span.current {
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
}
scale-collection-grid {
display: block;
}
/* Grid */
.collection-grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols-m, 2), 1fr);
gap: var(--grid-gap-row-m, 16px) var(--grid-gap-col-m, 12px);
list-style: none;
padding: 0;
margin: 0;
}
@media (width >= 750px) {
.collection-grid {
grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
gap: var(--grid-gap-row, 24px) var(--grid-gap-col, 16px);
}
}
.collection-grid__item {
min-width: 0;
}
/* Layout (sidebar mode handled by filters block via :has) */
.collection-layout {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
@media (width >= 750px) {
.collection-layout:has(.collection-filters--sidebar) {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-6);
}
}
/* Toolbar */
.collection-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-4);
}
.collection-toolbar__count {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
margin: 0;
}
.collection-toolbar__roll { display: inline-grid; }
.collection-toolbar__roll > * { grid-area: 1 / 1; }
/* Pagination */
.collection-pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
margin-block-start: var(--space-8);
}
.collection-pagination__progress {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
}
.collection-pagination__bar {
display: block;
inline-size: 10rem;
block-size: 2px;
border-radius: 1px;
background: rgba(var(--color-foreground), var(--opacity-subtle));
overflow: hidden;
}
.collection-pagination__bar-fill {
display: block;
block-size: 100%;
background: rgb(var(--color-foreground));
transition: inline-size var(--duration-slow) var(--ease-out);
}
.collection-pagination__pages {
display: flex;
align-items: center;
gap: var(--space-2);
}
.collection-pagination__page {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--minimum-touch-target);
min-height: var(--minimum-touch-target);
padding: var(--space-1) var(--space-2);
font-size: 0.875rem;
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
border-radius: var(--radius-button);
transition: background var(--duration-fast) ease;
}
.collection-pagination__page:hover {
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.collection-pagination__page--current {
font-weight: 600;
color: rgb(var(--color-foreground));
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.collection-pagination__page--gap {
pointer-events: none;
}
.collection-pagination__arrow {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--minimum-touch-target);
min-height: var(--minimum-touch-target);
color: rgb(var(--color-foreground));
text-decoration: none;
border-radius: var(--radius-button);
}
.collection-pagination__arrow:hover {
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.collection-pagination__load-more {
margin-inline: auto;
}
.collection-pagination__sentinel {
display: block;
height: 1px;
}
/* Loading: every block of every card becomes a placeholder of its own size. */
.collection-grid[data-loading] {
pointer-events: none;
}
.collection-grid[data-loading] .product-card > * {
color: transparent;
border-radius: var(--radius-sm);
background: linear-gradient(90deg,
rgba(var(--color-foreground), var(--opacity-subtle)) 30%,
rgba(var(--color-foreground), var(--skeleton-opacity)) 50%,
rgba(var(--color-foreground), var(--opacity-subtle)) 70%) 0 0 / 250% 100%;
animation: collection-skeleton 1.3s linear infinite;
}
.collection-grid[data-loading] .product-card > * > * {
visibility: hidden;
}
@keyframes collection-skeleton {
from { background-position: 150% 0; }
to { background-position: -50% 0; }
}
/* Results that replace the grid, or join it from the next page, arrive one after another. */
.collection-grid[data-entering] > .collection-grid__item,
.collection-grid__item[data-entering] {
animation: collection-item-in var(--duration-normal) var(--ease-out) backwards;
animation-delay: calc(min(var(--item-index), 8) * 45ms);
}
@keyframes collection-item-in {
from { opacity: 0; translate: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
.collection-grid[data-loading] .product-card > * { animation: none; }
.collection-grid[data-entering] > .collection-grid__item,
.collection-grid__item[data-entering] { animation-name: collection-item-fade; }
.collection-pagination__bar-fill { transition: none; }
}
@keyframes collection-item-fade {
from { opacity: 0; }
}
/* Empty state */
.collection-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-10) 0;
gap: var(--space-4);
}
.collection-empty__text {
font-size: 1.125rem;
color: rgb(var(--color-foreground-secondary));
}
.main-list-collections__title {
margin-block-end: var(--space-8);
}
.main-list-collections__card {
display: block;
text-decoration: none;
color: inherit;
border-radius: var(--radius-card);
overflow: hidden;
position: relative;
}
.main-list-collections__media {
position: relative;
overflow: hidden;
}
.main-list-collections__media--framed {
aspect-ratio: var(--media-aspect);
}
.main-list-collections__media--framed img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-list-collections__media img {
display: block;
transition: transform var(--duration-slow) ease;
}
.main-list-collections__card:hover .main-list-collections__media img {
transform: scale(1.05);
}
.main-list-collections__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
pointer-events: none;
}
.main-list-collections__info {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
padding: var(--space-4) var(--space-6);
color: #fff;
}
.main-list-collections__name {
color: inherit;
margin-block-end: var(--space-1);
}
.main-list-collections__count {
font-size: 0.75rem;
opacity: 0.8;
}
.main-list-collections__placeholder {
width: 100%;
height: 100%;
fill: rgb(var(--color-foreground-secondary));
opacity: 0.2;
}
.main-list-collections__pagination {
margin-block-start: var(--space-12);
display: flex;
justify-content: center;
gap: var(--space-2);
}
/* Without overlay: text below image */
.main-list-collections__card:not(:has(.main-list-collections__overlay)) .main-list-collections__info {
position: relative;
color: rgb(var(--color-foreground));
padding: var(--space-4) 0;
}
.main-page__title {
margin-block-end: var(--space-6);
}
.main-page__content {
margin-block-end: var(--space-8);
}
.main-password__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
max-width: 480px;
width: 100%;
}
.main-password__logo-img {
max-height: 80px;
width: auto;
}
.main-password__message {
color: rgb(var(--color-foreground-secondary));
}
.main-password__form,
.main-password__newsletter {
width: 100%;
}
.main-password__field,
.main-password__newsletter-field {
display: flex;
gap: var(--space-2);
}
.main-password__field .field__input,
.main-password__newsletter-field .field__input {
flex: 1;
}
.main-password__error {
color: rgb(var(--color-error));
margin-block-end: var(--space-4);
font-size: 0.875rem;
}
.main-password__newsletter-text {
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-4);
font-size: 0.875rem;
}
.main-password__footer {
color: rgb(var(--color-foreground-secondary));
font-size: 0.75rem;
opacity: 0.6;
}
.product-page {
display: grid;
grid-template-columns: var(--layout-split) 1fr;
gap: var(--product-gap);
align-items: start;
}
/* Le split media/infos porte sur ce qui reste une fois la sidebar et les
gouttieres retirees, sinon les deux pourcentages se prennent sur la meme
largeur et la colonne infos tombe a zero (60 % + 30 % + 2 gaps > 100 %). */
.product-page--has-sidebar {
grid-template-columns:
calc((100% - var(--sidebar-width) - 2 * var(--product-gap)) * var(--layout-split-ratio))
minmax(0, 1fr)
var(--sidebar-width);
}
/* Sticky columns */
.product-page--media-sticky > .product-media-zone {
position: sticky;
top: calc(var(--header-height, 0px) + var(--space-4));
height: fit-content;
}
.product-page--info-sticky > .product-info-zone {
position: sticky;
top: calc(var(--header-height, 0px) + var(--space-4));
height: fit-content;
}
/* Tablet: sidebar goes full-width below */
@media (width >= 750px) and (width < 1200px) {
.product-page--has-sidebar {
grid-template-columns: var(--layout-split) 1fr;
}
}
/* Mobile: single column with configurable order */
@media (width < 750px) {
.product-page {
grid-template-columns: 1fr;
}
.product-media-zone {
order: var(--mobile-order-media, 1);
}
.product-info-zone {
order: var(--mobile-order-info, 2);
}
.product-sidebar-zone {
order: var(--mobile-order-sidebar, 3);
}
.product-page--media-sticky > .product-media-zone,
.product-page--info-sticky > .product-info-zone {
position: static;
}
}
.main-search__header {
margin-block-end: var(--space-8);
text-align: center;
}
.main-search__title {
margin-block-end: var(--space-6);
}
.main-search__form {
max-width: 600px;
margin-inline: auto;
}
.main-search__input-wrapper {
display: flex;
gap: var(--space-2);
}
.main-search__input {
flex: 1;
}
.main-search__count {
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-6);
font-size: 0.875rem;
}
.main-search__result {
border-radius: var(--radius-card);
overflow: hidden;
transition: box-shadow var(--duration-normal);
}
.main-search__result:hover {
box-shadow: var(--shadow-card);
}
.main-search__result-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
}
.main-search__result-media {
overflow: hidden;
}
.main-search__result-media--square {
aspect-ratio: 1 / 1;
}
.main-search__result-media--landscape {
aspect-ratio: 4 / 3;
}
.main-search__result-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.main-search__result-info {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
}
.main-search__result-type {
align-self: flex-start;
}
.main-search__result-title {
margin: 0;
}
.main-search__result-price {
font-weight: 600;
color: rgb(var(--color-accent-1));
}
.main-search__result-excerpt {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
line-height: 1.5;
}
.main-search__pagination {
margin-block-start: var(--space-12);
display: flex;
justify-content: center;
gap: var(--space-2);
}
.main-search__empty {
text-align: center;
padding-block: var(--space-16);
color: rgb(var(--color-foreground-secondary));
}
/* ── BASE ─────────────────────────────────── */
/* A full-viewport transparent layer, never a surface. It must not carry a
color scope: `section-color-scope` paints `.color-scope--section` from an
id selector, which would cover the whole storefront with an opaque
background. The palette variables reach the dialog and the fab by
inheritance from the section wrapper. */
scale-popup.popup {
position: fixed;
inset: 0;
z-index: var(--z-modal);
pointer-events: none;
}
/* ── DIALOG ──────────────────────────────── */
.popup__dialog {
--popup-pad: var(--space-6);
/* How tall a stacked image may grow. The heading, the copy and the call
to action have to stay on screen under it, so the image crops first. */
--popup-media-max-height: 30dvh;
position: fixed;
/* `pointer-events` is inherited, top layer included: what is visible has to
take clicks back from the layer above. */
pointer-events: auto;
width: min(var(--popup-width), 92vw);
max-height: 85dvh;
/* The body scrolls on its own, so a media panel stays put beside it. */
overflow: hidden;
border: none;
border-radius: var(--radius-card);
padding: 0;
background: var(--gradient-background);
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-modal);
}
.popup__dialog--pad-compact { --popup-pad: var(--space-4); }
.popup__dialog--pad-spacious { --popup-pad: var(--space-8); }
.popup__dialog::backdrop {
background: rgba(0, 0, 0, var(--backdrop-opacity));
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* `display` stays on the open state only: an author `display` on the dialog
itself would override the user agent's `dialog:not([open]) { display: none }`
and keep a closed popup on screen. */
.popup__dialog[open] {
display: flex;
flex-direction: column;
animation: popup-in var(--duration-normal) var(--ease-out);
}
/* The dialog is capped to the viewport and the body is the only part that
gives way: it shrinks and scrolls, so no field or button is ever cut off
out of reach. A flex line is clamped by the dialog's max-height, where a
grid row sized to its content and let the dialog clip the bottom. */
.popup__body {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
}
html[data-ova-preview='true'] scale-popup:not([data-ova-popup-preview-open]) .popup__dialog[open],
html[data-ova-preview='true'] scale-popup:not([data-ova-popup-preview-open]) .popup__fab {
display: none;
}
html[data-ova-preview='true'] scale-popup:not([data-ova-popup-preview-open]) .popup__dialog::backdrop {
display: none;
}
/* Chromium can blank a scaled preview iframe when a dialog enters the native
top layer. Explicit OVA previews therefore emulate modal presentation while
keeping the dialog in the iframe's normal compositing layer. */
html[data-ova-preview='true'] scale-popup[data-ova-popup-preview-open] {
pointer-events: auto;
}
html[data-ova-preview='true'] scale-popup[data-ova-popup-preview-modal]::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
background: rgba(0, 0, 0, var(--backdrop-opacity));
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
html[data-ova-preview='true'] scale-popup[data-ova-popup-preview-modal] .popup__dialog {
inset: 0;
z-index: 1;
margin: auto;
}
@keyframes popup-in {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ── MEDIA ───────────────────────────────── */
.popup__media {
flex: none;
min-width: 0;
}
/* A stacked image, the section media as well as an image block in the
content, never grows past its share of the screen: it crops instead of
pushing the copy below the fold. */
.popup__media .image-wrapper,
.popup__content .block-image .image-wrapper {
max-height: var(--popup-media-max-height);
}
.popup__media .image-wrapper__img,
.popup__content .block-image .image-wrapper__img {
max-height: var(--popup-media-max-height);
object-fit: cover;
}
@media (width < 750px) {
.popup__dialog {
--popup-media-max-height: 25dvh;
}
}
/* Paired with the stacked cap above: below this width the media goes back
on top, as a short banner. */
@media (width >= 750px) {
.popup__dialog--media-start[open],
.popup__dialog--media-end[open] {
flex-direction: row;
/* A side photo needs some height to read as a panel, not a strip. */
min-height: min(24rem, 85dvh);
}
.popup__dialog--media-end .popup__media { order: 2; }
.popup__dialog--media-start .popup__media,
.popup__dialog--media-end .popup__media {
position: relative;
flex: 4 1 0;
}
.popup__dialog--media-start .popup__body,
.popup__dialog--media-end .popup__body {
flex: 5 1 0;
}
/* Beside the content the photo fills its column at the height the copy
sets: it follows the content instead of dictating it. */
.popup__dialog--media-start .popup__image,
.popup__dialog--media-end .popup__image {
position: absolute;
inset: 0;
height: 100%;
max-height: none;
}
.popup__dialog--media-start .popup__image .image-wrapper__img,
.popup__dialog--media-end .popup__image .image-wrapper__img {
max-height: none;
}
}
/* ── CONTENT ─────────────────────────────── */
.popup__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--popup-pad);
/* Room for the close button, unless media already occupies the top edge. */
padding-block-start: calc(var(--popup-pad) + var(--space-6));
}
.popup__dialog--media-top .popup__content {
padding-block-start: var(--popup-pad);
}
@media (width < 750px) {
.popup__dialog--media .popup__content {
padding-block-start: var(--popup-pad);
}
}
/* ── BOTTOM SHEET ON MOBILE ──────────────── */
/* Paired with the desktop bottom placement below: (width < 750px) and
(width >= 750px) cover every width between them, 750px itself included.
A width with neither rule drops a bottom popup back to the centered default. */
@media (width < 750px) {
.popup--centered .popup__dialog,
.popup--bottom .popup__dialog {
width: 100%;
max-width: 100%;
max-height: 90dvh;
border-end-start-radius: 0;
border-end-end-radius: 0;
margin: 0;
position: fixed;
inset-block-start: auto;
inset-block-end: 0;
inset-inline: 0;
}
.popup--centered .popup__dialog[open],
.popup--bottom .popup__dialog[open] {
animation: popup-slide-up var(--duration-normal) var(--ease-out);
}
@keyframes popup-slide-up {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ── BOTTOM POSITION (DESKTOP) ───────────── */
@media (width >= 750px) {
.popup--bottom .popup__dialog {
inset-block-start: auto;
inset-block-end: var(--space-6);
margin-block: 0;
}
}
/* ── CORNER MODE ─────────────────────────── */
.popup__dialog--corner {
position: fixed;
width: min(var(--popup-width), 90vw);
max-height: 80dvh;
box-shadow: var(--shadow-popover);
border-radius: var(--radius-card);
}
.popup__dialog--corner::backdrop {
display: none;
}
.popup__dialog--bottom-right {
inset-block-start: auto;
inset-block-end: var(--space-6);
inset-inline-start: auto;
inset-inline-end: var(--space-6);
margin: 0;
}
.popup__dialog--bottom-left {
inset-block-start: auto;
inset-block-end: var(--space-6);
inset-inline-start: var(--space-6);
inset-inline-end: auto;
margin: 0;
}
.popup__dialog--corner[open] {
animation: popup-corner-in var(--duration-normal) var(--ease-out);
}
@keyframes popup-corner-in {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: translateY(0); }
}
@media (width < 750px) {
.popup__dialog--corner {
width: calc(100% - var(--space-6) * 2);
inset-inline: var(--space-6);
}
.popup__dialog--bottom-right,
.popup__dialog--bottom-left {
inset-inline-start: var(--space-6);
inset-inline-end: var(--space-6);
}
}
/* ── CLOSE BUTTON ────────────────────────── */
.popup__close {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: var(--radius-pill);
/* Legible over a photo as well as over the dialog surface. */
background: rgba(var(--color-background), 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: rgb(var(--color-foreground));
cursor: pointer;
transition: background var(--duration-fast) ease;
}
.popup__close:hover {
background: rgb(var(--color-background));
}
/* ── FOOTER (DISMISS) ────────────────────── */
.popup__footer {
text-align: center;
padding-inline: var(--popup-pad);
padding-block-start: var(--space-3);
padding-block-end: var(--popup-pad);
}
.popup__dismiss {
background: none;
border: none;
color: rgb(var(--color-foreground-secondary));
font-size: var(--font-body--size-small);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.2em;
padding-block: var(--space-1);
}
.popup__dismiss:hover {
color: rgb(var(--color-foreground));
}
/* ── TEST BADGE ──────────────────────────── */
.popup__test-badge {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-start: var(--space-3);
z-index: 2;
background: rgb(var(--color-warning));
color: #000;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 2px 6px;
border-radius: var(--radius-badge);
text-transform: uppercase;
margin: 0;
}
/* ── FAB (FLOATING ACTION BUTTON) ─────────── */
.popup__fab {
position: fixed;
pointer-events: auto;
z-index: var(--z-raised);
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-pill);
border: none;
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
box-shadow: var(--shadow-popover);
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) ease;
animation: popup-fab-in var(--duration-normal) var(--ease-out);
}
/* The component shows and hides the fab through the `hidden` property alone.
An author `display` beats the user agent's `[hidden] { display: none }`, so
the hidden state has to be declared here or the button never leaves the
screen: it would sit in its corner before the popup ever opens and stay
there after a reopen. */
.popup__fab[hidden] {
display: none;
}
.popup__fab:hover {
transform: scale(1.08);
box-shadow: var(--shadow-modal);
}
.popup__fab:active {
transform: scale(0.95);
}
.popup__fab--bottom-right {
inset-block-end: var(--space-6);
inset-inline-end: var(--space-6);
}
.popup__fab--bottom-left {
inset-block-end: var(--space-6);
inset-inline-start: var(--space-6);
}
@keyframes popup-fab-in {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
/* ── REDUCED MOTION ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
.popup__dialog[open],
.popup__fab {
animation: none;
}
}
scale-product-recommendations {
display: block;
}
scale-product-recommendations[hidden],
.section-product-recommendations:has(scale-product-recommendations[hidden]):not(:has(scale-product-recommendations[data-visual-preview-mode])) {
display: none;
}
.product-recommendations__heading {
margin: 0;
margin-block-end: var(--space-6);
}
.product-recommendations__grid {
display: grid;
grid-template-columns: repeat(var(--rec-cols), 1fr);
gap: var(--rec-gap);
}
@media (width >= 750px) {
.product-recommendations__grid {
grid-template-columns: repeat(var(--rec-cols-d), 1fr);
}
}
scale-recently-viewed {
display: block;
}
.recently-viewed__heading {
margin: 0;
margin-block-end: var(--space-6);
}
.recently-viewed__grid {
display: grid;
grid-template-columns: repeat(var(--rv-cols), 1fr);
gap: var(--rv-gap);
}
@media (width >= 750px) {
.recently-viewed__grid {
grid-template-columns: repeat(var(--rv-cols-d), 1fr);
}
}
scale-stacking-cards {
display: block;
--sticky-offset: 0px;
}
/* An always-sticky header covers the top of the viewport; the cards pin
below it. A header that hides on scroll down is out of the way. */
:root:has(.header-wrapper--sticky-always) scale-stacking-cards {
--sticky-offset: var(--header-height);
}
.stacking-cards__container {
display: flex;
flex-direction: column;
/* Each card stacks at its index (--card-z): kept inside the deck, the tenth card
cannot rise above the progress dots (--z-raised) or the sticky header (--z-sticky). */
isolation: isolate;
}
@media (width >= 750px) {
.stacking-cards--staggered .stacking-cards__container {
padding-inline: 4vw;
}
.stacking-cards--staggered .stacking-card {
width: 92%;
}
.stacking-cards--staggered .stacking-card:nth-child(even) {
margin-inline-start: auto;
}
}
/* Progress — shared */
.stacking-cards__progress {
position: fixed;
display: flex;
z-index: var(--z-raised);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.stacking-cards__progress.is-visible {
opacity: 1;
visibility: visible;
}
/* Progress — dots */
.stacking-cards__progress:not(.stacking-cards__progress--bar) {
flex-direction: column;
gap: var(--space-2);
top: 50%;
transform: translateY(-50%);
}
.stacking-cards__progress--right:not(.stacking-cards__progress--bar) {
inset-inline-end: var(--space-4);
}
.stacking-cards__progress--left:not(.stacking-cards__progress--bar) {
inset-inline-start: var(--space-4);
}
.stacking-cards__dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: currentColor;
opacity: 0.3;
cursor: pointer;
padding: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.stacking-cards__dot.is-active {
opacity: 1;
transform: scale(1.3);
}
.stacking-cards__dot:focus-visible {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: 2px;
}
/* Progress — bar */
.stacking-cards__progress--bar {
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 120px;
background: rgba(var(--color-foreground), 0.15);
border-radius: 2px;
overflow: hidden;
}
.stacking-cards__progress--bar.stacking-cards__progress--right {
inset-inline-end: var(--space-4);
}
.stacking-cards__progress--bar.stacking-cards__progress--left {
inset-inline-start: var(--space-4);
}
.stacking-cards__progress-fill {
width: 100%;
height: 0%;
background: currentColor;
border-radius: 2px;
transition: height 0.3s ease;
}
/* Progress colors */
.stacking-cards__progress--color-foreground { color: rgb(var(--color-foreground)); }
.stacking-cards__progress--color-accent-1 { color: rgb(var(--color-accent-1)); }
.stacking-cards__progress--color-accent-2 { color: rgb(var(--color-accent-2)); }
.stacking-cards__progress--color-background { color: rgb(var(--color-background)); }
/* Mobile: dots horizontal at bottom */
@media (width < 750px) {
.stacking-cards__progress:not(.stacking-cards__progress--bar) {
top: unset;
inset-inline: 0;
inset-block-end: var(--space-4);
transform: none;
flex-direction: row;
justify-content: center;
}
.stacking-cards__dot {
width: 8px;
height: 8px;
}
/* As specific as the side rules above, so the bar leaves the side for the middle. */
.stacking-cards__progress.stacking-cards__progress--bar {
top: unset;
inset-block-end: var(--space-4);
inset-inline: 0;
margin-inline: auto;
transform: rotate(90deg);
transform-origin: center;
}
}
/* Content animation — hidden only after JS marks the first card active */
.stacking-cards--animate-content .stacking-card__content-inner {
transition: opacity 0.5s ease, transform 0.5s ease;
}
.stacking-cards--animate-content.is-initialized .stacking-card:not([data-active]) .stacking-card__content-inner {
opacity: 0;
transform: translateY(20px);
}
/* Snap */
.stacking-cards--snap .stacking-cards__container {
scroll-snap-type: y proximity;
}
/* Design mode */
.stacking-cards--preview .stacking-card {
position: relative;
top: auto;
height: 300px;
}
@media (prefers-reduced-motion: reduce) {
.stacking-cards--animate-content .stacking-card__content-inner {
transition: none;
}
.stacking-cards--animate-content.is-initialized .stacking-card:not([data-active]) .stacking-card__content-inner {
transform: none;
}
}
.product-accelerated-checkout { margin-block-start: var(--space-2); min-block-size: var(--inputs-min-height); }
.product-accelerated-checkout--full .shopify-payment-button { width: 100%; }
.product-accelerated-checkout .shopify-payment-button__button--unbranded { border-radius: var(--radius-button); min-height: var(--inputs-min-height); }
.block-accordion-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
cursor: pointer;
list-style: none;
user-select: none;
}
.block-accordion-item summary::-webkit-details-marker {
display: none;
}
.block-accordion-item summary::marker {
display: none;
content: '';
}
.block-accordion-item__heading {
font-size: var(--accordion-heading-size, 1rem);
font-weight: 600;
flex: 1;
min-width: 0;
}
.block-accordion-item__icon {
flex-shrink: 0;
display: inline-flex;
}
.block-accordion-item__glyph {
display: inline-flex;
transition: rotate var(--duration-normal) var(--ease-out);
}
.block-accordion--icon-caret .block-accordion-item__glyph--inherited.block-accordion-item__glyph--plus,
.block-accordion--icon-plus .block-accordion-item__glyph--inherited.block-accordion-item__glyph--caret {
display: none;
}
/* Duotone puts UI glyphs on a disc. Left to the glyph, that disc is the glyph's
size (15px behind an 18px chevron). Here the row draws it: twice the 16px glyph,
tinted at the theme's duotone opacity, with the chevron rendered bare inside. */
.block-accordion-item__icon--disc {
--accordion-glyph-size: 16px;
width: calc(var(--accordion-glyph-size) * 2);
height: calc(var(--accordion-glyph-size) * 2);
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, currentColor calc(var(--icon-duotone-opacity) * 100%), transparent);
}
/* The open state turns what is drawn: a chevron or a custom icon flips, a plus becomes a cross. */
.block-accordion-item[open] > summary :is(.block-accordion-item__glyph--caret, .block-accordion-item__glyph--custom) {
rotate: 180deg;
}
.block-accordion-item[open] > summary .block-accordion-item__glyph--plus {
rotate: 45deg;
}
.block-accordion-item__content {
padding-block-end: 1rem;
}
.block-accordion-item__richtext > * + * {
margin-block-start: 0.75em;
}
.block-accordion-item summary:focus-visible {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: var(--focus-outline-offset);
}
.announcement-item {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-decoration: none;
color: inherit;
white-space: nowrap;
}
a.announcement-item:hover {
opacity: 0.8;
}
.announcement-item__icon {
display: flex;
flex-shrink: 0;
}
.announcement-item__text {
font-size: inherit;
line-height: inherit;
}
.article-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block-start: var(--space-6);
}
.article-nav__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
transition: color var(--duration-fast);
}
.article-nav__back:hover {
color: rgb(var(--color-foreground));
}
.article-nav__prev-next {
display: flex;
gap: var(--space-6);
margin-inline-start: auto;
}
.article-nav__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
transition: color var(--duration-fast);
}
.article-nav__link:hover {
color: rgb(var(--color-foreground));
}
.article-share {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.2);
}
.article-share__label {
font-size: 0.875rem;
font-weight: 600;
}
.article-share__link {
color: rgb(var(--color-foreground-secondary));
transition: color var(--duration-fast);
display: flex;
}
.article-share__link:hover {
color: rgb(var(--color-foreground));
}
.article-tags {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.article-tags__tag {
font-size: 0.75rem;
padding: var(--space-1) var(--space-3);
border: 1px solid rgba(var(--color-border), 0.4);
border-radius: var(--radius-badge);
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
transition: background var(--duration-fast), color var(--duration-fast);
}
.article-tags__tag:hover {
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
}
.bento-cell {
position: relative;
border-radius: var(--radius-card);
overflow: hidden;
height: 100%;
}
.bento-cell--has-bg {
color: rgb(var(--color-foreground));
}
.bento-cell__media {
position: absolute;
inset: 0;
}
.bento-cell__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bento-cell__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
}
.bento-cell__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
gap: var(--space-3);
}
.bento-cell__link {
position: absolute;
inset: 0;
z-index: 2;
}
.bento-cell__link ~ .bento-cell__content :is(a, button) {
position: relative;
z-index: 3;
}
.bento-cell:hover .bento-cell__link ~ .bento-cell__content {
opacity: 0.95;
}
shopify-visual-preview-block-list .bento-cell[data-visual-preview-mode] {
min-height: 120px;
border: 1px dashed rgba(var(--color-foreground), 0.1);
}
.bento-heading {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-block-end: var(--space-6);
}
.cart-accelerated {
margin-block-start: var(--space-2);
min-block-size: 48px;
}
.cart-accelerated--full [data-shopify-buttoncontainer] {
justify-content: center;
}
.cart-accelerated--full .shopify-payment-button__button {
min-height: 48px;
}
/* Inside the centered empty state the rows keep their start-aligned layout. */
.cart-best-sellers {
align-self: stretch;
padding-block: 0;
border-block-start: none;
text-align: start;
}
.cart-zone--body {
padding: var(--space-3) var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.1);
}
.cart-zone--body:not(:has(> :not(script):not(template):not([hidden]))) {
display: none;
}
.cart-discount__accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
padding: var(--space-2) 0;
list-style: none;
}
.cart-discount__accordion summary::-webkit-details-marker { display: none; }
.cart-discount__accordion summary svg {
transition: transform var(--duration-fast) ease;
}
.cart-discount__accordion[open] summary svg {
transform: rotate(180deg);
}
.cart-discount__field {
display: flex;
gap: var(--space-2);
margin-block-start: var(--space-2);
}
.cart-discount__input {
flex: 1;
padding: var(--space-2) var(--space-3);
border: 1px solid rgba(var(--color-border), 0.2);
border-radius: var(--radius-input);
background: rgb(var(--color-background-secondary));
color: inherit;
font-size: 0.8125rem;
}
.cart-discount__input:focus {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: var(--focus-outline-offset);
}
.cart-discount__error {
font-size: 0.75rem;
color: rgb(var(--color-error));
margin-block-start: var(--space-1);
}
.cart-discount__codes {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.cart-discount__pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background: rgba(var(--color-accent-2), 0.1);
color: rgb(var(--color-accent-2));
border-radius: var(--radius-badge);
font-size: 0.75rem;
font-weight: 500;
}
.cart-discount__pill-amount {
margin-inline-start: var(--space-1);
}
.cart-discount__remove {
display: flex;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
opacity: 0.7;
}
.cart-discount__remove:hover {
opacity: 1;
}
.cart-zone--footer-bottom {
padding-block-start: var(--space-3);
}
.cart-zone--footer-top {
padding-block-end: var(--space-3);
}
.cart-zone--header {
padding: var(--space-3) var(--space-4) 0;
}
.cart-note__accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
padding: var(--space-2) 0;
list-style: none;
}
.cart-note__accordion summary::-webkit-details-marker { display: none; }
.cart-note__accordion summary svg {
transition: transform var(--duration-fast) ease;
}
.cart-note__accordion[open] summary svg {
transform: rotate(180deg);
}
.cart-note__label {
display: block;
font-size: 0.8125rem;
font-weight: 500;
margin-block-end: var(--space-2);
}
.cart-note__textarea {
width: 100%;
min-height: 80px;
padding: var(--space-2) var(--space-3);
border: 1px solid rgba(var(--color-border), 0.2);
border-radius: var(--radius-input);
background: rgb(var(--color-background-secondary));
color: inherit;
font-family: inherit;
font-size: 0.8125rem;
resize: vertical;
}
.cart-note__textarea:focus {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: var(--focus-outline-offset);
}
.cart-progress {
padding: var(--space-2) 0;
}
.cart-progress__message {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
font-size: 0.8125rem;
text-align: center;
margin: 0 0 var(--space-2);
font-weight: 500;
}
.cart-progress__message-icon {
display: flex;
flex: none;
}
.cart-progress__track {
position: relative;
height: 6px;
background: rgba(var(--color-foreground), var(--opacity-subtle));
border-radius: 3px;
overflow: visible;
}
.cart-progress__fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
border-radius: 3px;
transition: width var(--duration-slow) ease;
}
.cart-progress__fill { background: rgb(var(--progress-color)); }
.cart-progress__milestone {
position: absolute;
inset-block-start: 50%;
margin-block-start: -12px;
margin-inline-start: -12px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgb(var(--color-background));
border: 2px solid rgba(var(--color-foreground), 0.15);
border-radius: 50%;
z-index: 1;
transition:
background-color var(--duration-normal) ease var(--duration-normal),
border-color var(--duration-normal) ease var(--duration-normal),
color var(--duration-normal) ease var(--duration-normal);
}
/* Reached: filled with the bar's color once the fill gets there. */
.cart-progress__milestone--reached {
background: rgb(var(--progress-color));
border-color: rgb(var(--progress-color));
color: rgb(var(--color-background));
}
@media (prefers-reduced-motion: no-preference) {
/* Upcoming milestones sit a little smaller; reaching one overshoots to 1.3 and settles, only on the way up. */
.cart-progress__milestone { scale: 0.9; }
.cart-progress__milestone--reached {
scale: 1;
transition:
background-color var(--duration-normal) ease var(--duration-normal),
border-color var(--duration-normal) ease var(--duration-normal),
color var(--duration-normal) ease var(--duration-normal),
scale 520ms linear(0, 4 40%, 1) var(--duration-normal);
}
}
.collection-banner {
margin-block-end: var(--space-6);
}
.collection-banner__title {
margin: 0;
}
.collection-banner__description {
margin-block-start: var(--space-2);
color: rgb(var(--color-foreground-secondary));
max-width: 65ch;
}
.collection-banner--has-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-card);
padding: var(--space-8) var(--space-6);
min-height: 200px;
display: flex;
align-items: flex-end;
}
.collection-banner__image {
position: absolute;
inset: 0;
}
.collection-banner__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.collection-banner__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
z-index: 0;
}
.collection-banner--has-image .collection-banner__content {
position: relative;
z-index: 1;
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.collection-banner--has-image .collection-banner__description {
color: rgba(255, 255, 255, 0.9);
}
.collection-cover {
position: relative;
overflow: hidden;
border-radius: var(--cover-radius, var(--radius-media));
height: 100%;
}
.collection-cover__link {
position: absolute;
inset: 0;
z-index: 3;
}
.collection-cover__media {
position: absolute;
inset: 0;
}
.collection-cover__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.collection-cover--zoom:hover .collection-cover__img {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.collection-cover__img { transition: none; }
}
.collection-cover__placeholder {
width: 100%;
height: 100%;
background: rgba(var(--color-foreground), 0.04);
}
.collection-cover__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
z-index: 1;
}
.collection-cover__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
aspect-ratio: var(--cover-aspect, 3 / 4);
padding: var(--space-8);
gap: var(--space-3);
color: rgb(255 255 255);
}
.collection-cover--overlay_bottom .collection-cover__content {
justify-content: flex-end;
align-items: flex-start;
}
.collection-cover--overlay_center .collection-cover__content {
justify-content: center;
align-items: center;
text-align: center;
}
.collection-cover__subtitle {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.8;
}
.collection-cover__title {
margin: 0;
}
.collection-cover__desc {
margin: 0;
opacity: 0.85;
max-width: 30ch;
}
.collection-cover__cta {
margin-block-start: var(--space-2);
position: relative;
z-index: 4;
}
.collection-cover__content :is(a, button, input, textarea, select) {
position: relative;
z-index: 4;
}
/* ═══ MOBILE BAR ═══ */
.collection-filters__mobile-bar {
display: flex;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.collection-filters__trigger { flex: 1; }
.collection-filters__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-1);
border-radius: 10px;
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
font-size: 0.6875rem;
font-weight: 600;
margin-inline-start: var(--space-1);
}
.collection-filters__mobile-sort { flex: 1; }
.collection-filters__mobile-sort select,
.collection-filters__sort select,
.collection-filters__drawer-sort select {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid rgba(var(--color-border), 0.2);
border-radius: var(--radius-input);
background: rgb(var(--color-background));
color: inherit;
font-size: 0.8125rem;
cursor: pointer;
transition: border-color var(--duration-fast) ease;
}
.collection-filters__mobile-sort select:focus,
.collection-filters__sort select:focus,
.collection-filters__drawer-sort select:focus {
border-color: rgb(var(--color-accent-1));
outline: var(--focus-outline-width) solid rgb(var(--color-accent-1));
outline-offset: var(--focus-outline-offset);
}
@media (width >= 750px) {
.collection-filters__mobile-bar { display: none; }
}
/* ═══ DESKTOP ═══ */
.collection-filters__desktop { display: none; }
@media (width >= 750px) {
.collection-filters__desktop { display: block; }
.collection-filters--sticky .collection-filters__desktop {
position: sticky;
inset-block-start: calc(var(--header-height, 0px) + var(--space-4));
max-block-size: calc(100dvh - var(--header-height, 0px) - var(--space-8));
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(var(--color-foreground), 0.1) transparent;
}
}
/* ═══ ACTIVE PILLS ═══ */
.collection-filters__active {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding-block-end: var(--space-4);
margin-block-end: var(--space-2);
border-block-end: 1px solid rgba(var(--color-border), 0.1);
}
.collection-filters__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(var(--color-foreground), var(--opacity-subtle));
border-radius: var(--radius-badge);
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
color: inherit;
transition: background var(--duration-fast) ease;
}
.collection-filters__pill:hover { background: rgba(var(--color-foreground), var(--opacity-medium)); }
.collection-filters__pill svg { opacity: 0.6; }
/* A removed filter leaves at once, before the new results: the pill folds and the next
ones close the gap; Clear all folds the whole row. Without interpolate-size it just goes. */
.collection-filters__pill.is-leaving,
.collection-filters__active.is-leaving {
display: none;
overflow: hidden;
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.collection-filters__active {
interpolate-size: allow-keywords;
transition:
block-size var(--duration-normal) var(--ease-out),
padding-block-end var(--duration-normal) var(--ease-out),
margin-block-end var(--duration-normal) var(--ease-out),
opacity var(--duration-fast) ease,
display var(--duration-normal) allow-discrete;
}
.collection-filters__pill {
transition:
background var(--duration-fast) ease,
inline-size var(--duration-normal) var(--ease-out),
padding-inline var(--duration-normal) var(--ease-out),
margin-inline-end var(--duration-normal) var(--ease-out),
opacity var(--duration-fast) ease,
display var(--duration-normal) allow-discrete;
}
.collection-filters__pill.is-leaving {
inline-size: 0;
padding-inline: 0;
margin-inline-end: calc(-1 * var(--space-2));
white-space: nowrap;
}
.collection-filters__active.is-leaving {
block-size: 0;
padding-block-end: 0;
margin-block-end: 0;
}
}
.collection-filters__clear-all {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
text-decoration: underline;
text-underline-offset: 3px;
align-self: center;
transition: color var(--duration-fast) ease;
}
.collection-filters__clear-all:hover { color: rgb(var(--color-foreground)); }
/* ═══ FILTER GROUPS ═══ */
.collection-filter { border-block-end: 1px solid rgba(var(--color-border), 0.12); }
.collection-filter:first-of-type { border-block-start: 1px solid rgba(var(--color-border), 0.12); }
.collection-filter__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) 0;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: uppercase;
color: rgb(var(--color-foreground));
list-style: none;
user-select: none;
}
.collection-filter__header::-webkit-details-marker { display: none; }
.collection-filter__header svg {
color: rgb(var(--color-foreground-secondary));
transition: transform var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.collection-filter[open] .collection-filter__header svg { transform: rotate(180deg); }
.collection-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 10px;
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
font-size: 0.625rem;
font-weight: 700;
margin-inline-start: var(--space-2);
margin-inline-end: auto;
text-transform: none;
letter-spacing: 0;
}
.collection-filter__body { padding-block-end: var(--space-4); }
/* ═══ CHECKBOXES (shared by list + boolean filters) ═══ */
.collection-filter__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.collection-filter__label,
.collection-filter__boolean {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px 0;
font-size: 0.8125rem;
cursor: pointer;
}
.collection-filter__label {
position: relative;
transition: color var(--duration-fast) ease;
}
.collection-filter__label:hover { color: rgb(var(--color-accent-1)); }
.collection-filter__label--disabled { opacity: 0.35; pointer-events: none; }
.collection-filter__label input[type="checkbox"],
.collection-filter__boolean input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid rgba(var(--color-foreground), 0.35);
border-radius: var(--radius-checkbox);
background: transparent;
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.collection-filter__label input[type="checkbox"]:hover { border-color: rgba(var(--color-foreground), 0.6); }
.collection-filter__label input[type="checkbox"]:checked,
.collection-filter__boolean input[type="checkbox"]:checked {
background: rgb(var(--color-foreground));
border-color: rgb(var(--color-foreground));
}
.collection-filter__label input[type="checkbox"]:checked::after,
.collection-filter__boolean input[type="checkbox"]:checked::after {
content: '';
position: absolute;
inset-inline-start: 5px;
inset-block-start: 2px;
width: 5px;
height: 9px;
border: solid rgb(var(--color-background));
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.collection-filter__label input[type="checkbox"]:focus-visible {
outline: var(--focus-outline-width) solid rgb(var(--color-accent-1));
outline-offset: var(--focus-outline-offset);
}
/* ═══ SWATCHES ═══ */
.collection-filter__swatch {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid transparent;
box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.1);
flex-shrink: 0;
transition: border-color var(--duration-fast) ease;
}
.collection-filter__label:hover .collection-filter__swatch { border-color: rgba(var(--color-foreground), 0.3); }
.collection-filter__label input:checked ~ .collection-filter__swatch { border-color: rgb(var(--color-foreground)); }
.collection-filter__text { flex: 1; min-width: 0; }
.collection-filter__value-count {
color: rgb(var(--color-foreground-secondary));
font-size: 0.6875rem;
margin-inline-start: auto;
flex-shrink: 0;
}
/* ═══ PRICE RANGE ═══ */
.collection-filter__price-inputs {
display: flex;
align-items: center;
gap: var(--space-2);
}
.collection-filter__price-field {
display: flex;
align-items: center;
flex: 1;
border: 1.5px solid rgba(var(--color-border), 0.2);
border-radius: var(--radius-input);
padding-inline-start: var(--space-2);
transition: border-color var(--duration-fast) ease;
}
.collection-filter__price-field:focus-within { border-color: rgb(var(--color-accent-1)); }
.collection-filter__price-prefix {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
flex-shrink: 0;
width: 14px;
text-align: center;
}
.collection-filter__price-field input {
flex: 1;
border: none;
background: transparent;
color: inherit;
padding: 8px var(--space-2);
font-size: 0.8125rem;
-moz-appearance: textfield;
width: 100%;
}
.collection-filter__price-field input:focus { outline: none; }
.collection-filter__price-field input::-webkit-inner-spin-button,
.collection-filter__price-field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.collection-filter__price-separator {
color: rgb(var(--color-foreground-secondary));
font-size: 0.75rem;
}
/* ═══ SORT ═══ */
.collection-filters__sort {
padding-block: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.12);
}
.collection-filters__sort-label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.01em;
margin-block-end: var(--space-2);
}
/* ═══ DRAWER ═══ */
.collection-filters__drawer {
position: fixed;
inset: 0;
inset-inline-end: auto;
width: min(380px, 90vw);
height: 100%;
max-height: 100dvh;
margin: 0;
padding: 0;
border: none;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
z-index: var(--z-drawer);
flex-direction: column;
touch-action: pan-y;
}
/* Displayed only while open (and leaving): closed, its controls stay out of the tab order. */
.collection-filters__drawer[open] {
display: flex;
}
.collection-filters__drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-block-end: 1px solid rgba(var(--color-border), 0.12);
flex-shrink: 0;
}
.collection-filters__drawer-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.collection-filters__drawer-header button {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius-button);
transition: background var(--duration-fast) ease;
}
.collection-filters__drawer-header button:hover { background: rgba(var(--color-foreground), var(--opacity-subtle)); }
.collection-filters__drawer-body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 0 var(--space-5);
scrollbar-width: thin;
scrollbar-color: rgba(var(--color-foreground), 0.1) transparent;
}
.collection-filters__drawer-sort {
padding: var(--space-4) 0;
border-block-start: 1px solid rgba(var(--color-border), 0.12);
}
.collection-filters__drawer-sort label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.01em;
margin-block-end: var(--space-2);
}
.collection-filters__drawer-footer {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-block-start: 1px solid rgba(var(--color-border), 0.12);
flex-shrink: 0;
}
.collection-filters__drawer-footer .btn { flex: 1; }
/* ═══ LOADING STATE ═══ */
scale-facets[data-loading] .collection-filters__desktop {
opacity: 0.5;
pointer-events: none;
transition: opacity var(--duration-fast) ease;
}
.ct-cell {
padding: var(--space-5) var(--space-6);
vertical-align: middle;
font-size: 0.9375rem;
line-height: 1.5;
transition: background-color var(--duration-fast) var(--ease-out);
}
/* First column — label column: slightly stronger */
.ct-row > .ct-cell:first-child {
font-weight: 500;
color: rgba(var(--color-foreground), 0.95);
}
/* Header row */
.ct-cell--header {
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
background-color: rgba(var(--color-foreground), 0.06);
padding-block: var(--space-5);
}
@media (width >= 750px) {
.ct-cell--header {
white-space: nowrap;
}
}
@media (width < 750px) {
.ct-cell--header {
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
}
}
/* Check/cross/dash — badge pill style for visual pop */
.ct-cell__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
}
.ct-cell__icon--check {
color: rgb(var(--color-background));
background-color: rgb(var(--color-success));
}
.ct-cell__icon--cross {
color: rgba(var(--color-foreground), 0.55);
background-color: rgba(var(--color-foreground), 0.08);
}
.ct-cell__icon--dash {
color: rgba(var(--color-foreground), 0.4);
background-color: transparent;
font-weight: 600;
font-size: 1.125rem;
}
.ct-cell__img {
display: block;
max-width: 96px;
max-height: 48px;
object-fit: contain;
margin-inline: auto;
}
@media (width < 750px) {
.ct-cell {
padding: var(--space-3) var(--space-3);
font-size: 0.8125rem;
}
.ct-cell__icon {
width: 1.625rem;
height: 1.625rem;
}
}
shopify-visual-preview-block-list .ct-cell[data-visual-preview-mode] {
min-width: 100px;
min-height: 40px;
border: 1px dashed rgba(var(--color-foreground), 0.1);
}
.ct-heading-content {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.ct-row--header {
font-weight: 600;
}
.ct-row--header .ct-cell {
padding-block: var(--space-4);
border-block-end: 2px solid rgba(var(--color-border), 0.3);
}
.ct-row--footer .ct-cell {
padding-block-start: var(--space-4);
border-block-start: 2px solid rgba(var(--color-border), 0.3);
}
shopify-visual-preview-block-list .ct-row[data-visual-preview-mode] {
display: flex;
min-height: 40px;
border: 1px dashed rgba(var(--color-foreground), 0.1);
}
.flip-card__back {
overflow-y: auto;
}
.flip-card__face {
display: flex;
flex-direction: column;
gap: var(--fc-gap, 12px);
padding: var(--fc-pad, 20px);
height: 100%;
overflow: hidden;
border-radius: var(--radius-card);
}
.footer-bottom-bar {
padding-block-start: var(--bottom-bar-pt);
padding-block-end: var(--bottom-bar-pb);
width: var(--width-m, 100%);
}
@media (width >= 750px) {
.footer-bottom-bar {
width: var(--width-d, var(--width-m, 100%));
}
}
/* Full-row break inside .layout-flex: match (0,2,1) so flex: 0 1 auto cannot share the columns row. */
.layout-flex.layout-flex > .footer-bottom-bar {
flex: 0 0 100%;
width: 100%;
}
.footer-bottom-bar--border {
border-block-start: 1px solid rgba(var(--color-border), 0.2);
}
.footer-bottom-bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bottom-bar-gap);
}
.footer-bottom-bar--between .footer-bottom-bar__inner { justify-content: space-between; }
.footer-bottom-bar--center .footer-bottom-bar__inner { justify-content: center; }
.footer-bottom-bar--start .footer-bottom-bar__inner { justify-content: flex-start; }
.footer-bottom-bar--end .footer-bottom-bar__inner { justify-content: flex-end; }
.footer-copyright {
font-size: var(--font-body--size-small);
color: rgb(var(--color-foreground-secondary));
margin: 0;
white-space: nowrap;
}
.footer-follow-on-shop {
display: inline-flex;
align-items: center;
}
.footer-policies {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--font-body--size-small);
padding-block: var(--space-3);
}
.footer-policies--left { justify-content: flex-start; }
.footer-policies--center { justify-content: center; }
.footer-policies--right { justify-content: flex-end; }
.footer-policies__sep { color: rgb(var(--color-foreground-secondary)); }
.footer-policies__link { color: rgb(var(--color-foreground-secondary)); text-decoration: none; }
.footer-policies__link:hover { color: rgb(var(--color-foreground)); text-decoration: underline; }
.header-drawer-footer {
padding-block-start: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.15);
margin-block-start: auto;
}
.header-drawer-header {
padding-block-end: var(--space-4);
border-block-end: 1px solid rgba(var(--color-border), 0.15);
margin-block-end: var(--space-2);
}
.header-drawer__dialog {
position: fixed;
inset: 0;
inset-inline-end: auto;
width: min(380px, 85vw);
height: 100%;
max-height: 100dvh;
margin: 0;
padding: 0;
border: none;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
z-index: var(--z-drawer);
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
}
.header-drawer__inner {
display: flex;
flex-direction: column;
min-height: 100%;
padding: var(--space-4);
}
.header-drawer__top {
display: flex;
justify-content: flex-end;
padding-block-end: var(--space-2);
}
.header-drawer__close {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-2);
}
/* Search */
.header-drawer__search {
padding-block-end: var(--space-4);
}
.header-drawer__search-field {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgb(var(--color-background-secondary));
border-radius: var(--radius-input);
}
.header-drawer__search-input {
flex: 1;
border: none;
background: transparent;
color: inherit;
font-size: 0.875rem;
outline: none;
}
/* Navigation */
.header-drawer__menu {
list-style: none;
padding: 0;
margin: 0;
}
.header-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) 0;
text-decoration: none;
color: inherit;
font-size: 1rem;
font-weight: 500;
border-block-end: 1px solid rgba(var(--color-border), 0.15);
}
.header-drawer__link--parent {
cursor: pointer;
list-style: none;
}
.header-drawer__link--parent::-webkit-details-marker { display: none; }
.header-drawer__link--parent svg {
transition: transform 0.2s ease;
}
details[open] > .header-drawer__link--parent svg {
transform: rotate(180deg);
}
.header-drawer__submenu {
list-style: none;
padding: 0 0 var(--space-2) var(--space-4);
margin: 0;
}
.header-drawer__sublink {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) 0;
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
font-size: 0.875rem;
}
.header-drawer__sublink:hover { color: rgb(var(--color-foreground)); }
.header-drawer__sublink--parent { cursor: pointer; list-style: none; }
.header-drawer__sublink--parent::-webkit-details-marker { display: none; }
.header-drawer__sublink--parent svg { transition: transform 0.2s ease; }
details[open] > .header-drawer__sublink--parent svg { transform: rotate(180deg); }
.header-drawer__submenu--nested {
padding-inline-start: var(--space-4);
}
.header-drawer__sublink--view-all {
font-weight: 500;
color: rgb(var(--color-accent-1));
}
/* Footer slot */
.header-drawer__nav {
flex: 1;
}
.header-drawer__localization {
padding-block-start: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.15);
margin-block-start: auto;
}
.header-drawer__localization .header-localization {
display: flex;
}
.megamenu-group {
display: flex;
flex-direction: var(--direction, column);
gap: var(--gap);
align-items: var(--align, stretch);
padding: var(--padding);
}
.megamenu-group[data-width="fill"] { flex: 1; }
.megamenu-group[data-width="25%"] { width: 25%; flex-shrink: 0; }
.megamenu-group[data-width="33%"] { width: 33.33%; flex-shrink: 0; }
.megamenu-group[data-width="40%"] { width: 40%; flex-shrink: 0; }
.megamenu-group[data-width="50%"] { width: 50%; flex-shrink: 0; }
.megamenu-group[data-width="60%"] { width: 60%; flex-shrink: 0; }
.header-menu__item--megamenu {
position: static;
}
/* A megamenu takes the place of the menu link at its position. The header
can't read the blocks of its static megamenus container, so the menu hides
the link here. */
.header-menu:has(> [data-megamenu-position="1"]) > [data-menu-position="1"],
.header-menu:has(> [data-megamenu-position="2"]) > [data-menu-position="2"],
.header-menu:has(> [data-megamenu-position="3"]) > [data-menu-position="3"],
.header-menu:has(> [data-megamenu-position="4"]) > [data-menu-position="4"],
.header-menu:has(> [data-megamenu-position="5"]) > [data-menu-position="5"],
.header-menu:has(> [data-megamenu-position="6"]) > [data-menu-position="6"],
.header-menu:has(> [data-megamenu-position="7"]) > [data-menu-position="7"],
.header-menu:has(> [data-megamenu-position="8"]) > [data-menu-position="8"] {
display: none;
}
.megamenu {
position: absolute;
inset-inline: 0;
top: 100%;
z-index: var(--z-dropdown);
background: rgb(var(--color-background));
box-shadow: var(--shadow-popover);
clip-path: inset(0 0 100% 0);
transition: clip-path var(--duration-normal) var(--ease-out);
}
[data-has-megamenu]:has([aria-expanded="true"]) .megamenu {
clip-path: inset(0 0 0 0);
}
.megamenu__inner {
padding: var(--megamenu-padding);
opacity: 0;
transform: translateY(-8px);
transition:
opacity calc(var(--duration-normal) * 0.7) var(--ease-out),
transform calc(var(--duration-normal) * 0.7) var(--ease-out);
transition-delay: calc(var(--duration-normal) * 0.3);
}
[data-has-megamenu]:has([aria-expanded="true"]) .megamenu__inner {
opacity: 1;
transform: translateY(0);
}
.megamenu__grid {
display: grid;
grid-template-columns: repeat(var(--megamenu-cols, 4), 1fr);
gap: var(--megamenu-gap);
}
.megamenu__flex {
display: flex;
flex-direction: var(--megamenu-direction, row);
gap: var(--megamenu-gap);
}
.header-wrapper--pill.is-scrolled .megamenu {
border-end-start-radius: var(--pill-radius, 16px);
border-end-end-radius: var(--pill-radius, 16px);
overflow: hidden;
}
@media (width < 750px) {
.megamenu {
display: none;
}
[data-has-megamenu] .header-menu__link--toggle svg {
display: none;
}
}
.header-notification {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
text-decoration: none;
color: inherit;
border-radius: var(--radius-card);
transition: background 0.15s ease;
}
a.header-notification:hover {
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.header-notification + .header-notification {
border-block-start: 1px solid rgba(var(--color-border), 0.1);
}
.header-notification__badge {
flex-shrink: 0;
font-size: 0.6875rem;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--radius-badge);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.header-notification__content {
font-size: 0.8125rem;
line-height: 1.4;
}
.header-notifications {
position: relative;
}
.header-notifications__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-2);
}
.header-notifications__badge {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 0.625rem;
font-weight: 700;
line-height: 1;
color: rgb(var(--color-background));
background: rgb(var(--color-accent-1));
border-radius: 9px;
}
.header-notifications__dropdown {
position: absolute;
inset-inline-end: 0;
top: 100%;
width: 320px;
max-height: 400px;
overflow-y: auto;
background: rgb(var(--color-background));
box-shadow: var(--shadow-popover);
border-radius: var(--radius-popover);
padding: var(--space-3);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: var(--z-dropdown);
}
.header-notifications__dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hotspot {
display: flex;
align-items: center;
justify-content: center;
}
.hotspot__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--hotspot-size);
height: var(--hotspot-size);
background: none;
border: none;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.hotspot__dot {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--hotspot-bg);
}
.hotspot__dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40%;
height: 40%;
background: var(--hotspot-bullseye);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease;
}
@media (hover: hover) {
.hotspot__trigger:hover .hotspot__dot::after,
.hotspot:has(.hotspot__dialog[open]) .hotspot__dot::after {
width: 55%;
height: 55%;
}
}
.hotspot__trigger:focus-visible {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: 4px;
border-radius: 50%;
}
/* Pulse animation — 3 cycles then stop */
.hotspot__pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--hotspot-bg);
animation: hotspot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 3;
pointer-events: none;
}
.hotspot:has(.hotspot__dialog[open]) .hotspot__pulse {
animation: none;
opacity: 0;
}
@keyframes hotspot-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0; transform: scale(1.8); }
}
/* Dialog — desktop popover */
.hotspot__dialog {
position: absolute;
padding: 0;
border: 1px solid rgba(var(--color-border), 0.15);
border-radius: var(--radius-popover);
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-popover);
width: max-content;
min-width: 240px;
max-width: 300px;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.hotspot__dialog[open] {
opacity: 1;
transform: scale(1);
}
/* Dialog placement */
.hotspot__dialog[data-placement*="right"] { left: calc(100% + 8px); right: unset; }
.hotspot__dialog[data-placement*="left"] { right: calc(100% + 8px); left: unset; }
.hotspot__dialog[data-placement*="center"] { left: 50%; translate: -50% 0; }
.hotspot__dialog[data-placement*="bottom"] { top: var(--dialog-offset-y, 0px); bottom: unset; }
.hotspot__dialog[data-placement*="top"] { bottom: var(--dialog-offset-y, 0px); top: unset; }
/* Safety triangle — prevents close when moving mouse from trigger to dialog */
.hotspot__dialog[open]::before {
content: '';
position: absolute;
inset: -12px;
z-index: -1;
}
.hotspot__dialog-inner {
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Product hotspot */
.hotspot__product {
display: flex;
gap: var(--space-3);
text-decoration: none;
color: inherit;
}
.hotspot__product:hover .hotspot__product-title {
text-decoration: underline;
}
.hotspot__product-image {
flex-shrink: 0;
width: 80px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.hotspot__product-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
.hotspot__product-info {
display: flex;
flex-direction: column;
gap: var(--space-1);
justify-content: center;
min-width: 0;
}
.hotspot__product-title {
font-size: 0.875rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.hotspot__product-price {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: 0.8125rem;
}
.hotspot__price-compare {
color: rgb(var(--color-foreground-secondary));
text-decoration: line-through;
}
.hotspot__price-current--sale {
color: rgb(var(--color-error));
}
.hotspot__add-btn {
width: 100%;
}
.hotspot__sold-out {
text-align: center;
font-size: 0.75rem;
}
/* Content hotspot */
.hotspot__content-title {
font-size: 0.9375rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.hotspot__content-text {
font-size: 0.8125rem;
line-height: 1.5;
}
/* Placeholder (design mode) */
.hotspot__placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
color: rgb(var(--color-foreground-secondary));
font-size: 0.8125rem;
}
.hotspot__placeholder-svg {
width: 60px;
height: 60px;
}
/* Mobile: dialog becomes bottom sheet */
@media (width < 750px) {
.hotspot__dialog[open] {
position: fixed;
inset: auto 0 0 0;
width: 100%;
max-width: 100%;
min-width: unset;
max-height: 70vh;
overflow-y: auto;
border-radius: var(--radius-card) var(--radius-card) 0 0;
padding-block-end: env(safe-area-inset-bottom);
z-index: var(--z-modal);
transform: translateY(0);
animation: hotspot-sheet-up 0.3s var(--ease-out);
}
.hotspot__dialog[open]::backdrop {
background: rgba(0, 0, 0, var(--backdrop-opacity));
}
.hotspot__dialog[open]::before {
display: none;
}
.hotspot__dialog-inner {
padding: var(--space-4) var(--space-4) var(--space-6);
}
.hotspot__product-image {
width: 100px;
}
}
@keyframes hotspot-sheet-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hotspot__pulse { animation: none; }
.hotspot__dialog { transition: none; }
.hotspot__dialog[open] { animation: none; }
}
/* ============================================
BASE
============================================ */
.iwt-media {
position: relative;
}
.iwt-media--single {
overflow: hidden;
border-radius: var(--iwt-m-radius, var(--radius-card));
}
.iwt-media img,
.iwt-media .block-image__placeholder-svg {
display: block;
width: 100%;
height: auto;
}
.iwt-media > style {
display: none;
}
/* ============================================
SINGLE — first child visible, others hidden
============================================ */
.iwt-media--single > .block-image ~ .block-image {
display: none;
}
/* ============================================
GRID — 2 columns, offset on even items
============================================ */
.iwt-media--grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--iwt-m-gap);
overflow: visible;
padding-block-end: 3rem;
}
.iwt-media--grid > :nth-child(even of .block-image) {
translate: 0 3rem;
}
.iwt-media--grid > .block-image {
border-radius: var(--iwt-m-radius, var(--radius-card));
overflow: hidden;
}
/* 1 image */
.iwt-media--grid:has(:nth-child(1 of .block-image)):not(:has(:nth-child(2 of .block-image))) {
grid-template-columns: 1fr;
}
/* 3 images */
.iwt-media--grid:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) {
grid-template-rows: auto auto;
}
.iwt-media--grid:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(2 of .block-image) {
grid-column: 2;
grid-row: 1 / span 2;
translate: 0 4rem;
align-self: start;
}
.iwt-media--grid:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(3 of .block-image) {
grid-column: 1;
grid-row: 2;
}
/* 4 images */
.iwt-media--grid:has(:nth-child(4 of .block-image)) > :nth-child(2 of .block-image) {
translate: 0 4rem;
}
.iwt-media--grid:has(:nth-child(4 of .block-image)) > :nth-child(4 of .block-image) {
translate: 0 4rem;
}
/* ============================================
COLLAGE + OVERLAP-CARDS — shared base
Position relative container, absolute children.
First image stays in flow to give height.
============================================ */
.iwt-media--collage,
.iwt-media--overlap-cards {
position: relative;
padding: 1rem;
padding-block-end: var(--c-pad-bottom, 1rem);
}
.iwt-media--collage > .block-image,
.iwt-media--overlap-cards > .block-image {
position: absolute;
width: var(--c-w, 50%);
top: var(--c-top, 0);
left: var(--c-left, 0);
transform: rotate(var(--c-rot, 0deg));
z-index: var(--c-z, 1);
margin: 0;
border-radius: var(--iwt-m-radius, var(--radius-card));
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
/* First image stays in flow — gives height to container */
.iwt-media--collage > .block-image:first-child,
.iwt-media--overlap-cards > .block-image:first-child {
position: relative;
}
/* Images keep natural ratio */
.iwt-media--collage > .block-image img,
.iwt-media--overlap-cards > .block-image img,
.iwt-media--collage > .block-image .block-image__placeholder-svg,
.iwt-media--overlap-cards > .block-image .block-image__placeholder-svg {
width: 100%;
height: auto;
}
/* Hover — bring to front */
.iwt-media--collage > .block-image:hover,
.iwt-media--overlap-cards > .block-image:hover {
z-index: 10;
transform: rotate(0deg) scale(1.03);
box-shadow: var(--shadow-lift);
}
/* 1 image — display as single, no effects */
.iwt-media--collage:has(:nth-child(1 of .block-image)):not(:has(:nth-child(2 of .block-image))),
.iwt-media--overlap-cards:has(:nth-child(1 of .block-image)):not(:has(:nth-child(2 of .block-image))) {
padding: 0;
overflow: hidden;
border-radius: var(--iwt-m-radius, var(--radius-card));
--c-pad-bottom: 0;
}
.iwt-media--collage:has(:nth-child(1 of .block-image)):not(:has(:nth-child(2 of .block-image))) > .block-image,
.iwt-media--overlap-cards:has(:nth-child(1 of .block-image)):not(:has(:nth-child(2 of .block-image))) > .block-image {
position: relative;
width: 100%;
box-shadow: none;
cursor: default;
transform: none;
}
/* ============================================
COLLAGE — photos on a table
============================================ */
/* 2 images — diagonal */
.iwt-media--collage:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) {
--c-pad-bottom: 25%;
}
.iwt-media--collage:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) > :nth-child(1 of .block-image) {
--c-w: 52%; --c-rot: -2deg; --c-z: 1;
}
.iwt-media--collage:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) > :nth-child(2 of .block-image) {
--c-w: 48%; --c-top: 20%; --c-left: 48%; --c-rot: 3deg; --c-z: 2;
}
/* 3 images — triangle */
.iwt-media--collage:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) {
--c-pad-bottom: 55%;
}
.iwt-media--collage:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(1 of .block-image) {
--c-w: 44%; --c-rot: -2deg; --c-z: 1;
}
.iwt-media--collage:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(2 of .block-image) {
--c-w: 40%; --c-top: -3%; --c-left: 55%; --c-rot: 2deg; --c-z: 2;
}
.iwt-media--collage:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(3 of .block-image) {
--c-w: 42%; --c-top: 36%; --c-left: 30%; --c-rot: -1deg; --c-z: 3;
}
/* 4 images — scattered */
.iwt-media--collage:has(:nth-child(4 of .block-image)) {
--c-pad-bottom: 50%;
}
.iwt-media--collage:has(:nth-child(4 of .block-image)) > :nth-child(1 of .block-image) {
--c-w: 38%; --c-top: 0; --c-left: 2%; --c-rot: -2.5deg; --c-z: 2;
}
.iwt-media--collage:has(:nth-child(4 of .block-image)) > :nth-child(2 of .block-image) {
--c-w: 34%; --c-top: 2%; --c-left: 50%; --c-rot: 3deg; --c-z: 1;
}
.iwt-media--collage:has(:nth-child(4 of .block-image)) > :nth-child(3 of .block-image) {
--c-w: 36%; --c-top: 34%; --c-left: 18%; --c-rot: 1.5deg; --c-z: 3;
}
.iwt-media--collage:has(:nth-child(4 of .block-image)) > :nth-child(4 of .block-image) {
--c-w: 32%; --c-top: 34%; --c-left: 64%; --c-rot: -2deg; --c-z: 4;
}
/* ============================================
OVERLAP-CARDS — staircase / fan spread
============================================ */
/* 2 images — diagonal staircase */
.iwt-media--overlap-cards:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) {
--c-pad-bottom: 25%;
}
.iwt-media--overlap-cards:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) > :nth-child(1 of .block-image) {
--c-w: 55%; --c-rot: -3deg; --c-z: 2;
}
.iwt-media--overlap-cards:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) > :nth-child(2 of .block-image) {
--c-w: 52%; --c-top: 20%; --c-left: 42%; --c-rot: 2deg; --c-z: 1;
}
/* 3 images — staircase */
.iwt-media--overlap-cards:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) {
--c-pad-bottom: 35%;
}
.iwt-media--overlap-cards:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(1 of .block-image) {
--c-w: 46%; --c-rot: -3deg; --c-z: 3;
}
.iwt-media--overlap-cards:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(2 of .block-image) {
--c-w: 44%; --c-top: 18%; --c-left: 28%; --c-rot: 1.5deg; --c-z: 2;
}
.iwt-media--overlap-cards:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(3 of .block-image) {
--c-w: 42%; --c-top: 35%; --c-left: 52%; --c-rot: -1.5deg; --c-z: 1;
}
/* 4 images — fan spread */
.iwt-media--overlap-cards:has(:nth-child(4 of .block-image)) {
--c-pad-bottom: 30%;
}
.iwt-media--overlap-cards:has(:nth-child(4 of .block-image)) > :nth-child(1 of .block-image) {
--c-w: 38%; --c-rot: -3deg; --c-z: 4;
}
.iwt-media--overlap-cards:has(:nth-child(4 of .block-image)) > :nth-child(2 of .block-image) {
--c-w: 36%; --c-top: 10%; --c-left: 20%; --c-rot: -1deg; --c-z: 3;
}
.iwt-media--overlap-cards:has(:nth-child(4 of .block-image)) > :nth-child(3 of .block-image) {
--c-w: 35%; --c-top: 20%; --c-left: 40%; --c-rot: 1deg; --c-z: 2;
}
.iwt-media--overlap-cards:has(:nth-child(4 of .block-image)) > :nth-child(4 of .block-image) {
--c-w: 34%; --c-top: 30%; --c-left: 60%; --c-rot: 3deg; --c-z: 1;
}
/* ============================================
HERO — 1 large + smaller images around
============================================ */
.iwt-media--hero {
display: grid;
gap: var(--iwt-m-gap);
align-items: start;
}
.iwt-media--hero > .block-image {
border-radius: var(--iwt-m-radius, var(--radius-card));
overflow: hidden;
}
/* 1 image — full width */
.iwt-media--hero:has(:nth-child(1 of .block-image)):not(:has(:nth-child(2 of .block-image))) {
grid-template-columns: 1fr;
}
/* 2 images — large left + small right */
.iwt-media--hero:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) {
grid-template-columns: 2fr 1fr;
}
.iwt-media--hero:has(:nth-child(2 of .block-image)):not(:has(:nth-child(3 of .block-image))) > :nth-child(2 of .block-image) {
align-self: end;
}
/* 3 images — large left spanning 2 rows + 2 small right */
.iwt-media--hero:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) {
grid-template-columns: minmax(0, calc(66.666% + var(--iwt-m-gap) / 2)) minmax(0, calc(33.333% - var(--iwt-m-gap) / 2));
grid-template-rows: auto auto;
}
.iwt-media--hero:has(:nth-child(3 of .block-image)):not(:has(:nth-child(4 of .block-image))) > :nth-child(1 of .block-image) {
grid-row: span 2;
}
/* 4 images — large left spanning 2 rows + 2 small right + 1 small bottom */
.iwt-media--hero:has(:nth-child(4 of .block-image)) {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.iwt-media--hero:has(:nth-child(4 of .block-image)) > :nth-child(1 of .block-image) {
grid-row: span 2;
}
.iwt-media--hero .image-wrapper--adapt .image-wrapper__img {
height: auto;
object-fit: initial;
}
/* ============================================
MOBILE RESPONSIVE
Hero + Grid: identical to desktop.
Collage + Overlap-cards: stack vertically (rotations/overlaps too noisy at small sizes).
============================================ */
@media (width < 750px) {
.iwt-media--collage,
.iwt-media--overlap-cards {
display: flex;
flex-direction: column;
gap: var(--iwt-m-gap);
padding: 0;
--c-pad-bottom: 0;
}
.iwt-media--collage > .block-image,
.iwt-media--overlap-cards > .block-image {
position: static;
width: 100%;
transform: none;
box-shadow: none;
}
}
.product-atc__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); position: relative; }
.product-atc__text { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.product-atc__price,
.product-atc-sticky__price { font-variant-numeric: tabular-nums; }
.product-atc__price:empty { display: none; }
.product-atc__icon { display: flex; }
.product-atc[hidden] { display: none; }
/* A reflection crosses the button once when it reaches the screen, and again when a
variant that can be bought is picked (the product form replays it), never on a sold
out button. */
@media (prefers-reduced-motion: no-preference) {
.product-atc__button[data-animate="shine"].animating:not(:disabled)::after {
content: "";
position: absolute;
inset: 0;
translate: -100% 0;
background: linear-gradient(105deg, transparent 42%, rgba(var(--color-background), 0.5) 50%, transparent 58%);
animation: atc-shine calc(var(--duration-slow) * 2) var(--ease-out);
}
}
@keyframes atc-shine {
to { translate: 100% 0; }
}
@media (width < 750px) {
.product-atc__button {
--button-font-size: min(var(--buttons-font-size), 1rem);
--button-padding-block: min(var(--buttons-space-vertical), var(--space-3));
--button-padding-inline: min(var(--buttons-space-horizontal), var(--space-4));
--button-radius: min(var(--buttons-radius), var(--space-4));
min-width: 0;
}
.product-atc__text {
min-width: 0;
max-width: 100%;
flex-wrap: wrap;
justify-content: center;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.2;
text-align: center;
}
}
/* ── Notify form ── */
.product-notify[hidden] { display: none; }
.product-notify__heading {
font-weight: 600;
font-size: 0.9375rem;
margin: 0 0 var(--space-1);
}
.product-notify__description {
color: rgb(var(--color-foreground-secondary));
font-size: var(--font-body--size-small);
margin: 0 0 var(--space-3);
}
.product-notify__form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.product-notify__input {
flex: 1;
min-width: 0;
padding: var(--space-3);
border: 1px solid rgba(var(--color-foreground), 0.2);
border-radius: var(--radius-card);
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
font-family: inherit;
font-size: var(--font-body--size);
line-height: 1.5;
transition: border-color var(--duration-fast) var(--ease-out);
}
.product-notify__input::placeholder { color: rgba(var(--color-foreground), 0.4); }
.product-notify__input:focus { outline: none; border-color: rgb(var(--color-accent-1)); }
.product-notify__success {
color: rgb(var(--color-accent-1));
font-size: var(--font-body--size-small);
font-weight: 500;
margin: var(--space-2) 0 0;
animation: notify-success 0.3s var(--ease-out);
}
@keyframes notify-success {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.product-notify__input { transition: none; }
.product-notify__success { animation: none; }
}
/* ── Sticky ATC ── */
.product-atc-sticky {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: var(--z-sticky);
background: rgb(var(--color-background));
border-block-start: 1px solid rgba(var(--color-foreground), 0.1);
box-shadow: 0 -4px 12px rgba(var(--color-foreground), 0.06);
transform: translateY(100%);
transition: transform var(--duration-normal) var(--ease-out);
padding-block-end: env(safe-area-inset-bottom, 0px);
}
.product-atc-sticky.is-visible { transform: translateY(0); }
/* The bar is fixed to the viewport: the section's side margin does not reach it. */
.product-atc-sticky__inner {
--section-side-margin: 0px;
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3); padding-block: var(--space-3);
}
.product-atc-sticky__product {
display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1;
}
.product-atc-sticky__image {
width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;
}
.product-atc-sticky__info { display: flex; flex-direction: column; min-width: 0; }
.product-atc-sticky__title {
font-weight: 500; font-size: 0.8125rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-atc-sticky__variant { font-size: 0.75rem; color: rgb(var(--color-foreground-secondary)); }
.product-atc-sticky .product-atc-sticky__edit { flex-shrink: 0; min-block-size: 44px; }
.product-atc-sticky__edit[hidden] { display: none; }
.product-atc-sticky__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.product-atc-sticky__button { position: relative; }
.product-atc-sticky__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.product-atc-sticky__compare { font-size: 0.75rem; color: rgb(var(--color-foreground-secondary)); text-decoration: line-through; }
.product-atc-sticky__compare[hidden] { display: none; }
.product-atc-sticky__current-price { font-weight: 600; }
.product-atc-sticky__quantity { font-size: 0.75rem; color: rgb(var(--color-foreground-secondary)); }
.product-atc-sticky__quantity[hidden] { display: none; }
.product-atc-sticky__quantity::before { content: '×'; }
@media (prefers-reduced-motion: reduce) {
.product-atc-sticky { transition: none; }
}
scale-bundle-addons {
display: block;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.bundle-addons__title {
font-size: 0.9375rem;
font-weight: 600;
margin: 0 0 var(--space-2);
}
.bundle-addons__description {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-3);
}
.bundle-addons__items {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bundle-addons__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.bundle-addons__item[data-active="true"] {
border-color: rgb(var(--color-accent-1));
background: rgba(var(--color-accent-1), 0.04);
}
.bundle-addons__checkbox {
flex-shrink: 0;
}
.bundle-addons__image {
flex-shrink: 0;
width: var(--image-width);
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
}
.bundle-addons__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bundle-addons__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bundle-addons__name {
font-size: 0.875rem;
font-weight: 500;
}
.bundle-addons__price {
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: rgb(var(--color-foreground-secondary));
}
.bundle-addons__variant-select {
padding: var(--space-1) var(--space-2);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-sm);
background: rgb(var(--color-background));
color: inherit;
font-size: 0.8125rem;
}
.bundle-addons__button {
flex-shrink: 0;
}
.bundle-addons__button-add,
.bundle-addons__button-added,
.bundle-addons__button-remove { display: none; }
.bundle-addons__button .bundle-addons__button-add { display: inline; }
.bundle-addons__item[data-active="true"] .bundle-addons__button { background: rgb(var(--color-accent-1)); color: rgb(var(--color-background)); border-color: rgb(var(--color-accent-1)); }
.bundle-addons__item[data-active="true"] .bundle-addons__button .bundle-addons__button-add { display: none; }
.bundle-addons__item[data-active="true"] .bundle-addons__button:not(:hover) .bundle-addons__button-added { display: inline; }
.bundle-addons__item[data-active="true"] .bundle-addons__button:hover .bundle-addons__button-remove { display: inline; }
.bundle-addons__placeholder {
padding: var(--space-4);
text-align: center;
color: rgba(var(--color-foreground), 0.4);
font-size: var(--font-body--size-small);
background: rgba(var(--color-foreground), 0.03);
border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
.bundle-addons__item { transition: none; }
}
.bundle-contains {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.bundle-contains__title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 var(--space-2);
}
.bundle-contains__description {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-3);
}
.bundle-contains__items {
display: flex;
gap: var(--space-3);
}
.bundle-contains__items--list {
flex-direction: column;
}
.bundle-contains__items--grid {
flex-wrap: wrap;
}
.bundle-contains__items--grid > * {
flex: 1 1 120px;
}
scale-bundle-cross-sell {
display: block;
container-type: inline-size;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.bundle-cross-sell__title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 var(--space-2);
}
.bundle-cross-sell__description {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-3);
}
.bundle-cross-sell__products {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bundle-cross-sell--row .bundle-cross-sell__products {
flex-direction: row;
flex-wrap: wrap;
}
.bundle-cross-sell__product {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-md);
}
.bundle-cross-sell--row .bundle-cross-sell__product {
flex: 1 1 200px;
min-width: 180px;
}
.bundle-cross-sell__image {
flex-shrink: 0;
width: var(--image-width);
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
}
.bundle-cross-sell__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bundle-cross-sell__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bundle-cross-sell__name {
font-size: 0.875rem;
font-weight: 500;
color: inherit;
text-decoration: none;
}
.bundle-cross-sell__name:hover {
text-decoration: underline;
}
.bundle-cross-sell__price {
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: rgb(var(--color-foreground-secondary));
}
.bundle-cross-sell__options-label {
font-size: 0.75rem;
font-weight: 500;
color: rgb(var(--color-foreground-secondary));
}
.bundle-cross-sell__variant-select {
padding: var(--space-1) var(--space-2);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-sm);
background: rgb(var(--color-background));
color: inherit;
font-size: 0.8125rem;
}
.bundle-cross-sell__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
margin-block-start: var(--space-4);
padding-block-start: var(--space-3);
border-block-start: 1px solid rgb(var(--color-border));
}
.bundle-cross-sell__summary {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bundle-cross-sell__badge {
display: inline-flex;
align-self: flex-start;
padding: 2px var(--space-2);
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
border-radius: var(--radius-sm);
}
.bundle-cross-sell__total {
display: flex;
font-variant-numeric: tabular-nums;
align-items: baseline;
gap: var(--space-2);
}
.bundle-cross-sell__total-compare {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
}
.bundle-cross-sell__total-price {
font-weight: 700;
font-size: 1.125rem;
}
.bundle-cross-sell__placeholder {
padding: var(--space-4);
text-align: center;
color: rgba(var(--color-foreground), 0.4);
font-size: var(--font-body--size-small);
background: rgba(var(--color-foreground), 0.03);
border-radius: var(--radius-md);
}
@container (max-width: 350px) {
.bundle-cross-sell__image { width: 60px; }
.bundle-cross-sell__atc { width: 100%; }
.bundle-cross-sell__footer { flex-direction: column; align-items: stretch; }
}
scale-bundle-pack {
display: block;
container-type: inline-size;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.bundle-pack__title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 var(--space-2);
}
.bundle-pack__description {
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-3);
}
.bundle-pack__progress {
margin-block-end: var(--space-3);
}
.bundle-pack__progress-bar {
height: 6px;
background: rgba(var(--color-foreground), 0.08);
border-radius: var(--radius-full);
overflow: hidden;
}
.bundle-pack__progress-fill {
height: 100%;
width: 0%;
background: rgb(var(--color-accent-1));
border-radius: var(--radius-full);
transition: width var(--duration-normal) var(--ease-out);
}
.bundle-pack__progress-text {
display: block;
margin-block-start: var(--space-1);
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
}
.bundle-pack__items {
display: grid;
gap: var(--space-2);
}
.bundle-pack--grid .bundle-pack__items {
grid-template-columns: repeat(2, 1fr);
}
.bundle-pack__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.bundle-pack__item[data-selected="true"] {
border-color: rgb(var(--color-accent-1));
background: rgba(var(--color-accent-1), 0.04);
}
.bundle-pack__item[data-max-reached="true"]:not([data-selected="true"]) {
opacity: 0.4;
cursor: not-allowed;
}
.bundle-pack__checkbox {
flex-shrink: 0;
}
.bundle-pack__image {
flex-shrink: 0;
width: var(--image-width);
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
}
.bundle-pack__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bundle-pack__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bundle-pack__name {
font-size: 0.875rem;
font-weight: 500;
}
.bundle-pack__price {
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: rgb(var(--color-foreground-secondary));
}
.bundle-pack__variant-select {
padding: var(--space-1) var(--space-2);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-sm);
background: rgb(var(--color-background));
color: inherit;
font-size: 0.8125rem;
}
.bundle-pack__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-start: var(--space-4);
padding-block-start: var(--space-3);
border-block-start: 1px solid rgb(var(--color-border));
flex-wrap: wrap;
}
.bundle-pack__total {
display: flex;
font-variant-numeric: tabular-nums;
align-items: baseline;
gap: var(--space-2);
}
.bundle-pack__total-label { font-size: 0.875rem; }
.bundle-pack__total-price { font-weight: 700; font-size: 1.125rem; }
.bundle-pack__atc[disabled] { opacity: 0.5; cursor: not-allowed; }
.bundle-pack__placeholder {
padding: var(--space-4);
text-align: center;
color: rgba(var(--color-foreground), 0.4);
font-size: var(--font-body--size-small);
background: rgba(var(--color-foreground), 0.03);
border-radius: var(--radius-md);
}
@container (max-width: 350px) {
.bundle-pack--grid .bundle-pack__items { grid-template-columns: 1fr; }
.bundle-pack__atc { width: 100%; }
.bundle-pack__footer { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
.bundle-pack__item,
.bundle-pack__progress-fill { transition: none; }
}
.variant-bundle-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-md);
}
.variant-bundle-item[data-unresolved="true"] {
border-color: rgb(var(--color-error));
background: rgba(var(--color-error), var(--opacity-subtle));
}
.variant-bundle-item__image {
flex-shrink: 0;
width: 64px;
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
}
.variant-bundle-item__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.variant-bundle-item__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.variant-bundle-item__name {
font-size: 0.875rem;
font-weight: 500;
}
.variant-bundle-item__meta,
.variant-bundle-item__resolved {
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: rgb(var(--color-foreground-secondary));
}
.variant-bundle-item__select {
width: 100%;
padding: var(--space-1) var(--space-2);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-sm);
background: rgb(var(--color-background));
color: inherit;
font-size: 0.8125rem;
}
.variant-bundle-item__placeholder {
color: rgba(var(--color-foreground), 0.45);
font-size: var(--font-body--size-small);
}
scale-variant-bundle {
display: block;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.variant-bundle__title {
font-size: 0.9375rem;
font-weight: 600;
margin: 0 0 var(--space-2);
}
.variant-bundle__description {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-3);
}
.variant-bundle__items {
display: grid;
gap: var(--space-2);
}
.variant-bundle__status {
margin-block-start: var(--space-2);
font-size: var(--font-body--size-small);
color: rgb(var(--color-error));
}
.variant-bundle__status[hidden] {
display: none;
}
.product-card-gallery {
position: relative;
overflow: hidden;
aspect-ratio: var(--pcg-aspect);
}
.product-card-gallery--rounded {
border-radius: var(--radius-card);
}
.product-card-gallery__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: var(--pcg-fit);
transition: opacity var(--duration-slow) var(--ease-in-out), scale calc(var(--duration-slow) * 3) var(--ease-out);
}
/* Only the second image fades, over the first: no dip to the background half way. */
.product-card-gallery__img--secondary {
opacity: 0;
}
.product-card-gallery:not([data-thumbnails]) {
transition: box-shadow var(--duration-slow) var(--ease-out);
}
scale-product-card:has(:focus-visible) .product-card-gallery--swap .product-card-gallery__img--secondary {
opacity: 1;
}
scale-product-card:has(:focus-visible) .product-card-gallery:not([data-thumbnails]) {
box-shadow: var(--shadow-lift);
}
@media (hover: hover) {
scale-product-card:hover .product-card-gallery--swap .product-card-gallery__img--secondary {
opacity: 1;
}
scale-product-card:hover .product-card-gallery:not([data-thumbnails]) {
box-shadow: var(--shadow-lift);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
scale-product-card:hover .product-card-gallery:not([data-thumbnails]) .product-card-gallery__img {
scale: 1.06;
}
}
.product-card-gallery__placeholder {
width: 100%;
height: 100%;
background: rgba(var(--color-foreground), 0.04);
display: flex;
align-items: center;
justify-content: center;
}
.product-card-gallery__placeholder-svg {
width: 100%;
height: 100%;
}
.product-card-gallery__dots {
position: absolute;
bottom: var(--space-2);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--space-1);
z-index: 2;
}
.product-card-gallery__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: rgb(255 255 255 / 0.5);
border: none;
padding: 8px;
margin: 0;
background-clip: content-box;
cursor: pointer;
transition: background 0.2s ease;
}
.product-card-gallery__dot.active {
background: rgb(255 255 255 / 1);
background-clip: content-box;
}
scale-product-card-gallery {
display: block;
position: relative;
overflow: hidden;
}
/* Thumbnails mode */
scale-product-card-gallery[data-thumbnails] {
overflow: visible;
}
.product-card-gallery__thumbs {
display: flex;
gap: var(--space-1);
margin-block-start: var(--space-2);
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(var(--color-foreground), 0.15) transparent;
}
.product-card-gallery__thumbs::-webkit-scrollbar {
height: 3px;
}
.product-card-gallery__thumbs::-webkit-scrollbar-thumb {
background: rgba(var(--color-foreground), 0.15);
border-radius: 2px;
}
.product-card-gallery__thumb {
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0;
border: 2px solid transparent;
border-radius: var(--radius-xs);
background: none;
cursor: pointer;
overflow: hidden;
transition: border-color var(--duration-fast) var(--ease-out);
}
.product-card-gallery__thumb.active {
border-color: rgb(var(--color-foreground));
}
.product-card-gallery__thumb:hover {
border-color: rgba(var(--color-foreground), 0.4);
}
.product-card-gallery__thumb.active:hover {
border-color: rgb(var(--color-foreground));
}
.product-card-gallery__thumb-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.product-card-gallery__img,
.product-card-gallery:not([data-thumbnails]) {
transition: none;
}
.product-card-gallery__dot,
.product-card-gallery__thumb {
transition: none;
}
}
scale-quick-add {
display: block;
position: relative;
margin-block-start: auto;
}
/* Shopify's reason for a refusal, above the button. */
.product-card-quick-add__reason {
position: absolute;
inset-inline: 0;
inset-block-end: calc(100% + var(--space-2));
z-index: 3;
margin: 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-popover);
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
font-size: 0.8125rem;
line-height: 1.35;
text-align: center;
box-shadow: var(--shadow-popover);
transition: opacity var(--duration-normal) var(--ease-out), translate var(--duration-normal) var(--ease-out), display var(--duration-normal) allow-discrete;
}
.product-card-quick-add__reason::after {
content: "";
position: absolute;
inset-block-start: 100%;
inset-inline-start: 50%;
margin-inline-start: -6px;
border: 6px solid transparent;
border-block-start-color: rgb(var(--color-foreground));
}
.product-card-quick-add__reason[hidden] {
opacity: 0;
}
@starting-style {
.product-card-quick-add__reason {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
.product-card-quick-add__reason[hidden] {
translate: 0 4px;
}
@starting-style {
.product-card-quick-add__reason {
translate: 0 4px;
}
}
}
.product-card-quick-add__btn {
--button-min-height: var(--minimum-touch-target);
width: 100%;
position: relative;
z-index: 3;
}
.product-card-quick-add--hover {
opacity: 1;
transform: translateY(0);
transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-slow) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) and (width >= 750px) {
.product-card-quick-add--hover {
opacity: 0;
transform: translateY(var(--space-3));
}
scale-product-card:hover .product-card-quick-add--hover,
scale-product-card:focus-within .product-card-quick-add--hover {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.product-card-quick-add--hover {
transition: none;
}
}
scale-product-card-swatches {
display: block;
}
.product-card-swatches {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
}
.product-card-swatches__swatch {
--swatch-ring-gap: 3px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: var(--swatch-ring-gap);
border: 1.5px solid transparent;
background: none;
color: rgb(var(--color-foreground));
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out);
}
.product-card-swatches--normal .product-card-swatches__swatch {
width: 32px;
height: 32px;
}
.product-card-swatches--small .product-card-swatches__swatch {
width: 28px;
height: 28px;
}
.product-card-swatches--circle .product-card-swatches__swatch {
border-radius: var(--radius-full);
}
.product-card-swatches--square .product-card-swatches__swatch {
border-radius: var(--radius-xs);
}
.product-card-swatches__swatch.active {
border-color: currentColor;
}
.product-card-swatches__swatch:hover {
border-color: rgba(var(--color-foreground), 0.4);
}
.product-card-swatches__swatch.active:hover {
border-color: currentColor;
}
.product-card-swatches__color {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.1);
}
.product-card-swatches__swatch img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.product-card-swatches__fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
line-height: 1;
border-radius: inherit;
background: rgba(var(--color-foreground), 0.08);
color: rgba(var(--color-foreground), 0.7);
}
.product-card-swatches__overflow {
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
padding-inline: var(--space-1);
transition: color var(--duration-fast) ease;
}
.product-card-swatches__overflow:hover {
color: rgb(var(--color-foreground));
}
@media (prefers-reduced-motion: reduce) {
.product-card-swatches__swatch {
transition: none;
}
}
product-complementary {
display: block;
}
product-complementary[hidden] {
display: none;
}
.product-complementary__title {
margin-block-end: var(--space-4);
}
.product-complementary__grid {
display: grid;
gap: var(--space-4);
}
.product-complementary__grid--1 { grid-template-columns: 1fr; }
.product-complementary__grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Hide loading placeholders once loaded */
product-complementary:not([loading]) .product-complementary__loading {
display: none;
}
/* Hide grid while loading */
product-complementary[loading] .product-complementary__grid {
display: none;
}
/* Loading placeholders */
.product-complementary__loading {
display: grid;
gap: var(--space-4);
}
product-complementary .product-complementary__grid--1 ~ .product-complementary__loading {
grid-template-columns: 1fr;
}
product-complementary .product-complementary__grid--2 ~ .product-complementary__loading {
grid-template-columns: repeat(2, 1fr);
}
/* Product cards */
.complementary-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-decoration: none;
color: inherit;
border-radius: var(--radius-card);
transition: opacity var(--duration-normal) var(--ease-out);
}
.complementary-card:hover {
opacity: 0.8;
}
.complementary-card__media {
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-card);
background: rgba(var(--color-foreground), 0.04);
}
.complementary-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.complementary-card__title {
font-size: var(--font-body--size-small);
font-weight: 500;
line-height: 1.3;
margin: 0;
}
.complementary-card__price {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-size: var(--font-body--size-small);
font-weight: 600;
}
.complementary-card__price--sale {
color: rgb(var(--color-accent-2));
}
.complementary-card__compare {
color: rgb(var(--color-foreground-secondary));
text-decoration: line-through;
font-weight: 400;
font-size: 0.8em;
}
/* Placeholder styles */
.complementary-card__media--placeholder {
animation: complementary-pulse 1.5s ease-in-out infinite;
}
.complementary-card__title--placeholder {
height: 0.875rem;
width: 75%;
background: rgba(var(--color-foreground), 0.06);
border-radius: 4px;
animation: complementary-pulse 1.5s ease-in-out infinite;
}
.complementary-card__price--placeholder {
height: 0.875rem;
width: 40%;
background: rgba(var(--color-foreground), 0.04);
border-radius: 4px;
animation: complementary-pulse 1.5s ease-in-out infinite;
}
@keyframes complementary-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.complementary-card__media--placeholder,
.complementary-card__title--placeholder,
.complementary-card__price--placeholder {
animation: none;
}
}
scale-coupon {
display: block;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
text-align: start;
}
.product-coupon {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-body--size-small);
}
.product-coupon--badge {
padding: var(--space-2) var(--space-3);
background: rgba(var(--color-accent-1), 0.08);
border-radius: var(--radius-card);
}
.product-coupon--inline {
gap: var(--space-2);
}
.product-coupon--card {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--gradient-background);
border: 1px dashed rgba(var(--color-foreground), 0.2);
border-radius: var(--radius-card);
justify-content: space-between;
}
.product-coupon__label {
color: rgb(var(--color-foreground-secondary));
}
.product-coupon__code {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(var(--color-foreground));
padding: var(--space-1) var(--space-2);
background: rgba(var(--color-foreground), 0.06);
border-radius: var(--radius-sm);
font-family: monospace;
}
.product-coupon__copy {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-1) var(--space-2);
border: 1px solid rgba(var(--color-foreground), 0.15);
background: none;
cursor: pointer;
color: rgba(var(--color-foreground), 0.6);
border-radius: var(--radius-sm);
font-size: 0.75rem;
gap: var(--space-1);
transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.product-coupon__copy:hover {
color: rgb(var(--color-foreground));
background: rgba(var(--color-foreground), 0.06);
}
.product-coupon__success {
font-size: 0.75rem;
font-weight: 500;
color: rgb(var(--color-accent-1));
animation: coupon-success-in 0.3s var(--ease-out);
}
@keyframes coupon-success-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.product-coupon__copy {
transition: none;
}
.product-coupon__success {
animation: none;
}
}
.product-custom-property__label {
display: block;
font-size: var(--font-body--size-small);
font-weight: 500;
margin-block-end: var(--space-2);
color: rgb(var(--color-foreground));
}
.product-custom-property__label span {
color: rgb(var(--color-accent-2));
margin-inline-start: 2px;
}
.product-custom-property__input {
width: 100%;
padding: var(--space-3);
border: 1px solid rgba(var(--color-foreground), 0.2);
border-radius: var(--radius-card);
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
font-family: inherit;
font-size: var(--font-body--size);
line-height: 1.5;
transition: border-color var(--duration-fast) var(--ease-out);
}
.product-custom-property__input::placeholder {
color: rgba(var(--color-foreground), 0.4);
}
.product-custom-property__input:focus {
outline: none;
border-color: rgb(var(--color-accent-1));
}
.product-custom-property__input:hover:not(:focus) {
border-color: rgba(var(--color-foreground), 0.35);
}
.product-custom-property__textarea {
resize: vertical;
min-height: 80px;
}
.product-custom-property__checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--font-body--size-small);
}
.product-custom-property__checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: rgb(var(--color-accent-1));
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.product-custom-property__input {
transition: none;
}
}
delivery-estimation { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-body--size-small); }
delivery-estimation[hidden] { display: none; }
.product-delivery__icon { flex-shrink: 0; color: rgb(var(--color-accent-1)); }
.product-delivery__date { font-weight: 600; }
.product-description-block {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
/* Visually hidden but focusable: the label is the visible control, the
checkbox stays reachable by keyboard. */
.product-description-block__state {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.product-description-block--collapsible:not(:has(.product-description-block__state:checked)) .product-description {
max-height: 11em;
overflow: hidden;
mask-image: linear-gradient(to bottom, rgb(0 0 0) 55%, transparent 100%);
}
.product-description-block__toggle {
display: inline-flex;
align-items: center;
margin-block-start: var(--space-2);
font-size: var(--font-body--size-small);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.product-description-block__less,
.product-description-block:has(.product-description-block__state:checked) .product-description-block__more {
display: none;
}
.product-description-block:has(.product-description-block__state:checked) .product-description-block__less {
display: inline;
}
.product-description-block__state:focus-visible ~ .product-description-block__toggle {
outline: 2px solid rgb(var(--color-foreground));
outline-offset: 2px;
}
.product-form { display: flex; flex-direction: column; gap: var(--space-4); }
.product-form form { display: flex; flex-direction: column; gap: var(--space-4); }
.product-form__error[hidden] { display: none; }
.product-form__error {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-3); margin-block-end: var(--space-4);
background: rgba(var(--color-error), 0.08);
border-radius: var(--radius-badge);
color: rgb(var(--color-error));
font-size: var(--font-body--size-small);
}
.product-form__gift-card { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); padding: var(--space-4); border: 1px solid rgba(var(--color-border), 0.4); border-radius: var(--radius-card); }
.product-form__field label { display: block; font-size: var(--font-body--size-small); font-weight: 500; margin-block-end: var(--space-1); }
.product-form__field input, .product-form__field textarea { width: 100%; }
/* Text and icon keep the section's own colors, readable on any palette surface.
The style's hue only marks the edge, like the stock dot. */
.product-info-banner {
display: flex; align-items: flex-start; gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-inline-start: 3px solid rgb(var(--banner-accent));
border-radius: var(--radius-badge);
background: rgba(var(--color-foreground), var(--opacity-subtle));
color: rgb(var(--color-foreground));
font-size: var(--font-body--size-small);
line-height: 1.4;
}
.product-info-banner__icon { flex-shrink: 0; margin-block-start: 1px; }
.product-info-banner--info { --banner-accent: var(--color-accent-1); }
.product-info-banner--success { --banner-accent: var(--color-success); }
.product-info-banner--warning { --banner-accent: var(--color-warning); }
.product-info-banner--urgency { --banner-accent: var(--color-error); }
.product-info-banner--custom { border-inline-start: 0; background: var(--banner-bg); color: var(--banner-color); }
.product-info-zone {
display: flex;
flex-direction: column;
gap: var(--zone-gap);
min-width: 0;
}
/* Mobile stacks the zones in one column, in the section's mobile order.
Columns exist from 750px only: placed any earlier, `media-right` would
outrank the single column and open a second one beside the photo. */
@media (width >= 750px) {
.product-info-zone {
grid-column: 2;
}
.product-page--media-right .product-info-zone {
grid-column: 1;
}
}
/* ── Gallery container ── */
product-media-gallery { display: block; }
.product-media-gallery { position: relative; }
/* ── Slider ── */
.product-media-gallery__slider { position: relative; width: 100%; }
/* ── Ambient halo ── */
.product-media-gallery__ambient {
position: absolute;
inset: 6%;
z-index: -1;
pointer-events: none;
}
.product-media-gallery__ambient > span {
position: absolute;
inset: 0;
opacity: 0;
background-size: cover;
background-position: center;
filter: blur(44px) saturate(1.8);
}
.product-media-gallery__ambient > span.is-on { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
.product-media-gallery__ambient > span {
transition: opacity var(--duration-slow) var(--ease-out);
}
}
.product-media-gallery__viewport { position: relative; overflow: hidden; border-radius: var(--radius-media); width: 100%; }
/* ── Track (scroll-snap) ── */
.product-media-gallery__track {
display: flex;
align-items: flex-start;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
transition: height var(--duration-normal) var(--ease-out);
}
.product-media-gallery__track::-webkit-scrollbar { display: none; }
/* ── Slides ── */
.product-media-gallery__slide {
flex: 0 0 100%;
scroll-snap-align: start;
min-width: 0;
}
/* ── Transitions: fade & zoom (shared) ── */
.product-media-gallery--fade .product-media-gallery__track,
.product-media-gallery--zoom .product-media-gallery__track {
overflow: hidden;
scroll-snap-type: none;
}
.product-media-gallery--fade .product-media-gallery__slide,
.product-media-gallery--zoom .product-media-gallery__slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal) var(--ease-out);
}
.product-media-gallery--fade .product-media-gallery__slide:first-child,
.product-media-gallery--zoom .product-media-gallery__slide:first-child {
position: relative;
}
.product-media-gallery--fade .product-media-gallery__slide.is-active,
.product-media-gallery--zoom .product-media-gallery__slide.is-active {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
/* Zoom-specific: scale transform */
.product-media-gallery--zoom .product-media-gallery__slide {
transform: scale(0.95);
transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.product-media-gallery--zoom .product-media-gallery__slide.is-active {
transform: scale(1);
}
/* ── Arrows ── */
.product-media-gallery__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: var(--z-raised); display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border: none; border-radius: var(--radius-full);
background: rgb(var(--color-background)); color: rgb(var(--color-foreground));
box-shadow: var(--shadow-card); cursor: pointer;
opacity: 0.85;
transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal) allow-discrete;
}
.product-media-gallery__arrow:not(:disabled):hover,
.product-media-gallery__arrow:focus-visible {
opacity: 1;
}
/* Nothing further that way: the arrow leaves. Dimmed, a light button over a dark photo read as another, grey control. */
.product-media-gallery__arrow:disabled { opacity: 0; visibility: hidden; }
.product-media-gallery__arrow--prev { inset-inline-start: var(--space-3); }
.product-media-gallery__arrow--next { inset-inline-end: var(--space-3); }
/* ── Badges ── */
.product-media-gallery__badge {
position: absolute; top: var(--space-3); inset-inline-start: var(--space-3);
z-index: var(--z-raised);
padding: 2px var(--space-2); border-radius: var(--radius-badge);
font-size: var(--font-body--size-small); font-weight: 600;
}
.product-media-gallery__badge--sale { background: rgb(var(--color-accent-2)); color: rgb(var(--color-background)); }
.product-media-gallery__badge--soldout { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
/* ── Overlay (merchant claim pinned on the photo) ── */
.product-media-gallery__overlay {
position: absolute;
z-index: var(--z-raised);
display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-badge);
font-size: var(--font-body--size-small);
font-weight: 600;
line-height: 1.3;
max-inline-size: calc(100% - var(--space-3) * 2);
text-align: center;
}
.product-media-gallery__overlay--top {
top: var(--space-3); inset-inline-start: var(--space-3);
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
text-transform: uppercase;
letter-spacing: 0.06em;
}
.product-media-gallery__overlay--bottom {
bottom: var(--space-3); inset-inline: 0; margin-inline: auto;
width: fit-content;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
border: 1px solid rgba(var(--color-foreground), 0.12);
box-shadow: var(--shadow-card);
}
/* Never stack on what the gallery already pins in the same corner. */
.product-media-gallery__viewport:has(.product-media-gallery__badge) .product-media-gallery__overlay--top {
top: calc(var(--space-3) + 28px);
}
@media (width < 750px) {
.product-media-gallery__slider:has(.product-media-gallery__pagination) .product-media-gallery__overlay--bottom {
bottom: calc(var(--space-3) + 28px);
}
}
/* ── Pagination (shared) ── */
.product-media-gallery__pagination {
display: flex; justify-content: center; align-items: center;
margin-block-start: var(--space-3);
gap: var(--space-1);
}
/* Mobile: overlay on image */
@media (width < 750px) {
.product-media-gallery__pagination {
position: absolute;
inset-inline: 0;
bottom: var(--space-3);
margin: 0;
z-index: var(--z-raised);
pointer-events: none;
}
.product-media-gallery__pagination > * { pointer-events: auto; }
}
/* ── Pagination: dots & bars (shared) ── */
.product-media-gallery__indicators { display: flex; gap: 0; align-items: center; }
.product-media-gallery__indicator {
display: grid;
place-items: center;
inline-size: 24px;
block-size: 24px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.product-media-gallery__indicator::before {
content: '';
display: block;
background: rgba(var(--color-foreground), 0.25);
transition: background var(--duration-fast) var(--ease-out);
}
.product-media-gallery__indicator.is-active::before {
background: rgb(var(--color-foreground));
}
/* Dots: small circles */
.product-media-gallery__pagination--dots .product-media-gallery__indicator::before {
width: 8px; height: 8px; border-radius: var(--radius-full);
}
/* Bars: short lines */
.product-media-gallery__pagination--bars .product-media-gallery__indicator::before {
width: 16px; height: 2px; border-radius: 1px;
}
/* One navigation on a phone: the segmented bar inside the photo, nothing around it.
Arrows and thumbnails belong to the pointer, so they stay on wider screens. */
@media (width < 750px) {
.product-media-gallery--single-nav-m .product-media-gallery__arrow,
.product-media-gallery--single-nav-m .product-media-gallery__thumbs-wrapper {
display: none;
}
.product-media-gallery--single-nav-m .product-media-gallery__indicators {
inline-size: min(50%, 180px);
margin-inline: auto;
gap: var(--space-1);
}
.product-media-gallery--single-nav-m .product-media-gallery__indicator {
flex: 1;
block-size: 20px;
}
.product-media-gallery--single-nav-m .product-media-gallery__indicator::before {
inline-size: 100%;
block-size: 3px;
border-radius: var(--radius-full);
}
.product-media-gallery--single-nav-m .product-media-gallery__indicator.is-hidden {
display: none;
}
}
@media (width >= 750px) {
.product-media-gallery__indicators--m-only { display: none; }
}
/* Mobile: mix-blend for visibility over images */
@media (width < 750px) {
.product-media-gallery__indicators { mix-blend-mode: difference; }
.product-media-gallery__indicator::before { background: rgba(255, 255, 255, 0.4); }
.product-media-gallery__indicator.is-active::before { background: rgba(255, 255, 255, 1); }
}
/* ── Pagination: counter ── */
.product-media-gallery__counter {
display: inline-flex;
padding: 0.25rem 0.625rem;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
border-radius: 2rem;
white-space: nowrap;
}
/* Desktop counter: below image */
@media (width >= 750px) {
.product-media-gallery__pagination--counter {
justify-content: center;
}
.product-media-gallery__pagination--counter .product-media-gallery__counter {
background: rgba(var(--color-foreground), 0.08);
color: rgb(var(--color-foreground));
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* Hide dots/bars when auto-counter kicks in (>8 items) */
.product-media-gallery__pagination[data-auto-counter] .product-media-gallery__indicators { display: none; }
.product-media-gallery__pagination[data-auto-counter] .product-media-gallery__counter { display: inline-flex; }
.product-media-gallery__pagination:not([data-auto-counter]) .product-media-gallery__counter { display: none; }
/* ── Thumbnails wrapper ── */
.product-media-gallery__thumbs-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-1);
margin-block-start: var(--space-3);
}
.product-media-gallery__thumbs-arrow {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: var(--radius-full);
background: rgba(var(--color-foreground), 0.06);
color: rgb(var(--color-foreground));
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
padding: 0;
}
.product-media-gallery__thumbs-arrow:hover { background: rgba(var(--color-foreground), 0.12); }
.product-media-gallery__thumbs-arrow[hidden] { display: none; }
/* A thumbnail is a share of the row, never a fixed size: `--thumb-columns`
of them fill the width, a count set per breakpoint. The strip scrolls past
that count; the grid wraps and shows every one. */
.product-media-gallery__thumbnails {
--thumb-columns: var(--thumb-columns-d);
--thumb-gap: var(--space-2);
--thumb-size: calc((100% - (var(--thumb-columns) - 1) * var(--thumb-gap)) / var(--thumb-columns));
display: flex; gap: var(--thumb-gap);
overflow-x: auto;
scrollbar-width: none;
flex: 1;
min-width: 0;
}
.product-media-gallery__thumbnails::-webkit-scrollbar { display: none; }
.product-media-gallery__thumbnails--grid {
display: grid;
grid-template-columns: repeat(var(--thumb-columns), minmax(0, 1fr));
overflow: visible;
}
@media (width < 750px) {
.product-media-gallery__thumbnails {
--thumb-columns: var(--thumb-columns-m);
}
}
.product-media-gallery__thumbnails--radius-sharp { --thumb-radius: 0; }
.product-media-gallery__thumbnails--radius-rounded { --thumb-radius: var(--radius-sm); }
.product-media-gallery__thumbnails--radius-pill { --thumb-radius: var(--radius-full); }
.product-media-gallery__thumb {
position: relative;
flex: 0 0 var(--thumb-size); min-width: 0; border-radius: var(--thumb-radius);
border: none; padding: 0;
box-shadow: inset 0 0 0 0 transparent;
overflow: hidden; cursor: pointer;
transition: box-shadow var(--duration-fast) var(--ease-out);
background: none;
}
.product-media-gallery__thumb--square { aspect-ratio: 1 / 1; }
.product-media-gallery__thumb--portrait { aspect-ratio: 4 / 5; }
.product-media-gallery__thumb--landscape { aspect-ratio: 5 / 4; }
.product-media-gallery__thumb.is-active {
box-shadow: inset 0 0 0 2px rgb(var(--color-foreground));
}
.product-media-gallery__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-media-gallery__thumb-badge {
position: absolute;
inset-block-end: 3px;
inset-inline-end: 3px;
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: var(--radius-sm);
}
/* ── Mobile stack mode ── */
@media (width < 750px) {
.product-media-gallery[data-mobile-layout="stack"] .product-media-gallery__track {
flex-direction: column;
overflow-x: hidden;
overflow-y: visible;
scroll-snap-type: none;
gap: var(--space-2);
}
.product-media-gallery[data-mobile-layout="stack"] .product-media-gallery__slide {
scroll-snap-align: none;
}
.product-media-gallery[data-mobile-layout="stack"] .product-media-gallery__arrow,
.product-media-gallery[data-mobile-layout="stack"] .product-media-gallery__pagination,
.product-media-gallery[data-mobile-layout="stack"] .product-media-gallery__thumbs-wrapper { display: none; }
}
/* ── Grid layout ── */
.product-media-gallery__grid { display: grid; border-radius: var(--radius-media); overflow: hidden; }
.product-media-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
.product-media-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
/* The lead is the first photo still visible, so a variant that hides the
first one hands the full row to the next. */
.product-media-gallery__grid--lead > .product-media-gallery__item:not(.is-hidden):not(.product-media-gallery__item:not(.is-hidden) ~ *) {
grid-column: 1 / -1;
}
/* ── Inline zoom ── */
[data-zoom-trigger] { cursor: zoom-in; }
[data-zoom-trigger].is-zoomed { cursor: zoom-out; }
[data-zoom-trigger] .product-media__image {
transition: transform var(--duration-normal) var(--ease-out);
transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
will-change: transform;
}
[data-zoom-trigger].is-zoomed .product-media__image { transform: scale(2); }
@media (prefers-reduced-motion: reduce) {
[data-zoom-trigger] .product-media__image { transition: none; }
}
/* ── Variant filtering ── */
.product-media-gallery__slide.is-hidden {
flex: 0 0 0;
width: 0;
min-width: 0;
overflow: hidden;
scroll-snap-align: none;
padding: 0;
margin: 0;
visibility: hidden;
}
.product-media-gallery__item.is-hidden,
.product-media-gallery__thumb.is-hidden,
.product-media-gallery__indicator.is-hidden { display: none; }
.product-media-gallery--single .product-media-gallery__arrow,
.product-media-gallery--single .product-media-gallery__pagination,
.product-media-gallery--single .product-media-gallery__thumbs-wrapper { display: none; }
/* ── Placeholder ── */
.product-media-gallery__placeholder {
border-radius: var(--radius-card);
overflow: hidden;
background: rgba(var(--color-foreground), 0.04);
}
.product-media-gallery__placeholder-svg {
width: 100%;
height: auto;
display: block;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.product-media-gallery__track { scroll-behavior: auto; }
.product-media-gallery--fade .product-media-gallery__slide,
.product-media-gallery--zoom .product-media-gallery__slide { transition: none; }
}
.product-media-zone {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
/* Columns exist from 750px only, like the info zone's. */
@media (width >= 750px) {
.product-media-zone {
grid-column: 1;
grid-row: 1 / -1;
}
.product-page--media-right .product-media-zone {
grid-column: 2;
}
}
/* Rail: the zone becomes a two-column grid, the main media in one column and
the rail beside it on row 1, spanning exactly the main media. The gallery
lends its parts to that grid (display: contents) so its thumbnails can
land in the rail or under the photo; pagination overlays the image.
Desktop and mobile are two independent settings, so the same rules exist
once per breakpoint: `--rail-d` only applies from 750px, `--rail-m` only
below. A breakpoint without a rail keeps the plain column above. */
@media (width >= 750px) {
.product-media-zone--rail-d {
display: grid;
align-items: stretch;
grid-template-rows: auto;
}
.product-media-zone--rail-d-right {
grid-template-columns: minmax(0, 1fr) var(--rail-width);
}
.product-media-zone--rail-d-left {
grid-template-columns: var(--rail-width) minmax(0, 1fr);
}
.product-media-zone--rail-d > .product-media-gallery {
display: contents;
}
.product-media-zone--rail-d > .product-media-gallery > .product-media-gallery__grid,
.product-media-zone--rail-d > .product-media-gallery > .product-media-gallery__slider {
grid-row: 1;
align-self: start;
}
.product-media-zone--rail-d-right > .product-media-gallery > * {
grid-column: 1;
}
.product-media-zone--rail-d-left > .product-media-gallery > * {
grid-column: 2;
}
.product-media-zone--rail-d .product-media-gallery__pagination {
position: absolute;
inset-inline: 0;
bottom: var(--space-3);
margin: 0;
z-index: var(--z-raised);
pointer-events: none;
}
.product-media-zone--rail-d .product-media-gallery__pagination > * {
pointer-events: auto;
}
/* Details rail: the first companion faces the photo, the thumbnails run
under both columns. */
.product-media-zone--rail-d-details > .product-media-gallery + * {
grid-row: 1;
}
.product-media-zone--rail-d-details.product-media-zone--rail-d-right > :not(.product-media-gallery) {
grid-column: 2;
}
.product-media-zone--rail-d-details.product-media-zone--rail-d-left > :not(.product-media-gallery) {
grid-column: 1;
}
.product-media-zone--rail-d-details > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-row: 2;
grid-column: 1 / -1;
margin-block-start: 0;
}
/* A rail is one column: a group asking for a grid, a row or masonry
columns stacks its children there instead of squeezing them side by
side. The rule sits on the inner element because the group sets its
column count inline, on itself. */
.product-media-zone--rail-d-details > .block-group > .block-group__inner {
grid-template-columns: minmax(0, 1fr);
flex-direction: column;
column-count: 1;
}
/* Rail pastilles hug the glyph (1.6x) instead of the generic 2x disc: the
cards are small and a mostly-empty disc reads as a bug. */
.product-media-zone--rail-d-details > :not(.product-media-gallery) .block-iwt--icon-bg {
--iwt-icon-box: calc(var(--iwt-icon-size) * 1.6);
}
/* Thumbnails rail: the strip stands upright in the rail and takes the
photo's height without ever sizing the row (height 0, min-height 100%);
past that height it scrolls. The companions stack under both columns. */
.product-media-zone--rail-d-thumbnails.product-media-zone--rail-d-right > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-column: 2;
}
.product-media-zone--rail-d-thumbnails.product-media-zone--rail-d-left > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-column: 1;
}
.product-media-zone--rail-d-thumbnails > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-row: 1;
flex-direction: column;
height: 0;
min-height: 100%;
margin: 0;
}
.product-media-zone--rail-d-thumbnails .product-media-gallery__thumbnails {
--thumb-size: auto;
display: flex;
flex-direction: column;
inline-size: 100%;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
.product-media-zone--rail-d-thumbnails .product-media-gallery__thumbs-arrow svg {
rotate: 90deg;
}
.product-media-zone--rail-d-thumbnails > :not(.product-media-gallery) {
grid-column: 1 / -1;
}
/* Nothing to put in a thumbnails rail (one photo visible, or thumbnails
off): no rail. */
.product-media-zone--rail-d-thumbnails:not(:has(> .product-media-gallery:not(.product-media-gallery--single) > .product-media-gallery__thumbs-wrapper)) {
display: flex;
}
}
@media (width < 750px) {
.product-media-zone--rail-m {
display: grid;
align-items: stretch;
grid-template-rows: auto;
}
.product-media-zone--rail-m-right {
grid-template-columns: minmax(0, 1fr) var(--rail-width-m);
}
.product-media-zone--rail-m-left {
grid-template-columns: var(--rail-width-m) minmax(0, 1fr);
}
.product-media-zone--rail-m > .product-media-gallery {
display: contents;
}
.product-media-zone--rail-m > .product-media-gallery > .product-media-gallery__grid,
.product-media-zone--rail-m > .product-media-gallery > .product-media-gallery__slider {
grid-row: 1;
align-self: start;
}
.product-media-zone--rail-m-right > .product-media-gallery > * {
grid-column: 1;
}
.product-media-zone--rail-m-left > .product-media-gallery > * {
grid-column: 2;
}
.product-media-zone--rail-m .product-media-gallery__pagination {
position: absolute;
inset-inline: 0;
bottom: var(--space-3);
margin: 0;
z-index: var(--z-raised);
pointer-events: none;
}
.product-media-zone--rail-m .product-media-gallery__pagination > * {
pointer-events: auto;
}
/* A mobile rail is the photo's height and a third of a phone wide, so it
holds what one group of pills can hold: the first group faces the
photo, takes that height (height 0 keeps it from sizing the row) and
stretches its cards to fill it. Prose cannot live there: forced to the
photo's height, a review's card stopped at the stars while its text
spilled over the page; left to grow, it made the rail outgrow the
photo. A second group cannot either, the cell is taken. */
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) {
grid-row: 1;
height: 0;
min-height: 100%;
}
.product-media-zone--rail-m-details.product-media-zone--rail-m-right > .block-group:nth-child(1 of .block-group) {
grid-column: 2;
}
.product-media-zone--rail-m-details.product-media-zone--rail-m-left > .block-group:nth-child(1 of .block-group) {
grid-column: 1;
}
/* Everything else stacks under the photo at full width, where it stays
readable, the thumbnails first. */
.product-media-zone--rail-m-details > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-row: 2;
grid-column: 1 / -1;
margin-block-start: 0;
}
.product-media-zone--rail-m-details > :not(.product-media-gallery, .block-group:nth-child(1 of .block-group)) {
grid-column: 1 / -1;
}
/* Nothing to put in a details rail (no group): no rail, the photo keeps
the whole width. */
.product-media-zone--rail-m-details:not(:has(> .block-group)) {
display: flex;
}
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) > .block-group__inner {
flex: 1 1 0;
min-height: 0;
grid-template-columns: minmax(0, 1fr);
flex-direction: column;
column-count: 1;
}
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) .block-iwt {
gap: 4px;
}
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) .block-iwt__icon,
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) .block-iwt__icon svg {
width: 12px;
height: 12px;
}
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) .block-iwt__icon[class*="--bg-"] {
width: 20px;
height: 20px;
}
.product-media-zone--rail-m-details > .block-group:nth-child(1 of .block-group) .block-iwt__title {
font-size: 0.7rem;
line-height: 1.2;
}
.product-media-zone--rail-m-thumbnails.product-media-zone--rail-m-right > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-column: 2;
}
.product-media-zone--rail-m-thumbnails.product-media-zone--rail-m-left > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-column: 1;
}
.product-media-zone--rail-m-thumbnails > .product-media-gallery > .product-media-gallery__thumbs-wrapper {
grid-row: 1;
flex-direction: column;
height: 0;
min-height: 100%;
margin: 0;
}
.product-media-zone--rail-m-thumbnails .product-media-gallery__thumbnails {
--thumb-size: auto;
display: flex;
flex-direction: column;
inline-size: 100%;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
.product-media-zone--rail-m-thumbnails .product-media-gallery__thumbs-arrow svg {
rotate: 90deg;
}
.product-media-zone--rail-m-thumbnails > :not(.product-media-gallery) {
grid-column: 1 / -1;
}
.product-media-zone--rail-m-thumbnails:not(:has(> .product-media-gallery:not(.product-media-gallery--single) > .product-media-gallery__thumbs-wrapper)) {
display: flex;
}
}
.product-metafield {
display: flex;
margin: 0;
}
.product-metafield--inline {
flex-direction: row;
align-items: baseline;
gap: var(--space-2);
}
.product-metafield--stacked {
flex-direction: column;
gap: var(--space-1);
}
.product-metafield--table-row {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
padding-block: var(--space-2);
border-block-end: 1px solid rgba(var(--color-border), 0.2);
}
.product-metafield__label {
font-size: var(--font-body--size-small);
font-weight: 500;
color: rgb(var(--color-foreground-secondary));
margin: 0;
}
.product-metafield__value {
font-size: var(--font-body--size);
margin: 0;
}
.product-metafield--value-only .product-metafield__value {
font-size: var(--font-body--size-small);
}
.product-pickup__available { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-body--size-small); }
.product-pickup__icon { flex-shrink: 0; color: rgb(var(--color-success)); }
.product-pickup__status { font-weight: 500; }
.product-pickup__toggle { font-size: inherit; margin-block-start: var(--space-1); }
/* The price is rewritten on variant change: fixed-width digits keep it still. */
.product-price { font-variant-numeric: tabular-nums; }
.product-price__wrapper {
display: flex;
align-items: baseline;
gap: var(--space-3);
flex-wrap: wrap;
}
.product-price__current {
display: grid;
font-family: var(--text-font-family, inherit);
font-style: var(--text-font-style, inherit);
font-size: var(--text-font-size-m, var(--text-font-size, inherit));
font-weight: var(--text-font-weight, 600);
}
@media (width >= 750px) {
.product-price__current { font-size: var(--text-font-size, inherit); }
}
.product-price__current > * { grid-area: 1 / 1; }
.product-price__current--sale { color: rgb(var(--color-accent-2)); }
.product-price__compare {
color: rgb(var(--color-foreground-secondary));
font-size: 0.85em;
text-decoration: line-through;
}
.product-price__badge {
display: inline-flex;
padding: 2px var(--space-2);
background: rgb(var(--color-accent-2));
color: rgb(var(--color-background));
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-badge);
line-height: 1.4;
}
.product-price__badge[hidden] { display: none; }
.product-price__unit {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
margin-block-start: var(--space-1);
}
.product-price__installments { margin-block-start: var(--space-2); }
.product-price__tax {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
}
/* Card context: smaller price */
.product-card .product-price__current {
font-size: 0.875rem;
font-weight: 600;
}
.quantity-break {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border: 2px solid var(--color-variant-border);
border-radius: var(--radius-card);
background: var(--color-variant-bg);
color: var(--color-variant-text);
cursor: pointer;
transition:
border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.quantity-break__content,
.quantity-break__footer {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
@media (width >= 750px) {
.quantity-break:hover:not(.quantity-break--disabled) {
border-color: rgb(var(--color-accent-1));
transform: translateY(-2px);
}
}
.quantity-break:has(.quantity-break__radio:checked),
.quantity-break[data-selected="true"] {
border-color: rgb(var(--color-accent-1));
background: rgba(var(--color-accent-1), 0.08);
box-shadow: var(--shadow-card);
}
.quantity-break--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.quantity-break__radio {
position: absolute;
inset-inline-start: -9999px;
opacity: 0;
pointer-events: none;
}
/* Focus ring moves to the label when the hidden radio is focused */
.quantity-break:has(.quantity-break__radio:focus-visible) {
outline: 2px solid rgb(var(--color-accent-1));
outline-offset: 2px;
}
.quantity-break__main {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
}
.quantity-break__image-wrapper {
position: relative;
flex-shrink: 0;
width: var(--tier-image-width);
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
}
.quantity-break__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.quantity-break__image-badge {
position: absolute;
padding: 2px var(--space-2);
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
font-size: 0.6875rem;
font-weight: 700;
border-radius: var(--radius-sm);
line-height: 1;
}
.quantity-break__image-badge--topright { inset-block-start: var(--space-1); inset-inline-end: var(--space-1); }
.quantity-break__image-badge--topleft { inset-block-start: var(--space-1); inset-inline-start: var(--space-1); }
.quantity-break__image-badge--bottomright { inset-block-end: var(--space-1); inset-inline-end: var(--space-1); }
.quantity-break__image-badge--bottomleft { inset-block-end: var(--space-1); inset-inline-start: var(--space-1); }
/* Overlap badge: the promo label sits in the top-left corner of the image
(the quantity "xN" badge keeps its own corner, default bottom-right). */
.quantity-break__overlay-badge {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
z-index: 1;
display: inline-flex;
padding: 3px var(--space-2);
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
border-radius: var(--radius-sm);
line-height: 1.2;
}
.quantity-break__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.quantity-break__title-row {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.quantity-break__title {
font-weight: 600;
font-size: 0.9375rem;
}
.quantity-break__inline-badge {
display: inline-flex;
padding: 2px var(--space-2);
background: rgba(var(--color-accent-1), 0.12);
color: rgb(var(--color-accent-1));
font-size: 0.6875rem;
font-weight: 700;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.quantity-break__pricing {
display: flex;
font-variant-numeric: tabular-nums;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
}
.quantity-break__compare {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
}
.quantity-break__price {
font-weight: 700;
font-size: 1rem;
}
.quantity-break__unit-price {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
}
.quantity-break__description {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
}
/* Badges — overlay / normal / full-width */
.quantity-break__badge {
display: inline-flex;
padding: 3px var(--space-2);
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
border-radius: var(--radius-sm);
line-height: 1.2;
align-self: flex-start;
z-index: 1;
}
.quantity-break__badge--overlap {
position: absolute;
inset-inline-start: var(--space-3);
white-space: nowrap;
}
.quantity-break__badge--overlap.quantity-break__badge--top {
inset-block-start: 0;
transform: translateY(-50%);
}
.quantity-break__badge--overlap.quantity-break__badge--bottom {
inset-block-end: 0;
transform: translateY(50%);
}
/* A full-width band is clipped by the card's own rounded border: a band
shorter than the corner radius cannot draw a matching curve itself. */
.quantity-break:has(> .quantity-break__badge--full-width) {
overflow: clip;
}
.quantity-break__badge--full-width {
align-self: stretch;
justify-content: center;
margin-inline: calc(-1 * var(--space-4));
border-radius: 0;
}
.quantity-break__badge--full-width.quantity-break__badge--top {
margin-block-start: calc(-1 * var(--space-4));
}
.quantity-break__badge--full-width.quantity-break__badge--bottom {
margin-block-end: calc(-1 * var(--space-4));
}
/* Variant pickers per unit — only visible when tier is selected */
.quantity-break__variants {
display: none;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3);
margin-block-start: var(--space-2);
border: 1px solid rgba(var(--color-accent-1), 0.22);
border-radius: var(--radius-input);
background: rgba(var(--color-accent-1), 0.05);
}
.quantity-break:has(.quantity-break__radio:checked) .quantity-break__variants {
display: flex;
}
scale-quantity-breaks:not([data-show-variant-picker="true"]) .quantity-break__variants {
display: none;
}
scale-quantity-breaks:not([data-show-variant-thumbnail="true"]) .quantity-break__variant-thumb {
display: none;
}
.quantity-break__variants-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
}
.quantity-break__variants-title {
font-size: 0.875rem;
font-weight: 700;
}
.quantity-break__variants-hint {
color: rgb(var(--color-foreground-secondary));
font-size: 0.75rem;
}
.quantity-break__variant-row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.quantity-break__variant-label {
flex: 0 0 auto;
min-width: 4.5rem;
font-size: 0.8125rem;
font-weight: 600;
}
.quantity-break__variant-thumb {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
overflow: hidden;
background: rgba(var(--color-foreground), 0.06);
}
.quantity-break__variant-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quantity-break__variant-select {
flex: 1;
min-width: 0;
min-height: 40px;
padding: 0 var(--space-2);
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-sm);
background: rgb(var(--color-background));
color: inherit;
font-size: 0.875rem;
}
@media (width <= 480px) {
.quantity-break__variants-heading,
.quantity-break__variant-row {
align-items: flex-start;
flex-direction: column;
gap: var(--space-2);
}
.quantity-break__variant-select {
width: 100%;
}
}
/* Cross-sells per tier — only visible when tier is selected */
.quantity-break__cross-sells {
display: none;
flex-direction: column;
gap: var(--space-2);
padding-block-start: var(--space-3);
margin-block-start: var(--space-2);
border-block-start: 1px solid rgb(var(--color-border));
}
.quantity-break:has(.quantity-break__radio:checked) .quantity-break__cross-sells {
display: flex;
}
.quantity-break__cross-sell {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
}
.quantity-break__cross-sell:hover {
background: rgba(var(--color-foreground), 0.03);
}
.quantity-break__cross-sell-thumb {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.quantity-break__cross-sell-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quantity-break__cross-sell-info {
flex: 1;
display: flex;
justify-content: space-between;
gap: var(--space-2);
flex-wrap: wrap;
font-size: 0.8125rem;
}
.quantity-break__cross-sell-title {
font-weight: 500;
}
/* Gift — visible only when tier is selected */
.quantity-break__gift {
display: none;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
margin-block-start: var(--space-2);
background: rgba(var(--color-accent-1), 0.08);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
}
.quantity-break:has(.quantity-break__radio:checked) .quantity-break__gift {
display: flex;
}
.quantity-break__gift-thumb {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.quantity-break__gift-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quantity-break__gift-info {
flex: 1;
display: flex;
flex-direction: column;
}
.quantity-break__gift-label {
font-size: 0.6875rem;
font-weight: 700;
color: rgb(var(--color-accent-1));
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Cards stack by default and keep a compact list-style row. The parent
container query enables the shared card grid only when this block itself
has enough room, independently from the viewport width. */
.quantity-breaks--cards .quantity-break {
min-width: 0;
overflow: hidden;
}
/* Wide cards: each tier is a product-card-like column inheriting the
container's seven shared rows (badge / image / title / description /
unit price / total price / footer)
via subgrid, so images, titles and prices align across cards. The body row
(1fr) absorbs uneven description copy and pushes prices onto their own
shared rows. The __content/__main/__body wrappers go display:contents
so their children land directly in the card's subgrid. */
@container quantity-breaks (width > 560px) {
.quantity-breaks--cards .quantity-break {
display: grid;
grid-row: span 7;
grid-template-rows: subgrid;
/* 0 row-gap so empty shared rows add no strip; elements use their own margins. */
row-gap: 0;
padding: var(--space-3);
}
.quantity-breaks--cards .quantity-break__content,
.quantity-breaks--cards .quantity-break__main,
.quantity-breaks--cards .quantity-break__body {
display: contents;
}
.quantity-breaks--cards .quantity-break__badge--top {
grid-row: 1;
margin-block-end: var(--space-2);
}
/* Overlap fallback (overlap chosen, no image): sit in the subgrid row like a
normal badge instead of floating out of flow over the card edge. */
.quantity-breaks--cards .quantity-break__badge--overlap {
position: static;
inset-block: auto;
transform: none;
}
/* Full-width image driven by the bundle-wide ratio (set on the container). */
.quantity-breaks--cards .quantity-break__image-wrapper {
grid-row: 2;
width: 100%;
max-width: none;
aspect-ratio: var(--tier-image-ratio);
margin-block-end: var(--space-2);
}
.quantity-breaks--cards .quantity-break__title-row {
grid-row: 3;
}
.quantity-breaks--cards .quantity-break__description {
grid-row: 4;
align-self: start;
}
.quantity-breaks--cards .quantity-break__unit-price {
grid-row: 5;
align-self: start;
}
.quantity-breaks--cards .quantity-break__pricing {
grid-row: 6;
align-self: end;
margin-block-start: var(--space-1);
}
.quantity-breaks--cards .quantity-break__footer {
grid-row: 7;
}
/* Cards use space-3 padding, so full-width badges bleed by space-3 (not
space-4) to land exactly on the card edges. */
.quantity-breaks--cards .quantity-break__badge--full-width {
margin-inline: calc(-1 * var(--space-3));
}
.quantity-breaks--cards .quantity-break__badge--full-width.quantity-break__badge--top {
margin-block-start: calc(-1 * var(--space-3));
}
.quantity-breaks--cards .quantity-break__badge--full-width.quantity-break__badge--bottom {
margin-block-end: calc(-1 * var(--space-3));
}
}
@media (prefers-reduced-motion: reduce) {
.quantity-break,
.quantity-break__badge--overlap {
transition: none;
}
}
scale-quantity-breaks {
display: block;
container-name: quantity-breaks;
container-type: inline-size;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.quantity-breaks__fieldset {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.quantity-breaks__label {
font-weight: 600;
margin: 0 0 var(--space-3);
padding: 0;
}
.quantity-breaks__items {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Cards stack until this block, not the viewport, is wide enough. */
.quantity-breaks--cards .quantity-breaks__items {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
@container quantity-breaks (width > 560px) {
.quantity-breaks--cards .quantity-breaks__items {
display: grid;
grid-template-rows: auto auto auto 1fr auto auto auto;
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-columns: auto;
overflow-x: visible;
}
}
/* Hide Shopify's per-line quantity selector when bundle tiers are present */
.product-form:has(scale-quantity-breaks) .product-quantity-selector { display: none; }
/* Hide subscription block only when tiers use their own variant picker
(the per-unit variants break selling_plan semantics). */
.product-form:has(scale-quantity-breaks[data-show-variant-picker="true"]) .product-subscription,
.product-form:has(scale-quantity-breaks[data-show-variant-picker="true"]) product-variant-picker {
display: none;
}
shopify-visual-preview-block-list scale-quantity-breaks[data-visual-preview-mode] {
width: 450px;
}
.product-quantity__label { display: block; font-size: var(--font-body--size-small); font-weight: 500; margin-block-end: var(--space-2); }
.product-quantity__controls {
display: inline-flex; align-items: center;
border: 1px solid rgba(var(--color-border), 0.6);
border-radius: var(--radius-input);
}
.product-quantity__button {
display: flex; align-items: center; justify-content: center;
width: var(--minimum-touch-target); height: var(--minimum-touch-target);
cursor: pointer; color: rgb(var(--color-foreground));
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: background var(--duration-fast), scale var(--duration-normal) var(--ease-spring);
}
.product-quantity__button:hover { background: rgba(var(--color-foreground), var(--opacity-subtle)); }
@media (prefers-reduced-motion: no-preference) {
.product-quantity__button:active { scale: 0.88; transition: background var(--duration-fast), scale var(--duration-fast) var(--ease-out); }
}
.product-quantity__input {
width: 3.5rem; height: var(--minimum-touch-target);
text-align: center; font-weight: 500; font-variant-numeric: tabular-nums;
border: none; background: none;
-moz-appearance: textfield;
}
.product-quantity__input::-webkit-outer-spin-button,
.product-quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-quantity__cart-qty { font-size: var(--font-body--size-small); color: rgb(var(--color-foreground-secondary)); margin-block-start: var(--space-1); }
.product-reviews {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.product-reviews__summary {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-6);
}
.product-reviews__rating {
font-weight: 600;
}
.product-reviews__count {
font-size: 0.875rem;
opacity: 0.6;
}
.product-reviews__list {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.product-reviews__placeholder {
padding: var(--space-8);
text-align: center;
border: 2px dashed rgba(var(--color-foreground), 0.15);
border-radius: var(--radius-card);
color: rgba(var(--color-foreground), 0.5);
font-size: 0.875rem;
}
.product-share { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-block-start: var(--margin-top); margin-block-end: var(--margin-bottom); }
.product-share__link {
display: inline-flex; align-items: center; justify-content: center;
width: var(--minimum-touch-target); height: var(--minimum-touch-target);
color: rgb(var(--color-foreground-secondary));
transition: color var(--duration-fast) var(--ease-out);
}
.product-share__link:hover { color: rgb(var(--color-foreground)); }
.product-share__link svg { width: 20px; height: 20px; }
.product-sidebar-zone {
display: flex;
flex-direction: column;
gap: var(--zone-gap);
min-width: 0;
}
@media (width >= 750px) and (width < 1200px) {
.product-sidebar-zone {
grid-column: 1 / -1;
}
}
@media (width >= 1200px) {
.product-sidebar-zone {
grid-column: 3;
}
}
.product-sku {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
color: rgb(var(--color-foreground-secondary));
font-size: var(--font-body--size-small);
}
.product-social-proof { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-body--size-small); color: rgb(var(--color-foreground-secondary)); }
.product-social-proof__avatars { display: flex; }
.product-social-proof__avatar {
width: 24px; height: 24px; border-radius: var(--radius-full);
background: hsl(var(--hue, 200) 50% 65%);
border: 2px solid rgb(var(--color-background));
margin-inline-start: -6px;
}
.product-social-proof__avatar--img {
object-fit: cover;
display: block;
}
.product-social-proof__avatar:first-child { margin-inline-start: 0; }
.product-stock__text { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-body--size-small); }
.product-stock__dot {
--stock-color: var(--color-success);
position: relative; flex: none;
inline-size: 8px; block-size: 8px; border-radius: 50%;
background: rgb(var(--stock-color));
}
.product-stock--low .product-stock__dot { --stock-color: var(--color-warning); }
.product-stock__count { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
/* Three waves when the stock turns low, then the dot rests. */
.product-stock--low .product-stock__dot::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
animation: product-stock-ping 1400ms var(--ease-out) 3;
}
}
@keyframes product-stock-ping {
from { box-shadow: 0 0 0 0 rgba(var(--stock-color), 0.6); }
to { box-shadow: 0 0 0 9px rgba(var(--stock-color), 0); }
}
.product-stock__bar {
height: 4px; border-radius: 2px; margin-block-start: var(--space-2);
background: rgba(var(--color-foreground), var(--opacity-subtle));
overflow: hidden;
}
.product-stock__fill {
height: 100%; border-radius: 2px;
background: rgb(var(--color-success));
transition: width var(--duration-normal) var(--ease-out);
}
.product-stock--low .product-stock__fill { background: rgb(var(--color-warning)); }
.product-subscription__label { font-weight: 500; }
.product-subscription__options { display: flex; flex-direction: column; gap: var(--space-2); }
.product-subscription__option {
display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4);
border: 2px solid rgba(var(--color-border), 0.4);
border-radius: var(--radius-card); cursor: pointer;
transition: border-color var(--duration-fast);
}
.product-subscription__option--selected,
.product-subscription__option:has(input:checked) { border-color: rgb(var(--color-accent-1)); }
.product-subscription__option input[type="radio"] { flex-shrink: 0; margin-block-start: 3px; }
.product-subscription__option-title { font-weight: 600; }
.product-subscription__option-desc { font-size: var(--font-body--size-small); color: rgb(var(--color-foreground-secondary)); margin-block-start: var(--space-1); }
.product-subscription__savings {
display: inline-flex; padding: 1px var(--space-2); margin-inline-start: var(--space-2);
background: rgb(var(--color-foreground)); color: rgb(var(--color-background));
border-radius: var(--radius-badge); font-size: 0.75rem; font-weight: 600;
}
.product-subscription__frequency { margin-block-start: var(--space-3); }
.product-subscription__frequency-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-subscription__freq-btn {
padding: var(--space-1) var(--space-3); border: 1px solid rgba(var(--color-border), 0.4);
border-radius: var(--radius-input); font-size: var(--font-body--size-small); cursor: pointer;
transition: all var(--duration-fast);
}
.product-subscription__freq-btn--selected,
.product-subscription__freq-btn:has(input:checked) { border-color: rgb(var(--color-accent-1)); background: rgba(var(--color-accent-1), var(--opacity-subtle)); }
.product-subscription select { width: 100%; padding: var(--space-2); border: 1px solid rgba(var(--color-border), 0.4); border-radius: var(--radius-input); }
.product-title {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
font-family: var(--text-font-family, inherit);
font-style: var(--text-font-style, inherit);
font-size: var(--text-font-size-m, var(--text-font-size, inherit));
font-weight: var(--text-font-weight, inherit);
line-height: var(--text-line-height, inherit);
letter-spacing: var(--text-letter-spacing, inherit);
}
@media (width >= 750px) {
.product-title { font-size: var(--text-font-size, inherit); }
}
.product-card .product-title {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
}
.product-title__link {
color: inherit;
text-decoration: none;
}
.product-title__link:hover {
color: rgb(var(--color-accent-1));
}
.product-trust-badges {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.product-trust-badges--column {
flex-direction: column;
}
.product-trust-badges--row {
align-items: stretch;
}
.product-trust-badges__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-body--size-small);
color: rgb(var(--color-foreground-secondary));
}
.product-trust-badges__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgb(var(--color-accent-1));
}
.product-trust-badges__icon svg {
width: var(--icon-size);
height: var(--icon-size);
}
.product-trust-badges__text {
line-height: 1.3;
}
/* Style: Minimal (default) — just icon + text, no decoration */
.product-trust-badges--minimal .product-trust-badges__item {
gap: var(--space-2);
}
/* Style: Bordered — subtle border around each item */
.product-trust-badges--bordered .product-trust-badges__item {
padding: var(--space-2) var(--space-3);
border: 1px solid rgba(var(--color-foreground), 0.12);
border-radius: var(--radius-card);
}
.product-trust-badges--bordered.product-trust-badges--row .product-trust-badges__item {
flex: 1 1 auto;
}
/* Three badges never share a 390 px line: a 2 + 1 wrap reads as a mistake,
so row layouts stack on mobile. */
@media (width < 750px) {
.product-trust-badges--minimal.product-trust-badges--row,
.product-trust-badges--bordered.product-trust-badges--row {
flex-direction: column;
}
}
/* Styles: Filled and Card — the block draws the pastille, twice the glyph, and the
glyph comes bare (`backdrop`) so a duotone disc never sits inside it. */
.product-trust-badges--filled .product-trust-badges__icon,
.product-trust-badges--card .product-trust-badges__icon {
width: calc(var(--icon-size) * 2);
height: calc(var(--icon-size) * 2);
border-radius: var(--radius-full);
background: rgba(var(--color-accent-1), 0.1);
}
/* Style: Card — filled background, more prominent */
.product-trust-badges--card {
padding: var(--space-4);
background: rgba(var(--color-foreground), 0.03);
border-radius: var(--radius-card);
border: 1px solid rgba(var(--color-foreground), 0.06);
}
.product-trust-badges--card .product-trust-badges__text {
font-weight: 500;
color: rgb(var(--color-foreground));
}
/* Payment icons */
.product-trust-badges__payment {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.product-trust-badges--column .product-trust-badges__payment {
padding-block-start: var(--space-2);
border-block-start: 1px solid rgba(var(--color-foreground), 0.08);
}
.product-trust-badges__payment-icon {
height: 24px;
width: auto;
}
.product-variant-picker__option { border: none; padding: 0; margin: 0 0 var(--space-4); }
.product-variant-picker__option:last-child { margin-block-end: 0; }
.product-variant-picker__label { font-size: var(--font-body--size-small); font-weight: 500; margin-block-end: var(--space-2); }
.product-variant-picker__value { display: inline-grid; vertical-align: bottom; }
.product-variant-picker__value > * { grid-area: 1 / 1; }
.product-variant-picker__sold-out {
display: inline-block; margin-inline-start: var(--space-1); padding: 3px 6px;
border-radius: var(--radius-badge); background: rgba(var(--color-foreground), var(--opacity-subtle));
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px;
}
.product-variant-picker__sold-out[hidden] { display: none; }
.product-variant-picker__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-variant-picker__button {
position: relative; display: inline-flex; align-items: center; justify-content: center;
min-height: var(--variant-button-min-height); padding: var(--space-1) var(--space-3);
border: 1px solid rgba(var(--color-border), 0.6); border-radius: var(--radius-input);
font-size: var(--font-body--size-small); cursor: pointer;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: border-color var(--duration-fast), background var(--duration-fast), scale var(--duration-normal) var(--ease-spring);
}
@media (prefers-reduced-motion: no-preference) {
.product-variant-picker__button:active {
scale: 0.95;
transition: border-color var(--duration-fast), background var(--duration-fast), scale var(--duration-fast) var(--ease-out);
}
}
.product-variant-picker__button input { position: absolute; opacity: 0; pointer-events: none; }
.product-variant-picker__button:has(input:checked) { border-color: rgb(var(--color-foreground)); background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
/* Sold out stays readable and selectable: muted text, dashed edge, a thin diagonal stroke. */
.product-variant-picker__button--unavailable { color: rgba(var(--color-foreground), 0.6); border-style: dashed; }
.product-variant-picker__button--unavailable::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.45;
background: linear-gradient(to top right, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.product-variant-picker__button--unavailable:has(input:checked) { border-style: solid; }
@media (prefers-reduced-motion: no-preference) {
.product-variant-picker__button--unavailable:has(input:checked)::after { animation: product-variant-picker-strike var(--duration-normal) var(--ease-out); }
}
@keyframes product-variant-picker-strike { from { clip-path: inset(0 100% 0 0); } }
.product-variant-picker__buttons--pill .product-variant-picker__button { border-radius: var(--radius-pill); }
.product-variant-picker__cards { display: grid; grid-template-columns: repeat(var(--cards-columns, 1), minmax(0, 1fr)); gap: var(--space-2); }
.product-variant-picker__card {
position: relative;
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3);
border: 1px solid rgba(var(--color-border), 0.6); border-radius: var(--radius-card);
cursor: pointer;
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.product-variant-picker__card:has(input:checked) {
border-color: rgb(var(--color-foreground));
box-shadow: inset 0 0 0 1px rgb(var(--color-foreground));
}
.product-variant-picker__card-media {
flex: 0 0 auto; width: 56px; height: 56px;
border-radius: var(--radius-input); overflow: hidden;
background: rgb(var(--color-background-secondary));
}
.product-variant-picker__card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-variant-picker__card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-variant-picker__card-name { font-weight: 500; }
.product-variant-picker__card-prices { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-body--size-small); }
.product-variant-picker__card-compare { opacity: 0.6; }
.product-variant-picker__card-note { font-size: var(--font-body--size-small); opacity: 0.7; }
.product-variant-picker__card-badge {
position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2);
padding: 2px var(--space-2); border-radius: var(--radius-pill);
background: rgb(var(--color-foreground)); color: rgb(var(--color-background));
font-size: var(--font-body--size-small); font-weight: 600;
}
.product-variant-picker__card--unavailable { opacity: var(--disabled-opacity); }
.product-variant-picker__dropdown select { width: 100%; min-height: var(--inputs-min-height); padding: 0 var(--inputs-padding); border-radius: var(--radius-input); border: 1px solid rgba(var(--color-border), 0.6); }
.product-variant-picker__swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-variant-picker__swatch {
--swatch-ring-gap: 4px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: var(--swatch-ring-gap);
border: 2px solid transparent;
border-radius: var(--radius-full);
background: transparent;
color: rgb(var(--color-foreground));
cursor: pointer;
transition: border-color var(--duration-fast);
}
.product-variant-picker__swatch > input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.product-variant-picker__swatch-fill {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--swatch-color, rgb(var(--color-background-secondary)));
overflow: hidden;
}
.product-variant-picker__swatches--normal .product-variant-picker__swatch { width: 42px; height: 42px; }
.product-variant-picker__swatches--small .product-variant-picker__swatch { width: 34px; height: 34px; }
.product-variant-picker__swatches--large .product-variant-picker__swatch { width: 50px; height: 50px; }
.product-variant-picker__swatches--square .product-variant-picker__swatch { border-radius: var(--radius-badge); }
.product-variant-picker__swatches--rounded .product-variant-picker__swatch { border-radius: var(--radius-input); }
.product-variant-picker__swatch:has(input:checked) { border-color: currentColor; }
.product-variant-picker__swatch--unavailable { opacity: var(--disabled-opacity); }
.product-variant-picker__swatch--unavailable .product-variant-picker__swatch-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 45%, rgb(var(--color-error)) 45%, rgb(var(--color-error)) 55%, transparent 55%);
}
.product-variant-picker__swatch--unavailable .product-variant-picker__swatch-fill { position: relative; }
.product-variant-picker__swatch-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-variant-picker__swatch-initials {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: var(--font-body--size-small);
text-transform: uppercase;
}
.product-variant-popup__trigger {
cursor: pointer;
font-family: inherit;
font-size: var(--font-body--size-small);
}
.product-variant-popup__trigger--link {
background: none;
border: none;
padding: 0;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.product-variant-popup__trigger--link:hover {
opacity: 0.7;
}
.product-variant-popup__trigger--button {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
border: 1px solid rgba(var(--color-foreground), 0.2);
border-radius: var(--radius-badge);
background: transparent;
color: inherit;
transition: border-color var(--duration-fast);
}
.product-variant-popup__trigger--button:hover {
border-color: rgb(var(--color-foreground));
}
.product-variant-popup__dialog {
position: fixed;
inset: 0;
margin: auto;
width: calc(100vw - var(--space-8));
height: fit-content;
max-height: 85vh;
overflow-y: auto;
border: none;
border-radius: 16px;
padding: 0;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-modal);
}
.product-variant-popup__dialog--small { max-width: 400px; }
.product-variant-popup__dialog--medium { max-width: 600px; }
.product-variant-popup__dialog--large { max-width: 800px; }
.product-variant-popup__dialog::backdrop {
background: rgba(0, 0, 0, var(--backdrop-opacity));
}
.product-variant-popup__dialog[open] {
animation: product-variant-popup-in var(--duration-normal) var(--ease-out);
}
@keyframes product-variant-popup-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.product-variant-popup__dialog[open] {
animation: none;
}
}
.product-variant-popup__dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5) 0;
}
.product-variant-popup__dialog-title {
margin: 0;
font-size: var(--font-h5--size);
font-weight: 600;
}
.product-variant-popup__dialog-close {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-1);
display: flex;
border-radius: var(--radius-full);
transition: background var(--duration-fast);
}
.product-variant-popup__dialog-close:hover {
background: rgba(var(--color-foreground), 0.05);
}
.product-variant-popup__dialog-body {
padding: var(--space-4) var(--space-5) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.product-vendor {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
color: rgb(var(--color-foreground-secondary));
font-size: var(--font-body--size-small);
}
.product-vendor a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.product-vendor a:hover { color: rgb(var(--color-accent-1)); }
.product-qty-breaks {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.product-qty-breaks__heading {
font-weight: 600;
margin: 0 0 var(--space-2);
}
.product-qty-breaks__rules {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--font-body--size-small);
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-3);
}
.product-qty-breaks__table {
display: flex;
flex-direction: column;
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius-md);
overflow: hidden;
}
.product-qty-breaks__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
font-size: 0.875rem;
border-inline-start: 3px solid transparent;
transition: background var(--duration-fast) var(--ease-out);
}
.product-qty-breaks__row:nth-child(even) {
background: rgba(var(--color-foreground), 0.03);
}
.product-qty-breaks__row--active {
border-inline-start-color: rgb(var(--color-accent-1));
font-weight: 600;
}
.product-qty-breaks__qty {
font-weight: 500;
}
.product-qty-breaks__price {
display: flex;
align-items: center;
gap: var(--space-2);
}
.product-qty-breaks__savings {
display: inline-flex;
padding: 1px var(--space-1);
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
}
.product-qty-breaks__placeholder {
padding: var(--space-4);
text-align: center;
color: rgba(var(--color-foreground), 0.4);
font-size: var(--font-body--size-small);
background: rgba(var(--color-foreground), 0.03);
border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
.product-qty-breaks__row {
transition: none;
}
}
.scatter-img {
overflow: hidden;
aspect-ratio: var(--scatter-aspect, 1 / 1);
border-radius: var(--scatter-radius, var(--radius-card));
box-shadow: var(--shadow-card);
transition: transform 0.3s ease;
}
.scatter-img:hover {
transform: scale(1.03);
}
.scatter-img__link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.scatter-img__media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.scatter-img--square { --scatter-aspect: 1 / 1; }
.scatter-img--portrait { --scatter-aspect: 4 / 5; }
.scatter-img--landscape { --scatter-aspect: 3 / 2; }
shopify-visual-preview-block-list .scatter-img[data-visual-preview-mode] {
position: relative;
width: 150px;
}
.showcase__panel {
display: none;
}
.showcase__panel[aria-hidden="false"] {
display: block;
animation: showcase-fade 0.4s ease;
}
@keyframes showcase-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.showcase__panel-grid {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (width >= 750px) {
.showcase__panel-grid {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.showcase__panel-media {
border-radius: var(--radius-card);
overflow: hidden;
}
.showcase__panel-img,
.showcase__panel-placeholder {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--showcase-ratio, 4/3);
object-fit: cover;
}
.showcase__panel-content {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.showcase__panel-text {
font-size: 0.9375rem;
line-height: 1.6;
color: rgb(var(--color-foreground-secondary));
}
.showcase__products {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.showcase__product {
display: flex;
flex-direction: column;
gap: var(--space-1);
text-decoration: none;
color: inherit;
}
.showcase__product:hover .showcase__product-title {
text-decoration: underline;
}
.showcase__product-img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-sm);
}
.showcase__product-title {
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
}
.showcase__product-price {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
}
.showcase__panel-placeholder-text {
color: rgb(var(--color-foreground-secondary));
font-size: 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
.showcase__panel[aria-hidden="false"] {
animation: none;
}
}
.block-slide {
position: relative;
display: flex;
min-height: var(--slide-min-height-m);
}
@media (width >= 750px) {
.block-slide {
min-height: var(--slide-min-height);
}
}
.block-slide__bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.block-slide__bg-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.block-slide__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
}
.block-slide__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: var(--slide-align-v);
align-items: var(--slide-align-h);
padding: var(--slide-padding);
padding-block-start: calc(var(--slide-padding) + var(--immersive-header-clearance, 0px));
width: 100%;
gap: 12px;
}
shopify-visual-preview-block-list .block-slide[data-visual-preview-mode] {
border: 1px dashed rgba(var(--color-foreground), 0.1);
min-height: 120px;
}
.stacking-card {
position: sticky;
top: var(--sticky-offset);
z-index: var(--card-z, 1);
height: min(var(--card-height, 100svh), 100svh - var(--sticky-offset));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
will-change: transform, filter;
transition: transform 0.15s linear, filter 0.15s linear;
border-radius: var(--radius-card);
}
.stacking-card[data-covered] {
pointer-events: none;
}
.stacking-card__media {
position: absolute;
inset: 0;
}
.stacking-card__img,
.stacking-card__video,
.stacking-card__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.stacking-card__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
}
.stacking-card__content {
position: relative;
z-index: 1;
display: flex;
width: 100%;
height: 100%;
padding: var(--space-6) var(--space-4);
}
.stacking-card__content--v-top { align-items: flex-start; }
.stacking-card__content--v-center { align-items: center; }
.stacking-card__content--v-bottom { align-items: flex-end; }
.stacking-card__content--h-left { justify-content: flex-start; text-align: left; }
.stacking-card__content--h-center { justify-content: center; text-align: center; }
.stacking-card__content--h-right { justify-content: flex-end; text-align: right; }
.stacking-card__content-inner {
max-width: var(--content-max-width, 600px);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (width >= 750px) {
.stacking-card__content {
padding: var(--space-8) var(--space-6);
}
}
shopify-visual-preview-block-list .stacking-card[data-visual-preview-mode] {
position: relative;
height: 300px;
border: 1px dashed rgba(var(--color-foreground), 0.1);
}
.block-story {
flex-shrink: 0;
scroll-snap-align: start;
}
.block-story__trigger {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
color: inherit;
cursor: pointer;
text-decoration: none;
padding: 0;
font-family: inherit;
}
.block-story__thumb {
width: var(--story-size, 80px);
height: var(--story-size, 80px);
overflow: hidden;
border: 2px solid rgb(var(--color-accent-1));
padding: 2px;
}
.block-stories--circle .block-story__thumb { border-radius: 50%; }
.block-stories--square .block-story__thumb { border-radius: 0; }
.block-stories--rounded .block-story__thumb { border-radius: var(--radius-md); }
.block-story__img,
.block-story__placeholder {
width: 100%;
height: 100%;
}
.block-story__img {
display: block;
object-fit: cover;
}
.block-story__placeholder {
background: rgba(var(--color-foreground), 0.05);
object-fit: cover;
}
.block-stories--circle .block-story__img,
.block-stories--circle .block-story__placeholder { border-radius: 50%; }
.block-stories--rounded .block-story__img,
.block-stories--rounded .block-story__placeholder { border-radius: calc(var(--radius-md) - 2px); }
.block-story__label {
font-size: 0.75rem;
max-width: var(--story-size, 80px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.block-story__dialog {
max-width: 420px;
width: 90vw;
border: none;
border-radius: var(--radius-card);
padding: 0;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-modal);
}
.block-story__dialog::backdrop {
background: rgba(0, 0, 0, var(--backdrop-opacity));
}
.block-story__dialog-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
}
.block-story__close {
position: absolute;
inset-block-start: 0.5rem;
inset-inline-end: 0.5rem;
background: rgba(var(--color-background), 0.8);
border: none;
border-radius: 50%;
padding: 0.375rem;
cursor: pointer;
color: inherit;
z-index: 1;
}
.block-story__dialog-video {
position: relative;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: var(--radius-sm);
}
.block-story__dialog-video-el,
.block-story__dialog-iframe {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: none;
}
.block-story__dialog-img {
display: block;
width: 100%;
border-radius: var(--radius-sm);
}
.block-story__dialog-heading {
font-size: 1.125rem;
margin: 0;
}
.block-story__dialog-text {
font-size: 0.875rem;
opacity: 0.85;
}
.block-story__dialog[open] {
animation: story-in 0.2s ease;
}
@keyframes story-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.block-accordion {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
width: 100%;
}
.block-accordion--dividers > .block-accordion-item {
border-block-end: 1px solid rgb(var(--color-border));
}
.block-accordion--dividers > .block-accordion-item:first-child {
border-block-start: 1px solid rgb(var(--color-border));
}
/* An explicit separator right above already draws the boundary. Without this,
the merchant sees two stacked 1px lines: the separator's, then ours. The
separator wins because it is the one they can tune (width, opacity, color,
margins). */
.block-separator + .block-accordion--dividers > .block-accordion-item:first-child {
border-block-start: none;
}
shopify-visual-preview-block-list .block-accordion[data-visual-preview-mode] {
max-width: 500px;
}
.block-badge {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
text-align: var(--badge-align-m, var(--badge-align, start));
}
@media (width >= 750px) {
.block-badge {
text-align: var(--badge-align, start);
}
}
.block-badge__pill {
display: inline-block;
padding-block: 0.3em;
padding-inline: 0.8em;
border-radius: 999px;
font-family: var(--font-body--family);
font-size: var(--font-body--size-small);
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
background: var(--badge-bg, rgba(var(--color-foreground), 0.08));
color: var(--badge-fg, inherit);
}
.block-button {
display: inline-block;
max-width: 100%;
min-width: 0;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-button .btn { max-width: 100%; }
/* Each local color overrides its own side; the other keeps the button style. */
.block-button--custom-background .btn,
.block-button--custom-background .btn:hover {
background: var(--button-custom-background-color);
}
.block-button--custom-text .btn,
.block-button--custom-text .btn:hover {
color: var(--button-custom-text-color);
}
.block-button--full-width {
display: block;
width: 100%;
}
shopify-visual-preview-block-list .block-button[data-visual-preview-mode] {
max-width: 300px;
}
scale-comparison {
display: block;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-comparison__container {
position: relative;
overflow: hidden;
border-radius: var(--compare-radius, var(--radius-media));
user-select: none;
}
.block-comparison__container img,
.block-comparison__container .block-comparison__placeholder-svg {
display: block;
width: 100%;
height: auto;
}
/* ── Slider mode ── */
.block-comparison--slider .block-comparison__container {
cursor: ew-resize;
}
.block-comparison--slider .block-comparison__before {
position: absolute;
inset: 0;
clip-path: inset(0 50% 0 0);
z-index: 1;
}
.block-comparison--slider .block-comparison__before img,
.block-comparison--slider .block-comparison__after img,
.block-comparison--slider .block-comparison__before .block-comparison__placeholder-svg,
.block-comparison--slider .block-comparison__after .block-comparison__placeholder-svg {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Track line */
.block-comparison__track {
position: absolute;
inset-block: 0;
inset-inline-start: calc(var(--compare, 50) * 1%);
z-index: 3;
width: 3px;
transform: translateX(-50%);
background: white;
box-shadow: 0 0 8px rgb(0 0 0 / 0.15);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
/* Handle grip */
.block-comparison__handle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 12px rgb(0 0 0 / 0.15), 0 0 0 1px rgb(0 0 0 / 0.05);
color: rgb(0 0 0 / 0.6);
gap: 4px;
transition: box-shadow 0.2s ease, gap 0.2s ease, transform 0.2s ease;
}
.block-comparison__container:hover .block-comparison__handle,
.block-comparison__container:active .block-comparison__handle {
box-shadow: 0 4px 16px rgb(0 0 0 / 0.2), 0 0 0 1px rgb(0 0 0 / 0.08);
gap: 8px;
}
.block-comparison__container:active .block-comparison__handle {
transform: scale(1.05);
}
.block-comparison__arrow {
flex-shrink: 0;
transition: transform 0.2s ease;
}
/* Range input — full size, invisible, on top */
.block-comparison__slider {
position: absolute;
inset: 0;
z-index: 4;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: ew-resize;
appearance: none;
}
.block-comparison__slider::-webkit-slider-thumb {
width: 44px;
height: 44px;
border: 0;
background: transparent;
cursor: ew-resize;
appearance: none;
}
.block-comparison__slider::-moz-range-thumb {
width: 44px;
height: 44px;
border: 0;
background: transparent;
cursor: ew-resize;
appearance: none;
}
.block-comparison__slider::-webkit-slider-track,
.block-comparison__slider::-moz-range-track {
background: transparent;
border: 0;
appearance: none;
}
.block-comparison__slider:focus-visible ~ .block-comparison__track .block-comparison__handle {
outline: var(--focus-outline-width) solid white;
outline-offset: 2px;
}
/* Labels on images */
.block-comparison__label {
position: absolute;
z-index: 2;
inset-block-end: 12px;
padding: 6px 14px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: white;
background: rgb(0 0 0 / 0.5);
backdrop-filter: blur(4px);
border-radius: 100px;
pointer-events: none;
}
.block-comparison__label--before {
inset-inline-start: 12px;
}
.block-comparison__label--after {
inset-inline-end: 12px;
}
/* ── Stacked mode: two prints laid on the page, tilted apart ── */
.block-comparison--stacked {
/* A size container no longer takes its width from its content: without it, a centered or row parent shrinks it to 0. */
inline-size: 100%;
container-type: inline-size;
}
.block-comparison--stacked .block-comparison__container {
overflow: visible;
border-radius: 0;
}
.block-comparison--stacked .block-comparison__before,
.block-comparison--stacked .block-comparison__after {
position: relative;
container-type: inline-size;
overflow: hidden;
border-radius: var(--compare-radius, var(--radius-media));
box-shadow: var(--shadow-popover);
transition: transform var(--duration-slow) var(--ease-spring);
/* Tilted, a print shrinks until its corners fit back in its own box: nothing spills past the block. */
--print-scale: min(
1 / (cos(var(--stacked-rotation)) + sin(var(--stacked-rotation)) / var(--print-ratio)),
1 / (cos(var(--stacked-rotation)) + sin(var(--stacked-rotation)) * var(--print-ratio))
);
}
.block-comparison--stacked .block-comparison__placeholder-svg {
aspect-ratio: var(--print-ratio);
}
.block-comparison--stacked .block-comparison__before {
transform: rotate(calc(-1 * var(--stacked-rotation))) scale(var(--print-scale));
}
.block-comparison--stacked .block-comparison__after {
z-index: 1;
transform: rotate(var(--stacked-rotation)) scale(var(--print-scale));
}
.block-comparison--stacked-side_by_side .block-comparison__container {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.block-comparison--stacked-side_by_side .block-comparison__before,
.block-comparison--stacked-side_by_side .block-comparison__after {
flex: 1;
}
.block-comparison--stacked-side_by_side .block-comparison__after {
margin-block-start: var(--stacked-offset);
}
/* Diagonal: the prints overlap, one high on one side, the other lower on the other. */
.block-comparison--stacked-diagonal .block-comparison__container,
.block-comparison--stacked-diagonal_reverse .block-comparison__container {
display: grid;
}
.block-comparison--stacked-diagonal :is(.block-comparison__before, .block-comparison__after),
.block-comparison--stacked-diagonal_reverse :is(.block-comparison__before, .block-comparison__after) {
grid-area: 1 / 1;
/* Each print keeps its own photo's height, not the height of the whole stack. */
align-self: start;
width: 62%;
}
.block-comparison--stacked-diagonal .block-comparison__before,
.block-comparison--stacked-diagonal_reverse .block-comparison__after {
justify-self: start;
}
.block-comparison--stacked-diagonal .block-comparison__after,
.block-comparison--stacked-diagonal_reverse .block-comparison__before {
justify-self: end;
}
.block-comparison--stacked-diagonal .block-comparison__after,
.block-comparison--stacked-diagonal_reverse .block-comparison__after {
margin-block-start: calc(20cqi + var(--stacked-offset));
}
/* A phone-sized print keeps its label small enough to leave the photo visible. */
@container (width < 240px) {
.block-comparison--stacked .block-comparison__label {
inset-block-end: 6px;
inset-inline: 6px auto;
padding: 3px 8px;
font-size: 0.625rem;
}
.block-comparison--stacked .block-comparison__label--after {
inset-inline: auto 6px;
}
}
/* Scrolled into view: the prints start gathered and straight, then deal out. */
@media (prefers-reduced-motion: no-preference) {
.block-comparison--stacked[data-stacked-enter] .block-comparison__before {
transform: translateX(8%);
}
.block-comparison--stacked[data-stacked-enter] .block-comparison__after {
transform: translateX(-8%);
}
}
/* ── Overlay mode: the before photo is revealed on hover, or on tap / Enter ── */
.block-comparison--overlay .block-comparison__before {
position: absolute;
inset: 0;
z-index: 1;
transition: opacity var(--duration-normal) var(--ease-out);
}
/* The wipe is motion; the fade stays, a change of opacity is not. */
@media (prefers-reduced-motion: no-preference) {
.block-comparison--overlay .block-comparison__before {
transition: opacity var(--duration-normal) var(--ease-out), clip-path var(--duration-slow) var(--ease-out);
}
}
.block-comparison--reveal-fade .block-comparison__before { opacity: 0; }
.block-comparison--reveal-left .block-comparison__before { clip-path: inset(0 100% 0 0); }
.block-comparison--reveal-right .block-comparison__before { clip-path: inset(0 0 0 100%); }
.block-comparison--reveal-top .block-comparison__before { clip-path: inset(0 0 100% 0); }
.block-comparison--reveal-bottom .block-comparison__before { clip-path: inset(100% 0 0 0); }
.block-comparison--overlay .block-comparison__label {
transition: opacity var(--duration-normal) var(--ease-out);
}
.block-comparison--overlay .block-comparison__label--before {
opacity: 0;
}
/* data-revealed: tapped or Enter. data-hovered: a mouse over the frame. */
.block-comparison--overlay:is([data-revealed], [data-hovered]) .block-comparison__before {
opacity: 1;
clip-path: inset(0);
}
.block-comparison--overlay:is([data-revealed], [data-hovered]) .block-comparison__label--before { opacity: 1; }
.block-comparison--overlay:is([data-revealed], [data-hovered]) .block-comparison__label--after { opacity: 0; }
.block-comparison--overlay:is([data-revealed], [data-hovered]) .block-comparison__hint { opacity: 0; }
.block-comparison__reveal {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
.block-comparison__reveal:focus-visible {
outline: var(--focus-outline-width) solid white;
outline-offset: -6px;
}
.block-comparison__hint {
padding: 8px 16px;
font-size: 0.8125rem;
font-weight: 600;
color: white;
background: rgb(0 0 0 / 0.5);
backdrop-filter: blur(4px);
border-radius: 100px;
transition: opacity var(--duration-normal) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.block-comparison__hint {
animation: block-comparison-hint-pulse 2s var(--ease-in-out) infinite;
}
}
@keyframes block-comparison-hint-pulse {
50% { transform: scale(1.06); }
}
/* ── Placeholder ── */
.block-comparison--placeholder.block-comparison--slider .block-comparison__container,
.block-comparison--placeholder.block-comparison--overlay .block-comparison__container {
aspect-ratio: 16 / 9;
}
.block-comparison--placeholder.block-comparison--slider .block-comparison__after,
.block-comparison--placeholder.block-comparison--overlay .block-comparison__after {
position: absolute;
inset: 0;
}
.block-comparison--placeholder .block-comparison__placeholder-svg {
height: 100%;
object-fit: cover;
background: rgba(var(--color-foreground), 0.06);
}
.block-comparison--placeholder .block-comparison__before .block-comparison__placeholder-svg {
background: rgba(var(--color-foreground), 0.1);
}
.block-comparison--placeholder .block-comparison__track {
background: rgb(var(--color-foreground));
}
.block-comparison--placeholder .block-comparison__handle {
color: rgb(var(--color-foreground));
background: rgb(var(--color-background));
}
.block-contact {
display: block;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-contact__fields {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* The label sits in the field and slides up on focus or once filled. The empty
placeholder only exists so :placeholder-shown can tell an empty field. */
.block-contact__field {
position: relative;
}
.block-contact__field .field__input {
padding-block: calc(var(--inputs-padding) + var(--space-2)) calc(var(--inputs-padding) - var(--space-2));
}
.block-contact__field label {
position: absolute;
inset-block-start: calc(var(--inputs-padding) + 1px);
inset-inline: calc(var(--inputs-padding) + 1px);
margin: 0;
overflow: hidden;
font-size: 1rem;
font-weight: 500;
line-height: 1.25rem;
color: rgba(var(--color-foreground), 0.6);
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
transition: translate var(--duration-normal) var(--ease-out), font-size var(--duration-normal) var(--ease-out), line-height var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
.block-contact__field .field__input:is(:focus, :autofill, :not(:placeholder-shown)) + label {
translate: 0 calc(var(--space-2) * -1);
font-size: 0.75rem;
line-height: 1rem;
color: rgb(var(--color-foreground));
}
.block-contact__textarea {
resize: vertical;
min-height: 120px;
}
.block-contact__success {
color: rgb(var(--color-success));
font-size: 0.875rem;
padding: 0.75rem;
background: rgba(var(--color-success), 0.08);
border-radius: var(--radius-sm);
margin-block-end: 1rem;
}
.block-contact__errors {
color: rgb(var(--color-error));
font-size: 0.875rem;
padding: 0.75rem;
background: rgba(var(--color-error), 0.08);
border-radius: var(--radius-sm);
margin-block-end: 1rem;
}
@media (prefers-reduced-motion: reduce) {
.block-contact__field label {
transition: none;
}
}
scale-countdown {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: block;
font-size: calc(1rem * var(--countdown-scale, 1));
}
scale-countdown[hidden] {
display: none;
}
.block-countdown__inner {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.block-countdown--align-left .block-countdown__inner { align-items: flex-start; text-align: start; }
.block-countdown--align-center .block-countdown__inner { align-items: center; text-align: center; }
.block-countdown--align-right .block-countdown__inner { align-items: flex-end; text-align: end; }
.block-countdown--inline .block-countdown__inner {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5em 1em;
}
.block-countdown--inline.block-countdown--align-center .block-countdown__inner { justify-content: center; }
.block-countdown--inline.block-countdown--align-right .block-countdown__inner { justify-content: flex-end; }
.block-countdown__heading {
font-size: 0.875em;
font-weight: 600;
line-height: 1.3;
text-wrap: balance;
}
.block-countdown__timer {
display: flex;
gap: var(--space-3);
color: var(--countdown-text, inherit);
}
.block-countdown__unit {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
min-width: 3em;
}
.block-countdown__value {
font-size: 2em;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
}
.block-countdown__digit {
display: inline-grid;
}
.block-countdown__digit > * {
grid-area: 1 / 1;
}
.block-countdown__label {
font-size: 0.625em;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
}
.block-countdown__unit--sep {
min-width: auto;
opacity: 0.35;
}
/* Cards style: one tile per unit */
.block-countdown--cards .block-countdown__timer {
gap: var(--space-2);
}
.block-countdown--cards .block-countdown__unit {
background: var(--countdown-bg, rgba(var(--color-foreground), 0.05));
border-radius: var(--radius-sm);
padding: 0.75em 0.5em;
min-width: 3.25em;
}
.block-countdown--cards .block-countdown__unit--sep {
background: none;
padding-inline: 0;
min-width: auto;
}
/* Badge style: one compact pill, units inline */
.block-countdown--badge .block-countdown__timer {
gap: var(--space-2);
padding: 0.4em 0.9em;
border-radius: var(--radius-badge);
background: var(--countdown-bg, rgba(var(--color-foreground), 0.06));
}
.block-countdown--badge .block-countdown__unit {
flex-direction: row;
align-items: baseline;
gap: 0.2em;
min-width: auto;
}
.block-countdown--badge .block-countdown__value {
font-size: 1.25em;
}
.block-countdown--badge .block-countdown__label {
text-transform: none;
letter-spacing: 0;
font-size: 0.75em;
opacity: 0.8;
}
.block-countdown__expired {
text-align: center;
font-weight: 500;
}
scale-countdown[data-expired] .block-countdown__inner {
display: none;
}
scale-countdown[data-expired] .block-countdown__expired {
display: block;
}
.block-custom-code {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-custom-code--empty {
padding: 1rem;
background: rgba(var(--color-foreground), 0.03);
border: 1px dashed rgba(var(--color-foreground), 0.15);
border-radius: 4px;
font-size: 0.875rem;
color: rgb(var(--color-foreground-secondary));
text-align: center;
}
.featured-collection {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.featured-collection__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-block-end: var(--space-6);
flex-wrap: wrap;
}
.featured-collection__heading {
margin: 0;
}
.featured-collection__view-all {
font-size: var(--font-body--size-small);
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
white-space: nowrap;
}
.featured-collection__view-all:hover {
opacity: 0.7;
}
.featured-collection__cover-cell--span-2 {
grid-column: span 2;
grid-row: span 2;
}
shopify-visual-preview-block-list .featured-collection[data-visual-preview-mode] {
max-width: 600px;
}
.flip-card {
position: relative;
display: flex;
perspective: 1000px;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.flip-card__inner {
position: relative;
flex: 1;
min-height: var(--fc-min-height, 280px);
transition: transform 0.6s;
transform-style: preserve-3d;
border-radius: var(--radius-card);
background: var(--gradient-background);
color: rgb(var(--color-foreground));
border: 1px solid rgb(var(--color-border));
}
.flip-card.is-flipped .flip-card__inner {
transform: rotateY(180deg);
}
.flip-card__face {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip-card__front {
transform: rotateY(0deg);
}
.flip-card__back {
position: absolute;
inset: 0;
transform: rotateY(180deg);
}
.flip-card__trigger {
position: absolute;
z-index: 3;
inset-inline-end: var(--space-4);
inset-block-end: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
font-size: 1.25rem;
font-weight: 300;
line-height: 1;
cursor: pointer;
transition: opacity 0.2s;
}
.flip-card__trigger:hover {
opacity: 0.8;
}
.flip-card.is-flipped .flip-card__trigger {
inset-block-start: var(--space-4);
inset-block-end: auto;
}
.flip-card__trigger-close { display: none; }
.flip-card.is-flipped .flip-card__trigger-open { display: none; }
.flip-card.is-flipped .flip-card__trigger-close { display: flex; }
@media (prefers-reduced-motion: reduce) {
.flip-card__inner {
transition: none;
}
}
shopify-visual-preview-block-list .flip-card[data-visual-preview-mode] {
max-width: 400px;
}
.block-group {
position: relative;
min-width: 0;
width: var(--width-m, 100%);
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
padding-block: var(--g-pad-v);
padding-inline: var(--g-pad-h);
min-height: var(--g-min-h, auto);
}
@media (width >= 750px) {
.block-group {
width: var(--width-d, var(--width-m, 100%));
padding-block: var(--g-pad-v-d);
padding-inline: var(--g-pad-h-d);
}
}
.block-group--card {
border: var(--g-border, none);
border-radius: var(--radius-card);
background: var(--gradient-background);
color: rgb(var(--color-foreground));
}
/* Glass card: the surface color at 72%, blurred over whatever sits behind
(an image, a chapter), with a hairline of the same color. */
.block-group--glass {
background: color-mix(in srgb, rgb(var(--color-background)) 72%, transparent);
border: 1px solid color-mix(in srgb, rgb(var(--color-background)) 55%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Absolute: overlaid on the nearest positioned ancestor (a group is one),
anchored to one corner. Sticky: pins itself while its siblings scroll. */
.block-group--absolute {
position: absolute;
top: var(--g-top, auto);
right: var(--g-right, auto);
bottom: var(--g-bottom, auto);
left: var(--g-left, auto);
z-index: 2;
}
.block-group--behind {
z-index: 0;
}
@media (width < 750px) {
.block-group--minh-mobile-auto {
min-height: auto;
}
.block-group--absolute-desktop-only {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
}
/* Sticky is a desktop scroll effect: on mobile the column stacks and the
pinned block would cover what scrolls under it. */
@media (width >= 750px) {
.block-group--sticky {
position: sticky;
top: var(--g-sticky-top, 96px);
align-self: flex-start;
}
}
.block-group__inner {
position: relative;
z-index: 1;
width: 100%;
/* Reset the group's own --flex-m/--flex-d (emitted by flex-item-style so
the group can size itself inside a parent flex container). CSS custom
properties inherit, so without this reset the group's value cascades
into children that don't set their own width, stretching them to fill.
Children with an explicit width override this via their inline style. */
--flex-m: 0 1 auto;
--flex-d: 0 1 auto;
/* Same reason for everything the group only emits when it applies: the
anchors, its min-height and its card border. A group overlaid at top-left
with a 500px floor would otherwise hand --g-left and --g-min-h to every
descendant group, which would then carry a third inset and a floor it
never set. */
--g-top: auto;
--g-right: auto;
--g-bottom: auto;
--g-left: auto;
--g-min-h: auto;
--g-border: none;
}
/* Flex mode — child sizing handled by .layout-flex in layout-flex.css.
The group itself is a column so its inner fills any height it receives
(stretched by a parent row, or min_height): justify then really centers. */
.block-group--flex,
.block-group--grid {
display: flex;
flex-direction: column;
}
.block-group--flex > .block-group__inner,
.block-group--grid > .block-group__inner {
flex: 1 0 auto;
}
.block-group--flex > .block-group__inner {
display: flex;
flex-direction: var(--g-direction);
justify-content: var(--g-justify);
align-items: var(--g-align);
flex-wrap: var(--g-wrap);
gap: var(--g-gap);
--flex-gap: var(--g-gap);
min-width: 0;
}
.block-group--flex > .block-group__inner:has(> .block-button) {
flex-wrap: wrap;
}
/* Column direction: block-owned width controls the cross axis; only disable
proportional flex growth on the vertical main axis. */
@media (width < 750px) {
.block-group--flex[style*="--g-direction: column"] > .block-group__inner > * {
flex: 0 0 auto;
}
}
@media (width >= 750px) {
.block-group--flex > .block-group__inner {
flex-direction: var(--g-direction-d);
justify-content: var(--g-justify-d);
align-items: var(--g-align-d);
flex-wrap: var(--g-wrap-d);
gap: var(--g-gap-d);
--flex-gap: var(--g-gap-d);
}
.block-group--flex[style*="--g-direction-d: column"] > .block-group__inner > * {
flex: 0 0 auto;
}
}
/* Grid mode */
.block-group--grid > .block-group__inner {
display: grid;
grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
gap: var(--g-gap);
}
.block-group--grid > .block-group__inner > * {
min-width: 0;
}
@media (width >= 750px) {
.block-group--grid > .block-group__inner {
grid-template-columns: repeat(var(--g-cols-d), minmax(0, 1fr));
gap: var(--g-gap-d);
}
}
/* Columns (masonry) mode */
.block-group--columns > .block-group__inner {
column-count: var(--g-cols);
column-gap: var(--g-gap);
}
.block-group--columns > .block-group__inner > * {
break-inside: avoid;
margin-block-end: var(--g-gap);
}
@media (width >= 750px) {
.block-group--columns > .block-group__inner {
column-count: var(--g-cols-d);
column-gap: var(--g-gap-d);
}
.block-group--columns > .block-group__inner > * {
margin-block-end: var(--g-gap-d);
}
}
/* Background image */
.block-group__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
}
/* Sized to cover the group instead of being cropped by object-fit: the
group's height follows its content, so only the browser knows the width
the image is drawn at, and sizes="auto" reads it from this box. */
.block-group__bg-img {
position: absolute;
top: 50%;
left: 50%;
inline-size: max(100cqi, 100cqb * var(--bg-ratio));
max-inline-size: none;
translate: -50% -50%;
}
.block-group__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
}
.block-group--has-bg > .block-group__inner {
position: relative;
z-index: 1;
}
/* Link overlay */
.block-group__link {
position: absolute;
inset: 0;
z-index: 2;
}
.block-group--linked :is(a, button, input, textarea, select) {
position: relative;
z-index: 3;
}
.block-group--linked:hover {
opacity: 0.95;
}
/* Card */
.block-group--card {
overflow: hidden;
}
/* Widths come from flex-item-style: in a flex parent, `.layout-flex > *`
sizes the image like any other column, `fill` rows included. `auto` is
the full width here: the image has no size of its own to shrink to. */
.block-hotspot-image {
width: 100%;
min-width: 0;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-hotspot-image:not([style*="--width-m: auto"]) {
width: var(--width-m);
}
@media (width >= 750px) {
.block-hotspot-image[style*="--width-d: auto"] {
width: 100%;
}
.block-hotspot-image:not([style*="--width-d: auto"]) {
width: var(--width-d);
}
}
.block-iwt {
--iwt-desc-size: 0.875rem;
--iwt-icon-box: var(--iwt-icon-size);
--iwt-line: calc(var(--iwt-line-size) * var(--line-height--body));
--iwt-first-line: var(--iwt-first-line-m);
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
flex-direction: var(--iwt-direction);
align-items: var(--iwt-align, center);
gap: var(--iwt-gap);
position: relative;
text-align: var(--iwt-text-align, left);
}
@media (width >= 750px) {
.block-iwt {
flex-direction: var(--iwt-direction-d);
align-items: var(--iwt-align-d, center);
text-align: var(--iwt-text-align-d, left);
--iwt-first-line: var(--iwt-first-line-d);
}
}
/* With a background the block owns the pastille: twice the glyph, whatever its size. */
.block-iwt--icon-bg {
--iwt-icon-box: calc(var(--iwt-icon-size) * 2);
}
.block-iwt__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--iwt-icon-box);
height: var(--iwt-icon-box);
line-height: 0;
/* Centered on the first line: the shorter of icon and line moves down by half the difference. */
margin-block-start: calc(max(0px, (var(--iwt-line) - var(--iwt-icon-box)) / 2) * var(--iwt-first-line));
}
.block-iwt__icon--accent-1 { color: rgb(var(--color-accent-1)); }
.block-iwt__icon--accent-2 { color: rgb(var(--color-accent-2)); }
.block-iwt__icon--foreground { color: rgb(var(--color-foreground)); }
.block-iwt__icon--custom { color: var(--iwt-custom-color); }
.block-iwt__icon--bg-circle {
border-radius: 50%;
background: var(--iwt-icon-bg, rgba(var(--color-accent-1), 0.1));
}
/* Filled pastille: the glyph reads on the background colour, so it overrides
the icon_color class. Both are single-class selectors, source order wins. */
.block-iwt__icon--bg-circle-solid {
border-radius: 50%;
background: var(--iwt-icon-bg, rgb(var(--color-accent-1)));
color: rgb(var(--color-background));
}
.block-iwt__icon--bg-circle-outline {
border-radius: 50%;
border: 1.5px solid currentColor;
}
.block-iwt__icon--bg-square {
border-radius: var(--radius-sm);
background: var(--iwt-icon-bg, rgba(var(--color-accent-1), 0.1));
}
.block-iwt__icon--bg-rounded {
border-radius: var(--radius-md);
background: var(--iwt-icon-bg, rgba(var(--color-accent-1), 0.1));
}
.block-iwt__content {
min-width: 0;
margin-block-start: calc(max(0px, (var(--iwt-icon-box) - var(--iwt-line)) / 2) * var(--iwt-first-line));
}
.block-iwt__title,
.block-iwt__description {
color: var(--iwt-text-color, inherit);
}
.block-iwt__title,
.block-iwt__description {
line-height: var(--line-height--body);
}
.block-iwt__title {
margin: 0;
font-size: var(--iwt-title-size);
font-weight: 600;
}
.block-iwt__title--font-heading {
font-family: var(--font-heading--family);
font-style: var(--font-heading--style);
}
.block-iwt__description {
font-size: var(--iwt-desc-size);
opacity: 0.8;
}
.block-iwt__title + .block-iwt__description {
margin-block-start: 0.25em;
}
.block-iwt__description > * + * {
margin-block-start: 0.5em;
}
.block-iwt__link {
position: absolute;
inset: 0;
z-index: 1;
}
.block-iwt:has(.block-iwt__link):hover {
opacity: 0.85;
}
shopify-visual-preview-block-list .block-iwt[data-visual-preview-mode] {
max-width: 350px;
}
.block-icon {
display: flex;
inline-size: 100%;
justify-content: var(--icon-align, flex-start);
line-height: 0;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
/* Its full width is for its alignment; in a row it would become its share
and leave the text beside it one letter wide. Sharing a flex container,
the icon keeps its own size (the doubled class outweighs the layout-flex
child default); alone, it keeps the width its alignment needs. */
.layout-flex.layout-flex > .block-icon:not(:only-child) {
flex: 0 0 content;
}
.block-icon--accent-1 { color: rgb(var(--color-accent-1)); }
.block-icon--accent-2 { color: rgb(var(--color-accent-2)); }
.block-icon--foreground { color: rgb(var(--color-foreground)); }
/* Image card: media absolute behind, content relative */
.block-image-card {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
position: relative;
overflow: hidden;
width: 100%;
align-self: start;
border-radius: var(--ic-radius, var(--radius-media));
}
@media (width >= 750px) {
.block-image-card--sticky-desktop {
position: sticky;
top: var(--space-8);
z-index: 1;
}
}
.block-image-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
/* Media — fills the card absolutely */
.block-image-card__media {
position: absolute;
inset: 0;
z-index: 0;
}
.block-image-card__media--zoom .block-image-card__img {
transition: transform 0.5s ease;
}
.block-image-card:hover .block-image-card__media--zoom .block-image-card__img {
transform: scale(1.05);
}
.block-image-card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.block-image-card__img--mobile { display: block; }
.block-image-card__img--desktop { display: none; }
@media (width >= 750px) {
.block-image-card__img--mobile { display: none; }
.block-image-card__img--desktop { display: block; }
}
.block-image-card__placeholder {
width: 100%;
height: 100%;
background: rgba(var(--color-foreground), 0.04);
}
.block-image-card__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
z-index: 1;
}
/* Content — relative, gives height via aspect-ratio */
.block-image-card__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
aspect-ratio: var(--ic-aspect-m, var(--ic-aspect));
padding-block: var(--ic-pad-v);
padding-inline: var(--ic-pad-h);
gap: var(--space-3);
justify-content: var(--ic-pos-v);
align-items: var(--ic-pos-h);
text-align: var(--ic-pos-h);
}
.block-image-card--natural .block-image-card__content {
aspect-ratio: auto;
}
@media (width >= 750px) {
.block-image-card__content {
aspect-ratio: var(--ic-aspect);
}
}
@media (width >= 750px) {
.block-image-card__content--narrow > * { max-width: 50%; }
.block-image-card__content--normal > * { max-width: 70%; }
}
.block-image-card__content :is(a, button, input, textarea, select) {
position: relative;
z-index: 3;
}
shopify-visual-preview-block-list .block-image-card[data-visual-preview-mode] {
max-width: 450px;
}
.block-image {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
width: var(--width-m, auto);
max-width: 100%;
min-width: 0;
}
@media (width >= 750px) {
.block-image {
width: var(--width-d, var(--width-m, auto));
}
}
/* In a flex parent, .layout-flex > * sets `flex` which overrides width via flex-basis */
.block-image .image-wrapper {
border-radius: var(--img-radius, var(--radius-media));
}
/* Cut-out shapes: the wrapper clips, the media keeps covering. Arch and
circle read best on portrait / square ratios. */
.block-image--shape-arch .image-wrapper { border-radius: 50% 50% var(--img-radius, var(--radius-media)) var(--img-radius, var(--radius-media)) / 42% 42% var(--img-radius, var(--radius-media)) var(--img-radius, var(--radius-media)); }
.block-image--shape-circle .image-wrapper { border-radius: 50%; }
.block-image--shape-pill .image-wrapper { border-radius: 999px; }
.block-image--shape-leaf .image-wrapper { border-radius: 60% 0 60% 0 / 55% 0 55% 0; }
.block-image--shape-blob .image-wrapper { border-radius: 58% 42% 34% 66% / 56% 32% 68% 44%; }
.block-image a {
display: block;
}
.block-image__desktop {
display: none;
}
.block-image__mobile {
display: block;
}
@media (width >= 750px) {
.block-image__desktop {
display: block;
}
.block-image__mobile {
display: none;
}
}
.block-image__placeholder {
background: rgba(var(--color-foreground), 0.03);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.block-image__placeholder-svg {
width: 100%;
height: 100%;
}
shopify-visual-preview-block-list .block-image[data-visual-preview-mode] {
max-width: 400px;
}
/* Overlaid on the nearest positioned ancestor (a group is one), anchored to one
corner: the two opposite sides stay auto, so the image keeps its own size. */
.block-image--absolute {
position: absolute;
top: var(--img-top, auto);
right: var(--img-right, auto);
bottom: var(--img-bottom, auto);
left: var(--img-left, auto);
z-index: 1;
pointer-events: none;
}
.block-image--behind {
z-index: 0;
}
/* A collage has no room on a phone: the image goes back into the column. */
@media (width < 750px) {
.block-image--absolute-desktop-only {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
pointer-events: auto;
}
}
.block-jumbo {
margin: 0;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
text-wrap: balance;
font-family: var(--font-heading--family);
font-style: var(--font-heading--style);
font-weight: var(--jumbo-weight, 700);
line-height: var(--jumbo-line-height, 0.9);
letter-spacing: var(--jumbo-letter-spacing, -0.03em);
text-transform: var(--jumbo-text-case, none);
text-align: var(--jumbo-align-m, center);
font-size: var(--jumbo-font-size, var(--jumbo-font-size-m, 3rem));
}
@media (width >= 750px) {
.block-jumbo {
text-align: var(--jumbo-align-d, center);
font-size: var(--jumbo-font-size, var(--jumbo-font-size-d, 5rem));
}
}
.block-jumbo--gradient {
background: linear-gradient(var(--gradient-direction), var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
shopify-visual-preview-block-list .block-jumbo[data-visual-preview-mode] {
max-width: 450px;
font-size: 3rem;
}
.block-logo {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: inline-flex;
align-items: center;
line-height: 0;
}
.block-logo img {
display: block;
width: auto;
height: var(--block-logo-height-m);
object-fit: contain;
opacity: var(--block-logo-opacity);
}
@media (width >= 750px) {
.block-logo img {
height: var(--block-logo-height);
}
}
.block-logo--grayscale img {
filter: grayscale(1);
transition: filter 0.3s ease;
}
.block-logo--grayscale:hover img {
filter: grayscale(0);
}
.block-logo__placeholder {
height: 40px;
width: auto;
}
.block-logo a {
display: inline-flex;
}
.block-marquee {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
overflow: hidden;
width: 100%;
}
.block-marquee__track {
display: flex;
width: max-content;
animation: marquee var(--marquee-speed) linear infinite;
animation-direction: var(--marquee-direction);
}
/* Reading needs a stop, whether the pointer or the keyboard asks for it. */
.block-marquee[data-pause-hover]:hover .block-marquee__track,
.block-marquee[data-pause-hover]:focus-within .block-marquee__track {
animation-play-state: paused;
}
/* The row comes from nowhere and leaves for nowhere instead of being cut at the edges. */
.block-marquee[data-fade-edges] {
mask-image: linear-gradient(to right, transparent, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent);
}
/* Cards keep their own width instead of stretching to their longest line. */
.block-marquee--blocks .block-marquee__group > * {
flex: 0 0 auto;
max-inline-size: min(78vw, 320px);
}
.block-marquee__group {
display: flex;
align-items: center;
gap: var(--marquee-gap);
padding-inline-end: var(--marquee-gap);
flex-shrink: 0;
}
.block-marquee__item {
white-space: nowrap;
}
.block-marquee__item--large {
font-family: var(--font-heading--family);
font-weight: var(--font-heading--weight);
font-size: 1.5rem;
}
.block-marquee__item--xl {
font-family: var(--font-heading--family);
font-weight: var(--font-heading--weight);
font-size: 2.5rem;
line-height: 1.1;
}
.block-marquee__sep {
opacity: 0.4;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.block-marquee__track {
animation: none;
}
/* Nothing moves on its own any more, so the row is scrolled by hand. */
.block-marquee {
overflow-x: auto;
}
}
.block-menu {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
/* Summary reset */
.block-menu summary {
list-style: none;
}
.block-menu summary::-webkit-details-marker { display: none; }
/* Heading */
.block-menu__heading {
margin-block-end: var(--menu-spacing-m);
}
/* Toggle icon */
.block-menu__toggle { display: none; }
/* Link list */
.block-menu__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--menu-spacing-m);
}
.block-menu--row .block-menu__list {
flex-direction: row;
flex-wrap: wrap;
}
/* Links */
.block-menu__link {
color: rgb(var(--color-foreground-secondary));
text-decoration: none;
font-size: var(--font-body--size-small);
transition: color var(--duration-fast);
}
.block-menu__link:hover {
color: rgb(var(--color-foreground));
}
/* Desktop: always open, summary not interactive */
@media (width >= 750px) {
.block-menu__heading { margin-block-end: var(--menu-spacing); }
.block-menu__list { gap: var(--menu-spacing); }
.block-menu details > summary {
pointer-events: none;
}
}
/* Mobile accordion behavior */
@media (width < 750px) {
.block-menu--accordion > details > summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-block: var(--space-3);
border-block-end: 1px solid rgba(var(--color-border), 0.2);
margin-block-end: 0;
}
/* Closed, the details element hides the list itself, so it can fold away instead of vanishing. */
.block-menu--accordion > details > .block-menu__list {
padding-block: var(--space-3);
}
/* Toggle icons */
.block-menu--accordion .block-menu__toggle {
display: flex;
color: rgb(var(--color-foreground-secondary));
}
/* Plus/minus icon swap */
.block-menu--accordion .block-menu__icon-minus { display: none; }
.block-menu--accordion details[open] .block-menu__icon-plus { display: none; }
.block-menu--accordion details[open] .block-menu__icon-minus { display: flex; }
/* Caret rotation */
.block-menu--accordion .block-menu__toggle .icon {
transition: transform var(--duration-normal) var(--ease-out);
}
.block-menu--accordion details[open] .block-menu__toggle .icon {
transform: rotate(180deg);
}
}
.block-modal-trigger {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-modal-trigger__btn {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
padding: 0;
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.block-modal-trigger__btn--underline {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.block-modal-trigger__btn:hover {
opacity: 0.7;
}
.block-modal-trigger__dialog {
width: 90vw;
max-width: var(--dialog-max-width, 600px);
border: none;
border-radius: var(--radius-card);
padding: 0;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-modal);
}
.block-modal-trigger__dialog::backdrop {
background: rgba(0, 0, 0, var(--backdrop-opacity));
}
.block-modal-trigger__header {
display: flex;
justify-content: end;
padding: 0.75rem 0.75rem 0;
}
.block-modal-trigger__close {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0.25rem;
display: flex;
border-radius: 50%;
transition: background 0.2s ease;
}
.block-modal-trigger__close:hover {
background: rgba(var(--color-foreground), 0.05);
}
.block-modal-trigger__content {
padding: 0 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.block-modal-trigger__dialog[open] {
animation: modal-in 0.2s ease;
}
@keyframes modal-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.block-newsletter {
display: block;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-newsletter__row {
display: flex;
gap: var(--space-2);
}
.block-newsletter--inline .block-newsletter__row {
flex-wrap: wrap;
}
.block-newsletter--stacked .block-newsletter__row {
flex-direction: column;
}
.block-newsletter--stacked .block-newsletter__submit {
width: 100%;
}
.block-newsletter__submit {
--button-font-size: min(var(--buttons-font-size), 0.875rem);
--button-padding-block: min(var(--buttons-space-vertical), var(--space-3));
--button-padding-inline: min(var(--buttons-space-horizontal), var(--space-4));
flex: 1 1 auto;
max-width: 100%;
}
.block-newsletter__submit .btn__label {
white-space: normal;
line-height: 1.25;
text-align: center;
}
.block-newsletter__field--email {
flex: 1;
}
.block-newsletter--inline .block-newsletter__field--email {
flex: 1 1 12rem;
min-width: 0;
}
.block-newsletter__feedback {
font-size: 0.875rem;
margin-block-start: var(--space-2);
}
.block-newsletter__feedback--success {
color: rgb(var(--color-success));
}
.block-newsletter__feedback--error {
color: rgb(var(--color-error));
}
.block-payment {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-payment__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.block-payment--align-left .block-payment__list { justify-content: start; }
.block-payment--align-center .block-payment__list { justify-content: center; }
.block-payment--align-right .block-payment__list { justify-content: end; }
.block-payment__icon {
width: 38px;
height: 24px;
}
.block-rating {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
justify-content: flex-start;
min-width: 0;
}
.block-rating__avatars {
display: flex;
margin-inline-end: var(--space-1);
}
.block-rating__avatars img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgb(var(--color-background));
margin-inline-start: -8px;
}
.block-rating__avatars img:first-child {
margin-inline-start: 0;
}
.block-rating__label {
font-weight: 600;
font-size: 0.875rem;
}
.block-rating__logo {
height: 18px;
width: auto;
}
.block-rating__logo--trustpilot { height: 20px; }
.block-rating__logo--google { height: 16px; }
.block-rating__score {
font-weight: 600;
font-size: 0.875rem;
}
.block-rating__count {
font-size: 0.8125rem;
opacity: 0.6;
}
[data-count-up] {
font-variant-numeric: tabular-nums;
}
/* Arriving by scroll, the stars fill up to the rating while the figures count up to theirs
(the animation controller). The block itself never fades. A rating on screen when the page
opens, or shown by an editor, reads its values at once: it never waits, so nothing counts. */
.animations-ready .block-rating[data-animate] {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.animations-ready .block-rating[data-animate]:not(.animated) :is(.block-rating__score, .block-rating__count) {
opacity: 0;
}
.animations-ready .block-rating[data-animate]:not(.animated) .stars__fill {
clip-path: inset(0 100% 0 0);
}
.animations-ready .block-rating[data-animate]:not(.animated) .stars__fill:dir(rtl) {
clip-path: inset(0 0 0 100%);
}
.block-rating.animating .stars__fill {
animation: rating-stars-fill calc(var(--duration-slow) * 2) var(--ease-out);
}
.block-rating.animating .stars__fill:dir(rtl) {
animation-name: rating-stars-fill-rtl;
}
}
@keyframes rating-stars-fill {
from { clip-path: inset(0 100% 0 0); }
}
@keyframes rating-stars-fill-rtl {
from { clip-path: inset(0 0 0 100%); }
}
.block-rating__link {
font-size: 0.8125rem;
text-decoration: underline;
text-underline-offset: 0.2em;
color: inherit;
}
.block-rating__link:hover {
opacity: 0.7;
}
/* Sizes */
.block-rating--small { font-size: 0.8125rem; }
.block-rating--small .block-rating__logo { height: 14px; }
.block-rating--large { font-size: 1rem; }
.block-rating--large .block-rating__logo { height: 24px; }
.block-review {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
overflow-wrap: break-word;
}
.block-review--with_image {
flex-direction: column;
gap: var(--space-4);
}
.block-review--card {
padding: var(--space-5);
border-radius: var(--radius-card);
background: var(--gradient-background);
color: rgb(var(--color-foreground));
border: 1px solid rgb(var(--color-border));
}
.block-review__image {
width: 100%;
}
.block-review__image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-sm);
}
.block-review__stars-row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.block-review__logo {
height: 18px;
width: auto;
flex-shrink: 0;
}
.block-review__title {
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.3;
margin: 0;
}
.block-review__text {
font-size: 0.875rem;
line-height: 1.55;
opacity: 0.85;
}
.block-review__text > * + * {
margin-block-start: 0.5em;
}
.block-review__author {
display: flex;
align-items: center;
gap: var(--space-3);
}
.block-review__avatar {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.block-review__name {
font-weight: 600;
font-size: 0.875rem;
}
.block-review__verified {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: 0.75rem;
color: rgb(var(--color-accent-1));
}
/* On a card whose surface is the accent itself, an accent label vanishes:
the card's own text colour carries it. */
.block-review--card .block-review__verified {
color: rgb(var(--color-foreground));
opacity: 0.8;
}
.block-review__date {
display: block;
font-size: 0.75rem;
opacity: 0.6;
}
/* Compact — horizontal single line */
.block-review--compact {
flex-direction: row;
align-items: center;
gap: var(--space-4);
}
.block-review--compact .block-review__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.block-review--compact .block-review__text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.block-review--compact .block-review__title {
font-size: 0.875rem;
}
shopify-visual-preview-block-list .block-review[data-visual-preview-mode] {
max-width: 400px;
}
.block-separator {
display: flex;
justify-content: center;
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-separator__line {
border: none;
border-block-start: 1px solid var(--sep-custom-color, rgb(var(--color-border)));
margin: 0;
width: var(--sep-width, 100%);
opacity: var(--sep-opacity, 1);
}
.block-separator__shape {
display: block;
width: var(--sep-width, 100%);
color: var(--sep-custom-color, inherit);
}
.block-separator__shape svg {
display: block;
width: 100%;
height: auto;
}
.block-separator--accent-1 .block-separator__line {
border-color: rgb(var(--color-accent-1));
}
.block-separator--accent-2 .block-separator__line {
border-color: rgb(var(--color-accent-2));
}
.block-separator--foreground .block-separator__line {
border-color: rgb(var(--color-foreground));
}
/* Vertical mode */
.block-separator--vertical {
align-self: stretch;
justify-content: center;
align-items: center;
margin-block: 0;
margin-inline: var(--margin-top) var(--margin-bottom);
}
.block-separator--vertical .block-separator__line {
border-block-start: none;
border-inline-start: 1px solid var(--sep-custom-color, rgb(var(--color-border)));
width: 0;
height: var(--sep-width, 100%);
min-height: 24px;
}
shopify-visual-preview-block-list .block-separator[data-visual-preview-mode] {
max-width: 400px;
padding-block: 12px;
}
scale-shipping-countdown {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
font-size: calc(var(--font-body--size-small) * var(--shipping-countdown-scale, 1));
line-height: 1.4;
}
scale-shipping-countdown[hidden] {
display: none;
}
.block-shipping-countdown--align-center {
justify-content: center;
text-align: center;
}
.block-shipping-countdown--align-right {
justify-content: flex-end;
text-align: end;
}
.block-shipping-countdown__icon {
display: inline-flex;
flex-shrink: 0;
color: rgb(var(--color-accent-1));
}
.block-shipping-countdown__time {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.block-shipping-countdown--badge,
.block-shipping-countdown--card {
width: fit-content;
max-width: 100%;
}
.block-shipping-countdown--badge.block-shipping-countdown--align-center,
.block-shipping-countdown--card.block-shipping-countdown--align-center {
margin-inline: auto;
}
.block-shipping-countdown--badge.block-shipping-countdown--align-right,
.block-shipping-countdown--card.block-shipping-countdown--align-right {
margin-inline-start: auto;
}
.block-shipping-countdown--badge {
padding-block: 0.4em;
padding-inline: 0.9em;
border-radius: var(--radius-badge);
background: rgba(var(--color-accent-1), 0.1);
}
.block-shipping-countdown--card {
padding-block: var(--space-3);
padding-inline: var(--space-4);
border-radius: var(--radius-card);
background: rgba(var(--color-foreground), 0.05);
}
/* Arrows beside the track instead of over its first and last card: the
parent reserves the room (page margin or group padding). */
@media (width >= 750px) {
.block-slider--arrows-outside > .scale-slider__nav {
inset-inline: -44px;
}
}
.block-slider {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
shopify-visual-preview-block-list scale-slider[data-visual-preview-mode] {
max-width: 500px;
}
.block-social {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.block-social--align-left { justify-content: start; }
.block-social--align-center { justify-content: center; }
.block-social--align-right { justify-content: end; }
.block-social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
transition: opacity 0.2s ease;
}
.block-social a:hover {
opacity: 0.7;
}
.block-social--small a .icon { width: 16px; height: 16px; }
.block-social--normal a .icon { width: 20px; height: 20px; }
.block-social--large a .icon { width: 24px; height: 24px; }
.block-spacer {
height: var(--spacer-height-m);
}
@media (width >= 750px) {
.block-spacer {
height: var(--spacer-height-d);
}
}
shopify-visual-preview-block-list .block-spacer[data-visual-preview-mode] {
background: repeating-linear-gradient(
-45deg,
rgba(var(--color-foreground), 0.03),
rgba(var(--color-foreground), 0.03) 4px,
transparent 4px,
transparent 8px
);
min-height: 20px;
border: 1px dashed rgba(var(--color-foreground), 0.1);
}
.block-stamp-badge {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: inline-flex;
width: var(--stamp-size);
height: var(--stamp-size);
}
.block-stamp-badge__disc {
position: relative;
width: 100%;
height: 100%;
color: var(--stamp-fg, rgb(var(--color-foreground)));
background: var(--stamp-bg, transparent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.block-stamp-badge__text-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: currentColor;
font-family: var(--font-body--family);
font-weight: 600;
text-transform: uppercase;
animation: stamp-spin var(--stamp-speed) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.block-stamp-badge__text-ring {
animation: none;
}
}
.block-stamp-badge__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
@keyframes stamp-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.block-stat-bar {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-stat-bar__header {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-block-end: var(--space-2);
}
.block-stat-bar__value {
font-family: var(--font-heading--family);
font-style: var(--font-heading--style);
font-weight: var(--font-heading--weight);
font-size: var(--font-h3--size-mobile);
line-height: 1;
color: var(--stat-bar-color, rgb(var(--color-accent-1)));
}
@media (width >= 750px) {
.block-stat-bar__value {
font-size: var(--font-h3--size);
}
}
.block-stat-bar__label {
font-size: var(--font-body--size);
opacity: 0.8;
}
.block-stat-bar__track {
width: 100%;
height: var(--stat-bar-height, 6px);
background: rgba(var(--color-foreground), 0.08);
border-radius: 999px;
overflow: hidden;
}
.block-stat-bar__fill {
height: 100%;
width: 0;
border-radius: 999px;
background: var(--stat-bar-color, rgb(var(--color-accent-1)));
transition: width 1s ease-out;
}
.block-stat-bar__fill.is-visible {
width: var(--stat-target, 0%);
}
@media (prefers-reduced-motion: reduce) {
.block-stat-bar__fill {
transition: none;
width: var(--stat-target, 0%);
}
}
shopify-visual-preview-block-list .block-stat-bar[data-visual-preview-mode] {
max-width: 500px;
}
.block-stories {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-stories__track {
display: flex;
gap: var(--story-gap);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding-block: 4px;
}
.block-stories__track::-webkit-scrollbar {
display: none;
}
.block-stories--hide-labels .block-story__label {
display: none;
}
shopify-visual-preview-block-list .block-stories[data-visual-preview-mode] {
max-width: 500px;
}
scale-tabs {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: block;
}
/* Nav wrap — optional arrow container */
.block-tabs__nav-wrap {
display: flex;
align-items: center;
gap: var(--space-2);
}
.block-tabs--with-arrows .block-tabs__nav-wrap {
gap: var(--space-3);
}
/* Nav — shared */
.block-tabs__nav {
display: flex;
gap: 0;
justify-content: var(--tabs-align);
overflow-x: auto;
scrollbar-width: none;
flex: 1;
min-width: 0;
}
.block-tabs__nav::-webkit-scrollbar {
display: none;
}
@media (width >= 750px) {
.block-tabs__nav {
justify-content: var(--tabs-align-d);
}
}
/* Arrows (optional) */
.block-tabs__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 1px solid rgba(var(--color-border), 0.4);
border-radius: 999px;
background: transparent;
color: inherit;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.block-tabs__arrow:hover {
background: rgba(var(--color-foreground), 0.05);
border-color: rgba(var(--color-foreground), 0.6);
}
.block-tabs__arrow:focus-visible {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: 2px;
}
.block-tabs__arrow[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
}
/* Button — shared base */
.block-tabs__button {
background: none;
border: none;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: inherit;
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: var(--space-1);
opacity: 0.6;
transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-tabs__button:hover {
opacity: 0.8;
}
.block-tabs__button[aria-selected="true"] {
opacity: 1;
}
.block-tabs__button:focus-visible {
outline: var(--focus-outline-width) solid currentColor;
outline-offset: -2px;
}
/* === Style: underline (default) === */
.block-tabs--underline .block-tabs__nav {
border-block-end: 1px solid rgba(var(--color-border), 0.3);
}
.block-tabs--underline .block-tabs__button {
border-block-end: 2px solid transparent;
margin-block-end: -1px;
}
.block-tabs--underline .block-tabs__button[aria-selected="true"] {
border-block-end-color: rgb(var(--color-foreground));
}
/* === Style: pills === */
.block-tabs--pills .block-tabs__nav {
gap: var(--space-2);
padding: var(--space-1);
background: rgba(var(--color-foreground), 0.05);
border-radius: var(--radius-pill);
}
.block-tabs--pills .block-tabs__button {
border-radius: var(--radius-pill);
padding: 0.5rem 1.25rem;
}
.block-tabs--pills .block-tabs__button[aria-selected="true"] {
background: rgb(var(--color-background));
box-shadow: var(--shadow-card);
}
/* === Style: cards === */
.block-tabs--cards .block-tabs__nav {
gap: var(--space-2);
}
.block-tabs--cards .block-tabs__button {
border: 1px solid rgba(var(--color-border), 0.2);
border-radius: var(--radius-sm);
padding: 0.625rem 1.25rem;
}
.block-tabs--cards .block-tabs__button[aria-selected="true"] {
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
border-color: rgb(var(--color-foreground));
}
/* === Style: vertical === */
@media (width >= 750px) {
.block-tabs--vertical {
display: flex;
gap: var(--space-8);
align-items: start;
}
.block-tabs--vertical .block-tabs__nav {
flex-direction: column;
flex: 0 0 200px;
gap: var(--space-1);
border-inline-end: 1px solid rgba(var(--color-border), 0.3);
border-block-end: none;
padding-inline-end: var(--space-4);
position: sticky;
top: var(--space-6);
}
.block-tabs--vertical .block-tabs__button {
text-align: start;
justify-content: start;
width: 100%;
padding: 0.625rem 0.75rem;
border-radius: var(--radius-sm);
}
.block-tabs--vertical .block-tabs__button[aria-selected="true"] {
background: rgba(var(--color-foreground), 0.06);
}
.block-tabs--vertical .block-tabs__panels {
flex: 1;
min-width: 0;
padding-block-start: 0;
}
}
/* Panels */
.block-tabs__panels {
padding-block-start: var(--space-4);
}
.block-tabs__panel {
display: none;
}
/* Progressive fallback: content stays usable before JS assembles the tablist. */
scale-tabs:not(.is-initialized) .block-tabs__tab:first-child .block-tabs__panel {
display: block;
}
.block-tabs__panel[aria-hidden="false"],
.block-tabs__panel.active {
display: block;
}
shopify-visual-preview-block-list scale-tabs[data-visual-preview-mode] {
max-width: 500px;
}
.block-text {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
text-align: var(--text-align-m, var(--text-align, left));
font-family: var(--text-font-family, inherit);
font-style: var(--text-font-style, inherit);
font-size: var(--text-font-size-m, var(--text-font-size, inherit));
font-weight: var(--text-font-weight, inherit);
line-height: var(--text-line-height, inherit);
letter-spacing: var(--text-letter-spacing, inherit);
text-transform: var(--text-text-case, none);
color: var(--text-color-override, inherit);
word-wrap: break-word;
overflow-wrap: break-word;
}
@media (width >= 750px) {
.block-text {
text-align: var(--text-align, left);
font-size: var(--text-font-size, inherit);
}
}
.block-text--h1,
.block-text--h2,
.block-text--h3 {
text-wrap: balance;
}
.block-text--paragraph,
.block-text--rte {
text-wrap: pretty;
}
.block-text--fit {
width: fit-content;
}
.block-text--max-narrow {
max-width: 45ch;
}
.block-text--max-normal {
max-width: 65ch;
}
.block-text--badge {
display: inline-block;
width: fit-content;
padding-block: 0.3em;
padding-inline: 0.8em;
border-radius: 999px;
background: rgba(var(--color-foreground), 0.08);
}
.block-text--gradient {
background: linear-gradient(var(--gradient-direction), var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.block-text--bold-color strong,
.block-text--bold-color b {
font-weight: inherit;
color: var(--bold-color);
}
/* The highlight is an image of its color, so it can be drawn: while the text enters, it grows
behind its words from the start of the line, over half the entrance from its first quarter,
done before the text has fully arrived. */
.block-text--bold-highlight strong,
.block-text--bold-highlight b {
font-weight: inherit;
background: linear-gradient(var(--bold-highlight), var(--bold-highlight)) no-repeat 0 0 / 100% 100%;
color: var(--bold-highlight-text);
padding-inline: 0.2em;
padding-block: 0;
border-radius: 0.15em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.block-text--gradient.block-text--bold-highlight strong,
.block-text--gradient.block-text--bold-highlight b {
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: var(--bold-highlight-text);
background: linear-gradient(var(--bold-highlight), var(--bold-highlight)) no-repeat 0 0 / 100% 100%;
color: inherit;
}
.block-text--bold-highlight :is(strong, b):dir(rtl) {
background-position: 100% 0;
}
@keyframes bold-highlight-draw {
from { background-size: 0% 100%; }
}
@media (prefers-reduced-motion: no-preference) {
.block-text--bold-highlight.animating :is(strong, b) {
animation: bold-highlight-draw calc(var(--animate-duration) / 2) var(--ease-out) calc(var(--animate-duration) / 4) backwards;
}
}
.block-text--em-strikethrough em,
.block-text--em-strikethrough i {
font-style: normal;
text-decoration: line-through;
color: rgb(var(--color-foreground-secondary));
}
.block-text a {
color: inherit;
}
.block-text.rte > * + * {
margin-block-start: 0.75em;
}
.block-text.rte ul,
.block-text.rte ol {
padding-inline-start: 1.5em;
}
shopify-visual-preview-block-list .block-text[data-visual-preview-mode] {
max-width: 450px;
}
/* Read more */
scale-see-more {
display: block;
}
scale-see-more .block-text__content {
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--read-more-lines, 4);
overflow: hidden;
}
scale-see-more[data-expanded] .block-text__content {
-webkit-line-clamp: unset;
overflow: visible;
}
.block-text__toggle {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-size: 0.875em;
font-weight: 500;
margin-block-start: 0.5rem;
padding: 0.25rem 0;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.block-text__toggle:hover {
opacity: 0.7;
}
.block-ugc-gallery {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-ugc-gallery__grid {
display: grid;
grid-template-columns: repeat(var(--ugc-cols), 1fr);
gap: var(--ugc-gap);
}
@media (width >= 750px) {
.block-ugc-gallery__grid {
grid-template-columns: repeat(var(--ugc-cols-d), 1fr);
}
}
.block-ugc-item {
position: relative;
display: block;
width: 100%;
aspect-ratio: var(--ugc-aspect);
overflow: hidden;
border-radius: var(--ugc-radius);
border: none;
padding: 0;
background: rgba(var(--color-foreground), 0.04);
cursor: pointer;
color: inherit;
font-family: inherit;
text-align: start;
}
.block-ugc-item__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.block-ugc-item__placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.block-ugc-gallery--hover-zoom .block-ugc-item:hover .block-ugc-item__img {
transform: scale(1.06);
}
.block-ugc-item__play {
position: absolute;
inset: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #fff;
pointer-events: none;
transition: background 0.2s;
}
.block-ugc-item:hover .block-ugc-item__play {
background: rgba(0, 0, 0, 0.7);
}
.block-ugc-item__badge {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
display: flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
background: rgba(var(--color-background), 0.85);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
backdrop-filter: blur(4px);
}
.block-ugc-item__badge .icon { color: rgb(var(--color-stars)); }
.block-ugc-item__author {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
padding: var(--space-2) var(--space-3);
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
color: #fff;
font-size: 0.75rem;
font-weight: 500;
}
/* Lightbox */
.block-ugc-gallery__lightbox {
border: none;
border-radius: var(--radius-card);
padding: 0;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-modal);
max-width: min(960px, 92vw);
max-height: 85dvh;
overflow: hidden;
}
.block-ugc-gallery__lightbox::backdrop {
background: rgba(0, 0, 0, 0.7);
}
.block-ugc-gallery__lightbox[open] {
animation: ugc-in 0.25s ease;
}
@keyframes ugc-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.block-ugc-gallery__lightbox-inner {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
position: relative;
}
.block-ugc-gallery__lightbox-media {
flex: 0 0 60%;
background: rgba(var(--color-foreground), 0.03);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: pan-y;
}
.block-ugc-gallery__lightbox-media img,
.block-ugc-gallery__lightbox-media video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.block-ugc-gallery__lightbox-media iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
.block-ugc-gallery__lightbox-details {
flex: 1;
padding: var(--space-6);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Lightbox content elements (built by JS) */
.block-ugc-gallery__lightbox-stars {
display: flex;
gap: 2px;
color: rgb(var(--color-stars));
}
.block-ugc-gallery__lightbox-author {
font-weight: 600;
font-size: 1rem;
}
.block-ugc-gallery__lightbox-date {
font-size: 0.8125rem;
opacity: 0.6;
}
.block-ugc-gallery__lightbox-text {
font-size: 0.9375rem;
line-height: 1.6;
opacity: 0.85;
}
.block-ugc-gallery__lightbox-product {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-sm);
background: rgba(var(--color-foreground), 0.04);
text-decoration: none;
color: inherit;
margin-block-start: auto;
transition: background 0.2s;
}
.block-ugc-gallery__lightbox-product:hover {
background: rgba(var(--color-foreground), 0.08);
}
.block-ugc-gallery__lightbox-product-img {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.block-ugc-gallery__lightbox-product-title {
font-size: 0.875rem;
font-weight: 500;
}
.block-ugc-gallery__lightbox-product-price {
font-size: 0.8125rem;
opacity: 0.7;
}
/* Close */
.block-ugc-gallery__close {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(var(--color-background), 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
color: inherit;
z-index: 3;
backdrop-filter: blur(4px);
}
/* Navigation */
.block-ugc-gallery__lightbox-nav {
position: absolute;
inset-block-start: 50%;
inset-inline: var(--space-3);
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
}
.block-ugc-gallery__nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(var(--color-background), 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
color: inherit;
backdrop-filter: blur(4px);
transition: opacity 0.2s;
}
.block-ugc-gallery__nav-btn[disabled] {
opacity: 0.3;
cursor: default;
}
.block-ugc-gallery__nav-btn--prev .icon { transform: rotate(90deg); }
.block-ugc-gallery__nav-btn--next .icon { transform: rotate(-90deg); }
/* Mobile */
@media (width < 750px) {
.block-ugc-gallery__lightbox {
max-width: 100%;
max-height: 90dvh;
margin: 0;
inset: auto 0 0 0;
border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.block-ugc-gallery__lightbox-inner {
flex-direction: column;
}
.block-ugc-gallery__lightbox-media {
flex: none;
aspect-ratio: 1 / 1;
max-height: 50dvh;
}
.block-ugc-gallery__lightbox-details {
padding: var(--space-4);
}
.block-ugc-gallery__lightbox-nav {
inset-block-start: auto;
inset-block-end: var(--space-3);
transform: none;
}
.block-ugc-gallery__nav-btn {
width: 36px;
height: 36px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.block-ugc-gallery__lightbox[open] { animation: none; }
.block-ugc-item__img { transition: none; }
}
/* Design mode */
shopify-visual-preview-block-list .block-ugc-gallery[data-visual-preview-mode] {
max-width: 600px;
}
scale-deferred-media {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
display: block;
}
.block-video__wrapper {
position: relative;
overflow: hidden;
background: rgba(var(--color-foreground), 0.05);
}
.block-video__cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.block-video__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(var(--color-foreground), 0.05);
}
.block-video__placeholder-svg {
width: 100%;
height: 100%;
}
.block-video__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: white;
transition: transform 0.2s ease;
}
.block-video__play:hover {
transform: scale(1.1);
}
.block-video__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
scale-deferred-media[loaded] .block-video__cover,
scale-deferred-media[loaded] .block-video__play,
scale-deferred-media[data-autoplay] .block-video__play {
display: none;
}
scale-deferred-media[data-autoplay-blocked] .block-video__play {
display: flex;
z-index: var(--z-raised);
}
shopify-visual-preview-block-list .block-video[data-visual-preview-mode] {
max-width: 450px;
}
.block-wordmark {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
}
.block-wordmark__text {
display: block;
inline-size: 100%;
fill: rgb(var(--color-foreground));
font-family: var(--font-heading--family);
font-weight: var(--font-heading--weight);
opacity: var(--wordmark-opacity);
}
.back-to-top {
position: fixed;
z-index: var(--z-raised);
inset-block-end: var(--space-6);
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
border: 1px solid rgb(var(--color-border));
box-shadow: var(--shadow-card);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
transition:
opacity var(--duration-normal) var(--ease-out),
visibility var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
background-color var(--duration-fast) ease,
border-color var(--duration-fast) ease;
}
.back-to-top--bottom-right { inset-inline-end: var(--space-6); }
.back-to-top--bottom-left { inset-inline-start: var(--space-6); }
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top.is-hidden {
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
}
.back-to-top:hover {
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
border-color: rgb(var(--color-foreground));
}
.back-to-top:focus-visible {
outline: var(--focus-outline-width) solid rgb(var(--color-accent-1));
outline-offset: var(--focus-outline-offset);
}
.back-to-top__icon {
width: 20px;
height: 20px;
grid-area: 1 / 1;
}
/* Bold style */
.back-to-top--bold {
width: 52px;
height: 52px;
background: rgb(var(--color-foreground));
color: rgb(var(--color-background));
border-color: rgb(var(--color-foreground));
}
.back-to-top--bold:hover {
background: rgb(var(--color-accent-1));
border-color: rgb(var(--color-accent-1));
}
/* Progress ring style */
.back-to-top--progress {
width: 48px;
height: 48px;
border: none;
background: rgb(var(--color-background));
box-shadow: var(--shadow-popover);
}
.back-to-top__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.back-to-top__ring-bg {
fill: none;
stroke: rgba(var(--color-border), 0.3);
stroke-width: 2;
}
.back-to-top__ring-fill {
fill: none;
stroke: rgb(var(--color-accent-1));
stroke-width: 2;
stroke-dasharray: 100.53;
stroke-dashoffset: 100.53;
stroke-linecap: round;
/* Driven by the page scroll itself: the ring follows every frame, with no script. Without scroll timelines it stays empty. */
animation: back-to-top-ring linear both;
animation-timeline: scroll(root);
}
@keyframes back-to-top-ring {
to { stroke-dashoffset: 0; }
}
.back-to-top--progress:hover {
background: rgb(var(--color-background-secondary));
border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.back-to-top {
transition: none;
}
}
.button-states__idle,
.button-states__loading,
.button-states__added,
.button-states__refused {
--button-states-shift: 8px;
}
.button-states__idle,
.button-states__added > *,
.button-states__refused > * {
transition: opacity var(--duration-fast) ease, translate var(--duration-normal) var(--ease-spring);
}
.button-states__loading,
.button-states__added,
.button-states__refused {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.button-states__loading {
opacity: 0;
visibility: hidden;
translate: 0 var(--button-states-shift);
transition: opacity var(--duration-fast) ease, translate var(--duration-normal) var(--ease-spring), visibility 0s var(--duration-fast);
}
.button-states__added,
.button-states__refused {
z-index: 1;
border-radius: inherit;
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-fast) ease, visibility 0s var(--duration-normal);
}
.button-states__added {
background: rgb(var(--color-success));
color: rgb(var(--color-success-contrast));
}
.button-states__refused {
background: rgb(var(--color-error));
color: rgb(var(--color-error-contrast));
}
.button-states__added > *,
.button-states__refused > * {
translate: 0 var(--button-states-shift);
}
.button-states__check {
display: flex;
clip-path: inset(0 100% 0 0);
transition: clip-path var(--duration-normal) var(--ease-out) var(--duration-fast);
}
[data-state] > .button-states__idle {
opacity: 0;
translate: 0 calc(-1 * var(--button-states-shift));
}
[data-state="loading"] > .button-states__loading {
opacity: 1;
visibility: visible;
translate: none;
transition: opacity var(--duration-fast) ease, translate var(--duration-normal) var(--ease-spring), visibility 0s;
}
[data-state="added"] > .button-states__added,
[data-state="refused"] > .button-states__refused {
opacity: 1;
visibility: visible;
transition: opacity var(--duration-fast) ease, visibility 0s;
}
[data-state="added"] > .button-states__added > *,
[data-state="refused"] > .button-states__refused > * {
translate: none;
}
[data-state="added"] .button-states__check {
clip-path: inset(0);
}
@media (prefers-reduced-motion: reduce) {
.button-states__idle,
.button-states__loading,
.button-states__added,
.button-states__refused {
--button-states-shift: 0px;
}
.button-states__check {
clip-path: none;
}
}
scale-cart-item {
display: block;
}
.cart-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-3);
padding-block: var(--space-3);
border-block-end: 1px solid rgba(var(--color-border), 0.1);
}
.cart-item:last-child {
border-block-end: none;
}
.cart-item--leaving {
overflow: clip;
}
.cart-item--unavailable {
opacity: 0.6;
}
.cart-item__media {
flex-shrink: 0;
}
.cart-item__image {
width: var(--cart-item-image-size, 80px);
height: var(--cart-item-image-size, 80px);
object-fit: cover;
border-radius: var(--radius-card);
}
.cart-item__image-link {
display: block;
line-height: 0;
}
.cart-item__details {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cart-item__title {
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cart-item__title:hover {
text-decoration: underline;
}
.cart-item__variant,
.cart-item__selling-plan {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
margin: 0;
}
.cart-item__properties {
list-style: none;
padding: 0;
margin: var(--space-1) 0 0;
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
}
.cart-item__discounts {
list-style: none;
padding: 0;
margin: var(--space-1) 0 0;
}
.cart-item__discount {
display: flex;
align-items: center;
gap: var(--space-1);
inline-size: fit-content;
padding-inline: var(--space-1);
margin-inline-start: calc(-1 * var(--space-1));
border-radius: var(--radius-xs);
font-size: 0.75rem;
color: rgb(var(--color-accent-2));
}
.cart-item__price {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-block-start: var(--space-1);
font-size: 0.875rem;
font-weight: 500;
}
/* The price before savings opens beside the price and is struck through once there; it folds away with them. */
.cart-item__price-original {
display: inline-grid;
grid-template-columns: 0fr;
margin-inline-end: calc(-1 * var(--space-2));
opacity: 0;
color: rgb(var(--color-foreground-secondary));
text-decoration: none;
font-weight: 400;
font-size: 0.75rem;
transition: grid-template-columns var(--duration-slow) var(--ease-out), margin-inline-end var(--duration-slow) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}
.cart-item__price-original.is-open {
grid-template-columns: 1fr;
margin-inline-end: 0;
opacity: 1;
}
.cart-item__price-original > span {
position: relative;
min-inline-size: 0;
overflow: clip;
}
.cart-item__price-original > span::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 55%;
block-size: 1px;
background: currentColor;
scale: 0 1;
transform-origin: calc(50% - 50% * var(--direction-sign)) 50%;
transition: scale var(--duration-normal) var(--ease-out) var(--duration-normal);
}
.cart-item__price-original.is-open > span::after {
scale: 1 1;
}
.cart-item__price-final {
transition: color var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}
.cart-item__price-final--sale {
color: rgb(var(--color-accent-2));
}
.cart-item__limit {
margin: var(--space-1) 0 0;
font-size: 0.75rem;
color: rgb(var(--color-error));
}
@media (prefers-reduced-motion: reduce) {
.cart-item__price-original {
transition: opacity var(--duration-normal) var(--ease-out);
}
.cart-item__price-original > span::after {
transition: none;
}
}
.cart-item__unit-price {
font-size: 0.6875rem;
color: rgb(var(--color-foreground-secondary));
font-weight: 400;
}
.cart-item__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
}
.cart-item__quantity {
display: flex;
align-items: center;
border: 1px solid rgba(var(--color-border), 0.2);
border-radius: var(--radius-input);
}
.cart-item__qty-btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-1) var(--space-2);
min-width: var(--minimum-touch-target);
min-height: 36px;
}
.cart-item__qty-btn:hover {
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.cart-item__qty-input {
width: 2.5rem;
text-align: center;
border: none;
background: transparent;
color: inherit;
font-size: 0.875rem;
font-weight: 500;
-moz-appearance: textfield;
padding: 0;
}
.cart-item__qty-input::-webkit-inner-spin-button,
.cart-item__qty-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cart-item__remove {
display: flex;
align-items: center;
background: none;
border: none;
color: rgb(var(--color-foreground-secondary));
cursor: pointer;
padding: var(--space-1);
font-size: 0.75rem;
opacity: 0.7;
transition: opacity var(--duration-fast) ease;
}
.cart-item__remove:hover {
opacity: 1;
color: rgb(var(--color-foreground));
}
.cart-upsell {
padding-block: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.3);
}
scale-cart-upsell[hidden] {
display: none;
}
.cart-upsell__title {
font-size: 0.875rem;
font-weight: 600;
margin-block-end: var(--space-3);
}
.cart-upsell__products {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
scale-cart-upsell:not([loading]) .cart-upsell__loading {
display: none;
}
scale-cart-upsell[loading] .cart-upsell__products {
display: none;
}
.cart-upsell__loading {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.cart-upsell-item--placeholder {
display: flex;
align-items: center;
gap: var(--space-3);
}
.cart-upsell-item__media--placeholder {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: var(--radius-sm);
background: rgba(var(--color-foreground), 0.04);
animation: cart-upsell-pulse 1.5s ease-in-out infinite;
}
.cart-upsell-item__title--placeholder {
height: 0.8125rem;
width: 70%;
background: rgba(var(--color-foreground), 0.06);
border-radius: 4px;
margin-block-end: var(--space-2);
animation: cart-upsell-pulse 1.5s ease-in-out infinite;
}
.cart-upsell-item__price--placeholder {
height: 0.75rem;
width: 35%;
background: rgba(var(--color-foreground), 0.04);
border-radius: 4px;
animation: cart-upsell-pulse 1.5s ease-in-out infinite;
}
@keyframes cart-upsell-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.cart-upsell-item__media--placeholder,
.cart-upsell-item__title--placeholder,
.cart-upsell-item__price--placeholder {
animation: none;
}
}
.cart-upsell-item {
display: flex;
align-items: center;
gap: var(--space-3);
}
.cart-upsell-item__media {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.cart-upsell-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-upsell-item__info {
flex: 1;
min-width: 0;
}
.cart-upsell-item__title {
display: block;
font-size: 0.8125rem;
text-decoration: none;
color: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-upsell-item__price {
font-size: 0.75rem;
color: rgb(var(--color-foreground-secondary));
}
.cart-upsell-item__add {
flex-shrink: 0;
}
.collection-card {
margin-block-start: var(--margin-top);
margin-block-end: var(--margin-bottom);
position: relative;
overflow: hidden;
align-self: start;
border-radius: var(--cc-radius, var(--radius-media));
}
@media (width >= 750px) {
.collection-card--sticky-desktop {
position: sticky;
top: var(--space-8);
z-index: 1;
}
}
.collection-card__link {
position: absolute;
inset: 0;
z-index: 3;
}
/* Below: stacked layout */
.collection-card--below .collection-card__media {
aspect-ratio: var(--cc-aspect-m);
overflow: hidden;
}
.collection-card--below .collection-card__content {
padding-block-start: var(--space-4);
}
/* Overlay: content over image */
.collection-card--overlay_bottom,
.collection-card--overlay_center {
display: flex;
aspect-ratio: var(--cc-aspect-m);
}
.collection-card--overlay_bottom .collection-card__media,
.collection-card--overlay_center .collection-card__media {
position: absolute;
inset: 0;
}
.collection-card--overlay_bottom .collection-card__content,
.collection-card--overlay_center .collection-card__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
padding: var(--space-6);
color: rgb(255 255 255);
}
.collection-card--overlay_bottom .collection-card__title,
.collection-card--overlay_center .collection-card__title {
color: inherit;
}
.collection-card--overlay_bottom .collection-card__content {
justify-content: flex-end;
}
.collection-card--overlay_center .collection-card__content {
justify-content: center;
align-items: center;
text-align: center;
}
.collection-card__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
z-index: 1;
}
.collection-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.collection-card--zoom:hover .collection-card__img {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.collection-card__img {
transition: none;
}
}
.collection-card__placeholder-img {
width: 100%;
height: 100%;
background: rgba(var(--color-foreground), 0.04);
display: flex;
align-items: center;
justify-content: center;
}
.collection-card__placeholder-svg {
width: 100%;
height: 100%;
}
.collection-card__title {
margin: 0;
}
.collection-card__description {
max-width: 38ch;
margin: var(--space-2) 0 0;
line-height: var(--line-height--body);
opacity: 0.86;
}
.collection-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-start: var(--space-4);
}
.collection-card__count {
margin: 0;
font-size: var(--font-body--size-small);
opacity: 0.7;
}
.collection-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 32px;
padding-inline: var(--space-3);
border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
border-radius: var(--radius-pill);
background: color-mix(in srgb, currentColor 12%, transparent);
font-size: var(--font-body--size-small);
font-weight: 600;
line-height: 1;
}
.collection-card__cta-arrow {
transition: transform var(--duration-fast) var(--ease-out);
}
.collection-card:hover .collection-card__cta-arrow,
.collection-card:focus-within .collection-card__cta-arrow {
transform: translateX(0.2em);
}
.collection-card:focus-within {
outline: var(--focus-outline-width) solid rgb(var(--color-accent-1));
outline-offset: var(--focus-outline-offset);
}
@media (width >= 750px) {
.collection-card--below .collection-card__media,
.collection-card--overlay_bottom,
.collection-card--overlay_center {
aspect-ratio: var(--cc-aspect);
}
}
.collection-card__content :is(a, button, input, textarea, select) {
position: relative;
z-index: 4;
}
shopify-visual-preview-block-list .collection-card[data-visual-preview-mode] {
max-width: 350px;
}
/* The results the predictive-search section renders: a script inserts them here and drops that section's stylesheet. */
.predictive-search__wrapper {
padding: var(--space-4);
}
.predictive-search__group + .predictive-search__group {
margin-block-start: var(--space-4);
padding-block-start: var(--space-4);
border-block-start: 1px solid rgba(var(--color-border), 0.1);
}
.predictive-search__heading {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-2);
}
.predictive-search__list {
list-style: none;
padding: 0;
margin: 0;
}
.predictive-search__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2);
text-decoration: none;
color: inherit;
border-radius: var(--radius-card);
transition: background 0.15s ease;
}
.predictive-search__link:hover {
background: rgba(var(--color-foreground), var(--opacity-subtle));
}
.predictive-search__image {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: var(--radius-card);
flex-shrink: 0;
}
.predictive-search__product-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.predictive-search__product-title {
font-size: 0.875rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.predictive-search__product-price {
font-size: 0.8125rem;
color: rgb(var(--color-foreground-secondary));
}
.predictive-search__view-all {
display: block;
text-align: center;
padding: var(--space-3);
margin-block-start: var(--space-3);
font-size: 0.875rem;
font-weight: 500;
color: rgb(var(--color-accent-1));
text-decoration: none;
border-block-start: 1px solid rgba(var(--color-border), 0.1);
}
.predictive-search__no-results {
display: grid;
justify-items: start;
gap: var(--space-2);
padding: var(--space-2);
font-size: 0.875rem;
}
.predictive-search__no-results-title {
font-weight: 600;
}
.predictive-search__no-results-tip {
color: rgb(var(--color-foreground-secondary));
margin-block-end: var(--space-2);
}
.predictive-search__no-results .predictive-search__heading {
margin-block: var(--space-2) 0;
}
.predictive-search__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.predictive-search__chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--minimum-touch-target);
padding-inline: var(--space-4);
border: 1px solid rgba(var(--color-foreground), 0.2);
border-radius: var(--radius-pill);
background: none;
color: inherit;
font: inherit;
text-decoration: none;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.predictive-search__chip:hover {
background: rgba(var(--color-foreground), var(--opacity-subtle));
border-color: rgb(var(--color-foreground));
}
.predictive-search__chip--retry {
font-weight: 500;
}
/* Nothing to suggest yet: no empty padded band under the field. */
.search-overlay__start:not(:has(> .predictive-search__group:not([hidden]))) {
display: none;
}
.hotspot-image {
width: 100%;
}
.hotspot-image__media {
position: relative;
overflow: clip;
border-radius: var(--hotspot-radius, var(--radius-card));
aspect-ratio: var(--hotspot-aspect, auto);
min-height: var(--hotspot-min-h, auto);
}
@media (width >= 750px) {
.hotspot-image__media {
min-height: var(--hotspot-min-h-d, auto);
}
}
.hotspot-image__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hotspot-image__placeholder {
display: block;
width: 100%;
height: 100%;
min-height: 300px;
object-fit: cover;
}
.hotspot-image__overlay {
position: absolute;
inset: 0;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
pointer-events: none;
}
.hotspot-image__pins {
position: absolute;
inset: 0;
z-index: 1;
}
.image-wrapper {
position: relative;
overflow: hidden;
width: 100%;
}
.image-wrapper__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focal-point, center);
}
.image-wrapper--adapt .image-wrapper__img {
height: auto;
}
.image-wrapper--adapt-auto .image-wrapper__img {
object-fit: initial;
}
.image-wrapper--placeholder {
background: rgba(var(--color-foreground), 0.03);
display: flex;
align-items: center;
justify-content: center;
}
.image-wrapper__placeholder {
width: 50%;
max-width: 150px;
opacity: 0.3;
}
.megamenu-auto {
display: grid;
grid-template-columns: repeat(var(--megamenu-auto-cols, 4), 1fr);
gap: var(--megamenu-gap, var(--space-6));
}
.megamenu-auto__column {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.megamenu-auto__heading {
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
color: inherit;
padding-block-end: var(--space-2);
border-block-end: 1px solid rgba(var(--color-border), 0.15);
margin-block-end: var(--space-1);
}
.megamenu-auto__heading:hover {
color: rgb(var(--color-accent-1));
}
.megamenu-auto__link {
font-size: 0.8125rem;
text-decoration: none;
color: rgb(var(--color-foreground-secondary));
padding-block: 2px;
transition: color var(--duration-fast) ease;
}
.megamenu-auto__link:hover {
color: rgb(var(--color-foreground));
}
.megamenu-auto__link--view-all {
font-weight: 500;
color: rgb(var(--color-accent-1));
margin-block-start: var(--space-1);
}
.megamenu-auto__image-link {
display: block;
margin-block-end: var(--space-2);
border-radius: var(--radius-card);
overflow: hidden;
}
.megamenu-auto__image {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.product-card-badges {
position: absolute;
inset-block-start: var(--space-3);
inset-inline: var(--space-3);
z-index: var(--z-raised);
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.product-card-badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.2;
border-radius: var(--radius-badge);
}
.product-card-badge--sold-out {
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: inset 0 0 0 1px rgb(var(--color-foreground));
}
.product-card-badge--sale {
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
}
/* The sale leads; a merchant badge accompanies it in outline. */
.product-card-badge--custom {
background: rgba(var(--color-background), 0.88);
color: rgb(var(--color-foreground));
box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.15);
}
.product-card-placeholder {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.product-card-placeholder__image {
aspect-ratio: 3 / 4;
background: rgba(var(--color-foreground), 0.04);
border-radius: var(--radius-card);
overflow: hidden;
}
.product-card-placeholder__svg {
width: 100%;
height: 100%;
fill: rgba(var(--color-foreground), 0.1);
}
.product-card-placeholder__title {
font-size: 0.875rem;
margin: 0;
color: rgba(var(--color-foreground), 0.3);
}
.product-card-placeholder__price {
font-size: 0.875rem;
margin: 0;
color: rgba(var(--color-foreground), 0.2);
}
scale-product-card {
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
height: 100%;
}
/* Inside a group the card sits under other blocks: size to content instead
of the parent's height, which would push the last block out of view. */
.block-group__inner > scale-product-card {
height: auto;
}
.product-card {
display: flex;
flex-direction: column;
gap: var(--pc-gap);
width: 100%;
height: 100%;
overflow: hidden;
text-decoration: none;
}
.product-card--card {
background: var(--gradient-background);
color: rgb(var(--color-foreground));
border-radius: var(--radius-card);
padding: var(--space-4);
overflow: hidden;
}
scale-product-card[data-visual-preview-mode] {
max-width: 280px;
}
/* Sold out: the card steps back so available products lead the grid. */
.product-card--sold-out .product-card-gallery__img { filter: grayscale(1) opacity(0.55); }
.product-card--sold-out .product-price__current,
.product-card--sold-out .product-price__compare { color: rgba(var(--color-foreground), 0.6); }
.product-card--hover-lift,
.product-card--hover-glow,
.product-card--hover-tilt {
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
@media (width >= 750px) {
.product-card--hover-lift:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-popover);
}
.product-card--hover-glow:hover {
box-shadow: 0 0 24px rgba(var(--color-accent-1), 0.25);
}
.product-card--hover-tilt:hover {
transform: perspective(600px) rotateX(2deg) rotateY(-2deg);
}
}
@media (prefers-reduced-motion: reduce) {
.product-card--hover-lift,
.product-card--hover-glow,
.product-card--hover-tilt {
transition: none;
}
.product-card--hover-lift:hover,
.product-card--hover-tilt:hover {
transform: none;
}
}
product-lightbox { display: contents; }
/* The page stays put behind the viewer; a page that shows a scrollbar keeps its room (DialogBase measures it). */
:root:has(.product-lightbox__dialog:modal) { overflow: hidden; }
:root[data-scrollbar]:has(.product-lightbox__dialog:modal) { scrollbar-gutter: stable; }
.product-lightbox__dialog {
position: fixed;
inset: 0;
inline-size: 100%;
block-size: 100%;
max-inline-size: none;
max-block-size: none;
margin: 0;
padding: 0;
border: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
background: none;
color: rgb(var(--color-background));
overflow: hidden;
overscroll-behavior: contain;
}
.product-lightbox__dialog:not([open]) { display: none; }
/* Pulled down, the shade and the controls fade with the distance (--pull, 0 to 0.8). */
.product-lightbox__dialog::backdrop {
background: rgb(var(--color-foreground));
opacity: calc(1 - var(--pull, 0));
transition: opacity var(--duration-normal) var(--ease-out);
}
.product-lightbox__bar,
.product-lightbox__arrow,
.product-lightbox__strip {
opacity: calc(1 - var(--pull, 0));
transition: opacity var(--duration-normal) var(--ease-out);
}
@starting-style {
.product-lightbox__dialog[open]::backdrop,
.product-lightbox__dialog[open] .product-lightbox__bar,
.product-lightbox__dialog[open] .product-lightbox__arrow,
.product-lightbox__dialog[open] .product-lightbox__strip { opacity: 0; }
}
.product-lightbox__dialog.is-closing::backdrop,
.product-lightbox__dialog.is-closing .product-lightbox__bar,
.product-lightbox__dialog.is-closing .product-lightbox__arrow,
.product-lightbox__dialog.is-closing .product-lightbox__strip { opacity: 0; }
.product-lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
font-variant-numeric: tabular-nums;
}
.product-lightbox__button {
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: rgba(var(--color-background), 0.12);
color: inherit;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out);
}
.product-lightbox__button:hover { background: rgba(var(--color-background), 0.22); }
.product-lightbox__button:focus-visible,
.product-lightbox__thumb:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* The photo follows a finger or the mouse: the view takes every gesture. */
.product-lightbox__view {
position: relative;
overflow: hidden;
touch-action: none;
translate: 0 var(--pull-y, 0px);
scale: calc(1 - var(--pull, 0) / 8);
transform-origin: 50% 100%;
transition: translate var(--duration-normal) var(--ease-out), scale var(--duration-normal) var(--ease-out);
}
/* --index counts the photos shown; --drag is how far a swipe has pulled the reel. */
.product-lightbox__reel {
display: flex;
block-size: 100%;
translate: calc(var(--index, 0) * -100% * var(--direction-sign) + var(--drag, 0px)) 0;
transition: translate var(--duration-normal) var(--ease-out);
}
.product-lightbox__dialog.is-dragging :is(.product-lightbox__view, .product-lightbox__reel),
.product-lightbox__dialog.is-dragging::backdrop,
.product-lightbox__dialog.is-dragging :is(.product-lightbox__bar, .product-lightbox__arrow, .product-lightbox__strip) { transition: none; }
.product-lightbox__photo {
flex: 0 0 100%;
display: grid;
place-items: center;
margin: 0;
padding-inline: clamp(var(--space-2), 6vw, var(--space-20));
overflow: hidden;
container-type: size;
}
.product-lightbox__photo[hidden] { display: none; }
/* Sized from the photo's ratio, so its box is right before it loads; until then it
shows the gallery's copy (--placeholder). Zoomed, it doubles around the aimed spot. */
.product-lightbox__image {
display: block;
inline-size: min(100cqi, 100cqb * var(--ratio));
block-size: auto;
aspect-ratio: var(--ratio);
background: var(--placeholder, none) center / 100% 100% no-repeat;
user-select: none;
-webkit-user-drag: none;
cursor: zoom-in;
transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
transition: scale var(--duration-normal) var(--ease-out);
}
.product-lightbox__photo.is-zoomed .product-lightbox__image {
scale: 2;
cursor: zoom-out;
}
.product-lightbox__arrow {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
display: none;
}
.product-lightbox__arrow--previous { inset-inline-start: var(--space-4); }
.product-lightbox__arrow--next { inset-inline-end: var(--space-4); }
.product-lightbox__arrow .icon { scale: var(--direction-sign) 1; }
.product-lightbox__arrow:disabled { visibility: hidden; }
@media (width >= 750px) {
.product-lightbox__arrow { display: grid; }
}
.product-lightbox__strip {
display: flex;
justify-content: safe center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4) var(--space-5);
overflow-x: auto;
scrollbar-width: none;
}
.product-lightbox__thumb {
flex: none;
block-size: 3.5rem;
aspect-ratio: var(--ratio);
padding: 0;
border: 0;
border-radius: var(--radius-xs);
overflow: hidden;
background: none;
cursor: pointer;
opacity: 0.45;
transition: opacity var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.product-lightbox__thumb[hidden] { display: none; }
.product-lightbox__thumb:hover { opacity: 0.8; }
.product-lightbox__thumb[aria-current="true"] {
opacity: 1;
box-shadow: 0 0 0 2px currentColor;
}
.product-lightbox__thumb-image {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.product-lightbox__dialog[data-single] :is(.product-lightbox__arrow, .product-lightbox__strip) { display: none; }
@media (prefers-reduced-motion: no-preference) {
.product-lightbox__strip { scroll-behavior: smooth; }
}
/* Reduced motion: the viewer only fades. */
@media (prefers-reduced-motion: reduce) {
.product-lightbox__view,
.product-lightbox__reel,
.product-lightbox__image { transition: none; }
}
.product-media { position: relative; overflow: hidden; border-radius: var(--radius-media); }
.product-media__image { display: block; width: 100%; height: auto; object-fit: cover; }
.product-media__poster { display: block; width: 100%; height: auto; object-fit: cover; }
.product-media__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-media__model { display: block; width: 100%; height: 100%; }
/* Aspect ratios */
.product-media--square { aspect-ratio: 1; }
.product-media--portrait { aspect-ratio: 4 / 5; }
.product-media--portrait_tall { aspect-ratio: 3 / 4; }
.product-media--landscape { aspect-ratio: 4 / 3; }
.product-media--square .product-media__image,
.product-media--portrait .product-media__image,
.product-media--portrait_tall .product-media__image,
.product-media--landscape .product-media__image,
.product-media--square .product-media__poster,
.product-media--portrait .product-media__poster,
.product-media--portrait_tall .product-media__poster,
.product-media--landscape .product-media__poster { height: 100%; }
/* The whole photo opens the full-screen viewer. */
.product-media__open {
position: absolute;
inset: 0;
padding: 0;
border: 0;
border-radius: inherit;
background: none;
cursor: zoom-in;
}
.product-media__open:focus-visible {
outline: 2px solid rgb(var(--color-foreground));
outline-offset: -2px;
}
/* While the viewer carries this photo, it is not left behind in the gallery too. */
.product-media:has(> .product-media__open[data-lifted]) > .product-media__image { visibility: hidden; }
/* Play button */
.product-media__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
color: #fff;
border: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.product-media__play:hover { background: rgba(0, 0, 0, 0.35); }
/* Hide poster + play when video is loaded */
scale-deferred-media[loaded] .product-media__poster,
scale-deferred-media[loaded] .product-media__play { display: none; }
scale-quick-view {
display: contents;
}
.quick-view__dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(960px, 92vw);
max-height: 85dvh;
border: none;
border-radius: var(--radius-card);
padding: 0;
background: rgb(var(--color-background));
color: rgb(var(--color-foreground));
box-shadow: var(--shadow-modal);
overflow: hidden;
}
.quick-view__dialog[open] {
display: flex;
flex-direction: column;
}
.quick-view__dialog::backdrop {
background: rgba(0, 0, 0, var(--backdrop-opacity));
}
.quick-view__header {
display: flex;
justify-content: flex-end;
padding: var(--space-3) var(--space-4);
flex-shrink: 0;
}
.quick-view__close {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-2);
border-radius: 50%;
transition: background var(--duration-fast);
}
.quick-view__close:hover {
background: rgba(var(--color-foreground), 0.05);
}
.quick-view__body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 var(--space-4);
}
.quick-view__loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
color: rgb(var(--color-foreground-secondary));
}
.quick-view__loading[hidden] {
display: none;
}
.quick-view__error {
min-height: 300px;
display: grid;
place-items: center;
margin: 0;
padding: var(--space-8);
text-align: center;
color: rgb(var(--color-foreground-secondary));
}
.quick-view__footer {
display: flex;
justify-content: center;
padding: var(--space-3) var(--space-4) var(--space-4);
flex-shrink: 0;
}
/* Override injected section styles */
.quick-view__content .product-page {
padding: 0;
}
.quick-view__content .product-page--media-sticky > .product-media-zone,
.quick-view__content .product-page--info-sticky > .product-info-zone {
position: static;
}
.quick-view__content .product-atc-sticky {
display: none;
}
/* Mobile: bottom sheet */
@media (width < 750px) {
.quick-view__dialog {
width: 100%;
max-height: 90dvh;
margin: 0;
inset: auto 0 0 0;
border-radius: var(--radius-card) var(--radius-card) 0 0;
padding-block-end: env(safe-area-inset-bottom);
}
}
@media (prefers-reduced-motion: reduce) {
.quick-view__dialog {
animation: none;
}
}
/* ========== Base ========== */
.shape {
position: relative;
background: var(--shape-target, transparent);
pointer-events: none;
z-index: 2;
--shape-h: 60px;
--shape-h-md: 80px;
--shape-h-lg: 100px;
--shape-h-xl: calc(2vw + 100px);
--shape-overlap: 0;
--_h: var(--shape-h);
height: var(--_h);
}
.shape::before {
content: '';
position: absolute;
inset: -1px -0.1vw;
z-index: 3;
pointer-events: none;
background: rgb(var(--color-background));
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center bottom;
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center bottom;
}
@media (width >= 750px) {
.shape { --_h: var(--shape-h-md); }
}
@media (min-width: 1000px) {
.shape { --_h: var(--shape-h-lg); }
}
@media (min-width: 2000px) {
.shape { --_h: var(--shape-h-xl); }
}
/* ========== Sizes ========== */
.shape--small {
--shape-h: 35px;
--shape-h-md: 45px;
--shape-h-lg: 55px;
--shape-h-xl: calc(1vw + 55px);
}
.shape--large {
--shape-h: 80px;
--shape-h-md: 100px;
--shape-h-lg: 130px;
--shape-h-xl: calc(2vw + 130px);
}
.shape--extra_large {
--shape-h: 100px;
--shape-h-md: 130px;
--shape-h-lg: 170px;
--shape-h-xl: calc(3vw + 170px);
}
/* ========== Position & Flip ========== */
.shape.bottom { transform: scaleY(-1); }
.shape.bottom.shape--flip { transform: scale(-1, -1); }
.shape.top.shape--flip { transform: scaleX(-1); }
/* ========== Overlap ========== */
.shape { margin-block-start: -1px; margin-block-end: calc((var(--_h) * var(--shape-overlap) / 100 * -1) - 1px); }
.shape.top + * { margin-block-start: -1px; }
/* ========== Organic Shapes ========== */
.shape-wave::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-curve::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-blob::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-scallop::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
/* ========== Geometric Shapes ========== */
.shape-arrow::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-tilt::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-slant::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-zigzag::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
/* ========== Creative Shapes ========== */
.shape-brush::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-torn::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
.shape-drip::before {
-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ');
mask-image: url('data:image/svg+xml;charset=utf8, ');
}
/* ========== Special Shapes ========== */
.shape-fade {
--shape-h: 50px;
--shape-h-md: 60px;
--shape-h-lg: 80px;
--shape-h-xl: calc(1vw + 80px);
}
.shape-fade::before {
-webkit-mask-image: none;
mask-image: none;
background: linear-gradient(to top, rgb(var(--color-background)), var(--shape-target, transparent));
}
.shape-line {
--shape-h: auto;
--shape-h-md: auto;
--shape-h-lg: auto;
--shape-h-xl: auto;
height: auto;
background: transparent;
}
.shape-line::before {
position: relative;
display: block;
height: 1px;
inset: auto;
-webkit-mask-image: none;
mask-image: none;
background: var(--shape-target, rgba(var(--color-foreground), 0.15));
}
@media (width >= 750px) {
.shape-line::before { height: 2px; }
}
scale-slider {
display: block;
position: relative;
min-width: 0;
max-width: 100%;
}
.scale-slider__track {
display: flex;
gap: var(--slider-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.scale-slider__track::-webkit-scrollbar {
display: none;
}
/* With a mouse the row is grabbed and pulled, then let go on the nearest card.
A finger keeps the scrolling the browser already gives it. */
@media (hover: hover) and (pointer: fine) {
.scale-slider__track { cursor: grab; }
.scale-slider__track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
user-select: none;
}
}
.scale-slider__track > * {
flex: 0 0 calc((100% - var(--slider-gap) * (var(--slider-per-page) - 1)) / var(--slider-per-page));
scroll-snap-align: start;
}
@media (width >= 750px) {
.scale-slider__track > * {
flex: 0 0 calc((100% - var(--slider-gap) * (var(--slider-per-page-d) - 1)) / var(--slider-per-page-d));
}
}
.scale-slider__nav {
position: absolute;
inset-block-start: 50%;
inset-inline: 8px;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
}
.scale-slider__nav[hidden],
.scale-slider__pagination[hidden] {
display: none;
}
.scale-slider__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgb(var(--color-background));
border: 1px solid rgb(var(--color-border));
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: var(--shadow-card);
}
.scale-slider__arrow:hover {
transform: scale(1.05);
}
.scale-slider__arrow[disabled] {
opacity: 0.3;
cursor: default;
transform: none;
}
.scale-slider__arrow--prev .icon {
transform: rotate(90deg);
}
.scale-slider__arrow--next .icon {
transform: rotate(-90deg);
}
.scale-slider__pagination {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-block-start: var(--space-4);
}
.scale-slider__pagination--dots .scale-slider__dot {
position: relative;
display: grid;
place-items: center;
width: 24px;
height: 24px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.scale-slider__pagination--dots .scale-slider__dot::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(var(--color-foreground), 0.2);
transition: background 0.2s ease;
}
.scale-slider__pagination--dots .scale-slider__dot.active::before {
background: rgb(var(--color-foreground));
}
.scale-slider__pagination--progress {
height: 3px;
background: rgba(var(--color-foreground), 0.1);
border-radius: 2px;
overflow: hidden;
max-width: 200px;
width: 100%;
}
.scale-slider__progress-fill {
height: 100%;
background: rgb(var(--color-foreground));
border-radius: 2px;
transition: width 0.3s ease;
}
.stars {
display: flex;
gap: 2px;
align-items: center;
}
.stars--default {
position: relative;
color: rgb(var(--color-stars));
}
.stars__row {
display: flex;
gap: 2px;
}
.stars__fill {
position: absolute;
inset: 0;
/* Whole stars with the gap after each, then the share of the next one: its points run
from 2 to 22 of the 24-unit box, so 0.8 reaches 80% of the star, not of its box. */
--stars-edge: calc(var(--stars-full) * (var(--stars-size) + 2px) + var(--stars-size) * (1 + 10 * var(--stars-part)) / 12);
clip-path: inset(0 calc(100% - var(--stars-edge)) 0 0);
}
.stars__fill:dir(rtl) {
clip-path: inset(0 0 0 calc(100% - var(--stars-edge)));
}
.stars__tp {
display: inline-flex;
line-height: 0;
}
.stars__tp--full { color: #00B67A; }
.stars__tp--half { color: #73CF11; }
.stars__tp--empty { color: #DCDCE6; }
.stars__google {
display: block;
}
/* A popover: in front of an open drawer, not under its backdrop. */
.toast {
position: fixed;
inset: auto 0 var(--space-4);
margin: 0 auto;
border: 0;
inline-size: fit-content;
display: flex;
align-items: center;
gap: var(--space-2);
max-width: var(--toast-width);
padding: var(--space-3) var(--space-4);
background: var(--toast-bg);
color: var(--toast-text);
border-radius: var(--radius-popover);
font-size: 0.875rem;
font-weight: 500;
box-shadow: var(--shadow-popover);
pointer-events: none;
opacity: 0;
transition:
translate var(--duration-toast) var(--ease-out),
opacity var(--duration-toast) var(--ease-out);
}
.toast:not(:popover-open) {
display: none;
}
.toast.is-visible {
opacity: 1;
pointer-events: auto;
}
@starting-style {
.toast.is-visible {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
.toast {
translate: 0 calc(100% + var(--space-4));
}
.toast.is-visible {
translate: none;
}
@starting-style {
.toast.is-visible {
translate: 0 calc(100% + var(--space-4));
}
}
}
.toast[data-type="success"] {
background: rgb(var(--color-accent-1));
color: rgb(var(--color-background));
}
.toast[data-type="error"] {
background: rgb(var(--color-error));
color: rgb(var(--color-background));
}