/** Shopify CDN: Minification failed

Line 2342:2 Unexpected "{"
Line 2342:3 Expected identifier but found "%"
Line 2342:37 Expected identifier but found whitespace
Line 2343:4 Unexpected "("
Line 2343:61 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:3) */
collection-links-component {
    --alignment: flex-start;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:featured-product (INDEX:9) */
.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:10) */
.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:11) */
.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);
  }

  @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:header-announcements (INDEX:12) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  /* JR mode toggle — far right of the bar, aligned to the content column edge
     (--util-page-margin-offset = the .section grid's margin width) */
  .announcement-bar__mode-toggle {
    position: absolute;
    right: var(--util-page-margin-offset, var(--page-margin, 16px));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-foreground);
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }

  /* JR localization dropdown — mirrors the mode toggle, far left instead of
     right. Without position:absolute this renders as a normal block and
     pushes the whole bar taller (the trigger's own text/line-height adds a
     row above the centred announcement slides). */
  .announcement-bar__localization {
    position: absolute;
    /* NOT var(--util-page-margin-offset) here -- verified live that this grid
       container's containing block for absolutely-positioned children
       already starts at the true page-margin edge, so adding the margin
       offset again doubled it (measured 52px against the logo's real 26px).
       left:0 lands exactly on the margin; mirrors the mode toggle's `right`
       value only in intent, not in the actual property value needed. */
    left: 0;
    /* announcement-bar-component (.announcement-bar__slider) is also
       position:relative and comes later in source order, so with both at
       the same implicit z-index it painted on top and silently ate every
       click on this button -- verified live via elementFromPoint. Any value
       >= 1 fixes that; the real reason for the value below is the header.

       JR, 2026-08-06 -- THE Z-INDEX THAT ACTUALLY MATTERS. Read before
       touching anything about this dropdown's paint order:

       position:absolute + z-index here makes THIS element a stacking
       context, so every z-index inside it (including the panel's own, set
       below) is scoped to it and can only reorder its own descendants. To
       the rest of the page the whole dropdown paints as one unit AT THIS
       VALUE. It used to be 2.

       Meanwhile the base theme gives the header its own stacking context:
       styles.css has `.header-section { position: relative; z-index:
       var(--layer-menu-drawer) }` = 18 (sticky variant, same value). Both
       that and this are children of #header-group, which is position:static
       and creates NO stacking context -- so they compete directly in the
       root context: 2 vs 18. The header won, painting over the top of the
       open panel (measured: panel top 61px, header row 43-110px, so the
       first row -- "Sweden | Svenska" -- was completely buried, which read
       as that option having disappeared entirely).

       This is why raising the PANEL's z-index never worked, across five
       attempts: 20 inside a context pinned at 2 is still 2 to the header.
       The container is the ceiling, so the container is what has to clear
       18. Anchored to the same token the header uses so the two can't
       silently drift apart. */
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Orders the panel above its own trigger button inside the container's
     stacking context. NOTE (corrected 2026-08-06): an earlier version of
     this comment claimed this value was what lifted the panel clear of the
     mega-menu, and that it "needs to clear 12". That was wrong, and it sent
     four later attempts chasing this number instead of the real one -- this
     value cannot affect anything outside .announcement-bar__localization,
     because that element is a stacking context. See the long note on its
     z-index above for what actually governs paint order here. Any value
     above the button's is equivalent; this one is not load-bearing. */
  .announcement-bar__localization .localization-wrapper {
    z-index: 20;
  }

  /* JR, 2026-08-05 follow-up: the z-index above only helps once the cursor
     is already over the open panel -- getting there from this trigger
     (far left of the bar) means crossing straight down through Bedroom's
     own hover zone in the header row in between. That mega-menu opens on
     plain CSS :hover, which doesn't care what's painted on top of it, so
     it opened regardless of the panel's z-index (Jacob, 2026-08-05: "opens
     the bedroom mega menu instead"). #header-group wraps both this bar and
     the header section, so :has() here can reach across them and kill
     pointer-events on the whole left nav column while the panel is open --
     hovering through it can no longer trigger anything underneath. */
  #header-group:has(.announcement-bar__localization .localization-wrapper:not([hidden])) .header__column--left {
    pointer-events: none;
  }

  /* JR, 2026-08-06: three orphaned declarations sat here -- `top: 50%;
     transform: translateY(-50%); color: var(--color-foreground);` plus a
     stray closing brace, a duplicated tail of the .announcement-bar__mode-
     toggle rule above, left behind when 4ca3b9c inserted the localization
     rules and lost the selector line. At the top level of a stylesheet that
     is a parse error: the browser treated the declarations as the start of a
     selector, kept consuming looking for a `{`, and swallowed the whole
     .announcement-bar__mode-toggle:hover rule below into the garbage
     prelude -- so the mode toggle silently had no hover state. Removed; the
     intact rule above already carries all three declarations. */

  .announcement-bar__mode-toggle:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  }

  /* No focus box on click (Safari shows :focus-visible on button click); the
     JS also blurs after toggling. Keyboard focus keeps a subtle ROUND ring
     (border-radius above makes the outline circular, not a dark square). */
  .announcement-bar__mode-toggle:focus { outline: none; }
  .announcement-bar__mode-toggle:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.4);
    outline-offset: 2px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* JR: centre the message across the full bar. The slides column is already
     centred at the viewport midpoint and the mode toggle is positioned
     absolutely (out of flow), so centring the glyphs here lands them on the
     true centre regardless of the toggle. */
  .announcement-bar__text {
    text-align: center;
  }

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

