/** Shopify CDN: Minification failed

Line 1743:2 Unexpected "{"
Line 1743:3 Expected identifier but found "%"
Line 1744:61 Expected identifier but found whitespace
Line 1744:71 Unexpected bad string token
Line 1744:97 Unterminated string token
Line 1746:3 Expected identifier but found "%"
Line 6299:2 Unexpected "{"
Line 6299:3 Expected identifier but found "%"
Line 6300:30 Unexpected "("
Line 6301:75 Expected identifier but found "%"

**/
/* START_SECTION:header (INDEX:15) */
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
        (and the inline search is closed — an open search panel needs the solid colors) */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(.menu-list__list-item.menu-item-expanded)):not(:has(.r69-search.is-open)) .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.
       (Not while the inline search is open — the header goes solid then.) */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:hover)
      ):not(:has(.menu-list__list-item.menu-item-expanded)):not(:has(.r69-search.is-open))
      .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(.r69-search.is-open),
    &:has(.menu-list__link:hover),
    &:has(.menu-list__list-item.menu-item-expanded),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link: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;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }

    /* Open inline search: also raise the solid underlay — the color reset above is not
       enough on a transparent header (icons flip but the photo stays behind the rows). */
    &:has(.r69-search.is-open) {
      --closed-underlay-height: 100%;
    }
  }

  /* 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;
    /* Owner: the scroll-up reveal must be INSTANT, not a fade. Snap opacity to 1 with no transition
       when becoming active; the hide (→ idle) still fades via .header[data-sticky-state] above. */
    transition: none;
  }

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

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

  /* The transparent header's solid underlay grows 0 -> full height when it turns sticky; the slow
     height transition made that white fill visibly "drive in" behind the (now instant) content on
     scroll-up. Snap it too. The mega-menu hover expansion keeps its transition — it is not in the
     active sticky state, so this override does not touch it. */
  .header[data-sticky-state='active'] .header__underlay-closed {
    transition: none;
  }

  /* ================================
     * 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]:hover),
    &:has(.menu-list__list-item.menu-item-expanded),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:hover) {
      /* 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;
  }

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

      /* Second grid row for the search: on a phone it is a full-width field, not an icon,
         so it cannot share the bar with the logo. */
      grid-template-areas:
        'leftA leftB center rightA rightB'
        'search search search search search';
      grid-column: span 3;
      gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

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

      /* All three of Horizon's search placements collapse to the same row here. Flush on top —
         no gap between the header bar and the field (owner's spec) — and page-gutter inline so
         the field lines up with the content below. */
      &:not(:has(header-actions)) .search-action,
      &:not(:has(shopify-account)) .search-action,
      .search-action {
        grid-area: search;
        width: 100%;
        padding-block: 0 8px;
        padding-inline: var(--page-margin) calc(var(--page-margin) - var(--padding-3xs));
      }

      /* The actions cluster dissolves into the grid: the account icon takes the old search
         slot beside the burger, wishlist and cart keep the right-hand bookends. */
      header-actions {
        display: contents;
      }

      header-actions .account-button {
        grid-area: leftB;
      }

      header-actions .header-actions__wishlist {
        grid-area: rightA;
      }

      header-actions > button.header-actions__action {
        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);

    /* Second grid row for the search: on a phone it is a full-width field, not an icon,
       so it cannot share the bar with the logo. */
    grid-template-areas:
      'leftA leftB center rightA rightB'
      'search search search search search';
    grid-column: span 3;
    gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

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

    /* All three of Horizon's search placements collapse to the same row here. Flush on top —
       no gap between the header bar and the field (owner's spec) — and page-gutter inline so
       the field lines up with the content below. */
    &:not(:has(header-actions)) .search-action,
    &:not(:has(shopify-account)) .search-action,
    .search-action {
      grid-area: search;
      width: 100%;
      padding-block: 0 8px;
      /* The gutter follows the MENU here, not the viewport — that is the whole point of this
         duplicated block. --page-margin steps 16px -> 40px at 750px, but the burger and the cart
         keep a constant 16px of padding at every width, so with var(--page-margin) the row sat
         24px right of the burger and 27px short of the cart as soon as a touch device was wider
         than 749px. 16px is exactly what --page-margin resolves to on a phone, where this row is
         already correct — so below 750px nothing changes at all. */
      padding-inline: 16px calc(16px - var(--padding-3xs));
    }

    /* The actions cluster dissolves into the grid: the account icon takes the old search
       slot beside the burger, wishlist and cart keep the right-hand bookends. */
    header-actions {
      display: contents;
    }

    header-actions .account-button {
      grid-area: leftB;
    }

    header-actions .header-actions__wishlist {
      grid-area: rightA;
    }

    header-actions > button.header-actions__action {
      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 .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:r69-category-showcase (INDEX:41) */
.r69cat__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .r69cat__head {
    text-align: center;
  }

  .r69cat__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .r69cat__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.08;
    color: rgb(var(--color-foreground-rgb) / 1);
  }

  /* Quiet doorway to the /collections hub, right under the band heading. */
  .r69cat__hublink {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgb(var(--color-foreground-rgb) / 0.8);
    transition: color 0.25s ease;
  }

  .r69cat__hublink::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 0.62em;
    margin-inline-start: 0.7em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
  }

  .r69cat__hublink:hover {
    color: rgb(var(--color-foreground-rgb) / 1);
  }

  .r69cat__hublink:hover::after {
    transform: translateX(4px);
  }

  /* The preview sets the height (a definite 4:5 box) and the rows distribute themselves over
     exactly that height, so the two columns always end on the same line whatever the count.
     That also means the preview's WIDTH is what makes the section tall: at a plain 46% the
     page-width column of a 2K/4K screen produced a 1140-1740px-wide preview and a section far
     taller than the screen. Capping only this column keeps the section itself on the theme's
     full page-width — the list simply takes the width the preview gives up. */
  .r69cat__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(46%, 660px);
    gap: 56px;
    align-items: stretch;
  }

  .r69cat__list {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .r69cat__row {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    gap: 18px;
    /* Kept low on purpose: the preview's 4:5 box is what should set the row height. If the rows'
       own minimum ever won, the preview would be stretched past 4:5 and the photo would crop.
       Measured — at 810px, the narrowest desktop, rows land at 56px with the ratio still 0.800. */
    min-height: 48px;
    padding-block: 10px;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    text-decoration: none;
    color: inherit;
  }

  .r69cat__row:last-child {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .r69cat__num {
    flex: none;
    width: 1.6em;
    font-family: var(--font-body--family);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: rgb(var(--color-foreground-rgb) / 0.4);
    transition: color 0.3s ease;
  }

  .r69cat__name {
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: 0.005em;
    color: rgb(var(--color-foreground-rgb) / 0.42);
    white-space: nowrap;
    transition: color 0.3s ease;
  }

  /* Grows out of the name towards the preview on the active row, exactly like the reference. */
  .r69cat__rule {
    flex: 1;
    height: 1px;
    min-width: 0;
    background: rgb(var(--color-foreground-rgb) / 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .r69cat__row.r69cat-current .r69cat__num,
  .r69cat__row.r69cat-current .r69cat__name {
    color: rgb(var(--color-foreground-rgb) / 1);
  }

  .r69cat__row.r69cat-current .r69cat__rule {
    transform: scaleX(1);
  }

  .r69cat__tile,
  .r69cat__mcta {
    display: none;
  }

  .r69cat__panel {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #26221e;
  }

  .r69cat__pane {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transition: opacity 0.5s ease;
  }

  .r69cat__pane.r69cat-current {
    opacity: 1;
    pointer-events: auto;
  }

  .r69cat__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .r69cat__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62));
  }

  .r69cat__cap {
    position: absolute;
    inset-inline-start: 28px;
    inset-block-end: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #f5f2ec;
  }

  .r69cat__cap-title {
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1.1;
  }

  .r69cat__cta {
    font-family: var(--font-body--family);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .r69cat__cta::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 0.62em;
    margin-inline-start: 0.7em;
    background: currentColor;
    /* Long thin arrow, drawn as a mask so it inherits the caption colour. */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
  }

  @media (hover: hover) {
    .r69cat__pane:hover .r69cat__cta::after {
      transform: translateX(4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .r69cat__rule,
    .r69cat__pane,
    .r69cat__num,
    .r69cat__name,
    .r69cat__cta::after,
    .r69cat__hublink,
    .r69cat__hublink::after {
      transition: none;
    }
  }

  /* Phones have no hover to drive the preview, so the preview column goes and the rows become a
     swipeable strip of cards — the same card the preview is, image with the number, name and
     link over a scrim. Cards are sized so roughly 1.2 fit the screen: the next one always peeks
     in, which is what tells you the strip scrolls. */
  @media screen and (max-width: 749px) {
    .r69cat__inner {
      gap: 24px;
    }

    .r69cat__body {
      display: block;
    }

    .r69cat__panel {
      display: none;
    }

    .r69cat__list {
      flex-direction: row;
      gap: 12px;
      overflow-x: auto;
      /* Same guard the other rails carry: without it the vertical axis computes to `auto`, and any
         pixel of vertical overflow turns the rail into a vertical scroller that eats the page's
         swipe. Measured 0 here today — this keeps it that way. */
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      /* Without this the snap pulls the first card off the start of the track. */
      scroll-padding-inline: 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    /* Only a mouse can drag the rail, so only a mouse is offered the grab cursor. */
    @media (pointer: fine) {
      .r69cat__list {
        cursor: grab;
      }
    }

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

    .r69cat__row {
      position: relative;
      display: block;
      flex: 0 0 80%;
      aspect-ratio: 4 / 5;
      min-height: 0;
      padding-block: 0;
      border-block-start: 0;
      overflow: hidden;
      border-radius: 4px;
      background: #26221e;
      scroll-snap-align: start;
    }

    .r69cat__row:last-child {
      border-block-end: 0;
    }

    .r69cat__tile {
      display: block;
      position: absolute;
      inset: 0;
    }

    .r69cat__tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .r69cat__tscrim {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62));
    }

    .r69cat__rule {
      display: none;
    }

    .r69cat__num {
      position: absolute;
      inset-inline-start: 20px;
      inset-block-end: 58px;
      width: auto;
      font-size: 0.68rem;
      color: rgb(245 242 236 / 0.75);
    }

    .r69cat__name {
      position: absolute;
      inset-inline-start: 52px;
      inset-block-end: 50px;
      font-size: 1.5rem;
      color: #f5f2ec;
    }

    .r69cat__row.r69cat-current .r69cat__num {
      color: rgb(245 242 236 / 0.75);
    }

    .r69cat__row.r69cat-current .r69cat__name {
      color: #f5f2ec;
    }

    .r69cat__mcta {
      display: block;
      position: absolute;
      inset-inline-start: 20px;
      inset-block-end: 22px;
      font-family: var(--font-body--family);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #f5f2ec;
    }

    .r69cat__mcta::after {
      content: '';
      display: inline-block;
      width: 1.5em;
      height: 0.62em;
      margin-inline-start: 0.7em;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    }
  }
/* END_SECTION:r69-category-showcase */
/* START_SECTION:r69-divider (INDEX:45) */
.r69div__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    /* The rhombus is a 7px square turned 45°, so its box is 7 × √2 ≈ 9.9px and it overhangs this
       7px-tall strip by ~1.45px top and bottom. That is fine over a transparent neighbour, but a
       section that paints its own background starts exactly at this strip's bottom edge and covers
       the lower tip — which is what clipped the rhombus between the reviews and the recently-viewed
       rows. Own stacking context, so the divider draws above whatever follows it and no future
       neighbour can shave it again. */
    position: relative;
    z-index: 1;
  }

  /* Strongest at the centre, gone by the edges — a full-strength rule reads as a hard cut. */
  .r69div__line {
    flex: 1 1 auto;
    height: 1px;
    min-width: 0;
  }
  .r69div__line:first-child {
    background: linear-gradient(to right, transparent, rgb(var(--color-foreground-rgb) / 0.3));
  }
  .r69div__line:last-child {
    background: linear-gradient(to left, transparent, rgb(var(--color-foreground-rgb) / 0.3));
  }

  .r69div__mark {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.45);
  }
/* END_SECTION:r69-divider */
/* START_SECTION:r69-freeship-bar (INDEX:46) */
.r69-topbar {
    display: block;
    background: var(--r69-topbar-bg);
    color: var(--r69-topbar-text);
  }

  .r69-topbar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px var(--page-margin, 16px);
  }

  .r69-topbar__msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }

  .r69-topbar__ic {
    display: inline-flex;
    flex: 0 0 auto;
    opacity: 0.85;
  }

  .r69-topbar__track {
    width: min(320px, 70vw);
    height: 3px;
    border-radius: 999px;
    background: var(--r69-topbar-track);
    overflow: hidden;
  }

  .r69-topbar__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--r69-topbar-fill);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .r69-topbar__fill {
      transition: none;
    }
  }
