/** Shopify CDN: Minification failed

Line 4670:2 Unexpected "{"
Line 4670:3 Expected identifier but found "%"
Line 4671:10 Unexpected "-"
Line 4675:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:ax-article-banner (INDEX:1) */
.ax-article-banner__header {
    max-width: var(--page-content-width, 80rem);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    text-align: center;
  }

  .ax-article-banner__date {
    display: block;
    font-size: var(--font-size--subheading); /* 10px mobile / 12px desktop */
    opacity: var(--opacity-60);
  }

  .ax-article-banner__title {
    margin: var(--gap-lg) auto 0;
    max-width: 20ch;
    font-size: var(--font-size--h1);
    line-height: 1.05;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .ax-article-banner__excerpt {
    max-width: var(--normal-content-width);
    margin: var(--gap-xl) auto 0;
    font-size: var(--font-size--md); /* 16px mobile */
    text-wrap: pretty;
  }

  @media screen and (min-width: 750px) {
    .ax-article-banner__excerpt {
      font-size: var(--font-size--xl); /* 20px desktop */
    }
  }

  /* Featured image goes full-bleed (edge to edge), no rounding. */
  .ax-article-banner__media {
    margin-block-start: var(--gap-3xl);
  }

  .ax-article-banner__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
  }
/* END_SECTION:ax-article-banner */

/* START_SECTION:ax-article-content (INDEX:2) */
.ax-article-content {
    /* header.js keeps --header-height live; mirror the JS scroll offset (header + ~1rem). */
    --sticky-header-offset: calc(var(--header-height, 0px) + var(--gap-lg));
    /* Axome - rail spacings from the design spec (no exact token equivalents). */
    --ax-rail-gap: 0.75rem; /* 12px between rail items */
    --ax-rail-title-pad: 0.75rem; /* 12px from title text down to its underline */
    --ax-rail-title-gap: var(--padding-2xl); /* 24px from underline down to content */
    --ax-cols-gap: 2.5rem; /* 40px between body and side rails (desktop) */
    --ax-side-margin: var(--padding-xl); /* 20px left/right page inset (mobile) */
    /* Article body (RTE) vertical rhythm. */
    --ax-rte-gap: var(--padding-2xl); /* 24px: text->text/title, h3->text */
    --ax-rte-gap-tight: var(--gap-xs); /* 8px: h4->text */
    --ax-rte-image-gap: var(--padding-5xl); /* 48px around images */
  }

  /* The .section element owns the page-margin grid; this inner wrapper is the
     actual content layout placed in the section's central column. */
  .ax-article-content__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-3xl);
    padding-inline: var(--ax-side-margin);
  }

  /* Source order is DETAILS -> CONTENT -> ASIDE, so mobile reads details, then
     body, then (TOC hidden) share — no reordering needed. */
  .ax-article-content__toc {
    display: none;
  }

  .ax-article-content__main {
    min-width: 0;
  }

  .ax-article-content__main :is(img, video) {
    border-radius: var(--style-border-radius-md);
    width: auto;
    display: inline-block;
  }

  /* Editorial video embeds arrive as Cloudinary <iframe>s with a hardcoded
     height="500", which letterboxes the 16:9 video — the browser paints a black
     background around the centered video, giving it a "black border". Override
     the fixed height with a matching 16:9 aspect ratio so the video fills the
     frame edge to edge. */
  .ax-article-content__main rte-formatter iframe[src*="media.tikamoon.com"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--style-border-radius-xs);
  }

  /* ---- Article body (RTE) vertical rhythm ----
     Gaps are carried as trailing (margin-block-end) margins; adjacent vertical
     margins collapse in normal flow, so when a text is followed by an image the
     image's 48px wins (the image "takes the margin") instead of stacking. */
  .ax-article-content__main rte-formatter {
    display: block;
  }

  .ax-article-content__main rte-formatter > * {
    margin-block: 0;
  }

  /* 24px after text and after h2/h3/h5/h6. */
  .ax-article-content__main rte-formatter > :is(p, ul, ol, h2, h3, h5, h6) {
    margin-block-end: var(--ax-rte-gap);
  }

  /* 8px after an h4 (tighter, sits close to its text). */
  .ax-article-content__main rte-formatter > h4 {
    margin-block-end: var(--ax-rte-gap-tight);
  }

  /* Images own 48px top & bottom; neighbours collapse into it. */
  .ax-article-content__main rte-formatter > :is(img, figure, p:has(> img)) {
    display: block;
    margin-block: var(--ax-rte-image-gap);
  }

  .ax-article-content__main rte-formatter > img,
  .ax-article-content__main rte-formatter > figure img,
  .ax-article-content__main rte-formatter > p:has(> img) > img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .ax-article-content__main rte-formatter > p:has(> img) > img,
  .ax-article-content__main rte-formatter > figure img {
    margin-block: 0;
  }

  .ax-article-content__main rte-formatter > :last-child {
    margin-block-end: 0;
  }

  /* Small uppercase column labels with a hairline rule (ANCHORS / DETAILS / SHARE). */
  .ax-article-content__col-title {
    margin: 0 0 var(--ax-rail-title-gap);
    padding-block-end: var(--ax-rail-title-pad);
    border-block-end: var(--style-border-width) solid var(--color-border);
    font-size: var(--font-size--subheading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ---- Details ---- */
  .ax-article-content__details-list {
    display: flex;
    flex-direction: column;
    gap: var(--ax-rail-gap);
    margin: 0;
  }

  .ax-article-content__details-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ax-rail-gap);
  }

  .ax-article-content__details-term {
    flex: 0 0 auto;
    font-size: var(--font-size--subheading);
    text-transform: uppercase;
    opacity: var(--opacity-60);
  }

  .ax-article-content__details-desc {
    margin: 0;
    font-size: var(--font-size--subheading);
    text-align: end;
  }

  /* ---- Table of contents ---- */
  .ax-article-content__toc-list {
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: var(--ax-rail-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ax-article-content__toc-item {
    counter-increment: toc;
  }

  .ax-article-content__toc-link {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-size--subheading);
    color: var(--color-foreground);
    text-decoration: none;
  }

  /* Only the leading number is dimmed; the label stays full black. No underline. */
  .ax-article-content__toc-link::before {
    content: counter(toc, decimal-leading-zero) "/";
    flex: 0 0 auto;
    opacity: var(--opacity-60);
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .ax-article-content__toc-link:hover::before,
  .ax-article-content__toc-link:focus-visible::before,
  .ax-article-content__toc-link[aria-current="true"]::before {
    opacity: 1;
  }

  /* ---- Share ---- */
  .ax-article-content__share {
    margin-block-start: var(--gap-3xl);
  }

  .ax-article-content__share-list {
    display: flex;
    flex-direction: column;
    gap: var(--ax-rail-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ax-article-content__share-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-lg); /* 16px between the icon and the network name */
    font-size: var(--font-size--subheading);
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
  }

  .ax-article-content__share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem; /* 24px */
    block-size: 1.5rem;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: 50%;
  }

  .ax-article-content__share-icon svg {
    block-size: 0.625rem; /* ~10px tall; width follows each icon's aspect ratio */
    inline-size: auto;
    color: currentColor;
  }

  .ax-article-content__share-link:hover .ax-article-content__share-icon {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  /* ---- Desktop: 3 columns + sticky side rails ---- */
  @media screen and (min-width: 750px) {
    .ax-article-content {
      --ax-side-margin: 2.5rem; /* 40px left/right page inset (desktop) */
    }

    .ax-article-content__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
      grid-template-areas: "aside content details";
      align-items: start; /* required so the details rail can stick */
      column-gap: var(--ax-cols-gap);
    }

    /* Aside hidden: drop the left rail so the body keeps the full width. */
    .ax-article-content__layout--no-aside {
      grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
      grid-template-areas: "content details";
    }

    /* Details hidden: drop the right rail, keep the aside on the left. */
    .ax-article-content__layout--no-details {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
      grid-template-areas: "aside content";
    }

    /* Both side rails hidden: single full-width body column. */
    .ax-article-content__layout--no-aside.ax-article-content__layout--no-details {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "content";
    }

    /* Left rail spans the full body height; the TOC wrapper flex-grows to fill the
       space above SHARE, so the sticky TOC releases just before SHARE (no overlap). */
    .ax-article-content__aside {
      grid-area: aside;
      align-self: stretch;
      display: flex;
      flex-direction: column;
    }

    .ax-article-content__toc-wrap {
      flex: 1 1 auto;
      min-height: 0;
    }

    .ax-article-content__main {
      grid-area: content;
    }

    .ax-article-content__details {
      grid-area: details;
    }

    .ax-article-content__toc {
      display: block;
    }

    /* Only the table of contents and the details rail are sticky; SHARE stays at
       the bottom of the article. */
    .ax-article-content__layout:not(.ax-article-content__layout--no-sticky) .ax-article-content__toc,
    .ax-article-content__layout:not(.ax-article-content__layout--no-sticky) .ax-article-content__details {
      position: sticky;
      top: var(--sticky-header-offset, 0);
    }
  }
/* END_SECTION:ax-article-content */

/* START_SECTION:ax-article-posts (INDEX:3) */
.ax-article-posts__header {
    padding: var(--padding-lg);
    text-align: center;
    border-block: var(--style-border-width) solid var(--color-border);
  }

  .ax-article-posts__heading {
    margin: 0;
    font-size: var(--font-size--lg);
    text-transform: uppercase;
  }

  /* ---- Mobile: peek carousel (~1.2 cards visible) ---- */
  .ax-article-posts__grid {
    display: flex;
    gap: var(--gap-2xl);
    overflow-x: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--padding-2xl);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-margin);
    scrollbar-width: none;
  }

  .ax-article-posts__grid::-webkit-scrollbar {
    display: none;
  }

  .ax-article-posts__grid > .ax-blog-card {
    flex: 0 0 83%;
    scroll-snap-align: start;
    /* The shared card carries hairlines for the gap:0 desktop grid; drop them in
       the mobile carousel where cards are spaced by the flex gap instead. */
    border: 0;
    padding: var(--padding-2xl) 0;
  }

  /* ---- Desktop: 3-column grid with hairline dividers ---- */
  @media screen and (min-width: 750px) {
    .ax-article-posts__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      overflow: visible;
      padding: 0;
    }

    .ax-article-posts__grid > .ax-blog-card {
      flex: initial;
      padding: var(--padding-4xl);
      border-inline-end: var(--style-border-width) solid var(--color-border);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .ax-article-posts__grid > .ax-blog-card:last-child {
      border-inline-end: 0;
    }
  }
/* END_SECTION:ax-article-posts */

/* START_SECTION:ax-blog-banner (INDEX:4) */
.ax-blog-banner--top-border {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .ax-blog-banner--bottom-border {
    border-block-end: var(--style-border-width) solid var(--color-border);
  }

  .ax-blog-banner__inner {
    width: 100%;
    /* Query container so the CSS fallback below sizes against the real content
       width (cqw excludes the scrollbar, unlike vw). */
    container-type: inline-size;
    /* Clip the title to the viewport before JS sizes it precisely — avoids a
       transient horizontal scrollbar from the CSS fallback overshooting. */
    overflow: clip;
  }

  .ax-blog-banner__title {
    /* Hug the text so its box width equals the rendered text width — both the
       JS fit (getBoundingClientRect) and the visual layout depend on this.
       margin-inline: auto centers short titles once they hit the size cap. */
    margin: 0 auto;
    width: max-content;
    max-width: none;
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-weight: var(--font-body--weight);
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-foreground);

    /* No-JS / pre-hydration fallback: approximate a full-width fit from the
       character count (~0.6em average advance per uppercase glyph in Sofia Pro),
       capped at 20cqw (= available/5) so short titles don't explode before JS.
       ax-blog-banner.js then overrides font-size inline for an exact fit. */
    font-size: min(calc(100cqw / (var(--ax-blog-banner-chars, 10) * 0.6)), 20cqw);
  }
/* END_SECTION:ax-blog-banner */

/* START_SECTION:ax-blog-posts (INDEX:5) */
.ax-blog-posts {
    --ax-blog-border: var(--style-border-width) solid var(--color-border);
    --ax-blog-pad: var(--padding-md);
  }

  /* ---- Filters ---- */
  .ax-blog-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gap-lg);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--padding-lg); /* 16px */
    border-block-end: var(--ax-blog-border);
  }

  .ax-blog-filters::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .ax-blog-filters {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }

  .ax-blog-filters__link {
    flex-shrink: 0;
    font-size: var(--font-size--xs); /* 12px mobile / 14px desktop */
    line-height: 1;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .ax-blog-filters__link--active {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }

  /* ---- Grid ----
     gap:0. Each card carries its OWN right + bottom hairline, so the lines only
     ever appear BETWEEN articles. The clip wrapper trims the 1px the grid sticks
     out on its right + bottom, removing the OUTER right/bottom borders (last
     column / last row). The top line comes from the filter bar's border-bottom,
     the bottom line from the pagination bar's border-top — no outer left/right. */
  .ax-blog-grid-clip {
    overflow: clip;
  }

  .ax-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    /* Always trim the outer RIGHT border. */
    margin-inline-end: calc(-1 * var(--style-border-width));
  }

  /* Trim the outer BOTTOM border only when a pagination bar follows (its
     border-top becomes the bottom line). Without pagination, the last row keeps
     its own bottom border so the grid is still closed. */
  .ax-blog-grid-clip--paginated .ax-blog-grid {
    margin-block-end: calc(-1 * var(--style-border-width));
  }

  @media screen and (min-width: 750px) {
    .ax-blog-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (min-width: 1100px) {
    .ax-blog-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ---- Card ----
     The ratio lives on the IMAGE, not the card: a 1x1 media keeps 416/273
     (its size at 1440px). The card height simply follows its content, so the
     1x1 cards define the grid row height. The hero (2x2) and wide (2x1) cards
     stretch over a taller/wider cell, so only THOSE let the image flex-fill the
     extra space — every 1x1 image keeps its ratio and the rows stay aligned. */
  .ax-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--padding-2xl); /* 24px around the article on mobile */
    border-inline-end: var(--ax-blog-border);
    border-block-end: var(--ax-blog-border);
    background-color: var(--color-background);
  }

  .ax-blog-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 416 / 273;
    border-radius: 8px;
  }

  @media screen and (min-width: 750px) {
    .ax-blog-card {
      padding: var(--padding-4xl); /* 32px around the article on desktop */
    }

    .ax-blog-card--hero {
      grid-column: span 2;
      grid-row: span 2;
    }

    /* Hero spans 2 rows (sized by the 1x1 cards next to it) → its image fills
       the taller cell. */
    .ax-blog-card--hero .ax-blog-card__media {
      flex: 1 1 auto;
      min-height: 0;
      aspect-ratio: auto;
    }

    /* Wide last card spans 2 columns on a single row → keep the image roughly
       the same height as the 1x1 images (double the width) so the row aligns,
       instead of letting it grow to its natural height. */
    .ax-blog-card--wide {
      grid-column: span 2;
    }

    .ax-blog-card--wide .ax-blog-card__media {
      aspect-ratio: 10 / 3;
    }
  }

  .ax-blog-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ax-blog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-blog-card__image--placeholder {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* 16px between image and date */
  .ax-blog-card__body {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--gap-lg);
  }

  .ax-blog-card__date {
    font-size: var(--font-size--subheading); /* 10px mobile / 12px desktop */
    opacity: var(--opacity-60);
  }

  /* Title uses the global h2 type preset; 16px above it (after the date) */
  .ax-blog-card__title {
    margin: 0;
    margin-block-start: var(--gap-lg);
  }

  /* When the date is hidden the title becomes the first body element — drop the
     leading gap so it sits flush under the image (the body already adds it). */
  .ax-blog-card__title:first-child {
    margin-block-start: 0;
  }

  /* Optional excerpt: sits between the title and the tags */
  .ax-blog-card__excerpt {
    margin: 0;
    margin-block-start: var(--gap-md);
    font-size: var(--font-size--sm);
    opacity: var(--opacity-60);
  }

  .ax-blog-card__title-link {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: none;
  }

  /* Clickable tags, separated by "/", 45px below the title */
  .ax-blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-2xs) var(--gap-sm);
    margin: 0;
    margin-block-start: 45px;
    padding: 0;
    list-style: none;
  }

  .ax-blog-card__tag {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-size--subheading); /* 10px mobile / 12px desktop */
  }

  .ax-blog-card__tag:not(:first-child)::before {
    content: "/";
    opacity: var(--opacity-60);
  }

  .ax-blog-card__tag-link {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .ax-blog-posts__empty {
    padding: var(--padding-2xl) var(--ax-blog-pad);
    text-align: center;
  }

  /* No gap between the last row of articles and the pagination bar — the
     pagination's own border-top becomes the grid's bottom line, matched to the
     grid hairline color (the shared snippet defaults to a darker grey). */
  .ax-blog-posts .pagination--underline {
    margin-block-start: 0;
    border-color: var(--color-border);
  }
/* END_SECTION:ax-blog-posts */

/* START_SECTION:ax-breadcrumbs (INDEX:6) */
.ax-breadcrumbs__nav {
    width: 100%;
  }

  /* Full-width keeps page gutters only (no max page-width). */
  .ax-breadcrumbs--full-width > .ax-breadcrumbs__nav {
    padding-inline: var(--page-margin);
  }

  /* Axome - Half of the visible inter-item spacing; separator sits centered between items.
     Desktop: 2 × 1.25rem = 40px. Mobile: 2 × 0.625rem = 20px. */
  .ax-breadcrumbs {
    --ax-breadcrumbs-gap: 1.25rem;

    @media screen and (max-width: 749px) {
      --ax-breadcrumbs-gap: 0.625rem;
    }
  }

  .ax-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-breadcrumbs-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ax-breadcrumbs--left .ax-breadcrumbs__list {
    justify-content: flex-start;
  }

  .ax-breadcrumbs--center .ax-breadcrumbs__list {
    justify-content: center;
  }

  .ax-breadcrumbs--right .ax-breadcrumbs__list {
    justify-content: flex-end;
  }

  .ax-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-breadcrumbs-gap);
    font-size: var(--font-size--xs);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-foreground);
  }

  .ax-breadcrumbs__item + .ax-breadcrumbs__item::before {
    content: '/';
    display: inline-block;
    color: var(--color-foreground);
  }

  .ax-breadcrumbs--separator-chevron .ax-breadcrumbs__item + .ax-breadcrumbs__item::before {
    content: '›';
  }

  .ax-breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--animation-values);
  }

  .ax-breadcrumbs__link:hover,
  .ax-breadcrumbs__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .ax-breadcrumbs__current {
    color: var(--color-foreground);
  }

  /* Axome - Mobile: standalone bar with top/bottom hairlines, kept on a single
     line with horizontal scroll instead of wrapping. */
  @media screen and (max-width: 749px) {
    .ax-breadcrumbs {
      border-block: var(--style-border-width) solid var(--color-border);
    }

    .ax-breadcrumbs__list {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .ax-breadcrumbs__list::-webkit-scrollbar {
      display: none;
    }

    .ax-breadcrumbs__item {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }
/* END_SECTION:ax-breadcrumbs */

/* START_SECTION:ax-collection-banner (INDEX:7) */
.ax-collection-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    padding-inline: var(--page-margin);
    width: 100%;

    @media screen and (min-width: 750px) {
      gap: 3rem; /* 48px below the heading on desktop */
    }
  }

  .ax-collection-banner__heading {
    text-align: center;
    width: 100%;
    max-width: var(--narrow-content-width);
  }

  .ax-collection-banner__heading > * {
    margin: 0;
  }

  /* Axome - Visual preset override: keeps the richtext tag (SEO) but restyles it
     using the chosen --font-{preset}-- tokens. Higher specificity than .rte h2. */
  .ax-collection-banner .ax-collection-banner__heading--styled :is(h1, h2, h3, h4, h5, h6, p):not(.ax-collection-banner__display) {
    font-family: var(--ax-heading-family);
    font-style: var(--ax-heading-style);
    font-weight: var(--ax-heading-weight);
    font-size: var(--ax-heading-size);
    line-height: var(--ax-heading-line-height);
    letter-spacing: var(--ax-heading-letter-spacing);
    text-transform: var(--ax-heading-case);
  }

  /* Axome - Display text: 40px desktop / 24px mobile in Professor accent font */
  .ax-collection-banner__display {
    margin: 0;
    width: 100%;
    max-width: var(--narrow-content-width);
    font-family: var(--font-accent--family);
    font-weight: var(--font-accent--weight);
    font-size: 2.5rem;
    line-height: 1.1;
    text-align: center;

    @media screen and (max-width: 749px) {
      font-size: 1.5rem;
    }
  }

  .ax-collection-banner__list {
    --ax-banner-gap: 1rem; /* 16px */

    display: flex;
    flex-wrap: nowrap;
    gap: var(--ax-banner-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;

    @media screen and (min-width: 750px) {
      flex-wrap: wrap;
      justify-content: center;
      overflow-x: visible;
      max-width: 75%;
    }
  }

  .ax-collection-banner__list::-webkit-scrollbar {
    display: none;
  }

  .ax-collection-banner__item {
    flex-shrink: 0;
  }

  .ax-collection-banner__link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    border: 1px solid #000;
    border-radius: 4px;
    padding: 4px 16px;
    text-decoration: none;
    color: var(--color-foreground);
    white-space: nowrap;
    transition: opacity var(--animation-values);
    height: 100%;
  }

  .ax-collection-banner__link:hover {
    opacity: var(--opacity-70);
  }

  .ax-collection-banner__icon {
    max-height: 1.5em;
    width: auto;
    display: block;
    flex-shrink: 0;
  }

  .ax-collection-banner__title {
    font-size: var(--font-size--xs);
    line-height: 1;
  }
/* END_SECTION:ax-collection-banner */

/* START_SECTION:ax-editorial-duo (INDEX:8) */
.ax-editorial-duo__panel {
    --ax-radius: 8px; /* Axome - per design (images + text zones) */
    --ax-pad: 1.25rem; /* Axome - 20px mobile text-zone padding */
    --ax-overlap-y: 24px; /* Axome - how far the card pokes past the image edge (mobile) */
    --ax-side-w: 66.6667%; /* Axome - image & card each span ~2/3, overlapping the middle third */
  }

  /* Image stays in normal flow and drives the panel height — kept intact at its
     25:28 ratio (500x560 @ 1440), ~2/3 of the panel wide. */
  .ax-editorial-duo__media {
    inline-size: var(--ax-side-w);
    border-radius: var(--ax-radius);
    overflow: hidden;
  }

  .ax-editorial-duo__img,
  .ax-editorial-duo__media .placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 25 / 28;
    object-fit: cover;
  }

  /* Text card is taken out of flow and overlaid: it straddles the image edge and
     pokes into the adjacent whitespace, without changing the image's size. */
  .ax-editorial-duo__content {
    position: absolute;
    inline-size: var(--ax-side-w);
    z-index: var(--layer-raised, 1);
    padding: var(--ax-pad);
    border-radius: var(--ax-radius);
  }

  .ax-editorial-duo__content--boxed {
    background: var(--color-background);
  }

  .ax-editorial-duo__heading > :first-child,
  .ax-editorial-duo__text > :first-child {
    margin-block-start: 0;
  }

  .ax-editorial-duo__heading > :last-child,
  .ax-editorial-duo__text > :last-child {
    margin-block-end: 0;
  }

  .ax-editorial-duo__text {
    margin-block-start: var(--gap-md);
  }

  .ax-editorial-duo__button {
    display: inline-flex;
    margin-block-start: var(--gap-lg);
  }

  /* Layout — each panel is its own positioning context. The image hugs one side
     (~2/3) and the absolutely-positioned card hugs the mirror side (~2/3), so the
     two overlap on the middle third and the card straddles the image edge.
     Mobile keeps every panel image-on-top (panels stacked); desktop places the
     two panels side by side and lets image-bottom panels stagger downward. */
  .ax-editorial-duo__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
    padding-inline: 0.5rem; /* Axome - 8px side margin (full-width section) */
  }

  .ax-editorial-duo__panel {
    position: relative;
    /* Reserve the band the card pokes into below the image so it can't overlap a
       neighbouring section. */
    margin-block-end: var(--ax-overlap-y);
  }

  /* Horizontal anchor — image on its side, card on the mirror side */
  .ax-editorial-duo__panel--side-right .ax-editorial-duo__media {
    margin-inline-start: auto;
  }
  .ax-editorial-duo__panel--side-left .ax-editorial-duo__content {
    inset-inline-end: 0;
  }
  .ax-editorial-duo__panel--side-right .ax-editorial-duo__content {
    inset-inline-start: 0;
  }

  /* Vertical anchor — card hugs the image's bottom edge and pokes below it */
  .ax-editorial-duo__content {
    inset-block-end: calc(-1 * var(--ax-overlap-y));
  }

  /* Desktop — panels side by side, larger overlap/padding, and image-bottom
     panels push the image down so the card straddles the image's TOP instead. */
  @media screen and (min-width: 750px) {
    .ax-editorial-duo__panel {
      --ax-pad: 2.5rem; /* Axome - 40px desktop text-zone padding */
      --ax-overlap-y: 130px; /* Axome - desktop poke past the image edge / stagger amount */
      --ax-text-over-image: 30%; /* Axome - near edge of the card, sitting over the image */
      --ax-text-w: min(440px, 56vw); /* Axome - card width, capped at 440px (spills past the panel into the central whitespace) */
    }

    .ax-editorial-duo__inner {
      flex-direction: row;
      align-items: start;
      gap: var(--ax-duo-gap, var(--gap-2xl));
      padding-inline: 24px;
    }

    .ax-editorial-duo__panel {
      flex: 1 1 0;
    }

    /* The card keeps a fixed reading width (not clamped to the flex column): it is
       anchored over the image by its near edge and spills out of the panel into
       the central whitespace instead of shrinking to fit the column. */
    .ax-editorial-duo__content {
      inline-size: var(--ax-text-w);
    }
    .ax-editorial-duo__panel--side-left .ax-editorial-duo__content {
      inset-inline-start: var(--ax-text-over-image);
      inset-inline-end: auto;
    }
    .ax-editorial-duo__panel--side-right .ax-editorial-duo__content {
      inset-inline-end: var(--ax-text-over-image);
      inset-inline-start: auto;
    }

    /* Image-bottom: drop the bottom poke, push the image down by the stagger
       amount, and anchor the card to the top edge (straddles the image's top). */
    .ax-editorial-duo__panel--img-bottom {
      margin-block-end: 0;
    }
    .ax-editorial-duo__panel--img-bottom .ax-editorial-duo__media {
      margin-block-start: var(--ax-overlap-y);
    }
    .ax-editorial-duo__panel--img-bottom .ax-editorial-duo__content {
      inset-block-start: 0;
      inset-block-end: auto;
    }
  }
/* END_SECTION:ax-editorial-duo */

/* START_SECTION:ax-image-duo-feature (INDEX:9) */
.ax-image-duo-feature__inner {
    position: relative;
  }

  .ax-image-duo-feature__images {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ax-image-duo-feature__image {
    position: relative;
    aspect-ratio: var(--img-ratio, 3 / 2);
    overflow: hidden;
  }

  .ax-image-duo-feature__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-image-duo-feature__box {
    /* Mobile: float centered over the seam between the two stacked images,
       with 22px gutters either side. Desktop re-centers over the vertical seam. */
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 22px;
    transform: translateY(-50%);
    padding: var(--padding-2xl);
    border-radius: 8px;
    text-align: center;
    z-index: var(--layer-raised, 1);
  }

  .ax-image-duo-feature__heading > :first-child,
  .ax-image-duo-feature__text > :first-child {
    margin-block-start: 0;
  }

  .ax-image-duo-feature__heading > :last-child,
  .ax-image-duo-feature__text > :last-child {
    margin-block-end: 0;
  }

  .ax-image-duo-feature__text {
    margin-block-start: var(--gap-md);
  }

  .ax-image-duo-feature__box .ax-image-duo-feature__button {
    display: inline-flex;
    margin-block-start: var(--gap-lg);
  }

  /* No underline on the link-style button (any state) */
  .ax-image-duo-feature__box .ax-image-duo-feature__button,
  .ax-image-duo-feature__box .ax-image-duo-feature__button:hover,
  .ax-image-duo-feature__box .ax-image-duo-feature__button:focus-visible {
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .ax-image-duo-feature__images {
      grid-template-columns: 1fr 1fr;
    }

    .ax-image-duo-feature__box {
      inset-inline: auto;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      width: var(--box-width, 600px);
      max-width: calc(100% - var(--page-margin) * 2);
      padding: var(--padding-3xl);
    }
  }
/* END_SECTION:ax-image-duo-feature */

/* START_SECTION:ax-newsletter (INDEX:10) */
.ax-newsletter__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    /* Full-width section keeps only the page gutters (like ax-breadcrumbs full). */
    padding-inline: var(--page-margin);
  }

  .ax-newsletter__subheading {
    margin: 0;
    font-size: var(--font-size--subheading); /* 10px mobile / 12px desktop */
    line-height: 1.2;
  }

  /* Title uses the global h2 type preset (Bebas Neue). 8px below the subheading
     on mobile, 16px on desktop. */
  .ax-newsletter__heading {
    margin-block-start: var(--gap-xs); /* 8px */
  }

  .ax-newsletter__heading > * {
    margin: 0;
  }

  /* 16px below the title on mobile, 24px on desktop. */
  .ax-newsletter__form {
    width: 100%;
    max-width: 26rem;
    margin-block-start: var(--gap-lg); /* 16px */
  }

  @media screen and (min-width: 750px) {
    .ax-newsletter__heading {
      margin-block-start: var(--gap-lg); /* 16px */
    }

    .ax-newsletter__form {
      margin-block-start: var(--margin-2xl); /* 24px */
    }
  }

  .ax-newsletter__input-group {
    display: flex;
    align-items: stretch;
    gap: var(--gap-xs); /* 8px */
  }

  /* Same treatment as the footer newsletter input, on a light scheme. */
  .ax-newsletter__input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 var(--padding-lg);
    border: 1px solid var(--color-foreground);
    border-radius: 4px;
    background-color: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
  }

  .ax-newsletter__input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    opacity: 1;
  }

  .ax-newsletter__button {
    height: 32px;
    padding: 0 var(--padding-xl);
    white-space: nowrap;
  }

  .ax-newsletter__message {
    margin-block-start: var(--gap-xs);
    font-size: var(--font-size--xs);
  }

  .ax-newsletter__message--error {
    color: var(--color-error);
  }
