/** Shopify CDN: Minification failed

Line 22792:4 Unexpected "{"
Line 22792:5 Expected identifier but found "%"
Line 22794:15 Expected identifier but found whitespace
Line 22800:78 Unterminated string token
Line 22811:5 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:brand-story (INDEX:1) */
.brand-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: var(--brand-story-radius, 20px);
    /* A fixed band, not "as tall as the image wants to be" -- a portrait
       photo would otherwise stretch the panel beside it into a mostly
       empty column. The image crops to fit this instead. */
    block-size: clamp(420px, 46vw, 640px);
  }

  .brand-story__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    overflow-y: auto;
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 70px);
    background-color: var(--brand-story-panel, #12281c);
  }

  .brand-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--brand-story-eyebrow, #b48622);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .brand-story__mark {
    flex: 0 0 auto;
  }

  .brand-story__heading {
    margin: 0;
    color: var(--brand-story-heading, #f7f4ea);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.2;
  }

  /* Split heading: brand on its own line in the heading colour, tagline below
     it, smaller and in the body colour. The dash and the typed line breaks are
     hidden -- the breaks cut "Designer / Decor" in two -- and text-wrap:
     balance plus a ch cap evens the tagline's lines instead. */
  .brand-story__heading--split {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .brand-story__heading-brand {
    line-height: 1.1;
  }

  .brand-story__heading-dash,
  .brand-story__heading-tagline br {
    display: none;
  }

  .brand-story__heading-tagline {
    max-inline-size: 30ch;
    color: var(--brand-story-body, #c8cfc9);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 400;
    line-height: 1.4;
    text-wrap: balance;
  }

  .brand-story__panel-heading .brand-story__heading-tagline {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
  }

  /* This panel is wide enough for the ornament to stretch the way it does
     under a page heading, rather than the tighter mark a card title uses --
     an override here, not a change to the shared rule's own default. */
  .brand-story__panel .ornament {
    inline-size: 100%;
    max-inline-size: 360px;
  }

  .brand-story__panel .ornament__rule {
    flex: 1 1 auto;
    inline-size: auto;
  }

  .brand-story__body {
    max-inline-size: 52ch;
    color: var(--brand-story-body, #c8cfc9);
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .brand-story__body a,
  .brand-story__body a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* The control is an <a> when a Link is set and a <button> when it opens the
     dialog. Same class, so the button has to be stripped of its own chrome to
     look identical to the link it replaces. */
  button.brand-story__link {
    background: none;
    border: 0;
    border-block-end: 1px solid currentcolor;
    padding: 0 0 4px;
    font-family: inherit;
    cursor: pointer;
  }

  /* A native <dialog>: focus trap, Escape to close, the rest of the page inert
     and a free ::backdrop -- none of which a div would give without script.

     Named __dialog, not __panel. It used to share the panel's class, and since
     these rules come second in the file they were also landing on the section's
     own <div class="brand-story__panel"> -- forcing it to 52rem with padding:0
     and overflow:hidden, which is what clipped the heading on the homepage. */
  .brand-story__dialog {
    width: min(52rem, calc(100vw - 2rem));
    max-height: min(82vh, 48rem);
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--brand-story-panel, #12281c);
    color: var(--brand-story-body, #c8cfc9);
    overflow: hidden;
  }

  .brand-story__dialog::backdrop {
    background: rgb(0 0 0 / 0.6);
  }

  .brand-story__panel-inner {
    position: relative;
    max-height: inherit;
    overflow-y: auto;
    padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 44px);
    -webkit-overflow-scrolling: touch;
  }

  .brand-story__panel-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--brand-story-link, #b48622);
    cursor: pointer;
  }

  .brand-story__panel-close svg {
    width: 17px;
    height: 17px;
  }

  .brand-story__panel-close:hover,
  .brand-story__panel-close:focus-visible {
    background: color-mix(in srgb, currentcolor 12%, transparent);
  }

  .brand-story__panel-heading {
    margin: 0 0 1rem;
    padding-inline-end: 2.5rem;
    color: var(--brand-story-heading, #f7f4ea);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.2;
  }

  .brand-story__panel-body {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  /* The copy comes from an html setting, so its headings pick up the theme's
     global heading colour -- #12281c, which is exactly this panel's background.
     They were rendering invisible: present, occupying 96-168px each, painted
     the same colour as what is behind them. What looked like enormous line
     spacing was a stack of headings nobody could see.

     Their margins are trimmed at the same time: 39.84px top AND bottom put ~80px
     between every block, which is generous on a page and wrong in a panel. */
  .brand-story__panel-body :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 26px 8px;
    color: var(--brand-story-heading, #f7f4ea);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.25;
  }

  .brand-story__panel-body :is(ul, ol) {
    margin-block: 10px;
    padding-inline-start: 1.2em;
  }

  .brand-story__panel-body li {
    margin-block: 4px;
  }

  .brand-story__panel-body p {
    margin-block: 10px;
  }

  .brand-story__panel-body > *:first-child { margin-block-start: 0; }
  .brand-story__panel-body > *:last-child { margin-block-end: 0; }

  .brand-story__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 4px;
    padding-block-end: 4px;
    border-block-end: 1px solid currentcolor;
    color: var(--brand-story-link, #b48622);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .brand-story__link svg {
    transition: transform 0.25s ease;
  }

  .brand-story__link:hover svg {
    transform: translateX(4px);
  }

  .brand-story__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 320px;
    background-color: rgb(0 0 0 / 0.04);
  }

  .brand-story__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* The placeholder is a small decorative line-drawing, not a photo -- it
     cannot stretch to cover the panel without distorting, so it stays its
     own size, centred, rather than trying to fill the space like a real
     image does. */
  .brand-story__image--placeholder {
    inline-size: 40%;
    block-size: auto;
    opacity: 0.4;
  }

  @media screen and (max-width: 749px) {
    .brand-story {
      grid-template-columns: 1fr;
      block-size: auto;
    }

    .brand-story__panel {
      overflow-y: visible;
    }

    .brand-story__media {
      block-size: 260px;
    }

    .brand-story__heading .brand-story__heading-brand {
      font-size: 1.6rem;
    }

    .brand-story__heading .brand-story__heading-tagline {
      font-size: 1.1rem;
    }

    /* Top and bottom padding capped at the 32 setting the neighbouring
       sections use (~22px on a phone), from the 48 (~34px) that left the
       widest gap on the page above the card and a bare strip below it.
       min() so a section set lower keeps its own smaller value. */
    .section:has(> .brand-story) {
      padding-block:
        min(var(--padding-block-start), calc(var(--spacing-scale) * 32px))
        min(var(--padding-block-end), calc(var(--spacing-scale) * 32px));
    }
  }
/* END_SECTION:brand-story */

/* START_SECTION:breadcrumb (INDEX:2) */
.breadcrumb__list {
    display: flex;

    /* Never two lines, and never fewer crumbs. A wrapped trail doubles the
       height of the strip above the picture; hiding crumbs on small screens
       takes real links away from the people most likely to want one. So the
       row holds its line and scrolls sideways where it will not fit.

       min-inline-size: 0 is what allows the scroll -- as a flex item the row's
       automatic minimum size is its full content width, so without it the
       trail widens the page instead of scrolling inside it. */
    flex-wrap: nowrap;
    min-inline-size: 0;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
    gap: 0 var(--gap-2xs, 6px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    line-height: 1.6;

    /* Gold on cream is low contrast by nature, so the weight does the work the
       colour cannot -- at regular weight the trail reads as faint rather than
       as gold. */
    font-weight: 500;
  }

  .breadcrumb__list::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb__item {
    white-space: nowrap;
  }

  /* The separator is drawn rather than typed, so it is not read out between
     every crumb and cannot be selected when the trail is copied. */
  .breadcrumb__item + .breadcrumb__item::before {
    content: '';
    display: inline-block;
    inline-size: 5px;
    block-size: 5px;
    margin-inline-end: 6px;
    border-block-start: 1px solid currentcolor;
    border-inline-end: 1px solid currentcolor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.5;
  }

  /* Gold, and the brightest thing above the picture. The trail is the only
     navigation on this page, so it is worth seeing rather than tucking away
     in a grey that reads as disabled. Declared here rather than pulled from
     the pdp-* tokens: this section renders on collection pages too, where
     that stylesheet's variables are not in scope. */
  .breadcrumb__list {
    --breadcrumb-gold: #a67c12;
  }

  .breadcrumb__link {
    color: var(--breadcrumb-gold);
    text-decoration: none;
  }

  .breadcrumb__link:hover,
  .breadcrumb__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* The page you are on is not a link, so it does not take the link colour --
     otherwise the trail reads as five things you could click when only four
     of them go anywhere. */
  .breadcrumb__item--current {
    color: var(--color-foreground);
  }

  .breadcrumb__item + .breadcrumb__item::before {
    color: var(--breadcrumb-gold);
    opacity: 0.65;
  }
/* END_SECTION:breadcrumb */

/* START_SECTION:collection-section (INDEX:6) */
/* Card style here: title on the left, arrow on the right of the same row,
     instead of the arrow on a line of its own under a centred title. Any
     description or count line drops below the title. Scoped to this section
     so the card style elsewhere is untouched. */
  .section-collections .item--card .item__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.7rem 1rem 0.9rem;
    text-align: start;
  }

  .section-collections .item--card .item__body > * {
    grid-column: 1;
  }

  .section-collections .item--card .item__body > .item__cta {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .section-collections .item--card .item__meta {
    justify-content: flex-start;
  }

  /* The tagline a touch larger than the editorial style's own
     clamp(0.72rem, 5.2cqi, 0.86rem), here only. Phones take a capped
     version of this in the block below. */
  .section-collections .item--editorial {
    --editorial-text: clamp(0.76rem, 5.5cqi, 0.9rem);
  }

  /* Straight under the marquee on a phone, the heading had ~30px above it
     (the marquee's 10px bottom padding plus this section's 20px top) and
     16px below it, so it sat low and crowded the tiles. Brought to an even
     20px on both sides: 10px here plus the marquee's 10px above, and 20px
     between the heading and the row below. Scoped to the marquee case so a
     collection section anywhere else keeps its own spacing. */
  @media screen and (max-width: 749px) {
    /* Top and bottom padding capped at the 32 setting the neighbouring
       sections use (~22px on a phone). min() so a section set lower than
       that keeps its own smaller value -- this only ever takes space away. */
    .section.section-collections {
      padding-block:
        min(var(--padding-block-start), calc(var(--spacing-scale) * 32px))
        min(var(--padding-block-end), calc(var(--spacing-scale) * 32px));
    }

    .shopify-section:has(.marquee__wrapper) + .shopify-section .section-collections {
      padding-block-start: 10px;
    }

    .shopify-section:has(.marquee__wrapper) + .shopify-section .section-collections .section-header {
      margin-block-end: 20px;
    }

    /* Editorial cards on a phone: a tighter gap between cards. Phone only;
       desktop keeps the section's own gap setting. */
    .section-collections .layout:has(> .item--editorial) {
      --layout-gap: 8px;
    }

    /* Exactly two whole cards across on every phone, the rest a swipe away:
       half the row less half the gap between them. Pictures stay square:
       their shape is the section's Item shape, so they follow the card. */
    .section-collections .layout--small-displayer.layout--scroll:has(> .item--editorial) {
      grid-auto-columns: calc((100% - var(--layout-gap)) / 2);
    }

    /* Smaller corners on a phone: 16px reads as soft on a 350px desktop card
       but bubbly on a 190px one. Set on the card, so the picture's top
       corners and the copy's bottom corners follow it. The arrow is smaller
       too: at two across it shares the tagline's row, and every pixel it
       gives up is width the tagline gets. */
    .section-collections .layout > .item--editorial {
      --item-radius: 10px;
      --editorial-arrow: 22px;
    }

    /* Tighter than the desktop's 7%-of-card padding at the sides; a little
       more above and below so the three lines sit centred in the panel. */
    .section-collections .item--editorial .item__body {
      padding: 11px 9px;
      column-gap: 6px;
    }

    /* The same 6px between label and title as between title and tagline, so
       the three lines are evenly spaced. */
    .section-collections .item--editorial .item__eyebrow,
    .section-collections .item--editorial .item__title {
      margin-block-end: 6px;
    }

    /* One line, always: a wrapped tagline makes its card taller than the
       rest of the row and leaves a blank band at the foot of every other
       card. The taglines are written to fit beside the arrow; the ceiling
       tied to the card's width keeps them fitting on narrow (~320px)
       phones, and the ellipsis is only a backstop. */
    .section-collections .item--editorial {
      --editorial-text: min(clamp(0.76rem, 5.5cqi, 0.9rem), 7.5cqi);
    }

    .section-collections .item--editorial .item__text {
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* The arrow on its own, no circle: a bolder gold line drawn at full
       size, centred on the tagline, its tip on the copy's right margin. Its
       box is only as tall as the arrow -- shorter than the tagline's line --
       so the overhang margins the circle needed are cleared, and the fill
       the circle took on hover is dropped (it would show as a gold block). */
    .section-collections .item--editorial .item__body .item__cta.item__cta--arrow-only {
      inline-size: 20px;
      block-size: 11px;
      margin-block: 0;
      /* The icon's tip stops short of its own box; pulled out so the tip
         sits as far from the right edge as the words do from the left. */
      margin-inline-end: -1.5px;
      border: 0;
      border-radius: 0;
      background-color: transparent;
      color: var(--item-cta, var(--editorial-gold));
    }

    .section-collections .item--editorial .item__cta--arrow-only svg {
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
    }

    .section-collections .item--editorial .item__cta--arrow-only svg path {
      stroke-width: 1.8;
    }

    .section-collections .item--editorial .item__title {
      font-size: min(var(--item-title-size, clamp(1.05rem, 10cqi, 1.25rem)), 11.5cqi);
    }
  }

  /* Scroll hint on phones. The shared arrows are hidden below 990px; here
     they come back small, on the row's edges, just above halfway down the
     cards. carousel-arrows.js still decides which one shows: only the next
     arrow before any scrolling, the previous one once scrolled, and the next
     one gone at the end. :not([hidden]) so this display never beats the
     hidden rule. */
  @media screen and (max-width: 749px) {
    .section-collections .carousel-arrow:not([hidden]) {
      display: grid;
      inline-size: 28px;
      block-size: 28px;
      inset-block-start: 45%;
    }

    /* The progress line (18px gap + 2px) makes the row 20px taller; take 45%
       of that back off so the arrows stay where they were on the cards. */
    .section-collections .layout-viewport:has(> .carousel-progress:not([hidden])) .carousel-arrow:not([hidden]) {
      inset-block-start: calc(45% - 9px);
    }

    /* See-through dark green with a white arrow, the same look as the arrows
       on the product card images. A fixed colour rather than a section
       setting, so both collection sections match whatever their accents are.
       Hover is included so a tap, which leaves :hover stuck on touch screens,
       cannot swap the colours. */
    .section-collections .carousel-arrow,
    .section-collections .carousel-arrow:hover {
      border-color: rgb(255 255 255 / 0.35);
      background-color: rgb(18 40 28 / 0.7);
      color: #ffffff;
    }

    /* Straddling the row's edge -- which, at two cards across, is the outer
       card's edge -- with the circle's centre 2px in over the card, so it
       reads as sitting on the card rather than drifting off it. (Half the
       28px circle, 14px, would centre it exactly on the edge.) The 16px
       gutter keeps it inside the screen, so the page never scrolls
       sideways. */
    .section-collections .carousel-arrow--prev {
      inset-inline-start: -12px;
    }

    .section-collections .carousel-arrow--next {
      inset-inline-end: -12px;
    }

    .section-collections .carousel-arrow svg {
      inline-size: 12px;
      block-size: 12px;
    }

    .section-collections .carousel-arrow svg path {
      stroke-width: 1.8;
    }
  }
/* END_SECTION:collection-section */

/* START_SECTION:featured-product (INDEX:12) */
.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-utilities (INDEX:13) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

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

  .utilities a,
  .utilities button {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .utilities > * {
    text-align: center;

    @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:14) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  /* Footer column headings.
     The h3 preset these blocks default to is 2rem -- a page heading -- and it
     does not shrink on mobile, so "Categories" rendered at 32px against 14px
     links. The scale offers no middle ground either: h4 is 1.5rem and h5 drops
     straight to 0.875rem, the same size as the links, which would flatten the
     hierarchy instead of fixing it.
     Pinned to a measured value rather than picked from the scale -- the live
     Dawn footer sets 16px on mobile and 18px on desktop, and that is the size
     this content was written for.
     Specificity: :is() takes its most specific argument, so the selector scores
     (0,2,1) and clears the (0,1,0) of the `.h3` utility class on the heading. */
  .footer-content :is(.menu__heading, .text-block :is(h1, h2, h3, h4, h5, h6)) {
    font-size: 1rem;
    line-height: 1.35;
  }

  @media screen and (min-width: 750px) {
    .footer-content :is(.menu__heading, .text-block :is(h1, h2, h3, h4, h5, h6)) {
      font-size: 1.125rem;
    }
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:gallery (INDEX:15) */
/* The one thing here that is genuinely the gallery's own: an opt-in that
     centres the plain style, which is left aligned everywhere else. */
  .section-gallery--center-plain .item--plain .item__body {
    align-items: center;
    text-align: center;
  }

  .section-gallery--center-plain .item--plain .item__cta {
    justify-content: center;
  }

  /* --- Showcase ---------------------------------------------------------
     Everything around the cards, none of the cards themselves: an italic
     accent in the heading, the short ornament kept on phones, the link as a
     pill, and a progress line under the row. */

  /* The display face in italic, as "Missed them?" further down the page
     uses it, so the two headings read as one hand. */
  .section-header__accent {
    color: var(--sh-accent, #b48622);
    font-family: var(--font-h1--family, inherit);
    font-style: italic;
    font-weight: 700;
  }

  .section-gallery--showcase .section-header__view-all {
    padding: 0.75em 1.5em;
    border: 1px solid color-mix(in srgb, var(--sh-accent, #b48622) 50%, transparent);
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .section-gallery--showcase .section-header__view-all:hover {
    border-color: var(--sh-accent, #b48622);
    background-color: var(--sh-accent, #b48622);
    color: var(--sh-on-accent, #12281c);
  }

  .gallery-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-block-start: 22px;
    color: var(--sh-accent, #b48622);
  }

  .gallery-progress[hidden] {
    display: none;
  }

  /* Drawn as a row of dots, matching the line under the other rows
     (carousel-arrows.liquid): the dots are a mask over an ordinary line, so
     the fill still runs smoothly through them. */
  .gallery-progress__track {
    --dots: radial-gradient(circle closest-side, #000 92%, transparent) 0 0 / 10px 100% round no-repeat;

    position: relative;
    inline-size: min(160px, 50%);
    block-size: 4px;
    background-color: color-mix(in srgb, var(--sh-accent, #b48622) 30%, transparent);
    overflow: hidden;
    -webkit-mask: var(--dots);
    mask: var(--dots);
  }

  .gallery-progress__bar {
    position: absolute;
    inset: 0;
    background-color: currentcolor;
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: transform 0.2s ease-out;
  }

  /* Phones: the header's ornaments are all hidden by section-header.liquid.
     Here the short rule under the heading comes back -- it is narrow enough
     not to crowd a 375px screen, and it is what makes the header read as
     crafted rather than as a line of text. */
  @media screen and (max-width: 749px) {
    .section-gallery--showcase .section-header .ornament--short {
      display: inline-flex;
    }

    .section-gallery--showcase .section-header {
      gap: 10px;
      margin-block-end: 20px;
    }

    .section-gallery--showcase .section-header__view-all {
      margin-block-start: 2px;
      padding: 0.65em 1.3em;
    }

    .gallery-progress {
      margin-block-start: 18px;
    }
  }

  /* The card's "View now" link, a step heavier than the body text so it
     reads as the action on the card. Its colour is the section's Arrow
     setting. */
  .section-gallery .item--panel .item__cta {
    font-weight: 500;
  }

  /* Phones: no blank band under "View now".
     The row stretches every card to the tallest one, so a card with a
     two-line description sat under a three-line one with the difference left
     empty below its link. Holding every description at exactly two lines --
     clamped above, reserved below -- gives every card the same body, at any
     phone width, so nothing is left to stretch. The bottom padding comes down
     from 1.5rem to sit as close as the sides do. */
  @media screen and (max-width: 749px) {
    /* Two whole cards across leaves ~165px a card on a 375px phone. The
       desktop 1.25rem side padding ate 40px of that, and the one-line title
       ("Floor Sculptures") ran into its ellipsis -- so the body, title, copy
       and link all step down to fit the narrower card. */
    .section-gallery .item--panel {
      --item-title-size: 0.88rem;
    }

    .section-gallery .item--panel .item__body {
      gap: 0.3rem;
      padding: 0.75rem 0.7rem 0.85rem;
    }

    .section-gallery .item--panel .item__cta {
      gap: 0.5em;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
    }

    .section-gallery .item--panel .item__text {
      font-size: 0.76rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      min-block-size: calc(2em * 1.7);
    }
  }
/* END_SECTION:gallery */

/* START_SECTION:header-announcements (INDEX:16) */
/* Hidden on phones. It is a second full-width strip above a header that is
     already fixed, on a screen where the first fold is the whole budget --
     and the same three promises run in the marquee below the banner, where
     they scroll rather than being cut off mid-word.

     display: none rather than visibility or height: it takes the strip out of
     the accessibility tree too, so a screen reader is not read a bar nobody
     can see, and out of the flow entirely so nothing has to be re-measured. */
  @media screen and (max-width: 749px) {
    .announcement-bar {
      display: none;
    }
  }

  .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__icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-inline-end: 6px;
    color: currentcolor;
  }

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }

  /* Static row layout: show all messages side by side instead of rotating.

     The row never wraps. A second line doubles the height of the bar, which
     pushes the header and everything under it down, and the dividers between
     the messages stop meaning anything once they are stacked. Where the row
     does not fit it scrolls sideways instead.

     min-inline-size: 0 is what allows that -- as a flex item the row's
     automatic minimum size is its full content width, so without it the bar
     would simply grow past the header rather than scroll inside it.

     'safe center' centres the row while it fits and falls back to starting at
     the left edge once it overflows; plain centring would push the first
     message out of reach beyond the left edge, where it cannot be scrolled
     back to. */
  [data-layout='static'] .announcement-bar__slides {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: safe center;
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    min-inline-size: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-layout='static'] .announcement-bar__slides::-webkit-scrollbar {
    display: none;
  }

  [data-layout='static'] .announcement-bar__slide {
    position: static;
    grid-area: unset;
    width: auto;
    flex: none;
    white-space: nowrap;
    padding-inline: var(--padding-md, 16px);
    border-inline-end: 1px solid rgb(var(--color-border-rgb) / var(--opacity-30));
  }

  [data-layout='static'] .announcement-bar__slide:last-child {
    border-inline-end: none;
  }

  [data-layout='static'] .announcement-bar__slide[aria-hidden='true'] {
    opacity: 1;
    visibility: visible;
  }

  [data-layout='static'] .announcement-bar__link {
    display: none;
  }
/* END_SECTION:header-announcements */

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

  .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: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

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

  /* The collapsed menu leaves the middle of the row empty; the field fills it
     at every width the hamburger appears at. Measured at 453px: hamburger 44,
     logo 108, actions 99 -- 200px of clear space between the logo and the
     cart, which is room enough for a usable field. It flexes rather than
     taking a fixed width, so it gives way to the logo and the icons instead
     of pushing them around. */
  #header-component[data-menu-style='drawer'] .search-bar {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-inline-size: 0;
    max-inline-size: 420px;
    margin-inline: var(--gap-sm, 12px);
  }

  /* The hamburger carries `padding: var(--padding-lg)` -- 16px on all four
     sides -- around a 13.6px glyph, which put the mark 16px from the screen
     edge while the cart sits 13px from the other one, and left 25.6px between
     the mark and the logo against 11.2px between the logo and the field.
     Trimmed on the inline axis only, so the 45.6px block height (and with it
     the vertical touch target) is untouched. Both selectors clear the
     (0,2,0) of `.menu-drawer-container .header__icon--summary`. */
  #header-component[data-menu-style='drawer'] .header__icon--summary {
    padding-inline: 12px;
  }

  @media screen and (max-width: 749px) {
    #header-component .header__icon--summary {
      padding-inline: 12px;
    }
  }

  /* The icon it replaces -- two search controls in one row is worse than none. */
  #header-component[data-menu-style='drawer'] .search-action--hidden-on-menu {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='drawer'] .search-bar {
      margin-inline: var(--gap-md, 20px);
    }
  }

  @media screen and (min-width: 750px) {
    #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);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__list-item > .menu-list__link:not([aria-haspopup]):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%;
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:hover),
    &:has(header-menu[aria-expanded='true']) {
      --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;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

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

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

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

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

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

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

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

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

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

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

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

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

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

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

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

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

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

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

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

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

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

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

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

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

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

  /* Logo to menu. A share of the window rather than a measurement, so the
     lead-in shrinks as the bar runs out of room instead of holding its width
     while menu items are pushed into "More". */
  .header__column--left {
    gap: 1.5vw;
  }

  .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 */
    /* Was 44px, sized to the hamburger's old 45.6px box. The box is 37.6px
       now (see .header__icon--summary below), so the track came down with
       it -- every pixel trimmed here goes to the search field, which is the
       only flexible track in the row. */
    --header-mobile-bookend: 38px;

    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.

       The side columns hug their content and the middle track takes every
       spare pixel, rather than the two sides splitting the slack between
       them. Equal side columns centre the menu on the header, which is not
       the same thing as centring it between the logo and the icons -- those
       two only coincide if the logo and the icon cluster happen to be the
       same width, and they never are. The difference is a fixed number of
       pixels, so it reads as a rounding error against wide gaps and as a
       glaring lopsidedness once the window is short enough for the gaps to
       be small. Sizing the middle track instead makes the two gaps the same
       number by construction, at every width.

       auto rather than max-content on the sides so the columns can still
       give way if the window gets narrower than their contents, instead of
       overflowing the header. */
    &:has(.header__column--center header-menu) {
      --header-center: 1fr;
      --header-left: auto;
      --header-right: auto;
    }

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

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

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

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

    @media screen and (max-width: 749px) {
      /* Logo on the left after the hamburger, everything else on the right --
         the same order as desktop. 'spacer' is an empty 1fr column and is what
         pushes search and the actions out to the right edge. The logo used to
         sit in that 1fr column itself, which handed it the whole middle of the
         header whatever size the mark actually was. */
      /* The search track is auto, not a fixed bookend: it holds a full
         touch target plus the gap to the actions, and a fixed 44px track
         silently squeezes that back down against the account icon. */
      --header-template-columns: var(--header-mobile-bookend) auto 1fr auto auto;

      grid-template-areas: 'menu logo spacer search actions';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header__drawer {
        grid-area: menu;
      }

      .header-logo {
        grid-area: logo;
        justify-content: flex-start;
        /* The hamburger's own inline padding is the lead-in: its box ends
           12px clear of the mark, the same air the cart icon has on the
           other edge. A lead-in here as well doubled it to 25.6px. */
        padding-inline-start: 0;
      }

      /* The two conditional placements that used to shuffle search around when
         the actions or the account block were missing are gone. They existed
         because search shared a bookend column; it has one of its own now, and
         an absent actions column collapses to nothing by itself. */
      /* Search, account and cart each get the same 44px box, with their own
         padding zeroed so it cannot skew a centre. No gap between the boxes:
         they sit flush, exactly as they do on desktop, so the icon rhythm is
         identical at every width. Separation from the search field comes from
         .search-bar's own margin-inline, not from a gap here -- the field
         replaced the search icon this rule was originally written around. */
      .search-action,
      header-actions .header-actions__action {
        inline-size: var(--minimum-touch-target);
        block-size: var(--minimum-touch-target);
        align-items: center;
        justify-content: center;
        padding-inline: 0;
      }
      
      .search-action {
        grid-area: search;
      }

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

  /* 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 {
    /* Logo on the left after the hamburger, everything else on the right --
       the same order as desktop. 'spacer' is an empty 1fr column and is what
       pushes search and the actions out to the right edge. The logo used to
       sit in that 1fr column itself, which handed it the whole middle of the
       header whatever size the mark actually was. */
    /* The search track is auto, not a fixed bookend: it holds a full
       touch target plus the gap to the actions, and a fixed 44px track
       silently squeezes that back down against the account icon. */
    --header-template-columns: var(--header-mobile-bookend) auto 1fr auto auto;

    grid-template-areas: 'menu logo spacer search actions';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header__drawer {
      grid-area: menu;
    }

    .header-logo {
      grid-area: logo;
      justify-content: flex-start;
      /* The hamburger's own inline padding is the lead-in: its box ends
         12px clear of the mark, the same air the cart icon has on the
         other edge. A lead-in here as well doubled it to 25.6px. */
      padding-inline-start: 0;
    }

    /* The two conditional placements that used to shuffle search around when
       the actions or the account block were missing are gone. They existed
       because search shared a bookend column; it has one of its own now, and
       an absent actions column collapses to nothing by itself. */
    /* Search, account and cart each get the same 44px box, with their own
       padding zeroed so it cannot skew a centre. No gap between the boxes:
       they sit flush, exactly as they do on desktop, so the icon rhythm is
       identical at every width. Separation from the search field comes from
       .search-bar's own margin-inline, not from a gap here -- the field
       replaced the search icon this rule was originally written around. */
    .search-action,
    header-actions .header-actions__action {
      inline-size: var(--minimum-touch-target);
      block-size: var(--minimum-touch-target);
      align-items: center;
      justify-content: center;
      padding-inline: 0;
    }
    
    .search-action {
      grid-area: search;
    }

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

  /* 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;
    }
  }

  /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. */
  body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: calc(var(--header-group-height) * -1);
  }

  body:has(#header-component[transparent]) #header-group > .header-section {
    z-index: var(--layer-menu-drawer);
  }

  /* All other header group content should be beneath the floating header,
  but above the rest of the page content */
  body:has(#header-component[transparent]) #header-group > *:not(.header-section) {
    z-index: calc(var(--layer-menu-drawer) - 1);
  }

  /* 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);
  }

  /* 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;
    border-radius: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Phones: menu and search icons on the left, the logo centred, account and
     cart on the right. The search bar gives way to the icon it replaced --
     at this width the field squeezed the logo off-centre. Classes are doubled
     to outrank the drawer-layout rules above without relying on order. */
  @media screen and (max-width: 749px) {
    #header-component[data-menu-style] .header__columns.header__columns {
      --header-template-columns: auto auto 1fr auto;
      grid-template-areas: 'menu search logo actions';
    }

    #header-component[data-menu-style] .header__columns .header-logo.header-logo {
      justify-content: center;
      padding-inline: 0;
    }

    #header-component[data-menu-style='drawer'] .search-bar.search-bar {
      display: none;
    }

    #header-component[data-menu-style='drawer'] .search-action--hidden-on-menu.search-action--hidden-on-menu {
      display: flex;
    }

    /* A shorter bar: 61px -> 45px. The icons keep their 44px tap boxes, which
       is now what sets the height; the menu area's 60px floor (set in
       _header-menu) and the hamburger's vertical padding came down to match,
       and the logo to 30px. */
    #header-component .header__drawer.header__drawer {
      --header-drawer-min-height: 44px;
    }

    #header-component .header__icon--summary.header__icon--summary {
      padding-block: 0;
      block-size: 44px;
    }

    #header-component .header-logo .header-logo__image.header-logo__image {
      height: 30px;
      width: auto;
    }

    /* ~20% more height on the bar: 45px -> 54px. Set as a floor on the row
       with everything centred in it, so the extra is shared evenly above and
       below the icons and logo rather than all landing underneath. */
    #header-component .header__columns.header__columns {
      min-block-size: 54px;
      align-items: center;
    }
  }

  /* Drawer menu on phones: 28px top-level entries read as headlines rather
     than a list. The size is set as an inline custom property on the drawer
     (menu-font-styles, drawer branch), which a stylesheet cannot override --
     so the font-size itself is set here instead. Drawer only; the desktop
     menu keeps its own size.

     This block and the two drawer blocks below also apply on touch tablets,
     which get the drawer from setHeaderMenuStyle (utilities.js) but are wider
     than 749px. "(hover: none) and (pointer: coarse)" is the CSS form of that
     script's touch check, and it is false on anything with a mouse or
     trackpad, so desktop is unaffected. */
  @media screen and (max-width: 749px), screen and (hover: none) and (pointer: coarse) {
    .menu-drawer .menu-drawer__menu-item--mainlist {
      font-size: 0.96875rem;
    }

    .menu-drawer .menu-drawer__menu-item--child {
      font-size: 0.875rem;
    }

    /* Shorter rows: 47px -> 38px, which over ten entries hands ~90px back to
       the log-in card and the social icons at the bottom. Horizon's own floor
       is calc(2 * --padding-lg + --icon-size-xs) and is set in three places,
       so it is replaced here rather than chased through each one. */
    .menu-drawer .menu-drawer__menu > .menu-drawer__list-item,
    .menu-drawer .menu-drawer__menu-item--mainlist,
    .menu-drawer .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
      min-height: 38px;
    }

    /* The picture leads the row now, the way the mock-up has it. This rule
       exists because it used to shrink the thumb to 30px to match a compact
       list; it is here rather than in the snippet because it has to outrank
       the snippet's own value. */
    .menu-drawer .menu-drawer__thumb {
      inline-size: 52px;
      block-size: 52px;
      margin-inline-end: 14px;
      border-radius: 10px;
    }
  }

  /* A line under every top-level entry. Horizon's own "Drawer dividers"
     setting only reaches the submenu containers in a three-level menu, so
     plain links (New Arrivals, Paintings, Organizers...) had none and the
     list read as two different kinds of row -- and where both applied the
     line came out doubled, so that setting is left off. The last item is
     left bare.

     A hairline at 8% rather than the border token: with a 52px picture on
     every row the list already reads as separate items, and a full-strength
     rule between them competes with the pictures. */
  .menu-drawer__menu.has-submenu > .menu-drawer__list-item:not(:last-child) {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* Room for the picture, and the row treated as one tappable block: the
     whole thing lifts on press and for the page you are on, the way the
     mock-up shows its first row. */
  @media screen and (max-width: 749px), screen and (hover: none) and (pointer: coarse) {
    .menu-drawer .menu-drawer__menu > .menu-drawer__list-item,
    .menu-drawer .menu-drawer__menu-item--mainlist,
    .menu-drawer .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
      min-height: 68px;
    }

    .menu-drawer .menu-drawer__menu-item--mainlist {
      padding-inline: 8px;
      border-radius: 12px;
    }

    .menu-drawer .menu-drawer__menu-item--mainlist[aria-current='page'],
    .menu-drawer .menu-drawer__menu-item--mainlist:active {
      background: rgb(var(--color-foreground-rgb) / 0.045);
    }

    /* The row is padded now, so the rule has to start where the picture does
       rather than at the panel edge.

       The inset goes on EVERY item and the hairline only on the ones that
       need it. Putting both on ":not(:last-child)" left the last row 8px
       further left than the other nine -- visible as a step at the bottom of
       the list. */
    .menu-drawer__menu.has-submenu > .menu-drawer__list-item {
      margin-inline: 8px;
    }
  }

  /* Submenus (Artifacts -> Sculpture & Figurines -> ...) as a list: a small
     square picture on the left and the name beside it, the same way the
     top-level rows read, instead of Horizon's
     two-column tile grid. Phones and touch tablets -- desktop uses the mega menu.
     ".header-drawer" is there for weight: the grid rules in header-drawer.liquid
     reach four classes deep through :has()/:not(). Items with no picture get
     the same square as a faint placeholder so the names stay aligned. */
  @media screen and (max-width: 749px), screen and (hover: none) and (pointer: coarse) {
    .header-drawer .menu-drawer .menu-drawer__menu--grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .header-drawer .menu-drawer .menu-drawer__menu--grid > .menu-drawer__list-item:not(:last-child) {
      border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    }

    .header-drawer .menu-drawer .menu-drawer__menu--grid .menu-drawer__list-item > .menu-drawer__menu-item {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      column-gap: 14px;
      padding-block: 8px;
    }

    .header-drawer .menu-drawer .menu-drawer__menu--grid .menu-drawer__list-item > .menu-drawer__menu-item > .menu-drawer__link-image,
    .header-drawer .menu-drawer .menu-drawer__menu--grid .menu-drawer__list-item > .menu-drawer__menu-item::before {
      order: -1;
      flex: none;
      width: 56px;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
    }

    /* Under a heading (Sculpture & Figurines), the rows read as its children:
       the heading carries the weight, the rows step in and go a size smaller
       and a shade lighter. */
    .header-drawer .menu-drawer .menu-drawer__list-item--flat > .menu-drawer__menu-item--parent {
      font-weight: 600;
    }

    .header-drawer .menu-drawer .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
      padding-inline-start: 16px;
    }

    .header-drawer .menu-drawer .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid .menu-drawer__list-item > .menu-drawer__menu-item {
      font-size: 0.8125rem;
      color: rgb(var(--color-foreground-rgb) / 0.72);
      padding-block: 6px;
    }

    .header-drawer .menu-drawer .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid .menu-drawer__list-item > .menu-drawer__menu-item > .menu-drawer__link-image,
    .header-drawer .menu-drawer .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid .menu-drawer__list-item > .menu-drawer__menu-item::before {
      width: 44px;
      border-radius: 8px;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:18) */
.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__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:19) */
.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:20) */
.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:22) */
.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:23) */
/**
   * 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);
    background-color: var(--color-background);
  }

  /**
   * 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:24) */
.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);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:28) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:29) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

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

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:30) */
.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-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:31) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:34) */
/* 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 {
    .quick-add {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button.add-to-cart-button {
      width: calc(var(--button-size-md) - 4px);
      position: relative;
      transform: translateX(2px);
      justify-self: flex-end;
      height: fit-content;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      pointer-events: all;
      opacity: 1;
      overflow: hidden;
      outline: 2px solid transparent;

      @media (prefers-reduced-motion: no-preference) {
        transition: width var(--animation-speed) var(--ease-out-cubic),
          outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow),
          transform var(--animation-speed) var(--ease-out-cubic);
      }

      &:is(:hover, :active) {
        outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
      }

      &:focus-visible {
        outline-color: currentcolor;
        transition-delay: 0s;
      }
    }

    .quick-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .quick-add__button:is(:hover, :focus-visible) {
        width: max-content;
        transform: translateX(0);
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:35) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @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(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    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 {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-row (INDEX:38) */
/* This section's own row -- a fixed count of columns, never wrapping,
     never scrolling. Deliberately not 'layout-styles.liquid': that system
     covers arrangements a merchant picks between, and this design is always
     one row. */
  .product-row {
    display: grid;
    grid-template-columns: repeat(var(--product-row-columns, 5), minmax(0, 1fr));
    gap: var(--product-row-gap, 24px);
  }

  @media screen and (max-width: 749px) {
    .product-row {
      grid-template-columns: repeat(var(--product-row-mobile-columns, 2), minmax(0, 1fr));
    }
  }
/* END_SECTION:product-row */

/* START_SECTION:product-section (INDEX:39) */
.product-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-block-end: 20px;
  }

  .product-tabs__pill {
    padding: 12px 26px;
    border: 1px solid var(--sh-accent, #e0b74e);
    border-radius: 999px;
    background: transparent;
    color: var(--sh-accent, #e0b74e);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .product-tabs__pill.is-active {
    background: var(--sh-heading, #0f2318);
    border-color: var(--sh-heading, #0f2318);
    color: var(--sh-accent, #e0b74e);
  }

  /* --- Underline tabs ---------------------------------------------------
     The same buttons with the pill taken off: tabs divided by hairlines and
     marked by a bar under the selected one, sitting on a rule that runs the
     width of the row. Nothing here touches the markup or the switcher --
     tab-switcher.js moves .is-active exactly as it does for the pills, and
     everything below is a rule about how that class looks. */
  .product-tabs--underline {
    gap: 0;
    align-items: stretch;
    border-block-end: 1px solid rgb(15 35 24 / 0.14);
    flex-wrap: nowrap;
  }


  .product-tabs--underline .product-tabs__pill {
    /* position, so the active bar can be hung off the button's own bottom
       edge and sit over the row's rule rather than above it. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 26px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    /* Dark enough to still read as a label rather than as disabled text. At
       0.55 the two unselected tabs went grey and the row looked half broken;
       the underline is what marks the selection, not the colour. */
    /* A neutral grey, not a tinted green. Against a gold selection the green
       read as a third colour rather than as "not selected". */
    color: rgb(0 0 0 / 0.52);
    font-size: 1rem;
    font-weight: 500;
  }

  /* On the adjoining edge only, so the row does not open and close with a
     stray line at either end. */
  .product-tabs--underline .product-tabs__pill + .product-tabs__pill {
    border-inline-start: 1px solid rgb(15 35 24 / 0.14);
  }

  /* Gold on every tab, selected or not. The icon is what the tab is; dimming
     it alongside the label would make the row read as mostly disabled. */
  /* Rendered as a bare <svg> around the shared icon path rather than through
     'icon-or-image', which only exists to choose between an icon and an
     uploaded image -- there is no image here, and its required image_upload
     argument has no honest value to pass. So the size lives here instead of
     coming from that snippet's width. */
  .product-tabs__icon {
    inline-size: 20px;
    block-size: 20px;
    fill: currentColor;
  }

  .product-tabs--underline .product-tabs__icon {
    flex: none;
    color: var(--sh-accent, #e0b74e);
  }

  .product-tabs--underline .product-tabs__pill.is-active {
    background: transparent;
    color: var(--sh-accent, #b48622);
  }

  .product-tabs--underline .product-tabs__pill.is-active::after {
    content: '';
    position: absolute;
    /* The full width of the tab, padding included -- the bar measures the
       tab, so insetting it made it read as underlining the words instead. */
    inset-inline: 0;
    /* -1px, so the bar covers the row's own hairline instead of stacking on
       top of it and reading thicker than it is. */
    inset-block-end: -1px;
    block-size: 4px;
    border-radius: 2px;
    /* The bar takes the same gold as the label. Green under a gold word read
       as two marks doing the same job in two voices. */
    background: var(--sh-accent, #b48622);
  }

  /* Three tabs never wider than the row.
     --------------------------------------------------------------------
     26px of padding each side came to 156px across three tabs -- more than
     "What's New" and "All Products" put together, and the reason the row
     overflowed rather than the labels being long. Cut to 10px on a phone,
     with the icon and the label both a step down, which is what buys the
     single line.

     min-inline-size: 0 as well: a flex item's automatic minimum size is its
     min-content width, so without this the tabs refuse to shrink below their
     labels and push out of the row however small the padding gets. */
  @media screen and (max-width: 749px) {
    /* No dividers on a phone, so one gap does the work of two paddings.
       ------------------------------------------------------------------
       A hairline between tabs has to be paid for on both sides -- 10px of
       padding, the border, 10px again -- so every seam cost 21px and each
       outer edge another 10. Without it a single gap sits between the labels
       and nothing is spent at the ends. That is 30px back across the row,
       which is what gets "Bestseller Buzz" onto one line.

       The active bar then measures the label rather than the label plus its
       padding, which is if anything the better reading of what is selected. */
    .product-tabs--underline {
      gap: 18px;
      padding-inline: 8px;
      /* Centred rather than stretched. With the dividers gone the row is only
         as wide as its three labels, so left-aligning it hangs the whole thing
         off one edge with a gap where a fourth tab would be. */
      justify-content: center;
    }

    .product-tabs--underline .product-tabs__pill {
      padding: 8px 0 12px;
      gap: 8px;
      min-inline-size: 0;
      /* Belt and braces: min-inline-size: 0 lets a tab shrink below its own
         label, and what it does then is wrap. This makes it overflow visibly
         instead, so a label that does not fit is a bug I can see rather than
         a second line nobody asked for. */
      white-space: nowrap;
    }

    .product-tabs--underline .product-tabs__pill + .product-tabs__pill {
      border-inline-start: 0;
    }


    /* Icons off on a phone. The three labels come to 262px and fit easily;
       the icons are what did not -- 72px across three tabs once the gap
       beside each is counted, on a row with 412px to spend. Dropping them
       leaves 50px spare, which still holds on a 360px handset and survives a
       tab being renamed. They are a desktop flourish; the label is what gets
       tapped. */
    .product-tabs--underline .product-tabs__icon {
      display: none;
    }

    .product-tabs--underline .product-tabs__pill.is-active::after {
      block-size: 3px;
    }
  }
  /* Per-tab "view all", sitting under the grid inside the tab panel. Styled
     like the section's other quiet links rather than as a button: it is a way
     out of the section, not the section's call to action. */
  .product-section__view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 20px;
    padding-block-end: 4px;
    border-block-end: 1px solid currentcolor;
    color: var(--item-cta, #b48622);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .product-section__view-all:hover,
  .product-section__view-all:focus-visible {
    opacity: 0.72;
  }

  .product-section__view-all svg {
    flex: none;
  }

  /* Both view-all links (under the tabs, and in the header) in a deeper,
     richer gold and a heavier weight: at 0.75rem the plain accent gold on
     cream washed out and the links were easy to miss. */
  .section-products .product-section__view-all,
  .section-products .section-header__view-all {
    color: #a8740a;
    font-weight: 700;
  }

  .section-products .product-section__view-all svg path,
  .section-products .section-header__view-all svg path {
    stroke-width: 1.8;
  }

  /* Centred on a phone. Left-aligned it sits under the first column and reads
     as belonging to that card rather than to the row; centred it reads as the
     way out of the whole section.

     margin-inline: auto rather than text-align on the parent, so only the link
     moves -- the parent also holds the product grid, and centring that would
     pull the last row of an odd-numbered set out of its column. width:
     fit-content keeps the underline hugging the text instead of stretching the
     full width. */
  @media screen and (max-width: 749px) {
    .product-section__view-all {
      display: flex;
      width: fit-content;
      margin-inline: auto;
    }
  }

  /* --- Feature tile ------------------------------------------------------
     A picture with a line and a button, leading the row. In the row it spans
     two card tracks and stretches to the cards' own height -- the grid does
     that by default -- so its top and bottom edges line up with theirs and
     the picture is cropped to fit rather than setting a height of its own. */
  .feature-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border: 1px solid var(--item-accent, #b48622);
    border-radius: var(--item-radius, 8px);
    background-color: var(--item-bg-dark, #12281c);
    color: #fbf8f1;
    text-decoration: none;
    isolation: isolate;
  }

  .feature-tile--in-row {
    grid-column: span 2;
  }

  .feature-tile--banner {
    display: none;
  }

  .feature-tile__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
  }

  /* Dark at the foot only, where the words sit. The top of the picture stays
     as it was shot. */
  .feature-tile__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to top,
      rgb(10 24 16 / 0.88) 0%,
      rgb(10 24 16 / 0.55) 35%,
      rgb(10 24 16 / 0) 65%
    );
  }

  .feature-tile__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(18px, 2.2vw, 32px);
  }

  /* A light gold of its own, not the section's accent: the tile is always a
     dark photo, while the accent is chosen for the section's background and
     on a light band turns a deeper gold that goes muddy over the picture. */
  .feature-tile__eyebrow {
    color: #e0b74e;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .feature-tile__heading {
    max-inline-size: 18ch;
    font-family: var(--font-h1--family, inherit);
    font-size: clamp(1.35rem, 2vw, 2.1rem);
    line-height: 1.15;
  }

  .feature-tile__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 6px;
    padding: 0.75em 1.5em;
    border-radius: 999px;
    background-color: #e0b74e;
    color: #12281c;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
  }

  .feature-tile:hover .feature-tile__button,
  .feature-tile:focus-visible .feature-tile__button {
    background-color: #fbf8f1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .feature-tile:hover .feature-tile__image {
      transform: scale(1.04);
    }
  }

  /* A small lift on hover, and a press on tap for a phone, which has no
     hover. The lift is the banner's only: the in-row copy sits inside the
     scrolling track, which would clip a tile that rose out of it, so that copy
     keeps just the zoom and the button change above. */
  .feature-tile--banner {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  @media (prefers-reduced-motion: no-preference) {
    @media (hover: hover) {
      .feature-tile--banner:hover {
        transform: translateY(-3px);
        border-color: #f0d68a;
        box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
      }
    }

    .feature-tile--banner:active {
      transform: scale(0.985);
    }

    .feature-tile--banner:active .feature-tile__image {
      transform: scale(1.04);
    }
  }

  /* On a phone two card tracks are wider than the screen, so the in-row copy
     steps out and the banner above the row takes its place. */
  @media screen and (max-width: 749px) {
    .feature-tile--in-row {
      display: none;
    }

    .feature-tile--banner {
      display: flex;
      aspect-ratio: 4 / 3;
      margin-block-end: 16px;
    }
  }

  /* --- Heading leads ------------------------------------------------------
     The script style makes the eyebrow the loudest line. This turns it round
     for one section without touching the shared header: the eyebrow becomes
     a quieter lead-in and the heading carries the weight. */
  .section-products--heading-leads .section-header--script .section-header__eyebrow {
    font-size: clamp(1.05rem, 1.6vw, 1.8rem);
    font-weight: 400;
  }

  .section-products--heading-leads .section-header__heading {
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  @media screen and (max-width: 749px) {
    .section-products--heading-leads .section-header {
      gap: 6px;
    }
  }

  /* --- Eyebrow shimmer ----------------------------------------------------
     A band of light that crosses the eyebrow every few seconds -- on the pill
     header, the gold tablet. Most of each cycle is spent still, so it reads
     as a glint rather than as something flashing. Nothing moves for a
     visitor who has asked for reduced motion. */
  .section-products--shimmer .section-header__eyebrow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .section-products--shimmer .section-header__eyebrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      rgb(255 255 255 / 0) 30%,
      rgb(255 255 255 / 0.55) 50%,
      rgb(255 255 255 / 0) 70%
    );
    transform: translateX(-120%);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .section-products--shimmer .section-header__eyebrow::after {
      animation: section-products-shimmer 5s ease-in-out 1.5s infinite;
    }
  }

  @keyframes section-products-shimmer {
    0% {
      transform: translateX(-120%);
    }

    30%,
    100% {
      transform: translateX(120%);
    }
  }
/* END_SECTION:product-section */

/* START_SECTION:product-showcase (INDEX:40) */
.section-product-showcase {
    --sh-accent: #e0b74e;
    --sh-heading: #0f2318;
    --sh-body: #5b5b52;
  }

  .showcase-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-block-end: 32px;
  }

  .showcase-tabs__pill {
    padding: 10px 22px;
    border: 1px solid var(--sh-heading, #0f2318);
    border-radius: 999px;
    background: transparent;
    color: var(--sh-heading, #0f2318);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .showcase-tabs__pill.is-active {
    background: var(--sh-heading, #0f2318);
    border-color: var(--sh-heading, #0f2318);
    color: #fff;
  }

  /* Same reason as .layout[hidden] in layout-styles: display:grid below is an
     author rule and outranks the browser's [hidden] { display: none }, so a
     hidden tab panel would still show. */
  .showcase-grid[hidden] {
    display: none;
  }

  .showcase-grid {
    display: grid;
    grid-template-columns: repeat(var(--showcase-columns, 4), minmax(0, 1fr));
    gap: var(--showcase-gap, 24px);
  }

  .showcase-card {
    position: relative;
    background: var(--showcase-card-bg, #0f2318);
    border-radius: var(--showcase-corner-radius, 8px);
    overflow: hidden;
  }

  .showcase-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.65);
    color: #fff;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: capitalize;
  }

  .showcase-card__wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }

  .showcase-card__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
  }

  .showcase-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }

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

  .showcase-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 18px;
  }

  .showcase-card__title {
    color: var(--showcase-title-color, #fff);
    font-size: 0.95rem;
  }

  .showcase-card__rating {
    display: flex;
    gap: 2px;
  }

  .showcase-card__star {
    width: 12px;
    height: 12px;
    fill: rgb(255 255 255 / 0.25);
  }

  .showcase-card__star--filled {
    fill: #e0b74e;
  }

  .showcase-card__price {
    color: var(--showcase-price-color, #fff);
    font-size: 0.9rem;
  }

  .showcase-card__price .price del {
    opacity: 0.55;
    margin-inline-end: 6px;
  }

  @media screen and (max-width: 749px) {
    .showcase-grid {
      grid-template-columns: repeat(var(--showcase-mobile-columns, 2), minmax(0, 1fr));
    }
  }
/* END_SECTION:product-showcase */

/* START_SECTION:quick-order-list (INDEX:42) */
.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:search-results (INDEX:45) */
/* Search result cards show the selling price only, matching the product
     cards elsewhere on the site (.item__meta-was in item-styles). Scoped to
     this section's grid, so product pages keep their struck MRP. Delete this
     block to bring it back. */
  .search-results-list .product-grid__item .compare-at-price {
    display: none;
  }

  /* Square card pictures on the search page; the card's height follows.
     Delete to go back to the 4 / 5 default from item-styles. */
  .search-results-list {
    --item-ratio: 1 / 1;
  }
/* END_SECTION:search-results */

/* START_SECTION:slideshow (INDEX:48) */
.slideshow-section {
    position: relative;

    slideshow-controls .slideshow-control.icon-pause,
    slideshow-controls .slideshow-control.icon-play {
      display: none;
    }

    slideshow-controls[pagination-position='left']:has(.slideshow-controls__numbers) {
      left: 110px;
      bottom: 40px;
    }

    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;
    }

    /* Both badges want the same corner. When a slide carries a text flag, the
       picture badge moves to the right-hand side rather than sitting under
       it -- one corner, one badge. */
    slideshow-slide:has(.slide-badge) ~ * .slideshow-badge,
    .slideshow-section:has(.slide-badge) .slideshow-badge {
      inset-inline-start: auto;
      inset-inline-end: var(--slideshow-badge-inset, 16px);
    }

    /* The badge, pinned to the banner's top-left corner. */
    .slideshow-badge {
      position: absolute;
      inset-block-start: var(--slideshow-badge-inset, 16px);
      inset-inline-start: var(--slideshow-badge-inset, 16px);
      z-index: var(--layer-raised);
      inline-size: var(--slideshow-badge-width-mobile, 84px);
      pointer-events: none;
    }

    .slideshow-badge__image {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }

    @media screen and (min-width: 750px) {
      .slideshow-badge {
        inline-size: var(--slideshow-badge-width, 140px);
      }
    }

    /* Banner text, scaled for phones.
       ------------------------------------------------------------------
       A headline sized for a 1440px banner is the same headline on a 390px
       one -- the block's size setting is a single value, and it is desktop
       that needs the big number. One percentage here brings all of a slide's
       text down together, rather than every line being set twice.

       It multiplies whatever each text block resolved to: 'typography-style'
       writes that as --font-size, and .custom-font-size reads it, so the
       proportions the slide was designed with are kept and only the overall
       size changes. Buttons set their size inline and are left alone -- a
       tap target should not shrink with the copy. */
    @media screen and (max-width: 749px) {
      slideshow-slide .custom-font-size,
      slideshow-slide .custom-font-size > * {
        font-size: calc(var(--font-size) * var(--slide-text-scale, 1));
      }
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:watch-and-shop (INDEX:49) */
/* --- The Watch & Shop panel ------------------------------------------- */
  /* Film on one side, product on the other. Owned by this section rather than
     by item-styles: nothing else opens it, and a shared component with one
     caller is a generalisation nobody asked for. */
  .watch-shop-item--openable {
    cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    /* The section already asks for --layout-snap-width: 62%, but this row uses
       the small-displayer variant, whose rule in layout-styles deliberately
       keeps 100% on a phone -- "it is small already, and 78% of a phone is not
       small". True of a small displayer; not true here, where the ratio is
       3/5 portrait video. At full width that made one card 358x657 on a 390px
       screen: the media alone was 597px, about 73% of the viewport, so a
       single item filled the phone.
       Restoring the declared 62% brings the card to ~222px wide and shows a
       slice of the next one, which is also the cue that the row scrolls.
       (0,3,0) to clear the (0,2,0) of the layout-styles rules. */
    .section-watch-and-shop .layout--small-displayer.layout--scroll {
      grid-template-columns: none;
      grid-auto-columns: var(--layout-snap-width, 62%);
    }

    .section-watch-and-shop .layout--small-displayer > * {
      max-inline-size: none;
    }
  }

  /* The card opens the panel; nothing inside it competes for the tap.
     The shared 'video' snippet draws its own play control, and a tap on that
     started the preview playing inline -- the film without the price, the
     thumbnails or the add-to-cart that the panel exists to show. Neutralised
     here rather than by not rendering the control, because the same markup is
     what the card shows when the panel is absent. */
  .watch-shop-item--openable .item__media * {
    pointer-events: none;
  }

  /* One play mark, centred on the picture, drawn from the media box's own two
     pseudo-elements rather than added to the markup -- nothing here needs an
     element of its own, and the media already provides the positioning
     context and clips to the picture's corners.

     Only on cards showing a still. A card with a preview video is already
     moving and the shared 'video' snippet draws its own control; two play
     buttons on one picture is worse than none. */
  .watch-shop-item--openable.watch-shop-item--still .item__media::before,
  .watch-shop-item--openable.watch-shop-item--still .item__media::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 1;
    content: '';
    pointer-events: none;
    transition: scale 0.25s ease, background-color 0.25s ease;
  }

  /* The disc. Translucent rather than solid so the frame behind it still
     reads -- it is a mark on a photograph, not a control bolted over one. */
  .watch-shop-item--openable.watch-shop-item--still .item__media::before {
    inline-size: 56px;
    block-size: 56px;
    border: 1px solid rgb(255 255 255 / 0.55);
    border-radius: 50%;
    background: rgb(8 16 12 / 0.42);
    translate: -50% -50%;
  }

  /* The triangle, from borders. Nudged a couple of pixels right of centre:
     a triangle centred on its bounding box looks left-heavy inside a circle,
     because its visual mass sits behind the point. */
  .watch-shop-item--openable.watch-shop-item--still .item__media::after {
    inline-size: 0;
    block-size: 0;
    border-block: 9px solid transparent;
    border-inline-start: 15px solid #fff;
    border-inline-end: 0;
    translate: calc(-50% + 3px) -50%;
  }

  @media (hover: hover) {
    .watch-shop-item--openable.watch-shop-item--still:hover .item__media::before {
      background: rgb(8 16 12 / 0.62);
      scale: 1.06;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .watch-shop-item--openable.watch-shop-item--still .item__media::before,
    .watch-shop-item--openable.watch-shop-item--still .item__media::after {
      transition: none;
    }
  }

  /* Sized to the content, not to the screen. What the panel holds -- a film
     and a product -- does not get bigger on a bigger monitor, so the px caps
     are the real limit and the viewport units only take over on a screen too
     small to honour them. Left at 94vw/92vh it grew to fill whatever it was
     opened on, which read as a takeover of the page and left the product
     column standing in a field of empty cream.

     Both halves read these, so the panel, the frame inside it and the film
     stay the same height as each other. Two numbers to change, not six. */
  .ws-panel {
    --ws-panel-w: 65vw;
    --ws-panel-h: min(700px, 78vh);

    padding: 0;
    border: 0;

    /* Set outright, not merely capped, and in physical properties.
       'inline-size: 100%' with a 'max-inline-size' cap left the browser's own
       modal-dialog rule -- max-width: calc(100% - 6px - 2em), i.e. very
       nearly the whole window -- as the thing actually deciding the width the
       moment our cap failed to land. A maximum that loses is invisible: the
       panel just quietly reverts to full width and nothing in the stylesheet
       looks wrong. An explicit width cannot fail that way. */
    width: var(--ws-panel-w, 65vw);
    max-width: var(--ws-panel-w, 65vw);
    max-height: var(--ws-panel-h, 700px);
    border-radius: 18px;
    background: transparent;
    overflow: visible;
  }

  .ws-panel::backdrop {
    background: rgb(8 16 12 / 0.72);
  }

  .ws-panel__inner {
    position: relative;
    display: grid;
    /* The film takes half, the product the rest. Not an even split: a portrait
       video in a half-width frame is mostly the black it is letterboxed
       against, so the half that was paying for that black goes to the column
       that has words in it. */
    grid-template-columns: 50% minmax(0, 1fr);
    max-height: var(--ws-panel-h, 700px);
    border-radius: 18px;
    background: var(--ws-panel-bg, #f7f4ea);
    overflow: hidden;
  }

  /* The film sits on black, not on the panel's cream. A portrait video in a
     landscape frame is letterboxed whatever we do -- black reads as the edge
     of the picture, cream reads as a gap someone forgot to fill. */
  .ws-panel__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    background: #000;
  }

  .ws-panel__video {
    inline-size: 100%;
    block-size: 100%;
    max-height: var(--ws-panel-h, 700px);
    object-fit: contain;
  }

  .ws-panel__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 34px 34px 38px;
    overflow-y: auto;
  }

  .ws-panel__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.08);
    color: var(--sh-heading, #12281c);
    cursor: pointer;
  }

  .ws-panel__close svg {
    inline-size: 18px;
  }

  .ws-panel__thumbs {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ws-panel__thumbs::-webkit-scrollbar {
    display: none;
  }

  .ws-panel__thumb {
    display: block;
    inline-size: 64px;
    block-size: 64px;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
  }

  .ws-panel__thumb.is-current {
    border-color: var(--sh-accent, #b48622);
  }

  .ws-panel__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .ws-panel__title {
    margin: 0;
    color: var(--sh-heading, #12281c);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.2;
  }

  .ws-panel__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: 1.5rem;
  }

  .ws-panel__price-was {
    color: rgb(0 0 0 / 0.45);
    font-size: 1.1rem;
  }

  .ws-panel__price-now {
    color: var(--sh-heading, #12281c);
    font-weight: 600;
  }

  .ws-panel__tax {
    margin: -6px 0 0;
    color: rgb(0 0 0 / 0.55);
    font-size: 0.9rem;
  }

  .ws-panel__cta,
  .ws-panel__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    text-decoration: none;
  }

  .ws-panel__cta {
    background: var(--sh-heading, #12281c);
    color: #fff;
  }

  /* Greyed rather than removed: the panel should still answer "can I buy
     this", and an absent button answers nothing. */
  .ws-panel__cta--disabled {
    background: rgb(0 0 0 / 0.32);
    cursor: not-allowed;
  }

  .ws-panel__secondary {
    border: 1px solid rgb(0 0 0 / 0.18);
    color: var(--sh-heading, #12281c);
  }

  .ws-panel__range {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 0;
    padding: 14px 0 0;
    border-block-start: 1px solid rgb(0 0 0 / 0.1);
    list-style: none;
  }

  .ws-panel__range-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
  }

  .ws-panel__range-item.is-current {
    border-color: var(--sh-accent, #b48622);
  }

  .ws-panel__range-image {
    inline-size: 54px;
    block-size: 54px;
    border-radius: 6px;
    object-fit: cover;
  }

  .ws-panel__range-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
  }

  .ws-panel__range-title {
    color: var(--sh-heading, #12281c);
    font-size: 0.95rem;
  }

  .ws-panel__range-price {
    color: var(--sh-accent, #b48622);
    font-size: 0.9rem;
  }

  /* One column on a phone, film first. Side by side there is no room for
     either half to be worth showing. */
  @media screen and (max-width: 749px) {
    .ws-panel {
      /* On a phone the panel IS the screen -- there is nowhere else for it to
         go -- so the caps are lifted rather than tightened. */
      --ws-panel-w: 100vw;
      --ws-panel-h: 100vh;

      border-radius: 0;
    }

    .ws-panel__inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      border-radius: 0;
    }

    .ws-panel__video {
      max-block-size: 48vh;
    }

    .ws-panel__info {
      padding: 20px 20px 28px;
    }
  }
/* END_SECTION:watch-and-shop */

/* CSS from block stylesheet tags */
/* START_BLOCK:_blog-post-card (INDEX:52) */
.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--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .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;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:53) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:54) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:55) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .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:56) */
.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:57) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    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:59) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:60) */
.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:61) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:62) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  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;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: 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;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:63) */
.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;
    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:_featured-blog-posts-card (INDEX:70) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .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__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @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;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:71) */
.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:73) */
.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:76) */
.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:77) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

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

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

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

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

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

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

  /* Optical centring, measured from the file rather than eyeballed.
     Ghar-logo-trimmed.png is 490x233 with zero transparent padding on any edge
     -- the crop is tight. But the ink is not evenly distributed inside it: the
     wordmark carries the mass in the upper two-thirds, then a near-empty band,
     then the small "art" script. Alpha-weighted centre of mass is y=103 against
     a geometric centre of y=116, so the mark sits 13px -- 5.6% -- above the
     middle of its own box.

     Centring the box therefore leaves the mark high and reads as extra space
     underneath. Nudging by that same 5.6% puts the ink on the centre line.
     Every ancestor is overflow: visible, so nothing clips.

     The proper fix is a re-export with the composition balanced; this makes it
     sit right in the meantime, and comes straight back out when that happens. */
  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);
    transform: translateY(var(--header-logo-optical-shift, 5.6%));

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

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

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

/* START_BLOCK:_header-menu (INDEX:80) */
/* The label and its chevron are one unit. em rather than a length so the
     chevron keeps its distance from the word if the menu font size changes. */
  .menu-list__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
  }

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

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

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

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

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

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

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

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

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

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

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

  .menu-list {
    /* The only spacing number on the desktop bar. Everything else below is
       derived from it, so the gap between two items and the inset at the ends
       cannot drift apart the way two hand-set values do.

       vw, not rem: ten top-level items is more than the bar holds at every
       width, and the space around them is the only thing that can give. It
       gives in proportion to the window -- about 14px on a 900px laptop, 23px
       at 1440. A fixed value holds its width while items are pushed into
       "More", which is the behaviour this replaces. */
    --menu-bar-gap: 1.6vw;

    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }


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

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

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

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: 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: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  /* Shown, and in the flow next to its label.

     Stock parks this button absolutely at opacity 0 and reveals it only on
     keyboard focus, because a desktop submenu opens on hover and needs no
     button. But hover is not discoverable: nothing on the bar says which five
     of the ten items have anything underneath them. The chevron is that
     sign, so it is drawn.

     It stays pointer-events: none. Opening is the list item's job -- the
     chevron says a submenu exists, it is not a second control competing with
     the hover that already opens it. Keyboard focus turns events back on, so
     tabbing to it and pressing Enter still works.

     The negative inline-start margin cancels the link title's own padding,
     which is half of --menu-bar-gap and exists to space items from each
     other, not to hold the chevron away from its word. Derived from the same
     variable so the two cannot drift apart. */
  .menu-list__disclosure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: calc(var(--menu-bar-gap) / -2);

    /* The item's trailing half-gap, moved to the far side of the chevron.

       The gap between two labels is half of --menu-bar-gap from each of
       them, carried as padding on the link title. On an item with a submenu
       the chevron lands inside that trailing half, so it is the chevron
       rather than empty space that meets the next item -- and every item with
       a submenu reads tighter than every item without one, which is the one
       thing the spacing was supposed to keep even. Taking the same half here
       puts the whole chevron before the gap instead of inside it. */
    padding: 0 calc(var(--menu-bar-gap) / 2) 0 0;
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    outline-offset: 0.1em;
    pointer-events: none;

    &:focus-visible {
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
    transform: rotate(180deg);
  }

  /* Half the gap on each side, so two adjacent items add up to exactly one
     --menu-bar-gap between their labels. The padding is on the link rather
     than a gap on the row because it is also the hover and focus target. */
  .menu-list__link-title {
    padding-inline: calc(var(--menu-bar-gap) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

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

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

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

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link {
    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-bar-gap) / 2);
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

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

    background-color: transparent;
  }

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

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

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

  /* 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;

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      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;
    }

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[aria-expanded='true']) .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 1;
    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: 1 / 1;
    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);
    }
  }

  /* Collection-image menus: square thumbnails on a 10-column grid, so Barware
     and Collections sit in one short row and the cards with link lists (span 2)
     shrink with them. Narrow laptops keep 8 so the squares don't get tiny. */
  @media screen and (min-width: 990px) {
    .mega-menu__grid:has(.mega-menu__link-image),
    .mega-menu__grid:has(.mega-menu__link-image) .mega-menu__list {
      --menu-columns-desktop: 8;
    }
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__grid:has(.mega-menu__link-image),
    .mega-menu__grid:has(.mega-menu__link-image) .mega-menu__list {
      --menu-columns-desktop: 10;
    }
  }

  /* Cards with a link list (Artifacts, Sculplight): square image on the left,
     heading + links beside it, so the card is as short as the image instead of
     image-then-list stacked. The parent link becomes a subgrid of the card so
     the image and its heading stay one clickable link. */
  @media screen and (min-width: 990px) {
    .mega-menu__list > .mega-menu__column--wide-collection-image {
      grid-column: span 4;
    }

    .mega-menu__list > .mega-menu__column--wide-collection-image > div {
      display: grid;
      grid-template-columns: clamp(150px, 42%, 190px) minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      column-gap: var(--gap-xl, 24px);
      align-items: start;
    }

    .mega-menu__list > .mega-menu__column--wide-collection-image .mega-menu__link--parent:has(.mega-menu__link-image) {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      padding-block: 0;
    }

    .mega-menu__list > .mega-menu__column--wide-collection-image .mega-menu__link--parent .mega-menu__link-image {
      grid-column: 1;
      grid-row: 1 / -1;
      margin-bottom: 0;
    }

    .mega-menu__list > .mega-menu__column--wide-collection-image .mega-menu__link--parent > span {
      grid-column: 2;
      grid-row: 1;
      padding-block-end: var(--padding-xs, 6px);
    }

    .mega-menu__list > .mega-menu__column--wide-collection-image > div > ul {
      grid-column: 2;
      grid-row: 2;
      position: relative;
    }

    .mega-menu__list > .mega-menu__column--wide-collection-image > div > ul .mega-menu__link {
      padding-block: 3px;
    }
  }

  /* Desktop dropdown panel in the homepage cream (#f7f4ea, the panel colour the
     home sections use). Set here instead of the block's Background setting so
     the phone drawer, which shares that setting, stays as it is. html prefix
     outranks the inline --color-submenu the block prints. */
  html .header__underlay {
    --color-submenu: #f7f4ea;
  }

  /* Tile mega menu (snippets/mega-menu-tiles.liquid): one small square tile per
     collection in every "Collection images" menu, same size everywhere.
     Tile size scales with the window: ~76px on small laptops, ~88px at 1280,
     capped at 100px on big screens. */
  .mega-tiles {
    --mega-tile-size: clamp(76px, 7vw, 100px);
    --mega-tile-gap: 16px;
    --mega-tile-gold: #a8842c;

    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 28px 32px;
  }

  .mega-tiles__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px var(--mega-tile-gap);
    margin: 0;
    padding: 0;
  }

  /* Grouped menus: at most 5 tiles per line inside a group, extra ones wrap */
  .mega-tiles--grouped .mega-tiles__row {
    justify-content: flex-start;
    max-width: calc(var(--mega-tile-size) * 5 + var(--mega-tile-gap) * 4);
  }

  .mega-tiles__group + .mega-tiles__group {
    padding-inline-start: 32px;
    border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .mega-tiles__heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    text-decoration: none;
    color: var(--menu-parent-font-color);
  }

  .mega-tiles__heading-title {
    font-family: var(--menu-parent-font-family);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mega-tiles__view-all {
    font-family: var(--menu-child-font-family);
    font-size: 12px;
    color: var(--mega-tile-gold);
    white-space: nowrap;
  }

  .mega-tiles__heading:hover .mega-tiles__view-all {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mega-tiles__item {
    width: var(--mega-tile-size);
  }

  .mega-tiles__tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: var(--menu-child-font-color);
  }

  .mega-tiles__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--mega-tile-radius);
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .mega-tiles__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .mega-tiles__label {
    font-family: var(--menu-child-font-family);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    /* Parent nav item is nowrap — let tile names wrap to their 2 lines */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
  }

  .mega-tiles__tile:hover .mega-tiles__img {
    transform: scale(1.06);
  }

  .mega-tiles__tile:hover .mega-tiles__label {
    color: var(--mega-tile-gold);
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:83) */
.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:86) */
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:91) */
/* 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:97) */
.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:98) */
/* The badge. Three designs off one block of markup: a solid pill, an
     outlined pill with the icon on a disc, and the corner flag the product
     cards use. Every colour arrives as a custom property from the style the
     slide picked, so nothing here is hardcoded to a colourway. */
  .slide-badge {
    /* The multiplier base.css applies to every padding setting, repeated here
       because it is published on .spacing-style and this element is not one.
       Without it --padding-inline-start resolves to max(20px, calc(* 70px))
       with nothing for * to be, and the whole declaration is thrown away. */
    --spacing-scale: var(--spacing-scale-md);

    position: absolute;
    inset-block-start: var(--slideshow-badge-inset, 16px);
    /* Left edge shared with the copy. Assumes the slide is left-aligned, which
       every slide on this banner is; a slide set to centre or right would move
       its copy and leave the badge here. */
    inset-inline-start: var(--padding-inline-start, 16px);
    z-index: var(--layer-raised);
    display: flex;
    align-items: center;
    gap: 12px;
    max-inline-size: calc(100% - 32px);
    padding: 9px 22px 10px 14px;
    border-radius: 999px;
    background: var(--badge-bg, #f6f1e7);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
    text-align: center;
    pointer-events: none;
  }

  /* Same breakpoint base.css uses, so the badge crosses from 0.7 to 1.0 on the
     same pixel the copy does. 70px reads as 49px below this and 70px above. */
  @media screen and (min-width: 990px) {
    .slide-badge {
      --spacing-scale: var(--spacing-scale-default);
    }
  }

  /* With no icon there is nothing to sit beside, so the copy takes the middle
     and the padding is even -- the lopsided left inset above exists only to
     make room for the icon. */
  .slide-badge:not(:has(.slide-badge__icon)) {
    padding-inline: 22px;
  }

  /* Tinted with the style's icon colour, so one file serves every colourway. */
  .slide-badge__icon {
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    background-color: var(--badge-icon-color, #b8873b);
    -webkit-mask-image: var(--badge-icon-url);
    mask-image: var(--badge-icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .slide-badge__rule {
    flex: none;
    inline-size: 1px;
    align-self: stretch;
    margin-block: 2px;
    background: var(--badge-title-color, #b8873b);
    opacity: 0.45;
  }

  .slide-badge__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-inline-size: 0;
  }

  /* The small line is a label: spaced out, lighter, and deliberately smaller
     than the headline so the eye lands on the offer, not the word "offer". */
  .slide-badge__title {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: var(--badge-title-color, #b8873b);
    white-space: nowrap;
  }

  .slide-badge__main {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.02;
    color: var(--badge-main-color, #12281c);
    white-space: nowrap;
  }

  /* Design 2: the pill is outlined and the icon sits on a disc. */
  .slide-badge--outline {
    border: 1.5px solid var(--badge-line, #c9a227);
    padding-inline-start: 10px;
  }

  .slide-badge--outline .slide-badge__icon {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background-color: var(--badge-disc, #f6f1e7);
    -webkit-mask-image: none;
    mask-image: none;
    position: relative;
  }

  /* The icon itself rides on top of the disc, still tinted. */
  .slide-badge--outline .slide-badge__icon::after {
    content: '';
    position: absolute;
    inset: 9px;
    background-color: var(--badge-icon-color, #c9a227);
    -webkit-mask-image: var(--badge-icon-url);
    mask-image: var(--badge-icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Design 3: the corner flag from the product cards, same geometry. */
  .slide-badge--flag {
    inset-block-start: 0;
    inset-inline-start: 0;
    display: block;
    inline-size: 132px;
    block-size: 132px;
    max-inline-size: none;
    padding: 38px 0 0 14px;
    border: 0;
    border-radius: 0;
    background: var(--badge-bg, #12281c);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .slide-badge--flag .slide-badge__icon,
  .slide-badge--flag .slide-badge__rule {
    display: none;
  }

  .slide-badge--flag .slide-badge__copy {
    inline-size: 76px;
  }

  .slide-badge--flag .slide-badge__title,
  .slide-badge--flag .slide-badge__main {
    white-space: normal;
  }

  .slide-badge--flag .slide-badge__main {
    font-size: 0.95rem;
  }

  @media screen and (max-width: 749px) {
    /* Below 750px the copy stops using its scaled padding and takes a flat
       inset instead (see .slide__content.spacing-style further down). Declared
       once on the shared parent so the badge and the copy read the same
       number -- two literals would drift apart the first time one is edited. */
    slideshow-slide {
      --slide-mobile-inset: 20px;
    }

    .slide-badge {
      inset-inline-start: var(--slide-mobile-inset);
      gap: 9px;
      padding: 8px 14px 8px 10px;
    }

    .slide-badge__title {
      font-size: 0.58rem;
      letter-spacing: 0.14em;
    }

    .slide-badge__main {
      font-size: 1.1rem;
    }

    .slide-badge__icon {
      inline-size: 24px;
      block-size: 24px;
    }

    .slide-badge--outline .slide-badge__icon {
      inline-size: 34px;
      block-size: 34px;
    }

    .slide-badge--outline .slide-badge__icon::after {
      inset: 7px;
    }

    .slide-badge--flag {
      inline-size: 104px;
      block-size: 104px;
      padding: 30px 0 0 11px;
    }
  }

  .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;
  }

  /* Mobile: pull the copy to the edge and cap how wide it may run.
     ------------------------------------------------------------------
     The slide's own padding is chosen for a 1440-wide desktop banner and
     reaches mobile scaled by --spacing-scale-md (0.7) and nothing else, so a
     70px indent still lands as 49px on a 391px screen -- an eighth of the
     width, before any words. Overridden here rather than at the source
     because the setting has no mobile variant.

     Targeted at the consumer, not the variable: spacing-style publishes
     --padding-inline-start as an inline custom property, which a stylesheet
     cannot outrank, but the declaration that reads it lives in base.css and
     can be. Two classes deep so it wins that on specificity rather than on
     whichever file the browser happens to load second.

     The width cap is the other half of the same request: narrower copy wraps
     sooner, so the block grows downward instead of running across the whole
     frame and colliding with whatever the photograph has in the middle of
     it. margin-inline: 0 auto keeps it left-aligned -- the rule above gives
     every child auto margins, which would otherwise centre it once it stops
     filling the row. */
  @media screen and (max-width: 749px) {
    .slide__content.spacing-style {
      padding-inline: var(--slide-mobile-inset);
      padding-block: 32px;
    }

    .slide__content > .group-block-content {
      /* Sized by the copy, not by a number. min-content is the narrowest a box
         can be without breaking a word in half, so the block measures itself
         against its own longest word -- "Craftsmanship." -- and every shorter
         line then wraps at the first space it can. "Where Art Meets" no longer
         fits on one line beside it, so it breaks to "Where Art / Meets".

         The point of doing it this way rather than with a percentage: each
         slide sets its own width from its own words. Nothing to retune when
         the copy changes, and no per-slide overrides.

         The floor is for the opposite case -- a slide whose words are all
         short ("Handpicked. Handcrafted. Heartfelt." measures about 140px)
         would otherwise draw itself into a thin column. It cannot be folded
         into the line above: min-content is a keyword, not a length, so CSS
         math functions will not take it. */
      inline-size: min-content;
      /* The floor, raised from 45%. Note what it is a percentage OF: the
         slide's content box, which is the screen less its 20px of padding
         either side -- so 55% here reads as about 50% of the phone, not 55%.
         min-content still wins whenever the longest word is wider than this,
         which is what keeps a long heading from overflowing. */
      min-inline-size: 55%;
      margin-inline: 0 auto;
    }

    /* Let the headings wrap here, and only here.
       ----------------------------------------------------------------
       The text block's Wrap setting is one value for both breakpoints, and
       these headings are on None -- correct on desktop, where each line is
       meant to hold. On a phone it is the thing that stops everything above
       working: text that cannot break has a min-content width equal to its
       full line, so sizing the parent to min-content hands it the whole
       sentence and a max-width is overflowed rather than wrapped.

       balance rather than pretty: it evens the line lengths, which is what a
       two- or three-line headline wants. Desktop is untouched -- balance only
       redistributes text that actually wraps.

       Aimed at the consumer, not the variable: --text-wrap is published inline
       on the block, which a stylesheet cannot outrank; text-wrap itself is
       declared in a stylesheet and can be.

       Scoped to .slide__content on purpose. The marquee's items are also set
       to None and must stay that way -- a scrolling ticker that wraps is a
       broken ticker. */
    .slide__content .text-block > * {
      text-wrap: balance;
    }

    /* The supporting line is dropped on a phone. With the copy column now
       around a third of the width it wraps to two or three lines, and the
       heading already carries the slide -- what it costs in height is worth
       more to the button below it than the sentence is.

       Matched on the block's own key rather than an id: every slide names
       this block 'subtext', so one rule covers all four and any slide added
       later. It stays in the markup and is hidden, so desktop is unaffected
       -- and display:none takes it out of the accessibility tree too, so it
       is not read out to a screen reader that cannot see it either. */
    .slide__content [class*='__subtext'] {
      display: none;
    }

    /* The subtext was carrying the space between the rule and the button.
       With it gone the two collide, since the slide's own gap is 2px -- set
       that tight so the heading lines sit together, and it applies between
       every pair. Given back on the button alone rather than by opening the
       gap, which would also push the heading lines apart. */
    .slide__content [class*='__button'] {
      /* Closer to the rule above it. 18px was set when the subtext still sat
         between the two; with that gone the button only needs to clear the
         line, not a paragraph. */
      margin-block-start: 10px;

      /* 18px / 34px is the button block's own padding, and it arrives as a
         real inline style rather than a custom property -- so nothing in a
         stylesheet can outrank it without !important. That is what this is
         for; it is not standing in for a specificity problem.
         34px each side put 68px of nothing around a label that is barely
         wider than that. Desktop keeps the generous version. */
      padding-block: 12px !important;
      padding-inline: 20px !important;
    }

    /* A call to action reads as one thing; broken over two lines it reads as
       a sentence. The copy column is min-content wide, so the label wraps
       inside it unless told not to.

       Note what this does to the column: an element that cannot wrap has a
       min-content width equal to its full width, so the button now takes part
       in setting the column's floor -- the same mechanism that was breaking
       the headings, used deliberately here. If the label is ever longer than
       the longest word in the heading, it will be what decides how wide the
       copy sits. Worth remembering before typing a longer one. */
    .slide__content [class*='__button'],
    .slide__content [class*='__button'] .button {
      white-space: nowrap;
    }

    /* A wider, softer gradient behind the copy.
       ----------------------------------------------------------------
       Desktop holds the overlay colour to 10% and has faded out by 40%.
       That was sized for copy occupying a fifth of a 1440px frame; the same
       proportions on a 412px phone leave the text sitting on bare photograph
       well before the fade finishes.

       Now held to 20% and faded out by 50% to show more of the photo (was
       35/80). The notes below describe the earlier, wider version.

       Held to 35% so the whole copy column is on solid ground, then given to
       80% to fade out -- the extra distance matters as much as the hold. Hold
       35 against the original fade of 40 would put the entire transition into
       5% of the width and read as a hard edge down the middle of the picture.

       Written as a whole background rather than by changing the two extents:
       they are published inline on the element, where a stylesheet cannot
       reach them. The declaration that consumes them can be replaced. */
    .slide__image-container > .overlay--gradient {
      background: linear-gradient(
        var(--overlay-direction),
        var(--overlay-color) 0%,
        var(--overlay-color) 20%,
        var(--overlay-color--end) 50%
      );
    }
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  /* picture is only present when a mobile image is set, and it puts a node
     between the container and the image -- which the direct-child selectors
     below would then miss, dropping object-fit and leaving the photo at its
     intrinsic size. display: contents takes the wrapper out of the box tree,
     and the descendant selector covers both shapes. */
  .slide__image-container > picture {
    display: contents;
  }

  .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:99) */
.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:collection-description (INDEX:107) */
.collection-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    inline-size: 100%;
    max-inline-size: var(--max-width--body-normal);
  }

  .collection-desc__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-inline-size: 0;
  }

  /* Only when there is a picture to sit beside. The measure widens to the
     full page here rather than staying at the body width -- reading width is
     a constraint on a paragraph that runs the page, not on one that already
     has a column of its own. */
  .collection-desc--with-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    max-inline-size: none;
  }

  .collection-desc__media {
    min-inline-size: 0;
  }

  /* Height is the fixed dimension and the width follows from it, rather than
     the box being given a shape and the picture cropped to fit. These images
     were not composed for a 4:3 crop -- letting each keep its own proportions
     is what stops them looking cut down to size. */
  .collection-desc__image {
    display: block;
    block-size: var(--collection-image-height, 300px);
    inline-size: auto;
    max-inline-size: 100%;

    /* Masked, not overlaid. An overlaid gradient has to be painted the same
       colour as whatever is behind it, so it breaks the moment a section
       background changes. A mask makes the pixels themselves transparent, so
       the picture dissolves into the page whatever the page happens to be --
       and the left edge stops being an edge at all, which is what makes it
       read as part of the text rather than as a picture placed next to it. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  }

  /* Stacked on a phone, text first. The name and the copy are what the page
     is about; an image pushed above them would put the answer below the
     decoration. */
  @media screen and (max-width: 749px) {
    .collection-desc--with-image {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }
  }

  /* The rule under the title. Drawn at the top of this block rather than
     under the heading block above it, so the two blocks stay independent --
     a heading that gets moved or removed in the editor should not leave a
     stray gold line behind, and nothing here reaches across to style it. */
  .collection-desc__rule {
    display: block;
    inline-size: 64px;
    block-size: 2px;
    background-color: #b48622;
  }

  /* Fewer lines on a wide screen, more on a narrow one. A line on a phone
     holds perhaps a third of the words a line at full width does, so holding
     the count at three would cut a paragraph to a fragment exactly where
     there is least room to spare. The count goes up as the measure narrows,
     which keeps roughly the same amount of text visible either way. */
  .collection-desc__body {
    --collection-desc-lines: 3;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--collection-desc-lines);
    line-clamp: var(--collection-desc-lines);
    overflow: hidden;
  }

  @media screen and (max-width: 989px) {
    .collection-desc__body {
      --collection-desc-lines: 4;
    }
  }

  @media screen and (max-width: 749px) {
    .collection-desc__body {
      --collection-desc-lines: 5;
    }
  }

  .collection-desc__body > :first-child {
    margin-block-start: 0;
  }

  .collection-desc__body > :last-child {
    margin-block-end: 0;
  }

  .collection-desc__more {
    padding: 0;
    border: 0;
    border-block-end: 1px solid currentcolor;
    background: none;
    color: #b48622;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
  }

  /* --- The panel -------------------------------------------------------- */
  /* A dialog rather than a div: the focus trap, the Escape key, inert
     backgrounding and the top layer all come with it, and each is a thing
     that gets written by hand and subtly wrong otherwise. */
  .collection-desc__panel {
    inline-size: min(680px, 92vw);
    max-block-size: min(640px, 82vh);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    overflow: visible;
  }

  .collection-desc__panel::backdrop {
    background: rgb(8 16 12 / 0.72);
  }

  .collection-desc__panel-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-block-size: min(640px, 82vh);
    padding: 34px 34px 38px;
    border-radius: 14px;
    background: #f7f4ea;
    overflow-y: auto;
  }

  .collection-desc__panel-title {
    margin: 0;
    padding-inline-end: 40px;
    color: #12281c;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.15;
  }

  /* The copy is written in the admin editor with headings at whatever level
     came to hand, so sizes here are set for the panel rather than inherited
     from the page's h2/h3 scale -- which is sized for page titles and turns
     a panel on a phone into a few words per line. */
  .collection-desc__panel-body {
    color: #4a4a44;
    font-size: 15px;
    line-height: 1.65;
  }

  .collection-desc__panel-body > :first-child {
    margin-block-start: 0;
  }

  .collection-desc__panel-body p {
    margin-block: 0 0.85em;
  }

  .collection-desc__panel-body :is(h2, h3, h4) {
    margin-block: 1.1em 0.5em;
    color: #12281c;
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .collection-desc__panel-body :is(ul, ol) {
    margin-block: 0 0.85em;
    padding-inline-start: 1.25em;
  }

  .collection-desc__panel-body li {
    margin-block-end: 0.25em;
  }

  .collection-desc__panel-body a {
    color: #b48622;
    text-underline-offset: 2px;
  }

  /* Sections (built by collection-description.js) */
  .collection-desc__section {
    border-block-end: 1px solid rgb(18 40 28 / 0.12);
  }

  .collection-desc__section:first-of-type {
    margin-block-start: 0.75em;
    border-block-start: 1px solid rgb(18 40 28 / 0.12);
  }

  .collection-desc__section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 14px;
    color: #12281c;
    font-family: var(--font-heading--family);
    font-size: 1rem;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .collection-desc__section-summary::-webkit-details-marker {
    display: none;
  }

  .collection-desc__section-summary strong {
    font-weight: inherit;
  }

  .collection-desc__section-icon {
    flex-shrink: 0;
  }

  .collection-desc__section[open] > .collection-desc__section-summary .icon-caret svg {
    transform: rotate(180deg);
  }

  .collection-desc__section-content {
    padding-block-end: 14px;
  }

  .collection-desc__section-content > :first-child {
    margin-block-start: 0;
  }

  .collection-desc__section-content > :last-child {
    margin-block-end: 0;
  }

  .collection-desc__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.08);
    color: #12281c;
    cursor: pointer;
  }

  .collection-desc__close svg {
    inline-size: 16px;
  }

  @media screen and (max-width: 749px) {
    .collection-desc__panel-inner {
      padding: 26px 20px 30px;
    }
  }
/* END_BLOCK:collection-description */

/* START_BLOCK:collection-faq (INDEX:108) */
/* pdp-faq's row rules, repeated with the same values. They live in that
     block's own stylesheet, which a page without a product FAQ is not
     guaranteed to load. The palette is repeated here too, with the same values
     as 'pdp-styles'. That file is no longer rendered by this block: it is about
     47 KB of product-page rules, and this page used one small rule of it, yet it
     was added to the stylesheet that blocks the first paint on every collection
     page. Keep the palette and the rows in step with pdp-styles and pdp-faq. */
  .collection-faq {
    inline-size: 100%;
    align-self: stretch;

    --pdp-ink: #12281c;
    --pdp-gold: #e0b74e;
    --pdp-gold-deep: #8a6712;
    --pdp-gold-hairline: rgb(224 183 78 / 0.38);
    --pdp-surface: #ffffff;
    --pdp-line: #e3ded1;
    --pdp-muted: #6a7069;
    --pdp-positive: #2f5a34;
    --pdp-positive-soft: #eef2ea;

    color: var(--pdp-ink);
  }

  .collection-faq .pdp-faq__heading {
    margin: 0 0 var(--gap-xs, 10px);
  }

  .collection-faq .pdp-faq__row {
    border-block-end: 1px solid var(--pdp-line, #e3ded1);
  }

  .collection-faq .pdp-faq__question {
    padding-block: 12px;
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .collection-faq .pdp-faq__answer {
    padding-block-end: 12px;
    color: var(--pdp-muted, #6a7069);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .collection-faq .pdp-faq__answer p {
    margin: 0;
  }
/* END_BLOCK:collection-faq */

/* START_BLOCK:collection-heading (INDEX:109) */
.collection-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    inline-size: 100%;
  }

  .collection-heading__eyebrow {
    margin: 0;
    color: #8a8f80;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* Set at the weight the theme actually loads. Shopify serves only the
     picked variant per role -- jost_n4 here -- so asking for 300 would not
     produce a lighter face, it would silently resolve to this one anyway.
     The restraint comes from size and letter-spacing instead, which cost
     nothing to load. */
  .collection-heading__title {
    margin: 0;
    color: #12281c;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  @media screen and (max-width: 749px) {
    .collection-heading {
      gap: 9px;
    }

    .collection-heading__eyebrow {
      font-size: 0.68rem;
      letter-spacing: 0.18em;
    }
  }
/* END_BLOCK:collection-heading */

/* START_BLOCK:collection-seo (INDEX:110) */
/* Same column as 'pdp-seo': 1100px, centred, no vertical margin -- the
     section's padding sets the gaps. */
  .collection-seo {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1100px;
    margin-inline: auto;
    /* Inline only, so the block's own top/bottom padding settings still apply. */
    padding-inline: 20px;
    color: #444;
  }

  /* Phones: no inner side padding, and full width -- the section is a column
     flex with align-items: flex-start, which would otherwise size the block
     to its content. Same as .gharart-seo. */
  @media screen and (max-width: 749px) {
    .collection-seo {
      gap: 28px;
      padding-inline: 0;
      inline-size: 100%;
      align-self: stretch;
    }
  }

  /* --- Copy ------------------------------------------------------------ */
  .collection-seo__body {
    font-size: 16px;
    line-height: 1.8;
  }

  .collection-seo__body > :first-child,
  .collection-seo__body .metafield-rich_text_field > :first-child {
    margin-block-start: 0;
  }

  .collection-seo__body p {
    margin-block: 0 14px;
  }

  /* The admin copy mixes heading levels freely; sizes are set here rather
     than inherited from the page's h2/h3 scale, which is sized for titles. */
  .collection-seo__body :is(h2, h3, h4, h5, h6) {
    margin-block: 24px 8px;
    color: #12281c;
    font-size: 20px;
    line-height: 1.3;
  }

  .collection-seo__body :is(h3, h4, h5, h6) {
    font-size: 17px;
  }

  .collection-seo__body :is(ul, ol) {
    margin-block: 0 14px;
    padding-inline-start: 18px;
  }

  .collection-seo__body li {
    margin-block-end: 6px;
  }

  .collection-seo__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Clamped only once the script has run (it sets data-clamped), so without
     JavaScript the whole text simply shows. The fade is drawn only when
     something is actually cut off. */
  .collection-seo__text[data-clamped]:not([data-expanded]) > .collection-seo__body {
    max-block-size: calc(var(--collection-seo-lines, 10) * 1.8em);
    overflow: hidden;
  }

  .collection-seo__text[data-overflowing]:not([data-expanded]) > .collection-seo__body {
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
  }

  .collection-seo__more {
    margin-block-start: 10px;
    padding: 0;
    border: 0;
    border-block-end: 1px solid currentcolor;
    background: none;
    color: #b48622;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .collection-seo__more[hidden] {
    display: none;
  }

  /* --- Read-more popup ----------------------------------------------------
     A centred card, not a full-screen sheet: the page stays visible (dimmed)
     around it. Only the text scrolls; the title row and ✕ stay put. */
  .collection-seo__dialog {
    inline-size: min(90vw, 560px);
    max-inline-size: none;
    max-block-size: 70dvh;
    margin: auto;
    padding: 0;
    border: 1px solid #e3d3a8;
    border-radius: 16px;
    background: #fbf7ec;
    color: #444;
    box-shadow: 0 18px 50px rgb(18 40 28 / 0.28);
    overflow: hidden;
  }

  .collection-seo__dialog[open] {
    display: flex;
    flex-direction: column;
    animation: collection-seo-pop 0.22s ease-out;
  }

  .collection-seo__dialog::backdrop {
    background: rgb(18 40 28 / 0.45);
    animation: collection-seo-fade 0.22s ease-out;
  }

  /* The page behind doesn't scroll while the popup is open. */
  html:has(.collection-seo__dialog[open]) {
    overflow: hidden;
  }

  .collection-seo__dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px 20px;
    border-block-end: 1px solid #ece2c8;
    flex-shrink: 0;
  }

  .collection-seo__dialog-title {
    flex: 1;
    margin: 0;
    color: #12281c;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
  }

  .collection-seo__dialog-close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #12281c;
    color: #e0b74e;
    cursor: pointer;
  }

  .collection-seo__dialog-body {
    flex: 1;
    min-block-size: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @keyframes collection-seo-pop {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
  }

  @keyframes collection-seo-fade {
    from { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-seo__dialog[open],
    .collection-seo__dialog::backdrop {
      animation: none;
    }
  }

  /* --- Products table ---------------------------------------------------- */
  .collection-seo__table-heading {
    margin: 0 0 15px;
    color: #12281c;
    font-size: 20px;
    line-height: 1.3;
  }

  .collection-seo__table-wrap {
    overflow-x: auto;
  }

  /* Price-list table: green header bar with gold text, cream zebra rows,
     whole row clickable, sale price over the struck-through one. */
  .collection-seo__table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e3ded1;
    border-radius: 10px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.45;
    text-align: start;
  }

  .collection-seo__table th {
    padding: 12px 14px;
    background: #12281c;
    color: #e0b74e;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: start;
    text-transform: uppercase;
  }

  /* The padding lives on the links inside, so the whole cell is the tap
     area. The 1px height lets those links fill the row (height: 100%); a
     table cell grows to fit its content anyway. */
  .collection-seo__table td {
    block-size: 1px;
    padding: 0;
    border-block-start: 1px solid #ece6d8;
    vertical-align: middle;
  }

  .collection-seo__table tbody tr {
    background: #fff;
    transition: background-color 0.15s ease;
  }

  .collection-seo__table tbody tr:nth-child(even) {
    background: #faf6ee;
  }

  .collection-seo__table tbody tr:hover {
    background: #f3ead6;
  }

  .collection-seo__table :is(th, td):last-child {
    text-align: end;
    white-space: nowrap;
  }

  /* Each cell holds a link to the product, so the whole row is tappable.
     Not a stretched ::after over the <tr>: older Safari ignores
     position: relative on table rows, and the overlay then covered the copy
     and Read more above, sending taps to the last product. */
  .collection-seo__table-link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    block-size: 100%;
    padding: 12px 14px;
    color: #222;
    text-decoration: none;
  }

  .collection-seo__table-price .collection-seo__table-link {
    justify-content: flex-end;
  }

  /* Titles stop at two lines, so one long name can't make a tall row. */
  .collection-seo__table-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-inline-size: 0;
  }

  .collection-seo__table-price {
    inline-size: 1%;
  }

  .collection-seo__prices {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    vertical-align: middle;
  }

  .collection-seo__now {
    color: #12281c;
    font-weight: 700;
  }

  .collection-seo__was {
    color: #999;
    font-size: 12px;
  }

  .collection-seo__chevron {
    margin-inline-start: 10px;
    color: #b48622;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
  }

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

    .collection-seo__table th,
    .collection-seo__table-link {
      padding: 11px 12px;
    }

    .collection-seo__chevron {
      margin-inline-start: 6px;
    }
  }
/* END_BLOCK:collection-seo */

/* START_BLOCK:collection-subcollections (INDEX:111) */
.subcollections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    inline-size: 100%;
    min-inline-size: 0;
  }

  /* Give the column the width the theme meant it to have.

     Horizon wraps a theme block in <div class="shopify-block">, so a group
     block placed in a section is a *grandchild* of the flex row, not a child.
     'layout-panel-flex--row > .group-block--width-fill { flex: 1 }' therefore
     never matches it: the wrapper becomes the flex item, at the default
     flex: 0 1 auto, and sizes itself from its contents -- while the group
     inside carries width: 100% of whatever that came to. The first group in
     the row is written directly into the section and is a real child, which
     is why only the second column is wrong, and why a row of four tiles
     looked fine where a row of three did not: fewer tracks in a
     content-sized container means each one grows.

     Scoped by :has() to rows that actually contain this block, so no other
     section's layout changes. min-inline-size: 0 because a flex item's
     automatic minimum is its content, which would stop the column ever
     shrinking below the full width of the row. */
  .layout-panel-flex--row > .shopify-block:has(.subcollections) {
    flex: 1;
    min-inline-size: 0;
  }

  .subcollections__label {
    margin: 0;
    color: #8a8f80;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* The row shares the home page's proportions -- a 6px inset and a picture
     taking 70% of the card -- so a tile here and a tile in the Category row
     are the same object at different sizes, not two cards that resemble each
     other. Only the gap is tighter, because this row sits beside the title
     rather than across the page.

     Two classes, not one. These set the same custom properties
     'layout-styles.liquid' sets on .layout--grid, and a single class would
     tie on specificity and be settled by whichever stylesheet the theme
     happened to compile last. */
  .subcollections .subcollections__row {
    --item-inset: 6px;
    --item-image-share: 70%;
    --layout-gap: 14px;

    /* The floor .layout--grid computes --layout-item-width against. Cards
       never go under it; the row scrolls instead. */
    --layout-min-item: var(--subcollection-min, 150px);

    /* A ceiling as well as a floor.

       'layout-styles' sizes a scrolling row as max(floor, container / count),
       which has no upper bound: the fewer children a collection has, the wider
       each one grows, and a collection with two or three of them hands each a
       third of the column. These are navigation chips beside a title, not
       feature panels -- past a couple of hundred pixels they stop reading as a
       row and start competing with the products below.

       Stated as a clamp so the middle term still does the ordinary work and
       only the extremes are pinned. */
    --layout-item-width: clamp(
      var(--subcollection-min, 150px),
      calc(
        (100% - (var(--layout-columns, 3) - 1) * var(--layout-gap, 14px)) / var(--layout-columns, 3)
      ),
      var(--subcollection-max, 240px)
    );

    gap: 14px;
  }

  /* Full names, not "Floor Lamp…".

     'item-styles' holds every card title to one line so prices line up in
     product rows. These cards carry a name and nothing else, so there is
     nothing below it to misalign -- the title wraps instead, and the card
     grows to fit it rather than keeping a fixed shape that clips the text.
     The row is a single grid row, so every card stretches to the tallest
     one and the pictures still line up. The picture keeps its square. */
  .subcollections .subcollections__row .item--image-heavy {
    aspect-ratio: auto;
    grid-template-rows: auto 1fr;
  }

  .subcollections .subcollections__row .item--image-heavy .item__media {
    aspect-ratio: 1 / 1;
    block-size: auto;
  }

  .subcollections .subcollections__row .item--image-heavy .item__body {
    overflow: visible;
    justify-content: flex-start;
  }

  /* Three lines is a safety net for an unusually long name, not the norm. */
  .subcollections .subcollections__row .item__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: anywhere;
    text-wrap: balance;
    line-height: 1.2;
  }

  .subcollections__scroller {
    position: relative;
    display: block;
    min-inline-size: 0;
  }

  /* Small enough to tap without crowding anything. Sits just above the row's
     right end, in the empty space beside "Read more", rather than over the
     last card -- so no card is covered. */
  .subcollections__arrow {
    position: absolute;
    inset-block-end: calc(100% + 6px);
    inset-inline-end: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    padding: 0;
    border: 0;
    background: none;
    /* The same gold as the description's "Read more" beside it. */
    color: #b48622;
    cursor: pointer;
    animation: subcollections-nudge 1.4s ease-in-out 0.6s 3;
  }

  /* [hidden] is display: none from the browser's own sheet, which the
     display: grid above outranks -- restated so hiding actually hides. */
  .subcollections__arrow[hidden] {
    display: none;
  }

  /* Three soft pulses and then still, so it hints without nagging. Stopped
     early once the visitor has scrolled -- by then they know. */
  .subcollections__scroller[data-scrolled] .subcollections__arrow {
    animation: none;
  }

  .subcollections__arrow:focus-visible {
    outline: 2px solid #b48622;
    outline-offset: 2px;
  }

  @keyframes subcollections-nudge {
    0%,
    100% {
      opacity: 1;
      transform: translateX(0);
    }
    50% {
      opacity: 0.6;
      transform: translateX(4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .subcollections__arrow {
      animation: none;
    }
  }

  /* On a phone the floor is a share of the screen rather than a measurement,
     which is what stops a card ever filling the width. At 42vw a little over
     two cards are in view, so the row visibly continues past the edge and
     reads as scrollable without a control saying so. */
  @media screen and (max-width: 749px) {
    .subcollections .subcollections__row {
      /* Both, because a scrolling row is sized by a different property on a
         phone: 'layout-styles' swaps grid-auto-columns over to
         --layout-snap-width here and never reads --layout-item-width, so a
         floor alone leaves the cards at the 78% default. --layout-min-item
         still has to match it -- it is what the cell's own min-inline-size
         is drawn from, and a floor wider than the track overflows the cell. */
      --layout-snap-width: 28vw;
      --layout-min-item: 28vw;
      --layout-gap: 10px;

      gap: 10px;
    }

    /* Small on a phone with the name still whole. The card is auto-height
       above, so a smaller title is what keeps the row short: two lines of
       this fit under the picture without pushing the products down. */
    .subcollections .subcollections__row .item {
      --item-title-size: clamp(0.72rem, 3.2vw, 0.85rem);
    }

    .subcollections .subcollections__row .item--image-heavy .item__body {
      padding: 0.4rem 0.15rem 1.2rem;
    }

    /* The stack above the products, tightened for a phone.

       Measured on a 390x680 screen: the column that holds the heading, the
       description and this row carried 33.6px of padding above it, a 28px
       gap between the two groups and 16px below -- 78px of air before a
       single product is in view, on the screen with the least of it to give.

       Scoped by :has() to the section this block is in, so no other
       layout-panel-flex in the theme is touched, and to phones only. */
    .shopify-section:has(.subcollections) .layout-panel-flex:not(.group-block-content) {
      padding-block-start: 16px;
      padding-block-end: 8px;
      row-gap: 14px;
    }

    /* :not(.group-block-content) above is load-bearing. The class is on the
       section's own column AND on the wrapper inside every block in it, so a
       bare selector pads each block as well -- which made the space between
       the description and this row bigger, not smaller. These wrappers carry
       no padding of their own here. */
    .shopify-section:has(.subcollections) .group-block-content.layout-panel-flex {
      padding-block: 0;
    }
  }
/* END_BLOCK:collection-subcollections */

/* START_BLOCK:comparison-slider (INDEX:113) */
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);
    color: var(--handle-color, var(--color-foreground));
    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:114) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:115) */
.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:disclosures (INDEX:117) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

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

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:118) */
.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 {
    color: var(--color, inherit);
    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);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .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__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .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 {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-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:119) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 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;
  }

  /* Nothing left inside once the mobile grid toggle is gone (filtering on): drop it so it adds no gap */
  .facets-mobile-wrapper:not(:has(*)) {
    display: none;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  /* Applied filters bar (mobile only): one sideways-scrolling row of removable pills under the filter toggle */
  .facets-active-bar {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .facets-active-bar:has(facet-remove-component) {
      display: block;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      padding-inline: var(--padding-lg);
    }

    .facets-active-bar .facets-remove--active-bar {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--gap-xs);
      min-width: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: var(--padding-2xs) 0;
      margin-block: 0 var(--margin-sm);
    }

    .facets-active-bar .facets-remove--active-bar::-webkit-scrollbar {
      display: none;
    }

    .facets-active-bar .facets-remove__pill,
    .facets-active-bar .facets__clear-all-link {
      flex-shrink: 0;
      white-space: nowrap;
      font-size: var(--font-size--xs);
    }

    .facets-active-bar .facets__clear-all-link {
      display: block;
      text-decoration: underline;
    }
  }

  .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%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .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__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-subdued);
    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 - 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(--theme-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(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    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(--theme-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 .theme-drawer__title {
    --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;
    }
  }

  /* 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);

    @media screen and (min-width: 990px) {
      display: none;
    }
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-contact (INDEX:121) */
.footer-contact {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 380px;
    padding: 22px;
    border: 1px solid var(--fc-border);
    border-radius: 16px;
    background: var(--fc-bg);
    color: var(--fc-text);
  }

  /* Small, tracked, gold: a label for the card rather than a headline
     competing with the contact details it introduces. */
  .footer-contact__heading {
    margin: 0 0 14px;
    color: var(--fc-accent);
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .footer-contact__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The whole row is the link, 44px tall, so the tap target is the row and
     not just the width of the characters. */
  .footer-contact__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 44px;
    color: var(--fc-text);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
  }

  .footer-contact__value {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--fc-accent) 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
    overflow-wrap: anywhere;
  }

  .footer-contact__row:hover .footer-contact__value,
  .footer-contact__row:focus-visible .footer-contact__value {
    text-decoration-color: var(--fc-accent);
  }

  .footer-contact__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid color-mix(in srgb, var(--fc-accent) 40%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--fc-accent) 8%, transparent);
    color: var(--fc-accent);
  }

  /* Company line last, smaller and quieter, set off by a hairline so it
     reads as the card's footnote rather than a fourth contact. */
  .footer-contact__legal {
    margin-block-start: 16px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--fc-border);
    color: color-mix(in srgb, var(--fc-text) 60%, transparent);
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .footer-contact__legal p {
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .footer-contact {
      max-inline-size: none;
      padding: 20px;
    }
  }
/* END_BLOCK:footer-contact */

/* START_BLOCK:footer-copyright (INDEX:122) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:123) */
.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:125) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:126) */
.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);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:128) */
.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:menu (INDEX:129) */
.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);
    }
  }

  /* Neat footer accordions (phones): divider rows, cream panel, 2-col grid or chips */
  .menu__group-label {
    display: none;
  }

  @media screen and (max-width: 749px) {
    accordion-custom.menu--neat + accordion-custom.menu--neat {
      margin-block-start: calc(var(--gap, 24px) * -1);
    }

    .menu--neat .menu__details {
      border-block: 1px solid #e3ded1;
    }

    accordion-custom.menu--neat + accordion-custom.menu--neat .menu__details {
      border-block-start: 0;
    }

    .menu--neat .menu__heading {
      padding-block: 16px;
      cursor: pointer;
    }

    .menu--neat details[open] .menu__heading {
      font-weight: 500;
    }

    .menu--neat details[open] .menu__heading__toggle {
      color: #9a7a2e;
    }

    .menu--neat .details-content {
      margin-block-start: 0;
    }

    .menu--neat .details-content > ul {
      background: #f7f4ea;
      border: 1px solid #e3ded1;
      border-radius: 12px;
      padding: 10px 12px 12px;
      margin-block-end: 16px;
    }

    .menu--neat .menu__item + .menu__item {
      margin-block-start: 0;
    }

    /* Two-column links with a gold arrow */
    .menu--neat-grid .details-content > ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 10px;
    }

    .menu--neat-grid .menu__item a {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 40px;
      font-size: 13px;
      line-height: 1.25;
    }

    .menu--neat-grid .menu__item a::before {
      content: '›';
      color: #9a7a2e;
      font-size: 15px;
      font-weight: 600;
    }

    /* Chips in two groups: Trending, then Gifts by budget */
    .menu--neat-chips .details-content > ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .menu--neat-chips .menu__item {
      order: 1;
    }

    .menu--neat-chips .menu__group-label {
      display: block;
      flex-basis: 100%;
      margin-block: 4px 0;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #6b6b6b;
    }

    .menu--neat-chips .menu__group-label--trending {
      order: 0;
    }

    .menu--neat-chips .menu__group-label--budget {
      order: 2;
      margin-block-start: 8px;
    }

    .menu--neat-chips .menu__item--budget {
      order: 3;
    }

    .menu--neat-chips .menu__item a {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding-inline: 13px;
      border: 1px solid #e3ded1;
      border-radius: 999px;
      background: #ffffff;
      font-size: 12.5px;
      line-height: 1.2;
      text-decoration: none;
    }

    .menu--neat-chips .menu__item--budget a {
      font-weight: 500;
    }

    .menu--neat-chips .menu__item-prefix {
      display: none;
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:130) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:131) */
.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:132) */
.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:pdp-faq (INDEX:137) */
/* Its own section now, and that section's panel is a column flex with
     align-items: flex-start, which shrinks a block child to its content width.
     Inside the product column this was never needed. */
  .pdp-faq {
    inline-size: 100%;
    align-self: stretch;
  }

  .pdp-faq__heading {
    margin: 0 0 var(--gap-xs, 10px);
  }

  /* The rows carry the hairline, not the container: a bordered box around an
     accordion reads as a card, and this sits inside one already. */
  .pdp-faq__row {
    border-block-end: 1px solid var(--pdp-line, #e3ded1);
  }

  .pdp-faq__question {
    padding-block: 12px;
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .pdp-faq__answer {
    padding-block-end: 12px;
    color: var(--pdp-muted, #6a7069);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .pdp-faq__answer p {
    margin: 0;
  }
/* END_BLOCK:pdp-faq */

/* START_BLOCK:pdp-seo (INDEX:142) */
/* No vertical margin: the section's own padding sets the gap above and
       below, as it does for the FAQ section beneath. Dawn's 60px margins
       stacked on top of it and left ~130px above this block and ~170px
       under it. margin-inline only, so the 1100px column stays centred. */
    .gharart-seo {
      max-width: 1100px;
      margin-inline: auto;
      padding: 0 20px;
    }

    /* Phones: no inner side padding, so the text lines up with the
       "Recently viewed" heading and the FAQ instead of sitting 20px further
       in. Full width for the same reason as .pdp-faq -- the section is a
       column flex with align-items: flex-start, which would otherwise size
       the block to its content. */
    @media screen and (max-width: 749px) {
      .gharart-seo {
        padding-inline: 0;
        inline-size: 100%;
        align-self: stretch;
      }
    }

    /* blocks */
    .seo-block {
      margin-bottom: 50px;
    }

    .seo-block:last-child {
      margin-bottom: 0;
    }

    @media screen and (max-width: 749px) {
      .seo-block {
        margin-bottom: 28px;
      }

      .seo-block:last-child {
        margin-bottom: 0;
      }
    }

    /* description */
    .seo-description p {
      font-size: 16px;
      line-height: 1.8;
      color: #444;
    }

    /* headings */
    .seo-subheading {
      font-size: 20px;
      margin-bottom: 15px;
    }

    /* links */
    .seo-links {
      padding-left: 18px;
    }

    .seo-links li {
      margin-bottom: 8px;
    }

    .seo-links a {
      text-decoration: underline;
    }

    /* FAQ */
/* END_BLOCK:pdp-seo */

/* START_BLOCK:popup-link (INDEX:147) */
.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:150) */
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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:152) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:153) */
.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;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:156) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  /* The stars keep the block's accent, but the empty label is copy, not a
     rating -- read as text alongside the title rather than as part of the
     mark. Same specificity as the rule above and declared after it, so it
     wins without an override. */
  .rating-wrapper .rating-count--empty {
    color: var(--color-foreground);
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:158) */
.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:159) */
/* 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 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:160) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:text (INDEX:161) */
.pdp-description-collapse {
    display: block;
  }

  /* Clamped, not truncated -- the whole description stays in the document. */
  .pdp-description-collapse__content {
    --collapse-mask: linear-gradient(to bottom, black calc(100% - 1.6em), transparent 100%);
    overflow: hidden;
    max-height: calc(var(--collapsed-lines, 4) * 1.6em);
    mask-image: var(--collapse-mask);
    -webkit-mask-image: var(--collapse-mask);
  }

  .pdp-description-collapse__content hr:last-child {
    display: none;
  }

  .pdp-description-collapse__toggle {
    display: block;
    width: fit-content;
    margin-top: var(--gap-xs, 8px);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    cursor: pointer;
  }

  .pdp-description-collapse__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* A dialog rather than a div: the focus trap, the Escape key and the inert
     background all come free, and a closed dialog keeps its contents in the
     HTML. Matches the collection description panel. */
  .pdp-description-collapse__panel {
    inline-size: min(680px, 92vw);
    max-block-size: min(640px, 82vh);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    overflow: visible;
  }

  .pdp-description-collapse__panel::backdrop {
    background: rgb(8 16 12 / 0.72);
  }

  .pdp-description-collapse__panel-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-block-size: min(640px, 82vh);
    padding: 34px 34px 38px;
    border-radius: 14px;
    background: #f7f4ea;
    color: #12281c;
    overflow-y: auto;
  }

  .pdp-description-collapse__panel-title {
    margin: 0 44px 0 0;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 400;
    line-height: 1.15;
  }

  .pdp-description-collapse__panel-body > :first-child {
    margin-block-start: 0;
  }

  /* The clone carries the sidebar's reading measure with it -- 32.5em, chosen
     for a 525px column -- which left the text at 455px inside a 612px panel
     and a third of the panel empty. In here the panel's own width is the
     measure, so the cap is dropped. */
  .pdp-description-collapse__panel-body .text-block {
    --width: 100%;
    --max-width: none;
  }

  .pdp-description-collapse__panel-body .text-block > * {
    max-inline-size: none;
    width: 100%;
  }

  .pdp-description-collapse__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.08);
    color: #12281c;
    cursor: pointer;
  }

  .pdp-description-collapse__close svg {
    inline-size: 18px;
    block-size: 18px;
  }

  @media screen and (max-width: 749px) {
    .pdp-description-collapse__panel-inner {
      padding: 26px 20px 30px;
    }
  }
/* END_BLOCK:text */

/* START_BLOCK:video (INDEX:163) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:164) */
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:accordion-styles (INDEX:165) */
.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);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:166) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }

  /* Light confirmation, used by the quick-add button on cards
     (add-to-cart-button.liquid with light_confirm). The stock confirmation is
     an inline SVG of 21 elements per card (a ring, a tick and eight rays, each
     ray in its own group); on a page of 60 cards that is over 1,300 elements
     for an animation seen for a moment after a tap. This draws the same two
     marks with the icon box's two pseudo-elements, which are not DOM nodes:
     a ring and a tick, both coloured by currentColor as before. The tick is a
     mask, so it follows the button colour and stays sharp at any density.
     The rays are not drawn; the ring and tick zoom in instead, the ring fades
     and the tick settles larger, which is where the stock animation ends. */
  .add-to-cart__added-icon--light {
    position: relative;
    overflow: visible;
  }

  .add-to-cart__added-icon--light::before,
  .add-to-cart__added-icon--light::after {
    content: '';
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .add-to-cart__added-icon--light::before {
    inset: 8.3%;
    border: 1.5px solid currentColor;
    border-radius: 50%;
  }

  .add-to-cart__added-icon--light::after {
    inset: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75L11.25 15L15 9.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75L11.25 15L15 9.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .add-to-cart-button[data-added='true'] .add-to-cart__added-icon--light::before {
    animation: atc-light-ring 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  .add-to-cart-button[data-added='true'] .add-to-cart__added-icon--light::after {
    animation: atc-light-tick 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  @keyframes atc-light-ring {
    0% { opacity: 0; scale: 1.8; }
    30% { opacity: 1; scale: 1; }
    65% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1; }
  }

  @keyframes atc-light-tick {
    0% { opacity: 0; scale: 1.8; }
    30% { opacity: 1; scale: 1; }
    100% { opacity: 1; scale: 1.75; }
  }

  @media (prefers-reduced-motion: reduce) {
    .add-to-cart-button[data-added='true'] .add-to-cart__added-icon--light::before {
      animation: none;
      opacity: 0;
    }

    .add-to-cart-button[data-added='true'] .add-to-cart__added-icon--light::after {
      animation: none;
      opacity: 1;
      scale: 1.75;
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:ar-launch (INDEX:168) */
/* --- The product page button ---------------------------------------- */
  /* A button in the flow under the gallery, not an overlay on it. An absolutely
     positioned control over a swipeable gallery is how both of Dawn's AR
     attempts killed mobile swiping -- twice, with the same symptom and a long
     debugging session each time. Nothing here is positioned, so there is
     nothing to trap a touch that was meant for the carousel. */
  .ar-launch-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    inline-size: 100%;
    margin-block-start: 12px;
    padding: 13px 20px;
    border: 1px solid #12281c;
    border-radius: 999px;
    background: transparent;
    color: #12281c;
    font-family: inherit;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .ar-launch-button__logo {
    display: block;
    inline-size: 22px;
    block-size: 22px;
  }

  @media (hover: hover) {
    .ar-launch-button:hover {
      background: #12281c;
      color: #fbf8f1;
    }
  }

  /* --- Over the picture, costing the page no height --------------------- */
  /* Anchored to <slideshow-container>, which the theme already sets to
     position: relative -- the same reasoning that put Dawn's button inside its
     slider-component rather than after the gallery. After the gallery is where
     this started, and it worked, but it pushed everything below it down by the
     height of a button on a screen where vertical space is the scarce thing.

     pointer-events discipline is the whole safety story. The wrapper spans the
     width of the viewer, so if it accepted pointer events it would swallow
     every horizontal swipe and the carousel would look fine and be dead --
     which is exactly how two earlier attempts at this failed, both times with
     no visible overlay to blame. Only the pill itself takes events. */
  .ar-launch-overlay {
    position: absolute;
    inset-block-end: 14px;
    inset-inline: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .ar-launch-overlay .ar-launch-button {
    inline-size: auto;
    margin-block-start: 0;
    padding: 10px 18px;
    border-color: rgb(18 40 28 / 0.14);
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.16);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* --- The card badge -------------------------------------------------- */
  /* Top-centre and in the card's outer layer, above the full-card link, so the
     tap reaches the badge rather than navigating to the product. */
  /* Bottom-right of the picture. The top edge already carries the badge on
     one side and the cart button on the other, and the middle is where the
     product is -- the lower corner is the only part of a sculpture photograph
     that is reliably background.

     Shares --item-control-inset with the cart button so both sit the same
     distance from the edge they hug. */
  .ar-badge-wrapper {
    position: absolute;
    inset-block-end: var(--item-control-inset, 10px);
    inset-inline-end: var(--item-control-inset, 10px);
    z-index: 3;
    display: block;
    pointer-events: none;
  }

  /* The variant chips run along the bottom of the picture and are centred, so
     on a card that has both they would pass underneath this badge. Their right
     edge is pulled in by exactly the room the badge takes, which keeps the
     chips centred in the space that is actually left rather than in the space
     that would be there if the badge were absent. */
  .item:has(.ar-badge-wrapper) .item__options {
    inset-inline-end: calc(var(--item-control-inset, 10px) + var(--item-control-size, 36px) + 8px);
  }

  .ar-icon-badge {
    display: grid;
    place-items: center;
    inline-size: var(--item-control-size, 36px);
    block-size: var(--item-control-size, 36px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.18);
    cursor: pointer;
    pointer-events: auto;
  }

  .ar-icon-badge .ar-logo {
    inline-size: 22px;
    block-size: 22px;
  }

  /* The transition sits on the resting rule, not inside :hover -- declared in
     :hover it would animate on the way in and snap on the way out, which reads
     as the control giving up rather than settling. */
  .ar-icon-badge {
    transition: scale 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }

  /* hover: hover so a phone never paints a stuck hover state after a tap --
     touch devices hold :hover on the last thing pressed until something else
     is. */
  @media (hover: hover) {
    .ar-icon-badge:hover {
      scale: 1.08;
      background: rgb(255 255 255 / 1);
      box-shadow: 0 3px 14px rgb(0 0 0 / 0.26);
    }
  }

  /* Pressed, on every device: the one bit of feedback a touch screen can give
     between the tap and the viewer opening, which is a wait of a second or
     more on the first use while the library downloads. */
  .ar-icon-badge:active {
    scale: 0.94;
    transition-duration: 0.08s;
  }

  .ar-icon-badge:focus-visible {
    outline: 2px solid #12281c;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ar-icon-badge {
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .ar-icon-badge:hover,
    .ar-icon-badge:active {
      scale: 1;
    }
  }
/* END_SNIPPET:ar-launch */

/* START_SNIPPET:background-media (INDEX:169) */
.background-image-container {
    overflow: hidden;
    position: absolute;
    inset: 0;
    opacity: var(--image-opacity);
  }

  .background-image-container img,
  .background-image-container svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .background-image-fit img,
  .background-image-fit svg {
    object-fit: contain;
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:170) */
.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:171) */
.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:buy-buttons-styles (INDEX:176) */
/* Pinned to the foot of the screen on a phone.
     ------------------------------------------------------------------------
     This PDP carries a lot of blocks -- description, facts, trust, specs,
     viewers, family -- so in the page flow Add to cart lands well below the
     fold and a shopper who has already decided has to scroll to buy.

     Nothing is cloned. The quantity selector, Add to cart and the accelerated
     checkout button are all CHILDREN of this one block, inside a single
     <product-form-component>, so moving the block moves all three with their
     variant state, quantity rules and sold-out handling intact. A second set
     of buttons rendered at the bottom would have needed its own wiring and
     would have drifted the first time someone changed a variant -- which is
     how a shopper ends up adding the wrong one.

     z-index 4 sits above the page and below the cart drawer (z-index 1 on its
     own stacking context, raised while open), so the drawer still covers this
     when it opens.

     The bottom padding is on <body> via :has(), so it only applies when the
     bar is actually switched on -- turning the setting off leaves no orphan
     gap at the foot of the page. */
  @media screen and (max-width: 749px) {
    .buy-buttons-block--mobile-sticky {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: 4;
      width: auto;
      margin: 0;
      padding-inline: var(--padding-md, 16px);
      padding-block-start: var(--padding-sm, 10px);
      /* env() keeps the buttons above the iPhone home indicator rather than
         under it, where they are tappable but look wrong. */
      padding-block-end: calc(var(--padding-sm, 10px) + env(safe-area-inset-bottom, 0px));
      background: var(--color-background, #fff);
      box-shadow:
        0 -1px 0 rgb(0 0 0 / 0.08),
        0 -10px 28px -18px rgb(0 0 0 / 0.35);
    }

    /* One line: quantity, Add to cart and Buy now side by side.
       
       Three things in the base rules had to give. --buy-button-preferred-width
       is a 185px flex-basis, and two of those exceed a 390px screen, so the row
       wrapped. min-width: fit-content then refused to let either button shrink
       below its text. And flex-wrap was on.
       
       min-inline-size: 0 is the one that actually allows the shrink -- without
       it a flex item will not go below its content's intrinsic width no matter
       what the basis says. */
    .buy-buttons-block--mobile-sticky {
      --buy-button-preferred-width: 0px;

      /* Size the stepper by overriding the VARIABLES it is built from, not by
         out-specifying the rules that consume them.
         
         quantity-selector-styles.liquid sets --quantity-selector-width: 124px
         and sizes the +/- from --minimum-touch-target, and its
         `.product-details .quantity-selector .quantity-minus` ties the
         specificity of anything reasonable written here -- so which one won
         depended on stylesheet order, and the stepper snapped back to full
         size once that sheet arrived.
         
         Custom properties resolve from the nearest ancestor that declares
         them, so declaring both here beats a :root declaration for everything
         inside this bar, whatever order the sheets load in. */
      --minimum-touch-target: 28px;
    }

    /* --quantity-selector-width has to be re-declared ON .quantity-selector,
       not inherited into it. quantity-selector-styles.liquid sets it on that
       element itself, and a declaration on the element always beats one
       inherited from an ancestor -- so setting it on the bar above did
       nothing, and the selector stayed 124px inside an 86px wrapper,
       overflowing by 40px and sitting under Add to cart.
       
       Two classes here beats their one, so this wins on specificity rather
       than on stylesheet order. */
    .buy-buttons-block--mobile-sticky .quantity-selector {
      --quantity-selector-width: 86px;
      flex: 0 0 86px;
      inline-size: 86px;
      min-inline-size: 0;
    }

    .buy-buttons-block--mobile-sticky .product-form-buttons {
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
    }

    /* The stepper is a fixed job -- it does not need to grow with the row.
       
       104px, not 78px. Its three controls come to 126px naturally (44 + 36 +
       44), and at 78px the plus button did not shrink to fit -- it overflowed
       the wrapper and sat underneath Add to cart, which read as the two
       overlapping. Narrowing the WRAPPER cannot narrow its contents; the
       controls themselves have to give. */
    .buy-buttons-block--mobile-sticky .quantity-selector-wrapper {
      flex: 0 0 auto;
      inline-size: 86px;
      min-inline-size: 0;
    }

    /* 34px keeps the row tight while staying a usable target -- the bar's own
       height gives these plenty of vertical reach, which is where a thumb has
       the most room. */
    /* The +/- now take their width from --minimum-touch-target above. Only
       the padding needs stating, since that is not variable-driven. */
    .buy-buttons-block--mobile-sticky .quantity-selector-wrapper .button {
      padding-inline: 0;
    }

    .buy-buttons-block--mobile-sticky .quantity-selector-wrapper input {
      min-inline-size: 0;
      padding-inline: 0;
      text-align: center;
    }

    /* The bag icon goes. It repeats what the label already says, and the ~28px
       it costs is the difference between "Buy it now" sitting on one line and
       wrapping to two. */
    .buy-buttons-block--mobile-sticky .add-to-cart-icon {
      display: none;
    }

    /* Both labels stay on one line. The accelerated checkout button is
       Shopify's own component -- its box is ours, its contents are not -- so
       this is set on the block around it and inherited in. */
    .buy-buttons-block--mobile-sticky .add-to-cart-button,
    .buy-buttons-block--mobile-sticky .accelerated-checkout-block,
    .buy-buttons-block--mobile-sticky .shopify-payment-button {
      white-space: nowrap;
    }

    .buy-buttons-block--mobile-sticky
      .product-form-buttons
      > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
      flex: 1 1 0;
      min-inline-size: 0;
    }

    /* Text that no longer has room to be leisurely. */
    .buy-buttons-block--mobile-sticky .add-to-cart-button {
      padding-inline: var(--padding-xs, 6px);
      font-size: 0.85rem;
      white-space: nowrap;
    }

    /* Room at the foot of the page so the last block is not under the bar.
       Generous rather than exact -- the height varies with whether the
       accelerated checkout button rendered at all. */
    body:has(.buy-buttons-block--mobile-sticky) {
      padding-block-end: 88px;
    }
  }

  .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-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);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .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%;
    color: var(--color, var(--color-foreground));
  }

  .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);
    padding-inline: var(--theme-drawer-padding);
    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__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, var(--color-foreground));
    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: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .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;
  }

  .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:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:177) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:card-hover-effect-styles (INDEX:178) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */

/* START_SNIPPET:carousel-arrows (INDEX:179) */
.carousel-arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid var(--arrow-border, rgb(180 134 34 / 0.45));
    border-radius: 50%;
    background-color: var(--arrow-bg, #f7f4ea);
    color: var(--arrow-color, #b48622);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .carousel-arrow:hover {
    background-color: var(--arrow-color, #b48622);
    color: var(--arrow-bg, #f7f4ea);
  }

  /* Hidden means gone, not faded: a dimmed arrow still takes the click that
     was meant for the card underneath it. */
  .carousel-arrow[hidden] {
    display: none;
  }

  /* Half on the track, half off, so a card is never covered outright. */
  .carousel-arrow--prev {
    inset-inline-start: -22px;
  }

  .carousel-arrow--next {
    inset-inline-end: -22px;
  }

  @media screen and (max-width: 989px) {
    /* No room to hang outside the track, and no pointer to hover with --
       swiping is the interaction here. */
    .carousel-arrow {
      display: none;
    }
  }

  /* Scroll-progress line, drawn as a row of dots: the same look as the
     gallery's showcase line, so every row on the page reads alike. The fill
     covers what has been seen and runs smoothly through the dots -- the one
     it is crossing shows part gold -- because the dots are only a mask over
     an ordinary line.

     4px dots on a 10px pitch; 'round' fits a whole number of them to the
     track so neither end is cut. 16px gap + 4px dots = 20px, the height the
     collection section's phone arrows allow for. */
  .carousel-progress {
    --progress: var(--progress-color, var(--arrow-color, #b48622));

    display: flex;
    justify-content: center;
    margin-block-start: 16px;
  }

  .carousel-progress[hidden] {
    display: none;
  }

  .carousel-progress__track {
    --dots: radial-gradient(circle closest-side, #000 92%, transparent) 0 0 / 10px 100% round no-repeat;

    position: relative;
    inline-size: min(160px, 50%);
    block-size: 4px;
    background-color: color-mix(in srgb, var(--progress) 30%, transparent);
    overflow: hidden;
    -webkit-mask: var(--dots);
    mask: var(--dots);
  }

  .carousel-progress__bar {
    position: absolute;
    inset: 0;
    background-color: var(--progress);
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: transform 0.2s ease-out;
  }

  /* Desktop has the arrows; the line is for swiping. */
  @media screen and (min-width: 990px) {
    .carousel-progress {
      display: none;
    }
  }
/* END_SNIPPET:carousel-arrows */

/* START_SNIPPET:cart-bubble (INDEX:181) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-coupon-block (INDEX:183) */
/* A light green card: tick, two lines of offer, and "View all coupons" on
     the right, as in the design.

     The card measures itself (container-type), and the type and the tick
     scale with its width (cqi): a phone drawer's card is ~300px wide, a
     desktop one ~430px, and the offer and the link only fit side by side on
     the narrow one if the type shrinks with it. Tuned so the two lines and
     the link still fit on a 360px phone with room to spare; the caps hold the
     desktop size. Only a 320px phone falls back to the link under the offer. */
  .cart-coupon {
    --cart-coupon-ink: #1f6b35;
    --cart-coupon-text: #1f1a14;
    --cart-coupon-bg: #f0f6ec;
    --cart-coupon-border: #cfdcc8;

    container-type: inline-size;
    min-width: 0;
  }

  .cart-coupon__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 9px;
    padding: 10px;
    border: 1px solid var(--cart-coupon-border);
    border-radius: 6px;
    background: var(--cart-coupon-bg);
    color: var(--cart-coupon-text);
  }

  .cart-coupon__icon {
    inline-size: clamp(20px, 7cqi, 26px);
    block-size: auto;
    color: var(--cart-coupon-ink);
  }

  .cart-coupon__text {
    min-width: 0;
  }

  .cart-coupon__line {
    margin: 0;
    font-size: clamp(0.62rem, 3.3cqi, 0.8rem);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .cart-coupon__line--pay {
    margin-block-start: 1px;
  }

  /* A line only breaks between its phrases -- "Apply code GHAR20" /
     "to get 20% OFF" -- never inside one. */
  .cart-coupon__nowrap {
    white-space: nowrap;
  }

  /* The code, the % OFF, the price you'll pay and the saving are the green
     highlights. */
  .cart-coupon .cart-coupon__code,
  .cart-coupon__off,
  .cart-coupon__price,
  .cart-coupon__save {
    color: var(--cart-coupon-ink);
    font-weight: 700;
  }

  .cart-coupon .cart-coupon__code {
    font-size: 1em;
  }

  .cart-coupon .cart-coupon__code:focus-visible {
    outline-color: var(--cart-coupon-ink);
  }

  .cart-coupon__save {
    white-space: nowrap;
  }

  .cart-coupon__all {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cart-coupon-text);
    font: inherit;
    font-size: clamp(0.58rem, 2.8cqi, 0.72rem);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .cart-coupon__all:focus-visible {
    outline: 2px solid var(--cart-coupon-ink);
    outline-offset: 2px;
  }

  /* A 320px phone: no width left for the link beside the offer at a
     readable size, so it drops under it, right aligned. */
  @container (max-width: 289px) {
    .cart-coupon__card {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .cart-coupon__all {
      grid-column: 2;
      justify-self: end;
    }
  }
/* END_SNIPPET:cart-coupon-block */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:184) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:185) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  /* One scroll for the whole drawer. Only two things hold their place: the
     close button and the checkout button. Everything else -- the "Cart"
     heading, the lines, the suggestions, the totals -- scrolls, because on a
     phone the chrome was taking 314px of an 844px screen (a 74px header plus
     a 240px pinned summary) and leaving the cart itself a strip in the
     middle. */
  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;

  }

  /* Must not shrink. With the scroll on .cart-drawer__inner, a child that is
     still "flex: 1; min-height: 0" squeezes itself down to whatever height is
     left instead of pushing past it -- so the panel never overflows, and
     nothing scrolls anywhere. It takes its content's height and lets the
     drawer scroll. */
  .cart-drawer__inner > .cart-items-component {
    /* grow, never shrink. Growing lets a short cart push the totals to the
       foot of the panel instead of leaving them stranded in the middle;
       refusing to shrink is what keeps the drawer scrollable when the cart is
       long -- with "flex: 1" it squeezed itself to fit and nothing scrolled. */
    flex: 1 0 auto;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    /* The scroll moved up to .cart-drawer__inner so the header scrolls too. */
    overflow-y: visible;

    /* No scroll-hint fade on this one. <scroll-hint> writes an inline
       mask-image that fades the bottom tenth of its own scroll box (see
       scrolling.js), which is a fine "there is more below" cue for a plain
       scrolling list. It is the wrong cue here: .cart-drawer__summary is
       sticky INSIDE this box, so the pinned checkout bar sat in the faded
       band and the Shiprocket button -- a flat #12281c set from the
       shiprocketCheckoutButton metafield -- dissolved into the background.
       The button was never a gradient; it was being masked out.

       !important because the component sets the mask inline, and an author
       !important declaration is the one thing that outranks that. Scoped to
       the cart drawer, so every other <scroll-hint> keeps its fade. The
       summary's own top fade, further down this file, is untouched -- that
       one is deliberate and marks content sliding under the bar. */
    mask-image: none !important;
  }

  /* One scroll for the whole drawer, not two nested ones.
     ------------------------------------------------------------------
     This used to carry overflow-y: auto, which made it a scroll container
     in its own right. A flex item that scrolls has an automatic minimum
     size of zero, so it was the only child of .cart-drawer__content that
     could shrink -- and .cart-recs and .cart-drawer__summary, being
     ordinary blocks, could not shrink below their contents. The line items
     therefore gave up all their height to the recommendations panel, which
     sat pinned at full size however full the cart was.

     Without it the items keep their natural height, nothing is squeezed,
     and .cart-drawer__content is the single scroller: you scroll past your
     items to reach the recommendations. The summary stays put regardless --
     it is position: sticky; bottom: 0 further down this file. */
  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

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

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    /* Was sticky, holding 240px at the bottom of every screen. The totals
       are worth reading once, at the end -- they do not need to sit on top
       of the cart the whole time. */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

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

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  /* Phones: the cart takes 90vw and leaves a 10vw strip of the page showing
     on the left. Below 990px the drawer is modal, so that strip is the
     dialog's backdrop and theme-drawer.js already closes on a tap there.
     Set through the width variable, not width, so the slide-in/out
     keyframes (which offset by the same variable) stay in step. */
  @media screen and (max-width: 749px) {
    #cart-drawer .theme-drawer__dialog {
      --theme-drawer-width: 90vw;
    }
  }

  /* The close button is the one piece of chrome that stays. It leaves the
     header's flow and sits over the drawer's top-right corner, on a disc so
     it stays readable over a product image scrolling underneath. */
  cart-drawer-component .theme-drawer__close-button {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: rgb(var(--color-background-rgb) / 0.92);
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.14);
  }

  /* "‹ Go back" and the perks strip above the Cart heading, on every screen. It scrolls
     away with the heading; the ✕ sits level with it on the same row.
     Removing the last line swaps in the empty drawer (which has its own
     Continue shopping), and the row goes with it. */
  .cart-drawer__back {
    --cart-back-height: 32px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    block-size: var(--cart-back-height);
    padding: 6px var(--cart-drawer-padding) 0;
    margin: 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground-rgb));
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: start;
    cursor: pointer;
  }

  /* ✕ level with "Go back", on a smaller 30px disc: the row's text is
     centred 19px down (6px top padding + half of the 26px left), and so
     is a 30px disc 4px from the top. */
  cart-drawer-component:has(.cart-drawer__back) .theme-drawer__header .theme-drawer__close-button {
    inset-block-start: 4px;
    inline-size: 30px;
    block-size: 30px;
  }

  cart-drawer-component:has(.cart-drawer__back) .theme-drawer__close-button .svg-wrapper {
    inline-size: 14px;
    block-size: 14px;
  }

  /* Thin green perks strip under "Continue shopping": a title line and a
     slow CSS-only marquee (the drawer arrives by morphing, so no script
     would run here). The run is printed twice and the track slides by
     exactly one run, so the loop has no seam. */
  .cart-perk-strip {
    display: block;
    flex-shrink: 0;
    margin: 4px 0 0;
    padding: 7px 0 7px;
    border-radius: 0;
    background-color: #0f2318;
    color: #f3e6cf;
    text-align: center;
    overflow: hidden;
  }

  .cart-perk-strip__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding-inline: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #f3e6cf;
  }

  .cart-perk-strip__rule {
    flex: 0 1 22px;
    block-size: 1px;
    background: linear-gradient(to right, rgb(243 230 207 / 0), rgb(243 230 207 / 0.6));
  }

  .cart-perk-strip__rule:last-child {
    transform: scaleX(-1);
  }

  .cart-perk-strip__marquee {
    margin-block-start: 2px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }

  .cart-perk-strip__track {
    display: flex;
    inline-size: max-content;
    animation: cart-perk-marquee 20s linear infinite;
  }

  .cart-perk-strip:active .cart-perk-strip__track {
    animation-play-state: paused;
  }

  .cart-perk-strip__run {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: rgb(243 230 207 / 0.95);
  }

  .cart-perk-strip__perk,
  .cart-perk-strip__dot {
    padding-inline: 7px;
  }

  .cart-perk-strip__dot {
    opacity: 0.8;
  }

  @keyframes cart-perk-marquee {
    to {
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-perk-strip__track {
      animation: none;
      inline-size: auto;
      justify-content: center;
    }

    .cart-perk-strip__run[aria-hidden='true'] {
      display: none;
    }

    .cart-perk-strip__run {
      white-space: normal;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* The empty cart keeps "Continue shopping" (and the ✕ beside it) but
     drops the perks strip. */
  .cart-drawer__inner:has(.cart-empty) .cart-perk-strip {
    display: none;
  }

  /* The strip already separates "Go back" from the heading, so the
     heading drops most of the drawer's top padding. */
  .cart-perk-strip + .theme-drawer__header {
    padding-block-start: 10px;
  }

  /* The heading keeps its height but no longer has to leave room for a
     button that is no longer in it. */
  cart-drawer-component .theme-drawer__header {
    padding-inline-end: 52px;
  }

  /* The checkout button holds the bottom of the panel while the cart scrolls
     under it.

     Sticky, not fixed. Fixed took its width from --sidebar-width (400px) and
     anchored itself to the viewport edge, but the drawer is actually 479px
     on a desktop -- so the bar sat 79px narrower than the panel and offset
     from its left edge. Sticky is laid out inside the panel, so it is the
     panel's width at every breakpoint with no media query and no guessing.

     Deliberately no safe-area padding -- on a real iPhone that pushed the bar
     off the bottom of the screen rather than clearing the home indicator.

     The selector is the direct-child one on purpose: the bar only pins when
     it is .cart-drawer__content's own child, because that is the box a sticky
     element is allowed to travel inside. Put it back in the summary and it
     silently reverts to appearing only at the very bottom of the scroll. */
  .cart-drawer__content > .cart-checkout-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* 5px under the button, matching its sides (see .cart__ctas below) and
       the PDP's sticky buy bar, so the button sits in an even frame. */
    padding-block: 8px 5px;
    /* Its own band, like the PDP's buy bar: the rows inside it are not trying
       to line up with the cart list above, they are trying to fit. */
    padding-inline: 10px;
    background: var(--color-background);
    box-shadow: 0 -2px 10px rgb(0 0 0 / 0.07);

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-2xl);
    }
  }

  /* The total sits on one line with the button beneath it: label left, price
     right, the way it reads in the summary. */
  .cart-checkout-bar .cart-totals__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-sm);
    width: 100%;
  }

  /* "Estimated total" a step up, so it reads as the heading of the coupon
     card beneath it; the "(Taxes & shipping included)" note stays small. */
  .cart-checkout-bar .cart-totals__total-label {
    font-size: clamp(0.75rem, 3.33vw, 0.86rem);
  }

  /* Zero row-gap, not a small one, because an empty row still costs a gap.
     Installments are switched on for this shop but payment_terms renders
     nothing, so that invisible span was collecting a gap above AND below --
     16px between the price and the note where the rule asked for 8. The note
     takes an explicit margin instead, which no empty sibling can inflate.

     Doubled class name to reach (0,2,0): cart-summary sets this row-gap on
     .cart-totals__container--has-installments, which is the same weight as a
     plain descendant selector, and which stylesheet lands last is not ours to
     decide. */
  .cart-checkout-bar .cart-totals__container.cart-totals__container {
    width: 100%;
    row-gap: 0;
  }

  .cart-checkout-bar .cart-totals__tax-note {
    margin-block-start: 3px;
  }

  /* The note already lays itself out as a wrapping row (see pdp-styles), so
     this only tightens it. Pinned, every pixel it takes is a pixel of cart
     the shopper cannot see -- so the gap and the type both come down a step.
     It still wraps to two lines on a narrow phone rather than being clipped. */
  /* Always stacked, taxes above shipping. Left to wrap, the two facts fell
     onto separate lines on a narrow phone but squeezed onto one on a wider
     one, so the bar looked different from phone to phone. */
  .cart-checkout-bar .pdp-shipping {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px 14px;
    font-size: 0.76rem;
  }

  /* The coupon card styles itself (see 'cart-coupon-block').

     Narrow phones: fit first, wrap neatly second.
     ------------------------------------------------------------------
     "(Taxes & shipping included)" sits beside "Estimated total" on a 390px
     phone. At 375px and 360px the drawer (90vw) is too narrow, so the type
     scales with the viewport, pinned to its 390px size (0.72rem = 2.95vw at
     390). Below that (a 320px phone) the note wraps flush under the label
     instead of 3px in. Either way nothing is clipped or misaligned. */
  @media screen and (max-width: 749px) {
    .cart-checkout-bar .cart-totals__total {
      gap: 6px;
    }

    .cart-checkout-bar .cart-totals__total-label {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 4px;
      min-width: 0;
    }

    .cart-checkout-bar .cart-totals__included {
      margin-inline-start: 0;
      font-size: clamp(0.62rem, 2.95vw, 0.72rem);
    }

    .cart-checkout-bar .cart-totals__total-value {
      flex-shrink: 0;
      white-space: nowrap;
    }
  }

  /* The button runs almost edge to edge, while the lines above it keep the
     bar's 10px gutter. Negative margins rather than a smaller gutter on the
     bar itself: the reading rows want the breathing space, the tap target
     wants the width. 10px of padding less 5px of margin leaves 5px -- the
     same 5px frame the PDP's sticky buy bar has on all four sides.

     width: auto is load-bearing. cart-summary sets .cart__ctas to width:100%,
     which measures the content box -- the element would slide 5px left and
     overhang on one side instead of widening. Released, the flex column's
     default stretch sizes it, and the negative margins then extend it. */
  .cart-checkout-bar .cart__ctas {
    width: auto;
    margin-inline: -5px;
    /* 4px on top of the bar's 5px row gap, so the button stands apart from
       the coupon line above it: the reading rows end, the action begins. */
    margin-block-start: 4px;
  }

  /* Shiprocket's own 10px margin under its button.
     ------------------------------------------------------------------
     Shopify's checkout button is not in the DOM at all by the time anyone
     sees this bar -- the app removes it and injects .shiprocket-headless in
     its place, and the visible button is .sr-headless-checkout inside that.
     Shiprocket's stylesheet puts margin-block-end: 10px on it, so the
     wrapper measures 62px around a 52px button and the bar appears to have
     10px of dead space under the button that no rule in this theme created.

     The same margin, in the same place, is zeroed for the PDP's sticky buy
     bar -- see the note at pdp-styles.liquid:1474. This is that fix, applied
     to the drawer.

     Worth remembering when measuring this bar: .cart__checkout-button does
     not exist here, and anything that falls back to the wrapper measures the
     margin as part of the button and reports the gap as closed. */
  .cart-checkout-bar .shiprocket-headless .sr-headless-checkout {
    margin-block-end: 0;
  }

  /* Suggestions are square, like every other card in the theme. Horizon's
     fallback is 4/5, and this row was the one place that never set the
     variable -- so the cards came out portrait while the collection grid and
     the home rows were square. Same fault main-collection.liquid documents. */
  .cart-recs {
    --item-ratio: 1 / 1;
  }

  /* The card title is a flex item, and a flex item's automatic minimum size
     is its content -- so on a card this narrow the title refused to shrink,
     ran 8px past the card's edge, and its ellipsis was drawn outside the
     card and clipped away. The name simply looked cut off mid-word. */
  .cart-recs .item__title {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  /* 20px of padding each side on a 169px card left the name 129px to live
     in. The cards on the wider rows can afford it; these cannot. */
  .cart-recs .item__body {
    --item-pad: 12px 12px 14px;
  }

  /* Air between the cart lines and the suggestions: they were touching,
     edge to edge, with the heading hard against the last REMOVE button. */
  .cart-recs.cart-recs {
    margin-block-start: 18px;
    padding-block-start: 18px;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.10);
  }

  /* ------------------------------------------------------------------
     Empty drawer: "Missing out" message on top, "Picked for you" below.
     ------------------------------------------------------------------
     The older empty rules above centre everything in the middle of the
     panel. That suited a lone button; with a row of cards under it the
     message would jump up the moment the cards arrived. So the message is
     anchored near the top, and the row grows in beneath it.

     Same specificity as `cart-drawer-component:not(:has(.cart-form))
     .cart-drawer__content` and later in the file, which is what wins. The
     class lives on the content itself, not on .cart-drawer--empty, because
     removing the last item swaps the content in from #empty-cart-template
     without touching that wrapper class. */
  cart-drawer-component .cart-drawer__content.cart-empty {
    --cart-empty-gold: #b48622;

    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
  }

  .cart-empty .cart-items__wrapper--drawer-empty {
    padding-inline: var(--cart-drawer-padding);
  }

  /* The message sits on a warm cream panel that runs edge to edge (the
     negative margin undoes the wrapper's side padding) and fades out at
     the foot, so there is no hard line above "Picked for you". */
  .cart-empty__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: calc(-1 * var(--cart-drawer-padding));
    /* Top clears the fixed close disc in the corner. */
    padding: 56px var(--cart-drawer-padding) 30px;
    background-color: #fbf4e8;
    background-image: linear-gradient(to bottom, #f8ecd8 0%, #fbf4e8 62%, rgba(251, 244, 232, 0) 100%);
  }

  .cart-empty__art {
    display: block;
    width: 184px;
    max-width: 70%;
  }

  .cart-empty__art svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .cart-empty__title {
    max-width: 18ch;
    margin: 14px 0 0;
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: #121212;
  }

  .cart-empty__text {
    max-width: 30ch;
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    text-wrap: pretty;
    color: rgb(var(--color-foreground-rgb) / 0.68);
  }

  /* Dark brand green, whatever the theme's primary button colour is. Set
     through the button's own variables so focus and hover keep working. */
  .cart-empty .cart-empty__cta,
  .cart-empty .cart-empty__cta:hover {
    --button-color: #ffffff;
    --button-background-color: #0f2318;
    --button-border-color: #0f2318;
    --button-focus-outline-color: #0f2318;
  }

  .cart-empty .cart-empty__cta:hover {
    --button-background-color: #1d3a2a;
  }

  .cart-empty__cta {
    width: 100%;
    max-width: 300px;
    margin-block-start: 22px;
    padding-block: 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cart-empty__cta .button-text::after {
    content: '\2192';
    display: inline-block;
    margin-inline-start: 8px;
    transition: transform 0.2s ease;
  }

  .cart-empty__cta:hover .button-text::after {
    transform: translateX(3px);
  }

  .cart-empty__continue {
    margin-block-start: 6px;
    padding: 12px 16px;
    border: 0;
    background: none;
    color: var(--color-foreground);
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.35);
    cursor: pointer;
    transition: text-decoration-color 0.2s ease;
  }

  .cart-empty__continue:hover {
    text-decoration-color: currentColor;
  }

  /* The suggestions under it. The plain hairline the full cart uses becomes
     a gold rule with a small star in the middle, to tie back to the spark
     above. Drawn with backgrounds on one pseudo-element: a line either side,
     the star as its text. */
  .cart-recs.cart-recs.cart-recs--empty {
    margin-block-start: 0;
    padding-block: 0 20px;
    border-block-start: 0;
    text-align: start;
  }

  .cart-recs--empty::before {
    content: '\2726';
    display: block;
    margin-block-end: 20px;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    color: var(--cart-empty-gold);
    background:
      linear-gradient(rgb(180 134 34 / 0.35), rgb(180 134 34 / 0.35)) left center / calc(50% - 16px) 1px no-repeat,
      linear-gradient(rgb(180 134 34 / 0.35), rgb(180 134 34 / 0.35)) right center / calc(50% - 16px) 1px no-repeat;
  }

  .cart-recs--empty .cart-recs__title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 18px;
  }

  .cart-recs--empty .cart-recs__all {
    color: var(--cart-empty-gold);
    font-weight: 600;
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Opacity only: a CSS transform would replace the SVG's own
       transform attribute and throw the sparkle out of place. */
    .cart-empty__twinkle {
      animation: cart-empty-twinkle 2.8s ease-in-out infinite;
    }

    .cart-empty__twinkle--late {
      animation-delay: 1.4s;
    }

    /* The row is fetched once the drawer opens, so it arrives a beat after
       the message. A short rise makes that read as intended, not as a jump. */
    .cart-recs--empty:not([hidden]) {
      animation: cart-empty-rise 0.45s ease-out both;
    }
  }

  /* Phones: the message sits a little higher and the suggestions follow
     straight after it.

     It must also FIT: the empty drawer should not scroll at all. At the
     desktop gaps the whole column came out ~80px taller than a phone, so
     the drawer scrolled to reach the prices and the dotted line. Only gaps
     are cut here -- the cards are untouched -- and the vertical ones are in
     dvh so they close up further on shorter phones instead of overflowing. */
  @media screen and (max-width: 749px) {
    .cart-empty__hero {
      /* Top gap roughly centres the whole column (message + ~680px of
         content) in the screen: tall phones get the spare room split above
         and below instead of all of it pooling under the cards. Worked out
         from the screen height rather than by flex-centring, because the
         cards arrive after the drawer opens -- centring would make the
         message jump up when they land. 14px floor for short phones. */
      padding-block: clamp(14px, calc((100dvh - 680px) / 2), 150px) clamp(10px, 2dvh, 18px);
    }

    .cart-empty__art {
      width: clamp(120px, 17dvh, 150px);
    }

    .cart-empty__title {
      margin-block-start: clamp(6px, 1.2dvh, 12px);
      font-size: 22px;
    }

    .cart-empty__text {
      margin-block-start: 6px;
      font-size: 13px;
    }

    .cart-empty__cta {
      margin-block-start: clamp(12px, 2.4dvh, 20px);
      padding-block: 13px;
    }

    .cart-empty__continue {
      margin-block-start: 0;
      padding-block: 8px;
    }

    /* Follows the message directly -- no pinning to the foot of the screen,
       which left an empty band in the middle. */
    .cart-recs.cart-recs.cart-recs--empty {
      margin-block-start: 0;
      padding-block-end: 12px;
    }

    .cart-recs--empty::before {
      margin-block-end: clamp(8px, 1.6dvh, 14px);
    }

    .cart-recs--empty .cart-recs__head {
      margin-block-end: 8px;
    }

    .cart-recs--empty .carousel-progress:not([hidden]) {
      margin-block: 8px 0;
    }
  }

  /* Shorter phones: the bags stay (they are wanted), just a size smaller. */
  @media screen and (max-width: 749px) and (max-height: 680px) {
    .cart-empty__art {
      width: 104px;
    }
  }

  @keyframes cart-empty-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }

  @keyframes cart-empty-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:186) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:187) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: auto;
    min-width: auto;
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;

    /* Icon and word read as one control. */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline: 6px;
  }

  .cart-items__remove-label {
    font-size: var(--font-size--sm);
    line-height: 1;
    white-space: nowrap;
  }

  /* ---- line prices --------------------------------------------------
     Scoped one level deeper than they need to be, on purpose. Every rule
     here overrides .cart-secondary-typography or a base .cart-items__*
     rule at the same 0-1-0 weight, so an equal-specificity tie would be
     settled by whichever stylesheet the page happened to load last --
     and this drawer is re-rendered through the Section Rendering API,
     which injects CSS after the document's own. Scoping to the row makes
     the outcome independent of load order. */
  .cart-items__table-row .cart-items__unit-price-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
  }

  /* The price being paid carries the weight; the price that no longer
     applies steps back rather than competing with it. */
  .cart-items__table-row .cart-items__unit-price-wrapper > div {
    font-weight: 600;
    color: var(--color-foreground);
  }

  .cart-items__table-row .cart-items__unit-price-wrapper .compare-at-price {
    font-weight: 400;
    opacity: 0.5;
    margin-inline-start: 7px;
  }

  .cart-items__saving {
    font-size: var(--font-size--xs);
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--cart-saving-ink, #9d2f2f);
    background: var(--cart-saving-fill, rgb(157 47 47 / 0.09));
  }

  /* The line total was the dullest thing in the drawer: small, light, and
     the same grey as the tax caption. It is the number the shopper is
     actually looking for. */
  .cart-items__table-row .cart-items__price {
    font-size: var(--font-size--md);
    font-weight: 600;
    color: var(--color-foreground);
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

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

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  /* ---- compact drawer rows on phones ---------------------------------
     A 64px thumbnail, then three lines: the title on one line (cut with
     an ellipsis), the price row, and the stepper + bin on the right. The
     line-total column is gone -- with one piece it only repeated the
     price -- and comes back as "Total ..." on the stepper row's left
     only when the quantity is 2 or more (--multi, set in the markup).

     Selectors carry the row class twice-over (0-3-0) so they beat the
     drawer's own 0-2-0 row rules in cart-drawer.liquid whatever order
     the two stylesheets load in. */
  @media screen and (max-width: 749px) {
    .cart-drawer__items .cart-items__table-row.cart-items__table-row--full-width-variants {
      grid-template-columns: 64px minmax(0, 1fr) auto;
      grid-template-rows: none;
      grid-template-areas:
        'media details details'
        'media variants variants'
        'media unit_price unit_price'
        'media price quantity'
        'media error error';
      column-gap: 12px;
      row-gap: 0;
      align-items: center;
      padding-bottom: 14px;
      margin-bottom: 14px;
    }

    .cart-drawer__items .cart-items__table-row.cart-items__table-row--full-width-variants:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__media {
      align-self: start;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__media-container {
      border-radius: 8px;
    }

    /* Title: one line, cut with "…". The link keeps the full title. */
    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__title-row {
      display: flex;
      inline-size: 100%;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__title {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__variants-wrapper {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Price row. The two prices never break inside themselves; if a long
       price pair and the pill do not fit, the pill drops to its own line. */
    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__unit-price-wrapper {
      margin-block-start: 3px;
      gap: 4px 8px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__unit-price-wrapper > div {
      font-size: 14px;
      white-space: nowrap;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__unit-price-wrapper .compare-at-price {
      font-size: 12px;
      margin-inline-start: 5px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__saving {
      font-size: 10.5px;
      padding: 3px 7px;
    }

    /* Line total: hidden with one piece; "Total ₹…" stacked on the left of
       the stepper row with two or more. */
    .cart-drawer__items .cart-items__table-row.cart-items__table-row--full-width-variants .cart-items__price {
      display: none;
    }

    .cart-drawer__items .cart-items__table-row.cart-items__table-row--multi .cart-items__price {
      display: block;
      grid-area: price;
      align-self: center;
      inline-size: auto;
      min-inline-size: 0;
      margin-block-start: 8px;
      text-align: start;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
    }

    .cart-drawer__items .cart-items__table-row--multi .cart-items__price::before {
      content: 'Total';
      display: block;
      font-size: 11px;
      font-weight: 400;
      opacity: 0.6;
    }

    /* Stepper + bin, right-aligned and compact. */
    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__quantity {
      grid-area: quantity;
      justify-self: end;
      margin-block-start: 8px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__quantity-controls {
      gap: 2px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .quantity-selector {
      --quantity-selector-width: 84px;
      flex: 0 0 84px;
      inline-size: 84px;
      block-size: 28px;
      font-size: 13px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .quantity-selector :is(.quantity-minus, .quantity-plus) {
      inline-size: 28px;
      block-size: 28px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .quantity-selector input[type='number'] {
      max-width: 28px;
    }

    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__remove {
      block-size: 32px;
      min-inline-size: 32px;
      padding-inline: 6px;
    }

    /* Bin only; the button's aria-label still says "Remove <product>". */
    .cart-drawer__items .cart-items__table-row--full-width-variants .cart-items__remove-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-recommendations (INDEX:189) */
/* A stacking context of its own, and this is load-bearing.
     ------------------------------------------------------------------
     The drawer scrolls as one column now, so this row passes underneath
     .cart-drawer__summary, which is position: sticky with z-index: 1.
     The cards' floating controls carry z-index of their own -- the AR badge
     3 (.ar-badge-wrapper), the wishlist heart 2 (.item__wishlist) -- and
     .item is position: relative with z-index: auto, so it is NOT a stacking
     context and those numbers were competing with the summary's 1 directly.
     They won: the card body scrolled under the summary as it should while
     the cube and the heart punched straight through it and floated over the
     total.

     z-index: 0 on a positioned element makes this element a stacking
     context, so 2 and 3 are now resolved inside it and the whole panel is
     ordered against the summary as a single layer. Nothing inside changes
     relative to anything else inside. */
  .cart-recs {
    position: relative;
    z-index: 0;
    display: block;
    padding-block: 14px 4px;
    /* .cart-drawer__content has padding: 0, so without this the heading and
       the row sit flush against the drawer edge while the summary below them
       is inset. Same variable the line items use. */
    padding-inline: var(--cart-drawer-padding);
    border-block-start: 1px solid rgb(18 40 28 / 0.12);
  }

  /* The element ships hidden and is revealed only once cards are in it, so a
     cart whose recommendations return nothing shows no orphan heading. */
  .cart-recs[hidden] {
    display: none;
  }

  .cart-recs__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 10px;
  }

  .cart-recs__title {
    margin: 0;
    font-size: var(--font-size--md);
    font-weight: 600;
  }

  .cart-recs__all {
    flex: 0 0 auto;
    font-size: var(--font-size--xs);
    text-decoration: none;
    opacity: 0.75;
  }

  .cart-recs__all:hover {
    opacity: 1;
  }

  /* The drawer is itself a scroll container. Without this the row's own
     horizontal scroll and the drawer's vertical scroll fight over a diagonal
     drag and the drawer wins, which reads as the row being stuck.

     pan-x AND pan-y, not pan-x alone: pan-x forbade vertical panning for any
     touch that started on the row, so an up/down swipe on a card image did
     nothing and the cart could not be scrolled from there. With both, the
     browser picks the axis from the swipe itself. */
  .cart-recs__row {
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  /* The dotted progress line at every width here, not only on phones: the
     drawer is phone-narrow on desktop too and has no arrows. A little closer
     to the row than on the home page, to suit the drawer's tighter spacing. */
  .cart-recs .carousel-progress:not([hidden]) {
    display: flex;
    margin-block: 12px 6px;
  }
/* END_SNIPPET:cart-recommendations */

/* START_SNIPPET:cart-summary (INDEX:190) */
/* Buy Now keeps Shiprocket's own green (#12281c, from the
     shiprocketCheckoutButton metafield) in the cart -- the gold override
     that used to sit here now lives only on the PDP. */

  /* Shiprocket's label came out at ~12px -- lost on a 52px gold bar. Its
     metafield styles are !important, so the size has to be too. */
  .cart__ctas .shiprocket-headless .sr-button-text-container {
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.08em;
  }

  /* A soft corner on Buy Now in the cart. Shiprocket's metafield styles are
     !important, so the radius has to be too; overflow keeps the inner label
     and payment-icon strip inside the rounded edge. */
  .cart__ctas .shiprocket-headless .sr-headless-checkout {
    border-radius: 8px !important;
    overflow: hidden;
  }

  .cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

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

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

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

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-totals-block (INDEX:191) */
/* "(Taxes & shipping included)" beside "Estimated total": smaller and
     muted, so the label still reads first and the price keeps its line. */
  .cart-totals__included {
    margin-inline-start: 3px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-foreground-subdued);
    white-space: nowrap;
  }
/* END_SNIPPET:cart-totals-block */

/* START_SNIPPET:cart-typography-styles (INDEX:192) */
.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);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:193) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:194) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:196) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    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__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    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 {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .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%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:198) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:204) */
.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;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:205) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:dialog-styles (INDEX:206) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */

/* START_SNIPPET:divider (INDEX:207) */
.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);
    flex-shrink: 0;
    min-height: var(--divider-min-height, var(--divider-flex-basis));
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:209) */
.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:210) */
.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:211) */
.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%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      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:feature-bar-styles (INDEX:214) */
.feature-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .feature-bar__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-inline-size: 160px;
    padding: 28px 24px;
    text-align: center;
  }

  .feature-bar__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
  }

  .feature-bar__icon svg {
    display: block;
    inline-size: 44px;
    block-size: 44px;
    color: var(--fb-icon, currentcolor);
  }

  .feature-bar__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .feature-bar__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fb-heading, inherit);
  }

  .feature-bar__text {
    max-inline-size: 32ch;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--fb-text, inherit);
  }

  /* --- Style 1: panel ----------------------------------------------------- */
  /* A solid dark panel, icons ringed in a soft circle, a hairline rule
     between each item -- rather than around them, so the row reads as one
     bar, not four cards. */
  .feature-bar--panel {
    background-color: var(--fb-bg, #12281c);
    border-radius: var(--fb-radius, 28px);
  }

  .feature-bar--panel .feature-bar__item {
    border-inline-start: 1px solid var(--fb-divider, rgb(224 183 78 / 0.35));
  }

  .feature-bar--panel .feature-bar__item:first-child {
    border-inline-start: none;
  }

  /* --- Style 2: cream ------------------------------------------------------ */
  /* A light, gold-bordered panel. Each item runs as a row -- icon badge
     beside its copy -- rather than stacked, so the bar reads more like a
     single line of reassurance than four separate blocks. */
  .feature-bar--cream {
    background-color: var(--fb-bg, #fdf6e8);
    border: 1px solid var(--fb-border, #b48622);
    border-radius: var(--fb-radius, 20px);
  }

  .feature-bar--cream .feature-bar__item {
    flex-direction: row;
    align-items: center;
    text-align: start;
    border-inline-start: 1px solid var(--fb-divider, rgb(180 134 34 / 0.3));
  }

  .feature-bar--cream .feature-bar__item:first-child {
    border-inline-start: none;
  }

  .feature-bar--cream .feature-bar__icon {
    border-radius: 14px;
    background-color: var(--fb-icon-bg, rgb(224 183 78 / 0.18));
  }

  /* --- Style 3: plain -------------------------------------------------- */
  /* White and quiet: a soft icon badge and a faint rule, no bordered edge.
     For pages where the bar should not compete with a busy background. */
  .feature-bar--plain {
    background-color: var(--fb-bg, #ffffff);
    border-radius: var(--fb-radius, 20px);
  }

  .feature-bar--plain .feature-bar__item {
    flex-direction: row;
    align-items: center;
    text-align: start;
    border-inline-start: 1px solid var(--fb-divider, rgb(0 0 0 / 0.08));
  }

  .feature-bar--plain .feature-bar__item:first-child {
    border-inline-start: none;
  }

  .feature-bar--plain .feature-bar__icon {
    border-radius: 14px;
    background-color: var(--fb-icon-bg, rgb(18 40 28 / 0.06));
  }

  @media screen and (max-width: 749px) {
    .feature-bar__item {
      flex: 1 1 50%;
    }

    .feature-bar--panel .feature-bar__item,
    .feature-bar--cream .feature-bar__item,
    .feature-bar--plain .feature-bar__item {
      border-inline-start: none;
      border-block-start: 1px solid var(--fb-divider, rgb(224 183 78 / 0.35));
    }

    .feature-bar--panel .feature-bar__item:nth-child(-n + 2),
    .feature-bar--cream .feature-bar__item:nth-child(-n + 2),
    .feature-bar--plain .feature-bar__item:nth-child(-n + 2) {
      border-block-start: none;
    }

    /* A rule between the two columns too, so the bar reads as a 2x2 grid. */
    .feature-bar--panel .feature-bar__item:nth-child(even),
    .feature-bar--cream .feature-bar__item:nth-child(even),
    .feature-bar--plain .feature-bar__item:nth-child(even) {
      border-inline-start: 1px solid var(--fb-divider, rgb(224 183 78 / 0.35));
    }
  }

  /* Compact below desktop: tighter cells, smaller icons and type, so the bar
     takes far less height on phones and tablets. */
  @media screen and (max-width: 989px) {
    .feature-bar {
      border-radius: min(var(--fb-radius, 28px), 20px);
    }

    .feature-bar__item {
      gap: 6px;
      min-inline-size: 0;
      padding: 16px 10px;
    }

    .feature-bar__icon {
      inline-size: 40px;
      block-size: 40px;
    }

    .feature-bar__icon svg {
      inline-size: 30px;
      block-size: 30px;
    }

    .feature-bar__body {
      gap: 2px;
    }

    .feature-bar__heading {
      font-size: 0.95rem;
    }

    .feature-bar__text {
      font-size: 0.8rem;
      line-height: 1.3;
    }
  }
/* END_SNIPPET:feature-bar-styles */

/* START_SNIPPET:filter-remove-buttons (INDEX:215) */
/* 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:flourish (INDEX:216) */
.flourish {
    flex: 0 0 auto;
    inline-size: clamp(48px, 5vw, 84px);
    block-size: auto;
    color: var(--sh-accent, #b48622);
  }

  .flourish--flip {
    transform: scaleX(-1);
  }
/* END_SNIPPET:flourish */

/* START_SNIPPET:fly-to-cart-styles (INDEX:217) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:222) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:224) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:225) */
.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:226) */
.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);
    }
  }

  .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;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .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);
    }
  }

  #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__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .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:227) */
.icon-caret--forward svg {
    transform: rotate(-90deg);
  }

  .icon-caret--backward svg {
    transform: rotate(90deg);
  }

  .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);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      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: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    /* Full width on phones: at the old width a sliver of the page showed
       down the right edge -- on a product page that was the dark green of a
       card, which read as part of the menu. */
    @media screen and (max-width: 749px) {
      width: 100vw;
      max-width: 100vw;
      border-right: 0;
    }

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

    /* Touch tablets keep a side panel, a little wider than desktop's. */
    @media screen and (min-width: 750px) and (hover: none) and (pointer: coarse) {
      width: 30rem;
    }
  }

  /* With a picture in the row, the name goes next to it rather than being
     pushed to the far end by the row's space-between. */
  .menu-drawer__menu-item--mainlist:has(.menu-drawer__thumb) .menu-drawer__menu-item-text {
    flex: 1 1 auto;
    text-align: start;
  }

  /* The small square beside a top-level name. */
  .menu-drawer__thumb {
    flex: none;
    inline-size: 52px;
    block-size: 52px;
    margin-inline-end: 14px;
    border-radius: 10px;
    object-fit: cover;
  }

  /* 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-overlay);
    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: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Submenu header with a centered, clickable title flanked by the back and
     close controls. */
  .menu-drawer__nav-buttons--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-drawer__title {
    justify-self: center;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
  }

  .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,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }

    /* Touch tablets use the phone spacing, as the rest of the drawer does. */
    @media screen and (min-width: 750px) and (hover: none) and (pointer: coarse) {
      margin-block-end: var(--margin-xs);
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }

    /* Touch tablets use the phone spacing, as the rest of the drawer does. */
    @media screen and (min-width: 750px) and (hover: none) and (pointer: coarse) {
      margin-block-end: var(--margin-sm);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

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

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  /* Square, like every other picture in the theme. Horizon ships these menu
     thumbnails at 16/9, which crops a standing sculpture to a letterbox and
     reads as a different design from the cards, the collection tiles and the
     drawer's own top-level thumbs. */
  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 1;
    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__header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 11px);
  }

  /* Sized off the mark's own aspect ratio rather than a fixed box: the file is
     wider than it is tall, so constraining the height and letting the width
     follow keeps it from being squashed at either end. */
  .menu-drawer__logo {
    display: flex;
    align-items: center;
    min-inline-size: 0;
  }

  .menu-drawer__logo img {
    display: block;
    block-size: 34px;
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
  }

  .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;
  }

  /* Match the menu links' focus style: a rectangular outline in the current color.
     These buttons sit flush against the drawer edges, so inset the outline to keep
     it from being clipped. */
  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    border-radius: 0;
    outline-offset: calc(var(--padding-2xs) * -1);
  }

  /* Safari < 16.4 draws the close focus ring via a pseudo-element; keep it
     rectangular there too. */
  .menu-drawer__close-button:focus-visible::after {
    border-radius: 0;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__back-button {
    width: fit-content;
    padding: var(--padding-lg);
    justify-self: start;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__close-button {
    justify-self: end;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  /* The in-place submenu: a tinted card that drops open under its row.
     Undoes the slide-in panel above (absolute, full height, hidden) -- a
     closed <details> already hides it, so it only needs to be laid out. */
  .menu-drawer__submenu--inline {
    position: static;
    height: auto;
    transform: none;
    visibility: visible;
    opacity: 1;
    overflow: visible;
    margin-block: 2px 12px;
    padding: 6px 14px;
    border-radius: 14px;
    background: rgb(var(--color-foreground-rgb) / 0.045);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.06);
  }

  details[open] > .menu-drawer__submenu--inline {
    animation: menu-drawer-card-open 0.28s ease;
  }

  .menu-drawer__submenu--inline .menu-drawer__inner-submenu {
    height: auto;
    overflow: visible;
    margin-top: 0;
  }

  .menu-drawer__submenu--inline .menu-drawer__menu {
    padding-inline: 0;
    margin-block-end: 0;
  }

  /* The caret turns to point down while its card is open. */
  .menu-drawer__menu-container > summary .icon-caret--forward svg {
    transition: transform 0.25s ease;
  }

  .menu-drawer__menu-container[open] > summary .icon-caret--forward svg {
    transform: rotate(0deg);
  }

  /* The last entry is the foot of the card, so it drops its divider --
     otherwise the card would end on a stray line just above its own edge. */
  .menu-drawer__submenu--inline .menu-drawer__inner-submenu > .menu-drawer__menu > .menu-drawer__list-item--divider:last-child {
    border-block-end: none;
  }

  @keyframes menu-drawer-card-open {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  /* The log-in card. A tinted panel rather than a plain row, so the one
     account action in the drawer does not read as an eleventh menu item.
     Colours come from the foreground token at low alpha, which keeps it
     correct whatever background the drawer is set to. */
  .menu-drawer__account {
    display: none;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: rgb(var(--color-background-rgb) / 0.75);
  }

  .menu-drawer__account-badge svg {
    inline-size: 18px;
    block-size: 20px;
  }

  .menu-drawer__account-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
  }

  .menu-drawer__account-title {
    font-size: 1.0625rem;
    line-height: 1.2;
  }

  .menu-drawer__account-sub {
    font-size: 0.8125rem;
    line-height: 1.25;
    opacity: 0.65;
  }

  .menu-drawer__account-chevron {
    flex: none;
    margin-inline-start: auto;
    inline-size: 18px;
    block-size: 18px;
    opacity: 0.55;
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  /* Log-in and social rows share the menu's left edge and its text size. */
  .menu-drawer__utility-links {
    /* 21px, not 18px: the drawer panel starts 3px left of the viewport, so
       this is what puts these rows on the menu items' own left edge. */
    margin-inline-start: 21px;
    margin-inline-end: 18px;
    gap: 12px;
    padding-block-end: 8px;

    /* Directly under the last menu entry, not pinned to the bottom of the
       panel. Horizon's rule is "margin-block: auto ...", and that auto pushed
       these two rows to the floor -- with ten short entries it left a band of
       empty white between "Collections" and the log-in card. */
    margin-block-start: 16px;

    /* ...and then held at the bottom of the panel while the menu scrolls
       under it. .menu-drawer is the scroll container and this is its last
       child, so sticky keeps it in view at the foot of the panel the whole
       way down, and it settles into its natural place at the end. Needs its
       own background or the menu shows through. */
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    padding-block-start: 12px;
    background: var(--color-background);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .menu-drawer__account.menu-drawer__account {
    font-size: 1.0625rem;
  }

  /* Social row under the log-in row, sitting on the same left edge. */
  .menu-drawer__social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  .menu-drawer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    color: rgb(var(--color-foreground));
  }

  /* A submenu is its own screen -- it has its own header, its own back
     button and its own scroll. The log-in card and the social row belong to
     the top level, and leaving them pinned there put them over the submenu's
     content with the panel's edge showing through beside them. */
  .menu-drawer.menu-drawer--has-submenu-opened .menu-drawer__utility-links {
    display: none;
  }

  /* Quiet by design: it is a legal note, not a link anyone came here for. */
  .menu-drawer__legal {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    opacity: 0.55;
  }

  .menu-drawer__social-icon {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor;
  }

  .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);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:item-styles (INDEX:234) */
/* --- The skeleton, shared by all six -------------------------------- */
  .item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
  }

  /* Used only when the root could not be an anchor -- a card carrying a
     quick-add form. Covers the whole card so the click target is unchanged,
     and sits under the buttons, which lift themselves above it. */
  .item__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .item__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--item-ratio, 4 / 5);
    background-color: var(--item-media-bg, rgb(0 0 0 / 0.04));
  }

  /* Plain and full-size by default -- styles that inset the picture (like
     card) give this its own overflow and radius, so a zoom on the picture
     inside clips to the picture's own box instead of bleeding into the
     inset around it. */
  .item__media-inner {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .item__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  .item:hover .item__image {
    transform: scale(1.04);
  }

  /* Sold out: the picture desaturates, the card does not.
     
     Only the image is drained -- title, price and badge keep their colour, so
     the card still reads as a product rather than as a disabled control. The
     badge above it already says "Sold out" in words; this is the signal you
     catch while scanning a row without reading any of them.
     
     Scoped to the image rather than the whole card so the wishlist heart, the
     cart button and the AR badge keep their own colours and stay legible
     against a grey photo. */
  .item--sold-out .item__image {
    filter: grayscale(1);
    opacity: 0.82;
  }

  .item__badge {
    position: absolute;
    /* Closer in and tighter. A badge is a note on a photograph, not a panel
       over it -- at 12px out with 0.9em of side padding it was claiming a
       corner of every picture. The four named treatments set their own inset
       and padding, so this moves the plain badge only. */
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 0.28em 0.6em;
    border-radius: 999px;
    /* --badge-fill / --badge-ink come from the section's colour pickers, when
       it has any. They sit outside the style variants deliberately, so a
       section can recolour its badges while leaving them on the plain pill. */
    background-color: var(--badge-fill, var(--item-accent, #b48622));
    color: var(--badge-ink, var(--item-badge-text, #fff));
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* A short line over the bottom of the media -- a video's own caption, in
     the styles that use one. Positioned once here, at skeleton level, the
     same as badge and wishlist, since nothing about it is style-specific. */
  .item__caption {
    position: absolute;
    inset-block-end: 14px;
    inset-inline: 14px;
    z-index: 1;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
  }

  /* --- The picture strip -------------------------------------------------- */
  /* A scroll container with snap points rather than a slider: a swipe on a
     phone and a flick on a trackpad both work with no JavaScript at all, and
     the arrows are only there for the pointer case, where there is no gesture
     to make. Nothing has to be re-implemented to get the obvious behaviour. */
  .item__strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .item__strip::-webkit-scrollbar {
    display: none;
  }

  /* Each slide clips its own picture. The card's hover zoom scales the image
     inside, and a transformed child enlarges its scroll container's scrollable
     overflow -- so without this the strip grows wider mid-hover, mandatory
     snapping re-resolves against the new width, and scrollLeft nudges far
     enough to show a slice of the next picture down the right-hand edge. The
     zoom was always clipped by .item__media before; the strip put a scroll
     container between the two and quietly took that away.

     Snapped to the start rather than the centre for the same reason: start is
     an exact edge, while centring resolves against a width that is fractional
     on most card sizes and lands the rest position half a pixel out. */
  .item__slide {
    flex: 0 0 100%;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    scroll-snap-align: start;
  }

  /* Shown only while a promoted slide's image is in flight (see
     item-media-nav.js). A moving sheen rather than a flat grey block: flat
     grey on a dark card reads as a broken image, movement reads as work in
     progress. Sits on the slide, so the picture simply paints over it. */
  .item__slide--loading {
    background-color: rgb(255 255 255 / 0.06);
    background-image: linear-gradient(
      100deg,
      transparent 25%,
      rgb(255 255 255 / 0.13) 45%,
      transparent 65%
    );
    background-repeat: no-repeat;
    background-size: 250% 100%;
    animation: item-slide-shimmer 1.1s ease-in-out infinite;
  }

  @keyframes item-slide-shimmer {
    from {
      background-position: 150% 0;
    }

    to {
      background-position: -50% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .item__slide--loading {
      animation: none;
    }
  }

  /* Above .item__link, the card's overlay anchor, or the card takes the click
     and navigates away instead of advancing the picture. */
  .item__nav {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    padding: 0;
    border: 1px solid rgb(224 183 78 / 0.32);
    border-radius: 50%;
    background: rgb(18 40 28 / 0.55);
    color: #e0b74e;
    cursor: pointer;
    /* Grounds the disc on a pale photograph, where a translucent dark circle
       otherwise floats with no edge of its own. */
    box-shadow: 0 1px 8px rgb(0 0 0 / 0.28);
    translate: 0 -50%;
    transition: opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  }

  /* `display: grid` above outranks the UA's `[hidden] { display: none }`, so
     the markup's `hidden` on the prev arrow (and everything syncArrows sets
     at either end of the strip) had no effect and a dead arrow sat on the
     picture at slide 0. Invisible while the arrows were hover-only; permanent
     once they stay on for touch. */
  .item__nav[hidden] {
    display: none;
  }

  .item__nav:hover {
    border-color: rgb(246 200 90 / 0.65);
    background: rgb(18 40 28 / 0.88);
    color: #f6c85a;
  }

  /* Both dimensions, not just the width. Left to derive its height from the
     viewBox, the SVG collapsed to 0px tall as a grid item in older Chromium
     builds (Samsung Internet), so the disc showed with no chevron in it. */
  .item__nav svg {
    inline-size: 8px;
    block-size: 13px;
    flex-shrink: 0;
    overflow: visible;
  }

  .item__nav--prev {
    inset-inline-start: 8px;
  }

  .item__nav--next {
    inset-inline-end: 8px;
  }

  /* The card's own colours rather than a white disc. The cart button and the
     wishlist heart are already white circles on this card; a third punches a
     hole in the photograph and reads as clutter, not as a control. Dark green
     at 55% with the gold the price is set in puts the arrows on the same
     palette as everything else and lets them sit back against the picture
     instead of on top of it.

     On a touch screen the arrows are the only way through the strip, so they
     stay on. The swipe they were meant to defer to does not reach the strip:
     .item__link is an absolutely-positioned sibling covering the picture, so
     a drag that starts on it looks up ITS ancestors for a scroll container,
     finds the page, and pans that instead. Measured on a card at 390px --
     with the link in place a swipe moves the strip 0px, with it removed the
     same swipe moves it exactly one slide.

     The arrows sidestep that entirely: they sit at z-index 2, above the link,
     and the handler calls preventDefault() and scrolls the strip itself. They
     are always visible here rather than revealed, because there is no hover
     to reveal them with. */
  @media (hover: none) {
    .item__nav {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .item__nav {
      opacity: 0;
    }

    .item:hover .item__nav,
    .item__nav:focus-visible {
      opacity: 1;
    }
  }

  /* The option row is a dropdown. The value the card is showing sits on a
     pill with a chevron, with a quiet "+N sizes" beside it saying how many
     others there are. Tapping opens a list of every in-stock value
     (.item__menu, below), which lives in the browser's top layer so no card,
     carousel or overflow can clip it. There is no measuring script: nothing
     here depends on how wide the words turn out to be.

     Lifted above .item__link, the card's own overlay anchor, or the card
     would swallow every tap before the pill could take it. */
  .item__options {
    position: absolute;
    inset-block-end: 8px;
    inset-inline: 8px;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .item__select {
    position: relative;
    display: block;
    min-inline-size: 0;
    max-inline-size: 72%;
    margin: 0;
    padding: 4px 29px 4px 11px;
    border: 1.5px solid rgb(224 183 78 / 0.95);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.95);
    color: #12281c;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* A card whose root is an anchor cannot hold a button, so it gets the value
     as plain text and no chevron. */
  .item__select--static {
    padding-inline-end: 11px;
    cursor: default;
  }

  .item__select:not(.item__select--static)::after {
    content: '';
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: 50%;
    inline-size: 17px;
    block-size: 17px;
    translate: 0 -50%;
    border: 1.5px solid rgb(224 183 78 / 0.95);
    border-radius: 50%;
    background: center / 9px 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23b48622' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6'/%3E%3C/svg%3E");
    transition: rotate 0.18s ease;
  }

  .item__select[aria-expanded='true']::after {
    rotate: 180deg;
  }

  .item__select:focus-visible {
    outline: 2px solid #12281c;
    outline-offset: 2px;
  }

  /* The list. Positioned from script when it opens (fixed, under the pill),
     because the top layer ignores the card it came from. A small notch points
     back at the pill; --caret-x is set by the same script. */
  .item__menu {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #fffdf8;
    color: #12281c;
    box-shadow: 0 10px 30px rgb(18 40 28 / 0.22), 0 1px 3px rgb(18 40 28 / 0.12);
    box-sizing: border-box;
    overflow: visible;
    font: inherit;
    font-size: 0.8rem;
  }

  .item__menu::before {
    content: '';
    position: absolute;
    inset-block-start: -5px;
    inset-inline-start: var(--caret-x, 28px);
    inline-size: 11px;
    block-size: 11px;
    translate: -50% 0;
    rotate: 45deg;
    border-start-start-radius: 2px;
    background: #fffdf8;
  }

  .item__menu--above::before {
    inset-block-start: auto;
    inset-block-end: -5px;
    border-start-start-radius: 0;
    border-end-end-radius: 2px;
  }

  /* Many values: the list scrolls and the notch is dropped (it would be
     clipped by the scroll box). */
  .item__menu--scroll {
    overflow-y: auto;
    max-block-size: min(55vh, 320px);
  }

  .item__menu--scroll::before {
    display: none;
  }

  .item__menu .item__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #12281c;
    font-size: 0.8rem;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
  }

  .item__menu .item__option + .item__option {
    border-block-start: 1px solid rgb(18 40 28 / 0.08);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  .item__menu .item__option:hover,
  .item__menu .item__option:focus-visible {
    background: rgb(18 40 28 / 0.06);
    outline: none;
  }

  /* The value the card is showing: a cream wash and a tick. */
  .item__menu .item__option--current {
    background: #f6efd9;
    font-weight: 600;
  }

  .item__menu .item__option--current::after {
    content: '';
    flex: none;
    inline-size: 14px;
    block-size: 14px;
    background-color: #b48622;
    -webkit-mask: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6 6.5 12 13 4.5'/%3E%3C/svg%3E");
    mask: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6 6.5 12 13 4.5'/%3E%3C/svg%3E");
  }

  @media (prefers-reduced-motion: reduce) {
    .item__select:not(.item__select--static)::after {
      transition: none;
    }
  }

  /* Sits at the end of the rating row rather than over the picture, pushed
     to the far edge by its own auto margin so it lands there whether or not
     stars are showing. Lifted above the overlay link so it stays clickable. */
  .item__wishlist {
    position: relative;
    z-index: 2;
    margin-inline-start: auto;
    display: inline-flex;
  }

  /* The add-to-cart button takes the corner the heart used to hold. Sized
     explicitly, because everything Horizon puts inside it is absolutely
     positioned and would otherwise collapse this box to nothing. */
  /* One inset for both floating controls. The cart button is positioned
     against the card and the wishlist heart is pushed to the end of a flex
     row inside the body -- two entirely different mechanisms that have to
     land on the same vertical line, so they read the number from the same
     place instead of both hardcoding 10 and drifting apart the next time one
     of them is touched. */
  .item {
    --item-control-inset: 10px;
    /* One size for every floating control -- cart, AR badge, and the offset
       that pushes the options row clear of the cart. Three places used to
       hardcode 36px, so shrinking one on a phone left the other two behind
       and the row drifted out of line. */
    --item-control-size: 36px;
  }

  .item__quick-add {
    position: absolute;
    inset-block-start: var(--item-control-inset);
    inset-inline-end: var(--item-control-inset);
    z-index: 2;
    inline-size: var(--item-control-size, 36px);
    block-size: var(--item-control-size, 36px);
  }

  /* quick-add-component is built to stretch across a whole product card
     ('position: absolute; inset: 0') and pass clicks through to the one
     button inside it. Here it is already inside a box the size of that
     button, so it is put back in normal flow -- otherwise it stretches to
     an ancestor that is not the wrapper, and takes the button with it. */
  .item .item__quick-add .quick-add {
    position: static;
    inset: auto;
    display: block;
    pointer-events: auto;
    inline-size: 100%;
    block-size: 100%;
  }


  .item__rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Price and wishlist heart on one row: the price at the start, the heart
     pushed to the end by its own auto margin. The stars, when on, get a row
     of their own below. */
  .item__price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
  }

  /* "8 reviews" is one thing, not two. Left to wrap it breaks after the
     figure on a narrow card and turns the rating row into two lines -- a
     whole line of height on every card in the grid. */
  .item__rating-count {
    white-space: nowrap;
  }

  /* Icon-only, and always on. Horizon's own quick-add button is built to
     stay at opacity 0 until a <product-card> ancestor is hovered -- an
     element this card is not -- and to pin itself absolutely to the bottom
     corner of its form. Neither suits a always-visible button in the top
     corner, so both are overridden here. Three classes deep to outrank
     'button.quick-add__button' and '.quick-add__button.add-to-cart-button',
     whichever order the two stylesheets happen to load in. The label stays
     in the DOM for screen readers, collapsed to nothing visually. */
  .item .item__quick-add .quick-add__button {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    inline-size: var(--item-control-size, 36px);
    block-size: var(--item-control-size, 36px);
    min-inline-size: 0;
    max-inline-size: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* House green with a gold icon. --quick-add-foreground is set too because
       upstream colours the added-to-cart tick from it, not from color. */
    --quick-add-foreground: #e0b74e;
    background: #0f2318;
    color: #e0b74e;
    font-size: 0;
    letter-spacing: 0;
    backdrop-filter: none;
    transition: background-color 0.2s ease;
  }

  .item .item__quick-add .quick-add__button:hover {
    background: color-mix(in srgb, #0f2318 88%, #e0b74e);
    scale: 1;
  }

  /* Sold out: shown but visibly muted, rather than Horizon's opacity 0. */
  .item .item__quick-add .quick-add__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* The icon wrapper is sized from --quick-add-icon-width upstream, which is
     derived from a button size this button no longer uses. */
  .item .item__quick-add .quick-add__button > .add-to-cart-icon {
    inline-size: 18px;
    block-size: 18px;
  }

  .item .item__quick-add .add-to-cart-icon svg {
    inline-size: 18px;
    block-size: 18px;
  }

  /* The confirmation burst is a fixed 32px, which crowds the button. */
  .item .item__quick-add .add-to-cart__added-icon {
    inline-size: 22px;
    block-size: 22px;
  }

  /* Added state upstream collapses the width back to its own token. Sized
     from the shared variable so it follows the button down on a phone. */
  .item .item__quick-add .quick-add__button[data-added='true'] {
    inline-size: var(--item-control-size, 36px);
  }

  .item__rating {
    display: flex;
    gap: 2px;
  }

  .item__star {
    width: 12px;
    height: 12px;
    fill: rgb(0 0 0 / 0.15);
  }

  .item__star--filled {
    fill: #e0b74e;
  }

  .item__rating-count {
    color: var(--item-text, inherit);
    opacity: 0.75;
    font-size: 0.75rem;
  }

  /* gap rather than margins throughout: a missing part then costs nothing
     instead of leaving a hole. */
  .item__body {
    display: flex;
    flex-direction: column;
  }

  /* One type treatment for every card style.
     Titles and prices had drifted to four different weights -- panel and the
     three custom styles at 700, framed/crest at 600, showcase and image-heavy
     at 400 -- all in the same family and the same size. At card size Jost 700
     against Jost 400 does not read as "bolder", it reads as a different
     typeface, which is what made the cream tiles and the green cards look like
     two different fonts. Normalised to 400, the showcase value, so a card's
     identity comes from its panel and border rather than from its type.
     framed/crest also carried `font-family: inherit`, which happens to resolve
     to the same face today and would silently diverge the moment the heading
     font is changed in theme settings; removed with the rest. */
  .item__title {
    color: var(--item-title, inherit);
    font-family: var(--font-h1--family, inherit);
    line-height: 1.25;

    /* One title size for every style, stated here.
       ---------------------------------------------------------------------
       Each style used to supply its own font-size with its own fallback --
       0.95, 1, 1.05, 1.1 and 1.2rem across five of them -- so the same
       catalogue rendered at five different sizes depending on which style a
       section happened to be set to, and a section that never set
       --item-title-size got whichever number that style had been given.

       The value is the showcase card's, which is the one that reads right.
       A section can still override the variable; what it cannot do any more
       is differ by accident. */
    font-size: var(--item-title-size, 0.98rem);

    /* One line with an ellipsis, for every style.
       ---------------------------------------------------------------------
       A title that wraps makes each card in a row a different height, and the
       prices and ratings below stop lining up. That misalignment is what the
       eye catches -- more than the few missing words, which the customer is
       about to read in full on the product page anyway.

       Set here rather than per style so a card added later inherits it: this
       had been solved twice already, on showcase and on panel, and would have
       been solved a third time on whichever style came next. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .item__text {
    color: var(--item-text, inherit);
    line-height: 1.7;
  }

  /* The optional label above the title. Only drawn when one is given. */
  .item__eyebrow {
    color: var(--item-accent, #b48622);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .item__meta {
    /* Same reasoning as the title above: one size, overridable, never
       divergent by accident. 1.05rem is the showcase card's. */
    font-size: var(--item-meta-size, 1.05rem);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--item-meta, inherit);
    font-size: 0.95rem;
  }

  .item__meta-was {
    color: var(--item-text, inherit);
    font-size: 0.85rem;
    opacity: 0.65;
  }

  .item__ornament {
    color: var(--item-accent, #b48622);
    opacity: 0.85;
  }

  .item__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    color: var(--item-cta, var(--item-accent, #b48622));
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .item__cta svg {
    transition: transform 0.3s ease;
  }

  /* No words to sit beside, so the gap would only push the arrow off centre. */
  .item__cta--arrow-only {
    gap: 0;
  }

  .item:hover .item__cta svg {
    transform: translateX(5px);
  }

  /* --- Style 1: panel -------------------------------------------------- */
  /* Picture bleeds to the item's edge, the copy sits on a cream panel under
     it, everything centred on the ornament. The item clips, which is what
     rounds the top of the photograph without a second radius to keep in
     step. */
  .item--panel {
    background-color: var(--item-bg, #f7f4ea);
    border-radius: var(--item-radius, 8px);
    overflow: hidden;
    /* Drawn by default rather than only on hover. It was already occupying
       its 1px whatever its colour -- that is why it was transparent and not
       absent -- so showing it costs no layout, only the colour.

       Soft by default, full strength on hover: at the same weight in both
       states the hover would have nothing left to say. --item-accent-soft is
       the section's own accent at 45%, so a section that changes its accent
       carries the border with it. */
    border: 1px solid var(--item-accent-soft, rgb(180 134 34 / 0.45));
    transition: border-color 0.3s ease;
  }

  /* Fixed to the theme's standard gold rather than --item-accent: a section
     can override its accent to any colour (this one uses a dark green for
     headings), but the hover border is meant to read as gold everywhere. */
  .item--panel:hover {
    border-color: #b48622;
  }

  /* Black on the cream panel, where the gold sat on a near-gold ground and
     the badge stopped announcing anything. Written as the fallback inside
     var(--badge-fill, ...) rather than as a flat colour, so a section that
     picks its own badge background still wins -- this changes what the panel
     does by default, not what the merchant chose. */
  .item--panel .item__badge {
    background-color: var(--badge-fill, #141414);
  }

  /* Body copied from style 10, "Bottom accent card".
     ---------------------------------------------------------------------
     Same numbers rather than similar ones, so the two read as one family:
     start-aligned instead of centred, a tight 0.4rem between rows instead of
     1.1rem, and its padding. The centred version put the title, the price and
     the stars on three different axes -- start-aligned they share one, and
     the eye runs down a single edge.

     Only the body is taken. The panel keeps its own background, radius and
     border; the accent strip along the foot stays style 10's alone, since
     that is the thing that makes it style 10. */
  .item--panel .item__body {
    align-items: flex-start;
    gap: 0.4rem;
    padding: var(--item-pad, 1.25rem 1.25rem 1.5rem);
    text-align: start;
  }

  /* Full width so the wishlist heart lands at the card's right edge. The
     heart is pushed there by its own auto margin, which needs a row wider
     than its contents to push against -- without this a card with no review
     count sizes the row to the stars alone and the heart sits beside them. */
  .item--panel .item__rating-row {
    inline-size: 100%;
  }

  .item--panel .item__title {
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
    line-height: 1.2;

  }

  /* Style 10 does not set the rest of a title apart, so neither does this any
     more -- the italic second line was the largest single difference between
     the two cards. */
  .item--panel .item__title-rest {
    display: inline;
    font-style: inherit;
  }

  .item--panel .item__text {
    color: var(--item-text, #6b6b62);
    font-size: 0.85rem;
    font-style: italic;
  }

  .item--panel .item__meta-now {
    color: var(--item-meta, #121212);
    font-weight: 400;
  }

  /* Hidden, as style 10 hides it. A centred 7.5rem rule was the last thing
     in the body still sitting on the old axis, and one centred element in a
     start-aligned stack reads as a mistake rather than as decoration. */
  .item--panel .item__ornament {
    display: none;
  }

  /* --- Style 2 and 3 share the dark panel ------------------------------ */
  /* Both sit on the deep panel with a white/gold split title. What separates
     them is the ornament and the button, nothing structural. */
  .item--framed,
  .item--crest {
    background-color: var(--item-bg-dark, #12281c);
    border-radius: var(--item-radius, 8px);
    overflow: hidden;
  }

  .item--framed .item__title,
  .item--crest .item__title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .item--framed .item__title-lead,
  .item--crest .item__title-lead {
    color: #fff;
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .item--framed .item__title-rest,
  .item--crest .item__title-rest {
    color: var(--item-accent, #e0b74e);
    font-size: 1.05rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
  }

  .item--framed .item__text,
  .item--crest .item__text,
  .item--framed .item__meta,
  .item--crest .item__meta {
    color: rgb(255 255 255 / 0.82);
    font-size: 0.95rem;
  }

  .item--framed .item__meta,
  .item--crest .item__meta {
    justify-content: center;
  }

  /* A plain rule, no diamond: these two carry their ornament elsewhere. */
  .item--framed .item__ornament-diamond,
  .item--crest .item__ornament-diamond {
    display: none;
  }

  .item--framed .item__ornament,
  .item--crest .item__ornament {
    inline-size: 5rem;
    block-size: auto;
  }

  /* --- Style 2: framed -------------------------------------------------- */
  /* A hairline gold frame inset from the item edge, broken at the top by a
     diamond. Drawn with a border and a rotated pseudo-element rather than
     more markup, so the DOM stays identical to every other style. */
  .item--framed .item__body {
    position: relative;
    align-items: center;
    gap: 1.1rem;
    margin: 1rem;
    padding: 2.4rem 1.4rem 2rem;
    border: 1px solid var(--item-accent-soft, rgb(224 183 78 / 0.45));
    border-radius: 6px;
    text-align: center;
  }

  .item--framed .item__body::before {
    content: '';
    position: absolute;
    inset-block-start: -5px;
    inset-inline-start: 50%;
    inline-size: 9px;
    block-size: 9px;
    background-color: var(--item-accent, #e0b74e);
    box-shadow: 0 0 0 5px var(--item-bg-dark, #12281c);
    transform: translateX(-50%) rotate(45deg);
  }

  .item--framed .item__cta {
    justify-content: center;
    margin-block-start: 0.4rem;
    padding: 0.9em 1.8em;
    border: 1px solid var(--item-accent-soft, rgb(224 183 78 / 0.45));
    border-radius: 999px;
  }

  /* --- Style 3: crest --------------------------------------------------- */
  /* A thread dropping from the top edge to a small ring, then the title.
     The button is solid, so the item ends on the strongest thing in it. */
  .item--crest .item__body {
    position: relative;
    align-items: center;
    gap: 1.1rem;
    padding: 4.4rem 1.6rem 1.8rem;
    text-align: center;
  }

  .item--crest .item__body::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    block-size: 2.4rem;
    background-color: var(--item-accent-soft, rgb(224 183 78 / 0.45));
    transform: translateX(-50%);
  }

  .item--crest .item__body::after {
    content: '';
    position: absolute;
    inset-block-start: 2.4rem;
    inset-inline-start: 50%;
    inline-size: 7px;
    block-size: 7px;
    border: 1px solid var(--item-accent, #e0b74e);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .item--crest .item__cta {
    align-self: stretch;
    justify-content: center;
    margin-block-start: 0.6rem;
    padding: 1em 1.6em;
    background-color: var(--item-accent, #e0b74e);
    color: var(--item-bg-dark, #12281c);
  }

  /* --- Style 4: plain --------------------------------------------------- */
  /* No panel, no ornament: the picture carries it and the words stay out of
     the way. Left aligned, because centred text with no frame drifts. */
  .item--plain .item__media {
    border-radius: var(--item-radius, 8px);
  }

  .item--plain .item__body {
    align-items: flex-start;
    gap: 0.5rem;
    padding-block-start: var(--item-pad-plain, 1.1rem);
    text-align: start;
  }

  .item--plain .item__ornament {
    display: none;
  }

  .item--plain .item__title {
    font-size: var(--item-title-size, 0.98rem);
  }

  .item--plain .item__text {
    font-size: 0.9rem;
  }

  /* --- Style 5: card ---------------------------------------------------- */
  /* A white, bordered, shadowed card. Image bleeds to the top edge, the copy
     sits centred underneath, no ornament. */
  /* No box-shadow here: combined with overflow:hidden and a rounded border
     on the same element, some browsers corrupt the paint at the rounded
     corners during a hover repaint. background-clip keeps the background
     from bleeding past the border without it. */
  .item--card {
    background-color: var(--item-bg, #ffffff);
    background-clip: padding-box;
    border: 1px solid #e7e2d5;
    border-radius: var(--item-radius, 12px);
    overflow: hidden;
    transition: border-color 0.3s ease;
  }

  /* Fixed to the theme's standard gold rather than --item-accent, same
     reasoning as the panel style's hover border. */
  .item--card:hover {
    border-color: #b48622;
  }

  /* The image insets from the card's own edge, with the card's white
     showing all round it, so the picture reads as its own rounded shape
     rather than just clipped square by the card's top corners. The clipping
     lives on item__media-inner, tight around the picture itself, rather
     than on item__media (which also holds the white inset) -- so the hover
     zoom is contained by the picture's own edge and never paints over the
     white it is inset from. */
  .item--card .item__media {
    padding: var(--item-inset, 10px);
    background-color: var(--item-bg, #ffffff);
  }

  .item--card .item__media-inner {
    overflow: hidden;
    border-radius: var(--item-radius, 12px);
  }

  .item--card .item__body {
    align-items: center;
    gap: 0.35rem;
    padding: var(--item-pad, 0.9rem 1.2rem 1.6rem);
    text-align: center;
  }

  .item--card .item__title {
    font-size: var(--item-title-size, 0.98rem);
  }

  .item--card .item__title-rest {
    display: inline;
  }

  .item--card .item__ornament {
    display: none;
  }

  .item--card .item__text {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }

  .item--card .item__meta,
  .item--card .item__cta {
    justify-content: center;
  }

  /* --- Style 6: overlay -------------------------------------------------- */
  /* The body moves into the media's cell and sits at its foot over a scrim.
     This used to be a layout, which was the wrong shelf -- it reaches into
     the item's own parts, so it is an item style like the rest. Living here
     also ends the specificity fight it used to have with the panel styles:
     an item carries exactly one style class, so they can no longer collide. */
  .item--overlay {
    display: grid;
    background-color: transparent;
    border-radius: var(--item-radius, 8px);
    overflow: hidden;
  }

  .item--overlay .item__media {
    grid-area: 1 / 1;
    border-radius: 0;
  }

  .item--overlay .item__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.35) 38%, transparent 70%);
  }

  .item--overlay .item__body {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: end;
    gap: 0.5rem;
    padding: var(--item-pad, 1.4rem);
    color: #fff;
  }

  .item--overlay .item__title,
  .item--overlay .item__text,
  .item--overlay .item__meta {
    color: #fff;
  }

  .item--overlay .item__title {
    font-size: var(--item-title-size, 0.98rem);
  }

  .item--overlay .item__ornament {
    display: none;
  }

  /* --- Style 8: image heavy ---------------------------------------------- */
  /* The picture takes a fixed share of the card and the words get whatever is
     left. Written as grid rows on a card of known proportion rather than by
     sizing the picture, because a share only means something when there is a
     whole to take it from.

     The consequence is deliberate: the copy has a ceiling. A long description
     will be clipped rather than push the picture smaller, which is the point
     of the style -- a name, a short line, an arrow. Pair it with the small
     displayer layout and you get many compact, picture-led tiles. */
  .item--image-heavy {
    aspect-ratio: var(--item-ratio, 3 / 4);
    display: grid;
    grid-template-rows: var(--item-image-share, 75%) 1fr;
    background-color: var(--item-bg, #ffffff);
    border: 1px solid rgb(0 0 0 / 0.06);
    border-radius: var(--item-radius, 16px);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.05);
    padding: var(--item-inset, 12px);
    transition: border-color 0.3s ease;
  }

  /* Fixed to the theme's standard gold rather than --item-accent, same
     reasoning as the panel style's hover border above. */
  .item--image-heavy:hover {
    border-color: #b48622;
  }

  /* The picture fills its row rather than carrying a ratio of its own -- the
     row is what decides the shape here. min-block-size lets it shrink.

     It carries the card's own radius, not a tighter one. A concentric inner
     curve only earns its place when the frame is wide; at a thin inset the
     two curves read better as a single edge. */
  .item--image-heavy .item__media {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 0;
    border-radius: var(--item-radius, 16px);
  }

  .item--image-heavy .item__body {
    position: relative;
    min-block-size: 0;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    /* Bottom padding reserves the strip the arrow sits in below, so the
       normal-flow content (title, text) never renders underneath it. */
    padding: 0.5rem 0.2rem 1.4rem;
    text-align: center;
    overflow: hidden;
  }

  /* Held to the card's width, so the title does its own eliding.

     .item__body centres its children, which sizes the title box to its text
     rather than to the card -- so a title wider than the card never overflows
     *itself*, and the ellipsis it carries has nothing to trigger it. The body
     clips instead, and because the body is centred it cuts the same amount off
     both ends: 'Floor Lamps & Sculptures' came out as 'oor Lamps & Sculptur'.
     Capping the title returns the overflow to the element that knows what to
     do with it. */
  .item--image-heavy .item__title {
    max-inline-size: 100%;
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
  }

  .item--image-heavy .item__title-rest {
    display: inline;
  }

  .item--image-heavy .item__ornament {
    display: none;
  }

  .item--image-heavy .item__text {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .item--image-heavy .item__meta,
  .item--image-heavy .item__cta {
    justify-content: center;
  }

  /* item__body centres its content and clips whatever overflows -- by
     design, so a long description gets cut rather than shrinking the
     picture. Centring cuts evenly from both ends, though, and the arrow was
     going with it, even when there was room: with the stack itself already
     taller than the row, there is no free space left for a margin to push
     into. Taken out of that flow entirely and pinned to the row's own
     bottom edge instead, so it never depends on how much room the text
     above happens to leave. */
  .item--image-heavy .item__cta {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.3rem;
    justify-content: center;
  }

  .item--image-heavy .item__cta svg {
    inline-size: 26px;
    block-size: 14px;
  }

  /* --- Style 9: editorial ------------------------------------------------ */
  /* An ivory card: the picture inset with its own rounded corners, the words
     left-aligned under it -- optional gold label, title, a short line -- and a
     round gold arrow in the bottom-right corner, with a faint curve drawn
     behind the copy.

     Sized from the card's own width (container query units), not the screen.
     The same style runs in a ~170px small-displayer row and a ~280px grid
     row, on phones and desktops alike; sizing off the card means the title,
     line and arrow keep the same proportions to the card in every one of
     them, and nothing about the row -- how many cards, how wide -- changes.
     Each cqi value carries a plain fallback before it for browsers without
     container queries.

     No overflow: hidden on the card itself, for the reason given on the card
     style: with a border radius and a shadow on the same element some
     browsers corrupt the corner paint on hover. The picture clips itself. */
  .item--editorial {
    container-type: inline-size;
    /* inline-size containment means the card cannot size itself from its
       content, so it is told to fill its cell outright -- otherwise a row
       laid out with justify-self: start would collapse it to nothing. */
    inline-size: 100%;
    --editorial-gold: #b48622;
    --editorial-arrow: 30px;
    --editorial-arrow: clamp(26px, 17cqi, 38px);
    /* The tagline's size, shared with the arrow, which needs it to work out
       how far to overhang the tagline's row (see the arrow below). */
    --editorial-text: 0.78rem;
    --editorial-text: clamp(0.72rem, 5.2cqi, 0.86rem);
    /* The copy's side margin, shared by the body padding below. */
    --editorial-pad: 0.7rem;
    --editorial-pad: clamp(0.6rem, 7cqi, 1.1rem);
    /* No frame: the picture runs to the card's top and side edges, so the
       section's "Picture inset" setting does not apply to this style. */
    padding: 0;
    background-color: var(--item-bg, #fbf8f1);
    border: 1px solid rgb(180 134 34 / 0.18);
    border-radius: var(--item-radius, 16px);
    /* Tight: a scrolling row crops vertically and leaves only 4px under the
       cards, so a wide soft shadow would be cut off flat. */
    box-shadow: 0 1px 4px rgb(60 45 15 / 0.07);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .item--editorial:hover {
    border-color: var(--editorial-gold);
    box-shadow: 0 2px 4px rgb(60 45 15 / 0.1);
  }

  /* Full bleed: the top corners follow the card's own (less its 1px border,
     so the curves sit flush), the bottom edge is square where the copy
     starts. The card does not clip -- see above -- so the picture rounds
     itself. */
  .item--editorial .item__media {
    border-radius: max(calc(var(--item-radius, 16px) - 1px), 0px) max(calc(var(--item-radius, 16px) - 1px), 0px) 0 0;
  }

  /* The copy is a two-column grid: words on the left, the arrow on the
     right. With a tagline the title runs the full width and the arrow sits
     straight beside the tagline, centred on it -- sharing its row, so the
     arrow costs no height of its own. Areas with nothing in them collapse to
     nothing, which is why the spacing is margins rather than row-gap. */
  .item--editorial .item__body {
    position: relative;
    isolation: isolate;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'eyebrow eyebrow'
      'title title'
      'text cta'
      'meta meta';
    align-content: start;
    column-gap: 0.6rem;
    padding: var(--editorial-pad);
    /* The body now reaches the card's edges, so its bottom corners follow
       the card's -- otherwise the curve drawn behind the copy would poke out
       past the card's rounded corners. */
    border-radius: 0 0 var(--item-radius, 16px) var(--item-radius, 16px);
    text-align: start;
    overflow: hidden;
  }

  /* No tagline: the arrow moves up into the title's row, centred on the
     title, instead of sitting alone on a row under it. */
  .item--editorial .item__body:not(:has(.item__text)) {
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'eyebrow eyebrow'
      'title cta'
      'meta meta';
  }

  .item--editorial .item__body:not(:has(.item__text)) .item__title {
    align-self: center;
    margin-block-end: 0;
  }

  /* The curve behind the copy, bottom right. Decoration only: under the
     words (isolation above keeps the -1 inside the body) and never a click
     target. */
  .item--editorial .item__body::before {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: -1;
    inline-size: 70%;
    block-size: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke='%23b48622' stroke-opacity='0.16' stroke-width='1.2'%3E%3Cpath d='M6 80C36 44 78 20 120 16'/%3E%3Cpath d='M40 80C63 55 92 40 120 37'/%3E%3C/svg%3E")
      no-repeat right bottom / 100% auto;
    pointer-events: none;
  }

  .item--editorial .item__ornament {
    display: none;
  }

  /* Optical left alignment: each line pulled left by its own first letter's
     side bearing (--lsb, set per line in item.liquid, in em of that line's own
     font size), so the visible first letters of label, title and tagline sit
     on one edge instead of a big 'F' looking indented under a small 'C'. A
     line with no --lsb stays put. */
  .item--editorial .item__eyebrow,
  .item--editorial .item__title,
  .item--editorial .item__text {
    margin-inline-start: calc(var(--lsb, 0em) * -1);
  }

  .item--editorial .item__eyebrow {
    grid-area: eyebrow;
    margin-block-end: 0.3em;
    color: var(--editorial-gold);
    font-size: 0.62rem;
    font-size: clamp(0.56rem, 4cqi, 0.7rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .item--editorial .item__title {
    grid-area: title;
    /* The space under the title lives here rather than on the tagline, so
       the tagline's row holds only the tagline and the arrow centres on the
       words themselves. */
    margin-block-end: 0.15rem;
    font-size: 1.1rem;
    font-size: var(--item-title-size, clamp(1.05rem, 10cqi, 1.25rem));
    letter-spacing: 0.01em;
  }

  .item--editorial .item__title-rest {
    display: inline;
  }

  /* Two lines at most: a long tagline is cut rather than making this card
     taller than the ones beside it. */
  .item--editorial .item__text {
    grid-area: text;
    align-self: center;
    font-size: var(--editorial-text);
    letter-spacing: 0.02em;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .item--editorial .item__price-row {
    grid-area: meta;
    margin-block-start: 0.3rem;
  }

  .item--editorial .item__meta {
    font-size: 0.78rem;
  }

  .item--editorial .item__cta {
    grid-area: cta;
    align-self: center;
    justify-self: end;
    color: var(--item-cta, var(--editorial-gold));
  }

  /* The arrow on its own becomes a round outlined button. A label, if one is
     ever given, keeps the plain text-and-arrow link instead. */
  .item--editorial .item__cta--arrow-only {
    justify-content: center;
    flex: none;
    inline-size: var(--editorial-arrow);
    block-size: var(--editorial-arrow);
    border: 1px solid var(--item-cta, var(--editorial-gold));
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Beside a tagline, the arrow is taller than one line of it, and a grid row
     grows to fit its tallest item -- so a one-line tagline sat centred in a
     row the arrow's height, with a gap above it under the title. Equal
     negative margins top and bottom shrink the arrow's footprint to one line
     of the tagline (line-height 1.45 below), so the row is only as tall as
     the words. The arrow still draws at full size, centred on them, simply
     overhanging the row's edges. min() so a tagline taller than the arrow
     never gets a positive margin. */
  .item--editorial .item__body:has(.item__text) .item__cta--arrow-only {
    margin-block: min(0px, calc((var(--editorial-text) * 1.45 - var(--editorial-arrow)) / 2));
  }

  .item--editorial .item__cta--arrow-only svg {
    inline-size: 46%;
    block-size: auto;
  }

  /* Filled on hover, and only nudged -- the 5px every other style uses would
     push the arrow out of its circle. Hover-capable screens only, so a tap
     on a phone does not leave the button stuck filled. */
  .item--editorial:hover .item__cta--arrow-only svg {
    transform: translateX(2px);
  }

  @media (hover: hover) {
    .item--editorial:hover .item__cta--arrow-only {
      background-color: var(--item-cta, var(--editorial-gold));
      color: var(--item-bg, #fbf8f1);
    }
  }

  /* --- Style 8: showcase -------------------------------------------------- */
  /* A dark, compact product tile: badge and wishlist float over the image,
     title/rating/price sit left-aligned underneath. No ornament -- badges
     and stars already carry enough decoration. */
  .item--showcase {
    background-color: var(--item-bg-dark, #0f2318);
    /* A solid, opaque colour rather than a translucent overlay -- so its
       thickness and colour are unmistakable regardless of what it is
       layered on top of. */
    /* Thin. On a card this size the picture is the product and the green is
       packaging -- a wide mat spends the grid's scarcest thing, width, on the
       part nobody came to look at. At 7px the frame still reads as a
       deliberate mat rather than a stray outline -- thinner than that and it
       stops looking like a margin and starts looking like a border.
       Even on all four edges. Thickening only the top left the frame looking
       like a mistake rather than a wider mat -- the eye reads the top band
       against the side bands right beside it, and a heavier top does not read
       as emphasis, it reads as misaligned. */
    --showcase-frame: 7px;

    border: var(--showcase-frame) solid #12281c;

    /* Two concentric corners are only parallel when the outer radius is the
       inner one plus the frame between them. Set independently they read as a
       mistake: the mat thins along the straights and swells at the corner.
       So the slider sets the picture's radius and the frame adds its own
       thickness on top, which is how a real mat behaves -- rather than the
       slider setting the outside and the picture being left to guess. */
    border-radius: calc(var(--item-radius, 8px) + var(--showcase-frame));
    overflow: hidden;
  }

  /* The picture gets a radius of its own. The card's overflow:hidden rounds
     the outside of the green mat, which does nothing for the picture sitting
     10px inside it -- geometrically the inner corner of a 10px frame with a
     10px outer radius is square, so the photo met the mat at four sharp
     corners inside a rounded card.

     The picture is the one that takes the section's radius setting; the frame
     derives its own from this plus its thickness. item__media already clips
     its own overflow, so the radius applies to the picture and to anything
     laid over it -- the badge's flush corner rounds with it, which is what
     keeps that corner reading as one shape. */
  /* THINNER on a phone, not thicker.
     
     This override used to read 10px, on the reasoning that one card per row
     made each phone card three times its desktop width, so the mat had to grow
     with the picture. That premise is gone: the grid now fits two cards per row
     on a 390px screen, so a phone card is NARROWER than a desktop one (~170px
     against ~270px), and a 10px mat on it spends a tenth of the card's width on
     packaging.
     
     The frame is a proportion of the picture, not a fixed thing -- so when the
     picture halved, the frame had to. */
  @media screen and (max-width: 749px) {
    .item--showcase {
      --showcase-frame: 6px;
    }
  }

  .item--showcase .item__media {
    border-radius: var(--item-radius, 8px);
  }


  .item--showcase .item__badge {
    border-radius: 999px;
    background-color: rgb(0 0 0 / 0.65);
    font-family: var(--font-accent--family, inherit);
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: capitalize;
  }

  /* Three rows in the green, one thing each: the name, then the price, then
     the rating with the wishlist heart out at the far edge. The shared flex
     column already stacks them -- the order values further down put them in
     that sequence, since the markup renders the stars ahead of the price.

     Sizing the panel for exactly three rows only holds if the name is one
     row, so it is clamped rather than left to wrap: a two-line title on one
     card and a one-line title on the next left the green ragged across a
     row of cards. */
  /* No inline padding, deliberately. The body sits inside the frame, so zero
     here puts the title, price and rating on exactly the same left edge as
     the picture above them -- one line down the card instead of two, which is
     also what makes a row of these read as a set rather than as six separate
     cards. Any inline padding is added on top of the frame and breaks that
     alignment; 14px was enough to see. The top padding is the gap under the
     picture and is the only vertical air the group needs. */
  .item--showcase .item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0 14px;
    text-align: start;
  }

  .item--showcase .item__ornament {
    display: none;
  }

  /* The shared skeleton renders rating before price (item.liquid puts the
     star row ahead of the meta line), but this style wants price directly
     under the title with the stars last -- reordered visually here rather
     than in the markup, so every other style keeps its own DOM order. The
     divider is hung off the title's own bottom edge, a hairline the full
     width of the card, rather than a separate element. */
  .item--showcase .item__title {
    order: 1;
    padding-block-end: 6px;
    border-block-end: 1px solid rgb(255 255 255 / 0.15);
    inline-size: 100%;
    color: #fff;
  }

  /* Unlike title, the price is allowed to take the section's configured
     --item-meta colour -- some showcase sections want it gold, not white --
     falling back to white so a section that never sets one stays readable. */
  .item--showcase .item__price-row {
    order: 2;
  }

  /* No order here: the price row it sits in carries order 2. Kept on the
     price itself, it would put the price after the heart inside that row. */
  .item--showcase .item__meta {
    color: var(--item-meta, #fff);
  }

  .item--showcase .item__meta-now {
    color: #e0b74e;
    font-weight: 400;
  }

  .item--showcase .item__meta-was {
    color: #fff;
    opacity: 0.55;
  }

  /* The reserved height keeps the wishlist icon's hover slot open so the card
     never reflows -- but 32px was sized for a rating row that was accidentally
     two lines tall. It only has to clear one.

     The heart is pushed to the right edge with an auto margin rather than by
     space-between on the row. space-between treats the stars, the count and
     the heart as three equal things and spreads all three, which strands
     "8 reviews" out in the middle of the card away from the stars it belongs
     to. An auto margin moves only the heart, so the rating stays one group at
     the left and still works when the heart is switched off. */
  .item--showcase .item__rating-row {
    order: 3;
    min-block-size: 20px;
    justify-content: normal;
  }

  /* Inset to match the cart button above it rather than left flush with the
     picture. Pulling the button out to the edge instead would jam it into the
     corner of the photograph; moving the heart in costs nothing, because the
     card's alignment rule is about its left edge -- the title, the rule, the
     price and the stars all start there, and none of them moves. */
  .item--showcase .item__wishlist {
    margin-inline-start: auto;
    margin-inline-end: var(--item-control-inset);
  }

  /* Hover-only, and only where hovering is a thing -- on touch there is no
     hover to reveal it with, so it stays put. Opacity rather than display
     keeps its space reserved, so the card never reflows on hover. */
  /* Every card style, not just showcase: one behaviour across the store. */
  @media (hover: hover) {
    .item .item__wishlist {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .item:hover .item__wishlist,
    .item .item__wishlist:focus-within {
      opacity: 1;
    }
  }

  /* The count is a footnote to the stars, not a second price -- at 1rem it
     was set the same size as the title's own text.

     Full opacity and the brighter gold: dimmed to 0.85 it read as disabled
     rather than secondary, and size already does the work of making it
     subordinate. line-height 1 so the row centres on the glyphs themselves --
     with leading in the box the text sits a couple of pixels above the middle
     of the stars, which is exactly the misalignment the eye picks up. */
  .item--showcase .item__rating-count {
    color: var(--badge-gold-bright, #f6c85a);
    opacity: 1;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
  }

  /* The empty stars are permanent -- the scale is always drawn, whether or
     not the product carries a rating -- so they have to read as an empty
     scale rather than as stars that failed to paint. At 0.35 on this green
     they were all but invisible. */
  .item--showcase .item__star {
    width: 16px;
    height: 16px;
    fill: rgb(246 200 90 / 0.5);
  }

  .item--showcase .item__star--filled {
    fill: var(--badge-gold-bright, #f6c85a);
  }

  /* Phone-only tightening. MUST come after the base .item--showcase rules
     above: a media query adds no specificity, so an override placed before its
     base rule simply loses the cascade. An earlier version of this block sat
     up beside .item__media and did nothing at all for exactly that reason --
     the control inset appeared to work only because that one selector happened
     to be more specific than its base.
     
     The card is ~170px wide here against ~270px on desktop, so every fixed
     measurement inside it costs proportionally more.
     
     --item-control-inset is shared by the cart button, the AR button and the
     wishlist heart (see ar-launch.liquid), so setting it here moves all three
     together and they stay on one right-hand line. */
  @media screen and (max-width: 749px) {
    .item--showcase {
      --item-control-inset: 5px;
      /* 36px of chrome on a 170px card is a fifth of its width. */
      --item-control-size: 28px;
    }

    /* The vertical rhythm between title, price and rating. Under a 340px
       picture these gaps read as spacing; under a 170px one they read as a
       hole, because the text got no smaller while the card halved. */
    /* The bottom figure is larger than the top one on purpose. The rating row
       used to sit under the price and carried its own 20px floor, which is
       what held the price off the card's bottom edge; with ratings gone from
       the cards the price was left sitting almost on the frame. This puts
       that air back, without the row. */
    .item--showcase .item__body {
      gap: 0;
      padding: 3px 0 11px;
    }

    .item--showcase .item__title {
      padding-block-end: 2px;
    }

    /* The rating row carries a 20px floor so a card with no reviews still
       lines up with one that has them. On a phone that floor is taller than
       the stars need, and it is real height in every card whether or not it
       is used -- so it comes down with everything else.

       Deliberately NOT touching .item__meta: it has no margin of its own, so
       a reset there would be a no-op dressed up as a change. */
    .item--showcase .item__rating-row {
      min-block-size: 16px;
    }
  }

  .item--showcase .item__title-lead,
  .item--showcase .item__title-rest {
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
  }

  /* --- Style 11: cream showcase ------------------------------------------ */
  /* The showcase card's layout -- name, a hairline, then price with the heart
     at the far edge -- dressed in the cream panel's colours: cream ground,
     thin gold border, picture bleeding to the top edge. Offered by the
     collection grid, and forced onto every product card by the theme
     setting product_card_style (see product-tile.liquid).

     Colours are stated outright rather than read from --item-title and
     --item-meta: main-collection sets those to white and light gold for the
     green card, and both would vanish on cream. The title is medium (500).

     The card's own text colour is stated for the same reason. .item inherits
     its colour, and a section on a dark background hands down cream text --
     anything in the card without a colour of its own would then be cream on
     cream. The card is always cream, so its ink is always the dark green. */
  .item--cream-showcase {
    --item-title-size: 0.85rem;
    color: #0f2318;
    background-color: #fbf8f1;
    border: 1px solid #12281c;
    border-radius: var(--item-radius, 8px);
    overflow: hidden;
    transition: border-color 0.3s ease;
  }

  .item--cream-showcase:hover {
    border-color: #b48622;
  }

  .item--cream-showcase .item__badge {
    border-radius: 999px;
    background-color: rgb(0 0 0 / 0.65);
    font-family: var(--font-accent--family, inherit);
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: capitalize;
  }

  .item--cream-showcase .item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 14px;
    text-align: start;
  }

  .item--cream-showcase .item__ornament {
    display: none;
  }

  .item--cream-showcase .item__title {
    order: 1;
    padding-block-end: 6px;
    border-block-end: 1px solid rgb(15 35 24 / 0.12);
    inline-size: 100%;
    color: #0f2318;
  }

  .item--cream-showcase .item__title-lead,
  .item--cream-showcase .item__title-rest {
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
  }

  .item--cream-showcase .item__price-row {
    order: 2;
  }

  .item--cream-showcase .item__meta {
    color: #12281c;
  }

  .item--cream-showcase .item__meta-now {
    color: #12281c;
    font-weight: 400;
  }

  .item--cream-showcase .item__meta-was {
    color: #0f2318;
    opacity: 0.5;
  }

  .item--cream-showcase .item__rating-row {
    order: 3;
    min-block-size: 20px;
    justify-content: normal;
  }

  .item--cream-showcase .item__wishlist {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  @media screen and (max-width: 749px) {
    .item--cream-showcase {
      --item-control-inset: 5px;
      --item-control-size: 28px;
    }

    .item--cream-showcase .item__body {
      gap: 0;
      padding: 5px 8px 11px;
    }

    .item--cream-showcase .item__title {
      padding-block-end: 2px;
    }

    .item--cream-showcase .item__rating-row {
      min-block-size: 16px;
    }

    /* wishlist-icon draws the phone heart white, for the dark cards. One
       class deeper than its '.item .wishlist-icon__svg path' so this wins
       whichever stylesheet loads last -- and still one short of its
       [active] rule, so a saved heart stays red. */
    .item.item--cream-showcase .wishlist-icon__svg path {
      fill: #0f2318;
    }
  }

  /* The price row, made to fit a narrow card.
     ---------------------------------------------------------------------
     A struck price, the price and the heart share one line, and nothing in
     it could shrink -- so on a ~165px phone card a six-figure pair pushed the
     heart over the price or off the card. Now the heart never gives way, the
     price is the only thing that can, and of the two prices the struck one
     goes first: it ellipsises before the live price is touched. Set at every
     width, since a tablet's three- or four-up grid makes cards just as narrow. */
  .item--cream-showcase .item__price-row {
    gap: 6px;
    min-inline-size: 0;
  }

  .item--cream-showcase .item__meta {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
  }

  .item--cream-showcase .item__meta-was {
    flex: 0 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item--cream-showcase .item__meta-now {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .item--cream-showcase .item__wishlist {
    flex: 0 0 auto;
  }

  /* Tablets and narrow windows: a little smaller, so the guard above is
     rarely needed rather than routinely cutting the struck price. */
  @media screen and (max-width: 1023px) {
    .item--cream-showcase .item__meta {
      gap: 6px;
    }

    .item--cream-showcase .item__meta-was {
      font-size: 0.78rem;
    }

    .item--cream-showcase .item__meta-now {
      font-size: 0.9rem;
    }
  }

  @media screen and (max-width: 749px) {
    .item--cream-showcase .item__price-row {
      gap: 4px;
    }

    .item--cream-showcase .item__meta {
      gap: 4px;
    }

    .item--cream-showcase .item__meta-was {
      font-size: 0.72rem;
    }

    .item--cream-showcase .item__meta-now {
      font-size: 0.85rem;
    }

    /* 22px rather than wishlist-icon's 26px. Restated for the saved state,
       whose own size rule is more specific and would otherwise make the
       heart jump when tapped. */
    .item.item--cream-showcase .wishlist-icon__button,
    .item.item--cream-showcase wishlist-button[active] .wishlist-icon__button {
      width: 22px;
      height: 22px;
    }

    .item.item--cream-showcase .wishlist-icon__svg {
      width: 18px;
      height: 18px;
    }

    /* Tighter gutters on the grid that holds these cards -- 8px across,
       10px down, against the 12px product-grid caps both at. The grid takes
       its gap inline from section settings, so it is overridden through the
       variable it reads; :has() keeps it to grids of this style, which only
       the collection page offers, so search results keep theirs. */
    .product-grid:has(.item--cream-showcase) {
      --product-grid-gap: 6px;
    }
  }

  /* Desktop and tablet: tighter than the section's 24px / 16px. */
  @media screen and (min-width: 750px) {
    .product-grid:has(.item--cream-showcase) {
      --product-grid-gap: 12px;
    }
  }

  /* --- Style 9: watch -------------------------------------------------- */
  /* A video card: no panel, the picture carries it, a caption can float
     over the bottom of the video itself, and the call to action reads as
     plain text -- the play button already does the inviting. */
  .item--watch .item__media {
    border-radius: var(--item-radius, 8px);
  }

  .item--watch .item__body {
    align-items: center;
    gap: 0.3rem;
    padding-block-start: var(--item-pad-plain, 1rem);
    text-align: center;
  }

  .item--watch .item__ornament {
    display: none;
  }

  .item--watch .item__title {
    font-size: var(--item-title-size, 0.98rem);
  }

  .item--watch .item__cta {
    justify-content: center;
    letter-spacing: 0.14em;
  }

  /* The arrow belongs to the other styles' "view now" links -- here the
     play button already says "this opens something," so the label alone
     is enough. */
  .item--watch .item__cta svg {
    display: none;
  }

  /* The shared deferred-media play icon is just the triangle; this style
     is the one that wants it sitting on a dark disc, so the disc is added
     here rather than in the video component every style would inherit. */
  .item--watch .deferred-media__poster-icon {
    inline-size: 3rem;
    block-size: 3rem;
    background-color: rgb(0 0 0 / 0.45);
  }

  .item--watch .deferred-media__poster-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  /* --- Custom product cards --------------------------------------------- */
  /* Empty slots, ready for a design. Each one is already selectable in the
     theme editor, so a card can be switched to it and then dressed here --
     nothing else needs touching to add a look.

     A style inherits the shared skeleton and overrides only what it wants.
     Every part below is optional; leave a rule out and the default stands.
     The parts, in DOM order:

       .item__link          full-card overlay link (only on quick-add cards)
       .item__media         the picture's box -- clips its own overflow
       .item__media-inner   tight around the picture, owns the hover zoom
       .item__image         the picture
       .item__badge         the flag, absolute inside the media
       .item__quick-add     add-to-cart button, absolute against the card
       .item__body          the text column, a flex column
       .item__title         with .item__title-lead / .item__title-rest
       .item__rating-row    the stars and the heart share this row
       .item__rating        .item__star / .item__star--filled
       .item__rating-count  "5 reviews"
       .item__wishlist      the heart, pushed to the row's end by auto margin
       .item__ornament      rule-and-diamond, hidden by most styles
       .item__meta          .item__meta-was (struck) / .item__meta-now
       .item__cta           label and arrow

     Placement is not fixed: the card is a positioning context, so any part
     can be moved anywhere with position: absolute -- that is how a design
     that wants the rating top-left, or the heart back over the picture, is
     built. Flex `order` on a body part reorders it without touching markup.

     Section settings arrive as custom properties, so read these rather than
     hard-coding where a merchant is meant to have the say:
       --item-radius, --item-inset, --item-pad, --item-ratio
       --item-bg, --item-bg-dark, --item-media-bg
       --item-title, --item-title-size, --item-meta, --item-accent */

  /* --- Style 8: spacious premium ------------------------------------- */
  /* Full-bleed image (no inset), generous body padding, left aligned. A
     hairline under the subtitle separates the name from the rating rather
     than an ornament -- quieter than the other panel styles, meant to feel
     roomy rather than dense. */
  .item--custom-1 {
    background-color: var(--item-bg, #ffffff);
    border-radius: var(--item-radius, 14px);
    overflow: hidden;
  }

  .item--custom-1 .item__media {
    border-radius: 0;
  }

  /* A short gold mark centred on the image's own bottom edge, answering the
     hairline under the subtitle below -- the two together frame the title
     block between them. */
  .item--custom-1 .item__media::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 64px;
    block-size: 3px;
    background-color: var(--item-accent, #e0b74e);
  }

  .item--custom-1 .item__body {
    align-items: flex-start;
    gap: 0.5rem;
    padding: var(--item-pad, 1.75rem 1.5rem 2rem);
    text-align: start;
  }

  .item--custom-1 .item__title {
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
  }

  .item--custom-1 .item__ornament {
    display: none;
  }

  .item--custom-1 .item__text {
    margin-block-end: 0.6rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid rgb(0 0 0 / 0.08);
    color: var(--item-text, #6b6b62);
    font-size: 0.85rem;
    font-style: italic;
  }

  .item--custom-1 .item__rating-row {
    gap: 0.35rem;
  }

  .item--custom-1 .item__meta-now {
    color: var(--item-meta, #121212);
    font-weight: 400;
  }

  /* --- Style 9: soft shadow card --------------------------------------- */
  /* A quiet lift instead of a border: no outer overflow:hidden, so the
     shadow and the rounded corners never sit on the same clipped element --
     that combination is what corrupts the paint on hover elsewhere. Only
     the picture itself clips. A thin gold rule closes the card at the very
     bottom edge, echoing the accent used elsewhere without a full band. */
  .item--custom-2 {
    background-color: var(--item-bg, #ffffff);
    border-radius: var(--item-radius, 12px);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.1);
  }

  .item--custom-2 .item__media {
    border-radius: var(--item-radius, 12px) var(--item-radius, 12px) 0 0;
    overflow: hidden;
  }

  .item--custom-2 .item__body {
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.25rem 1.25rem 1.6rem;
    text-align: start;
  }

  .item--custom-2 .item__title {
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
  }

  .item--custom-2 .item__ornament {
    display: none;
  }

  .item--custom-2 .item__text {
    color: var(--item-text, #6b6b62);
    font-size: 0.85rem;
    font-style: italic;
  }

  .item--custom-2 .item__meta-now {
    color: var(--item-meta, #121212);
    font-weight: 400;
  }

  .item--custom-2::after {
    content: '';
    display: block;
    block-size: 3px;
    border-radius: 0 0 var(--item-radius, 12px) var(--item-radius, 12px);
    background-color: var(--item-accent, #e0b74e);
  }

  /* --- Style 10: bottom accent card ------------------------------------ */
  /* The dark band lives on the card itself, at the very foot, rather than
     as a border -- it stays a flat colour block, not a stroke. The cart
     button leaves its usual top corner and straddles the media/body seam
     instead, pulled up with a negative margin rather than measured
     positioning, so it works at any image ratio. */
  .item--custom-3 {
    background-color: var(--item-bg, #ffffff);
    border-radius: var(--item-radius, 12px);
    overflow: hidden;
  }

  .item--custom-3 .item__media {
    border-radius: 0;
  }

  .item--custom-3 .item__body {
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: start;
  }

  /* Stretched full width -- the heart is pushed to the row's end by its own
     auto margin, so if the row only sizes to its own content (no reviews,
     no count text) the row is narrower and the heart lands short of where
     it sits on a card that does have a count. Forcing the row's own width
     keeps the heart at the same edge on every card, review count or not. */
  .item--custom-3 .item__rating-row {
    inline-size: 100%;
  }

  .item--custom-3 .item__title {
    font-size: var(--item-title-size, 0.98rem);
    font-weight: 400;
  }

  .item--custom-3 .item__ornament {
    display: none;
  }

  .item--custom-3 .item__text {
    color: var(--item-text, #6b6b62);
    font-size: 0.85rem;
    font-style: italic;
  }

  .item--custom-3 .item__meta-now {
    color: var(--item-meta, #121212);
    font-weight: 400;
  }

  .item--custom-3::after {
    content: '';
    display: block;
    /* Pushes itself to the card's bottom edge, consuming any extra height a
       grid row's own stretch gives a shorter-content card, rather than
       leaving a gap below a strip that stopped right after the text. */
    margin-block-start: auto;
    inline-size: 100%;
    block-size: 12px;
    background-color: var(--item-bg-dark, #12281c);
  }

  /* --- Badge treatments ---------------------------------------------------
     A separate axis from the card style. The card style decides what the card
     looks like; a section decides what its badges look like, and picking a
     treatment here takes the badge over completely -- shape, colour, and which
     corner it sits in. Pick nothing and none of these classes are emitted, so
     the badge stays however its card style draws it.

     Two rules keep them predictable. They are written one class deeper than
     they need to be, and placed last in the file, so they outrank a card
     style's own badge override (.item--showcase .item__badge) rather than
     losing a specificity tie to it. And each one resets every property the
     base badge or a card style might have set -- radius, colour, spacing,
     face, casing -- so a treatment looks the same on card style 3 as it does
     on card style 8, which is the whole point of choosing it per section.

     Not applied to 'Sold out' or the automatic '25% OFF': product-tile marks
     those as system labels and leaves them on the plain badge. A ribbon is a
     promotion, and running out of stock is not one. */
  /* The house colours each treatment falls back to. A section that picks its
     own sets --badge-fill / --badge-ink / --badge-accent inline on the badge,
     which wins over these without any extra rules. */
  .item {
    --badge-green: #12281c;
    --badge-gold: #e0b74e;
    --badge-light: #fbf8f1;
  }

  /* Shared across all four: none of them are the base pill's small-caps
     tracked lettering, and two of them are laid out boxes rather than text
     with padding, which an inline span cannot be. */
  .item .item__badge--underline,
  .item .item__badge--corner-flag,
  .item .item__badge--ribbon,
  .item .item__badge--outline-pill {
    /* Restated rather than inherited from .item__badge. A treatment that falls
       back into normal flow does not just sit in the wrong place -- it stacks
       above the picture and pushes it down the card, which is a far worse
       failure than a badge in the wrong corner. Not worth leaving to the
       cascade for one line. */
    position: absolute;
    z-index: 1;
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  /* 1. Underline -- a plain block driven into the corner, over a gold rule.
     Flush rather than inset: it reads as part of the picture's own edge, and
     on a card style with a rounded media box the corner rounds with it. */
  .item .item__badge--underline {
    display: block;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 9px 18px 7px;
    border-radius: 0;
    border-block-end: 3px solid var(--badge-accent, var(--badge-gold));
    background-color: var(--badge-fill, var(--badge-green));
    color: var(--badge-ink, #fff);
    font-size: 0.82rem;
  }

  /* 2. Corner flag -- a triangle filling the corner, gold star over two short
     lines. The text box is deliberately narrower than the triangle: it is what
     forces the wrap the shape needs, and it keeps the second line clear of the
     hypotenuse. Roughly two short words is the honest capacity here. */
  .item .item__badge--corner-flag {
    display: block;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 92px;
    block-size: 92px;
    padding: 0;
    border-radius: 0;
    /* Cream flag with gold lettering. The text gold is a shade deeper than the
       house gold: #e0b74e on this cream is too faint to read at 0.72rem. */
    background-color: var(--badge-fill, #f3e9d2);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    color: var(--badge-ink, #b8892a);
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .item .item__badge--corner-flag .item__badge-text {
    display: block;
    inline-size: 50px;
    padding-block-start: 25px;
    padding-inline-start: 9px;
  }

  .item .item__badge--corner-flag::before {
    content: '';
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 9px;
    inline-size: 12px;
    block-size: 12px;
    background-color: var(--badge-accent, var(--badge-gold));
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  /* Phones: a two-up card is narrow enough that 92px takes a large bite of
     the picture. Everything inside steps down with it, so "Loved" still
     clears the hypotenuse. */
  @media screen and (max-width: 749px) {
    .item .item__badge--corner-flag {
      inline-size: 80px;
      block-size: 80px;
      font-size: 0.6rem;
    }

    .item .item__badge--corner-flag .item__badge-text {
      inline-size: 44px;
      padding-block-start: 21px;
      padding-inline-start: 7px;
    }

    .item .item__badge--corner-flag::before {
      inset-block-start: 7px;
      inset-inline-start: 7px;
      inline-size: 10px;
      block-size: 10px;
    }
  }

  /* 3. Ribbon -- hung from the top edge, inset so it reads as hanging on the
     picture rather than bound to its corner.

     The gold is a real outline rather than a bordered box floating inside:
     the element itself is gold, and a slightly smaller green shape is laid
     over it, so what shows around the edge is a hairline that follows the
     whole silhouette -- fork included. A bordered pseudo-element cannot do
     that, because the clip-path cuts its bottom edge off and the fork comes
     out bare. */
  .item .item__badge--ribbon {
    display: block;
    inset-block-start: 0;
    inset-inline-start: 22px;
    inline-size: 62px;
    /* The foot's notch is cut out of the box, so the bottom padding has to
       clear it or the last line of text sits in the fork. At 20% of the
       height that is ~19px here -- which is the whole of why this side is
       heavier than the top, not spare room. */
    min-block-size: 94px;
    padding: 12px 6px 20px;
    border-radius: 0;
    background-color: var(--badge-accent, var(--badge-gold));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    color: var(--badge-ink, #fff);
    font-size: 0.72rem;
    line-height: 1.25;
    text-align: center;
  }

  /* The green face. Inset by the hairline's own width on every side, and
     clipped to the same silhouette so the gold reads as an even outline
     rather than a shadow on three sides. */
  .item .item__badge--ribbon::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: 0;
    background-color: var(--badge-fill, var(--badge-green));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    pointer-events: none;
  }

  /* Above the face, or the label disappears under it. */
  .item .item__badge--ribbon .item__badge-text {
    position: relative;
    z-index: 1;
  }

  /* 4. Outline pill -- the only light treatment of the four, for card styles
     whose picture or panel is too pale for a solid green block to sit on. The
     gold dot carries the accent instead of the fill. */
  .item .item__badge--outline-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    padding: 6px 16px 6px 13px;
    border: 1.5px solid var(--badge-ink, var(--badge-green));
    border-radius: 999px;
    background-color: var(--badge-fill, var(--badge-light));
    color: var(--badge-ink, var(--badge-green));
    font-size: 0.8rem;
  }

  .item .item__badge--outline-pill::before {
    content: '';
    flex: 0 0 8px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background-color: var(--badge-accent, var(--badge-gold));
  }


  /* --- Link card ----------------------------------------------------------
     A tile that leads somewhere rather than showing something. It takes
     whatever style the row is set to, so it sits in the run of cards as one
     of them -- same shape, same radius, same frame -- and only what fills the
     picture box differs. That is the point of building it as an item rather
     than as its own component: change the row's style and this follows. */
  /* The plus stands where the picture stands, and nothing else is touched.
     ---------------------------------------------------------------------
     The card is an item, so it already has the row's shape, ratio, radius,
     frame, body padding and title treatment. Overriding any of that here
     would mean the link card only looked right on the style it was tuned
     against -- and the whole point is that changing the row's style carries
     it along.

     So the only rules below are about the substitution itself: centring the
     plus inside the picture box, and sizing it. Height, proportion and
     alignment stay the style's business. */
  /* The picture box is the card's own surface, not a placeholder.
     --item-media-bg is the 4% black that stands in for an image which is
     missing -- correct when one failed to load, wrong here, where the plus is
     the content and nothing is missing at all. Left grey it splits the card
     into two panels while the card beside it reads as one. */
  .item--link-card .item__media {
    background-color: transparent;
  }

  .item--link-card .item__media-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }

  .item--link-card .item__plus {
    display: block;
    inline-size: clamp(52px, 44%, 110px);
    color: rgb(0 0 0 / 0.22);
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .item--link-card .item__plus svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* The picture on every other card grows on hover; this grows and darkens
     its plus, so the row answers a pointer the same way wherever it lands. */
  .item--link-card:hover .item__plus {
    transform: scale(1.12);
    color: rgb(0 0 0 / 0.38);
  }

  /* The label is a label, not a product name.
     ---------------------------------------------------------------------
     Every card style splits a title into a lead word and a rest, and several
     treat the rest differently -- panel puts it on its own line in italic.
     That is right for "Turquoise Patina / Vase" and wrong for "View all
     collections", which came out over three lines in two faces. Put back
     together as one run of text, at the size a card title is rather than the
     size a product name is.

     The body centres too: with no price, no count and no second line, a
     left-aligned label sitting at the foot of an empty panel reads as
     something that failed to load. */
  /* The one content rule that stays. A card style splits a title into a lead
     word and a rest and may set the rest apart -- panel puts it on its own
     line in italic. That is a rule about a product name: "Turquoise Patina /
     Vase". A link's label is not a name, and "View / All Collections" over
     three lines in two faces is the style being applied to the wrong kind of
     text, not the style being expressed. Everything about how the title sits
     -- size, colour, alignment, spacing -- is still the style's. */
  .item--link-card .item__title-rest {
    display: inline;
    font-style: inherit;
  }

  /* Cards show the selling price only -- no struck-through MRP beside it.
     ---------------------------------------------------------------------
     Hidden rather than dropped from the markup, so deleting this one block
     brings it back. display: none takes the struck price out of the flex row
     entirely -- no width, no gap -- so the live price sits flush at the
     start at every breakpoint without restating the sizes above. !important
     so no card style, and no variant swap in item-variant-swap.js (which
     un-hides it when a variant has a compare price), can show it again.
     Product pages and the cart keep their own struck price; they do not use
     this element. */
  .item .item__meta-was {
    display: none !important;
  }

  /* The price, made the figure the eye lands on.
     ---------------------------------------------------------------------
     Regular weight at 0.85rem left it quieter than the title above it.
     Semibold and a step larger fixes that; tabular figures keep the digits
     one width, so prices line up across a row of cards.

     line-height is set outright so the bigger figure cannot make the row
     taller than the wishlist heart beside it (22px on phones) -- the cards
     keep their height and grid rows stay even.

     .item.item--cream-showcase outranks the sizes set per breakpoint above,
     so this wins whatever order those rules sit in. */
  .item.item--cream-showcase .item__meta-now {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }

  @media screen and (max-width: 1023px) {
    .item.item--cream-showcase .item__meta-now {
      font-size: 0.95rem;
    }
  }
/* END_SNIPPET:item-styles */

/* START_SNIPPET:jumbo-text (INDEX:236) */
.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:layout-styles (INDEX:238) */
.layout {
    display: grid;
    gap: var(--layout-gap, 32px);
  }

  /* A layout used as a tab panel is hidden with the [hidden] attribute, whose
     display:none comes from the browser's own stylesheet -- and any author
     rule outranks that, so the display:grid above was quietly un-hiding every
     panel and showing all the tabs at once. Restated here at a specificity
     that wins. */
  .layout[hidden] {
    display: none;
  }

  /* On a very wide screen, "four across the page width" makes items taller
     than the viewport. The row centres itself once it hits this, so the
     column count stops being the only thing deciding item size. */
  .layout--grid,
  .layout--mosaic,
  .layout--small-displayer {
    max-inline-size: var(--layout-max-width, 1600px);
    margin-inline: auto;
  }

  /* --- Layout 1: grid ------------------------------------------------- */
  /* --layout-item-width only actually sizes anything once .layout--scroll is
     also on -- it drives grid-auto-columns there. Wrapped in max() against
     --layout-min-item so that track and the card's own min-inline-size
     below agree on the same floor; without this, a min-width taller than
     the calculated track would make the card overflow its own cell. */
  .layout--grid {
    --layout-item-width: max(
      var(--layout-min-item, 0px),
      calc((100% - (var(--layout-columns, 3) - 1) * var(--layout-gap, 32px)) / var(--layout-columns, 3))
    );

    grid-template-columns: repeat(var(--layout-columns, 3), minmax(0, 1fr));
  }

  /* Once the row wraps, the column count is a target rather than a promise.
     minmax(0, 1fr) above has a floor of nothing, so a row told to fit six
     fits six at any width -- and past a point the cards are narrower than
     their own contents and the price gets cut off mid-figure rather than the
     row dropping to five. Nobody chose that; it is just what a zero floor
     does.

     Read the track as: aim for the width --layout-columns would give, but
     never go under --layout-min-item. On a wide screen the first term wins
     and the merchant gets exactly the count they asked for. As the row
     narrows the floor takes over and auto-fit drops a column instead of
     squeezing. min(..., 100%) is the guard for a viewport narrower than the
     floor itself, where a track wider than the container would overflow.

     Scrolling rows are left alone: they cannot wrap, so there is no column
     to drop, and the rule right below already gives them the same floor as
     a minimum width on the item itself. */
  .layout--grid:not(.layout--scroll),
  .layout--mosaic:not(.layout--scroll) {
    grid-template-columns: repeat(
      auto-fit,
      minmax(
        min(
          max(
            var(--layout-min-item, 0px),
            calc(
              (100% - (var(--layout-columns, 3) - 1) * var(--layout-gap, 32px)) / var(--layout-columns, 3)
            )
          ),
          100%
        ),
        1fr
      )
    );
  }

  /* Only when scrolling: a fixed column count can't wrap, so a min-width
     there would only overflow off the edge of the screen instead of
     resizing cleanly. The column count itself already drops at the mobile
     breakpoint below on a wrapping (non-scroll) row, which is what keeps a
     card from squeezing there instead.

     Capped at 100% -- the width of the cell the card sits in -- and that cap
     is not cosmetic. A scrolling row's cells come from grid-auto-columns,
     which on a phone is a share of the viewport (62% here, ~255px). The floor
     is a fixed pixel value, and once it was raised past that the cards were
     each wider than their own track: every card overlapped the next by the
     difference, cumulatively, and a row of them collapsed into a pile.

     A floor may make a card no smaller than the merchant asked for. It may
     not make it wider than the space it was given. */
  .layout--grid.layout--scroll > * {
    min-inline-size: min(var(--layout-min-item, 0px), 100%);
  }

  /* --- Layout 2: mosaic ----------------------------------------------- */
  /* Every second item drops, which is what stops an even grid reading as a
     spreadsheet. Purely vertical, so the columns still align. */
  .layout--mosaic {
    --layout-item-width: max(
      var(--layout-min-item, 0px),
      calc((100% - (var(--layout-columns, 3) - 1) * var(--layout-gap, 32px)) / var(--layout-columns, 3))
    );

    grid-template-columns: repeat(var(--layout-columns, 3), minmax(0, 1fr));
    align-items: start;
  }

  .layout--mosaic.layout--scroll > * {
    /* Capped to the cell, same reasoning as the grid rule above. */
    min-inline-size: min(var(--layout-min-item, 0px), 100%);
  }

  .layout--mosaic > *:nth-child(even) {
    margin-block-start: 14%;
  }

  /* --- Layout 3: small displayer --------------------------------------- */
  /* Many small items rather than a few large ones. The column count is not
     set here -- the row fits as many items of at least --layout-min-item as
     it can and shares the remainder between them. So a wide screen shows
     eight, a laptop five, a phone two, without anyone choosing a number.

     That is the whole difference from grid: grid is told how many columns,
     this is told how small an item may get and works the rest out. */
  .layout--small-displayer {
    /* The smallest an item may get, as a share of the screen rather than a
       fixed pixel width -- so the row keeps the same proportions on a laptop
       and a wide monitor instead of just fitting more items in. --layout-edge
       is what the page loses to margins, --layout-target is how many items
       that remainder is divided between.

       The gaps are taken out of the row before it is divided, so what the
       items share is the space actually left for them. That makes the two
       settings trade against each other directly: widen the gap and the cards
       give up exactly that width to it, with the same number still across.
       Dividing the whole row and letting the gaps push on top of it is what
       used to overflow the row and drop the count by one.

       --layout-min-item stays as a floor underneath it: once the screen is
       narrow enough that a share of it would be smaller than the merchant's
       own setting, the setting wins and the row fits fewer items instead of
       shrinking them past the point of being readable. */
    --layout-item-min: max(
      var(--layout-min-item, 180px),
      calc(
        (100vw - var(--layout-edge, 50px) - (var(--layout-target, 8) - 1) * var(--layout-gap, 32px)) /
          var(--layout-target, 8)
      )
    );

    --layout-item-width: var(--layout-item-min);

    /* auto-fit, not auto-fill: an empty track still claims its share of the
       1fr space, which is what leaves a gap the width of a missing item at
       the end of a row that is one item short of full. auto-fit collapses
       that empty track so the real items take the space instead. */
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-item-min), 1fr));
  }

  /* auto-fit's own failure mode: with very few items it hands each one the
     whole row, so a single card balloons to full width -- and on a tall
     image style, height balloons with it since the picture keeps its ratio.
     Capped close to the minimum: enough to close a one-item gap in a nearly
     full row, not enough to let a lone item stop looking like the others. */
  .layout--small-displayer > * {
    max-inline-size: calc(var(--layout-item-min) * 1.1);
    justify-self: start;
  }

  /* Scrolling does not change what this layout is for: small items. It used
     to size a scrolling item as a share of the row instead, which on a wide
     screen made every item large -- the one thing this layout exists not to
     do -- and left the leftover space stranded inside each cell. It keeps
     --layout-min-item here, the same width the wrapping version works from,
     so 'Smallest item' stays the setting that decides how big a card is in
     both. A row too short to overflow simply ends early, which is honest:
     there is nothing more to scroll to. */
  .layout--small-displayer.layout--scroll {
    --layout-item-width: var(--layout-item-min);
  }

  /* --- Layout 4: fixed width -------------------------------------------- */
  /* The card is a width, not a share of one. Every other layout here divides
     the row up and the item takes whatever falls out, so the same card is a
     different size in a wide section than a narrow one. This one is told the
     size and arranges the row around it.

     Three parts do the work:

     - Tracks are a literal width instead of 1fr, so nothing stretches.
     - space-between drives the first card against the left edge and the last
       against the right, and puts all the leftover into the gutters. The two
       outer margins are not set equal to each other -- they are both nothing,
       so they cannot drift apart, which is the point.
     - The row is capped at what --layout-columns cards plus their widest
       allowed gaps come to, and centred. Without that cap auto-fit would
       quietly fit eight across on a wide monitor when the section was set to
       six, since a fixed track has no upper bound to stop it.

     The gap property is still the floor: space-between only ever adds to it.
     So --layout-gap is the closest two cards may sit, --layout-max-gap the
     furthest, and past that the whole row centres rather than spreading. */
  .layout--fixed {
    grid-template-columns: repeat(auto-fit, var(--layout-item-fixed, 250px));
    justify-content: space-between;
    max-inline-size: calc(
      var(--layout-columns, 6) * var(--layout-item-fixed, 250px) + (var(--layout-columns, 6) - 1) *
        var(--layout-max-gap, 48px)
    );
    margin-inline: auto;
  }

  /* space-between with a single track leaves the card at the start of the
     row, stranded against the left edge with the whole width beside it. A
     lone item has no gap to distribute, so it should simply sit in the
     middle. Quantity query rather than a class, so it holds however the row
     came to have one item -- a filter, a short collection, a sold-out
     sibling dropped. */
  .layout--fixed:not(:has(> :nth-child(2))) {
    justify-content: center;
  }

  /* --- The scroll modifier --------------------------------------------- */
  /* Fixed width survives scrolling: the cell is the card's own width rather
     than a share of the viewport, and there is no leftover to distribute in a
     row that never runs out of room, so the row cap and space-between both
     stand down. */
  /* --- The scroll modifier --------------------------------------------- */
  /* Turns any of the above into a row that runs off the edge. It needs to know
     one thing only -- how wide an item is -- and each layout has already said
     so, which is why this is ten lines rather than a copy of each layout.

     max-inline-size is dropped: a scrolling row is meant to run past the point
     a wrapping one would stop. */
  .layout--scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--layout-item-width, 25%);
    max-inline-size: none;

    /* The row begins at its own left edge, stated rather than assumed.
       ------------------------------------------------------------------
       A scrolling row was starting its first card most of a card-width in
       from the left, so the tiles did not share a margin with anything above
       them. Nothing in the cascade accounted for it, which is why all four of
       these are set: the track alignment, the item alignment within a track,
       any inherited leading padding, and the scroll origin. Between them
       there is nowhere left for a leading gap to come from.

       margin-inline is reset for the same reason -- .layout--grid sets it to
       auto for centring a capped row, and while max-inline-size: none above
       should make that inert, "should" is what put the gap there. */
    justify-content: start;
    justify-items: stretch;
    padding-inline: 0;
    margin-inline: 0;
    scroll-padding-inline-start: 0;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    /* A little room under the cards, taken back by the margin.
       ------------------------------------------------------------------
       overflow-x: auto crops vertically too, and the cards end exactly on
       the row's bottom edge -- so their 1px bottom border is the last pixel
       shown. At a scaled zoom the crop rounds and the border and rounded
       corners vanish. 4px of padding keeps them clear of the edge; the
       negative margin returns it, so the section's spacing is unchanged. */
    padding-block-end: 4px;
    margin-block-end: -4px;
  }

  .layout--scroll::-webkit-scrollbar {
    display: none;
  }

  /* "> *" rather than a card class: this is what makes it portable. It knows
     it has children and nothing else about them. */
  .layout--fixed.layout--scroll {
    grid-auto-columns: var(--layout-item-fixed, 250px);
    justify-content: normal;
    max-inline-size: var(--layout-max-width, 1600px);
  }

  .layout--scroll > * {
    scroll-snap-align: start;
  }

  /* A drop inside a scrolling row is just a misaligned item. */
  .layout--mosaic.layout--scroll > *:nth-child(even) {
    margin-block-start: 0;
  }

  /* The cap exists to stop auto-fit handing a lone card the whole row. A
     scrolling row does not use auto-fit, and its cells are already exactly
     --layout-min-item wide, so the cap has nothing left to protect against
     and only strands the card at one end of its own cell. Released, so the
     card fills that cell and the gap is the only space between two. */
  .layout--small-displayer.layout--scroll > * {
    max-inline-size: none;
    justify-self: stretch;
  }

  @media screen and (max-width: 749px) {
    /* Wrapping rows only. A scrolling row had its template cleared on purpose
       -- every card lives in an implicit column sized by grid-auto-columns,
       all equal, laid from the left. Handing it an explicit two-column
       template here undoes that: the first cards sit in explicit tracks at
       one width and the rest spill into implicit tracks at another, and the
       row no longer begins where its section does.

       Same fault as the small-displayer one below, which was fixed on its own
       and left these two behind. */
    .layout--grid:not(.layout--scroll),
    .layout--mosaic:not(.layout--scroll) {
      /* The same floor desktop has, in mobile's own terms.
         ----------------------------------------------------------------
         This was repeat(var(--layout-mobile-columns), minmax(0, 1fr)) -- a
         fixed count with a floor of nothing, which is the exact fault the
         desktop rule was written to fix, left in place one breakpoint down.
         Two columns of a 412px screen is ~174px a card, and a card that needs
         230px does not resize: it overflows, and a clamped title turns the
         overflow into an ellipsis.

         Read as: aim for --layout-mobile-columns, but never go under
         --layout-min-item-mobile. Where the two conflict the row drops to
         one column, which is what should have happened all along. */
      grid-template-columns: repeat(
        auto-fit,
        minmax(
          min(
            max(
              var(--layout-min-item-mobile, 140px),
              calc(
                (100% - (var(--layout-mobile-columns, 1) - 1) * var(--layout-gap, 32px)) /
                  var(--layout-mobile-columns, 1)
              )
            ),
            100%
          ),
          1fr
        )
      );
    }

    /* A drop reads as a mistake when there is one item per row. */
    .layout--mosaic > *:nth-child(even) {
      margin-block-start: 0;
    }

    /* A fixed card width is a desktop idea: two 250px cards do not fit on a
       375px phone, and a row that cannot fit even one would push itself off
       the screen. The width is released here and the phone falls back to its
       own column count, the same as grid. */
    .layout--fixed {
      grid-template-columns: repeat(var(--layout-mobile-columns, 2), minmax(0, 1fr));
      justify-content: normal;
      max-inline-size: none;
    }

    /* A phone is too narrow for the desktop minimum, so it is relaxed rather
       than dropping to a single very wide item. */
    .layout--small-displayer {
      grid-template-columns: repeat(auto-fit, minmax(var(--layout-min-item-mobile, 140px), 1fr));
    }

    .layout--small-displayer > * {
      max-inline-size: calc(var(--layout-min-item-mobile, 140px) * 1.1);
    }

    /* Scrolling on a phone shows a slice of the next item as the cue that
       there is more. Small displayer keeps its own width instead -- it is
       small already, and 78% of a phone is not small. */
    .layout--scroll {
      grid-auto-columns: var(--layout-snap-width, 78%);
    }

    .layout--small-displayer.layout--scroll {
      /* No explicit template while scrolling, or the row ends up with two
         column definitions at once.

         .layout--scroll clears the template so every item lands in an implicit
         column sized by grid-auto-columns, all equal. The rule above then puts
         repeat(auto-fit, ...) back for the phone -- it is later in this file
         and ties on specificity, so it wins. The result is that the first few
         items sit in explicit tracks at the auto-fit width and everything past
         them spills into implicit tracks at the grid-auto-columns width, so one
         card in the row is a different size from its neighbours.

         Cleared again here, after that rule, so a scrolling row is implicit
         only and every cell is the same. */
      grid-template-columns: none;

      grid-auto-columns: calc(
        (100% - (var(--layout-mobile-columns, 2) - 1) * var(--layout-gap, 32px)) / var(--layout-mobile-columns, 2)
      );
    }
  }

  /* The wrapper the carousel arrows hang off. Always safe to use: a wrapping
     row never overflows, so the arrows stay hidden and cost nothing. */
  .layout-viewport {
    position: relative;
    display: block;
  }
/* END_SNIPPET:layout-styles */

/* START_SNIPPET:list-filter (INDEX:240) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .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: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .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:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .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:241) */
/* 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-foreground);
    --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-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-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: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .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--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-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:243) */
.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:ornament (INDEX:250) */
.ornament {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ornament-color, var(--sh-accent, #b48622));
  }

  .ornament__rule {
    display: block;
    inline-size: 46px;
    block-size: 1px;
    background-color: currentcolor;
    opacity: 0.55;
  }

  .ornament--short .ornament__rule {
    inline-size: 28px;
  }

  .ornament__diamond {
    flex: 0 0 auto;
  }
/* END_SNIPPET:ornament */

/* START_SNIPPET:overlay (INDEX:252) */
.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) 0%, var(--overlay-color) var(--overlay-hold-extent, 0%), var(--overlay-color--end) var(--overlay-fade-extent, 100%));
  }

  .overlay--custom-gradient {
    background: var(--overlay-custom-gradient);
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:253) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:254) */
.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:payment-terms-styles (INDEX:255) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pdp-styles (INDEX:260) */
/* The theme's colour palette is not configured, so these carry the brand
     themselves -- the same approach 'item-styles.liquid' takes for the cards.
     Declared as custom properties so a section can override any of them, and
     so they all move together once a palette does exist. */
  .pdp-eyebrow,
  .pdp-family,
  .pdp-viewers,
  .pdp-shipping,
  .pdp-price,
  .pdp-facts,
  .pdp-specs-wrap,
  .pdp-faq,
  .pdp-assurance {
    --pdp-ink: #12281c;
    --pdp-gold: #e0b74e;
    --pdp-gold-deep: #8a6712;
    /* Gold at low alpha rather than a lighter gold: it tints whatever sits
       behind it, so the hairline stays equally faint if the section
       background changes. */
    --pdp-gold-hairline: rgb(224 183 78 / 0.38);
    --pdp-surface: #ffffff;
    --pdp-line: #e3ded1;
    --pdp-muted: #6a7069;
    --pdp-positive: #2f5a34;
    --pdp-positive-soft: #eef2ea;

    color: var(--pdp-ink);
  }

  /* ---- narrow details column ----------------------------------------- */
  /* Keyed to the column, not the window. On a foldable the window is 853px
     and this column is ~310px: a viewport media query cannot tell those apart,
     which is why the buy row overflowed by 149px at a width the page thought
     was comfortably desktop.

     The row needed 434px because both buttons carry 'min-width: fit-content'
     and the stepper does not shrink at all. Letting the buttons shrink and
     trimming the type roughly a third is what buys the image its extra
     width -- the reduction is what makes the 60/40 split survivable. */
  /* Selectors are doubled throughout this block. A container query adds no
     specificity of its own, and these rules sit above the base .pdp-* rules in
     this same file -- without the doubling the later base rule simply wins and
     nothing here applies. */
  @container pdp-details (max-width: 430px) {
    .product-form-buttons.product-form-buttons
      > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
      min-width: 0;
    }

    .product-form-buttons.product-form-buttons button {
      padding-inline: var(--padding-xs, 8px);
      font-size: 0.78rem;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .quantity-selector.quantity-selector {
      --quantity-selector-width: 96px;
    }

    /* Buy it now takes its own row. With all three on one line the column's
       285px left each button 82px and "ADD TO CART" ran past its own edge.
       Given a row to itself, Add to cart keeps ~175px beside the stepper and
       both labels fit. The class is .accelerated-checkout-block -- the element
       Shopify actually renders, not the .accelerated-checkout id. */
    .product-form-buttons.product-form-buttons .accelerated-checkout-block {
      flex: 1 1 100%;
      min-width: 0;
    }

    /* Three option pills to a row instead of two-then-one. The stock rule is
       'minmax(104px, max-content)', which fits two here and orphans "Large" on
       its own line. A 30% floor caps the row at three and keeps them equal. */
    /* Tripled, not doubled. The rule this has to beat is
       'body:has(...) .variant-option--equal-width-buttons', which scores
       (0,2,2); a doubled class is only (0,2,0) and loses. Three classes take
       the class count to 3 and win outright. */
    .variant-option--buttons.variant-option--buttons.variant-option--buttons,
    .variant-option--equal-width-buttons.variant-option--equal-width-buttons.variant-option--equal-width-buttons {
      --variant-min-width: 30%;
      grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    }

    /* Variant swatch cards and option pills, down about a third. */
    .variant-option__button-label.variant-option__button-label,
    .variant-option--buttons label,
    .variant-option--equal-width-buttons label {
      font-size: 0.78rem;
      padding-inline: var(--padding-xs, 8px);
    }

    .pdp-facts.pdp-facts,
    .pdp-trust.pdp-trust,
    .pdp-specs.pdp-specs {
      font-size: 0.8rem;
    }
  }

  /* ---- the zoom dialog ------------------------------------------------ */
  /* It stacks every image at full column width in a scrolling column: at
     1600x1000 each one renders 1600x1600 -- 600px taller than the screen --
     and the dialog's scroll height comes to 31,800px. So it opens showing the
     middle of an image with no way to see the whole thing but zooming the
     browser out.

     Both axes are pinned rather than just the height. Height alone is right on
     a landscape screen and wrong on a phone, where a square image constrained
     to 844px of height would be 844px wide inside a 390px viewport -- a
     horizontal crop traded for a vertical one. With both capped and
     object-fit: contain the image fits whichever dimension binds, and the
     other one follows. No device test needed.

     100dvh, not 100vh: on mobile browsers the URL bar makes vh taller than
     what is actually on screen. */
  .dialog-zoomed-gallery .product-media-container {
    max-block-size: 100dvh;
    aspect-ratio: auto;
  }

  .dialog-zoomed-gallery .product-media-container :is(img, video) {
    max-inline-size: 100%;
    max-block-size: 100dvh;
    inline-size: auto;
    block-size: auto;
    margin-inline: auto;
    object-fit: contain;
  }

  /* ---- the picture never taller than the screen ---------------------- */
  /* Stacked, the gallery is as tall as the page is wide, because the images are
     square. On a short window that is taller than what is left after the header
     and the sticky buy bar, and the bottom of the picture goes under the bar --
     999x800 loses 244px of it, 900x700 loses 245px.

     Two parts, and the second matters as much as the first. Capping the height
     alone would crop, because the image is object-fit: cover -- the frame gets
     shorter and the picture is trimmed to fill it, which is the same cut by
     another route. With 'contain' the picture scales down inside the frame
     instead, centred, and the space it gives up shows as margin at the sides.
     Nothing is lost; the whole product stays visible.

     Chrome is a variable so it can be tuned without touching the calc: header,
     sticky buy bar and the breadcrumb come to ~160px in this band. */
  /* Phones: the photo's height is capped at a share of the visible screen,
     set ONCE as --pdp-pic-height below -- the margins, the overlays and the
     text edges all follow it, so that is the only value to change. svh, not vh: on phones vh
     is measured with the browser toolbars hidden, so it overstates what is
     actually on screen. The image is square and object-fit: contain (below),
     so capping the height narrows it to match and it sits centred. The
     doubled class outranks the 999px rule below regardless of order. */
  @media screen and (max-width: 749px) {
    /* The one number to tune: the gallery's height -- picture and thumbnail
       strip together -- as a share of the visible screen. The picture is
       square, so it is this tall and this wide unless the width left beside
       the strip is narrower. */
    /* On the page, not the section, so the breadcrumb above the product can
       read the same margin. */
    body:has(.product-information__grid) {
      /* The one number to tune: the photo's height as a share of the
         visible screen. The photo is square, so this also sets its width;
         what is left of the screen width is split as equal margins either
         side, and every section below takes the same margins. */
      --pdp-pic-height: 48svh;
      /* The margin either side of the photo -- never under 8px, so text
         below never touches the screen edge on a wide-and-short phone. */
      --pdp-pic-gutter: max(8px, calc((100vw - var(--pdp-pic-height)) / 2));
    }

    /* The breadcrumb starts where the photo and the text below start. */
    body:has(.product-information__grid) .breadcrumb.section--page-width {
      grid-template-columns: var(--pdp-pic-gutter) minmax(0, 1fr) var(--pdp-pic-gutter);
    }

    /* Everything in the details column shares the photo's edges. The column
       already sits 16px in from the page margin, so only the difference. */
    .product-information .product-details.product-details.product-details {
      padding-inline: max(0px, calc(var(--pdp-pic-gutter) - 16px));
    }

    /* The title group on phones, halved: title to the reviews row 8px -> 4px,
       and the row to the price box 16px -> 8px. The second is the column's
       own gap, so it is taken back on this group alone rather than tightening
       the gap between every block down the page. */
    .product-information .product-details .group-block-content:has(> .pdp-title, > a > .pdp-title, > .pdp-title-row) {
      row-gap: 4px;
    }

    .product-information .product-details .group-block:has(> .group-block-content > .pdp-title, > .group-block-content > a > .pdp-title, > .group-block-content > .pdp-title-row) {
      margin-block-end: -8px;
    }

    .product-information__media .product-media-container.product-media-container {
      max-block-size: var(--pdp-pic-height);
    }

    /* No thumbnails on phones -- Horizon hides the strip below 750px on its
       own (mobile:hidden); nothing here turns it back on. Swipe and the
       arrows move through the pictures, so the arrows come back here. */
    .product-information .product-information__media .media-gallery--carousel slideshow-arrows {
      display: flex;
      padding-inline: calc(var(--pdp-pic-gutter) + 10px);
    }

    /* Smaller, bright white rounds with a caret (the gallery's icon style is
       set to chevron in the template). The doubled class clears the
       44px cream rule under 'gallery arrows'. */
    .product-information .media-gallery--carousel slideshow-arrows .slideshow-control.slideshow-control {
      /* Horizon sets a 44px minimum on buttons; lifted for this control. */
      min-inline-size: 0;
      min-block-size: 0;
      inline-size: 32px;
      block-size: 32px;
      background: #ffffff;
      box-shadow: 0 1px 6px rgb(0 0 0 / 0.18);
    }

    .product-information .media-gallery--carousel slideshow-arrows .slideshow-control svg {
      inline-size: 14px;
      block-size: 14px;
    }

    /* Overlays sit on the photo, not in the margin beside it: each is inset
       by the margin plus 10px, so they track the photo's edge. */
    .product-information__media .pdp-badge.pdp-badge {
      inset-inline-start: calc(var(--pdp-pic-gutter) + 10px);
      inset-block-start: 10px;
    }

    .product-information .pdp-share.pdp-share {
      inset-inline-end: calc(var(--pdp-pic-gutter) + 10px);
      inset-block-start: 10px;
    }

    .product-information__media .ar-badge-wrapper.ar-badge-wrapper.ar-badge-wrapper {
      inset-inline-end: calc(var(--pdp-pic-gutter) + 10px);
    }
  }

  @media screen and (max-width: 999px) {
    .product-information__media .product-media-container {
      max-block-size: calc(100dvh - var(--pdp-media-chrome, 170px));
    }

    /* The rule to beat is

         .media-fit-cover :is(img, video, iframe, .deferred-media__poster-image)

       which scores (0,2,0), not the (0,1,1) it looks like: :is() takes the
       specificity of its MOST specific argument, and one of them is a class.
       A two-class descendant rule ties it and loses on source order, so the
       selector below carries four classes.

       Note the class is 'media-fit-cover', not 'media-fit'. */
    .product-information__media
      .product-media-container.media-fit-cover
      .product-media__image {
      object-fit: contain;
    }
  }

  /* ---- gallery controls on mobile ------------------------------------ */
  /* The dots and the AR button share the strip at the foot of the picture, so
     the button lands on top of them -- 21 dots at y=458 under a button at
     437-481. The dots go, the arrows come back (they were mobile:hidden), and
     the AR pill gives way to the card's round icon, gold like the share button,
     in the bottom-right corner. Desktop keeps the pill. */
  .product-information__media .ar-badge-wrapper {
    display: none;
  }

  /* Keyed to 999px, matching the stacking threshold above rather than the
     theme's 749px phone breakpoint. Between the two the page is already one
     column and reads as a phone layout on a wide screen -- a foldable opened
     flat -- so it wants the same treatment. One rule, one boundary. */
  @media screen and (max-width: 999px) {
    {%- comment -%}
      Scoped to .product-information, and the scope is load-bearing rather than
      tidiness.

      Both of these turn OFF a rule that ar-launch.liquid and the gallery
      declare at 0-1-0. A media query adds no specificity, so an unscoped
      .ar-launch-overlay here tied with the base rule and won only by being
      later in the file. That held until the recommendations section loads on
      scroll: morphSection injects that section's stylesheet at the end of the
      document, item.liquid renders ar-launch for the cards, so the base
      display:flex arrived again AFTER this file and took the tie. The overlay
      button came back over the picture while the inline one below stayed --
      two "View in your space" buttons, appearing only once you had scrolled
      down and back, and never on a fresh load.

      .product-information is the PDP wrapper the gallery sits inside, so this
      reads 0-2-0 and outranks the base rule no matter which sheet lands last.
      The dots rule was not visibly broken, but it is the identical shape and
      one injected stylesheet away from the same fault.
    {%- endcomment -%}
    .product-information .media-gallery__mobile-controls {
      display: none;
    }

    .product-information .ar-launch-overlay {
      display: none;
    }

    /* Same size, inset and gold as .pdp-share, so the two controls read as a
       pair down the right edge of the picture. */
    .product-information__media .ar-badge-wrapper {
      display: block;
      inset-block-end: 16px;
      inset-inline-end: 16px;
    }

    .product-information__media .ar-icon-badge {
      inline-size: 40px;
      block-size: 40px;
      background: #e0b74e;
      box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
    }
  }

  /* ---- product title ------------------------------------------------ */
  /* The title inherits its size from the block's type preset, which is a fixed
     rem value and so held at 32px from a phone to a 4K monitor. Only the <h1>
     is targeted: the same block renders product cards, where the title is a
     <p> and must keep the card's own sizing.

     Doubled class to clear base.css's '.text-block.h3 :is(h1..h6)' without
     depending on which stylesheet the theme happens to emit first. */
  /* Air between the picture and the title once the page is one column
     (12px above and below the name). The two columns stack below 1000px and the title block then sits
     flush under the gallery. Doubled class to outrank .spacing-style, which
     sets margin-block from the block's own settings. */
  @media screen and (max-width: 999px) {
    /* The space above and below goes on the name + heart row as a whole, so
       the heart (taller than one line of text) keeps the same air to the
       photo as the name does. 8px + the block's own 2px top padding = 10px
       above; 2px + the title group's 4px row gap = 6px below. */
    .pdp-title-row {
      margin-block: 8px 2px;
    }

    .pdp-title-row .pdp-title.pdp-title {
      margin-block: 0;
    }

    .pdp-title.pdp-title {
      margin-block: 8px 2px;
    }
  }

  .text-block.text-block.pdp-title > h1 {
    font-size: clamp(1.5rem, 6.1cqi, 2rem);
    line-height: 1.12;
  }

  /* ---- price line (under the name, no box) -------------------------- */
  /* Price, the price it was, and the percentage off, on one baseline-aligned
     row. Reuses the box's class names so pdp-price-live.js drives both, and
     so every rule here is scoped to .pdp-price-line to keep the two apart. */
  .pdp-price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    color: #12281c;
  }

  .pdp-price-line [hidden] {
    display: none;
  }

  .pdp-price-line .pdp-price__now {
    font-size: clamp(1.35rem, 6cqi, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #12281c;
  }

  .pdp-price-line .pdp-price__was {
    font-size: 0.95rem;
    color: #6a7069;
  }

  /* The soft red pill the cart uses for its "% OFF", so the two agree. */
  .pdp-price-line .pdp-price__chip {
    padding: 4px 10px;
    border-radius: 6px;
    background: rgb(157 47 47 / 0.09);
    color: #9d2f2f;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* ---- coupon card -------------------------------------------------- */
  /* One centred line on a warm cream panel with a sand border: "Use code
     WOW10 to get it for ₹10,206", the code and price in copper. The code is
     a button -- tapping it copies, and "Copied" briefly replaces it. The tax
     and shipping note follows the panel. */
  .pdp-coupon {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pdp-coupon [hidden] {
    display: none;
  }

  .pdp-coupon__live {
    display: block;
  }

  /* The line and "View all coupons" share one row where they fit, pushed
     to opposite ends; on a screen too narrow for both, the link wraps under. */
  .pdp-coupon__card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    padding: 14px 16px;
    border: 1px solid #e6cfa7;
    border-radius: 8px;
    background: #fcf4ec;
    text-align: center;
  }

  .pdp-coupon__line {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1f1a14;
  }

  .pdp-coupon__code,
  .pdp-coupon__price {
    font-weight: 700;
    color: #b07d45;
  }

  .pdp-coupon__price {
    font-size: 1.05em;
    white-space: nowrap;
  }

  .pdp-coupon__code {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .pdp-coupon__code:focus-visible {
    outline: 2px solid #b07d45;
    outline-offset: 2px;
  }

  .pdp-coupon__copied {
    display: none;
  }

  .pdp-coupon__code.pdp-offers__code--done [data-coupon-code] {
    display: none;
  }

  .pdp-coupon__code.pdp-offers__code--done .pdp-coupon__copied {
    display: inline;
  }

  .pdp-coupon__all {
    padding: 0;
    border: 0;
    background: none;
    color: #8a6712;
    font: inherit;
    font-size: 0.7rem;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .pdp-coupon .pdp-coupon__line {
      font-size: min(3.4vw, 0.95rem);
    }

    .pdp-coupon .pdp-coupon__card {
      padding: 12px 8px;
    }
  }

  /* ---- product info tabs -------------------------------------------- */
  /* A row of tab labels with a gold underline on the open one, and the
     panel beneath. The row scrolls sideways on a phone if the four labels
     are wider than the screen. */
  .pdp-tabs {
    display: block;
    color: #12281c;
  }

  .pdp-tabs__list {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    border-block-end: 1px solid #e3ded1;
    scrollbar-width: none;
  }

  .pdp-tabs__list::-webkit-scrollbar {
    display: none;
  }

  .pdp-tabs__tab {
    flex: none;
    padding: 10px 0 9px;
    border: 0;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    background: none;
    color: #6a7069;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
  }

  .pdp-tabs__tab[aria-selected='true'] {
    border-block-end-color: #b8902e;
    color: #12281c;
    font-weight: 600;
  }

  .pdp-tabs__tab:focus-visible {
    outline: 2px solid #12281c;
    outline-offset: 2px;
  }

  /* Capped in height and scrolled inside, so a 2,500-character description
     does not push everything below it off the page. Every panel shares the
     cap; short ones (specs, shipping) never reach it. */
  .pdp-tabs__panel {
    /* Tall enough for all six specification rows (6 x ~52px + padding). */
    --pdp-tab-max: 360px;

    max-block-size: var(--pdp-tab-max);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 14px 4px;
    padding-inline-end: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: #d8cfb8 transparent;
  }

  .pdp-tabs__panel[hidden] {
    display: none;
  }

  .pdp-tabs__panel > :first-child,
  .pdp-tabs__body > :first-child,
  .pdp-tabs__panel p:first-child {
    margin-block-start: 0;
  }

  /* Only ever shown on a phone, by assets/pdp-tabs.js. */
  .pdp-tabs__more {
    display: none;
  }

  /* The Specifications block brings its own heading; the tab already says
     it. */
  .pdp-tabs__panel--specs .pdp-specs__heading {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .pdp-tabs__list {
      gap: 18px;
    }

    .pdp-tabs__tab {
      font-size: 0.85rem;
    }

    /* No scroll box inside the page on a phone.
       ------------------------------------------------------------------
       A capped, scrolling panel caught the swipe the moment a finger landed
       on it -- the page stalled while the description scrolled -- and
       overscroll-behavior: contain then refused to hand the swipe back when
       the panel ran out, so the page stayed stuck until the next touch
       landed somewhere else. Here the panel is as tall as its content and
       the page is the only thing that scrolls. Long text is cut and given a
       "Read more" instead (below). */
    .pdp-tabs__panel {
      max-block-size: none;
      overflow: visible;
      overscroll-behavior: auto;
      padding-inline-end: 0;
    }

    /* Long text: ~8 lines (8 x 1.6 line-height), fading out into the
       button. Short panels never get .is-collapsible and show in full. */
    .pdp-tabs__panel.is-collapsible:not(.is-expanded) .pdp-tabs__body {
      max-block-size: 12.8em;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
      mask-image: linear-gradient(to bottom, #000 65%, transparent);
    }

    .pdp-tabs__more:not([hidden]) {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-block-size: 44px;
      padding: 0;
      border: 0;
      background: none;
      color: #9a7a2e;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      cursor: pointer;
    }

    .pdp-tabs__more svg {
      transition: rotate 0.2s ease;
    }

    .pdp-tabs__more[aria-expanded='true'] svg {
      rotate: 180deg;
    }

    .pdp-tabs__more:focus-visible {
      outline: 2px solid #12281c;
      outline-offset: 2px;
    }

    /* Clear of the sticky header when "Read less" scrolls back up. */
    .pdp-tabs {
      scroll-margin-block-start: calc(var(--header-height, 54px) + 12px);
    }
  }

  /* ---- product name + wishlist heart ---------------------------------- */
  /* The name takes the row, the heart sits at its end, centred against it. The heart's white round would vanish on the white page, so here
     it gets a hairline ring. */
  .pdp-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    inline-size: 100%;
  }

  .pdp-title-row > .contents,
  .pdp-title-row > .pdp-title-more,
  .pdp-title-row .pdp-title {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /* ---- long name: two lines and "… more" on phones ------------------- */
  /* The cut only applies once pdp-title-more.js has marked the element
     ready, so with no script the name shows in full. The H1 keeps the whole
     name either way; line-clamp hides it visually and nothing else. */
  .pdp-title-more {
    display: block;
    position: relative;
  }

  .pdp-title-more__toggle[hidden] {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .pdp-title-more[data-ready]:not([data-expanded]) .pdp-title > h1 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }

    /* Collapsed, the control sits over the end of the second line, on a
       fade from the page colour so the cut word does not show through.
       Same size and line-height as the name, so "…" lines up with it. */
    .pdp-title-more__toggle {
      display: inline-flex;
      align-items: baseline;
      gap: 0.3em;
      margin: 0;
      padding: 0 0 0 1.6em;
      border: 0;
      cursor: pointer;
      font-family: inherit;
      font-size: min(4.9vw, 2rem);
      line-height: 1.12;
      color: #12281c;
      background: linear-gradient(to right, transparent, var(--color-background, #fff) 1.4em);
    }

    .pdp-title-more:not([data-expanded]) .pdp-title-more__toggle {
      position: absolute;
      inset-block-end: 0;
      inset-inline-end: 0;
    }

    .pdp-title-more__label {
      font-size: 0.78em;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 0.18em;
      /* The gold every other "Read more" on the site uses. */
      color: #b48622;
    }

    /* Open, "less" drops below the full name. */
    .pdp-title-more[data-expanded] .pdp-title-more__toggle {
      padding: 4px 0 0;
      background: none;
    }

    .pdp-title-more[data-expanded] .pdp-title-more__ellipsis {
      display: none;
    }
  }

  /* Desktop never cuts the name, so the control never shows -- the script
     hides it too; this is the backstop. */
  @media screen and (min-width: 750px) {
    .pdp-title-more__toggle {
      display: none;
    }
  }

  .pdp-title-row__wishlist {
    flex: none;
  }

  .pdp-title-row__wishlist .wishlist-icon__button {
    box-shadow: inset 0 0 0 1px rgb(18 40 28 / 0.18);
  }

  @media screen and (max-width: 749px) {
    .pdp-title-row__wishlist .wishlist-icon__button {
      width: 28px;
      height: 28px;
    }

    .pdp-title-row__wishlist .wishlist-icon__svg {
      width: 14px;
      height: 14px;
    }
  }

  /* ---- eyebrow ------------------------------------------------------ */
  .pdp-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pdp-gold-deep, #8a6712);
  }

  /* ---- rating ---------------------------------------------------------- */
  /* The count is copy, not part of the mark. Upstream colours it with the
     star fill, so "3 reviews" comes out the same pale gold as the stars and
     reads as decoration beside the title -- the same reason the empty state's
     label was darkened.

     Product page only: the cards on the home page show their count in gold
     against a dark tile, where it holds up. */
  body:has(.product-information__grid:not(featured-product-information .product-information__grid))
    .rating-wrapper .rating-count {
    color: var(--color-foreground);
  }

  /* The rating shares a row with the stock status (a space-between group in
     the template). On phones the review block's width comes from
     --size-style-width-mobile, which it has no setting for, so it inherits
     the group's 100% and pushes the stock status onto a line of its own. */
  .product-details .rating-wrapper {
    --size-style-width-mobile: fit-content;
  }

  /* ---- price -------------------------------------------------------- */
  .pdp-price {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs, 10px);
  }

  .pdp-price--boxed {
    padding: var(--padding-md, 22px) var(--padding-lg, 24px);
    background: var(--pdp-surface);
    border: 1px solid var(--pdp-line);
  }

  .pdp-price__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Fluid rather than fixed. The old value jumped from 2.2rem to 2.9rem at the
     749px breakpoint and then never moved again, so a foldable opened flat --
     around 1100 CSS px, physically a small screen -- got the full desktop
     46px. Interpolating on vw means the size follows the width it is actually
     read at instead of which side of one breakpoint it falls on.

     Floor equals the mobile size, so the 749px boundary is now seamless; the
     ceiling is the previous desktop size, so wide screens are unchanged. */
  .pdp-price__now {
    font-size: var(--pdp-price-size, clamp(1.9rem, 8.8cqi, 2.9rem));
    font-weight: 500;
    font-family: var(--font-heading--family, inherit);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--pdp-ink);
  }

  /* Muted, but not so muted it fails contrast -- this is a number a shopper
     is meant to read and compare, not decoration. */
  .pdp-price__was {
    font-size: 1.25rem;
    color: var(--pdp-muted);
  }

  .pdp-price__chip {
    padding: 5px 11px;
    background: var(--pdp-chip-bg, var(--pdp-ink));
    color: var(--pdp-chip-text, var(--pdp-gold));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* "Get it at ₹14,364 using WOW10", under the price row. The code gets the
     same dashed box the offer codes use, so it reads as something to enter at
     checkout rather than as part of the sentence. */
  .pdp-price__coupon {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    /* Fallbacks because the cart summary uses this line too, outside the
       .pdp-price box that defines the palette. */
    color: var(--pdp-ink, #12281c);
  }

  .pdp-price__coupon strong {
    font-weight: 600;
  }

  .pdp-price__coupon-code {
    display: inline-block;
    padding: 1px 7px;
    border: 1px dashed rgb(18 40 28 / 0.45);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .pdp-price__coupon-all {
    margin-inline-start: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pdp-gold-deep, #8a6712);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
  }

  .pdp-price__coupon-all:focus-visible {
    outline: 2px solid var(--pdp-ink, #12281c);
    outline-offset: 2px;
  }

  /* ---- all coupons ---------------------------------------------------- */
  /* A centred panel on desktop, a sheet from the bottom on phones. Padding
     lives on the children, not the <dialog>: the script treats a click on the
     dialog element itself as a click on the backdrop, so the dialog must have
     no area of its own. Display is only set while open -- the UA hides a
     closed dialog, and any display rule on the closed state would show it. */
  .pdp-coupons {
    inline-size: min(440px, calc(100vw - 32px));
    max-block-size: min(80dvh, 640px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #12281c;
    box-shadow: 0 18px 50px rgb(0 0 0 / 0.25);
  }

  .pdp-coupons[open] {
    display: flex;
    flex-direction: column;
  }

  .pdp-coupons::backdrop {
    background: rgb(18 40 28 / 0.45);
  }

  .pdp-coupons__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px 20px;
    border-block-end: 1px solid #e3ded1;
  }

  .pdp-coupons__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .pdp-coupons__close {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .pdp-coupons__close svg {
    inline-size: 20px;
    block-size: 20px;
  }

  .pdp-coupons__close:focus-visible {
    outline: 2px solid #12281c;
    outline-offset: 2px;
  }

  .pdp-coupons__list {
    overflow-y: auto;
    padding: 4px 20px 20px;
  }

  .pdp-coupons__item {
    padding-block: 14px;
  }

  .pdp-coupons__item + .pdp-coupons__item {
    border-block-start: 1px dashed #e3ded1;
  }

  @media screen and (max-width: 749px) {
    .pdp-coupons {
      inline-size: 100%;
      max-inline-size: 100%;
      margin: auto 0 0;
      border-radius: 16px 16px 0 0;
    }

    .pdp-coupons__list {
      padding-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Desktop keeps the separate saving line, so this part of the chip is off. */
  .pdp-price__chip-saving {
    display: none;
  }

  /* Separated from the saving line by a rule rather than by space: the card
     now holds two different kinds of statement -- what you pay, and what the
     price does and does not include -- and a line says that in less height
     than a gap does. Bled to the card's edges so it reads as a division of
     the box, not a border floating inside it. */
  .pdp-price__note {
    margin-block-start: var(--padding-sm, 14px);
    padding-block-start: 10px;
    border-block-start: 1px solid var(--pdp-line);
  }

  /* Beats the display below. These elements are toggled rather than added and
     removed, and `hidden` is only a default of display:none -- any rule that
     states a display wins over it. */
  .pdp-price [hidden] {
    display: none;
  }

  .pdp-price__saving {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--pdp-positive);
  }

  .pdp-price__saving strong {
    font-weight: 600;
  }

  .pdp-price__saving .svg-wrapper {
    display: flex;
    inline-size: 16px;
    block-size: 16px;
    flex-shrink: 0;
  }

  .pdp-price__saving svg {
    inline-size: 100%;
    block-size: 100%;
  }

  /* ---- key facts ---------------------------------------------------- */
  /* auto-fit rather than a fixed four: a product carrying only two facts
     should fill the row with two, not leave two empty cells. */
  /* Hairline gold, drawn as real borders. This used to fake its dividers with
     a 1px grid gap over a filled container -- which meant the "transparent"
     cells were showing that fill, and the whole strip read as a beige block. */
  .pdp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    background: transparent;
    border: 1px solid var(--pdp-gold-hairline);
    border-radius: 14px;
  }

  /* Tightened: the cells were 68px tall with 12px of padding on top of that,
     so a two-row strip spent ~40px of its height on air. The label and value
     are two short lines -- they do not need a 68px box to sit in. */
  .pdp-facts__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 14px;
    background: transparent;
    min-block-size: 52px;
    justify-content: center;
  }

  /* The divider is a pseudo-element rather than a border so it can stop short
     of the frame. A full-height border runs into the rounded corner and reads
     as a crack in the frame rather than as a division of it. */
  .pdp-facts__cell::before {
    content: '';
    position: absolute;
    inset-block: 9px;
    inset-inline-start: 0;
    inline-size: 1px;
    background: var(--pdp-gold-hairline);
  }

  .pdp-facts__cell:first-child::before {
    content: none;
  }

  .pdp-facts__label {
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pdp-muted);
  }

  .pdp-facts__value {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    text-wrap: balance;
  }

  /* ---- specifications ----------------------------------------------- */
  .pdp-specs {
    border: 1px solid var(--pdp-line);
    background: var(--pdp-surface);
  }

  .pdp-specs__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 18px;
    border-block-end: 1px solid var(--pdp-line);
  }

  .pdp-specs__row:last-child {
    border-block-end: none;
  }

  .pdp-specs__key {
    font-size: 0.85rem;
    color: var(--pdp-muted);
  }

  .pdp-specs__value {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: end;
  }

  /* ---- trust + delivery --------------------------------------------- */
  .pdp-delivery {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-inline-start: 3px solid var(--pdp-positive);
    background: var(--pdp-positive-soft);
    font-size: 0.875rem;
  }

  .pdp-delivery strong {
    font-weight: 600;
  }

  .pdp-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 18px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--pdp-line);
  }

  .pdp-trust__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }

  .pdp-trust__icon {
    display: flex;
    inline-size: 19px;
    block-size: 19px;
    flex-shrink: 0;
    margin-block-start: 1px;
    color: var(--pdp-gold-deep);
  }

  .pdp-trust__icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  /* Both were inline spans, so title and note rendered as one run-on string
     ("Authenticity assuredQuality-checked in-house"). */
  .pdp-trust__title,
  .pdp-trust__note {
    display: block;
  }

  .pdp-trust__title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .pdp-trust__note {
    margin-block-start: 2px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--pdp-muted);
  }

  .pdp-trust__footnote {
    display: block;
    margin-block-start: 2px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--pdp-muted);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  a.pdp-trust__footnote:hover,
  a.pdp-trust__footnote:focus-visible {
    text-decoration: underline;
  }

  /* ---- gallery arrows ----------------------------------------------- */
  /* Upstream pins these flush to the media's edge and paints them with
     mix-blend-mode: difference, which inverts against pale product
     photography and reads as sitting on the boundary rather than in the
     picture. Inset and given a real button instead.

     The class is doubled to outrank the upstream rule, which has identical
     specificity -- bundle order between the two stylesheets is not something
     to rely on. */
  .media-gallery--carousel slideshow-arrows {
    mix-blend-mode: normal;
    align-items: center;
    padding-inline: 16px;
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control.slideshow-control {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgb(247 244 234 / 0.9);
    color: var(--pdp-ink, #12281c);
    pointer-events: auto;
    opacity: 1;
    transition: background-color 0.2s ease;
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control.slideshow-control:hover {
    background: rgb(247 244 234 / 1);
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control svg {
    inline-size: 18px;
    block-size: 18px;
  }

  /* ---- column split -------------------------------------------------- */
  /* Upstream gives the media two thirds of the row (2fr 1fr) from 1200px up,
     which makes the picture dominate and squeezes the buy panel. 11:8 puts
     them closer to parity without the media losing its lead.

     Classes are repeated to clear the upstream selector, which resolves to
     three classes; a duplicate here counts again and takes it to four, so the
     result no longer depends on which stylesheet is bundled first. */
  /* 11:8 is the media's ceiling, not its entitlement. The picture is square,
     so its height equals its width -- left to take 11/19 of a wide page it
     grows past the fold and pushes Add to cart off screen. --pdp-media-cap
     stops it at a share of the viewport HEIGHT; whatever it does not use, the
     details column takes, because that column is 1fr and simply absorbs the
     remainder.

     Column gap here is 0 (the section pads each column by half of --gap
     instead), so 11/19 of the row is exactly the 11:8 split with nothing to
     subtract. */
  /* Between 750 and 1199 the stock rule is '1fr min(50vw, var(--sidebar-width))',
     and --sidebar-width is a hard 25rem. So the text column claimed a fixed
     400px and the media took whatever was left: on an 853px foldable that is
     373px of image beside 400px of text -- the picture smaller than the words
     next to it, on a page selling the picture.

     A share rather than a length. The media keeps the larger half at every
     width in the band, which is what a square image needs. */
  /* Below 1000px the two-column layout stops being worth having.

     The widest row in the details column is the price line -- price,
     compare-at and the discount chip -- which needs 315px to stay on one line;
     the buy row needs 308px and three size pills 312px. With 24px of padding
     that is ~340px of content, and at the working share a 364px column needs
     roughly 950px of page. Under 1000px the column cannot hold its own rows
     without wrapping, and a wrapped price line is what pushes the discount
     chip onto its own row and inflates the height.

     Stock Horizon switches at 750px, where this column is only ~275px wide. */
  @media screen and (min-width: 750px) and (max-width: 999px) {
    .product-information__grid.product-information__grid:not(.product-information--media-none) {
      grid-template-columns: minmax(0, 1fr);
    }

    .product-information__grid.product-information__grid:not(.product-information--media-none)
      .product-information__media,
    .product-information__grid.product-information__grid:not(.product-information--media-none)
      .product-details {
      grid-column: 1 / -1;
      width: auto;
      min-width: 0;
    }

    /* Nothing to stick to once the columns are stacked. */
    .product-details.product-details {
      position: static;
      max-width: none;
    }

    /* The half-gap each column carries is the gutter BETWEEN them. Stacked,
       there is no between: it survives as a 24px indent on the details and a
       24px inset on the media, so the copy sits shifted right of the image
       above it. Tripled to beat the (0,4,0) rule that sets it. */
    .product-information__grid.product-information__grid.product-information__grid:not(.product-information--media-none)
      .product-information__media {
      padding-right: 0;
      padding-left: 0;
    }

    .product-information__grid.product-information__grid.product-information__grid:not(.product-information--media-none)
      .product-details {
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* One continuous rule, not two bands.

     Reading it right to left: the details column takes what is left, and the
     media column is whatever is SMALLEST of three limits --

       75vh                  never taller than the screen it is viewed on,
                             which is what stops a square image running past
                             the fold on a short, wide window;
       56%                   the share that looks right at 1920, held steady
                             as the window narrows so the proportion travels;
       100% - 364px          and never so wide that the details column drops
                             below the width its own rows need.

     The third is the floor. 364px is 340px of content -- the price line, the
     widest row in the column -- plus its 24px padding. Above ~920px of page
     the 56% share governs and both columns shrink together; below that the
     floor takes over and only the media gives ground; below 1000px the
     stacked rule above takes the page entirely. So the ratio holds, then
     degrades, then gives up -- in that order. */
  @media screen and (min-width: 1000px) {
    /* Thumbnails now run down the left of the picture, so the left column
       holds strip + picture. The share goes to 75% of the row, and the 80vh
       height cap applies to the PICTURE alone -- the strip (72px thumbnails
       + 14px padding) and the column's 24px half-gap are added on top, or
       the strip would come out of the picture's own height. */
    .product-information__grid.product-information__grid {
      --pdp-media-share: 75%;
      --pdp-media-cap: calc(80vh + 110px);
    }

    .product-information__grid.product-information__grid.product-information--media-left.product-information--media-left {
      grid-template-columns:
        minmax(0, min(var(--pdp-media-cap, 75vh), var(--pdp-media-share, 56%), calc(100% - var(--pdp-details-min, 364px))))
        minmax(0, 1fr);
    }

    .product-information__grid.product-information__grid.product-information--media-right.product-information--media-right {
      grid-template-columns:
        minmax(0, 1fr)
        minmax(0, min(var(--pdp-media-cap, 75vh), var(--pdp-media-share, 56%), calc(100% - var(--pdp-details-min, 364px))));
    }
  }

  /* ---- side margins, desktop ----------------------------------------- */
  /* Half of Horizon's page margins, product page and its breadcrumb only.
     Horizon's margin is max(40px, (screen - 1440px) / 2) -- 40px up to about
     1520px, then everything past the 1440px content cap. Halving it at every
     width takes a formula, not one vw value: 1.4vw is ~half of 40px on a
     1280-1440 screen, and (screen - 1440px) / 4 is half of the rest. */
  @media screen and (min-width: 1000px) {
    body:has(.product-information__grid) :is(.product-information, .breadcrumb).section--page-width {
      --pdp-side: max(1.4vw, calc((100vw - 1440px) / 4));

      grid-template-columns: var(--pdp-side) minmax(0, 1fr) var(--pdp-side);
    }
  }

  /* ---- thumbnails: focus on the selected one -------------------------- */
  /* Every thumbnail but the selected one is softly blurred and faded, so the
     eye goes to the picture on show; hovering or focusing one brings it back
     into focus before the click. Left strip only, phone and desktop. */
  slideshow-controls[pagination-position='left'] .slideshow-controls__thumbnails .slideshow-control :is(img, .slideshow-controls__thumbnail) {
    transition: filter 0.2s ease, opacity 0.2s ease;
  }

  slideshow-controls[pagination-position='left'] .slideshow-controls__thumbnails .slideshow-control:not([aria-selected='true']) :is(img, .slideshow-controls__thumbnail) {
    filter: blur(1px);
    /* Faded well towards the white page behind it, so the unselected
       thumbnails read as a quiet column rather than a busy stack. */
    opacity: 0.35;
  }

  /* A faint hairline on every thumbnail but the selected one (which has its
     own dark frame). Pictures shot on pure white -- the 3D model's preview,
     cut-outs -- otherwise lose their edges against the white page and read
     as a taller, square tile beside the photos. Drawn as an outline so it
     sits over the image and costs no layout. */
  slideshow-controls[pagination-position='left'] .slideshow-controls__thumbnails .slideshow-control:not([aria-selected='true']) {
    outline: 1px solid rgb(18 40 28 / 0.14);
    outline-offset: -1px;
  }

  slideshow-controls[pagination-position='left'] .slideshow-controls__thumbnails .slideshow-control :is(img, .slideshow-controls__thumbnail) {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  slideshow-controls[pagination-position='left'] .slideshow-controls__thumbnails .slideshow-control:is(:hover, :focus-visible) :is(img, .slideshow-controls__thumbnail) {
    filter: none;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    slideshow-controls[pagination-position='left'] .slideshow-controls__thumbnails .slideshow-control :is(img, .slideshow-controls__thumbnail) {
      transition: none;
    }
  }

  /* ---- thumbnails on the left, desktop ------------------------------- */
  @media screen and (min-width: 750px) {
    /* The badge sat at the column's top-left corner, which is now the
       thumbnail strip. Moved past the strip onto the picture. */
    .product-information__media:has(slideshow-controls[pagination-position='left']) .pdp-badge {
      inset-inline-start: calc(86px + 16px);
    }
  }

  /* ---- gallery thumbnails -------------------------------------------- */
  /* Upstream pads the strip, centres it with margin-inline: auto, and sizes
     the row as an inline-flex -- so its width is whatever the thumbnails add
     up to. A short row floats away from the picture's left edge; a long one
     ends wherever the last thumbnail happens to fall. Neither edge lines up
     with the image above, and where it lands changes product to product.

     So the row is made exactly as wide as the media column and each thumbnail
     takes a fixed share of it. Four across, flush to both edges, always --
     the strip reads as the base of the picture rather than as loose objects
     underneath it. Anything past the fourth overflows into the scroller
     upstream already provides.

     The count steps down on short sets so three or two still fill the row
     rather than leaving the ragged edge this is here to remove. One is left
     at its old size: a lone thumbnail stretched across the whole column would
     read as a second hero image, which is worse than the gap beside it. */
  .media-gallery--carousel slideshow-controls[pagination-position='center'] .slideshow-controls__thumbnails {
    --pdp-thumb-count: 4;

    display: flex;
    inline-size: 100%;

    /* The strip is a flex item of the scrolling container, so its automatic
       minimum size is min-content -- the full width of every thumbnail laid
       out. Left alone it would grow past the column, the percentages below
       would resolve against that larger box, and nothing would scroll. */
    min-inline-size: 0;
    padding-inline: 0;
    margin-inline: 0;
  }

  .media-gallery--carousel slideshow-controls[pagination-position='center'] .slideshow-controls__thumbnails:not(:has(.slideshow-control:nth-child(4))) {
    --pdp-thumb-count: 3;
  }

  .media-gallery--carousel slideshow-controls[pagination-position='center'] .slideshow-controls__thumbnails:not(:has(.slideshow-control:nth-child(3))) {
    --pdp-thumb-count: 2;
  }

  .media-gallery--carousel slideshow-controls[pagination-position='center'] .slideshow-controls__thumbnails .slideshow-control {
    flex: 0 0 calc((100% - (var(--pdp-thumb-count) - 1) * var(--gap-xs)) / var(--pdp-thumb-count));
    width: calc((100% - (var(--pdp-thumb-count) - 1) * var(--gap-xs)) / var(--pdp-thumb-count));

    /* Each thumbnail is a snap point, so advancing moves the strip by exactly
       one -- both when the gallery scrolls the active thumbnail into view and
       when the strip is dragged by hand. */
    scroll-snap-align: start;
  }

  .media-gallery--carousel slideshow-controls[pagination-position='center'] .slideshow-controls__thumbnails:not(:has(.slideshow-control:nth-child(2))) .slideshow-control {
    flex: 0 0 auto;
    width: clamp(80px, 9vw, 112px);
  }

  .media-gallery--carousel slideshow-controls[pagination-position='center'] .slideshow-controls__thumbnails-container {
    scroll-snap-type: x mandatory;
  }

  /* ---- buy buttons ----------------------------------------------------- */
  /* Quantity, add to cart and buy now on one line, across the full column.

     Upstream wraps them: the block's "stacking" setting gives each button a
     51% basis so the second cannot share a line, and the default 185px
     preferred width leaves three controls too wide for the detail column once
     the page is narrow. Stacking is off in the template; the preferred width
     comes down here so the row holds without wrapping.

     min-width: fit-content upstream still protects the labels -- the buttons
     shrink toward the preferred width but never past their own text.

     Below 750px the column cannot hold three controls at a usable size, so
     wrapping comes back and they stack as before.

     Scoped to the product page like the rules above -- this stylesheet loads
     everywhere, and these classes also render in featured-product sections. */
  body:has(.product-information__grid:not(featured-product-information .product-information__grid)) {
    .buy-buttons-block {
      inline-size: 100%;
    }

    @media screen and (min-width: 750px) {
      .product-form-buttons {
        --buy-button-preferred-width: 140px;

        flex-wrap: nowrap;
        align-items: stretch;
      }
    }

    /* ---- the Shiprocket button as a peer of Add to cart ---------------
       Shiprocket injects its button into .shiprocket-headless and then
       styles the button itself from a shop metafield, every rule with
       !important. So the container is the only stable surface: it is the
       placeholder their script looks for, it is what the checkout monitor
       asserts on (tests/checkout-canary/selectors.js), and it is not
       something their styling config can reach.

       Everything below sizes the BOX. Nothing reaches inside it, which is
       what keeps this from becoming a specificity fight with a vendor
       script that updates on its own schedule.

       The two buttons did not read as a pair because Buy Now carries an
       extra line -- the payment marks and "Powered By Shiprocket" -- so it
       is naturally taller. Rather than squeeze theirs, which would clip
       that line, both stretch to the taller of the two. */
    .product-form-buttons {
      align-items: stretch;
    }

    .product-form-buttons .shiprocket-headless {
      display: flex;
      align-items: stretch;

      /* Buy Now takes the larger share. It carries more inside it -- the
         payment marks and the "Powered By" line -- so equal halves left it
         cramped while Add to cart sat half empty around two short words.
         min-inline-size releases the flex item's auto minimum, without which
         a wide injected button refuses to shrink and pushes the stepper out. */
      flex: 1.3 1 0;
      min-inline-size: 0;
    }

    /* Add to cart gives up the difference. It cannot actually collapse: the
       label is nowrap and the button keeps min-width: fit-content upstream,
       so this shrinks the empty space around the words and nothing else.

       Matched with :has() rather than a class, because the add-to-cart block
       renders as a bare <span> with no class of its own -- the button is what
       carries the name, one level down. */
    .product-form-buttons > *:has(.add-to-cart-button) {
      flex: 0.8 1 0;
    }

    /* Desktop: an even 50/50. The 1.3 : 0.8 split above is for the phone bar,
       where Buy Now carries its payment marks in a narrow screen; on desktop
       the row has room and the uneven split made Buy Now look stretched. */
    @media screen and (min-width: 750px) {
      /* The row's actual items on desktop are the add-to-cart span and
         Horizon's .accelerated-checkout-block (Buy Now lives inside it),
         which upstream gives a 140px flex-basis head start. Equal zero
         bases, and no fit-content floor, make the split exact. */
      .product-form-buttons.product-form-buttons > .accelerated-checkout-block,
      .product-form-buttons.product-form-buttons > *:has(.add-to-cart-button) {
        flex: 1 1 0;
        min-inline-size: 0;
      }
    }

    /* Room between the three, but not so much that the row reads as three
       separate things. 12px left the controls looking stranded with the
       width going to the gaps instead of the buttons; 8px keeps them a set
       and hands the difference back to the labels. */
    .product-form-buttons {
      gap: 8px;
    }

    /* ---- the floating bar, phone only ---------------------------------
       Bounded by the same 749px the upstream rules use. The mobile-sticky
       class is in the markup at every width -- only its CSS is conditional
       -- so an unbounded override here would silently change the in-flow
       desktop block too. */
    @media screen and (max-width: 749px) {
      /* Five, everywhere. One number on all six edges -- the two joins
         between the three controls, and the bar's own four sides -- so the
         bar reads as a single object with even breathing room rather than a
         set of separately-tuned gaps.

         This replaces an earlier 2px seam that sat on the Buy Now column
         alone. With a real gap on both joins that hack is redundant, and
         leaving it would have made one seam 7px and the other 5px. */
      .buy-buttons-block--mobile-sticky .product-form-buttons {
        gap: 5px;
      }

      .buy-buttons-block--mobile-sticky {
        padding-inline: 5px;
        /* A flat 5px all round. No home-bar (safe-area) allowance: when the
           browser hides its toolbar the page runs to the screen edge, and the
           allowance showed as a white band under the buttons. The iPhone home
           bar line is drawn over the bottom edge of the buttons instead, as
           it is over any full-bleed content. */
        padding-block: 5px;
      }

      /* Shiprocket's stylesheet puts a 10px margin under its button. Inside
         this bar that margin is empty space the other two controls do not
         share, and it made the row 62px around 52px buttons. */
      .buy-buttons-block--mobile-sticky .shiprocket-headless .sr-headless-checkout {
        margin-block-end: 0;
      }

      /* The page-foot spacer, so the last block is not hidden under the fixed
         bar: 5 + 52 + 5, plus a few px of air. */
      &:has(.buy-buttons-block--mobile-sticky) {
        padding-block-end: 71px;
      }
    }

    /* The injected button fills the box it was given. Written as a child
       selector rather than naming their class, because the class is theirs
       to rename and the position is not. */
    .product-form-buttons .shiprocket-headless > * {
      inline-size: 100%;
      block-size: 100%;
    }

    /* Buy Now in the brand gold, matching the share button. The colour comes
       from Shiprocket's shiprocketCheckoutButton metafield as !important, so
       this has to be !important too -- the extra classes are what let it win.
       "Powered By Shiprocket" is a white image and vanishes on gold, so only
       that is flipped dark; the payment icons keep their own colours. */
    .product-form-buttons .shiprocket-headless .sr-headless-checkout {
      background-color: #e0b74e !important;
      color: #12281c !important;
    }

    .product-form-buttons .shiprocket-headless .sr-powered-by img {
      filter: invert(1);
    }

    /* Bold "BUY NOW". Shiprocket's metafield sets the label's weight to
       Normal with !important, so this needs !important too; the extra
       classes are what let it win. */
    .product-form-buttons .shiprocket-headless .sr-button-text-container {
      font-weight: 700 !important;
    }
  }

  /* ---- variant options ------------------------------------------------ */
  /* Upstream sizes the option tracks as minmax(<min>, 1fr), so they absorb
     every spare pixel: two options split the row in half and read as two
     primary buttons rather than as a choice between two sizes.

     Capping the track at max-content sizes each option to its own label with
     a floor under it, so a row of options stays a row of options whether
     there are two of them or six. Tracks pack to the left; the leftover space
     is left as space.

     Scoped to the product page the same way the page width is -- this
     stylesheet is loaded everywhere, and the picker also appears in the
     quick-add modal and in featured-product sections. */
  body:has(.product-information__grid:not(featured-product-information .product-information__grid))
    .variant-option--equal-width-buttons {
    --variant-min-width: 104px;

    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), max-content));
    justify-content: start;
  }

  /* Joined into one segmented control rather than separate pills: the options
     are one choice, and a single bordered strip says that where a row of
     detached buttons says "here are some things you could press".

     The gap goes, the corners square off, and every option after the first is
     pulled back by the border width so neighbours share one line instead of
     showing a doubled one. Both the selected pill and the sold-out cross
     inherit the radius, so they square off with it. */
  body:has(.product-information__grid:not(featured-product-information .product-information__grid)) {
    .variant-option--buttons,
    .variant-option--equal-width-buttons {
      gap: 0;
    }

    .variant-option__button-label {
      border-radius: 0;
    }

    .variant-option__button-label:not(:first-of-type) {
      margin-inline-start: calc(var(--options-border-width) * -1);
    }
  }

  /* ---- style / related products -------------------------------------- */
  /* Cards, not thumbnails. These are the same piece in another finish, and
     the finish is the whole decision -- so the photograph is the control and
     the name underneath only confirms what the eye already picked.

     Sold-out siblings are dropped upstream, so every card here is a card you
     can actually act on. */
  .pdp-family {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pdp-family__heading {
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pdp-muted);
  }

  /* A short gold rule under the heading rather than a full-width one: it
     marks the start of a section without drawing a line the eye has to cross
     to reach the cards. */
  .pdp-family__heading::after {
    content: '';
    display: block;
    inline-size: 44px;
    block-size: 2px;
    margin-block-start: 8px;
    background: var(--pdp-gold-deep);
  }

  /* Four round swatches to a row on phones, six on desktop. These are finishes of one
     piece, not separate products to browse, so they are drawn as a picker --
     circles and a name -- rather than as product cards. The photo is the
     product's own main image cut to a circle as it is, not zoomed: a single
     zoom crops some photos and not others. */
  .pdp-family__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Six to a row on desktop, where four circles came out ~150px each. */
  @media screen and (min-width: 750px) {
    .pdp-family__list.pdp-family__list {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .pdp-family__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--pdp-ink);
  }

  /* The margin is the room the current ring needs outside the circle. */
  .pdp-family__media {
    display: block;
    inline-size: calc(100% - 10px);
    margin: 5px;
    border-radius: 50%;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
  }

  .pdp-family__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }

  @media (hover: hover) {
    .pdp-family__item:hover .pdp-family__media {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--pdp-gold-deep);
    }
  }

  .pdp-family__item:focus-visible {
    outline: none;
  }

  .pdp-family__item:focus-visible .pdp-family__media {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--pdp-ink);
  }

  .pdp-family__text {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    padding-block-start: 4px;
    text-align: center;
  }

  /* One line, sized to the screen so "Maestro Pink" and "Maestro Blue" both
     fit on a phone -- a fixed size cut them to "Maestro Pi..." and hid the one
     word that tells them apart. The ellipsis is only a fallback for a name far
     longer than the catalogue has today. */
  .pdp-family__label {
    font-size: min(3vw, 0.82rem);
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The page you are already on: a dark ring set off the photo by a white
     gap, and its name in bold. Drawn with box-shadow so it takes no layout
     space and nothing beside it moves. */
  .pdp-family__item--current .pdp-family__media,
  .pdp-family__item--current:hover .pdp-family__media {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--pdp-ink);
  }

  .pdp-family__item--current .pdp-family__label {
    font-weight: 700;
  }

  /* ---- viewer count --------------------------------------------------- */
  .pdp-viewers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--pdp-ink);
  }

  .pdp-viewers__count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .pdp-viewers__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--pdp-positive);
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pdp-viewers__dot {
      animation: pdp-pulse 2s infinite;
    }

    @keyframes pdp-pulse {
      0% {
        box-shadow: 0 0 0 0 rgb(47 90 52 / 0.6);
      }

      70% {
        box-shadow: 0 0 0 9px rgb(47 90 52 / 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgb(47 90 52 / 0);
      }
    }
  }

  /* ---- tax / shipping note -------------------------------------------- */
  /* Two facts side by side, each with its own mark. They answer different
     questions -- what is in the price, and what is not yet -- so they are
     kept apart rather than run into one sentence. Wraps to two lines when
     the column is too narrow to hold both. */
  .pdp-shipping {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    font-size: 0.85rem;
    color: var(--pdp-ink);
  }

  .pdp-shipping__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  /* One row on phones: taxes, then shipping with its dispatch time. The
     gaps come in so the two facts fit side by side. After the base rules so
     the equal-specificity overrides win on order. */
  @media screen and (max-width: 749px) {
    .pdp-shipping {
      gap: 6px 14px;
    }

    .pdp-shipping__item {
      gap: 6px;
    }
  }

  .pdp-shipping__icon {
    inline-size: 19px;
    block-size: 19px;
    flex: none;
    color: var(--pdp-gold-deep);
  }

  .pdp-shipping__dispatch {
    font-size: 0.72rem;
    color: var(--pdp-muted);
    white-space: nowrap;
  }

  .pdp-shipping a {
    color: var(--pdp-gold-deep);
    text-decoration: none;
  }

  /* Gold alone carries the link on a cream ground, which is thin as the only
     signal -- so the underline comes back on hover and on focus. */
  .pdp-shipping a:hover,
  .pdp-shipping a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ---- gap between the breadcrumb and the picture ---------------------- */
  /* The section carries `padding-block-start: 8px` from its own settings, and
     on mobile that lands as a white band between the cream breadcrumb strip
     and the top of the photograph -- the image is full-bleed here, so there is
     no side margin for the gap to read as part of, and it looks like a seam
     rather than spacing. Desktop keeps it: the image is inset there and the
     gap sits inside a margin that already exists.

     Overriding the padding property, not --padding-block-start: the variable
     is set inline by the section and an inline declaration beats any selector.
     .spacing-style sets the `padding-block` shorthand at (0,1,0), so a
     two-class selector takes the start edge and leaves the end edge alone. */
  @media screen and (max-width: 749px) {
    .product-information.section {
      padding-block-start: 0;
      /* The section's 64px setting scales to ~45px here, which with the
         reviews section's own 20px left ~65px under the specifications.
         20px makes it the same step as between the other sections. */
      padding-block-end: 20px;
    }
  }

  /* ---- badge over the picture ---------------------------------------- */
  /* Anchored to the media column rather than to <media-gallery>, which is a
     sticky-content element -- giving that one position: relative would fight
     its own stickiness. The grid cell is inert and safe to position against. */
  .product-information__media {
    position: relative;
  }

  /* ---- share, over the top-right of the gallery ----------------------
     The mirror of .pdp-badge below: same 16px inset, same stacking layer,
     opposite corner. Scoped to .product-information for the same reason the
     AR rules above are -- these sit at 0-1-0 against base rules, and this
     section re-renders through the Section Rendering API, which injects its
     CSS after the document's own and would otherwise win the tie. */
  .product-information .pdp-share {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: var(--layer-flat, 1);
    inline-size: 40px;
    block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: #e0b74e;
    color: #12281c;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
    transition: transform 0.16s ease, background 0.16s ease;
  }

  @media (hover: hover) {
    .product-information .pdp-share:hover {
      background: #e8c566;
      transform: translateY(-1px);
    }
  }

  .pdp-share:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .pdp-share__icon {
    display: inline-flex;
    inline-size: 19px;
    block-size: 19px;
  }

  .pdp-share__icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  /* The tick replaces the arrow in place, so the button does not resize and
     nudge the picture underneath it. */
  .pdp-share__icon--done,
  .pdp-share--done .pdp-share__icon--share {
    display: none;
  }

  .pdp-share--done .pdp-share__icon--done {
    display: inline-flex;
  }

  .pdp-share__toast {
    position: absolute;
    inset-block-start: calc(100% + 7px);
    inset-inline-end: 0;
    padding: 5px 10px;
    border-radius: 6px;
    background: #12281c;
    color: #ffffff;
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
  }

  .pdp-share--done .pdp-share__toast {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-information .pdp-share,
    .pdp-share__toast {
      transition: none;
    }
  }

  /* ---- limited time offers -------------------------------------------
     A pale card rather than a bordered box: the offer is good news, and a
     hairline rectangle above the buy button read as a warning notice.

     Three columns -- gift mark, the words, and a large ghost of the same
     gift bleeding off the trailing edge. The ghost is the only thing here
     that is purely decorative, and it is the first thing to go when the
     card gets narrow. */
  .pdp-offers {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgb(18 40 28 / 0.08);
    background: #f2f5f1;
  }

  .pdp-offers__gift {
    flex: 0 0 auto;
    inline-size: 52px;
    block-size: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e1ebdf;
    color: #1d3b28;
  }

  .pdp-offers__gift svg {
    inline-size: 26px;
    block-size: 26px;
  }

  /* min-inline-size:0 so a long offer line wraps instead of forcing the
     flex row wider than the column it sits in. */
  .pdp-offers__body {
    flex: 1 1 auto;
    min-inline-size: 0;
    position: relative;
    z-index: 1;
  }

  .pdp-offers__heading {
    margin: 0 0 5px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: #bf2f2f;
  }

  .pdp-offers__item + .pdp-offers__item {
    padding-block-start: 11px;
    margin-block-start: 11px;
    border-block-start: 1px solid rgb(18 40 28 / 0.1);
  }

  .pdp-offers__item--extra {
    display: none;
  }

  .pdp-offers__list--expanded .pdp-offers__item--extra {
    display: block;
  }

  .pdp-offers__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #2b3a30;
  }

  .pdp-offers__code-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 10px;
  }

  .pdp-offers__code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1.5px dashed rgb(18 40 28 / 0.38);
    border-radius: 9px;
    background: transparent;
    color: #12281c;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  .pdp-offers__code:focus-visible {
    outline: 2px solid #1d3b28;
    outline-offset: 2px;
  }

  .pdp-offers__code-icon {
    display: inline-flex;
    inline-size: 15px;
    block-size: 15px;
    opacity: 0.55;
  }

  .pdp-offers__code-icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .pdp-offers__code-hint,
  .pdp-offers__code-done {
    font-size: 0.86rem;
    color: #667a6c;
  }

  /* The hint and the confirmation occupy the same slot, so the row does not
     change width when a code is copied and nothing beside it shifts. */
  .pdp-offers__code-done {
    display: none;
    color: #2f6b47;
    font-weight: 600;
  }

  .pdp-offers__code--done ~ .pdp-offers__code-hint {
    display: none;
  }

  .pdp-offers__code--done ~ .pdp-offers__code-done {
    display: inline;
  }

  .pdp-offers__code--done {
    border-style: solid;
    border-color: rgb(47 107 71 / 0.55);
  }

  .pdp-offers__more {
    margin-block-start: 11px;
    padding: 0;
    border: 0;
    background: none;
    color: #1d3b28;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* Anchored to the card rather than placed in the flow: it is allowed to
     bleed past the padding and be clipped by the card's own overflow, which
     is what makes it read as a watermark instead of a third column. */
  .pdp-offers__art {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -10px;
    transform: translateY(-50%);
    inline-size: 132px;
    block-size: 106px;
    color: #cfe0cb;
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
  }

  .pdp-offers__art svg {
    inline-size: 100%;
    block-size: 100%;
  }

  /* Below this the words need the whole card width, and a watermark behind
     wrapped text is just noise. */
  @media screen and (max-width: 749px) {
    .pdp-offers {
      gap: 12px;
      padding: 14px;
    }

    .pdp-offers__gift {
      inline-size: 42px;
      block-size: 42px;
    }

    .pdp-offers__gift svg {
      inline-size: 21px;
      block-size: 21px;
    }

    .pdp-offers__art {
      display: none;
    }
  }

  .pdp-badge {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    z-index: var(--layer-flat, 1);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.66);
    color: #ffffff;
    font-family: var(--font-accent--family, inherit);
    font-style: italic;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
  }

  @media screen and (max-width: 749px) {
    .pdp-badge {
      inset-block-start: 12px;
      /* 16px, not 12. The breadcrumb, the H1, the price and the details
         column all begin at 16px on mobile -- the page's text margin -- and
         the badge sat 4px inside all of them. Small enough to look like a
         rendering artefact rather than a value, and the first thing the eye
         catches because the badge sits directly under the breadcrumb. The
         block-start stays at 12px: that is distance from the top of the
         photograph, which nothing else is aligned to. */
      inset-inline-start: 16px;
      font-size: 0.72rem;
      padding: 6px 11px;
    }
  }

  @media screen and (max-width: 749px) {
    /* Sized to the screen on phones so a long name stays on one line.
       min() caps it at the size it had before, so a wide phone held
       sideways never gets text bigger than it had. */
    /* Bold and in the Add to Cart green, a size down, so the name reads as a
       label over the price rather than a headline competing with it. */
    .text-block.text-block.pdp-title > h1 {
      font-size: min(4.9vw, 2rem);
      font-weight: 700;
      color: #12281c;
    }

    .pdp-price__now {
      font-size: var(--pdp-price-size-mobile, min(6.5vw, 2.2rem));
    }

    /* The price it was, first and smaller, then the price now. `order`
       moves it visually only, so the variant script's references still hold. */
    /* Tighter row on phones so price, old price and the chip share one line. */
    /* Centred rather than baseline: on a baseline the chip box hung below the
       large price and the old price sat low. */
    .pdp-price .pdp-price__row {
      gap: 6px 8px;
      align-items: center;
    }

    .pdp-price .pdp-price__was {
      order: -1;
      font-size: min(3.4vw, 1.25rem);
    }

    .pdp-price .pdp-price__chip {
      padding: 4px 7px;
      letter-spacing: 0.01em;
      font-size: min(2.9vw, 0.75rem);
      margin-inline-start: 6px;
    }

    /* The saving joins the chip, and its own line goes. */
    .pdp-price .pdp-price__chip-saving {
      display: inline;
      white-space: nowrap;
    }

    .pdp-price .pdp-price__saving {
      display: none;
    }

    .pdp-trust {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Two columns, so the left-hand cell of each row starts flush and every
       row after the first needs a rule above it. */
    .pdp-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pdp-facts__cell:nth-child(odd)::before {
      content: none;
    }

    .pdp-facts__cell:nth-child(even)::before {
      content: '';
    }

    /* Row rules run the full width of the cell so the pair meets in the
       middle as one line. Nothing curves at a row boundary, so unlike the
       vertical dividers these have no corner to keep clear of. */
    .pdp-facts__cell:nth-child(n + 3)::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      block-size: 1px;
      background: var(--pdp-gold-hairline);
    }
  }

  /* ---- gallery controls: no arrows, share + AR stacked, white --------- */
  /* The thumbnail strip is the way through the pictures now, so the arrows
     go (phone and desktop). Share and "View in your space" stack in the
     picture's top-right corner as two white rounds -- AR is the round icon at
     every width now, the desktop pill included. Last in the file and scoped
     to the product media so it outranks the earlier gold / bottom rules. */
  .product-information__media .media-gallery--carousel slideshow-arrows {
    display: none;
  }

  .product-information__media .ar-launch-overlay.ar-launch-overlay {
    display: none;
  }

  .product-information__media .ar-badge-wrapper.ar-badge-wrapper.ar-badge-wrapper {
    display: block;
    inset-block-start: calc(var(--pdp-ctl-top, 16px) + 40px + 8px);
    inset-block-end: auto;
    inset-inline-end: var(--pdp-ctl-end-ar, 16px);
  }

  .product-information .pdp-share.pdp-share,
  .product-information__media .ar-icon-badge.ar-icon-badge {
    inline-size: 40px;
    block-size: 40px;
    background: #ffffff;
    color: #12281c;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.16);
  }

  .product-information .pdp-share.pdp-share {
    inset-block-start: var(--pdp-ctl-top, 16px);
  }

  @media (hover: hover) {
    .product-information .pdp-share.pdp-share:hover,
    .product-information__media .ar-icon-badge.ar-icon-badge:hover {
      background: #f4f1ea;
    }
  }

  /* Phones: 10px in from the picture's corner. Share is placed in the whole
     media column, AR in the picture's own column, which ends one gallery gap
     short of the screen edge -- hence the two different end insets. */
  @media screen and (max-width: 749px) {
    .product-information__media,
    .product-information {
      --pdp-ctl-top: 10px;
      --pdp-ctl-end-ar: calc(var(--pdp-pic-gutter, 0px) + 10px);
    }
  }

  /* ---- Judge.me reviews, phones -------------------------------------
     Spacing only: colours, type and the app's markup are untouched. Judge.me's
     defaults are sized for a desktop column, and on a 375px phone four reviews
     ran to ~1,400px. Every rule is scoped to the widget's id, which also
     outranks the app's class-only selectors without needing !important.

     These are Judge.me's class names, not ours. If an app update renames one,
     that rule simply stops matching and the app's default spacing returns --
     nothing breaks. */
  @media screen and (max-width: 749px) {
    /* Rating bars: 18px rows with 12px under each become 16px rows with 6px,
       closer to how the bars read on the product card. */
    #judgeme_product_reviews .jdgm-histogram {
      margin-block: 10px 4px;
    }

    #judgeme_product_reviews .jdgm-histogram .jdgm-histogram__row {
      height: 16px;
      line-height: 16px;
      margin-block-end: 6px;
    }

    #judgeme_product_reviews .jdgm-histogram .jdgm-histogram__row:last-of-type {
      margin-block-end: 0;
    }

    /* "Write a review" to the "Most Recent" sort: one small step, not a gap. */
    #judgeme_product_reviews .jdgm-write-rev-link {
      margin-block-end: 12px;
    }

    #judgeme_product_reviews .jdgm-rev-widg__sort-wrapper {
      margin-block-start: 0;
      padding-block-start: 0;
    }

    /* Each review: 16px of padding above and below, no margin. The divider is
       the review's top border, so it sits exactly between two reviews with
       16px on each side. The v3 widget adds its own bottom padding, which
       with a top margin left more space above the line than below it; both
       edges are set here so neither app default can tip it again. */
    #judgeme_product_reviews .jdgm-rev {
      margin-block: 0;
      padding-block: 16px;
    }

    /* Page numbers under the last review: the app padded both sides of this
       one short line, ~62px tall in all. 12px above keeps the numbers with
       the reviews; nothing below, because the section's own bottom padding
       already ends the block. The numbers' own size and tap area stay. */
    #judgeme_product_reviews .jdgm-paginate {
      padding-block: 12px 0;
      margin-block: 0;
    }

    /* The reviewer's avatar, a 3.2em grey circle that set the height of the
       whole name row. Smaller, it sits level with the name instead. */
    #judgeme_product_reviews .jdgm-rev__icon {
      width: 2.2em;
      height: 2.2em;
      line-height: 2.2em;
      margin-inline-end: 8px;
    }
  }
/* END_SNIPPET:pdp-styles */

/* START_SNIPPET:pills-styles (INDEX:262) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

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

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:266) */
/* 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__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .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: var(--color-foreground-subdued);
  }

  .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)) {
      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(3, minmax(0, 1fr));
    padding-block-end: var(--padding-sm);
    gap: 16px 10px;
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px 14px;
    }
  }

  /* Compact search cards: square image (set in predictive-search-products-list),
     2-line title, smaller price. Phones show full rows of 3 only. */
  .predictive-search-results__wrapper-products .resource-card__content {
    gap: 2px;
    margin-block-start: 2px;
  }

  .predictive-search-results__wrapper-products .resource-card__title {
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .predictive-search-results__wrapper-products .resource-card__content > :not(.resource-card__title),
  .predictive-search-results__wrapper-products .resource-card__content .price {
    font-size: 12px;
    font-weight: 600;
  }

  @container (min-width: 550px) {
    .predictive-search-results__wrapper-products .resource-card__title,
    .predictive-search-results__wrapper-products .resource-card__content > :not(.resource-card__title),
    .predictive-search-results__wrapper-products .resource-card__content .price {
      font-size: 14px;
    }
  }

  @container (max-width: 549px) {
    .predictive-search-results__wrapper-products > .predictive-search-results__card:nth-child(n + 10) {
      display: none;
    }
  }

  /* ------------------------------------------------------------------
     Empty search panel: rounded search box, eyebrow headings, Recently
     viewed swipe row, Popular collections 2 x 2 cards.
     ------------------------------------------------------------------ */
  .search-modal {
    --search-card-bg: #fffdf8;
    --search-card-border: #eadfca;
    --search-card-radius: 12px;
  }

  /* Search box. Setting --color-border here also feeds the theme's
     !important focus border in search-modal.liquid, so it stays beige. */
  .search-modal .predictive-search-form__header {
    border-bottom-color: transparent;

    @media screen and (max-width: 749px) {
      padding: var(--padding-sm) var(--padding-sm) var(--padding-2xs);
    }
  }

  .search-modal .predictive-search-form__header .predictive-search-form__header-inner {
    --color-border: #e3d6bb;

    background-color: #fbf8f1;
    border: 1px solid var(--color-border);
    border-radius: 14px;
  }

  .search-modal
    .predictive-search:has(.predictive-search-dropdown)
    .predictive-search-form__header-inner:is(:focus-within, :not(:focus-within)) {
    border-radius: 14px;
  }

  /* Eyebrow headings: small capitals, thin rule, CLEAR on the right */
  .predictive-search-results__title.search-eyebrow {
    justify-content: flex-start;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    margin-block: 0 12px;

    &::after {
      content: '';
      order: 1;
      flex: 1 1 auto;
      min-width: 16px;
      border-top: 1px solid var(--search-card-border);
    }

    .predictive-search-results__clear {
      order: 2;
      margin: 0;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  /* Recently viewed: horizontal swipe row. The row bleeds to the panel edge
     so cards scroll out under the padding instead of being clipped by it. */
  .recently-viewed-wrapper {
    min-width: 0;
  }

  .search-recent__list {
    /* Positioned so cards' offsetLeft is measured from the row (search-recent-dots.js) */
    position: relative;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--padding-xl);
    margin-inline: calc(-1 * var(--padding-xl));
    padding: 2px var(--padding-xl) var(--padding-sm);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

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

  .search-recent__list > .predictive-search-results__card.search-recent__item {
    flex: 0 0 80%;
    width: auto;
    min-width: 0;
    padding: 0;
    scroll-snap-align: start;
    border: 1px solid var(--search-card-border);
    border-radius: var(--search-card-radius);
    background-color: var(--search-card-bg);
    overflow: hidden;

    @container (min-width: 550px) {
      flex-basis: 40%;
    }

    &:only-child {
      flex-basis: 100%;
    }

    &:hover,
    &[aria-selected='true'].keyboard-focus {
      border-color: #b48622;
      background-color: var(--search-card-bg);
    }
  }

  /* Position dots under the row; only rendered when there are 2+ cards.
     Each button is a 20px tap target around a 6px dot; the active one
     stretches into a gold pill. */
  .search-recent__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-block: calc(-1 * var(--padding-sm) + 6px) 2px;
  }

  .search-recent__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    &::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background-color: #d9cdb4;
      transition: width var(--animation-speed-medium) var(--animation-easing),
        background-color var(--animation-speed-medium) var(--animation-easing);
    }

    &[aria-current='true'] {
      width: 30px;
    }

    &[aria-current='true']::before {
      width: 18px;
      background-color: #b48622;
    }

    &:focus-visible {
      outline: none;
    }

    &:focus-visible::before {
      outline: 2px solid var(--color-foreground);
      outline-offset: 2px;
    }
  }

  .search-recent__link {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 8px;
    color: var(--color-foreground);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .search-recent__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .search-recent__media img,
  .search-popular-collections__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-recent__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .search-recent__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.3;
  }

  .search-recent__price {
    font-size: 15px;
    font-weight: 600;
  }

  .search-recent__chevron,
  .search-popular-collections__chevron {
    display: flex;
    flex: none;
    width: 14px;
    height: 14px;
    color: rgb(var(--color-foreground-rgb) / 0.7);

    svg {
      width: 100%;
      height: 100%;
    }
  }

  /* Popular collections: 2 x 2 on phones, one row of 4 on wider panels */
  .recently-viewed-wrapper + .search-popular-collections {
    margin-block-start: var(--margin-md);
  }

  .search-popular-collections__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-block-end: var(--padding-lg);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      padding-block-end: var(--padding-sm);
    }
  }

  .search-popular-collections__tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--search-card-border);
    border-radius: var(--search-card-radius);
    background-color: var(--search-card-bg);
    color: var(--color-foreground);
    text-decoration: none;
    transition: border-color var(--animation-speed-medium) var(--animation-easing);
    -webkit-tap-highlight-color: transparent;

    &:hover {
      border-color: #b48622;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .search-popular-collections__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .search-popular-collections__media img {
    transition: transform var(--animation-speed-medium) var(--animation-easing);
  }

  .search-popular-collections__tile:hover img {
    transform: scale(1.05);
  }

  .search-popular-collections__bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
  }

  .search-popular-collections__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
  }

  .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;
    }
  }

  /* Search cards show the selling price only, matching the product cards
     elsewhere on the site (.item__meta-was in item-styles). Delete this
     block to bring the struck-through MRP back. */
  predictive-search-component .resource-card .compare-at-price {
    display: none;
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:267) */
/* 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 {
    color: var(--color-foreground-muted);
    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:price-styles (INDEX:268) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */

/* START_SNIPPET:product-badges-styles (INDEX:270) */
.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-gallery-zoom-details-styles (INDEX:271) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:272) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:274) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    /* minmax(0, ...) not a bare 1fr. `1fr` is `minmax(auto, 1fr)`, so each
       track cannot get narrower than its widest item's min-content -- and a
       card whose min-content exceeds half the screen pushes the track past
       the container instead of the card wrapping inside it. Measured at 360px
       with a bare 1fr: tracks resolved to 480.78px and 390.22px, both wider
       than the viewport, and unequal because each took its own item's
       minimum. A 0 floor lets the track win and the card reflow. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    /* A grid item's default min-width is its content; 0 lets the track decide. */
    min-width: 0;
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  /* Large cards: two if two fit, otherwise one.

     This was a flat 1fr up to 749px, which is a phone and a tablet and a
     narrow desktop window all told apart by one number -- so a 730px window
     got a single 700px-wide card. Stated as a minimum instead: auto-fit lays
     down as many tracks as will hold --product-card-min-mobile and drops to a
     single full-width one when a second will not fit. No breakpoint to keep
     in step with device widths, and the answer stays right for screens
     nobody has shipped yet.

     min(..., 100%) is the guard for a viewport narrower than the minimum
     itself, where a track wider than the container would overflow. */
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(auto-fit, minmax(min(var(--product-card-min-mobile, 280px), 100%), 1fr));
    }
  }

  /* The shopper's own choice, so it is exactly one -- not "one unless two
     happen to fit". Placed after the rule above, which it ties with on
     specificity, so an explicit toggle wins over the automatic answer.

     minmax(0, 1fr) for the same reason as the two-column rule above: a bare
     1fr let the single track grow to the card's min-content (~1100px), so the
     page overflowed sideways and the phone zoomed out to fit it. */
  [product-grid-view='mobile-single'] {
    @media screen and (max-width: 749px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:275) */
.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;
    }
  }

  /* 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: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &: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-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .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-container-styles (INDEX:276) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:277) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  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;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .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;
  }

  .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:278) */
.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-recommendations-styles (INDEX:280) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:282) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:283) */
.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:284) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @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:286) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:289) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .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-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-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-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:290) */
.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:291) */
.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:resource-list-styles (INDEX:292) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-bar (INDEX:295) */
/* Hidden by default and switched on only where the gap exists -- see
     sections/header.liquid. */
  .search-bar {
    display: none;
    min-inline-size: 0;
  }

  .search-bar__field {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    min-inline-size: 0;
    /* 7px, not 8. The field read a little tall against the 44px icon boxes
       beside it -- 2px off the block axis settles it without touching the
       inline padding, which is what keeps the placeholder clear of the icon. */
    padding: 7px clamp(10px, 3cqi, 16px);
    border: 1px solid currentColor;
    border-radius: var(--style-border-radius-inputs, 999px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;

    /* The header text colour is set for a dark bar, so the border at full
       strength reads heavier than an input should. */
    border-color: color-mix(in srgb, currentColor 34%, transparent);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .search-bar__field:hover {
    border-color: color-mix(in srgb, currentColor 55%, transparent);
    background: color-mix(in srgb, currentColor 7%, transparent);
  }

  .search-bar__field:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .search-bar__icon {
    display: flex;
    flex: 0 0 auto;
    opacity: 0.75;
  }

  .search-bar__icon svg {
    inline-size: 18px;
    block-size: 18px;
  }

  .search-bar__placeholder {
    overflow: hidden;
    opacity: 0.7;
    font-size: 0.88rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
/* END_SNIPPET:search-bar */

/* START_SNIPPET:search-modal (INDEX:296) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      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: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @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);
    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-foreground);
    }
  }

  .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;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.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-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-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:298) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section-header (INDEX:299) */
.section-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-end: 24px;
  }

  .section-header--align-center {
    align-items: center;
    text-align: center;
  }

  .section-header--align-start {
    align-items: flex-start;
    text-align: start;
  }

  .section-header__heading {
    margin: 0;
    color: var(--sh-heading, #12281c);
    font-size: clamp(1.5rem, var(--sh-size, 2.6vw), 3.25rem);
    line-height: 1.15;
  }

  .section-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--sh-accent, #b48622);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .section-header__points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 0;
    max-inline-size: 62ch;
    color: var(--sh-body, #4a4a44);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .section-header--align-center .section-header__points {
    justify-content: center;
  }

  /* A small diamond between points, matching the rules above. */
  .section-header__point + .section-header__point::before {
    content: '';
    display: inline-block;
    inline-size: 5px;
    block-size: 5px;
    margin-inline-end: 22px;
    rotate: 45deg;
    background-color: var(--sh-accent, #b48622);
    vertical-align: middle;
  }

  .section-header__view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 4px;
    color: var(--sh-accent, #b48622);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .section-header__view-all svg {
    transition: transform 0.25s ease;
  }

  .section-header__view-all:hover svg {
    transform: translateX(4px);
  }

  /* --- Style: script ------------------------------------------------- */
  /* The eyebrow becomes the flourish -- large, italic, over a drawn stroke --
     and the heading answers it in capitals between two diamonds. */
  .section-header--script .section-header__eyebrow {
    position: relative;
    display: inline-block;
    padding-block-end: 14px;
    color: var(--sh-script, #12281c);
    font-family: var(--sh-script-family, var(--font-h1--family, inherit));
    font-size: clamp(1.4rem, 2.1vw, 2.4rem);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
  }

  /* A drawn stroke rather than a border: a straight rule under a handwritten
     line reads as an underline, not as part of the lettering. */
  .section-header__stroke {
    position: absolute;
    inset-inline: 8% 0;
    inset-block-end: 0;
    inline-size: 92%;
    block-size: 12px;
    color: var(--sh-accent, #b48622);
  }

  .section-header--script .section-header__heading {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .section-header--align-center.section-header--script .section-header__heading {
    justify-content: center;
  }

  .section-header__diamond {
    flex: 0 0 auto;
    color: var(--sh-accent, #b48622);
  }

  /* --- Style: plain -------------------------------------------------- */
  /* No ornaments at all. For sections where the header should not compete
     with what is under it. */
  .section-header--plain {
    gap: 10px;
  }

  /* --- Style: emblem -------------------------------------------------- */
  /* One row: mark, rule, the copy stacked against it, link at the far end.
     Placed on a grid rather than wrapped in extra divs, so the markup stays
     the same flat list every other style renders. */
  .section-header--emblem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px clamp(16px, 2.5vw, 34px);
    text-align: start;
  }

  .section-header--emblem .section-header__emblem {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: center;
    padding-inline-end: clamp(16px, 2.5vw, 34px);
    border-inline-end: 1px solid var(--sh-accent, #b48622);
    color: var(--sh-accent, #b48622);
  }

  .section-header--emblem .section-header__emblem svg {
    display: block;
    inline-size: clamp(40px, 4vw, 58px);
    block-size: auto;
  }

  .section-header--emblem .section-header__eyebrow {
    grid-column: 2;
    grid-row: 1;
  }

  .section-header--emblem .section-header__heading {
    grid-column: 2;
    grid-row: 2;
  }

  .section-header--emblem .section-header__points {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
  }

  /* Pipes here, not diamonds: the diamond is already the mark's business.

     And the spacing has to come with it. 22px is the base rule's figure,
     measured for a 5px rotated diamond, which needs air or it reads as a
     speck. A 1px rule does not -- at that spacing it sits alone in 44px and
     stops grouping the words it is meant to separate. The phone rules below
     already change the mark and its spacing together; this override changed
     only the mark. */
  .section-header--emblem .section-header__points {
    column-gap: 12px;
  }

  .section-header--emblem .section-header__point + .section-header__point::before {
    inline-size: 1px;
    block-size: 14px;
    margin-inline-end: 12px;
    rotate: none;
    opacity: 0.5;
  }

  .section-header--emblem .section-header__view-all {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
    margin-block-start: 0;
    padding-block-end: 6px;
    border-block-end: 1px solid currentcolor;
  }

  /* --- Style: pill ---------------------------------------------------- */
  /* The eyebrow becomes a solid tablet, the heading opens right out, and a
     pair of mirrored swashes hold it. */
  .section-header--pill .section-header__eyebrow {
    padding: 0.7em 1.6em;
    border-radius: 999px;
    background-color: var(--sh-accent, #b48622);
    color: var(--sh-pill-text, #12281c);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }

  .section-header--pill .section-header__heading {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    font-size: clamp(1.2rem, var(--sh-size, 2.2vw), 2.6rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .section-header--align-center.section-header--pill .section-header__heading {
    justify-content: center;
  }

  .section-header--pill .section-header__points {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Round, to answer the dot on the end of each swash. */
  .section-header--pill .section-header__point + .section-header__point::before {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    rotate: none;
  }

  .section-header--pill .section-header__view-all {
    padding-block-end: 6px;
    border-block-end: 1px solid currentcolor;
  }

  @media screen and (max-width: 749px) {
    /* One row will not survive a phone: stack it and drop the rule. */
    .section-header--emblem {
      grid-template-columns: minmax(0, 1fr);
    }

    .section-header--emblem .section-header__emblem {
      grid-column: 1;
      grid-row: auto;
      padding-inline-end: 0;
      border-inline-end: 0;
    }

    .section-header--emblem .section-header__eyebrow,
    .section-header--emblem .section-header__heading,
    .section-header--emblem .section-header__points,
    .section-header--emblem .section-header__view-all {
      grid-column: 1;
      grid-row: auto;
    }

    /* The link centred under the stacked copy, as every other section's is,
       its underline only as wide as the words rather than the whole row. */
    .section-header--emblem .section-header__view-all {
      justify-self: center;
    }
  }

  /* --- Style: split ---------------------------------------------------- */
  /* A banner header, not a centred block: eyebrow and heading stack on one
     side, the link becomes a bordered pill sitting on the other. Same
     row-spanning grid as emblem, just without a mark to anchor. */
  .section-header--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px clamp(16px, 2.5vw, 34px);
    text-align: start;
  }

  .section-header--split .section-header__eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .section-header--split .section-header__heading {
    grid-column: 1;
    grid-row: 2;
  }

  .section-header--split .section-header__points {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }

  .section-header--split .section-header__view-all {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    margin-block-start: 0;
    padding: 0.7em 1.6em;
    border: 1px solid var(--sh-accent, #b48622);
    border-radius: 999px;
    text-transform: uppercase;
  }

  /* On a phone the pill keeps its place beside the heading and loses its
     words instead of its position.
     --------------------------------------------------------------------
     It used to drop below the heading and stretch the width of the section.
     Side by side it does not fit: "Featured Collections" at 24px is 240px and
     "VIEW ALL COLLECTIONS" is another 244px once the tracking on twenty
     uppercase letters is counted -- 500px of content in 380px of screen.

     So the label goes and the arrow stays, in a round button the same height
     as the pill it replaces. That is ~180px back, and unlike shortening the
     wording it cannot break when a section gets a longer heading later.

     The words are not deleted, only taken off the screen: clipped to a 1px
     box rather than display:none, so the link still announces itself as
     "View all collections" to a screen reader instead of as an unnamed arrow. */
  @media screen and (max-width: 749px) {
    .section-header--split .section-header__view-all {
      inline-size: 40px;
      block-size: 40px;
      padding: 0;
      justify-content: center;
      gap: 0;
    }

    .section-header--split .section-header__view-all-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      padding: 0;
      margin: -1px;
      border: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* --- Phones ------------------------------------------------------------
     Only emblem and split had any mobile handling; the other four styles were
     getting their desktop treatment unmodified on a 412px screen. Placed last
     so it beats every style's own rules on source order rather than needing to
     out-specify each of them one at a time. */
  @media screen and (max-width: 749px) {
    /* The size setting cannot reach a phone: 2.6vw is 10.7px here, so the
       clamp floor always wins and every heading is the same 24px whatever the
       merchant chose. 24px is a lot for three words on a narrow screen -- the
       floor comes down rather than the setting being made responsive, because
       the setting is what desktop needs and this is the only place it fails. */
    .section-header__heading {
      font-size: clamp(1.3rem, var(--sh-size, 2.6vw), 3.25rem);
    }

    /* A quarter of an uppercase eyebrow's width is its letter-spacing. At
       0.22em, "See it in a real home" wraps to three lines and reads as gaps
       with letters between them. */
    .section-header__eyebrow {
      gap: 10px;
      font-size: 0.68rem;
      letter-spacing: 0.14em;
    }

    /* The three-point line under the heading ("Back again | Limited stock |
       Selling fast") is hidden on phones -- on a narrow screen it wraps and
       reads as clutter between the heading and the link. The text stays saved
       in the theme editor and still shows on desktop. The extra class keeps
       this ahead of the emblem style's own display rule. */
    .section-header .section-header__points {
      display: none;
    }

    /* Every ornament goes.
       ------------------------------------------------------------------
       The rules, diamonds, flourishes and the separators between points are
       all width doing decorative work -- they read as ornament on a wide page
       and as clutter on a 412px one, where they push a two-word heading onto
       two lines and a three-point list onto three.

       This is also what lets the spacing come in. The gaps below were sized
       to hold a rule or a diamond apart from the words either side of it;
       with nothing between them there is nothing to hold apart, and the
       header collapses to what it actually is -- a line of text, a line of
       points, and a link. Removing the ornament without also closing the gaps
       would just leave the holes where the ornament used to be. */
    .section-header .ornament,
    .section-header__diamond,
    .section-header .flourish {
      display: none;
    }

    .section-header {
      gap: 8px;
      margin-block-end: 16px;
    }

    .section-header--script .section-header__heading {
      flex-wrap: wrap;
      justify-content: center;
      gap: 0;
    }
  }
/* END_SNIPPET:section-header */

/* START_SNIPPET:section (INDEX:300) */
.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)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:302) */
.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:305) */
.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.slideshow-control--shape-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgb(255 255 255 / 0.55);
    color: var(--color-white);
  }

  .slideshow-control.slideshow-control--shape-outline:hover {
    border-color: rgb(255 255 255 / 0.9);
    background-color: rgb(255 255 255 / 0.18);
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:306) */
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:307) */
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%;
  }

  /* Numbers left, arrows right, on a phone.
     ------------------------------------------------------------------
     [controls-on-media] is positioned absolute with bottom: 0 and no inline
     offsets, so it shrink-wraps to its contents and sits wherever its static
     position falls -- roughly mid-slide. justify-content had nothing to
     distribute because the element was never as wide as the picture. So the
     fix is inset-inline, not alignment; the alignment was already correct and
     inert.

     The padding matches the slide's own 20px, so "01" lines up under the
     headline instead of floating near it.

     Narrowed to [controls-on-media] deliberately -- this snippet also draws
     the product gallery's controls, which are not overlaid and keep theirs. */

  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, .slideshow-controls__numbers) {
      --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,
  .slideshow-controls__numbers {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__numbers {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);
    letter-spacing: 0.05em;

    li {
      display: flex;
      align-items: center;
    }
  }

  /* Never wider than the screen. With twelve slides the full row was running
     off the edge; the windowing in assets/slideshow-numbers.js keeps it
     short, and this is the backstop. */
  .slideshow-controls__numbers {
    max-inline-size: 100vw;
    flex-wrap: nowrap;
  }

  /* Windowed out: kept in the list, just not painted. Written with the list
     in the selector because ".slideshow-controls__numbers li" above already
     sets display:flex, and a lone class loses to it. */
  .slideshow-controls__numbers li.slideshow-controls__numbers-item--collapsed {
    display: none;
  }

  .slideshow-controls__numbers-ellipsis {
    opacity: 0.55;
    padding-inline: 2px;
    letter-spacing: 0.08em;
    user-select: none;
  }

  .slideshow-controls__numbers-divider {
    width: 10px;
    height: 1px;
    background-color: currentcolor;
    opacity: 0.4;
    transition: width 0.25s ease, opacity 0.25s ease;
  }

  .slideshow-controls__numbers li:has(button[aria-selected='true']) + .slideshow-controls__numbers-divider {
    width: 32px;
    opacity: 1;
  }

  slideshow-controls:has(.slideshow-controls__numbers) .slideshow-controls__arrows .slideshow-control {
    color: var(--color-white);
    opacity: 1;
  }

  slideshow-controls:has(.slideshow-controls__numbers) .slideshow-controls__arrows {
    gap: 12px;
    margin-inline-start: 20px;
  }

  .slideshow-controls__numbers button {
    height: auto;
    width: auto;
    padding: var(--padding-2xs) var(--padding-3xs);
    opacity: 0.55;
    transition: opacity 0.2s ease;

    &[aria-selected='true'] {
      opacity: 1;
    }
  }

  .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;
      }
    }
  }
  @media screen and (max-width: 749px) {
    /* Selector matched to the one it has to beat, not to the job it does.
       Further down this file, [controls-on-media]:not([thumbnails])
       [pagination-position='left'] sets width: fit-content and align-self:
       flex-start -- four attributes, so anything shorter loses to it however
       late it appears. And an explicit width beats stretching between insets,
       so the element shrink-wrapped and space-between had no free space to
       distribute. Both had to go together: width: auto to let inset-inline
       size it, and only then does the alignment mean anything.

       The padding matches the slide's own 20px so "01" lines up beneath the
       headline, on the dark side of the gradient rather than over the picture.

       Kept to [controls-on-media]: the product gallery's controls come from
       this same snippet, are not overlaid, and keep what they have. */
    slideshow-controls[controls-on-media]:not([thumbnails])[pagination-position='left'] {
      width: auto;
      inset-inline: 0;
      justify-content: space-between;
      padding-inline: 20px;

      /* sections/slideshow.liquid lifts these 40px off the bottom, which is
         right on a desktop banner and leaves them stranded mid-picture on a
         phone. Back to the edge -- the control's own 44px touch target still
         holds the numbers clear of it, so 0 here reads as comfortable rather
         than flush. */
      bottom: 0;
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:309) */
/*
   * 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);
    }

    /* A chosen mobile shape replaces the mobile height rather than sitting
       beside it: min-height would keep the taller of the two and the ratio
       would never show. Both fall back to what they were, so a slideshow with
       no shape set behaves exactly as before. Desktop is untouched -- the
       rule above starts at 750px, this one stops below it. */
    @media screen and (max-width: 749px) {
      aspect-ratio: var(--slideshow-mobile-ratio, auto);
      min-height: var(--slideshow-mobile-ratio-set, var(--slide-min-height));
    }
  }

  .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:312) */
.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:summary-icon-styles (INDEX:320) */
details[open] > summary .icon-animated > svg {
    transform: rotate(180deg);
  }

  summary .svg-wrapper {
    margin-inline-start: auto;
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Shared plus/minus icon animations */
  summary .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  details[open] > summary .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  details[open] > summary .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }
/* END_SNIPPET:summary-icon-styles */

/* START_SNIPPET:swatch-styles (INDEX:321) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-block-styles (INDEX:324) */
.text-block {
    width: var(--width, 100%);
  }

  .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: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. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .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);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:325) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:326) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [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, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:328) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    /* Above the header, not below it.

       On a wide viewport this dialog is opened with show() rather than
       showModal(), so the page can squeeze alongside it -- and a non-modal
       dialog is not in the browser's top layer, so it stacks by z-index like
       anything else. --layer-sticky is 8 and the sticky header is 18, so the
       header was painting over the drawer. Below 990px the drawer is modal,
       lives in the top layer, and never had the problem, which is what made
       this look like a desktop-only oddity rather than a stacking bug.

       Based on the drawer layer instead, and the stack order still rides on
       top of it, so two open drawers keep their order relative to each
       other while both clear the header. */
    z-index: calc(var(--layer-menu-drawer) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-confirm (INDEX:340) */
.variant-confirm {
    inline-size: min(380px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    overflow: visible;
  }

  .variant-confirm::backdrop {
    background: rgb(8 16 12 / 0.55);
  }

  .variant-confirm__inner {
    position: relative;
    padding: 26px 24px 22px;
    border-radius: 14px;
    background: #f7f4ea;
    color: #12281c;
    text-align: center;
  }

  .variant-confirm__eyebrow {
    margin: 0 0 10px;
    color: #8a8f80;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .variant-confirm__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .variant-confirm__others {
    margin: 8px 0 0;
    color: #4a4a44;
    font-size: 0.86rem;
  }

  .variant-confirm__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-block-start: 20px;
  }

  .variant-confirm__add {
    inline-size: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: #12281c;
    color: #f7f4ea;
    font-family: inherit;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .variant-confirm__link {
    color: #b48622;
    font-size: 0.86rem;
    text-underline-offset: 3px;
  }

  .variant-confirm__close {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 10px;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: #8a8f80;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
  }
/* END_SNIPPET:variant-confirm */

/* START_SNIPPET:variant-picker-styles (INDEX:342) */
/* 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-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .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);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .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;
    background-color: var(--color-variant-background);
    color: inherit;
    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;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-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);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:343) */
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-background-styles (INDEX:344) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:345) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:347) */
.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-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-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */

/* START_SNIPPET:wishlist-icon-styles (INDEX:350) */
.wishlist-icon {
    display: inline-flex;
  }

  .wishlist-icon__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .wishlist-icon__button:hover {
    background: rgb(255 255 255 / 1);
  }

  .wishlist-icon__svg {
    width: 16px;
    height: 16px;
  }

  .wishlist-icon__svg path {
    fill: #0f2318;
    transition: fill 0.2s ease;
  }

  /* The solid layer stays out of sight everywhere except a saved phone card
     (below). Hidden by opacity, not fill: every 'path' rule here and in
     item-styles recolours it along with the outline, and letting those
     rules colour it means the saved one is red with no rule of its own. */
  .wishlist-icon__svg .wishlist-icon__fill {
    opacity: 0;
    transition: fill 0.2s ease, opacity 0.2s ease;
  }

  /* The heart icon is an outline path -- two contours making a ring -- so
     recolouring the fill only recolours a thin stroke, which is far too
     quiet to read as "saved". The whole button flips instead: filled red
     with a white heart, plus a one-shot pop so the change is felt as well
     as seen. */
  wishlist-button[active] .wishlist-icon__button {
    background: #d94b3f;
  }

  wishlist-button[active] .wishlist-icon__button:hover {
    background: #c43e33;
  }

  wishlist-button[active] .wishlist-icon__svg path {
    fill: #fff;
  }

  /* PHONE: no disc, just the heart.

     A 32px white circle is a lot of real estate on a ~170px card, and there
     are already two other white discs on it. Dropping the disc gives the
     picture that space back.

     This heart is ONE path with two contours and fill-rule="evenodd", which
     knocks the interior out and leaves a ring -- that is why the desktop
     treatment recolours the whole button rather than the path. Switching the
     rule to nonzero was meant to fill the interior, but the two contours wind
     in opposite directions, so under nonzero the hole stays open and a saved
     heart came out as a red ring. The solid state is the separate
     .wishlist-icon__fill layer instead, faded in when saved.

     Light, because without the disc the heart sits directly on the dark card. */
  @media screen and (max-width: 749px) {
    .item .wishlist-icon__button,
    .item wishlist-button[active] .wishlist-icon__button,
    .item wishlist-button[active] .wishlist-icon__button:hover {
      background: none;
      width: 26px;
      height: 26px;
    }

    .item .wishlist-icon__svg {
      width: 20px;
      height: 20px;
    }

    .item .wishlist-icon__svg path {
      fill: rgb(255 255 255 / 0.92);
      fill-rule: evenodd;
    }

    .item wishlist-button[active] .wishlist-icon__svg path {
      fill: #d94b3f;
      fill-rule: nonzero;
    }

    /* Coloured by the rule above along with the outline, so only shown here. */
    .item wishlist-button[active] .wishlist-icon__fill {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    wishlist-button[active] .wishlist-icon__svg {
      animation: wishlist-pop 0.28s ease;
    }

    @keyframes wishlist-pop {
      0% {
        scale: 1;
      }

      45% {
        scale: 1.35;
      }

      100% {
        scale: 1;
      }
    }
  }
/* END_SNIPPET:wishlist-icon-styles */