/* END_SECTION:r69-freeship-bar */
/* START_SECTION:r69-gifting (INDEX:47) */
.r69gift__inner {
    display: flex;
    flex-direction: column;
  }

  .r69gift__head {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
  }

  .r69gift__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .r69gift__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    line-height: 1.04;
    font-size: clamp(2rem, 3.4vw, 3rem);
    color: var(--color-foreground);
    text-wrap: balance;
  }

  .r69gift__tiles {
    display: flex;
    gap: clamp(12px, 1.4vw, 20px);
  }
  .r69gift__tiles::-webkit-scrollbar { display: none; }

  .r69gift__tile {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .r69gift__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #26221e;
  }

  .r69gift__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }
  /* Only where hovering exists — on a phone a tap leaves this scale stuck on the tile. */
  @media (hover: hover) {
    .r69gift__tile:hover .r69gift__img { transform: scale(1.04); }
  }

  .r69gift__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.1;
    color: var(--color-foreground);
    text-align: center;
  }

  .r69gift__arrow {
    display: inline-block;
    width: 1.4em;
    height: 0.6em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.25s ease;
  }
  .r69gift__tile:hover .r69gift__arrow,
  .r69gift__viewall:hover .r69gift__arrow { transform: translateX(4px); }

  .r69gift__budget-eyebrow {
    margin: clamp(30px, 3.2vw, 46px) 0 14px;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 0.66rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* Budget cells are chips, not text rows: a real border, a pointer cursor and an arrow that is
     always visible, because the borderless FAORIA version did not read as clickable. */
  .r69gift__budget {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .r69gift__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }
  .r69gift__chip:hover {
    border-color: var(--color-foreground);
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }
  .r69gift__chip:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .r69gift__chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .r69gift__chip-label {
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.15;
    color: var(--color-foreground);
    white-space: nowrap;
  }

  .r69gift__chip-cap {
    margin-top: 2px;
    font-family: var(--font-body--family);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.66);
  }

  .r69gift__chip-arrow {
    flex: 0 0 auto;
    width: 1.5em;
    height: 0.62em;
    background: rgb(var(--color-foreground-rgb) / 0.7);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.2s ease;
  }
  .r69gift__chip:hover .r69gift__chip-arrow {
    background: var(--color-foreground);
    transform: translateX(3px);
  }

  .r69gift__viewall {
    /* Same as the tabbed section's view-all: `display: block` stretched the click zone across the
       whole page — measured 1360px of it against 189px of text — while the label sat in the middle.
       Sized to its content, centred by the auto margins. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
    margin-top: clamp(22px, 2.6vw, 36px);
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
  }

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

  @media screen and (max-width: 749px) {
    /* Tiles become a swipe rail with the next one peeking in; drag-scroll is wired by
       assets/r69-drag-scroll (project rule: any sideways rail must be draggable with a mouse). */
    .r69gift__tiles {
      overflow-x: auto;
      /* Declaring only overflow-x turns the OTHER axis into `auto` too — that is the CSS rule, not
         a choice — and this rail's content came out 1px taller than its box at 360px. One pixel is
         enough: the rail becomes a real vertical scroller, a vertical swipe goes into it instead of
         the page, and Android answers by stretching it. That is the "I pull up on the photo and the
         card stretches" report, and why it happened HERE and not on the other rails: the search and
         review rails already declare this line, this one did not. */
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      gap: 12px;
    }
    .r69gift__tile {
      /* One tile and a slice of the next, the same read as the category section at the top of the
         page (measured there: 1.3 tiles). 46% gave 2.2 — two half-size tiles side by side, which
         reads as a grid rather than a rail nobody thinks to swipe. */
      flex: 0 0 76%;
      scroll-snap-align: start;
    }
    @media (pointer: fine) {
      .r69gift__tiles { cursor: grab; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .r69gift__img,
    .r69gift__arrow,
    .r69gift__chip,
    .r69gift__chip-arrow { transition: none; }
  }
/* END_SECTION:r69-gifting */
/* START_SECTION:r69-material-story (INDEX:48) */
.r69ms__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: clamp(28px, 4vw, 72px);
  }
  .r69ms__inner--right .r69ms__media { order: 2; }

  .r69ms__media {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #26221e;
  }

  .r69ms__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .r69ms__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .r69ms__eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .r69ms__heading {
    margin: 0 0 18px;
    font-family: var(--font-heading--family);
    font-weight: 500;
    line-height: 1.04;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    color: var(--color-foreground);
    text-wrap: balance;
  }

  .r69ms__body {
    font-family: var(--font-body--family);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.65;
    /* 0.66 ink, the contrast floor this project settled on for muted body copy. */
    color: rgb(var(--color-foreground-rgb) / 0.66);
    max-width: 38ch;
    margin: 0 0 28px;
  }
  .r69ms__body p { margin: 0 0 0.8em; }
  .r69ms__body p:last-child { margin-bottom: 0; }

  .r69ms__pillars { border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.18); }

  .r69ms__pillar {
    padding: 15px 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
  }

  .r69ms__pillar-label {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    line-height: 1.1;
    color: var(--color-foreground);
  }

  .r69ms__pillar-cap {
    margin: 3px 0 0;
    font-family: var(--font-body--family);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgb(var(--color-foreground-rgb) / 0.66);
  }

  .r69ms__cta {
    /* `inline-block` does not survive here: the parent is a flex column, so the link is a flex item
       and stretched to the column's full 651px while the label was 164px — a click anywhere on that
       line followed it. align-self keeps it at the text's edge and fit-content sizes it to itself. */
    display: inline-block;
    align-self: start;
    width: fit-content;
    margin-top: 30px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .r69ms__cta:hover .r69ms__arrow { transform: translateX(4px); }

  .r69ms__arrow {
    display: inline-block;
    width: 1.6em;
    height: 0.62em;
    margin-inline-start: 0.7em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
  }

  /* Desktop: the image is tied to the text block's height and reaches 40px past it top and bottom,
     which is what gives the band its editorial feel. */
  @media screen and (min-width: 750px) {
    .r69ms__media { margin-block: -40px; }

    /* …and the block gets those 40px back, so the band keeps its bleed without eating the page
       rhythm. Without this the image starts 32px below the section edge while every other section
       starts at 72px, and this band's gaps read as 31px against 71px everywhere else. Measured,
       not guessed. Compensating here rather than in the padding setting because the bleed itself
       only exists at this breakpoint, and the setting cannot be made conditional. */
    .r69ms__inner { margin-block: 40px; }
  }

  @media screen and (max-width: 749px) {
    .r69ms__inner,
    .r69ms__inner--right {
      grid-template-columns: 1fr;
      gap: clamp(22px, 6vw, 32px);
    }
    .r69ms__inner--right .r69ms__media { order: 0; }
    .r69ms__media { aspect-ratio: 4 / 3; }
  }

  @media (prefers-reduced-motion: reduce) {
    .r69ms__arrow { transition: none; }
  }
/* END_SECTION:r69-material-story */
/* START_SECTION:r69-recently-viewed (INDEX:54) */
/* Vertical rhythm comes from the section's own padding settings (the theme's `spacing-style`,
     same as every other section), NOT from a hardcoded clamp here — the home page runs on 72px
     while the PDP rhythm is 48, and a fixed value in CSS made this section the odd one out. */
  .r69rv__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 clamp(20px, 3vw, 34px);
  }
  .r69rv__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.04;
    letter-spacing: 0.004em;
    color: rgb(var(--color-foreground-rgb));
  }
  .r69rv__nav { display: flex; gap: 8px; }
  .r69rv__nav[hidden] { display: none; }
  .r69rv__navbtn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.5);
    border-radius: 4px;
    background: transparent;
    color: rgb(var(--color-foreground-rgb));
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  }
  .r69rv__navbtn svg { width: 17px; height: 17px; }
  /* Fill on a POINTER hover and on the actual press — never sticky. On touch, :hover sticks
     after a tap until the next tap elsewhere, which left the arrow painted solid after the
     scroll (owner's screenshot). :active covers the press-time feedback on every device. */
  @media (hover: hover) {
    .r69rv__navbtn:hover:not(:disabled) {
      background: rgb(var(--color-foreground-rgb));
      color: var(--color-background);
    }
  }
  .r69rv__navbtn:active:not(:disabled) {
    background: rgb(var(--color-foreground-rgb));
    color: var(--color-background);
  }
  .r69rv__navbtn:disabled { opacity: 0.3; cursor: default; }

  /* Single-row carousel; cards per view mirror the collection grid (4-cols preset):
     1 <400px, 2 to 999px, 3 to 1199px, 4 from 1200px; gaps 12px mobile / 16px desktop.
     The track carries the theme's `product-grid` class so every `.product-grid …` card rule
     (gallery arrow visibility, zeroed h3/p margins, …) applies exactly like on a collection —
     the .r69rv__track.product-grid specificity flips its display:grid back to a flex row.
     Items stretch to the row height and `.product-card { height: 100% }` fills, so card
     bottoms line up like a collection row. */
  .r69rv__track.product-grid {
    --r69rv-gap: 8px;
    --r69rv-cols: 2;
    display: flex;
    align-items: stretch;
    gap: var(--r69rv-gap);
    /* Room for the hover lift and the shadow that comes with it. A scroller clips whatever leaves
       its box, so a card rising 4px had its top cut off and its shadow sheared along a hard line.
       The padding gives that room inside the scroller and the negative margin takes it back out of
       the layout, so nothing around the rail moves. Also declares overflow-y, which would otherwise
       compute to `auto` and make the rail a vertical scroller — the trap the gifts rail fell into. */
    /* Asymmetric on purpose. Upwards the card needs room for the 4px lift and barely any shadow
       (the hover shadow is offset 14px DOWN with a 30px blur, so it reaches ~1px above the box).
       Downwards it needs the whole 14 + 30, less the 4px the card rose — hence 44 against 20, and
       20 was where the hard line under the hovered card was still coming from. */
    padding-block: 20px 44px;
    margin-block: -20px -44px;
    margin-inline: 0;
    padding-inline: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .r69rv__track::-webkit-scrollbar { display: none; }

  .r69rv__item {
    flex: 0 0 calc((100% - (var(--r69rv-cols) - 1) * var(--r69rv-gap)) / var(--r69rv-cols));
    min-width: 0;
    scroll-snap-align: start;
  }

  /* ---- skeleton cards (space reservation until the real cards mount) ---- */
  .r69rv__skel { display: flex; flex-direction: column; }
  .r69rv__skel-media {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  /* fixed text-area height == the real card's text area (measured 168px), so the
     skeleton row reserves the exact final height and the swap causes no shift */
  .r69rv__skel-body {
    box-sizing: border-box;
    height: 168px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-block: 14px 6px;
  }
  .r69rv__skel-line {
    height: 13px;
    border-radius: 3px;
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
  .r69rv__skel-line--sub { height: 10px; background: rgb(var(--color-foreground-rgb) / 0.06); }
  .r69rv__skel-swatch {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
  @media (prefers-reduced-motion: no-preference) {
    .r69rv__skel-media { animation: r69rv-skel-pulse 1.6s ease-in-out infinite; }
    @keyframes r69rv-skel-pulse {
      50% { opacity: 0.55; }
    }
  }

  {%- comment -%}
    The sub-400px override that forced a single card is gone: the track's own default is 2, which
    is what every product grid in the theme now shows on a phone.
  {%- endcomment -%}
  @media screen and (min-width: 750px) {
    .r69rv__track.product-grid { --r69rv-gap: 16px; }
  }
  @media screen and (min-width: 1000px) {
    .r69rv__track.product-grid { --r69rv-cols: 3; }
  }
  @media screen and (min-width: 1200px) {
    .r69rv__track.product-grid { --r69rv-cols: 4; }
  }
  @media (hover: hover) and (min-width: 750px) {
    .r69rv__track.product-grid { cursor: grab; }
  }
/* END_SECTION:r69-recently-viewed */
/* START_SECTION:r69-shop-the-look (INDEX:56) */
/* Capped so the two columns stay a pair. At page-width on a wide monitor the look block
     would otherwise sprawl and the photo alone would run past 1100px tall. */
  /* No max-width here on purpose: the section's width is the Layout setting's business
     (page-width / full-width) and must match its neighbours. The photo is kept to a sane size by
     capping its GRID COLUMN instead — see .r69stl__look. */
  .r69stl__inner {
    display: block;
    width: 100%;
  }

  .r69stl__head {
    text-align: center;
    margin-bottom: clamp(20px, 2.4vw, 32px);
  }

  .r69stl__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .r69stl__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 500;
    line-height: 1.04;
    font-size: clamp(2rem, 3.4vw, 3rem);
    color: var(--color-foreground);
    text-wrap: balance;
  }

  /* Tabs wrap; they never become a sideways rail, so nothing is hidden off-screen. */
  .r69stl__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: clamp(24px, 3vw, 40px);
  }

  .r69stl__tab {
    padding: 9px 18px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  }
  .r69stl__tab:hover {
    border-color: var(--color-foreground);
    color: var(--color-foreground);
  }
  .r69stl__tab.r69stl-current {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }
  .r69stl__tab:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Only the current look is in the layout at all, so the other photos are never fetched. */
  /* The photo column is clamped rather than proportional. At full page width on a wide monitor a
     0.92fr column would make the shot ~890px wide and 1100px tall, towering over the rows; the
     section itself still spans whatever the Layout setting says. */
  .r69stl__look {
    display: none;
    grid-template-columns: clamp(260px, 32vw, 560px) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 60px);
    align-items: stretch;
  }
  .r69stl__look.r69stl-current {
    display: grid;
  }

  /* `align-self: start` keeps the photo at exactly 4:5. It must never be stretched: the pins are
     positioned as a percentage of this box, so any crop would slide them off their piece. The
     LIST is what stretches to match (see .r69stl__list), which is how the two columns end level. */
  .r69stl__media {
    position: relative;
    align-self: start;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #26221e;
  }

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

  /* Small, and set in the BODY face with tabular figures. The heading face is Cormorant, whose
     old-style numerals sit off the baseline and read as crooked at this size. The pin is placed
     BESIDE its piece, never on top of it — a marker that hides the jewellery defeats the point. */
  .r69stl__pin {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
    transition: transform 0.2s ease;
  }
  .r69stl__pin.r69stl-lit {
    transform: translate(-50%, -50%) scale(1.22);
  }

  /* The rows share whatever height the photo needs, so the column ends level with it. */
  .r69stl__list {
    display: flex;
    flex-direction: column;
  }

  .r69stl__piece {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    padding: clamp(12px, 1.1vw, 18px) 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .r69stl__num {
    flex: 0 0 auto;
    width: clamp(26px, 2vw, 32px);
    height: clamp(26px, 2vw, 32px);
    border-radius: 50%;
    background: var(--color-foreground);
    color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body--family);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1;
  }

  .r69stl__pl {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  .r69stl__thumb {
    flex: 0 0 auto;
    width: clamp(58px, 5.6vw, 94px);
    height: clamp(58px, 5.6vw, 94px);
    border-radius: 4px;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

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

  .r69stl__info {
    min-width: 0;
  }

  .r69stl__nm {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    line-height: 1.16;
    color: var(--color-foreground);
  }
  .r69stl__pl:hover .r69stl__nm {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }

  .r69stl__pr {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body--family);
    font-size: clamp(0.78rem, 0.95vw, 0.95rem);
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
  /* reduced price in the brand sale tone, like the cards and the product page */
  .r69stl__now { color: var(--r69stl-sale); }

  .r69stl__pr b {
    font-weight: 500;
  }
  .r69stl__pr s {
    opacity: 0.55;
    margin-left: 5px;
  }

  /* One height for the dropdown, the flags and the "+", so the row's controls line up. */
  .r69stl__ctl {
    --r69stl-ctl: 36px;
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  .r69stl__optwrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
  }

  .r69stl__optlabel {
    font-family: var(--font-body--family);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* The native chevron sits hard against the border and cannot be padded, so the arrow is drawn
     here instead — as a mask in currentColor, with real room to its right. */
  .r69stl__optbox {
    position: relative;
    display: inline-flex;
  }

  .r69stl__opt {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-body--family);
    font-size: 0.74rem;
    line-height: 1;
    color: var(--color-foreground);
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.28);
    border-radius: 4px;
    height: var(--r69stl-ctl);
    padding: 0 34px 0 11px;
    cursor: pointer;
    max-width: 150px;
  }
  .r69stl__opt:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .r69stl__chev {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 11px;
    height: 7px;
    transform: translateY(-50%);
    pointer-events: none;
    background: rgb(var(--color-foreground-rgb) / 0.75);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  .r69stl__flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--r69stl-ctl);
    padding: 0 10px;
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .r69stl__flag svg {
    width: 13px;
    height: 13px;
  }
  .r69stl__flag--bag {
    background: rgb(var(--color-foreground-rgb) / 0.07);
    color: rgb(var(--color-foreground-rgb) / 0.78);
  }
  .r69stl__flag--gone {
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }
  .r69stl__flag[hidden] {
    display: none;
  }

  .r69stl__add {
    flex: 0 0 auto;
    width: var(--r69stl-ctl);
    height: var(--r69stl-ctl);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.28);
    color: var(--color-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .r69stl__add svg {
    width: 15px;
    height: 15px;
  }
  .r69stl__add:hover {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }
  .r69stl__add[hidden] {
    display: none;
  }

  .r69stl__piece.r69stl-gone .r69stl__thumb,
  .r69stl__piece.r69stl-gone .r69stl__info {
    opacity: 0.5;
  }

  .r69stl__addall {
    flex: 0 0 auto;
    margin-top: clamp(16px, 1.8vw, 24px);
    width: 100%;
    cursor: pointer;
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    border-radius: 4px;
    padding: 16px 18px;
    font-family: var(--font-body--family);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: opacity 0.15s ease;
  }
  .r69stl__addall:hover {
    opacity: 0.9;
  }
  .r69stl__addall:disabled {
    opacity: 0.5;
    cursor: default;
  }
  .r69stl__addall.r69stl-busy {
    opacity: 0.6;
    pointer-events: none;
  }

  .r69stl__addlabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
  }
  .r69stl__addlabel[hidden] {
    display: none;
  }

  .r69stl__bag {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  .r69stl__sep {
    opacity: 0.6;
  }

  @media screen and (max-width: 749px) {
    .r69stl__look.r69stl-current {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(18px, 4vw, 26px);
    }
    .r69stl__piece {
      gap: 10px;
    }
    .r69stl__ctl {
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }
    .r69stl__opt {
      max-width: 108px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .r69stl__pin,
    .r69stl__tab,
    .r69stl__add,
    .r69stl__addall {
      transition: none;
    }
  }
/* END_SECTION:r69-shop-the-look */
/* START_SECTION:r69-tabbed-products (INDEX:57) */
.r69best__inner {
    display: flex;
    flex-direction: column;
  }

  .r69best__head {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
  }

  .r69best__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .r69best__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: clamp(18px, 2.4vw, 32px);
  }

  .r69best__tab {
    background: none;
    border: 0;
    padding: 0 0 4px;
    cursor: pointer;
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: clamp(1.3rem, 2.4vw, 2.1rem);
    line-height: 1.05;
    color: rgb(var(--color-foreground-rgb) / 0.38);
    border-bottom: 1.5px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .r69best__tab:hover { color: rgb(var(--color-foreground-rgb) / 0.7); }
  .r69best__tab:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; }

  /* State class is r69best-current, not is-active: names that appear inside the theme's :has()
     rules make every flip pay a document-wide style recalc. */
  .r69best__tab.r69best-current {
    color: var(--color-foreground);
    border-bottom-color: var(--color-foreground);
  }

  /* Hidden panels stay LAID OUT (stacked in one grid cell, visibility:hidden), not display:none.
     Container queries do not evaluate inside display:none subtrees, so revealing a tab flipped
     every card's narrow/wide state in one frame — and the owner caught a card whose badge kept
     the WIDE font while the narrow max-width applied: a mixed state that survives until the next
     invalidation. Laid-out-but-invisible panels have their queries settled before the reveal, so
     switching tabs changes visibility and nothing else. inert keeps the hidden panels out of tab
     order and hit-testing. */
  .r69best__panels {
    display: grid;
  }

  .r69best__panel {
    grid-area: 1 / 1;
    visibility: hidden;
  }

  .r69best__panel.r69best-current { visibility: visible; }

  /* Two cards per row on every phone, then 3 up to 1199 and 4 above — the same rhythm the
     collection grid uses (product-grid sets --mobile-columns: 2 for the "small" card size).
     FAORIA dropped to a single column under 400px; that made four cards roughly three screens
     of scrolling on a 375px phone, so the breakpoint is deliberately not carried over. */
  .r69best__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 8px column floor on phones (owner: tighter gutters, bigger cards); 1.4vw takes over from
       ~570px so wider screens keep the old rhythm */
    gap: clamp(16px, 1.6vw, 26px) clamp(8px, 1.4vw, 22px);
  }
  @media screen and (min-width: 1000px) {
    .r69best__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media screen and (min-width: 1200px) {
    .r69best__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* The item is a flex column so the CARD absorbs the grid row's height. Without this the grid
     stretched only the wrapper: the card kept its content height and every row showed ragged
     card bottoms (measured 349/366/349/349 in one row of the Atlaides tab). */
  .r69best__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .r69best__rank {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: clamp(8px, 0.9vw, 14px);
  }

  .r69best__num {
    font-family: var(--font-heading--family);
    font-size: clamp(1.4rem, 1.9vw, 1.9rem);
    line-height: 1;
    color: var(--color-foreground);
  }

  .r69best__line {
    flex: 1;
    height: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.3);
  }

  .r69best__card {
    height: auto;
    flex: 1 1 auto;
  }

  .r69best__viewall {
    /* Was `display: block`, which stretched the link across the whole section — the text sat in the
       middle but the click zone ran edge to edge, so a click anywhere on that line navigated.
       Sized to its own content and centred by the auto margins instead. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
    margin-top: clamp(22px, 2.6vw, 38px);
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .r69best__viewall:hover .r69best__arrow { transform: translateX(4px); }

  .r69best__arrow {
    display: inline-block;
    width: 1.6em;
    height: 0.62em;
    margin-inline-start: 0.7em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h21M17 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
  }

  @media screen and (max-width: 749px) {
    .r69best__tabs { gap: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .r69best__tab,
    .r69best__arrow { transition: none; }
  }
/* END_SECTION:r69-tabbed-products */
/* START_SECTION:r69-trust-band (INDEX:58) */
/* A service strip, deliberately not a promo band. Baymard's homepage benchmark found 59% of sites
     carry "ad-looking" content that shoppers scroll straight past — so: no fills, no badges, no
     colour accents. Hairline rules, one weight of ink, icons at the same stroke as the rest of the
     theme. It should read like the small print you actually want, not like an offer. */
  .r69tb {
    display: block;
    border-block-start: 1px solid var(--r69tb-line);
    color: var(--r69tb-text);
  }

  .r69tb__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Hairline rules between the cells. Four separate icon-and-text groups floating in a wide row read
     as four unrelated notes; ruled columns read as one spec strip, which is what this is. */
  /* Centred, not left-aligned. Each column is ~280px wide while the copy is a third of that, so
     hugging the left edge left every cell with a pool of dead space to its right and made the row
     read as four things dropped into a grid rather than four columns of a strip. */
  .r69tb__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: 24px;
    border-inline-start: 1px solid var(--r69tb-line);
  }

  /* Only the RULE is dropped on the first cell, never the padding. Zeroing the outer padding shifts
     that cell's content box off its column's centre — measured at 12–13px on the two outer cells —
     and with centred content that shows immediately as a row whose ends do not line up. Equal
     padding everywhere keeps all four groups on the same rhythm, and it also puts the rule exactly
     midway between two neighbours' text. */
  .r69tb__cell:first-child { border-inline-start: 0; }

  /* The glyph gets a frame rather than floating loose: at 20px on its own it read as a leftover
     bullet. The frame is the theme's own control shape — the same 4px square and hairline as the
     carousel chevrons — so it belongs to the system instead of introducing a new one. Padding and
     border on the <svg> itself, so no extra wrapper element is needed. */
  .r69tb__ico {
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 1px solid var(--r69tb-line);
    border-radius: 4px;
    background: color-mix(in srgb, var(--r69tb-text) 3%, transparent);
    color: var(--r69tb-text);
    margin-block-end: 14px;
  }

  .r69tb__txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    /* Centred text wants a measure, or a long lead spans the whole column and the centring stops
       reading as centring. */
    max-width: 26ch;
  }

  .r69tb__lead {
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.004em;
    color: var(--r69tb-text);
  }

  /* NO height reservation on the delivery lead, deliberately. An earlier version floored it at two
     lines to stop the strip twitching as the countdown ticks — but the countdown only ever swaps
     digits of equal width ("3 h 12 min" → "3 h 11 min"), and the one real length change
     ("1 h 0 min" → "59 min") is a character shorter, so it never re-wraps. The floor was paying a
     permanent visible gap under a one-line lead for motion that does not happen. */

  .r69tb__sub {
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--r69tb-muted);
    margin-block-start: 4px;
  }

  /* The threshold is a second thought under the arrival date, so it sits tighter to it than to the
     lead and one notch quieter — but still readable, not a whisper. */
  .r69tb__sub + .r69tb__sub {
    margin-block-start: 1px;
    color: var(--r69tb-muted);
    opacity: 0.78;
  }

  /* Also styles the drawer trigger, which is a <button> — strip the UA button chrome so it reads as
     the same quiet underlined text as everything else in the strip. */
  .r69tb__link {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    color: var(--r69tb-muted);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease;
  }

  .r69tb__link:hover { color: var(--r69tb-text); }

  /* ── Returns drawer — the cart-drawer overlay, same as the PDP blocks use ── */
  .r69tb-drawer {
    /* the shared .theme-drawer__header takes its padding from this var, per dialog */
    --theme-drawer-padding: var(--padding-xl, 24px);
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: var(--style-border-drawer);
    background: var(--color-background, #fff);
  }

  .r69tb-drawer[open] {
    display: flex;
    flex-direction: column;
    animation: r69tb-drawer-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  /* Literal black: the theme's own backdrop variable resolves EMPTY, which makes any
     rgb(var(--…)/.x) backdrop invalid and therefore fully transparent. */
  .r69tb-drawer::backdrop { background: rgb(0 0 0 / 0.42); }
  .r69tb-drawer[open]::backdrop { animation: r69tb-bd-in var(--animation-speed) ease; }

  @keyframes r69tb-drawer-in { from { transform: translateX(100%); } }
  @keyframes r69tb-bd-in { from { opacity: 0; } }

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

  .r69tb-drawer__header {
    flex-shrink: 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .r69tb-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px var(--padding-xl, 24px) var(--padding-xl, 24px);
    font-family: var(--font-body--family);
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: start;
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }

  .r69tb-drawer__body p { margin: 0 0 1em; }

  .r69tb-drawer__policy {
    display: inline-flex;
    gap: 7px;
    margin-top: 8px;
    color: var(--color-foreground);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Two columns: the rule belongs between them, so it moves to the even cells and the row gap
     replaces it vertically. */
  @media screen and (max-width: 989px) {
    .r69tb__grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    /* Padding stays symmetric here too — only the rule moves to the even cells. */
    .r69tb__cell { padding-inline: 18px; border-inline-start: 0; }
    .r69tb__cell:nth-child(even) { border-inline-start: 1px solid var(--r69tb-line); }
    .r69tb__ico { width: 42px; height: 42px; padding: 10px; margin-block-end: 12px; }
  }

  /* One column: rules would just be four stray verticals, so the list becomes a stack and the cells
     get a little more air instead. */
  /* One column: a centred column of four stacked cells wastes the whole width, so the phone goes
     back to icon-beside-text, left-aligned — the compact form this layout actually wants when it is
     tall and narrow. */
  @media screen and (max-width: 479px) {
    .r69tb__grid { grid-template-columns: 1fr; row-gap: 20px; }
    .r69tb__cell {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align: start;
      gap: 14px;
      padding-inline: 0;
      border-inline-start: 0;
    }
    .r69tb__cell:nth-child(even) { padding-inline-start: 0; border-inline-start: 0; }
    .r69tb__ico { width: 40px; height: 40px; padding: 9px; margin-block-end: 0; flex: none; }
    .r69tb__txt { align-items: flex-start; max-width: none; }
  }
/* END_SECTION:r69-trust-band */
/* START_SECTION:rotas-hero (INDEX:60) */
.rh { position: relative; width: 100%; overflow: hidden; background: #0e0e0e; }
.rh__viewport { position: relative; width: 100%; height: clamp(560px, 82vh, 860px); background: #0e0e0e; }
.rh__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; pointer-events: none; transition: opacity .7s ease; }
.rh__slide.is-on { opacity: 1; z-index: 1; pointer-events: auto; }
.rh__media { position: absolute; inset: 0; }
.rh__media picture { position: absolute; inset: 0; display: block; }
.rh__img, .rh__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0e0e0e; }
.rh__img { object-position: 50% 30%; }
.rh__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 120%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 30%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.68));
}
.rh__cwrap { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; padding-block-end: 12vh; pointer-events: none; }
.rh__cwrap--page-width { padding-inline: max(var(--page-margin), calc((100% - var(--page-width)) / 2 + var(--page-margin))); }
.rh__cwrap--full-width { padding-inline: var(--page-margin); }
.rh__content { display: flex; flex-direction: column; max-width: 46%; pointer-events: auto; }
.rh__content--bl { align-items: flex-start; text-align: left; margin-inline-end: auto; }
.rh__content--bc { align-items: center; text-align: center; margin-inline: auto; max-width: 62%; }
.rh__content--br { align-items: flex-end; text-align: right; margin-inline-start: auto; }
.rh__eyebrow { font-family: var(--font-body--family); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(244,241,234,.74); margin: 0 0 14px; }
.rh__heading { font-family: var(--font-heading--family); font-weight: 600; color: #f5f2ec; font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.03; letter-spacing: .01em; margin: 0; }
.rh__sub { font-family: var(--font-body--family); font-size: clamp(.9rem, 1.05vw, 1.05rem); color: rgba(245,242,236,.82); line-height: 1.5; margin: 14px 0 22px; max-width: 40ch; }
.rh__content--bc .rh__sub { margin-left: auto; margin-right: auto; }
.rh__content--br .rh__sub { margin-left: auto; }
.rh__btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rh__content--bc .rh__btns { justify-content: center; }
.rh__content--br .rh__btns { justify-content: flex-end; }
.rh__btn { font-family: var(--font-body--family); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; padding: 14px 26px; border-radius: 4px; text-decoration: none; display: inline-block; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.rh__btn--primary { background: #f4f1ea; border: 1px solid #f4f1ea; color: #141210; }
.rh__btn--primary:hover { background: #fff; border-color: #fff; }
.rh__btn--secondary { background: transparent; border: 1px solid rgba(244,241,234,.85); color: #f4f1ea; }
.rh__btn--secondary:hover { background: rgba(244,241,234,.14); }
.rh__hud { position: absolute; z-index: 4; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; justify-content: center; width: min(38%, 300px); }
.rh__progress { display: flex; gap: 6px; width: 100%; }
.rh__seg { flex: 1; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.3); border-radius: 3px; overflow: hidden; cursor: pointer; }
/* The fill is driven every animation frame by rotas-hero.js. It scales on the X axis (composited,
   0 layout) rather than animating `width` (a layout every frame). transform-origin keeps it growing
   from the left; the element is full-width and scaleX(0..1) reveals it. */
.rh__seg > i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; will-change: transform; background: #f4f1ea; transition: transform .08s linear; }
@media screen and (max-width: 749px) {
  .rh__viewport { height: clamp(520px, 86vh, 780px); }
  .rh__cwrap--page-width, .rh__cwrap--full-width { padding-inline: 22px; }
  .rh__cwrap { padding-block-end: 13vh; }
  .rh__content { max-width: none; }
  .rh__content--bl, .rh__content--br, .rh__content--bc { align-items: flex-start; text-align: left; margin-inline: 0; }
  .rh__btn { font-size: .72rem; padding: 12px 18px; }
  .rh__hud { width: 64%; bottom: 20px; }
}
/* END_SECTION:rotas-hero */
/* START_BLOCK:_header-logo (INDEX:106) */
.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: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:107) */
.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;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

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

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

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

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

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

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

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

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

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

  .overflow-menu {
    /* 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. State = the JS-mirrored .menu-item-expanded class on the
     list-item (header-menu.js) — keying on [aria-expanded] inside :has() taxed every
     aria-expanded flip document-wide with ~32ms of style recalc. */
  .menu-list__list-item.menu-item-expanded > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has(.menu-list__list-item[slot='overflow'].menu-item-expanded)::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

  @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(.menu-item-expanded) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:material (INDEX:151) */
.material-line {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    line-height: 1.4;
  }
/* END_BLOCK:material */
/* START_BLOCK:price (INDEX:157) */
/* ROTAS69: prominent PDP price + a clear, refined sale treatment.
     Scoped to the product details column so product cards / featured products
     keep their own (smaller) price styling. The discounted price uses the
     brand's own sale colour (--r69-sale-color, from the sale-badge setting). */
  .product-details product-price .price {
    font-family: var(--font-body--family);
    font-size: clamp(1.5rem, 1.05rem + 1.6vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  /* sale row: discounted price + struck original share one baseline.
     :not(.price__hidden) is REQUIRED — without it this display:flex out-ranks
     base's .price__hidden{display:none} and the sale block shows even with no
     discount (a second, red price on every product). */
  .product-details product-price .price__sale:not(.price__hidden) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .product-details product-price .price__sale .price-item__group {
    display: inline-flex;
    align-items: baseline;
  }

  /* The discounted price carries the brand sale tone — EVERYWHERE, not just on the product page.
     Product cards render this same block (collections, search, recently viewed, tabbed products,
     featured product), and --r69-sale-color is already set on every instance above, so a card was
     showing its reduced price in plain ink while the product page showed it in the sale colour.
     Only the colour is unscoped; the PDP's larger type and sale-row layout stay under
     .product-details so cards keep their own compact price styling. */
  product-price .price-item--sale.price {
    color: var(--r69-sale-color);
  }

  /* the original price: smaller, lighter and clearly struck, so it reads as
     the quiet "was" next to the bold discounted price (base.css keeps the
     line-through; we lift the mute from ~0.8 to 0.5 for a crisper hierarchy) */
  .product-details product-price .compare-at-price {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.5);
    text-underline-offset: 1px;
  }
/* END_BLOCK:price */
/* START_BLOCK:review (INDEX:174) */
.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:swatches (INDEX:178) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    /* visible, not hidden: the stock hidden clipped the swatch ring top/bottom
       inside the card; row overflow is handled by overflow-list itself */
    overflow: visible;
    gap: 0;
    flex-shrink: 0;
  }

  /* Static single-colour dot: the picker's own DOM (label + checked radio +
   * swatch) inside <product-swatches>, so every stock rule — including the
   * :has(:checked) selected outline — applies unchanged. This wrapper stands
   * in for the picker's overflow-list and reserves room for that outline with
   * the same padding formulas (see swatches-variant-picker-component above in
   * variant-swatches.liquid).
   *
   * The DOT ITSELF is inert — no pointer-events:none trick. That trick let the
   * click fall through to the card link, so tapping the static dot OPENED the
   * product while tapping a real picker's swatch selects a variant: two
   * different behaviours for what looks like the same control (the owner's
   * complaint). With normal hit-testing the click lands on the label, and
   * navigateToProduct's own interactive-element guard (closest 'label') stops
   * the navigation — the dot now does nothing, exactly like a display-only
   * element should. Empty space beside the dot still navigates, same as the
   * empty space of a real picker row.
   *
   * NO inline-start reserve: `product-swatches` above sets `overflow: visible`,
   * so the ring is free to draw outside the box and nothing needs reserving.
   * The reserve dates from when that box clipped; all it did since was indent
   * the dot ~5px past the title and price above it — which is exactly what the
   * owner saw on single-colour products. */
  .product-swatches-static {
    display: flex;
    width: 100%;
    justify-content: var(--product-swatches-alignment-mobile);
    padding-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    padding-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    padding-inline-start: var(--product-swatches-padding-inline-start);
    padding-inline-end: calc(
      var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  @media screen and (min-width: 750px) {
    .product-swatches-static {
      justify-content: var(--product-swatches-alignment);
    }
  }

  /* display-only: no hand cursor, no hover ring — nothing suggesting a control. The disabled
     radio inside is what the pointer actually hits (it is stretched over the label), and stock
     paints :disabled inputs with cursor: not-allowed — which reads as "sold out" on a dot that
     merely shows the colour. Both get default. */
  .product-swatches-static .variant-option__button-label--has-swatch,
  .product-swatches-static .variant-option__button-label,
  .product-swatches-static input {
    cursor: default;
  }

  /* The kill must EXCEPT the checked one. The selected ring is an outline on this very label, so
     a naked :hover here erased it: pointing at a single-colour product's dot made its border
     vanish (owner's report). Same exception the touch rule in snippets/product-card.liquid
     already carries — :has(:checked) is the stock checked-ring's own selector, so no new
     invalidation class is introduced. */
  @media (hover: hover) {
    .product-swatches-static .variant-option__button-label--has-swatch:hover:not(:has(:checked)) {
      outline: none;
    }
  }

  /* Split static dot: 2–3 diagonal bands (same 135deg axis as before), each a
   * clipped layer so image swatches — the metal textures — can fill a band,
   * which a CSS gradient cannot. Bands paint in DOM order and every earlier
   * polygon overshoots its boundary slightly: the next band covers the
   * overshoot, hiding the anti-aliasing seam between clip edges. */
  .r69-swatch-split {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .r69-swatch-band {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

  .r69-swatch-band--half-1 { clip-path: polygon(0 0, 101.5% 0, 0 101.5%); }
  .r69-swatch-band--half-2 { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
  .r69-swatch-band--third-1 { clip-path: polygon(0 0, 68.2% 0, 0 68.2%); }
  .r69-swatch-band--third-2 { clip-path: polygon(66.7% 0, 100% 0, 100% 34.8%, 34.8% 100%, 0 100%, 0 66.7%); }
  .r69-swatch-band--third-3 { clip-path: polygon(100% 33.3%, 100% 100%, 33.3% 100%); }
/* END_BLOCK:swatches */
/* START_SNIPPET:background-media (INDEX:188) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* 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));
  }

  /* ROTAS69: never let an `adapt` frame be WIDER than square.
     `adapt` sizes each card's frame from its own photo, which is invisible while the catalogue is
     square — and it is: all 44 product images measure 1.0 (two at 0.998). The gift card is the one
     landscape image (422x309), so its frame came out 77px shorter and its title, price and rating
     sat a whole 77px above everyone else's in the same row. Flooring at square puts them back on
     the row's line; `min()` leaves a square photo at its own ratio, so nothing else moves. The
     image is contained rather than cropped, so a wide one letterboxes inside the square frame
     instead of losing its edges — again a no-op while the photo already fills the frame.
     (Taller-than-square photos still get a taller frame; that is what `adapt` is for.) */
  .card-gallery[data-image-ratio='adapt'] .product-media-container,
  .card-gallery[data-image-ratio='adapt'] .product-media {
    aspect-ratio: min(var(--gallery-aspect-ratio), 1);
  }
  .card-gallery[data-image-ratio='adapt'] .product-media-container img {
    object-fit: contain;
  }

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

  /* The line items are NOT their own scroll box. They used to be, and that is what squeezed them
     to a sliver on a phone: a scroll container's automatic minimum size is 0, so it was the only
     flex item here that could shrink — the free-ship bar, the upsell and the summary all refuse to
     go below their content, so the whole shortfall landed on the products. It now takes its
     natural height and `.cart-drawer__content` above is the single scroller. */
  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding-inline: var(--cart-drawer-padding);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

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

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

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

  /* The cart PAGE squeezes the variant line into the details column: measured 92px of room at a
     390px viewport and 62px at 360px, while "Izmērs: Ø 16.5 mm" needs 115px — so it wrapped, and no
     font size fixes that (it still needs 82px at 10px). The drawer already solves this with the
     modifier below, which gives the variants their own full-width row under the title; the class is
     only applied when context == 'drawer'. Below 750px the page borrows the same shape. */
  @media screen and (max-width: 749px) {
    .cart-page .cart-items__table-row:not(.cart-items__nested-line) {
      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;
      }

      .cart-items__unit-price-wrapper {
        grid-area: unit_price;
      }
    }
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
    /* The option NAME is printed now, so the line is longer — one size down keeps
       "Izmērs: Ø 16.5 mm" on a single line on a phone. */
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .cart-items__variant {
    display: inline;
  }

  /* The name reads as the label it is; the value carries the weight. */
  .cart-items__variant dt {
    opacity: 0.65;
  }

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

  /* The selector's width is what makes its gaps: the row is `justify-content: space-between`, so
     whatever is left over after the two buttons and the number gets split into two gaps. Measured
     before: 124px wide against 76px of content = 24px per gap on a phone, and 105/76 = 14.5px on
     desktop. These widths halve that. */
  .cart-items .quantity-selector {
    --quantity-selector-width: 86px;
  }

  /* The number sat at 16px against 14px everywhere around it. NOTE: 16px is the size iOS needs to
     not zoom the page when an input takes focus — if tapping the quantity ever zooms on a real
     iPhone, this line is the reason. */
  .cart-items .quantity-selector input {
    font-size: 14px;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 90px;
      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: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:gift-card-recipient-form-styles (INDEX:220) */
.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;
    }
  }

  /* ---------- ROTAS69 ---------- */
  /* "Nosutit uz" is a field label like NOMINALS and DALIES elsewhere on the page, and was the only
     one still set in body copy. Same small-caps letterspaced treatment as those. */
  .recipient-form__send-to {
    font-family: var(--font-body--family);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.62);
    margin-block-end: 10px;
  }

  /* The recipient branch is a decision the shopper has just made, so it reads as its own panel
     rather than four inputs floating under a radio. Scoped to this form only: the fields use the
     theme-wide input tokens (--color-input-border and friends), and retuning those would change
     every form on the site. */
  .recipient-fields {
    padding: clamp(16px, 1.6vw, 22px);
    padding-block-start: clamp(16px, 1.6vw, 22px);
    margin-block-start: var(--margin-sm);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.02);
  }

  /* Borders in the brand ink instead of the flat grey the shared token resolves to on cream,
     and a focus ring that matches the other ROTAS69 controls. */
  .recipient-fields__input,
  .recipient-fields__textarea {
    border-color: rgb(var(--color-foreground-rgb) / 0.22);
    transition: border-color 0.15s ease;
  }
  .recipient-fields__input:hover,
  .recipient-fields__textarea:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.42);
  }
  .recipient-fields__input:focus-visible,
  .recipient-fields__textarea:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
    border-color: transparent;
  }

  /* The "Send on" date sits apart from the three text fields — it is the only optional one. */
  .field--send-on {
    margin-block-start: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .recipient-fields__input,
    .recipient-fields__textarea { transition: none; }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */
/* START_SNIPPET:header-actions (INDEX:224) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  /* (The old ≤399px gap-squeeze between action icons is gone: the account icon now lives on
     the left beside the burger, so only two icons share the right side and they fit their own
     44px grid cells without overlapping.) */

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:225) */
.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:localization-form (INDEX:235) */
/* 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:predictive-search-styles (INDEX:248) */
/* 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;
    }
  }

  {%- comment -%} Was keyed on [aria-expanded='true'] — nothing in this build ever sets that
    attribute on the dropdown (verified inert), but its PRESENCE inside :has() taxed every
    aria-expanded flip document-wide. Re-keyed to an equally-inert class. {%- endcomment -%}
  .predictive-search:has(.predictive-search-dropdown.ps-expanded)
    .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);
    }
  }

  /* Recently-viewed cards carry a quick-add button; pressing it (or the card) must NOT shrink the
     whole card the way a tap-to-navigate result card does — no other card in the store presses like
     that. The <li> carries BOTH .predictive-search-results__card and …--product, each with its own
     :active scale, so cancel the tap-scale on both (transform:none) for these cards only; the hover
     lift is untouched. */
  .recently-viewed-wrapper .predictive-search-results__card:active,
  .recently-viewed-wrapper .predictive-search-results__card--product:active {
    transform: none;
  }

  .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:product-badges-styles (INDEX:251) */
.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);
  }

  /* ROTAS69: ONE row container spanning the photo. The attribute badge (Trending/Bestsellers)
     sits on one side, the status stack on the other, pushed there by an auto margin; when the
     two cannot share the line the STACK wraps underneath and the auto margin keeps its side.
     Collisions and label folding are structurally impossible - no width caps anywhere. */
  .product-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
  }

  .product-badges--top-left,
  .product-badges--top-right {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    left: calc(var(--badge-inset) + var(--padding-inline-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* The stack holds the sale badge and one of new / back / low, and markup order puts sale first.
     With three badges on a card that could leave the longest label in the middle — "Atlaide -28%"
     above "Gandrīz izpārdots". `--flip` is set in Liquid when the second one is longer, and it
     sends the sale badge below. Same rule as the pair above it: longest on top. */
  .product-badges__stack--flip > :first-child {
    order: 1;
  }

  /* status corner per the setting; the attribute badge takes the opposite side */
  .product-badges--top-right .product-badges__stack {
    margin-inline-start: auto;
    align-items: flex-end;
  }

  .product-badges--top-left .product-badges__stack {
    order: -1;
    align-items: flex-start;
  }

  .product-badges--top-left .product-badges__badge--attribute {
    margin-inline-start: auto;
  }

  /* When the card carries BOTH kinds of badge (`--pair`, set in Liquid), the row shares itself out
     with space-between instead of an auto margin. Same result while they fit — opposite corners —
     but a different one when they cannot: an auto margin keeps pushing the wrapped badge to the far
     corner, so on a narrow card "Trending" sat top-left and "Gandrīz izpārdots" hung on the line
     below flush right, starting exactly where the first badge ended. That staggered diagonal is
     what the owner caught. space-between puts a lone item on its line at the START, so the second
     badge now drops straight down under the first.
     The auto margins stay for unpaired cards: a card with only a status badge must still sit in the
     corner the setting asks for, and space-between would move it to the opposite one. */
  .product-badges--pair {
    justify-content: space-between;
  }

  .product-badges--pair.product-badges--top-right .product-badges__stack,
  .product-badges--pair.product-badges--top-left .product-badges__badge--attribute {
    margin-inline-start: 0;
  }

  /* bottom-left keeps the plain column of old */
  .product-badges--bottom-left {
    align-items: flex-start;
  }

  .product-badges--bottom-left .product-badges__stack {
    display: contents;
  }

  .product-badges__badge--rectangle {
    letter-spacing: 0.05em;
    white-space: nowrap;
    padding-block: 5px;
    padding-inline: 9px;
    box-shadow: 0 1px 4px rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* Narrow cards (mobile 2-up): same corners, one size down - the Astrid & Miyu way. No width
     cap and no wrapping WITHIN a label: the row+stack scheme above wraps whole badges to the
     next line instead. (The old 45cqw cap sat inside the labels' own width spread:
     "Atlaide -19%" passed at ~73px while "-35%" folded at ~75px on the same cards - one
     digit's width decided the fold.) */
  @container card-gallery-container (max-width: 239px) {
    .product-badges__badge {
      --badge-font-size: 0.6rem;
    }

    .product-badges__badge--rectangle {
      padding-block: 3px;
      padding-inline: 6px;
    }

    /* This is the width where a pair wraps, so here — and only here — the LONGER badge takes the
       top line; `--status-longer` is decided in Liquid, which is the only place the two labels can
       be compared. Gating it to narrow cards keeps the wide ones exactly as they are: there the
       pair fits on one line and each badge stays in the corner the setting assigns it. */
    .product-badges--pair.product-badges--status-longer .product-badges__stack {
      order: -1;
    }

    .product-badges--pair:not(.product-badges--status-longer) .product-badges__stack {
      order: 1;
    }

    /* Once the pair has wrapped, every badge is on the left — so the stack's own children line up
       with that edge too. `align-items: flex-end` is what puts the stack in the right-hand corner
       when the pair fits on one line, and there it is right; here it left the shorter badge
       indented while the two around it sat flush. */
    .product-badges--pair .product-badges__stack {
      align-items: flex-start;
    }
  }
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-card (INDEX:252) */
.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;
    }
  }

  /* ── ROTAS69 card surface: one soft panel that reads clearly on any
     background. Colours derive from the palette / the card block's own
     background colour (so it stays light on a tinted collection section). ── */
  /* No whole-card flash on tap. product-card carries a click listener (navigateToProduct), so
     Android paints its tap highlight over the ENTIRE card box for any tap inside — card, swatch,
     anything. The property inherits, so one declaration silences it for every descendant; the
     controls keep their own pressed styles. */
  product-card {
    -webkit-tap-highlight-color: transparent;
  }

  .product-card__content {
    position: relative;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.10);
    border-radius: 4px;
    overflow: clip;
    /* ONE inset for everything inside the card, and it is the badge's: --padding-xs, the same
       value --badge-inset resolves to. Measured, the badge plate sits 9px from the card edge in
       every context (8px + the 1px border), so every row and the action stack are given the same
       8px below and land on the same 9.
       The inline padding is forced to zero here on purpose. It used to come from the block's
       spacing-style, which the theme editor sets per placement — 8px on a mobile collection card,
       0 on the home rail and on desktop — so the text edge moved between contexts while the badge
       never did. With the inset owned by the rows instead, the card reads the same everywhere.
       !important because spacing-style writes it inline (same reason the block below already
       needed it).
       gap: 0 — the flex gap drew horizontal bands between the rows; vertical rhythm is set with
       padding on the rows, not with a gap on the group (owner's call). */
    padding-inline: 0 !important;
    gap: 0 !important;
    padding-block-end: var(--padding-xs) !important;
    box-shadow: 0 1px 2px rgb(var(--color-foreground-rgb) / 0.04), 0 8px 20px rgb(var(--color-foreground-rgb) / 0.05);
    transition: box-shadow 0.2s ease;
  }

  /* Only where hovering exists. On a phone this fired on every tap — `:focus-within` the moment the
     wishlist button took focus, and `:hover` sticking after the touch — so the card's shadow
     deepened and stayed deepened. A keyboard user on a desktop still gets it through
     `:focus-within`; a finger has no business triggering a hover state. */
  @media (hover: hover) {
    product-card:is(:hover, :focus-within) .product-card__content {
      box-shadow: 0 2px 4px rgb(var(--color-foreground-rgb) / 0.06), 0 14px 30px rgb(var(--color-foreground-rgb) / 0.10);
    }
  }

  /* faint photo plate so white product shots sit on a visible surface */
  .product-card .card-gallery {
    background: rgb(var(--color-foreground-rgb) / 0.025);
    border-radius: 4px 4px 0 0;
    /* Horizon pulls the gallery out of the card's inline padding on full-width mobile collections
       (base.css: margin-inline: calc(-1 * max(--padding-xs, --padding-inline-start))) so the photo
       stays full-bleed while the text is inset. The content no longer has that padding — the rows
       carry the inset themselves — so the escape hatch would now push the photo past the card
       edge. Zeroed; the photo is full-bleed because there is nothing to escape from. */
    margin-inline: 0 !important;
  }

  /* NO z-index games on the overlay link or the swatch row — stock stacking, deliberately.
     The overlay lift (z-flat on .product-card__link) made every tap land on the LINK instead of
     the gallery scroller underneath, which killed photo swiping on phones EVERYWHERE — the
     browser pans the nearest scrollable ancestor of the touched element, and the overlay's
     ancestor is the rail, not the slideshow. It also forced the swatch row and then the action
     stack into a z arms race (the pixel-hunt hover bug). And it fixed nothing: photo taps
     navigate natively through the gallery's own <a>, body taps through navigateToProduct in
     product-card.js; the real dead-tap culprit was the pairing rail's drag handler, fixed where
     it lived. */

  /* Every text row starts where the BADGE starts — the card's own edge, nothing added on top.
     These rows used to carry `padding-inline: 14px` of their own, on top of the 8px the content
     box already has, so the badge sat 9px from the card edge while the title, material line,
     swatches, price and rating all sat at 23px: two different left margins inside one card.
     Measured, not eyeballed — see audit/2026-07/card-inset.mjs.
     The end side keeps its reserves below: those are not decoration, they hold the row clear of
     the wishlist / quick-add stack. (The title sits inside a display:contents <a>, so it is the
     inner block that has to be zeroed.) */
  .product-card__content > .material-line,
  .product-card__content > product-price,
  .product-card__content > .rating-wrapper,
  .product-card__content > product-swatches,
  .product-card__content > .product-swatches-static,
  .product-card__content > a .text-block {
    padding-inline: var(--padding-xs);
  }

  /* Price and rating stop short of the action stack. The stack now sits --padding-xs from the edge
     and is --button-size-md wide; 22px is the air between the two, unchanged from before. */
  .product-card__content > product-price,
  .product-card__content > .rating-wrapper {
    padding-inline-end: calc(var(--padding-xs) + var(--button-size-md) + 22px);
  }

  /* ── Type: the THEME's own fonts (title inherits its block preset = body
     font) — only size / weight / spacing are tuned here, never the family. ── */
  .product-card__content > a .text-block,
  .product-card__content > a .text-block p {
    font-size: 0.9rem !important;
    font-weight: 500;
    /* Tight leading: a card title that wraps to two or three lines was reading as three separate
       lines rather than one name. Set to the font size itself — no extra leading at all. */
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .product-card__content > a .text-block {
    margin-block-start: 10px;
  }

  /* The -2px pull that used to be here compensated the content's flex gap; that gap is 0 now, so
     it is gone. The 2px below is real air under the title, not a compensation for anything. */
  .product-card__content > .material-line {
    padding-block-start: 2px;
  }

  /* price size comes from the block's type preset — override it decisively */
  .product-card__content > product-price {
    /* NOT `auto` here: the bottom cluster is already pinned below, by exactly ONE auto margin per
       card shape. A second one would make the two split the free space between them (measured:
       19.4px above the swatches became 9.7 + 9.7), loosening every card that has swatches. */
    margin-block-start: 8px;
    font-size: 0.875rem !important;
  }

  .product-card__content > product-price .price {
    font-size: 0.875rem !important;
    font-weight: 600;
  }

  .product-card__content > product-price .compare-at-price {
    font-size: 0.8rem !important;
  }

  /* ── Gift-card denomination chips ──
     Lives HERE, not in snippets/variant-swatches.liquid where the markup is. Horizon compiles a
     component's {% stylesheet %} into a page only when that component is SERVER-RENDERED on it, and
     the rails these chips matter most in (recently viewed, and anything else fed by a Section
     Rendering fetch) inject their cards afterwards — on a product page nothing server-renders the
     swatch picker, so its whole stylesheet is absent and the chips arrived with NO styling at all:
     display:inline, no border, inheriting the selected-variant white on a white card. This file is
     compiled wherever a product card can appear, which is exactly the reach the chips need.

     The option has no colour behind it, so the amount itself IS the swatch — it has to carry all
     the affordance a coloured dot gets for free. Every chip is a filled, outlined control at rest,
     so the row reads as a set of choices with one taken and the rest obviously tappable. Sized
     against the real card (four chips + gaps ≈ 214px inside a 258px row) so they stay on one line
     rather than collapsing into the overflow list's "+N". */
  .r69-denom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding-inline: 10px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.45);
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    color: rgb(var(--color-foreground-rgb));
    font-family: var(--font-body--family);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  /* Hover is a POINTER's affordance, and never for the chip that is already chosen.
     Two proven bugs lived here:
     - the tap-grey: on touch, a tap sets a sticky :hover, and this rule (0,3,0) outranks the
       checked fill (0,2,1) — tapping the SELECTED chip painted it hover-grey and it stayed grey.
     - even with a mouse, hovering the selected chip greyed it for the same specificity reason. */
  @media (hover: hover) {
    .variant-option__button-label:hover input:not(:checked) ~ .r69-denom {
      border-color: rgb(var(--color-foreground-rgb) / 0.8);
      background: rgb(var(--color-foreground-rgb) / 0.08);
    }
  }

  /* No sticky tap-ring either: the stock swatch label paints a hover OUTLINE, which a touch tap
     leaves stuck around the chip until the next tap elsewhere. The SELECTED ring is an outline on
     this same label, so the kill must except the checked one — without the exception, tapping the
     chip you already chose removed its ring entirely (owner's report, and my own bug: the naked
     :hover version outranked the checked ring by order). :has(:checked) is already an existing
     invalidation feature in this document — the stock checked-ring rule uses exactly it — so this
     adds no new :has() class. */
  @media (hover: none) {
    .product-card__content .variant-option__button-label--has-swatch:hover:not(:has(:checked)) {
      outline: none;
    }
  }

  /* Adjacent sibling, not :has(:checked) — picking an amount must not cost a document-wide
     invalidation. The base.css selected-variant rules paint the LABEL, so they are neutralised
     here: on an unstyled chip that ring plus the inherited white text was the "empty box". */
  .variant-option__button-label:has(> .r69-denom) {
    border: 0;
    color: inherit;
    /* Flex, not the stock display:block: in block flow the chip is an inline-flex sitting on a
       TEXT BASELINE, and any state where the line metrics differ (web font mid-load, a fetched
       card mid-mount) parks extra air above the chip - the ring the label draws then floats
       high on top, which is exactly the owner's first-paint screenshots. A flex label has no
       line boxes: its height IS the chip in every state. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* The selected ring is an outline on THIS label, and an outline follows the label's own
       corners: with radius 0 it drew a sharp rectangle around a 4px-rounded chip, so at the
       corners the ring stood away from the chip it marks. Same radius, ring hugs. */
    border-radius: 4px;
    --focus-outline-radius: 4px;
  }

  /* General sibling, not adjacent: the ring around a selected chip is drawn by the label, and the
     owner saw a chip keep its ring while losing its fill — which can only happen if something
     lands between the input and the chip. `~` survives that; it is the same cheap selector class,
     and still NOT :has() (picking an amount must not cost a document-wide invalidation). */
  input:checked ~ .r69-denom {
    background: rgb(var(--color-foreground-rgb));
    border-color: rgb(var(--color-foreground-rgb));
    color: var(--color-background);
  }

  /* The stock swatch gap is tuned for round dots with air between them; chips are wider, so tighten
     it — it also groups the amounts as one control instead of loose buttons. */
  /* gap: the shared 8px above — chips and colour swatches must not read as two components */

  /* Same reason as the chips: on a page that never server-renders the picker, its own layout rules
     are missing too, so the row loses `display: flex`. Restating them here repairs every
     JS-injected card — colour swatches included — and is a no-op where that stylesheet did load. */
  .product-card__content swatches-variant-picker-component {
    display: flex;
    width: 100%;
  }

  /* The swatch row starts on the card's text edge. overflow-list's shadow list ships ~5px of its
     own inline padding (focus-ring air), which indented the first swatch past the title and price
     above it. Zeroed for EVERY swatch row in a card — the gift-card chips already had this inside
     the narrow container query, colour swatches never did, which is exactly what the owner saw. */
  /* BEFORE the web component upgrades there is no shadow list: the swatch <li>s sit in the light
     DOM as plain list items in inline flow — the row laid out on text line boxes (the selected
     ring floated with extra air on top at first paint) and the "+N" <li slot=more> rendered as a
     visible stray. Mirror the upgraded layout for the not-yet-defined state so the first paint
     and the settled state are the same picture. */
  .product-card__content overflow-list:not(:defined) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
  }

  .product-card__content overflow-list:not(:defined) > li {
    display: block;
    list-style: none;
  }

  .product-card__content overflow-list:not(:defined) > li[slot='more'] {
    display: none;
  }

  .product-card__content overflow-list::part(list) {
    padding-inline: 0;
    /* ONE gap for every swatch row in a card. Colour swatches inherited the picker's --gap-sm
       (11.2px) and the gift-card chips ran at 6px, so the two rows read as different components;
       8px is the middle the owner asked for and still leaves a chip pair on one line at 320px. */
    gap: 8px;
  }

  /* ── "+N" is a member of the row, not a leftover ──
     overflow-list hides what does not fit behind this button, which ships as bare text at 40%
     opacity — no border, no size, no shape. On a 154px card that read as a grey smudge next to
     the swatch, and nothing suggested it opens the rest (it calls showAllSwatches). It now takes
     the exact shape of whatever it stands next to: a dot among dots, a chip among chips. */
  /* ONE size for the dot and its "+N". Every swatch dimension variable (--swatch-width,
     --max-swatch-size …) is declared ON `.swatch` itself in base.css, so a sibling button cannot
     read them — `width: var(--swatch-width)` resolved to nothing and the button sized to its own
     text, which is why it came out a rectangle. A variable owned by the CARD is visible to both,
     and feeding it into the dot's own --max-swatch-size keeps the two in lockstep by
     construction. (The declaration on `.swatch` also beats anything inherited, so capping the
     dot has to happen on `.swatch` — an ancestor cannot do it.) */
  .product-card__content {
    /* the gift-card chip's height — dots, chips and "+N" are one family, one size */
    --r69-swatch-box: 30px;
  }

  /* The size is FORCED, not capped. --max-swatch-size is only the ceiling of base.css's
     min(m + sU, m + s·W'/H'·M', M) formula, and the other two terms won: the dot came out 18px
     beside a 30px chip — smaller and out of line, exactly as the owner saw. Overriding the two
     variables the box actually reads pins it. */
  .product-card__content .swatch {
    --swatch-width: var(--r69-swatch-box);
    --swatch-height: var(--r69-swatch-box);
    --max-swatch-size: var(--r69-swatch-box);
  }

  .product-card__content .hidden-swatches__count {
    /* EXPLICIT sizes, deliberately not var(--r69-swatch-box): the variable's base and narrow
       values live on different elements, so any state where the container query is not evaluated
       (a display:none subtree, a mid-hydration card) produced a HYBRID button — the owner caught
       a 30px-padded "+N" beside a 24px one on one screen. Two fully spelled-out states, chosen by
       the same query that sizes the row, cannot mix.

       The CENTRING is owned here too, not borrowed: display/align/justify/line-height used to
       come from the stock rule in variant-swatches.liquid, which is compiled per page — any
       context reaching a card without it rendered the "+N" as an inline button with its number
       riding high on the text baseline (the owner's screenshot: '+3' high, '+4' centred). One
       rule now defines the whole control; nothing depends on another file being present. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 30px;
    width: auto;
    height: 30px;
    padding-block: 0;
    padding-inline: 10px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    flex: none;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.45);
    border-radius: var(--variant-picker-swatch-radius);
    color: rgb(var(--color-foreground-rgb) / 0.75);
    font-family: var(--font-body--family);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .product-card__content .hidden-swatches__count:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.8);
    color: var(--color-foreground);
  }

  /* THE NUMBER ITSELF. The button is empty markup — its text comes from a ::before counter that
     only exists in snippets/variant-swatches.liquid, and that stylesheet is compiled into a page
     only where the picker is SERVER-rendered. In every rail (recently viewed, pairing, anything
     fetched) it is absent, so the button arrived with nothing inside — a blank box once this file
     gave it a border. `--overflow-count` is set by overflow-list.js on its own host, so it
     inherits down here. Same trap as .r69-denom: card-critical CSS belongs in THIS file. */
  .product-card__content .hidden-swatches__count::before {
    counter-reset: overflow-count var(--overflow-count, 0);
    content: '+' counter(overflow-count);
    line-height: 1;
    cursor: pointer;
  }

  /* No separate chip variant: the two rows had different widths, paddings and corners and read
     as two different controls. One box for both — square by default, allowed to stretch only if
     the number ever needs two digits. */

  /* Expanded (the shopper tapped "+N"): the rest break onto a second row instead of overflowing.
     overflow-list marks this state with [disabled='true']. */
  .product-card__content overflow-list[disabled='true']::part(list) {
    flex-wrap: wrap;
  }

  /* Selected ring hugs the swatch/chip. Stock offsets the outline by 0.2em (~3px of air between
     the ring and the dot), which read as the ring floating away from what it marks. Overriding
     the VARIABLE (not the outline rules) keeps every consumer in sync — the checked ring, the
     hover ring and the old-Safari ::after fallback all read the same offset — and costs no new
     :has() selector. Card scope only; the PDP picker is untouched. */
  .product-card__content .variant-option__button-label--has-swatch {
    --focus-outline-offset: 1px;
  }

  .product-card__content > .rating-wrapper {
    margin-block-start: 5px;
  }

  /* star size is set inline on .rating by the review block → needs !important */
  .product-card__content .rating {
    --star-size: 0.8rem !important;
  }

  .product-card__content .rating-count {
    font-size: 0.74rem;
  }

  /* Pin the bottom cluster (swatches → price → rating) to the card bottom */
  .product-card__content:has(> product-swatches) > product-swatches {
    margin-block-start: auto;
  }

  .product-card__content:not(:has(> product-swatches)) > product-price {
    margin-block-start: auto;
  }

  /* Cards missing a bottom row (no swatch data on the product / no review
     block) still reserve that row's height — the absolute action stack is
     taller than title+material+price alone and would climb onto the photo.

     The reserve sits WHERE THE MISSING ROW WOULD HAVE BEEN, not at the end.
     One trailing spacer used to cover both cases, which meant a product with
     no swatches (the gift card) carried 30px of blank space UNDER its price
     and rating — holding them ~34px above the line every other card in the
     row shares. Explicit order puts each reserve in its own slot: swatches
     before the price, rating after it. */
  .product-card__content > product-price {
    order: 2;
  }

  .product-card__content > .rating-wrapper {
    order: 3;
  }

  .product-card__content:not(:has(> product-swatches))::before {
    content: "";
    flex: none;
    order: 1;
    height: 30px;
  }

  .product-card__content:not(:has(> .rating-wrapper))::after {
    content: "";
    flex: none;
    order: 4;
    height: 26px;
  }

  /* ── Action stack: wishlist above add-to-cart, pinned bottom-right like
     FAORIA. Anchored to .product-card__content (position: relative above). ── */
  .card-actions {
    position: absolute;
    /* the badge's inset, so the heart and the cart circle stop where the badge starts */
    inset-inline-end: var(--padding-xs);
    inset-block-end: var(--padding-xs);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: var(--layer-raised);
  }

  .card-actions .wishlist-button--card {
    position: static;
    inset: auto;
    opacity: 1;
  }

  /* Force the quick-add always visible in the stack (incl. sold-out, so the
     cart shows disabled). The vars go on .quick-add (the class the
     <quick-add-component> actually carries), overriding the availability-gated
     inline vars on .product-card__content. We DON'T touch the buttons' own
     `display` — the stock add/choose toggle owns that, so only ONE shows. */
  .card-actions .quick-add {
    position: static;
    inset: auto;
    display: inline-flex;
    pointer-events: auto;
    --quick-add-display: flex;
    --quick-add-mobile-display: flex;
    --quick-add-mobile-opacity: 1;
  }

  .card-actions .quick-add__product-form-component,
  .card-actions .quick-add__product-form-component .shopify-product-form {
    display: inline-flex;
    height: auto;
    width: auto;
    container-type: normal;
  }

  /* solid-ink cart circle */
  .card-actions .quick-add__button {
    position: static;
    opacity: 1;
    background: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb));
    border-color: rgb(var(--color-foreground-rgb));
    color: var(--color-background);
    backdrop-filter: none;
  }

  .card-actions .quick-add__button .add-to-cart-text {
    background: transparent;
    color: var(--color-background);
  }

  .card-actions .quick-add__button svg {
    color: var(--color-background);
  }

  /* Sold out: the cart stays visible but reads as inert */
  .card-actions .quick-add__button:disabled,
  .card-actions .quick-add__button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ── NARROW CARDS: the Astrid & Miyu answer — the SAME card, one size down. ──
     Nothing moves. On a card ≤239px wide (mobile 2-up ≈ 154–200px) every element keeps its
     exact position and simply renders smaller, the way A&M's mobile grid keeps the desktop
     card and only drops the type scale. The threshold is the card's OWN width via container
     query, so a full-width rail card on a phone keeps desktop sizes.

     A container query cannot style the container itself, so the button-size variable rides on
     the direct children: it shrinks the heart/cart circles AND the price/rating end reserve
     together — the reserve formula reads the same variable. */
  .product-card__content {
    container-name: product-card-content;
    container-type: inline-size;
  }

  @container product-card-content (max-width: 239px) {
    .product-card__content > * {
      --button-size-md: 30px;
      --r69-swatch-box: 24px;
    }

    .product-card__content > a .text-block,
    .product-card__content > a .text-block p {
      font-size: 0.8rem !important;
      line-height: 1;
    }

    .product-card__content > .material-line {
      font-size: 0.6rem;
    }

    .product-card__content > product-price,
    .product-card__content > product-price .price {
      font-size: 0.8rem !important;
    }

    .product-card__content > product-price .compare-at-price {
      font-size: 0.72rem !important;
    }

    .product-card__content .rating {
      --star-size: 0.7rem !important;
    }

    .product-card__content .rating-count {
      font-size: 0.66rem;
    }

    /* gift-card chips: one size down and allowed to wrap — hiding amounts behind the
       overflow "+N" defeats showing the denominations at all. The swatch row also takes the
       same end reserve the price and rating rows keep: on a short-content card (the gift
       card) the bottom-right button stack reaches the swatch line, and without the reserve
       the last chip slid under it. */
    /* tighter than the price/rating reserve (10+8 air instead of 14+12): the swatch row's own
       inner padding already eats ~16px, and a chip PAIR needs 71px of the 154px card — with the
       full 56px reserve only 66px remained and the chips fell into one tall column */
    .product-card__content > product-swatches {
      padding-inline-end: calc(var(--padding-xs) + var(--button-size-md) + 14px);
    }

    /* padding 6 / gap 4: two chips per row must survive the 84px zone of a 154px card
       (320px viewport) — at 7/6 the pair measured exactly 84 and rounding tipped it into
       one chip per row */
    .r69-denom {
      min-height: 24px;
      padding-inline: 6px;
      font-size: 0.68rem;
    }

    /* One row, always — three dots (or two amounts) plus "+N", so every card in a row has a
       swatch line of the same height and the bottoms stay level. Tapping "+N" is what breaks
       the rest onto a second row, and only on the card that was tapped.
       20px dots: at ~92px of row the stock 28px fits two items, 20px fits three plus the "+N".
       Set on the CHILD, not on .product-card__content — a container query cannot style its own
       container — and the card's own variable carries it to both the dot and the "+N". */
    .product-card__content .hidden-swatches__count {
      min-width: 24px;
      height: 24px;
      padding-inline: 6px;
      font-size: 0.68rem;
    }
  }

  /* ── Wide cards: name and price one step up ──
     Keyed on the card's own width, not the viewport, so a rail card that happens to be narrow on
     a big screen keeps the smaller type and a collection card on a tablet gets the larger one.
     Measured widths: 305–336px wherever the card is big (home rail and collection at 768px and
     up), against 175–191px on a phone — so 260px separates the two cleanly with room on
     both sides. */
  @container product-card-content (min-width: 260px) {
    .product-card__content > a .text-block,
    .product-card__content > a .text-block p {
      font-size: 1rem !important;
    }

    .product-card__content > product-price,
    .product-card__content > product-price .price {
      font-size: 0.95rem !important;
    }

    .product-card__content > product-price .compare-at-price {
      font-size: 0.85rem !important;
    }
  }
/* END_SNIPPET:product-card */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:255) */
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 (INDEX:257) */
.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:quick-add-modal-styles (INDEX:259) */
#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;
  }

  /* ROTAS69: the quick-add opens NON-MODAL (show(), not showModal — see quick-add.js) to skip the
     document-wide inert style recalc a modal <dialog> forces on open AND close (723ms vs 2ms on a
     44-card collection, the biggest mobile-INP piece). show() has no top layer, so pin the dialog
     and its backdrop here. inset:0 restores the mobile bottom-sheet's bottom edge (it keeps its own
     margin: auto 0 0 0 above); desktop centres the fixed-size box with margin:auto. */
  .quick-add-modal[open] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-temporary) + 1);
  }
  @media screen and (min-width: 750px) {
    .quick-add-modal[open] {
      margin: auto;
    }
  }

  .quick-add-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--layer-temporary);
    background: rgb(0 0 0 / 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-timing-fade-out);
  }
  .quick-add-modal__backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .quick-add-modal__backdrop {
      transition: none;
    }
  }

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

  /* Bigger close glyph (owner's ask) — larger still on phones for the touch target. */
  .quick-add-modal__close svg {
    width: 21px;
    height: 21px;
  }
  @media screen and (max-width: 749px) {
    .quick-add-modal__close svg {
      width: 26px;
      height: 26px;
    }
  }

  .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;
      /* Tighter leading so a 2–3 line title reads as one compact block, not loosely spaced lines. */
      line-height: 1.15;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  /* On mobile the delivery block is lifted out of .product-details to a direct grid child (see
     quick-add.js); span it full-width like the variant picker and buy button above/below it. */
  .quick-add-modal__content .r69-delivery-payment {
    @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;
    /* Match the PDP's VISIBLE title, which is a Cormorant heading (measured 32px / 600), not this
       card link's tiny rte preset. Clamped so a long name doesn't blow out the narrow modal. */
    font-family: var(--font-heading--family);
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
    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;
  }

  /* The phone rebuild moves the price into .product-header, OUTSIDE .product-details — so the price
     block's co-located sizing (blocks/price.liquid, scoped to .product-details) no longer lands and
     the price fell back to 14px/400 body text. Replicate the PDP price here for the header context:
     the same clamp + weight, and the quiet struck compare-at so a sale reads right. The discounted
     price's sale colour is set unscoped by the block, so it already applies. */
  @media screen and (max-width: 749px) {
    .quick-add-modal__content .product-header product-price .price {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }
    .quick-add-modal__content .product-header product-price .price__sale:not(.price__hidden) {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .quick-add-modal__content .product-header product-price .price__sale .price-item__group {
      display: inline-flex;
      align-items: baseline;
    }
    .quick-add-modal__content .product-header product-price .compare-at-price {
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0;
      color: rgb(var(--color-foreground-rgb) / 0.5);
      text-underline-offset: 1px;
    }
  }

  /* Owner (desktop only): drop the variant selector's bottom padding + margin so the stock line
     sits snug under the size-picker box instead of floating below a gap. The base sets both via a
     .variant-picker class rule (margin reserves the focus outline; padding-block is 10px), so this
     override needs equal-or-higher specificity — hence variant-picker.variant-picker (0,3,1). */
  @media screen and (min-width: 750px) {
    .quick-add-modal__content .product-details variant-picker.variant-picker {
      padding-block-end: 0;
      margin-block-end: 0;
    }
    /* …but that snug removal is for the box selectors (ring / dropdown). The visible button rows —
       swatches AND plain value pills (both .variant-option--buttons) — need the breathing room the
       picker used to give below them, so put that same space back on the button fieldset. Only these
       visible rows get it; the hidden native control behind a ring/dropdown is display:none so this
       is inert on it, and the r69dd/ring widgets keep their own margins. */
    .quick-add-modal__content .product-details variant-picker .variant-option--buttons {
      padding-block-end: 10px;
      margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    }
  }

  .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 *,
      .r69-delivery-payment,
      .r69-delivery-payment *
    ) {
    @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 *,
          .r69-delivery-payment,
          .r69-delivery-payment *
        ),
      .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);
    }
  }

  /* ROTAS69 stock indicator — the product-inventory block's CSS is co-located on the PDP, so on the
     collection/search page where quick-add lives it was absent and the dot rendered as a big black
     default. Mirror the PDP look here (green 13px dot with a soft halo, quiet 0.85 text). Colours
     come from the global --color-instock/-lowstock vars, which are defined theme-wide. */
  .quick-add-modal .product-inventory__status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body--family);
    font-size: 0.84rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }
  .quick-add-modal .product-inventory__text { font-weight: 500; }
  .quick-add-modal .product-inventory__icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
  }
  .quick-add-modal .product-inventory__icon,
  .quick-add-modal .product-inventory__icon svg { width: 13px; height: 13px; }
  .quick-add-modal .product-inventory__icon-low { color: var(--color-lowstock); }
  .quick-add-modal .product-inventory__icon-in_stock { color: var(--color-instock); }
  .quick-add-modal .product-inventory__icon-out_of_stock { color: var(--color-outofstock); }
  .quick-add-modal .product-inventory__icon circle:first-of-type { opacity: 0.28; }
  .quick-add-modal .product-inventory__icon-in_stock::after,
  .quick-add-modal .product-inventory__icon-low::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    animation: r69-inv-pulse 2.4s ease-out infinite;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .quick-add-modal .product-inventory__icon-in_stock::after,
    .quick-add-modal .product-inventory__icon-low::after { animation: none; }
  }

  /* Owner: drop the price's top padding (it shipped with 16px, leaving a gap under the title). */
  .quick-add-modal__content .product-details product-price {
    padding-block-start: 0;
  }

  /* The delivery block is a bordered card. The generic group-block-content child rule gives it
     padding-inline, which insets its CONTENT but leaves the BORDER spanning the full column edge to
     edge. Swap to margin-inline so the whole box (border included) insets to the same width as the
     size picker and price (owner: it must match the dropdowns, not run edge to edge). Desktop only —
     on phones the block is lifted to a full-width grid child and already reads well. */
  @media screen and (min-width: 750px) {
    .quick-add-modal__content .product-details .r69-delivery-payment {
      /* width:auto so the box SHRINKS to the margins (the block's own width:100% would keep it full
         and just overflow to the right). Result: 621–1043, the same span as the size picker box. */
      width: auto;
      padding-inline: 0;
      margin-inline: var(--padding-3xl);
    }
  }

  /* Shop-Pay + wishlist on ONE row, like the PDP: Shop-Pay grows, the icon wishlist is a compact
     square on its right. The icon CSS is co-located on the PDP (absent on a collection page); on
     phones the rebuild in quick-add.js also drops .product-details — so scope to .quick-add-modal
     (not .product-details) and cover the mobile display class (--m-icon), else the wishlist shows
     as a full-width labelled button on phones instead of the PDP's icon. */
  .quick-add-modal .accelerated-checkout-block {
    flex: 1 1 auto;
    min-width: 0;
  }
  .quick-add-modal :is(.wishlist-block--d-icon, .wishlist-block--m-icon) {
    flex: 0 0 auto;
  }
  .quick-add-modal :is(.wishlist-block--d-icon, .wishlist-block--m-icon) .wishlist-button__label {
    display: none;
  }
  .quick-add-modal :is(.wishlist-block--d-icon, .wishlist-block--m-icon) .wishlist-button--product {
    width: auto;
  }
  .quick-add-modal :is(.wishlist-block--d-icon, .wishlist-block--m-icon) .wishlist-button--product .wishlist-button__btn {
    width: auto;
    aspect-ratio: 1;
    min-height: 0;
    height: var(--height-buy-buttons);
    padding: 0;
    justify-content: center;
  }

  /* The delivery block's «Piegādes informācija →» opens a dialog via showModal(); a modal opened
     INSIDE the quick-add modal freezes the page (same nested-modal bug as the ring size guide). Hide
     the trigger here — the full drawer stays on the product page. The dispatch date + status line
     («Pasūti tagad — saņem …» · piegāde no …) still render, which is what the quick-add needs. */
  .quick-add-modal .r69-delivery-payment__info-button {
    display: none;
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:quick-add-styles (INDEX:261) */
/* 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;
    /* ROTAS69: 1px hairline (theme standard). The icon width below subtracts 2x this border —
       keep them in sync or the circle goes oval. */
    border: 1px solid rgb(var(--color-foreground-rgb) / 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: button-size minus 2x the 1px border keeps the idle button a
       perfect circle (content 34px + 1px + 1px = 36px = height) */
    height: 100%;
    width: calc(var(--button-size-md) - 2px);
  }

  .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:r69-cart-drawer (INDEX:264) */
#cart-drawer {
    --r69cart-ink: var(--color-foreground);
    --r69cart-surface: var(--color-background);
    --r69cart-line: rgb(var(--color-foreground-rgb) / 0.1);
    --r69cart-line-soft: rgb(var(--color-foreground-rgb) / 0.07);
  }

  /* ---- Header : hairline + refined serif title + solid ink count ----
     Tighter vertically than the stock drawer padding (20px all round): the close button is 34px,
     so 12px blocks make a 59px bar instead of 75px, and those 16px go to the products. The inline
     padding stays at --theme-drawer-padding so the title lines up with the drawer gutter. */
  #cart-drawer .theme-drawer__header {
    padding-block: 12px;
    border-bottom: 1px solid var(--r69cart-line);
  }

  #cart-drawer .theme-drawer__title {
    font-family: var(--font-heading--family);
    letter-spacing: 0.01em;
  }

  #cart-drawer .theme-drawer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--r69cart-ink);
    color: var(--r69cart-surface);
    font-family: var(--font-subheading--family);
    font-size: 0.72rem;
    line-height: 1;
  }

  #cart-drawer .theme-drawer__close-button {
    color: var(--r69cart-ink);
  }

  /* ---- Items : no extra top/bottom padding ---- */
  #cart-drawer .cart-drawer__items {
    padding-block: 0;
  }

  /* ---- The drawer's space budget ----
     Exactly two things are pinned: the header at the top, and the total + checkout block at the
     bottom. Everything else — free-ship bar, products, upsell, note/discount accordions — lives in
     ONE scroll region and scrolls together. Before this, the bar, the upsell AND the whole summary
     (accordions included) were all fixed in place, the products were the only shrinkable box in the
     column, and on a phone they were squeezed down to a ~10px sliver. */

  #cart-drawer .cart-drawer__content {
    /* single scroller: don't hand the gesture to the page behind when it bottoms out */
    overscroll-behavior: contain;
  }

  /* The bar rides at the top of the scroll region instead of costing a fixed slot in the column.
     Needs its own background — products scroll underneath it. */
  #cart-drawer .r69-fsbar {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    background: var(--color-background);
  }

  /* Landscape phones / short windows: nothing but the checkout block is worth a permanent slot. */
  @media screen and (max-height: 620px) {
    #cart-drawer .r69-fsbar {
      position: static;
    }
  }

  #cart-drawer .r69-upsell {
    flex: 0 0 auto;
  }

  /* The accordions are now a direct child of the zero-padding scroll box, so they carry the drawer
     gutter themselves; their full-bleed hairlines stay full-bleed. `margin-block-start: auto` keeps
     them glued to the pinned footer while the cart is short enough not to scroll — and the summary
     gives up its own auto margin then, or the two would split the free space between them. */
  #cart-drawer .cart-drawer__content > .cart-actions {
    flex: 0 0 auto;
    padding-inline: var(--cart-drawer-padding);
    margin-block-start: auto;
  }

  #cart-drawer .cart-drawer__content > .cart-actions ~ .cart-drawer__summary {
    margin-top: 0;
  }

  #cart-drawer .cart-drawer__summary {
    flex: 0 0 auto;
  }

  /* No rule of its own above the total. Stock adds one to `.cart-totals` whenever it holds no
     `.cart-actions` — which is now always, since the accordions moved out — and it landed a second,
     inset line right under the full-bleed one the accordions already draw. */
  #cart-drawer .cart-drawer__summary .cart-totals {
    margin-block-start: 0;
    padding-block-start: var(--padding-xs);
    border-block-start: none;
  }

  /* Kill the dialog's own phantom scroll. <dialog> ships with UA `overflow: auto`, and the cart
     rows contain absolutely-positioned .visually-hidden a11y labels whose containing block is
     the dialog itself (no positioned ancestor in between), so intermediate overflow clipping
     never applies to them — with enough lines they extend the dialog's scrollable overflow far
     past its height. Once the list scroll ends, the gesture chains onto that dialog scroll and
     you keep scrolling into empty white space. `overflow: hidden` excludes the dialog from user
     scrolling/chaining entirely; the drawer content keeps its own scroll as before. */
  #cart-drawer .theme-drawer__dialog {
    overflow: hidden;
  }



  /* Newest line at the BOTTOM. Shopify prepends new lines (newest is first in the DOM), so we flip
     only the VISUAL order with column-reverse. The DOM order stays exactly as the section renders
     it, which keeps the cart's Section-Rendering morph reconciling/removing rows correctly.
     Drawer only — the /cart page keeps the default order. Rows are already `display: grid`, so the
     table semantics here are cosmetic and safe to override. */
  #cart-drawer .cart-items__table {
    display: block;
  }

  #cart-drawer .cart-items__table > tbody {
    display: flex;
    flex-direction: column-reverse;
  }

  /* ---- Line item — replicates FAORIA's custom drawer grid 1:1 ----
     Three columns: media | details | price-column. `details` is ONE cell that
     spans all rows and stacks its children in a flex column (title, variants,
     per-item price) — all LEFT-aligned. The price column holds the line total at
     the top and the quantity + trash at the bottom. Because `details` is the
     tallest column, its last child (the per-item price) lands level with the
     bottom-pinned quantity — so the per-item price stays on the LEFT, at the
     bottom, level with the quantity, without being moved to the right.
     Scoped to #cart-drawer, so the /cart page grid is untouched. */
  #cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    /* The variant line gets the whole width of its band. It used to sit inside the `details` cell,
       which is column 2 only — 118px at a 390px drawer and 88px at 360 — while "Izmērs: Ø 16.5 mm"
       needs 115px, so it wrapped to two and three lines with the right half of that band standing
       empty (only the error message ever lands there, and only when something is wrong).
       The row keeps its shape otherwise: name and line total on the first band, then the variants,
       then the per-item price sitting level with the quantity at the bottom — the empty `.` band
       below takes the slack that used to come from `details` being stretched. */
    grid-template-rows: min-content min-content min-content 1fr min-content;
    grid-template-areas:
      'media details    price'
      'media variants   variants'
      'media error      error'
      'media .          .'
      'media bottom     bottom';
    column-gap: 14px;
    align-items: start;
    padding-block: 16px;
    margin-block: 0;
    border-bottom: 1px solid var(--r69cart-line-soft);
  }

  /* The list is visually flipped (column-reverse), so the visual-bottom row is the FIRST in the
     DOM — drop the divider there (not on the DOM-last row, which is now the visual top). */
  #cart-drawer .cart-items__table-row--full-width-variants:first-of-type {
    border-bottom: none;
  }

  /* Details: a single spanning cell stretched to the full row height; children
     stack left-aligned, and the per-item price is pushed to the bottom (below) so
     it stays level with the bottom-pinned quantity even when there's no variant
     and the image is the tallest thing in the row. */
  /* `display: contents` so the three children take grid areas of their own — that is what lets the
     variants span both columns. The wrapper itself no longer holds them in a flex column, so the
     colour it carried moves onto the row. */
  #cart-drawer .cart-items__details {
    display: contents;
  }

  #cart-drawer .cart-items__table-row--full-width-variants {
    color: var(--r69cart-ink);
  }

  #cart-drawer .cart-items__product-info {
    grid-area: details;
    min-width: 0;
  }

  #cart-drawer .cart-items__variants-wrapper {
    grid-area: variants;
  }

  /* The per-item price and the quantity share the last band, one pinned to each end. They used to
     have a column each, which made the quantity — the widest thing in the row — set the width of
     the whole right-hand column, and the NAME above was cut off at that column's edge with ~55px
     of empty space still between it and the line total. With the quantity out of that column, the
     column is sized by the line total alone and the name runs until it nearly reaches it. */
  #cart-drawer .cart-items__unit-price-wrapper {
    grid-area: bottom;
    justify-self: start;
    align-self: end;
  }

  #cart-drawer .cart-items__details > * + * {
    margin-block-start: 0;
  }

  #cart-drawer .cart-items__media {
    grid-area: media;
    align-self: start;
    width: 72px;
  }

  #cart-drawer .cart-items__media-container,
  #cart-drawer .cart-items__media-image {
    border-radius: 4px;
    overflow: hidden;
  }

  /* Name: a touch smaller, one line, truncated with an ellipsis — never wraps or widens */
  #cart-drawer .cart-items__title-row {
    min-width: 0;
    max-width: 100%;
  }

  #cart-drawer .cart-items__title {
    font-family: var(--font-body--family);
    font-size: 0.85rem;
    color: var(--r69cart-ink);
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Per-item price — left-aligned, muted (FAORIA). It now sits in its own grid area on the last
     band, so it is level with the quantity by placement rather than by an auto margin inside a
     stretched cell. */
  #cart-drawer .cart-items__unit-price-wrapper {
    padding-block-start: 2px;
    font-size: 0.82rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground-rgb) / 0.7);
    text-align: start;
  }

  /* Line total — top-right, on the name's centre line (the name is the taller of the two, so
     `start` left the price sitting a few pixels high). */
  #cart-drawer .cart-items__price {
    grid-area: price;
    align-self: center;
    justify-self: end;
    text-align: right;
    min-width: 0;
    color: var(--r69cart-ink);
  }

  #cart-drawer .cart-items__error {
    grid-area: error;
  }

  /* Quantity + trash — bottom-right, level with the per-item price: same band, opposite end. */
  #cart-drawer .cart-items__quantity {
    grid-area: bottom;
    align-self: end;
    justify-self: end;
    margin-block-start: 8px;
  }

  #cart-drawer .cart-items__quantity .quantity-selector,
  #cart-drawer .cart-items__quantity .quantity-selector-wrapper,
  #cart-drawer .cart-items__quantity cart-quantity-selector-component {
    border: none;
    background: transparent;
    width: fit-content;
    min-width: 0;
    height: auto;
  }

  #cart-drawer .cart-items__quantity .quantity-minus,
  #cart-drawer .cart-items__quantity .quantity-plus {
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    color: var(--r69cart-ink);
  }

  #cart-drawer .cart-items__quantity .quantity-selector input {
    width: 26px;
    min-width: 0;
    max-width: 26px;
    padding: 0;
    text-align: center;
  }

  /* Trash — bare icon, nudged to the right edge, close to the plus.
     Pulled 3px right / 3px down so the whole [- n + trash] block hugs the corner. */
  #cart-drawer .cart-items__quantity-controls {
    gap: 14px;
    align-items: center;
    margin-right: -3px;
    margin-bottom: -3px;
  }

  #cart-drawer .cart-items__remove {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    margin-inline-start: -2px;
    color: var(--r69cart-ink);
  }

  /* ---- Note / discount accordions : editorial tracked labels + / -> - ---- */
  #cart-drawer .cart-note__label,
  #cart-drawer .cart-discount__label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-subheading--family);
  }

  /* icon-plus.svg: the ".horizontal" path is the vertical stroke — hide it when open -> minus */
  #cart-drawer details[open] .cart-totals__icon .horizontal {
    opacity: 0;
  }

  /* Discount field + button as ONE unit (like the footer newsletter) */
  #cart-drawer .cart-discount__form {
    gap: 0;
  }

  #cart-drawer .cart-discount__input {
    border-radius: 4px 0 0 4px;
    border-right: 0;
  }

  #cart-drawer .cart-discount__button {
    background: var(--r69cart-ink);
    color: var(--r69cart-surface);
    border: 0;
    border-radius: 0 4px 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-subheading--family);
    font-size: 0.72rem;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  #cart-drawer .cart-discount__button:hover {
    opacity: 0.85;
  }

  /* ---- Summary + checkout : crisp ink rectangle, uppercase Manrope ---- */
  #cart-drawer .cart__checkout-button {
    background: var(--r69cart-ink);
    color: var(--r69cart-surface);
    border: 0;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-subheading--family);
    font-weight: 600;
    transition: opacity 0.2s ease;
  }

  #cart-drawer .cart__checkout-button:hover {
    opacity: 0.88;
  }

  /* ---- Empty state ---- */
  #cart-drawer .cart-items__empty-button {
    background: var(--r69cart-ink);
    color: var(--r69cart-surface);
    border: 0;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-subheading--family);
  }

  #cart-drawer .cart-items__empty-button:hover {
    opacity: 0.85;
  }