/* END_SECTION:ax-newsletter */

/* START_SECTION:ax-product-reviews (INDEX:11) */
ax-product-reviews-component {
    display: block;
    width: 100%;
    overflow-x: clip;
    /* Axome - Offset the top when reached via the #reviews anchor (rating badge link)
       so the section title isn't tucked under the sticky header. --header-height is the
       live sticky-header height kept on <body> by header.js (0 when the header is absent). */
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--scroll-margin));
  }

  .ax-product-reviews--top-border {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .ax-product-reviews--bottom-border {
    border-block-end: var(--style-border-width) solid var(--color-border);
  }

  /* Header + carousel both span the full grid (section--full-width > *) and are
     pulled in by the page gutter, so on large screens the title and the first
     card start near the screen edge instead of being centered in a 1440px column. */
  .ax-product-reviews__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-inline: var(--page-margin);
    margin-block-end: var(--padding-2xl); /* 24px */
  }

  .ax-product-reviews__title {
    margin: 0;
  }

  .ax-product-reviews__link {
    flex-shrink: 0;
  }

  /* Carousel container */
  .ax-product-reviews__carousel {
    position: relative;
    width: 100%;
  }

  /* The swiper/fallback inherit the page gutter as inline padding: the first card
     aligns with the header, and the next card peeks through on the right edge.
     scroll-padding-inline mirrors padding-inline so scroll-snap doesn't skip the
     leading gutter (FOUC). The host component clips overflow at the viewport edge. */
  .ax-product-reviews__swiper,
  .ax-product-reviews__fallback {
    width: 100%;
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
  }

  /* Swiper's shadow .swiper clips at its padded content edge by default, eating
     the peek — force it visible so slides extend through the gutter padding. */
  .ax-product-reviews__swiper::part(container) {
    overflow: visible;
  }

  /* SSR fallback: mimics Swiper layout to avoid FOUC, hides overflow pre-hydration */
  .ax-product-reviews__fallback {
    display: flex;
    gap: var(--ax-product-reviews-gap);
    overflow: hidden;
  }

  .ax-product-reviews__fallback > * {
    flex: 0 0 calc((100% - (var(--ax-product-reviews-gap) * (var(--ax-product-reviews-per-view-mobile) - 1))) / var(--ax-product-reviews-per-view-mobile));
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .ax-product-reviews__fallback > * {
      flex: 0 0 calc((100% - (var(--ax-product-reviews-gap) * (var(--ax-product-reviews-per-view) - 1))) / var(--ax-product-reviews-per-view));
    }
  }

  /* Mobile CTA sits below the carousel, left-aligned with the page gutter.
     It's a direct grid child of the full-width section, so we pin it to the start
     and size it to its content instead of letting it stretch full width. */
  .ax-product-reviews__link--mobile {
    justify-self: start;
    width: fit-content;
    margin-block-start: var(--padding-2xl);
    margin-inline: var(--page-margin);
  }

  /* Header stacks on mobile so the CTA button never gets cramped next to the title */
  @media screen and (max-width: 749px) {
    .ax-product-reviews__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-md);
    }
  }
/* END_SECTION:ax-product-reviews */

/* START_SECTION:ax-product-tabs (INDEX:12) */
.ax-product-tabs__inner {
    display: flex;
    flex-direction: column;
    gap: var(--ax-product-tabs-gap-mobile);
  }

  .ax-product-tabs--top-border {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .ax-product-tabs--bottom-border {
    border-block-end: var(--style-border-width) solid var(--color-border);
  }

  .ax-product-tabs__heading {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .ax-product-tabs__eyebrow {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .ax-product-tabs__title {
    margin: 0;
  }

  .ax-product-tabs__list {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Row separators + caret/plus toggle, mirroring blocks/accordion.liquid so the
     product tabs look identical to the generic FAQ accordion. */
  .accordion-tabs--dividers accordion-custom .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .accordion-tabs--dividers accordion-custom:last-child .details {
    border-block-end: var(--style-border-width) solid var(--color-border);
  }

  .accordion-tabs--caret .icon-plus,
  .accordion-tabs--plus .icon-caret {
    display: none;
  }

  /* 24px breathing room at the end of every open tab panel. */
  .accordion-tabs .details-content {
    padding-block-end: var(--padding-2xl);
  }

  /* Summary typography (set from the heading_preset, like the generic accordion). */
  .accordion-tabs .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  @media screen and (min-width: 750px) {
    .ax-product-tabs__inner--row {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--ax-product-tabs-gap);
    }

    .ax-product-tabs__inner--row .ax-product-tabs__heading {
      flex: 0 0 var(--ax-product-tabs-heading-width);
    }
  }
/* END_SECTION:ax-product-tabs */

/* START_SECTION:ax-reassurance (INDEX:13) */
ax-reassurance-component {
    display: block;
    width: 100%;
    overflow-x: clip;
  }

  .ax-reassurance--top-border {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .ax-reassurance__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .ax-reassurance__item {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding-inline: var(--padding-2xl);
  }

  .ax-reassurance--separators .ax-reassurance__grid .ax-reassurance__item + .ax-reassurance__item {
    border-inline-start: var(--style-border-width) solid var(--color-border);
  }

  .ax-reassurance__text > * {
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .ax-reassurance__text > * + * {
    margin-block-start: var(--gap-xs);
  }

  /* Mobile: Swiper carousel */
  .ax-reassurance__carousel {
    position: relative;
  }

  .ax-reassurance__swiper {
    width: 100%;
  }

  /* Pagination rendered in light DOM via Swiper config (pagination.el),
     slotted at container-end so it sits right below the slides. */
  .ax-reassurance__pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-xs);
    margin-block-start: var(--padding-xs);
  }

  .ax-reassurance__pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: var(--opacity-40);
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: opacity var(--animation-values);
  }

  .ax-reassurance__pagination .swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* SSR fallback mimics swiper layout — only first slide visible to avoid flash */
  .ax-reassurance__fallback {
    display: flex;
    overflow: hidden;
  }

  .ax-reassurance__fallback .ax-reassurance__item {
    flex: 0 0 100%;
    width: 100%;
  }

  .ax-reassurance__fallback .ax-reassurance__item + .ax-reassurance__item {
    display: none;
  }
/* END_SECTION:ax-reassurance */

/* START_SECTION:ax-shop-reviews (INDEX:14) */
.ax-shop-reviews {
    --ax-shop-reviews-card-padding: 40px;
    --ax-shop-reviews-card-radius: 8px;
    --ax-shop-reviews-grid-gap: 24px;
    --ax-shop-reviews-stars-gap: 4px;
    --ax-shop-reviews-rating-gap: 1rem; /* 16px between rating value and stars (CREA) */
  }

  @media screen and (max-width: 749px) {
    .ax-shop-reviews {
      --ax-shop-reviews-card-padding: 20px;
      --ax-shop-reviews-card-radius: 4px;
    }
  }

  .ax-shop-reviews__grid {
    display: flex;
    flex-direction: column;
    gap: var(--ax-shop-reviews-grid-gap);
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .ax-shop-reviews__grid {
      flex-direction: row;
    }
  }

  .ax-shop-reviews__card {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--ax-shop-reviews-card-padding);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-radius: var(--ax-shop-reviews-card-radius);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: var(--gap-2xl);
  }

  .ax-shop-reviews__card--rating {
    align-items: stretch;
    justify-content: space-between;
    text-decoration: none;
    color: var(--color-foreground);
    transition: opacity var(--animation-values);
  }

  .ax-shop-reviews__card--rating:hover,
  .ax-shop-reviews__card--rating:focus-visible {
    opacity: var(--opacity-85);
  }

  .ax-shop-reviews__rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ax-shop-reviews-rating-gap);
  }

  .ax-shop-reviews__rating-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .ax-shop-reviews__rating-value {
    margin: 0;
    line-height: var(--line-height--heading-tight);
  }

  .ax-shop-reviews__stars {
    display: inline-flex;
    gap: var(--ax-shop-reviews-stars-gap);
    line-height: 0;
  }

  .ax-shop-reviews__rating-label {
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    opacity: var(--opacity-60);
  }

  .ax-shop-reviews__rating-link {
    align-self: flex-start;
  }

  /* Axome - Link CTA in ax-shop-reviews is not underlined */
  .ax-shop-reviews .ax-shop-reviews__rating-link.link {
    text-decoration: none;
  }

  .ax-shop-reviews__card--review {
    justify-content: space-between;
  }

  .ax-shop-reviews__review-text,
  .ax-shop-reviews__review-text > * {
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .ax-shop-reviews__review-text {
      width: 50%;
    }
  }

  .ax-shop-reviews__review-author {
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
  }
/* END_SECTION:ax-shop-reviews */

/* START_SECTION:ax-shop-the-look (INDEX:15) */
.section-ax-shop-the-look {
    --ax-shop-the-look-radius: 8px;
    --ax-shop-the-look-product-size: 35px;
    --ax-shop-the-look-products-padding-block: 12px;
    --ax-shop-the-look-products-padding-inline: 22px;
    --ax-shop-the-look-products-gap: var(--gap-sm);
    --ax-shop-the-look-products-offset: 32px;
    --ax-shop-the-look-panel-width: calc(404px + (2 * var(--ax-shop-the-look-panel-padding)));
    --ax-shop-the-look-panel-padding: 24px;
    --ax-shop-the-look-panel-grid-gap: 24px;
    --ax-shop-the-look-current-panel-width: 0px;

    display: block;
    width: 100%;
    cursor: pointer;
  }

  .section-ax-shop-the-look[data-expanded='true'] {
    cursor: default;
  }

  @media screen and (max-width: 749px) {
    .section-ax-shop-the-look {
      --ax-shop-the-look-products-offset: 24px;
    }
  }

  .section-ax-shop-the-look .ax-shop-the-look__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ax-shop-the-look-aspect-ratio);
    overflow: hidden;
  }

  .section-ax-shop-the-look .ax-shop-the-look__image-wrapper {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: var(--ax-shop-the-look-current-panel-width);
    overflow: hidden;
    transition: inset-inline-end var(--animation-speed-slow) var(--animation-easing);
  }

  .section-ax-shop-the-look .ax-shop-the-look__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .section-ax-shop-the-look .ax-shop-the-look__products {
    position: absolute;
    inset-block-end: var(--ax-shop-the-look-products-offset);
    inset-inline-end: var(--ax-shop-the-look-products-offset);
    display: inline-flex;
    align-items: center;
    gap: var(--ax-shop-the-look-products-gap);
    padding-block: var(--ax-shop-the-look-products-padding-block);
    padding-inline: var(--ax-shop-the-look-products-padding-inline);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-radius: var(--ax-shop-the-look-radius);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
  }

  .section-ax-shop-the-look[data-expanded='true'] .ax-shop-the-look__products {
    opacity: 0;
    pointer-events: none;
  }

  .section-ax-shop-the-look .ax-shop-the-look__products-list {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .section-ax-shop-the-look .ax-shop-the-look__product {
    margin: 0;
    padding: 0;
  }

  .section-ax-shop-the-look .ax-shop-the-look__product-image {
    display: block;
    width: var(--ax-shop-the-look-product-size);
    height: var(--ax-shop-the-look-product-size);
    object-fit: cover;
    border-radius: var(--ax-shop-the-look-radius);
  }

  .section-ax-shop-the-look .ax-shop-the-look__products-label {
    line-height: var(--line-height--body-tight);
    background-image: linear-gradient(currentcolor, currentcolor);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 100% 1px;
    transition: background-size var(--animation-speed-slow) var(--animation-easing);
  }

  @media screen and (min-width: 750px) {
    .section-ax-shop-the-look .ax-shop-the-look__products:hover .ax-shop-the-look__products-label {
      background-size: 0 1px;
    }
  }

  .section-ax-shop-the-look .ax-shop-the-look__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--ax-shop-the-look-current-panel-width);
    max-width: 100%;
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
    transition: width var(--animation-speed-slow) var(--animation-easing);
    cursor: default;
  }

  .section-ax-shop-the-look .ax-shop-the-look__panel-inner {
    width: var(--ax-shop-the-look-panel-width);
    max-width: 100%;
    height: 100%;
    padding-inline: var(--ax-shop-the-look-panel-padding);
    padding-block: var(--ax-shop-the-look-panel-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-xs);
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .section-ax-shop-the-look .ax-shop-the-look__panel-title {
    margin: 0;
  }

  .section-ax-shop-the-look .ax-shop-the-look__panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ax-shop-the-look-panel-grid-gap);
  }

  .section-ax-shop-the-look[data-expanded='true'] {
    --ax-shop-the-look-current-panel-width: var(--ax-shop-the-look-panel-width);
  }

  @media screen and (max-width: 749px) {
    .section-ax-shop-the-look {
      --ax-shop-the-look-panel-width: 100%;
    }
  }
/* END_SECTION:ax-shop-the-look */

/* START_SECTION:ax-split-feature (INDEX:16) */
.ax-split-feature__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
    /* Full-width section: keep page gutters so content isn't glued to the edges
       (the theme's auto full-width gutter only targets .custom-section-content). */
    padding-inline: var(--page-margin);
  }

  .ax-split-feature__col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  /* text below the images */
  .ax-split-feature__col--text-bottom {
    flex-direction: column-reverse;
  }

  .ax-split-feature__text-zone {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  .ax-split-feature__heading > :first-child,
  .ax-split-feature__text > :first-child {
    margin-block-start: 0;
  }

  .ax-split-feature__heading > :last-child,
  .ax-split-feature__text > :last-child {
    margin-block-end: 0;
  }

  .ax-split-feature__button {
    display: inline-flex;
    align-self: flex-start;
    margin-block-start: var(--gap-sm);
  }

  .ax-split-feature__images {
    display: grid;
    /* Mobile: one full-width image per row (each block individual) */
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }

  .ax-split-feature__card {
    position: relative;
    /* Mobile: full-width landscape */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
  }

  .ax-split-feature__card-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Readability gradient behind the overlaid title */
  .ax-split-feature__card:has(.ax-split-feature__card-title)::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
  }

  .ax-split-feature__card-title {
    position: absolute;
    inset-inline-start: 24px;
    inset-block-end: 24px;
    z-index: var(--layer-raised, 1);
    max-inline-size: calc(100% - 24px * 2);
    margin: 0;
    /* Inherit the theme's real h3 typography (size, weight, letter-spacing, case);
       only override the colour so the title reads on top of the image. */
    color: var(--color-sand, #f0eae1);
  }

  @media screen and (min-width: 750px) {
    .ax-split-feature__inner {
      flex-direction: row;
      gap: 10px;
      /* Both columns share the height of the taller one. */
      align-items: stretch;
    }

    .ax-split-feature__col {
      flex: 1 1 0;
    }

    /* The image block fills the column's remaining height, so the shorter column's
       images grow to match the taller column (no leftover gap). aspect-ratio sets a
       sane intrinsic floor (≈ two squares); because the <img> is absolutely
       positioned it can't inflate that floor, and flex-grow expands past it. */
    .ax-split-feature__images {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      flex: 1 1 auto;
      aspect-ratio: 2 / 1;
    }

    .ax-split-feature__card {
      aspect-ratio: auto;
      min-block-size: 0;
    }
  }

  @media screen and (max-width: 749px) {
    /* Gap between the two stacked columns */
    .ax-split-feature__inner {
      gap: 12px;
    }

    .ax-split-feature__text-zone {
      padding: 20px;
    }

    .ax-split-feature__images {
      gap: 12px;
    }
  }
/* END_SECTION:ax-split-feature */

/* START_SECTION:ax-tabbed-product-lists (INDEX:17) */
ax-tabbed-product-lists-component {
    width: 100%;
    overflow-x: clip;
  }

  /* The section root sets --padding-block-*-mobile from settings; those vars
     leak via inheritance into descendants that have .spacing-style (notably
     card-gallery), adding unwanted vertical padding inside cards on mobile.
     Scope them by resetting at the panels container so they only apply to the
     section root itself. */
  .ax-tabbed-product-lists__panels,
  .ax-tabbed-product-lists__panels * {
    --padding-block-start-mobile: 0px;
    --padding-block-end-mobile: 0px;
    --padding-inline-start-mobile: 0px;
    --padding-inline-end-mobile: 0px;
  }

  .ax-tabbed-product-lists__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: var(--padding-sm);
    padding-block-end: var(--padding-2xl);
    position: relative;
    z-index: var(--layer-raised);

    &:has(.tablist-nav) {
      padding-block-end: 0;
    }

    /* Mobile: stack to a single column and let the tablist scroll horizontally
       starting from the first tab — centering pushes the first tab off-screen
       when total tab width exceeds viewport. */
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
      justify-items: stretch;
    }
  }

  .ax-tabbed-product-lists__title,
  .ax-tabbed-product-lists__header .tablist-nav {
    grid-column: 2;
  }

  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__title,
    .ax-tabbed-product-lists__header .tablist-nav {
      grid-column: 1;
    }
  }

  .ax-tabbed-product-lists__title {
    margin: 0;
  }

  /* Per-block "View all" primary button — centered below the products,
     24px gap from the cards on desktop, 16px on mobile. */
  .ax-tabbed-product-lists__view-all-button {
    display: flex;
    justify-content: center;
    margin-block-start: var(--padding-2xl);

    @media screen and (max-width: 749px) {
      margin-block-start: var(--padding-lg);
    }
  }

  /* Optional text-block CTA link inside a panel (kept from the editorial layout). */
  .ax-tabbed-product-lists__link {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-xs);
    text-decoration: none;
    font-size: var(--font-size--md);
    font-weight: 500;
    border-block-end: 1px solid currentColor;
    transition: border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      border-color: transparent;
    }
  }

  .ax-tabbed-product-lists__caret-icon {
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);

    .ax-tabbed-product-lists__link--caret:hover & {
      transform: translateX(4px);
    }
  }

  .ax-tabbed-product-lists__panels {
    margin-block-start: var(--gap);
    position: relative;

    &.is-loading {
      opacity: 0.5;
      pointer-events: none;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }

    @media screen and (max-width: 749px) {
      margin-block-start: var(--gap-mobile, var(--gap));
    }
  }

  .ax-tabbed-product-lists__panel {
    width: 100%;

    @media screen and (min-width: 750px) {
      &:has(.ax-tabbed-product-lists__text-block) {
        display: grid;
        grid-template-columns: minmax(200px, 1fr) 3fr;
        gap: var(--padding-lg);
        align-items: start;

        .ax-tabbed-product-lists__view-all-button {
          grid-column: 1 / -1;
        }
      }
    }
  }

  .ax-tabbed-product-lists__text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-2xl);

    @media screen and (max-width: 749px) {
      margin-block-end: var(--padding-4xl);
      padding-inline: var(--page-margin);
    }
  }

  .ax-tabbed-product-lists__text-title {
    margin: 0;
  }

  .ax-tabbed-product-lists__text-body {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin: 0;

    em {
      font-style: normal;
      background: linear-gradient(45deg, rgb(134, 114, 193), rgb(223, 99, 137));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* Products container — carries the resource-list CSS vars + container for carousel width calcs */
  .ax-tabbed-product-lists__products {
    position: relative;
    container-type: inline-size;
    container-name: ax-tabbed-carousel;
  }

  /* Grid layout reuses .resource-list--grid classes from base.css */
  .ax-tabbed-product-lists__grid {
    width: 100%;
  }

  /* Carousel container — flex-wrap so we can order swiper / border / arrows */
  .ax-tabbed-product-lists__carousel {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .ax-tabbed-product-lists__swiper {
    order: 0;
  }

  /* Hide swiper before init (progressive enhancement) */
  .ax-tabbed-product-lists__swiper[init='false'] {
    display: none;
  }

  /* SSR fallback — mirrors the Swiper layout pixel-for-pixel to prevent FOUC on init.
     width: 100% is critical: the carousel is display:flex + flex-wrap:wrap, so without
     an explicit width the fallback's width depends on its slide contents, but the
     slide contents use % of the fallback — circular dep that makes slides render
     at ~176px briefly (based on an intermediate resolved width) before snapping to
     the real 471px. Forcing 100% stabilises the cascade on first paint. */
  .ax-tabbed-product-lists__fallback {
    display: flex;
    width: 100%;
    gap: var(--resource-list-column-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    margin-block: -16px;
    padding-block: 16px;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* Slide width — reproduces the resource-list-carousel formula.
     Applied on the outer wrapper only (SSR fallback div OR swiper-slide once initialised). */
  @container ax-tabbed-carousel (max-width: 749px) {
    .ax-tabbed-product-lists__fallback > .ax-tabbed-product-lists__slide,
    .ax-tabbed-product-lists__swiper swiper-slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  /* Peek defaults: with peek enabled, slides shrink so 0.2 of the next slide
     is visible inside the visible area (e.g. 4 columns → 4.2 slides visible).
     The .--no-peek variant resets it to 0 for an exact fit. */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) {
    --peek-fraction: 0.2;
  }

  @container ax-tabbed-carousel (min-width: 750px) {
    .ax-tabbed-product-lists__fallback > .ax-tabbed-product-lists__slide,
    .ax-tabbed-product-lists__swiper swiper-slide {
      --section-slide-width: calc(
        (100% - var(--resource-list-column-gap) * (var(--column-count) - 1 + var(--peek-fraction, 0)))
          / (var(--column-count) + var(--peek-fraction, 0))
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  /* SSR fallback slide (horizontal flex row before Swiper init) */
  .ax-tabbed-product-lists__fallback > .ax-tabbed-product-lists__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Swiper-wrapped slide — takes the computed width */
  .ax-tabbed-product-lists__swiper swiper-slide {
    width: var(--slide-width);
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Inner slide div fills its parent (swiper-slide or fallback slot) */
  .ax-tabbed-product-lists__swiper swiper-slide > .ax-tabbed-product-lists__slide {
    width: 100%;
  }

  /* Swiper internal spacing + hover animation breathing room (same 16px as resource-list-carousel) */
  .ax-tabbed-product-lists__swiper {
    --swiper-theme-color: currentColor;
    display: block;
    width: 100%;
    margin-block: -16px;
    padding-block: 16px;
  }

  /* Swiper's internal shadow .swiper has overflow:hidden by default — it clips at the
     host's padded content edge instead of the host edge, eating the peek. Force visible
     so slides can extend through the padding area; the outer component's overflow-x:clip
     still clips at the viewport edge. Only when peek is active — in no-peek desktop we
     want the default clip so slides don't bleed over a side-by-side text block. */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek)
    .ax-tabbed-product-lists__swiper::part(container) {
    overflow: visible;
  }

  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__swiper::part(container) {
      overflow: visible;
    }
  }

  /* No peek: carousel stays within page-width, no peek room — desktop only */
  @media screen and (min-width: 750px) {
    .ax-tabbed-product-lists--no-peek {
      .ax-tabbed-product-lists__carousel {
        width: 100%;
        margin-inline: 0;
      }

      .ax-tabbed-product-lists__swiper,
      .ax-tabbed-product-lists__fallback {
        --peek-next-slide-size: 0px;
        padding-inline: 0;
        scroll-padding-inline: 0;
      }
    }
  }

  /* Peek: panels break out to full width so carousel can go edge-to-edge */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) > .ax-tabbed-product-lists__panels {
    grid-column: 1 / -1;
  }

  /* Peek: swiper inherits the page margin as padding, exposing next slide.
     scroll-padding-inline must mirror padding-inline — otherwise the SSR fallback's
     scroll-snap auto-scrolls past the leading padding on first paint (FOUC). */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) .ax-tabbed-product-lists__swiper,
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) .ax-tabbed-product-lists__fallback {
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
  }

  /* Mobile: always full bleed regardless of peek setting */
  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__panels {
      grid-column: 1 / -1;
    }

    .ax-tabbed-product-lists__swiper,
    .ax-tabbed-product-lists__fallback {
      padding-inline: var(--page-margin);
      scroll-padding-inline: var(--page-margin);
    }
  }

  /* Arrows: hover-overlay split on either side of the carousel — desktop only.
     The carousel itself catches pointer events on the buttons; the wrapper is
     pointer-events:none so it doesn't block hover states on slides. */
  .ax-tabbed-product-lists__arrows {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    z-index: var(--layer-raised);
    padding-inline: var(--padding-md);
  }

  .ax-tabbed-product-lists__carousel:hover .ax-tabbed-product-lists__arrows,
  .ax-tabbed-product-lists__carousel:focus-within .ax-tabbed-product-lists__arrows {
    opacity: 1;
  }

  .ax-tabbed-product-lists__arrows .slideshow-control {
    position: static;
    margin: 0;
    animation: none !important;
    pointer-events: auto;
    opacity: 1;
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0 var(--padding-xs);
  }

  .ax-tabbed-product-lists__arrows .slideshow-control[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__arrows {
      display: none;
    }
  }
/* END_SECTION:ax-tabbed-product-lists */

/* START_SECTION:ax-team-gallery (INDEX:18) */
.ax-team-gallery__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding-inline: var(--page-margin);
  }

  .ax-team-gallery__title {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
  }

  .ax-team-gallery__title > :first-child {
    margin-block: 0;
  }

  .ax-team-gallery__superscript {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--lg);
    line-height: 1;
  }

  /* Visual preset override: keeps the richtext tag (SEO) but restyles it with the
     chosen --font-{preset}-- tokens (visual class independent of the HTML tag). */
  .ax-team-gallery__title--styled :is(h1, h2, h3, h4, h5, h6, p) {
    font-family: var(--ax-heading-family);
    font-style: var(--ax-heading-style);
    font-weight: var(--ax-heading-weight);
    font-size: var(--ax-heading-size);
    line-height: var(--ax-heading-line-height);
    letter-spacing: var(--ax-heading-letter-spacing);
    text-transform: var(--ax-heading-case);
  }

  .ax-team-gallery__description {
    max-width: var(--narrow-content-width);
  }

  .ax-team-gallery__description > :first-child {
    margin-block-start: 0;
  }

  .ax-team-gallery__description > :last-child {
    margin-block-end: 0;
  }

  /* Scattered band — same construction as sections/footer-images.liquid:
     flex row, bottom-aligned, overflow hidden (masks the protruding bottoms),
     vw widths + per-item left/rotate/bottom. 6 photos (a 12deg one inserted
     as #3). Each photo has an 8px radius. */
  .ax-team-gallery__photos {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }

  .ax-team-gallery__photo {
    position: relative;
    flex-shrink: 0;
    margin: 0;
  }

  .ax-team-gallery__media {
    block-size: 100%;
    overflow: hidden;
    border-radius: 8px; /* Axome - per design */
  }

  .ax-team-gallery__photo-img,
  .ax-team-gallery__media .placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter var(--animation-values);
  }

  .ax-team-gallery__photo:hover .ax-team-gallery__photo-img {
    filter: grayscale(0);
  }

  .ax-team-gallery__caption {
    position: absolute;
    inset-block-end: calc(100% + var(--gap-2xs));
    inset-inline-end: 0;
    transform: rotate(var(--caption-rotate, 0deg));
    transform-origin: right bottom;
    text-align: right;
    font-family: var(--font-accent--family);
    font-weight: var(--font-accent--weight);
    font-size: 1.6875rem; /* Axome - 27px per design */
    line-height: 1;
    white-space: nowrap;
  }

  /* Mobile — horizontal scroll, lighter rotations */
  @media screen and (max-width: 749px) {
    .ax-team-gallery__photos {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      gap: var(--gap-lg);
      padding-inline: var(--page-margin);
    }
    .ax-team-gallery__photos::-webkit-scrollbar { display: none; }
    .ax-team-gallery__photo { inline-size: 48vw; aspect-ratio: 220 / 252; }
    .ax-team-gallery__photo--1 { inline-size: 52vw; aspect-ratio: 263 / 301; }
    .ax-team-gallery__photo--2 { transform: rotate(-8deg); }
    .ax-team-gallery__photo--3 { transform: rotate(12deg); }
    .ax-team-gallery__photo--4 { transform: rotate(-3deg); }
    .ax-team-gallery__photo--5 { transform: rotate(-3deg); }
    .ax-team-gallery__photo--6 { transform: rotate(12deg); }
  }

  /* Desktop — design ref 1440px; mirrors footer-images values, 6 photos */
  @media screen and (min-width: 750px) {
    .ax-team-gallery__header {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--gap-3xl);
    }

    .ax-team-gallery__photos {
      padding-inline-start: 2.78vw; /* 40 / 1440 */
    }

    .ax-team-gallery__photo--1 {
      inline-size: 16vw;
      aspect-ratio: 263 / 301;
      bottom: -60px;
    }
    .ax-team-gallery__photo--2 {
      inline-size: 13.5vw;
      aspect-ratio: 220 / 252;
      left: -5vw;
      transform: rotate(-21deg);
      bottom: -93px;
    }
    /* New image inserted after the second one — 12deg */
    .ax-team-gallery__photo--3 {
      inline-size: 12.5vw;
      aspect-ratio: 220 / 252;
      left: -1.5vw;
      transform: rotate(12deg);
      bottom: -70px;
    }
    .ax-team-gallery__photo--4 {
      inline-size: 13.5vw;
      aspect-ratio: 220 / 252;
      left: 3vw;
      transform: rotate(-3deg);
      bottom: -100px;
    }
    .ax-team-gallery__photo--5 {
      inline-size: 18vw;
      aspect-ratio: 287 / 328;
      left: 4vw;
      transform: rotate(-3deg);
      bottom: -80px;
    }
    .ax-team-gallery__photo--6 {
      inline-size: 15vw;
      aspect-ratio: 245 / 280;
      left: 2vw;
      transform: rotate(12deg);
      bottom: -90px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-team-gallery__photo-img {
      transition: none;
    }
  }