/* START_SECTION:header (INDEX:13) */
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;
  }

  @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__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:is(:hover, [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:is(:hover, [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:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [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__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--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;
  }

  /* JR: more breathing room between the wordmark and the first nav item */
  .header__column--left {
    gap: clamp(1.75rem, 3vw, 3rem);
  }

  /* JR, 2026-08-06: Bedroom/Bathroom/Fragrance (and Help/Journal/Pro on the
     right) sit at literally zero gap between their own outer boxes --
     confirmed via getBoundingClientRect (Bedroom.right === Bathroom.left to
     several decimals). <nav class="menu-list"> IS the real flex row, but
     gap there is a no-op: it has exactly one direct child, <overflow-list>,
     which does its OWN internal flex layout of the <li> items inside a
     shadow root (confirmed via .shadowRoot) -- light-DOM gap/margin on
     menu-list or overflow-list can't reach in there. The <li> elements
     themselves are slotted light-DOM content, though, so margin on
     menu-list__list-item directly still works; zero it on the last item
     (the hidden "More" overflow trigger when nothing has overflowed) so it
     doesn't add trailing space after the last real item. */
  .header__column--left .menu-list__list-item {
    margin-inline-end: 0.75rem;
  }

  .header__column--left .menu-list__list-item:last-of-type {
    margin-inline-end: 0;
  }

  /* Help/Journal/Pro aren't header-menu/overflow-list at all -- they're
     snippets/header-secondary-nav.liquid's own .header-secondary__item,
     a completely different component with the same zero-gap symptom. */
  .header-secondary__item {
    margin-inline-end: 0.75rem;
  }

  .header-secondary__item:last-of-type {
    margin-inline-end: 0;
  }

  /* JR, 2026-08-05, Son of a Tailor reference: Bedroom/Bathroom/Fragrance,
     then Search, in that reading order. search_position:"left" lands search
     in this same flex column, but header.liquid's order-string construction
     always sequences it BEFORE the menu (logo,search,menu,...) -- overriding
     here rather than touching that fragile Liquid, since this column is
     display:flex and respects the CSS order property regardless of DOM
     order. logo_position is now "center" so it's out of this column
     entirely; only menu (order:0, untouched) and search need reordering. */
  @media screen and (min-width: 750px) {
    .header__column--left .search-action {
      order: 1;
      /* the actual gap-before-search fix lives in snippets/search.liquid's
         [data-menu-style='menu'] .header__column--left .search-action rule
         -- that attribute-selector rule outranks this one's specificity, so
         a margin-inline-start here would be silently dead weight. */
    }
  }

  /* JR, 2026-08-05: Search/Account/Cart text labels (actions_display_style:
     text) rendered at the button's own default weight (400) instead of
     matching the menu links (500) -- verified via computed style, same
     family/size/case already, just weight was off. !important because
     .action__cart and friends carry their own base font-weight rule later
     in the cascade at equal specificity; confirmed the plain override lost
     that tie on cart specifically (search picked it up fine on its own). */
  .header-actions__text-style,
  .search-action .header-actions__action {
    font-weight: 500 !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

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

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

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

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

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

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

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* 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 .localization-sep {
    opacity: 0.35;
    font-weight: 300;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:hero (INDEX:14) */
.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:jr-also-viewed (INDEX:15) */
.jr-also-viewed {
    padding-block: var(--jr-av-pad-top, 0) var(--jr-av-pad-bottom, 0);
    background: var(--color-background);
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    box-sizing: border-box;
  }

  .jr-also-viewed__heading {
    font-family: var(--font-heading--family);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1rem;
    margin: 0 0 18px;
  }

  /* jr-colgroup-card's own CSS lives in jr-collection-group.liquid's scoped
     stylesheet, so it isn't available to this section by default -- same
     gotcha hit building the campaign Shop the Look grid, this time
     reproduced IN FULL (the previous partial copy plus a flex-carousel
     container, rather than this exact grid, is what caused the broken
     huge-gap layout Jacob flagged 2026-07-30). Every rule below is a
     verbatim copy of jr-collection-group.liquid's card + grid CSS. */
  .jr-also-viewed .jr-colgroup__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: 40px;
  }

  .jr-also-viewed .jr-colgroup__card {
    display: flex;
    flex-direction: column;
  }

  .jr-also-viewed .jr-colgroup__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    margin-bottom: 14px;
  }

  .jr-also-viewed .jr-colgroup__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .jr-also-viewed .jr-colgroup__card:hover .jr-colgroup__media img {
    transform: scale(1.02);
  }

  .jr-also-viewed .jr-cardmeta__top,
  .jr-also-viewed .jr-cardmeta__dots {
    padding-inline: 10px;
  }

  .jr-also-viewed .jr-cardmeta__dots {
    margin-top: 24px;
  }

  @media screen and (max-width: 989px) {
    .jr-also-viewed .jr-colgroup__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:jr-also-viewed */

/* START_SECTION:jr-article-campaign (INDEX:16) */
.jr-campa {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .jr-campa__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(32px, 4vw, 52px);
  }

  /* Top Caption */
  .jr-campa__kick {
    margin: 0 0 16px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  /* Heading 1 */
  .jr-campa__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: var(--jr-editorial-h1-weight);
    font-size: var(--jr-editorial-h1-size);
    line-height: var(--jr-editorial-h1-leading);
    letter-spacing: var(--jr-editorial-h1-tracking);
  }

  /* Date Stamp */
  .jr-campa__meta {
    margin: 20px 0 0;
    font-size: var(--jr-editorial-meta-size);
    letter-spacing: var(--jr-editorial-meta-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-meta-color);
  }

  .jr-campa__hero { margin: 0 0 clamp(28px, 3.5vw, 48px); }
  .jr-campa__hero-img { width: 100%; height: auto; display: block; }

  /* full width, left-aligned, large print -- the note that introduces the
     shoot, not a caption -- matching the wide-statement treatment on the
     Sustainability page (.jr-prin__statement-body), per Jacob 2026-07-27.
     Everything further down (the gallery's own heading/text and detail
     blocks) stays its own smaller size -- this larger size is specific to
     the shoot's opening note. */
  .jr-campa__note {
    max-width: none;
    margin: 0 0 clamp(36px, 4vw, 56px);
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.375rem, 2.3vw, 1.75rem);
    line-height: 1.5;
    text-align: left;
    color: rgb(var(--color-foreground-rgb) / 0.82);
  }
  .jr-campa__note p { margin: 0 0 1.1em; }
  .jr-campa__note > :last-child { margin-bottom: 0; }

  /* Shoot gallery: a 6-unit grid so full/half/third photos (the live site's
     pg-w-full / pg-w-1/2 / pg-w-1/3 vocabulary) sit side by side exactly as on
     jun-per.com, just re-expressed as grid spans -- full=6, half=3 (two per
     row), third=2 (three per row). An odd one out simply leaves the rest of
     its row empty, same as the live image-grid section would.
     column-gap is the site's usual 2px hairline, reversing the earlier
     "generous gap" call (Jacob, 2026-07-27: "the side by side photos [should]
     only have a hairline between them") -- that only applies to photos
     actually sitting side by side (a half/half or third/third/third row);
     row-gap (the space between one gallery moment and the next -- a photo
     row, a detail block, a heading) stays the generous clamp, a different
     relationship than two halves of one row. */
  .jr-campa__gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 2px;
    row-gap: clamp(12px, 1.6vw, 24px);
    /* start, not the grid default (stretch) -- a shorter photo in a pair sits
       at its own natural height instead of being pulled taller with an empty
       gap under it to match its taller neighbour */
    align-items: start;
  }

  .jr-campa__gitem {
    margin: 0;
    grid-column: span 6;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }
  .jr-campa__gitem[data-size="half"] { grid-column: span 3; }
  .jr-campa__gitem[data-size="third"] { grid-column: span 2; }

  /* Natural aspect ratio, no forced crop -- matches the live pages, where a
     half-width pair can be one portrait and one landscape sitting unevenly
     side by side rather than cropped to match. */
  .jr-campa__gimg { width: 100%; height: auto; display: block; }

  /* inline captions between photos (per-colour callouts etc.) -- narrower
     and centred, same measure as .jr-campa__note. Archivo throughout (Jacob:
     "stick to archive"), not the editorial serif -- these are plain shoot
     captions, not a headline moment. No margin of their own: the grid's own
     gap already spaces every item from its neighbours, same as the photos,
     so a heading/text pair doesn't need to stack a second gap on top of it
     (that stacking was the "too big" white space, and since this is one
     shared component it was on every one of these). The one exception is a
     text immediately following a heading -- they're one caption, so it's
     pulled tighter than the grid gap via a negative offset. */
  .jr-campa__gheading, .jr-campa__gtext {
    grid-column: 1 / -1;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
  }
  .jr-campa__gheading {
    font-family: var(--jr-font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
  }
  .jr-campa__gtext {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgb(var(--color-foreground-rgb) / 0.82);
  }
  .jr-campa__gheading + .jr-campa__gtext {
    margin-top: calc(10px - clamp(12px, 1.6vw, 24px));
  }

  @media screen and (max-width: 700px) {
    .jr-campa__gitem[data-size="half"],
    .jr-campa__gitem[data-size="third"] {
      grid-column: span 6;
    }
  }

  /* alternating photo + text block -- the alternative to a standalone
     centred heading/text pair, same side-by-side language as the PDP
     fabric-detail sections. Spans the full 6-unit row like heading/text
     do, since it's a self-contained two-column unit, not a grid item that
     shares a row with photos. */
  /* 65/35 split, bottom-aligned -- matching the actual PDP fabric-detail
     convention (.jr-detail: flex 0 0 58%, align-items:flex-end) more
     closely than the first pass's 50/50 + vertically-centered attempt did
     (Jacob, 2026-07-27: "feel like we failed on the photograph with text
     on the side blocks"). */
  .jr-campa__detail {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: clamp(24px, 4vw, 64px);
  }
  .jr-campa__detail--reverse { flex-direction: row-reverse; }

  .jr-campa__detail-media {
    flex: 0 0 65%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }
  .jr-campa__detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* no max-width cap: this section spans the full page width (unlike the
     PDP's own .jr-detail__text, boxed inside the narrower media column,
     where a 42ch cap never actually binds) -- capped here, the text's
     flex-grow share went unused and sat as dead space on the OUTER edge
     (before the text in the reversed layout, after it otherwise) instead
     of the text actually reaching the page margin (Jacob, 2026-07-27). */
  .jr-campa__detail-text { flex: 1 1 auto; }

  .jr-campa__detail-eyebrow {
    margin: 0 0 12px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-campa__detail-h {
    margin: 0 0 12px;
    font-family: var(--jr-font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .jr-campa__detail-body {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgb(var(--color-foreground-rgb) / 0.82);
  }

  @media screen and (max-width: 700px) {
    .jr-campa__detail,
    .jr-campa__detail--reverse {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
    }
    .jr-campa__detail-media { flex-basis: auto; }
    .jr-campa__detail-text { max-width: none; }
  }

  /* ---------- shoppable photo tags ----------
     Jacob, 2026-07-25: same pattern as the tag dots on jun-per.com photo
     campaign pages. .jr-tagwrap is added alongside the hero/gallery image
     classes above so tags can be positioned relative to that exact image,
     not the whole section.
     .jr-ptag itself (dot/card) now lives in the global assets/jr-tokens.css
     -- rendered from too many other sections too (Story, all 4 PDPs) to
     keep re-pasting here. */
  .jr-tagwrap { position: relative; }

  /* Shop the look: a short product grid closing out the shoot. */
  .jr-campa__shop {
    margin-top: clamp(48px, 5vw, 80px);
    padding-top: clamp(32px, 3.5vw, 48px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
  }

  .jr-campa__shop-h {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--jr-font-sans);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
  }

  .jr-campa__shop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
    row-gap: clamp(28px, 3vw, 40px);
  }

  /* jr-colgroup-card (shared with jr-collection-group's preview strips)
     renders .jr-colgroup__card/__media -- that section's own stylesheet
     carries their layout CSS, but this page never renders that section,
     so it's reproduced here rather than assumed present. jr-card-meta's
     own name/material/price/dots styling is safe to just inherit -- it
     ships in the snippet's own {% stylesheet %}, not a section's. */
  .jr-colgroup__card {
    display: flex;
    flex-direction: column;
  }

  .jr-colgroup__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    margin-bottom: 14px;
  }

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

  .jr-colgroup__card:hover .jr-colgroup__media img {
    transform: scale(1.02);
  }

  @media screen and (max-width: 989px) {
    .jr-campa__shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media screen and (max-width: 599px) {
    .jr-campa__shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
/* END_SECTION:jr-article-campaign */

/* START_SECTION:jr-article-guide-detail (INDEX:17) */
.jr-gdetail {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: 0 clamp(56px, 6vw, 96px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
    /* numbering source for .jr-gdetail__step headings below -- reset once
       on the article root since each chunk renders as its own independent
       sibling .row (not nested in one shared container), and CSS counters
       persist correctly across sibling subtrees under a shared ancestor. */
    counter-reset: jr-gdetail-step;
  }

  /* hero -- inset inside the page margins like every other element on
     this page (Jacob, 2026-07-14: was full-bleed, matching the home
     hero's breakout convention, but that read as a bug here rather than
     a deliberate choice next to a page where everything else respects
     the margin). */
  .jr-gdetail__hero {
    margin: 0 var(--page-margin) clamp(32px, 4vw, 48px);
    position: relative;
  }

  .jr-gdetail__hero-img {
    width: 100%;
    height: clamp(420px, 62vw, 760px);
    object-fit: cover;
    display: block;
  }

  /* corner-positioning system for the tagline overlay (Jacob, 2026-07-14):
     different photos put their clearest area in different corners, so
     this is a per-article choice (custom.hero_tagline_position), not a
     fixed design decision. inset is a small fixed clearance from the
     (already page-margined) photo's own edges -- NOT tied to
     --page-margin again, which would double up the two insets and push
     the tagline much further in than intended. text-align is inherited
     down to .jr-gdetail__hero-tagline, so it doesn't need its own rule. */
  .jr-gdetail__hero-overlay {
    position: absolute;
    inset: clamp(20px, 3vw, 40px);
    display: flex;
  }
  .jr-gdetail__hero-overlay--top { align-items: flex-start; }
  .jr-gdetail__hero-overlay--bottom { align-items: flex-end; }
  .jr-gdetail__hero-overlay--left { justify-content: flex-start; text-align: left; }
  .jr-gdetail__hero-overlay--right { justify-content: flex-end; text-align: right; }

  /* small tracked-caps eyebrow above the hero line -- same lettering as the
     "ELEVATOR STORIES" label on the story hero / meta bar (Jacob,
     2026-07-14), sitting over the photo so it takes the same white/black
     treatment (and matching shadow) as the tagline below it. */
  .jr-gdetail__hero-eyebrow {
    margin: 0 0 clamp(10px, 1vw, 16px);
    font-family: var(--jr-font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
  }
  .jr-gdetail__hero-eyebrow--black {
    color: #000;
    text-shadow: 0 1px 12px rgb(255 255 255 / 0.35);
  }

  /* the punchy hero line -- set in --font-heading--family (Archivo), same
     as the Sustainability page's "Good materials, honestly made" hero
     (Jacob, 2026-07-22: match that font here) -- was --jr-font-serif
     before, which read inconsistently against that other hero.
     Uppercase removed in the same pass (Jacob, 2026-07-22, cont.: "doesn't
     quite work... lower case letters or a thinner font") -- the font-family
     match alone wasn't the fix: that Sustainability hero renders in normal
     sentence case (.jr-lph2__h has no text-transform), so Archivo + caps
     here was still a different visual treatment from the thing it was
     matched against, and Archivo caps at this size/weight reads heavy in a
     way lowercase doesn't. Sentence case now, letting the font's actual
     weight (400) show instead of the blockier all-caps forms. max-width is
     tuned (not just a round number) so this wraps to two lines across
     the WHOLE font-size clamp range below, not just at narrow viewports
     -- a fixed-px width holds a fixed line-length while font-size keeps
     growing with viewport, so a width picked for the smaller end of the
     clamp can quietly gain a third line once the font hits its ceiling
     at wide desktop widths. Verified empirically (Range.getClientRects
     line count) at 720-752px across the full 28.8-48px font range;
     46rem = 736px sits in the middle of that safe band (Jacob, 2026-07-14)
     -- re-check this if casing/weight changes shift wrap points again. */
  .jr-gdetail__hero-tagline {
    margin: 0;
    max-width: 46rem;
    font-family: var(--font-heading--family);
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    color: #fff;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
  }

  /* operator-chosen colour variant (custom.hero_tagline_color) for
     photos whose readable corner is light rather than dark -- shadow
     direction flips too, a dark photo needs a light glow behind black
     text the same way a light photo needs a dark one behind white. */
  .jr-gdetail__hero-tagline--black {
    color: #000;
    text-shadow: 0 1px 12px rgb(255 255 255 / 0.35);
  }

  .jr-gdetail__hairline {
    margin-inline: var(--page-margin);
    border-top: 1px solid var(--color-foreground);
  }

  /* meta bar itself is the shared .jr-emeta* component -- see
     jr-tokens.css and snippets/jr-editorial-metabar.liquid. */

  /* Heading 1 -- smaller and left-aligned here; the hero tagline carries
     the visual weight, this is the real (SEO) title */
  .jr-gdetail__headline {
    margin: clamp(28px, 3.5vw, 44px) var(--page-margin) 0;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.3;
    max-width: 46rem;
  }

  /* punchy intro line under the title, left-aligned. Uses the shared
     "Leading Summary" dek tokens (Jacob, 2026-07-14: "this double headline
     works poorly") -- copying Story's standfirst clamp verbatim gave this
     the EXACT font-size and weight as .jr-gdetail__headline just above it,
     so the two read as two stacked headlines rather than a title and its
     dek. Story gets away with a big standfirst because ITS "headline" is
     the giant serif first name in a completely different register; Guide
     Detail's headline is the real (SEO) title at a modest size, so its dek
     needs to sit clearly BELOW it -- smaller and a step lighter in colour,
     which is exactly what these tokens (already used by Campaign) do. */
  .jr-gdetail__standfirst {
    max-width: 34rem;
    margin: clamp(14px, 1.6vw, 20px) var(--page-margin) 0;
    font-weight: var(--jr-editorial-dek-weight);
    font-size: var(--jr-editorial-dek-size);
    line-height: var(--jr-editorial-dek-leading);
    color: var(--jr-editorial-dek-color);
  }
  .jr-gdetail__standfirst p { margin: 0; }

  /* three-column body -- each chunk is its OWN independent grid box
     (Jacob, 2026-07-14, cont.: found via screen recording that a later
     chunk's image was painting over an earlier one that should already
     have released). Previously this was one shared `display:grid` with
     every chunk's media/text as flat auto-placed children, relying on
     row-gap to bound each sticky image to its own auto-placed row --
     that turned out not to reliably constrain position:sticky's
     containing block in real scrolling, only in rest-state geometry
     checks. Giving each row `position: relative` makes it the sticky
     child's containing block explicitly, which IS reliable. Consecutive
     rows space via margin-top only (never bottom), so adjacent margins
     collapse to a deterministic value instead of an ambiguous sum. */
  .jr-gdetail__row {
    display: grid;
    grid-template-columns: 45% 15% 1fr;
    margin: clamp(48px, 6vw, 96px) var(--page-margin) 0;
    position: relative;
    align-items: start;
  }

  /* the very first rendered chunk (row, or a quote that happens to lead
     the sequence) uses a smaller gap from the headline above it than
     the between-rows gap -- these were always two deliberately
     different values, not the same one reused. */
  .jr-gdetail__row--first {
    margin-top: clamp(40px, 5vw, 64px);
  }

  /* deliberately NOT sticky (Jacob, 2026-07-14) -- it used to pin for the
     whole grid height, which read as the intro paragraph "persisting" on
     screen long after a reader had scrolled past it. Renders once, in
     the first row only, scrolls away with the rest of that chunk like
     everything else. */
  .jr-gdetail__summary {
    grid-column: 2;
    align-self: start;
  }

  /* Leading Summary -- a step heavier than Body Text (the shared
     --jr-editorial-dek-weight token), not just lighter-weight body copy
     reflowed into a second column (Jacob, 2026-07-14). */
  .jr-gdetail__summary-text {
    margin: 0;
    font-weight: var(--jr-editorial-dek-weight);
    font-size: var(--jr-editorial-body-size);
    line-height: var(--jr-editorial-body-leading);
    color: var(--jr-editorial-body-color);
  }

  .jr-gdetail__media {
    grid-column: 1;
    position: sticky;
    top: calc(var(--header-height, 80px) + 28px);
    align-self: start;
  }

  .jr-gdetail__media img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* landscape chunk image spanning the media + middle columns -- still
     inside the page margins (unlike the full-bleed breakout below), and
     static rather than sticky: a 60%-wide image is prominent enough on
     its own without also pinning in place while the reader scrolls past
     the text beside it. */
  .jr-gdetail__media--wide {
    grid-column: 1 / span 2;
    position: static;
    top: auto;
  }

  .jr-gdetail__media-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-background);
  }

  .jr-gdetail__media-pair img { aspect-ratio: 4 / 5; object-fit: cover; }

  /* .jr-gdetail__media (not just the bare class) in the selector to beat
     Horizon's own base-theme reset (":first-child:empty + p" -- an image
     directly followed by a paragraph gets zero top margin), which
     otherwise silently wins over a plain single-class selector here
     regardless of source order -- same fix already applied to
     jr-story__media-cap in jr-article-story.liquid; this file just never
     got it. Confirmed via computed style: was rendering 0px despite the
     10px written below. Value matched to jr-story's 16px so Guides and
     Stories captions read the same. */
  .jr-gdetail__media .jr-gdetail__media-cap {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* empty state for a chunk authored before its real photo exists --
     deliberately labelled, not just a quiet tint, so an unfinished chunk
     can't be mistaken for a finished one if the article goes live before
     photography is ready (see snippets/jr-editorial-chunks.liquid). Fixed,
     modest height rather than an aspect-ratio scaled to the 45% column --
     this box is purely a placeholder, never the thing a reader is meant
     to look at, so it shouldn't be tall enough to dictate the row's own
     height (a real photo later replaces it entirely and sizes off its
     own aspect ratio, unaffected by this rule either way). Sized to sit
     comfortably under a typical single-paragraph chunk's own text
     height, so the sticky rail still has real room to hold in place
     while that text scrolls past, even before a real photo exists. */
  .jr-gdetail__ph {
    height: 260px;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
  }
  .jr-gdetail__ph::after {
    content: 'Photo coming soon';
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.35);
  }

  .jr-gdetail__text {
    grid-column: 3;
    max-width: 34rem;
    font-size: var(--jr-editorial-body-size);
    line-height: var(--jr-editorial-body-leading);
    color: var(--jr-editorial-body-color);
    padding-bottom: clamp(24px, 3vw, 40px);
  }

  .jr-gdetail__text > :first-child { margin-top: 0; }
  .jr-gdetail__text > :last-child { margin-bottom: 0; }
  .jr-gdetail__text p { margin: 0 0 1.3em; }

  /* italic Q&A-style lead-ins, sentence case (Jacob, 2026-07-14: "copy
     paste of the Danijela format") -- for a plain in-body subhead with no
     numbering. Sans, per "serif is reserved for the hero tagline + people's
     names". Guides structured as a numbered list use .jr-gdetail__step
     below instead, which is a deliberately different, non-italic treatment. */
  .jr-gdetail__text h2,
  .jr-gdetail__text h3 {
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    margin: 1.6em 0 0.4em;
  }
  .jr-gdetail__text h2 { font-size: 0.8125rem; }
  .jr-gdetail__text h3 { font-size: 0.75rem; }
  .jr-gdetail__text > h2:first-child,
  .jr-gdetail__text > h3:first-child { margin-top: 0; }

  /* numbered listicle heading (Jacob, 2026-07-14: "this article used to be
     a very clear 1,2,3,4,5 and that was quite helpful for the reader...
     can we make listicles in some nice way?") -- hand-marked on specific
     h3s (same convention as .jr-story__inline-quote: authored by hand in
     the body copy, not inferred). The number itself is a CSS counter, not
     typed into the copy -- so reordering or adding a step never requires
     renumbering by hand, and it can't drift out of sync. Upright, not
     italic, since a scannable list marker reads clearer upright than the
     plain lead-in's italic; the quiet serif-italic numeral is the one
     accent, a small callback to the format's one other serif use. */
  /* stacked, not side-by-side (Jacob, 2026-07-14: "put the numeral one row
     up... so the headline is left aligned with the text") -- a row layout
     pushed the heading text right by the numeral's own width, so it never
     lined up with the paragraph text under it. Column layout puts the
     numeral on its own line and lets the heading start flush left, exactly
     where the body copy starts. */
  .jr-gdetail__text h3.jr-gdetail__step {
    counter-increment: jr-gdetail-step;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: 2.4em 0 0.6em;
  }
  /* sized up again, twice (Jacob, 2026-07-14: "even slightly bigger", then
     again "possibly slightly larger") -- now a genuine display-scale
     numeral sitting on its own line, closer to how a magazine drop-numeral
     anchors a list item, while staying italic serif (not upright/bold) so
     it still reads as an accent, not a return to the old bold-uppercase
     treatment. The 2px gap above was too tight at this size -- the
     numeral's own descender space read as touching the heading below it --
     so that's widened to 10px alongside the size increase. */
  .jr-gdetail__text h3.jr-gdetail__step::before {
    content: counter(jr-gdetail-step, decimal-leading-zero);
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 3.1rem;
    line-height: 1;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }
  .jr-gdetail__text > h3.jr-gdetail__step:first-child { margin-top: 0; }

  /* a direct quote written as a plain paragraph inside the text column --
     serif italic, 50% over body size, same treatment as the Story format's
     inline quote (see snippets/jr-editorial-chunks.liquid for why this is a
     hand-marked <p> class rather than a <blockquote>). */
  .jr-gdetail__text p.jr-gdetail__inline-quote {
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .jr-gdetail__text img {
    width: 100%;
    height: auto;
    display: block;
    margin: 1.4em 0;
  }

  .jr-gdetail__text ul,
  .jr-gdetail__text ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; }
  .jr-gdetail__text li { margin-bottom: 0.5em; }
  .jr-gdetail__text a { color: inherit; text-underline-offset: 3px; }

  /* dedicated quote chunk: full width (a plain sibling of the .row divs),
     centred, matching the Story pull-quote (Jacob, 2026-07-14). padding-
     inline keeps it off the viewport edge on narrow screens, since unlike
     .jr-story the .jr-gdetail root carries no side padding of its own.
     margin-top only, so a preceding row's (always 0) margin-bottom
     collapses predictably to this clearance. */
  .jr-gdetail__quote {
    max-width: 46rem;
    margin: clamp(48px, 6vw, 96px) auto 0;
    padding-inline: var(--page-margin);
    box-sizing: border-box;
    text-align: left;
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.35;
    color: var(--color-foreground);
  }
  .jr-gdetail__quote.jr-gdetail__row--first { margin-top: clamp(40px, 5vw, 64px); }

  /* full-width breakout image between chunk groups */
  .jr-gdetail__breakout {
    margin: clamp(40px, 5vw, 64px) 0;
    width: 100%;
  }

  .jr-gdetail__breakout img {
    width: 100%;
    height: clamp(360px, 46vw, 620px);
    object-fit: cover;
    display: block;
  }

  /* fallback: plain single-column body when no chunks are set */
  .jr-gdetail__body {
    max-width: 42rem;
    margin: clamp(48px, 5vw, 80px) var(--page-margin) 0;
    font-size: var(--jr-editorial-body-size);
    line-height: var(--jr-editorial-body-leading);
    color: var(--jr-editorial-body-color);
  }
  .jr-gdetail__body > :first-child { margin-top: 0; }
  .jr-gdetail__body p { margin: 0 0 1.3em; }
  .jr-gdetail__body img { width: 100%; height: auto; display: block; margin: 1.4em 0; }

  @media screen and (max-width: 899px) {
    /* single column: media/text stack in document order within their
       own row, so a uniform margin-top would land between a chunk's own
       image and its own text too (should stay close). Shrink it to that
       "within a chunk" distance and put the bigger "between chunks" gap
       on .jr-gdetail__text's own margin instead (same pattern as Story's
       mobile override -- text is always the last element of a chunk). */
    .jr-gdetail__row { grid-template-columns: 1fr; margin-top: 20px; }
    .jr-gdetail__row--first { margin-top: 0; }
    .jr-gdetail__summary,
    .jr-gdetail__media {
      grid-column: 1;
      position: static;
      top: auto;
    }
    .jr-gdetail__text { grid-column: 1; margin-bottom: 48px; }
  }

  /* keep reading */
  .jr-gdetail__related {
    margin: clamp(56px, 6vw, 90px) var(--page-margin) 0;
    padding-top: clamp(40px, 4vw, 60px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .jr-gdetail__related-h {
    text-align: center;
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-gdetail__relgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 36px);
    row-gap: clamp(32px, 4vw, 52px);
  }

  .jr-gdetail__rellink {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .jr-gdetail__relmedia {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    margin-bottom: 14px;
  }

  .jr-gdetail__relimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .jr-gdetail__rellink:hover .jr-gdetail__relimg { transform: scale(1.03); }

  .jr-gdetail__relcat {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    margin-bottom: 6px;
  }

  .jr-gdetail__relh {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    line-height: 1.18;
  }

  @media screen and (max-width: 749px) {
    .jr-gdetail__relgrid { grid-template-columns: 1fr; }
  }

  {%- comment -%} Questions answered: same accordion language as the PDPs
    (.jr-acc in jr-pdp.css), sized for the article measure. {%- endcomment -%}
  .jr-gdetail__faq {
    max-width: 44rem;
    margin: 64px auto 0;
  }

  .jr-gdetail__faq-h {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    margin: 0 0 18px;
  }

  .jr-gdetail__faq-item {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .jr-gdetail__faq-item:first-child {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .jr-gdetail__faq-q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .jr-gdetail__faq-q::-webkit-details-marker { display: none; }

  .jr-gdetail__faq-pm {
    flex: none;
    font-size: 18px;
    line-height: 1;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-gdetail__faq-item:not([open]) .jr-gdetail__faq-pm::before { content: '+'; }
  .jr-gdetail__faq-item[open] .jr-gdetail__faq-pm::before { content: '–'; }

  .jr-gdetail__faq-a {
    padding: 0 0 18px;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    font-size: 0.9375rem;
    line-height: 1.62;
    max-width: 62ch;
  }

  .jr-gdetail__faq-a p { margin: 0 0 0.7em; }
  .jr-gdetail__faq-a p:last-child { margin-bottom: 0; }

  @media screen and (max-width: 749px) {
    .jr-gdetail__faq { margin-top: 44px; }
  }
/* END_SECTION:jr-article-guide-detail */

/* START_SECTION:jr-article-guide (INDEX:18) */
.jr-guide {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  /* media interlude: landscape photo / hairline pair / product grid, each
     independently optional. Shares the lead image's wider (65rem) measure,
     not the narrower 42rem reading column, so it reads as a break from text. */
  .jr-guide__media-block {
    max-width: 65rem;
    margin: clamp(40px, 5vw, 64px) auto;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 52px);
  }

  .jr-guide__landscape {
    /* reset the browser default <figure> margin (1em 40px) -- spacing here
       comes from the media-block's own flex gap, not the figure itself */
    margin: 0;
  }

  .jr-guide__landscape-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
  }

  /* hairline pair: a 2px grid gap in the page background colour, same trick
     as jr-home-featured / jr-collection-group's tile gutters */
  .jr-guide__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-background);
  }

  .jr-guide__pair-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
  }

  .jr-guide__products-h {
    margin: 0 0 20px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* shoppable grid, same recipe as the collection-page cards: 2px gutters,
     square media, jr-card-meta for the two-line name + price + colour dots */
  .jr-guide__prodgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: 32px;
  }

  .jr-guide__prodgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-guide__prodgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .jr-guide__prodcard {
    display: flex;
    flex-direction: column;
  }

  .jr-guide__prodmedia {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    margin-bottom: 14px;
  }

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

  .jr-guide__prodcard:hover .jr-guide__prodmedia img {
    transform: scale(1.02);
  }

  /* inset the card text + dots slightly, matching the collection-page cards */
  .jr-guide__prodcard .jr-cardmeta__top,
  .jr-guide__prodcard .jr-cardmeta__dots {
    padding-inline: 2px;
  }

  @media screen and (max-width: 749px) {
    .jr-guide__pair { grid-template-columns: 1fr; }
    .jr-guide__prodgrid,
    .jr-guide__prodgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* one shared editorial measure for hero, body and lead image */
  .jr-guide__head,
  .jr-guide__body { max-width: 42rem; margin-inline: auto; }
  .jr-guide__lead { max-width: 65rem; margin: clamp(32px, 4vw, 52px) auto; }

  .jr-guide__head { text-align: center; }

  /* Top Caption */
  .jr-guide__cat {
    margin: 0 0 16px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  /* Heading 1 */
  .jr-guide__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: var(--jr-editorial-h1-weight);
    font-size: var(--jr-editorial-h1-size);
    line-height: var(--jr-editorial-h1-leading);
    letter-spacing: var(--jr-editorial-h1-tracking);
  }

  /* Leading Summary */
  .jr-guide__dek {
    margin: 20px auto 0;
    max-width: 32rem;
    font-size: var(--jr-editorial-dek-size);
    font-weight: var(--jr-editorial-dek-weight);
    line-height: var(--jr-editorial-dek-leading);
    color: var(--jr-editorial-dek-color);
  }

  /* Date Stamp */
  .jr-guide__meta {
    margin: 22px 0 0;
    font-size: var(--jr-editorial-meta-size);
    letter-spacing: var(--jr-editorial-meta-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-meta-color);
  }

  .jr-guide__lead-img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Body Text (reading column) */
  .jr-guide__body {
    font-size: var(--jr-editorial-body-size);
    line-height: var(--jr-editorial-body-leading);
    color: var(--jr-editorial-body-color);
  }

  .jr-guide__body > :first-child { margin-top: 0; }
  .jr-guide__body p { margin: 0 0 1.3em; }

  /* Heading 2 / Heading 3 (in-body) */
  .jr-guide__body h2,
  .jr-guide__body h3 {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.15;
    margin: 1.9em 0 0.5em;
  }
  .jr-guide__body h2 { font-size: var(--jr-editorial-h2-size); }
  .jr-guide__body h3 { font-size: var(--jr-editorial-h3-size); }

  .jr-guide__body img {
    width: 100%;
    height: auto;
    display: block;
    margin: 1.8em 0;
  }

  .jr-guide__body ul,
  .jr-guide__body ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; }
  .jr-guide__body li { margin-bottom: 0.5em; }

  .jr-guide__body blockquote {
    margin: 1.8em 0;
    padding-inline-start: 1.1em;
    border-inline-start: 2px solid rgb(var(--color-foreground-rgb) / 0.25);
    font-family: var(--jr-font-serif);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--color-foreground);
  }

  .jr-guide__body a { color: inherit; text-underline-offset: 3px; }

  /* keep reading */
  .jr-guide__related {
    margin-top: clamp(56px, 6vw, 90px);
    padding-top: clamp(40px, 4vw, 60px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Top Caption, reused as a standalone section label */
  .jr-guide__related-h {
    text-align: center;
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-guide__relgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 36px);
    row-gap: clamp(32px, 4vw, 52px);
  }

  .jr-guide__rellink {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .jr-guide__relmedia {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    margin-bottom: 14px;
  }

  .jr-guide__relimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .jr-guide__rellink:hover .jr-guide__relimg { transform: scale(1.03); }

  .jr-guide__relcat {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    margin-bottom: 6px;
  }

  .jr-guide__relh {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    line-height: 1.18;
  }

  @media screen and (max-width: 749px) {
    .jr-guide__relgrid { grid-template-columns: 1fr; }
  }
/* END_SECTION:jr-article-guide */

/* START_SECTION:jr-article-shop-the-look (INDEX:19) */
.jr-colgroup.jr-stlgrid {
    padding: 34px var(--page-margin, 32px) 60px;
  }

  .jr-colgroup__head {
    margin-bottom: 20px;
  }

  .jr-colgroup__h {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
  }

  /* match the material collection grid: 4-up, 2px gutters, generous row gap */
  .jr-stlgrid .jr-colgroup__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: 40px;
  }

  .jr-stlgrid .jr-colgroup__card {
    display: flex;
    flex-direction: column;
  }

  .jr-stlgrid .jr-colgroup__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    margin-bottom: 14px;
  }

  .jr-stlgrid .jr-colgroup__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .jr-stlgrid .jr-colgroup__card:hover .jr-colgroup__media img {
    transform: scale(1.02);
  }

  /* inset the card text + dots like the material collection cards */
  .jr-stlgrid .jr-cardmeta__top,
  .jr-stlgrid .jr-cardmeta__dots {
    padding-inline: 10px;
  }

  .jr-stlgrid .jr-cardmeta__dots {
    margin-top: 24px;
  }

  @media screen and (max-width: 989px) {
    .jr-stlgrid .jr-colgroup__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:jr-article-shop-the-look */

/* START_SECTION:jr-article-story (INDEX:20) */
.jr-story {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: 0 clamp(56px, 6vw, 96px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  /* hero: big serif first name (left) beside the portrait (right) */
  .jr-story__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
    margin-bottom: clamp(32px, 4vw, 48px);
  }

  .jr-story__hero-text { order: -1; text-align: center; }

  .jr-story__hero-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    position: relative;
  }

  .jr-story__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Top Caption */
  .jr-story__eyebrow {
    margin: 0 0 18px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  /* the person's name -- serif, capitals. Along with the Words/Photos
     byline names (.jr-story__name below), this is the ONLY place this
     format uses the editorial serif; everything else here is sans. */
  .jr-story__first {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(3.25rem, 8vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: 0.01em;
  }

  .jr-story__hairline {
    border-top: 1px solid var(--color-foreground);
  }

  /* the Words/Photos credit NAMES specifically. Plain Archivo, natural
     case (Jacob, 2026-07-14: "change the font of the writer and the
     photographer to just be archivo. Simpler") -- was serif caps, which
     read as fussy next to the now-matching plain "Words"/"Photos"/"Share"
     labels. The big hero first name (.jr-story__first) keeps the serif;
     this is only the small byline credit. */
  .jr-story__name {
    font-family: var(--jr-font-sans);
    text-transform: none;
    letter-spacing: normal;
  }

  /* standfirst: left-aligned, sans (serif is reserved for names in this
     format) -- sits above the chunk grid */
  .jr-story__standfirst {
    max-width: 34rem;
    margin: 0 0 clamp(40px, 5vw, 72px);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.3;
  }
  .jr-story__standfirst p { margin: 0; }

  /* fallback body when no chunks are authored yet */
  .jr-story__body {
    max-width: 42rem;
    margin-inline: auto;
    font-size: var(--jr-editorial-body-size);
    line-height: 1.75;
    color: var(--jr-editorial-body-color);
  }
  .jr-story__body > :first-child { margin-top: 0; }
  .jr-story__body p { margin: 0 0 1.3em; }

  /* italic Q&A-style lead-ins ("On the room that took the longest..."),
     sentence case -- not the numbered bold-caps treatment Guide Detail
     uses for its list headings, this format reads as conversation, not
     a checklist. Sans, per "serif is only for names" here. */
  .jr-story__body h2,
  .jr-story__body h3 {
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    margin: 1.6em 0 0.4em;
  }
  .jr-story__body h2 { font-size: 1.1rem; }
  .jr-story__body h3 { font-size: 1.02rem; }

  .jr-story__body img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4em 0;
  }

  .jr-story__body ul,
  .jr-story__body ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; }
  .jr-story__body a { color: inherit; text-underline-offset: 3px; }

  /* three-column chunk grid: 45% image rail / 15% pure gap (never
     receives a grid item) / 40% text. Each chunk is its OWN independent
     grid box (Jacob, 2026-07-14, cont.: found via screen recording that
     a later chunk's image painted over an earlier one that should
     already have released). Previously one shared `display:grid` with
     every chunk's media/text as flat auto-placed children, relying on
     row-gap to bound each sticky image to its own auto-placed row --
     that turned out not to reliably constrain position:sticky's
     containing block in real scrolling, only in rest-state geometry
     checks. Giving each row `position: relative` makes it the sticky
     child's containing block explicitly, which IS reliable. Consecutive
     rows space via margin-top only (never bottom), so adjacent margins
     collapse to a deterministic value instead of an ambiguous sum. See
     snippets/jr-editorial-chunks.liquid for the full reasoning. */
  .jr-story__row {
    display: grid;
    grid-template-columns: 45% 15% 1fr;
    margin-top: clamp(48px, 6vw, 96px);
    position: relative;
    align-items: start;
  }

  /* the very first rendered chunk uses a much smaller gap from the
     standfirst above it than the between-rows gap -- always a
     deliberately different, much smaller value, not the same one
     reused. */
  .jr-story__row--first {
    margin-top: clamp(8px, 1vw, 16px);
  }

  .jr-story__media {
    grid-column: 1;
    position: sticky;
    top: calc(var(--header-height, 80px) + 28px);
    align-self: start;
  }

  .jr-story__media img {
    width: 100%;
    height: auto;
    display: block;
  }

  .jr-story__media-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-background);
  }

  .jr-story__media-pair img { aspect-ratio: 3 / 4; object-fit: cover; }

  /* position:relative so each tile is its own jr-photo-tag dot's containing
     block -- without it a dot would place relative to whichever ancestor
     IS positioned (.jr-story__media, sticky), landing the wrong tile's tag
     in the middle of BOTH photos instead of just its own. */
  .jr-story__media-tile { position: relative; }

  /* .jr-story__media (not just the bare class) in the selector to beat
     Horizon's own base-theme reset (":first-child:empty + p", i.e. "an
     image directly followed by a paragraph gets zero top margin") --
     that rule's two pseudo-classes outweigh a single class here, so a
     plain `.jr-story__media-cap { margin-top: ... }` silently loses to
     it regardless of source order (Jacob, 2026-07-14: asked for more
     space here and the value wasn't moving -- this is why). */
  .jr-story__media .jr-story__media-cap {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-story__text {
    grid-column: 3;
    max-width: 34rem;
    font-size: var(--jr-editorial-body-size);
    line-height: 1.75;
    color: var(--jr-editorial-body-color);
    padding-bottom: clamp(24px, 3vw, 40px);
  }

  .jr-story__text > :first-child { margin-top: 0; }
  .jr-story__text > :last-child { margin-bottom: 0; }
  .jr-story__text p { margin: 0 0 1.3em; }

  /* italic Q&A lead-ins, sans + sentence case -- serif is reserved for
     people's names in this format, see .jr-story__body h2/h3 above.
     Sized down (Jacob, 2026-07-14) to read as a quiet cue before the
     quote, not a heading competing with it -- the quote itself is now
     the biggest thing in the column, see .jr-story__inline-quote below. */
  .jr-story__text h2,
  .jr-story__text h3 {
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    margin: 1.6em 0 0.4em;
  }
  .jr-story__text h2 { font-size: 0.8125rem; }
  .jr-story__text h3 { font-size: 0.75rem; }
  .jr-story__text > h2:first-child,
  .jr-story__text > h3:first-child { margin-top: 0; }

  /* a direct quote written as a plain paragraph (typographic quote marks
     in the copy itself, not a <blockquote> element) -- e.g. the "she
     says" lines following a Q&A heading. Marked with this class by hand
     in the article body specifically so it keeps its own </p>, unlike
     switching the tag to <blockquote>, which would merge it into the
     next paragraph's slice under the paragraph-splitting math in
     snippets/jr-editorial-chunks.liquid (split: '</p>' doesn't see a
     boundary at </blockquote>). Same serif italic as the dedicated
     blockquote treatment; sized 50% over Body Text (Jacob, 2026-07-14)
     so it's clearly the most prominent thing in the column, with a
     tighter line-height than body copy since display-ish serif type
     reads better snug at this size. */
  .jr-story__text p.jr-story__inline-quote,
  .jr-story__body p.jr-story__inline-quote {
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.4;
  }

  /* the one deliberate departure from the Kinfolk reference: an inline
     image dropped into the text column is forced to the column's own
     width, never wider (no breaking out to the media column's width). */
  .jr-story__text img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4em 0;
  }

  /* a plain RTE-authored quote inside body text (not a dedicated quote
     chunk) -- smaller, stays inside the text column. Serif italic now
     (Jacob, 2026-07-14) to match the dedicated pull-quote treatment --
     reads more editorial than sans italic, same reasoning as the
     pull-quote's own exception to "serif is only for names". */
  .jr-story__text blockquote:not(.jr-story__quote),
  .jr-story__body blockquote {
    margin: 1.4em 0;
    padding-inline-start: 1.1em;
    border-inline-start: 2px solid rgb(var(--color-foreground-rgb) / 0.25);
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--color-foreground);
  }

  .jr-story__text ul,
  .jr-story__text ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; }
  .jr-story__text a { color: inherit; text-underline-offset: 3px; }

  /* dedicated quote chunk: full width (a plain sibling of the .row divs,
     so it spans the whole measure automatically). Deliberate exception
     to "serif is only for names" in this format -- sans italic read as
     stiff here (Jacob, 2026-07-14); serif italic is the one other place
     this format uses the editorial serif. margin-top only (matching
     .jr-story__row's own scheme) so a preceding row's margin-bottom
     (always 0) collapses predictably to this value, not a smaller one --
     a quote sitting right after a still-releasing sticky image needs
     the same clearance a row-to-row transition gets, not less of it. */
  .jr-story__quote {
    max-width: 46rem;
    margin: clamp(48px, 6vw, 96px) auto 0;
    text-align: left;
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.35;
    color: var(--color-foreground);
  }

  /* covers a quote chunk that happens to be the very first thing
     rendered -- doesn't occur in current content, but .jr-story__quote's
     own margin-top and .jr-story__row--first have equal specificity, so
     without this compound selector whichever rule is LATER in the
     stylesheet would silently win regardless of which is "correct" */
  .jr-story__quote.jr-story__row--first {
    margin-top: clamp(8px, 1vw, 16px);
  }

  /* full-width breakout image between chunk groups. Height raised
     (Jacob, 2026-07-14: "feels cropped") -- at the article's own
     content width a 3:2-ish interior photo was losing a lot of its
     vertical composition (ceiling, floor) to fit the old, more
     letterboxed 620px cap. Still a controlled band, not a raw
     aspect-ratio passthrough -- just a less aggressive one. */
  .jr-story__breakout {
    margin: clamp(40px, 5vw, 64px) 0;
    width: 100%;
    position: relative;
  }

  .jr-story__breakout img {
    width: 100%;
    height: clamp(400px, 55vw, 760px);
    object-fit: cover;
    display: block;
  }

  /* breakout PAIR -- two tiles side by side in the single-breakout slot,
     for a chunk that also has image_pair set. Sits inside the article's
     own content box (the .jr-story padding already insets it by
     --page-margin on each side), and the middle gutter is set to that
     same --page-margin so the gap between the two images matches the
     white space to their left and right -- three equal gaps (Jacob,
     2026-07-14: "make the space in the middle of these two last images
     as large as the space on the sides"). Earlier this broke out to the
     true viewport edge with a 2px seam; the balanced, contained version
     reads calmer next to the rest of the page's margins. */
  .jr-story__breakout-pair {
    margin-top: clamp(40px, 5vw, 64px);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--page-margin);
  }

  /* kill the browser's default <figure> inline margin (1em 40px) -- left on,
     it padded each tile by 40px, so the middle gap came out ~80px wider than
     the page-margin gutters on the outside and the three gaps were unequal
     (Jacob, 2026-07-14: "make the space in the middle as large as the space
     on the sides"). With it zeroed, all three gaps are var(--page-margin). */
  .jr-story__breakout-pair-tile {
    margin: 0;
    position: relative;
  }

  .jr-story__breakout-pair-tile img {
    width: 100%;
    height: clamp(360px, 46vw, 620px);
    object-fit: cover;
    display: block;
  }

  /* end mark -- the small dingbat a printed feature closes on so a
     reader knows they've reached the actual end, not a mid-scroll
     pause (Jacob, 2026-07-14). Deliberately plain: a solid square, no
     icon asset, no colour beyond the page's own foreground -- reads as
     a quiet full stop, not a decoration. */
  .jr-story__endmark {
    width: 11px;
    height: 11px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    background: var(--color-foreground);
  }

  /* more stories */
  .jr-story__more {
    margin-top: clamp(56px, 6vw, 90px);
    padding-top: clamp(40px, 4vw, 60px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Top Caption, reused as a standalone section label */
  .jr-story__more-h {
    text-align: center;
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-story__moregrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 36px);
    row-gap: clamp(32px, 4vw, 52px);
  }

  .jr-story__morelink {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .jr-story__moremedia {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    margin-bottom: 14px;
  }

  .jr-story__moreimg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
  .jr-story__morelink:hover .jr-story__moreimg { transform: scale(1.03); }

  /* the ONE other name-adjacent serif+caps use: a returning subject's
     first name on their own "more stories" card */
  .jr-story__morename {
    font-family: var(--jr-font-serif);
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    line-height: 1.05;
  }

  @media screen and (max-width: 749px) {
    .jr-story__hero { grid-template-columns: 1fr; gap: 24px; }
    .jr-story__hero-text { order: 0; }
    /* single column: media/text stack in document order within their own
       row. .jr-story__row is display:grid, so a grid item's own margin
       never collapses with anything outside the grid. margin-bottom on
       .jr-story__text used to be 48px for "space after a chunk," but
       that 48px doesn't collapse away -- it's fully real, trapped space
       -- and then whatever comes next ALSO adds its own margin-top on
       top, double-spacing every transition (~96px before the 2026-07-14
       partial fix shrunk the quote's own contribution to 20px, which
       still left an unintended ~68px -- caught again 2026-07-21 on the
       adapted jr-page-story.liquid, screenshotted on mobile). Root fix:
       zero .jr-story__text's margin-bottom entirely and let every
       transition rely solely on the NEXT element's own margin-top (20px,
       uniform everywhere on mobile) -- one spacing mechanism, no trap. */
    .jr-story__row { grid-template-columns: 1fr; margin-top: 20px; }
    .jr-story__row--first,
    .jr-story__quote.jr-story__row--first { margin-top: 0; }
    .jr-story__media {
      grid-column: 1;
      position: static;
      top: auto;
    }
    /* margin-top here is the "within a chunk" gap: image to its own
       text. media (grid item, so its own margin can't collapse with
       anything) has none of its own, so without this the caption sits
       flush against the very next line, the H2 lead-in (Jacob,
       2026-07-14: caught this directly on a phone). */
    .jr-story__text { grid-column: 1; max-width: none; margin-top: 24px; margin-bottom: 0; }
    .jr-story__quote:not(.jr-story__row--first) { margin-top: 20px; }
    .jr-story__moregrid { grid-template-columns: 1fr; }
  }
/* END_SECTION:jr-article-story */

/* START_SECTION:jr-book-consultation (INDEX:21) */
.jr-book {
    padding-inline: var(--page-margin);
    padding-block: var(--jr-space-5, 42px) var(--jr-space-5, 42px);
  }

  .jr-book__hero {
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
  }

  .jr-book__eyebrow {
    margin: 0 0 14px;
    font-family: var(--jr-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-book__heading {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
    margin: 0;
    color: var(--jr-ink);
  }

  .jr-book__sub {
    margin: 18px auto 0;
    max-width: 34rem;
    font-family: var(--jr-font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--jr-ink-soft);
  }

  .jr-book__cta-wrap {
    text-align: center;
    margin-top: 36px;
  }

  .jr-book__cta {
    display: inline-block;
    padding: 16px 32px;
    background: var(--jr-green);
    color: #fff;
    font-family: var(--jr-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
  }

  .jr-book__cta:hover {
    opacity: 0.92;
  }

  .jr-book__cta-note {
    margin: 14px 0 0;
    font-family: var(--jr-font-sans);
    font-size: 0.8rem;
    color: var(--jr-ink-soft);
  }
/* END_SECTION:jr-book-consultation */

/* START_SECTION:jr-campaigns-list (INDEX:23) */
.jr-camp {
    width: 100%;
    padding-block: var(--jr-camp-pad-top, 56px) var(--jr-camp-pad-bottom, 80px);
    box-sizing: border-box;
    background: var(--color-background);
  }

  /* whole section, header through grid through pager, held to the site's
     normal reading column like every other page */
  .jr-camp__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    box-sizing: border-box;
  }

  .jr-camp__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(36px, 4vw, 60px);
  }

  .jr-camp__eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-camp__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-camp__intro {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  /* generous gap, not the site's usual 2px hairline -- see the top-of-file
     comment for why */
  .jr-camp__grid {
    list-style: none;
    margin: clamp(28px, 3vw, 44px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 24px);
  }

  .jr-camp__tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .jr-camp__media,
  .jr-camp__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-camp__img { transition: transform 0.6s ease; }
  .jr-camp__tile:hover .jr-camp__img { transform: scale(1.04); }

  .jr-camp__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0) 72%);
  }

  .jr-camp__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(20px, 2.4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .jr-camp__kick {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.9;
  }

  .jr-camp__name {
    margin: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .jr-camp__sub {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    opacity: 0.92;
  }

  .jr-camp__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: clamp(40px, 4vw, 64px);
  }

  .jr-camp__pagelink {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .jr-camp__pagelink:hover { color: rgb(var(--color-foreground-rgb) / 0.6); }
  .jr-camp__pagelink.is-current { border-bottom-color: var(--color-foreground); }

  .jr-camp__empty {
    text-align: center;
    padding-block: 60px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  @media screen and (max-width: 989px) {
    .jr-camp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media screen and (max-width: 599px) {
    .jr-camp__grid { grid-template-columns: 1fr; }
    .jr-camp__tile { aspect-ratio: 4 / 5; }
  }
/* END_SECTION:jr-campaigns-list */

/* START_SECTION:jr-care-guide (INDEX:24) */
.jr-care {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(40px, 6vw, 80px) var(--page-margin, 32px) clamp(60px, 8vw, 100px);
    box-sizing: border-box;
  }

  .jr-care__head {
    text-align: center;
    margin: 0 0 clamp(36px, 4vw, 56px);
  }

  .jr-care__kicker {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-care__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-care__intro {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-care__intro p { margin: 0; }

  .jr-care__hero {
    aspect-ratio: 16 / 6.5;
    overflow: hidden;
    margin-bottom: clamp(32px, 4vw, 48px);
  }

  .jr-care__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-care__tips {
    display: flex;
    flex-direction: column;
  }

  .jr-care__tip {
    padding: clamp(24px, 3vw, 36px) 0;
    border-top: 1px solid var(--jr-line);
  }

  .jr-care__tip-kicker {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .jr-care__tip-body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--jr-ink-soft);
    max-width: 58ch;
  }

  .jr-care__tip-body p { margin: 0 0 12px; }
  .jr-care__tip-body p:last-child { margin-bottom: 0; }

  .jr-care__tip-media {
    margin-top: 20px;
    max-width: 26rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .jr-care__tip-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-care__faq-wrap {
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: clamp(48px, 5vw, 72px);
    border-top: 1px solid var(--jr-line);
  }

  .jr-care__faq-heading {
    margin: 0 0 8px;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    text-align: center;
  }

  .jr-care__faq-wrap .jr-acc { margin-top: 28px; }

  .jr-care__contact {
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: clamp(40px, 4vw, 56px);
    border-top: 1px solid var(--jr-line);
    text-align: center;
  }

  .jr-care__contact-heading {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    font-weight: 500;
  }

  .jr-care__contact-body {
    margin: 0 auto 20px;
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--jr-ink-soft);
  }

  .jr-care__contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-background);
    background: var(--color-foreground);
    text-decoration: none;
  }

  .jr-care__contact-btn:hover { opacity: 0.85; }
/* END_SECTION:jr-care-guide */

/* START_SECTION:jr-category-carousel (INDEX:25) */
.jr-catcar {
    padding: 64px 0 72px;
  }

  .jr-catcar__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--page-margin, 32px);
    margin-bottom: 6px;
  }

  .jr-catcar__heading {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    font-weight: 600;
    margin: 0;
  }

  .jr-catcar__track {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 var(--page-margin, 32px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--page-margin, 32px);
    scrollbar-width: none;
  }

  .jr-catcar__track::-webkit-scrollbar {
    display: none;
  }

  .jr-catcar__slide {
    flex: 0 0 auto;
    width: clamp(300px, 40vw, 620px);
    scroll-snap-align: start;
  }

  .jr-catcar__link {
    display: block;
    text-decoration: none;
    color: var(--color-foreground);
  }

  /* match the collection page H1 (.jr-colhead__h): same size and tracking,
     not larger. -10% (was 1.75rem) per Jacob 2026-08-04.
     No min-height reservation here (removed 2026-08-05): the fit-to-one-line
     script at the bottom of this file force-shrinks the title until it fits
     on one line, so its rendered height is already identical across every
     slide -- reserving 2 lines on top of that just added a dead gap between
     the title and its subtitle. line-clamp:2 stays on as a no-JS fallback
     safety net only. The subtitle below still reserves its own 2-line
     min-height, since subtitle length genuinely varies 1-2 lines and that's
     what keeps the photos row aligned across neighbouring slides. */
  .jr-catcar__title {
    font-size: 1.575rem;
    font-weight: 420;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 4px;
  }

  .jr-catcar__subtitle {
    font-size: 0.95rem;
    font-weight: 350;
    line-height: 1.4;
    min-height: 2.8em;
  }

  /* same base.css `p:empty { display: none }` trap as
     .jr-catstrip__product-material: the subtitle is rendered unconditionally
     so slides without one still reserve their two lines, but an empty <p>
     was being collapsed and losing the reservation. (0,2,0) beats the
     (0,1,1) global. */
  .jr-catcar__subtitle:empty {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    margin: 0 0 14px;
  }

  .jr-catcar__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .jr-catcar__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .jr-catcar__link:hover .jr-catcar__media img {
    transform: scale(1.025);
  }

  @media screen and (max-width: 749px) {
    .jr-catcar {
      padding: 44px 0 52px;
    }

    .jr-catcar__slide {
      width: 84vw;
    }
  }
/* END_SECTION:jr-category-carousel */

/* START_SECTION:jr-collection-banner (INDEX:26) */
.jr-colhead {
    padding: 28px var(--page-margin, 32px) 30px;
  }

  .jr-colhead__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin-bottom: 22px;
  }

  .jr-colhead__crumbs a {
    color: inherit;
    text-decoration: none;
  }

  .jr-colhead__crumbs a:hover {
    color: var(--color-foreground);
  }

  .jr-colhead__crumbs [aria-current] {
    color: var(--color-foreground);
  }

  /* Sized to match the PDP: heading = the product title (--jr-text-title,
     28px), intro = the lede under it (--jr-text-base, 13.5px). Hardcoded
     because jr-tokens.css only loads on the PDP. */
  .jr-colhead__h {
    font-size: 1.75rem;
    font-weight: 420;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 14px;
  }

  .jr-colhead__intro {
    max-width: 64ch;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    font-size: 0.84375rem;
    line-height: 1.55;
  }

  .jr-colhead__intro p {
    margin: 0 0 8px;
  }

  .jr-colhead__intro p:last-child {
    margin-bottom: 0;
  }

  .jr-colhead__groups {
    display: flex;
    gap: 56px;
    flex-wrap: wrap;
    margin-top: 26px;
  }

  .jr-colhead__label {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    margin: 0 0 10px;
  }

  .jr-colhead__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .jr-colhead__pill {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.35);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-foreground);
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
  }

  .jr-colhead__pill:hover {
    border-color: var(--color-foreground);
  }

  .jr-colhead__pill.is-active {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }

  /* colour control swatches — a single inline row (label + swatches) that, on
     desktop, shares one band with the sort/count/view toolbar below (which is
     lifted up onto this row via a negative margin further down). The container
     spans full width and sits above the toolbar, so it must pass clicks through
     everywhere except the swatches, or it would cover the sort controls. */
  .jr-colourctl {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 3;
    pointer-events: none;
  }

  .jr-colourctl .jr-colhead__label {
    margin: 0;
    white-space: nowrap;
  }

  .jr-colourctl__swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    pointer-events: none;
  }

  .jr-colourctl__swatch {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--jr-swatch);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
  }

  /* touch devices: invisible hit area brings the 24px dot to a 44px target */
  @media (pointer: coarse) {
    .jr-colourctl__swatch::after {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 50%;
    }
  }

  .jr-colourctl__swatch:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-colourctl__swatch[aria-pressed='true'] {
    outline: 1.5px solid var(--color-foreground);
    outline-offset: 3px;
  }

  /* keyboard focus must read differently from the pressed ring */
  .jr-colourctl__swatch:focus-visible {
    outline: 2px dashed rgb(var(--color-foreground-rgb) / 0.7);
    outline-offset: 5px;
  }

  @media screen and (max-width: 749px) {
    .jr-colhead {
      padding-top: 18px;
    }

    .jr-colhead__groups {
      gap: 24px;
    }
  }

  /* NOTE: the desktop -72px toolbar lift (sort row up onto the colour row) is
     deliberately NOT here — {% stylesheet %} bundles globally once the section
     is used anywhere, which pulled the toolbar into the pills on pages without
     a colour row. It's emitted inline next to the colour control instead, so
     it applies exactly when the row renders. */