/* END_SNIPPET:r69-cart-drawer */
/* START_SNIPPET:r69-cart-toast (INDEX:266) */
.r69-cart-toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(340px, calc(100vw - 36px));
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--color-foreground);
    color: var(--color-background);
    box-shadow: 0 8px 30px rgb(14 14 14 / 0.28);
    font-family: var(--font-body--family);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .r69-cart-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .r69-cart-toast__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-background);
  }

  .r69-cart-toast__text {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  .r69-cart-toast__view {
    margin-inline-start: auto;
    flex: 0 0 auto;
    color: var(--color-background);
    font-family: var(--font-subheading--family);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
  }

  .r69-cart-toast__view:hover {
    opacity: 0.8;
  }

  @media (prefers-reduced-motion: reduce) {
    .r69-cart-toast {
      transition: opacity 0.25s ease;
      transform: none;
    }
  }
/* END_SNIPPET:r69-cart-toast */
/* START_SNIPPET:r69-cookie-consent (INDEX:268) */
/* ===== ROTAS69 — cookie consent reskin ===== */
  #shopify-pc__banner,
  #shopify-pc__prefs {
    --r69cc-bg: var(--color-background);
    --r69cc-ink: var(--color-foreground);
    --r69cc-ink-65: rgb(var(--color-foreground-rgb) / 0.65);
    --r69cc-line: rgb(var(--color-foreground-rgb) / 0.14);
    --r69cc-line-soft: rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* ---- Banner ---- */
  #shopify-pc__banner {
    background: var(--r69cc-bg) !important;
    color: var(--r69cc-ink) !important;
    border: 1px solid var(--r69cc-line) !important;
    border-radius: 4px !important;
    box-shadow:
      0 30px 64px -30px rgb(var(--color-foreground-rgb) / 0.45),
      0 4px 14px -10px rgb(var(--color-foreground-rgb) / 0.3) !important;
    font-family: var(--font-body--family) !important;
  }

  #shopify-pc__banner .shopify-pc__banner__wrapper {
    padding: clamp(20px, 3vw, 30px) !important;
    gap: clamp(16px, 2vw, 26px) !important;
  }

  #shopify-pc__banner__body-title {
    font-family: var(--font-heading--family) !important;
    font-weight: 400 !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.005em !important;
    color: var(--r69cc-ink) !important;
    margin: 0 0 8px !important;
  }

  #shopify-pc__banner .shopify-pc__banner__body p {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    color: var(--r69cc-ink-65) !important;
    margin: 0 !important;
  }

  #shopify-pc__banner__body-policy-link {
    color: var(--r69cc-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  /* Banner buttons — same voice as the site's ink buttons */
  #shopify-pc__banner .shopify-pc__banner__btns button {
    border-radius: 4px !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 13px 22px !important;
    min-height: 0 !important;
    line-height: 1 !important;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    cursor: pointer !important;
  }

  #shopify-pc__banner__btn-accept {
    order: 1 !important;
    background: var(--r69cc-ink) !important;
    color: var(--r69cc-bg) !important;
    border: 1px solid var(--r69cc-ink) !important;
  }

  #shopify-pc__banner__btn-accept:hover {
    opacity: 0.85 !important;
  }

  #shopify-pc__banner__btn-decline {
    order: 2 !important;
    background: transparent !important;
    color: var(--r69cc-ink) !important;
    border: 1px solid var(--r69cc-line) !important;
  }

  #shopify-pc__banner__btn-decline:hover {
    background: var(--r69cc-line-soft) !important;
  }

  #shopify-pc__banner__btn-manage-prefs {
    order: 3 !important;
    background: transparent !important;
    color: var(--r69cc-ink-65) !important;
    border: 0 !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 13px 10px !important;
  }

  #shopify-pc__banner__btn-manage-prefs:hover {
    color: var(--r69cc-ink) !important;
  }

  /* ---- Preferences modal ---- */
  #shopify-pc__prefs__overlay {
    background: rgb(var(--color-foreground-rgb) / 0.42) !important;
    backdrop-filter: blur(2px);
  }

  #shopify-pc__prefs__dialog {
    background: var(--r69cc-bg) !important;
    color: var(--r69cc-ink) !important;
    border: 1px solid var(--r69cc-line) !important;
    border-radius: 4px !important;
    box-shadow: 0 40px 80px -36px rgb(var(--color-foreground-rgb) / 0.55) !important;
    font-family: var(--font-body--family) !important;
  }

  #shopify-pc__prefs__dialog > header {
    border-bottom: 1px solid var(--r69cc-line-soft) !important;
  }

  #shopify-pc__prefs__header-title {
    font-family: var(--font-heading--family) !important;
    font-weight: 400 !important;
    font-size: 1.15rem !important;
    color: var(--r69cc-ink) !important;
  }

  #shopify-pc__prefs__header-close {
    color: var(--r69cc-ink) !important;
    opacity: 0.55 !important;
  }

  #shopify-pc__prefs__header-close:hover {
    opacity: 1 !important;
  }

  .shopify-pc__prefs__intro,
  #shopify-pc__prefs__dialog .shopify-pc__prefs__option p {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    color: var(--r69cc-ink-65) !important;
  }

  .shopify-pc__prefs__option {
    border-top: 1px solid var(--r69cc-line-soft) !important;
    padding-block: 18px !important;
  }

  .shopify-pc__prefs__option label,
  .shopify-pc__prefs__option > div:first-child {
    font-family: var(--font-body--family) !important;
    font-weight: 500 !important;
    color: var(--r69cc-ink) !important;
  }

  /* Header action buttons (accept / decline / save) */
  #shopify-pc__prefs__header-accept,
  #shopify-pc__prefs__header-save,
  #shopify-pc__prefs__header-decline {
    border-radius: 4px !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 11px 18px !important;
    cursor: pointer !important;
  }

  #shopify-pc__prefs__header-accept,
  #shopify-pc__prefs__header-save {
    background: var(--r69cc-ink) !important;
    color: var(--r69cc-bg) !important;
    border: 1px solid var(--r69cc-ink) !important;
  }

  #shopify-pc__prefs__header-decline {
    background: transparent !important;
    color: var(--r69cc-ink) !important;
    border: 1px solid var(--r69cc-line) !important;
  }

  /* Toggles — ink when on */
  #shopify-pc__prefs .shopify-pc__prefs__option input[type='checkbox']:checked + span {
    background-color: var(--r69cc-ink) !important;
    border-color: var(--r69cc-ink) !important;
  }