/* END_SECTION:ax-team-gallery */

/* START_SECTION:cart-drawer (INDEX:20) */
.cart-drawer {
		/* Largeur fluide (maquette) : ratio 549/1440 = 38.125vw, plafonnée à 549px
       at viewports >= 1440px and clamped at 320px min for narrow tablet widths.
       Mobile (< 750px) overrides to 100dvw via the media query below. */
		--cart-drawer-width: clamp(20rem, 38.125vw, 34.3125rem);
		--cart-drawer-padding-inline: var(--padding-lg); /* 16px */
		--cart-drawer-padding-block: var(--padding-lg); /* 16px */
	}

	/* Boost specificity (.cart-drawer > .cart-drawer__dialog) so we win against
     base.css `.dialog-modal` rules — both are 0,1,0 otherwise.

     IMPORTANT: do NOT scope these to `:modal`. The `:modal` pseudo-class is
     only true while the dialog is in the top layer. If the dialog is briefly
     demoted (e.g. during a morph that touches its attributes), styles
     scoped to `:modal` disappear → the dialog falls back to the browser's
     default `<dialog>` styling (centered, content-sized) → visible "close
     + reopen" flash when modality is restored. Faguo applies these styles
     unscoped; we do the same. */
	.cart-drawer .cart-drawer__dialog {
		position: fixed;
		inset: 0 0 0 auto;
		overflow: hidden;
		border: 0;
		border-radius: 0;
		width: var(--cart-drawer-width);
		max-width: 100vw;
		max-height: 100dvh;
		height: 100%;
		height: 100dvh;
		margin: 0 0 0 auto;
		padding: 0;
		border-left: 0;
		box-shadow: var(--shadow-drawer);
		background-color: var(--color-background);
		color: var(--color-foreground);
		overflow-y: hidden;
	}

	@media screen and (max-width: 749px) {
		.cart-drawer .cart-drawer__dialog {
			width: 100vw;
			width: 100dvw;
			max-width: 100vw;
			max-width: 100dvw;
			padding: 0;
			border-left: 0;
		}
	}

	/* Frosted-glass overlay — Figma spec. Native ::backdrop only renders
     while the dialog is in the top layer (`:modal`). The rAF defer in
     #onLineItemRemove keeps the dialog modal through the filled→empty
     transition, so this stays visible. */
	.cart-drawer .cart-drawer__dialog::backdrop {
		background-color: rgb(255 255 255 / 0.3);
		backdrop-filter: blur(22.5px);
		-webkit-backdrop-filter: blur(22.5px);
	}

	.cart-drawer__inner {
		height: 100%;
		overflow: hidden;
	}

	.cart-items-component {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* ─── Header ──────────────────────────────────────────────
     "Panier" heading + count bubble on left, close X on right.
     Sticky inside the scrolling content area. */
	.cart-drawer .cart-drawer__header {
		border-bottom: 1px solid rgb(0 0 0 / 0.2);
		background-color: var(--color-background);
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: var(--cart-drawer-padding-block) var(--cart-drawer-padding-inline);
		position: sticky;
		top: 0;
		z-index: var(--layer-raised);
	}

	.cart-drawer__heading-row {
		display: flex;
		align-items: center;
		gap: var(--gap-sm);
	}

	.cart-drawer__heading {
		font-family: var(--font-heading--family);
		font-size: 1.125rem; /* 18px — Figma H4 */
		font-weight: 500;
		line-height: 1.1;
		color: var(--color-foreground);
		margin: 0;
	}

	.cart-drawer__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.5rem;
		height: 1.5rem;
		padding-inline: var(--padding-3xs);
		border-radius: var(--style-border-radius-50);
		background-color: var(--color-foreground);
		color: var(--color-background);
		font-family: var(--font-heading--family);
		font-size: 0.875rem; /* 14px */
		font-weight: 500;
		line-height: 1;
	}

	.cart-drawer__close-button {
		/* base.css .close-button sets position: fixed which yanks the button out
       of the header's flex flow — force it back inline so it aligns with the
       "Panier" heading via .cart-drawer__header { align-items: center }. */
		position: static;
		flex-shrink: 0;
		width: auto;
		height: auto;
		min-height: 0;
		white-space: nowrap;
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		color: var(--color-foreground);
		cursor: pointer;
	}

	.cart-drawer__close-button .svg-wrapper,
	.cart-drawer__close-button svg {
		width: 1.5rem; /* 24px icon */
		height: 1.5rem;
		display: block;
	}

	/* ─── Scrollable content area (items + upsell) ──────────── */
	.cart-drawer__content {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-height: 0;
		background-color: var(--color-background);
		overflow-y: auto;
		/* clip the upsell carousel's negative-margin break-out so it doesn't
       add a horizontal scrollbar — the peek of the next slide remains
       visible because it sits inside the right-side padding zone. */
		overflow-x: hidden;
		gap: var(--padding-2xl); /* 24px between items list and cross-sell section */
		/* Disable scroll-hint mask — the upsell carousel's overflow triggers a
		   horizontal mask that clips the right edge of line items. */
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	.cart-drawer__items {
		display: flex;
		flex-direction: column;
		/* Pousse réassurance + upsell vers le bas (contre le footer résumé) : la
		   liste d'items occupe l'espace disponible, l'upsell reste collé en bas. */
		flex: 1 1 auto;
	}

	/* ─── cart-products overrides (Figma layout) ──────────────
     We can't modify the cart-products snippet, so we scope every override
     under .cart-drawer__content to avoid leaking into the main cart page. */
	.cart-drawer__content .cart-items__wrapper {
		padding: 0;
	}

	.cart-drawer__content .cart-items {
		margin: 0;
	}

	/* Break out of the native <table> layout so we can use grid on rows.
     cart-products renders <table>/<colgroup>/<tr>/<td> which constrains
     grid-template-columns. Forcing block displays neutralises the table layout. */
	.cart-drawer__content .cart-items__table,
	.cart-drawer__content .cart-items__table > tbody {
		display: block;
		border-collapse: separate;
		border-spacing: 0;
		width: 100%;
	}

	.cart-drawer__content .cart-items__table colgroup,
	.cart-drawer__content .cart-items__table col {
		display: none;
	}

	/* cart-products already sets `display: grid` + `grid-area` on each cell.
     We redefine grid-template so price sits BELOW title (Figma).
     1fr spacer rows top & bottom absorb free space → right column is
     vertically centered relative to the 114px image height (Figma node
     4301-3826). align-content: center alone doesn't work because the
     media cell spans all rows and forces the tracks to fill 114px. */
	.cart-drawer__content .cart-items__table-row,
	.cart-drawer__content .cart-items__table-row--full-width-variants {
		position: relative;
		grid-template-columns: 5.5rem auto minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto auto;
		grid-template-areas:
			'media .        .'
			'media details  details'
			'media quantity unit_price'
			'media error    error'
			'pills  pills    pills';
		column-gap: var(--padding-2xl);
		row-gap: 0;
		min-height: 5.5rem; /* 88px — image carrée */
		padding-bottom: var(--padding-2xl);
		margin-bottom: 0;
		border-bottom: 1px solid rgb(0 0 0 / 0.2);
	}

	.cart-drawer__content .cart-items__table-row:last-child {
		margin-block-end: 0;
	}

	/* Hide the table header row (visually-hidden TH cells) */
	.cart-drawer__content .cart-items__table thead {
		display: none;
	}

	/* Price BELOW title, same column, left-aligned (snippet has text-align: end) */
	.cart-drawer__content .cart-items__price {
		justify-self: start;
		text-align: start;
		padding: 0;
	}

	/* Maquette : quantité (gauche) + prix (droite) même rangée ; Remove flotte à droite, centré */
	.cart-drawer__content .cart-items__quantity {
		align-self: center;
		justify-self: start;
	}
	.cart-drawer__content .cart-items__remove {
		position: absolute;
		/* Centré sur le milieu de l'image (88px → 44px), donc aligné au contenu et
		   pas affecté par la rangée pills en dessous ni par height:auto (L688). */
		top: 35%;
		transform: translateY(-50%);
		right: 1rem;
	}
	/* Maquette : prix unitaire avec compare_at barré + prix soldé ; on masque le total de ligne. */
	.cart-drawer__content .cart-items__unit-price-wrapper {
		display: flex;
		align-items: baseline;
		align-self: center;
		justify-self: start;
		gap: var(--gap-xs);
		margin-left: -8px;
	}
	.cart-drawer__content .cart-items__unit-price-wrapper > div {
		display: flex;
		flex-direction: row-reverse;
		align-items: baseline;
		justify-content: flex-end;
		gap: var(--gap-xs);
	}
	/* Axome - Prix barré en noir : override l'alpha 70% hérité de .cart-items__details (même rendu que la fiche produit) */
	.cart-drawer__content .cart-items__unit-price-wrapper .compare-at-price {
		color: var(--color-foreground);
		text-decoration: line-through;
	}
	.cart-drawer__content .cart-items__price {
		display: none;
	}

	/* Axome - Pills méta sur leur propre rangée, pleine largeur sous l'item (maquette) */
	.cart-drawer__content .cart-items__meta-pills {
		grid-area: pills;
		margin-block-start: var(--padding-sm);
	}

	/* Item image — 88×114px with rounded corners (Figma node 4301-3826).
     Override the inherited aspect-ratio so the container matches the
     image height exactly (the parent rule sets 0.8/1 → 88×110). */
	.cart-drawer__content .cart-items__media,
	.cart-drawer__content .cart-items__media-container {
		width: 5.5rem; /* 88px */
		min-width: 5.5rem;
		max-width: 5.5rem;
		height: 5.5rem; /* 88px — image carrée 1:1 */
		aspect-ratio: 1 / 1;
		border-radius: 8px;
		overflow: hidden;
		padding: 0;
	}

	.cart-drawer__content .cart-items__media-image {
		width: 5.5rem; /* 88px */
		height: 5.5rem; /* 88px — carré 1:1 */
		border-radius: 8px; 
		object-fit: cover;
		display: block;
	}

	/* Details column — title + price + quantity controls */
	.cart-drawer__content .cart-items__details {
		padding-inline-start: var(--padding-lg); /* 16px gap from image */
		padding-block: 0;
	}

	.cart-drawer__content .cart-items__product-info,
	.cart-drawer__content .cart-items__title {
		font-family: var(--font-paragraph--family);
		font-size: var(--font-size--sm); /* 14px */
		font-weight: 400;
		line-height: var(--line-height--body-normal); /* 20px */
		letter-spacing: -0.0125em;
		color: var(--color-foreground);
		margin: 0;
	}

	.cart-drawer__content .cart-items__title {
		text-decoration: none;
	}

	.cart-drawer__content .cart-items__variants-wrapper,
	.cart-drawer__content .cart-items__variants {
		margin: 0;
		padding: 0;
	}

	.cart-drawer__content .cart-items__variant,
	.cart-drawer__content .cart-items__property {
		font-size: var(--font-size--xs); /* 12px */
		line-height: 1.2;
		opacity: 0.6;
	}

	/* Price below title — same 14px, regular weight */
	.cart-drawer__content .cart-items__price,
	.cart-drawer__content .cart-items__price * {
		font-family: var(--font-paragraph--family);
		font-size: var(--font-size--sm);
		font-weight: 400;
		line-height: var(--line-height--body-normal);
		letter-spacing: -0.0125em;
		color: var(--color-foreground);
	}

	/* Quantity controls row — selector left, "Retirer" link right */
	.cart-drawer__content .cart-items__quantity {
		padding: 0;
		width: 100%;
	}

	.cart-drawer__content .cart-items__quantity-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-lg);
		width: 100%;
		margin-top: 0; /* row-gap handled by grid on .cart-items__table-row */
	}

	/* Quantity selector — 100×32 with 6px radius border (Figma 4301-3833).
     Scope to `.cart-items__quantity .quantity-selector` to beat the
     snippet's `.cart-items__quantity .quantity-selector { height: auto }`
     rule (same specificity → cascade order makes snippet win otherwise). */
	.cart-drawer__content .cart-items__quantity quantity-selector-component,
	.cart-drawer__content .cart-items__quantity .quantity-selector {
		width: 4.5rem; /* 72px — maquette */
		min-width: 4.5rem;
		max-width: 5rem;
		height: 1.875rem; /* 30px — maquette */
		border: 1px solid var(--color-foreground);
		border-radius: 4px;
		box-shadow: none;
		background-color: transparent;
		padding: 0 var(--padding-2xs); /* 4px — resserré pour tenir dans 72px */
		gap: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cart-drawer__content .cart-items__quantity .quantity-selector input,
	.cart-drawer__content .cart-items__quantity .quantity-selector__input {
		background: transparent;
		border: 0;
		text-align: center;
		font-size: var(--font-size--xs); /* 12px */
		padding: 0;
		width: 1.5rem;
	}

	.cart-drawer__content .cart-items__quantity .quantity-selector button {
		background: transparent;
		border: 0;
		padding: 0;
		width: 1rem;
		height: 1rem;
		color: var(--color-foreground);
		box-shadow: none;
	}
	.cart-drawer__content .cart-items__quantity .quantity-selector button .svg-wrapper,
	.cart-drawer__content .cart-items__quantity .quantity-selector button svg {
		width: 0.625rem; /* 10px */
		height: 0.625rem;
		display: block;
	}
	/* Le glyphe + (viewBox 9) paraît plus dense que le trait − (viewBox 14) à taille égale → on le réduit pour équilibrer visuellement */
	.cart-drawer__content .cart-items__quantity .quantity-selector button[name='plus'] svg {
		width: 0.5rem; /* 8px */
		height: 0.5rem;
	}

	/* Remove button — show the visually-hidden "Retirer"/"Remove" text, hide the icon.
     Match base.css `.visually-hidden:not(:focus, :active)` specificity AND use
     !important to override its `position: absolute !important`. */
	.cart-drawer__content .cart-items__remove {
		width: auto;
		height: auto;
		min-height: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		border: 0;
		font-family: var(--font-paragraph--family);
		font-size: 0.75rem; /* 12px */
		line-height: 1;
		color: var(--color-foreground);
		text-transform: uppercase;
	}

	.cart-drawer__content .cart-items__remove .svg-wrapper,
	.cart-drawer__content .cart-items__remove svg {
		display: none;
	}

	.cart-drawer__content .cart-items__remove .visually-hidden:not(:focus, :active) {
		position: static !important;
		overflow: visible !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		clip: auto !important;
		clip-path: none !important;
		white-space: normal !important;
	}

	/* Visual feedback while the row is being removed (component-cart-items.js
     adds `.removing` after the user clicks). Just fade the button — no
     infinite spinner here: `onAnimationEnd(row, { subtree: true })` waits for
     EVERY descendant animation, so an `infinite` keyframe would block the
     row's removal forever (the row stays in DOM, height 0, invisible). */
	.cart-drawer__content .cart-items__table-row.removing .cart-items__remove {
		pointer-events: none;
		opacity: 0.5;
	}

	/* ─── Summary footer (Total + code promo + accelerated + CTA) */
	.cart-drawer__summary {
		--cart-drawer-summary-padding: var(--cart-drawer-padding-block) var(--cart-drawer-padding-inline);

		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: var(--cart-drawer-summary-padding);
		background-color: var(--color-background);
		border-top: var(--style-border-width) solid var(--color-border);
	}

	.cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
		border-block-start: none;
		padding-block-start: 0;
	}

	/* ─── Empty cart state ──────────────────────────────────── */
	.cart-drawer--empty .cart-drawer__dialog {
		display: flex;
		flex-direction: column;
	}

	.cart-drawer__content--empty {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-block: var(--padding-lg);
		overflow: hidden;
	}

	.cart-drawer__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap-lg);
		text-align: center;
		max-width: 20rem;
	}

	/* Wrapper locks the slot at 120 × (inline aspect-ratio) before the image
     loads — guarantees zero CLS during lazy load, broken image, or empty/full
     view transitions. Image fills it via object-fit: contain. */
	.cart-drawer__empty-image-wrapper {
		flex-shrink: 0;
		width: 7.5rem; /* 120px */
		max-width: 100%;
		overflow: hidden;
	}

	.cart-drawer__empty-image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.cart-drawer__empty-heading {
		font-family: var(--font-heading--family);
		font-size: 2rem; /* 32px — Figma */
		font-weight: 400;
		line-height: 1;
		color: var(--color-foreground);
		margin: 0;
	}

	.cart-drawer__empty-description {
		font-family: var(--font-paragraph--family);
		font-size: 1rem; /* 16px — Figma */
		line-height: 1.25; /* 20px */
		letter-spacing: -0.0125em;
		color: var(--color-foreground);
		margin: 0;
	}

	.cart-drawer__empty-cta {
		width: fit-content;
	}

	/* Allow the cart-discount form to size correctly inside the drawer */
	.cart-actions summary {
		padding-inline: 0;
		padding-block: var(--padding-2xs);
		line-height: 1.2;
		min-height: var(--minimum-touch-target);
	}

	.cart-drawer__summary .cart-note {
		@media screen and (min-width: 750px) {
			margin-block-start: var(--margin-3xs);
		}
	}

	.cart-drawer__items .cart-items__table-row {
		padding-bottom: var(--padding-lg);
		padding-inline: var(--padding-lg);
		margin-bottom: var(--padding-lg);
	}	
	
	.cart-drawer__items .cart-items__table-row:first-child {
		padding-top: var(--padding-lg);
	}

	.cart-drawer__items .cart-items__table-row:last-child {
		border-bottom: none;
		padding-block-end: 0;
		margin-block-end: 0;
	}

	/* Empty-cart view-transition — simple crossfade only.
     The previous setup (scale 0.92, translate 128px, blur) made the drawer
     look like it was closing-then-reopening when the last item was removed.
     Now: just fade the old content out and the new content in, both pinned
     to the drawer (no scale, no slide, no blur). The drawer itself stays
     visually anchored — only the items / empty content swap. */
	@media screen and (prefers-reduced-motion: no-preference) {
		html:active-view-transition-type(empty-cart-drawer) {
			.cart-items-component {
				view-transition-name: cart-drawer-content;
			}
		}
	}

	::view-transition-old(cart-drawer-content) {
		animation: cart-contents-fade-out var(--animation-speed) var(--animation-easing) forwards;
	}

	::view-transition-new(cart-drawer-content) {
		animation: cart-contents-fade-in var(--animation-speed) var(--animation-easing) forwards;
	}

	@keyframes cart-contents-fade-out {
		to {
			opacity: 0;
		}
	}

	@keyframes cart-contents-fade-in {
		from {
			opacity: 0;
		}
	}

	/* ─── Upsell carousel (section block "upsell") ─────────────
     Migrated inline from blocks/_cart-drawer-upsell.liquid. */
	.cart-drawer-upsell {
		/* Sticky en bas (comme le résumé) : reste épinglé pendant le scroll des items */
		position: sticky;
		bottom: 0;
		z-index: 1;
		background: var(--color-background);
		display: flex;
		flex-direction: column;
		gap: var(--gap-lg);
		padding: var(--padding-lg) 0;
		border-top: var(--style-border-width) solid var(--color-border);
	}

	/* Hide the whole block when it has no slides at all (post-init or SSR empty) */
	.cart-drawer-upsell:not(:has(.cart-drawer-upsell__slide)):not(:has(swiper-slide)) {
		display: none;
	}

	.cart-drawer-upsell__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-md);
		padding: 0 var(--padding-lg) var(--padding-md);
		border-bottom: var(--style-border-width) solid var(--color-border);
	}

	.cart-drawer-upsell__heading {
		font-family: var(--font-heading--family);
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 1.1;
		color: var(--color-foreground);
		margin: 0;

		@media screen and (max-width: 749px) {
			font-size: 14px;
		}
	}

	/* Swipe only — pas de flèches (maquette) */
	.cart-drawer-upsell__arrows {
		display: none;
	}

	/* Hide arrows on mobile: touch users swipe. */
	@media screen and (max-width: 749px) {
		.cart-drawer-upsell__arrows {
			display: none;
		}
	}

	/* 40px square for all shape variants */
	.cart-drawer-upsell__arrows .slideshow-control {
		width: 2.5rem;
		height: 2.5rem;
		transition: border-color var(--animation-speed) var(--animation-easing);
	}

	.cart-drawer-upsell__arrows .slideshow-control[disabled] {
		cursor: default;
	}

	.cart-drawer-upsell__arrows .slideshow-control .svg-wrapper {
		width: 1rem;
		height: 1rem;
	}

	/* Products container — break out of drawer right padding so peek is visible.
	   overflow: hidden clips slides that scroll past the left edge cleanly, while
	   the negative margin keeps the right peek within bounds.
	   The mask fades the right edge for the carousel peek. */
	.cart-drawer-upsell__products {
		position: relative;
		min-width: 0;
		overflow: hidden;
		padding-inline: var(--cart-drawer-padding-inline, 1.5rem);
		/* mask-image set dynamically by cart-drawer-upsell.js #syncMask() */
	}

	.cart-drawer-upsell__swiper {
		width: 100%;
		display: block;
	}

	.cart-drawer-upsell__swiper::part(container) {
		overflow: visible;
	}

	.cart-drawer-upsell__swiper[init='false'] {
		display: none;
	}

	/* SSR fallback — 2-up grid prevents layout collapse before init */
	.cart-drawer-upsell__fallback {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-sm);
	}

	.cart-drawer-upsell__slide {
		box-sizing: border-box;
		min-width: 0;
		display: flex;
		width: 100%;
	}

	.cart-drawer-upsell__slide > product-card-horizontal {
		width: 100%;
	}

	.cart-drawer-upsell__swiper swiper-slide {
		box-sizing: border-box;
		height: auto;
		display: flex;
	}

	/* Horizontal product card — full stylesheet inlined here.
     The snippet ships its own stylesheet block, but in this slide context
     the Shopify CSS bundler doesn't reliably pick it up, so we duplicate. */
	product-card-horizontal {
		--product-card-horizontal-add-size: 1.125rem;

		position: relative;
		display: flex;
		align-items: center;
		gap: var(--gap-lg); /* image ↔ texte */
		padding: 0 var(--padding-lg) 0 0; /* place pour le séparateur droit */
		border: 0;
		border-right: 1px solid #c0bbb4; /* séparateur entre cartes (maquette) */
		background-color: transparent;
		min-width: 0;
		box-sizing: border-box;
	}

	product-card-horizontal .product-card-horizontal__link {
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;
	}

	/* Image stretches to card height with Figma aspect-ratio 162/209.75 */
	product-card-horizontal .product-card-horizontal__media {
		position: relative;
		flex-shrink: 0;
		align-self: center;
		width: 5rem; /* 80px */
		aspect-ratio: 1 / 1; /* carré (client) */
		overflow: hidden;
		border-radius: var(--style-border-radius-xs);
		background-color: rgb(0 0 0 / 0.04);
	}

	product-card-horizontal .product-card-horizontal__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	product-card-horizontal .product-card-horizontal__placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	product-card-horizontal .product-card-horizontal__placeholder svg {
		width: 100%;
		height: 100%;
	}

	/* Text block vertically centered next to image; + button bottom-right */
	product-card-horizontal .product-card-horizontal__text {
		flex: 1 1 auto;
		align-self: center;
		display: flex;
		flex-direction: column;
		gap: var(--gap-3xs);
		min-width: 0;
	}

	product-card-horizontal .product-card-horizontal__title {
		font-family: var(--font-body--family);
		font-size: var(--font-size--sm);
		font-weight: 400;
		line-height: 1.2;
		color: var(--color-heading);
		letter-spacing: -0.0125rem;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	product-card-horizontal .product-card-horizontal__price .price {
		font-size: var(--font-size--xs);
		font-weight: 400;
		color: rgb(0 0 0 / 0.7); /* = couleur prix line-items */
		line-height: 1;
		margin: 0;
	}

	product-card-horizontal .product-card-horizontal__price .price-item--sale.price {
		font-weight: 500;
	}

	product-card-horizontal .product-card-horizontal__price .compare-at-price {
		font-size: var(--font-size--xs);
		font-weight: 400;
		color: rgb(0 0 0 / 0.7); /* = compare-at des line-items */
		opacity: 0.6;
		text-decoration-line: line-through;
		text-decoration-thickness: 1px;
	}

	product-card-horizontal .product-card-horizontal__price .price__sale:not(.price__hidden) {
		display: flex;
		align-items: baseline;
		gap: var(--gap-2xs);
	}

	/* + button anchored bottom-right of card */
	product-card-horizontal .product-card-horizontal__form {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		align-self: flex-end;
		position: relative;
		z-index: 2;
	}

	product-card-horizontal .product-card-horizontal__form form {
		display: inline-flex;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	product-card-horizontal .product-card-horizontal__add {
		--icon-stroke-width: 1.75;

		position: relative;
		overflow: hidden;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--product-card-horizontal-add-size);
		height: var(--product-card-horizontal-add-size);
		min-width: 0;
		min-height: 0;
		padding: 0;
		border: none;
		border-radius: var(--style-border-radius-card);
		background-color: var(--color-violet);
		color: var(--color-background);
		cursor: pointer;
		box-sizing: border-box;
		transition: opacity var(--animation-speed) var(--animation-easing);
	}

	product-card-horizontal .product-card-horizontal__add:hover,
	product-card-horizontal .product-card-horizontal__add:focus-visible {
		opacity: 0.85;
	}

	product-card-horizontal .product-card-horizontal__add .svg-wrapper {
		display: inline-flex;
		width: 0.625rem;
		height: 0.625rem;
	}

	product-card-horizontal .product-card-horizontal__add svg {
		width: 100%;
		height: 100%;
	}

	/* Scale down global spinner to fit 18px button (Shopify CSS bundler
     doesn't reliably pick up the snippet's stylesheet in this context) */
	product-card-horizontal .product-card-horizontal__add .add-to-cart__loading,
	product-card-horizontal .product-card-horizontal__add .add-to-cart__added {
		width: 100%;
		height: 100%;
	}

	product-card-horizontal .product-card-horizontal__add .add-to-cart__spinner {
		width: 0.625rem;
		height: 0.625rem;
		border-width: 1.5px;
	}

	product-card-horizontal .product-card-horizontal__add .add-to-cart__added-icon {
		width: 0.625rem;
		height: 0.625rem;
	}

	product-card-horizontal .product-card-horizontal__add[data-state='loading'] .product-card-horizontal__add-icon,
	product-card-horizontal .product-card-horizontal__add[data-added='true'] .product-card-horizontal__add-icon {
		opacity: 0;
	}

	/* Non-sale prices in light weight */
	.cart-drawer-upsell__slide .price--container:not(.price--container-on-sale) .price {
		font-weight: 300;
	}

	/* Axome - Header maquette : icône + libellé, bouton CLOSE texte */
	.cart-drawer__heading {
		display: inline-flex;
		align-items: center;
		gap: var(--gap-sm);
		font-family: var(--font-body--family);
		font-size: var(--font-size--2xs); /* 12px */
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: -0.24px;
		line-height: 1;
	}
	.cart-drawer__heading svg {
		width: 0.875rem;
		height: 0.875rem;
	}
	.cart-drawer__count {
		display: none;
	}
	.cart-drawer__close-text {
		font-family: var(--font-body--family);
		text-transform: uppercase;
		font-size: var(--font-size--2xs); /* 12px */
		letter-spacing: -0.24px;
	}

	/* Axome - Bandeau réassurance (maquette) */
	.cart-drawer__reassurance {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gap-sm);
		padding-block: var(--padding-2xl);
		padding-inline: var(--padding-lg);
		border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	}
	.cart-drawer__reassurance-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap-2xs);
		text-align: center;
	}
	.cart-drawer__reassurance-icon {
		display: inline-flex;
	}
	.cart-drawer__reassurance-icon img,
	.cart-drawer__reassurance-icon svg {
		width: 1.25rem;
		height: 1.25rem;
		display: block;
	}
	.cart-drawer__reassurance-label {
		font-size: var(--font-size--xs);
		line-height: 1.3;
		opacity: 0.6;
	}
/* END_SECTION:cart-drawer */