/* END_SECTION:jr-collection-banner */

/* START_SECTION:jr-collection-editorial (INDEX:27) */
/* spans two columns and two rows of the product grid; the absolute inner
     fills the whole spanned area (including the row gap and the neighbours'
     text rows), so the photo reads as one continuous environmental frame */
  .jr-edtile {
    grid-column: span 2;
    grid-row: span 2;
    position: relative;
    list-style: none;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    /* JR, 2026-08-05: this tile's only child (.jr-edtile__inner) is
       position:absolute, so it contributes zero intrinsic height here --
       the tile's own height has only ever come from the grid stretching it
       open to match its two spanned rows' auto height, which in turn only
       gets set by whichever OTHER product cards happen to share those same
       rows. On a 4-column grid that's 2 more cards sharing each spanned row,
       so it worked by coincidence; on a 2-column grid `span 2` already
       fills the whole row width, nothing else shares it, and with no
       content of its own to size against the rows collapsed to ~12px --
       Jacob, 2026-08-05, Personal Care collection at a narrow width: "ended
       up behind the product images" (really just squashed to a sliver
       and clipped by this rule's own overflow:hidden). A fixed ratio,
       matched to what it already rendered at on a working 4-column page,
       makes its height self-sufficient at any column count. */
    aspect-ratio: 693 / 814;
  }

  .jr-edtile__inner {
    position: absolute;
    inset: 0;
    display: block;
  }

  .jr-edtile__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  a.jr-edtile__inner:hover img {
    transform: scale(1.02);
  }

  .jr-edtile__label {
    position: absolute;
    left: 18px;
    bottom: 16px;
    color: #fff;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
  }

  /* .jr-ptag itself (dot/card) now lives in the global assets/jr-tokens.css
     -- rendered from too many other sections too (Story, all 4 PDPs) to
     keep re-pasting here. .jr-edtile__inner is already position:absolute,
     a valid containing block for it, so no extra wrapper needed. Only this
     section's own :has() hook, keyed to its OWN .jr-edtile__inner class,
     stays local. */
  .jr-edtile__inner:has(.jr-ptag:hover),
  .jr-edtile__inner:has(.jr-ptag:focus-within) {
    overflow: visible;
  }
/* END_SECTION:jr-collection-editorial */

/* START_SECTION:jr-collection-group (INDEX:28) */
.jr-colgroup {
    padding: 34px var(--page-margin, 32px) 30px;
  }

  .jr-colgroup__head {
    margin-bottom: 20px;
  }

  .jr-colgroup__h {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
  }

  .jr-colgroup__intro {
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* match the material collection grid: 4-up, 2px gutters, generous row gap */
  .jr-colgroup__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: 40px;
  }

  /* premium lines with only a few products read better 3-up */
  .jr-colgroup__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jr-colgroup__card {
    display: flex;
    flex-direction: column;
  }

  .jr-colgroup__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    margin-bottom: 14px;
  }

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

  .jr-colgroup__card:hover .jr-colgroup__media img {
    transform: scale(1.02);
  }

  /* inset the card text + dots like the material collection cards */
  .jr-colgroup .jr-cardmeta__top,
  .jr-colgroup .jr-cardmeta__dots {
    padding-inline: 10px;
  }

  /* the real collection grid's native card wrapper is a 12px-gap flexbox,
     which stacks with jr-cardmeta__dots' own 12px margin-top for 24px total;
     jr-colgroup__card has no such wrapper gap, so match it directly here */
  .jr-colgroup .jr-cardmeta__dots {
    margin-top: 24px;
  }

  /* Sandro-style progress footer */
  /* one centred column so the count, the bar and the button all share a width */
  .jr-colgroup__more {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 44px;
    width: min(400px, 88%);
    margin-inline: auto;
  }

  .jr-colgroup__count {
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-colgroup__bar {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgb(var(--color-foreground-rgb) / 0.14);
  }

  .jr-colgroup__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--color-foreground);
  }

  .jr-colgroup__see {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
    border: 1px solid var(--color-foreground);
    padding: 13px 34px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .jr-colgroup__see:hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  @media screen and (max-width: 989px) {
    .jr-colgroup__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Editorial photo tile: the 4 shown products sit in a 2x2 square (each
     takes half the row) and the photo fills the other half, spanning both
     rows -- so it reads as exactly "four card slots" of space, one photo. */
  .jr-colgroup__grid--square-photo {
    grid-template-rows: repeat(2, auto);
  }
  .jr-colgroup__grid--square-photo > .jr-colgroup__card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .jr-colgroup__grid--square-photo > .jr-colgroup__card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .jr-colgroup__grid--square-photo > .jr-colgroup__card:nth-child(3) { grid-column: 1; grid-row: 2; }
  .jr-colgroup__grid--square-photo > .jr-colgroup__card:nth-child(4) { grid-column: 2; grid-row: 2; }
  .jr-colgroup__phototile { grid-column: 3 / 5; grid-row: 1 / 3; }

  .jr-colgroup__photoinner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }
  /* A tag's popout card must be able to escape this box's own crop.
     :has() is a progressive enhancement (evergreen browsers only); on
     older ones a card opened near the tile's edge just clips instead of
     breaking anything. Higher specificity than the base rule above wins
     regardless of source order, so this correctly overrides it when open. */
  .jr-colgroup__photoinner:has(.jr-ptag:hover),
  .jr-colgroup__photoinner:has(.jr-ptag:focus-within) {
    overflow: visible;
  }

  .jr-colgroup__photoinner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-colgroup__photolabel {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.35);
  }

  @media screen and (max-width: 989px) {
    .jr-colgroup__grid--square-photo {
      grid-template-rows: repeat(3, auto);
    }
    .jr-colgroup__phototile {
      grid-column: 1 / 3;
      grid-row: 3;
      aspect-ratio: 4 / 3;
    }
  }

  /* .jr-ptag itself (dot/card) now lives in the global assets/jr-tokens.css
     -- rendered from too many other sections too (Story, all 4 PDPs) to
     keep re-pasting here. Only this section's own :has() hook, keyed to
     its OWN .jr-colgroup__photoinner class, stays local. */
/* END_SECTION:jr-collection-group */

/* START_SECTION:jr-compare (INDEX:29) */
.jr-compare {
    padding: 72px var(--page-margin, 32px) 84px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Jacob, 2026-08-05: "remove the grey hairline here on the landing
     page" -- this section sits right under a section that already ends
     in its own CTA button there, so the divider read as an extra, stray
     line rather than a real boundary. Collection pages (the other 5
     templates using this section) keep it by default. */
  .jr-compare--no-border {
    border-top: none;
  }

  .jr-compare__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  .jr-compare__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-compare__intro {
    max-width: 58ch;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.55;
    margin-top: 12px;
  }

  .jr-compare__intro p {
    margin: 0;
  }

  .jr-compare__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 40px;
  }

  .jr-compare__card {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-foreground);
    padding-top: 20px;
  }

  /* fabric macro shot atop the card (the PDP weave image treatment) */
  .jr-compare__macro {
    margin-bottom: 18px;
  }

  .jr-compare__macro img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .jr-compare__colours {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 2px 0 18px;
  }

  .jr-compare__swatches {
    display: flex;
    gap: 6px;
  }

  .jr-compare__cdot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.18);
    flex: 0 0 auto;
  }

  .jr-compare__colnote {
    margin: 0;
    font-size: 0.8125rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-compare__badge {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 8px;
  }

  .jr-compare__id {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
  }

  .jr-compare__name {
    font-size: 1.375rem;
    font-weight: 420;
    margin: 0 0 4px;
  }

  .jr-compare__tagline {
    color: rgb(var(--color-foreground-rgb) / 0.6);
    font-size: 0.875rem;
    margin: 0;
  }

  .jr-compare__swatch {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
  }

  .jr-compare__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-compare__rows {
    margin: 14px 0 0;
    flex: 1 1 auto;
  }

  .jr-compare__row {
    padding: 12px 0;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .jr-compare__row dt {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    margin-bottom: 4px;
  }

  .jr-compare__row dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }

  .jr-compare__cta {
    display: inline-block;
    margin-top: 20px;
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--color-foreground);
    padding-bottom: 3px;
  }

  .jr-compare__cta:hover {
    color: rgb(var(--color-foreground-rgb) / 0.6);
    border-color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  @media screen and (max-width: 749px) {
    .jr-compare {
      padding-block: 48px 56px;
    }

    .jr-compare__grid {
      gap: 28px;
      margin-top: 28px;
    }

    /* Badge + name/tagline move above the macro photo instead of below
       it, for all three cards (2026-08-08: "move the headlines above
       the image throughout this section... for all three proof
       points"). Opt-in via its own setting/class -- this section is
       shared with 5 collection-page templates that weren't asked for
       this and keep the original photo-first order.
       .jr-compare__card is already a plain flex column with every
       child a direct child (unlike jr-lp-feature's nested panel/copy
       structure), so a plain order swap is enough here -- no
       display:contents cascade needed. Only these two need an explicit
       (negative) order; everything else stays at the default 0 and so
       keeps its own relative DOM order (macro, then colours, then rows,
       then cta) after these two jump ahead of it. */
    .jr-compare--mobile-heading-first .jr-compare__badge { order: -2; }
    .jr-compare--mobile-heading-first .jr-compare__id {
      order: -1;
      /* Was 8px, sized for text-to-text spacing (name/tagline down to
         the swatch rows below). Now it separates the heading from a
         photo instead, which needs more room. */
      margin-bottom: 20px;
    }
  }
/* END_SECTION:jr-compare */

/* START_SECTION:jr-faq (INDEX:31) */
.jr-faq__inner {
    max-width: 760px;
    margin-inline: auto;
    padding-block: 72px 84px;
  }

  /* split flavour: accordion on the left half, image on the right */
  .jr-faq__inner--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: stretch;
  }

  .jr-faq__inner--split .jr-faq__main {
    max-width: 640px;
  }

  .jr-faq__media {
    margin: 0;
    overflow: hidden;
  }

  .jr-faq__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (max-width: 989px) {
    .jr-faq__inner--split {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .jr-faq__media {
      order: 2;
      aspect-ratio: 4 / 3;
    }

    /* Opt-in, since this section is shared across ~40 PDP templates
       that weren't asked for this and keep the 4:3 default (2026-08-08:
       "crop this photo before the FAQ to square (the middle part of
       the photo)"). object-fit:cover's default object-position (50%
       50%, i.e. centered) already crops from the middle -- no override
       needed there, only the aspect-ratio changes. */
    .jr-faq__inner--square-mobile .jr-faq__media {
      aspect-ratio: 1 / 1;
    }
  }

  .jr-faq__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  /* .jr-faq prefix raises specificity above Horizon's `.section h2` margin
     reset (0,1,1), which otherwise zeroes the heading's margin-bottom. */
  .jr-faq .jr-faq__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0 0 clamp(36px, 4vw, 56px);
  }

  .jr-faq__item {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .jr-faq__item:last-child {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .jr-faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 2px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
  }

  .jr-faq__q::-webkit-details-marker {
    display: none;
  }

  /* no black focus box around a question after clicking; keyboard users still
     get a quiet ring via :focus-visible */
  .jr-faq__q:focus {
    outline: none;
  }

  .jr-faq__q:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.35);
    outline-offset: 3px;
  }

  .jr-faq__q:hover {
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  /* plus that turns into a minus when open */
  .jr-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    align-self: center;
  }

  .jr-faq__icon::before,
  .jr-faq__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    background: currentColor;
  }

  .jr-faq__icon::before {
    width: 11px;
    height: 1px;
  }

  .jr-faq__icon::after {
    width: 1px;
    height: 11px;
    transition: transform 0.18s ease;
  }

  .jr-faq__item[open] .jr-faq__icon::after {
    transform: scaleY(0);
  }

  .jr-faq__a {
    max-width: 62ch;
    padding: 0 2px 22px;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.55;
  }

  .jr-faq__a p {
    margin: 0 0 10px;
  }

  .jr-faq__a p:last-child {
    margin-bottom: 0;
  }

  @media screen and (max-width: 749px) {
    .jr-faq__inner {
      padding-block: 48px 56px;
    }
  }
/* END_SECTION:jr-faq */

/* START_SECTION:jr-footer (INDEX:32) */
.jr-footer {
    background: var(--color-background);
    color: var(--color-foreground);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .jr-footer__assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 20px var(--page-margin, 32px);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .jr-footer__assurance-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .jr-footer__assurance-item svg { flex: 0 0 auto; }

  a.jr-footer__assurance-item:hover {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-footer__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.7fr);
    gap: 32px 28px;
    padding: 56px var(--page-margin, 32px) 64px;
  }

  @media screen and (max-width: 749px) {
    /* One item per row instead of wrapping 2-then-1-then-1 (2026-08-08:
       "ensure each USP get its own row on mobile" -- raised against the
       new landing-page USP row, built to match this footer strip, so
       applied here too for consistency between the two). */
    .jr-footer__assurance {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
  }

  .jr-footer__heading {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 18px;
  }

  /* the nav columns' heading is a <summary> now (see the accordion comment
     in the Liquid above) -- kill its native marker/list-item chrome and lay
     it out to match the plain <h2> heading it shares a class with, plus the
     +/– indicator, same convention as .jr-acc (jr-pdp.css) */
  summary.jr-footer__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
  }

  summary.jr-footer__heading::-webkit-details-marker {
    display: none;
  }

  summary.jr-footer__heading::marker {
    content: '';
  }

  .jr-footer__pm {
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-footer__col details:not([open]) .jr-footer__pm::before {
    content: '+';
  }

  .jr-footer__col details[open] .jr-footer__pm::before {
    content: '\2013';
  }

  .jr-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
  }

  /* natural case for the link lists — all-caps across five columns read as
     too much; the uppercase column headings carry the structure alone.
     Links sit a touch lighter than full foreground (Jacob, 2026-07-14:
     "make the non-headline items slightly lighter to calm this area") so
     the headings read as the structure and the columns feel quieter;
     hover lifts them back to full strength for clear feedback. */
  .jr-footer__links a {
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-footer__links a:hover {
    color: var(--color-foreground);
  }

  .jr-footer__field {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--color-foreground);
    padding-bottom: 6px;
  }

  .jr-footer__field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    padding: 4px 0;
  }

  .jr-footer__field input::placeholder {
    color: rgb(var(--color-foreground-rgb) / 0.55);
    text-transform: uppercase;
  }

  .jr-footer__field input:focus-visible {
    outline: none;
  }

  .jr-footer__field button {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--color-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 0;
  }

  .jr-footer__field button:hover {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-footer__fine {
    font-size: 0.75rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    margin: 10px 0 0;
  }

  .jr-footer__fine a {
    color: inherit;
  }

  .jr-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 0 var(--page-margin, 32px) 48px;
  }

  .jr-footer__locale-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.5);
    padding: 10px 14px;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
  }

  .jr-footer__locale-label {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* JR, 2026-08-08: the caret used to be an in-flow flex child with default
     pointer-events, which made the chevron -- the one thing that looks like
     "open me" -- swallow its own clicks (measured: elementFromPoint over the
     glyph returned the SVG <path>, not the select). Float it over the select's
     right end instead and let clicks through, so the visual affordance and
     the real hit target are the same thing. */
  .jr-footer__locale-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
  }

  .jr-footer__locale-box select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    /* JR, 2026-08-08: was `padding-right: 2px` on an auto-width select, which
       left the <select> occupying only 131x17.6px of a 265x40px bordered row
       -- measured 14% of the visible box actually opened the dropdown, and a
       17.6px-tall target is well under the 44px mobile minimum. Jacob: "when
       I try to click the country language selector in the footer I don't get
       a dropdown." Stretch it to own the full height and all remaining width
       (the caret above is out of flow, so this reaches under it too); the
       right padding just keeps the value text clear of the chevron. */
    flex: 1;
    min-width: 0;
    /* `align-self: stretch` alone was NOT enough: the select already filled the
       box's 17.6px CONTENT height exactly, and the rest of the visible 39.6px
       row is the box's own padding (10px 14px) + border, which belongs to the
       <label>, not the select -- so clicks in the padding still did nothing.
       Cancel that padding with negative margins and re-add it as the select's
       own padding: the hit box grows to the border on three sides while the
       value text stays exactly where it was. Right padding also clears the
       absolutely-positioned caret. */
    margin-block: -10px;
    padding-block: 10px;
    margin-inline-end: -14px;
    padding-inline-end: 34px;
  }

  .jr-footer__locale-box select:focus-visible {
    outline: none;
  }

  .jr-footer__legal {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-footer__legal a {
    color: inherit;
    text-decoration: none;
  }

  .jr-footer__legal a:hover {
    color: var(--color-foreground);
  }

  /* Wordmark base. The SVG keeps its own aspect ratio, so width decides
     the height; a small even margin on all sides keeps it off the edges
     (the Sandro treatment). */
  .jr-footer__wordmark {
    display: block;
    padding: clamp(18px, 2.2vw, 40px) clamp(16px, 2vw, 40px) clamp(20px, 2.4vw, 44px);
  }

  .jr-footer__wordmark svg {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 989px) {
    .jr-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-top: 44px;
    }

    .jr-footer__col--newsletter {
      grid-column: 1 / -1;
      order: -1;
    }
  }

  /* tablet and up: the columns stay permanently expanded -- no accordion
     affordance. The existing .jr-footer__links{display:grid} rule above is
     enough on its own to keep the list showing regardless of the <details>'s
     native open/closed state (an ordinary author rule already outranks the
     UA stylesheet's `details:not([open]) > :not(summary){display:none}` at
     that origin tier, no !important needed) -- so only the toggle's own
     affordance needs hiding here. */
  /* <details> is unconditionally open (see the Liquid above), so tablet/
     desktop already show the list correctly with zero CSS involved --
     these two rules only hide the now-pointless toggle affordance. */
  @media screen and (min-width: 750px) {
    .jr-footer__pm { display: none; }
    summary.jr-footer__heading { cursor: default; pointer-events: none; }
  }

  @media screen and (max-width: 749px) {
    .jr-footer__bottom {
      flex-direction: column;
      /* stretch, not flex-start -- the locale box was only as wide as its
         own text, leaving a wide gap of unused margin to its right that
         the accordion columns above didn't have (2026-08-07: "make that
         dropdown as wide as the content above it"). */
      align-items: stretch;
    }

    .jr-footer__locale-box {
      /* align-items:stretch above only reaches its direct child, the
         <form> wrapper -- the visible bordered box is actually the
         <label> nested inside that form, which never inherited the
         stretch and stayed shrink-to-fit at its own text width
         (2026-08-07, still not fixed after the first attempt: "make
         that dropdown as wide as the content above it"). Explicit
         width:100% on the real visible element this time. */
      width: 100%;
      box-sizing: border-box;
      justify-content: space-between;
    }

    /* JR, 2026-08-08: .jr-footer__bottom goes column + align-items:stretch
       here, so this row spans the full width directly under the locale box --
       centre the copyright in it now that it's the row's only content (the
       duplicate policy links were removed from the markup). */
    .jr-footer__legal {
      justify-content: center;
      text-align: center;
    }

    /* real accordion: full-width stacked rows. The script tag after the
       grid removes `open` here on load; Safari then hides the content on
       its own (native, no CSS needed), but Chromium does NOT -- it lets
       the base .jr-footer__links{display:grid} rule keep showing it
       regardless of [open] (confirmed live, 2026-07-28: this same override
       is exactly what made the tablet/desktop CSS-only approach fail in
       Safari two attempts running, so Chromium and Safari disagree in
       *both* directions here). This more specific selector is what makes
       the closed state actually hide the content in Chromium too. */
    .jr-footer__col details:not([open]) .jr-footer__links { display: none; }

    /* base .jr-footer__grid gap (32px 28px) is a column gap for the
       desktop multi-column layout -- at single-column width every row-gap
       becomes a blank vertical gap between stacked accordion rows, which
       read as leftover space below each closed item (Jacob, 2026-08-02:
       "remove the space below each footer item on mobile"). Borders
       already separate rows, so zero it here. */
    .jr-footer__grid { grid-template-columns: 1fr; gap: 0; }

    nav.jr-footer__col { border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }
    nav.jr-footer__col:last-of-type { border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }

    summary.jr-footer__heading { cursor: pointer; padding-block: 10px; margin: 0; }
    .jr-footer__col .jr-footer__links { gap: 8px; padding-bottom: 10px; }
  }
/* END_SECTION:jr-footer */

/* START_SECTION:jr-fragrance-pdp (INDEX:33) */
/* Fragrance media column reuses every jr-pdp.css pattern (.jr-tile,
     .jr-detail*, .jr-specs*). Only the pyramid and the quiet facts strip
     are fragrance-specific -- both on the same tokens and
     --jr-font-display so they read identically. */

  /* .jr-detail__media's default img rules are the two-up bedding crop
     (width:200%, pinned left/right). Fragrance story photos are single
     images, so restore normal cover behaviour. !important throughout:
     this section's own {% stylesheet %} block cascades before jr-pdp.css
     (Shopify bundles section stylesheets separately from asset_url-linked
     ones, earlier in <head> regardless of source order in this file), so
     without it the shared 200%-width two-up rule silently won anyway --
     every "single" image here was rendering at 2x scale then clipped by
     the wrapper's overflow:hidden, unnoticed only because cover-cropping
     a busy photo at 2x still looks like a plausible close-up. */
  .jr-detail__media--single img {
    position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover;
    transform: none !important; max-width: 100% !important;
  }
  /* The kitchen counter photo is a square (1669x1669) composed wide --
     bottles, cup and croissant spread across the frame rather than
     centred. Cropping it into the shared 4:5 detail box (taller than
     wide) cuts most of that off no matter where the crop is anchored.
     Shown at its own square aspect instead, so the whole photo renders
     with zero cropping. */
  .jr-detail__media.jr-detail__media--notes-crop { aspect-ratio: 1 / 1; }

  /* The bottle sketch ("Considered down to the pump") is a technical
     drawing, not a lifestyle photo -- cropping it into the 4:5 detail box
     like a normal cover photo cut off the dimension callout and the
     JUNIPER wordmark on the bottle. Shown whole instead (letterboxed)
     rather than cropped. Letterbox is plain white, not the shared
     --jr-paper-2 placeholder tone (Jacob, 2026-07-23): the sketch is
     drawn on white paper, so --jr-paper-2's warm cream read as a visible
     seam around the drawing rather than a continuation of the page. */
  /* !important is required: jr-pdp.css's shared .jr-detail__media rule sets
     its own background at the same specificity and loads AFTER this
     section's own {% stylesheet %} block in <head> regardless of source
     order in this file (see juniper_section_stylesheet_cascade_bug),
     so without it the cream tone silently won anyway. */
  .jr-detail__media--contain { background: #fff !important; }
  .jr-detail__media--contain img { object-fit: contain; }

  /* jr-pdp.css sets .jr-specs { order: -1 } to pull the specs table up
     ahead of later DOM siblings on the bedding/towel PDPs. .jr-media here
     is also `display:flex; flex-direction:column`, so that same rule
     applies -- it was silently yanking the specs table to the very TOP of
     the fragrance media column (ahead of the scent story and pyramid),
     not just above the life_image right after it in the DOM. Reset to
     normal document order so specs renders where it actually sits in this
     file: right after the pyramid, right before life_image (Jacob,
     2026-07-24: "move this image up to right below the specifications"
     -- the DOM order was already correct, only this leaked `order` was
     wrong). Screenshot/HTML-source-order checks won't catch this class of
     bug since `order` never touches the DOM -- verify actual rendered
     position (getBoundingClientRect / a real screenshot), not just markup
     sequence. */
  .jr-pdp--fragrance .jr-specs { order: 0; }

  /* Bottom-align image+text like the bedding/towel PDPs (Jacob, 2026-07-23),
     reverting the flex-start override this section had (see git history):
     that override existed specifically because bottom-alignment left an
     oversized gap above short text blocks like the scent story / pyramid.
     That tradeoff is intentionally accepted now for visual consistency
     with the rest of the PDP family -- re-check those two rows if the old
     gap issue resurfaces. */
  .jr-pyramid__notes { display: grid; grid-template-rows: repeat(3, 1fr); }
  .jr-pyramid__row {
    display: flex; flex-direction: column; justify-content: center;
    padding: 14px 0; border-top: 1px solid var(--jr-line);
  }
  .jr-pyramid__row:first-child { border-top: 0; }
  .jr-pyramid__label {
    font-family: var(--jr-font-display); font-weight: 500; font-stretch: 100%;
    font-size: 15px; color: var(--jr-ink); margin: 0 0 5px;
  }
  .jr-pyramid__list { margin: 0; font-size: var(--jr-text-base); line-height: 1.5; color: var(--jr-ink-soft); }

  /* One-time / subscribe toggle -- two price-forward cards side by side
     (not a plain radio list), matching the functional pattern already
     proven on the live site, redrawn in this theme's own monochrome
     buy-box language instead of copying its colour treatment. Only
     rendered when the product has a selling plan group attached, so this
     never affects any other PDP. */
  .jr-purchase-opt {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 0 0 12px;
  }
  .jr-purchase-opt__card {
    position: relative;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 14px; border: 1px solid var(--jr-line);
    cursor: pointer; text-align: left;
  }
  .jr-purchase-opt__card:has(input:checked) {
    border-color: var(--jr-ink);
    background: rgb(0 0 0 / 0.04);
  }
  /* The input covers the whole card (not just its own native 16x16 box)
     and takes the click directly, rather than relying on label-click
     forwarding to an off-flow absolutely-positioned input -- confirmed by
     testing that the latter doesn't reliably work: a real click on the
     card did nothing, while a direct .click() on the input worked fine,
     meaning clicks on the visible card weren't actually reaching it. */
  .jr-purchase-opt__card input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
  }
  .jr-purchase-opt__label { font-size: var(--jr-text-xs); color: var(--jr-ink-soft); }
  .jr-purchase-opt__price { font-weight: 500; font-size: var(--jr-text-base); white-space: nowrap; }

  /* Cadence picker -- only shown once "Subscribe" is the active choice
     (toggled via [hidden] in JS, not CSS display, so it's never mid-
     transition-visible if JS is slow to run on a cold load). A fully
     custom listbox, not a native <select>: Safari/Firefox ignore any
     CSS on a native <option> popup and fall back to OS chrome regardless
     (confirmed by testing, not a gap that more CSS can close), so this
     is built from a <button> trigger + an absolutely-positioned <ul>
     the theme fully controls, matching the purchase-option cards'
     flat, square-cornered look in every browser identically. */
  .jr-cadence { margin: 0 0 16px; }
  .jr-cadence__label { display: block; margin: 0 0 6px; font-size: var(--jr-text-xs); color: var(--jr-ink-soft); }
  .jr-cadence__select-wrap { position: relative; }
  .jr-cadence__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 12px 14px; border: 1px solid var(--jr-line);
    border-radius: 0; background: var(--jr-surface); font-family: inherit;
    font-size: var(--jr-text-base); color: var(--jr-ink); cursor: pointer; text-align: left;
  }
  .jr-cadence__trigger:focus-visible { outline-color: var(--jr-ink); outline-offset: -1px; }
  .jr-cadence__trigger svg {
    width: 10px; height: 10px; flex-shrink: 0; color: var(--jr-ink-soft);
    transition: transform 0.15s ease;
  }
  .jr-cadence__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
  .jr-cadence__listbox {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
    margin: 0; padding: 4px 0; list-style: none;
    background: var(--jr-surface); border: 1px solid var(--jr-line);
    max-height: 240px; overflow-y: auto;
  }
  .jr-cadence__option {
    padding: 10px 14px; font-size: var(--jr-text-base); color: var(--jr-ink); cursor: pointer;
  }
  .jr-cadence__option:hover, .jr-cadence__option:focus {
    background: rgb(0 0 0 / 0.04); outline: none;
  }
  .jr-cadence__option[aria-selected="true"] { font-weight: 500; }

  .jr-sub-details { margin: 0 0 16px; font-size: var(--jr-text-xs); }
  .jr-sub-details summary {
    cursor: pointer; color: var(--jr-ink-soft); text-decoration: underline;
    text-underline-offset: 2px; list-style: none;
  }
  .jr-sub-details summary::-webkit-details-marker { display: none; }
  .jr-sub-details__body { margin-top: 8px; color: var(--jr-ink-soft); line-height: 1.5; }
  .jr-sub-details__body p { margin: 0; }
  .jr-sub-details__body a { color: var(--jr-ink); text-underline-offset: 2px; }

  @media (max-width: 480px) {
    .jr-purchase-opt { grid-template-columns: 1fr; }
  }

  /* Cross-sell, in the right column below the accordion -- a compact
     vertical stack, not the wider wrapping grid jr-pairs-with.liquid uses
     for a full-width section (this column is far narrower). */
  .jr-info-pairs { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }
  .jr-info-pairs__h { font-size: var(--jr-text-base); font-weight: 500; margin: 0 0 16px; }
  .jr-info-pairs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .jr-info-pairs__row { display: flex; align-items: center; gap: 12px; }
  .jr-info-pairs__media {
    flex: 0 0 auto; width: 56px; height: 56px; display: block; overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }
  .jr-info-pairs__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .jr-info-pairs__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .jr-info-pairs__name {
    font-size: var(--jr-text-sm); color: var(--jr-ink); text-decoration: none;
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .jr-info-pairs__name:hover { text-decoration: underline; text-underline-offset: 2px; }
  .jr-info-pairs__price { font-size: var(--jr-text-xs); color: var(--jr-ink-soft); }
  .jr-info-pairs__row .jr-addbtn { flex: 0 0 auto; }
  .jr-info-pairs__row .jr-addbtn__button {
    width: auto; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px;
  }
/* END_SECTION:jr-fragrance-pdp */

/* START_SECTION:jr-guides-list (INDEX:34) */
.jr-guides {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--jr-guides-pad-top, 56px) var(--jr-guides-pad-bottom, 72px);
    box-sizing: border-box;
    background: var(--color-background);
  }

  .jr-guides__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(36px, 4vw, 60px);
  }

  .jr-guides__eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-guides__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-guides__intro {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-guides__pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto clamp(36px, 4vw, 56px);
  }

  .jr-guides__pill {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.35);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-foreground);
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
  }

  .jr-guides__pill:hover {
    border-color: var(--color-foreground);
  }

  .jr-guides__pill.is-active {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }

  /* category has no guides yet: shown for taxonomy, not a dead link */
  .jr-guides__pill.is-empty {
    border-style: dashed;
    border-color: rgb(var(--color-foreground-rgb) / 0.2);
    color: rgb(var(--color-foreground-rgb) / 0.38);
    cursor: default;
  }

  .jr-guides__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* never wider than the page's own side margin */
    column-gap: var(--page-margin);
    row-gap: clamp(40px, 4vw, 64px);
  }

  .jr-guides--2 .jr-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-guides--4 .jr-guides__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .jr-guides__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .jr-guides__media {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    margin-bottom: 18px;
  }

  .jr-guides__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .jr-guides__link:hover .jr-guides__img {
    transform: scale(1.03);
  }

  .jr-guides__cat {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    margin-bottom: 8px;
  }

  .jr-guides__h {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(1.375rem, 1.7vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
  }

  .jr-guides__dek {
    margin-top: 10px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    /* one to two lines, then ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .jr-guides__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: clamp(48px, 5vw, 76px);
  }

  .jr-guides__pagelink {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .jr-guides__pagelink:hover { color: rgb(var(--color-foreground-rgb) / 0.6); }

  .jr-guides__pagelink.is-current {
    border-bottom-color: var(--color-foreground);
  }

  .jr-guides__empty {
    text-align: center;
    padding-block: 60px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  @media screen and (max-width: 989px) {
    .jr-guides__grid,
    .jr-guides--4 .jr-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media screen and (max-width: 599px) {
    .jr-guides__grid,
    .jr-guides--2 .jr-guides__grid,
    .jr-guides--4 .jr-guides__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:jr-guides-list */

/* START_SECTION:jr-help-hub (INDEX:35) */
.jr-help {
    /* .section--page-width's own flush-edge trick needs display:grid on
       this element, which this rule's display:flex overrides -- so it was
       never actually reaching the header/footer's true edge (Jacob,
       2026-08-04: "close but not all the way out"). Set the same inset
       directly instead, matching every other JR section. */
    padding-inline: var(--page-margin);
    padding-block: var(--jr-space-5, 42px) var(--jr-space-5, 42px);
    display: flex;
    flex-direction: column;
    gap: var(--jr-space-5, 42px);
  }

  .jr-help__hero { text-align: center; max-width: 46rem; margin-inline: auto; }
  .jr-help__eyebrow {
    margin: 0 0 14px;
    font-family: var(--jr-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }
  .jr-help__heading {
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
    margin: 0;
    color: var(--jr-ink);
  }
  .jr-help__sub {
    margin: 18px auto 24px;
    max-width: 34rem;
    font-family: var(--jr-font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--jr-ink-soft);
  }

  .jr-help__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Roughly 2x the original 46rem pill (Jacob, 2026-08-04: "twice as
       wide"), but capped as min(fixed, %) rather than a flat 92rem --
       a flat 2x cap meets or exceeds the real content column on a normal
       laptop window, which read as full-width, not "wider" (Jacob,
       2026-08-04 follow-up correction). The % term keeps a visible margin
       on both sides at any realistic viewport. */
    max-width: min(43rem, 42%);
    margin-inline: auto;
    /* a little extra breathing room below the search pill, on top of the
       section's own flex gap (Jacob, 2026-08-04). */
    margin-bottom: 20px;
    padding: 13px 18px;
    border: 1px solid var(--jr-green);
    border-radius: 999px;
    background: var(--jr-green);
    color: #fff;
  }
  .jr-help__search svg { flex-shrink: 0; }
  .jr-help__search-input {
    flex: 1;
    /* type="search" gets its own native white pill chrome in WebKit/Blink
       unless appearance is explicitly reset, AND this section's own
       stylesheet loads before the theme's global input reset (same cascade
       gotcha as elsewhere on this theme -- see
       juniper_section_stylesheet_cascade_bug), so background/border need
       !important to actually win instead of being silently overridden a
       moment later (Jacob, 2026-08-04: "keep all of it green"). */
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: none;
    font-size: var(--jr-text-md);
    color: #fff;
    font-family: var(--jr-font-sans);
  }
  .jr-help__search-input::-webkit-search-decoration,
  .jr-help__search-input::-webkit-search-cancel-button,
  .jr-help__search-input::-webkit-search-results-button,
  .jr-help__search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  .jr-help__search-input::placeholder { color: rgb(255 255 255 / 0.72); }

  .jr-help__no-results {
    max-width: min(43rem, 42%);
    margin: 18px auto 0;
    text-align: center;
    font-family: var(--jr-font-sans);
    font-size: var(--jr-text-base);
    color: var(--jr-ink-soft);
  }

  .jr-help__group + .jr-help__group {
    margin-top: 12px;
  }

  /* Matches .jr-colgroup__h (collection-page group subheaders) so the two
     grouping systems read as the same pattern (Jacob, 2026-08-04). */
  .jr-help__group-heading {
    font-family: var(--jr-font-sans);
    /* +2pt over the previous 1.125rem (Jacob, 2026-08-04). */
    font-size: 1.29rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: var(--jr-ink);
  }

  .jr-help__grid {
    /* No max-width here: .jr-help is already the page-width column
       (.section--page-width), so this should reach the same flush left/
       right edge as the header/footer (Jacob, 2026-08-04) rather than
       re-centering a narrower box inside it. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 64px;
    /* Matches the 54px gap between groups (flex gap + margin-top below),
       so a multi-row group's internal row spacing doesn't read tighter
       than the space between groups (Jacob, 2026-08-05). */
    row-gap: calc(var(--jr-space-5, 42px) + 12px);
    width: 100%;
  }
  @media screen and (max-width: 989px) {
    .jr-help__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media screen and (max-width: 749px) {
    .jr-help__grid { grid-template-columns: 1fr; }
  }

  .jr-help__cat-name {
    font-family: var(--jr-font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--jr-ink);
  }

  .jr-help__list { margin-top: 4px; }
  .jr-help__see-more {
    display: inline-block;
    margin-top: 14px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--jr-font-sans);
    font-size: var(--jr-text-base);
    font-weight: 600;
    color: var(--jr-ink);
    text-decoration: underline;
    cursor: pointer;
  }

  .jr-help__item { border-bottom: 1px solid var(--jr-line); }
  .jr-help__item:first-child { border-top: 1px solid var(--jr-line); }
  .jr-help__item summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 0; cursor: pointer; user-select: none;
    font-family: var(--jr-font-sans);
    /* var(--jr-text-base) (13.5px) sitewide -- bumped ~1.5pt for this page
       specifically (Jacob, 2026-08-04), not the shared token itself. */
    font-size: 15px; font-weight: 500; color: var(--jr-ink);
  }
  .jr-help__item summary::-webkit-details-marker { display: none; }
  .jr-help__pm { font-size: 18px; line-height: 1; color: var(--jr-ink-soft); flex-shrink: 0; }
  .jr-help__item:not([open]) .jr-help__pm::before { content: '+'; }
  .jr-help__item[open] .jr-help__pm::before { content: '\2013'; }
  .jr-help__item-body { padding: 0 0 16px; font-family: var(--jr-font-sans); color: var(--jr-ink-soft); font-size: 15px; }
  .jr-help__item-body p { margin: 0 0 8px; }
  .jr-help__item-body p:last-child { margin-bottom: 0; }

  .jr-help__contact {
    /* extra breathing room above "Contact us", beyond the base flex gap
       shared by every other section on this page (Jacob, 2026-08-04). */
    margin-top: 36px;
    text-align: center;
  }
  .jr-help__contact-heading {
    font-family: var(--jr-font-serif);
    /* significantly larger, close to .jr-help__heading ("Help") above
       (Jacob, 2026-08-04) -- kept a touch under it so the page H1 still
       reads as the primary heading. */
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.04;
    margin: 0 0 28px;
    color: var(--jr-ink);
  }
  .jr-help__contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
  }
  @media screen and (max-width: 749px) {
    .jr-help__contact-grid { grid-template-columns: 1fr; }
  }
  .jr-help__contact-card {
    display: block;
    padding: 28px 24px;
    border: 1px solid var(--jr-line);
    border-radius: 8px;
    /* same light grey as the announcement bar (header-group.json
       background_color), not the --jr-paper-2 token (Jacob, 2026-08-04). */
    background: #efeeeb;
    text-align: center;
    color: inherit;
    text-decoration: none;
  }
  .jr-help__contact-card h3 {
    font-family: var(--jr-font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--jr-ink);
  }
  .jr-help__contact-card p { margin: 0; font-family: var(--jr-font-sans); color: var(--jr-ink-soft); font-size: var(--jr-text-base); }
  .jr-help__contact-link {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--jr-font-sans);
    font-size: var(--jr-text-sm);
    font-weight: 600;
    text-decoration: underline;
    color: var(--jr-ink);
  }
  a.jr-help__contact-card:hover { border-color: var(--jr-line-strong); }