/* END_SNIPPET:r69-cookie-consent */
/* START_SNIPPET:r69-delivery-payment-styles (INDEX:270) */
.r69-delivery-payment {
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--r69-dp-text);
    background: var(--r69-dp-background);
    border: 1px solid var(--r69-dp-border);
    border-radius: 4px;
    font-family: var(--font-body--family);
  }

  .r69-delivery-payment__delivery,
  .r69-delivery-payment__payments {
    padding: 12px 14px;
  }

  /* Same icon + content grid as the delivery lead, so the lock lines up under the truck and the
     heading/icons start at the same indent as the summary above. */
  .r69-delivery-payment__payments {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 7px;
    align-items: center;
    border-top: 1px solid var(--r69-dp-border);
  }

  .r69-delivery-payment__lead {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .r69-delivery-payment__lead-icon,
  .r69-delivery-payment__lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .r69-delivery-payment__lead-icon {
    width: 22px;
    height: 22px;
    color: var(--r69-dp-text);
  }

  .r69-delivery-payment__lead-icon svg,
  .r69-delivery-payment__lock svg {
    width: 17px;
    height: 17px;
  }

  .r69-delivery-payment__lead-content {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .r69-delivery-payment__eyebrow {
    grid-column: 2;
    grid-row: 1;
    color: var(--r69-dp-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .r69-delivery-payment__summary {
    min-height: 18px;
    color: var(--r69-dp-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
  }

  .r69-delivery-payment__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 8px;
    /* Reserve the status line so the JS-filled text drops into place without shifting the block
       (the block only renders when a delivery method exists for the country, so this space is
       reserved only when there IS a block). */
    min-height: 16px;
    color: var(--r69-dp-muted);
    font-size: 11px;
    font-weight: 550;
    line-height: 1.4;
  }

  .r69-delivery-payment__info-button {
    cursor: pointer;
    display: inline;
    padding: 0;
    overflow: visible;
    color: var(--r69-dp-text);
    font: inherit;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .r69-delivery-payment__methods {
    display: grid;
    border-top: 1px solid var(--r69-dp-border);
  }

  .r69-delivery-method {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--r69-dp-border);
  }

  .r69-delivery-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--r69-dp-muted);
  }

  .r69-delivery-method__icon svg {
    width: 20px;
    height: 20px;
  }

  .r69-delivery-method__content {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .r69-delivery-method__title,
  .r69-delivery-method__price {
    color: var(--r69-dp-text);
    font-size: 13px;
    line-height: 1.35;
  }

  .r69-delivery-method__title {
    font-weight: 650;
  }

  .r69-delivery-method__price {
    align-self: start;
    padding-top: 1px;
    font-weight: 700;
    white-space: nowrap;
  }

  .r69-delivery-method__note,
  .r69-delivery-method__date,
  .r69-delivery-method__free-over {
    color: var(--r69-dp-muted);
    font-size: 11px;
    line-height: 1.4;
  }

  .r69-delivery-payment__lock {
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 22px;
    color: var(--r69-dp-text);
  }

  .r69-delivery-payment__payment-icons {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }

  .r69-delivery-payment__payment-icon {
    display: inline-flex;
    align-items: center;
    height: 22px;
  }

  .r69-delivery-payment__payment-icon .icon,
  .r69-delivery-payment__payment-icon > svg {
    width: auto;
    height: 22px;
  }

  /* Standalone native modal drawer (showModal): fixed to the right edge, full height, with a
     dimmed ::backdrop on every viewport — a plain overlay drawer, not the theme's sidebar mode. */
  .r69-delivery-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl, 24px);

    position: fixed;
    inset: 0 0 0 auto;
    /* Match the cart drawer exactly (owner request): same width var, border, backdrop and timing. */
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background: var(--color-background, #fff);
    color: var(--r69-dp-text);
    overflow: hidden;
  }

  .r69-delivery-drawer__dialog[open] {
    display: flex;
    flex-direction: column;
    animation: r69-dp-drawer-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .r69-delivery-drawer__dialog::backdrop {
    /* Literal black dim (like the cart drawer): --backdrop-color-rgb is empty in this theme, and
       custom properties do not inherit into ::backdrop on older engines. */
    background: rgb(0 0 0 / 0.42);
  }

  .r69-delivery-drawer__dialog[open]::backdrop {
    animation: r69-dp-backdrop-in var(--animation-speed) ease;
  }

  @keyframes r69-dp-drawer-in {
    from {
      transform: translateX(100%);
    }
  }

  @keyframes r69-dp-backdrop-in {
    from {
      opacity: 0;
    }
  }

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

  .r69-delivery-drawer__header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--r69-dp-border);
  }

  .r69-delivery-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--theme-drawer-padding) var(--theme-drawer-padding);
  }

  .r69-delivery-drawer__summary {
    display: block;
    padding: 18px 0 8px;
    font-size: 17px;
    line-height: 1.4;
  }

  .r69-delivery-drawer__intro {
    margin-bottom: 18px;
    color: var(--r69-dp-muted);
    font-size: 13px;
    line-height: 1.55;
  }

  .r69-delivery-drawer__intro h3 {
    margin: 22px 0 8px;
    color: var(--r69-dp-text);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .r69-delivery-drawer__intro p,
  .r69-delivery-drawer__intro ul {
    margin: 0 0 12px;
  }

  .r69-delivery-drawer__intro ul {
    padding-inline-start: 18px;
  }

  .r69-delivery-drawer__intro li + li {
    margin-top: 6px;
  }

  .r69-delivery-drawer__policy {
    display: inline-flex;
    gap: 7px;
    margin-top: 20px;
    color: var(--r69-dp-text);
    font-size: 13px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  @media (max-width: 749px) {
    .r69-delivery-payment__delivery,
    .r69-delivery-payment__payments {
      padding: 11px 12px;
    }

    .r69-delivery-method {
      grid-template-columns: 24px minmax(0, 1fr) auto;
      gap: 8px;
    }

    .r69-delivery-method__icon {
      width: 24px;
      height: 24px;
    }

    .r69-delivery-method__icon svg {
      width: 18px;
      height: 18px;
    }
  }
/* END_SNIPPET:r69-delivery-payment-styles */
/* START_SNIPPET:r69-jdgm-badge (INDEX:272) */
.jdgm-widget.jdgm-revs-tab {
    z-index: 5 !important;
  }
/* END_SNIPPET:r69-jdgm-badge */
/* START_SNIPPET:r69-judgeme (INDEX:273) */
/* Width of this browser's classic scrollbar, measured once by the script above and re-measured on
     resize (zoom changes it). It starts at zero because that is what the value IS until a scrollbar
     has been observed — and it stays zero on the platforms that draw scrollbars as overlays. */
  :root {
    --r69-sbw: 0px;
  }

  /* ROTAS69 PERF: NO content-visibility on the PDP reviews section. Instrumented live: its c-v
     render boundary crossed the viewport margin exactly while the PAIRING section was on screen
     (~scrollTop 2000-2100), so the browser un-skipped and style+laid-out the whole fresh Judge
     subtree in ONE frame right there (+~300px height jump at the same instant) = the scroll FREEZE
     "at pairing" right after reload, gone after Judge settles. Without c-v the Judge subtree lays
     out incrementally during load instead of one cliff pinned to mid-scroll.
     `contain: layout style` keeps the win that matters: Judge's boot-time forced reflows (measured
     283ms/101ms long frames in the first seconds) stay confined to this section's subtree instead
     of re-laying-out the entire page. (Section-key SUFFIX match — Shopify prefixes JSON-template
     section ids with `template--<templateId>__`. Inert on every other page.) */
  [id$="__17839473264b05a7d4"] {
    /* G1 experiment (owner-approved): content-visibility:auto is BACK now that the theme scrolls the
       ROOT (the old mid-scroll rasterization cliff was a .page-wrapper div-scroller artifact — that
       scroller is gone). cv:auto skips rendering the whole Judge subtree until approach AND implies
       layout/style containment (the old `contain: layout style` boot-reflow win is preserved).
       The JS min-height ratchet + skeleton keep the reserved height, so contain-intrinsic-size is a
       first-paint estimate only. Rollback = revert to `contain: layout style`. */
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
  }
  /* Skeleton while Judge builds the review list (JS adds/removes .r69-rev-skel): reserves the space
     (no jump when cards land) and shows quiet placeholder rows instead of a blank band. */
  [id$="__17839473264b05a7d4"].r69-rev-skel {
    /* FIXED height + overflow:hidden — not min-height. The owner's live traces showed the section
       PULSING 1100->1858->1100->1498 five-six times in the first ~2s (Judge builds, replaces and
       rebuilds its DOM; opacity:0 hides it visually but NOT from layout), each pulse = a full-page
       reflow right as you start scrolling after a reload. A fixed box makes the section height
       CONSTANT through the whole build; reveal() then makes ONE final below-fold adjustment. */
    height: 1100px;
    overflow: hidden;
    position: relative;
  }
  [id$="__17839473264b05a7d4"].r69-rev-skel > :not(.r69-rev-skelbox) {
    opacity: 0;
  }
  /* Skeleton that mirrors the real widget's layout: centered title + rating row, histogram +
     AI-summary band, then the masonry-like grid of white review cards. Static (no animation). */
  .r69-rev-skelbox {
    position: absolute;
    /* full-bleed like the real widget (it spans the section width) — the old 1200px cap made the
       skeleton visibly narrower than what Judge renders on wide screens */
    inset: 30px 24px auto 24px;
    pointer-events: none;
  }
  .r69-rev-skelbox i,
  .r69-rev-skelbox span {
    display: block;
  }
  .r69-rev-skelbox__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
  }
  .r69-rev-skelbox__title {
    width: 250px;
    height: 26px;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.07);
  }
  .r69-rev-skelbox__stars {
    width: 150px;
    height: 14px;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .r69-rev-skelbox__sum {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
  }
  .r69-rev-skelbox__histo {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .r69-rev-skelbox__histo i {
    height: 10px;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.07);
  }
  .r69-rev-skelbox__histo i:nth-child(1) { width: 100%; }
  .r69-rev-skelbox__histo i:nth-child(2) { width: 56%; }
  .r69-rev-skelbox__histo i:nth-child(3) { width: 32%; }
  .r69-rev-skelbox__histo i:nth-child(4) { width: 18%; }
  .r69-rev-skelbox__histo i:nth-child(5) { width: 10%; }
  .r69-rev-skelbox__ai {
    flex: 1;
    height: 96px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }
  .r69-rev-skelbox__grid {
    display: grid;
    /* column count mirrors Judge's masonry (1/2/3/4 by viewport), matching the JS height estimate */
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 600px) { .r69-rev-skelbox__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .r69-rev-skelbox__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1280px) { .r69-rev-skelbox__grid { grid-template-columns: repeat(4, 1fr); } }
  .r69-rev-skelbox__card {
    background: #ffffff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: 4px;
    padding: 18px;
  }
  .r69-rev-skelbox__card i {
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .r69-rev-skelbox__ava {
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: rgb(var(--color-foreground-rgb) / 0.08) !important;
    margin-bottom: 13px;
  }
  .r69-rev-skelbox__l1 { width: 45%; height: 12px; margin-bottom: 9px; }
  .r69-rev-skelbox__l2 { width: 100%; height: 10px; margin-bottom: 7px; }
  .r69-rev-skelbox__l3 { width: 92%; height: 10px; margin-bottom: 7px; }
  .r69-rev-skelbox__l4 { width: 60%; height: 10px; }
  @media screen and (max-width: 749px) {
    .r69-rev-skelbox__sum { flex-direction: column; }
    .r69-rev-skelbox__histo { flex-basis: auto; }
  }

  /* Wine store-reply accent (ROTAS69 has no --color-primary; wine == the theme's "trending" badge) */
  .jdgm-widget-revamp,
  .jdgm-modal,
  .jm-mfp-content,
  .jdgm-review-widget { --r69-rev-accent: #7A2F45; --r69-rev-accent-rgb: 122 47 69; }

  /* Legacy review widget (.jdgm-review-widget) — Judge renders THIS empty-state widget on products
     with NO reviews yet (the revamp widget only appears once reviews exist), so no-review PDPs looked
     native. Brand it: Cormorant title, muted intro, ink write/ask buttons at 4px, wine stars. */
  .jdgm-review-widget { font-family: var(--font-body--family); }
  /* Fill the page-width section (Judge caps this widget at 1200px and centres it, so on wide desktop
     it read as a narrow floating card, not a section). Let it span the section's content width. */
  .jdgm-review-widget { max-width: none !important; margin-inline: 0 !important; }
  .jdgm-review-widget .jdgm-rev-widg { padding: 0 !important; }
  .jdgm-review-widget .jdgm-rev-widg__header { border-radius: 4px !important; }
  .jdgm-review-widget .jdgm-rev-widg__title {
    font-family: var(--font-heading--family); font-weight: 500; text-transform: none;
    letter-spacing: 0; color: rgb(var(--color-foreground-rgb));
  }
  .jdgm-review-widget .jdgm-rev-widg__summary-text,
  .jdgm-review-widget .jdgm-rev-widg__summary { color: rgb(var(--color-foreground-rgb) / 0.68); }
  .jdgm-review-widget .jdgm-write-rev-link,
  .jdgm-review-widget .jdgm-ask-question-btn {
    background: rgb(var(--color-foreground-rgb)); color: var(--color-background);
    border: 0; border-radius: 4px; box-shadow: none; text-transform: none;
    letter-spacing: 0.02em; font-family: var(--font-body--family);
  }
  .jdgm-review-widget .jdgm-star.jdgm--on,
  .jdgm-review-widget .jdgm-star.jdgm--half { color: rgb(var(--r69-rev-accent-rgb)); }

  /* Inline empty-state FORMS (.jdgm-form: ask-a-question + write-review) → ROTAS69. These are Judge's
     OLD-style inline forms (unclassed inputs at 20px radius, .jdgm-btn pills at 25px) — a DIFFERENT
     shell from the revamp modal form styled in section 6 below. */
  .jdgm-review-widget .jdgm-form__title {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem) !important;
  }
  .jdgm-review-widget .jdgm-form__fieldset > label {
    font-family: var(--font-body--family) !important;
    font-size: 0.7rem !important; font-weight: 600 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
  }
  .jdgm-review-widget .jdgm-form input[type="text"],
  .jdgm-review-widget .jdgm-form input[type="email"],
  .jdgm-review-widget .jdgm-form textarea {
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22) !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    font-family: var(--font-body--family) !important;
    box-shadow: none !important;
  }
  .jdgm-review-widget .jdgm-form input[type="text"]:focus,
  .jdgm-review-widget .jdgm-form input[type="email"]:focus,
  .jdgm-review-widget .jdgm-form textarea:focus {
    border-color: rgb(var(--color-foreground-rgb) / 0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(var(--color-foreground-rgb) / 0.06) !important;
  }
  .jdgm-review-widget .jdgm-form input::placeholder,
  .jdgm-review-widget .jdgm-form textarea::placeholder { color: rgb(var(--color-foreground-rgb) / 0.4) !important; }
  /* form buttons: solid = ink fill, border = ink outline, both 4px (the pill radius was the eyesore) */
  .jdgm-review-widget .jdgm-btn.jdgm-btn--solid {
    background: rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
    border: 1px solid rgb(var(--color-foreground-rgb)) !important;
    border-radius: 4px !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: 0.02em !important;
    font-family: var(--font-body--family) !important;
  }
  .jdgm-review-widget .jdgm-btn.jdgm-btn--border {
    background: transparent !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.4) !important;
    border-radius: 4px !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: 0.02em !important;
    font-family: var(--font-body--family) !important;
  }

  /* ─────────────────────────────────────────────────────────────
     1. Review SNIPPET carousel (.jdgm-rev-snippet-card) → ROTAS69
     ───────────────────────────────────────────────────────────── */
  /* Default: while the wrapper holds no card it collapses to nothing — no skeleton, no empty box. On
     a product WITH a text review the per-product gate at the top of this snippet emits a higher-
     specificity rule that instead HOLDS 133px here (so Judge's card fills a reserved slot rather than
     pushing the page). On rating-only / 0-review products no such rule is emitted, so this collapse
     stands and they show nothing. Why the split can't be pure CSS: only the server SSR-HTML metafield
     tells text reviews from rating-only ones — see the note at the top of this snippet. */
  .jdgm-review-snippet-widget-wrapper { position: relative; }
  .jdgm-review-snippet-widget-wrapper:not(:has(.jdgm-rev-snippet-card)) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Uniform card height so paging the one-at-a-time carousel never changes height, and a 1-line and a
     2-line review are the same size. A card is header (1 line) + body (clamped to 2 lines) + optional
     "read more" link; pin all cards to the tallest (2-line + link) state and center the content so a
     shorter review sits centered instead of leaving a bottom gap. */
  .jdgm-rev-snippet-card {
    min-height: 113px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* Keep the "stars · name" header on ONE line so a long reviewer name can't add a second row and make
     cards uneven. The name ellipsis-truncates instead. */
  .jdgm-rev-snippet-card__rev-header { flex-wrap: nowrap !important; }
  .jdgm-rev-snippet-card__reviewer {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Ink stars */
  .jdgm-horizon-widget .jdgm-star.jdgm--on,
  .jdgm-horizon-widget .jdgm-star.jdgm--half { color: rgb(var(--color-foreground-rgb)) !important; }
  .jdgm-horizon-widget .jdgm-star.jdgm--off { color: rgb(var(--color-foreground-rgb) / 0.2) !important; }
  .jdgm-rev-snippet-card__rev-rating .jdgm-star { font-size: 14px !important; letter-spacing: 1px; }

  /* Card → full width, 4px corners, hairline, no shadow; relative so the edge chevrons anchor to it */
  .jdgm-review-snippet-widget { position: relative !important; }
  .jdgm-rev-snippet-card {
    flex-grow: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 16px 30px !important;
    font-family: var(--font-body--family) !important;
  }

  /* Header → stars · name on one line, separated by a centred middot */
  .jdgm-rev-snippet-card__rev-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: wrap;
  }
  .jdgm-rev-snippet-card__reviewer {
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
    font-family: var(--font-body--family) !important;
    font-weight: 600 !important; font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-rev-snippet-card__reviewer::before {
    content: "·";
    margin: 0 9px;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    font-weight: 700;
  }
  .jdgm-rev-snippet-card__rev-body {
    font-family: var(--font-body--family) !important;
    font-size: 0.88rem !important; line-height: 1.6 !important;
    color: rgb(var(--color-foreground-rgb) / 0.8) !important;
    margin-top: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .jdgm-rev-snippet-card__full-review-link {
    font-size: 0.76rem !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
    text-decoration: underline; text-underline-offset: 0.18em;
  }

  /* Chevrons → bare ink glyphs on the block's left/right edges (no circle/fill), vertically centred */
  .jdgm-rev-snippet-widget__prev-btn,
  .jdgm-rev-snippet-widget__next-btn {
    position: absolute !important;
    top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important; height: auto !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 6px !important;
    background: none !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
    font-size: 26px !important;
    transition: color 0.2s ease;
  }
  .jdgm-rev-snippet-widget__prev-btn { left: 2px !important; right: auto !important; }
  .jdgm-rev-snippet-widget__next-btn { right: 2px !important; left: auto !important; }
  .jdgm-rev-snippet-widget__prev-btn:hover,
  .jdgm-rev-snippet-widget__next-btn:hover {
    color: rgb(var(--color-foreground-rgb)) !important;
    background: none !important;
  }
  .jdgm-rev-snippet-widget__prev-btn svg,
  .jdgm-rev-snippet-widget__next-btn svg {
    width: auto !important;
    height: 16px !important;
    fill: rgb(var(--color-foreground-rgb) / 0.55) !important;
    transition: fill 0.2s ease;
  }
  .jdgm-rev-snippet-widget__prev-btn:hover svg,
  .jdgm-rev-snippet-widget__next-btn:hover svg {
    fill: rgb(var(--color-foreground-rgb)) !important;
  }

  /* ─────────────────────────────────────────────────────────────
     2. Snippet MODAL (Magnific Popup, .jdgm-full-rev) → ROTAS69
     ───────────────────────────────────────────────────────────── */
  .jm-mfp-bg { background: rgb(var(--color-foreground-rgb) / 0.5) !important; opacity: 1 !important; }
  .jm-mfp-content {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    padding: 38px 42px !important;
    box-shadow: 0 16px 50px rgb(var(--color-foreground-rgb) / 0.22) !important;
    font-family: var(--font-body--family) !important;
  }
  .jm-mfp-content .jdgm-full-rev,
  .jm-mfp-content > .jdgm-full-rev {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  /* Close → hairline 4px square + thin drawn X, tucked top-right (matches the delivery/size drawer) */
  .jm-mfp-close {
    position: absolute !important; top: 14px !important; right: 14px !important;
    width: 36px !important; height: 36px !important;
    margin: 0 !important; padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2) !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    opacity: 1 !important; font-size: 0 !important; box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
  }
  .jm-mfp-close:hover {
    opacity: 1 !important;
    border-color: rgb(var(--color-foreground-rgb) / 0.5) !important;
    background: rgb(var(--color-foreground-rgb) / 0.05) !important;
  }
  .jm-mfp-close::before, .jm-mfp-close::after {
    content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important;
    width: 15px !important; height: 1.5px !important; background: currentColor !important;
  }
  .jm-mfp-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
  .jm-mfp-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
  .jdgm-full-rev .jdgm-star.jdgm--on,
  .jdgm-full-rev .jdgm-star.jdgm--half { color: rgb(var(--color-foreground-rgb)) !important; }
  .jdgm-full-rev .jdgm-star.jdgm--off { color: rgb(var(--color-foreground-rgb) / 0.2) !important; }
  .jdgm-full-rev__icon {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    border-radius: 50% !important; overflow: hidden !important;
    background: rgb(var(--color-foreground-rgb) / 0.06) !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
    flex: 0 0 auto !important; margin-right: 12px !important;
  }
  .jdgm-full-rev__icon svg, .jdgm-full-rev__icon img { width: 22px !important; height: 22px !important; }
  .jm-mfp-content .jdgm-full-rev__rating_and_timestamp_wrapper {
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }
  .jdgm-full-rev__timestamp {
    color: rgb(var(--color-foreground-rgb) / 0.5) !important;
    font-size: 0.88rem !important; font-family: var(--font-body--family) !important;
  }
  .jdgm-full-rev__reviewer-name {
    font-family: var(--font-body--family) !important;
    font-weight: 600 !important; font-size: 1rem !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-full-rev__location-wrapper {
    display: flex !important; align-items: center !important; gap: 7px !important;
    margin-top: 4px !important;
  }
  .jdgm-full-rev__location-country-flag-img { order: 0 !important; margin: 0 0 0 3px !important; height: 13px !important; width: auto !important; }
  .jdgm-full-rev__location {
    font-family: var(--font-body--family) !important;
    font-size: 0.8rem !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
  }
  .jdgm-full-rev__title {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important; font-size: 1.3rem !important;
    line-height: 1.2 !important; letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-full-rev__body {
    font-family: var(--font-body--family) !important;
    font-size: 0.95rem !important; line-height: 1.65 !important;
    color: rgb(var(--color-foreground-rgb) / 0.82) !important;
  }
  /* Store reply → inset WINE quote (the snippet modal uses .jdgm-full-rev__reply) */
  .jdgm-full-rev__reply {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    background: rgb(var(--r69-rev-accent-rgb) / 0.06) !important;
    border-left: 2px solid var(--r69-rev-accent) !important;
    border-radius: 4px !important;
  }
  .jdgm-full-rev__replier-wrapper {
    font-size: 0.66rem !important; letter-spacing: 0.12em !important;
    text-transform: uppercase !important; font-weight: 700 !important;
    color: var(--r69-rev-accent) !important;
    margin-bottom: 4px !important;
  }
  .jdgm-full-rev__reply-content,
  .jdgm-full-rev__reply-content p {
    font-family: var(--font-body--family) !important;
    font-size: 0.88rem !important; line-height: 1.55 !important;
    color: rgb(var(--color-foreground-rgb) / 0.78) !important;
  }
  .jdgm-full-rev__product-button {
    background: rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
    border: none !important; border-radius: 4px !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.74rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     3. Revamp "Klientu atsauksmes" widget (.jdgm-widget-revamp) → ROTAS69
     ═══════════════════════════════════════════════════════════════════════ */
  .jdgm-widget.jdgm-widget-revamp {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    --jdgm-star-color: rgb(14 14 14);
    --jdgm-primary-color: rgb(14 14 14);
  }
  .jdgm-widget-revamp,
  .jdgm-widget-revamp .jm-text { font-family: var(--font-body--family) !important; }

  /* Ink stars */
  .jdgm-widget-revamp .jm-star-rating__font-icon { color: rgb(var(--color-foreground-rgb)) !important; }

  /* 4px corners everywhere — the ROTAS69 signature (kills Judge.me's 8px/24px radius) */
  .jdgm-widget-revamp .jm-button,
  .jdgm-widget-revamp .jm-sort-filter__select,
  .jdgm-widget-revamp .jdgm-tab-dropdown__select,
  .jdgm-widget-revamp .jm-search-bar,
  .jdgm-widget-revamp .jm-media-grid__item,
  .jdgm-widget-revamp .jm-media-grid__image,
  .jdgm-widget-revamp .jm-media-grid__image-container,
  .jdgm-widget-revamp .jm-media-grid__arrow,
  .jdgm-widget-revamp .jdgm-review-card,
  .jdgm-widget-revamp .jdgm-review-card__media-thumbnail,
  .jdgm-widget-revamp .jdgm-review-card__media-frame,
  .jdgm-widget-revamp .jdgm-review-card__media-frame img,
  .jdgm-widget-revamp input,
  .jdgm-widget-revamp img.jdgm-review-card__reviewer-info-flag { border-radius: 4px !important; }

  /* Header: "Klientu atsauksmes" → Cormorant heading (both header variants). No injected eyebrow —
     ROTAS69 is multilingual and the title already reads clearly per locale. */
  .jdgm-widget-revamp .jm-review-widget-minimal-header__title,
  .jdgm-widget-revamp .jm-review-widget-header__title {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important;
    font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
    line-height: 1.12 !important; letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  /* average rating: "4.9" bold ink, "(N reviews)" muted — 0.68 (not 0.55) to clear WCAG AA 4.5:1 */
  .jdgm-widget-revamp .jm-average-rating-display .jm-text {
    color: rgb(var(--color-foreground-rgb) / 0.68) !important;
  }
  .jdgm-widget-revamp .jm-average-rating-display p.jm-text:first-of-type {
    font-weight: 700 !important; font-size: 0.95rem !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }

  /* ── A11y contrast (WCAG AA 4.5:1) ──────────────────────────────────────────────
     Judge's muted grays render ~#7b7b7b–#939393 on the cream/white review surfaces, which fails
     4.5:1 (measured 3.07–4.29 in PSI). Floor the muted SECONDARY text at ink/0.68 (≈#575757 on
     cream, ≈#5b5b5b on white — both ≥4.5:1) while keeping it visibly muted. Scoped to secondary
     bits only (location, histogram counts, variant-card labels, inactive tabs) so review body text
     is untouched. */
  .jdgm-widget-revamp .jm-histogram-row__frequency,
  .jdgm-widget-revamp .jm-location,
  .jdgm-widget-revamp .jm-product-variant-card__variant-title,
  .jdgm-widget-revamp .jm-product-variant-card .jm-text,
  .jdgm-tablist .jdgm-tab,
  .jdgm-tablist__list .jdgm-tab,
  /* review-card meta rows (reviewer name / location / date) — direct .jm-text of a cluster/box,
     matching PSI's failing selectors; NOT the review body (a different container). Broadened to any
     Judge widget wrapper ([class*="jdgm-widget"]) + element specificity (p/span) so it wins over
     Judge's own mobile rule (the muted meta stacks into .jm-box only on narrow viewports). */
  .jm-cluster > p.jm-text,
  .jm-cluster > span.jm-text,
  .jm-box > p.jm-text,
  .jm-box > span.jm-text {
    color: rgb(var(--color-foreground-rgb) / 0.7) !important;
  }

  /* Buttons: primary = ink fill, secondary (search/filter/sort) = hairline */
  .jdgm-widget-revamp .jm-button--primary {
    background: rgb(var(--color-foreground-rgb)) !important;
    border: 1px solid rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
    font-size: 0.72rem !important; font-weight: 600 !important;
    letter-spacing: 0.12em !important; text-transform: uppercase !important;
    padding: 12px 20px !important;
    transition: opacity 0.2s ease !important;
  }
  .jdgm-widget-revamp .jm-button--primary:hover { opacity: 0.85 !important; }
  .jdgm-widget-revamp .jm-button--secondary,
  .jdgm-widget-revamp .jm-sort-filter__select,
  .jdgm-widget-revamp .jdgm-tab-dropdown__select {
    background: transparent !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22) !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    font-size: 0.72rem !important; letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s ease !important;
  }
  .jdgm-widget-revamp .jm-button--secondary:hover,
  .jdgm-widget-revamp .jm-sort-filter__select:hover,
  .jdgm-widget-revamp .jdgm-tab-dropdown__select:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.5) !important;
  }
  .jdgm-widget-revamp .jm-sort-filter__select,
  .jdgm-widget-revamp .jdgm-tab-dropdown__select {
    padding-right: 36px !important;
    text-overflow: clip !important;
  }

  /* Photo strip (media preview) → 4px tiles, soft ink arrows */
  .jdgm-widget-revamp .jm-media-grid__item { overflow: hidden !important; }
  .jdgm-widget-revamp .jm-media-grid__arrow {
    background: var(--color-background) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12) !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    box-shadow: 0 2px 10px rgb(var(--color-foreground-rgb) / 0.1) !important;
  }

  /* Review cards → white surface, hairline, 4px, padding */
  .jdgm-widget-revamp .jdgm-review-card {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1) !important;
  }
  .jdgm-widget-revamp .jdgm-review-card__content {
    box-sizing: border-box !important;
    padding: 22px 24px !important;
    background: transparent !important;
  }
  .jdgm-widget-revamp .jdgm-review-card__name {
    font-weight: 600 !important; font-size: 0.92rem !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-widget-revamp .jm-location {
    font-size: 0.78rem !important;
    color: rgb(var(--color-foreground-rgb) / 0.68) !important; /* was 0.55 (#7b7b7b) — WCAG AA */
  }
  .jdgm-widget-revamp img.jdgm-review-card__reviewer-info-flag { height: 12px !important; width: auto !important; }
  .jdgm-widget-revamp .jdgm-review-card__content .jm-stack--space-50 .jm-box .jm-text {
    font-size: 0.74rem !important;
    color: rgb(var(--color-foreground-rgb) / 0.68) !important; /* review date — was 0.45 (#939393) — WCAG AA */
  }
  .jdgm-widget-revamp .jdgm-review-card__title {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important; font-size: 1.18rem !important;
    line-height: 1.25 !important; letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-widget-revamp .jdgm-review-card__body,
  .jdgm-widget-revamp .jdgm-review-card__body p {
    font-size: 0.9rem !important; line-height: 1.62 !important;
    color: rgb(var(--color-foreground-rgb) / 0.8) !important;
  }
  .jdgm-widget-revamp .jm-transparency-badge-list,
  .jdgm-widget-revamp .jm-transparency-badge-list .jm-text {
    font-size: 0.68rem !important; letter-spacing: 0.02em !important;
    color: rgb(var(--color-foreground-rgb) / 0.4) !important;
  }
  .jdgm-widget-revamp .jdgm-review-card__media-frame {
    overflow: hidden !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08) !important;
  }
  .jdgm-widget-revamp .jdgm-review-card__translate-button .jm-text,
  .jdgm-widget-revamp .jdgm-translate-button {
    font-size: 0.76rem !important; letter-spacing: 0.02em !important;
    color: rgb(var(--color-foreground-rgb) / 0.6) !important;
    text-decoration: underline; text-underline-offset: 0.18em;
  }
  .jdgm-widget-revamp .jdgm-translate-icon { opacity: 0.6; }

  /* Native "Pārbaudīts" verified-buyer pill → ROTAS69 hairline ink pill with a leading check
     (Judge draws the pill border on the __text element; refine that + add the ✓ affordance) */
  .jdgm-widget-revamp .jm-verified-buyer-badge__text {
    display: inline-flex !important; align-items: center !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22) !important;
    border-radius: 4px !important;
    background: rgb(var(--color-foreground-rgb) / 0.04) !important;
    color: rgb(var(--color-foreground-rgb) / 0.72) !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.68rem !important; font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    padding: 3px 8px 3px 7px !important;
  }
  .jdgm-widget-revamp .jm-verified-buyer-badge__text::before {
    content: "✓"; margin-inline-end: 5px; font-weight: 700;
    color: rgb(var(--color-foreground-rgb) / 0.9);
  }

  /* Store reply → inset WINE quote, the ROTAS69 "house voice". Tagged with .r69-reply by JS instead
     of a CSS :has() — :has() on `.jm-stack--space-200` was re-evaluated for every reply container as
     Judge streamed hundreds of reviews into the reviews page, which froze it. */
  .jdgm-widget-revamp .jm-stack--space-200.r69-reply {
    margin-top: 4px !important;
    padding: 12px 14px !important;
    background: rgb(var(--r69-rev-accent-rgb) / 0.06) !important;
    border-left: 2px solid var(--r69-rev-accent) !important;
    border-radius: 4px !important;
  }
  .jdgm-widget-revamp .jm-stack--space-200.r69-reply > p.jm-text:first-child {
    font-size: 0.66rem !important; letter-spacing: 0.12em !important;
    text-transform: uppercase !important; font-weight: 700 !important;
    color: var(--r69-rev-accent) !important;
  }
  .jdgm-widget-revamp .jdgm-review-card__reply-content,
  .jdgm-widget-revamp .jdgm-review-card__reply-content p {
    font-size: 0.86rem !important; line-height: 1.55 !important;
    color: rgb(var(--color-foreground-rgb) / 0.75) !important;
  }

  /* Keyword filter chips */
  .jdgm-widget-revamp .jm-keyword-list .jm-button {
    background: transparent !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18) !important;
    color: rgb(var(--color-foreground-rgb) / 0.75) !important;
    font-size: 0.72rem !important; text-transform: none !important;
  }

  /* Selected rating-histogram row (active filter) → obvious highlight (JS adds .r69-histo-selected) */
  .jdgm-widget-revamp .jm-histogram-row { cursor: pointer; transition: background 0.15s ease; }
  .jdgm-widget-revamp .jm-histogram-row.r69-histo-selected {
    background: rgb(var(--color-foreground-rgb) / 0.08) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    padding-right: 4px !important;
  }
  .jdgm-widget-revamp .r69-histo-selected .jm-histogram-row__rating,
  .jdgm-widget-revamp .r69-histo-selected .jm-histogram-row__frequency {
    color: rgb(var(--color-foreground-rgb)) !important;
    font-weight: 700 !important;
  }
  .jdgm-widget-revamp .r69-histo-selected .jm-progress-bar {
    background: rgb(var(--color-foreground-rgb) / 0.25) !important;
  }

  /* Masonry "show more" footer: fade to the page bg + ink button */
  .jdgm-widget-revamp .jdgm-masonry-grid__fade {
    background: linear-gradient(transparent, var(--color-background)) !important;
  }
  .jdgm-widget-revamp .jdgm-masonry-grid__btn {
    background: rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
    border: 1px solid rgb(var(--color-foreground-rgb)) !important;
    border-radius: 4px !important;
    width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
    padding: 11px 22px !important;
    transition: opacity 0.2s ease !important;
  }
  .jdgm-widget-revamp .jdgm-masonry-grid__btn:hover { opacity: 0.85 !important; }
  .jdgm-widget-revamp .jdgm-masonry-grid__btn svg { width: 16px !important; height: 16px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     4. Revamp MODAL (.jdgm-modal — opens from a review block or a photo) → ROTAS69
     ═══════════════════════════════════════════════════════════════════════ */
  .jdgm-modal__overlay { background: rgb(var(--color-foreground-rgb) / 0.5) !important; }
  .jdgm-modal__content { background: transparent !important; box-shadow: none !important; }
  .jdgm-modal .jm-slide {
    background: #ffffff !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 50px rgb(var(--color-foreground-rgb) / 0.22) !important;
  }
  /* Close → hairline 4px square + thin drawn X (matches the drawers) */
  .jdgm-modal .jm-indicator__close {
    position: relative !important;
    width: 36px !important; height: 36px !important;
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2) !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    opacity: 1 !important;
    box-shadow: 0 2px 12px rgb(var(--color-foreground-rgb) / 0.16) !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
  }
  .jdgm-modal .jm-indicator__close:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.5) !important;
    background: rgb(var(--color-foreground-rgb) / 0.05) !important;
  }
  .jdgm-modal .jm-indicator__close svg { display: none !important; }
  .jdgm-modal .jm-indicator__close::before,
  .jdgm-modal .jm-indicator__close::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 15px; height: 1.5px; background: currentColor;
  }
  .jdgm-modal .jm-indicator__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .jdgm-modal .jm-indicator__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  /* Desktop: the close belongs ABOVE the panel, on the overlay, at its top-right corner — never
     inside, over the reviews. It is anchored to the panel (absolute, z-index 10), not to the
     scrolling list, so it holds that corner while the reviews scroll underneath.

     It used to be transformed back INSIDE the panel, and the reason is worth keeping: Judge places
     the close at `top: -48px` relative to the panel, which is right only when the panel is shorter
     than the viewport. The panel is `height: 100%` capped at 750px, so on any viewport under ~750px
     tall it fills the screen, there is no corner above it, and the close lands off-screen. Capping
     the panel is the fix rather than moving the close: it now always leaves room for that corner.
     `min()` means nothing changes on a normal desktop (750px still wins above ~862px of viewport) —
     only the short viewports that were broken get the smaller panel.
     Judge's own breakpoint for `top: -48px` is 768px, so this matches it; narrower screens keep the
     stock in-panel close, where a full-bleed panel leaves nowhere else to put it. */
  @media (min-width: 768px) {
    .jdgm-modal .jdgm-modal__container {
      max-height: min(750px, calc(100dvh - 112px)) !important;
    }
    .jdgm-modal .jm-indicator {
      top: -48px !important;
      right: 0 !important;
      padding: 0 !important;
    }
    .jdgm-modal .jm-indicator__close {
      transform: none !important;
      /* on the overlay now, not passing over white cards — the separating shadow is redundant */
      box-shadow: none !important;
    }
  }

  .jdgm-modal .jm-review-item,
  .jdgm-modal .jm-review-item__content { background: transparent !important; }
  .jdgm-modal .jm-reviewer-info__name {
    font-weight: 600 !important; font-size: 0.95rem !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-modal .jm-reviewer-avatar__initial {
    background: rgb(var(--color-foreground-rgb) / 0.06) !important;
    color: rgb(var(--color-foreground-rgb) / 0.7) !important;
  }
  .jdgm-modal .jm-reviewer-avatar__initial .jm-text { color: inherit !important; font-weight: 600 !important; }
  .jdgm-modal .jm-review-content__title {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important; font-size: 1.3rem !important;
    line-height: 1.2 !important; letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-modal .jm-review-content__body,
  .jdgm-modal .jdgm-review-content__body-content {
    font-size: 0.95rem !important; line-height: 1.65 !important;
    color: rgb(var(--color-foreground-rgb) / 0.82) !important;
  }
  /* Store reply in the modal (.jm-shop-reply) → inset wine quote */
  .jdgm-modal .jm-shop-reply {
    padding: 12px 14px !important;
    background: rgb(var(--r69-rev-accent-rgb) / 0.06) !important;
    border-left: 2px solid var(--r69-rev-accent) !important;
    border-radius: 4px !important;
  }
  .jdgm-modal .jm-shop-reply__author {
    font-size: 0.66rem !important; letter-spacing: 0.12em !important;
    text-transform: uppercase !important; font-weight: 700 !important;
    color: var(--r69-rev-accent) !important;
  }
  .jdgm-modal .jm-shop-reply__text,
  .jdgm-modal .jm-shop-reply__text p {
    font-size: 0.88rem !important; line-height: 1.55 !important;
    color: rgb(var(--color-foreground-rgb) / 0.78) !important;
  }
  /* Photo carousel: nav arrows → soft ink, image 4px */
  .jdgm-modal .jm-navigation__next,
  .jdgm-modal .jm-navigation__previous {
    background: var(--color-background) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12) !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgb(var(--color-foreground-rgb) / 0.14) !important;
  }
  .jdgm-modal .jm-media__image,
  .jdgm-modal .jm-thumbnails .jm-media-grid__item { border-radius: 4px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     5. Write-a-review + Ask-a-question FORM modal (.jdgm-write-review-modal) → ROTAS69
     Judge reuses ONE shell for BOTH forms, so these rules brand both. Default look = white
     box with 16px corners, #fafafa inputs w/ grey 16px borders, solid-black 16px nav buttons.
     ═══════════════════════════════════════════════════════════════════════ */
  .jdgm-write-review-modal__overlay {
    background: rgb(var(--color-foreground-rgb) / 0.5) !important;
    opacity: 1 !important;
  }
  .jdgm-write-review-modal__content {
    border-radius: 4px !important;
    box-shadow: 0 16px 50px rgb(var(--color-foreground-rgb) / 0.22) !important;
    font-family: var(--font-body--family) !important;
  }
  /* the "15% off" coupon banner inside the write-review modal → our 4px corners */
  .jdgm-coupon-banner,
  .jdgm-coupon-banner-container { border-radius: 4px !important; }
  .jdgm-write-review-modal__title {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-write-review-modal__intro,
  .jdgm-write-review-modal__field-help,
  .jdgm-write-review-modal__anonymous-help,
  .jdgm-write-review-modal__gdpr-statement {
    font-family: var(--font-body--family) !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
  }
  .jdgm-write-review-modal__product-title {
    font-family: var(--font-body--family) !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  /* Field labels → ROTAS69 eyebrow */
  .jdgm-write-review-modal__field-label {
    font-family: var(--font-body--family) !important;
    font-size: 0.7rem !important; font-weight: 600 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
  }
  /* Inputs / textarea → white, hairline ink, 4px */
  .jdgm-write-review-modal__field-input {
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22) !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    font-family: var(--font-body--family) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  .jdgm-write-review-modal__field-input:focus {
    border-color: rgb(var(--color-foreground-rgb) / 0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(var(--color-foreground-rgb) / 0.06) !important;
  }
  .jdgm-write-review-modal__field-input::placeholder { color: rgb(var(--color-foreground-rgb) / 0.4) !important; }
  /* Nav buttons → primary ink fill / back hairline, 4px, uppercase */
  .jdgm-write-review-modal__nav-btn {
    border-radius: 4px !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.72rem !important; font-weight: 600 !important;
    letter-spacing: 0.12em !important; text-transform: uppercase !important;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
  }
  .jdgm-write-review-modal__nav-btn-next,
  .jdgm-write-review-modal__nav-btn-close {
    background: rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
    border: 1px solid rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-write-review-modal__nav-btn-next:hover,
  .jdgm-write-review-modal__nav-btn-close:hover { opacity: 0.85 !important; }
  .jdgm-write-review-modal__nav-btn-back {
    background: transparent !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22) !important;
  }
  .jdgm-write-review-modal__nav-btn-back:hover { border-color: rgb(var(--color-foreground-rgb) / 0.5) !important; }
  /* Top-right close → hairline 4px square + thin drawn X (matches every other ROTAS69 close) */
  /* Transparent, boxless close — the write-review form slides HORIZONTALLY between steps and the
     incoming page passes under this corner close. An opaque white hairline box made that look glitchy
     (content sliding behind a hard rectangle); a bare ink X doesn't. Judge also drives this close's
     per-step visibility via a CSS animation (which beats even inline !important), so we don't fight
     opacity — boxless means it's clean whether Judge shows or fades it. */
  .jdgm-write-review-modal__close-btn {
    position: relative !important;
    width: 34px !important; height: 34px !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    font-size: 0 !important; line-height: 0 !important; box-shadow: none !important;
    transition: background 0.2s ease !important;
  }
  .jdgm-write-review-modal__close-btn:hover {
    background: rgb(var(--color-foreground-rgb) / 0.06) !important;
  }
  .jdgm-write-review-modal__close-btn::before,
  .jdgm-write-review-modal__close-btn::after {
    content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important;
    width: 14px !important; height: 1.5px !important; background: currentColor !important;
  }
  .jdgm-write-review-modal__close-btn::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
  .jdgm-write-review-modal__close-btn::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
  /* Judge's close holds a native <svg> ×; hide it so only our drawn X shows (no double-X) */
  .jdgm-write-review-modal__close-btn svg { display: none !important; }
  /* Checkbox → hairline ink 4px, ink fill when checked */
  .jdgm-write-review-modal__checkbox-custom {
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.3) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
  }
  .jdgm-write-review-modal__checkbox-input:checked + .jdgm-write-review-modal__checkbox-custom {
    background: rgb(var(--color-foreground-rgb)) !important;
    border-color: rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
  }
  /* Rating stars → ink */
  .jdgm-write-review-modal__stars .jdgm-star.jdgm--on,
  .jdgm-write-review-modal__stars .jdgm-star.jdgm--half { color: rgb(var(--color-foreground-rgb)) !important; }
  .jdgm-write-review-modal__stars .jdgm-star.jdgm--off { color: rgb(var(--color-foreground-rgb) / 0.2) !important; }
  /* Rating slider + consent links → ink */
  .jdgm-write-review-modal input[type="range"] { accent-color: rgb(var(--color-foreground-rgb)); }
  .jdgm-write-review-modal a {
    color: rgb(var(--color-foreground-rgb)) !important;
    text-decoration: underline; text-underline-offset: 0.15em;
  }
  /* Media-upload dropzone → 4px */
  .jdgm-write-review-modal__field-group--media-upload,
  .jdgm-write-review-modal__media-dropzone { border-radius: 4px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     6. Ask-a-question FORM modal → ROTAS69. DIFFERENT shell from the review form:
     .jdgm-modal(.jdgm-widget-revamp) → .jdgm-modal-block card + .jdgm-ask-question-form
     + .jdgm-field__* inputs (Judge default: white 16px-ish card, #fafafa 8px inputs,
     native <svg> close). The primary "Nākamais" button already inherits the revamp
     .jm-button--primary ink fill; these add the card / fields / title / close.
     ═══════════════════════════════════════════════════════════════════════ */
  .jdgm-modal .jdgm-modal-block {
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 16px 50px rgb(var(--color-foreground-rgb) / 0.22) !important;
    font-family: var(--font-body--family) !important;
  }
  /* .jdgm-widget-revamp prefix so this out-specifies the widget's own `.jdgm-widget-revamp .jm-text`
     body-font rule (the header is also a `.jm-text`) — else the title stays Manrope, not Cormorant */
  .jdgm-widget-revamp .jdgm-ask-question-form__header,
  .jdgm-ask-question-form__header {
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-field__label {
    font-family: var(--font-body--family) !important;
    font-size: 0.7rem !important; font-weight: 600 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
  }
  .jdgm-field__input {
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.22) !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    font-family: var(--font-body--family) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  .jdgm-field__input:focus {
    border-color: rgb(var(--color-foreground-rgb) / 0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(var(--color-foreground-rgb) / 0.06) !important;
  }
  .jdgm-field__input::placeholder { color: rgb(var(--color-foreground-rgb) / 0.4) !important; }
  .jdgm-field__help-text,
  .jdgm-ask-question-form__terms-text {
    font-family: var(--font-body--family) !important;
    color: rgb(var(--color-foreground-rgb) / 0.55) !important;
  }
  .jdgm-ask-question-form__terms-text a {
    color: rgb(var(--color-foreground-rgb)) !important;
    text-decoration: underline; text-underline-offset: 0.15em;
  }
  .jdgm-ask-question-form__actions-button { border-radius: 4px !important; }
  /* Close → hairline 4px square + thin drawn X; hide Judge's native <svg> × (no double-X) */
  .jdgm-modal-block__close-button {
    position: relative !important;
    width: 34px !important; height: 34px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2) !important;
    border-radius: 4px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    box-shadow: none !important; opacity: 1 !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
  }
  .jdgm-modal-block__close-button:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.5) !important;
    background: rgb(var(--color-foreground-rgb) / 0.05) !important;
  }
  .jdgm-modal-block__close-button svg { display: none !important; }
  .jdgm-modal-block__close-button::before,
  .jdgm-modal-block__close-button::after {
    content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important;
    width: 14px !important; height: 1.5px !important; background: currentColor !important;
  }
  .jdgm-modal-block__close-button::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
  .jdgm-modal-block__close-button::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     7. Remaining pieces → ROTAS69: hidden filter button, AI-summary corners,
     ink histogram bars, and the floating "reviews" side tab + its all-reviews modal.
     ═══════════════════════════════════════════════════════════════════════ */
  /* Hide the redundant "Filtri" button (filtering stays via search + sort + histogram) */
  .jdgm-widget-revamp .jm-custom-answer-filter,
  .jdgm-widget-revamp .jm-filter-panel { display: none !important; }

  /* AI review-summary card ("Klienti saka…" inline + inside the all-reviews modal) → 4px corners */
  .jm-ai-insights,
  .jm-ai-insights--with-bg { border-radius: 4px !important; }

  /* Rating histogram bars: Judge's gold → ink (track + fill); the selected-row rule stays above */
  .jdgm-widget-revamp .jm-progress-bar { background: rgb(var(--color-foreground-rgb) / 0.1) !important; }
  .jdgm-widget-revamp .jm-progress-bar__fill { background: rgb(var(--color-foreground-rgb)) !important; }

  /* Floating "reviews" side tab (.jdgm-revs-tab-btn) — ink pill, our 4px, remove the Judge.me
     favicon/logo, and force the stars to cream so they're visible on the dark tab (our global ink-star
     rules leaked onto it and made them invisible). */
  .jdgm-revs-tab-btn {
    background: rgb(var(--color-foreground-rgb)) !important;
    border-radius: 4px 0 0 4px !important;
    /* The tab is `position: fixed; right: 0`, so it is anchored to the viewport MINUS the classic
       scrollbar — which is why it sits neatly beside the scrollbar while the page scrolls. Every
       overlay that locks the page takes that scrollbar away (Judge's own all-reviews modal, and our
       html[scroll-lock] drawers): the viewport grows by the scrollbar's width and the tab slides
       out on top of the gutter it was resting against, then slides back when the overlay closes.
       Re-anchor it to the width the page has while it IS scrollable. `100vw - 100%` is the gutter
       the scrollbar currently occupies (its width normally, 0 while locked), so subtracting it from
       the measured width leaves exactly the shift to cancel. max() pins it at 0 on overlay-scrollbar
       platforms (phones, macOS), where there is no gutter and nothing to cancel. */
    /* clamp, not max: the middle term is only ever meant to cancel the scrollbar gutter, so it must
       never exceed the gutter itself. On some viewports `100%` resolves against an ancestor that
       is NOT the viewport — measured 101px of drift on a 900px screen, which is what put the tab in
       the middle of the page — and an unbounded max() happily took that number. Bounded, the worst
       case is the scrollbar's own width. */
    right: clamp(0px, calc(100% - 100vw + var(--r69-sbw)), var(--r69-sbw)) !important;
    /* …and Judge.me also writes a pixel `left`, computed once at load. On a fixed element with a
       width, `left` wins over `right`, so the tab froze wherever the viewport was when the script
       ran: resize the window — or open the page in a device frame — and it drifted into the middle
       of the screen. Measured 101px off the edge on a 900px touch viewport. Dropping `left` hands
       the anchoring back to the rule above, which follows the scrollbar correctly. */
    left: auto !important;
  }
  .jdgm-revs-tab-btn .jdgm-favicon { display: none !important; }
  .jdgm-revs-tab-btn .jdgm-star.jdgm--on,
  .jdgm-revs-tab-btn .jdgm-star.jdgm--half { color: var(--color-background) !important; }
  .jdgm-revs-tab-btn .jdgm-star.jdgm--off { color: rgb(255 255 255 / 0.4) !important; }
  .jdgm-revs-tab-btn .jdgm-rating {
    color: var(--color-background) !important;
    font-family: var(--font-body--family) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     8. More polish → ROTAS69: hide share buttons, crisp flags, product-link box,
     Q&A cards, and cap the all-reviews modal masonry to 3 columns on desktop.
     ═══════════════════════════════════════════════════════════════════════ */
  /* Remove the Facebook / X share buttons everywhere */
  .jm-social-share-list { display: none !important; }

  /* Country flags → crisp 2px (a tiny flag at 4px reads too round) */
  .jdgm-widget-revamp img[class*="flag"],
  .jdgm-modal img[class*="flag"],
  .jm-mfp-content img[class*="flag"],
  .jdgm-review-snippet-widget img[class*="flag"],
  .jdgm-full-rev__location-country-flag-img { border-radius: 2px !important; }

  /* "Atsauksme par <product>" variant-card box → 4px + quiet ink-tint surface */
  .jm-product-variant-card {
    border-radius: 4px !important;
    background: rgb(var(--color-foreground-rgb) / 0.03) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08) !important;
    padding: 9px 11px !important;
    box-sizing: border-box !important;
  }
  /* hide the tab where the all-reviews widget is already inline (JS sets this on the reviews page) */
  .jdgm-revs-tab.r69-tab-hidden,
  .jdgm-revs-tab-btn.r69-tab-hidden { display: none !important; }

  /* ── Questions tab (.jdgm-question-item) → white hairline 4px card; the store's answer
     (.jdgm-reply-item) → the same wine inset as review store-replies ── */
  .jdgm-question-item {
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1) !important;
    border-radius: 4px !important;
  }
  .jdgm-reply-item {
    margin-top: 6px !important;
    padding: 12px 14px !important;
    background: rgb(var(--r69-rev-accent-rgb) / 0.06) !important;
    border-left: 2px solid var(--r69-rev-accent) !important;
    border-radius: 4px !important;
  }
  .jdgm-reply-item > .jm-text:first-child {
    font-size: 0.66rem !important; letter-spacing: 0.12em !important;
    text-transform: uppercase !important; font-weight: 700 !important;
    color: var(--r69-rev-accent) !important;
  }

  /* PERF: Judge's photo-loading overlays use `backdrop-filter: blur(2px)`, and ~10 sit on-screen at
     once inside the review widget. backdrop-filter re-blurs the page content behind it on EVERY scroll
     frame — the main cause of the janky PDP scroll. A loading placeholder doesn't need a live blur, so
     drop it (kills the per-frame recomposite). */
  .jm-media-grid__loading {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* NOTE: no column-count / card-width overrides on the all-reviews modal — Judge's native masonry
     decides the columns and width. (Any override fought Judge's JS and caused scroll flicker.) */

  /* ═══════════════════════════════════════════════════════════════════════
     9. HOME review rail — Judge.me "cards carousel" app block (.jdgm-cards-carousel)
     Judge renders it centred, boxed and mid-grey; this rebuilds it as a ROTAS69 rail:
     heading left / chevrons right, white hairline 4px cards, and full section width.
     The card LIGHTBOX needs nothing here — it mounts Judge's `.jdgm-modal` shell, so
     section 4 above already brands it (and it reads `--border-radius` off the carousel,
     which is why the 4px below reaches it too).
     ═══════════════════════════════════════════════════════════════════════ */

  /* Cards per view. Ours, not Judge's: theirs is derived from `--slides-count`, which its JS writes
     AFTER the fetch — so the skeleton (which has to be right on the first frame) could never agree
     with it. Declared on both subjects at once because the query container is their shared parent,
     and an element cannot query itself. */
  .jdgm-cards-carousel,
  .r69jmskel {
    --r69jm-cards: 5;
    --r69jm-gap: 16px;
  }
  @container (max-width: 1199px) {
    .jdgm-cards-carousel,
    .r69jmskel { --r69jm-cards: 4; }
  }
  @container (max-width: 999px) {
    .jdgm-cards-carousel,
    .r69jmskel { --r69jm-cards: 3; }
  }
  @container (max-width: 819px) {
    .jdgm-cards-carousel,
    .r69jmskel { --r69jm-cards: 2; }
  }
  /* Phone: one card plus a slice of the next, so the rail reads as scrollable before it is touched */
  @container (max-width: 599px) {
    .jdgm-cards-carousel,
    .r69jmskel { --r69jm-cards: 1.15; }
  }

  .jdgm-cards-carousel {
    /* 4px is the ROTAS69 corner; Judge's `corner_styling` only offers square/rounded, so it has to
       come from here. The lightbox copies this same property, so both land on 4px. */
    --border-radius: 4px !important;
    --visible-cards: var(--r69jm-cards) !important;
    --jm-card-gap: var(--r69jm-gap) !important;
    /* The section owns the vertical rhythm (padding-block 72 in index.json) — drop Judge's own. */
    padding: 0 !important;
    /* LIMIT 1 of 2: Judge caps the whole widget at the `max_width` setting (1600px), which would
       override the section's own Page/Full layout the moment Full is chosen. The section decides. */
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'head nav'
      'rail rail';
    align-items: center;
    text-align: left !important;
  }
  /* the grid above is !important, so Judge's own "not enough reviews yet" hide needs to outrank it */
  .jdgm-cards-carousel.jdgm-hidden { display: none !important; }

  /* ── Heading row: title + rating on the left, chevrons on the right (the rail pattern used by
     r69-recently-viewed / r69-category-showcase) ── */
  .jdgm-cards-carousel .jdgm-header {
    grid-area: head;
    margin: 0 !important;
  }
  .jdgm-cards-carousel .jdgm-title {
    margin: 0 !important;
    font-family: var(--font-heading--family) !important;
    font-weight: 500 !important;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.004em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    /* Judge clamps the title to ONE line with an ellipsis; at rail widths that eats the heading. */
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .jdgm-cards-carousel .jdgm-header-info {
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .jdgm-cards-carousel .jdgm-average-rating { gap: 6px !important; }
  .jdgm-cards-carousel .jdgm-average-rating .jdgm-star { font-size: 13px !important; }
  .jdgm-cards-carousel .jdgm-rating-text {
    font-family: var(--font-body--family) !important;
    font-size: 0.82rem !important;
    color: rgb(var(--color-foreground-rgb) / 0.68) !important;
  }
  /* Judge prints a lone ★ inside the rating text, right next to the five-star row — one too many */
  .jdgm-cards-carousel .jdgm-rating-star { display: none !important; }

  /* ── Chevrons: the 38px ink-outline square of every other ROTAS69 rail, top-right of the heading.
     Judge's own glyph is a bare 20×34 bracket, so it's swapped for the theme's arrow (masked, so it
     inherits currentColor and flips to cream on the hover fill). `arrows_position` stays "bottom" —
     that setting only decides which node Judge renders; the grid decides where it sits. ── */
  .jdgm-cards-carousel .jdgm-arrows--bottom {
    grid-area: nav;
    justify-self: end;
    gap: 8px !important;
    margin-left: 16px !important;
  }
  .jdgm-cards-carousel .jdgm-arrow {
    position: relative;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.5) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
  }
  /* Judge's base opacity on the arrows is `clamp(0, reviews - visible, 1)` and its jdgmHideArrows()
     READS that computed value to decide display — so only the hover state may touch opacity here. */
  .jdgm-cards-carousel .jdgm-arrow:hover:not(:disabled) {
    opacity: 1 !important;
    background: rgb(var(--color-foreground-rgb)) !important;
    color: var(--color-background) !important;
  }
  /* Spent state without touching `opacity` — jdgmHideArrows() reads a computed opacity below 1 as
     "hide the whole nav", so a dimmed prev button at scroll 0 would take the arrows off the page. */
  .jdgm-cards-carousel .jdgm-arrow:disabled {
    border-color: rgb(var(--color-foreground-rgb) / 0.18) !important;
    color: rgb(var(--color-foreground-rgb) / 0.3) !important;
    cursor: default;
  }
  .jdgm-cards-carousel .jdgm-arrow svg { display: none !important; }
  /* Centred by absolute positioning, not by the button's flexbox: below 626px Judge writes
     `display: var(--jm-arrows-mobile, flex) !important`, and with hide_arrows_mobile OFF it emits
     that property EMPTY — the var resolves to nothing rather than to the fallback, so the whole
     declaration is dropped and the button loses its flex. inset:0 + margin:auto centres either way. */
  .jdgm-cards-carousel .jdgm-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .jdgm-cards-carousel .jdgm-arrows--bottom .jdgm-arrow:last-child::before { transform: scaleX(-1); }

  /* ── The rail ──
     LIMIT 2 of 2 (the one that actually showed): Judge sizes cards from a fixed per-breakpoint px
     table (180/200/220/281) and then caps the viewport at `visible × card + gaps` — 980px inside a
     1200px page-width section, so the rail floated with 110px of dead space either side. Cards are
     made fluid instead: the same visible-card count, divided across whatever width the section is. */
  .jdgm-cards-carousel .jdgm-content {
    grid-area: rail;
    margin: clamp(20px, 3vw, 34px) 0 0 !important;
    gap: 0 !important;
  }
  /* Pin the copy block to exactly the clamped line count (0.88rem x 1.55 = 1.364rem per line, plus
     the 16px top padding) instead of Judge's `flex: 1`. Every card then has the SAME height whatever
     its review length — the rail stops being sized by its longest card, and the skeleton below can
     reserve one exact number instead of a review-dependent guess. */
  .jdgm-cards-carousel .jdgm-media-card .jdgm-text {
    height: calc(var(--clamp) * 1.364rem + 16px) !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  /* ── From transform carousel to a real rail ──
     Judge scrolls this strip by translating the track inside an overflow:hidden box, padded with
     four cloned cards at each end to fake an infinite loop. That is why a drag released mid-card
     (nothing snaps) and why the motion felt foreign to the rest of the site. Turn the viewport into
     an actual scroll container with mandatory snap and neutralise the transform: dragging is then
     the shared module, the chevrons are a plain scrollBy, and the easing is the browser's — the
     same feel as the recently-viewed / pairing / cart-upsell rails. */
  .jdgm-cards-carousel .jdgm-cards-wrapper {
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .jdgm-cards-carousel .jdgm-cards-wrapper::-webkit-scrollbar { width: 0; height: 0; }
  .jdgm-cards-carousel .jdgm-cards-wrapper .jdgm-videos-container {
    transform: none !important;
    translate: none !important;
    transition: none !important;
    cursor: grab;
  }
  /* The clones only exist to feed the transform loop; in a scroller they would put four duplicates
     before the first real review. */
  .jdgm-cards-carousel .jdgm-clone-before,
  .jdgm-cards-carousel .jdgm-clone-after { display: none !important; }
  /* Judge shows the play affordance only on the card its index calls "active" — meaningless once
     the strip scrolls freely, so every video card gets it. */
  .jdgm-cards-carousel .jdgm-video-card .jdgm-video-controls { display: flex !important; }
  .jdgm-cards-carousel .jdgm-media-card {
    flex: 0 0 calc((100% - (var(--r69jm-cards) - 1) * var(--r69jm-gap)) / var(--r69jm-cards)) !important;
    width: auto !important;
    scroll-snap-align: start;
    background: #ffffff !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1) !important;
    border-radius: 4px !important;
    user-select: none; /* the card is a drag surface; selecting its review text fights the gesture */
    transition: border-color 0.25s ease !important;
  }
  .jdgm-cards-carousel .jdgm-media-card:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.32) !important;
  }
  /* Judge pins the media box to `card-width × image-ratio` in px; with a fluid card that has to
     become a ratio, or the photo stops being square the moment the section width changes. */
  .jdgm-cards-carousel .jdgm-media-card img,
  .jdgm-cards-carousel .jdgm-media-card .jdgm-video-controls {
    height: auto !important;
    aspect-ratio: 1 / var(--image-ratio) !important;
  }

  /* ── Card body ── */
  .jdgm-cards-carousel .jdgm-text {
    padding: 16px 16px 0 !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgb(var(--color-foreground-rgb) / 0.8) !important;
    text-align: left !important;
    /* Judge centres the copy in a grid box; top-left, but still stretched so long reviews wrap
       against the card width instead of shrinking to fit-content. */
    place-items: start stretch !important;
  }
  .jdgm-cards-carousel .jdgm-text p {
    max-width: none !important; /* Judge ties it to the old fixed card width */
    line-height: 1.55 !important;
    text-align: left !important;
  }
  .jdgm-cards-carousel .jdgm-rating-section {
    padding: 14px 16px 16px !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .jdgm-cards-carousel .jdgm-rating-section .jdgm-stars { gap: 1px !important; }
  .jdgm-cards-carousel .jdgm-rating-section .jdgm-star {
    font-size: 14px !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-cards-carousel .jdgm-reviewer-info {
    justify-content: flex-start !important;
    width: auto !important;
  }
  .jdgm-cards-carousel .jdgm-reviewer-name {
    font-family: var(--font-body--family) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }
  .jdgm-cards-carousel .jdgm-reviewer-verified-icon {
    width: 15px !important;
    height: 15px !important;
    color: rgb(var(--color-foreground-rgb) / 0.45) !important;
  }
  .jdgm-cards-carousel .jdgm-reviewer-verified-icon svg { width: 15px !important; height: 15px !important; }
  /* Judge's #7b7b7b product link fails WCAG AA on white — same 0.68 floor as the PDP widget */
  .jdgm-cards-carousel .jdgm-product-name a {
    font-family: var(--font-body--family) !important;
    font-size: 0.76rem !important;
    color: rgb(var(--color-foreground-rgb) / 0.68) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
  }
  .jdgm-cards-carousel .jdgm-product-name a:hover { color: rgb(var(--color-foreground-rgb)) !important; }

  /* ── Skeleton (injected before the widget, removed when Judge reveals it) ──
     Judge renders the whole block `display:none` until its reviews fetch resolves, so without this
     the section has no height for the first few seconds — which is what made the home page's scroll
     restoration crawl, and what made the block pop into place. Every box below mirrors the real card
     exactly (same widths, same paddings, same line heights), so the reserved height IS the final
     height and nothing shifts when the cards arrive. `--r69jm-ratio` / `--r69jm-clamp` are copied
     off Judge's own server-rendered inline properties by the script, so the shape is measured, not
     estimated. Static — no shimmer animation (an infinite compositor animation during load is
     exactly what the perf audit flagged). */
  .r69jmskel {
    display: block;
    pointer-events: none;
  }
  /* `i` only — a blanket `.r69jmskel span` would be (0,2,1) and quietly out-specify every
     single-class layout rule below, flattening the whole skeleton back to stacked blocks. */
  .r69jmskel i { display: block; }
  .r69jmskel__head {
    display: block;
    margin-bottom: clamp(20px, 3vw, 34px);
  }
  .r69jmskel__title {
    height: calc(clamp(1.5rem, 2.6vw, 2.25rem) * 1.04);
    width: min(340px, 62%);
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.07);
  }
  .r69jmskel__rating {
    height: 21px;
    width: 150px;
    margin-top: 10px;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .r69jmskel__rail {
    display: flex;
    gap: var(--r69jm-gap);
    overflow: hidden; /* more cards are drawn than any breakpoint shows; clip the remainder */
  }
  .r69jmskel__card {
    display: block;
    flex: 0 0 calc((100% - (var(--r69jm-cards) - 1) * var(--r69jm-gap)) / var(--r69jm-cards));
    background: #ffffff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .r69jmskel__media {
    width: 100%;
    aspect-ratio: 1 / var(--r69jm-ratio);
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  /* same box as .jdgm-text: clamped line count + its 16px top padding */
  .r69jmskel__text {
    display: block;
    height: calc(var(--r69jm-clamp) * 1.364rem + 16px);
    box-sizing: border-box;
    overflow: hidden;
    padding: 16px 16px 0;
  }
  .r69jmskel__text i {
    height: 9px;
    margin-bottom: 12.8px; /* 1.364rem line box minus the bar itself */
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .r69jmskel__text i:nth-child(1) { width: 100%; }
  .r69jmskel__text i:nth-child(2) { width: 92%; }
  .r69jmskel__text i:nth-child(3) { width: 58%; }
  /* same box as .jdgm-rating-section: 14/16/16 padding, 8px gaps, stars + name + product link */
  .r69jmskel__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
  }
  .r69jmskel__meta i { border-radius: 4px; background: rgb(var(--color-foreground-rgb) / 0.06); }
  .r69jmskel__meta i:nth-child(1) { height: 14px; width: 82px; }
  .r69jmskel__meta i:nth-child(2) { height: 21px; width: 96px; }
  .r69jmskel__meta i:nth-child(3) { height: 18px; width: 120px; }
/* END_SNIPPET:r69-judgeme */
/* START_SNIPPET:r69-option-select-styles (INDEX:277) */
/* The native control keeps working the form; it is only removed from sight. The marker class is
     set by snippets/variant-main-picker on whichever branch rendered it (buttons or dropdowns).
     The quick-add clone is the grid content from INSIDE .product-information, so that ancestor is
     absent there — match .quick-add-modal too, or the native pills show alongside the dropdown. */
  :is(.product-information, .quick-add-modal) .variant-picker .variant-option--r69dd {
    display: none !important;
  }

  .r69dd {
    position: relative;
    display: block;
    width: 100%;
    margin-block: 10px 14px;
  }

  .r69dd__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Matches the ring picker: 0.66 ink clears AA for an 11px uppercase label, 0.55 does not. */
    color: rgb(var(--color-foreground-rgb) / 0.66);
  }

  .r69dd__trigger {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.18s ease;
  }

  .r69dd__trigger:hover { border-color: rgb(var(--color-foreground-rgb) / 0.4); }
  .r69dd__trigger:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }

  .r69dd__current {
    min-width: 0;
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .r69dd__caret {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.5;
    transition: transform 0.2s ease;
  }
  /* State class is deliberately not `is-open`: that name is an argument of the theme's header
     :has() rules and every flip would cost a document-wide style recalc. */
  .r69dd.r69dd-open .r69dd__caret { transform: rotate(-135deg) translateY(1px); }

  .r69dd__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 6px;
    z-index: 40;
    background: #fff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    border-radius: 4px;
    box-shadow: 0 18px 44px -30px rgb(var(--color-foreground-rgb) / 0.55);
    max-height: 360px;
    overflow-y: auto;
  }

  .r69dd__opt {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.07);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background-color 0.14s ease;
  }
  .r69dd__opt:last-child { border-bottom: 0; }
  .r69dd__opt:hover,
  .r69dd__opt:focus-visible { background: rgb(var(--color-foreground-rgb) / 0.05); outline: none; }
  .r69dd__opt.r69dd-selected {
    background: rgb(var(--color-foreground-rgb) / 0.07);
    box-shadow: inset 2px 0 0 var(--color-foreground);
  }

  .r69dd__opt-text {
    min-width: 0;
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .r69dd__opt-soldout,
  .r69dd__soldout {
    display: none;
    flex: 0 0 auto;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  .r69dd__opt.r69dd-soldout { cursor: not-allowed; }
  .r69dd__opt.r69dd-soldout .r69dd__opt-text { opacity: 0.4; text-decoration: line-through; }
  .r69dd__opt.r69dd-soldout .r69dd__opt-soldout { display: inline; }

  .r69dd__trigger.r69dd-soldout .r69dd__current { opacity: 0.4; text-decoration: line-through; }
  .r69dd__trigger.r69dd-soldout .r69dd__soldout { display: inline; }
/* END_SNIPPET:r69-option-select-styles */
/* START_SNIPPET:r69-ring-guide-styles (INDEX:284) */
dialog.rgd {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    /* Match the cart drawer exactly (owner request): same width var, border, backdrop and timing. */
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
  }

  dialog.rgd[open] {
    display: flex;
    animation: rgd-slide var(--animation-speed) var(--animation-timing-fade-in);
  }

  /* slide the full panel in from the right edge, like the delivery drawer */
  @keyframes rgd-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  dialog.rgd::backdrop {
    /* Literal black dim (like the cart drawer): --backdrop-color-rgb is empty in this theme, and
       custom properties do not inherit into ::backdrop on older engines. */
    background: rgb(0 0 0 / 0.42);
  }
  dialog.rgd[open]::backdrop {
    animation: rgd-backdrop-in var(--animation-speed) ease;
  }
  @keyframes rgd-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .rgd__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    font-family: var(--font-body--family);
  }

  .rgd__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .rgd__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.1;
  }

  .rgd__close {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
  }
  .rgd__close:hover { border-color: var(--color-foreground); }
  .rgd__close:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }
  .rgd__close span,
  .rgd__close span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.5px;
    background: var(--color-foreground);
    content: "";
  }
  .rgd__close span { transform: translate(-50%, -50%) rotate(45deg); }
  .rgd__close span::before { left: 0; top: 0; transform: rotate(-90deg); }

  .rgd__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.3rem 1.35rem 0.4rem;
  }

  .rgd__sec { margin-bottom: 1.8rem; }

  .rgd__h3 {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .rgd__method {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }
  .rgd__method:first-of-type { border-top: 0; padding-top: 0; }

  .rgd__mno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.28);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 600;
  }

  .rgd__method h4 {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .rgd__method p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .rgd__scroll { overflow-x: auto; }

  .rgd__scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
  }

  .rgd__scroll th,
  .rgd__scroll td {
    padding: 0.5rem 0.7rem;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    text-align: left;
    white-space: nowrap;
  }

  .rgd__scroll th {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgb(var(--color-foreground-rgb) / 0.03);
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* the inside Ø IS the ROTAS69 size — first column leads */
  .rgd__scroll td:first-child { font-weight: 700; }

  .rgd__note {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .rgd__foot {
    flex: 0 0 auto;
    padding: 1rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .rgd__full {
    display: block;
    padding: 0.95rem 1.2rem;
    background: var(--color-foreground);
    color: var(--color-background);
    border: 1px solid var(--color-foreground);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .rgd__full:hover { background: transparent; color: var(--color-foreground); }
  .rgd__full:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    dialog.rgd[open] { animation: none; }
  }
/* END_SNIPPET:r69-ring-guide-styles */
/* START_SNIPPET:r69-ring-size-styles (INDEX:287) */
.rss { position: relative; display: block; width: 100%; margin-block: 10px 14px; }

    /* Hide the native ring control at parse time — the .variant-option--ringsize marker is set by
       snippets/variant-main-picker on whichever branch (select / buttons / single) rendered it. */
    .product-information .variant-picker .variant-option--ringsize,
    .quick-add-modal .variant-picker .variant-option--ringsize { display: none !important; }

    .rss__labelrow {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .rss__label {
      font-family: var(--font-body--family);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      /* 0.55 ink on white = 4.29:1 (fails AA for this 11px uppercase label). 0.66 ≈ 4.7:1. */
      color: rgb(var(--color-foreground-rgb) / 0.66);
    }

    /* Size-guide opener — styled exactly like the delivery "Informācija →" link:
       a quiet inline underlined link with a trailing arrow. */
    .rss__guide {
      cursor: pointer;
      display: inline;
      padding: 0;
      overflow: visible;
      background: none;
      border: 0;
      font: inherit;
      font-family: var(--font-body--family);
      font-size: 0.74rem;
      font-weight: 400;
      color: rgb(var(--color-foreground-rgb) / 0.75);
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.18s ease;
    }
    .rss__guide:hover { color: var(--color-foreground); }
    .rss__guide:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; border-radius: 2px; }
    .rss__guide-arrow { margin-left: 2px; }

    .rss__trigger {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 15px 18px;
      background: #fff;
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
      border-radius: 4px;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: border-color 0.18s ease;
    }

    .rss__trigger:hover { border-color: rgb(var(--color-foreground-rgb) / 0.4); }
    .rss__trigger:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }
    /* Fixed-width columns so Ø / US / EU / UK line up across every row AND the closed trigger and
       the open options share the exact same layout (px widths don't stretch like fr would). */
    .rss__current,
    .rss__opt-segs {
      display: grid;
      grid-template-columns: 118px 66px 66px 66px;
      align-items: center;
      min-width: 0;
    }

    .rss__caret {
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      margin-left: 12px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      opacity: 0.5;
      transition: transform 0.2s ease;
    }
    .rss.rss-open .rss__caret { transform: rotate(-135deg) translateY(1px); }

    /* Segments — ROTAS69 inner Ø emphasised as the primary. */
    .rss-seg {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-inline: 14px;
      border-left: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
      min-width: 0;
    }
    .rss-seg:first-child { padding-inline-start: 0; border-left: 0; }
    .rss-seg__k {
      font-family: var(--font-body--family);
      font-size: 0.56rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      white-space: nowrap;
      color: rgb(var(--color-foreground-rgb) / 0.68);
    }
    .rss-seg__v {
      font-family: var(--font-body--family);
      font-size: 0.95rem;
      line-height: 1;
      white-space: nowrap;
      color: rgb(var(--color-foreground-rgb) / 0.72);
    }
    .rss-seg__u { font-size: 0.7rem; margin-left: 2px; opacity: 0.7; }
    .rss-seg--dia .rss-seg__v { font-weight: 700; font-size: 1.05rem; color: var(--color-foreground); }
    .rss-seg--dia .rss-seg__k { color: var(--color-foreground); font-weight: 700; }

    .rss__panel {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      margin-top: 6px;
      z-index: 40;
      background: #fff;
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
      border-radius: 4px;
      box-shadow: 0 18px 44px -30px rgb(var(--color-foreground-rgb) / 0.55);
      /* Height is set inline by the JS to the real room below/above the trigger so the panel never
         runs off-screen (the quick-add modal on a phone); it scrolls inside. This is just a ceiling. */
      max-height: 360px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* Not enough room below the trigger → the JS adds .rss-flip and the panel opens upward. */
    .rss.rss-flip .rss__panel {
      top: auto;
      bottom: 100%;
      margin-top: 0;
      margin-bottom: 6px;
    }
    .rss__opt {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.07);
      cursor: pointer;
      text-align: left;
      font: inherit;
      color: inherit;
      transition: background-color 0.14s ease;
    }
    .rss__opt:last-child { border-bottom: 0; }
    .rss__opt:hover,
    .rss__opt:focus-visible { background: rgb(var(--color-foreground-rgb) / 0.05); outline: none; }
    .rss__opt.is-selected { background: rgb(var(--color-foreground-rgb) / 0.07); box-shadow: inset 2px 0 0 var(--color-foreground); }
    .rss__opt-soldout,
    .rss__trigger-soldout {
      display: none;
      flex: 0 0 auto;
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.45);
    }
    .rss__opt.is-soldout { cursor: not-allowed; }
    .rss__opt.is-soldout .rss__opt-segs { opacity: 0.4; }
    .rss__opt.is-soldout .rss-seg--dia .rss-seg__v { text-decoration: line-through; }
    .rss__opt.is-soldout .rss__opt-soldout { display: inline; }

    .rss__trigger.is-soldout .rss__trigger-soldout { display: inline; }
    .rss__trigger.is-soldout .rss__current { opacity: 0.4; }
    .rss__trigger.is-soldout .rss-seg--dia .rss-seg__v { text-decoration: line-through; }

    @media screen and (max-width: 540px) {
      .rss__current,
      .rss__opt-segs { grid-template-columns: 98px 52px 52px 52px; }
      .rss-seg { padding-inline: 11px; }
      .rss-seg__v { font-size: 0.9rem; }
      .rss-seg--dia .rss-seg__v { font-size: 1rem; }
    }
/* END_SNIPPET:r69-ring-size-styles */
/* START_SNIPPET:r69-welcome-popup (INDEX:291) */
/* ===== ROTAS69 — welcome popup ===== */
  .r69wp {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .r69wp[hidden] {
    display: none;
  }

  html.r69wp-open {
    overflow: hidden;
  }

  .r69wp__overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
  }

  .r69wp__card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 460px;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
      0 30px 64px -30px rgb(var(--color-foreground-rgb) / 0.45),
      0 4px 14px -10px rgb(var(--color-foreground-rgb) / 0.3);
    animation: r69wp-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .r69wp__card--media {
    max-width: 820px;
  }

  @keyframes r69wp-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

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

  .r69wp__body {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 46px) clamp(22px, 3.4vw, 40px);
  }

  .r69wp__media {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;
  }

  .r69wp__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .r69wp__title {
    margin: 0 0 10px;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
    color: var(--color-foreground);
  }

  .r69wp__sub {
    margin: 0 0 18px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.65);
  }

  .r69wp__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .r69wp__input {
    height: 46px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--color-foreground);
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
    border-radius: 4px;
  }

  .r69wp__input:focus {
    outline: none;
    border-color: var(--color-foreground);
  }

  .r69wp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    background: var(--color-foreground);
    color: var(--color-background);
    border: 1px solid var(--color-foreground);
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .r69wp__btn:hover {
    opacity: 0.85;
  }

  .r69wp__btn[disabled] {
    opacity: 0.5;
    cursor: default;
  }

  .r69wp__err {
    margin: 10px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #9f1d1d;
  }

  .r69wp__x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .r69wp__x:hover {
    opacity: 0.7;
  }

  .r69wp__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    margin: 0 0 10px;
    padding: 0 14px;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    color: var(--color-foreground);
    border: 1px dashed rgb(var(--color-foreground-rgb) / 0.5);
    border-radius: 4px;
    font-family: var(--font-heading--family);
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    cursor: pointer;
  }

  .r69wp__copied {
    display: block;
    margin: -4px 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgb(var(--color-foreground-rgb) / 0.65);
    text-align: center;
  }

  /* Teaser = fixed container (position classes) + chip (visuals) + × bubble (cart-bubble style,
     sits on the container so it is NOT rotated with the vertical chip). */
  .r69wp-teaser {
    position: fixed;
    z-index: 980;
  }

  .r69wp-teaser[hidden] {
    display: none;
  }

  .r69wp-teaser__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.5);
  }

  .r69wp-teaser__x {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 0;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
  }

  .r69wp-teaser__x svg {
    display: block;
  }

  /* Placement is config-driven (the ROTAS69 app's Popup page): the JS adds ONE of these. Side
     placements render the chip vertically, flush to the screen edge — the BSS look. */
  .r69wp-teaser--bottom-left {
    left: 16px;
    bottom: 16px;
  }

  .r69wp-teaser--bottom-right {
    right: 16px;
    bottom: 16px;
  }

  .r69wp-teaser--bottom-center {
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
  }

  .r69wp-teaser--left-center {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .r69wp-teaser--right-center {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Vertical chips; on the left edge rotate(180deg) makes the text read bottom-up with the icon
     at the bottom. Pre-rotation radius "4px 0 0 4px" lands visually on the RIGHT side — the
     screen-edge side stays flush. */
  .r69wp-teaser--left-center .r69wp-teaser__chip {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    border-radius: 4px 0 0 4px;
    padding: 18px 12px;
  }

  .r69wp-teaser--right-center .r69wp-teaser__chip {
    writing-mode: vertical-rl;
    border-radius: 4px 0 0 4px;
    padding: 18px 12px;
  }

  /* The bubble must stick out AWAY from the screen edge. */
  .r69wp-teaser--right-center .r69wp-teaser__x {
    right: auto;
    left: -8px;
  }

  @media (max-width: 749px) {
    .r69wp {
      padding: 14px;
    }

    .r69wp__card--media {
      flex-direction: column-reverse;
      max-width: 460px;
    }

    .r69wp__card--media .r69wp__media {
      flex: 0 0 auto;
      height: 170px;
    }
  }
/* END_SNIPPET:r69-welcome-popup */
/* START_SNIPPET:r69-wishlist-button (INDEX:292) */
.wishlist-button {
    display: inline-flex;
    line-height: 0;
  }

  .wishlist-button__btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-foreground);
    background: transparent;
    border: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .wishlist-button__icon {
    display: inline-flex;
  }

  /* Heart matches the theme icon weight exactly */
  .wishlist-button__icon > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    transition: fill 0.18s ease, transform 0.18s ease;
  }

  .wishlist-button .wishlist-button__heart {
    fill: none;
  }

  .wishlist-button.is-active .wishlist-button__heart {
    fill: currentColor;
  }

  /* ---------- Card overlay variant: pill that reveals a word, like quick-add ---------- */
  .wishlist-button--card {
    position: absolute;
    top: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .wishlist-button--card .wishlist-button__btn {
    height: var(--button-size-md);
    border-radius: 50px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    background: var(--color-background);
    /* ROTAS69 PERF: removed backdrop-filter blur(20px). The background is opaque so the blur was
       never visible, but it turned every card heart into its own composited layer that re-blurred
       on scroll — on the pairing grids (many cards) that was real scroll jank. No visual change. */
    color: var(--color-foreground);
    overflow: hidden;
  }

  .wishlist-button--card .wishlist-button__icon {
    height: 100%;
    /* button-size minus 2x the 1px border — keeps the idle pill a perfect circle
       (content 34px + 1px + 1px = 36px = height). Same rule as the quick-add icon. */
    width: calc(var(--button-size-md) - 2px);
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .wishlist-button--card .wishlist-button__reveal {
    display: grid;
    grid-template-columns: 0fr;
  }

  .wishlist-button--card .wishlist-button__reveal > span {
    min-width: 0;
    overflow: hidden;
  }

  .wishlist-button--card .wishlist-button__reveal-text {
    display: inline-block;
    padding-inline-end: var(--padding-sm);
    white-space: nowrap;
    font-size: var(--font-size--sm);
    opacity: 0;
    filter: blur(2px);
    translate: 0.5ch 0;
  }

  .wishlist-button--card .wishlist-button__btn:is(:hover, :focus-visible) .wishlist-button__reveal {
    grid-template-columns: 1fr;
  }

  .wishlist-button--card .wishlist-button__btn:is(:hover, :focus-visible) .wishlist-button__reveal-text {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }

  /* Show "Save" until it's in the wishlist, then "Remove" */
  .wishlist-button--card .wishlist-button__reveal-text--remove {
    display: none;
  }

  .wishlist-button--card.is-active .wishlist-button__reveal-text--add {
    display: none;
  }

  .wishlist-button--card.is-active .wishlist-button__reveal-text--remove {
    display: inline-block;
  }

  /* Desktop: hidden until the card is hovered (same as quick-add); always shown when saved */
  @media screen and (min-width: 750px) {
    .wishlist-button--card {
      top: var(--padding-md);
      inset-inline-end: var(--padding-md);
      opacity: 0;
      transition: opacity var(--animation-speed) var(--ease-out-cubic);
    }

    product-card:is(:hover, :focus-within) .wishlist-button--card,
    .wishlist-button--card:focus-within,
    .wishlist-button--card.is-active {
      opacity: 1;
    }
  }

  /* Mobile: icon only, always visible, no reveal word (matches the quick-add mobile behaviour) */
  @media screen and (max-width: 749px) {
    .wishlist-button--card .wishlist-button__reveal {
      display: none;
    }

    .wishlist-button--card .wishlist-button__btn {
      width: var(--button-size-md);
      justify-content: center;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .wishlist-button--card .wishlist-button__reveal {
      transition: grid-template-columns var(--animation-speed) var(--ease-out-cubic);
    }

    .wishlist-button--card .wishlist-button__reveal-text {
      transition: opacity 0.3s ease, filter 0.3s ease, translate 0.3s ease;
    }
  }

  /* ---------- Product-page variant: full-width secondary button ---------- */
  .wishlist-button--product {
    display: block;
    width: 100%;
  }

  .wishlist-button--product .wishlist-button__btn {
    width: 100%;
    justify-content: center;
    gap: var(--gap-2xs);
    min-height: 3.25rem;
    padding-inline: var(--padding-lg);
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.35);
    border-radius: var(--style-border-radius-buttons-primary);
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    letter-spacing: 0.04em;
    transition: border-color 0.18s ease, background 0.18s ease;
  }

  @media (hover: hover) {
    .wishlist-button--product .wishlist-button__btn:hover {
      border-color: var(--color-foreground);
      background: rgb(var(--color-foreground-rgb) / 0.04);
    }
  }

  .wishlist-button--product .wishlist-button__icon > svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .wishlist-button--product .wishlist-button__label-remove,
  .wishlist-button--product.is-active .wishlist-button__label-add {
    display: none;
  }

  .wishlist-button--product.is-active .wishlist-button__label-remove {
    display: inline;
  }

  /* Pop the heart when an item is added */
  .wishlist-button--bounce .wishlist-button__heart {
    animation: wishlist-pop 0.4s ease;
  }

  @keyframes wishlist-pop {
    0% {
      transform: scale(1);
    }
    35% {
      transform: scale(1.3);
    }
    70% {
      transform: scale(0.92);
    }
    100% {
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wishlist-button--bounce .wishlist-button__heart {
      animation: none;
    }
  }
/* END_SNIPPET:r69-wishlist-button */
/* START_SNIPPET:r69-wishlist-data (INDEX:293) */
.header-actions__wishlist {
    /* Same bubble geometry as the cart icon, so it sits and adapts identically. */
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .wishlist-icon {
    display: inline-flex;
  }

  /* <wishlist-count> reuses the theme .cart-bubble; only its placement is set here. */
  .header-actions__wishlist .wishlist-bubble {
    position: absolute;
    width: var(--cart-bubble-size);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  .wishlist-bubble[hidden] {
    display: none;
  }

  /* Carve a clean hole in the heart where the bubble sits (matches the cart icon). */
  .header-actions__wishlist.has-count .wishlist-icon svg {
    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%
    );
  }

  .header-actions__wishlist--text .wishlist-bubble {
    position: relative;
    top: 0;
    right: 0;
    margin-inline-start: var(--gap-2xs);
  }
/* END_SNIPPET:r69-wishlist-data */
/* START_SNIPPET:search-modal (INDEX:301) */
/* ---- ROTAS69 inline header search ---------------------------------------- */
  .r69-search {
    display: flex;
    align-items: center;
    width: clamp(190px, 19vw, 264px);
    /* Two states like every other header icon: the row's foreground var is white on a
       transparent header and ink on a solid one — inherit would skip the var and stay black. */
    color: var(--color-foreground);
  }

  /* Open search → solid, pinned header (FAORIA §2): the panel must never sit on a
     see-through header or detach while scrolling. The color reset itself lives in
     header.liquid (the :has(.r69-search.is-open) branch); here we pin the section and
     paint the rows so the bar reads cleanly above the full-width panel. */
  .header-section:has(.r69-search.is-open) {
    position: sticky;
    top: 0;
    z-index: var(--layer-menu-drawer);
  }
  #header-component[transparent]:has(.r69-search.is-open) {
    position: relative !important;
    top: 0 !important;
  }

  /* Mobile-only control: the X that dismisses the open panel. Desktop closes by
     clicking away or Escape, and an X would crowd the narrow inline field. */
  .r69-search__close {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* The row IS the search: the same inline input desktop uses, full width on its own header
       row. Tapping it focuses the real field natively — the keyboard rises from the shopper's
       own gesture, no scripted focus anywhere. */
    .r69-search {
      width: 100%;
    }

    .r69-search .predictive-search-form__header {
      gap: 8px;
      position: relative; /* the close X is absolute inside it — see below */
    }

    /* No top padding (owner's spec — the row sits flush under the header bar); the bottom
       padding is what separates the text from its underline. */
    .r69-search .predictive-search-form__header-inner {
      min-height: 34px;
      padding-block: 0 7px;
      padding-inline-start: 31px;
    }

    .r69-search .predictive-search__icon {
      width: 21px;
      height: 21px;
      /* icon-search.svg draws its circle ~4px inside its own box (cx 9, r 4.75 in a 0..20
         viewBox), while the burger's lines run edge-to-edge — without this the two glyphs sit
         on different vertical lines even though both boxes start at the page margin. */
      left: -3.5px; /* measured ink-to-ink: burger line starts at 16.97px, this lands the circle at 16.96px */
    }

    .r69-search input.search-input {
      font-size: 16px; /* anything smaller and iOS zooms the page on focus */
    }

    /* The X shows only while the panel is open, and closes it. The inline clear would be a
       second, near-identical control a few pixels away, so it stays hidden on mobile.
       It OVERLAYS the row rather than sitting beside it: as a flex item it took 42px away from the
       field, and the underline IS the field's own border-bottom — so the line stopped 42px short
       of the edge the moment the X appeared. Absolute, so the field keeps its full width and the
       underline runs edge to edge, continuing underneath the X. */
    .r69-search__close {
      display: none;
      position: absolute;
      inset-inline-end: 0;
      inset-block: 0; /* stretches to the row height, so the glyph centres on the field */
      align-items: center;
      justify-content: center;
      width: 40px;
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      color: var(--color-foreground);
    }

    .r69-search.is-open .r69-search__close {
      display: inline-flex;
    }

    /* 19px, not the old 15px: at that size it read as decoration rather than a control. */
    .r69-search__close svg {
      display: block;
      width: 19px;
      height: 19px;
    }

    /* Keep the typed text and the placeholder clear of the X now that they share the same box. */
    .r69-search.is-open .predictive-search-form__header-inner {
      padding-inline-end: 44px;
    }

    .r69-search .predictive-search__reset-button {
      display: none;
    }

    /* The results panel is the SAME fixed dropdown desktop already opens (top comes from
       --r69-panel-top, slide/fade from the base rules) — mobile only stretches it to the
       bottom of the screen and scrolls inside it. dvh, so it shortens when the keyboard is up. */
    .r69-search .predictive-search-form__content-wrapper {
      /* …-viewport-top, NOT -top: the latter is an offset inside the positioned ancestor, so the
         box used to run past the bottom of the screen. See setTop() at the end of this file. */
      height: calc(100dvh - var(--r69-panel-viewport-top, 0px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: none;
    }

    .r69-search .predictive-search-form__content {
      max-height: none;
      /* Clear the phone's navigation bar, which overlays the page on edge-to-edge Android. */
      padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* Chips — popular searches and collections only; the pages list stays a plain list
       (owner's call). Same visual system as the blog category row, one size tighter. */
    .r69s-search__terms,
    .r69s-results__links:not(.r69s-results__links--pages) {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 7px;
    }

    .r69s-search__term,
    .r69s-results__links:not(.r69s-results__links--pages) .r69s-results__link {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 3px 10px;
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
      border-radius: 4px;
      font-size: 0.75rem;
      letter-spacing: 0.03em;
      line-height: 1.25;
      color: rgb(var(--color-foreground-rgb) / 0.8);
      text-decoration: none;
    }

    .r69s-search__term-arrow {
      display: none;
    }

    /* Lists sit close under their headings — the base 18px eyebrow margin reads as a hole in a
       compact panel. */
    .r69-search .r69s-search__eyebrow {
      margin-block-end: 9px;
    }

    /* The header must flip solid IN THE SAME FRAME the panel starts unfolding. Its underlay
       animates height and its text colors cross-fade — on a transparent header that reads as a
       second, laggier curtain on top of the panel's slide. Mobile has no hover menus, so these
       transitions have nothing else to do here. */
    #header-component .header__underlay-closed {
      transition: none;
    }

    #header-component[transparent] {
      --header-content-transition-timing: 0s;
    }

    /* The account cell must not move while shop-js hydrates: one geometry before and after the
       component defines, so the icon cannot shift as the page settles. */
    header-actions .account-button,
    header-actions .account-button shopify-account {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ...including inside shop-js's shadow DOM. Before it hydrates the theme sizes the custom
       element itself; after, a shadow <button part="signed-out-avatar"> wraps the slotted icon
       and brings its own box — that swap is the ~1px nudge half a second after load. Pinning the
       part gives both states identical geometry. */
    shopify-account::part(signed-out-avatar) {
      width: 44px;
      height: 44px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Keep the underline while the field is focused. The theme's own predictive-search-styles
       blanks it on mobile —
         .predictive-search:has(.predictive-search-dropdown)
           .predictive-search-form__header-inner:focus-within { border-bottom-color: transparent }
       — which was written for the old full-screen drawer, where the field sat against the
       drawer's own border. Our row IS the field: its underline is the only thing drawing it, so
       it must never disappear. Out-specifies the theme rule by the leading .r69-search. */
    .r69-search .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within,
    .r69-search.is-open .predictive-search .predictive-search-form__header-inner {
      border-bottom-color: rgb(var(--color-foreground-rgb) / 0.9);
    }

    /* shop-js hardcodes 7px corners on its account sheet inside its shadow DOM, where the
       theme's radius variables cannot reach — its ::part hook can. ROTAS69 rounds 4. */
    shopify-account::part(dialog) {
      border-radius: 4px 4px 0 0;
    }
  }

  /* The header collapses to the burger before 750px on some widths, so the same row
     treatment applies there too. Generated from the same template as the media-query
     block above — if one changes, regenerate both.
     The hook is the CLASS setHeaderMenuStyle() mirrors onto <html>, never
     `html:has(#header-component[data-menu-style='drawer'])`: a :has() anchored on the root is
     re-evaluated on every DOM insertion anywhere on the page (measured 29-46ms each on a
     throttled device — the stutter in the first seconds after load). */
  html.r69-menu-drawer {
    /* The row IS the search: the same inline input desktop uses, full width on its own header
       row. Tapping it focuses the real field natively — the keyboard rises from the shopper's
       own gesture, no scripted focus anywhere. */
    .r69-search {
      width: 100%;
    }

    .r69-search .predictive-search-form__header {
      gap: 8px;
      position: relative; /* the close X is absolute inside it — see below */
    }

    /* No top padding (owner's spec — the row sits flush under the header bar); the bottom
       padding is what separates the text from its underline. */
    .r69-search .predictive-search-form__header-inner {
      min-height: 34px;
      padding-block: 0 7px;
      padding-inline-start: 31px;
    }

    .r69-search .predictive-search__icon {
      width: 21px;
      height: 21px;
      /* icon-search.svg draws its circle ~4px inside its own box (cx 9, r 4.75 in a 0..20
         viewBox), while the burger's lines run edge-to-edge — without this the two glyphs sit
         on different vertical lines even though both boxes start at the page margin. */
      left: -3.5px; /* measured ink-to-ink: burger line starts at 16.97px, this lands the circle at 16.96px */
    }

    .r69-search input.search-input {
      font-size: 16px; /* anything smaller and iOS zooms the page on focus */
    }

    /* The X shows only while the panel is open, and closes it. The inline clear would be a
       second, near-identical control a few pixels away, so it stays hidden on mobile.
       It OVERLAYS the row rather than sitting beside it: as a flex item it took 42px away from the
       field, and the underline IS the field's own border-bottom — so the line stopped 42px short
       of the edge the moment the X appeared. Absolute, so the field keeps its full width and the
       underline runs edge to edge, continuing underneath the X. */
    .r69-search__close {
      display: none;
      position: absolute;
      inset-inline-end: 0;
      inset-block: 0; /* stretches to the row height, so the glyph centres on the field */
      align-items: center;
      justify-content: center;
      width: 40px;
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      color: var(--color-foreground);
    }

    .r69-search.is-open .r69-search__close {
      display: inline-flex;
    }

    /* 19px, not the old 15px: at that size it read as decoration rather than a control. */
    .r69-search__close svg {
      display: block;
      width: 19px;
      height: 19px;
    }

    /* Keep the typed text and the placeholder clear of the X now that they share the same box. */
    .r69-search.is-open .predictive-search-form__header-inner {
      padding-inline-end: 44px;
    }

    .r69-search .predictive-search__reset-button {
      display: none;
    }

    /* The results panel is the SAME fixed dropdown desktop already opens (top comes from
       --r69-panel-top, slide/fade from the base rules) — mobile only stretches it to the
       bottom of the screen and scrolls inside it. dvh, so it shortens when the keyboard is up. */
    .r69-search .predictive-search-form__content-wrapper {
      /* …-viewport-top, NOT -top: the latter is an offset inside the positioned ancestor, so the
         box used to run past the bottom of the screen. See setTop() at the end of this file. */
      height: calc(100dvh - var(--r69-panel-viewport-top, 0px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: none;
    }

    .r69-search .predictive-search-form__content {
      max-height: none;
      /* Clear the phone's navigation bar, which overlays the page on edge-to-edge Android. */
      padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* Chips — popular searches and collections only; the pages list stays a plain list
       (owner's call). Same visual system as the blog category row, one size tighter. */
    .r69s-search__terms,
    .r69s-results__links:not(.r69s-results__links--pages) {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 7px;
    }

    .r69s-search__term,
    .r69s-results__links:not(.r69s-results__links--pages) .r69s-results__link {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 3px 10px;
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
      border-radius: 4px;
      font-size: 0.75rem;
      letter-spacing: 0.03em;
      line-height: 1.25;
      color: rgb(var(--color-foreground-rgb) / 0.8);
      text-decoration: none;
    }

    .r69s-search__term-arrow {
      display: none;
    }

    /* Lists sit close under their headings — the base 18px eyebrow margin reads as a hole in a
       compact panel. */
    .r69-search .r69s-search__eyebrow {
      margin-block-end: 9px;
    }

    /* The header must flip solid IN THE SAME FRAME the panel starts unfolding. Its underlay
       animates height and its text colors cross-fade — on a transparent header that reads as a
       second, laggier curtain on top of the panel's slide. Mobile has no hover menus, so these
       transitions have nothing else to do here. */
    #header-component .header__underlay-closed {
      transition: none;
    }

    #header-component[transparent] {
      --header-content-transition-timing: 0s;
    }

    /* The account cell must not move while shop-js hydrates: one geometry before and after the
       component defines, so the icon cannot shift as the page settles. */
    header-actions .account-button,
    header-actions .account-button shopify-account {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ...including inside shop-js's shadow DOM. Before it hydrates the theme sizes the custom
       element itself; after, a shadow <button part="signed-out-avatar"> wraps the slotted icon
       and brings its own box — that swap is the ~1px nudge half a second after load. Pinning the
       part gives both states identical geometry. */
    shopify-account::part(signed-out-avatar) {
      width: 44px;
      height: 44px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Keep the underline while the field is focused. The theme's own predictive-search-styles
       blanks it on mobile —
         .predictive-search:has(.predictive-search-dropdown)
           .predictive-search-form__header-inner:focus-within { border-bottom-color: transparent }
       — which was written for the old full-screen drawer, where the field sat against the
       drawer's own border. Our row IS the field: its underline is the only thing drawing it, so
       it must never disappear. Out-specifies the theme rule by the leading .r69-search. */
    .r69-search .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within,
    .r69-search.is-open .predictive-search .predictive-search-form__header-inner {
      border-bottom-color: rgb(var(--color-foreground-rgb) / 0.9);
    }

    /* shop-js hardcodes 7px corners on its account sheet inside its shadow DOM, where the
       theme's radius variables cannot reach — its ::part hook can. ROTAS69 rounds 4. */
    shopify-account::part(dialog) {
      border-radius: 4px 4px 0 0;
    }
  }

  /* Above 749px the panel is a dropdown, not a full-screen sheet, so it must be exactly as tall as
     what is inside it. The two blocks above give it `height: calc(100dvh - top)` — right on a
     phone, wrong here: measured at 800/892/1000px the box was a fixed 898px against 769–829px of
     content, so it left up to 129px of empty panel AND its bottom edge ran past the viewport.
     Height goes back to the content; the same expression stays as a CAP so tall result lists still
     scroll inside the panel instead of overflowing. Below 750px the media-query block still wins
     with its explicit height, so the phone sheet is untouched. */
  @media screen and (min-width: 750px) {
    html.r69-menu-drawer .r69-search .predictive-search-form__content-wrapper {
      height: auto;
      max-height: calc(100dvh - var(--r69-panel-viewport-top, 0px));
      /* Now that the panel ends mid-screen it needs the edge the desktop panel already has: the
         two blocks above blank the shadow, which is right for a full-screen phone sheet and wrong
         for a dropdown — without it there is nothing marking where the panel stops and the page
         resumes. Same value as the base `.predictive-search-form__content-wrapper` rule below;
         keep the two in step. */
      box-shadow: 0 30px 54px -30px rgb(14 14 14 / 0.42);
    }
  }

  /* Lock the page behind the open mobile panel. `clip`, NOT `hidden` — the same lesson base.css
     already records for the drawers: `overflow: hidden` on the root re-establishes the scroll
     container and DE-PINS every position:sticky inside it, so the sticky (scroll-up) header — and
     the panel anchored to it — jumped back to their flow position a page-height up the moment the
     search opened anywhere below the top. `clip` blocks scrolling without touching sticky.
     (`hidden` stays first as the fallback for engines without `clip`.) */
  html.r69-search-lock,
  html.r69-search-lock body {
    overflow: hidden;
    overflow: clip;
  }

  /* Reserve the just-hidden scrollbar's width (set in JS) so the page does not slide right on open
     /close — same fix the drawers/quick-add use in base.css. */
  html.r69-search-lock {
    padding-right: var(--r69-scrollbar-comp);
  }

  .r69-search__component {
    display: block;
    width: 100%;
    background: transparent;
  }

  .predictive-search-form {
    position: static;
    width: 100%;
  }

  /* The always-visible field */
  .predictive-search-form__header {
    display: flex;
    width: 100%;
    align-items: center;
  }

  /* Underline field — colour inherits from the header */
  .predictive-search-form__header-inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 0;
    padding: 0 0 3px;
    padding-inline-start: 38px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.55);
    border-radius: 0 !important;
    color: inherit;
    transition: border-color 0.2s ease;
  }

  /* Never round the underline corners, and never paint a background box on focus
     (no white highlight) — overrides the theme's focus styles. */
  .r69-search .predictive-search-form__header,
  .r69-search .predictive-search-form__header:focus-within,
  .r69-search .predictive-search-form__header-inner,
  .r69-search .predictive-search-form__header-inner:focus-within,
  .r69-search.is-open .predictive-search-form__header-inner {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .r69-search.is-open .predictive-search-form__header-inner,
  .predictive-search-form__header-inner:focus-within {
    border-bottom-color: rgb(var(--color-foreground-rgb) / 0.9);
  }

  input.search-input {
    width: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: var(--font-body--family);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb));
    opacity: 1;
    font-weight: 400;
    letter-spacing: 0.04em;
  }
  /* Placeholder disappears as soon as the field is focused */
  .search-input:focus::placeholder {
    color: transparent;
    opacity: 0;
  }

  /* Search icon — a touch larger than the other header icons (magnifier reads smaller) */
  .predictive-search__icon {
    position: absolute;
    left: 0;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    display: flex;
    width: 24px;
    height: 24px;
    color: inherit;
    pointer-events: none;
  }
  .predictive-search__icon > svg { width: 24px; height: 24px; }

  .predictive-search__reset-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    transition: color 0.2s ease;
  }
  .predictive-search__reset-button:hover { color: var(--color-foreground); }
  .predictive-search__reset-button[hidden] { display: none; }
  .predictive-search__reset-button svg { width: 12px; height: 12px; }

  /* ---- Full-width drop panel --------------------------------------------- */
  .predictive-search-form__content-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--r69-panel-top, 100%);
    width: 100vw;
    z-index: 55;
    background: var(--color-background);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    box-shadow: 0 30px 54px -30px rgb(14 14 14 / 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s ease;
  }

  .r69-search.is-open .predictive-search-form__content-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .predictive-search-form__content {
    max-height: none;
    overflow: visible;
  }

  /* Empty-state panel: popular searches + collection cards (full width) */
  .r69s-search__inner {
    display: grid;
    grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    width: 100%;
    padding: 38px clamp(24px, 4vw, 72px) 50px;
  }
  /* Let the grid columns shrink below their content width so the collections carousel scrolls
     INSIDE its own column instead of ballooning and stretching the whole drawer. */
  .r69s-search__col { min-width: 0; }

  .r69s-search__eyebrow {
    margin: 0 0 18px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .r69s-results__count { opacity: 0.6; }

  .r69s-search__terms { display: flex; flex-direction: column; gap: 2px; }
  .r69s-search__term {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 0.98rem;
    transition: opacity 0.2s ease;
  }
  .r69s-search__term:hover { opacity: 0.55; }
  .r69s-search__term-arrow { font-size: 0.72em; opacity: 0.4; }

  /* Collections = single-row horizontal carousel on EVERY device (scroll; drag on desktop).
     padding-bottom keeps the scrollbar clear of the tiles so it can't be mis-clicked. */
  .r69s-search__cards {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(14px, 1.5vw, 22px);
    padding-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / 0.25) transparent;
    -webkit-overflow-scrolling: touch;
  }
  /* Desktop: bigger collection tiles */
  @media screen and (min-width: 990px) {
    .r69s-search__cards .r69s-search__card { width: clamp(200px, 14vw, 224px); }
  }

  /* Phone: one tile and a slice of the next, the same read as the category section at the top of
     the home page (measured there: 1.3 tiles). It was 2.6 here — three small tiles that competed
     with each other instead of one that invites a swipe. 76% of the rail lands on 1.3. */
  @media screen and (max-width: 749px) {
    .r69s-search__cards .r69s-search__card {
      width: 76%;
      flex: 0 0 auto;
    }
  }

  .r69s-search__card {
    display: block;
    flex: 0 0 auto;
    width: clamp(138px, 19vw, 186px);
    scroll-snap-align: start;
    color: var(--color-foreground);
    text-decoration: none;
  }
  /* Drag-to-scroll: snap OFF + pointer-events OFF while dragging at every width */
  @media screen and (min-width: 750px) {
    .r69s-search__cards,
    .r69s-search__recent .predictive-search-results__wrapper-products {
      cursor: grab;
    }
  }
  .r69s-search__card-media {
    display: block;
    position: relative;
    /* Portrait 4:5 on EVERY device — same tile format as desktop / the collection rail */
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }
  .r69s-search__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }
  .r69s-search__card:hover .r69s-search__card-img { transform: scale(1.05); }
  /* Name ON the tile (like the collection rail): bottom gradient + centered uppercase
     label, wraps to 2 lines so even '18K Zelta pārklājuma auskari' fits. */
  .r69s-search__card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 14, 14, 0.6), rgba(14, 14, 14, 0) 52%);
    pointer-events: none;
  }
  .r69s-search__card-title {
    position: absolute;
    inset-inline: 0;
    bottom: 10px;
    z-index: 1;
    display: block;
    padding-inline: 8px;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
  }

  .predictive-search-results__inner {
    width: 100%;
    max-width: none;
  }

  .predictive-search-form__footer {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .r69s-search__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px 18px 38px; }
    .r69s-search__cards { gap: 14px; }
  }

  /* ---- Typed results: sidebar (collections/pages) + product carousel ---------- */
  .r69s-results__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 30px clamp(24px, 4vw, 72px) 50px;
  }

  .r69s-results__layout {
    display: grid;
    grid-template-columns: minmax(150px, 216px) 1fr;
    gap: clamp(28px, 5vw, 72px);
  }
  /* let the products carousel scroll inside this column instead of stretching it */
  .r69s-results__main { min-width: 0; }

  /* Clear gaps between multi-line titles (blog names wrap to 2-3 lines and were
     reading as one blob). */
  .r69s-results__links { display: flex; flex-direction: column; gap: 9px; margin: 0; }
  .r69s-results__link {
    display: inline-block;
    padding: 0;
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: opacity 0.2s ease;
  }
  .r69s-results__link:hover { opacity: 0.55; }
  .r69s-results__eyebrow--spaced { margin-top: 12px; }

  .r69s-results__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
  }
  .r69s-results__viewall {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.3);
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
  }
  .r69s-results__viewall:hover { opacity: 0.6; }

  /* Products = single-row horizontal carousel (scroll right, then back) */
  .r69s-results__layout .r69s-results__products {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(16px, 1.6vw, 26px);
    /* Room for the hover lift and its shadow, same as the recently-viewed rail on the page. This is
       a scroller, so anything leaving its box is cut: 2px above against a 4px lift took the top off
       the card, and 8px below against a shadow reaching 14 + 30 sheared it along a hard line. The
       negative margins hand the added space back to the layout. */
    margin-block: -18px -36px;
    margin-inline: 0;
    padding: 20px 2px 44px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / 0.25) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .r69s-results__layout .r69s-results__products > li {
    flex: 0 0 auto;
    width: clamp(210px, 18vw, 300px);
    scroll-snap-align: start;
  }

  /* Desktop: click-drag to scroll the results carousel (shared module; state via inline styles) */
  @media screen and (min-width: 750px) {
    .r69s-results__layout .r69s-results__products { cursor: grab; }
  }

  .r69s-results__no-results,
  .r69s-results__hint {
    padding: 6px 0 12px;
    font-size: 0.95rem;
    opacity: 0.7;
  }

  @media screen and (max-width: 749px) {
    .r69s-results__layout { grid-template-columns: 1fr; gap: 22px; }
    /* On phones the products stack as a 2-column grid (like the empty-state cards)
       and scroll down with the drawer — not sideways. */
    .r69s-results__layout .r69s-results__products {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px 8px;
      overflow: visible;
      padding: 0;
    }
    .r69s-results__layout .r69s-results__products > li {
      width: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .predictive-search-form__content-wrapper { transition: none; }
    .r69s-search__card-img { transition: none; }
  }

  /* ---- Recently viewed (empty state): client-filled carousel under popular + collections ---- */
  .r69s-search__recent {
    width: 100%;
    padding: 0 clamp(24px, 4vw, 72px) 44px;
  }
  /* No recently-viewed yet → the container is empty → hide it (no stray divider) */
  .r69s-search__recent:empty { display: none; }

  /* Skeleton for the recently-viewed row while its section fetch is in flight (the JS adds it
     only when localStorage actually holds viewed products — an empty history means nothing is
     coming and nothing is reserved). Mirrors the real carousel's frame — same border-top, same
     card clamp — so the swap does not move anything. */
  .r69s-skel {
    display: block;
    padding-top: 30px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }
  .r69s-skel__eyebrow {
    display: block;
    width: 150px;
    height: 13px;
    margin-block-end: 18px;
    border-radius: 3px;
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
  .r69s-skel__row {
    display: flex;
    gap: 16px;
    overflow: hidden;
  }
  .r69s-skel__card {
    flex: 0 0 auto;
    width: clamp(172px, 14vw, 232px);
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    animation: r69s-skel-pulse 1.4s ease-in-out infinite;
  }
  @keyframes r69s-skel-pulse {
    50% { opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce) {
    .r69s-skel__card { animation: none; }
  }
  .r69s-search__recent .recently-viewed-wrapper {
    padding-top: 30px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }
  .r69s-search__recent .predictive-search-results__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    font-size: 0.8rem;
    font-weight: inherit;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .r69s-search__recent .predictive-search-results__clear {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-foreground);
    opacity: 0.85;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.3);
    padding: 0 0 2px;
    background: none;
    transition: opacity 0.2s ease;
  }
  .r69s-search__recent .predictive-search-results__clear:hover { opacity: 0.5; }
  /* Single-row carousel like the typed results */
  .r69s-search__recent .predictive-search-results__wrapper-products {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(16px, 1.6vw, 26px);
    /* Room for the hover lift and its shadow, same as the recently-viewed rail on the page. This is
       a scroller, so anything leaving its box is cut: 2px above against a 4px lift took the top off
       the card, and 8px below against a shadow reaching 14 + 30 sheared it along a hard line. The
       negative margins hand the added space back to the layout. */
    margin-block: -18px -36px;
    margin-inline: 0;
    padding: 20px 2px 44px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / 0.25) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .r69s-search__recent .predictive-search-results__card {
    flex: 0 0 auto;
    width: clamp(172px, 14vw, 232px);
    scroll-snap-align: start;
    list-style: none;
  }
  /* Kill the theme's hover "frame" (bg + padding + negative margin) on recently-viewed cards */
  .r69s-search__recent .predictive-search-results__card--product:hover {
    background: none;
    padding: 0;
    margin: 0;
  }
  @media screen and (max-width: 749px) {
    .r69s-search__recent { padding: 0 18px 32px; }
    .r69s-search__recent .recently-viewed-wrapper { padding-top: 24px; }
    .r69s-search__recent .predictive-search-results__wrapper-products {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px 8px;
      overflow: visible;
      padding: 0;
    }
    .r69s-search__recent .predictive-search-results__card { width: auto; }
  }

  /* Search keeps two products per row on every phone. This used to drop to one below 400px to
     match the collection grid, and that rule has been removed there too. */

  /* ---- Real collection cards in the panel ------------------------------------
     The results and the recently-viewed row render the SAME static _product-card block as the
     collection grid (sections/r69-search-cards.liquid) — no bespoke search card any more. The
     card's own CSS ships on every page via the r69-card-seed section; here only the panel's
     list geometry lives. The lis carry .product-grid__item and the ULs .product-grid, so the
     theme's card rules (equal heights, hover arrows) apply as on collections. */
  .r69s-results__products .product-card,
  .r69s-search__recent .product-card {
    height: 100%;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:302) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
    align-items: center;
  }

  /* Always-visible field: don't apply the icon-era negative margins */
  .search-action--field {
    margin: 0 !important;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:section (INDEX:303) */
.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;
  }

  /* Class mirrored by r69MirrorHeaderFlags() in theme.liquid. This one was the worst offender:
     section.liquid ships on every page, and a body :has() with a nested :not(:has()) was
     re-evaluated on every DOM insertion in the document. */
  body.r69-transparent-header-last #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:305) */