/* START_SECTION:collection-links (INDEX:21) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }

    /* Badge layout: same wrapping list as 'text', but each link is a pill with body-size text */
    &[layout='badge'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: var(--gap-sm) var(--gap-md);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }

      .collection-links__link {
        align-items: center;
        font-size: var(--font-size--paragraph);
        padding: var(--padding-xs) var(--padding-md);
        border-radius: var(--style-border-radius-pills);
        background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
        transition: background-color var(--animation-speed) var(--animation-easing);

        &[aria-current='true'] {
          background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
        }
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:collection-list (INDEX:22) */
.collection-list {
    /* Full-width gutters: 24px desktop / 16px mobile */
    &.section--full-width {
      padding-inline: var(--padding-2xl);

      @media screen and (max-width: 749px) {
        padding-inline: var(--padding-lg);
      }
    }
  }

  .collection-list__title {
    margin: 0 0 var(--padding-2xl);
  }

  /* Desktop default: pure grid (when blocks fit in N columns). */
  @media screen and (min-width: 750px) {
    .collection-list:not(.collection-list--carousel-desktop) .collection-list__grid {
      display: grid;
      grid-template-columns: repeat(var(--collection-list-cols, 3), minmax(0, 1fr));
      column-gap: var(--collection-list-col-gap);
      row-gap: var(--collection-list-row-gap);
    }

    /* Desktop carousel: scroll-snap + arrows when blocks > cols. Cards keep
       their 1/N width so the visible row matches the configured grid layout
       and overflow scrolls horizontally. */
    .collection-list--carousel-desktop .collection-list__grid {
      display: flex;
      flex-wrap: nowrap;
      column-gap: var(--collection-list-col-gap);
      overflow-x: auto;
      overflow-y: visible;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: 0;
    }

    .collection-list--carousel-desktop .collection-list__grid::-webkit-scrollbar {
      display: none;
    }

    .collection-list--carousel-desktop .collection-list__item {
      flex: 0 0 calc(
        (100% - (var(--collection-list-cols, 3) - 1) * var(--collection-list-col-gap))
          / var(--collection-list-cols, 3)
      );
      scroll-snap-align: start;
    }

    /* Arrows: positioned at the far right of the carousel header area, just
       above the cards. Hidden on mobile (the carousel uses scroll-snap there). */
    .collection-list__arrows {
      display: flex;
      gap: var(--padding-xs);
      justify-content: flex-end;
      margin-block-end: var(--padding-2xl);
    }

    .collection-list__arrows .slideshow-control {
      position: static;
      margin: 0;
      animation: none !important;
      pointer-events: auto;
      opacity: 1;
      min-height: 2.5rem;
      min-width: 2.5rem;
      padding: 0 var(--padding-xs);
    }

    .collection-list__arrows .slideshow-control[disabled] {
      opacity: 0.3;
      pointer-events: none;
    }

    /* When the carousel is active, render the arrows ABOVE the grid by
       reordering them via flex on the section. */
    .collection-list--carousel-desktop {
      display: flex;
      flex-direction: column;
    }

    .collection-list--carousel-desktop .collection-list__title {
      order: 0;
    }

    .collection-list--carousel-desktop .collection-list__arrows {
      order: 1;
    }

    .collection-list--carousel-desktop .collection-list__grid {
      order: 2;
    }
  }

  /* Container for cqw — section's inline size is the viewport width on
     full-width sections, so cqw inside descendants reflects the viewport. */
  .collection-list {
    container-type: inline-size;
    container-name: collection-list;
  }

  /* Mobile: horizontal scroll-snap carousel.
     - 1 or 2 full cards visible (controlled by --collection-list-cols-mobile)
     - 15% of the next card peeks at the right edge to signal scrollability
     - Full-bleed: breaks out of the section's gutter so the peek extends to
       the viewport edge */
  @media screen and (max-width: 749px) {
    .collection-list__grid {
      display: flex;
      flex-wrap: nowrap;
      column-gap: var(--collection-list-col-gap-mobile);
      overflow-x: auto;
      overflow-y: visible;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      /* Full-bleed: cancel the section's mobile gutter, then re-apply it as
         padding so cards start at the gutter and the trailing peek can extend
         past it. */
      margin-inline: calc(-1 * var(--padding-lg));
      padding-inline: var(--padding-lg);
      scroll-padding-inline: var(--padding-lg);
    }

    .collection-list__grid::-webkit-scrollbar {
      display: none;
    }

    /* Card width: at scroll-x = 0, card 1 starts at the left gutter (16px)
       and the 15% peek of the next card should reach exactly the right
       viewport edge. Solving:
         viewport = gutter + N*card + N*gap + 0.15*card
         card = (viewport - gutter - N*gap) / (N + 0.15) */
    .collection-list__item {
      flex: 0 0 calc(
        (100vw - var(--padding-lg) - var(--collection-list-cols-mobile) * var(--collection-list-col-gap-mobile))
          / (var(--collection-list-cols-mobile, 1) + 0.15)
      );
      scroll-snap-align: start;
    }
  }

  .collection-list__item {
    position: relative;
    width: 100%;

    /* Force 5:6 ratio on every card */
    .collection-card,
    .collection-card.collection-card--image-bg {
      aspect-ratio: 5 / 6;
      height: 100%;
    }
  }

  /* Inner is the positioning context for both image (absolute) and content. */
  .collection-list .collection-list__item .collection-card .collection-card__inner {
    position: relative;
    height: 100%;
  }

  /* Image / video wrapper — fills the card behind the content, rounded 8px,
     with a subtle bottom-fading dark overlay for text readability. */
  .collection-list__item .collection-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: var(--layer-base);
    border-radius: 8px;
  }

  .collection-list__item .collection-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 56.04%, rgb(0 0 0 / 0.3) 100%);
    pointer-events: none;
  }

  .collection-list__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }

  /* Content sits above the image overlay and fills the entire card (height/width
     100% are set globally on .collection-card__content). Use it as the flex
     container that positions title + button via the block's alignment settings.
     Padding (32/24) comes from the collection-card snippet. Text colour follows
     the section's color scheme. */
  .collection-list__item .collection-card__content {
    position: relative;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    justify-content: var(--content-v-align, flex-end);
    align-items: var(--content-h-align, flex-start);
    gap: var(--padding-lg);
    color: var(--color-foreground);
    text-align: var(--content-text-align, start);

    /* Tighter gap between title and CTA on mobile */
    @media screen and (max-width: 749px) {
      gap: var(--padding-xs);
    }
  }

  /* Sync text-align with horizontal alignment selection without :has() */
  .collection-list__item[style*='--content-h-align: center'] {
    --content-text-align: center;
  }

  .collection-list__item[style*='--content-h-align: flex-end'] {
    --content-text-align: end;
  }

  .collection-list__title-label {
    margin: 0;
    color: inherit;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* h2 size token */
    font-size: var(--font-size--h2);
    line-height: var(--line-height--heading-tight);
  }

  /* CTA button — width:fit-content prevents stretch under flex parent */
  .collection-list__cta {
    width: fit-content;
  }
/* END_SECTION:collection-list */

/* START_SECTION:featured-product (INDEX:27) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-images (INDEX:28) */
/* Normal flow: flex row, images bottom-aligned, overflow hidden clips top/bottom.
     Each image has a fixed width + aspect-ratio for height; horizontal placement
     uses position: relative + `left` offset relative to flex flow. */
  .footer-images__wrapper {
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding-left: 2.78vw; /* 40 / 1440 */
    margin-top: -60px;
  }

  .footer-images__item {
    position: relative;
    flex-shrink: 0;
  }

  .footer-images__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Desktop — design ref 1440px viewport, all values in vw to scale with viewport */

  /* Image 1 — visual at ~2.78vw from left (= padding) */
  .footer-images__item--1 {
    width: 18.26vw; /* 263 / 1440 */
    aspect-ratio: 263 / 301;
    bottom: -60px;
  }

  /* Image 2 — overlaps image 1 by ~7.08vw */
  .footer-images__item--2 {
    width: 15.28vw; /* 220 / 1440 */
    aspect-ratio: 220 / 252;
    left: -7.08vw; /* -102 / 1440 */
    transform: rotate(-21deg);
    bottom: -93px;
  }

  /* Image 3 */
  .footer-images__item--3 {
    width: 15.28vw;
    aspect-ratio: 220 / 252;
    left: 11.32vw; /* 163 / 1440 */
    transform: rotate(-3deg);
    bottom: -100px;
  }

  /* Image 4 */
  .footer-images__item--4 {
    width: 19.93vw; /* 287 / 1440 */
    aspect-ratio: 287 / 328;
    left: 12.85vw; /* 185 / 1440 */
    transform: rotate(-3deg);
    bottom: -80px;
  }

  /* Image 5 — ends ~4.58vw from right edge (66 / 1440) */
  .footer-images__item--5 {
    width: 17.01vw; /* 245 / 1440 */
    aspect-ratio: 245 / 280;
    left: 6.88vw; /* 99 / 1440 */
    transform: rotate(12deg);
    bottom: -90px;
  }

  /* Mobile — design ref 375px viewport, all values in vw to scale with viewport */
  @media screen and (max-width: 749px) {
    .footer-images__wrapper {
      padding-left: 5.33vw; /* 20 / 375 */
      margin-top: 0;
    }

    /* Image 1 — visual at ~5.33vw from left (= padding) */
    .footer-images__item--1 {
      width: 18.27vw; /* 68.5 / 375 */
      bottom: -20px;
    }

    /* Image 2 — visual at ~27.2vw */
    .footer-images__item--2 {
      width: 15.28vw; /* 57.3 / 375 */
      left: 3.6vw; /* 13.5 / 375 */
      bottom: -25px;
    }

    /* Image 3 — visual at ~43.2vw */
    .footer-images__item--3 {
      width: 15.28vw;
      left: 4.32vw; /* 16.2 / 375 */
      bottom: -30px;
    }

    /* Image 4 — visual at ~57.87vw */
    .footer-images__item--4 {
      width: 19.92vw; /* 74.7 / 375 */
      left: 3.71vw; /* 13.9 / 375 */
      bottom: -20px;
    }

    /* Image 5 — visual at ~76.5vw, ends at ~94.67vw (= ~5.33vw from right, mirror of left padding) */
    .footer-images__item--5 {
      width: 18.13vw; /* 68 / 375 */
      left: 2.45vw; /* 9.2 / 375 */
      bottom: -25px;
    }
  }
/* END_SECTION:footer-images */

/* START_SECTION:footer-utilities (INDEX:29) */
/* Axome - Footer utilities page margins: 20px mobile, 40px desktop */
  .section-footer-zone {
    --page-margin: 20px;

    @media screen and (min-width: 750px) {
      --page-margin: 40px;
    }
  }

  .utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 0.875rem;
    padding-inline: var(--page-margin);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
      font-size: 1rem;
    }
  }

  .utilities a {
    color: var(--color-white);
  }

  .utilities > * {
    text-align: left;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:30) */
/* Axome - Footer zone page margins: 20px mobile, 40px desktop */
  .section-footer-zone {
    --page-margin: 20px;

    @media screen and (min-width: 750px) {
      --page-margin: 40px;
    }
  }

  .footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap-mobile);
    align-items: start;
    padding-inline: var(--page-margin);

    @media screen and (min-width: 990px) {
      grid-template-columns: 1.5fr repeat(var(--footer-menu-count), minmax(0, auto)) 2fr;
      gap: var(--footer-gap);
    }
  }

  /* Brand column */
  .footer-brand {
    display: flex;
    flex-direction: column;
  }

  .footer-brand__heading {
    margin: 0;
  }

  .footer-brand__text {
    margin: 20px 0 0;
    font-size: 0.75rem;

    @media screen and (min-width: 750px) {
      font-size: 0.875rem;
    }
  }

  .footer-brand__partners {
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-lg);
  }

  .footer-brand__partner-link {
    display: inline-flex;
  }

  .footer-brand__partner-image {
    display: block;
    width: auto;
    height: 48px;
    max-width: 80px;
    object-fit: contain;
  }

  /* Menu columns */
  .footer-menu {
    margin: 0;
    width: fit-content;
    margin-right: 30px;
  }

  .footer-menu__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    gap: var(--gap-xs);
  }

  .footer-menu__summary::-webkit-details-marker {
    display: none;
  }

  .footer-menu__heading {
    font-size: 1rem;
    font-weight: var(--font-heading--weight);

    @media screen and (min-width: 750px) {
      font-size: 1.125rem;
    }
  }

  .footer-menu__icon {
    display: inline-flex;
    transition: transform var(--animation-values);
  }

  .footer-menu[open] .footer-menu__icon {
    transform: rotate(180deg);
  }

  .footer-menu__list {
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .footer-menu__item {
    font-size: 0.75rem;
    line-height: 1;

    @media screen and (min-width: 750px) {
      font-size: 0.875rem;
    }
  }

  /* Axome - Animated underline reveal on hover/focus (matches theme link hover) */
  .footer-menu__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.15em;
    transition: text-decoration-color var(--animation-values);
  }

  .footer-menu__link:hover,
  .footer-menu__link:focus-visible {
    text-decoration-color: currentcolor;
  }

  /* Desktop: always open, no toggle, no caret */
  @media screen and (min-width: 990px) {
    .footer-menu__summary {
      cursor: default;
    }

    .footer-menu__icon {
      display: none;
    }
  }

  /* Mobile: accordion full-width + dividers */
  @media screen and (max-width: 749px) {
    .footer-menu {
      width: 100%;
      margin-right: 0;
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .footer-menu:first-of-type {
      margin-block-start: 27px;
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .footer-menu__summary {
      padding-block: 16px;
    }
  }

  /* Newsletter column */
  .footer-newsletter {
    display: flex;
    flex-direction: column;
    margin-left: 100px;

    @media screen and (max-width: 749px) {
      margin-left: 0;
      margin-block-start: 32px;
    }
  }

  .footer-newsletter__heading {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-heading--weight);

    @media screen and (min-width: 750px) {
      font-size: 1.125rem;
    }
  }

  .footer-newsletter__text {
    margin-block-start: 8px;
    font-size: 0.75rem;

    @media screen and (min-width: 750px) {
      font-size: 0.875rem;
    }
  }

  .footer-newsletter__text > :first-child {
    margin-block-start: 0;
  }

  .footer-newsletter__text > :last-child {
    margin-block-end: 0;
  }

  .footer-newsletter__form {
    margin-block-start: 24px;
  }

  .footer-newsletter__input-group {
    display: flex;
    align-items: stretch;
    gap: var(--gap-xs);
  }

  .footer-newsletter__input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 var(--padding-lg);
    border: 1px solid var(--color-white);
    border-radius: 4px;
    background-color: transparent;
    color: var(--color-white);
    font-size: 0.75rem;

    @media screen and (min-width: 750px) {
      font-size: 0.875rem;
    }
  }

  .footer-newsletter__input::placeholder {
    color: var(--color-white);
    opacity: 1;
    transition: opacity var(--animation-values);
  }

  /* Axome - Dim the placeholder when the field is focused */
  .footer-newsletter__input:focus::placeholder {
    opacity: var(--opacity-50);
  }

  .footer-newsletter__button {
    height: 34px;
    padding: 0 var(--padding-xl);
    white-space: nowrap;
  }

  .footer-newsletter__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-block-start: var(--gap-xs);
  }

  .footer-newsletter__message-text {
    margin: 0;
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:31) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__text {
    letter-spacing: -0.015rem; /* -0.24px tracking on 12px */
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:32) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  /* Axome - Header & announcement bar share 16px page margins on mobile and desktop */
  #header-group {
    --page-margin: 16px;
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 1200px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    /* Active state triggered by sticky only (hover adds on top on hover-capable devices).
       Axome - Also forced while the menu drawer is open (via [data-menu-open], set by header-drawer.js)
       so the transparent header turns opaque instead of showing the hero behind the open menu, and
       stops following the scroll/sticky process. Reverts when the drawer closes. */
    &[transparent='not-sticky'][data-sticky-state='active'],
    &[data-menu-open] {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /* Hover-triggered active state — only on devices that actually support hover (prevents the state from sticking on mobile after a tap) */
    @media (hover: hover) {
      &:hover {
        --header-logo-display: unset;
        --header-logo-inverse-display: unset;
        --color-foreground: inherit;
        --color-foreground-rgb: inherit;
        --color-background: inherit;
        --color-background-rgb: inherit;
        --color-border: inherit;
        --color-border-rgb: inherit;
        --closed-underlay-height: 100%;
        --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
      }
    }

    /* Neutral transparent state: row colours inherit from body to blend over the hero image.
       On touch devices `:hover` is never true, so the selector effectively becomes `:not([data-sticky-state='active'])`. */
    &:not([data-sticky-state='active']):not(:hover) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }
  }

  /* Axome - Non-transparent header (every template except those with transparent mode enabled): mimic the sticky-active colour state.
     Without this, rows that are configured with a fully transparent scheme (e.g. scheme-6) would render their inline colours (white text) on top of the now-opaque underlay, becoming invisible. Inheriting from the root scheme keeps text readable. */
  .header:not([transparent]) .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When top row has transparent background, make it inherit colors from header component — on focus or sticky active (always),
     and on hover only on devices that really support it (avoids stuck hover on mobile after a tap). */
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='top'][data-sticky-state='active'] .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top,
  [data-transparent-color-scheme='both'][data-sticky-state='active'] .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  @media (hover: hover) {
    [data-transparent-color-scheme='top']:hover .header__row--top,
    [data-transparent-color-scheme='both']:hover .header__row--top {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }
  }

  /* Same for bottom row */
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='bottom'][data-sticky-state='active'] .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both'][data-sticky-state='active'] .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  @media (hover: hover) {
    [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
    [data-transparent-color-scheme='both']:hover .header__row--bottom {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  /* Axome - Mobile: reveal-on-scroll-up behaviour even when the theme setting is 'always'.
     Header stays `position: sticky` so transform on the inner header element animates smoothly.
     When scrolling down past the threshold, the header slides up out of view. */
  @media screen and (max-width: 1199px) {
    .header-section:has(> #header-component[sticky='always']) {
      position: sticky;
      top: -1px;
      z-index: var(--layer-sticky);
    }

    #header-component[sticky='always'] {
      transition: transform var(--animation-speed) var(--ease-out-cubic);
    }

    #header-component[sticky='always'][data-sticky-state='active'][data-scroll-direction='down'] {
      transform: translateY(-100%);
    }
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    /* Axome - Fallback to the :root scheme background so non-transparent headers (non-home templates) stay opaque even when color_scheme_top/bottom is fully transparent (e.g. scheme-6) */
    background: linear-gradient(
      var(--color-scheme-top-row, var(--color-background)) 0 var(--top-row-height),
      var(--color-scheme-bottom-row, var(--color-background)) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    /* Axome - The header's bottom row carries a 1px border that offsetHeight (and therefore
       --full-open-header-height) counts in, so the raw value sits ~1px below the panel's real
       bottom edge. Trim 1px off the visual backdrop + overlay so they hug the panel with no light
       seam (the submenu's own top/translateY use the raw value and cancel out — content unmoved). */
    --overlay-height: calc(var(--full-open-header-height) - 1px);

    height: var(--overlay-height);
    background: linear-gradient(
      var(--color-scheme-top-row, var(--color-background)) 0 var(--top-row-height),
      var(--color-scheme-bottom-row, var(--color-background)) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* Axome - Full-height dim overlay behind the open mega menu. Starts at the panel's bottom edge
     (--full-open-header-height, relative to the underlay's top) and extends down over the page,
     closing the panel visually in place of the old 1px bottom rule. It fades in/out with the panel
     (gated on the open <header-menu>) and never blocks pointer events — the menu closes on mouse-leave. */
  .header__underlay-open::before {
    content: '';
    position: absolute;
    inset-block-start: var(--overlay-height);
    inset-inline: 0;
    block-size: 100vh;
    /* Backdrop tone from the theme's dialog/modal token, a touch stronger than the 0.15 dialog dim. */
    background: rgb(var(--backdrop-color-rgb) / var(--opacity-30));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  {%- comment -%}
    Axome - Show the overlay only when an entry that actually has a mega menu is open. Gating on
    header-menu[aria-expanded] lit the overlay for plain entries too (header-menu.js flips its own
    aria-expanded on any hover), dimming the page with no panel behind it. Only mega-menu entries
    render aria-haspopup="true", so this keys the overlay to a real open panel.
  {%- endcomment -%}
  #header-component:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true']) .header__underlay-open::before {
    opacity: 1;
  }

  /* When top row has transparent background, swap the underlay to the opaque foreground-scheme colour on focus or sticky active (hover only on hover-capable devices) */
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='top'][data-sticky-state='active'],
  [data-transparent-color-scheme='both']:focus-within,
  [data-transparent-color-scheme='both'][data-sticky-state='active'] {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  @media (hover: hover) {
    [data-transparent-color-scheme='top']:hover,
    [data-transparent-color-scheme='both']:hover {
      :is(.header__underlay-open, .header__underlay-closed) {
        --color-scheme-top-row: var(--color-background);
      }
    }
  }

  /* Same treatment for the bottom row */
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='bottom'][data-sticky-state='active'],
  [data-transparent-color-scheme='both']:focus-within,
  [data-transparent-color-scheme='both'][data-sticky-state='active'] {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  @media (hover: hover) {
    [data-transparent-color-scheme='bottom']:hover,
    [data-transparent-color-scheme='both']:hover {
      :is(.header__underlay-open, .header__underlay-closed) {
        --color-scheme-bottom-row: var(--color-background);
      }
    }
  }

  /* Axome - Force the transparent header opaque while the menu drawer is open. Triggered on the
     [data-menu-open] attribute (set by header-drawer.js) rather than :focus-within (focus doesn't
     land in the header) or :has() (unreliable in some webviews). Reverts when the drawer closes. */
  [data-transparent-color-scheme='top'][data-menu-open] :is(.header__underlay-open, .header__underlay-closed),
  [data-transparent-color-scheme='both'][data-menu-open] :is(.header__underlay-open, .header__underlay-closed) {
    --color-scheme-top-row: var(--color-background);
  }

  [data-transparent-color-scheme='bottom'][data-menu-open] :is(.header__underlay-open, .header__underlay-closed),
  [data-transparent-color-scheme='both'][data-menu-open] :is(.header__underlay-open, .header__underlay-closed) {
    --color-scheme-bottom-row: var(--color-background);
  }

  /* Axome - Lock the header content (menu trigger, search, cart) to the opaque/readable colour while
     the menu drawer is open, on every page and regardless of the transparent/sticky/scroll state, so
     it can never flip to the over-hero light text. Mirrors the sticky-active row treatment. */
  .header[data-menu-open] .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      /* Axome - Same fallback as the main underlay rules so non-transparent templates keep an opaque top section */
      background: linear-gradient(
        var(--color-scheme-top-row, var(--color-background)) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different color scheme, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 1199px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 1200px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 1199px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 1200px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 1199px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 16px; /* Axome - 16px page margin on mobile header */

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 16px; /* Axome - 16px page margin on mobile header (drawer menu style) */

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* Axome - Custom header layout:
     - Top row: 5px padding-bottom
     - Bottom row (search): 16px padding all around
     - Two 1px #C0BBB4 dividers: below top row columns and below the bottom row */
  header-component.header .header__row--top .header__columns {
    --padding-block-end: 5px;
  }

  header-component.header .header__row--bottom .header__columns {
    --padding-block-start: 16px;
    --padding-block-end: 16px;
    padding-inline: 16px;
    min-height: 54px;
  }

  /* Axome - The bottom row only holds the search on mobile; drop the 5-column bookend grid so search sits on the left */
  @media screen and (max-width: 1199px) {
    header-component.header .header__row--bottom .header__columns {
      display: flex;
      align-items: center;
      grid-template-columns: none;
      grid-template-areas: none;
    }

    header-component.header .header__row--bottom search-button {
      grid-area: auto;
    }
  }

  header-component.header .header__row--bottom {
    border-block: 1px solid #c0bbb4;
  }

  /* Axome - QA fix: in the bottom row the search trigger only spanned its icon + label, so
     clicking the empty space beside "Search" did nothing. Stretch it across the full left
     column and keep the icon + label left-aligned, so the whole length of the search bar is
     clickable. */
  @media screen and (min-width: 1200px) {
    /* Axome - The bottom row defaults to two equal (1fr 1fr) columns, so the rating badge
       reserved half the row. Size the right column to its content instead, letting the search
       column (and therefore the clickable search area) take all remaining space. */
    header-component.header .header__row--bottom .header__columns {
      grid-template-columns: 1fr auto;
    }

    header-component.header .header__row--bottom .search-action {
      flex: 1;
      margin-inline: 0;
    }

    header-component.header .header__row--bottom .search-action .header-actions__action {
      width: 100%;
      justify-content: flex-start;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  /* Header logo ==================== */
  .header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 1199px) {
      padding: 0;
    }

    @media screen and (min-width: 1200px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 1200px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }

  /* Mobile drawer ================= */
  .header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 1200px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  /* Mega menu ===================== */
  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    letter-spacing: -0.015rem; /* -0.24px tracking on 12px labels */
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 1200px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    /* 8px each side = 16px gap between adjacent top-level entries on desktop */
    padding-inline: 8px;

    /* Axome - Below 1400px the nav gets tight; halve the inter-entry gap (4px → 8px between entries)
       so every entry keeps fitting on one row down to the 1200px mobile-drawer breakpoint. */
    @media screen and (max-width: 1399.98px) {
      padding-inline: 4px;
    }
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(
      100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)) +
        var(--submenu-extra-offset, 0px)
    );
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Axome - Push the submenu below the bottom row (search bar) when the menu lives in the top row.
     The offset equals the combined height of the rows below the top row; it resolves to 0 on
     single-row headers (where --top-row-height == --header-height). */
  [data-submenu-clears-bottom-row] {
    --submenu-extra-offset: calc(var(--header-height) - var(--top-row-height));
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  /* Axome - Redesigned mega menu: up to three equal-width zones separated by a 1px rule.
     Zone count (1/2/3) is driven by --mega-menu-zone-count from mega-menu-list.liquid. */
  .mega-menu {
    width: 100%;
  }

  .mega-menu__zones {
    /* 40px inner padding lives on each zone (no global panel padding) so the 1px
       separators run the full height and touch the panel top and bottom. */
    --mega-menu-zone-padding: 2.5rem; /* 40px */

    display: grid;
    grid-template-columns: repeat(var(--mega-menu-zone-count, 1), minmax(0, 1fr));
    width: 100%;
  }

  /* Remove the submenu's block padding for the redesigned panel so zones span its full height.
     No bottom rule: the panel is closed visually by the full-height underlay overlay behind it. */
  .menu-list__submenu-inner:has(.mega-menu__zones) {
    padding-block: 0;
  }

  .mega-menu__zone {
    min-width: 0;
    padding: var(--mega-menu-zone-padding);
  }

  .mega-menu__zone:first-child {
    padding-inline-start: 0;
  }

  .mega-menu__zone:last-child {
    padding-inline-end: 0;
  }

  /* Solo fallback: when the panel has no push-pair at all (zone--mid renders a single CTA),
     both push zones should look identical. Restore zone--last's inline-end padding so both
     zones carry symmetric 40px on every side → equal push widths with 40px of air around. */
  .mega-menu__zones:not(:has(.mega-menu__push-pair)) .mega-menu__zone--last {
    padding-inline-end: var(--mega-menu-zone-padding);
  }

  /* 1px separator between adjacent zones, spanning the full panel height */
  .mega-menu__zone + .mega-menu__zone {
    border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
  }

  /* Zone 1 — menu links. All entries are identical at rest (14px tiny token). On desktop hover
     each entry becomes the "headline": bold, full foreground colour, with the long button arrow
     growing in on the right. We don't surface the parent link title above the list. */
  .mega-menu__zone--links {
    display: flex;
    flex-direction: column;
  }

  .mega-menu__links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs); /* 8px between links */
    /* Match the link's font metrics so `1lh` below resolves to one entry's line height */
    font-size: var(--font-size--xs);
    line-height: var(--menu-child-font-line-height);
  }

  /* Every entry shares the "headline" flex layout so the hover state (bold + arrow) never reflows
     the row: title pinned left, the long arrow pinned right (hidden at rest via width:0).
     We also pin the typography to the --menu-child-* tokens so that entries carrying sub-links
     (`.mega-menu__link--parent`, e.g. the first one) render identically to the leaf entries at
     rest — without this they'd inherit the subdued --menu-parent-font-color (and a different
     --menu-parent-font-line-height, which would make parent rows a hair taller than leaf rows).
     This rule (0,2,0) outranks `.mega-menu__link--parent` (0,1,0), so all entries match. */
  .mega-menu__zone--links .mega-menu__link {
    display: flex;
    inline-size: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--font-size--xs); /* 14px desktop, override of the default .mega-menu__link rule */
    line-height: var(--menu-child-font-line-height); /* pin so parent & leaf rows share one height */
    color: var(--menu-child-font-color);
    padding: 0; /* default .mega-menu__link has padding 2xs 0; remove so the 16px flex gap is honest */
    text-transform: none; /* zone 1 entries stay in their natural case, regardless of the theme's --menu-child-font-case */
  }

  /* Hover / keyboard focus (desktop) — the entry becomes the "headline": bold, with full foreground
     colour so the long arrow (currentColor) stays crisp on any colour scheme. We pair :hover with
     :focus-visible (via :is(), which keeps the pseudo's specificity → 0,3,0) so keyboard users get
     the same affordance, matching the theme's `.button`/`.link` and top-level menu conventions. */
  .mega-menu__zone--links .mega-menu__link:is(:hover, :focus-visible) {
    font-weight: 700;
    color: var(--color-foreground);
  }

  /* Title + optional collection count, grouped left of the arrow. */
  .mega-menu__zone--links .mega-menu__link-text {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gap-2xs);
    min-inline-size: 0;
  }

  /* Collection product count — small, dimmed, sitting just after the title. It inherits the link's
     weight, so it follows the bold of the hover state automatically. */
  .mega-menu__zone--links .mega-menu__link-count {
    flex-shrink: 0;
    font-size: var(--font-size--2xs); /* 12px */
    opacity: var(--opacity-60);
  }

  /* Each entry carries the long .button arrow inlined as SVG (fill="currentColor"), so it tracks
     the link colour on any colour scheme. We size with `width`/`height` (the SVG presentation
     properties) — `inline-size` is ignored by the SVG viewport. The `preserveAspectRatio="xMaxYMid
     slice"` on the SVG (set in mega-menu-list.liquid) keeps the content at native 43×8 and anchors
     it right: width:0 at rest hides it; on hover it grows to 27px, line extending from the right,
     arrowhead pinned. Mirrors the `.button` mask animation. */
  .mega-menu__zone--links .mega-menu__link svg {
    flex-shrink: 0;
    width: 0; /* hidden until hover */
    height: 0.5rem; /* 8px — never changes during the animation */
    transition: width var(--animation-values);
  }

  .mega-menu__zone--links .mega-menu__link:is(:hover, :focus-visible) svg {
    width: 1.6875rem; /* 27px on hover/focus, same length as the .button arrow's hovered state */
  }

  /* Cap the entries list at 8 visible items; scroll the overflow.
     Calc: 8 line-heights (one per entry) + 7 gaps between them. */
  .mega-menu__links:has(> li:nth-child(9)) {
    max-block-size: calc(8 * 1lh + 7 * var(--gap-lg));
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  /* Zone 2 (dual mode) — heading row + pushes, stacked with a 16px gap.
     Scoped via :has so the solo fallback (single push, no push-pair) renders as a plain block
     and matches the layout of zone--last exactly. */
  .mega-menu__zone--mid:has(.mega-menu__push-pair) {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg); /* 16px between the heading row and the pushes */
  }

  .mega-menu__zone-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md);
  }

  .mega-menu__zone-heading,
  .mega-menu__zone-link {
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--2xs); /* 12px */
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .mega-menu__zone-link {
    white-space: nowrap;
    text-decoration: none;
  }

  .mega-menu__push-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg); /* 16px between the two pushes */
    flex: 1; /* fill the remaining height of zone--mid (below the header row) */
  }

  /* Push (mega-menu-push.liquid) — image with overlaid title and optional CTA */
  .mega-menu-push {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--mega-menu-push-ratio, 1 / 1);
    overflow: hidden;
    isolation: isolate;
    border-radius: 8px; /* Axome - per spec; no exact 8px token in the scale */
    text-decoration: none;
    color: rgb(var(--color-white-rgb));
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  /* Fill variant — used by the dual push-pair (zone--mid). The pushes drop their aspect ratio
     and stretch to fill their grid cell so the pair takes the remaining zone height (no empty
     space below them) and renders taller-than-square. */
  .mega-menu-push--fill {
    aspect-ratio: auto;
    block-size: 100%;
  }

  .mega-menu-push__image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .mega-menu-push::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
  }

  .mega-menu-push__content {
    position: relative;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--gap-md);
    padding: var(--padding-4xl);
  }

  .mega-menu-push__title {
    font-family: var(--font-heading--family);
    font-size: var(--mega-menu-push-title-size, var(--font-size--h3));
    line-height: 1;
    text-transform: uppercase;
    color: rgb(var(--color-white-rgb));
  }

  .mega-menu-push__cta {
    /* Background / text / border come from the block's color scheme (color-{scheme} class).
       The long arrow is added by the base .button rule. */
    position: relative;
    z-index: 1; /* above the full-card overlay link so the button stays the click target */
  }

  .mega-menu-push__overlay-link {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  /* Axome - Smooth hover on the featured product/collection cards in the megamenu.
     Adds the opacity cross-fade between primary/secondary image and a subtle lift on the whole card. */
  .mega-menu__content-list-item .resource-card__image,
  .mega-menu__content-list-item .resource-card__image--secondary {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .mega-menu__content-list-item .resource-card {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
  }

  @media (hover: hover) {
    .mega-menu__content-list-item .resource-card:hover {
      transform: translateY(-3px);
    }
  }

  .mega-menu__content-list-item .resource-card__title {
    transition: color var(--animation-speed-medium) var(--animation-easing);
  }

  @media (hover: hover) {
    .mega-menu__content-list-item .resource-card:hover .resource-card__title {
      color: var(--color-primary);
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Highlighted menu entry — active in both transparent and opaque header modes.
     Uses --highlight-bg / --highlight-text inline vars captured from the relevant scheme:
       - transparent header → color_scheme_transparent (or color_scheme_top)
       - opaque header → menu_color_scheme (root-equivalent opaque palette)
     These stay stable even when .header__row resets --color-foreground to `inherit` during neutral state. */
  .menu-list__link--highlighted .menu-list__link-title {
    position: relative;
    color: var(--highlight-text);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .menu-list__link--highlighted .menu-list__link-title::before {
    content: '';
    position: absolute;
    /* Title has 8px inline padding; inset 4px horizontally + -1px vertically = 4px of colour around the actual text glyphs, 1px vertically */
    inset: -1px 4px;
    background: var(--highlight-bg);
    border-radius: 4px;
    z-index: -1;
    transition: background var(--animation-speed) var(--animation-easing);
  }

  /* Push neighbouring entries 4px further so the coloured box keeps a 16px visual gap to the next label
     (4px box overhang + 4px margin + 8px next title padding = 16px). Applied to the <li> because the link/title are inside it. */
  .menu-list__list-item:has(.menu-list__link--highlighted) {
    margin-inline: 4px;
  }

  /* Transparent header only: when the row becomes opaque via the sticky scroll-up state, invert the
     highlight to match the solid scheme. Axome - The `:hover` trigger was removed: hovering the header
     (e.g. opening a mega menu) briefly swapped the highlight pill bg↔text, and on pointer-out it
     animated back — a white↔black flicker on the highlighted entry. Hover doesn't change the header's
     layout state (only the underlay opacity), so the highlight no longer follows it; the stable
     sticky-active state still inverts without flickering. */
  .header[transparent][data-sticky-state='active'] .menu-list__link--highlighted .menu-list__link-title {
    color: var(--highlight-bg);
  }

  .header[transparent][data-sticky-state='active'] .menu-list__link--highlighted .menu-list__link-title::before {
    background: var(--highlight-text);
  }

  /* Mobile drawer toggle: "MENU" text in 12px uppercase instead of an icon.
     Higher-specificity selector to override the default .menu-drawer-container .header__icon--summary padding. */
  .menu-drawer-container .header__icon--summary.header__icon--text {
    padding: 0;
    width: auto;
  }

  .header-drawer-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: -0.015rem; /* -0.24px tracking on 12px */
    font-weight: 500;
    color: var(--color-foreground);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:33) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__featured-card {
    position: absolute;
    inset-block-end: var(--padding-4xl);
    inset-inline-end: var(--padding-4xl);
    width: 15.625rem;
    aspect-ratio: 250 / 149;
    padding: var(--padding-lg);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    color: var(--color-white);
    z-index: var(--layer-raised);

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .hero__featured-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgb(0 0 0 / 55%) 100%);
    pointer-events: none;
    z-index: var(--layer-base);
  }

  .hero__featured-card__image {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: var(--layer-lowest);
  }

  .hero__featured-card__footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
    z-index: var(--layer-flat);
  }

  .hero__featured-card__title {
    margin: 0;
  }

  .hero__featured-card__price {
    font-size: 1rem;
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:34) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:35) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:37) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:38) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:39) */
/* ─── Redirect fallback — shown behind drawer on /cart ─── */
	.cart-page-redirect {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 60vh;
		padding: var(--padding-5xl);
		text-align: center;
		gap: var(--gap-lg);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	/* Only show when no dialog is open (drawer closed or failed to open) */
	body:not(:has(dialog[open])) .cart-page-redirect {
		opacity: 1;
	}

	.cart-page-redirect__text {
		font-size: var(--font-size--sm);
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
		max-width: 30ch;
	}

	.cart-page-redirect__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--gap-md);
	}

	.cart-page-redirect__button {
		padding-inline: var(--padding-4xl);
		padding-block: var(--padding-lg);
	}

	.cart-page {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0 var(--padding-5xl);
	}

	.cart-page--empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cart-page--empty .cart-page__title,
	.cart-page--empty .cart-page__more-blocks {
		margin-top: var(--margin-6xl);
	}

	.cart-page__more-blocks {
		width: 100%;
	}

	.cart-page--empty .cart-title {
		text-align: center;
	}

	.cart-page__main {
		grid-column: 1;
	}

	.cart-page__summary {
		padding-top: var(--padding-xl);
	}

	.cart-page__title + .cart-page__items {
		margin-block-start: var(--margin-lg);
	}

	@media screen and (min-width: 750px) {
		.cart-page {
			grid-template-columns: 1fr min(50vw, var(--sidebar-width));
			grid-template-rows: min-content min-content 1fr;
		}

		.cart-page__summary {
			display: grid;
			height: 100%;
			grid-column: 2;
			grid-row: 1 / -1;
			align-self: stretch;
			grid-template-rows: subgrid;
			padding-top: 0;

			/* needed to support blurred effect from hero section */
			position: relative;
		}

		.section--page-width .cart-page:has(.cart-summary--extend) {
			grid-column: 2 / 4;
			grid-template-columns: 1fr minmax(
					var(--sidebar-width),
					calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
				);
		}
	}

	@media screen and (min-width: 1400px) {
		.cart-page {
			grid-template-columns: 1fr var(--sidebar-width);
		}
	}

	html:active-view-transition-type(empty-cart-page) {
		/* Root doit etre capture sinon la page derriere la zone animee n'est pas
       rendue pendant la transition et apparait blanche. */
		view-transition-name: root-custom;
	}