/* END_SECTION:jr-help-hub */

/* START_SECTION:jr-home-category-strip (INDEX:36) */
.jr-catstrip {
    padding-block: var(--jr-catstrip-pad-top, 0) var(--jr-catstrip-pad-bottom, 0);
    background: var(--color-background);
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    box-sizing: border-box;
  }

  /* 2px hairline via grid gap, same trick as jr-home-strip / jr-home-editorial */
  .jr-catstrip__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    background: var(--color-background);
  }

  /* one room's whole column: its photo, then its products, stacked -- this
     nesting (not a separate section) is what makes mobile's single-column
     stack land each room's products right after that room's own photo */
  .jr-catstrip__col {
    display: flex;
    flex-direction: column;
  }

  .jr-catstrip__photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--jr-paper-2, #e7e5e0);
  }

  .jr-catstrip__media,
  .jr-catstrip__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-catstrip__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0) 68%);
  }

  .jr-catstrip__body {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    max-width: 100%;
    padding: clamp(20px, 3vw, 44px);
    text-align: left;
  }

  /* small caps line directly above the giant word, Dusty Deco's
     "DEPTH WITH" / "CHARACTER WITH" -- sans, tracked, quiet */
  .jr-catstrip__eyebrow {
    margin: 0 0 2px;
    font-family: var(--font-heading--family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.92;
  }

  /* the big word itself -- serif, regular weight (not bold, matching the
     reference's light stroke contrast), bottom-left, tight line-height so
     it reads as one strong mark rather than a heading */
  .jr-catstrip__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.6vw, 5rem); /* -20%, Jacob 2026-08-01 */
    line-height: 0.95;
    letter-spacing: 0.005em;
  }

  /* product row under each photo -- same tile design as the jr-home-featured
     section this was folded in from, so the look carries over unchanged */
  .jr-catstrip__products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    /* JR, 2026-08-05: was 16px -- the category photo and the product row below
       it are adjacent images, so they get the same 2px hairline this section
       already uses between its own tiles (gap above), not a soft gutter. The
       breathing room that separates one strip from the next now lives entirely
       in the section's padding-bottom setting instead. */
    margin-top: 2px;
    background: var(--color-background);
  }

  .jr-catstrip__product-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .jr-catstrip__product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-catstrip__product-info {
    padding: 14px 10px 0;
  }

  /* line-height/min-height reserve a fixed 2-line block so a longer product
     name (wrapping to 2 lines) doesn't push that card's price down relative
     to a shorter, 1-line name in the same row. */
  .jr-catstrip__product-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-heading--family);
    font-weight: 300;
    font-size: 0.975rem;
    line-height: 1.2;
    min-height: calc(1.2em * 2);
    color: var(--color-foreground);
    text-decoration: none;
  }

  /* Always rendered (even blank) with a reserved line-height, since only
     some products have a material/fulfilment note here -- otherwise the
     price above sits one row higher on every card that has no note. */
  .jr-catstrip__product-material {
    display: block;
    margin: 2px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 200;
    font-size: 0.8125rem;
    line-height: 1.3;
    min-height: 1.3em;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  /* ...which the rule above can't do on its own: base.css has a global
     `p:empty { display: none }` whose specificity (0,1,1) outranks a bare
     class (0,1,0), so on exactly the products this reservation exists for --
     the ones with no note -- the paragraph collapsed to display:none and the
     min-height never applied, dropping their price ~19px above the row.
     Re-asserting it on the :empty case lands at (0,2,0) and wins on
     specificity, so no !important and no source-order dependency. */
  .jr-catstrip__product-material:empty {
    display: block;
  }

  .jr-catstrip__product-price {
    margin: 8px 0 0;
    font-weight: 300;
    font-size: 0.975rem;
  }

  @media screen and (max-width: 749px) {
    .jr-catstrip__row { grid-template-columns: 1fr; }
    .jr-catstrip__col { margin-bottom: 32px; }
    .jr-catstrip__col:last-child { margin-bottom: 0; }
    .jr-catstrip__photo { aspect-ratio: 4 / 5; }
    .jr-catstrip__title { font-size: clamp(2.75rem, 14vw, 4rem); }
    .jr-catstrip__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* the 3rd, desktop-only pick per room (e.g. Tencel, Hand Soap & Lotion) */
    .jr-catstrip__product--desktop-only { display: none; }
  }
/* END_SECTION:jr-home-category-strip */

/* START_SECTION:jr-home-editorial (INDEX:37) */
.jr-edit {
    padding-block: var(--jr-edit-pad-top, 0) var(--jr-edit-pad-bottom, 0);
    background: var(--color-background);
    /* sit in the site page column: same content width + gutter as the header
       and footer, so the band lines up with them at every viewport (Sandro) */
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    box-sizing: border-box;
  }

  /* eyebrow + big serif title + intro line, ported directly from
     jr-campaigns-list's .jr-camp__head/__eyebrow/__title/__intro (Jacob,
     2026-08-02: "similar to what is at the top of the photo campaign
     page") -- same --jr-font-serif token, same sizes, renamed to jr-edit__
     to avoid colliding with the per-tile .jr-edit__eyebrow already used
     inside each video tile's own body. */
  .jr-edit__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(28px, 3.2vw, 44px);
  }

  .jr-edit__kicker {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-edit__heading {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-edit__intro {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-edit__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* wider than the site's usual 2px hairline: these three tiles are busy,
       edge-to-edge ceramic-tile patterns in similar cream/gold/blue tones,
       so a 2px line (correct, measured, just imperceptible against this
       specific content -- Jacob, 2026-08-02) reads as no gap at all. */
    gap: 12px;
    background: var(--color-background);
  }

  .jr-edit__tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--jr-edit-bg, #e7e5e0);
  }

  .jr-edit__media,
  .jr-edit__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-edit__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0) 70%);
  }

  .jr-edit__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(20px, 2.4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .jr-edit__eyebrow {
    font-family: var(--font-heading--family);
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.9;
  }

  .jr-edit__title {
    font-family: var(--font-heading--family);
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  /* line-height fixed + min-height reserved for 2 lines, regardless of how
     many the actual copy needs -- .jr-edit__body anchors to the tile's
     bottom, so a longer subtitle (wrapping to 2 lines on one tile, 1 on the
     others) was pushing that tile's whole block, and its title with it,
     higher up than its neighbours' (Jacob, 2026-08-02: "ensure the headline
     is on a consistent row"). Reserving the same height on every tile keeps
     the titles aligned no matter how the copy wraps. */
  .jr-edit__sub {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.01em;
    opacity: 0.92;
    min-height: 2.8em;
  }

  .jr-edit__mail {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }

  .jr-edit__mail:hover {
    text-decoration-thickness: 2px;
  }

  @media screen and (max-width: 749px) {
    .jr-edit__row {
      grid-template-columns: 1fr;
    }

    .jr-edit__tile {
      aspect-ratio: 16 / 11;
    }
  }
/* END_SECTION:jr-home-editorial */

/* START_SECTION:jr-lp-benefits (INDEX:38) */
.jr-lpben { background: var(--jr-ben-bg, #fff); color: var(--jr-ben-fg, #12100e); padding: var(--jr-ben-pt, 64px) var(--page-margin, 32px) var(--jr-ben-pb, 64px); }
  .jr-lpben__head { text-align: center; max-width: 40rem; margin: 0 auto 40px; }
  .jr-lpben__eyebrow { font-family: var(--font-heading--family); margin: 0 0 12px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
  .jr-lpben__h { font-family: var(--font-heading--family); margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; line-height: 1.08; }
  .jr-lpben__grid { display: grid; grid-template-columns: repeat(var(--jr-ben-cols, 3), minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); max-width: 1200px; margin-inline: auto; }
  .jr-lpben__col { text-align: center; }
  .jr-lpben__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px; background: rgb(0 0 0 / 0.03); }
  .jr-lpben__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .jr-lpben__ch { font-family: var(--font-heading--family); margin: 0 0 10px; font-size: 1.125rem; font-weight: 500; }
  .jr-lpben__cb { font-size: 0.9375rem; line-height: 1.55; font-weight: 300; opacity: 0.85; }
  .jr-lpben__cb p { margin: 0 0 8px; }
  @media screen and (max-width: 749px) {
    .jr-lpben__grid { grid-template-columns: 1fr; gap: 36px; }
  }
/* END_SECTION:jr-lp-benefits */

/* START_SECTION:jr-lp-colorpicker (INDEX:39) */
.jr-lp-cp {
    background: var(--jr-cp-bg);
    color: var(--jr-cp-fg);
    padding-inline: var(--page-margin, 32px);
    /* Shared landing-page section gap, not the (much smaller) sitewide
       page-margin token -- was creating a visibly tighter gap than the
       rest of the page's sections (2026-08-07: "consistent white space
       between sections throughout"). */
    margin-top: var(--jr-lp-gap, 32px);
  }

  .jr-lp-cp__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
    gap: clamp(24px, 4vw, 64px);
  }

  /* No text/CTA panel on this instance, but keep the same 1.5fr/1fr
     track definition as the default grid rather than widening to 1fr --
     that made the photo span the full row (Jacob, 2026-08-05: "should be
     as wide as the three products below", i.e. mix_and_match's own photo
     column, not the whole page). With only one grid item, it occupies
     just the first (1.5fr) track and the second sits empty, matching
     mix_and_match's photo width exactly. Aspect ratio also reverts to
     the default 1:1 (removed the 16:9 override) to match the square
     tiles in that same section directly below it. */

  .jr-lp-cp__photo-zone {
    display: flex;
    gap: 10px;
  }

  .jr-lp-cp__photo {
    flex: 1;
    position: relative;
    /* the frame-role product photos are shot square (1400x1400) -- 4:3
       cropped their top/bottom off under object-fit:cover. 1:1 shows the
       whole photo. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f1ea;
  }

  .jr-lp-cp__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-lp-cp__thumbs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    /* Width is set inline by JS (see below), not CSS -- thumb width
       needs to equal thumb height for a square, but thumb height comes
       from dividing up the PHOTO's height, and the photo's own width
       (it's flex:1 in the same row) depends on how much space the
       thumbs column takes. Sizing width from height in pure CSS
       (aspect-ratio) while height itself depends on the photo's
       computed size is a genuine circular dependency -- tried it, and
       the photo collapsed instead of resolving cleanly. JS measures the
       actual rendered photo height once (a real number, no circularity)
       and sets each thumb's pixel width/height directly (Jacob,
       2026-08-06: "the thumbnails need to be wider (square) so you see
       the full photos"). 64px here is only the pre-JS fallback.
       flex/aspect-ratio removed from .jr-lp-cp__thumb below for the same
       reason -- explicit inline px from JS is what actually applies. */
    width: 64px;
  }

  .jr-lp-cp__thumb {
    display: block;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }

  .jr-lp-cp__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .jr-lp-cp__thumb:hover {
    opacity: 0.85;
  }

  .jr-lp-cp__thumb.is-active {
    opacity: 1;
    border-color: var(--jr-cp-fg);
  }

  .jr-lp-cp__text {
    display: flex;
    align-items: flex-end;
  }

  .jr-lp-cp__text-inner {
    max-width: 28rem;
  }

  .jr-lp-cp__eyebrow {
    font-family: var(--font-heading--family); margin: 0 0 14px;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75;
  }

  .jr-lp-cp__heading {
    font-family: var(--font-heading--family); margin: 0 0 16px;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 400; line-height: 1.15;
  }

  .jr-lp-cp__body {
    font-size: 1rem; line-height: 1.6; font-weight: 300; opacity: 0.9;
  }

  .jr-lp-cp__body p { margin: 0; }

  .jr-lp-cp__cta {
    display: inline-block; margin-top: 28px;
    font-family: var(--font-heading--family);
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--jr-cp-accent, #12100e); color: var(--jr-cp-accent-fg, #ffffff);
    text-decoration: none; padding: 16px 36px;
    transition: opacity 0.2s ease;
  }

  .jr-lp-cp__cta:hover {
    opacity: 0.88;
  }

  /* mirrored layout: photo on the right, text on the left */
  .jr-lp-cp--right .jr-lp-cp__grid {
    grid-template-columns: 1fr 1.5fr;
  }

  .jr-lp-cp--right .jr-lp-cp__photo-zone {
    order: 2;
  }

  .jr-lp-cp--right .jr-lp-cp__text {
    order: 1;
  }

  @media screen and (max-width: 749px) {
    .jr-lp-cp__grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .jr-lp-cp__text {
      align-items: flex-start;
    }

    /* 2026-08-07: "center align the shop the bed set CTA here" -- only
       the CTA itself, not the eyebrow/heading/body above it, which stay
       left-aligned like every other section's copy on this page. */
    .jr-lp-cp__text-inner {
      text-align: center;
    }

    .jr-lp-cp__eyebrow,
    .jr-lp-cp__heading,
    .jr-lp-cp__body {
      text-align: left;
    }

    /* photo always reads first on mobile regardless of desktop mirroring */
    .jr-lp-cp--right .jr-lp-cp__photo-zone,
    .jr-lp-cp--right .jr-lp-cp__text {
      order: initial;
    }

    /* Stack instead of the desktop side-by-side rail -- the vertical
       thumb column doesn't shrink, so it squeezed the photo into a
       narrow sliver and forced the whole 1fr grid track (text included)
       wider than the screen (2026-08-07: "photo needs to be full mobile
       screen with the thumbnails below," "text... wider than the rest
       of the content"). Photo goes full width; thumbs become a plain
       fixed-size row underneath, scrolling horizontally if they don't
       all fit rather than shrinking or wrapping. */
    .jr-lp-cp__photo-zone {
      flex-direction: column;
      min-width: 0;
    }

    /* min-width:0 is load-bearing -- flex/grid items default to
       min-width:auto (their content's own unwrapped size as the floor),
       so without it this row's 7 unclipped thumbnails (~424px) forced
       the whole grid track wider than the screen instead of actually
       scrolling, dragging the photo and eyebrow above it along with it
       (2026-08-07: "The Bed Set element is considerably wider than the
       rest of the content"). overflow-x:auto only gets a chance to
       engage once the box is allowed to shrink below that. */
    /* Fit within the photo's own width instead of scrolling past it --
       7 fixed 52px thumbs (plus gaps) ran wider than the photo above
       them, spilling off screen (2026-08-07: "ensure the thumbnails fit
       within the screen limits so that they are no wider together than
       the bed set photograph is"). flex:1 divides whatever width the
       row actually has evenly across however many thumbs exist, instead
       of a fixed per-thumb size that only fit a specific count. */
    .jr-lp-cp__thumbs {
      flex-direction: row;
      width: 100%;
      min-width: 0;
      overflow-x: visible;
      padding-bottom: 0;
    }

    .jr-lp-cp__thumb {
      flex: 1 1 0;
      width: auto;
      height: auto;
      aspect-ratio: 1 / 1;
      min-width: 0;
    }
  }
/* END_SECTION:jr-lp-colorpicker */

/* START_SECTION:jr-lp-comparison (INDEX:40) */
.jr-lpcmp { background: var(--jr-cm-bg, #fff); color: var(--jr-cm-fg, #12100e); padding: var(--jr-cm-pt, 72px) var(--page-margin, 32px) var(--jr-cm-pb, 72px); }
  .jr-lpcmp__h { font-family: var(--font-heading--family); text-align: center; margin: 0 0 40px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; }
  .jr-lpcmp__wrap { max-width: 820px; margin-inline: auto; overflow-x: auto; }
  .jr-lpcmp__table { width: 100%; border-collapse: collapse; }
  .jr-lpcmp__table th, .jr-lpcmp__table td { padding: 16px 18px; text-align: center; font-size: 0.9375rem; font-weight: 300; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
  .jr-lpcmp__table thead th { font-family: var(--font-heading--family); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgb(0 0 0 / 0.18); }
  .jr-lpcmp__rowlab { text-align: left !important; font-weight: 400; }
  .jr-lpcmp__us { background: var(--jr-cm-hi, #f4f1ea); }
  thead .jr-lpcmp__us { color: var(--jr-cm-fg, #12100e); }
  .jr-lpcmp__tick { color: #3f7d54; font-weight: 600; margin-right: 6px; }
  .jr-lpcmp__them { color: rgb(0 0 0 / 0.5); }
  .jr-lpcmp__dash { opacity: 0.4; }
  @media screen and (max-width: 749px) { .jr-lpcmp__table th, .jr-lpcmp__table td { padding: 13px 12px; font-size: 0.875rem; } }
/* END_SECTION:jr-lp-comparison */

/* START_SECTION:jr-lp-cta (INDEX:41) */
/* margin-top/bottom default to 0 -- every existing instance (contact_band,
     the closing cta) is a continuous full-bleed band touching whatever's
     adjacent on purpose. Opt-in via settings for instances that want real
     white space around the band instead (Jacob, 2026-08-06, on the new
     configure_cta instance: "more white space both before and after this
     black bar"). */
  .jr-lpcta { position: relative; background: var(--jr-c-bg, #12100e); color: var(--jr-c-fg, #fff); margin-block: var(--jr-c-mt, 0px) var(--jr-c-mb, 0px); padding: var(--jr-c-pt, 80px) var(--page-margin, 32px) var(--jr-c-pb, 80px); text-align: center; overflow: hidden; }

  @media screen and (max-width: 749px) {
    /* 2026-08-08: "inside the green box - let's add a little bit more
       margin on the sides" -- the text was reaching close to the
       band's own edges at just the sitewide page-margin. */
    .jr-lpcta { padding-inline: calc(var(--page-margin, 32px) + 16px); }

    /* configure_cta's own margin_bottom setting (96px, a flat number
       that doesn't scale down like the rest of the page's gaps do) reads
       noticeably larger than every other section-to-section gap once
       compared side by side on a real phone (2026-08-08: "this white
       space... looks bigger than the other white spaces throughout the
       mobile site... unify that to whatever we are using further up the
       page"). founder_condensed (jr-lp-feature), directly after this
       instance, has no leading-gap mechanism of its own -- unlike every
       other jr-lp-* section, it doesn't add --jr-lp-gap on top, so this
       band's own margin_bottom is the ENTIRE gap between them, not half
       of a doubled-up one. Scoped to this one instance via its section
       ID (not every jr-lpcta on the page, e.g. contact_band, which
       hasn't been flagged) rather than lowering the shared setting. An
       ends-with attribute selector, not a literal ID -- Shopify prefixes
       the real id with a template-instance string
       ("shopify-section-template--NNN__configure_cta") that isn't
       stable across theme duplication, only the section-key suffix is. */
    [id$="__configure_cta"] .jr-lpcta {
      margin-bottom: var(--jr-lp-gap, 62px);
    }

    /* contact_band: same flat-96px-vs-standard-gap issue as
       configure_cta above, now actually flagged too (2026-08-08: "the
       next green block also has a really big white space after it").
       Measured 96px (this box's own margin) reaching the FAQ section
       cleanly (jr-faq adds no extra leading padding of its own), so
       this alone accounts for the oversized gap -- same fix. */
    [id$="__contact_band"] .jr-lpcta {
      margin-bottom: var(--jr-lp-gap, 62px);
    }
  }
  .jr-lpcta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .jr-lpcta__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / var(--jr-c-scrim, 0.4)); }
  .jr-lpcta__inner { position: relative; z-index: 2; max-width: 40rem; margin-inline: auto; }
  .jr-lpcta__eyebrow { font-family: var(--font-heading--family); margin: 0 0 14px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
  .jr-lpcta__h { font-family: var(--font-heading--family); margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 400; line-height: 1.05; }
  .jr-lpcta__sub { margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 300; opacity: 0.9; }
  .jr-lpcta__sub p { margin: 0; }
  .jr-lpcta__btn {
    display: inline-block; margin-top: 30px; font-family: var(--font-heading--family);
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--jr-c-accent, #fff); color: var(--jr-c-accent-fg, #12100e); padding: 17px 40px; text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .jr-lpcta__btn:hover { opacity: 0.88; }

  /* Jacob, 2026-07-22: "can be side to side all the way, however still
     with white margins on the sides" -- first attempt read "side to
     side" as fully edge-to-edge (0 margin), which turned out wrong: he
     confirmed afterward the black band still needs a visible white
     margin on both sides, same as everywhere else on the page. A real
     margin-inline (not just the existing padding-inline, which only
     insets the TEXT, not the background) is what actually shows a
     visible gap either side of the band itself. Originally gated to
     min-width:900px (a since-removed pushed-layout case to cancel out);
     that gate also meant mobile never got the margin at all, going
     edge-to-edge there instead (2026-08-07: "add white margins on the
     side on this element as well on mobile"). Unconditional now, same
     inset at every width. */
  .jr-lpcta {
    margin-inline: var(--page-margin, 32px);
  }
/* END_SECTION:jr-lp-cta */

/* START_SECTION:jr-lp-detail-pair (INDEX:42) */
.jr-lp-dp {
    padding: 72px var(--page-margin, 32px) 84px;
  }

  .jr-lp-dp__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  .jr-lp-dp__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-lp-dp__intro {
    max-width: 58ch;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.55;
    margin-top: 12px;
  }

  .jr-lp-dp__intro p {
    margin: 0;
  }

  .jr-lp-dp__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 40px;
  }

  .jr-lp-dp__card {
    display: flex;
    flex-direction: column;
  }

  .jr-lp-dp__photo {
    margin-bottom: 18px;
  }

  .jr-lp-dp__photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .jr-lp-dp__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }

  .jr-lp-dp__text p {
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .jr-lp-dp {
      padding-block: 48px 56px;
    }

    .jr-lp-dp__grid {
      grid-template-columns: 1fr;
      gap: 28px;
      margin-top: 28px;
    }
  }
/* END_SECTION:jr-lp-detail-pair */

/* START_SECTION:jr-lp-feature (INDEX:43) */
.jr-lpfeat { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--jr-f-bg, #fff); color: var(--jr-f-fg, #12100e); padding-inline: var(--page-margin, 26px); margin-bottom: 2px; }
  .jr-lpfeat--img-right .jr-lpfeat__media { order: 2; }
  .jr-lpfeat__media { position: relative; min-height: clamp(340px, 44vw, 620px); }
  /* Square photo instead of stretching to match the copy column's height
     (Jacob, 2026-08-06: "the photo can be square" -- founder story felt
     small/quiet next to the rest of the page). align-items:start on the
     parent stops the grid from forcing the panel to the media's full row
     height too, so a short square photo doesn't leave the copy column
     stretched with awkward empty space. */
  .jr-lpfeat--square { align-items: start; }
  .jr-lpfeat--square .jr-lpfeat__media { min-height: 0; aspect-ratio: 1 / 1; }

  /* Landscape image taking more than half the row, instead of an even
     50/50 split with a square photo (Jacob, 2026-08-07: "make the photos
     landscape shaped to take up more than half the space"). img-right
     visually swaps which grid TRACK the media lands in (via order, not a
     markup change), so the wider track has to swap sides too. */
  .jr-lpfeat--wide-media { align-items: start; grid-template-columns: 1.6fr 1fr; }
  .jr-lpfeat--wide-media.jr-lpfeat--img-right { grid-template-columns: 1fr 1.6fr; }
  /* Less landscape than a flat 4:3 -- at 4:3 the photo's own height fell
     noticeably short of the text column's real height, leaving the copy
     spilling well below where the photo ends (Jacob, 2026-08-07: "make
     them slightly less landscape so the text can fit next to it"). */
  /* overflow:hidden -- the left-crop scale below pushes the image past
     its own box on the left (right-anchored origin), and without a clip
     here that overflow bled straight past the section's page-margin
     inset, past the edge of the screen on mobile (2026-08-07: "we need
     white margins on both sides of these photos"). */
  .jr-lpfeat--wide-media .jr-lpfeat__media { min-height: 0; aspect-ratio: 5 / 4; overflow: hidden; }
  /* Trim 10% off the left of the photo itself, box size unchanged --
     right edge stays anchored (transform-origin:100%), scaling up by
     1/0.9 to fill the gap that opens on the left once that slice is
     gone (Jacob, 2026-08-07: "reduce the width of this photo by 10%,
     crop on the left side," applied to both founder_condensed and
     portugal_factory). */
  .jr-lpfeat--wide-media .jr-lpfeat__img {
    transform: scale(1.111);
    transform-origin: 100% 50%;
  }
  /* "top": copy sits above a full-width photo spanning the content width,
     rather than beside it in the 2-column split -- for a single closing
     photo moment rather than an image+text pairing. Still inset by
     --page-margin like every other jr-lpfeat variant, never edge to edge
     of the viewport. order:-1 on the panel is what puts it first -- the
     markup itself still writes media before panel (unchanged, so left/
     right continue to work off plain DOM order). */
  .jr-lpfeat--img-top { grid-template-columns: 1fr; }
  /* padding-inline: 0 -- .jr-lpfeat__panel's own left/right padding
     (clamp(24px, 5vw, 72px), meant for the side-by-side variants' half-
     width column) would otherwise sit on top of the section's own
     --page-margin inset, indenting the copy well past the media element
     below it, which has no such padding. Zeroing it here makes both
     flush at the same --page-margin edge. */
  .jr-lpfeat--img-top .jr-lpfeat__panel { order: -1; padding-inline: 0; padding-bottom: clamp(24px, 4vw, 40px); }
  .jr-lpfeat--img-top .jr-lpfeat__copy { max-width: 54rem; text-align: left; }
  .jr-lpfeat--img-top .jr-lpfeat__media { min-height: 0; aspect-ratio: 21 / 9; margin-bottom: var(--jr-f-pb, 64px); }
  .jr-lpfeat__img, .jr-lpfeat__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .jr-lpfeat__ph { background: rgb(0 0 0 / 0.05); }
  .jr-lpfeat__carousel { position: relative; width: 100%; height: 100%; }
  .jr-lpfeat__slides { position: relative; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; }
  .jr-lpfeat__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease; }
  .jr-lpfeat__slide.is-active { opacity: 1; visibility: visible; }
  .jr-lpfeat__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
  }
  .jr-lpfeat__slidecap {
    position: absolute;
    bottom: clamp(20px, 2.4vw, 36px);
    left: clamp(20px, 2.4vw, 36px);
    right: auto;
    z-index: 2;
    margin: 0;
    max-width: 70%;
    font-family: var(--font-heading--family);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  }
  .jr-lpfeat--cap-right .jr-lpfeat__slidecap { left: auto; right: clamp(20px, 2.4vw, 36px); text-align: right; }
  .jr-lpfeat__carnav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; pointer-events: none; z-index: 3; }
  .jr-lpfeat__caraw {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    cursor: pointer;
  }
  .jr-lpfeat__caraw:hover { background: rgba(0, 0, 0, 0.35); }
  .jr-lpfeat__carcount {
    position: absolute;
    bottom: clamp(20px, 2.4vw, 36px);
    right: clamp(20px, 2.4vw, 36px);
    z-index: 2;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }
  .jr-lpfeat--cap-right .jr-lpfeat__carcount { right: auto; left: clamp(20px, 2.4vw, 36px); }
  .jr-lpfeat__panel { display: flex; align-items: center; padding: var(--jr-f-pt, 64px) clamp(24px, 5vw, 72px) var(--jr-f-pb, 64px); }
  .jr-lpfeat__copy { max-width: 32rem; }

  /* The panel pads BOTH sides equally by default, which double-insets
     the outer side -- .jr-lpfeat itself already has padding-inline:
     var(--page-margin) there. Opt-in: drop the outer-side padding (the
     gutter-side, facing the photo, keeps its own) and let the copy fill
     the panel's real width instead of stopping short of it at its
     max-width, so the copy's far edge actually reaches --page-margin
     (Jacob, 2026-08-07: "ensure the texts here align to the left and
     right respectively, out to the margin"). Desktop-only -- mobile's
     single-column stack already pads both sides symmetrically and has
     no "outer vs gutter" side to distinguish. */
  @media screen and (min-width: 750px) {
    .jr-lpfeat--edge-text.jr-lpfeat--img-left .jr-lpfeat__panel { padding-right: 0; }
    .jr-lpfeat--edge-text.jr-lpfeat--img-right .jr-lpfeat__panel { padding-left: 0; }
    .jr-lpfeat--edge-text .jr-lpfeat__copy { width: 100%; max-width: none; }
  }
  .jr-lpfeat__eyebrow { font-family: var(--font-heading--family); margin: 0 0 14px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
  .jr-lpfeat__h { font-family: var(--font-heading--family); margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.06; }
  .jr-lpfeat__body { margin: 18px 0 0; font-size: clamp(0.95rem, 1.2vw, 1.0625rem); line-height: 1.6; font-weight: 400; }
  /* Mobile-only extra photo, hidden on desktop where the section already
     has its own full-height image on the other side (2026-08-07: "add a
     photograph from the where it all began story to this block"). */
  .jr-lpfeat__mobile-photo { display: none; }
  .jr-lpfeat__body p { margin: 0 0 12px; }
  .jr-lpfeat__cta {
    display: inline-block; margin-top: 24px; font-family: var(--font-heading--family);
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--jr-f-fg, #12100e); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
  }
  @media screen and (max-width: 749px) {
    /* .jr-lpfeat--wide-media.jr-lpfeat--img-right carries two classes
       (0-2-0) against plain .jr-lpfeat's one (0-1-0), so on the factory
       section specifically that desktop 1fr/1.6fr split was outranking
       this stacking rule and never collapsing to one column at all
       (2026-08-07: image stuck in a narrow side column instead of
       stacking full-width like the founder section). Listed explicitly
       here so the same specificity wins the tie by coming later. */
    .jr-lpfeat, .jr-lpfeat--wide-media, .jr-lpfeat--wide-media.jr-lpfeat--img-right { grid-template-columns: 1fr; }
    .jr-lpfeat--img-right .jr-lpfeat__media { order: -1; }
    .jr-lpfeat__media { min-height: 62vw; }
    /* padding-inline:0, not var(--page-margin) -- .jr-lpfeat itself
       already insets both grid items (media AND panel) by that same
       amount, so a second copy here on top of it pushed the text ~16px
       further right than the photo directly above it, in the same
       section (2026-08-07: "text is still not left aligned with the
       photo on mobile" -- founder_condensed and portugal_factory both).
       Same fix as .jr-lpfeat--img-top's own panel just above. */
    .jr-lpfeat__panel { padding: 40px 0; }
    /* .jr-lpfeat__panel's own 40px top/bottom padding above is lost for
       --mobile-photo once it's display:contents (no box left to hold
       it). The bottom half is relocated onto the CTA below (see the
       later, more specific .jr-lpfeat--mobile-photo .jr-lpfeat__cta
       rule) but the TOP half is deliberately NOT replaced here --
       jr-lpfeat has no leading-gap mechanism of its own (unlike
       jr-lp-statement/jr-lp-colorpicker, which add their own top
       padding/margin unconditionally), so it has always relied on
       whatever precedes it for spacing. Restoring 40px of padding here
       doubled up with that preceding section's own trailing gap
       (2026-08-08: found via configure_cta -> founder_condensed and
       founder_condensed -> portugal_factory both measuring ~104-126px
       against the page's 62px standard gap elsewhere). Zero extra
       padding here means the preceding section's own gap is the ONLY
       gap, matching every other section-to-section transition. */
    /* margin-bottom, not padding-bottom -- the CTA's own padding-bottom
       is already spoken for (the 3px gap to its underline below). */
    .jr-lpfeat--mobile-photo .jr-lpfeat__cta { margin-bottom: 40px; }

    .jr-lpfeat__mobile-photo { display: block; margin-top: 24px; }
    .jr-lpfeat__mobile-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

    /* Main photo moved between the heading and paragraph 1 instead of
       above everything (2026-08-08: "move the photo of mathilda...
       below the header 'it started...' but before the text starting
       'in the...'"), same spot the mobile-only extra photo already sits
       relative to the copy. .jr-lpfeat__media lives OUTSIDE
       .jr-lpfeat__copy (a sibling of .jr-lpfeat__panel, not nested in
       it), so reaching it from this same ordered sequence needs
       display:contents cascaded up through panel AND copy too, not just
       body -- three levels instead of the one the mobile-only-photo
       interleaving needed, since that photo already lived inside copy.
       Scoped to --mobile-photo (only set when mobile_extra_image
       exists) so the other 7 templates sharing this section keep their
       plain grid stack. */
    .jr-lpfeat--mobile-photo {
      display: flex;
      flex-direction: column;
    }

    .jr-lpfeat--mobile-photo .jr-lpfeat__panel,
    .jr-lpfeat--mobile-photo .jr-lpfeat__copy,
    .jr-lpfeat--mobile-photo .jr-lpfeat__body {
      display: contents;
    }

    .jr-lpfeat--mobile-photo .jr-lpfeat__eyebrow { order: 1; }
    .jr-lpfeat--mobile-photo .jr-lpfeat__h { order: 2; }
    /* width/min-height/flex-shrink are load-bearing here -- .jr-lpfeat__media
       relied on the grid row it used to sit in for both, and as a bare
       flex item (no intrinsic content of its own, the photo inside it is
       position:absolute) it collapsed to 0x0 without them, effectively
       hiding the photo entirely. */
    .jr-lpfeat--mobile-photo .jr-lpfeat__media {
      order: 3;
      width: 100%;
      min-height: 62vw;
      flex-shrink: 0;
      margin-top: 20px;
    }
    .jr-lpfeat--mobile-photo .jr-lpfeat__body p:nth-of-type(1) { order: 4; margin-top: 20px; }
    .jr-lpfeat--mobile-photo .jr-lpfeat__mobile-photo { order: 5; margin-bottom: 20px; }
    .jr-lpfeat--mobile-photo .jr-lpfeat__body p:nth-of-type(2) { order: 6; }
    .jr-lpfeat--mobile-photo .jr-lpfeat__body p:nth-of-type(3) { order: 7; }
    .jr-lpfeat--mobile-photo .jr-lpfeat__body p:nth-of-type(n+4) { order: 8; }
    /* align-self:flex-start -- .jr-lpfeat__copy became a column flex for
       the interleaving above, and its default align-items:stretch was
       forcing this inline-block link to fill the full column width, so
       its border-bottom underline ran the full width instead of just
       under the text (2026-08-07: "underlined - but not all the way").
       Back to sizing to its own content. margin-top overrides the base
       .jr-lpfeat__cta rule's 24px -- combined with the last paragraph's
       own 12px margin-bottom that read as more space than "Read the
       full story" needs to still visually belong to the paragraph above
       it (2026-08-08: "possibly decrease it a little bit above 'Read
       the Full Story'"). margin-bottom is the OPPOSITE move -- was 40px,
       too close to read as a new section starting right after (2026-08-
       08: "the whitespace below Read the Full Story needs to be
       larger... it needs to be clear that we're starting a new
       section"). --jr-lp-gap, not a bespoke number -- ties this
       transition to the same standard section-to-section rhythm used
       elsewhere on the page rather than a one-off value, and is also
       the exact rule this same class shares with portugal_factory (see
       mobile_heading_before_photo in the schema below), so both
       sections' endings match automatically instead of needing to be
       kept in sync by hand (2026-08-08: "just copy the way it is spaced
       at the end of the Founder's story section"). */
    .jr-lpfeat--mobile-photo .jr-lpfeat__cta {
      order: 9;
      align-self: flex-start;
      margin-top: 14px;
      margin-bottom: var(--jr-lp-gap, 62px);
    }

    /* portugal_factory specifically: unlike founder_condensed (followed
       by portugal_factory, a jr-lpfeat with NO leading-gap mechanism of
       its own -- the shared margin-bottom above IS the only gap),
       portugal_factory is followed by portugal_photo, a jr-lp-statement
       instance that DOES add its own unconditional leading gap
       (--jr-lp-gap as padding-top, same mechanism craft/statement/etc
       all use). Both firing at once doubled this one specific
       transition to ~124px against the page's 62px standard (2026-08-08
       audit). Scoped to this one instance, not the shared class, since
       founder_condensed's own trailing gap is still needed as-is. */
    [id$="__portugal_factory"] .jr-lpfeat__cta {
      margin-bottom: 0;
    }
  }
/* END_SECTION:jr-lp-feature */

/* START_SECTION:jr-lp-guarantee (INDEX:44) */
.jr-lpg { background: var(--jr-g-bg, #fff); color: var(--jr-g-fg, #12100e); padding: var(--jr-g-pt, 56px) var(--page-margin, 32px) var(--jr-g-pb, 56px); text-align: center; }
  .jr-lpg__h { font-family: var(--font-heading--family); margin: 0 0 36px; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; }
  .jr-lpg__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1100px; margin-inline: auto; }
  .jr-lpg__item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .jr-lpg__icon { width: 40px; height: 40px; object-fit: contain; }
  .jr-lpg__ih { font-family: var(--font-heading--family); margin: 0; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em; }
  .jr-lpg__it { margin: 0; font-size: 0.8125rem; line-height: 1.45; font-weight: 300; opacity: 0.8; }
  @media screen and (max-width: 749px) { .jr-lpg__row { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }
/* END_SECTION:jr-lp-guarantee */

/* START_SECTION:jr-lp-header (INDEX:45) */
.jr-lp-header {
    background: var(--jr-lph-bg);
    color: var(--jr-lph-fg);
    border-bottom: 1px solid rgb(0 0 0 / 0.06);
  }

  .jr-lp-header--sticky {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  /* Overlays the hero photo (Son of a Tailor reference) instead of sitting
     in flow above it. Plain background/border overrides here are enough to
     win the cascade without !important -- only the --jr-lph-fg custom
     property is set inline (see the dark-mode rule below for why that one
     needs it). */
  .jr-lp-header--transparent {
    /* fixed, not sticky: sticky still reserves its own height in flow at
       its point of origin (the very top of the page), which would push the
       hero down by the header's height again -- exactly the problem the
       --jr-lp-header-h: 0px override below exists to avoid. Fixed takes no
       flow space at all AND stays pinned while the rest of the page
       scrolls underneath it, which is also what makes the scrolled-state
       swap below possible: the header has to still be on screen past the
       hero for a background swap to be visible at all. */
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 30;
    background: transparent;
    border-bottom: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  /* JR, 2026-08-05: once the hero has scrolled out from under it, the
     transparent header has no photo left to sit on -- swap to the site's
     normal solid-white-bar-with-dark-icons look so it stays legible.
     --jr-lph-fg is set inline from section.settings.foreground, and an
     inline style beats any stylesheet rule regardless of specificity (see
     the dark-mode override below, same issue), hence !important here too. */
  .jr-lp-header--transparent.jr-lp-header--scrolled {
    background: var(--jr-lph-bg, #ffffff);
    border-bottom: 1px solid rgb(0 0 0 / 0.06);
    --jr-lph-fg: #12100e !important;
  }

  .jr-lp-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px var(--page-margin, 32px);
    min-height: 56px;
  }

  .jr-lp-header__inner--center {
    justify-content: center;
    position: relative;
  }

  .jr-lp-header__start {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
  }

  .jr-lp-header__inner--center .jr-lp-header__start {
    position: absolute;
    left: var(--page-margin, 32px);
    max-width: calc(50% - 60px);
  }

  .jr-lp-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--jr-lph-fg);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }

  .jr-lp-header__nav {
    display: flex;
    align-items: center;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .jr-lp-header__nav[hidden] {
    display: none;
  }

  .jr-lp-header__nav-link {
    font-family: var(--font-heading--family);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jr-lph-fg);
    text-decoration: none;
    opacity: 0.85;
  }

  .jr-lp-header__nav-link:hover {
    opacity: 1;
  }

  .jr-lp-header__end {
    display: flex;
    align-items: center;
    /* Dark-mode toggle and search read as two unrelated icons scattered
       across the header at 18px -- tightened so they group together as
       one utility cluster (2026-08-07: "move the light mode / dark mode
       closer to the search icon"). */
    gap: 6px;
  }

  .jr-lp-header__inner--center .jr-lp-header__end {
    position: absolute;
    right: var(--page-margin, 32px);
  }

  .jr-lp-header__utility {
    display: flex;
    align-items: center;
  }

  /* The search button's own hit-area (see snippets/search.liquid) pads an
     11px ring around the 22px glyph for a full 44px tap target -- correct
     for touch, but it reads as ~37px of extra whitespace beyond the page
     margin next to a photo with nothing else out there to justify it. Pull
     the box in by exactly that padding so the VISIBLE glyph lands on the
     margin; the tap target still extends past it into the margin's own
     whitespace, which costs nothing. */
  .jr-lp-header__utility .search-action {
    margin-inline-end: -11px;
  }

  /* search.liquid's button carries .button-unstyled (base.css), which sets
     its own color: var(--color-foreground) rather than inheriting -- that's
     the sitewide token (black), not this header's local --jr-lph-fg, so it
     silently broke the cascade and left the icon black against the photo. */
  .jr-lp-header__utility .search-action .header-actions__action {
    color: var(--jr-lph-fg);
  }

  .jr-lp-header__mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--jr-lph-fg);
    opacity: 0.75;
    cursor: pointer;
  }

  .jr-lp-header__mode:hover {
    opacity: 1;
  }

  .jr-lp-header__inner--left {
    justify-content: space-between;
  }

  .jr-lp-header__logo {
    display: block;
    color: var(--jr-lph-fg);
    flex-shrink: 0;
  }

  .jr-lp-header__logo svg {
    display: block;
    height: 22px;
    width: auto;
  }

  .jr-lp-header__cta {
    font-family: var(--font-heading--family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jr-lph-fg);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .jr-lp-header__inner--center .jr-lp-header__cta { display: none; }
    .jr-lp-header__logo svg { height: 18px; }
    .jr-lp-header__inner--center .jr-lp-header__start { max-width: calc(100% - 120px); }
    /* Was a plain inline row squeezed next to the burger, colliding with
       the centered logo the moment it opened (2026-08-07: "the hamburger
       menu needs to present downwards as rows"). Real dropdown instead:
       positioned off .jr-lp-header__start (already position:absolute in
       the centered layout), stacked, with its own solid background --
       the header itself can be transparent over a photo, and white text
       on that would disappear against a plain white panel. */
    .jr-lp-header__nav {
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      min-width: 200px;
      overflow-x: visible;
      white-space: normal;
      background: var(--color-background, #fff);
      box-shadow: 0 12px 28px rgb(0 0 0 / 0.15);
      padding: 6px 0;
      z-index: 50;
    }

    .jr-lp-header__nav-link {
      display: block;
      color: var(--color-foreground, #12100e);
      opacity: 1;
      padding: 13px var(--page-margin, 20px);
    }
  }

  /* dark mode: the bar follows the site's dark surfaces. --jr-lph-fg is set
     inline on the element (from section.settings.foreground), and an inline
     style beats any selector-based override regardless of specificity -- so
     this custom-property override needs !important too, or the hamburger,
     mode toggle, logo and nav links all stay locked to the light-mode colour
     and vanish against the dark background. */
  html[data-jr-mode="dark"] .jr-lp-header:not(.jr-lp-header--transparent) {
    background: #161512 !important;
    --jr-lph-fg: #ece9e2 !important;
    border-bottom-color: rgb(255 255 255 / 0.1);
  }
/* END_SECTION:jr-lp-header */

/* START_SECTION:jr-lp-hero (INDEX:46) */
.jr-lph2 { position: relative; background: var(--color-background); color: var(--jr-h-fg, #12100e); }
  .jr-lph2__media { position: relative; overflow: hidden; }
  .jr-lph2__media picture { display: contents; }
  /* absolute fill: reliable in both layouts (the media box only has a min-height,
     so a percentage height on the img would compute against auto and collapse) */
  .jr-lph2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

  /* overlay layout: media inset within the page margin, copy on top */
  .jr-lph2--overlay { display: grid; padding-inline: var(--page-margin, 26px); background: var(--color-background); }
  .jr-lph2--overlay .jr-lph2__media,
  .jr-lph2--overlay .jr-lph2__panel { grid-area: 1 / 1; }
  /* the landing header sits above the hero in normal flow (not an overlay on
     top of the photo), so a plain 100vh here would run taller than one real
     viewport by the header's own height and the fold would cut through the
     photo instead of landing on its edge -- subtract the header's measured
     height (set by jr-lp-header.liquid) so header + hero together equal
     exactly one viewport. 64px fallback covers the instant before that JS
     runs on first paint. */
  .jr-lph2--overlay .jr-lph2__media { min-height: calc(var(--jr-h-minh, 82vh) - var(--jr-lp-header-h, 64px)); }

  /* opt-in exception to the sitewide page-margin rule (Jacob, 2026-08-05):
     the image runs truly edge-to-edge; only the copy panel keeps an inset so
     the headline doesn't sit flush against the viewport edge. */
  .jr-lph2--overlay.jr-lph2--full-bleed { padding-inline: 0; }
  .jr-lph2--overlay.jr-lph2--full-bleed .jr-lph2__panel { padding-inline: var(--page-margin, 32px); }
  .jr-lph2--overlay .jr-lph2__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / var(--jr-h-scrim, 0.4)) 0%, rgb(0 0 0 / calc(var(--jr-h-scrim, 0.4) * 0.4)) 55%, rgb(0 0 0 / 0) 100%);
  }
  .jr-lph2--overlay .jr-lph2__panel {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end;
    /* bottom is deliberately tighter than top: hugs the corner like the
       Son of a Tailor reference, now that the hero is correctly cropped
       to the fold instead of running past it */
    padding: clamp(28px, 5vw, 80px) var(--page-margin, 32px) clamp(8px, 1vw, 16px);
  }

  /* Middle-alignment option, opt-in via a setting so the other 7 templates
     sharing this section keep the bottom-anchored default (Jacob,
     2026-08-06: "move 'what makes bed linens great' to be middle aligned
     instead"). */
  .jr-lph2--valign-center.jr-lph2--overlay .jr-lph2__panel {
    align-items: center;
  }

  /* When a product card shares the corner, match its own bottom margin
     exactly so the inline CTA's baseline-row never sits lower than the
     card (Jacob, 2026-08-06: "'Scroll to learn' must at its lowest be at
     the bottom of the product card") -- the default clamp(8px,1vw,16px)
     was tuned for the card-less "hug the corner" case and left the CTA
     ~12px below the card at 1440px. Scoped to --has-card only so pages
     without the card keep the tighter default. */
  .jr-lph2--has-card.jr-lph2--overlay .jr-lph2__panel {
    padding-bottom: clamp(16px, 3vw, 32px);
  }

  /* Frosted-glass treatment, not a solid card -- matches sonofatailor.com's
     own announcement bar exactly (checked live: rgba(0,0,0,0.2) background,
     backdrop-filter: blur(7px), white text), rather than the near-opaque
     white box this started as (Jacob, 2026-08-06: "make the product card
     transparent but create blur on the photo behind it, like the
     announcement bar on Son of a Tailor"). */
  .jr-lph2__card {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    justify-self: end;
    align-self: end;
    margin: clamp(16px, 3vw, 32px);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgb(0 0 0 / 0.2);
    color: #ffffff;
    padding: 10px 18px 10px 10px;
    text-decoration: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity 0.2s ease;
  }
  .jr-lph2__card:hover { opacity: 0.92; }
  .jr-lph2__card-photo { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; background: rgb(255 255 255 / 0.15); }
  .jr-lph2__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .jr-lph2__card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .jr-lph2__card-title {
    font-family: var(--font-heading--family); font-weight: 500; font-size: 0.8125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
  }
  .jr-lph2__card-colour { font-size: 0.75rem; opacity: 0.75; }
  .jr-lph2__card-price { font-size: 0.8125rem; font-weight: 500; margin-top: 2px; }

  /* split layout: media + copy side by side */
  .jr-lph2--split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .jr-lph2--split.jr-lph2--media-right .jr-lph2__media { order: 2; }
  .jr-lph2--split .jr-lph2__media { min-height: var(--jr-h-minh, 82vh); }
  .jr-lph2--split .jr-lph2__panel {
    display: flex; align-items: center;
    padding: clamp(32px, 5vw, 88px) clamp(24px, 5vw, 72px);
  }

  .jr-lph2__copy { max-width: 34rem; }
  .jr-lph2__copy--inline-cta { max-width: 46rem; }
  .jr-lph2__panel--center { text-align: center; justify-content: center; }
  .jr-lph2__panel--center .jr-lph2__copy { margin-inline: auto; }

  .jr-lph2__eyebrow {
    font-family: var(--font-heading--family); margin: 0 0 14px;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85;
  }
  /* baseline, not flex-end: the headline runs a much taller line-height than
     the small CTA text, so matching their BOX bottoms (flex-end) left the
     CTA's own baseline sitting well below the headline's -- it read as
     floating beneath the words instead of sitting next to them. Baseline
     alignment lines up the actual text regardless of the size difference.
     Safe now that the headline is nowrap (single line) always. */
  /* Nudges the heading up so its baseline (not the "p" descender hanging
     below it) lines up with the bottom of the product card in the other
     corner -- measured live: baseline sat ~6px below the card's own
     bottom edge before this (Jacob, 2026-08-06). */
  .jr-lph2__head-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(18px, 3vw, 32px); margin-bottom: 6px; }
  .jr-lph2__panel--center .jr-lph2__head-row { justify-content: center; }
  .jr-lph2__h {
    font-family: var(--font-heading--family); margin: 0;
    font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 400; line-height: 1.02; letter-spacing: 0.005em;
  }
  /* Son of a Tailor reference: the headline carries real editorial scale and
     the button stays a small caption-sized link -- the size CONTRAST between
     the two is the point, not a uniformly "modest" treatment. */
  .jr-lph2__h--serif {
    font-family: var(--jr-font-serif);
    /* Slightly smaller than before (Jacob, 2026-08-06) -- the longer
       question-form headline ("What makes bed linens great?" vs "Supima
       Bed Linens") no longer left room for the "Shop now" link on the
       same line within .jr-lph2__copy--inline-cta's 46rem cap. */
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 400; line-height: 1.08; letter-spacing: 0; white-space: nowrap;
  }
  .jr-lph2__sub {
    margin: 18px 0 0; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.5; font-weight: 300; opacity: 0.92;
  }
  .jr-lph2__sub p { margin: 0 0 8px; }
  .jr-lph2__rating {
    margin: 18px 0 0; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .jr-lph2__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
  .jr-lph2__panel--center .jr-lph2__ctas { justify-content: center; }
  .jr-lph2__cta {
    display: inline-block; font-family: var(--font-heading--family);
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--jr-h-accent, #12100e); color: var(--jr-h-accent-fg, #fff);
    padding: 16px 30px; text-decoration: none; border: 1px solid var(--jr-h-accent, #12100e);
    transition: opacity 0.2s ease;
  }
  .jr-lph2__cta:hover { opacity: 0.88; }
  .jr-lph2__cta--ghost { background: transparent; color: var(--jr-h-fg, #12100e); border-color: currentColor; }

  /* simple = a plain text link, not a filled box -- kept light next to a
     modest serif headline instead of competing with it */
  .jr-lph2__cta--simple {
    background: none; border: none; color: var(--jr-h-fg, #12100e);
    padding: 0 0 1px; font-size: 0.75rem; font-weight: 400; line-height: 1; letter-spacing: 0.12em;
    border-bottom: 1px solid currentColor; white-space: nowrap;
  }
  .jr-lph2__cta--simple:hover { opacity: 0.7; }

  /* Desktop-only, same as .jr-lph2__card itself -- a mobile hero has no
     card to align with, so the mobile-only fallback rendered next to the
     headline (see jr-lph2__cta--mobile-only below) takes over there
     instead. Independent grid item, same grid-area + alignment axis +
     margin formula as .jr-lph2__card -- guarantees the two bottom edges
     land on the same line at any viewport width, rather than
     approximating it with a fixed pixel offset that would drift as the
     card's own margin scales. */
  .jr-lph2__cta--floating {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .jr-lph2__cta--floating {
      display: inline-block;
      grid-area: 1 / 1;
      position: relative;
      z-index: 2;
      justify-self: start;
      align-self: end;
      margin: clamp(16px, 3vw, 32px);
    }
    .jr-lph2--cta-bottom .jr-lph2__cta--mobile-only {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .jr-lph2--split { grid-template-columns: 1fr; }
    .jr-lph2--split .jr-lph2__media { order: -1 !important; min-height: 58vh; }
    .jr-lph2--split .jr-lph2__panel { padding: 32px var(--page-margin, 24px) 44px; }
    .jr-lph2__img--d { display: none; }
    .jr-lph2__img--m { display: block; }
    .jr-lph2--overlay .jr-lph2__media { min-height: 78vh; }
    /* 20% down from the base clamp(2rem,4vw,3.4rem) -- read too large
       against the photo on a real phone (2026-08-07: "reduce the font
       size on mobile by 20% for the headline"). */
    .jr-lph2__h--serif { font-size: clamp(1.6rem, 3.2vw, 2.72rem); }
    /* Same desktop photo, cropped to a much taller mobile frame -- a
       centered crop left mostly window and wall, with only a sliver of
       the actual bed at the bottom (2026-08-07: "the crop on the hero
       needs to be more to the right so we see more of the actual bed").
       Shifting the visible frame right and down brings the bed itself
       into view instead. */
    .jr-lph2--overlay .jr-lph2__img { object-position: 78% 70%; }
    /* Headline moves from wherever the vertical_align setting put it
       (this instance uses "Middle") down to just above "Scroll to
       learn," and centers horizontally regardless of the text_align
       setting -- both overrides are mobile-only, desktop keeps
       whatever the merchant picked (2026-08-08: "center align the
       headline here and move it down to a little bit above scroll to
       learn"). Listed against both the plain and --valign-center
       selectors since the latter is one class more specific and would
       otherwise win over this on the "Middle" instances. */
    .jr-lph2--overlay .jr-lph2__panel,
    .jr-lph2--valign-center.jr-lph2--overlay .jr-lph2__panel {
      align-items: flex-end;
      justify-content: center;
      text-align: center;
      /* Clears the floating "Scroll to learn" CTA below it (own margin
         clamp(20px,5vw,32px) + its own text height) with room to spare. */
      padding-bottom: clamp(76px, 20vw, 108px);
    }
    .jr-lph2--overlay .jr-lph2__copy {
      margin-inline: auto;
    }
    .jr-lph2--overlay .jr-lph2__head-row {
      justify-content: center;
    }
    /* the text panel already anchors bottom-left on a much shorter mobile
       hero -- a second card in the opposite corner would crowd/overlap it,
       so this stays a desktop-only "discrete" touch. */
    .jr-lph2__card { display: none; }
    /* Bottom-center on mobile too now (2026-08-07: "move scroll to learn
       to bottom/center on mobile"), taking over from the inline fallback
       next to the headline -- centered rather than desktop's justify-
       self:start, since there's no product card on mobile to align with. */
    .jr-lph2--cta-bottom .jr-lph2__cta--floating {
      display: inline-block;
      grid-area: 1 / 1;
      position: relative;
      z-index: 2;
      justify-self: center;
      align-self: end;
      margin: 0 0 clamp(20px, 5vw, 32px);
    }
    .jr-lph2--cta-bottom .jr-lph2__cta--mobile-only {
      display: none;
    }
  }
/* END_SECTION:jr-lp-hero */

/* START_SECTION:jr-lp-intro (INDEX:47) */
.jr-lpintro {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--jr-lpintro-pt, 64px) var(--jr-lpintro-pb, 64px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .jr-lpintro__eyebrow {
    margin: 0 0 20px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-lpintro__body {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.375rem, 2.3vw, 1.75rem);
    line-height: 1.5;
  }

  .jr-lpintro__body p { margin: 0 0 1.1em; }
  .jr-lpintro__body p:last-child { margin-bottom: 0; }

  @media screen and (max-width: 749px) {
    .jr-lpintro__body { font-size: 1.25rem; line-height: 1.45; }
  }
/* END_SECTION:jr-lp-intro */

/* START_SECTION:jr-lp-marquee (INDEX:48) */
.jr-lpmq { background: var(--color-background); padding-inline: var(--page-margin, 26px); margin-bottom: 2px; }
  .jr-lpmq__mask { background: var(--jr-mq-bg, #12100e); color: var(--jr-mq-fg, #fff); overflow: hidden; }
  .jr-lpmq__track { display: flex; width: max-content; animation: jr-lpmq-scroll var(--jr-mq-dur, 30s) linear infinite; }
  .jr-lpmq__group { display: flex; align-items: center; }
  .jr-lpmq__item {
    font-family: var(--font-heading--family); font-size: 0.8125rem; font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase; padding-block: 12px; white-space: nowrap;
  }
  .jr-lpmq__dot { padding-inline: 22px; opacity: 0.55; }

  @keyframes jr-lpmq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .jr-lpmq__track { animation: none; }
    .jr-lpmq__group:nth-child(2) { display: none; }
    .jr-lpmq__mask { overflow-x: auto; }
  }
/* END_SECTION:jr-lp-marquee */

/* START_SECTION:jr-lp-principles (INDEX:49) */
.jr-prin {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--jr-prin-pt, 64px) var(--jr-prin-pb, 64px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  /* divider before the meta-bar, matching jr-page-story's own
     hero-to-metabar hairline: a plain foreground-coloured rule, so it
     reads correctly in both light and dark mode rather than a literally
     white line that would vanish on a light background. Sits directly on
     .jr-prin (not .jr-prin__layout, since it now renders BEFORE the nav
     row, not after it) -- .jr-prin's own padding-inline is what keeps it
     inset from the page's true outer edge. */
  .jr-prin__hairline {
    border-top: 1px solid var(--color-foreground);
    margin-bottom: 20px;
  }

  /* pulls the framework grid closer than the flex gap above the header would
     otherwise give it (Jacob, 2026-07-22: heading-to-framework gap read
     bigger than the gap between the origin story and the heading, backwards
     from how a heading should relate to what it introduces vs. what
     precedes it). .jr-prin__content's own flex gap still applies on both
     sides equally, so this negative margin only pulls the framework side in,
     leaving the origin-story-to-heading gap untouched. */
  .jr-prin__head {
    margin-bottom: clamp(-44px, -3vw, -28px);
  }

  /* Jacob, 2026-07-22: clicking "The framework" scrolled the heading to
     literally the top of the viewport, but the site's own fixed header
     bar (~68px tall) sits on top of that same region and hid it --
     scrollIntoView({block:'start'}) has no built-in awareness of a
     separate fixed-position header, so the target's geometric "top:0"
     doesn't mean visually uncovered. scroll-margin-top makes the browser
     land the scroll short of that, same offset the sticky nav itself
     already uses to sit below the header (header-height + 28px). Applied
     to every element that can be a nav scroll target, not just this one,
     for consistency: the origin story's own anchor had the same
     (unreported) issue. */
  .jr-prin__head,
  .jr-prin__grid,
  .jr-prin__feature {
    scroll-margin-top: calc(var(--header-height, 80px) + 28px);
  }

  .jr-prin__eyebrow {
    margin: 0 0 12px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-prin__h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.08;
    max-width: 34rem;
  }

  /* standard sticky-sidebar flexbox (Jacob, 2026-07-22: nav should
     scroll in naturally with the page rather than being hidden until
     reached, then stick once it hits the top rather than persisting
     past this section's own end -- a deliberate tradeoff, confirmed
     with Jacob, that the nav no longer follows through the 5 examples/
     marquee/CTA sections further down the page the way the earlier
     fixed-position + JS-push version did). align-items:flex-start
     keeps the nav at its own natural (short) height rather than
     flex's default stretch-to-match-content, which would leave it as
     tall as .jr-prin__content and give position:sticky no room to
     travel -- sticky needs the nav shorter than its containing block
     to have anywhere to "stick" through as the reader scrolls. */
  .jr-prin__layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  .jr-prin__nav {
    display: none;
  }

  @media screen and (min-width: 900px) {
    .jr-prin__nav {
      display: block;
      position: sticky;
      top: calc(var(--header-height, 80px) + 28px);
      width: 200px;
      flex-shrink: 0;
    }
  }

  .jr-prin__nav-label {
    margin: 0 0 14px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-prin__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
  }

  .jr-prin__nav-link {
    display: block;
    padding-inline-start: 16px;
    margin-inline-start: -1px;
    border-inline-start: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .jr-prin__nav-link:hover {
    color: var(--color-foreground);
  }

  .jr-prin__nav-link.is-active {
    color: var(--color-foreground);
    font-weight: 600;
    border-inline-start-color: var(--color-foreground);
  }

  .jr-prin__nav-sublist {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .jr-prin__nav-link--sub {
    padding-inline-start: 28px;
    font-size: 0.8125rem;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .jr-prin__content {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 64px);
    flex: 1;
    min-width: 0;
  }

  /* wide serif-free statement block (Jacob, 2026-07-22: reused as both the
     page's opening intro and as a transition between the origin story and
     the framework, wherever block_order puts a "statement" block) -- same
     large-print treatment jr-lp-intro used standalone, now a repeatable
     block type so it can appear more than once on the page. */
  .jr-prin__statement-eyebrow {
    margin: 0 0 20px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-prin__statement-body {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.375rem, 2.3vw, 1.75rem);
    line-height: 1.5;
  }

  .jr-prin__statement-body p { margin: 0 0 1.1em; }
  .jr-prin__statement-body p:last-child { margin-bottom: 0; }

  /* Jacob, 2026-07-22: 20% more space specifically around the "That one
     promise didn't stay small for long" transition block, not a uniform
     bump to .jr-prin__content's shared flex gap (which would also widen
     the unrelated intro-to-origin-story gap as a side effect). Added on
     top of the existing gap via margin, not instead of it -- the delta
     needed for the gaps on both sides of this block to read as 20%
     larger overall (20% of the current clamp(40px, 5vw, 64px) gap). */
  .jr-prin__statement--loose {
    margin-block: clamp(8px, 1vw, 12.8px);
  }

  /* Jacob, 2026-07-22: full width of the content column (was capped at
     640px, read too small/inset against the text above it, which spans
     the same column), with the bottom 25% of the source photo (the
     source is a natural 1:1 square) cropped away rather than a plain
     center-crop -- 4:3 is the ratio that removes exactly that much
     height at full width (0.75 of the square), and object-position:top
     on the img keeps the crop anchored to the top so it's specifically
     the BOTTOM that's cut, not evenly off both edges. */
  .jr-prin__statement-media {
    margin-top: 48px;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .jr-prin__statement-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
  }

  /* the full 17-principle framework: a shared grid, not 3 independent
     flowing columns, so sub-category rows (e.g. Animal welfare /
     Factories / Durability) align across all 3 pillars -- see the
     rendering comment above the grid in the Liquid for why. The shared
     counter lives here (not on .jr-prin__content) so it only ever
     counts real principle bullets, regardless of whether a feature row
     precedes the grid. */
  .jr-prin__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: clamp(24px, 3vw, 36px);
    counter-reset: jr-prin-step;
  }

  /* every pillar heading and every sub-category block is a flat, direct
     grid child (see the Liquid) placed via these two custom properties,
     one pillar per column, one sub-category per row (row 1 is the
     pillar heading itself). Grid's default stretch behaviour means a
     shorter cell (e.g. Raw materials' single-bullet Animal welfare
     block) stretches to match the row's tallest cell, so its own
     border-bottom still lands at the same height as its row siblings. */
  .jr-prin__pillar-h,
  .jr-prin__subcat {
    grid-column: var(--jr-prin-col);
    grid-row: var(--jr-prin-row);
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
  }

  .jr-prin__pillar-h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: 1.25rem;
    text-align: left;
  }

  /* sub-category label (e.g. "Animal welfare") -- a real heading, one
     per group of principles, not folded into the bullet text itself
     the way the old 8-item version's bold inline lead-in was. */
  /* darker than the shared --jr-editorial-caption-color token (Jacob,
     2026-07-22: hard to read here) -- overridden locally rather than
     changing the shared token itself, which is used for eyebrows and
     captions site-wide and shouldn't shift just because this one grid
     needed more contrast. */
  .jr-prin__subcat-h {
    margin: 0 0 12px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  /* same body treatment as the origin story's .jr-prin__feature-body
     (Jacob, 2026-07-22: the two didn't match) -- same size token,
     same 1.7 line-height. */
  .jr-prin__subcat-body {
    font-size: var(--jr-editorial-body-size, 1rem);
    line-height: 1.7;
    color: var(--jr-editorial-body-color, inherit);
    text-align: left;
  }

  .jr-prin__subcat-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .jr-prin__subcat-body li {
    counter-increment: jr-prin-step;
    margin: 0 0 0.7em;
    padding-inline-start: 2em;
    position: relative;
  }

  .jr-prin__subcat-body li:last-child { margin-bottom: 0; }

  /* the numeral itself -- a bare CSS counter, never hand-typed, same
     mechanic as jr-article-guide-detail's listicle steps. Darkened from
     0.45 to 0.6 (Jacob, 2026-07-22: too faint to read clearly). */
  .jr-prin__subcat-body li::before {
    content: counter(jr-prin-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: var(--jr-font-serif, var(--font-heading--family));
    font-style: italic;
    font-weight: 400;
    font-size: 0.9em;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .jr-prin__subcat-body strong { font-weight: 600; }

  /* feature row (e.g. the founding story): image right at 65% width, text
     left at 35%, bottom-aligned to the image rather than top/center --
     matching the .jr-detail convention used on PDPs (align-items:flex-end
     is that section's own default) rather than this component family's
     jr-lp-feature, which centers vertically. A distinct text class from
     .jr-prin__body -- the numbered-principle counter only targets
     .jr-prin__body p, and this is plain prose, never numbered. */
  .jr-prin__feature {
    display: grid;
    grid-template-columns: minmax(0, 35%) minmax(0, 65%);
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
  }

  /* Jacob, 2026-07-22: "test switching place with the photo and text for
     every other in practice example" -- swaps which side the 35%/65%
     columns land on (each element keeps its own width, only the side
     changes) via .jr-prin__feature--flip, applied on alternating "in
     practice" blocks by the Liquid loop above. Scoped to min-width:900px
     ONLY, same breakpoint the mobile single-column override below uses --
     without this, .jr-prin__feature--flip's two-class selector would
     outrank that override's specificity and could still force the
     65%/35% columns at mobile widths instead of stacking. */
  @media screen and (min-width: 900px) {
    .jr-prin__feature--flip {
      grid-template-columns: minmax(0, 65%) minmax(0, 35%);
    }
    .jr-prin__feature--flip .jr-prin__feature-media {
      order: -1;
    }
  }

  .jr-prin__feature-text {
    text-align: left;
  }

  /* same size as .jr-prin__h (Jacob, 2026-07-22: the two headings on this
     page read as mismatched/messy at different sizes) -- kept as its own
     rule rather than merged with .jr-prin__h since the two still differ
     in margin and max-width. */
  .jr-prin__feature-h {
    margin: 0 0 16px;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.08;
  }

  .jr-prin__feature-body {
    font-size: var(--jr-editorial-body-size, 1rem);
    line-height: 1.7;
    color: var(--jr-editorial-body-color, inherit);
  }

  .jr-prin__feature-body p { margin: 0 0 1.1em; }
  .jr-prin__feature-body p:last-child { margin-bottom: 0; }

  .jr-prin__feature-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .jr-prin__feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Jacob, 2026-07-22: "the image is very zoomed in so you can hardly see
     the qr code" -- sustainability-qr-label.jpg is 700x394 (~16:9
     landscape), and the shared 4:5 portrait crop above only keeps about
     45% of its width once centered, cropping straight through the QR
     code. ID-scoped to just this one example, not the shared class, since
     every other example's photo already crops fine at 4:5. */
  #jr-pillar-traceability-in-practice .jr-prin__feature-media {
    aspect-ratio: 4 / 3;
  }

  #jr-pillar-traceability-in-practice .jr-prin__feature-media img {
    object-position: 40% center;
  }

  @media screen and (max-width: 899px) {
    .jr-prin__feature { grid-template-columns: 1fr; }
    /* single column: --jr-prin-col/--jr-prin-row (still set inline) would
       otherwise place items past the grid's one real column, which auto-
       creates extra implicit tracks instead of stacking -- overriding
       grid-column/row here (not the custom properties themselves) forces
       every pillar heading and sub-category back into natural DOM order,
       which is already the correct reading order (each pillar's heading
       then its own sub-categories, in turn). */
    .jr-prin__grid { grid-template-columns: 1fr; row-gap: clamp(28px, 5vw, 40px); }
    .jr-prin__pillar-h,
    .jr-prin__subcat {
      grid-column: 1;
      grid-row: auto;
    }
  }
/* END_SECTION:jr-lp-principles */

/* START_SECTION:jr-lp-reviews (INDEX:50) */
/* Real outside margin, not just inner padding -- this section's tinted
     background previously ran edge to edge (padding only insets the
     heading/cards, not the colour itself), unlike every white-background
     section on this page where you can't tell the difference. First fix
     tried capping at --page-width (1972px on this page specifically),
     but that's wider than any normal screen, so it never actually
     engaged (Jacob, 2026-08-05: "keep our white margin space towards the
     edges" -- needs to show at real viewport widths, not just ultra-wide
     ones). margin-inline matching --page-margin is what every other
     section already uses for its own inset, just applied to the outside
     of the box instead of the inside. */
  .jr-lprev {
    background: var(--jr-r-bg, #f4f1ea);
    color: var(--jr-r-fg, #12100e);
    margin-inline: var(--page-margin, 32px);
    margin-top: 32px;
    box-sizing: border-box;
    /* One value, all four sides -- was 72px top/bottom against 32px
       left/right, the same box read as generously framed vertically and
       tight horizontally at once (Jacob, 2026-08-05: "unify the white
       space left/right/top/bottom around the reviews"). */
    padding: var(--jr-r-pad, 48px);
  }

  /* Outer header: same values as jr-compare's eyebrow/heading/intro
     (sections/jr-compare.liquid) so this reads as the same headline
     system, not a one-off. Left-aligned and unboxed like that one too,
     not the previous centered-inside-the-tint treatment. */
  .jr-lprev__outerhead {
    padding-inline: var(--page-margin, 32px);
    /* Shared landing-page section gap, replacing a bespoke 72px value
       (2026-08-07: "consistent white space between sections
       throughout"). */
    margin-top: var(--jr-lp-gap, 72px);
  }

  .jr-lprev__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-lprev__intro {
    max-width: 58ch;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.55;
    margin-top: 12px;
  }

  .jr-lprev__intro p {
    margin: 0;
  }
  .jr-lprev__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }
  .jr-lprev__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin-inline: auto; }

  /* 4-across specifically when there are 4 cards -- 3-across (the
     default, still used by the other two landing pages with exactly 3
     reviews) would otherwise leave a 4th stranded alone on its own row.
     Was 2x2 (Jacob, 2026-08-05), changed to a single row of 4 (Jacob,
     2026-08-06: "the reviews here needs to be in four columns"). No
     max-width cap -- fills the tinted box's own width instead of the
     narrower 3-col reading-width cap, since four narrow columns need the
     room more than three wider ones did. */
  .jr-lprev__grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .jr-lprev__card { margin: 0; background: var(--color-background, #fff); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
  /* Juniper-green, not the gold used elsewhere for third-party review
     widgets -- this is the brand accent token (Jacob, 2026-08-05: "the
     stars could be in Juniper-green colored instead"). */
  .jr-lprev__stars { color: var(--jr-green); letter-spacing: 2px; font-size: 0.875rem; }
  .jr-lprev__q { margin: 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 300; }
  .jr-lprev__by { margin-top: auto; display: flex; align-items: center; gap: 12px; }
  .jr-lprev__avatar {
    flex-shrink: 0;
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f1ea;
  }
  .jr-lprev__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .jr-lprev__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .jr-lprev__name-row { display: flex; align-items: center; gap: 5px; }
  .jr-lprev__name { font-family: var(--font-heading--family); font-weight: 500; font-size: 0.875rem; }
  .jr-lprev__verified { flex-shrink: 0; }
  .jr-lprev__ctx { font-size: 0.8125rem; opacity: 0.6; }

  /* Mobile-carousel-only affordance -- desktop shows every card at once
     (a 3/4-col grid, no scrolling), so there's nothing for this to hint
     at there. Shown and positioned inside the 749px query below. */
  .jr-lprev__nav { display: none; }

  @media screen and (max-width: 989px) { .jr-lprev__grid { grid-template-columns: 1fr; max-width: 32rem; } }

  /* Swipeable, one card at a time, instead of a stacked scroll (2026-08-07:
     "make the review element into a carousel so you only see one at a
     time"). max-width:none + grid-template-columns:unset undoes the
     989px rule just above so this flex layout isn't fighting a grid
     still trying to apply grid-template-columns underneath it. */
  @media screen and (max-width: 749px) {
    .jr-lprev__grid,
    .jr-lprev__grid--4col {
      display: flex;
      grid-template-columns: unset;
      max-width: none;
      margin-inline: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 16px;
      -webkit-overflow-scrolling: touch;
    }

    .jr-lprev__card {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }

    .jr-lprev {
      position: relative;
    }

    /* Floating next-card affordance, not a per-card element -- sits in
       the section's own static sand-coloured padding strip beside the
       card (positioned against .jr-lprev, not .jr-lprev__wrap, which is
       only as wide as the scrolling track) rather than on top of the
       card's own text, and fades out once JS detects the last card is
       reached. A dark filled circle over the card read as clashing and
       in-the-way (2026-08-08: "doesn't really work, feels off in color
       and placement... better placing a white arrow on top of the sand
       colored margin"). Plain glyph now, no pill background -- the
       drop-shadow is what keeps a pure-white arrow legible against the
       pale sand rather than washing out. */
    .jr-lprev__nav {
      position: absolute;
      top: 50%;
      right: 14px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      opacity: 1;
      transition: opacity 0.2s ease;
      filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.35));
      z-index: 2;
    }

    .jr-lprev__nav--hidden {
      opacity: 0;
      pointer-events: none;
    }
  }
/* END_SECTION:jr-lp-reviews */

/* START_SECTION:jr-lp-set-contents (INDEX:51) */
.jr-lp-sc {
    background: var(--jr-cp-bg);
    color: var(--jr-cp-fg);
    padding-inline: var(--page-margin, 32px);
    margin-top: var(--page-margin, 32px);
  }

  .jr-lp-sc__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
    gap: clamp(24px, 4vw, 64px);
  }

  /* No text panel on this instance -- unlike colorpicker's single photo,
     three equal product shots look unintentional stuck at 60% width with
     nothing sharing the row, so this one DOES expand to fill it (Jacob,
     2026-08-06: text moved into jr-lp-colorpicker instead). */
  .jr-lp-sc--photo-only .jr-lp-sc__grid {
    grid-template-columns: 1fr;
  }

  .jr-lp-sc__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .jr-lp-sc__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f1ea;
    /* was a plain <div>; now a <button> so it can cycle colours on click
       (Jacob, 2026-08-06: "if you click the images they need to switch to
       the next color") -- reset the browser's own button chrome so it
       still reads as a plain photo tile, not a form control. */
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    background-color: #f4f1ea;
    cursor: default;
    /* Mobile browsers flash a default tap-highlight on <button> taps --
       real on real devices too, not just devtools (2026-08-07: "the
       image blinks in a blue shade when you click it"). This tile
       already shows its own state changes on click, so the browser's
       own highlight is just visual noise on top of that. */
    -webkit-tap-highlight-color: transparent;
  }

  .jr-lp-sc__photo--cycle {
    cursor: pointer;
  }

  .jr-lp-sc__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Header above the grid -- same eyebrow/heading/intro proportions as
     the page's other section headers (jr-lp-vs__head, jr-lp-sp__head),
     left-aligned (the sitewide default; versus's centering is the
     documented exception, not the rule) (Jacob, 2026-08-06: "add a
     regular headline element here with eyebrow etc"). */
  .jr-lp-sc__head {
    /* carries the section's own top gap instead of .jr-lp-sc doing it,
       since the head is now the first thing in the component -- see
       .jr-lp-sc--has-head below. Shared landing-page section gap --
       trial_statement (directly above) no longer adds its own trailing
       gap (each section now contributes only its OWN leading gap, so
       they don't stack), so this alone produces the full, correct
       space between them (2026-08-07: "consistent white space between
       sections throughout"). */
    margin-top: var(--jr-lp-gap, 32px);
    padding-inline: var(--page-margin, 32px);
    margin-bottom: 32px;
  }

  .jr-lp-sc__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  .jr-lp-sc__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-lp-sc__intro {
    max-width: 58ch;
    margin-top: 10px;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.5;
  }

  .jr-lp-sc__intro p {
    margin: 0;
  }

  /* the top gap moved to .jr-lp-sc__head above; without this, having both
     present would double it up between the head and the grid. */
  .jr-lp-sc--has-head {
    margin-top: 0;
  }

  .jr-lp-sc__caption {
    margin: 14px 0 4px;
    font-family: var(--font-heading--family);
    font-size: 1.0625rem;
    font-weight: 500;
  }

  .jr-lp-sc__detail {
    font-size: 0.8125rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  .jr-lp-sc__detail p { margin: 0; }
  .jr-lp-sc__detail a { color: inherit; text-decoration: underline; }

  /* mirrored layout: photos on the right, text on the left */
  .jr-lp-sc--right .jr-lp-sc__grid {
    grid-template-columns: 1fr 1.5fr;
  }

  .jr-lp-sc--right .jr-lp-sc__photos {
    order: 2;
  }

  .jr-lp-sc--right .jr-lp-cp__text {
    order: 1;
  }

  @media screen and (max-width: 749px) {
    .jr-lp-sc__grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .jr-lp-sc__photos {
      gap: 6px;
    }

    .jr-lp-sc__caption {
      font-size: 0.9375rem;
    }

    .jr-lp-sc--right .jr-lp-sc__photos,
    .jr-lp-sc--right .jr-lp-cp__text {
      order: initial;
    }
  }
/* END_SECTION:jr-lp-set-contents */

/* START_SECTION:jr-lp-shop-pieces (INDEX:52) */
.jr-lp-sp {
    /* fabric_details (jr-compare) sits directly above this and is
       shared across 6 other templates, so its own hardcoded 84px
       trailing padding can't be zeroed or unified the way every other
       section's gap was (2026-08-07: "consistent white space between
       sections throughout"). 14px here is the calibrated remainder --
       84 + 14 = 98px, matching --jr-lp-gap's own reference value at
       common widths -- not a token reference, since this one transition
       genuinely needs a different number than the shared default.
       Trailing padding zeroed: contact_band (below) now carries its
       own leading margin instead of stacking with this. */
    padding: 14px var(--page-margin, 32px) 0;
  }

  .jr-lp-sp__head {
    margin-bottom: 32px;
  }

  .jr-lp-sp__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  .jr-lp-sp__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-lp-sp__intro {
    max-width: 58ch;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.55;
    margin-top: 12px;
  }

  .jr-lp-sp__intro p {
    margin: 0;
  }

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

  .jr-lp-sp__card {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .jr-lp-sp__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f1ea;
    margin-bottom: 14px;
  }

  .jr-lp-sp__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .jr-lp-sp__card:hover .jr-lp-sp__photo img {
    transform: scale(1.03);
  }

  .jr-lp-sp__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: 0.9375rem;
  }

  .jr-lp-sp__price {
    margin: 4px 0 0;
    font-size: 0.875rem;
    opacity: 0.65;
  }

  @media screen and (max-width: 989px) {
    .jr-lp-sp__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }
  }
/* END_SECTION:jr-lp-shop-pieces */

/* START_SECTION:jr-lp-statement (INDEX:53) */
.jr-lp-st {
    background: var(--jr-st-bg);
    color: var(--jr-st-fg);
    /* Now just points at the shared sitewide landing-page gap token
       (base.css) instead of its own bespoke clamp() -- this was the
       specific value Jacob confirmed "looks reasonable" and became the
       reference every other jr-lp-* section's gap was unified to
       (2026-08-07: "find a consistent white space between sections
       throughout the landing page"). */
    --jr-st-top-gap: var(--jr-lp-gap);
    padding-top: var(--jr-st-top-gap);
    overflow: hidden;
  }

  /* Text-only instances (no big_text, no image -- e.g. "The craft",
     "Try it first") no longer add their own trailing gap -- under the
     "each section carries only its own LEADING gap" convention, the
     NEXT section's leading padding/margin is what creates the space
     after this one now. A trailing gap here would double up with that. */
  .jr-lp-st--text-only {
    padding-bottom: 0;
  }

  .jr-lp-st__eyebrow {
    margin: 0 0 14px;
    padding-inline: var(--page-margin, 32px);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-lp-st__intro {
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: var(--page-margin, 32px);
    text-align: center;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.55;
  }

  .jr-lp-st__intro p {
    margin: 0;
  }

  .jr-lp-st__intro p + p {
    margin-top: 1em;
  }

  .jr-lp-st__link {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: underline;
  }

  .jr-lp-st__big {
    /* Was tied 1:1 to --jr-st-top-gap ("as large as the one on top"), but
       that read as too much on its own once seen live -- decoupled back to
       an independent, smaller clamp() (Jacob, 2026-08-06: "this white space
       still needs to be reduced," no ratio given, ~50% off the prior
       tied-to-top-gap value). */
    margin: clamp(31px, 3.84vw, 57px) 0 0;
    padding-inline: var(--page-margin, 32px);
    box-sizing: border-box;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    line-height: 0.85;
    text-align: center;
    white-space: nowrap;
    /* JS below measures the real text width and overrides this inline --
       13vw is only the fallback for no-JS/pre-hydration paint. */
    font-size: 12vw;
  }

  .jr-lp-st__image {
    margin-top: clamp(24px, 3vw, 48px);
    padding-inline: var(--page-margin, 32px);
    box-sizing: border-box;
  }

  .jr-lp-st__image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Flanking photos either side of the text, staggered (Jacob, 2026-08-06,
     reference screenshot). The text keeps its own centered max-width
     (.jr-lp-st__intro), just inside a narrower grid column now -- its
     padding-inline would double up with the grid's own inset, so that's
     zeroed for this modifier only. */
  .jr-lp-st--flanked {
    display: grid;
    /* Fixed-cap middle column instead of an fr-share -- fr-based outer
       columns took their extra width DIRECTLY out of the text column
       inside the same fixed max-width, so "bigger photos" meant "narrower
       text," the opposite of the ask (Jacob, 2026-08-06: "it now feels
       like they squeezed the text... opposite of what I wanted"). Capping
       the text column at a fixed width and widening the overall
       max-width instead lets the photo columns (1fr each) grow into the
       newly-available space without ever taking width away from the text. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
    align-items: start;
    /* wider than the sitewide grid-gap default (Jacob, 2026-08-06: "move
       the photos out a little bit from the text") -- the photos read as
       crowding the copy at the previous, tighter gap. */
    gap: clamp(32px, 5vw, 72px);
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: var(--page-margin, 32px);
    box-sizing: border-box;
  }

  .jr-lp-st--flanked .jr-lp-st__body {
    grid-column: 2;
    min-width: 0;
    /* small extra inset beyond the grid's own gap (Jacob, 2026-08-06: "a
       bit more white space left/right of the text") -- kept modest now
       that the 560px column cap itself already gives the text more room
       than the original ~498px it had before any of this. */
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .jr-lp-st--flanked .jr-lp-st__eyebrow,
  .jr-lp-st--flanked .jr-lp-st__intro {
    padding-inline: 0;
  }

  .jr-lp-st__flank {
    grid-row: 1;
  }

  .jr-lp-st__flank--left {
    grid-column: 1;
  }

  .jr-lp-st__flank--right {
    grid-column: 3;
    /* the stagger itself -- right sits noticeably lower than left, not a
       few px, to read as deliberately offset rather than misaligned */
    margin-top: clamp(64px, 12vw, 160px);
  }

  /* The cream "mat" around each photo, like a proof print -- background
     matches the muted cream already used for photo surrounds elsewhere on
     this page (jr-lp-sc__photo, jr-lp-shop-pieces), not a new colour. */
  .jr-lp-st__mount {
    display: block;
    background: #f4f1ea;
    padding: 9%;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;
  }

  .jr-lp-st__mount img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Half-overlay treatment (Jacob, 2026-08-06, reference screenshot: the
     big word sits half over the image below it) -- only when an image is
     present, so the plain text-only instance of this section is untouched.
     translateY(50%) is relative to the text's OWN rendered box height, so
     it tracks whatever font-size the fit script above lands on, at any
     viewport, without needing JS to compute the overlap separately.
     transform doesn't affect layout flow, so the image (and everything
     after it) stays exactly where it would sit without the overlap --
     only the text visually dips down over it. Needs the image's own gap
     removed, otherwise the overlap lands short of a true 50%. */
  .jr-lp-st--overlap .jr-lp-st__big {
    position: relative;
    z-index: 2;
    /* Percentage is of the text's own box (ascender-to-descender line-box,
       not just x-height ink), so it doesn't map 1:1 to how much of a
       lowercase letter looks covered -- tuned empirically against the
       rendered glyphs, not derived from the nominal "half overlay" ask
       (Jacob, 2026-08-06: "too far down by ~25%, the line should cut the
       lowercase o in half"). */
    transform: translateY(35%);
  }

  .jr-lp-st--overlap .jr-lp-st__image {
    position: relative;
    z-index: 1;
    margin-top: 0;
  }

  @media screen and (max-width: 749px) {
    /* Every jr-lp-statement instance (statement, craft, trial_statement)
       -- was centered like the desktop reading treatment, which reads
       as inconsistent with every other left-aligned body copy block on
       this page at mobile width (2026-08-07: "left align all these
       texts"). Supersedes the narrower --flanked-only version of this
       same fix below. */
    .jr-lp-st__eyebrow,
    .jr-lp-st__intro {
      text-align: left;
    }

    .jr-lp-st__big {
      font-size: 15vw;
      white-space: normal;
      line-height: 0.95;
    }

    .jr-lp-st__image {
      margin-top: 24px;
    }

    .jr-lp-st__image img {
      aspect-ratio: 4 / 3;
    }

    /* Per-instance crop instead of the shared 4:3 default, driven by the
       mobile_only_crop_ratio/_position settings (2026-08-07: "crop away
       the left side so you get the right most square possible"; reused
       2026-08-08 for a second mobile-only photo needing a different
       crop -- "crop the bottom 20% away"). Scoped to --mobile-only so
       this doesn't touch statement's own cotton-field photo, which also
       uses .jr-lp-st__image. */
    .jr-lp-st--mobile-only .jr-lp-st__image img {
      aspect-ratio: var(--jr-st-crop-ratio, 1 / 1);
      object-position: var(--jr-st-crop-pos, right center);
    }

    /* Interleaved with the copy instead of stacked above it as a pair
       (2026-08-07: "put them in line with the text," photo 1 right after
       paragraph 1, photo 2 right after paragraph 2). display:contents on
       body/intro un-nests the paragraphs so each one and each photo can
       take an explicit order in the same flex flow -- the desktop side-
       column layout has no equivalent "reading position" to interleave
       into, so this is mobile-only, not a shared behavior change.
       Zeroing padding-inline on the promoted children avoids double-
       insetting on top of the flex container's own single page-margin
       (that stacking is also what made this section's body copy sit
       further right than its own photos, 2026-08-07). */
    .jr-lp-st--flanked {
      display: flex;
      flex-direction: column;
      padding-inline: var(--page-margin, 16px);
    }

    .jr-lp-st--flanked .jr-lp-st__body,
    .jr-lp-st--flanked .jr-lp-st__intro {
      display: contents;
    }

    .jr-lp-st--flanked .jr-lp-st__eyebrow,
    .jr-lp-st--flanked .jr-lp-st__intro {
      padding-inline: 0;
    }

    .jr-lp-st--flanked .jr-lp-st__eyebrow { order: 1; }
    /* Intra-section spacing (paragraph<->photo rhythm within THIS section)
       is a deliberately separate knob from --jr-lp-gap (the space BETWEEN
       whole sections) -- halving one must never touch the other (Jacob,
       2026-08-08: "separate the amount of white space we use between
       sections from the amount of white between elements within
       sections"). Own mobile-only gap override, half the desktop
       clamp(32px,5vw,72px) that this would otherwise inherit unchanged. */
    .jr-lp-st--flanked { gap: 16px; }
    /* The flex container's gap stacked on top of the eyebrow's own 14px
       margin here, leaving ~46px before the first paragraph instead of
       the ~14px every other section uses (2026-08-07: "shrink the space
       here between the craft and the text below"). Negative margin
       cancels just that one gap rather than shrinking the shared gap
       value, which would also tighten the photo transitions further
       down that nobody flagged. */
    .jr-lp-st--flanked .jr-lp-st__intro p:nth-of-type(1) { order: 2; margin-top: -32px; }
    /* Halved from 28px alongside the gap above (2026-08-08: "reduce the
       white space by 50%" after "photographs well." / "the coldest
       nights" -- each of those gaps is this margin PLUS the flex gap). */
    .jr-lp-st--flanked .jr-lp-st__flank--left { order: 3; margin-top: 14px; }
    .jr-lp-st--flanked .jr-lp-st__intro p:nth-of-type(2) { order: 4; }
    .jr-lp-st--flanked .jr-lp-st__flank--right { order: 5; margin-top: 14px; }
    .jr-lp-st--flanked .jr-lp-st__intro p:nth-of-type(3) { order: 6; }

    /* No mat, full width instead of the desktop half-column (2026-08-07:
       "remove the border on this images"). */
    .jr-lp-st--flanked .jr-lp-st__mount {
      background: none;
      padding: 0;
      aspect-ratio: 4 / 3;
    }
  }

  /* Opt-in, purely decorative instance -- a photo-only "vibes" moment
     with no eyebrow/intro/big_text, shown on mobile only (2026-08-07:
     "on mobile... let's add a photo just for vibes"). Desktop hides it
     entirely rather than showing an orphaned full-width image with no
     copy alongside it. */
  @media screen and (min-width: 750px) {
    .jr-lp-st--mobile-only {
      display: none;
    }
  }
/* END_SECTION:jr-lp-statement */

/* START_SECTION:jr-lp-stickybar (INDEX:54) */
.jr-lpbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--jr-bar-bg, #12100e); color: var(--jr-bar-fg, #fff);
    box-shadow: 0 -2px 20px rgb(0 0 0 / 0.14);
    transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .jr-lpbar.is-visible { transform: translateY(0); }
  /* Reserve room below the real page content equal to the bar's own
     height -- otherwise the fixed bar permanently covers the last ~90px
     of the page (the footer wordmark specifically) and there's no way to
     scroll it clear (2026-08-07: "it needs to be possible to scroll a
     little longer so the Juniper logotype becomes visible above the
     sticky add to cart"). */
  body:has(.jr-lpbar) {
    padding-bottom: 90px;
  }
  @media screen and (max-width: 749px) {
    body:has(.jr-lpbar) {
      padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    }
  }
  /* Same frosted-glass treatment as jr-lp-hero's product card (checked
     live against sonofatailor.com's own announcement bar: rgba(0,0,0,0.2)
     + blur(7px)) -- opt-in so the other 2 templates sharing this section
     keep their solid bar (2026-08-07: "try putting this on a transparent
     background that blurs the background"). */
  .jr-lpbar--frosted {
    background: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
  .jr-lpbar__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px var(--page-margin, 32px); max-width: 1280px; margin-inline: auto;
  }
  .jr-lpbar__info { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .jr-lpbar__thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
  .jr-lpbar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .jr-lpbar__name {
    font-family: var(--font-heading--family); font-weight: 400; font-size: 0.9375rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .jr-lpbar__material { font-size: 0.8125rem; opacity: 0.82; }
  .jr-lpbar__price { font-size: 0.8125rem; opacity: 0.82; }
  /* Plain white arrow instead of a filled button (2026-08-07: "replace
     Shop now with a white arrow pointing right") -- aria-label keeps the
     "Shop now" wording for screen readers since the visible glyph no
     longer carries it. */
  .jr-lpbar__cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; color: #ffffff; text-decoration: none;
  }
  @media screen and (max-width: 749px) {
    /* safe-area: keep the bar clear of the iPhone home indicator */
    .jr-lpbar__inner { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
    .jr-lpbar__thumb { display: none; }
  }
  /* Thumbnail was mobile-hidden sitewide; bring it back specifically
     where the frosted look is on (2026-08-07: "add a small thumbnail to
     the left of the bed set here"). */
  .jr-lpbar--frosted .jr-lpbar__thumb {
    display: block;
  }
/* END_SECTION:jr-lp-stickybar */

/* START_SECTION:jr-lp-usp-row (INDEX:55) */
.jr-lp-usp {
    background: var(--jr-usp-bg);
    color: var(--jr-usp-fg);
    margin-top: var(--jr-lp-gap, 32px);
  }

  /* Hairlines on both edges -- the footer's own strip only needed a
     bottom one since it borrowed the footer element's border-top for
     the top edge; this sits mid-page with no such neighbour to borrow
     from. */
  /* Horizontal inset is a margin on the bordered box itself, not padding
     inside it -- padding only insets the CONTENT, so the top/bottom
     hairlines (drawn at the box's own edges) still ran full-bleed
     edge-to-edge of the viewport regardless (2026-08-08: "ensure the
     lines are not 100% full width, but rather respect the left-right
     margin"). */
  .jr-lp-usp__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 32px;
    padding-block: 20px;
    margin-inline: var(--page-margin, 32px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .jr-lp-usp__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jr-usp-fg);
  }

  .jr-lp-usp__item svg { flex: 0 0 auto; }

  @media screen and (max-width: 749px) {
    /* One item per row instead of wrapping 2-then-1-then-1 (2026-08-08:
       "ensure each USP get its own row on mobile"). */
    .jr-lp-usp__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
  }
/* END_SECTION:jr-lp-usp-row */

/* START_SECTION:jr-lp-versus (INDEX:56) */
.jr-lp-vs {
    background: var(--jr-vs-bg);
    color: var(--jr-vs-fg);
    /* respects the sitewide side-margin rule like every other tinted box
       on this page (e.g. jr-lprev) -- was running edge-to-edge (Jacob,
       2026-08-06: "as usual respect the white margins on the sides"). */
    margin-inline: var(--page-margin, 32px);
    /* Shared landing-page section gap (base.css), not a page-margin
       multiplier -- was 3x --page-margin (a stand-in tuned before the
       page had a real shared gap token), now unified with every other
       section's own leading gap (2026-08-07: "consistent white space
       between sections throughout"). */
    margin-top: var(--jr-lp-gap, 32px);
    padding: 64px 32px 72px;
    box-sizing: border-box;
  }

  /* Same eyebrow/heading/intro structure as jr-compare (Jacob, 2026-08-06:
     "let's use our regular format"), centered rather than left-aligned --
     "but keep it center aligned" -- matching how jr-lp-statement's own
     intro is centered elsewhere on this same page. */
  .jr-lp-vs__head {
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 40px;
  }

  .jr-lp-vs__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  .jr-lp-vs__h {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-lp-vs__intro {
    color: rgb(var(--color-foreground-rgb) / 0.72);
    line-height: 1.55;
    margin-top: 12px;
  }

  .jr-lp-vs__intro p {
    margin: 0;
  }

  /* No overflow-x:auto here (was a duplicated rule, removed) -- setting
     overflow-x without overflow-y forces the OTHER axis to an implicit
     auto too, per the CSS Overflow spec's "both visible or neither"
     rule, which was silently clipping the pill's own -10px top overshoot
     (Jacob, 2026-08-06: "weird scroll element... hides the top of the
     white box"). Mobile fit is handled by shrinking the column minmax
     values in the media query below instead of a scroll affordance. */

  .jr-lp-vs__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(130px, 1fr));
    /* stretch (the default), not center -- centering each cell
       independently within its row let cells with different intrinsic
       heights (e.g. a "Mostly" note under one icon but not others) land
       with their own box edges at different heights, so the border-top
       divider lines didn't connect into one straight line across the row
       (Jacob, 2026-08-06: "the lines need to go across the entire row,
       the rows are a bit misaligned"). Content is centered WITHIN each
       now-full-height cell instead, via justify-content on the cell
       itself (see .jr-lp-vs__cell). */
    max-width: 1040px;
    margin-inline: auto;
  }

  .jr-lp-vs__pill {
    grid-column: 2;
    /* grid-row is set inline (1 / blocks.size+2) instead of here -- it
       needs the real block count. Two things had to be true together for
       this to actually span the real rows: (1) NOT grid-row:1/-1 --
       negative line numbers count from the end of the EXPLICIT grid only,
       and this grid has no explicit grid-template-rows, so -1 collapsed
       to almost nothing (verified: 20px tall against a 573px grid); (2)
       every OTHER item in the grid also needed an explicit grid-row
       (not just grid-column) -- leaving their row to auto-flow while
       this element explicitly spanned a huge range pushed the
       auto-placed items ~990 implicit rows down instead of onto the six
       real ones (verified via computed grid-template-rows: hundreds of
       "0px" tracks, then the six real ones at the very end). */
    /* .jr-lp-vs__grid sets align-items:center for the real cell content,
       which also applies to this (empty, content-less) item by default --
       centering a 0-height box within its row-span instead of filling it.
       Stretch overrides that just for this item, so it actually covers
       the full span instead of collapsing to nothing. */
    align-self: stretch;
    background: #ffffff;
    border: 2px solid var(--jr-green, #4e5e46);
    border-radius: 24px;
    /* Vertical-only overshoot -- a horizontal one (e.g. -6px each side)
       bleeds the pill into the label/col2 tracks, and since those
       elements come later in DOM order (and .jr-lp-vs__cell carries its
       own z-index:1) they paint OVER that sliver of the pill, leaving
       their border-top divider line visibly poking onto the white card
       (Jacob, 2026-08-06: "the lines... need to go across or behind the
       white box... not be visible on top of the white"). Matching the
       pill's edges exactly to its grid track removes the overlap
       entirely instead of trying to out-stack it. */
    margin: -10px 0;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.1);
  }

  /* Explicit grid-column on every item, including these -- .jr-lp-vs__pill
     is also explicitly placed (grid-column:2, grid-row:1/-1), and an
     explicitly-placed item blocks auto-flow from using that cell for
     later siblings, cascading a one-column shift (and eventual wrap) for
     every auto-placed item in every row after it. Placing everything
     explicitly sidesteps that entirely -- verified live, the 4th column
     was wrapping onto its own row before this. */
  .jr-lp-vs__corner,
  .jr-lp-vs__label {
    grid-column: 1;
  }

  .jr-lp-vs__colhead {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 18px 12px;
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .jr-lp-vs__colhead--us,
  .jr-lp-vs__cell--us {
    grid-column: 2;
  }

  .jr-lp-vs__colhead--col2,
  .jr-lp-vs__cell--col2 {
    grid-column: 3;
  }

  .jr-lp-vs__colhead--col3,
  .jr-lp-vs__cell--col3 {
    grid-column: 4;
  }

  .jr-lp-vs__colhead--us {
    color: var(--jr-vs-fg);
  }

  /* currentColor SVG theme asset (same one the header/footer use), not a
     second copy of the wordmark -- sized to roughly match the sibling
     column headings' cap-height rather than the SVG's own viewBox
     (333 x 68.79) at face value, which would run wider than the two text
     headings either side (Jacob, 2026-08-06: "put our logotype at the
     top of the column instead of Juniper in archivo"). */
  .jr-lp-vs__logo {
    display: inline-block;
    width: clamp(72px, 8vw, 92px);
  }

  .jr-lp-vs__logo svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
  }

  .jr-lp-vs__label {
    padding: 18px 20px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .jr-lp-vs__label strong {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: 500;
    /* Was 0.9375rem (15px) -- read small next to the colorpicker body
       copy directly above this section (1rem/16px) (Jacob, 2026-08-07:
       "feels a bit too small... compared to the previous section's
       text"). */
    font-size: 1.0625rem;
    margin-bottom: 4px;
  }

  .jr-lp-vs__label p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    opacity: 0.65;
  }

  .jr-lp-vs__cell {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 14px 12px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .jr-lp-vs__cell--us {
    border-top-color: transparent;
  }

  .jr-lp-vs__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.9375rem;
    line-height: 1;
  }

  .jr-lp-vs__icon--yes {
    background: var(--jr-green, #4e5e46);
    color: #ffffff;
  }

  /* The photo itself IS the round mark on rows concrete enough to point
     at a real product -- a bit bigger than the plain checkmark since
     it's carrying more information now (Jacob, 2026-08-06: "unify these
     two symbols into one... take the thumbnail and create a circle
     instead"). */
  .jr-lp-vs__icon--photo {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: #f4f1ea;
    transition: opacity 0.2s ease;
  }

  .jr-lp-vs__icon--photo:hover {
    opacity: 0.85;
  }

  .jr-lp-vs__icon--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Real product photo (Jacob, 2026-08-07, from the "thebedsetthumbnail"
       Drive folder) shot tighter than the earlier lifestyle-catalogue
       crop -- the stack already fills most of the square frame, roughly
       centred, so this only needs a modest centred zoom to tighten it
       further, not the aggressive bottom-biased crop the previous,
       loosely-framed photo needed. */
    transform: scale(1.25);
  }

  .jr-lp-vs__icon--no {
    background: rgb(var(--color-foreground-rgb) / 0.12);
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  .jr-lp-vs__icon--partial {
    background: rgb(var(--color-foreground-rgb) / 0.18);
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-lp-vs__note {
    font-size: 0.6875rem;
    opacity: 0.55;
  }

  /* Mobile-only carousel: hidden on desktop, where the grid above (with
     the pill and its own logo sizing) still runs. */
  .jr-lp-vs__mobile-carousel { display: none; }

  @media screen and (max-width: 749px) {
    .jr-lp-vs { padding: 48px var(--page-margin, 20px) 56px; }
    /* The grid this replaces (2026-08-07: "this element needs to be
       adapted as a carousel to mobile as well... place the three
       players as rows with one category on each card"). Cancels the
       section's own inset and re-applies it as the scroll container's
       own padding instead -- a carousel needs its content to actually
       reach the true edges so the next card peeks in, unlike a normal
       block that just sits inside the page margin. */
    .jr-lp-vs__grid { display: none; }

    .jr-lp-vs__mobile-carousel {
      display: flex;
      align-items: stretch;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      /* Without this, scroll-snap-align:start on each page aligns it to
         the scrollport's true left:0 -- exactly where the sticky legend
         also sits, so the snapped page ended up rendering underneath the
         legend instead of beside it. This shifts what "start" means for
         snapping to just past the legend + gap instead. */
      scroll-padding-left: 136px;
      margin-inline: calc(-1 * var(--page-margin, 20px));
      /* Left padding moved onto .jr-lp-vs__mlegend itself (as its own
         padding-left, same value) -- see that rule for why: this used to
         leave a page-margin-wide strip between the true scrollport edge
         and the legend's own box where the legend covered nothing, and
         the previous page's card (mid-scroll) showed through it
         (2026-08-08, screenshot: "white cards here are still showing on
         the left side"). Right padding is unrelated (just the trailing
         breathing room after the last card) and stays here. */
      padding: 4px var(--page-margin, 20px) 12px 0;
      -webkit-overflow-scrolling: touch;
    }

    /* Sticky, not a scroll-snap target -- stays pinned at the scroll
       container's own left EDGE (not its padding edge -- width and
       padding-left below absorb that inset internally instead) while the
       pages behind it slide past underneath. Needs its own opaque
       background for exactly that reason -- without one, scrolled-past
       pages would show through the legend instead of it covering them.
       Widened by var(--page-margin) + padding-left of the same amount so
       the legend's OPAQUE BOX now reaches all the way to screen x:0 (the
       real scrollport edge), while its TEXT still sits at the same visual
       inset as before -- previously the box itself started at x:page-margin
       (matching the container's old padding-left), leaving that
       page-margin-wide strip in front of it with nothing opaque covering
       whatever page card was scrolled underneath (2026-08-08 bug: a
       sliver of the previous page's icons/title was visible there, not
       actually behind the legend at all, just in the uncovered gap in
       front of it). Right edge (104px content + this inset) is unchanged,
       so the gap to the active page and the previous-page-hiding math
       elsewhere are both untouched -- only the legend's LEFT edge moved. */
    .jr-lp-vs__mlegend {
      position: sticky;
      left: 0;
      flex: 0 0 auto;
      width: calc(104px + var(--page-margin, 20px));
      /* Top padding matches .jr-lp-vs__mpage's own 22px exactly -- the
         legend has no title text pushing it down (its "title" is an
         invisible spacer), so without this its rows started 22px higher
         than a page's rows (2026-08-08 screenshot: names floating above
         their checkmarks). */
      padding: 22px 0 0 var(--page-margin, 20px);
      box-sizing: border-box;
      background: var(--jr-vs-bg, #e2e7da);
      z-index: 2;
    }

    /* Narrower than the available space after the legend on purpose --
       at 220px the next card barely peeked in, giving no visual hint
       that the carousel scrolls (2026-08-08: "make it narrower so we
       can see the second card on screen indicating it is possible to
       scroll"). Applies to every category page since they share this
       one class. */
    .jr-lp-vs__mpage {
      flex: 0 0 190px;
      scroll-snap-align: start;
      background: #ffffff;
      border-radius: 18px;
      padding: 22px 18px;
      box-shadow: 0 10px 28px rgb(0 0 0 / 0.08);
    }

    /* Fixed 2-line height on EVERY title -- the legend's spacer is
       always one line ("&nbsp;"), but a real category title varies
       between one and two lines depending on its length ("Extra-long-
       staple cotton" wraps, "Try at home" doesn't). Reserving the same
       worst-case height on both means the row underneath always starts
       at the same y regardless of which page is active, instead of only
       lining up by coincidence for single-line titles (2026-08-08:
       "Juniper, Big Box Retailer and Luxury brands need to align with
       the rows for each checkmark -- currently floating higher up").
       min-height is in em, so the font-size reduction below scales it
       automatically -- no separate number to keep in sync. */
    .jr-lp-vs__mcard-title {
      font-family: var(--font-heading--family);
      font-weight: 500;
      /* Was 1.125rem (2026-08-08: "the font itself can be reduced a
         little"). */
      font-size: 1rem;
      line-height: 1.25;
      min-height: 2.5em;
      margin: 0 0 6px;
      /* Was centered (2026-08-08), reverted (2026-08-08: "let's go back
         to left-aligning the text... both the headline and the
         supporting text"). */
      text-align: left;
    }

    /* Same desktop one-liner (.jr-lp-vs__label p) repeated here in a
       small font (2026-08-08: "the short description we use on
       desktop... add that in small font below the headline... on
       mobile as well"). min-height reserves the tallest of the six
       real descriptions (~4 lines at this width) on every card AND on
       the legend's own invisible &nbsp; copy -- same fixed-height
       trick as the title above, for the same reason: descriptions
       vary in line count same as titles do, and only one worst-case
       reservation keeps every category's checkmark rows lined up with
       the legend regardless of which is active. */
    .jr-lp-vs__mcard-desc {
      font-size: 0.75rem;
      line-height: 1.45;
      opacity: 0.62;
      min-height: 5.8em;
      margin: 0 0 16px;
      text-align: left;
    }

    /* Same class on both the legend's name rows and each page's icon
       rows -- identical height is what keeps a checkmark lined up with
       the player name it belongs to, two separate elements scrolling
       independently otherwise having no other way to agree on that.
       min-height is the other half of that: content height still varies
       within the shared class (the legend's own logo row is a 68x14px
       SVG, shorter than a 30px checkmark circle, which is shorter than a
       40px product-photo icon), and a shorter row doesn't just look
       different, it throws off every row AFTER it too, since each row's
       top is the previous row's bottom (2026-08-08 screenshot: "Luxury
       brands" cumulatively adrift after the logo row's shortfall).
       66px = the tallest real content (40px photo icon) + this padding,
       so every row -- whatever it holds -- reserves the same space and
       centers within it via align-items above. */
    .jr-lp-vs__mrow {
      display: flex;
      align-items: center;
      padding: 13px 0;
      min-height: 66px;
      box-sizing: border-box;
      border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    }

    .jr-lp-vs__mlegend .jr-lp-vs__mrow { border-top-color: rgb(var(--color-foreground-rgb) / 0.15); }

    .jr-lp-vs__mrow:first-of-type { border-top: none; }

    .jr-lp-vs__mpage .jr-lp-vs__mrow { justify-content: center; }

    .jr-lp-vs__mrow-name {
      font-size: 0.8125rem;
      line-height: 1.3;
    }

    .jr-lp-vs__mrow--us .jr-lp-vs__mrow-name {
      font-family: var(--font-heading--family);
      font-weight: 500;
    }

    .jr-lp-vs__mrow--us .jr-lp-vs__logo {
      width: 68px;
      display: block;
    }

    .jr-lp-vs__mrow .jr-lp-vs__icon { flex-shrink: 0; }
  }
/* END_SECTION:jr-lp-versus */

/* START_SECTION:jr-making-of (INDEX:57) */
.jr-mkof {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(40px, 6vw, 80px) var(--page-margin, 32px) clamp(60px, 8vw, 100px);
    box-sizing: border-box;
  }

  .jr-mkof__head {
    text-align: center;
    margin: 0 0 clamp(28px, 3.2vw, 40px);
  }

  .jr-mkof__kicker {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-mkof__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-mkof__subheading {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-mkof__hero {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .jr-mkof__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-mkof__callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    margin-bottom: clamp(40px, 5vw, 64px);
    background: var(--jr-line);
    text-decoration: none;
    color: var(--color-foreground);
  }

  .jr-mkof__callout-text {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .jr-mkof__callout-arrow {
    flex: 0 0 auto;
    font-size: 1.125rem;
    transition: transform 0.2s ease;
  }

  .jr-mkof__callout:hover .jr-mkof__callout-arrow {
    transform: translateX(3px);
  }

  .jr-mkof__steps {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .jr-mkof__step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    padding-top: clamp(32px, 3.6vw, 48px);
    padding-bottom: clamp(32px, 3.6vw, 48px);
    border-top: 1px solid var(--jr-line);
  }

  .jr-mkof__step:first-child {
    border-top: none;
    padding-top: 0;
  }

  .jr-mkof__step-num {
    font-family: var(--jr-font-serif);
    font-size: 1.5rem;
    line-height: 1;
    color: rgb(var(--color-foreground-rgb) / 0.3);
  }

  .jr-mkof__step-heading {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    grid-column: 2;
  }

  .jr-mkof__step-body {
    grid-column: 2;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--jr-ink-soft);
  }

  .jr-mkof__step-body p { margin: 0 0 12px; }
  .jr-mkof__step-body p:last-child { margin-bottom: 0; }
  .jr-mkof__step-body ul { margin: 0; padding-left: 1.1em; }
  .jr-mkof__step-body li { margin-bottom: 6px; }
  .jr-mkof__step-body a { color: var(--color-foreground); text-decoration: underline; }

  .jr-mkof__step-media {
    grid-column: 2;
    margin-top: 20px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .jr-mkof__step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-mkof__contact {
    margin-top: clamp(40px, 4vw, 56px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--jr-line);
    text-align: center;
    font-size: 0.875rem;
    color: var(--jr-ink-soft);
  }

  .jr-mkof__contact a { color: var(--color-foreground); }

  @media screen and (min-width: 750px) {
    .jr-mkof__step {
      grid-template-columns: 64px 1fr;
    }
  }
/* END_SECTION:jr-making-of */

/* START_SECTION:jr-page-story (INDEX:58) */
.jr-pgstory {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: 0 clamp(56px, 6vw, 96px);
    box-sizing: border-box;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .jr-pgstory__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
    margin-bottom: clamp(32px, 4vw, 48px);
  }

  .jr-pgstory__hero-text { order: -1; text-align: center; }

  .jr-pgstory__hero-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .jr-pgstory__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .jr-pgstory__eyebrow {
    margin: 0 0 18px;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-pgstory__first {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(3.25rem, 8vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: 0.01em;
  }

  .jr-pgstory__founder {
    margin: 14px 0 0;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-pgstory__hairline { border-top: 1px solid var(--color-foreground); }

  .jr-pgstory__standfirst {
    max-width: 34rem;
    margin: 0 0 clamp(40px, 5vw, 72px);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.3;
  }
  .jr-pgstory__standfirst p { margin: 0; }

  .jr-pgstory__row {
    display: grid;
    grid-template-columns: 45% 15% 1fr;
    margin-top: clamp(48px, 6vw, 96px);
    position: relative;
    align-items: start;
  }

  .jr-pgstory__row--first { margin-top: clamp(8px, 1vw, 16px); }

  .jr-pgstory__media {
    grid-column: 1;
    position: sticky;
    top: calc(var(--header-height, 80px) + 28px);
    align-self: start;
  }

  .jr-pgstory__media img { width: 100%; height: auto; display: block; }

  .jr-pgstory__media-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-background);
  }

  .jr-pgstory__media-pair img { aspect-ratio: 3 / 4; object-fit: cover; }

  .jr-pgstory__media .jr-pgstory__media-cap {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-pgstory__text {
    grid-column: 3;
    max-width: 34rem;
    font-size: var(--jr-editorial-body-size);
    line-height: 1.75;
    color: var(--jr-editorial-body-color);
    padding-bottom: clamp(24px, 3vw, 40px);
  }

  .jr-pgstory__text > :first-child { margin-top: 0; }
  .jr-pgstory__text > :last-child { margin-bottom: 0; }
  .jr-pgstory__text p { margin: 0 0 1.3em; }
  .jr-pgstory__text a { color: inherit; text-underline-offset: 3px; }

  .jr-pgstory__text img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4em 0;
  }

  .jr-pgstory__quote {
    max-width: 46rem;
    margin: clamp(48px, 6vw, 96px) auto 0;
    text-align: left;
  }

  .jr-pgstory__quote.jr-pgstory__row--first { margin-top: clamp(8px, 1vw, 16px); }

  .jr-pgstory__quote-text {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.35;
    color: var(--color-foreground);
  }

  .jr-pgstory__quote-cite {
    display: block;
    margin-top: 16px;
    text-align: right;
    font-family: var(--jr-font-sans);
    font-style: normal;
    font-size: var(--jr-editorial-caption-size);
    font-weight: var(--jr-editorial-caption-weight);
    letter-spacing: var(--jr-editorial-caption-tracking);
    text-transform: uppercase;
    color: var(--jr-editorial-caption-color);
  }

  .jr-pgstory__breakout {
    margin: clamp(40px, 5vw, 64px) 0;
    width: 100%;
  }

  .jr-pgstory__breakout img {
    width: 100%;
    max-height: 900px;
    object-fit: cover;
    display: block;
  }

  .jr-pgstory__breakout-pair {
    margin-top: clamp(40px, 5vw, 64px);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--page-margin);
  }

  .jr-pgstory__breakout-pair-tile { margin: 0; }

  .jr-pgstory__breakout-pair-tile img {
    width: 100%;
    height: clamp(360px, 46vw, 620px);
    object-fit: cover;
    display: block;
  }

  .jr-pgstory__endmark {
    width: 11px;
    height: 11px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    background: var(--color-foreground);
  }

  @media screen and (max-width: 749px) {
    .jr-pgstory__hero { grid-template-columns: 1fr; gap: 24px; }
    .jr-pgstory__hero-text { order: 0; }
    .jr-pgstory__row { grid-template-columns: 1fr; margin-top: 20px; }
    .jr-pgstory__row--first,
    .jr-pgstory__quote.jr-pgstory__row--first { margin-top: 0; }
    .jr-pgstory__media { grid-column: 1; position: static; top: auto; }
    /* margin-bottom was 48px here, meant as "space after a chunk" -- but
       .jr-pgstory__row is display:grid, so a grid item's own margin
       never collapses with anything outside the grid. That 48px was
       fully real, trapped space, and the NEXT element then added its
       own margin-top on top of it, double-spacing every transition
       (confirmed on mobile screenshots 2026-07-21; full writeup in
       jr-article-story.liquid, which had the same bug). Zeroed here so
       every transition relies on one mechanism: the next element's own
       margin-top (20px). */
    .jr-pgstory__text { grid-column: 1; max-width: none; margin-top: 24px; margin-bottom: 0; }
    .jr-pgstory__quote:not(.jr-pgstory__row--first) { margin-top: 20px; }
  }
/* END_SECTION:jr-page-story */

/* START_SECTION:jr-pairs-with (INDEX:59) */
.jr-pairs {
    padding: 40px var(--page-margin, 32px) 48px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .jr-pairs__inner {
    max-width: 720px;
  }

  .jr-pairs__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin: 0 0 10px;
  }

  .jr-pairs__h {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 420;
    margin: 0;
  }

  .jr-pairs__intro {
    max-width: 56ch;
    margin: 10px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .jr-pairs__grid {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .jr-pairs__card {
    display: flex;
    gap: 16px;
    align-items: center;
    flex: 1 1 300px;
    max-width: 360px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    padding: 12px;
  }

  .jr-pairs__media {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    display: block;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .jr-pairs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-pairs__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .jr-pairs__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .jr-pairs__name {
    font-size: 0.9375rem;
    color: var(--color-foreground);
    text-decoration: none;
    line-height: 1.3;
  }

  .jr-pairs__name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .jr-pairs__price {
    flex: 0 0 auto;
    font-size: 0.9375rem;
    color: rgb(var(--color-foreground-rgb) / 0.75);
    white-space: nowrap;
  }

  .jr-pairs__body .jr-addbtn {
    display: block;
  }

  .jr-pairs__body .jr-addbtn__button {
    width: auto;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 22px;
  }
/* END_SECTION:jr-pairs-with */

/* START_SECTION:jr-playlists-list (INDEX:60) */
.jr-plist {
    /* Black/white always, regardless of the site's own light/dark mode --
       redefined locally so every rule below (all of which already read
       color via these same custom properties) flips for free, rather than
       overriding each one individually. */
    --color-background: #000;
    --color-foreground: #fff;
    --color-foreground-rgb: 255, 255, 255;
    color: var(--color-foreground);

    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--jr-plist-pad-top, 56px) var(--jr-plist-pad-bottom, 72px);
    box-sizing: border-box;
    background: var(--color-background);
  }

  .jr-plist__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(36px, 4vw, 60px);
  }

  .jr-plist__eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-plist__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-plist__intro {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-plist__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
    row-gap: clamp(32px, 3.4vw, 52px);
  }

  .jr-plist--5 .jr-plist__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .jr-plist--4 .jr-plist__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .jr-plist__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .jr-plist__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    margin-bottom: 14px;
  }

  .jr-plist__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .jr-plist__link:hover .jr-plist__img {
    transform: scale(1.03);
  }

  .jr-plist__h {
    font-family: var(--jr-font-sans);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0.005em;
    /* reserve 2 lines so .jr-plist__dek starts at the same height whether
       the title wraps to one line or two */
    min-height: 2.5em;
  }

  /* thinner than the title, same hierarchy pairing as .jr-cardmeta__name/
     __material on the collection cards (heavier+brighter title, lighter+
     dimmer secondary line) -- title/dek read too similar in weight before
     this, size + opacity alone weren't enough separation (Jacob,
     2026-07-27). */
  .jr-plist__dek {
    font-family: var(--jr-font-sans);
    font-weight: 300;
    margin-top: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .jr-plist__empty {
    text-align: center;
    padding-block: 60px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  @media screen and (max-width: 1200px) {
    .jr-plist__grid,
    .jr-plist--5 .jr-plist__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .jr-plist--4 .jr-plist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media screen and (max-width: 850px) {
    .jr-plist__grid,
    .jr-plist--5 .jr-plist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jr-plist--4 .jr-plist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media screen and (max-width: 550px) {
    .jr-plist__grid,
    .jr-plist--5 .jr-plist__grid,
    .jr-plist--4 .jr-plist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
/* END_SECTION:jr-playlists-list */

/* START_SECTION:jr-shop-the-look (INDEX:62) */
/* Archivo throughout (var(--font-body--family)) -- no serif anywhere in
     this panel, per Jacob. */
  .jr-stl-root { display: contents; }

  /* ---------- trigger, overlaid bottom-right on the target photo ---------- */
  .jr-tile:has(.jr-stl__trigger) { position: relative; }

  .jr-stl__trigger {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 11px 18px;
    background: #1c1b19;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 2px 14px rgb(0 0 0 / 0.22);
    transition: background 0.15s ease;
  }
  .jr-stl__trigger:hover { background: #000; }

  @media screen and (max-width: 749px) {
    .jr-stl__trigger { right: 12px; bottom: 12px; padding: 10px 15px; font-size: 0.75rem; }
  }

  /* ---------- modal ---------- */
  .jr-stl {
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    width: 100%;
    color: #1c1b19;
  }
  .jr-stl::backdrop { background: rgb(0 0 0 / 0.42); }

  .jr-stl__panel {
    position: relative;
    background: #fff;
    /* --jr-stl-pad-b is the panel's bottom padding AND the footer's top
       padding, so the total + button box always sits with equal air above
       and below it. Two hardcoded numbers drifted apart before (20 above,
       28 below), which read as the button sitting high in its own space. */
    --jr-stl-pad-b: 28px;
    /* Control widths live here, not on the list, because the footer button
       needs them too -- it spans exactly the stepper + gap + Add to cart of
       the rows above it, so its left and right edges land on theirs. */
    --jr-stl-action: 118px;
    --jr-stl-qty: 88px;
    --jr-stl-actions-gap: 10px;
    --jr-stl-actions: calc(var(--jr-stl-qty) + var(--jr-stl-actions-gap) + var(--jr-stl-action));
    /* A flex column, not one big scrolling blob: only .jr-stl__scroll (the
       heading/intro/list) actually scrolls. The footer is a normal,
       non-scrolling flex item, so it's structurally guaranteed to sit at the
       true bottom edge of the panel -- no gap, no "scroll a bit further and
       there's still more under it". A single overflow-y:auto on the whole
       panel plus position:sticky on the footer *looked* equivalent, but
       depended on this panel's own max-height exactly matching the dialog's,
       which drifted apart in at least one real browser. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    font-family: var(--font-body--family);
  }
  .jr-stl__scroll {
    padding: 32px 28px 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* without this a flex child won't actually scroll -- it just grows past the parent */
  }

  .jr-stl__close {
    position: absolute;
    top: 12px; right: 14px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    font-size: 24px; line-height: 1;
    background: transparent;
    border: none;
    color: #1c1b19;
    cursor: pointer;
    opacity: 0.55;
  }
  .jr-stl__close:hover { opacity: 1; }

  .jr-stl__h {
    margin: 0 0 6px;
    font-family: var(--font-body--family);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .jr-stl__intro {
    margin: 0 0 22px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(28 27 25 / 0.66);
  }

  /* --jr-stl-action is the one width every Add to cart uses, whether it sits
     in a row's own actions column or inline beside a set's price, so the two
     placements can't drift apart. */
  /* Every right edge in the panel is pinned to these three values rather than
     left to content-based auto sizing: --jr-stl-action (each Add to cart),
     --jr-stl-qty (the stepper) and the gap between them. An `auto` actions
     column only lined up with the set's button by coincidence of the label's
     rendered width -- a longer label, a different font, or the "Added" text
     swap would have shifted it out of line. Fixed widths make the alignment
     structural. */
  .jr-stl__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* align-items: start, not center. Centring the actions column against the
     whole row height put the qty stepper + Add to cart at the row's vertical
     middle, while title/caption/price stack from the top of the info column --
     so as soon as a title wrapped to two or three lines the button landed
     BETWEEN the title and its own price, reading as "title, button, price"
     top to bottom (measured: title 466, actions 483, price 513; Jacob,
     2026-08-20: "elements have gotten out of order"). Top-aligning gives
     every row one predictable reading order -- title/caption/price down the
     left, controls pinned top-right -- and matches .jr-stl__row--bundle,
     which already had to do this for the same reason. */
  .jr-stl__row {
    display: grid;
    grid-template-columns: 86px 1fr var(--jr-stl-actions);
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid rgb(28 27 25 / 0.1);
  }
  .jr-stl__row:last-child { border-bottom: 1px solid rgb(28 27 25 / 0.1); }

  /* quantity taken to 0: kept on screen (so it can be added back) but clearly
     out of the look and out of the room total */
  .jr-stl__row.is-excluded .jr-stl__thumb,
  .jr-stl__row.is-excluded .jr-stl__info { opacity: 0.4; }
  .jr-stl__row.is-excluded .jr-stl__qty { border-color: rgb(28 27 25 / 0.22); }

  /* a set's Add to cart sits beside its price, under the size pickers it
     depends on -- not off in a top-right column away from them */
  .jr-stl__row--bundle {
    grid-template-columns: 86px 1fr;
    align-items: start;
  }
  .jr-stl__foot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .jr-stl__foot .jr-stl__price { margin: 0; }

  .jr-stl__thumb {
    display: block; width: 86px; height: 86px;
    overflow: hidden;
    background: rgb(28 27 25 / 0.05);
  }
  .jr-stl__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .jr-stl__info { min-width: 0; }
  .jr-stl__title {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
  }
  .jr-stl__title:hover { text-decoration: underline; }
  .jr-stl__caption {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(28 27 25 / 0.58);
  }
  .jr-stl__price {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .jr-stl__price s {
    color: rgb(28 27 25 / 0.45);
    font-size: 0.8125rem;
    text-decoration-thickness: 1px;
  }
  /* bordered SAVE pill, per the wireframe -- states the real cash saving the
     bundle discount is producing, not a percentage */
  .jr-stl__save {
    border: 1px solid rgb(28 27 25 / 0.28);
    padding: 3px 7px;
    font-size: 0.625rem;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgb(28 27 25 / 0.75);
    white-space: nowrap;
  }

  /* bundle component rows: locked colour (in the label) + size dropdown, with
     an optional choice dropdown (one large duvet vs two singles) on its own
     row above. --jr-stl-field fixes one field width for every row so all the
     bed-set selects line up exactly. */
  .jr-stl__components {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    --jr-stl-field: 190px;
  }
  .jr-stl__comp-group { display: flex; flex-direction: column; gap: 7px; }
  .jr-stl__comp {
    display: grid;
    grid-template-columns: 1fr var(--jr-stl-field);
    gap: 10px;
    align-items: center;
  }
  .jr-stl__comp-label {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: rgb(28 27 25 / 0.72);
  }
  /* the size row belongs to the choice above it, so mark it as a child with a
     short rule + indent rather than letting it read as a peer component */
  .jr-stl__comp--child .jr-stl__comp-label {
    position: relative;
    padding-left: 12px;
    color: rgb(28 27 25 / 0.58);
  }
  .jr-stl__comp--child .jr-stl__comp-label::before {
    content: '';
    position: absolute;
    left: 0; top: 1px; bottom: 1px;
    width: 1px;
    background: rgb(28 27 25 / 0.22);
  }
  .jr-stl__size {
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    padding: 7px 26px 7px 9px;
    border: 1px solid rgb(28 27 25 / 0.28);
    border-radius: 2px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%231c1b19' stroke-width='1.1' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    color: #1c1b19;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
    text-overflow: ellipsis;
  }
  /* inactive alternates must not occupy their grid cell */
  .jr-stl__size[hidden] { display: none; }

  /* qty stepper and Add to cart sit side by side on one line, per the
     wireframe (they were stacked before) */
  .jr-stl__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--jr-stl-actions-gap);
  }

  /* quantity stepper -- same shape as the mini cart's */
  .jr-stl__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--jr-stl-qty);
    border: 1.5px solid rgb(28 27 25 / 0.55);
    border-radius: 2px;
  }
  .jr-stl__qty button {
    width: 28px; height: 34px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    background: transparent;
    border: none;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: #1c1b19;
    cursor: pointer;
  }
  .jr-stl__qty button:hover { background: rgb(28 27 25 / 0.05); }
  .jr-stl__qty span {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.8125rem;
  }

  /* per-row add: a deliberately pronounced outline (Jacob wanted it stronger
     than the wireframe's hairline), same weight as the qty stepper's border
     so the pair reads as one set of controls */
  .jr-stl__add {
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    padding: 9px 6px;
    /* fixed, not min-width: the label swaps to "Added" after a successful add,
       and a content-sized button would jump width and break the right edge */
    flex: 0 0 var(--jr-stl-action);
    width: var(--jr-stl-action);
    background: transparent;
    color: #1c1b19;
    border: 1.5px solid #1c1b19;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .jr-stl__add:hover { background: #1c1b19; color: #fff; }
  .jr-stl__add:disabled { opacity: 0.45; cursor: default; }
  .jr-stl__add.is-added { background: #1c1b19; color: #fff; }

  /* ---------- footer: room total + add everything ----------
     A normal (non-scrolling) flex item below .jr-stl__scroll -- see
     .jr-stl__panel's own comment for why this replaced position:sticky.
     It's visible the instant the modal opens, before scrolling to the
     last row -- the whole point Jacob wants this for: no one should have
     to scroll down and add every row by hand to realise there's a
     one-click "add everything" option.

     No negative margin: this used to live INSIDE .jr-stl__scroll (which is
     inset by 28px), where `margin: 0 -28px` was what pulled it back out to
     the panel's true edges. It has since moved OUT to be a direct child of
     .jr-stl__panel, which has no padding of its own -- so it is already
     full-bleed, and the negative margin was left behind pulling it 28px
     PAST the panel on each side. Measured: panel 440-1000, footer 412-1028,
     which put "Room total" at x=440 against every row's x=468 (Jacob,
     2026-08-20: "we're not respecting the left-right margins"). Padding
     alone now matches .jr-stl__scroll's, so footer text lines up with the
     rows above it. Keep these two paddings equal at both breakpoints. */
  .jr-stl__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: var(--jr-stl-pad-b) 28px;
    background: #fff;
    border-top: 1px solid rgb(28 27 25 / 0.1);
    box-shadow: 0 -8px 16px -8px rgb(0 0 0 / 0.08);
  }
  .jr-stl__total-label {
    margin: 0 0 5px;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(28 27 25 / 0.55);
  }
  .jr-stl__total-value {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.1;
  }

  /* black, spanning exactly the stepper + Add to cart footprint above it */
  .jr-stl__addall {
    flex: 0 0 var(--jr-stl-actions);
    padding: 15px 10px;
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    background: #1c1b19;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
  }
  .jr-stl__addall:hover { background: #000; }
  .jr-stl__addall:disabled { opacity: 0.55; cursor: default; }

  /* Also a panel-level child (outside .jr-stl__scroll), so it needs its own
     horizontal padding to line up with the rows -- it has no inset to inherit. */
  .jr-stl__error {
    margin-top: 12px;
    padding-inline: 28px;
    font-size: 0.8125rem;
    color: #b3261e;
  }

  @media screen and (max-width: 599px) {
    /* set the variable, not the shorthand -- overriding `padding` outright
       would drop --jr-stl-pad-b out of the bottom/footer relationship */
    .jr-stl__panel { --jr-stl-pad-b: 22px; }
    .jr-stl__scroll { padding: 28px 18px 0; }
    .jr-stl__row,
    .jr-stl__row--bundle { grid-template-columns: 64px 1fr; align-items: start; }
    .jr-stl__thumb { width: 64px; height: 64px; }
    .jr-stl__actions {
      grid-column: 2 / -1;
      margin-top: 10px;
      flex-wrap: wrap;
      row-gap: 10px;
    }
    /* Add to cart on its own row below the qty stepper (or, for a bundle
       row, below the price/save pill) -- longer translations (Swedish,
       Finnish, German) were crowding the button when it shared a line with
       that text. flex-basis:100% forces the wrap regardless of how much
       room the text actually needs. */
    .jr-stl__actions .jr-stl__add,
    .jr-stl__foot .jr-stl__add {
      flex: 1 1 100%;
      width: 100%;
    }
    .jr-stl__foot {
      flex-wrap: wrap;
      row-gap: 10px;
    }
    .jr-stl__components { --jr-stl-field: 100%; }
    .jr-stl__comp { grid-template-columns: 1fr; gap: 4px; }
    .jr-stl__comp--child .jr-stl__comp-label { padding-left: 10px; }
    /* padding only, no negative margin -- see the desktop rule's comment */
    .jr-stl__footer { flex-direction: column; align-items: stretch; gap: 14px; padding: var(--jr-stl-pad-b) 18px; }
    .jr-stl__error { padding-inline: 18px; }
    /* .jr-stl__footer switches to a column flex container here, which turns
       the desktop rule's flex-basis (a WIDTH, var(--jr-stl-actions)) into a
       HEIGHT instead -- without this reset the button stretched to ~200px
       tall. width:100% alone was never enough once flex-basis was set. */
    .jr-stl__addall { flex: 0 0 auto; width: 100%; }
  }
/* END_SECTION:jr-shop-the-look */

/* START_SECTION:jr-stories-list (INDEX:64) */
.jr-stories {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--jr-stories-pad-top, 56px) var(--jr-stories-pad-bottom, 80px);
    box-sizing: border-box;
    background: var(--color-background);
  }

  .jr-stories__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(20px, 3vw, 40px);
  }

  .jr-stories__eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .jr-stories__title {
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: 0.005em;
  }

  .jr-stories__intro {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  /* two tiles per row; each <li> stacks its own tile + caption, so the grid
     naturally wraps into fresh pairs regardless of caption length */
  .jr-stories__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: clamp(40px, 4.5vw, 64px);
  }

  .jr-stories__card {
    display: flex;
    flex-direction: column;
  }

  .jr-stories__tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .jr-stories__media,
  .jr-stories__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .jr-stories__img { transition: transform 0.6s ease; }
  .jr-stories__tile:hover .jr-stories__img { transform: scale(1.03); }

  .jr-stories__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0) 68%);
  }

  /* the name overlaid on the image itself */
  .jr-stories__first {
    position: absolute;
    inset-inline: clamp(20px, 2.4vw, 36px);
    bottom: clamp(20px, 2.4vw, 36px);
    margin: 0;
    font-family: var(--jr-font-serif);
    font-weight: 300;
    font-size: clamp(2.9rem, 5.7vw, 4.9rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
  }

  /* caption lives below the tile, in plain page white space */
  .jr-stories__caption {
    padding-top: clamp(16px, 2vw, 24px);
    max-width: 26rem;
  }

  .jr-stories__role {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .jr-stories__dek {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .jr-stories__cta {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .jr-stories__cta span { display: inline-block; transition: transform 0.25s ease; }
  .jr-stories__cta:hover { color: var(--color-foreground); }
  .jr-stories__cta:hover span { transform: translateX(4px); }

  .jr-stories__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: clamp(40px, 4vw, 64px);
  }

  .jr-stories__pagelink {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .jr-stories__pagelink:hover { color: rgb(var(--color-foreground-rgb) / 0.6); }
  .jr-stories__pagelink.is-current { border-bottom-color: var(--color-foreground); }

  .jr-stories__empty {
    text-align: center;
    padding-block: 60px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  @media screen and (max-width: 599px) {
    .jr-stories__grid { grid-template-columns: 1fr; row-gap: 36px; }
  }
/* END_SECTION:jr-stories-list */

/* START_SECTION:layered-slideshow (INDEX:66) */
.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:67) */
.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:69) */
.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:70) */
/**
   * 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:71) */
.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:75) */
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:76) */
.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:77) */
.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:78) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

/* START_SECTION:product-hotspots (INDEX:81) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:82) */
.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:quick-order-list (INDEX:85) */
.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:slideshow (INDEX:90) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

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

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

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

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

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

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

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

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

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

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:92) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:93) */
.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:94) */
.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:95) */
.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:96) */
.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:97) */
.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:98) */
.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:100) */
.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:101) */
.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:102) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:103) */
.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) {
      height: 100%;
      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:104) */
.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:_collection-image (INDEX:107) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:109) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:113) */
.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:114) */
.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:116) */
.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:119) */
.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:120) */
.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:121) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

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

  .header-logo__image--inline {
    display: block;
    color: var(--color-foreground);
  }

  .header-logo__image--inline svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .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:122) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

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

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: 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;
      /* JR: was top: var(--header-padding) — the safety box then overlaid the
         menu labels themselves, so while the pointer was moving, hover over a
         NEIGHBOURING word was swallowed by the active item's box until the
         50ms idle reconcile kicked in (worked on the thin strip below the row,
         dead on the words). Starting at 100% keeps the box strictly BELOW the
         row: it still bridges diagonal travel to the open panel, and the words
         switch panels natively, Nordic Knots-style. */
      top: 100%;
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    /* JR: bridge shows while the pointer is MOVING (stock) AND, crucially, the
       whole time the panel is OPEN (aria-expanded). Stock only showed it while
       moving, so a pointer resting in the word→panel gap left the item, fired
       the grace-close, and the idle reconcile reopened it — a ~0.4s open/close
       flicker. Keeping the bridge up while expanded makes that gap part of the
       item, so a resting pointer holds the panel steady. */
    &[data-safety-box='true']::after,
    &[aria-expanded='true']::after {
      display: block;
    }

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

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
    /* natural-case primary nav: only the faintest tracking, editorial not airy */
    letter-spacing: 0.015em;
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  /* quiet help line at the base of the open mega panel (NK pattern) */
  .jr-mega-help {
    margin: 26px 0 0;
    font-size: 0.8125rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .jr-mega-help a {
    color: var(--color-foreground);
    text-underline-offset: 3px;
  }

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

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

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

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

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

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

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

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

  /* JR: keep every mega-panel link in its natural case (the case setting is for
     the primary bar). Hierarchy reads column-header > item by WEIGHT + colour,
     not size: the header sits at the menu's own (subheading, 500) weight in full
     ink; items step down to body weight (400) so the header clearly leads. */
  .mega-menu .mega-menu__link {
    text-transform: none;
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .mega-menu .mega-menu__link--parent {
    text-transform: none;
    font-size: 0.8125rem;
    /* re-assert the header's own (subheading, 500) weight: parent links also
       carry .mega-menu__link, so the item weight rule above would otherwise
       flatten them to 400 and erase the hierarchy */
    font-weight: var(--menu-parent-font-weight);
    color: var(--color-foreground);
    margin-bottom: 3px;
  }

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

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

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

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

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

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

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

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

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

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

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

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

    width: 200px;
  }

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

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

/* START_BLOCK:_image (INDEX:125) */
.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:129) */
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:134) */
/* 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:139) */
.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:140) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

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

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

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:141) */
.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:comparison-slider (INDEX:149) */
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:150) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:151) */
.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:153) */
.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:154) */
.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:featured-collection (INDEX:155) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:156) */
.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;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .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 - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--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-copyright (INDEX:158) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:159) */
.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:161) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:162) */
.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:164) */
.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:165) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:166) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:167) */
.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:168) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:169) */
.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:172) */
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:174) */
.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:175) */
.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:178) */
.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;
  }

  .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:180) */