.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:307) */
.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:308) */
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:309) */
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-current='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-current='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-current='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:311) */
/*
   * 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:strikethrough-variant (INDEX:316) */
/* An OUTLINED line, not a white one: the two <line>s below are the same diagonal, drawn as a
     wide white halo with a narrow ink core on top. A single white line vanished on white and
     pale-grey swatches — and the sold-out swatch is dimmed to 0.4 underneath it, so a white
     swatch turns even paler and takes the line with it. The owner only learned the colour was
     gone by tapping it and finding add-to-cart disabled.

     Ink on light, halo on dark: the pair carries on every swatch, colour or metal texture,
     with no colour maths — the swatch's colour lives on the sibling .swatch element, which no
     selector here can read. */
  .variant-option__strikethrough--corner line {
    stroke: rgb(255 255 255);
    stroke-width: 3.5px;
  }

  .variant-option__strikethrough--corner line + line {
    stroke: rgb(var(--color-foreground-rgb));
    stroke-width: 1.5px;
  }
/* END_SNIPPET:strikethrough-variant */
/* START_SNIPPET:swatch (INDEX:319) */
/* Sold-out option value: the swatch dims like the disabled cart button but
     stays fully clickable (strikethrough renders on top of it). */
  .variant-option__button-label--has-swatch.variant-option__button-label--unavailable .swatch {
    opacity: 0.4;
  }