/* END_SECTION:main-cart */

/* START_SECTION:main-collection-list (INDEX:40) */
.collection-push-list {
    container-type: inline-size;

    /* Full-width gutters: 24px desktop / 16px mobile (mirror the homepage list) */
    &.section--full-width {
      padding-inline: var(--padding-2xl);

      @media screen and (max-width: 749px) {
        padding-inline: var(--padding-lg);
      }
    }
  }

  .collection-push-list__title {
    margin: 0 0 var(--padding-2xl);
  }

  .collection-push-list__grid {
    display: grid;
    grid-template-columns: repeat(var(--cpl-cols, 3), minmax(0, 1fr));
    column-gap: var(--cpl-col-gap);
    row-gap: var(--cpl-row-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (max-width: 749px) {
    .collection-push-list__grid {
      grid-template-columns: repeat(var(--cpl-cols-mobile, 2), minmax(0, 1fr));
      column-gap: var(--cpl-col-gap-mobile);
      row-gap: var(--cpl-row-gap-mobile);
    }
  }

  .collection-push-list__item {
    position: relative;
  }

  .collection-push-list__empty {
    margin: 0;
    padding-block: var(--padding-2xl);
  }

  /* ---- Push card (shared visual with the homepage collection-list card) ---- */

  .collection-push-card {
    position: relative;
    width: 100%;
    aspect-ratio: var(--card-ratio, 5 / 6);
    overflow: hidden;
    border-radius: 8px;
  }

  /* Full-card click target, above the content (content has no interactive elements). */
  .collection-push-card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .collection-push-card__inner {
    position: relative;
    height: 100%;
  }

  .collection-push-card__media {
    position: absolute;
    inset: 0;
    z-index: var(--layer-base);
  }

  /* Bottom-fading overlay for title/CTA readability. */
  .collection-push-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 56.04%, rgb(0 0 0 / 0.3) 100%);
    pointer-events: none;
  }

  .collection-push-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .collection-push-card__content {
    position: relative;
    z-index: var(--layer-base);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: var(--content-v-align, flex-end);
    align-items: var(--content-h-align, flex-start);
    gap: var(--padding-lg);
    /* 32px desktop / 24px mobile */
    padding: var(--padding-4xl);
    /* Cards always sit on an image with a dark bottom gradient, so text is forced
       light regardless of the section's color scheme (mirrors the homepage card). */
    color: #fff;
    text-align: var(--content-text-align, start);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xl);
      gap: var(--padding-xs);
    }
  }

  /* Keep text-align in sync with horizontal alignment without :has() */
  .collection-push-card[style*='--content-h-align: center'] {
    --content-text-align: center;
  }

  .collection-push-card[style*='--content-h-align: flex-end'] {
    --content-text-align: end;
  }

  .collection-push-card__title {
    margin: 0;
    color: inherit;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--h2);
    line-height: var(--line-height--heading-tight);
  }

  /* White pill with dark label + arrow, independent of the section color scheme. */
  .collection-push-card__cta.button {
    width: fit-content;
    --button-background-color: #fff;
    --button-color: #000;
    --button-border-color: transparent;
  }

  /* Mirror the .button hover (shorten the arrow) since the overlay link sits on top. */
  .collection-push-card:hover .collection-push-card__cta::after {
    inline-size: 1.6875rem;
  }
/* END_SECTION:main-collection-list */

/* START_SECTION:main-collection (INDEX:41) */
/* Axome - Featured products encart ("Best-Dealer" / "Best-Seller").
     Full-bleed colored band between the horizontal filters and the product grid. */
  .ax-collection-feature {
    --cf-radius: 8px; /* Axome - image corner radius, matches ax-editorial-duo / ax-split-feature */

    /* Axome - the large image matches one product-grid cell: it mirrors the grid's
       own formula (extra-large = 3 columns, 24px horizontal gap, page-margin gutters). */
    --cf-grid-cols: 3;
    --cf-grid-gap: 24px;
    --cf-main-w: calc(
      (100vw - var(--page-margin) * 2 - (var(--cf-grid-cols) - 1) * var(--cf-grid-gap)) / var(--cf-grid-cols)
    );

    /* Span the full width of the collection-wrapper grid (edge to edge). */
    grid-column: 1 / -1;

    /* 24px desktop / 16px mobile, inside the band and before the product grid.
       The filter bar gives up its own bottom gap to this block (see rule below). */
    padding-block: var(--page-margin);
    margin-block-end: var(--page-margin);
  }

  /* When the encart is present, the horizontal filter bar drops its bottom gap so the
     band sits flush under it; the band carries the 24px / 16px gap to the grid instead. */
  .collection-wrapper:has(.ax-collection-feature) .facets-block-wrapper--full-width {
    margin-block-end: 0;
  }

  /* Full width with page gutters (24px desktop / 16px mobile); the two columns are
     pushed to the edges with the remaining space distributed between them. */
  .ax-collection-feature__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-lg);
    padding-inline: var(--page-margin);
  }

  .ax-collection-feature__col {
    flex: 0 0 auto; /* desktop: sized to the gallery, spaced apart by the parent */

    @media screen and (max-width: 749px) {
      flex: 1 1 0;
      min-inline-size: 0;
    }
  }

  .ax-collection-feature__heading {
    margin: 0;
    text-align: start; /* anchored to the left of the column */
  }

  /* Gallery: large square image (one grid cell) + a column of two stacked square thumbs. */
  .ax-collection-feature__gallery {
    margin-block-start: var(--gap-lg);
    display: flex;
    align-items: flex-end;
    gap: var(--gap-lg);
  }

  .ax-collection-feature__main {
    flex: 0 0 auto;
    inline-size: var(--cf-main-w);
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--cf-radius);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      /* Mobile: the image fills its (flexible) column. */
      inline-size: 100%;
    }
  }

  /* Bottom scrim so the white title/price stays legible over any image. */
  .ax-collection-feature__main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgb(var(--color-shadow-rgb) / var(--opacity-50)) 0%,
      transparent 45%
    );
    pointer-events: none;
  }

  .ax-collection-feature__thumbs {
    flex: 0 0 auto;
    inline-size: calc(var(--cf-main-w) * 167 / 448); /* keep the 448:167 proportion */
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .ax-collection-feature__media--thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--cf-radius);
    overflow: hidden;
  }

  .ax-collection-feature__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .ax-collection-feature__overlay {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 100%;
    z-index: var(--layer-raised);
    padding: var(--gap-lg);
    color: rgb(var(--color-white-rgb)); /* pure white over the image */
  }

  .ax-collection-feature__product-title {
    margin: 0;
    color: inherit;
  }

  .ax-collection-feature__price {
    margin-block-start: var(--gap-lg);
  }

  /* The price snippet is styled by product-card elsewhere; lay it out here and
     force white so it reads over the image. */
  .ax-collection-feature__price [ref='priceContainer'] {
    color: inherit;
  }

  .ax-collection-feature__price .price__sale:not(.price__hidden),
  .ax-collection-feature__price .price__regular:not(.price__hidden) {
    display: flex;
    flex-direction: row-reverse; /* compare-at first, then sale price */
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .ax-collection-feature__price .price,
  .ax-collection-feature__price .price-item--sale,
  .ax-collection-feature__price .compare-at-price {
    color: inherit;
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:43) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    border-block-start: 1px solid var(--color-grey, #c9c9c9);
    border-block-end: 1px solid var(--color-grey, #c9c9c9);
    --marquee-gap: 80px;
    --marquee-separator-color: var(--color-grey, #c9c9c9);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
    position: relative;
  }

  /* Vertical separator centered in the gap before every block */
  .marquee__repeated-items > *::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--marquee-gap) / -2);
    inset-block-start: 50%;
    width: 1px;
    height: 20px;
    background-color: var(--marquee-separator-color);
    transform: translateY(-50%);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:44) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }

  /* Axome - Editor-only notice shown when conditional rendering hides the section */
  .section-conditional-notice {
    margin-inline: auto;
    padding: var(--padding-lg, 1.5rem);
    border: 1px dashed var(--color-border, currentColor);
    border-radius: 8px;
    color: var(--color-foreground, currentColor);
    text-align: center;
    opacity: var(--opacity-70, 0.7);
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:45) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:46) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:49) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:50) */
.sticky-add-to-cart__bar {
    --sticky-tx: 0; /* desktop : ancré à droite, pas de centrage */
    position: fixed;
    bottom: 2.5rem; /* 40px du bas */
    right: 2.5rem; /* 40px de la droite */
    left: auto;
    opacity: 0;
    transform: translateX(var(--sticky-tx)) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    width: fit-content;
    max-width: calc(100vw - 2.5rem);
    /* Spec : padding 16px tout autour, border-radius 8px, shadow custom */
    padding: var(--padding-lg); /* 16px */
    border-radius: 0.5rem; /* 8px */
    box-shadow: -4px 8px 24px 0 rgba(109, 109, 109, 0.25);
    /* Layout : image — info — bouton collé à droite */
    display: flex;
    align-items: center;

    @starting-style {
      opacity: 0;
      transform: translateX(var(--sticky-tx)) translateY(calc(100% + 40px));
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(var(--sticky-tx)) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(var(--sticky-tx)) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__bar .price-item--sale {
    color: currentColor;
    font-weight: bolder;
  }

  /* Image carrée — 24px de l'info */
  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    margin-inline-end: 1.5rem; /* 24px */
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    display: flex;
    flex: 0 1 auto; /* s'ajuste au contenu, ne grandit pas */
    flex-direction: column;
    gap: var(--gap-xs); /* 8px entre titre et secondary title */
    min-width: 0; /* Allow text truncation */
  }

  /* Titre — style h3 uniquement (via la classe .h3), sans wrap */
  .sticky-add-to-cart__title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Secondary title (metafield custom.secondary_title) — text-small maquette */
  .sticky-add-to-cart__secondary-title {
    margin: 0;
    font-size: var(--font-size--sm); /* 14px */
    line-height: var(--line-height--body-normal);
    color: var(--color-foreground);
  }

  /* Bouton collé à droite, à 80px de l'info */
  .sticky-add-to-cart__button {
    flex-shrink: 0;
    height: var(--height-buy-buttons);
    position: relative;
    margin-inline-start: 5rem; /* 80px */
  }

  .sticky-add-to-cart__button .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-2xl);
    width: 100%;
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  /* Mobile : uniquement le bouton, sans fond ni ombre, centré en bas */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      --sticky-tx: -50%; /* mobile : centré */
      left: 50%;
      right: auto;
      bottom: var(--padding-lg);
      width: min(calc(100vw - 2.5rem), 30rem);
      padding: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      justify-content: center;
      gap: 0;
    }

    .sticky-add-to-cart__image,
    .sticky-add-to-cart__info {
      display: none;
    }

    .sticky-add-to-cart__button {
      width: 100%;
      margin-inline-start: 0;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:53) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:section (INDEX:57) */
/* Axome - Prevent text-block children from inheriting --width (avoids compounding like 40% of 40% when the parent text-block has a custom width) */
  .section-wrapper .text-block:not([style*='--width: fit-content']) > * {
    width: 100%;
  }

  /* Axome - Editor-only notice shown when conditional rendering hides the section */
  .section-conditional-notice {
    margin-inline: auto;
    padding: var(--padding-lg, 1.5rem);
    border: 1px dashed var(--color-border, currentColor);
    border-radius: 8px;
    color: var(--color-foreground, currentColor);
    text-align: center;
    opacity: var(--opacity-70, 0.7);
  }
/* END_SECTION:section */

/* START_SECTION:slideshow (INDEX:58) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:59) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:60) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:61) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:62) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:63) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:64) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:65) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:66) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:68) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-card (INDEX:69) */
.carousel-group__pinned-nav {
    display: flex;
    gap: var(--gap-sm);
    /* Pushes the nav to the bottom of the card when there's spare vertical space (column layout). */
    margin-block-start: auto;
    padding-block-start: var(--padding-sm);
    align-items: center;
    width: 100%;

    .carousel-group__pinned-nav-decoration {
      flex-grow: 1;
      height: 1px;
      background-color: var(--color-foreground);
      opacity: var(--opacity-60, 0.6);
    }
  }

  .carousel-group__pinned-nav .slideshow-control {
    opacity: 1;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
  }

  .carousel-group__pinned-nav .slideshow-control[disabled] {
    opacity: var(--opacity-30, 0.3);
    cursor: not-allowed;
  }
/* END_BLOCK:_carousel-card */

/* START_BLOCK:_carousel-content (INDEX:70) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:71) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:72) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-md);
    container-type: inline-size;
    padding: var(--padding-4xl);
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (max-width: 749px) {
      gap: var(--gap-lg);
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
  }

  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:73) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:76) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:78) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:83) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  /* Axome - the card sets --padding-*-mobile inline and custom props inherit; the global
     .spacing-style reset only re-declares the desktop vars, so every nested spacing-style
     descendant (the __image wrapper and the __content children) inherits the card's mobile
     padding and re-applies it on mobile. On the image this defeats ignore_card_padding on
     mobile (the card padding is cancelled but the image gives itself the card's mobile
     padding); on the text children it re-insets them. Reset the -mobile vars on every
     descendant to its own desktop value (inline mobile padding on a child still wins via
     higher specificity). */
  .featured-blog-posts-card .spacing-style {
    --padding-block-start-mobile: var(--padding-block-start);
    --padding-block-end-mobile: var(--padding-block-end);
    --padding-inline-start-mobile: var(--padding-inline-start);
    --padding-inline-end-mobile: var(--padding-inline-end);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:84) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:86) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:89) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:90) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_image (INDEX:93) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:97) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:102) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:109) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:110) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:111) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:113) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:assembly-time (INDEX:115) */
.assembly-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-size--sm);
    line-height: var(--font-paragraph--line-height);
  }

  .assembly-time__label {
    opacity: 0.6;
  }
/* END_BLOCK:assembly-time */

/* START_BLOCK:carousel (INDEX:118) */
.carousel-group {
    position: relative;
    display: block;
    max-width: 100%;
  }

  .carousel-group__media-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
  }

  .carousel-group__viewport {
    position: relative;
    z-index: var(--layer-flat);
  }

  /* Holds the arrows + scroller, so the floating arrows overlay only the scroller (the carousel row). */
  .carousel-group__track {
    position: relative;
  }

  /* The pinned card lives inside the scroller by default; this mobile slot is unused on desktop. */
  .carousel-group__pinned-slot {
    display: none;
  }

  /* Mobile: stack the fixed card on its own first row, the carousel on the second row. */
  @media screen and (max-width: 749px) {
    .carousel-group__viewport {
      display: flex;
      flex-direction: column;
      gap: var(--carousel-gap-mobile, var(--carousel-gap, 12px));
    }

    .carousel-group__pinned-slot {
      display: block;
    }

    /* In the slot the card is a normal full-width block, not a sticky overlay. */
    .carousel-group__pinned-slot > .carousel-group__pinned {
      position: static;
      width: 100%;
      z-index: auto;
    }
  }

  .carousel-group__scroller {
    /* The width of a single slide — reused by slide sizing and pinned-card scroll padding. */
    --carousel-slide-size: calc(
      (
          100% - (var(--carousel-gap-mobile, var(--carousel-gap, 12px)) * (var(--carousel-mobile-columns, 2) - 1)) -
            var(--peek-next-slide-size, 0px)
        ) / var(--carousel-mobile-columns, 2)
    );

    /* position: relative makes the scroller the offsetParent of its slides,
       so the carousel JS can read each slide's offsetLeft for scroll snapping. */
    position: relative;
    display: flex;
    align-items: stretch !important;
    align-items: var(--carousel-align, stretch);
    gap: var(--carousel-gap-mobile, var(--carousel-gap, 12px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;

    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }

  .carousel-group__scroller::-webkit-scrollbar {
    display: none;
  }

  /* flex-basis (not width) sizes each slide so it wins over a child block's own width. */
  .carousel-group__scroller > * {
    flex: 0 0 var(--carousel-slide-size);
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .carousel-group__scroller {
      --carousel-slide-size: calc(
        (
            100% - (var(--carousel-gap, 12px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)
          ) / var(--carousel-columns, 4)
      );

      gap: var(--carousel-gap, 12px);
    }
  }

  /* Pinned card (_carousel-card): stays fixed at the inline-start while the rest scrolls under it.
     order: -1 forces it visually first regardless of where the merchant places it. */
  .carousel-group__scroller > .carousel-group__pinned {
    position: sticky;
    inset-inline-start: 0;
    z-index: var(--layer-raised);
    order: -1;
    scroll-snap-align: none;
    background-color: var(--color-background);
  }

  /* Rest the scrolling slides to the right of the pinned card so they're never hidden behind it. */
  .carousel-group__scroller:has(> .carousel-group__pinned) {
    scroll-padding-inline-start: calc(
      var(--carousel-slide-size) + var(--carousel-gap-mobile, var(--carousel-gap, 12px))
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-group__scroller:has(> .carousel-group__pinned) {
      scroll-padding-inline-start: calc(var(--carousel-slide-size) + var(--carousel-gap, 12px));
    }
  }

  /* Arrows float over the carousel (slideshow-arrows is absolute, inset: 0). */
  .carousel-group slideshow-arrows {
    padding-inline: var(--padding-sm);
  }

  /* Floating overlay arrows hide at the edges; the pinned card's own nav stays visible (greyed). */
  .carousel-group slideshow-arrows .slideshow-control[disabled] {
    display: none;
  }
/* END_BLOCK:carousel */

/* START_BLOCK:comparison-slider (INDEX:121) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:122) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:123) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:125) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:127) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  /* Axome - Apply page gutters (16px mobile / 24px desktop) to filters wrapper on non-homepage to match product grid */
  main:not([data-template='index']) .facets-block-wrapper--full-width {
    padding-inline: var(--page-margin);
  }

  /* Desktop only: top/bottom borders edge-to-edge (the wrapper spans full viewport on full-width filter),
     vertical padding inside the borders, and 24px gap before the product grid */
  @media screen and (min-width: 750px) {
    main:not([data-template='index']) .facets-block-wrapper--full-width {
      padding-block: 11px;
      border-block-start: 1px solid #c9c9c9;
      border-block-end: 1px solid #c9c9c9;
      margin-block-end: 24px;
    }

    /* Reset inner .facets padding so the wrapper padding is the only vertical spacing inside the borders */
    main:not([data-template='index']) .facets-block-wrapper--full-width > .facets.spacing-style {
      padding-block: 0;
    }

    /* Hide the products count on the horizontal filter bar */
    main:not([data-template='index']) .facets--horizontal .products-count-wrapper {
      display: none;
    }

    /* Move the sort dropdown to the leftmost position before the filter pills */
    main:not([data-template='index']) .facets--horizontal .sorting-filter__horizontal {
      order: -1;
    }

    /* When sort is moved to the left, anchor the dropdown panel to the left edge instead of the right (default is right: 0 from sorting.liquid) */
    main:not([data-template='index']) .facets--horizontal .sorting-filter__horizontal .sorting-filter__options {
      left: 0;
      right: auto;
    }

    /* Force 8px icon size in filter + sort summaries (overrides summary .svg-wrapper { width: var(--icon-size-xs); }) */
    main:not([data-template='index']) .facets__summary .svg-wrapper.icon-plus,
    main:not([data-template='index']) .facets__summary .svg-wrapper.icon-plus > svg {
      width: 8px;
      height: 8px;
    }

    /* Rotate the whole SVG (45deg → "x") instead of the per-path collapse animation defined in base.css.
       Override transforms on .horizontal and .vertical paths so only the SVG itself moves. */
    main:not([data-template='index']) .facets__summary .icon-plus > svg {
      transition: transform var(--animation-speed) var(--animation-easing);
      transform-origin: 50% 50%;
    }

    main:not([data-template='index']) .facets__panel[open] > .facets__summary .icon-plus > svg {
      transform: rotate(45deg);
    }

    main:not([data-template='index']) .facets__summary .icon-plus :is(.horizontal, .vertical),
    main:not([data-template='index']) .facets__panel[open] > .facets__summary .icon-plus :is(.horizontal, .vertical) {
      transform: none;
      opacity: 1;
    }
  }

  /* Horizontal bar layout: filter pills + "View all" link */
  .facets__horizontal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--gap-xl);
    row-gap: var(--gap-sm);
  }

  .facets__see-all-link {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets__see-all-link:hover,
  .facets__see-all-link:focus-visible {
    color: var(--color-primary);
  }

  /* Axome - The horizontal bar is a single row of filter pills + a "View all" link that opens a
     drawer listing ALL filters. Keep it on one line:
     1. Drop Horizon's 60% max-width cap on the wrapper so the row can use the full width.
     2. Never let the bar wrap once there is room for the full row (>= 990px).
     (How many pills show at each width is handled in the responsive block below. Liquid can't
     branch on viewport width, so the trimming is done in CSS; the drawer renders every filter,
     so hidden pills stay reachable via "View all".) */
  @media screen and (min-width: 750px) {
    main:not([data-template='index']) .facets--horizontal .facets__filters-wrapper {
      max-width: none;
    }
  }

  @media screen and (min-width: 990px) {
    main:not([data-template='index']) .facets__horizontal-bar {
      flex-wrap: nowrap;
    }
  }

  /* Responsive pill count. Pills shown: >= 1201px all rendered; 1000-1200px the first 4 (keep the
     :nth-child value in sync with medium_filters_count); 750-999px none (only Sort + "View all"). */
  @media screen and (min-width: 1000px) and (max-width: 1200px) {
    main:not([data-template='index']) .facets__horizontal-bar .facets__item:nth-child(n + 5) {
      display: none;
    }
  }

  @media screen and (max-width: 999px) {
    main:not([data-template='index']) .facets__horizontal-bar .facets__item {
      display: none;
    }
  }

  /* Hide "View all" where every filter is already visible inline (the drawer would show nothing
     new). It stays visible below 1000px, where all pills are hidden. */
  @media screen and (min-width: 1000px) and (max-width: 1200px) {
    main:not([data-template='index']) .facets__horizontal-bar:not(.facets__horizontal-bar--overflow-medium) .facets__see-all-link {
      display: none;
    }
  }

  @media screen and (min-width: 1201px) {
    main:not([data-template='index']) .facets__horizontal-bar:not(.facets__horizontal-bar--overflow-wide) .facets__see-all-link {
      display: none;
    }
  }

  /* Mobile gutter on filter wrapper + fixed-bottom mobile toggle button (black bg, 24px/16px padding) */
  @media screen and (max-width: 749px) {
    main:not([data-template='index']) .facets-block-wrapper {
      padding-inline: var(--page-margin);
    }

    main:not([data-template='index']) .facets-toggle {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      height: auto;
      margin: 0;
      padding: 14px;
      background: #000;
      color: #fff;
      z-index: var(--layer-sticky);
    }

    /* Override .button-unstyled--with-icon's color: var(--color-foreground) so the icon + label render white on the black bar */
    main:not([data-template='index']) .facets-toggle .facets-toggle__button.button-unstyled--with-icon {
      color: #fff;
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:130) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:132) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:133) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  /* Axome - cap the rendered size while preserving the aspect ratio. A max-height is folded into a
     width limit (height = width / ratio) so width and height scale together with no extra crop.
     Defaults (100% / a very large box) leave the image unconstrained when no max is set. */
  .image-block__image,
  .image-block .placeholder-image {
    max-width: min(
      var(--size-style-max-inline-size, 100%),
      calc(var(--size-style-max-block-size, 100000px) * (var(--ratio)))
    );
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:135) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:marquee-item (INDEX:136) */
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .marquee-item__text {
    font-size: var(--font-size--xs);
  }

  .marquee-item__icon {
    flex-shrink: 0;
    width: var(--marquee-item-icon-width, 16px);
    height: auto;
    display: block;
  }
/* END_BLOCK:marquee-item */

/* START_BLOCK:menu (INDEX:137) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:139) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:140) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:141) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:144) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-dimensions (INDEX:146) */
.product-dimensions {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
  }

  .product-dimensions__item {
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
    min-width: 0;
  }

  .product-dimensions__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f7f7f7;
    color: var(--color-foreground);
  }

  .product-dimensions__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .product-dimensions__label {
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    opacity: var(--opacity-60);
  }

  .product-dimensions__value {
    font-size: 1rem;
    line-height: var(--line-height--body-tight);
  }
/* END_BLOCK:product-dimensions */

/* START_BLOCK:product-ekoo (INDEX:147) */
product-ekoo-component {
    display: block;
    width: 100%;
  }

  product-ekoo-component .product-ekoo__editor-hint {
    margin-block: var(--padding-xs) 0;
    margin-inline: 0;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:product-ekoo */

/* START_BLOCK:product-inventory (INDEX:148) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-reassurance (INDEX:149) */
.product-reassurance {
    display: block;
    width: 100%;
  }

  .product-reassurance__row {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .product-reassurance__main {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }

  .product-reassurance__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
  }

  /* Pre-hydration: only show the first item. */
  .product-reassurance__main:not([data-reassurance-hydrated]) > .product-reassurance__item ~ .product-reassurance__item {
    display: none;
  }

  /* Post-hydration: show only the active item. */
  .product-reassurance__main[data-reassurance-hydrated] > .product-reassurance__item:not(.is-active) {
    display: none;
  }

  .product-reassurance__icon {
    flex-shrink: 0;
    width: 1.375rem;
  }

  .product-reassurance__icon-media {
    width: 1.375rem;
    height: auto;
  }

  .product-reassurance__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .product-reassurance__title,
  .product-reassurance__subtitle {
    font-size: 1rem;
    line-height: var(--line-height--body-tight);
  }

  .product-reassurance__subtitle {
    opacity: var(--opacity-60);
  }

  /* Pagination dots */
  .product-reassurance__pagination {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    flex-shrink: 0;
  }

  .product-reassurance__bullet {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: var(--opacity-40);
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: opacity var(--animation-values);
  }

  .product-reassurance__bullet.is-active {
    opacity: 1;
  }

  /* Shipping estimator (sub-block _product-reassurance-shipping) */
  .product-reassurance__shipping-prompt {
    font-size: 1rem;
    line-height: var(--line-height--body-tight);
  }

  .product-reassurance__shipping-form {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-block-start: var(--gap-xs);
  }

  .product-reassurance__shipping-form[hidden] {
    display: none;
  }

  .product-reassurance__shipping-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    color: var(--color-foreground);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    appearance: none;
  }

  .product-reassurance__shipping-input:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: -2px;
  }

  .product-reassurance__shipping-button {
    flex-shrink: 0;
    padding: 8px 18px;
    font-family: inherit;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    color: var(--color-background);
    background: var(--color-foreground);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }

  .product-reassurance__shipping-button:hover {
    opacity: var(--opacity-80, 0.8);
  }

  .product-reassurance__shipping-reset {
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 4px;
    color: var(--color-foreground);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    opacity: var(--opacity-60);
    transition: opacity var(--animation-values);
  }

  .product-reassurance__shipping-reset:hover,
  .product-reassurance__shipping-reset:focus-visible {
    opacity: 1;
  }

  .product-reassurance__shipping-reset svg {
    display: block;
  }