.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:181) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:182) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:185) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:186) */
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:187) */
.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:background-media (INDEX:189) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:190) */
.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:191) */
.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:196) */
.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);
  }

  .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:197) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:198) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:199) */
.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:200) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

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

    position: sticky;
    bottom: 0;
    z-index: 1;
    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);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @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;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:201) */
.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:202) */
.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;
  }

  /* JR: material line under the name (second row), matching the cards/PDP */
  .cart-items__material {
    display: block;
    margin-block-start: 1px;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* JR: bundle configuration list (from the _summary property) */
  .cart-items__config {
    margin-block-start: var(--margin-2xs);
    padding: 0;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .cart-items__config li {
    margin-block-start: 2px;
    line-height: 1.35;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

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

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:203) */
.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__shipping {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__shipping-value--free {
    font-weight: var(--font-weight-bold);
  }

  .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:chat-drawer (INDEX:204) */
/* 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:collection-card (INDEX:206) */
.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:divider (INDEX:209) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:210) */
.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:211) */
.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:212) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:213) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:218) */
.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:220) */
.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:221) */
.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:222) */
.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;
  }

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

  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;
      line-height: normal;
    }
  }

  /* signed-in only: the native component has no slot for overriding its
     avatar circle with text, so .jr-account-signed-in-label (a plain
     unslotted sibling, not a real override) sits in for it -- hide the
     circle rather than try to style text into a box sized for an avatar. */
  .account-button__fallback {
    display: none;
  }

  .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) {
    /* JR, 2026-08-05: same box-gap-vs-ink-gap trap as the Search fix in
       snippets/search.liquid -- see that comment for the full explanation.
       Every other gap in this right-hand group reads 28px of visible space:
       Help/Journal/Pro are .header-secondary__link, which carry
       padding-inline: calc(var(--gap-lg) / 2) (8px), so between two of them
       it's 12 + 8 + 8 = 28, and Pro -> Account is Pro's own 8px plus the
       column's 20px gap = 28 as well. Account and Cart are the only two
       items here with NO inline padding, so this gap alone rendered at the
       raw 20px and read visibly tighter than its four neighbours.
       Add back the 8px the neighbours get from padding. Adjusting THIS gap
       rather than giving the two buttons padding on purpose: the cart's
       count bubble is offset off the button box (--cart-bubble-right), so
       padding there would shift the bubble, and padding on Account would
       push Pro -> Account back off 28. This is the only gap in the
       container (its third child is out of flow), so nothing else moves. */
    .header-actions--text {
      gap: calc(var(--gap-xl) + var(--gap-lg) / 2);
    }

    .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;
      /* JR, 2026-08-05: +20% on the stock var(--gap-xs) (8px -> 9.6px), Jacob
         wanted a touch more air between the word and the count bubble. Note
         the flex gap is NOT the visible gap: --cart-bubble-right pulls the
         bubble 2.5px back toward the text (that offset exists for the icon
         variant, where the bubble overlaps the icon's corner), so 8px of gap
         rendered as 5.5px of white and this lands at ~7.1px. */
      gap: calc(var(--gap-xs) * 1.2);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:223) */