/* END_SNIPPET:swatch */
/* START_SNIPPET:text-component-shimmer-styles (INDEX:321) */
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:322) */
: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:324) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    /* Above the header. With showModal() the dialog lived in the browser top layer (above every
       z-index); non-modal show() ranks by z-index, and the sticky header sits at --layer-overlay/
       --layer-menu-drawer (16-18), so a drawer based on --layer-sticky (8) rendered UNDER the header.
       --layer-temporary (20) clears the header; the backdrop (JS-set to this minus 1) still covers it. */
    z-index: calc(var(--layer-temporary) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    /* Sit at the right edge; the slide is done with transform (compositor-only) — NOT by animating
       `right` (a layout property, which re-laid-out the drawer + its cart contents every frame = the
       janky/glitchy slide). transform keeps the slide smooth even while the main thread is busy. */
    right: 0;
    transform: translateX(100%);
    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;
    transform: translateX(0);
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
    will-change: transform;
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
    will-change: transform;
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
    will-change: transform;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      transform: translateX(100%);
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      transform: translateX(-50%);
    }
  }

  @keyframes drawer-slide-out {
    to {
      transform: translateX(100%);
    }
  }

  .theme-drawer__dialog::backdrop {
    /* --backdrop-color-rgb is empty in this theme (--color-shadow-rgb is never defined), so the stock
       rgb(var(--backdrop-color-rgb) / x) backdrop rendered fully transparent. A literal black dim
       (custom properties do not inherit into ::backdrop on older engines) — the exact look the
       owner's custom drawers had. Still used by nested showModal() dialogs inside a drawer. */
    background: rgb(0 0 0 / 0.42);
  }

  /* The drawer's own dim. Drawers open non-modal (show(), not showModal()) so the native ::backdrop
     no longer renders for them — a modal dialog inert-s the whole document and forced a ~720ms style
     recalc on every open/close. This is one shared fixed element (created by theme-drawer.js); its
     z-index is set inline to sit just below the topmost open drawer. */
  .theme-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-timing-fade-out);
  }

  .theme-drawer__backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .theme-drawer__backdrop {
      transition: none;
    }
  }

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

  /* NOTE: the gift-card denomination chip (.r69-denom, markup below) is styled from
     snippets/product-card.liquid, NOT from here. Horizon compiles a component's {% stylesheet %}
     into a page only when that component is SERVER-RENDERED on it, and the rails that matter most
     for these chips inject their cards from a fetch — on a product page nothing renders this
     snippet, so none of this block reaches the page and the chips arrived completely unstyled.
     product-card.liquid is always compiled wherever a card can appear. */
/* END_SNIPPET:variant-swatches */