/* END_BLOCK:product-reassurance */

/* START_BLOCK:product-recommendations (INDEX:150) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }

  /* Axome - keep 2 columns on desktop when the grid has exactly 2 products
     (works around the typo in `@container resource-list(min-width: 450px)` in base.css
     which causes the layout to fall back to a single column at mid container widths). */
  @media screen and (min-width: 750px) {
    product-recommendations .resource-list--grid:has(.resource-list__item:first-child:nth-last-child(2)) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-tab-care (INDEX:151) */
.product-tab-care {
    --care-radius: 8px;

    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
  }

  .product-tab-care__intro.rte {
    font-size: var(--font-size--sm);
  }

  .product-tab-care__banner {
    position: relative;
    display: block;
    min-height: 280px;
    border-radius: var(--care-radius);
    overflow: hidden;
    background-color: var(--color-neutral-dark, #2b2b2b);
    color: var(--color-white, #fff);
    text-decoration: none;
  }

  .product-tab-care__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-tab-care__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 60%);
  }

  .product-tab-care__banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--gap-2xs);
    padding: var(--padding-2xl);
  }

  .product-tab-care__banner-title {
    margin: 0;
    text-transform: uppercase;
  }

  .product-tab-care__banner-text {
    margin: 0;
    font-size: var(--font-size--sm);
  }

  .product-tab-care__banner-link.link {
    color: inherit;
    margin-block-start: var(--gap-xs);
  }

  /* Two pushes side by side (care_category banner + care_tutorial) on desktop,
     stacked on mobile. */
  .product-tab-care__pushes {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
  }

  /* care_tutorial push — same design as the Technical-tab push, sized to match the
     care_category banner so the two align in the row. */
  .care-tutorial {
    position: relative;
    display: block;
    min-height: 280px;
    overflow: hidden;
    border-radius: var(--care-radius);
    background-color: var(--color-neutral-dark, #2b2b2b);
    color: var(--color-white, #fff);
    text-decoration: none;
  }

  /* No media → plain colour scheme + its own foreground text (no overlay). */
  .care-tutorial--plain {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .care-tutorial__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .care-tutorial__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 60%);
  }

  .care-tutorial__tag {
    position: absolute;
    inset-block-start: var(--padding-lg);
    inset-inline-start: var(--padding-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--padding-xs) var(--padding-md);
    border-radius: 100px;
    background-color: var(--color-background, #fff);
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
    line-height: 1;
  }

  .care-tutorial__content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs);
    padding: var(--padding-2xl);
  }

  .care-tutorial__title {
    margin: 0;
    text-transform: uppercase;
  }

  .care-tutorial__text {
    margin: 0;
    font-size: var(--font-size--sm);
  }

  .care-tutorial__cta.link {
    color: inherit;
    margin-block-start: var(--gap-xs);
    text-align: start; /* override the global .link centering */
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media screen and (min-width: 750px) {
    .product-tab-care__pushes {
      flex-direction: row;
      align-items: stretch;
    }

    .product-tab-care__pushes > * {
      flex: 1 1 0;
      min-width: 0;
    }
  }
/* END_BLOCK:product-tab-care */

/* START_BLOCK:product-tab-delivery (INDEX:152) */
.product-tab-delivery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .product-tab-delivery {
      grid-template-columns: 1fr 1fr;
    }

    /* A lone last card (odd count) spans the full width. */
    .product-tab-delivery > .delivery-term:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }
/* END_BLOCK:product-tab-delivery */

/* START_BLOCK:product-tab-description (INDEX:153) */
.product-tab-description {
    --ptd-gap: var(--padding-lg); /* 16px mobile */
    --ptd-card-radius: 8px;

    display: flex;
    flex-direction: column;
    gap: var(--ptd-gap);
  }

  .product-tab-description__chapo {
    margin-block-end: var(--margin-md);
    font-weight: var(--font-weight--medium, 500);
  }

  /* Cards row */
  .product-tab-description__cards {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg); /* 16px */
  }

  .ptd-card {
    position: relative;
    display: block;
    border-radius: var(--ptd-card-radius);
    overflow: hidden;
    aspect-ratio: 6 / 5;
    color: inherit;
    text-decoration: none;
  }

  .ptd-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Card 1 — collection push */
  .ptd-card--collection {
    color: var(--color-white, #fff);
  }

  .ptd-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 60%);
  }

  .ptd-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding: var(--padding-lg);
  }

  .ptd-card__content--bottom {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .ptd-card__title {
    text-transform: uppercase;
  }

  .ptd-card__cta.link {
    color: inherit;
  }

  /* Card 2 — assembly time */
  .ptd-card--assembly {
    background-color: var(--color-neutral-light, #f7f7f7);
  }

  .ptd-card__inset {
    position: absolute;
    inset: var(--padding-lg); /* 16px gap from the image edges */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: var(--padding-xl);
    text-align: center;
    background-color: var(--color-background, #fff);
    border-radius: var(--ptd-card-radius);
  }

  .ptd-card__label {
    font-size: var(--font-size--sm);
  }

  .ptd-card__subtitle {
    font-size: var(--font-size--sm);
    font-weight: var(--font-weight--medium, 500);
  }

  .ptd-card__time {
    margin-block: var(--padding-lg); /* 16px above & below */
    text-transform: uppercase;
  }

  .ptd-card__text {
    font-size: var(--font-size--sm);
  }

  /* Card 3 — see in 3D */
  .ptd-card--model3d {
    background-color: var(--color-neutral-light, #f7f7f7);
  }

  .ptd-card__trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .ptd-card--model3d .ptd-card__button {
    position: absolute;
    inset-block-end: var(--padding-lg);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
  }

  /* 3D — the model viewer / video fill the card inline */
  product-model[data-media-loaded] .ptd-card__trigger {
    display: none;
  }

  .ptd-3d__model,
  .ptd-card--model3d model-viewer,
  .ptd-3d__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .ptd-card--model3d model-viewer {
    --poster-color: transparent;
    background-color: var(--color-neutral-light, #f7f7f7);
  }

  .ptd-3d__video {
    object-fit: cover;
  }

  @media screen and (min-width: 750px) {
    .product-tab-description {
      --ptd-gap: var(--padding-2xl); /* 24px desktop */
    }

    .ptd-card {
      aspect-ratio: 5 / 6;
    }

    .product-tab-description__cards {
      flex-direction: row;
    }

    /* 3 cards => thirds, 2 cards => 50/50, 1 card => 50% (left-aligned). */
    .product-tab-description__cards > .ptd-card {
      flex: 1 1 0;
      min-width: 0;
      max-width: 50%;
    }
  }
/* END_BLOCK:product-tab-description */

/* START_BLOCK:product-tab-eco (INDEX:154) */
.product-tab-eco {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  /* Eco-rating badge (Figma): cream pill — faded label + black note + leaf icon. */
  .product-tab-eco__rating {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--gap-md);
    margin: 0;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #f0eae1;
    text-align: center;
  }

  .product-tab-eco__rating-label {
    color: rgb(0 0 0 / 0.4);
    font-size: var(--font-size--sm); /* 16px */
  }

  .product-tab-eco__rating-value {
    color: #000;
    font-size: var(--font-size--sm); /* 16px */
  }

  .product-tab-eco__discover {
    align-self: flex-start;
    margin-block-start: var(--gap-sm);
  }

  /* "Discover our Eco-rating" drawer — reuses the cart drawer chrome
     (dialog-modal dialog-drawer): right edge, full height, slide-in + backdrop. */
  .eco-drawer {
    display: contents;
  }

  .eco-drawer .eco-drawer__dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--cart-drawer-width, clamp(20rem, 38.125vw, 34.3125rem));
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    color: var(--color-foreground);
    box-shadow: var(--shadow-drawer);
    overflow: hidden;
  }

  .eco-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--padding-2xl);
    overflow-y: auto;
  }

  .eco-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-block-end: var(--padding-lg);
  }

  .eco-drawer__heading {
    margin: 0;
  }

  .eco-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
  }

  .eco-drawer__close svg {
    width: var(--icon-size-sm, 1rem);
    height: auto;
  }

  .eco-drawer__text {
    margin-block-end: var(--padding-lg);
    font-size: var(--font-size--sm);
  }

  /* In the drawer: one criterion per line (no two-columns) + no separator border. */
  .eco-drawer .eco-criteria__item {
    border-block-end: none;
  }

  /* Eco criteria — all criteria shown; validated ones get a green check. */
  .eco-criteria {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .eco-criteria__item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-md);
    border-block-end: 1px solid var(--color-border);
  }

  .eco-criteria__marker {
    flex: 0 0 auto;
    width: 0.75rem; /* 12px */
    height: 0.75rem;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.3);
  }

  /* Validated criterion: green circle + white check, full-strength label. */
  .eco-criteria__item--active .eco-criteria__marker {
    border-color: var(--color-success);
    background-color: var(--color-success);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'><path d='M1 4.2L3.6 6.8L9 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
  }

  /* Non-validated criterion: muted. */
  .eco-criteria__item:not(.eco-criteria__item--active) .eco-criteria__label {
    opacity: var(--opacity-60, 0.6);
  }

  /* Detailed rows (drawer): label + description stacked, marker at the top. */
  .eco-criteria__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .eco-criteria__desc {
    font-size: var(--font-size--xs);
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .eco-criteria__item:not(.eco-criteria__item--active) .eco-criteria__desc {
    opacity: var(--opacity-60, 0.6);
  }

  .eco-criteria--detailed .eco-criteria__item {
    align-items: flex-start;
  }

  .eco-criteria--detailed .eco-criteria__marker {
    margin-block-start: 0.25rem;
  }

  /* Eco-note leaf icon (shown from rating 4). */
  .product-tab-eco__note-icon {
    display: inline-flex;
    align-items: center;
  }

  .product-tab-eco__note-icon svg {
    height: 1.25rem;
    width: auto;
  }

  /* Eco-rating badge inside the drawer: same pill, spaced from the content below. */
  .eco-drawer .product-tab-eco__rating {
    margin-block-end: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .eco-criteria--two-columns {
      column-count: 2;
      column-gap: var(--gap-xl);
    }

    .eco-criteria--two-columns .eco-criteria__item {
      break-inside: avoid;
    }
  }
/* END_BLOCK:product-tab-eco */

/* START_BLOCK:product-tab-technical (INDEX:155) */
.product-tab-technical {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xl);
  }

  .tech-group__title {
    margin: 0;
    font-size: var(--font-size--xl); /* 20px */
    font-weight: 700;
    line-height: var(--line-height--heading-tight, 1.2);
  }

  .tech-group__rows {
    margin-block-start: var(--padding-lg); /* 16px below the title */
  }

  .tech-group__full {
    margin-block-start: var(--padding-lg);
    font-size: var(--font-size--sm);
  }

  .tech-group__dimensions {
    margin-block-start: var(--padding-lg);
  }

  .tech-row {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding-block: var(--padding-md);
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.4);
    break-inside: avoid;
    overflow-x: clip;
    min-height: 50px;
  }

  .tech-row__label {
    flex: 0 0 auto;
    color: rgb(var(--color-foreground-rgb) / 0.4);
    font-size: var(--font-size--sm);
  }

  .tech-row__value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size--sm);
    text-align: end;
  }

  .tech-material {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    color: inherit;
  }

  .tech-material--link .tech-material__name {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .tech-material--link:hover .tech-material__name {
    text-decoration: none;
  }

  .tech-material__img {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    object-fit: cover;
  }

  .tech-prop65-warning {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .tech-prop65__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: var(--font-size--xs);
    line-height: 1;
    cursor: pointer;
  }

  .tech-prop65 a {
    color: inherit;
  }

  .tech-prop65[popover] {
    max-width: 32rem;
    margin: auto;
    padding: var(--padding-2xl);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    background-color: var(--color-background);
    font-size: var(--font-size--sm);
  }

  .tech-prop65[popover]::backdrop {
    background-color: rgb(0 0 0 / 0.4);
  }

  .tech-prop65__title {
    margin: 0 0 var(--padding-sm);
    font-weight: 700;
  }

  .tech-prop65 p {
    margin: 0;
  }

  .tech-tutorial {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 5 / 6; /* match the description-tab push cards → never collapses */
    border-radius: 8px;
    background-color: var(--color-neutral-light, #f7f7f7);
    color: var(--color-white, #fff);
    text-decoration: none;
  }

  /* No media → colour scheme 3 background + its own foreground text (no overlay). */
  .tech-tutorial--plain {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .tech-tutorial__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tech-tutorial__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 55%);
  }

  .tech-tutorial__tag {
    position: absolute;
    inset-block-start: var(--padding-lg);
    inset-inline-start: var(--padding-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--padding-xs) var(--padding-md);
    border-radius: 100px;
    background-color: var(--color-background, #fff);
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
    line-height: 1;
  }

  .tech-tutorial__content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--padding-xl);
  }

  .tech-tutorial__title {
    margin: 0;
  }

  .tech-tutorial__text {
    margin: 0;
    font-size: var(--font-size--sm);
  }

  .tech-tutorial__cta.link {
    color: inherit;
    text-align: start; /* override the global .link centering */
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .product-tab-technical__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
  }

  .product-tab-technical__recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .tech-group__rows {
      column-count: 2;
      column-gap: var(--gap-xl);
    }

    /* Installation guide = a single 33% push, like the description-tab cards. */
    .tech-tutorial {
      max-width: calc((100% - 2 * var(--gap-lg)) / 3);
    }
  }
/* END_BLOCK:product-tab-technical */

/* START_BLOCK:product-variations (INDEX:157) */
.product-variations {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 2rem); /* 32px desktop */

    @media screen and (max-width: 749px) {
      gap: var(--gap-mobile, var(--gap, 1.5rem)); /* 24px mobile */
    }
  }

  .product-variations__axis {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
  }

  /* Header : nom d'axe (gauche) + valeur sélectionnée (droite) sur la même ligne */
  .product-variations__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .product-variations__name {
    font-size: var(--font-size--xs); /* tiny : 14px desktop / 12px mobile */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
  }

  .product-variations__current {
    font-size: var(--font-size--sm); /* 16px desktop / 14px mobile */
  }

  .product-variations__options {
    display: flex;
    flex-direction: column; /* image : 1 par ligne */
    gap: 0.5rem; /* 8px */
  }

  /* Axe texte : grille 2 colonnes */
  .product-variations__axis--text .product-variations__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-variations__option {
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px entre image et contenu */
    padding: 0.5rem; /* 8px */
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: 0.5rem; /* 8px */
    color: var(--color-foreground);
    text-decoration: none;
    transition: border-color var(--animation-speed, 0.2s) var(--ease-out-quad, ease);
  }

  .product-variations__option:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.4);
  }

  .product-variations__option.is-active {
    border-color: var(--color-foreground); /* 1px solid #000 */
  }

  .product-variations__swatch {
    flex-shrink: 0;
    width: 2.5rem; /* 40px */
    height: 2.5rem;
    overflow: hidden;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: 0.5rem; /* 8px */
    background: var(--color-background-secondary, transparent);
  }

  .product-variations__swatch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-variations__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .product-variations__title {
    font-size: var(--font-size--sm); /* small : 16px desktop / 14px mobile */
  }

  .product-variations__secondary {
    font-size: var(--font-size--xs); /* tiny */
    opacity: 0.6;
  }

  /* Badge "Out of stock" */
  .product-variations__badge {
    margin-inline-start: auto;
    flex-shrink: 0;
    align-self: center;
    padding: 0.25rem; /* 4px */
    border-radius: 0.25rem; /* 4px */
    background: rgb(var(--color-foreground-rgb) / 0.1);
    font-size: var(--font-size--xs); /* tiny */
    white-space: nowrap;
  }

  /* Coche de sélection (axe texte) : check blanc sur pastille noire ronde */
  .product-variations__check {
    margin-inline-start: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-foreground);
  }

  /* État de chargement pendant la navigation fausse-variante : on assombrit la section
     product-information le temps du fetch puis on fond l'arrivée du nouveau contenu — ça donne
     un feedback au clic et masque le léger saut de layout au swap. Le delay sur l'assombrissement
     évite tout flash sur les aller-retours servis depuis le cache (~76ms). */
  main .shopify-section[id$='__main'] {
    transition: opacity 0.2s ease;
  }

  main .shopify-section[id$='__main'][data-pv-loading] {
    opacity: 0.55;
    transition: opacity 0.2s ease 0.12s;
  }
/* END_BLOCK:product-variations */

/* START_BLOCK:review (INDEX:159) */
.rating-wrapper {
    --star-fill-color: #fbce00;
    --star-fill-color-rgb: 251, 206, 0;
    --size-style-width-mobile: var(--size-style-width);
    align-self: flex-start;
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --color: var(--color-foreground);
  }

  .rating-color--yellow {
    --color: var(--color-foreground);
  }

  /* Axome - Link variant: rating badge becomes an in-page anchor to the reviews section. */
  a.rating-wrapper {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  a.rating-wrapper:hover .rating-count,
  a.rating-wrapper:focus-visible .rating-count {
    opacity: 1;
    text-decoration: underline;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--color);
    font-size: var(--font-size--xs);
    line-height: 0;
    margin: 0;
    opacity: var(--opacity-60);
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    width: 13px;
    height: 13px;
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:separator (INDEX:160) */
.separator-block {
    --separator-color: var(--color-border);
    --separator-line-style: solid;
    --separator-thickness: 1px;
    --separator-width: 100%;

    flex-shrink: 0;
    border: 0;
    margin: 0;
    padding: 0;
    /* Column layout (default vertical stack) → horizontal rule */
    width: var(--separator-width);
    border-block-start: var(--separator-thickness) var(--separator-line-style) var(--separator-color);
  }

  /* Horizontal alignment of the line when it doesn't span the full width */
  .separator-block--align-left {
    margin-inline-end: auto;
  }

  .separator-block--align-center {
    margin-inline: auto;
  }

  .separator-block--align-right {
    margin-inline-start: auto;
  }

  /* Row layout → vertical rule */
  .layout-panel-flex--row > .separator-block {
    width: auto;
    height: var(--separator-width);
    border-block-start: 0;
    border-inline-start: var(--separator-thickness) var(--separator-line-style) var(--separator-color);
  }

  .layout-panel-flex--row > .separator-block--align-left {
    margin-inline: 0;
    margin-block-end: auto;
  }

  .layout-panel-flex--row > .separator-block--align-center {
    margin-inline: 0;
    margin-block: auto;
  }

  .layout-panel-flex--row > .separator-block--align-right {
    margin-inline: 0;
    margin-block-start: auto;
  }

  /* Mobile overrides — fall back to desktop value when unset */
  @media screen and (max-width: 749px) {
    .separator-block--hidden-mobile {
      display: none;
    }

    .separator-block {
      width: var(--separator-width-mobile, var(--separator-width));
      border-block-start-width: var(--separator-thickness-mobile, var(--separator-thickness));
    }

    .layout-panel-flex--row > .separator-block {
      width: auto;
      height: var(--separator-width-mobile, var(--separator-width));
      border-block-start-width: 0;
      border-inline-start-width: var(--separator-thickness-mobile, var(--separator-thickness));
    }
  }
/* END_BLOCK:separator */

/* START_BLOCK:short-description (INDEX:161) */
.short-description {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .short-description__heading {
    margin: 0;
  }

  .short-description__anchor {
    align-self: flex-start;
  }

  /* Custom checkmark bullets — flush left, 8px between items. */
  .short-description__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px between items */
  }

  .short-description__item {
    position: relative;
    padding-inline-start: calc(0.9375rem + var(--gap-sm));
    color: var(--color-foreground);
  }

  .short-description__item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.45em;
    width: 0.9375rem; /* 15px */
    height: 0.6875rem; /* 11px */
    background-color: var(--color-foreground);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11' fill='none'><path d='M0.5 6.5L4.5 10.5L14.5 0.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/></svg>")
      no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11' fill='none'><path d='M0.5 6.5L4.5 10.5L14.5 0.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/></svg>")
      no-repeat center / contain;
  }
/* END_BLOCK:short-description */

/* START_BLOCK:social-links (INDEX:163) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:164) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:165) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:168) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:169) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:ax-product-review-card (INDEX:174) */
.ax-product-reviews__card {
    --ax-product-reviews-card-padding: 32px;
    --ax-product-reviews-card-radius: 8px;
    /* Fixed height so a long review (text + shop reply) can't stretch every slide
       and blow up the section; content beyond this scrolls inside the card. */
    --ax-product-reviews-card-height: 250px;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: var(--ax-product-reviews-card-height);
    padding: var(--ax-product-reviews-card-padding);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid rgb(66 41 15 / 0.3); /* CREA brown 30% */
    border-radius: var(--ax-product-reviews-card-radius);
    /* Clip horizontally (quote blend / rounded corners), scroll vertically when overflowing. */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-20)) transparent;
  }

  /* Decorative opening quote — reproduces h1 typography directly so the
     `.h1.h1 { color: ... }` rule in base.css doesn't beat our white color and
     break the difference blend (which needs white to invert against any bg). */
  .ax-product-reviews__quote {
    display: block;
    margin: 0 0 var(--padding-2xl) 0; /* 24px below quote */
    font-family: var(--font-h1--family);
    font-style: var(--font-h1--style);
    font-weight: var(--font-h1--weight);
    font-size: var(--font-h1--size);
    line-height: 0.9;
    letter-spacing: var(--font-h1--letter-spacing);
    text-transform: var(--font-h1--case);
    color: #fff;
    opacity: 0.6;
    mix-blend-mode: difference;
    user-select: none;
  }

  /* Rating row: stars + numerical value, 14px Sofia (text-tiny) */
  .ax-product-reviews__rating {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-block-end: var(--gap-lg); /* 16px below rating */
    font-size: var(--font-size--xs);
    line-height: 1;
  }

  .ax-product-reviews__stars {
    display: inline-flex;
    gap: 4px;
    line-height: 0;
    color: #fbce00; /* CREA yellow stars */
  }

  .ax-product-reviews__rating-value {
    line-height: 1;
  }

  /* Body — 20px Sofia (text-large), 100% line-height per CREA */
  .ax-product-reviews__text {
    margin: 0 0 var(--gap-lg) 0; /* 16px below body */
    font-size: 1.25rem; /* 20px desktop */
    line-height: 1;
    letter-spacing: 0;

    /* Mobile follows --font-size--xl scaling but the CREA mocks keep 20px;
       leave the rem value so it adapts gracefully on very small viewports. */
  }

  /* Meta: author + product name on the left, date pushed to the right */
  .ax-product-reviews__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-block-start: auto; /* pin to bottom of card */
    font-size: var(--font-size--xs);
    line-height: 1;
  }

  .ax-product-reviews__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .ax-product-reviews__author-name {
    font-weight: 700;
  }

  .ax-product-reviews__author-name,
  .ax-product-reviews__product-name {
    line-height: 1;
  }

  .ax-product-reviews__date {
    flex-shrink: 0;
    line-height: 1;
  }

  /* Placeholder shop reply — separated from the review by a 24px-spaced rule.
     Colors derive from the card scheme so the block adapts on dark/light cards. */
  .ax-product-reviews__reply {
    margin-block-start: var(--padding-2xl); /* 24px above the rule */
    padding-block-start: var(--padding-2xl); /* 24px below the rule */
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
  }

  .ax-product-reviews__reply-header {
    display: flex;
    align-items: center;
    gap: var(--gap-xs); /* 8px */
  }

  /* Avatar: foreground disc, background-colored "t" (svg fill: currentColor) */
  .ax-product-reviews__reply-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .ax-product-reviews__reply-author {
    font-family: var(--font-body--family); /* Sofia Pro */
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: var(--opacity-70); /* 0.7 */
  }

  .ax-product-reviews__reply-text {
    margin: var(--gap-xs) 0 0 0; /* 8px below the header */
    padding: 12px 16px;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    border-radius: 0 10px 10px 10px;
    font-size: var(--font-size--xs);
    line-height: 1.4;
  }
/* END_SNIPPET:ax-product-review-card */