.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;

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

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-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;
  }

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

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

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

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

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

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

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

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

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:header-secondary-nav (INDEX:225) */
.header-secondary {
    height: 100%;
    display: flex;
    align-items: center;
    /* breathing room between the link group and the search icon */
    margin-inline-end: clamp(1.75rem, 3vw, 3rem);
  }

  /* Mirror the drawer boundary: below 750px the drawer carries these links */
  @media screen and (max-width: 749px) {
    .header-secondary {
      display: none;
    }
  }

  .header-secondary__list {
    display: flex;
    height: 100%;
  }

  .header-secondary__item {
    /* deliberately NOT positioned: the card panels anchor to the header row
       (.header__row--top, the nearest positioned full-width ancestor), so
       they attach flush under the header and move with it */
    display: flex;
    align-items: stretch;
  }

  .header-secondary__link {
    display: flex;
    align-items: center;
    padding-inline: calc(var(--gap-lg) / 2);
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight, 500);
    font-size: 0.875rem;
    color: var(--color-foreground);
    text-decoration: none;
    white-space: nowrap;
  }

  .header-secondary__link:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  }

  .header-secondary__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--layer-header-menu, 12);
    min-width: 240px;
    padding: 10px 18px;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-border-rgb) / var(--opacity-25, 0.25));
    box-shadow: 0 10px 30px rgb(0 0 0 / 6%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }

  .header-secondary__item.is-open .header-secondary__panel,
  .header-secondary__item:focus-within .header-secondary__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .header-secondary__panel-link {
    display: block;
    padding-block: 7px;
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    color: var(--color-foreground);
    text-decoration: none;
    white-space: nowrap;
  }

  .header-secondary__panel-link:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  }

  /* ---- full-width image-card panel (NK Inspiration / Pro Konto) ----
     Anchored to .header__row--top (positioned, full-width): top 100% sits the
     panel flush under the header bar and it scrolls/animates with it. fixed
     positioning was hijacked by the header's translateY (transformed ancestor
     becomes the containing block), which detached the panel intermittently. */
  .header-secondary__cardpanel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--layer-header-menu, 12);
    background: var(--color-background);
    border-top: 1px solid rgb(var(--color-border-rgb) / var(--opacity-25, 0.25));
    border-bottom: 1px solid rgb(var(--color-border-rgb) / var(--opacity-25, 0.25));
    padding: 34px var(--page-margin, 32px) 30px;
    opacity: 0;
    visibility: hidden;
    /* the open/close grace period lives in JS now (see the <script> above);
       this transition is just the visual fade, timed so visibility snaps to
       hidden right as the fade finishes rather than mid-fade */
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
    /* PERF (2026-08-02): `visibility: hidden` alone still leaves this subtree
       IN LAYOUT, sitting at top:100% of the header -- i.e. just below the
       fold line, comfortably inside the browser's lazy-load threshold. So the
       `loading="lazy"` on the card images below never deferred anything, and
       every page shipped 2.48MB of mega-menu photography nobody opened (2.09MB
       on mobile, where this panel cannot even be opened -- the drawer replaces
       it). `content-visibility: hidden` skips rendering the subtree entirely,
       which IS enough to keep lazy images deferred until the panel opens.
       Paired with contain-intrinsic-size so the skipped subtree still reports
       a sane size and nothing above it reflows. */
    content-visibility: hidden;
    contain-intrinsic-size: auto 420px;
  }

  /* invisible bridge over the strip between the link row's bottom and the
     header's bottom edge, so the pointer never leaves the item on the way
     down (nothing clickable lives in that strip) */
  .header-secondary__cardpanel::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 18px;
  }

  .header-secondary__item.is-open .header-secondary__cardpanel,
  .header-secondary__item:focus-within .header-secondary__cardpanel {
    opacity: 1;
    visibility: visible;
    /* must be released alongside visibility, or the panel opens empty */
    content-visibility: visible;
    transition: opacity 0.1s ease, visibility 0s;
  }

  .header-secondary__cardpanel-inner {
    display: flex;
    gap: 56px;
    align-items: flex-start;
  }

  /* Justified row (Nordic Knots): each card flex-grows by its --ar so widths
     vary but share one height and fill 100% of the row. */
  .header-secondary__cards {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
  }

  .header-secondary__cards > li {
    flex: var(--ar, 1) 1 0;
    min-width: 0;
  }

  .header-secondary__card {
    display: block;
    width: 100%;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .header-secondary__card-media {
    display: block;
    height: 340px;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    margin-bottom: 10px;
  }

  .header-secondary__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .header-secondary__card:hover .header-secondary__card-media img {
    transform: scale(1.03);
  }

  .header-secondary__card-label {
    font-size: 0.875rem;
  }

  .header-secondary__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
  }

  .header-secondary__foot .jr-mega-help {
    margin-top: 0;
  }

  .header-secondary__login {
    display: inline-block;
    padding: 13px 44px;
    background: rgb(var(--color-foreground-rgb));
    color: rgb(var(--color-background-rgb));
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .header-secondary__login:hover {
    opacity: 0.85;
  }

  .header-secondary__cardpanel .jr-mega-help {
    margin-top: 24px;
  }

  /* drawer variant — sits in menu-drawer__utility-links above localization */
  .header-secondary-drawer {
    padding-block: var(--padding-md) var(--padding-lg);
    border-top: 1px solid rgb(var(--color-border-rgb) / var(--opacity-25, 0.25));
  }

  .header-secondary-drawer__top {
    display: block;
    padding-block: var(--padding-2xs);
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight, 500);
    font-size: 1rem;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .header-secondary-drawer__child {
    display: block;
    padding-block: var(--padding-3xs);
    padding-inline-start: var(--padding-md);
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
    text-decoration: none;
  }
/* END_SNIPPET:header-secondary-nav */

/* START_SNIPPET:jr-card-meta (INDEX:232) */
/* name (left) + price (right) share the top row, material wraps under name */
  .jr-cardmeta__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .jr-cardmeta__link {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  /* name: black, light weight, 20% larger than the material line below it */
  .jr-cardmeta__name {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.975rem;
    font-weight: 300;
    line-height: 1.25;
    color: var(--color-foreground);
  }

  .jr-cardmeta__price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-body--family);
    font-size: 0.975rem;
    font-weight: 300;
    line-height: 1.25;
    color: var(--color-foreground);
  }

  /* Mobile: a right-hand price column steals width from the name, which reads
     as a badly cramped headline on long names (worst on Decorative, Jacob
     2026-08-01). Desktop's name+price same-row layout stays as-is -- this only
     drops the price to its own left-aligned line below name+material. */
  @media screen and (max-width: 749px) {
    .jr-cardmeta__top {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

    .jr-cardmeta__price {
      text-align: left;
    }
  }

  /* the price snippet wraps its output; flatten spacing and inherit our size */
  .jr-cardmeta__price [ref="priceContainer"] {
    margin: 0;
  }

  .jr-cardmeta__price .price,
  .jr-cardmeta__price .price-item {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
  }

  /* hide the standalone Horizon price block wherever the card-meta renders its
     own inline price, so there is exactly one price per card */
  .product-grid__card:has(.jr-cardmeta__top) > product-price {
    display: none;
  }

  /* material: thin weight, dark grey; the name is sized 20% larger than this */
  .jr-cardmeta__material {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    font-weight: 200;
    line-height: 1.3;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .jr-cardmeta__dots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
  }

  .jr-cdot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--jr-dot, transparent);
    /* foreground-tinted ring so dots stay delineated in dark mode too */
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.18);
    display: inline-block;
    flex: 0 0 auto;
  }

  /* this card's own colour among its shown siblings -- a heavier ring
     stands in for the colour-name text a lone dot can't otherwise convey */
  .jr-cdot--current {
    box-shadow: inset 0 0 0 1.5px var(--color-foreground);
  }

  a.jr-cdot {
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease;
  }

  /* the visible dot is 11px; give clicks a forgiving target so a near-miss
     doesn't fall through to the card (larger still on touch) */
  a.jr-cdot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
  }

  @media (pointer: coarse) {
    a.jr-cdot::after {
      inset: -10px;
    }
  }

  a.jr-cdot:hover {
    transform: scale(1.18);
  }

  /* collection grid images sit edge-to-edge (thin 2px gutter); inset the text
     block below each image so a card's text never touches the neighbour's */
  .product-grid-container .jr-cardmeta__top,
  .product-grid-container .jr-cardmeta__dots {
    padding-inline: 10px;
  }
/* END_SNIPPET:jr-card-meta */

/* START_SNIPPET:jr-cart-shipping-bar (INDEX:234) */
.jr-shipbar {
    padding: var(--padding-md, 14px) var(--cart-drawer-padding, 20px);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .jr-shipbar__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: var(--font-size--sm, 0.8125rem);
    color: var(--color-foreground);
  }

  .jr-shipbar--complete .jr-shipbar__label {
    font-weight: 600;
  }

  .jr-shipbar__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  .jr-shipbar__icon svg {
    width: 100%;
    height: 100%;
  }

  .jr-shipbar__track {
    height: 4px;
    border-radius: 2px;
    background: rgb(var(--color-foreground-rgb) / 0.12);
    overflow: hidden;
  }

  .jr-shipbar__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--color-foreground);
    transition: width 0.4s ease;
  }

  .jr-shipbar--complete .jr-shipbar__fill {
    background: #4a7c59;
  }
/* END_SNIPPET:jr-cart-shipping-bar */

/* START_SNIPPET:jr-localization-list (INDEX:241) */
.jr-loclist {
    min-width: 15rem;
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    padding-block: 0.35rem;
  }
  .jr-loclist__group {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .jr-loclist__group--rest:not(:empty) {
    border-top: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / 0.12);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
  }
  .jr-loclist__form { display: block; }
  .jr-loclist__row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
  }
  button.jr-loclist__row:hover,
  button.jr-loclist__row:focus-visible {
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .jr-loclist__row.is-current {
    opacity: 0.45;
    cursor: default;
  }
  .jr-loclist__sep {
    opacity: 0.4;
    margin-inline: 0.4em;
  }
  /* comfortable tap targets inside the mobile drawer */
  .menu-drawer__submenu .jr-loclist { min-width: 0; max-height: none; }
  .menu-drawer__submenu .jr-loclist__row { padding: 0.75rem var(--menu-drawer-gap, 1.5rem); }
/* END_SNIPPET:jr-localization-list */

/* START_SNIPPET:jumbo-text (INDEX:250) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:253) */
.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:254) */
/* 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__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:255) */
.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:mega-menu-list (INDEX:256) */
/* Featured product cards in the mega menu: a slight zoom on hover instead
     of the secondary-image flip (resource-card's own image_hover feature,
     which stays available for other callers like predictive search). */
  .mega-menu__content-list--products .resource-card__media {
    overflow: hidden;
  }

  .mega-menu__content-list--products .resource-card__image {
    transition: transform 0.4s ease;
  }

  .mega-menu__content-list--products .resource-card:hover .resource-card__image,
  .mega-menu__content-list--products .resource-card:focus .resource-card__image {
    transform: scale(1.03);
  }
/* END_SNIPPET:mega-menu-list */

/* START_SNIPPET:overlay (INDEX:260) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:261) */
.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:262) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX: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(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX: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:product-badges-styles (INDEX:269) */
.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);
  }

  /* JR, 2026-08-05: merchandising badge (e.g. "Best seller"), sitting
     directly on the product photo -- studio backgrounds run from pale
     beige to near-black across the range, so a solid fill would either
     fight the photo or disappear into it depending on the colourway.
     First attempt tied the tint to --color-background-rgb (the SITE's
     light/dark mode) -- wrong signal, since this sits on a photo whose
     brightness has nothing to do with which mode the site is in. Same
     fixed recipe as .jr-lph2__card on the landing hero instead (matches
     sonofatailor.com's own announcement bar, checked live): a dark tint
     regardless of site theme, blurred, white text -- legible against any
     photo brightness because the tint+blur do the work, not a contrast
     swap (Jacob, 2026-08-05: "transparent like the add to cart on the
     landing page"). */
  .product-badges__badge--frosted {
    background: rgb(0 0 0 / 0.2);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: #ffffff;
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:270) */
.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 */

/* START_SNIPPET:product-grid (INDEX:271) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .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:272) */
.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-gallery-content-styles (INDEX:273) */
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:274) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

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

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

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

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

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

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:275) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:276) */
.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:277) */
#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:279) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--quick-add-background, var(--color-background));
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:282) */
.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__material {
    font-size: var(--font-size--body-sm, 0.8125rem);
    line-height: 1.3;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text, 0.58));
  }

  /* Mega-menu featured product cards: match the collection-page card's type
     treatment (jr-card-meta.liquid) instead of the generic .paragraph preset,
     then dial the title back a touch and clarify the material grey. */
  .resource-card--megamenu .resource-card__title {
    font-family: var(--font-body--family);
    font-size: 0.975rem;
    font-weight: 300;
    line-height: 1.25;
    color: rgb(var(--color-foreground-rgb) / 0.88);
  }

  .resource-card--megamenu .resource-card__material {
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .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:283) */
.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:284) */
.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:285) */
.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-modal (INDEX:288) */
/* 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:289) */
.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) {
      /* JR, 2026-08-05: this rule (not the one in sections/header.liquid --
         that one loses the specificity fight against this attribute-
         selector rule every time) is the ACTUAL thing controlling the gap
         before Search. It used to just pull search left by the header's
         flat inline padding, back when the nav words sat with zero gap
         between them. Now that Bedroom/Bathroom/Fragrance carry a real
         0.75rem gap, cancel the column's own flex gap (clamp(1.75rem, 3vw,
         3rem)) and substitute that same 0.75rem so Search reads as one
         more word in the row, not a detached icon at its own distance. */
      margin-inline-start: calc(0.75rem - clamp(1.75rem, 3vw, 3rem) - 2px);
      margin-inline-end: 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;
    }

    /* JR, 2026-08-05: THIS rule, not the plain .search-action one above, is
       what actually reaches the real element -- actions_display_style:
       "text" puts BOTH .search-action and .search-action--text on the same
       node, and at equal specificity (one attribute selector + two classes
       each) the rule appearing later in the cascade wins regardless of what
       the earlier one says. This flatly zeroing margin-inline silently ate
       three different fixes to the .search-action rule above before this
       one was found -- keep the two in sync. The extra flat -2px (beyond
       cancelling the column's clamp() gap) is empirical: the real measured
       gap ran 2px wider than the math alone predicted, most likely a
       residual edge from overflow-list's shadow-root layout that isn't
       reachable to fix at its source (see header.liquid). */
    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline-start: calc(0.75rem - clamp(1.75rem, 3vw, 3rem) - 2px);
      margin-inline-end: calc(var(--padding-lg) * -1);
    }

    /* JR, 2026-08-05: the gap before Search LOOKED ~10px tighter than the gaps
       between Bedroom/Bathroom/Fragrance even though every margin rule above
       had already equalised it. Measuring the element boxes says they're
       correct -- all four sit a uniform 12px apart. Measuring the rendered
       TEXT is what exposes the real bug: .menu-list__link-title (see
       blocks/_header-menu.liquid) carries padding-inline: calc(var(--gap-xl)
       / 2), so between two nav words the visible space is 12 + 10 + 10 = 32px,
       while Search -- a header-actions button, not a menu-list link, so it
       never inherited that padding -- gave only 12 + 10 + 0 = 22px.
       Every previous attempt failed because it tuned MARGIN (the box gap,
       already right) instead of the missing padding. Giving the button the
       same padding expression puts its label on the same rhythm and makes its
       click target match the words'. Deliberately padding, not margin: all
       four competing margin rules for this element (here, sections/
       header.liquid, assets/jr-tokens.css and layout/theme.liquid -- the last
       two !important) leave padding untouched, so this needs no !important
       and can't lose a specificity tie to them. Keep the expression itself in
       sync with .menu-list__link-title rather than hardcoding 10px. */
    [data-menu-style='menu'] .header__column--left .search-action--text .header-actions__action {
      padding-inline: calc(var(--gap-xl) / 2);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:290) */
.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:292) */
.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:294) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:295) */
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:296) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:298) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:300) */
.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:text-component-shimmer-styles (INDEX:308) */
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:309) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.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);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:311) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + 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-picker-styles (INDEX:324) */
/* 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;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:325) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:326) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:327) */
.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 */