/* START_SNIPPET:background-media (INDEX:178) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:179) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:180) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:182) */
/* Axome - .link style is underlined on the site (text links) */
  .link {
    text-decoration: underline;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }

  /* Axome - Link-style button (button block) is never underlined, all sections */
  .size-style.link {
    text-decoration: none;
  }

  /* Axome - Leading icon (button block). Inherits text color via .icon-default. */
  .button__icon {
    inline-size: var(--icon-size-sm);
    block-size: var(--icon-size-sm);
    flex-shrink: 0;
  }

  /* When the arrow is shown the arrow rules already lay the button out as a
     centered row, so the icon flows in automatically. Only the no-arrow / link
     cases need an explicit inline layout. */
  .size-style.button--no-arrow:has(.button__icon) {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xs);
  }

  .size-style.link--no-arrow:has(.button__icon) {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:183) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  /* Axome - PDP "Option to pay in installments. Learn more" line under the buy button */
  .installments-info {
    margin-block-start: 1rem; /* 16px desktop - design spec */
    font-size: 1rem; /* 16px - design spec */
    line-height: var(--font-paragraph--line-height);

    @media screen and (max-width: 749px) {
      margin-block-start: 1.5rem; /* 24px mobile - design spec */
    }
  }

  /* Axome - PDP buy button: "Add to cart" left, price right, no icon, no arrow, 4px radius, 45px height */
  .add-to-cart-button--pdp {
    --button-padding-inline: var(--padding-md);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    height: 2.8125rem; /* 45px - design spec */
    border-radius: 0.25rem; /* 4px - design spec */
    font-size: var(--font-size--sm);
    text-transform: none;
  }

  .product-form-buttons:has(.add-to-cart-button--pdp) button {
    padding-block: 0;
  }

  .add-to-cart-button--pdp .add-to-cart-text {
    justify-content: flex-start;
  }

  .add-to-cart-button--pdp .add-to-cart-price {
    font-size: var(--font-size--sm);
    font-weight: inherit;
    white-space: nowrap;
  }

  /* Axome - PDP quantity selector: 80px wide, 4px radius, black borders, same font as ATC */
  .product-details .quantity-selector-wrapper {
    flex: 0 0 80px;
    max-width: 80px;
  }

  .product-details .quantity-selector {
    --quantity-selector-width: 80px;

    height: 2.8125rem; /* 45px - design spec */
    border-color: var(--color-foreground);
    border-radius: 0.25rem; /* 4px - design spec */
    font-size: var(--font-size--sm);
    min-width: 0;
    width: 80px;
  }

  .product-details .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: auto;
    height: auto;
    align-self: stretch;
    flex: 0 0 auto;
    padding-inline: 0.4rem;
    border-radius: 0;
  }

  .product-details .quantity-selector :is(.quantity-minus, .quantity-plus) .svg-wrapper {
    width: 0.55rem;
  }

  .product-details .quantity-selector input[type='number'] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    font-size: var(--font-size--sm);
    padding-inline: 0;
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:184) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  /* Packshot view mode (collection page only).
     The <div> sits as a sibling of slideshow-component inside the same <a> wrapper.
     Hidden by default; revealed when [data-view-mode="packshot"] is set on <html>. */
  .card-gallery__packshot {
    display: none;
    width: 100%;
    aspect-ratio: var(--gallery-aspect-ratio);
  }

  .card-gallery__packshot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  [data-view-mode='packshot'] .card-gallery:has(.card-gallery__packshot) slideshow-component {
    display: none;
  }

  [data-view-mode='packshot'] .card-gallery .card-gallery__packshot {
    display: block;
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:185) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:187) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:188) */
.cart-items {
		--cart-item-media-width-min: 2.5rem;
		--cart-item-media-width-max: 7.5rem;

		container-name: cart-items;
		container-type: inline-size;
		width: 100%;
	}

	.cart-items-disabled {
		pointer-events: none;
	}

	.cart-page--empty .cart-items__wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-block-start: 0;
		text-align: center;
	}

	.cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.cart-items__table {
		width: 100%;
		border-spacing: 0;
	}

	.cart-items__table * {
		margin: 0;
	}

	.cart-items__table-row {
		--cart-item-price-width: 6rem;

		display: grid;
		grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
		grid-template-areas:
			'media details price'
			'media quantity price'
			'media error error';
		column-gap: var(--gap-md);
		align-items: start;
		padding-bottom: var(--cart-items-gap);
		margin-bottom: var(--margin-lg);
	}

	/* Cart drawer: separate grid areas for variants and unit price */
	.cart-drawer .cart-items__table-row--full-width-variants {
		.cart-items__details {
			display: contents;
		}

		.cart-items__product-info {
			grid-area: details;
		}

		.cart-items__variants-wrapper {
			grid-area: variants;

			&:empty {
				display: none;
			}

			p {
				margin: 0;
			}
		}

		.cart-items__unit-price-wrapper {
			grid-area: unit_price;
			font-size: var(--font-size--sm);
		}

		.cart-items__price {
			min-width: auto;
			width: max-content;
		}
	}

	.cart-items__table-row.cart-items__nested-line td:first-child {
		width: 60%;
		justify-self: right;
	}

	html:active-view-transition-type(page-navigation) .cart-items__table-row {
		/* stylelint-disable-next-line declaration-no-important */
		view-transition-name: none !important;
	}

	.cart-items__table-row.removing {
		overflow: hidden;
		animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
		animation-delay: var(--animation-speed);
	}

	@keyframes removeRow {
		0% {
			height: var(--row-height);
		}

		100% {
			opacity: 0;
			height: 0;
			padding-bottom: 0;
			margin-bottom: 0;
			border-color: transparent;
		}
	}

	.cart-items__table-row:last-child {
		padding-bottom: 0;
	}

	.cart-items--dividers .cart-items__table-row {
		border-bottom: 1px solid var(--color-border);
		margin-bottom: var(--cart-items-gap);
	}

	.cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
		border-bottom: none;
		margin-bottom: 0;
	}

	.cart-items--dividers .cart-items__table-row:last-of-type {
		border-block-end: none;
		padding-block-end: 0;
		margin-bottom: 0;
	}

	.cart-items__details {
		grid-area: details;
		color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
	}

	.cart-items__details > * + *,
	.cart-items__bundle li {
		margin-block-start: var(--margin-3xs);
	}

	.cart-items__details * {
		font-size: var(--font-size--sm);
	}

	.cart-items__details a {
		text-decoration: none;
	}

	.cart-items__title {
		font-size: var(--font-size--md);
		color: var(--color-foreground);
		text-transform: var(--product-title-case);
		display: block;
		margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
	}

	.cart-items__variants {
		display: block;
	}

	.cart-items__variant {
		display: inline;
	}

	.cart-items__variant dt,
	.cart-items__variant dd {
		display: inline;
		margin: 0;
	}

	.cart-items__quantity {
		grid-area: quantity;
		margin-block-start: 8px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--gap-xs);
		width: fit-content;
	}

	.cart-items__quantity-controls {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--gap-xs);
		width: fit-content;
	}

	.cart-items__quantity-controls > .volume-pricing-info {
		margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
	}

	.cart-items__quantity .quantity-selector {
		display: inline-flex;
		font-size: var(--font-size--sm);
		height: auto;
	}

	.cart-items__remove {
		background-color: transparent;
		color: var(--color-foreground);
		width: var(--minimum-touch-target);
		height: var(--minimum-touch-target);
		justify-content: center;
		box-shadow: none;
		padding: 0;
	}

	.cart-items__media {
		grid-area: media;
		padding: 0;
	}

	.cart-items__price {
		grid-area: price;
		min-height: unset;
		min-width: var(--cart-item-price-width);
		text-align: end;
		display: block;
		font-size: var(--font-size--sm);
		line-height: var(--line-height);
	}

	.cart-items__price-compare {
		display: block;
		font-size: var(--font-size--xs);
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
		text-decoration: line-through;
	}

	.cart-items__price-unit {
		font-size: var(--font-size--xs);
		padding-block-start: var(--padding-2xs);
	}

	.cart-items__media-container {
		display: flex;
		aspect-ratio: var(--ratio);
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.cart-items__media-image {
		aspect-ratio: inherit;
		object-fit: cover;
		object-position: center center;
		width: 100%;
		height: auto;
	}

	.cart-items__empty-button {
		margin-top: var(--margin-md);
		padding-inline: var(--padding-4xl);
		padding-block: var(--padding-lg);
	}

	/* Error message */
	.cart-items__error {
		display: flex;
		align-items: flex-start;
		width: 100%;
		grid-area: error;
		margin-block-start: var(--margin-xs);
		opacity: 1;
		overflow: hidden;
		transform: translateY(0);
		transition:
			opacity var(--drawer-animation-speed) var(--animation-easing),
			transform var(--drawer-animation-speed) var(--animation-easing);

		@starting-style {
			opacity: 0;
			transform: translateY(-0.5rem);
		}
	}

	.cart-item__error {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 0.5rem;
		padding: 0.25rem 0.5rem;
		border: 1px solid #ec001a;
		border-radius: 0.25rem;
		font-size: var(--font-size--xs);
		line-height: 1;
	}

	.cart-item__error-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		background: #ec001a;
		color: var(--color-background);
		font-size: var(--font-size--xs);
		font-weight: 500;
		line-height: normal;
	}

	@container cart-items (min-width: 720px) {
		/* Cart page: original layout */
		.cart-items__table-row {
			--cart-item-price-width: 6rem;

			grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
			grid-template-rows: min-content 1fr;
			grid-template-areas:
				'media details quantity price'
				'media details error error';
		}

		.cart-items__quantity,
		.cart-items__price {
			grid-area: initial;
		}

		.cart-items__quantity {
			margin-top: 0;
		}

		.cart-items__price {
			min-height: var(--minimum-touch-target);
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}

		/* Cart drawer: separate areas for variants and unit price */
		.cart-drawer .cart-items__table-row--full-width-variants {
			grid-template-rows: min-content min-content min-content 1fr;
			grid-template-areas:
				'media details quantity price'
				'media variants variants variants'
				'media unit_price unit_price unit_price'
				'media error error error';

			.cart-items__quantity,
			.cart-items__price {
				grid-area: initial;
			}
		}
	}

	.cart__subtotal-container,
	.cart__total-container {
		display: flex;
		flex-direction: column;
	}

	.cart__total-container {
		row-gap: var(--gap-2xs);

		&.cart__total-container--has-installments {
			row-gap: var(--gap-xs);
		}
	}

	.cart__subtotal-container:empty {
		display: none;
	}

	.cart__summary-totals {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xl);
		width: 100%;
		border-block-start: none;

		&:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
			padding-block-start: 0;
			border-block-start: none;
		}

		@media screen and (min-width: 750px) {
			padding-block-start: 0;
		}
	}

	.cart__subtotal-container,
	.cart__subtotal-container * {
		font-size: var(--font-size--sm);
	}

	.cart__total {
		font-weight: var(--font-weight-bold);
	}

	.cart__total-label {
		font-size: var(--font-size--sm);
	}

	.cart__total-value {
		font-size: var(--font-size--xl);

		@media screen and (max-width: 749px) {
			font-size: var(--font-size--lg);
		}
	}

	.cart-primary-typography {
		font-family: var(--cart-primary-font-family);
		font-style: var(--cart-primary-font-style);
		font-weight: var(--cart-primary-font-weight);
	}

	.cart-secondary-typography {
		font-family: var(--cart-secondary-font-family);
		font-style: var(--cart-secondary-font-style);
		font-weight: var(--cart-secondary-font-weight);
	}

	.cart__ctas {
		width: 100%;
		display: grid;
		gap: var(--checkout-button-gap);
		grid-auto-flow: row;
		grid-template-columns: 1fr;
	}

	.cart__additional-checkout-buttons {
		width: 100%;
	}

	shopify-accelerated-checkout-cart {
		--shopify-accelerated-checkout-inline-alignment: center;
		--shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
		--shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
	}

	/* Remove animation */
	.remove-icon-bottom,
	.remove-icon-top {
		transition: transform var(--animation-speed) var(--animation-easing);
	}

	.cart-items__remove:hover .remove-icon-top {
		transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
	}

	.cart-items__remove:is(:hover, :active) .remove-icon-bottom {
		transform: translateY(var(--icon-stroke-width));
	}

	.cart-items__table-row.removing .remove-icon-bottom {
		transform: translateY(0);
	}

	.cart-items__table-row.removing .remove-icon-top {
		animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
	}

	@keyframes removeButtonClickedIconTop {
		50% {
			transform: translate(0, calc(-1 * var(--icon-stroke-width)));
		}

		100% {
			transform: translate(0, 0);
		}
	}

	.cart-items__properties {
		display: block;
		margin-block-start: var(--margin-2xs);
	}

	.cart-items__property {
		display: block;
	}

	.cart-items__properties dt,
	.cart-items__properties dd {
		display: inline;
		margin: 0;
		overflow-wrap: break-word;
	}

	@media screen and (min-width: 750px) {
		.cart-items .quantity-selector {
			--quantity-selector-width: 105px;
			height: var(--button-size-md);
			width: var(--quantity-selector-width);
		}

		.cart-items .quantity-selector input {
			max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
		}
	}

	@media screen and (prefers-reduced-motion: no-preference) {
		html:active-view-transition-type(empty-cart-drawer) {
			.cart-items__empty-button,
			.cart__checkout-button {
				view-transition-name: cart-drawer-primary-action;

				& > .button-text {
					view-transition-name: cart-drawer-primary-action-text;
				}
			}
		}
	}

	::view-transition-old(cart-drawer-primary-action-text),
	::view-transition-new(cart-drawer-primary-action-text) {
		height: 100%;
		object-fit: none;
		overflow: clip;
		overflow-clip-margin: 1em;
	}

	::view-transition-old(cart-drawer-primary-action-text) {
		animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
	}
	::view-transition-new(cart-drawer-primary-action-text) {
		animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
	}

	::view-transition-old(cart-drawer-primary-action),
	::view-transition-new(cart-drawer-primary-action) {
		height: 100%;
	}

	::view-transition-group(cart-drawer-primary-action-text),
	::view-transition-group(cart-drawer-primary-action) {
		animation-duration: var(--spring-d300-b0-duration);
		animation-timing-function: var(--spring-d300-b0-easing);
	}

	@keyframes cart-drawer-primary-action-text {
		from {
			filter: blur(3px);
			opacity: 0;
		}
		to {
			filter: none;
			opacity: 1;
		}
	}

	/* Axome - Sous-titre variante (maquette) */
	.cart-items__subtitle {
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-normal, 1.43);
		opacity: 0.6;
		margin: 6px 0 0;
	}
	/* Axome - Pills méta (maquette) : Delivery time / Size */
	.cart-items__meta-pills {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-2xs);
		margin-block-start: var(--gap-2xs);
	}
	.cart-items__pill {
		display: inline-flex;
		align-items: baseline;
		gap: 0.25rem;
		background: var(--color-neutral-light);
		border-radius: 4px;
		padding: 0.25rem 0.5rem;
		/* Axome - ribbons (Delivery time + Size) : tiny = 14px desktop / 12px mobile */
		font-size: var(--font-size--xs);
		line-height: 1.2;
	}
	/* `.cart-items__details *` force sm (16px desktop) sur ces spans → on override à
	   spécificité supérieure (0,2,0) pour garder les ribbons en tiny (14px dsk / 12px mobile). */
	.cart-items__meta-pills .cart-items__pill,
	.cart-items__meta-pills .cart-items__pill-label,
	.cart-items__meta-pills .cart-items__pill-value {
		font-size: var(--font-size--xs);
	}
	.cart-items__pill-label { opacity: 0.6; }
	.cart-items__pill-value { font-weight: 400; }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:collection-card (INDEX:191) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    /* 32px desktop / 24px mobile */
    padding: var(--padding-4xl);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xl);
    }
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:delivery-term-card (INDEX:195) */
.delivery-term {
    position: relative;
    display: flex; /* the inset flex-fills the card → symmetric 8px frame, equal-height siblings */
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-neutral-light, #f2f0ec);
  }

  .delivery-term__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .delivery-term__inset {
    position: relative; /* above the media; in flow → the card grows with content (no clipping) */
    flex: 1 1 auto;
    min-width: 0;
    margin: 8px; /* even frame on all sides */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    padding: var(--padding-lg);
    text-align: center;
    background-color: var(--color-background, #fff);
    border-radius: 8px;
  }

  .delivery-term__icon {
    display: inline-flex;
  }

  .delivery-term__icon img {
    width: auto;
    height: 48px;
  }

  .delivery-term__title {
    margin: 0;
    text-transform: uppercase;
  }

  .delivery-term__content.rte {
    font-size: var(--font-size--sm);
  }

  .delivery-term__content.rte p {
    margin: 0;
  }
/* END_SNIPPET:delivery-term-card */

/* START_SNIPPET:divider (INDEX:196) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:197) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:198) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:199) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:200) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:204) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:206) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:207) */
/* Axome - optional pixel min-height (mobile-first; desktop overrides). Lets a
     group keep at least N px tall while still growing with its content. */
  .group-block {
    min-block-size: var(--size-style-min-block-size-mobile, var(--size-style-min-block-size, auto));
  }

  @media screen and (min-width: 750px) {
    .group-block {
      min-block-size: var(--size-style-min-block-size, auto);
    }
  }

  /* A min-height means "at least this tall, but grow with the content": let it
     expand even when height is set to fill/custom (prevents centered content
     from overflowing past the box and hiding the title). The content wrapper
     fills the box so its own vertical alignment (top/center/bottom) still works. */
  .group-block[style*='--size-style-min-block-size'] {
    block-size: auto;
    display: flex;
    flex-direction: column;
  }

  .group-block[style*='--size-style-min-block-size'] > .group-block-content {
    flex: 1 1 auto;
  }

  /* If a min-height card lives inside a fixed-height group container (e.g. a row at
     45% height), the container must grow to the card — otherwise the taller card
     overflows its row (centered) and covers sibling content above it, like a section
     heading. Let the container expand instead of clipping/overlapping. */
  .group-block:has(> .group-block-content > .group-block[style*='--size-style-min-block-size']) {
    block-size: auto;
  }

  .group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:208) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  /* Axome - Secondary menu is now a `header-menu` component (mega-menu capable), rendered left of the
     account/cart group. It must sit centered inline like the old secondary links — NOT span the full
     row height the way the main menu does — otherwise the top-row full-height mechanics push the text
     to the top of the row and it stops aligning with the account/cart. We therefore force auto height
     and center, and drop the header-padding bottom spacer that shifts top-row entries up. */
  .header-menu--secondary,
  .header-menu--secondary .header-menu__inner,
  .header-menu--secondary .menu-list {
    display: flex;
    align-items: center;
    height: auto;
  }

  .header-menu--secondary .menu-list__list-item,
  .header-menu--secondary .menu-list__link {
    height: auto;
  }

  /* Remove the top-row header-padding spacer (.menu-list__list-item::after) that offsets entries up. */
  .header-menu--secondary .menu-list__list-item:not([slot='overflow'])::after {
    content: none;
  }

  .header-menu--secondary .menu-list__list {
    gap: var(--gap-md);
  }

  /* Secondary entries keep the compact look: no per-title inline padding (the list gap handles spacing). */
  .header-menu--secondary .menu-list__link-title {
    padding-inline: 0;
  }

  .header-actions__store-locator {
    align-items: center;
  }

  /* 1×6px separator between the secondary menu and the store-locator/account/cart group.
     Uses currentColor so the bar follows the active header scheme (white on dark hero, black on sticky/solid). */
  .header-actions__separator {
    display: inline-block;
    width: 1px;
    height: 6px;
    background: currentColor;
    flex-shrink: 0;
    align-self: center;
  }

  /* Axome - Mobile: hide the separator, store locator, account button and inline search duplicate.
     These items move into the mobile drawer (see header-drawer.liquid). Cart stays visible.
     The secondary menu (`.header-menu--secondary`) is already hidden on mobile by the global
     `.header-menu` display rule (only shown at >=1200px with data-menu-style='menu'). */
  @media screen and (max-width: 1199px) {
    header-actions .header-actions__separator,
    header-actions .header-actions__store-locator,
    header-actions .account-button,
    .search-action--hidden-on-menu {
      display: none;
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }


  header-actions {
    display: flex;

    @media screen and (max-width: 1199px) {
      justify-self: flex-end;
    }
  }

  /* Axome - Text styles apply at all breakpoints so the mobile search (rendered in the bottom row) picks up the uppercase/font settings */
  .header-actions__text-style {
    font-size: var(--header-actions-font-size);
    font-family: var(--header-actions-font-family);
    font-weight: var(--header-actions-font-weight);
    text-transform: var(--header-actions-text-case);
  }

  @media screen and (min-width: 1200px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 1200px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:209) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* Axome - Level-2 "see all from {parent}" link, sitting between the child links and the push zones */
  .menu-drawer__see-all {
    display: inline-flex;
    width: fit-content;
    padding: var(--padding-sm) var(--drawer-padding);
    font-family: var(--menu-parent-font-family);
    font-size: var(--menu-parent-font-size);
    font-weight: var(--menu-parent-font-weight);
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Axome - Level-2 mega menu push zones — mirrors the desktop mega-menu-list zones 2 & 3,
     stacked vertically for the drawer (see snippets/mega-menu-drawer-content.liquid) */
  .menu-drawer__mega {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--padding-md) var(--drawer-padding) var(--padding-xl);
  }

  .menu-drawer__mega-zone {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .menu-drawer__mega-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md);
  }

  .menu-drawer__mega-heading,
  .menu-drawer__mega-link {
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--2xs);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .menu-drawer__mega-link {
    white-space: nowrap;
    text-decoration: none;
  }

  .menu-drawer__push-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
  }

  /* Axome - Level-2 full-bleed separators (after the back button, after the "see all" entry, and
     between the zone-2 image(s) and the zone-3 push). Hidden by default — they only render on the
     mobile full-screen submenu (see the max-width:749px block); on the desktop-overflow drawer they
     stay collapsed so its layout (and the .menu-drawer__mega gap) is untouched. */
  .menu-drawer__submenu-divider {
    display: none;
  }

  /* The header trigger's CLOSE label is hidden by default; the mobile @media block below
     swaps MENU↔CLOSE while the menu is open. */
  .header-drawer-label--close {
    display: none;
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 1200px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 1200px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 1200px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 1200px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 1200px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 1200px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  /* Axome - Highlight pill on top-level mobile menu entries, mirroring the desktop megamenu highlight.
     Uses the same --highlight-bg / --highlight-text vars set inline on <header-component>. */
  .menu-drawer__menu-item--highlighted .menu-drawer__menu-item-text {
    position: relative;
    color: var(--highlight-text);
    isolation: isolate;
    /* Hug the glyphs (the entry's line-height would otherwise inflate the pill) so the 4px-padding
       chip stays tight, matching the desktop highlight. */
    line-height: 1;
    /* The base rule sets overflow:hidden (for ellipsis); that would clip the pill's 4px overhang
       and its rounded corners, so the highlighted entry must let it overflow. */
    overflow: visible;
  }

  .menu-drawer__menu-item--highlighted .menu-drawer__menu-item-text::before {
    content: '';
    position: absolute;
    inset: -4px; /* 4px padding around the text, mirroring the desktop highlight pill */
    background: var(--highlight-bg);
    border-radius: 4px;
    z-index: -1;
  }

  /* Axome - On a transparent header the highlight scheme is the over-hero scheme (light foreground),
     so --highlight-bg is light and the pill would be invisible on the opaque drawer. Invert it (like
     the desktop sticky-active state) so the pill stays a solid dark chip with light text. */
  .header[transparent] .menu-drawer__menu-item--highlighted .menu-drawer__menu-item-text {
    color: var(--highlight-bg);
  }

  .header[transparent] .menu-drawer__menu-item--highlighted .menu-drawer__menu-item-text::before {
    background: var(--highlight-text);
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Axome - Collection product count on drawer menu links (levels 2 & 3), mirroring the desktop
     mega menu (.mega-menu__link-count in sections/header.liquid). Title + count share an inline-flex
     label so the count hugs the title; on sub-panel <summary> rows the forward caret stays pinned
     to the far right via the row's space-between. */
  .menu-drawer__menu-item-label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gap-2xs);
    min-inline-size: 0;
  }

  /* Small, dimmed digit sitting just after the title; inherits the link's weight. */
  .menu-drawer__menu-item-count {
    flex-shrink: 0;
    font-size: var(--font-size--2xs); /* 12px */
    opacity: var(--opacity-60);
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* Axome - Level-2 back button: a long arrow flipped to point back, in place of the parent
     entry name. It keeps the asset's native 43:8 aspect (same dimensions the .button long arrow
     uses) rather than the square icon box the other drawer icons sit in. */
  .menu-drawer__back-button > .menu-drawer__back-arrow {
    width: auto;
    height: auto;
    margin-right: var(--gap-sm);
  }

  .menu-drawer__back-arrow svg {
    width: 2.6875rem;
    height: 0.5rem;
    fill: currentColor;
    transform: scaleX(-1);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  /* Axome - Drawer footer block: secondary menu (column) + 1px divider + store/account (column) */
  .menu-drawer__footer-links {
    margin-block-start: auto;
    padding-block: var(--padding-xl);
    padding-inline: var(--padding-lg);
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .menu-drawer__footer-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .menu-drawer__footer-actions {
    padding-block-start: var(--padding-lg);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .menu-drawer__footer-link {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-decoration: none;
  }

  .menu-drawer__footer-link:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  /* Axome - Full-width rule between the main menu and the secondary menu (mobile-only redesign;
     shown in the @media below). Collapsed on the desktop-overflow drawer, like the panel dividers. */
  .menu-drawer__menu-divider {
    display: none;
  }

  /* Axome - Mobile (≤1199px) menu redesign: the menu opens full-width (100vw) BELOW the full
     header (logo/menu/cart + search rows), which stay visible, and fills the remaining viewport
     height. Placed last in source order so it overrides the base rules on mobile. Desktop (≥1200px)
     — including the overflow-fallback drawer — is intentionally untouched.
     --mobile-drawer-top is set by header-drawer.js at open time (the header's bottom edge, stable
     because scroll is locked); it falls back to the live --header-height kept on <body> by header.js. */
  @media screen and (max-width: 1199px) {
    .menu-drawer {
      /* 20px inline inset for everything in the drawer (entries, see-all, footer, divider bleed) so
         the whole panel shares one consistent margin (--padding-xl = 1.25rem = 20px). */
      --drawer-padding: var(--padding-xl);

      inline-size: 100vw;
      max-inline-size: none;
      inset-inline-start: 0;
      inset-block-start: var(--mobile-drawer-top, var(--header-height));
      block-size: calc(100dvh - var(--mobile-drawer-top, var(--header-height)));
      border-right: none;
      box-shadow: none;
    }

    /* The level-2 submenu overlays the (now shorter) drawer, not the full viewport. */
    .menu-drawer__submenu {
      block-size: 100%;
    }

    /* The drawer is full-width (100vw), so the backdrop is never visible — and as a sibling of
       .menu-drawer it can't read --mobile-drawer-top, so it would dim the bottom of the header.
       Drop it entirely on mobile (closing is handled by the header CLOSE label / Escape / Back). */
    .menu-drawer__backdrop {
      display: none;
    }

    /* No forward caret on the top-level entries (per the mockups). */
    .menu-drawer__menu-item--mainlist .icon-caret--forward {
      display: none;
    }

    /* Axome - Drop the staggered slide-in on the top-level entries on mobile (per request): they
       appear at once with the drawer instead of animating in one by one. */
    .menu-drawer-container[open] .menu-drawer__menu-item--mainlist.menu-drawer__animated-element {
      animation: none;
    }

    /* The back button label is tiny 12px too, to match the entries. */
    .menu-drawer__back-button {
      font-size: var(--font-size--xs);
    }

    /* ── Uniform entry spacing across every panel level ─────────────────────────────────────
       All panel lists use one system: a flex column with a 16px gap (--gap-lg) and a 20px inset
       all around (inline via --drawer-padding above, block via --padding-xl), replacing the
       desktop per-item min-heights and margins. Each entry <a>/<summary> keeps its label hugging
       the glyphs, inside the gap. */
    .menu-drawer__menu.has-submenu,
    .menu-drawer__menu--childlist {
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg);
      margin-block: 0;
    }

    .menu-drawer__menu--childlist {
      padding-block: var(--padding-xl);
    }

    /* Level-1 list: keep the 20px top inset, but drop the bottom padding so the secondary menu
       follows on directly — the footer block below provides the same 16px gap (not a 20px break). */
    .menu-drawer__menu.has-submenu {
      padding-block: var(--padding-xl) 0;
    }

    /* Drop the desktop min-heights / per-item margins so the gap is the only vertical spacing. */
    .menu-drawer__menu.has-submenu > .menu-drawer__list-item,
    .menu-drawer__menu--childlist > .menu-drawer__list-item,
    .menu-drawer__menu-item--mainlist {
      min-height: 0;
      margin-block: 0;
    }

    /* The 16px gap alone must control the spacing: drop the entry <a>'s tap padding and let the label
       hug its glyphs (line-height auto) — otherwise the <a> padding + the fixed line-height inflate
       the visible gap beyond 16px. */
    .menu-drawer__menu-item--mainlist,
    .menu-drawer__menu-item--parent,
    .menu-drawer__menu-item--child {
      padding-block: 0;
    }

    .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text,
    .menu-drawer__menu-item--parent .menu-drawer__menu-item-text,
    .menu-drawer__menu-item--child .menu-drawer__menu-item-text {
      line-height: normal;
    }

    /* Axome - Sub-panel triggers keep their forward caret, but its base tap padding
       (padding-block: --padding-lg) would inflate the row past the 16px rhythm — zero it. */
    .menu-drawer__submenu summary.menu-drawer__menu-item > .svg-wrapper {
      padding-block: 0;
    }

    /* Keep the highlight chip hugging its glyphs (overrides the line-height above). */
    .menu-drawer__menu-item--highlighted .menu-drawer__menu-item-text {
      line-height: 1;
    }

    /* The header trigger label swaps MENU → CLOSE while the menu is open. */
    details.menu-open .header-drawer-label--menu {
      display: none;
    }

    details.menu-open .header-drawer-label--close {
      display: inline;
    }

    /* Closing is handled by the header CLOSE label, so drop the in-panel X (level 1 and level 2).
       Level 2 keeps only its Back button, matching the mockups. */
    .menu-drawer__close-button {
      display: none;
    }

    /* Footer: only the store/account actions remain (the secondary menu moved into the nav above).
       footer-links grows to fill the remaining height so the actions pin to the bottom via
       margin-auto. Inline padding matches the entries (--drawer-padding). */
    .menu-drawer__footer-links {
      margin-block-start: 0;
      flex: 1 1 auto;
      padding-block: 0;
      padding-inline: var(--drawer-padding);
      gap: var(--gap-lg);
    }

    /* The utility (language/country) block sits after the footer; when empty it must not add a
       bottom margin that pushes the store/account row off the bottom edge. */
    .menu-drawer__utility-links {
      margin-block: 0;
    }

    /* Full-width 1px rule between the main menu and the secondary menu. Spans edge-to-edge (the
       entries carry the 20px inline inset, the rule does not) and owns the 16px rhythm above/below
       via its block margin. */
    .menu-drawer__menu-divider {
      display: block;
      block-size: 1px;
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-20));
      margin-block: var(--gap-lg);
    }

    /* The secondary list follows the divider, which already owns the gap above — drop its top inset
       (the shared .menu-drawer__menu.has-submenu rule would otherwise add the 20px level-1 inset). */
    .menu-drawer__menu--secondary.has-submenu {
      padding-block: 0;
    }

    /* Store / account actions pinned to the bottom, on one row, justified to the edges,
       topped by the same 1px rule. */
    .menu-drawer__footer-actions {
      margin-block-start: auto;
      flex-direction: row;
      justify-content: space-between;
      /* 16px above (below the 1px rule) and a single 20px gap to the drawer's bottom edge. */
      padding-block: var(--padding-lg) var(--padding-xl);
      border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    }

    .menu-drawer__footer-actions .menu-drawer__footer-link {
      font-size: var(--font-size--xs);
      text-transform: uppercase;
    }

    /* The submenu's store/account actions aren't wrapped in .menu-drawer__footer-links, so give them
       the same inline padding as the rest of the submenu content (--drawer-padding) to stay aligned. */
    .menu-drawer__submenu .menu-drawer__footer-actions {
      padding-inline: var(--drawer-padding);
    }

    /* Level-2 submenu separators: 1px full-bleed rules. The one inside .menu-drawer__mega bleeds
       past the zone's inline padding so all three align edge-to-edge (per the mockup). */
    .menu-drawer__submenu-divider {
      display: block;
      flex-shrink: 0;
      block-size: 1px;
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-20));
    }

    .menu-drawer__mega .menu-drawer__submenu-divider {
      margin-inline: calc(-1 * var(--drawer-padding));
    }

    /* Level-2 child entries AND level-3 sub-entries: identical styling — tiny 12px, natural case,
       full-foreground colour (the parent links are dimmed to 0.7 alpha by default, which made the
       entries look greyed-out next to their sub-entries). */
    .menu-drawer__submenu .menu-drawer__menu-item--parent,
    .menu-drawer__submenu .menu-drawer__menu-item--child {
      font-size: var(--font-size--xs);
      text-transform: none;
      color: rgb(var(--color-foreground-rgb));
    }

    .menu-drawer__submenu .menu-drawer__menu-item--parent:hover,
    .menu-drawer__submenu .menu-drawer__menu-item--child:hover {
      color: rgb(var(--color-foreground-rgb));
    }

    /* The last entry — "see all from {parent}" — stays uppercase + underlined, at the same xs size. */
    .menu-drawer__see-all {
      font-size: var(--font-size--xs);
      text-transform: uppercase;
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:header-rating-badge (INDEX:213) */
.header-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: rgb(var(--color-foreground-rgb) / 0.2);
    border-radius: 4px;
    color: var(--color-foreground);
    font-size: 12px;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    align-self: center;
  }

  /* Axome - Link variant: keep the badge look, no underline, subtle hover feedback. */
  a.header-rating-badge {
    text-decoration: none;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  a.header-rating-badge:hover,
  a.header-rating-badge:focus-visible {
    background: rgb(var(--color-foreground-rgb) / 0.3);
  }

  .header-rating-badge__star {
    width: 12px;
    height: 11px;
    flex-shrink: 0;
    display: block;
  }

  /* Axome - On mobile, .header__column becomes display:contents so the column's flex-end is lost.
     Push the badge to the right edge of the flex parent manually. */
  @media screen and (max-width: 1199px) {
    .header-rating-badge {
      margin-inline-start: auto;
    }
  }
/* END_SNIPPET:header-rating-badge */

/* START_SNIPPET:jumbo-text (INDEX:219) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:222) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:223) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:224) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:234) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:235) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }

  /* Axome - Underline variant: full-width borders, no arrows, simple underlined links */
  .pagination--underline {
    margin-block-start: 48px;
    margin-block-end: 0;
    padding: 15px 0;
    border-block: 1px solid var(--color-grey, #c9c9c9);

    /* Full-bleed: extend borders to viewport edges */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .pagination--underline .pagination__list {
    gap: 8px;
    justify-content: center;
  }

  .pagination--underline .pagination__item {
    width: auto;
    aspect-ratio: auto;
  }

  .pagination--underline .pagination__link {
    width: auto;
    height: auto;
    font-size: 14px;
    border-radius: 0;
    padding: 0 2px;
    background: transparent;
    transition: text-decoration-color var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination--underline .pagination__link--current {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--color-foreground);
    cursor: default;
  }

  .pagination--underline .pagination__link--page:not(.pagination__link--current):hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Disable existing pseudo-element hover/current indicators in this variant */
  .pagination--underline .pagination__link::before,
  .pagination--underline .pagination__list::before {
    content: none;
  }

  @media screen and (min-width: 750px) {
    .pagination--underline .pagination__list {
      gap: 16px;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination--underline .pagination__link {
      font-size: 14px;
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:236) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:240) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible), &:has(.product-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:241) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:243) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card-horizontal (INDEX:244) */
product-card-horizontal {
    /* Override per context — e.g. .cart-drawer-upsell__slide sets --product-card-horizontal-media-width */
    --product-card-horizontal-media-width: 5rem; /* 80px — maquette */
    --product-card-horizontal-add-size: 1.125rem;

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-lg); /* image ↔ texte */
    padding: 0 var(--padding-lg) 0 0; /* place pour le séparateur droit */
    border: 0;
    border-right: 1px solid #c0bbb4; /* séparateur entre cartes (maquette) */
    min-width: 0;
  }

  .product-card-horizontal__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
  }

  /* Image stretches to card height (mirrors Figma `self-stretch`) */
  .product-card-horizontal__media {
    position: relative;
    flex-shrink: 0;
    width: var(--product-card-horizontal-media-width);
    aspect-ratio: 1 / 1; /* carré (client) */
    align-self: center;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    background-color: rgb(0 0 0 / 0.04);
  }

  .product-card-horizontal__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-card-horizontal__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  /* Text block vertically centered next to the image; + button at bottom-right */
  .product-card-horizontal__text {
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
    min-width: 0;
  }

  .product-card-horizontal__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-heading);
    letter-spacing: -0.0125rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .product-card-horizontal__subtitle {
    font-size: var(--font-size--xs);
    line-height: 1.2;
    color: var(--color-heading);
    opacity: 0.6;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
		margin-top: 4px;
  }

  .product-card-horizontal__price {
		margin-top: 4px;
  }  
	
	.product-card-horizontal__price .price {
    font-size: var(--font-size--xs);
    font-weight: 400;
    color: var(--color-heading);
    line-height: 1;
    margin: 0;
  }

  .product-card-horizontal__price .price-item--sale.price {
    font-weight: 500;
  }

  .product-card-horizontal__price .compare-at-price {
    font-size: var(--font-size--xs);
    font-weight: 400;
    color: var(--color-heading);
    opacity: 1;
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
  }

  .product-card-horizontal__price .price__sale:not(.price__hidden) {
    display: flex;
    align-items: baseline;
    gap: var(--gap-2xs);
  }

  /* Inline form wrapper — anchored to bottom-right of the card */
  .product-card-horizontal__form {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    align-self: flex-end;
    position: relative;
    z-index: 2;
  }

  .product-card-horizontal__form form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  /* The "+" button — explicit, conflict-free */
  .product-card-horizontal__add {
    --icon-stroke-width: 1.75;

    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--product-card-horizontal-add-size);
    height: var(--product-card-horizontal-add-size);
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: var(--style-border-radius-card);
    background-color: var(--color-violet);
    color: var(--color-background);
    cursor: pointer;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .product-card-horizontal__add:hover,
  .product-card-horizontal__add:focus-visible {
    opacity: 0.85;
  }

  .product-card-horizontal__add .svg-wrapper {
    display: inline-flex;
    width: 0.625rem;
    height: 0.625rem;
  }

  .product-card-horizontal__add svg {
    width: 100%;
    height: 100%;
  }

  /* Scale down the global spinner + checkmark to fit the tiny "+" button.
     The base styles in base.css set them to icon-size-md / 32px — too large here. */
  .product-card-horizontal__add .add-to-cart__loading,
  .product-card-horizontal__add .add-to-cart__added {
    width: 100%;
    height: 100%;
  }

  .product-card-horizontal__add .add-to-cart__spinner {
    width: 0.625rem;
    height: 0.625rem;
    border-width: 1.5px;
  }

  .product-card-horizontal__add .add-to-cart__added-icon {
    width: 0.625rem;
    height: 0.625rem;
  }

  /* Toggle visibility based on the button state (loading / added)
     so we override the global selectors that target `.add-to-cart-text`. */
  .product-card-horizontal__add[data-state='loading'] .product-card-horizontal__add-icon {
    opacity: 0;
  }

  .product-card-horizontal__add[data-added='true'] .product-card-horizontal__add-icon {
    opacity: 0;
  }
/* END_SNIPPET:product-card-horizontal */

/* START_SNIPPET:product-card (INDEX:245) */
.product-card {
    width: 100%;
  }

  .product-card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  /* Force product card image to 1/1 square ratio.
     !important needed because card-gallery.liquid sets --gallery-aspect-ratio
     as an inline style (block image_ratio setting), which beats class selectors. */
  .product-card .card-gallery {
    --gallery-aspect-ratio: 1 / 1 !important;
    border-radius: 8px;

    /* Axome - The card-gallery carries the .spacing-style class but only emits its own
       padding reset when it has explicit padding settings (see card-gallery.liquid).
       Without that reset it inherits the parent section's --padding-*(-mobile) variables
       and re-applies them as gallery padding. In a section with mobile padding (e.g. the
       product-recommendations carousel) this broke the card on mobile: the gallery grew
       taller than its square image, detaching the image from the title. Product card
       galleries never want their own padding, so we zero the inherited variables here.

       NB: use 0px, not a unitless 0. The product-badges positioning formula does
       calc(var(--badge-inset) + var(--padding-block-start)); a unitless 0 makes that
       calc(16px + 0), which is invalid CSS, so top/left are dropped and the badge falls
       to its static position (bottom-left of the gallery) instead of the intended corner. */
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    --padding-block-start-mobile: 0px;
    --padding-block-end-mobile: 0px;
    --padding-inline-start-mobile: 0px;
    --padding-inline-end-mobile: 0px;
  }

  /* Force badges 16px from gallery edges (overrides product-badges-styles --badge-inset formula) */
  .product-card .product-badges {
    --badge-inset: 16px;
  }

  /* Review badge — top-right of the gallery, adaptive color via mix-blend-mode: difference
     so the icon and value stay legible on any background image. */
  .product-card__review {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: var(--layer-raised);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f7f7f7;
    font-size: 16px;
    line-height: 1;
    mix-blend-mode: difference;
    pointer-events: none;
  }

  .product-card__review-value {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
  }

  @media screen and (max-width: 749px) {
    .product-card__review {
      font-size: 14px;
    }
  }

  /* Slideshow scroll progress bar — straddles the bottom edge of the image (1px in, 1px out),
     transparent track, fills with #000 as the user scrolls through media. The first slide already
     counts (--progress-start-scale = 1/N set inline on the fill element). */
  .product-card .product-card__media {
    position: relative;
    /* timeline-scope lifts --gallery-scroll up so the progress fill (outside .card-gallery) can see it */
    timeline-scope: --gallery-scroll;
  }

  .product-card slideshow-slides {
    scroll-timeline-name: --gallery-scroll;
    scroll-timeline-axis: inline;
  }

  .product-card .card-gallery__progress {
    position: absolute;
    bottom: -1px;
    inset-inline: 10px;
    height: 2px;
    background-color: transparent;
    z-index: var(--layer-raised);
    pointer-events: none;
    overflow: hidden;
  }

  .product-card .card-gallery__progress-fill {
    height: 100%;
    width: 100%;
    background-color: #000;
    transform-origin: left;
    transform: scaleX(var(--progress-start-scale, 0));
    animation-name: card-gallery-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-timeline: --gallery-scroll;
    animation-duration: auto;
  }

  @keyframes card-gallery-progress {
    from { transform: scaleX(var(--progress-start-scale, 0)); }
    to { transform: scaleX(1); }
  }

  /* Layout: gallery full-width, then title (col 1) + price (col 2, right) on same row, then tags full-width */
  .product-card .product-card__content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--gap-lg);
    row-gap: var(--gap-lg);
  }

  .product-card .product-card__content > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* Title link: display:contents so the <h3> becomes the actual grid item */
  .product-card .product-card__title-link {
    display: contents;
    text-decoration: none;
    color: inherit;
  }

  .product-card .product-card__title {
    grid-column: 1 / 2;
    min-width: 0;
    margin: 0;
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: var(--font-paragraph--weight);
    font-size: var(--font-size--xl);
    line-height: var(--font-paragraph--line-height);
    letter-spacing: var(--font-paragraph--letter-spacing);
    text-transform: var(--font-paragraph--case);
  }

  /* Price aligned right, font-size sm, regular weight */
  .product-card .product-card__content > product-price {
    grid-column: 2 / 3;
    justify-self: end;
    font-size: var(--font-size--sm);
    font-weight: normal;
    text-align: right;
  }

  .product-card .product-card__content > product-price * {
    font-weight: normal;
  }

  /* 8px gap between sale price and compare-at price.
     row-reverse displays compare-at first then sale (price.liquid emits sale first by default).
     :not(.price__hidden) keeps the existing display:none toggle working. */
  .product-card .product-card__content > product-price .price__sale:not(.price__hidden),
  .product-card .product-card__content > product-price .price__regular:not(.price__hidden) {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--gap-xs);
  }

  /* Product tags list — full width, space-between with dot separator, xs size, black 60% */
  .product-card__secondary-title {
    display: flex;
    margin: 0;
    width: 100%;
    font-size: var(--font-size--xs);
    color: rgb(0 0 0 / var(--opacity-60));
    margin-block-start: calc(var(--gap-xs) - var(--gap-lg));
  }

  .product-card__tag:not(:last-child)::after {
    content: '·';
    margin-inline-start: var(--gap-xs);
  }

  /* Slideshow arrows hover-only on desktop, hidden on mobile.
     Reveal whenever the product-card itself is hovered/focused — more reliable than
     the base.css selector which relies on a strict child chain that misses cases
     where the cursor is on the image area but not directly over slideshow-component. */
  .product-card slideshow-arrows .slideshow-control.slideshow-control {
    opacity: 0;
    transition: opacity var(--animation-values);
    animation: none;
  }

  @media (hover: hover) {
    .product-card:hover slideshow-arrows .slideshow-control.slideshow-control,
    .product-card:focus-within slideshow-arrows .slideshow-control.slideshow-control {
      opacity: 1;
    }
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-gallery-badges (INDEX:246) */
/* Override the .product-badges--top-left formula so the badge sits 24px
     from the first media edge, ignoring the media-gallery padding-block-start
     and padding-inline-start that would otherwise compound the inset. */
  .product-gallery-badges.product-badges--top-left {
    top: var(--padding-2xl);
    inset-inline-start: var(--padding-2xl);
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:product-gallery-badges */

/* START_SNIPPET:product-grid (INDEX:247) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  /* Axome - On non-homepage templates, disable the default mobile "card padding-inline + card-gallery negative margin" trick (base.css:3441-3466)
     that pushes product images beyond the card padding. With our 16px gap layout, products must stay within their grid cell. */
  @media screen and (max-width: 749px) {
    main:not([data-template='index']) :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card,
    main:not([data-template='index']) :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card {
      padding-inline: 0;
    }

    main:not([data-template='index']) :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) .card-gallery {
      margin-inline: 0;
    }
  }

  /* Axome - Apply page gutters (16px mobile / 24px desktop) to full-width main-collection grid on non-homepage templates */
  main:not([data-template='index']) .main-collection-grid.collection-wrapper--full-width {
    padding-inline: var(--page-margin);
  }

  @media screen and (max-width: 749px) {
    main:not([data-template='index']) .main-collection-grid.collection-wrapper--full-width-on-mobile {
      padding-inline: var(--page-margin);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:248) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }

    /* Axome - 24px gap between media (image) and product details (title) when stacked */
    .product-information__grid {
      row-gap: var(--padding-2xl);
    }

    /* Axome - Space the main product-details elements (title, price, variant picker,
       buttons, reassurance…) 24px apart on mobile, instead of the panel's 12px gap_mobile.
       Scoped to product-information so the global .layout-panel-flex default is untouched.
       We override `gap` directly rather than --gap-mobile: the panel carries an inline
       --gap-mobile (from its gap_mobile setting) that wins over any inherited variable,
       but this more specific selector beats the base .layout-panel-flex `gap` declaration
       without !important. Nested groups keep their own gap (direct-child chain). */
    .product-information__grid .product-details > .group-block > .group-block-content {
      gap: var(--padding-2xl);
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: 0; /* Axome - asymmetric gap, padding handled on details only */
        }

        .product-details {
          padding-left: 45px; /* Axome - design spec gap (45px at 750-1199px) */
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 1.7fr 1fr;

      .product-details {
        padding-left: 90px; /* Axome - design spec gap (90px at 1200px+) */
      }
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:249) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* Axome - Mobile pagination dots: 5px white/gray, bottom-left, 24px offsets.
     The controls container has min-height: var(--minimum-touch-target) (44px), so dots are
     vertically centered inside it. To place the visible dot center at 24px from the bottom,
     offset by 24px - 44px/2 = 2px (compensates for half the touch target). */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[controls-on-media]:not([thumbnails]) {
      inset-block-end: calc(var(--padding-2xl) - var(--minimum-touch-target) / 2);
      inset-inline-start: var(--padding-2xl);
      inset-inline-end: auto;
      width: auto;
      justify-content: flex-start;
      /* Override default mix-blend-mode that prevents seeing active vs inactive */
      mix-blend-mode: normal;
    }

    .media-gallery__mobile-controls .slideshow-controls__dots {
      gap: var(--gap-sm);
      padding: 0;
      border-radius: 0;
      overflow: visible;
      background: none;
    }

    .media-gallery__mobile-controls .slideshow-controls__dots button {
      --size: 5px;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      border-radius: calc(var(--size));
    }

    .media-gallery__mobile-controls .slideshow-controls__dots button::after {
      width: var(--size);
      height: var(--size);
      background-color: var(--color-neutral);
      box-shadow: none;
    }

    .media-gallery__mobile-controls .slideshow-controls__dots button[aria-selected='true']::after {
      background-color: var(--color-white);
      box-shadow: none;
    }
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:250) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:251) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:product-tab-row (INDEX:252) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:product-tab-row */

/* START_SNIPPET:push-card (INDEX:254) */
.push-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 100%;
    overflow: hidden;
    isolation: isolate;
    border-radius: 8px;
    padding: var(--padding-xs);
    background-color: #fff;
    color: var(--color-foreground);
    text-align: center;

    @media screen and (min-width: 750px) {
      padding: var(--padding-lg);
    }
  }

  .push-card__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: lightgray;
  }

  .push-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
    pointer-events: none;
  }

  .push-card__image,
  .push-card__video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .push-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    max-inline-size: 100%;
  }

  .push-card__subtitle {
    font-family: var(--font-subheading--family);
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 400;
    margin: 0;
  }

  .push-card__title {
    margin: 0;
  }

  .push-card__with-code {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .push-card__copy {
    display: block;
  }

  .push-card__copy-button {
    cursor: pointer;
  }

  .push-card__code {
    margin: 0;
  }
/* END_SNIPPET:push-card */

/* START_SNIPPET:quantity-selector (INDEX:255) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:256) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:258) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:260) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:261) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:262) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:265) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    padding: 0;
    border: var(--style-border-popover);

    /* Axome - Desktop: anchor the search as a full-width bar in the header zone rather than a centered modal */
    @media screen and (min-width: 750px) {
      width: 100dvw;
      max-width: 100dvw;
      margin: 0;
      margin-inline-start: 0;
      inset-block-start: 0;
      inset-inline-start: 0;
      border: none;
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: top center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: 0;
    }

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  /* Axome - On desktop the modal opens as a full-width bar over the header, so the
     input should read as a continuation of the header search trigger: same compact
     icon size, aligned to the page margin (--margin-lg = 16px), and an uppercase
     placeholder echoing the header label. */
  @media screen and (min-width: 750px) {
    .search-modal .predictive-search__icon {
      left: var(--margin-lg);
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }

    .search-modal .predictive-search__icon > svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }

    .search-modal input.search-input {
      /* 12px matches the header search label (and the rating badge) exactly */
      font-size: 0.75rem;
      padding-inline-start: calc(var(--margin-lg) + var(--icon-size-xs) + var(--gap-sm));
    }

    .search-modal .search-input::placeholder {
      text-transform: uppercase;
    }

    /* Let the input flex and leave room for the rating badge on the right */
    .search-modal .predictive-search-form__header-inner {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
    }

    .search-modal .predictive-search__rating {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      margin-inline-end: var(--margin-md);
    }
  }

  /* Rating badge only mirrors the header on desktop, and only in the resting state
     (hidden once the user types, so it never competes with the Clear button). */
  @media screen and (max-width: 749px) {
    .search-modal .predictive-search__rating {
      display: none;
    }
  }

  .search-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not([hidden]))
    .predictive-search__rating {
    display: none;
  }

  /* Axome - Override the utility `.close-button` positioning so the cross sits inline in the search header (like menu-drawer__close-button) */
  .predictive-search__close-modal-button {
    position: relative;
    top: auto;
    right: auto;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    color: var(--color-foreground);

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:266) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 1199px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 1200px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 1200px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 1200px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 1200px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }

  /* Axome - In text mode, the search button shows a small icon inline with the label (tight layout, no 44px touch wrapper) */
  search-button .header-actions__action.header-actions__text-style {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  search-button .header-actions__action.header-actions__text-style .svg-wrapper {
    width: auto;
    height: auto;
    display: inline-flex;
  }

  search-button .header-actions__action.header-actions__text-style svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:267) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  /* Axome - When the section has a border radius, inset the background media by
     the section padding, then round + clip it (e.g. full-width banner with side
     margins and a rounded image). Opt-in: only applies when border_radius > 0. */
  .custom-section-background--inset {
    position: absolute;
    inset: var(--bg-inset-bs, 0) var(--bg-inset-ie, 0) var(--bg-inset-be, 0) var(--bg-inset-is, 0);
    border-radius: var(--bg-radius, 0);
    overflow: hidden;
  }

  .custom-section-background--inset > * {
    position: absolute;
    inset: 0;
  }

  @media screen and (max-width: 749px) {
    .custom-section-background--inset {
      inset: var(--bg-inset-bs-m, 0) var(--bg-inset-ie-m, 0) var(--bg-inset-be-m, 0) var(--bg-inset-is-m, 0);
    }
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:269) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:271) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:272) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:273) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:275) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:277) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:tablist-nav (INDEX:284) */
.tablist-nav {
    position: relative;
    display: flex;
    /* 20px mobile, 48px desktop */
    gap: var(--padding-xl);
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    /* 16px between tab labels and the progress bar */
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      gap: var(--padding-5xl);
    }

    &::-webkit-scrollbar {
      display: none;
    }

    /* Progress-bar track: full-width thin rule under all tabs */
    &::after {
      content: '';
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      block-size: 1px;
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      pointer-events: none;
    }
  }

  .tablist-nav__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--padding-xs) 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    /* 8px between icon and label */
    gap: var(--padding-xs);
    cursor: pointer;
    color: rgb(var(--color-foreground-rgb));
    font-family: inherit;
    /* 14px mobile / 16px desktop */
    font-size: var(--font-size--sm);
    font-weight: 500;
    white-space: nowrap;
  }

  .tablist-nav__icon {
    /* Icon size: 15px wide × 20px tall */
    width: 15px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* Active-tab indicator: anchored to the active tab, full tab width.
     Static — does not respond to carousel scroll progress. */
  .tablist-nav__indicator {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 2px;
    background: rgb(var(--color-foreground-rgb));
    transform: translateX(var(--indicator-left, 0));
    width: var(--indicator-width, 0);
    transition:
      transform var(--animation-speed) var(--animation-easing),
      width var(--animation-speed) var(--animation-easing);
    pointer-events: none;
  }
/* END_SNIPPET:tablist-nav */

/* START_SNIPPET:text (INDEX:288) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  /* Axome - Optional mobile width override (block setting `width_mobile`).
     Falls back to the desktop --width when the setting is left on "Default". */
  @media screen and (max-width: 749px) {
    .text-block {
      width: var(--width-mobile, var(--width));
    }

    .text-block > * {
      width: var(--width-mobile, var(--width));
    }
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  .text-block--vertical-up,
  .text-block--vertical-down {
    writing-mode: vertical-rl;
    width: fit-content;
  }

  .text-block--vertical-up {
    transform: rotate(180deg);
  }

  .text-block--vertical-up > *,
  .text-block--vertical-down > * {
    width: auto;
    text-wrap: nowrap;
  }

  /* Axome - Vertical text reverts to horizontal on mobile */
  @media screen and (max-width: 749px) {
    .text-block--vertical-up,
    .text-block--vertical-down {
      writing-mode: horizontal-tb;
      transform: none;
      width: var(--width);
    }

    .text-block--vertical-up > *,
    .text-block--vertical-down > * {
      width: var(--width);
      text-wrap: var(--text-wrap);
    }
  }

  /* Axome - Crop + Read more/less toggle */
  text-collapse {
    display: contents;
  }

  .text-block .text-collapse__toggle {
    display: inline;
    margin: 0;
    padding: 0;
    width: auto;
    max-inline-size: none;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    margin-inline-start: var(--padding-2xs);
  }

  .text-collapse__toggle-label {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .text-collapse__toggle-label[data-state='less'] {
    display: none;
  }

  text-collapse[data-expanded='true'] .text-collapse__toggle-label[data-state='more'] {
    display: none;
  }

  text-collapse[data-expanded='true'] .text-collapse__toggle-label[data-state='less'] {
    display: inline;
  }

  @media screen and (min-width: 750px) {
    .text-collapse__toggle-label {
      text-decoration: none;
      background-image: linear-gradient(currentColor, currentColor);
      background-position: 0 100%;
      background-repeat: no-repeat;
      background-size: 100% 1px;
      transition: background-size var(--animation-speed-slow) var(--ease-out-cubic);
    }

    .text-collapse__toggle:hover .text-collapse__toggle-label {
      background-position: 100% 100%;
      background-size: 0 1px;
    }
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:297) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:298) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:299) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:view-mode-toggle (INDEX:300) */
.view-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size--xs);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--color-foreground);
  }

  .view-mode-toggle__option {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    transition: opacity var(--animation-values);
  }

  .view-mode-toggle__option[aria-checked='true'] {
    opacity: 1;
  }

  .view-mode-toggle__option:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .view-mode-toggle__track {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    flex-shrink: 0;
    background: var(--color-foreground);
    border-radius: 999px;
    cursor: pointer;
  }

  .view-mode-toggle__thumb {
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 2px;
    width: 12px;
    height: 12px;
    background: var(--color-background);
    border-radius: 50%;
    transition: transform var(--animation-values);
    pointer-events: none;
  }

  .view-mode-toggle[data-mode='packshot'] .view-mode-toggle__thumb {
    transform: translateX(16px);
  }

  /* Desktop horizontal filter bar — push to the far right */
  .view-mode-toggle--desktop {
    margin-inline-start: auto;
  }

  /* ===== Mobile dropdown ===== */
  .view-mode-toggle--mobile {
    margin-inline-start: auto;
    color: inherit; /* white text on the black sticky bar */
  }

  .view-mode-toggle--mobile .view-mode-toggle__dropdown {
    position: relative;
  }

  .view-mode-toggle--mobile .view-mode-toggle__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    color: inherit;
    user-select: none;
    padding: 0;
  }

  .view-mode-toggle--mobile .view-mode-toggle__trigger::-webkit-details-marker {
    display: none;
  }

  .view-mode-toggle--mobile .view-mode-toggle__trigger::marker {
    content: '';
  }

  /* Show only the label that matches the active mode */
  .view-mode-toggle--mobile [data-show-when] {
    display: none;
  }

  .view-mode-toggle--mobile[data-mode='home'] [data-show-when='home'],
  .view-mode-toggle--mobile[data-mode='packshot'] [data-show-when='packshot'] {
    display: revert;
  }

  .view-mode-toggle--mobile .view-mode-toggle__chevron {
    transition: transform var(--animation-values);
  }

  .view-mode-toggle--mobile .view-mode-toggle__dropdown[open] .view-mode-toggle__chevron {
    transform: rotate(180deg);
  }

  /* Floating panel above the sticky bar — shows only the opposite option */
  .view-mode-toggle--mobile .view-mode-toggle__panel {
    position: absolute;
    inset-block-end: calc(100% + 16px);
    inset-inline-end: 0;
    padding-block: 12px;
    padding-inline: 16px;
    background: var(--color-background);
    color: var(--color-foreground);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
    white-space: nowrap;
    z-index: var(--layer-overlay);
  }

  .view-mode-toggle__panel-option {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
  }
/* END_SNIPPET:view-mode-toggle */

/* START_SNIPPET:volume-pricing-info (INDEX:301) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */