/** Shopify CDN: Minification failed

Line 2467:5 Cannot use type selector "__tag" directly after nesting selector "&"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.error-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    background-color: var(--color-background);
  }

  .error-404__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: var(--space-8) var(--space-4);
  }

  .error-404__title {
    font-family: var(--font-title-family);
    font-size: var(--font-size-5xl);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: var(--space-2);
  }

  .error-404__subtitle {
    font-family: var(--font-body-family);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-8);
    color: var(--color-foreground);
  }

  .error-404__message {
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: var(--space-1);
  }

  .error-404__search-form {
    width: 100%;
    max-width: 480px;
    margin-bottom: var(--space-8);
  }

  .error-404__search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-background-alt);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--space-4);
  }

  .error-404__search-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body-family);
    font-size: var(--font-size-md);
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    outline: none;
    border-bottom: 1.5px solid #000;
  }

  .error-404__search-submit {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .error-404__search-submit svg {
    width: var(--font-size-md);
    height: auto;
  }

  .error-404__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 480px;
  }

  .error-404__cta-button {
    flex: 1;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    transition: background-color 0.3s var(--ease-out-quint), color 0.3s var(--ease-out-quint),
      border-color 0.3s var(--ease-out-quint);

    &[data-variant='primary'] {
      background-color: var(--color-foreground);
      color: var(--color-background);
      border: 1px solid var(--color-foreground);

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

    &[data-variant='secondary'] {
      background-color: transparent;
      color: var(--color-foreground);
      border: 1px solid var(--color-foreground);

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

  .error-404__recommendations {
    width: 100%;
    max-width: 1200px;
    padding-block: var(--space-16);
  }

  .error-404__recommendations-title {
    font-family: var(--font-title-family);
    font-size: var(--font-size-2xl);
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 var(--space-4) 0;
  }

  .error-404__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-2);
    row-gap: var(--space-6);

    @media (min-width: 768px) {
      grid-template-columns: repeat(4, 1fr);
      column-gap: var(--space-4);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .error-404__cta-button {
      transition: none !important;
    }
  }
/* END_SECTION:404 */

/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
    height: 20px;
    z-index: var(--layer-sticky);
    width: 100%;
    overflow: hidden;
    font-family: var(--font-body-family);
    font-weight: 600;
    font-size: var(--font-size-3xs);
    color: #000;
    background-color: #fff;
    position: relative;
    top: 0;
    transition: background-color var(--motion-quick) var(--ease-out-quint), color var(--motion-quick) var(--ease-out-quint);

    &.is-sticky {
      position: sticky;
    }

    &.is-search-active {
      z-index: var(--layer-overlay);
    }
  }

  .slide {
    width: 100%;
    inset: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background-color: var(--slide-bg);
    color: var(--slide-color);
    transition: opacity var(--transition-speed) var(--ease-out-quint), visibility 0s linear var(--transition-speed),
      background-color var(--motion-quick) var(--ease-out-quint), color var(--motion-quick) var(--ease-out-quint);

    &.is-active {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--transition-speed) var(--ease-out-quint), visibility 0s linear 0s,
        background-color var(--motion-quick) var(--ease-out-quint), color var(--motion-quick) var(--ease-out-quint);

      .text {
        transform: none;
        opacity: 1;
      }
    }

    a,
    .text {
      display: flex;
      color: inherit;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
    }

    .text {
      transform: translateY(8px);
      opacity: 0;
      transition: transform var(--transition-speed) var(--ease-out-quint), opacity var(--transition-speed) var(--ease-out-quint);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .announcement-bar,
    .slide,
    .slide.is-active,
    .text {
      transition: none;
    }

    .text {
      transform: none;
      opacity: 1;
    }
  }

  /* Transparent-over-hero state. Background/colour changes fall through to
     the base --motion-quick fades so un-hover eases back instead of snapping. */
  .template-index .announcement-bar:not(.is-sticky):not(.is-hover) {
    background-color: transparent;
  }

  .template-index .announcement-bar:not(.is-sticky):not(.is-hover):not(.is-search-active) .slide {
    background-color: transparent;
    color: #fff;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:captcha-challenge (INDEX:4) */
.shopify-challenge__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;

    & .shopify-challenge__button {
      border: 0;
      background: none;
      text-transform: uppercase;
      border-bottom: 2px solid #000;
      padding: 0;
      font-size: var(--font-size-sm);
      font-family: var(--font-button-family);
    }

    & .shopify-challenge__message {
      margin-bottom: var(--space-4);
    }
  }
/* END_SECTION:captcha-challenge */

/* START_SECTION:cart (INDEX:5) */
.cart-page {
    padding-top: var(--space-section-sm);
    position: relative;
    max-width: 900px;
    margin: auto;

    @media (min-width: 768px) {
      padding-block: var(--space-section-sm);
    }
  }

  .cart-page[data-checkout-only] > *:not([data-cart-checkout-only]) {
    display: none;
  }

  .cart-page__checkout-only {
    display: flex;
    justify-content: center;
    padding-block: var(--space-section);
  }

  .cart-page__checkout-only-button {
    background-color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    color: var(--color-background);
    min-height: var(--control-height-lg);
    padding: var(--sp-16) var(--sp-32);
    font-size: var(--font-size-md);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.15s ease;

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .cart-page__header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-16);
    margin-bottom: var(--sp-24);
  }

  .cart-page__title {
    font-family: var(--font-title-family);
    font-weight: 300;
    font-size: var(--font-size-fluid-3xl);
    line-height: var(--leading-tight);
  }

  .cart-page__item-count {
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  .cart-page__banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16);
    margin-bottom: var(--sp-16);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid var(--color-feedback-error-border);
    border-left: 2px solid var(--color-feedback-error);
    font-size: var(--font-size-2xs);
    line-height: 1.45;

    &[hidden] {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: cart-page-banner-in 0.28s var(--ease-out-quint) both;

      &[data-dismissing] {
        animation: cart-page-banner-out 0.2s ease forwards;
      }
    }
  }

  @keyframes cart-page-banner-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes cart-page-banner-out {
    to {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  .cart-page__banner-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.15em;
    color: var(--color-feedback-error);

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .cart-page__banner-message {
    flex: 1;
    margin: 0;
  }

  .cart-page__banner-dismiss {
    flex-shrink: 0;
    width: var(--tap-target);
    height: var(--tap-target);
    margin: calc(var(--tap-target) / -2 + 0.625rem);
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .cart-page__layout {
    display: flex;
    flex-direction: column;
    gap: var(--sp-40);

    &[hidden] {
      display: none;
    }

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr minmax(0, 400px);
      align-items: start;
      gap: var(--sp-40);
    }
  }

  .cart-page__items {
    display: flex;
    flex-direction: column;

    @media (min-width: 768px) {
      width: stretch;
      margin-left: 0;
    }
  }

  .cart-page__summary {
    background-color: var(--color-background-alt);
    border-top: 2px solid var(--color-background-accent);
    padding: var(--sp-16) var(--sp-16) var(--sp-40) var(--sp-16);

    @media (min-width: 768px) {
      position: sticky;
      top: calc(var(--header-height) + var(--header-offset) + 20px);
      transition: top 0.2s ease-in-out;
      border: 2px solid var(--color-background-accent);
      padding: var(--sp-16);
    }
  }

  .cart-page__summary-title {
    font-family: var(--font-title-family);
    font-weight: 300;
    font-size: var(--font-size-fluid-xl);
    margin-bottom: var(--sp-16);
  }

  .cart-page__breakdown {
    display: flex;
    flex-direction: column;
  }

  .cart-page__breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-8);
    font-size: var(--font-size-2xs);
    line-height: 1;

    &:has(~ &) {
      margin-bottom: var(--sp-8);
    }

    &.cart-page__breakdown-item--total {
      margin-top: var(--sp-8);
      padding-top: var(--sp-24);
      border-top: 1px solid var(--color-border);
      font-size: var(--font-size-sm);
      font-family: var(--font-button-family);
      text-transform: uppercase;
    }
  }

  .cart-page__total-price {
    font-weight: 600;

    &.cart-page__total-price--discount {
      color: var(--color-success);
      display: contents;
    }
  }

  .cart-page[data-syncing] {
    .cart-page__total-price {
      opacity: 0.45;
      transition: opacity 0.15s ease;
    }

    .shop-pay-button {
      opacity: 0.6;
      cursor: progress;
      pointer-events: none;
    }
  }

  .cart-page__discount-form {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-8);
    width: 100%;
  }

  .cart-page__discount-input {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-12);
    text-transform: uppercase;
    font-size: var(--font-size-2xs);
    font-family: var(--font-button-family);
    line-height: 1;
    background: transparent;
    transition: border-color 0.2s ease;
    outline: none;

    &::placeholder {
      color: inherit;
      text-transform: uppercase;
      font-family: inherit;
      transition: opacity 0.2s ease;
    }

    &:not(:placeholder-shown),
    &:focus {
      border-color: var(--color-foreground);

      &::placeholder {
        opacity: 0;
      }
    }

    &[data-error] {
      border-color: var(--color-sale);
      color: var(--color-sale);
    }

    &[data-loading] {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  .cart-page__discount-apply {
    font-size: var(--font-size-4xs);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    font-weight: 500;
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-12);
    transform: translateX(5px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease,
      color 0.2s ease;
    pointer-events: none;
    line-height: 1;

    &:disabled {
      cursor: not-allowed;
    }

    &:hover:not(:disabled):not([data-loading]),
    &:focus:not(:disabled):not([data-loading]) {
      background: var(--color-foreground);
      color: var(--color-background);
    }

    &[data-loading] {
      pointer-events: none;
      opacity: 0.3;
    }
  }

  .cart-page__discount-apply:has(+ .cart-page__discount-input:focus),
  .cart-page__discount-apply:has(+ .cart-page__discount-input:not(:placeholder-shown)) {
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;

    &:not(:disabled) {
      opacity: 1;
    }

    &:disabled {
      opacity: 0.4;
    }
  }

  .cart-page__discount-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    font-size: var(--font-size-4xs);

    &[data-open] {
      opacity: 1;
      visibility: visible;
      transform: translateY(-5px);
      pointer-events: auto;
    }
  }

  .cart-page__discount-note {
    display: block;
    text-align: right;

    &[data-hidden] {
      display: none;
    }
  }

  .cart-page__discount-error {
    font-size: var(--font-size-4xs);
    color: var(--color-sale);
    text-align: right;

    &[data-hidden] {
      display: none;
    }
  }

  .cart-page__discount-tag {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    gap: var(--sp-4);
    width: max-content;
    cursor: default;
    color: var(--color-foreground);

    svg {
      width: var(--font-size-2xs);
    }
  }

  button.cart-page__discount-tag {
    cursor: pointer;
  }

  .cart-page__checkout-buttons {
    margin-top: var(--sp-16);

    .cart-page__checkout-form {
      &:has(.shop-pay-button:not([hidden])) {
        display: flex;
        gap: var(--sp-8);
      }
    }
  }

  .cart-page__checkout-button,
  .cart-page__sticky-checkout-button {
    background-color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    color: var(--color-background);
    height: 55px;
    font-size: var(--font-size-md);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-weight: 500;
    width: 100%;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.15s ease;

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .cart-page__checkout-spinner {
      display: none;
    }

    /*
     * Checkout awaiting state (T8 port of minicart T3) — the ONLY busy look
     * these buttons ever show; background syncing never dims/disables them
     * (§1 decision 4). `[data-awaiting]` is set for the brief window between
     * a busy click and the flush settling, never by syncBusyUI().
     */
    &[data-awaiting] {
      cursor: progress;

      .cart-page__checkout-spinner {
        display: inline-flex;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .cart-page__checkout-button[data-awaiting] .cart-page__checkout-spinner,
    .cart-page__sticky-checkout-button[data-awaiting] .cart-page__checkout-spinner {
      animation: cart-page-checkout-spinner-in 150ms var(--ease-out-quint) both;
    }
  }

  @keyframes cart-page-checkout-spinner-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .cart-page__empty-state {
    text-align: center;
    padding-block: var(--space-section-sm) var(--space-section-lg);

    &[hidden] {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      &[data-entering] {
        animation: cart-page-empty-in 0.4s var(--ease-out-quint) both;
      }

      /* Reverse of cart-page-empty-in (T8 port of minicart §4) — plays when a
         failed last-line removal rolls the optimistic empty state back. */
      &[data-leaving] {
        animation: cart-page-empty-out var(--motion-exit) var(--ease-out-quint) both;
      }
    }

    h1 {
      font-size: var(--font-size-fluid-3xl);
      font-family: var(--font-title-family);
      font-weight: 300;
      margin-bottom: var(--sp-12);
      line-height: 1;
    }

    .cart-page__empty-subtitle {
      font-size: var(--font-size-sm);
      font-weight: 300;
      margin-bottom: var(--sp-24);
    }
  }

  @keyframes cart-page-empty-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes cart-page-empty-out {
    to {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  /* Fresh-row settle fade (T8 port of minicart §4) — stamped by
     stampFreshRows() on a row whose own optimistic change just settled. */
  @media (prefers-reduced-motion: no-preference) {
    .cart-page__item[data-fresh] {
      animation: cart-page-item-fresh 240ms var(--ease-out-quint) both;
    }
  }

  @keyframes cart-page-item-fresh {
    from {
      opacity: 0.55;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .cart-page__empty-collections {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-12);
    margin-bottom: var(--sp-24);

    a {
      text-decoration: none;
      background-color: var(--color-background);
      color: var(--color-foreground);
      padding: var(--sp-16) var(--sp-24);
      text-transform: uppercase;
      font-size: var(--font-size-xs);
      border: 1px solid var(--color-foreground);
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      font-family: var(--font-button-family);

      &:first-child {
        background-color: var(--color-foreground);
        color: var(--color-background);
      }

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

  .cart-page__continue-shopping {
    display: inline-block;
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--color-foreground);
  }

  .cart-page__recommendations {
    margin-top: var(--space-section-sm);
  }

  .cart-page__recommendations-title {
    font-family: var(--font-title-family);
    font-weight: 300;
    font-size: var(--font-size-fluid-xl);
    margin-bottom: var(--sp-16);
  }

  .cart-page__recommendations[hidden] {
    display: none;
  }

  .cart-page__sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--layer-sticky);
    padding: var(--sp-12) var(--page-gutter);
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);

    &[hidden] {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: transform var(--motion-quick) var(--ease-out-quint);
    }

    @media (min-width: 768px) {
      display: none !important;
    }
  }

  .cart-page__sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .cart-page__checkout-form .shop-pay-button {
    width: 100%;
    height: 55px;
  }
/* END_SECTION:cart */

/* START_SECTION:collection-carousel (INDEX:6) */
.collection-carousel {
    position: relative;
    padding-top: 2px;
    margin-bottom: var(--space-8);
  }

  .collection-carousel__tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    position: absolute;
    bottom: 100%;
    z-index: var(--layer-heightened);
    width: 100%;
  }

  .collection-carousel__tabs--alt {
    position: relative;
    margin-bottom: var(--space-2);
    gap: var(--space-6);

    .collection-carousel__tab {
      color: #000;
      border-radius: 8px;
      min-height: auto;
      padding: var(--space-1) var(--space-2);
      opacity: 0.4;

      &[aria-selected='true'] {
        background-color: var(--color-background-accent);
      }

      &::after {
        display: none;
      }
    }
  }

  .collection-carousel__tab {
    border: 0;
    background: none;
    font-size: var(--font-size-2xs);
    color: #fff;
    opacity: 0.5;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: var(--font-button-family);
    font-weight: 400;
    text-transform: uppercase;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
    position: relative;

    &[aria-selected='true'] {
      opacity: 1;

      &::after {
        opacity: 1;
        transform: scaleY(1);
      }
    }

    &:hover {
      opacity: 1;

      &::after {
        opacity: 1;
        transform: scaleY(1);
      }
    }

    &:focus-visible {
      outline: 1px solid currentColor;
      outline-offset: 1px;
    }

    &::after {
      content: '';
      display: block;
      width: 2px;
      height: 20px;
      background: currentColor;
      opacity: 0;
      transform: scaleY(0);
      transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
      position: absolute;
      bottom: 0;
      transform-origin: bottom;
    }
  }

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

  /* Searchspring panels stack the skeleton placeholders on top of
     the rail rather than above it, so the rail's CLS min-height
     defines the visible area and there is no layout shift when
     skeletons are removed. */
  .collection-carousel__panel:has(> [data-js='collection-carousel-skeletons']) {
    position: relative;
  }

  .collection-carousel__empty {
    margin: 0;
    color: rgb(0 0 0 / 0.5);
  }

  /* Skeleton placeholders shown while a Searchspring rail hydrates.
     Positioned absolutely so the rail itself reserves the height
     (via its `min-height` CLS reservation) and skeletons sit on
     top of that empty area. Hidden once the rail dispatches
     `carousel:initialised` (or `:empty`). */
  .collection-carousel__skeletons {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    gap: 2px;
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--motion-quick) var(--ease-out-quint);
  }

  @media (min-width: 768px) {
    .collection-carousel__skeletons {
      --slides-to-show: var(--slides-to-show-desktop, 4);
    }
  }

  /* Mirrors the real rail's mobile centred layout. The padding
     matches the track's `--peek: 8cqi` (see `snippets/carousel.liquid`)
     so card widths resolve against the same content box, and the row
     is centred because the rail's conveyor belt (`_recenter` in
     `assets/carousel.js`) keeps clone slides on both sides of the
     active card — at rest the active slide sits in the middle with
     symmetric peeks, so the overlay's middle card (odd count) must
     sit there too. */
  @media (max-width: 767px) {
    .collection-carousel__skeletons[data-mobile-layout='centered'] {
      padding-inline: 8%;
      justify-content: center;
    }
  }

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

  .collection-carousel__skeletons:has(+ searchspring-carousel[data-initialised='true']),
  .collection-carousel__skeletons[data-resolved='true'] {
    opacity: 0;
  }

  .collection-carousel__skeleton-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - (var(--slides-to-show-mobile) - 1) * 2px) / var(--slides-to-show-mobile));

    @media (min-width: 768px) {
      flex: 0 0 calc((100% - (var(--slides-to-show-desktop) - 1) * 2px) / var(--slides-to-show-desktop));
    }
  }

  .collection-carousel__skeleton-image {
    aspect-ratio: 200 / 290;
    border-radius: var(--radius-xs);
  }

  /* Text-line placeholders mirroring `.product-card__title`,
     `.product-card__colour-name` and `.product-card__price` in
     `snippets/product-card.liquid`. The title line's margin-top also
     reserves the swatch row (`.product-card__meta`: 24px swatch +
     `var(--sp-8)` margin top/bottom) that this skeleton doesn't draw,
     so the lines sit at the same offset as the hydrated card. */
  .collection-carousel__skeleton-line {
    margin-inline: var(--sp-8);
    border-radius: var(--radius-xs);
  }

  .collection-carousel__skeleton-line[data-skeleton-line='title'] {
    margin-top: calc((var(--sp-8) * 2) + 24px);
    height: 16px;
    width: 70%;
  }

  .collection-carousel__skeleton-line[data-skeleton-line='colour'] {
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-24);
    height: 12px;
    width: 40%;
  }

  .collection-carousel__skeleton-line[data-skeleton-line='price'] {
    height: 14.5px;
    width: 30%;
  }
/* END_SECTION:collection-carousel */

/* START_SECTION:collection-seo-copy (INDEX:7) */
.collection-seo-copy {
    max-width: 680px;
    margin: var(--space-12) var(--space-4);
    text-align: center;
    color: #000;

    * {
      color: inherit;
      font-style: normal;
    }

    h2 {
      margin-bottom: var(--space-2);
      font-family: var(--font-title-family);
      font-size: var(--font-size-xl);
      font-weight: 300;
      text-transform: uppercase;

      &:is(:not(:first-child)) {
        margin-top: var(--space-6);
      }
    }

    p {
      font-family: var(--font-body-family);
      font-size: var(--font-size-3xs);
      line-height: 1.5;
    }

    @media (min-width: 768px) {
      margin-inline: auto;

      h2 {
        font-size: var(--font-size-2xl);
      }

      p {
        font-size: var(--font-size-xs);
      }
    }
  }
/* END_SECTION:collection-seo-copy */

/* START_SECTION:collection-subcollection-links (INDEX:8) */
.subcollection-links-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    align-items: center;
    padding-inline: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .subcollection-links-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
  }

  .subcollection-links-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--color-background) 80%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .subcollection-links-wrapper[data-can-scroll-left='true']::before {
    opacity: 1;
  }

  .subcollection-links-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-background) 80%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .subcollection-links-wrapper[data-can-scroll-right='true']::after {
    opacity: 1;
  }

  .subcollection-links {
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 0.6rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .subcollection-links::-webkit-scrollbar {
    display: none;
  }

  .subcollection-links li {
    display: inline-flex;
  }

  .subcollection-links__link {
    font-size: var(--font-size-2xs);
    background-color: var(--color-background-accent);
    padding: var(--space-2) var(--space-3);
    font-weight: 300;
    font-family: var(--font-button-family);
    text-transform: uppercase;
    white-space: nowrap;
    color: #000;
    text-decoration: none;
  }

  .subcollection-links-container__title {
    text-transform: uppercase;
    font-family: var(--font-title-family);
    font-size: var(--font-size-2xl);
    font-weight: 300;
    margin-bottom: 0;
  }
/* END_SECTION:collection-subcollection-links */

/* START_SECTION:collection (INDEX:9) */
.section-collection {
    margin-top: var(--space-4);
  }

  .collection-upper {
    margin: var(--space-2) var(--space-2) 0 var(--space-2);

    @media (min-width: 768px) {
      margin: var(--space-2);
    }
  }

  .collection-upper__row {
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      gap: var(--space-8);
      overflow: auto;
    }
  }

  .collection-main {
    min-width: 0;
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:10) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:faq-section (INDEX:11) */
.faq-section {
    padding-inline: 15px;

    @media screen and (min-width: 768px) {
      max-width: 1200px;
      margin: 40px auto;
    }
  }

  .faq-heading {
    font-size: var(--font-size-fluid-3xl);
    padding-top: 30px;

    @media (min-width: 768px) {
      padding-top: 60px;
      margin-bottom: 20px;
    }
  }

  .faq-section {
    .faq-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: start;

      @media screen and (min-width: 768px) {
        grid-template-columns: 250px 1fr;
        gap: 60px;
      }
    }

    .faq-nav-menu {
      position: relative;
      top: 0;
      align-self: start;

      @media screen and (min-width: 768px) {
        position: sticky;
        top: 100px;
      }
    }

    .help-centre-faqs-buttons {
      display: none;
      flex-direction: column;
      gap: 2rem;
      align-self: flex-start;

      @media (min-width: 768px) {
        display: flex;
      }

      .help-centre-faqs-button {
        font-size: 1rem;
        text-align: left;
        font-weight: bold;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: color 0.2s ease;
        background: none;
        border: 0;
      }
    }

    .faq-content {
      min-width: 0;
    }

    .faq-group {
      margin-bottom: 50px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .faq-group-title {
      font-family: var(--font-body-family);
      font-size: 20px;
      color: #000000;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
    }

    .faq-accordion {
      border-bottom: 1px solid #e5e5e5;

      &:last-child {
        border-bottom: none;
      }
    }

    .faq-accordion-button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      transition: all 0.2s ease;

      .faq-accordion-icon {
        transform: rotate(90deg);
      }

      &[aria-expanded='true'] {
        .faq-accordion-icon {
          transform: rotate(-90deg);
        }
      }
    }

    .faq-accordion-title {
      font-family: var(--font-body-family);
      font-size: 14px;
      font-weight: 600;
      line-height: normal;
      color: #000000;
      flex: 1;
    }

    .faq-accordion-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      margin-left: 15px;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .faq-accordion-content {
      height: 0;
      overflow: hidden;
    }

    .faq-accordion-content[data-animating] {
      transition: height var(--motion-drawer) var(--ease-out-quint);
    }

    .faq-accordion-body {
      padding: 0 0 20px 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 21px;
      color: #000000;

      p {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      li {
        list-style: disc !important;
      }

      strong {
        font-weight: 700;
      }

      a {
        color: #000000;
        text-decoration: underline;

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

      ul,
      ol {
        margin: 15px 0;
        padding-left: 20px;

        li {
          margin-bottom: 10px;
        }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-section .faq-accordion-content[data-animating],
    .faq-section .faq-accordion-icon {
      transition-duration: 0ms;
    }
  }
/* END_SECTION:faq-section */

/* START_SECTION:footer (INDEX:12) */
.footer {
    padding: var(--space-10) var(--space-3) var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .footer__heading {
    font-family: var(--font-title-family);
    font-weight: 300;
    font-size: var(--font-size-xl);
    margin: 0;
    line-height: 1;
  }

  .footer__copy {
    font-size: var(--font-size-2xs);
    text-align: center;
    margin: 0;
  }

  .footer__newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .footer__newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 350px;
    width: 100%;

    .h-captcha {
      display: none;
    }
  }

  .footer__newsletter-input {
    font-size: var(--font-size-md);
    font-family: inherit;
    color: inherit;
    border: 0;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
    padding: var(--space-3) var(--space-2);

    &::placeholder {
      font-size: var(--font-size-3xs);
    }

    &:focus {
      outline: none;
    }
  }

  .footer__newsletter-button {
    padding: 0;
    font-family: var(--font-button-family);
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    color: var(--color-foreground);
    background: none;
    border: 0;
    cursor: pointer;
    border-bottom: 2px solid currentColor;
    width: max-content;
    align-self: center;
  }

  .footer__newsletter-message {
    font-size: var(--font-size-2xs);
    color: #fff;
    background-color: var(--color-success);
    padding: var(--space-3);
    border-radius: 12px;
    text-align: center;
  }

  .footer__newsletter-message--error {
    background-color: var(--color-feedback-error);
  }

  .footer__newsletter-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
    z-index: var(--layer-temporary);
    max-width: min(90vw, 22rem);
    margin: 0;
    padding: var(--sp-12) var(--sp-16);
    font-size: var(--font-size-2xs);
    text-align: center;
    color: #fff;
    background-color: var(--color-success);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + var(--sp-24)));
    transition: transform var(--motion-drawer) var(--ease-out-quint), opacity var(--motion-quick) linear;

    &[data-visible='true'] {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .footer__newsletter-toast {
      transform: translate(-50%, 0);
      transition: opacity var(--motion-quick) linear;
    }
  }

  .footer__menus {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .footer__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer__menu-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .footer__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-8);

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
    }
  }

  .footer__social-link {
    width: 24px;
    height: 24px;

    > svg {
      width: 100%;
      height: 100%;
    }
  }

  .footer__alt-logo {
    width: 50px;
  }

  .footer__copyright {
    margin-block-start: var(--space-8);
    padding-top: var(--space-3);
    border-block-start: 1px solid rgba(0, 0, 0, 0.1);
    font-size: var(--font-size-4xs);
    text-align: center;

    small {
      font-size: inherit;
    }
  }

  .footer__accordion {
    .accordion__inner {
      text-transform: uppercase;
      padding: var(--space-2) var(--space-3) var(--space-4);
      font-family: var(--font-button-family);
      font-size: var(--font-size-2xs);
    }
  }

  @media (min-width: 768px) {
    .footer {
      padding: var(--space-12) var(--space-6) var(--space-3);
    }

    .footer__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: start;
      gap: var(--space-5);
    }

    .footer__menus {
      grid-column: 1;
      flex-direction: row;
      gap: var(--space-8);
      border-top: 0;
      flex-wrap: wrap;

      .accordion {
        summary {
          display: none;
        }
      }

      .accordion__inner {
        padding: 0;
      }
    }

    .footer__brand {
      grid-column: 2;
      gap: var(--space-16);
    }

    .footer__newsletter {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      max-width: 350px;
    }

    .footer__copyright {
      text-align: right;
    }

    .footer__socials {
      gap: var(--space-3);
    }

    .footer__social-link {
      width: 20px;
      height: 20px;
    }
  }

  .shopify-challenge__button {
    color: #000;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:13) */
.template-index main {
    margin-top: calc((var(--header-height, 80px) + var(--announcement-bar-height, 0px)) * -1);
  }

  header.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: var(--layer-header-menu);
    color: #ffffff;
    transition: background-color var(--motion-quick) var(--ease-out-quint),
      color var(--motion-quick) var(--ease-out-quint), transform var(--motion-drawer) var(--ease-out-quint);
    min-height: 40px;
    will-change: transform, background-color;

    @media (min-width: 768px) {
      min-height: 60px;
      padding: var(--space-2) var(--space-5);
      grid-template-rows: 1fr;
    }

    @media (min-width: 768px) and (max-width: 992px) {
      padding: var(--space-2);
    }

    &.is-sticky,
    &.is-hover {
      background-color: var(--color-background);
      color: var(--color-foreground);
    }

    &.is-search-active {
      z-index: var(--layer-overlay);
      background-color: var(--color-background);
      color: var(--color-foreground);
    }

    &.is-scrolled {
      transform: translateY(20px);
    }

    &[data-snap] .desktop-search {
      transition: none;
    }

    .logo {
      width: 170px;
      margin-inline: var(--space-4);
      color: inherit;
    }

    svg {
      transform: translateZ(0);
    }

    path {
      fill: currentColor;
    }

    .icon {
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      color: inherit;
      transition: opacity var(--motion-quick) var(--ease-out-quint);
    }

    .desktop-menu {
      display: none;
      font-family: var(--font-button-family);
      text-transform: uppercase;
      font-size: clamp(var(--font-size-4xs), calc(var(--font-size-4xs) + (100vw - 1200px) / 150), var(--font-size-2xs));
      gap: clamp(var(--sp-8), calc(var(--sp-8) + (100vw - 1200px) / 18.75), var(--sp-24));

      @media (min-width: 1200px) {
        display: flex;
        align-items: center;
      }

      a {
        position: relative;
        text-decoration: none;
        line-height: 1;
        color: currentColor;
        text-align: center;
        white-space: nowrap;
      }
    }

    .mobile-search {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--space-2);
      position: absolute;
      left: 0;
      right: 0;
      padding-inline: var(--space-2);
      top: 100%;
      transform: scaleY(1);
      transform-origin: left;
      opacity: 1;
      transition: transform var(--motion-drawer) var(--spring-panel), opacity var(--motion-quick) var(--ease-out-quint);
      padding-block: var(--space-2);

      @media (min-width: 768px) {
        display: none;
      }

      .icon {
        position: absolute;
        left: var(--space-4);

        svg {
          width: var(--font-size-lg);
          height: var(--font-size-lg);
        }
      }

      input {
        flex: 1;
        border: 1px solid currentColor;
        border-radius: var(--space-3);
        padding: var(--space-3) var(--space-2) var(--space-3) var(--space-8);
        background: none;
        text-transform: uppercase;
        line-height: 1;
        font-family: var(--font-button-family);
        font-size: var(--font-size-md);
        color: currentColor;

        &::placeholder {
          color: inherit;
          font-size: var(--font-size-3xs);
        }

        &:focus {
          outline: none;
        }
      }
    }

    .left-group {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
    }

    .right-group {
      display: flex;
      align-items: center;
      justify-self: end;

      .icons {
        display: flex;
        align-items: center;
        gap: 20px;

        @media (min-width: 768px) and (max-width: 992px) {
          gap: var(--space-2);
        }

        .icons__cart {
          position: relative;
          font-family: var(--font-body-family);
          cursor: pointer;

          svg {
            width: var(--font-size-sm);
            height: 18px;
          }

          sup {
            position: absolute;
            bottom: -5px;
            line-height: 1;
            display: flex;
            left: calc(100% - 4px);
          }
        }

        .icons__wishlist {
          display: none;

          @media (min-width: 768px) {
            display: block;
            cursor: pointer;

            svg {
              min-width: var(--font-size-lg);
              min-height: var(--font-size-lg);
              width: var(--font-size-lg);
              height: var(--font-size-lg);
            }

            path {
              fill: none;
              stroke: currentColor;
            }
          }
        }
      }
    }

    .header-account-component-container {
      position: relative;
      overflow: hidden;

      shopify-account {
        position: absolute;
      }

      .icon {
        pointer-events: none;

        svg {
          width: 18px;
          height: 18px;
        }
      }

      .account-icon {
        position: relative;
      }

      .account-icon__initials {
        position: absolute;
        bottom: -1px;
        right: -3px;
        font-family: var(--font-button-family);
        font-size: 8px;
        line-height: var(--leading-none);
      }
    }

    .desktop-search {
      display: none;
      color: currentColor;
      height: 30px;
      width: 180px;
      gap: var(--space-1);
      border: 1px solid currentColor;
      border-radius: 8px;
      padding-left: var(--space-2);
      cursor: text;
      transition: border-color var(--motion-quick) var(--ease-out-quint),
        color var(--motion-quick) var(--ease-out-quint);

      @media (min-width: 768px) {
        display: flex;
        align-items: center;
        margin-right: 1rem;
      }

      @media (min-width: 768px) and (max-width: 992px) {
        margin-right: 0.5rem;
      }

      > svg {
        width: var(--font-size-3xs);
        height: var(--font-size-3xs);
      }

      input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: none;
        padding: 0;
        font-family: var(--font-button-family);
        text-transform: uppercase;
        font-size: var(--font-size-3xs);
        color: currentColor;
        outline: none;

        &::placeholder {
          color: inherit;
        }
      }
    }

    .mobile-toggle {
      display: flex;
      border: 0;
      background: none;
      padding: 0;
      color: inherit;
      cursor: pointer;

      svg {
        width: 18px;
        height: 18px;
      }

      @media (min-width: 1200px) {
        display: none;
      }
    }

    .mobile-search-icon {
      display: none;
      align-items: center;
      background: none;
      border: 0;
      padding: 0;
      color: inherit;
      cursor: pointer;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateX(-5px);
      transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint);

      svg {
        width: var(--font-size-lg);
        height: var(--font-size-lg);
      }

      @media (max-width: 767px) {
        display: flex;
      }
    }
  }

  body:not(.template-index) header.header {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  @media (max-width: 767px) {
    .template-index .header.is-sticky .mobile-search {
      transform: scaleY(0);
      opacity: 0;
      pointer-events: none;
      transition: none;
    }

    .template-index .header.is-sticky .mobile-search-icon {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .template-index .header.is-hover .mobile-search {
      background-color: var(--color-background);
      transition: background-color var(--motion-quick) var(--ease-out-quint);
    }

    body:not(.template-index) header.header {
      .mobile-search {
        display: none;
      }
    }

    body:not(.template-index) .header .mobile-search-icon {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    header.header .logo {
      view-transition-name: vt-header-logo;
    }

    header.header .mobile-search {
      view-transition-name: vt-header-search;
    }

    html:has(.mobile-menu[open], .mobile-search-panel[open]) header.header .logo {
      view-transition-name: none;
    }

    html:has(.mobile-menu[open], .mobile-search-panel[open]) header.header .mobile-search {
      view-transition-name: none;
    }
  }

  /* Cross-document navigations (typed vt-page-nav in critical.css): the
     header lifts into its own group so it holds steady — or glides between
     its scrolled/unscrolled offsets — while the page content cross-fades.
     The mobile logo/search morph names yield so the header travels as one
     piece; same-document morphs carry no type and are unaffected. */
  html:active-view-transition-type(vt-page-nav) header.header {
    view-transition-name: vt-header;
  }

  html:active-view-transition-type(vt-page-nav) header.header .logo,
  html:active-view-transition-type(vt-page-nav) header.header .mobile-search {
    view-transition-name: none;
  }

  ::view-transition-group(vt-header-logo),
  ::view-transition-group(vt-header-search) {
    animation-duration: var(--motion-drawer);
    animation-timing-function: var(--ease-out-quint);
  }

  ::view-transition-old(vt-header-logo),
  ::view-transition-new(vt-header-logo),
  ::view-transition-old(vt-header-search),
  ::view-transition-new(vt-header-search) {
    animation-duration: var(--motion-drawer);
    animation-timing-function: var(--ease-out-quint);
  }

  ::view-transition-old(vt-header-logo) {
    display: none;
  }

  ::view-transition-new(vt-header-logo) {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    header.header,
    header.header[data-snap] {
      transition: background-color var(--motion-quick) var(--ease-out-quint),
        color var(--motion-quick) var(--ease-out-quint);
    }

    header.header.is-scrolled {
      transform: none;
    }

    header.header .icon,
    .mobile-search,
    .mobile-search-icon,
    .desktop-search {
      transition: none;
    }

    ::view-transition-group(vt-header-logo),
    ::view-transition-group(vt-header-search),
    ::view-transition-old(vt-header-logo),
    ::view-transition-new(vt-header-logo),
    ::view-transition-old(vt-header-search),
    ::view-transition-new(vt-header-search) {
      animation: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero-banner (INDEX:31) */
.hero-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: var(--mobile-height, 90dvh);
  }

  @media (min-width: 768px) {
    .hero-banner {
      min-height: var(--desktop-height, 95dvh);
    }
  }

  .hero-banner__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed, 0.6s) ease-in-out, visibility 0s linear var(--transition-speed, 0.6s);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    &[data-active='true'] {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--transition-speed, 0.6s) ease-in-out, visibility 0s linear 0s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-banner__slide,
    .hero-banner__slide[data-active='true'] {
      transition: none !important;
    }
  }

  .hero-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--lqip-mobile);
      background-size: cover;
      background-position: center;
      filter: blur(20px);
      transform: scale(1.1);
      z-index: var(--layer-base);
    }

    picture,
    img,
    video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      border: none;
    }

    picture,
    img {
      z-index: var(--layer-flat);
    }

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

    .media-desktop {
      display: none;
    }

    .media-mobile {
      display: block;
    }
  }

  @media (min-width: 768px) {
    .hero-banner__media::before {
      background-image: var(--lqip-desktop);
    }

    .hero-banner__media {
      .media-desktop {
        display: block;
      }

      .media-mobile {
        display: none;
      }
    }
  }

  .hero-banner__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--layer-raised);
    pointer-events: none;
  }

  .hero-banner__content {
    position: relative;
    z-index: var(--layer-heightened);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  .hero-banner__sales-title {
    font-size: var(--fs-mobile, 14px);
    font-family: var(--font-button-family);
    font-weight: 300;
    margin-bottom: var(--space-4);
  }

  .hero-banner__title {
    font-size: var(--fs-mobile, 32px);
    font-family: var(--font-title-family);
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
  }

  .hero-banner__cta {
    font-size: var(--font-size-sm);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
    text-transform: uppercase;
  }

  .hero-banner__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-window-overlay);
  }

  .hero-banner__subtitle {
    position: absolute;
    bottom: 90px;
    width: 100%;
    font-size: var(--font-size-2xs);
    line-height: normal;
  }

  @media (min-width: 768px) {
    .hero-banner__subtitle {
      bottom: 120px;
    }
  }

  @media (min-width: 768px) {
    .hero-banner__sales-title {
      font-size: var(--fs-desktop, 18px);
    }
    .hero-banner__title {
      font-size: var(--fs-desktop, 56px);
    }
  }
/* END_SECTION:hero-banner */

/* START_SECTION:information-policy (INDEX:32) */
.inside-live-chat {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 60px;
  }

  .inside-live-chat h4 {
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .inside-live-chat__status {
    color: #56c164;
    font-weight: 600;
    margin-bottom: 20px;

    &[data-status='offline'] {
      color: #ff0000;
    }
  }

  .inside-live-chat__button {
    text-transform: uppercase;
    border: 1px solid #000000;
    padding: 20px 40px;
    font-size: 14px;
    margin-top: 15px;
    font-weight: 600;
    font-family: var(--font-button-family);
    background: none;
    cursor: pointer;
  }

  .inside-live-chat {
    text-align: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto 60px auto;

    &__tag {
      background: #f3f0ec;
      padding: 15px 20px;
      border: 1px solid #e7e7e7;
      cursor: pointer;
      border-radius: var(--radius-sm);
      margin: 0 0 30px;
      font-weight: 700;
      max-width: 400px;
      width: 100%;
    }
  }

  .information-policy-section {
    padding-inline: 15px;
    margin: auto;

    @media screen and (min-width: 768px) {
      max-width: 1200px;
    }

    .help-centre-buttons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: 1rem;
      column-gap: 1.5rem;

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

    .help-button {
      background: #ffffff;
      border: 1px solid #d8d8d8;
      border-radius: var(--radius-md);
      font-size: 1rem;
      padding: 1rem;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font-button-family);

      &:hover {
        border-color: #9a9a9a;
      }
    }

    .help-centre-arrow {
      fill: #afafaf;
      flex-shrink: 0;
      margin-left: 15px;
    }
  }

  .help-centre-modal {
    background: #ffffff;
    position: fixed;
    top: 10%;
    left: 50%;
    max-height: 80%;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% - 30px);
    max-width: 600px;
    padding: 3rem 2rem 1rem 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) scale(0);
    z-index: var(--layer-temporary);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;

    &[data-state='open'] {
      visibility: visible;
      opacity: 1;
      transform: translateX(-50%) scale(1);
      pointer-events: auto;
    }
  }

  .help-centre-modal__title {
    font-size: 24px;
  }

  .help-centre-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--layer-raised);
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.7;
    }

    svg {
      width: 24px;
      height: 24px;
    }
  }

  .help-centre-modal > div {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000000;

    p {
      margin-bottom: 16px;
    }

    strong {
      font-weight: 700;
    }

    a {
      color: #000000;
      text-decoration: underline;

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

  .help-centre-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: var(--layer-overlay);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;

    &[data-state='open'] {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .help-centre-modal,
    .help-centre-modal-bg {
      transition: none;
    }
  }
/* END_SECTION:information-policy */

/* START_SECTION:instagram-grid (INDEX:33) */
.instagram-grid {
    --slides-to-show-mobile: 1;
    --slides-to-show-desktop: 4;
    --slides-to-show: var(--slides-to-show-mobile);
    --slide-gap: 2px;
    --peek: 10%;

    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .instagram-grid {
      --slides-to-show: var(--slides-to-show-desktop);
      --peek: 0px;
    }

    /* Clones exist purely to give the centred mobile carousel a
       symmetric conveyor-belt buffer. Hide them on desktop so the
       static row reads as the original tile count and the rail
       still self-disables (track scrollWidth ≤ clientWidth). */
    .instagram-grid__track > [data-clone='true'] {
      display: none;
    }
  }

  .instagram-grid__track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-inline: var(--peek);
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--slide-gap);
  }

  .instagram-grid__track::-webkit-scrollbar {
    display: none;
  }

  .instagram-grid[data-dragging='true'] .instagram-grid__track {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .instagram-grid[data-animating='true'] .instagram-grid__track {
    scroll-snap-type: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .instagram-grid__track {
      cursor: grab;
    }
  }

  /* Shopify wraps each child block in a generated div — make each
     wrapper a proper carousel slide that fills its flex slot. */
  .instagram-grid__track > * {
    flex: 0 0 calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  @media (max-width: 767px) {
    .instagram-grid[data-mobile-layout='centered'] .instagram-grid__track > * {
      scroll-snap-align: center;
    }

    .instagram-grid__track > *:not([data-active='true']) .instagram-tile__body {
      opacity: 0;
      visibility: hidden;
    }
  }

  .instagram-grid__track > * > .instagram-tile {
    height: 100%;
  }

  .instagram-grid[data-disabled='true'] .instagram-grid__track {
    cursor: auto;
    overflow-x: hidden;
    scroll-snap-type: none;
  }

  @media (max-width: 767px) {
    .instagram-grid .carousel__count {
      display: inline-flex;
    }
  }
/* END_SECTION:instagram-grid */

/* START_SECTION:minicart (INDEX:35) */
dialog.minicart {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: hidden;
    display: none;
    pointer-events: none;

    &[open] {
      display: block;
    }

    &[data-state='open'],
    &[data-state='closing'] {
      pointer-events: auto;
    }

    &::backdrop {
      display: none;
    }
  }

  .minicart__panel {
    --minicart-motion-in: 300ms;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    background-color: var(--color-background);
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05);
    transform: translateX(100%);
    transition: transform var(--motion-exit) var(--ease-out-quint);
  }

  .minicart[data-state='open'] .minicart__panel {
    transform: translateX(0);
    transition: transform var(--minicart-motion-in) var(--spring-panel);
  }

  .minicart .swym-button-bar,
  .minicart-section .swym-button-bar {
    height: 0;
    width: 0;
    margin: 0;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  .minicart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-12) var(--sp-8);
    border-bottom: 1px solid var(--color-background-accent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;

    button {
      background: none;
      border: 0;
      width: 14px;
      padding: 0;
      cursor: pointer;
    }

    h2 {
      font-family: var(--font-title-family);
      font-weight: 300;
      text-transform: uppercase;
      font-size: var(--font-size-lg);
      margin: 0;
      line-height: 1;
    }
  }

  button.minicart__close-btn {
    width: 20px;
    height: auto;
  }

  .minicart[data-state='open'] .minicart__header {
    opacity: 1;
    transform: none;
    transition-delay: 30ms;
  }

  .minicart .shipping-bar {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }

  .minicart[data-state='open'] .shipping-bar {
    opacity: 1;
    transform: none;
    transition-delay: 30ms;
  }

  .minicart__body {
    position: relative;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--sp-12);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;

    .minicart__discount-tag {
      margin-top: var(--sp-8);
      margin-bottom: var(--sp-8);
    }
  }

  .minicart[data-state='open'] .minicart__body {
    opacity: 1;
    transform: none;
    transition-delay: 60ms;
  }

  .minicart__cart-button {
    position: relative;

    sup {
      position: absolute;
      bottom: 0;
      line-height: 1;
      transform: translate(2px, 5px);
      font-weight: 600;
      color: #000;
    }
  }

  .minicart__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-background-accent);
  }

  .minicart__loading-bar {
    position: relative;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-foreground) 18%, transparent);
    transition: opacity var(--motion-quick) var(--ease-out-quint);
  }

  @media (prefers-reduced-motion: no-preference) {
    .minicart[data-syncing] .minicart__loading-bar {
      opacity: 1;
    }

    .minicart[data-syncing] .minicart__loading-bar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 40%;
      height: 100%;
      background: var(--color-foreground);
      animation: minicart-loading-sweep 1.1s ease-in-out infinite;
    }
  }

  @keyframes minicart-loading-sweep {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(250%);
    }
  }

  .minicart__sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .minicart__banner {
    position: absolute;
    top: var(--banner-top, 56px);
    left: var(--sp-12);
    right: var(--sp-12);
    z-index: var(--layer-heightened);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16);
    background-color: #fff;
    color: var(--color-foreground);
    border: 1px solid var(--color-feedback-error-border);
    border-left: 2px solid var(--color-feedback-error);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.18);
    font-size: var(--font-size-2xs);
    line-height: 1.45;

    &[hidden] {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: minicart-banner-in 0.28s var(--ease-out-quint) both;

      &[data-dismissing] {
        animation: minicart-banner-out 0.2s ease forwards;
      }
    }
  }

  .minicart__banner-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.15em;
    color: var(--color-feedback-error);
  }

  .minicart__banner-icon svg {
    width: 100%;
    height: 100%;
  }

  .minicart__banner-message {
    flex: 1;
    margin: 0;
  }

  .minicart__banner-dismiss {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s ease;

    &:hover,
    &:focus-visible {
      opacity: 1;
    }

    svg {
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  @keyframes minicart-banner-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes minicart-banner-out {
    to {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  .minicart {
    --shimmer-duration: 2.6s;
    --shimmer-base-bright: #f4ecdf;
  }

  @media (prefers-reduced-motion: no-preference) {
    .minicart .skeleton {
      animation: minicart-shimmer-breathe var(--shimmer-duration) ease-in-out infinite;
    }

    .minicart .skeleton::after,
    .minicart .image[data-skeleton]::after,
    .minicart .media-slider__slide[data-skeleton]::after {
      background: linear-gradient(115deg, transparent 42%, var(--skeleton-shine) 50%, transparent 58%);
      transform: translateX(-100%);
      animation: minicart-shimmer-sweep var(--shimmer-duration) infinite;
      will-change: transform;
    }

    .minicart .media-slider__slide[data-skeleton] {
      contain: paint;
    }

    .minicart .image[data-skeleton][data-loaded='true']::after,
    .minicart .media-slider__slide[data-skeleton][data-loaded='true']::after {
      animation: none;
      opacity: 0;
    }
  }

  @keyframes minicart-shimmer-sweep {
    0% {
      transform: translateX(-100%);
      animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
    }
    55%,
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes minicart-shimmer-breathe {
    0%,
    100% {
      background-color: var(--skeleton-base);
    }
    50% {
      background-color: var(--shimmer-base-bright);
    }
  }

  .minicart__body[data-emptying] .minicart__items,
  .minicart__body[data-emptying] .minicart__slider {
    display: none;
  }

  .minicart__item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }

  .minicart[data-state='open'] .minicart__item {
    opacity: 1;
    transform: none;
  }

  .minicart[data-state='open'] .minicart__item:nth-child(1) {
    transition-delay: 80ms;
  }
  .minicart[data-state='open'] .minicart__item:nth-child(2) {
    transition-delay: 110ms;
  }
  .minicart[data-state='open'] .minicart__item:nth-child(3) {
    transition-delay: 140ms;
  }
  .minicart[data-state='open'] .minicart__item:nth-child(4) {
    transition-delay: 170ms;
  }
  .minicart[data-state='open'] .minicart__item:nth-child(5) {
    transition-delay: 200ms;
  }
  .minicart[data-state='open'] .minicart__item:nth-child(n + 6) {
    transition-delay: 230ms;
  }

  @media (prefers-reduced-motion: no-preference) {
    .minicart__item[data-fresh] {
      animation: minicart-item-fresh 240ms var(--ease-out-quint) both;
    }
  }

  @keyframes minicart-item-fresh {
    from {
      opacity: 0.55;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-bumping] sup {
      animation: minicart-badge-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  }

  @keyframes minicart-badge-bump {
    0%,
    100% {
      scale: 1;
    }
    40% {
      scale: 1.35;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .minicart__header,
    .minicart[data-state='open'] .minicart__header,
    .minicart .shipping-bar,
    .minicart[data-state='open'] .shipping-bar,
    .minicart__body,
    .minicart[data-state='open'] .minicart__body,
    .minicart__item,
    .minicart[data-state='open'] .minicart__item {
      transition: none;
      transform: none;
      opacity: 1;
    }

    .minicart__panel,
    .minicart[data-state='open'] .minicart__panel {
      transition-duration: 0.01ms;
    }
  }
/* END_SECTION:minicart */

/* START_SECTION:old-help-accordion (INDEX:37) */
.old-help-accordion-section {
    margin: 60px auto;
    max-width: 850px;
    padding-inline: var(--sp-8);
  }

  .old-help-accordion__title {
    font-family: var(--font-title-family);
    font-size: 28px;
    margin-bottom: 1rem;
    color: #000;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
  }

  .old-help-accordion__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .old-help-accordion__item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }

  .old-help-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-family: var(--font-button-family);
    font-size: 14px;
    text-transform: uppercase;
    user-select: none;
    font-weight: 600;
    padding-block: 20px;
  }

  /* Remove native disclosure triangle in all browsers */
  .old-help-accordion__summary::-webkit-details-marker {
    display: none;
  }

  .old-help-accordion__summary::marker {
    content: '';
  }

  .old-help-accordion__icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .old-help-accordion__icon::before,
  .old-help-accordion__icon::after {
    content: '';
    position: absolute;
    background-color: #000;
    transition: transform 0.3s ease;
  }

  .old-help-accordion__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
  }

  .old-help-accordion__icon::after {
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
  }

  .old-help-accordion__item[open] .old-help-accordion__icon::after {
    transform: translateX(-50%) scaleY(0);
  }

  .old-help-accordion__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .old-help-accordion__item[open] > .old-help-accordion__content {
    grid-template-rows: 1fr;
  }

  .old-help-accordion__item[data-closing] > .old-help-accordion__content {
    grid-template-rows: 0fr;
  }

  .old-help-accordion__inner {
    clip-path: inset(0 -100vw);
    min-height: 0;
    font-size: 12px;
    color: #000;
    font-family: var(--font-body-family);
  }

  /* TODO Old theme override */
  .old-help-accordion__content * {
    font-family: var(--font-body-family);
  }

  .old-help-accordion__content p {
    margin-bottom: 1rem;
    min-height: 1.25rem;
    display: block;
  }

  .old-help-accordion__content p:last-child {
    margin-bottom: 20px;
  }

  .old-help-accordion__content ul {
    margin-bottom: 1rem;
  }

  .old-help-accordion__content li {
    list-style: inside;
  }

  .old-help-accordion__content li:not(:last-child) {
    margin-bottom: 0.5rem;
  }

  .old-help-accordion__content .old-help-live-chat {
    margin-bottom: 30px;
  }

  @media (prefers-reduced-motion: reduce) {
    .old-help-accordion__icon::before,
    .old-help-accordion__icon::after,
    .old-help-accordion__content {
      transition: none;
    }
  }
/* END_SECTION:old-help-accordion */

/* START_SECTION:old-help-action-button (INDEX:38) */
.old-help-action-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
  }

  .old-help-action__btn {
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    padding: 15px 30px;
    font-size: 14px;
    font-family: var(--font-button-family);
    font-weight: 300;
    display: inline-flex;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .old-help-action__btn:hover {
    background-color: #000;
    color: #fff;
  }

  @media (prefers-reduced-motion: reduce) {
    .old-help-action__btn {
      transition: none;
    }
  }
/* END_SECTION:old-help-action-button */

/* START_SECTION:old-help-action-buttons (INDEX:39) */
.old-help-actions-section {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .old-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
  }

  .old-help-action__btn {
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    padding: 15px 30px;
    font-size: 14px;
    font-family: var(--font-button-family);
    font-weight: 300;
    display: inline-flex;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .old-help-action__btn:hover {
    background-color: #000;
    color: #fff;
  }

  @media (prefers-reduced-motion: reduce) {
    .old-help-action__btn {
      transition: none;
    }
  }
/* END_SECTION:old-help-action-buttons */

/* START_SECTION:old-help-delivery-table (INDEX:40) */
.old-help-delivery-table-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 850px;
    margin: 1.5rem auto;
    width: 100%;
    padding-inline: var(--sp-8);
  }

  .old-help-delivery-table {
    border-collapse: separate;
    border-spacing: 5px;
    width: calc(100% + 30px);

    @media screen and (min-width: 768px) {
      width: calc(100% + 10px);
    }
  }

  .old-help-accordion__content .old-help-delivery-table {
    margin-bottom: 20px;
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;

    @media screen and (min-width: 768px) {
      width: calc(100% + 10px);
      margin-left: -5px;
      margin-right: -5px;
    }
  }

  /* TODO Old theme override */
  .old-help-delivery-table th:first-child,
  .old-help-delivery-table td:first-child {
    padding-left: 10px;

    @media screen and (min-width: 768px) {
      padding-left: 20px;
    }
  }

  /* TODO Old theme override */
  .old-help-delivery-table thead {
    border-bottom: 0;
  }

  .old-help-delivery-table tr {
    background-color: var(--color-background-alt);
  }

  .old-help-delivery-table th,
  .old-help-delivery-table td {
    padding: 10px;
    font-size: 12px;

    @media screen and (min-width: 768px) {
      padding: 20px;
      font-size: 14px;
    }
  }

  .old-help-delivery-table th {
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-align: left;

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

  .old-help-delivery-table td {
    border-bottom: 0;
    font-family: var(--font-body-family);

    /* TODO Old theme override */
    &:last-child {
      padding-right: 20px;
    }
  }

  .old-help-delivery-table__location {
    font-size: 12px;
    color: #808080;
  }

  .old-help-delivery-table__free-threshold {
    margin-bottom: 10px;
    display: block;
    font-family: var(--font-body-family);
  }

  .old-help-delivery-table__footnote {
    font-size: 12px;
    color: #808080;
    margin-top: 10px;
  }
/* END_SECTION:old-help-delivery-table */

/* START_SECTION:old-help-live-chat (INDEX:41) */
.old-help-live-chat-section {
    margin-inline: auto;
    max-width: 850px;
    width: 100%;
    margin-top: 40px;
  }
/* END_SECTION:old-help-live-chat */

/* START_SECTION:old-help-navigation (INDEX:42) */
.old-help-nav {
    margin-top: 10px;
    margin-bottom: 40px;

    @media screen and (min-width: 768px) {
      margin-top: 65px;
      margin-bottom: 70px;
    }
  }

  .old-help-nav__list {
    display: flex;
    justify-content: center;
    gap: 50px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .old-help-nav__link {
    display: block;
    font-family: var(--font-button-family);
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    white-space: nowrap;
    font-weight: 300;
    background-color: var(--color-background-alt);
    padding: 5px 12px;
    border-radius: 5px;
    position: relative;
    text-decoration: none;
  }

  .old-help-nav__link.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
  }
/* END_SECTION:old-help-navigation */

/* START_SECTION:old-help-page-content (INDEX:43) */
.old-help-content-section {
    padding-inline: var(--sp-8);
  }

  .old-help-content__title {
    font-family: var(--font-title-family);
    font-size: 36px;
    margin-bottom: 40px;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1;
  }

  .old-help-content {
    margin: 0 auto 40px;
    max-width: 850px;
    font-family: var(--font-body-family);
    font-size: 14px;
    text-align: center;
  }

  .old-help-content p {
    margin-bottom: 1rem;
    min-height: 1.25rem;

    &:empty {
      display: block;
    }
  }

  .old-help-content * {
    font-family: var(--font-body-family);
  }

  .old-help-content p:last-child {
    margin-bottom: 0;
  }
/* END_SECTION:old-help-page-content */

/* START_SECTION:page (INDEX:44) */
.new-main-page {
    padding-inline: 10px;
    margin: var(--sp-20) auto 80px auto;

    @media (min-width: 768px) {
      padding-inline: var(--sp-20);
    }
  }

  .new-main-page__breadcrumbs {
    padding-bottom: var(--sp-20);
  }

  .new-main-page__breadcrumbs--klarna {
    padding-inline: 15px;
    padding-bottom: 0;
  }

  .new-main-page__header {
    margin: 0 auto 60px auto;
    max-width: 700px;
  }

  .new-main-page__header .title {
    font-family: var(--font-title-family);
    font-size: 36px;
    color: var(--color-foreground);
    text-transform: uppercase;
    font-weight: 300;
    line-height: var(--leading-none);
  }

  .new-main-page__content {
    font-size: var(--font-size-md);
    line-height: var(--leading-normal);
    max-width: 700px;
    margin-inline: auto;

    a {
      color: #000;
      font-weight: bold;
    }

    h2 {
      margin: 0 0 1em;
      line-height: var(--leading-normal);
      font-family: var(--font-body-family);
      text-transform: uppercase;
      font-weight: 600;
      font-size: var(--font-size-lg);

      &:not(:first-child):before {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background-color: var(--color-foreground);
        margin-bottom: 1.2em;
        margin-top: 1.2em;
        opacity: 0.1;
      }
    }

    hr {
      margin: var(--sp-32) 0;
      border: none;
      border-top: 1px solid var(--color-border);
    }

    p {
      font-family: var(--font-body-family);
    }
  }

  .new-page-check-gift-card-balance {
    margin: 0 -25px;
  }

  .new-main-page:has(.new-page-klarna-faqs) {
    max-width: 1150px;
  }

  .new-main-page__content.new-page-klarna-faqs {
    max-width: 850px;
  }

  klarna-placement::part(osm-container) {
    background-color: var(--color-background);
    font-family: var(--font-body-family);
  }

  klarna-placement::part(osm-heading) {
    font-family: var(--font-title-family);
    font-weight: 300;
  }
/* END_SECTION:page */

/* START_SECTION:product (INDEX:46) */
.product-page {
    margin-bottom: var(--space-8);

    .breadcrumbs-container {
      margin: var(--space-2) var(--space-3) var(--space-3) var(--space-3);
    }

    more-payment-options-link {
      display: none;
    }
  }

  .template-product {
    @media (min-width: 768px) {
      .collection-carousel {
        margin-top: var(--space-16);
      }
    }

    .yotpo-widget-instance {
      padding-top: 40px;

      .yotpo-main-layout .yotpo-border-margin {
        display: none;
      }
    }

    /* This hides the raw data that Yotpo renders on the page before loading the full widget view */
    /* TODO - Remove this eventually and swap the Yotpo widget with a custom built API version */
    #yotpo-reviews-section-data {
      display: none;
    }
  }

  .product-images-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;

    @media (min-width: 768px) {
      flex: 1 1 60%;
      position: sticky;
      top: calc(var(--header-height, 80px) + var(--header-offset, 0px));
      align-self: flex-start;
      max-height: calc(100dvh - var(--header-height, 80px) - var(--announcement-bar-height, 0px) - var(--sp-20));
      overflow-y: auto;
    }
  }

  .product-images--mobile {
    position: relative;
    display: block;
    width: 100%;
    --slides-visible: 1.2;

    .media-slider__track {
      display: flex;
      width: calc(100% / var(--slides-visible));
      margin: 0 auto;
      gap: 5px;
      touch-action: pan-y;
    }

    .media-slider__slide {
      flex: 0 0 100%;
      width: 100%;
      display: block;
    }

    .media-slider__progress {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      z-index: var(--layer-raised);
    }

    .media-slider__progress-bar {
      height: 100%;
      background: var(--color-foreground);
      width: calc(100% / var(--media-slider-total, 1));
      transform: translateX(calc(var(--media-slider-progress, 0) * 100%));
    }

    &:has(.media-slider__track[data-animating='true']) .media-slider__progress-bar {
      transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    @media (min-width: 768px) {
      display: none;
    }
  }

  .product-images--desktop {
    display: none;

    @media (min-width: 768px) {
      display: block;

      .product-images__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 2px;
      }

      .product-images__item {
        width: 100%;
        display: block;
      }
    }
  }

  .product-page-container {
    @media (min-width: 768px) {
      display: flex;
    }
  }

  .product-info-container {
    @media (min-width: 768px) {
      display: flex;
      flex-direction: column;
      flex: 1 1 40%;
      width: 100%;
      max-width: 500px;
      padding-inline: var(--space-8);
      position: sticky;
      top: calc(var(--header-height, 80px) + var(--header-offset, 0px));
      align-self: flex-start;
      max-height: calc(100dvh - var(--header-height, 80px) - var(--announcement-bar-height, 0px) - var(--sp-20));
      overflow-y: auto;
    }
  }

  .product-info {
    padding: var(--space-4) var(--space-2);
  }

  .product-info__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-1);
  }

  .product-title {
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);
    font-weight: 300;
  }

  .product-titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .product-subtitle {
    font-size: var(--font-size-4xs);
    font-weight: 300;

    @media (min-width: 768px) {
      color: rgba(30, 30, 30, 0.4);
    }
  }

  .product-wishlist-btn {
    border: 0;
    background: none;
    padding: 0;

    svg {
      width: 12px;
    }
  }

  .product-variant-info {
    margin-top: var(--space-4);
  }

  .product-colour {
    font-family: var(--font-button-family);
    font-size: var(--font-size-3xs);
    text-transform: uppercase;
    font-weight: 300;
  }

  .product-swatches {
    display: flex;
    flex-wrap: wrap;
    margin-block: var(--space-1) var(--space-4);
    /* TODO - See if better way than a magic number here */
    margin-inline: -7px;

    @media (min-width: 768px) {
      margin-top: -2px;
    }
  }

  .product-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;

    &[data-available='false'] {
      pointer-events: none;

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 1px;
        background-color: var(--color-feedback-error);
        transform: rotate(-45deg);
        z-index: 1;
        opacity: 0.3;
      }

      &::after {
        opacity: 0.1;
      }
    }

    &[data-available='false'][data-active='true'] {
      opacity: 1;
    }

    &::after {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 0.75px solid #000;
      outline: 2px solid transparent;
      background-color: var(--product-swatch-color, transparent);
    }

    &[data-active='true'],
    &:hover,
    &:focus-visible {
      &::after {
        border-color: #fff;
        border-width: 1.5px;
        outline-color: #000;
        outline-width: 0.75px;
        width: 13px;
        height: 13px;
      }
    }
  }

  .product-prices {
    display: flex;
    gap: var(--space-2);
  }

  .product-price {
    &[data-type='sale'] {
      text-decoration: line-through;
      opacity: 0.6;
    }

    &[data-type='discount'] {
      color: var(--color-sale);
    }
  }

  .product-instalments-message {
    font-size: var(--font-size-4xs);
    margin-block: var(--space-2) var(--space-4);
    opacity: 0.7;
  }

  .product-sale-note {
    font-size: var(--font-size-4xs);
    color: var(--color-sale);
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .product-info__reviews-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-5);

    @media (min-width: 768px) {
      margin-top: var(--space-8);
      margin-bottom: var(--space-4);
    }
  }

  .product-info__reviews {
    position: relative;
    display: inline-flex;
    line-height: 0;

    svg {
      display: block;
      width: 11px;
      height: 11px;
      flex-shrink: 0;
    }
  }

  .product-info__stars {
    display: flex;
  }

  .product-info__stars--empty {
    svg {
      fill: rgba(0, 0, 0, 0.2);
    }
  }

  .product-info__stars--filled {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: #000;
    width: var(--rating-percentage, 0%);
    pointer-events: none;
  }

  .product-info__reviews-link {
    margin-left: var(--space-3);
    font-size: var(--font-size-3xs);
    color: rgba(0, 0, 0, 0.5);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    display: inline-flex;
    align-items: center;

    svg {
      width: 12px;
      height: auto;
      fill: currentColor;
      margin-right: var(--space-1);
    }

    &[data-js='view-reviews-summary'][data-hidden='true'] {
      display: none;
    }
  }

  .product-info__reviews-rating {
    font-size: var(--font-size-4xs);
    margin-left: var(--space-1);
  }

  .product-info__trust-container {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .product-info__trust {
    background-color: var(--color-background-alt);
    border-radius: 10px;
    font-family: var(--font-button-family);
    font-size: var(--font-size-3xs);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
  }

  .product-info__trust[data-last='true'] {
    display: none;

    @media (min-width: 768px) {
      display: block;
    }
  }

  .product-size-selector {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-background-alt);
    z-index: var(--layer-sticky);
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 var(--space-2) var(--space-2) var(--space-2);

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

    .swym-button-bar {
      height: 0;
      width: 0;
      margin: 0;
      position: absolute;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
    }

    .shop-pay-button,
    .shop-pay-button svg {
      height: var(--tap-target);

      @media (min-width: 768px) {
        height: 50px;
      }
    }

    .shop-pay-button {
      @media (min-width: 768px) {
        min-width: 220px;
      }
    }

    form {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 0 var(--sp-16);

      &:has(.product-size-selector__button-container > :nth-child(2)) {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 768px) {
      position: relative;
      background-color: transparent;
      padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);

      form {
        display: block;
      }
    }
  }

  .product-size-selector[data-visible='false'] {
    transform: translateY(100%);

    @media (min-width: 768px) {
      &:not([data-stuck='true']) {
        transform: none;
      }
    }
  }

  .product-size-selector[data-stuck='true'] {
    @media (min-width: 768px) {
      position: fixed;
      background-color: var(--color-background-alt);
      padding: var(--sp-12) var(--page-gutter);
      animation: product-sticky-bar-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1);

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

      & form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-16) var(--sp-32);
        max-width: 1600px;
        margin-inline: auto;
      }

      & .product-size-selector__bottom-row {
        display: block;
      }

      & .product-size-selector__info {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
      }

      & .product-size-selector__title {
        max-width: 360px;
      }

      & .product-size-selector__sizes {
        flex: 1 1 100%;
        min-width: 0;
        margin: 0;
        justify-content: center;
        overflow-x: auto;
      }

      & .product-size-selector__button {
        flex: 0 0 auto;
        min-width: var(--tap-target);
        padding-inline: var(--sp-8);
      }

      & .product-size-selector__button-container {
        width: auto;
        flex-shrink: 0;
      }

      & .product-size-selector__submit {
        width: auto;
        min-width: 220px;
        padding-inline: var(--sp-24);
      }

      & .product-size-selector__size-guide-link {
        display: none;
      }
    }

    @media (min-width: 900px) {
      &:not(:has(.product-size-selector__button-container > :nth-child(2))) {
        & form {
          flex-wrap: nowrap;
          gap: var(--sp-32);
          justify-content: space-between;
        }

        & .product-size-selector__info {
          order: -1;
          flex: 0 1 auto;
        }

        & .product-size-selector__sizes {
          flex: none;
        }
      }
    }

    @media (min-width: 1200px) {
      & form {
        flex-wrap: nowrap;
        gap: var(--sp-32);
      }

      & .product-size-selector__info {
        order: -1;
        flex: 0 1 auto;
      }

      & .product-size-selector__sizes {
        flex: 1 1 auto;
      }
    }
  }

  @keyframes product-sticky-bar-rise {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .product-size-selector__sizes {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
    margin-right: calc(-1 * var(--space-2));
    grid-column: 1 / -1;
  }

  .product-size-selector__sizes[data-single-size='true'] {
    display: none;
  }

  .product-size-selector__prefix {
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    margin-right: var(--space-2);
  }

  .product-size-selector__button {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    cursor: pointer;
    padding: 0;
    color: #000;

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    &[data-active='true'],
    &:hover {
      border-color: #000;
    }

    &[data-available='false'] {
      opacity: 0.25;
    }

    &[data-available='false'][data-active='true'] {
      opacity: 1;
    }
  }

  .product-size-selector__bottom-row {
    display: block;
    grid-column: 2;

    &:has(.product-size-selector__button-container > :nth-child(2)) {
      grid-column: 1;
      margin-top: var(--sp-12);
    }
  }

  .product-size-selector__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    grid-column: 1;

    @media (min-width: 768px) {
      display: none;
    }
  }

  .product-size-selector__title {
    font-size: var(--font-size-2xs);
    font-family: var(--font-body-family);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    white-space: nowrap;
  }

  .product-size-selector__price {
    font-size: var(--font-size-3xs);
    display: flex;
    gap: var(--sp-8);
  }

  .product-size-selector__price-sale {
    color: var(--color-sale);
  }

  .product-size-selector__price-compare {
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  .product-size-selector__price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .product-size-selector__info .product-size-selector__size-guide-link {
    margin-top: 0;
    display: none;
  }

  @media (max-width: 767px) {
    .product-size-selector:has(.product-size-selector__button-container > :nth-child(2)) {
      & .product-size-selector__info .product-size-selector__size-guide-link {
        display: block;
      }
      & > .product-size-selector__size-guide-link {
        display: none;
      }
    }
  }

  .product-size-selector__button-container {
    display: flex;
    gap: var(--sp-8);
    width: 100%;
  }

  .product-size-selector__submit {
    min-width: 150px;
    width: 100%;
    height: 44px;
    background-color: #000;
    color: #fff;
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;

    @media (min-width: 768px) {
      height: 50px;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 35%) 50%, transparent 58%);
      transform: translateX(-101%);
      pointer-events: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      &:active:not(:disabled) {
        transform: scale(0.97);
      }
    }

    &:disabled:not([data-state]) {
      cursor: not-allowed;
      background-color: transparent;
      color: #000;
      border-color: #000;
    }

    &[data-state='loading'] {
      background-color: #000;
      color: #fff;
      cursor: progress;
    }

    &[data-state='added'],
    &[data-state='added']:hover {
      background-color: color-mix(in srgb, var(--color-success), #000 40%);
      color: #fff;
      cursor: default;
      transition: background-color 0.2s var(--ease-out-quint), color 0.2s var(--ease-out-quint),
        transform 0.15s ease-out;
    }

    &[data-state='added']::after {
      animation: product-add-sheen 0.65s var(--ease-out-quint) 0.05s forwards;
    }

    &[data-state='error'] {
      background-color: var(--color-feedback-error);
      border-color: var(--color-feedback-error);
      color: #fff;
      cursor: default;
      font-size: var(--font-size-4xs);
    }
  }

  .product-size-selector__submit-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
  }

  .product-size-selector__submit-label {
    width: 100%;

    [hidden] {
      display: none;
    }
  }

  .product-size-selector__submit[data-state='added'] .product-size-selector__submit-result {
    animation: product-add-rise 0.45s var(--ease-overshoot) 0.2s both;
  }

  @keyframes product-add-rise {
    from {
      transform: translateY(120%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes product-add-sheen {
    to {
      transform: translateX(101%);
    }
  }

  .product-size-selector__submit-check {
    display: none;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: 16px;
    height: 16px;

    & svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    & svg path {
      stroke-dasharray: 28;
      stroke-dashoffset: 28;
    }
  }

  .product-size-selector__submit[data-state='added'] .product-size-selector__submit-check {
    display: inline-flex;

    & svg path {
      animation: product-add-check-draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
    }
  }

  @keyframes product-add-check-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .product-size-selector__submit-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .product-size-selector__submit-spinner[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-size-selector__submit[data-state='added'] .product-size-selector__submit-result {
      animation: none;
    }
    .product-size-selector__submit[data-state='added'] .product-size-selector__submit-check svg path {
      stroke-dashoffset: 0;
      animation: none;
    }
    .product-size-selector__submit[data-state='added']::after {
      animation: none;
    }
  }

  .product-size-selector__size-guide-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #000;
    font-size: var(--font-size-3xs);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: var(--space-3);
    display: block;
    font-family: inherit;
  }

  .product-accordions {
    margin-inline: var(--space-2);

    @media (min-width: 768px) {
      order: 1;
      margin-top: var(--space-6);
    }
  }

  .accordion.product-accordion {
    --accordion-summary-padding-block: var(--space-4);

    &:last-child {
      border-bottom: 0;
    }

    .accordion__title {
      font-family: var(--font-button-family);
      font-size: var(--font-size-sm);
      text-transform: uppercase;
    }

    .accordion__inner {
      padding-inline: var(--space-2);
      padding-bottom: var(--space-5);
      font-family: var(--font-body-family);
      font-size: var(--font-size-2xs);
      line-height: 1.5;
    }
  }

  .accordion.product-accordion--no-padding-inline {
    .accordion__inner {
      padding-inline: 0;
    }
  }

  .pdp-bundle {
    margin-top: var(--sp-32);
    padding-inline: var(--space-2);
    text-align: center;
    order: 1;
  }

  .pdp-bundle__title {
    font-family: var(--font-title-family);
    font-size: var(--font-size-xl);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    line-height: var(--leading-none);
  }

  .pdp-bundle__subtitle {
    font-family: var(--font-body-family);
    font-size: var(--font-size-2xs);
    margin-top: var(--sp-4);
  }

  .pdp-bundle__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    text-align: left;
    margin-top: var(--sp-16);
  }

  .pdp-bundle__grid .product-card__colour-swatches,
  .pdp-bundle__grid [data-js='colour-swatches'],
  .pdp-bundle__grid .product-card__wishlist,
  .pdp-bundle__grid [data-js='wishlist-add'],
  .pdp-bundle__grid .product-card__sizes,
  .pdp-bundle__grid .product-card__rating {
    display: none !important;
  }

  .pdp-bundle__skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  .pdp-bundle__skeleton-image {
    aspect-ratio: 200 / 290;
    border-radius: var(--radius-sm);
    background: var(--color-background-alt);
    animation: pdp-bundle-pulse 1.4s ease-in-out infinite;
  }

  .pdp-bundle__skeleton-text {
    height: 12px;
    width: 70%;
    border-radius: var(--radius-xs);
    background: var(--color-background-alt);
    animation: pdp-bundle-pulse 1.4s ease-in-out 0.15s infinite;
  }

  .pdp-bundle__skeleton-text--short {
    width: 40%;
    animation-delay: 0.3s;
  }

  @keyframes pdp-bundle-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-bundle__skeleton-image,
    .pdp-bundle__skeleton-text {
      animation: none;
    }
  }

  .pdp-bundle__add-btn {
    width: 100%;
    height: 44px;
    margin-top: var(--sp-32);
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;

    @media (min-width: 768px) {
      height: 50px;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 35%) 50%, transparent 58%);
      transform: translateX(-101%);
      pointer-events: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      &:active:not(:disabled) {
        transform: scale(0.97);
      }
    }

    &[data-state='loading'] {
      background-color: #000;
      color: #fff;
      cursor: progress;
    }

    &[data-state='added'],
    &[data-state='added']:hover {
      background-color: color-mix(in srgb, var(--color-success), #000 40%);
      color: #fff;
      cursor: default;
      transition: background-color 0.2s var(--ease-out-quint), color 0.2s var(--ease-out-quint),
        transform 0.15s ease-out;
    }

    &[data-state='added']::after {
      animation: product-add-sheen 0.65s var(--ease-out-quint) 0.05s forwards;
    }

    &[data-state='error'] {
      background-color: var(--color-feedback-error);
      border-color: var(--color-feedback-error);
      color: #fff;
      cursor: default;
      font-size: var(--font-size-4xs);
    }
  }

  .pdp-bundle__add-btn-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
  }

  .pdp-bundle__add-btn-label {
    [hidden] {
      display: none;
    }
  }

  .pdp-bundle__add-btn[data-state='added'] .pdp-bundle__add-btn-result {
    animation: product-add-rise 0.45s var(--ease-overshoot) 0.2s both;
  }

  .pdp-bundle__add-btn-check {
    display: none;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: 16px;
    height: 16px;

    & svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    & svg path {
      stroke-dasharray: 28;
      stroke-dashoffset: 28;
    }
  }

  .pdp-bundle__add-btn[data-state='added'] .pdp-bundle__add-btn-check {
    display: inline-flex;

    & svg path {
      animation: product-add-check-draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
    }
  }

  .pdp-bundle__add-btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .pdp-bundle__add-btn-spinner[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-bundle__add-btn[data-state='added'] .pdp-bundle__add-btn-result {
      animation: none;
    }
    .pdp-bundle__add-btn[data-state='added'] .pdp-bundle__add-btn-check svg path {
      stroke-dashoffset: 0;
      animation: none;
    }
    .pdp-bundle__add-btn[data-state='added']::after {
      animation: none;
    }
  }

  .pdp-bundle-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-20);
    margin-top: var(--sp-16);
  }

  .pdp-bundle-drawer__item {
    display: flex;
    gap: var(--sp-16);
  }

  .pdp-bundle-drawer__media {
    flex: none;
    display: block;
    width: 96px;

    @media (min-width: 768px) {
      width: 120px;
    }
  }

  .pdp-bundle-drawer__image {
    width: 100%;
    height: auto;
    aspect-ratio: 120 / 174;
    object-fit: cover;
    background-color: var(--color-background-alt);
    border-radius: var(--radius-xs);
  }

  .pdp-bundle-drawer__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
  }

  .pdp-bundle-drawer__title {
    font-size: var(--font-size-sm);
    line-height: var(--leading-none);
  }

  .pdp-bundle-drawer__colour {
    font-size: var(--font-size-4xs);
    font-family: var(--font-button-family);
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-top: var(--sp-2);
  }

  .pdp-bundle-drawer__prices {
    display: flex;
    gap: var(--sp-8);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-12);
  }

  .pdp-bundle-drawer__price {
    font-size: var(--font-size-2xs);

    &[data-type='discount'] {
      color: var(--color-sale);
    }

    &[data-type='sale'] {
      text-decoration: line-through;
      opacity: 0.6;
    }

    &[hidden] {
      display: none;
    }
  }

  .pdp-bundle-drawer__prompt {
    font-size: var(--font-size-4xs);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .pdp-bundle-drawer__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-2);

    &[data-single='true'] {
      display: none;
    }
  }

  .pdp-bundle-drawer__size {
    min-width: var(--tap-target);
    height: var(--tap-target);
    padding: 0 var(--sp-4);
    border: 0;
    border-bottom: 1px solid transparent;
    background: var(--color-background-accent);
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    color: var(--color-foreground);
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;

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

    &[data-selected='true'] {
      border-color: var(--color-foreground);
    }

    &[data-available='false'] {
      opacity: 0.25;
      cursor: not-allowed;
    }
  }

  .bottom-drawer__footer .pdp-bundle__add-btn {
    margin-top: 0;
  }

  .pdp-bundle__add-btn[data-state='incomplete'] {
    opacity: 0.4;
    cursor: not-allowed;
  }
/* END_SECTION:product */

/* START_SECTION:promo-grid (INDEX:47) */
.promo-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .promo-grid > * {
    display: contents;
  }
/* END_SECTION:promo-grid */

/* START_SECTION:search (INDEX:48) */
.search-page {
    margin-top: var(--space-4);
  }

  .search-page__upper {
    margin: var(--space-2) var(--space-2) 0 var(--space-2);

    @media (min-width: 768px) {
      margin: var(--space-4);
    }
  }

  .search-page__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-2) var(--space-2) var(--space-8) var(--space-2);
  }

  .search-page__title {
    font-family: var(--font-title-family);
    font-size: var(--font-size-3xl);
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
  }

  .search-page__form {
    width: 100%;
    max-width: 500px;
  }

  .search-page__recommendations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--font-size-2xs);
    font-family: var(--font-body-family);
    color: rgba(0, 0, 0, 0.6);
  }

  .search-page__recommendations[hidden] {
    display: none !important;
  }

  .search-page__recommendations-skeleton {
    display: inline-block;
    height: 18px;
    width: var(--width, 80px);
    background: linear-gradient(
      90deg,
      var(--color-background-alt) 25%,
      var(--color-background-accent) 50%,
      var(--color-background-alt) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
  }

  .search-page__recommendations-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
  }

  .search-page__recommendations-link {
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    background-color: var(--color-background-accent);
    font-size: var(--font-size-4xs);
    padding: var(--space-1);
    font-family: var(--font-button-family);
  }

  .search-page__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-background-alt);
    padding-right: var(--space-2);
    border-radius: 10px;
  }

  .search-page__input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body-family);
    font-size: var(--font-size-md);
    padding: 6px 0 var(--space-2) 28px;
    outline: none;

    &::placeholder {
      font-size: var(--font-size-2xs);
    }
  }

  .search-page__submit {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .search-page__recommendations-skeleton {
      animation: none;
      background: var(--color-background-alt);
    }
  }
/* END_SECTION:search */

/* START_SECTION:size-guide (INDEX:56) */
.size-guide__breadcrumbs {
    padding: var(--sp-4) var(--sp-12) var(--sp-8) var(--sp-12);
  }

  .size-guide__hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .size-guide__hero-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .size-guide__hero-image--desktop {
    display: none;
  }

  .size-guide__hero-image--mobile {
    display: block;
  }

  @media (min-width: 768px) {
    .size-guide__hero-image--desktop {
      display: block;
    }

    .size-guide__hero-image--mobile {
      display: none;
    }
  }

  .size-guide__inner {
    max-width: 850px;
    margin-inline: auto;
    padding-block: var(--sp-24);
    padding-inline: var(--sp-4);
  }

  .size-guide__intro {
    text-align: center;
    margin-bottom: var(--sp-40);
  }

  .size-guide__title {
    font-family: var(--font-title-family);
    font-size: var(--font-size-3xl);
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: var(--sp-16);
  }

  .size-guide__subtitle,
  .size-guide__intro-text {
    font-size: var(--font-size-sm);
  }

  .size-guide__subtitle {
    font-weight: 600;
    margin-bottom: var(--sp-4);
  }

  .size-guide__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-16);
    margin-top: var(--sp-40);
    margin-bottom: var(--sp-16);
  }

  .size-guide__section-title {
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
  }

  .size-guide-controls {
    display: flex;
    align-items: center;
  }

  .size-guide-toggle-switch {
    --toggle-circle-size: 16px;
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    background-color: var(--color-background-accent);
    padding-inline: var(--sp-4);
    line-height: 1;
    height: calc(var(--toggle-circle-size) + 4px);
    transition: background-color var(--motion-quick) var(--ease-out-quint),
      color var(--motion-quick) var(--ease-out-quint);
    color: var(--color-foreground);
  }

  .size-guide-toggle-switch[data-active='in'] {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .size-guide-toggle-switch[data-active='in'] .size-guide-toggle-switch-track {
    margin-left: 2px;
    margin-right: calc(var(--toggle-circle-size) + 2px);
  }

  .size-guide-toggle-switch[data-active='in'] .size-guide-toggle-switch-label--cm {
    opacity: 0;
  }

  .size-guide-toggle-switch[data-active='in'] .size-guide-toggle-switch-label--in {
    opacity: 1;
  }

  .size-guide-toggle-switch[data-active='in'] .size-guide-toggle-switch-circle {
    left: calc(100% - (var(--toggle-circle-size) + 2px));
  }

  .size-guide-toggle-switch-track {
    display: grid;
    grid-template-areas: 'content';
    align-items: center;
    margin-left: calc(var(--toggle-circle-size) + 2px);
    margin-right: 2px;
    transition: margin var(--motion-quick) var(--ease-out-quint);
  }

  .size-guide-toggle-switch-label {
    grid-area: content;
    font-size: var(--font-size-4xs);
    white-space: nowrap;
    transition: opacity var(--motion-quick) var(--ease-out-quint);
    font-family: var(--font-body-family);
  }

  .size-guide-toggle-switch-label--in {
    opacity: 0;
  }

  .size-guide-toggle-switch-label--cm {
    opacity: 1;
  }

  .size-guide-toggle-switch-circle {
    position: absolute;
    top: 1px;
    left: 2px;
    width: var(--toggle-circle-size);
    height: var(--toggle-circle-size);
    background-color: var(--color-background);
    border-radius: var(--radius-round);
    transition: left var(--motion-quick) var(--ease-out-quint);
    z-index: var(--layer-raised);
  }

  [data-unit-view='cm'] [data-unit='in'],
  [data-unit-view='in'] [data-unit='cm'] {
    display: none;
  }

  .size-guide-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    font-size: var(--font-size-xs);
  }

  .size-guide-table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--sp-2);
  }

  .size-guide-table tr {
    background-color: var(--color-background-accent);
  }

  .size-guide-table th {
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .size-guide-table td {
    font-family: var(--font-body-family);
  }

  .size-guide-table th,
  .size-guide-table td {
    padding: var(--sp-8) var(--sp-12);
  }

  @media (min-width: 768px) {
    .size-guide-table th,
    .size-guide-table td {
      padding: var(--sp-12) var(--sp-20);
      font-size: var(--font-size-sm);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .size-guide-toggle-switch,
    .size-guide-toggle-switch-track,
    .size-guide-toggle-switch-label,
    .size-guide-toggle-switch-circle {
      transition: none;
    }
  }
/* END_SECTION:size-guide */

/* START_SECTION:text (INDEX:57) */
.text-section {
    margin: var(--text-mt) auto var(--text-mb);
    padding: var(--text-pt) 10px var(--text-pb) 10px;
    background-color: var(--text-bg, transparent);
    max-width: var(--text-max-width-mobile);
    color: var(--text-color, var(--color-foreground));
    line-height: var(--text-lh);
    font-size: var(--text-fs-mobile);

    &[data-align='left'] {
      text-align: left;
    }

    &[data-align='center'] {
      text-align: center;
    }

    &[data-align='right'] {
      text-align: right;
    }

    &[data-font='body'] {
      font-family: var(--font-body-family);
    }

    &[data-font='title'] {
      font-family: var(--font-title-family);
    }

    &[data-font='button'] {
      font-family: var(--font-button-family);
    }

    &[data-weight='regular'] {
      font-weight: 400;
    }

    &[data-weight='bold'] {
      font-weight: 700;
    }

    a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  @media (min-width: 750px) {
    .text-section {
      font-size: var(--text-fs-desktop);
      max-width: var(--text-max-width-desktop);
    }
  }
/* END_SECTION:text */

/* START_SECTION:trust-blocks (INDEX:58) */
.trust-blocks {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-12) var(--space-3);
  }

  @media (min-width: 768px) {
    .trust-blocks {
      gap: var(--space-16);
    }
  }
/* END_SECTION:trust-blocks */

/* START_SECTION:ugc (INDEX:59) */
.ugc {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .ugc__content {
    display: grid;
    width: 100%;

    /* TODO - App CSS override, might be better to do this in the app settings */
    .yotpo-vugc-media-gallery-widget {
      margin-bottom: 0;
    }
  }

  .ugc__skeleton {
    grid-area: 1 / 1;
    min-width: 0;
    z-index: var(--layer-raised);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    transition: opacity 0.8s var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .ugc__skeleton[data-hidden='true'] {
    opacity: 0;
  }

  .ugc__content > div:not(.ugc__skeleton) {
    grid-area: 1 / 1;
    min-width: 0;
    width: 100%;
    z-index: var(--layer-flat);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .ugc__content > div[data-yotpo-element-loaded='true'] {
    opacity: 1;
    pointer-events: auto;
  }

  .ugc__skeleton-header {
    width: 120px;
    height: 24px;
    background-color: var(--color-background-alt);
    margin: 0 auto var(--space-8);
  }

  @media (min-width: 768px) {
    .ugc__skeleton-header {
      margin: 0 auto 72px;
    }

    .section--ugc {
      order: 1;
    }

    .yotpo-vugc-media-gallery-widget {
      width: 100%;
    }
  }

  .ugc__skeleton-carousel {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow: hidden;
    justify-content: center;
  }

  .ugc__skeleton-card {
    flex: 0 0 auto;
    /* TODO - See if there's a better solution than hardcoded values */
    width: 272px;
    height: 361px;
    background-color: var(--color-background-alt);
  }

  @keyframes shimmer {
    0% {
      background-position: -400px 0;
    }
    100% {
      background-position: 400px 0;
    }
  }

  .ugc__skeleton-header,
  .ugc__skeleton-card {
    background: linear-gradient(
      to right,
      var(--color-background-alt) 8%,
      var(--color-background-accent) 18%,
      var(--color-background-alt) 33%
    );
    background-size: 800px 100%;
    animation: shimmer 2s infinite linear;
  }

  @media (prefers-reduced-motion: reduce) {
    .ugc__skeleton-header,
    .ugc__skeleton-card {
      animation: none;
    }
  }
/* END_SECTION:ugc */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:60) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:instagram-tile (INDEX:61) */
.instagram-tile {
    position: relative;
  }

  .instagram-tile__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .instagram-tile__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-size-2xs);
    gap: var(--space-1);
    padding: var(--space-10) var(--space-4) var(--space-8);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  @media (min-width: 768px) {
    .instagram-tile__body {
      opacity: 0;
      visibility: hidden;
    }

    .instagram-tile:hover .instagram-tile__body,
    .instagram-tile:focus-within .instagram-tile__body {
      opacity: 1;
      visibility: visible;
    }
  }

  .instagram-tile__link {
    color: currentColor;
    text-decoration: none;
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    border-bottom: 2px solid currentColor;
    margin-top: var(--space-1);
  }

  .instagram-tile__likes {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .instagram-tile__likes-icon {
    path {
      stroke: currentColor;
    }
  }
/* END_BLOCK:instagram-tile */

/* START_BLOCK:promo-media (INDEX:62) */
.promo-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--text-colour);
    text-decoration: none;

    &[data-show-subtitle-mobile='false'] .promo-media__subtitle {
      display: none;
    }
  }

  .promo-media__media,
  .promo-media__media picture,
  .promo-media__img,
  .promo-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .promo-media__img {
    object-fit: cover;
    object-position: var(--focal-mobile);
  }

  @media (min-width: 768px) {
    .promo-media__img {
      object-position: var(--focal-desktop);
    }
  }

  .promo-media__video {
    object-fit: cover;
    object-position: var(--focal-mobile);
    display: none;
  }

  .promo-media__video--mobile {
    display: block;
  }

  @media (min-width: 768px) {
    .promo-media__video {
      object-position: var(--focal-desktop);
    }

    .promo-media__video--mobile {
      display: none;
    }

    .promo-media__video--desktop {
      display: block;
    }

    .promo-media__video--mobile:only-of-type {
      display: block;
    }
  }

  .promo-media__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal-mobile);
    opacity: 0;
    pointer-events: none;
    display: none;
  }

  .promo-media__poster--mobile {
    display: block;
  }

  @media (min-width: 768px) {
    .promo-media__poster {
      object-position: var(--focal-desktop);
    }

    .promo-media__poster--mobile {
      display: none;
    }

    .promo-media__poster--desktop {
      display: block;
    }

    .promo-media__poster--mobile:only-of-type {
      display: block;
    }
  }

  html[data-vt-capture] .promo-media__poster {
    opacity: 1;
  }

  .promo-media__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--overlay-colour);
    opacity: var(--overlay-opacity);
    pointer-events: none;
  }

  .promo-media__content {
    display: flex;
    flex-direction: column;
    width: 90%;
    align-items: center;
    text-align: center;
    z-index: var(--layer-raised);
  }

  .promo-media__title {
    margin: 0;
    font-family: var(--font-title-family);
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1;
  }

  .promo-media__subtitle {
    position: absolute;
    bottom: 40px;
    width: inherit;
    font-size: var(--font-size-3xs);
  }

  @media (min-width: 768px) {
    .promo-media {
      &[data-show-subtitle-desktop='false'] .promo-media__subtitle {
        display: none;
      }

      &[data-show-subtitle-mobile='false'] .promo-media__subtitle {
        display: block;
      }

      &[data-show-subtitle-mobile='false'][data-show-subtitle-desktop='false'] .promo-media__subtitle {
        display: none;
      }
    }

    .promo-media__title {
      font-size: var(--font-size-3xl);
    }

    .promo-media__subtitle {
      bottom: 80px;
    }
  }

  .promo-media__button {
    display: block;
    text-decoration: none;
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    margin-top: var(--space-4);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid currentColor;
  }
/* END_BLOCK:promo-media */

/* START_BLOCK:promo-row (INDEX:63) */
.promo-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: auto;

    &:has(+ .promo-row) {
      margin-bottom: var(--gap);
    }

    > *:not(style) {
      display: contents;
    }

    /* Stacked (default mobile) — each tile fills the row's mobile height. */
    > * > .promo-media {
      width: 100%;
      height: var(--mobile-h);
    }
  }

  @media (min-width: 768px) {
    .promo-row {
      flex-direction: row;
      flex-wrap: nowrap;
      height: var(--desktop-h);
    }

    .promo-row > * > .promo-media {
      flex: 0 1 var(--width-desktop);
      width: var(--width-desktop);
      min-width: 0;
      height: 100%;
    }
  }
/* END_BLOCK:promo-row */

/* START_BLOCK:text (INDEX:64) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* START_BLOCK:trust-block (INDEX:65) */
.trust-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }

  .trust-block__icon {
    width: 15px;
    height: 15px;
  }

  .trust-block__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .trust-block__text {
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    line-height: 1.3;
  }
/* END_BLOCK:trust-block */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion (INDEX:66) */
.accordion {
    --accordion-duration: 260ms;
    --accordion-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --accordion-summary-padding-block: var(--space-3);
    --accordion-summary-padding-inline: 0;
    --accordion-icon-size: 0.75rem;

    display: block;
    border-block-end: 1px solid rgba(0, 0, 0, 0.1);

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding-block: var(--accordion-summary-padding-block);
      padding-inline: var(--accordion-summary-padding-inline);
      cursor: pointer;
      list-style: none;
      user-select: none;

      &::-webkit-details-marker {
        display: none;
      }

      &::marker {
        content: '';
      }

      &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
      }
    }
  }

  .accordion__title {
    font-family: var(--font-title-family);
    font-weight: 400;
    font-size: var(--font-size-lg);
    margin: 0;
  }

  .accordion__icon-wrapper {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--accordion-icon-size);
    height: auto;
  }

  .accordion__icon {
    grid-area: 1 / 1;
    transition: transform var(--accordion-duration) var(--accordion-easing),
      opacity var(--accordion-duration) var(--accordion-easing);

    > svg {
      width: 100%;
      height: auto;
      fill: currentColor;
    }
  }

  .accordion__icon--minus {
    opacity: 0;
    transform: rotate(-90deg);
  }

  .accordion[open] .accordion__icon--plus {
    opacity: 0;
    transform: rotate(90deg);
  }

  .accordion[open] .accordion__icon--minus {
    opacity: 1;
    transform: rotate(0deg);
  }

  .accordion__content {
    overflow: clip;
  }

  .accordion__content[data-animating] {
    transition: height var(--accordion-duration) var(--accordion-easing),
      opacity var(--accordion-duration) var(--accordion-easing);
    will-change: height;
  }

  /* Respect reduced-motion preferences. */
  @media (prefers-reduced-motion: reduce) {
    .accordion__content[data-animating],
    .accordion .accordion__icon {
      transition-duration: 0ms;
    }
  }

  @media (min-width: 768px) {
    .accordion--desktop-disabled {
      border-block-end: 0;

      > summary {
        display: none;
      }

      &::details-content {
        content-visibility: visible;
        block-size: auto;
        opacity: 1;
        overflow: visible;
      }

      .accordion__inner {
        padding-block-end: 0;
      }
    }

    .accordion--desktop-static {
      border-block-end: 0;

      > summary {
        cursor: default;
        pointer-events: none;
        padding-block: 0;

        .accordion__icon-wrapper {
          display: none;
        }
      }

      &::details-content {
        content-visibility: visible;
        block-size: auto;
        opacity: 1;
        overflow: visible;
      }

      > .accordion__content {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible;
      }

      .accordion__inner {
        padding-block-end: 0;
      }
    }
  }
/* END_SNIPPET:accordion */

/* START_SNIPPET:breadcrumbs (INDEX:68) */
.breadcrumbs {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    text-transform: uppercase;
  }

  .breadcrumbs__heading {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
  }

  .breadcrumbs__item {
    display: flex;
    font-size: var(--font-size-4xs);
    font-family: var(--font-button-family);
    color: rgba(0, 0, 0, 0.5);
    font-weight: 300;
    white-space: nowrap;

    &:not(:last-child)::after {
      content: '/';
      display: block;
      margin-inline: 3px;
    }

    &[aria-current='page'],
    &:hover {
      color: #000;
    }
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:carousel (INDEX:69) */
:is(carousel-slider, searchspring-carousel).carousel {
    --slides-to-show-mobile: 1.25;
    --slides-to-show-desktop: 4.25;
    --slides-to-show: var(--slides-to-show-mobile);
    --slide-gap: 2px;
    --peek: 0cqi;
    /* Vertical space reserved below each card image for the
       swatch row and details stack in `snippets/product-card.liquid`:
       `.product-card__meta` (24px colour swatch + var(--sp-8) margin
       top/bottom), the colour-name's var(--sp-4) margin-top and
       var(--sp-24) margin-bottom, plus 42.5px for the combined
       `.product-card__title`, `.product-card__colour-name` and
       `.product-card__price` line boxes — measured on a hydrated card,
       since that text has no explicit line-height and can't be derived
       from tokens. Used by the track's `min-height` so empty rails
       (e.g. Searchspring before hydration) reserve the full card height
       and don't shift when products mount. The whole calc resolves to
       110.5px; must stay in sync with those rules and be re-measured if
       the card's typography changes. */
    --card-details-reserve: calc((var(--sp-8) * 2) + 24px + var(--sp-4) + var(--sp-24) + 42.5px);

    position: relative;
    display: block;
    overflow: hidden;
    /* Establish the inline-size container at the carousel host so
       `cqi` units inside `.carousel__track` (skeleton min-height)
       resolve against the rail's actual rendered width, not an
       ancestor or the small viewport. */
    container-type: inline-size;

    &[hidden] {
      display: none;
    }
  }

  /* Centered-with-peeks mobile layout (default): exactly one slide
     visible plus a peek band on each side. Scoped to the mobile
     breakpoint so the desktop layout always anchors to the edge.
     `--peek` is in `cqi` (not %) so it composes with the skeleton
     `min-height` calc, where `%` would resolve against block size. */
  @media (max-width: 767px) {
    :is(carousel-slider, searchspring-carousel).carousel[data-mobile-layout='centered'] {
      --slides-to-show-mobile: 1;
      --peek: 8cqi;
    }
  }

  @media (min-width: 768px) {
    :is(carousel-slider, searchspring-carousel).carousel {
      --slides-to-show: var(--slides-to-show-desktop);
      --peek: 0cqi;
    }
  }

  :is(carousel-slider, searchspring-carousel) .carousel__track {
    display: flex;
    flex-direction: row;
    /* Slides must not stretch to the track's height. The track's
       CLS-reservation `min-height` (below) can be a hair taller
       than a card's intrinsic content, and default
       `align-items: stretch` would then pull every `.product-card`
       to the track height, leaving empty space below
       `product-card__details` and pushing page content down. */
    align-items: flex-start;
    gap: var(--slide-gap);
    padding-inline: var(--peek);
    position: relative;
    /* Native horizontal scroll with snap. Compositor-owned, so
       touch drag stays smooth even while we lazy-load images and
       the layout grows. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* Hide native scrollbar without disabling scroll. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* iOS < 13 momentum scroll. Newer iOS ignores this safely. */
    -webkit-overflow-scrolling: touch;
  }

  /* CLS reservation: only applied while the track has no element
     children (e.g. Searchspring before hydration). Once cards
     mount, the track collapses to their intrinsic height — no
     residual empty band below the row.

     The available width must subtract `--peek` from both sides:
     `padding-inline: var(--peek)` shrinks the flex content box, so
     each slide's actual width is (100cqi - 2 × peek - gaps) /
     slides-to-show. Forgetting the peek term overshoots the real
     card height on mobile centered layout (peek = 8%) and causes a
     visible jump when Searchspring hydrates.

     The 290 / 200 ratio is literal, not tokenised: it must match
     `.product-card__media`'s `aspect-ratio: 200 / 290` in
     `snippets/product-card.liquid`. */
  :is(carousel-slider, searchspring-carousel) .carousel__track:not(:has(> *)) {
    min-height: calc(
      ((100cqi - 2 * var(--peek) - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show)) *
        (290 / 200) + var(--card-details-reserve, 0px)
    );
  }

  :is(carousel-slider, searchspring-carousel) .carousel__track::-webkit-scrollbar {
    display: none;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__track:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  /* Desktop drag-to-scroll feedback. The component sets
     data-dragging="true" only for non-touch input. */
  :is(carousel-slider, searchspring-carousel).carousel[data-dragging='true'] .carousel__track {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  /* While the JS-driven release/arrow snap animation is in flight,
     disable native scroll-snap so the browser's snap engine doesn't
     fight our per-frame scrollLeft writes. Without this, mandatory
     snap can yank the rail to an unrelated slide mid-animation and
     visually reads as a runaway loop. The host re-enables snap as
     soon as the animation completes so the resting position locks
     to the grid. */
  :is(carousel-slider, searchspring-carousel).carousel[data-animating='true'] .carousel__track {
    scroll-snap-type: none;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(carousel-slider, searchspring-carousel) .carousel__track {
      cursor: grab;
    }
  }

  /* Underfilled rail: not enough slides to scroll. Reset the
     interactive affordances and hide the arrows so the rail
     reads as a plain row. */
  :is(carousel-slider, searchspring-carousel).carousel[data-disabled='true'] .carousel__track {
    cursor: auto;
    overflow-x: hidden;
    scroll-snap-type: none;
  }

  :is(carousel-slider, searchspring-carousel).carousel[data-disabled='true'] .carousel__arrow {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(carousel-slider, searchspring-carousel) .carousel__track {
      scroll-behavior: auto;
    }
  }

  :is(carousel-slider, searchspring-carousel) .carousel__track > * {
    flex: 0 0 calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));
    min-width: 0;
    min-height: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Centered mobile layout: align the snap point to the slide's
     centre so the active slide sits in the middle of the viewport
     with symmetric peeks. With `--peek` equal to half of the empty
     space (track padding) and `--slides-to-show: 1`, snap-align
     center makes scrollLeft = 0 land slide 0 perfectly centred. */
  @media (max-width: 767px) {
    :is(carousel-slider, searchspring-carousel).carousel[data-mobile-layout='centered'] .carousel__track > * {
      scroll-snap-align: center;
    }
  }

  :is(carousel-slider, searchspring-carousel) .carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__arrow[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__arrow svg {
    width: 16px;
    height: 16px;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__arrow--prev {
    left: 8px;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__arrow--next {
    right: 8px;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :is(carousel-slider, searchspring-carousel) .carousel__count {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: var(--layer-raised);
    display: none;
    padding: 4px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--font-size-4xs);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  @media (max-width: 767px) {
    :is(carousel-slider, searchspring-carousel).carousel[data-initialised='true'] .carousel__count {
      display: inline-flex;
    }
  }

  /* Hide when the rail can fit every slide — nothing to count. */
  :is(carousel-slider, searchspring-carousel).carousel[data-disabled='true'] .carousel__count {
    display: none;
  }
/* END_SNIPPET:carousel */

/* START_SNIPPET:cart-item (INDEX:70) */
.cart-page__item {
    position: relative;
    display: flex;
    gap: var(--sp-16);
    padding-block: var(--sp-24);

    &:not(:last-child) {
      border-bottom: 1px solid var(--color-background-accent);
    }

    &:not(:has(~ .cart-page__item:not([data-removing]))) {
      border-bottom-width: 0;
    }

    & .cart-page__item-body,
    & .cart-page__item-image,
    & .cart-page__item-actions {
      transition: opacity var(--motion-quick) var(--ease-out-quint);
    }

    &[data-pending] {
      pointer-events: none;

      & .cart-page__item-body,
      & .cart-page__item-image,
      & .cart-page__item-actions {
        opacity: 0.45;
      }
    }

    &[data-removing] {
      pointer-events: none;
      overflow: hidden;
      border-bottom-width: 0;
      animation: cart-item-collapse 0.3s var(--ease-out-quint) forwards;
    }

    &[data-collapsed] {
      display: none;
    }

    /* Rollback restore (§3.4/§4, T8 port of minicart-item.liquid): a failed
       removal expands the row back open, reusing the --item-height custom
       property animateItemRemoval() already measured so no re-measurement of
       a zero-height row is needed. */
    &[data-restoring] {
      pointer-events: none;
      overflow: hidden;
      animation: cart-item-expand 320ms var(--ease-out-quint) forwards;
    }
  }

  @keyframes cart-item-collapse {
    from {
      height: var(--item-height);
      opacity: 0.55;
      transform: none;
      padding-bottom: var(--sp-24);
    }
    to {
      height: 0;
      opacity: 0;
      transform: translateX(-12px);
      padding-bottom: 0;
      border-bottom-width: 0;
    }
  }

  @keyframes cart-item-expand {
    from {
      height: 0;
      opacity: 0.4;
      transform: translateX(-12px);
      padding-bottom: 0;
      border-bottom-width: 0;
    }
    to {
      height: var(--item-height);
      opacity: 1;
      transform: none;
      padding-bottom: var(--sp-24);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-page__item[data-removing] {
      animation: none;
      display: none;
    }

    .cart-page__item[data-restoring] {
      animation: none;
    }

    .cart-page__item .cart-page__item-body,
    .cart-page__item .cart-page__item-image,
    .cart-page__item .cart-page__item-actions {
      transition: none;
    }
  }

  .cart-page__item-image.image {
    width: 100px;
    flex-shrink: 0;

    @media (min-width: 768px) {
      width: 140px;
    }
  }

  .cart-page__item-body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .cart-page__item-title {
    font-family: var(--font-button-family);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;

    @media (min-width: 768px) {
      font-size: var(--font-size-md);
    }
  }

  .cart-page__item-variant {
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
  }

  .cart-page__item-price-container {
    display: flex;
    gap: 3px;
    font-size: var(--font-size-2xs);
    margin-top: var(--sp-8);
  }

  .cart-page__item-price-container span {
    font-family: inherit;
  }

  .cart-page__item-price--sale {
    color: var(--color-sale);
  }

  .cart-page__item-price--original {
    text-decoration: line-through;
  }

  .cart-page__item-sale-note {
    font-size: var(--font-size-4xs);
    color: var(--color-sale);
    line-height: 1;
    margin-top: var(--sp-8);
  }

  .cart-page__item-discount-tag {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    width: max-content;

    svg {
      width: var(--font-size-2xs);
    }
  }

  .cart-page__item-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-16);
    margin-top: auto;
    padding-top: var(--sp-16);
  }

  .cart-page__item-size-wrapper {
    position: relative;
    background-color: var(--color-background-accent);
    height: 30px;
    padding-inline: var(--sp-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    cursor: pointer;

    svg {
      width: 15px;
      transform: rotate(90deg);
    }
  }

  .cart-page__item-size-display {
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    text-transform: uppercase;
  }

  .cart-page__item-size-select {
    position: absolute;
    top: -7px;
    left: 0;
    width: 100%;
    height: calc(100% + 14px);
    opacity: 0;
    cursor: pointer;
  }

  .cart-page__item-quantity {
    display: flex;
    align-items: center;
    background-color: var(--color-background-accent);
    height: 30px;

    button {
      position: relative;
      width: 25px;
      height: 44px;
      margin-block: -7px;
      background: none;
      padding: 0;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--color-foreground);

      &::before,
      &::after {
        content: '';
        position: absolute;
        background-color: currentColor;
      }

      &::before {
        width: 11px;
        height: 1px;
      }

      &[data-function='add']::after {
        width: 1px;
        height: 11px;
      }
    }

    input {
      background: none;
      height: 100%;
      border: 0;
      text-align: center;
      font-family: var(--font-button-family);
      font-size: var(--font-size-sm);
      padding: 0;
      width: 32px;

      &[type='number']::-webkit-inner-spin-button,
      &[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      &[type='number'] {
        -moz-appearance: textfield;
        appearance: textfield;
      }
    }
  }

  .cart-page__item-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin: var(--sp-8) 0 0;
    color: var(--color-feedback-error);
    font-size: var(--font-size-2xs);
    line-height: 1.35;

    &[hidden] {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: cart-item-error-in 0.2s ease both;
    }
  }

  .cart-page__item-error-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.1em;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  @keyframes cart-item-error-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .cart-page__item-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-4);
  }

  .cart-page__item-remove,
  .cart-page__item-wishlist {
    background: none;
    border: 0;
    width: var(--tap-target);
    height: var(--tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-foreground);

    svg {
      width: 20px;
    }
  }

  .cart-page__item-remove {
    position: relative;
    top: 10px;
    right: -15px;
  }

  .cart-page__item-wishlist svg {
    width: 10px;
  }
/* END_SNIPPET:cart-item */

/* START_SNIPPET:collection-results (INDEX:71) */
.collection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .collection__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2px;
    row-gap: var(--space-6);
    margin-bottom: var(--space-12);
    transition: opacity 0.2s ease;

    &[hidden] {
      display: none !important;
    }

    @media (min-width: 768px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .collection__grid--skeleton {
    width: 100%;
  }

  .collection__skeleton-wrapper {
    display: flex;
    flex-direction: column;
  }

  .collection__skeleton-card {
    /* keep in sync with .product-card__media in snippets/product-card.liquid */
    aspect-ratio: 200 / 290;
    background-color: var(--color-background-alt);
  }

  .collection__skeleton-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--sp-8);
    gap: var(--sp-20);
  }

  .collection__skeleton-swatches {
    width: 60%;
    height: 24px;
  }

  .collection__skeleton-wishlist {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  .collection__skeleton-info {
    display: flex;
    flex-direction: column;
    margin-inline: var(--sp-8);
  }

  .collection__skeleton-title {
    width: 70%;
    height: 16px;
    margin: 0;
  }

  .collection__skeleton-colour {
    width: 40%;
    height: 12px;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-24);
  }

  .collection__skeleton-price {
    width: 30%;
    height: 14.5px;
    margin: 0;
  }

  .collection-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: 120px;
    margin-top: 12px;

    &[hidden] {
      .collection-pagination__load-more,
      [data-js='pagination-load-more-text'] {
        display: none;
      }
    }
  }

  .collection-pagination__progress {
    font-size: var(--font-size-3xs);
    opacity: 0.6;
  }

  .collection-pagination__load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 150px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    text-decoration: none;
    padding-inline: var(--space-8);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;

    &[hidden] {
      display: none;
    }

    &:hover {
      background-color: #fff;
      color: #000;
    }

    &[data-loading='true'] {
      opacity: 0.6;
      pointer-events: none;
    }
  }

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

  .collection-pagination__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);

    &[hidden] {
      display: none;
    }
  }

  .collection-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    text-decoration: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    padding: var(--space-1);

    &:hover {
      border-color: #000;
      color: #000;
    }

    &:focus-visible {
      outline: 2px solid var(--color-foreground);
      outline-offset: 2px;
    }

    &[data-state='old'] {
      border-color: rgba(0, 0, 0, 0.2);
      color: #000;
    }

    &[data-state='new'] {
      border-color: rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.4);
    }

    &[data-state='current'],
    &[aria-current='page'] {
      border-color: #000;
      color: #000;
      pointer-events: none;
    }
  }

  .collection-pagination__arrow {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    border-color: #000;
    color: #000;
    display: none;
  }

  .collection-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-pagination__load-more,
    .collection-pagination__page {
      transition: none;
    }
  }

  .collection__empty {
    text-align: center;
    font-size: var(--font-size-sm);
    font-family: var(--font-body-family);
    margin-top: var(--space-12);
  }
/* END_SNIPPET:collection-results */

/* START_SNIPPET:collection-subcollections (INDEX:72) */
.collection-subcollections {
    display: flex;
    list-style: none;
    gap: 6px;
    margin-block: var(--space-4) 0;
    padding-bottom: var(--space-2);
    overflow: auto;
    scrollbar-width: none;

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

    li {
      background-color: var(--color-background-accent);
      font-family: var(--font-button-family);
      font-size: var(--font-size-2xs);
      text-transform: uppercase;
      white-space: nowrap;
      padding: var(--space-1);
    }

    a {
      color: #000;
      text-decoration: none;
    }
  }

  @media (min-width: 768px) {
    .collection-subcollections {
      overflow: visible;
      margin: 0;
      padding: 0;
      justify-content: center;
    }
  }
/* END_SNIPPET:collection-subcollections */

/* START_SNIPPET:collection-toolbar (INDEX:73) */
.collection-product-count {
    font-size: var(--font-size-4xs);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    text-align: center;
  }

  .collection-upper__filters-sentinel {
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
  }

  .collection-upper__filters {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-2) var(--space-2) var(--space-2);
    background-color: var(--color-background);
    position: sticky;
    top: var(--header-height);
    transform: translateY(var(--header-offset, 0px));
    z-index: calc(var(--layer-sticky) - 1);
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.3s ease-in-out;

    &[data-stuck='true'] {
      box-shadow: 0 -16px 0 var(--color-background);
    }

    &[data-stuck='true'] .collection-upper__title-group {
      min-height: 2.4em;
    }

    &[data-stuck='true'] .collection-upper__title {
      opacity: 1;
      transform: translate(-50%, -20px);
    }

    &[data-stuck='true'] .collection-product-count {
      transform: translate(-50%, calc(-50% + 11px));
    }

    &[data-stuck='true'] .collection-upper__filters-wrapper {
      align-self: end;
    }
  }

  .collection-upper__title-group {
    position: relative;
    align-self: center;
    width: 100%;
    min-width: 0;
    min-height: 1em;
    transition: min-height 0.3s ease;
  }

  .collection-product-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-4xs);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: transform 0.3s ease;
  }

  .collection-upper__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 4px));
    font-family: var(--font-title-family);
    font-size: var(--font-size-md);
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-upper__filters,
    .collection-upper__title-group,
    .collection-upper__title,
    .collection-product-count {
      transition: none;
    }
  }

  .collection-upper__filters-wrapper {
    display: flex;
    gap: var(--space-3);
    align-items: center;

    &:last-child {
      justify-self: end;
    }

    @media (min-width: 768px) {
      gap: var(--space-3);
    }
  }

  .collection-toggle-switch {
    --toggle-circle-size: 14px;
    position: relative;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--color-background-accent);
    padding-inline: var(--space-1);
    line-height: 1;
    height: calc(var(--toggle-circle-size) + 4px);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #000;

    &[data-active='product'] {
      background-color: #77645a;
      color: #fff;

      .collection-toggle-switch__track {
        margin-left: 2px;
        margin-right: calc(var(--toggle-circle-size) + 2px);
      }

      .collection-toggle-switch__label--on-body {
        opacity: 0;
      }

      .collection-toggle-switch__label--product {
        opacity: 1;
      }

      .collection-toggle-switch__circle {
        left: calc(100% - (var(--toggle-circle-size) + 2px));
      }
    }
  }

  .collection-toggle-switch__track {
    display: grid;
    grid-template-areas: 'content';
    align-items: center;
    margin-left: calc(var(--toggle-circle-size) + 2px);
    margin-right: 2px;
    transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .collection-toggle-switch__label {
    grid-area: content;
    font-size: var(--font-size-4xs);
    white-space: nowrap;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-body-family);
  }

  .collection-toggle-switch__label--product {
    opacity: 0;
  }

  .collection-toggle-switch__label--on-body {
    opacity: 1;
  }

  .collection-toggle-switch__circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--toggle-circle-size);
    height: var(--toggle-circle-size);
    background-color: #fff;
    border-radius: 50%;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.12);
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:collection-toolbar */

/* START_SNIPPET:desktop-menu (INDEX:75) */
.desktop-menu-panel {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: 440px;
    padding: var(--space-6) var(--space-5);
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
  }

  /* ── Top-layer hosting via the popover API (iOS 17+) ───────── */
  @supports selector(:popover-open) {
    .desktop-menu-panel {
      position: fixed;
      inset: auto;
      top: var(--desktop-menu-top);
      left: 0;
      margin: 0;
      border: 0;
      opacity: 0;
      transform: translateY(-10px);
      transition:
        opacity var(--motion-quick) var(--ease-out-quint),
        transform var(--motion-quick) var(--ease-out-quint),
        overlay var(--motion-quick) allow-discrete,
        display var(--motion-quick) allow-discrete;
    }

    .desktop-menu-panel:popover-open {
      display: flex;
      opacity: 1;
      transform: none;
    }

    @starting-style {
      .desktop-menu-panel:popover-open {
        opacity: 0;
        transform: translateY(-10px);
      }
    }
  }

  /* ── Fallback for browsers without popover support ─────────── */
  @supports not selector(:popover-open) {
    .desktop-menu-panel {
      display: none;
      position: fixed;
      top: var(--desktop-menu-top);
      left: 0;
      z-index: var(--layer-header-menu);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition:
        opacity var(--motion-quick) var(--ease-out-quint),
        transform var(--motion-quick) var(--ease-out-quint),
        visibility 0s linear var(--motion-quick);
    }

    .desktop-menu-panel[data-state='open'] {
      display: flex;
      opacity: 1;
      visibility: visible;
      transform: none;
      transition:
        opacity var(--motion-quick) var(--ease-out-quint),
        transform var(--motion-quick) var(--ease-out-quint),
        visibility 0s linear 0s;
    }
  }

  .desktop-menu-panel__parent {
    position: absolute;
    /* Fill the panel's content box (panel padding = space-6 block / space-5
       inline) so the image columns can stretch to the full panel height
       (issue 7). Link columns stay top-aligned via align-items. */
    inset: var(--space-6) var(--space-5);
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-quick) var(--ease-out-quint);
  }

  .desktop-menu-panel__parent[data-active] {
    opacity: 1;
    pointer-events: auto;
  }

  .desktop-menu-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: var(--space-4);
    column-gap: var(--space-2);
    max-height: 350px;

    li {
      display: inline-flex;
    }
  }

  .desktop-menu-panel__list--orphan li:first-child {
    display: inline-flex;
    margin-bottom: var(--space-2);

    a {
      font-family: var(--font-button-family);
      font-weight: 500;
      text-transform: uppercase;
    }
  }

  .desktop-menu-panel__link,
  .desktop-menu-panel__column-title {
    font-family: var(--font-body-family);
    font-size: var(--font-size-2xs);
    text-decoration: none;
    color: inherit;
    line-height: 1;
  }

  .desktop-menu-panel__column-title {
    text-transform: uppercase;
    font-family: var(--font-button-family);
    font-weight: 500;
    width: fit-content;
  }

  .desktop-menu-panel__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    opacity: 0;
    transform: translateX(10px);
    transition:
      opacity var(--motion-quick) var(--ease-out-quint),
      transform var(--motion-quick) var(--ease-out-quint);
    /* Linear stagger fallback; the sqrt() cascade below wins where supported. */
    transition-delay: calc(var(--column-index, 0) * var(--motion-stagger));
  }

  @supports (width: calc(sqrt(4) * 1px)) {
    .desktop-menu-panel__column {
      transition-delay: calc(sqrt(var(--column-index, 0)) * var(--motion-stagger));
    }
  }

  .desktop-menu-panel__parent[data-active] .desktop-menu-panel__column {
    opacity: 1;
    transform: none;
  }

  .desktop-menu-panel__images {
    display: flex;
    gap: 2px;
    margin-left: auto;
    /* Stretch to the parent's full (panel) height so 1–4 images fill it. */
    align-self: stretch;
  }

  .desktop-menu-panel__image {
    position: relative;
    display: block;
    width: 250px;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--motion-quick) var(--ease-out-quint),
      transform var(--motion-quick) var(--ease-out-quint);

    &:nth-child(1) {
      transition-delay: calc(0 * var(--motion-stagger));
    }
    &:nth-child(2) {
      transition-delay: calc(1 * var(--motion-stagger));
    }
    &:nth-child(3) {
      transition-delay: calc(2 * var(--motion-stagger));
    }
    &:nth-child(4) {
      transition-delay: calc(3 * var(--motion-stagger));
    }

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

  /* Images reveal only once decoded (data-ready set by JS after decode race). */
  .desktop-menu-panel__parent[data-active]
    .desktop-menu-panel__images[data-ready]
    .desktop-menu-panel__image {
    opacity: 1;
    transform: none;
  }

  .desktop-menu-panel__image-title {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-title-family);
    color: #fff;
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-menu-panel,
    .desktop-menu-panel:popover-open,
    .desktop-menu-panel[data-state='open'],
    .desktop-menu-panel__parent,
    .desktop-menu-panel__parent[data-active],
    .desktop-menu-panel__column,
    .desktop-menu-panel__image {
      transition: none;
      transform: none;
    }

    .desktop-menu-panel__column,
    .desktop-menu-panel__parent[data-active] .desktop-menu-panel__image {
      opacity: 1;
    }
  }
/* END_SNIPPET:desktop-menu */

/* START_SNIPPET:desktop-search (INDEX:76) */
/* Non-modal, fixed panel below the header. Visibility is driven by
     data-state; only opacity/transform animate (no layout properties).
     The panel is relocated to <body> at runtime to escape the header's
     `will-change: transform` containing block, then sits above the shared
     page overlay while the header stays interactive above it. */
  .desktop-search-panel {
    display: none;
    position: fixed;
    top: var(--desktop-search-top);
    left: 0;
    width: 100%;
    padding: var(--space-6) var(--space-5);
    z-index: var(--layer-header-menu);
    background-color: var(--color-background);
    color: var(--color-foreground);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint),
      visibility 0s linear var(--motion-quick);
    gap: var(--space-8);

    @media (min-width: 768px) {
      display: flex;
    }

    &[data-state='open'] {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint),
        visibility 0s linear 0s;
      z-index: var(--layer-overlay);

      .desktop-search-panel__column {
        opacity: 1;
        transform: none;
        transition: opacity var(--motion-quick) var(--ease-out-quint),
          transform var(--motion-quick) var(--ease-out-quint), visibility 0s linear 0s;

        &:nth-child(1) {
          transition-delay: calc(0 * var(--motion-stagger));
        }
        &:nth-child(2) {
          transition-delay: calc(1 * var(--motion-stagger));
        }
        &:nth-child(3) {
          transition-delay: calc(2 * var(--motion-stagger));
        }
      }
    }
  }

  .desktop-search-panel__view-all {
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    border: 1px solid currentColor;
    line-height: 1;
    display: inline-flex;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    transition: background-color var(--motion-quick) var(--ease-out-quint), color var(--motion-quick) var(--ease-out-quint), opacity var(--motion-quick) var(--ease-out-quint),
      transform var(--motion-quick) var(--ease-out-quint);
    transform: none;
    margin-top: auto;

    &:hover,
    &:focus-visible {
      background-color: var(--color-foreground);
      color: var(--color-background);
    }

    &[aria-hidden='true'] {
      opacity: 0;
      pointer-events: none;
      transform: translateY(var(--space-2));
    }
  }

  .desktop-search-panel__left {
    display: flex;
    flex-direction: column;
  }

  .desktop-search-panel__columns {
    display: flex;
    gap: var(--space-6);
  }

  .desktop-search-panel__column {
    transform: translateX(10px);
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint),
      visibility 0s linear var(--motion-quick);
    gap: var(--space-4);
    display: flex;
    flex-direction: column;

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

  .desktop-search-panel__heading {
    font-family: var(--font-button-family);
    font-weight: 500;
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    line-height: 1;
  }

  .desktop-search-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--font-size-2xs);
  }

  .desktop-search-panel__term {
    text-decoration: none;
    color: inherit;
    text-transform: capitalize;
  }

  .desktop-search__clear {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;

    &[data-visible] {
      display: flex;
    }

    svg {
      width: 12px;
      margin-right: var(--space-2);
    }
  }

  @media (hover: hover) {
    .desktop-search__clear {
      transition: opacity var(--motion-quick) var(--ease-out-quint);
    }

    .desktop-search__clear:hover {
      opacity: 0.6;
    }
  }

  .desktop-search-panel__product-title,
  .desktop-search-panel__product-price {
    font-size: var(--font-size-2xs);
    line-height: 1;
  }

  .desktop-search-panel__product-price {
    margin-top: var(--space-1);
  }

  /* Match the real product card exactly so the skeleton→product swap is
     shift-free (issue 8): same min-width, same info padding, same image
     aspect-ratio (below). */
  .desktop-search-panel__product-skeleton {
    display: flex;
    flex-direction: column;
    min-width: 270px;
  }

  .desktop-search-panel__product-skeleton-text {
    padding: var(--space-2) var(--space-1) var(--space-2) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    span {
      display: block;
      height: 12px;
      background: linear-gradient(
        90deg,
        var(--color-background-alt) 25%,
        var(--color-background-accent) 50%,
        var(--color-background-alt) 75%
      );
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
      border-radius: 3px;

      &:first-child {
        width: 80%;
      }

      &:last-child {
        width: 20%;
      }
    }
  }

  @keyframes skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  .desktop-search-panel__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);
    color: inherit;
    opacity: 0.6;
    margin: 0;
    width: 100%;
  }

  .desktop-search-panel__no-results {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);

    &[aria-hidden='false'] {
      display: flex;
    }
  }

  .desktop-search-panel__right {
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .desktop-search-panel__products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    position: relative;
    overflow: auto;
  }

  .desktop-search-panel__product {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint);
    overflow: hidden;
    min-width: 270px;

    &[data-visible] {
      opacity: 1;
      transform: none;
    }

    &:nth-child(1) {
      transition-delay: calc(0 * var(--motion-stagger));
    }

    &:nth-child(2) {
      transition-delay: calc(1 * var(--motion-stagger));
    }

    &:nth-child(3) {
      transition-delay: calc(2 * var(--motion-stagger));
    }

    &:nth-child(4) {
      transition-delay: calc(3 * var(--motion-stagger));
    }
  }

  .desktop-search-panel__product-image {
    position: relative;
    width: 100%;
    /* Reserve the 3:4 image box before the <img> loads so the card is the
       same height as the skeleton it replaces (issue 8). */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--color-background-alt);
  }

  .desktop-search-panel__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .desktop-search-panel__product-info {
    padding: var(--space-2) var(--space-1) var(--space-2) 0;
  }

  .desktop-search-panel__product-skeleton-image {
    aspect-ratio: 3 / 4;
    background: linear-gradient(
      90deg,
      var(--color-background-alt) 25%,
      var(--color-background-accent) 50%,
      var(--color-background-alt) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
  }

  .desktop-search-panel__loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-quick) var(--ease-out-quint), visibility 0s linear var(--motion-quick);

    &[aria-hidden='false'] {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--motion-quick) var(--ease-out-quint), visibility 0s linear 0s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .desktop-search-panel,
    .desktop-search-panel[data-state='open'],
    .desktop-search-panel__column,
    .desktop-search-panel__product,
    .desktop-search-panel__view-all,
    .desktop-search-panel__loader {
      transition: none;
      transform: none;
    }

    .desktop-search-panel__column {
      opacity: 1;
    }

    .desktop-search-panel__product {
      opacity: 1;
    }

    .desktop-search-panel__product-skeleton-image,
    .desktop-search-panel__product-skeleton-text span {
      animation: none;
    }
  }
/* END_SNIPPET:desktop-search */

/* START_SNIPPET:header-utils (INDEX:78) */
html.lock-scroll body {
    position: fixed;
    width: 100%;
    overflow: hidden;
    touch-action: none;
  }

  .page-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: var(--layer-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-quick) var(--ease-out-quint), visibility 0s linear var(--motion-quick);
    pointer-events: none;
  }

  .page-overlay[data-state='visible'] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--motion-quick) var(--ease-out-quint), visibility 0s linear 0s;
  }
/* END_SNIPPET:header-utils */

/* START_SNIPPET:image (INDEX:81) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  /* Reserve layout space matching the image's natural aspect ratio so
     the wrapper has height before the image loads (prevents skeleton
     placeholders from collapsing and avoids CLS). */
  .image[style*='--image-aspect-ratio'] {
    aspect-ratio: var(--image-aspect-ratio);
  }

  .image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:loading-spinner (INDEX:85) */
.loading-spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spinner-size, 40px);
    height: var(--spinner-size, 40px);
  }

  .loading-spinner__track,
  .loading-spinner__arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .loading-spinner__arc {
    -webkit-mask-image: conic-gradient(from 0deg, transparent, black 50%, transparent 50%);
    mask-image: conic-gradient(from 0deg, transparent, black 50%, transparent 50%);
    animation: spinner-arc-rotate 0.7s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
  }

  @keyframes spinner-arc-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .loading-spinner__arc {
      animation: none;
    }
  }
/* END_SNIPPET:loading-spinner */

/* START_SNIPPET:minicart-empty-state (INDEX:87) */
.minicart__empty-state {
    text-align: center;

    &[hidden] {
      display: none;
    }

    h3 {
      font-size: var(--font-size-3xl);
      font-family: var(--font-title-family);
      font-weight: 300;
      margin-bottom: var(--sp-12);
      line-height: 1;
    }

    h4 {
      font-size: var(--font-size-2xs);
      margin-bottom: var(--sp-24);
      font-weight: 300;
    }
  }

  .minicart__empty-collections {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-12);

    a {
      text-decoration: none;
      background-color: #fff;
      color: var(--color-foreground);
      padding: var(--sp-20) var(--sp-12);
      text-transform: uppercase;
      font-size: var(--font-size-xs);
      border: 1px solid #000;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      font-family: var(--font-button-family);

      &:first-child {
        background-color: var(--color-foreground);
        border-color: var(--color-foreground);
        color: #fff;
      }

      &:hover {
        background-color: var(--color-foreground);
        color: #fff;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .minicart__empty-state[data-entering] {
      animation: minicart-empty-in 0.4s ease-out both;
    }
  }

  @keyframes minicart-empty-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Reverse of minicart-empty-in — plays on a failed last-line removal so the
     empty state fades out before the returning items/footer become visible
     again (reverseTransitionToEmpty), never overlapping. */
  @media (prefers-reduced-motion: no-preference) {
    .minicart__empty-state[data-leaving] {
      pointer-events: none;
      animation: minicart-empty-out var(--motion-exit) var(--ease-out-quint) both;
    }
  }

  @keyframes minicart-empty-out {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translateY(10px);
    }
  }
/* END_SNIPPET:minicart-empty-state */

/* START_SNIPPET:minicart-footer (INDEX:88) */
.minicart footer {
    display: flex;
    background-color: var(--color-background-alt);
    border-top: 2px solid var(--color-background-accent);
    padding: var(--sp-12);
    margin-top: auto;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--spring-panel), transform 0.3s var(--spring-panel);

    .minicart__discount-tag {
      cursor: pointer;
    }
  }

  .minicart[data-state='open'] footer {
    opacity: 1;
    transform: none;
    transition-delay: 90ms;
  }

  .shop-pay-button {
    width: 100%;
    height: 55px;
  }

  .minicart__breakdown {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .minicart__breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-8);
    font-size: var(--font-size-2xs);
    line-height: 1;

    &:has(~ &) {
      margin-bottom: var(--sp-8);
    }
  }

  .minicart__total-price {
    font-weight: 600;

    &.minicart__total-price--discount {
      color: var(--color-success);
    }
  }

  .minicart[data-syncing] {
    .shop-pay-button {
      opacity: 0.4;
      pointer-events: none;
    }

    .minicart__total-price {
      opacity: 0.4;
      transition: opacity 0.15s ease;
    }
  }

  .minicart__discount-form {
    display: flex;
    justify-content: center;
    gap: var(--sp-8);
    width: 100%;
  }

  .minicart__discount-input {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    padding: 2px var(--sp-4);
    text-transform: uppercase;
    font-size: var(--font-size-md);
    font-family: var(--font-button-family);
    line-height: 1;
    background: transparent;
    transition: border-color 0.2s ease;
    text-align: center;
    outline: none;

    @media (min-width: 768px) {
      padding: var(--sp-4) var(--sp-12);
      font-size: var(--font-size-2xs);
    }

    &::placeholder {
      color: inherit;
      text-transform: uppercase;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      transition: opacity 0.2s ease;
      font-size: var(--font-size-2xs);
      position: relative;
      top: -1px;

      @media (min-width: 768px) {
        top: 0;
      }
    }

    &:not(:placeholder-shown),
    &:focus {
      border-color: rgba(0, 0, 0, 0.8);

      &::placeholder {
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      & + .minicart__discount-apply {
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;

        &:not(:disabled) {
          opacity: 1;
        }

        &:disabled {
          opacity: 0.4;
        }
      }
    }

    &[data-error] {
      border-color: var(--color-sale);
      color: var(--color-sale);
    }

    &[data-loading] {
      pointer-events: none;
      opacity: 0.4;
    }
  }

  .minicart__discount-apply {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    font-weight: 500;
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    padding: var(--sp-4) var(--sp-12);
    transform: translateX(-5px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease,
      color 0.2s ease;
    pointer-events: none;
    line-height: 1;

    @media (min-width: 768px) {
      font-size: var(--font-size-4xs);
    }

    &:disabled {
      cursor: not-allowed;
    }

    &:hover:not(:disabled):not([data-loading]),
    &:focus:not(:disabled):not([data-loading]) {
      background: var(--color-foreground);
      color: var(--color-background);
      border-color: var(--color-foreground);
    }

    &[data-loading] {
      pointer-events: none;
      opacity: 0.4;
    }
  }

  .minicart__discount-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    font-size: var(--font-size-4xs);
    text-align: center;

    &[data-open] {
      opacity: 1;
      visibility: visible;
      transform: translateY(5px);
      pointer-events: auto;
    }
  }

  .minicart__discount-note {
    &[data-hidden] {
      display: none;
    }
  }

  .minicart__discount-error {
    font-size: var(--font-size-4xs);
    color: var(--color-sale);

    &[data-hidden] {
      display: none;
    }
  }

  .minicart__discount-tag {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    gap: var(--sp-4);
    width: max-content;
    cursor: default;
    color: #000;

    svg {
      width: var(--font-size-2xs);
    }
  }

  .minicart__checkout-buttons {
    margin-top: var(--sp-12);

    form {
      &:has(.shop-pay-button:not([hidden])) {
        display: flex;
        gap: var(--sp-8);
      }
    }
  }

  .minicart__checkout-button {
    background-color: #000;
    border: 0;
    color: #fff;
    height: 55px;
    font-size: var(--font-size-md);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-weight: 500;
    width: 100%;
    padding: 0;
    cursor: pointer;
    border: 1px solid #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.15s ease;

    &:hover {
      background-color: #fff;
      color: #000;
    }

    .minicart__checkout-spinner {
      display: none;
    }

    /*
     * Checkout awaiting state — the ONLY busy look this button ever shows;
     * background syncing never dims or disables it. `[data-awaiting]` is set
     * for the brief window between a busy click and the flush settling,
     * never by `syncBusyUI()`.
     */
    &[data-awaiting] {
      cursor: progress;

      .minicart__checkout-spinner {
        display: inline-flex;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .minicart__checkout-button[data-awaiting] .minicart__checkout-spinner {
      animation: minicart-checkout-spinner-in 150ms var(--ease-out-quint) both;
    }
  }

  @keyframes minicart-checkout-spinner-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .minicart__trust-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: var(--sp-12);
    font-size: var(--font-size-3xs);
    font-family: var(--font-button-family);
    text-transform: uppercase;
  }

  .minicart__trust-divider {
    width: 1px;
    height: 10px;
    background-color: #000;
    opacity: 0.2;
  }

  .minicart__trust-item {
    display: flex;
    align-items: center;

    svg {
      width: 65px;
      margin-right: var(--sp-4);
    }
  }

  .minicart footer[data-leaving] {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .minicart footer,
    .minicart[data-state='open'] footer {
      transition: none;
      transform: none;
      opacity: 1;
    }

    .minicart footer[data-leaving] {
      transition: none;
    }
  }
/* END_SNIPPET:minicart-footer */

/* START_SNIPPET:minicart-item (INDEX:89) */
.minicart__item {
    position: relative;
    display: flex;
    gap: var(--sp-16);
    padding-bottom: var(--sp-20);

    &:not(:last-child) {
      border-bottom: 1px solid var(--color-background-accent);
    }

    &:not(:has(~ .minicart__item:not([data-removing]))) {
      border-bottom-width: 0;
    }

    & .minicart__column,
    & .minicart__product-image,
    & .minicart__remove-item {
      transition: opacity var(--motion-quick) var(--ease-out-quint);
    }

    &[data-pending] {
      pointer-events: none;

      & .minicart__column,
      & .minicart__product-image,
      & .minicart__remove-item {
        opacity: 0.4;
      }
    }

    &[data-removing] {
      pointer-events: none;
      overflow: hidden;
      border-bottom-width: 0;
      animation: minicart-item-collapse 0.3s var(--ease-out-quint) forwards;
    }

    &[data-collapsed] {
      display: none;
    }

    &[data-restoring] {
      pointer-events: none;
      overflow: hidden;
      animation: minicart-item-expand 320ms var(--ease-out-quint) forwards;
    }
  }

  @keyframes minicart-item-collapse {
    from {
      height: var(--item-height);
      opacity: 0.55;
      transform: none;
      padding-bottom: var(--sp-20);
    }
    to {
      height: 0;
      opacity: 0;
      transform: translateX(-12px);
      padding-bottom: 0;
      border-bottom-width: 0;
    }
  }

  @keyframes minicart-item-expand {
    from {
      height: 0;
      opacity: 0.4;
      transform: translateX(-12px);
      padding-bottom: 0;
      border-bottom-width: 0;
    }
    to {
      height: var(--item-height);
      opacity: 1;
      transform: none;
      padding-bottom: var(--sp-20);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .minicart__item[data-removing] {
      animation: none;
      display: none;
    }

    .minicart__item[data-restoring] {
      animation: none;
    }

    .minicart__item .minicart__column,
    .minicart__item .minicart__product-image,
    .minicart__item .minicart__remove-item {
      transition: none;
    }
  }

  .minicart__product-image {
    width: 100px;
  }

  .minicart__product-title {
    font-family: var(--font-button-family);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
  }

  .minicart__column {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .minicart__variant-details {
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
  }

  .minicart__price-container {
    display: flex;
    gap: 3px;
    font-size: var(--font-size-2xs);
    margin-top: 10px;
  }

  .minicart__price-container span {
    font-family: inherit;
  }

  .minicart__price--sale {
    color: var(--color-sale);
  }
  .minicart__price--original {
    text-decoration: line-through;
  }

  .minicart__sale-note {
    font-size: var(--font-size-4xs);
    color: var(--color-sale);
    line-height: 1;
    margin-top: 10px;
  }

  .minicart__remove-item {
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    position: absolute;
    top: -14px;
    right: -12px;

    svg {
      width: 20px;
    }
  }

  .minicart__controls {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    margin-top: auto;
  }

  .minicart__size-wrapper {
    position: relative;
    background-color: var(--color-background-accent);
    height: 30px;
    padding-inline: var(--sp-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: var(--sp-8);

    svg {
      width: 15px;
      transform: rotate(90deg);
    }
  }

  .minicart__size-display {
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    text-transform: uppercase;
  }

  .minicart__size-select {
    position: absolute;
    top: -7px;
    left: 0;
    width: 100%;
    height: calc(100% + 14px);
    opacity: 0;
    cursor: pointer;
  }

  .minicart__quantity {
    display: flex;
    align-items: center;
    background-color: var(--color-background-accent);
    height: 30px;

    button {
      position: relative;
      width: 25px;
      height: 44px;
      margin-block: -7px;
      background: none;
      padding: 0;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #000;

      &::before,
      &::after {
        content: '';
        position: absolute;
        background-color: currentColor;
      }

      &::before {
        width: 11px;
        height: 1px;
      }

      &[data-function='add']::after {
        width: 1px;
        height: 11px;
      }
    }

    input {
      background: none;
      height: 100%;
      border: 0;
      text-align: center;
      font-family: var(--font-button-family);
      font-size: var(--font-size-sm);
      padding: 0;

      &[type='number']::-webkit-inner-spin-button,
      &[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      &[type='number'] {
        -moz-appearance: textfield;
        appearance: textfield;
      }
    }
  }

  .minicart__item-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin: var(--sp-8) 0 0;
    color: var(--color-feedback-error);
    font-size: var(--font-size-2xs);
    line-height: 1.35;

    &[hidden] {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: minicart-item-error-in 0.2s ease both;
    }
  }

  .minicart__item-error-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.1em;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  @keyframes minicart-item-error-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:minicart-item */

/* START_SNIPPET:minicart-recommendations (INDEX:90) */
.minicart__slider {
    margin-top: var(--sp-12);

    &[hidden] {
      display: none;
    }
  }

  .minicart__slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    margin-bottom: var(--sp-8);

    h3 {
      font-family: var(--font-title-family);
      font-size: var(--font-size-md);
      font-weight: 300;
      text-transform: uppercase;
      margin: 0;
      line-height: 1;
    }
  }

  .minicart__slider-controls {
    display: flex;
    gap: var(--sp-4);

    button {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      width: 32px;
      height: 32px;
      background: none;
      border: 0;
      cursor: pointer;
      color: inherit;
      transition: opacity 0.2s ease;

      svg {
        width: var(--font-size-lg);
      }

      &[disabled],
      &[aria-disabled='true'] {
        opacity: 0.3;
        cursor: not-allowed;
      }
    }
  }

  .minicart__slider-rail {
    --slide-gap: var(--sp-8);

    .product-card[data-quick-add-first] {
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .product-card[data-adding] {
      pointer-events: none;
      cursor: progress;

      & > * {
        opacity: 0.4;
      }
    }

    media-slider .media-slider__arrow {
      display: none;
    }

    .minicart__rec-skeleton {
      display: flex;
      flex-direction: column;
      gap: var(--sp-8);
      font-size: var(--font-size-4xs);
    }

    .minicart__rec-skeleton-image {
      /* Must match .product-card__media's aspect-ratio in snippets/product-card.liquid. */
      aspect-ratio: 200 / 290;
      border-radius: var(--radius-xs);
    }

    .minicart__rec-skeleton-line {
      width: 80%;
    }

    .minicart__rec-skeleton-price {
      width: 40%;
    }

    @media (prefers-reduced-motion: no-preference) {
      .product-card[data-revealing] {
        animation: minicart-rec-reveal var(--motion-drawer) var(--ease-out-quint) both;
        animation-delay: calc(var(--reveal-index, 0) * 60ms);
      }
    }
  }

  @keyframes minicart-rec-reveal {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
/* END_SNIPPET:minicart-recommendations */

/* START_SNIPPET:mobile-menu (INDEX:91) */
/* ── Dialog shell ───────────────────────────────────── */
  mobile-menu-drawer > dialog {
    position: fixed;
    inset: 0;
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    /* Full-screen layout — geometry, flex direction and safe-area padding —
       is UNCONDITIONAL so it stays stable through the exit transition. Only
       `display` is [open]-scoped (allow-discrete keeps it `flex` while
       closing). Scoping layout to [open] let the UA's centred-dialog default
       flash for a frame on close (issue 5). */
    flex-direction: column;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    background-color: var(--color-background-alt);
    color: var(--color-foreground);
    overflow: hidden;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity var(--motion-exit) var(--ease-out-quint), transform var(--motion-exit) var(--ease-out-quint),
      display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete;
  }

  mobile-menu-drawer > dialog[open] {
    display: flex;
    opacity: 1;
    transform: scale(1);
    transition-duration: var(--motion-drawer);
    transition-timing-function: var(--spring-drawer);
  }

  mobile-menu-drawer > dialog::backdrop {
    /* Full-screen opaque drawer — no visible dim behind (parity with today). */
    background: rgb(0 0 0 / 0%);
  }

  @starting-style {
    mobile-menu-drawer > dialog[open] {
      opacity: 0;
      transform: scale(1.015);
    }
  }

  /* While the finger drives the drawer, JS writes the transform inline; kill
     the CSS transition so it tracks 1:1. */
  mobile-menu-drawer[data-gesture='dragging'] > dialog {
    transition: none;
  }

  /* ── Header ─────────────────────────────────────────── */
  .mobile-menu__header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: var(--space-2);
    color: var(--color-foreground);
  }

  .mobile-menu__logo {
    width: 170px;
    grid-column: 2 / 3;
    justify-self: center;
    color: currentColor;
  }

  .mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: end;
    justify-self: end;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-1) 0 var(--space-1) var(--space-1);
    background: none;
    border: 0;
    cursor: pointer;
    color: currentColor;

    & svg {
      width: var(--font-size-xl);
      height: var(--font-size-xl);
    }
  }

  /* Logo/search morph targets — only while open and only when motion is
     allowed (the view transition hands these names to the search drawer). */
  @media (prefers-reduced-motion: no-preference) {
    .mobile-menu[open] .mobile-menu__logo {
      view-transition-name: vt-header-logo;
    }

    .mobile-menu[open] .mobile-menu__search {
      view-transition-name: vt-header-search;
    }
  }

  /* ── Search bar ─────────────────────────────────────── */
  .mobile-menu__search {
    display: flex;
    position: relative;
    padding: 0 var(--space-2) var(--space-2) var(--space-2);

    & svg {
      position: absolute;
      top: 50%;
      left: var(--space-4);
      width: var(--font-size-2xs);
      height: var(--font-size-2xs);
      pointer-events: none;
      /* TODO - investigate 2px magic number */
      translate: 0% calc(-50% - 2px);
    }
  }

  .mobile-menu__search-input {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--space-3);
    font-size: var(--font-size-md);
    font-family: var(--font-body-family);
    height: 44px;

    &::placeholder {
      font-size: var(--font-size-3xs);
      text-transform: uppercase;
      font-family: var(--font-button-family);
    }
  }

  /* ── Panel navigation ───────────────────────────────── */
  .mobile-menu__nav {
    --nav-slide-offset: 20px;

    flex: 1;
    position: relative;
    margin-top: var(--space-2);
    overflow: hidden;
  }

  .mobile-menu__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-drawer) var(--spring-panel),
      visibility 0s linear var(--motion-drawer);
  }

  /* Idle/incoming/outgoing resting positions resolve purely from the nav's
     data-direction plus each panel's position relative to the active one. */
  .mobile-menu__nav[data-direction='forward'] .mobile-menu__panel:not([data-active]) {
    transform: translateX(var(--nav-slide-offset));
  }

  .mobile-menu__nav[data-direction='forward'] .mobile-menu__panel:has(~ .mobile-menu__panel[data-active]) {
    transform: translateX(calc(-1 * var(--nav-slide-offset)));
  }

  .mobile-menu__nav[data-direction='back'] .mobile-menu__panel:not([data-active]) {
    transform: translateX(calc(-1 * var(--nav-slide-offset)));
  }

  .mobile-menu__nav[data-direction='back'] .mobile-menu__panel[data-active] ~ .mobile-menu__panel {
    transform: translateX(var(--nav-slide-offset));
  }

  .mobile-menu__panel[data-active] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--motion-drawer) var(--ease-out-quint), transform var(--motion-drawer) var(--spring-panel), visibility 0s;
  }

  .mobile-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ── Item stagger (keyframe so re-entry replays without reflow) ──────── */
  @keyframes mobile-menu-item-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-menu__panel > .mobile-menu__list > li {
    opacity: 0;
  }

  .mobile-menu__panel[data-active] > .mobile-menu__list > li {
    opacity: 1;
    animation: mobile-menu-item-in var(--motion-drawer) var(--spring-panel) backwards;
    animation-delay: calc(var(--item-index, 0) * var(--motion-stagger));
  }

  /* ── Links ──────────────────────────────────────────── */
  .mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-2);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;

    & svg {
      width: 15px;
      height: auto;
    }

    &[aria-current='page'] {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  .mobile-menu__back {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    margin-bottom: var(--space-1);
    padding: var(--space-3);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-background-accent);
    cursor: pointer;
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    color: var(--color-foreground);
    opacity: 0.6;

    & svg {
      width: var(--font-size-sm);
      height: var(--font-size-sm);
    }
  }

  /* ── Accordions (L3) — grid-rows technique, aria-expanded the only state ── */
  .mobile-menu__accordion {
    display: grid;
    grid-template-rows: 0fr;
    /* Collapse: quicker than the expand (issue 4), interruptible. */
    transition: grid-template-rows var(--motion-quick) var(--spring-panel);

    & > ul {
      overflow: hidden;
      min-height: 0;
      /* Content fades + lifts independently of the row height so it never
         pops in/out with it. Collapse = fast fade, no delay; visibility flips
         hidden after the fade so collapsed links leave the tab order. */
      visibility: hidden;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint),
        visibility 0s linear var(--motion-quick);
    }
  }

  .mobile-menu__accordion-content {
    margin: 0;
    padding-inline: var(--space-4);
    list-style: none;
  }

  li:has(> [aria-expanded='true']) .mobile-menu__accordion {
    grid-template-rows: 1fr;
    /* Expand: slightly longer than the collapse. */
    transition-duration: var(--motion-drawer);
  }

  li:has(> [aria-expanded='true']) .mobile-menu__accordion > ul {
    visibility: visible;
    opacity: 1;
    transform: none;
    /* Expand: small delay so the content settles after the height opens. */
    transition: opacity var(--motion-drawer) var(--ease-out-quint) var(--motion-stagger), transform var(--motion-drawer) var(--ease-out-quint) var(--motion-stagger),
      visibility 0s;
  }

  /* Icon: crossfade + rotate the plus↔minus (no hard display swap). Both
     glyphs stack in one grid cell so they cross over. */
  .mobile-menu__accordion-icon {
    display: grid;
    place-items: center;
  }

  .mobile-menu__accordion-icon svg {
    grid-area: 1 / 1;
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint);
  }

  .mobile-menu__accordion-icon svg:last-child {
    opacity: 0;
    transform: rotate(-45deg);
  }

  [aria-expanded='true'] .mobile-menu__accordion-icon svg:first-child {
    opacity: 0;
    transform: rotate(45deg);
  }

  [aria-expanded='true'] .mobile-menu__accordion-icon svg:last-child {
    opacity: 1;
    transform: none;
  }

  /* ── Promos ─────────────────────────────────────────── */
  .mobile-menu__promos {
    display: flex;
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-out-quint);

    &[data-ready] {
      opacity: 1;
    }
  }

  .mobile-menu__promo {
    position: relative;

    & img {
      aspect-ratio: 4 / 5;
      object-position: top;
    }
  }

  .mobile-menu__promo-title {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    font-family: var(--font-title-family);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    text-align: center;
    color: #fff;
  }

  @media (min-width: 500px) {
    .mobile-menu__promo-title {
      font-size: var(--font-size-lg);
    }
  }

  /* ── Footer ─────────────────────────────────────────── */
  .mobile-menu__footer {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--color-background);
    border-top: 1px solid var(--color-background-accent);
    text-transform: uppercase;

    & a,
    & button {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      padding: var(--space-4) 0;
      font-family: var(--font-button-family);
      font-weight: 400;
      font-size: var(--font-size-2xs);
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      color: inherit;
    }

    & .swym-wishlist {
      background: none;
      border: 0;
      cursor: pointer;
    }
  }

  @media (min-width: 1200px) {
    mobile-menu-drawer {
      display: none;
    }
  }

  /* ── Reduced motion: fades only, no slide/scale/stagger/gesture ─────── */
  @media (prefers-reduced-motion: reduce) {
    mobile-menu-drawer > dialog,
    mobile-menu-drawer > dialog[open] {
      transform: none;
      transition: opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete;
    }

    @starting-style {
      mobile-menu-drawer > dialog[open] {
        transform: none;
      }
    }

    .mobile-menu__panel {
      transform: none;
      transition: opacity 150ms ease, visibility 0s linear 150ms;
    }

    .mobile-menu__nav[data-direction] .mobile-menu__panel {
      transform: none;
    }

    .mobile-menu__panel[data-active] {
      transform: none;
    }

    .mobile-menu__panel[data-active] > .mobile-menu__list > li {
      animation: none;
    }

    /* Instant open/close — height movement is off under reduced motion. */
    .mobile-menu__accordion,
    li:has(> [aria-expanded='true']) .mobile-menu__accordion {
      transition: none;
    }

    /* Opacity-only content fade (≤150ms), no lift; instant icon crossfade. */
    .mobile-menu__accordion > ul {
      transform: none;
      transition: opacity 150ms ease, visibility 0s linear 150ms;
    }

    li:has(> [aria-expanded='true']) .mobile-menu__accordion > ul {
      transform: none;
      transition: opacity 150ms ease, visibility 0s;
    }

    .mobile-menu__accordion-icon svg,
    [aria-expanded='true'] .mobile-menu__accordion-icon svg:first-child,
    [aria-expanded='true'] .mobile-menu__accordion-icon svg:last-child,
    .mobile-menu__accordion-icon svg:last-child {
      transform: none;
      transition: opacity 150ms ease;
    }

    .mobile-menu__promos {
      transition: none;
    }
  }

  /* ── Issue 3: depth stacking for a peer drawer opened over the menu ──── */
  /* The mobile menu is a top-layer modal <dialog>; a wishlist/minicart/etc.
     bottom-drawer opened from its footer is ALSO top-layer and shown after,
     so it already sits above the menu. But the shared .page-overlay can't dim
     between them (it is a normal-flow element, always below the top layer), so
     give the peer drawer's own ::backdrop the dim — it renders directly below
     that drawer in the top layer, i.e. above the menu but below the drawer
     sheet. Menu stays open underneath for the depth effect. */
  html:has(.mobile-menu[open]) .bottom-drawer::backdrop {
    display: block;
    background: rgb(0 0 0 / 30%);
  }
/* END_SNIPPET:mobile-menu */

/* START_SNIPPET:mobile-search (INDEX:92) */
/* Full-screen dialog shell. Modality, top-layer stacking, focus containment,
     Escape and focus restore come from the native <dialog>; entry/exit motion
     is declarative via @starting-style + allow-discrete. */
  .mobile-search-panel {
    position: fixed;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    /* Full-screen layout unconditional so it stays stable through the exit
       transition — only `display` is [open]-scoped (allow-discrete keeps it
       `flex` while closing). Scoping the flex layout to [open] let the UA's
       centred-dialog default flash for a frame on close (issue 5). */
    flex-direction: column;
    background-color: var(--color-background-alt);
    color: var(--color-foreground);
    overflow: hidden;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity var(--motion-exit) var(--ease-out-quint), transform var(--motion-exit) var(--ease-out-quint),
      display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete;

    &[open] {
      display: flex;
      opacity: 1;
      transform: scale(1);
      transition-duration: var(--motion-drawer);
      transition-timing-function: var(--spring-drawer);
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: scale(1.015);
      }
    }

    /* Full-screen, opaque drawer — the page-dimming backdrop is not shown
       (matches the previous overlay-less full-screen look). */
    &::backdrop {
      background: transparent;
    }
  }

  .mobile-search-panel__header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: var(--space-2);
    color: var(--color-foreground);
  }

  .mobile-search-panel__logo {
    width: 170px;
    color: currentColor;
    grid-column: 2 / 3;
    justify-self: center;
  }

  .mobile-search-panel[open] .mobile-search-panel__logo {
    view-transition-name: vt-header-logo;
  }

  .mobile-search-panel[open] .mobile-search-panel__search {
    view-transition-name: vt-header-search;
  }

  .mobile-search-panel:not([open]) .mobile-search-panel__logo,
  .mobile-search-panel:not([open]) .mobile-search-panel__search {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  .mobile-search-panel__close {
    display: flex;
    justify-self: end;
    background: none;
    border: 0;
    padding: var(--space-1);
    cursor: pointer;
    color: currentColor;

    svg {
      width: var(--font-size-xl);
      height: var(--font-size-xl);
    }
  }

  .mobile-search-panel__search {
    display: flex;
    align-items: center;
    padding: var(--space-2);
    position: relative;

    > svg:first-child {
      position: absolute;
      width: var(--font-size-2xs);
      height: var(--font-size-2xs);
      pointer-events: none;
      top: 50%;
      transform: translateY(-50%);
      left: var(--space-4);
      z-index: var(--layer-flat);
    }
  }

  .mobile-search-panel__input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--space-3);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    font-family: var(--font-body-family);
    position: relative;
    text-transform: none;
    transition: border-color var(--motion-quick) var(--ease-out-quint);

    &::placeholder {
      font-size: var(--font-size-3xs);
      text-transform: uppercase;
      font-family: var(--font-button-family);
    }

    &:focus-visible {
      outline: none;
      border-color: var(--color-foreground);
    }

    &[type='search']::-webkit-search-cancel-button {
      display: none;
    }
  }

  .mobile-search-panel__clear {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: var(--space-1);
    cursor: pointer;
    color: inherit;

    &[data-visible] {
      display: flex;
    }
  }

  .mobile-search-panel__clear-icon {
    width: 8px;
    height: 8px;
  }

  .mobile-search-panel__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .mobile-search-panel__columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .mobile-search-panel__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint);
    overflow: auto;
    padding-bottom: var(--space-2);

    &[aria-hidden='true'] {
      display: none;
    }
  }

  .mobile-search-panel[open] .mobile-search-panel__column {
    opacity: 1;
    transform: none;

    &:nth-child(1) {
      transition-delay: calc(0 * var(--motion-stagger));
    }

    &:nth-child(2) {
      transition-delay: calc(1 * var(--motion-stagger));
    }

    &:nth-child(3) {
      transition-delay: calc(2 * var(--motion-stagger));
    }
  }

  .mobile-search-panel__heading {
    font-family: var(--font-button-family);
    font-weight: 500;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    line-height: 1;
  }

  .mobile-search-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-5);
    font-size: var(--font-size-3xs);
  }

  .mobile-search-panel__term {
    text-decoration: none;
    color: inherit;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .mobile-search-panel__products-section {
    position: relative;
  }

  .mobile-search-panel__products {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;

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

  .mobile-search-panel__product {
    min-width: calc((100vw - var(--space-4)) / 2.5);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--motion-quick) var(--ease-out-quint), transform var(--motion-quick) var(--ease-out-quint);

    &[data-visible] {
      opacity: 1;
      transform: none;
    }

    &:nth-child(1) {
      transition-delay: calc(0 * var(--motion-stagger));
    }
    &:nth-child(2) {
      transition-delay: calc(1 * var(--motion-stagger));
    }
    &:nth-child(3) {
      transition-delay: calc(2 * var(--motion-stagger));
    }
    &:nth-child(4) {
      transition-delay: calc(3 * var(--motion-stagger));
    }
    &:nth-child(5) {
      transition-delay: calc(4 * var(--motion-stagger));
    }
    &:nth-child(6) {
      transition-delay: calc(5 * var(--motion-stagger));
    }
  }

  .mobile-search-panel__product-info {
    padding: var(--space-1) 0;
  }

  .mobile-search-panel__product-title,
  .mobile-search-panel__product-price {
    font-size: var(--font-size-3xs);
    line-height: 1.2;
  }

  .mobile-search-panel__product-price {
    margin-top: var(--space-1);
  }

  /* Match the real product card width exactly so the skeleton→product swap is
     shift-free (issue 8). The product card has no 390px width override, so the
     skeleton must not either. */
  .mobile-search-panel__product-skeleton {
    flex-shrink: 0;
    min-width: calc((100vw - var(--space-4)) / 2.5);
    display: flex;
    flex-direction: column;
  }

  .mobile-search-panel__product-skeleton-image {
    aspect-ratio: 3 / 4;
    background: linear-gradient(
      90deg,
      var(--color-background-alt) 25%,
      var(--color-background-accent) 50%,
      var(--color-background-alt) 75%
    );
    background-size: 200% 100%;
    animation: msearch-skeleton-shimmer 1.5s ease-in-out infinite;
  }

  .mobile-search-panel__product-skeleton-text {
    padding: var(--space-1) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    span {
      display: block;
      height: 10px;
      background: linear-gradient(
        90deg,
        var(--color-background-alt) 25%,
        var(--color-background-accent) 50%,
        var(--color-background-alt) 75%
      );
      background-size: 200% 100%;
      animation: msearch-skeleton-shimmer 1.5s ease-in-out infinite;
      border-radius: 3px;

      &:first-child {
        width: 80%;
      }
      &:last-child {
        width: 20%;
      }
    }
  }

  @keyframes msearch-skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  .mobile-search-panel__no-results {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);

    &[aria-hidden='false'] {
      display: flex;
    }
  }

  .mobile-search-panel__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    font-family: var(--font-body-family);
    font-size: var(--font-size-2xs);
    color: inherit;
    opacity: 0.6;
    margin: 0;
    width: 100%;
  }

  .mobile-search-panel__loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--color-background-alt) 80%, transparent);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-quick) var(--ease-out-quint), visibility 0s linear var(--motion-quick);

    &[aria-hidden='false'] {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--motion-quick) var(--ease-out-quint), visibility 0s linear 0s;
    }
  }

  .mobile-search-panel__view-all {
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    border: 1px solid currentColor;
    line-height: 1;
    display: flex;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    transition: background-color var(--motion-quick) var(--ease-out-quint), color var(--motion-quick) var(--ease-out-quint), opacity var(--motion-quick) var(--ease-out-quint),
      transform var(--motion-quick) var(--ease-out-quint);

    &:hover,
    &:focus-visible {
      background-color: var(--color-foreground);
      color: var(--color-background);
    }

    &[aria-hidden='true'] {
      display: none;
    }
  }

  .mobile-search-panel__footer {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    text-transform: uppercase;
    background-color: var(--color-background);
    border-top: 1px solid rgba(0, 0, 0, 0.1);

    a {
      font-family: var(--font-button-family);
      font-weight: 400;
      font-size: var(--font-size-2xs);
      color: inherit;
      text-decoration: none;
      padding: var(--space-4) 0;
      min-width: 44px;
      text-align: center;
    }
  }

  @media (hover: hover) {
    .mobile-search-panel__close,
    .mobile-search-panel__clear {
      transition: opacity var(--motion-quick) var(--ease-out-quint);
    }

    .mobile-search-panel__close:hover,
    .mobile-search-panel__clear:hover {
      opacity: 0.6;
    }
  }

  @media (min-width: 768px) {
    .mobile-search-panel {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-search-panel,
    .mobile-search-panel[open],
    .mobile-search-panel__column,
    .mobile-search-panel__product,
    .mobile-search-panel__view-all,
    .mobile-search-panel__loader {
      transition: none;
    }

    .mobile-search-panel__column {
      opacity: 1;
      transform: none;
    }

    .mobile-search-panel__product {
      opacity: 1;
      transform: none;
    }

    .mobile-search-panel__product-skeleton-image,
    .mobile-search-panel__product-skeleton-text span {
      animation: none;
    }
  }
/* END_SNIPPET:mobile-search */

/* START_SNIPPET:old-help-live-chat (INDEX:95) */
.new-help-live-chat {
    text-align: center;
  }

  .new-help-live-chat__title {
    font-family: var(--font-title-family);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .new-help-live-chat__status {
    display: inline-block;
    color: var(--color-success);
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-left: 10px;
  }

  .new-help-live-chat__status::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-success);
    border-radius: 50%;
  }

  .new-help-live-chat__text {
    font-family: var(--font-body-family);
    margin-bottom: 25px;
    margin-inline: auto;
    font-size: 14px;
  }

  .new-help-live-chat__button {
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    padding: 14px 30px;
    font-size: 14px;
    font-family: var(--font-button-family);
    font-weight: 300;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .new-help-live-chat__button:hover {
    background-color: #000;
    color: #fff;
  }
/* END_SNIPPET:old-help-live-chat */

/* START_SNIPPET:product-card (INDEX:96) */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 0;
    position: relative;

    &:hover {
      .product-card__quick-add {
        opacity: 1;

        @media (min-width: 768px) {
          transform: translateY(0) scale(1);
        }
      }

      @media (min-width: 768px) {
        .media-slider__progress {
          translate: none;
        }
      }
    }

    &[data-swapping='true'] {
      opacity: 0.6;
      pointer-events: none;
      transition: opacity 0.15s ease-in-out;
    }

    &[data-mini='true'] {
      .product-card__details {
        margin-top: var(--space-1);
        margin-inline: var(--space-1);
        font-size: var(--font-size-4xs);
      }

      .product-card__colour-name {
        margin-bottom: var(--space-1);
        text-transform: none;
        font-family: var(--font-body-family);
      }

      .product-card__price {
        font-size: var(--font-size-4xs);
      }
    }
  }

  .product-card__media {
    aspect-ratio: 200 / 290;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;

    &:hover {
      .media-slider__arrow {
        opacity: 1;
        transform: translate(0, -50%);
      }
    }

    @media (min-width: 768px) {
      &:has(.media-slider__arrow:hover) .product-card__quick-add {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
      }
    }
  }

  .product-urgency-banners {
    transition: opacity var(--motion-quick) ease-in-out;
  }

  @media (min-width: 768px) {
    .product-card:has(.media-slider__arrow:hover) .product-urgency-banners {
      opacity: 0;
    }
  }

  .product-card__hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    /* `data-hover-hold` is set by the parent carousel while drag-scrolling so
       the overlay survives the :hover loss that pointer capture causes (see
       assets/carousel.js). */
    media-slider.product-card__media:hover[data-at-origin='true']:not([data-hover-suppressed])
      .product-card__hover-image,
    media-slider.product-card__media[data-hover-hold][data-at-origin='true']:not([data-hover-suppressed])
      .product-card__hover-image {
      opacity: 1;
      transition: opacity 0.25s ease-in-out;
    }
  }

  .media-slider {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .media-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
    touch-action: pan-x pan-y;
  }

  .media-slider__track[data-animating='true'],
  .media-slider__track[data-dragging='true'] {
    will-change: transform;
  }

  .media-slider__track > * {
    flex: 0 0 100%;
    width: 100%;
    display: block;
    position: relative;
  }

  .media-slider__slide {
    &[data-skeleton] {
      background-color: var(--skeleton-base);
      transition: background-color var(--skeleton-reveal-duration) var(--skeleton-reveal-easing);
      isolation: isolate;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(100deg, transparent 20%, var(--skeleton-shine) 50%, transparent 80%);
        background-repeat: no-repeat;
        background-size: 200% 100%;
        background-position: 150% 0;
        animation: skeleton-shimmer var(--skeleton-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
        pointer-events: none;
        opacity: 1;
        transition: opacity var(--skeleton-reveal-duration) var(--skeleton-reveal-easing);
        will-change: background-position, opacity;
      }

      > img,
      > video {
        opacity: 0;
        filter: blur(4px);
        transform: scale(1.04);
        transition: opacity var(--skeleton-reveal-duration) var(--skeleton-reveal-easing) 50ms,
          filter var(--skeleton-reveal-duration) var(--skeleton-reveal-easing) 50ms,
          transform calc(var(--skeleton-reveal-duration) + 0.2s) var(--skeleton-reveal-easing) 50ms;
      }

      &[data-skeleton-scale='false'] > img,
      &[data-skeleton-scale='false'] > video {
        transform: scale(1);
      }

      &[data-loaded='true'] {
        background-color: transparent;

        &::after {
          animation: none;
          opacity: 0;
        }

        > img,
        > video {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
      }
    }

    img,
    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-user-drag: none;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .media-slider__slide[data-skeleton]::after {
      animation: none;
    }
  }

  .media-slider__arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 2;

    svg {
      width: var(--font-size-md);
      height: auto;
    }
  }

  .media-slider__arrow--prev {
    left: 0;
    transform: translate(-100%, -50%);
  }

  .media-slider__arrow--next {
    right: 0;
    transform: translate(100%, -50%);
  }

  @media (hover: none), (max-width: 767px) {
    media-slider:not([data-swipeable]) .media-slider__arrow {
      opacity: 1;
    }

    media-slider:not([data-swipeable]) .media-slider__arrow--prev,
    media-slider:not([data-swipeable]) .media-slider__arrow--next {
      transform: translate(0, -50%);
    }

    .carousel:not([data-disabled='true']) .product-card:not([data-active='true']) .media-slider__arrow {
      opacity: 0;
    }

    .carousel:not([data-disabled='true']) .product-card:not([data-active='true']) .media-slider__arrow--prev {
      transform: translate(-100%, -50%);
    }

    .carousel:not([data-disabled='true']) .product-card:not([data-active='true']) .media-slider__arrow--next {
      transform: translate(100%, -50%);
    }

    media-slider[data-hide-mobile-arrows] .media-slider__arrow {
      display: none !important;
    }
  }

  .media-slider__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: var(--layer-raised);

    @media (min-width: 768px) {
      translate: calc(-1 * calc(100% / var(--media-slider-total, 1)));
      transition: translate 0.2s ease-in-out;
    }
  }

  .media-slider__progress-bar {
    height: 100%;
    background: #000;
    width: calc(100% / var(--media-slider-total, 1));
    transform: translateX(calc(var(--media-slider-progress, 0) * 100%));
  }

  media-slider:has(.media-slider__track[data-animating='true']) .media-slider__progress-bar {
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .product-card__details {
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: var(--font-size-xs);
    color: inherit;
    text-decoration: none;
    margin-inline: var(--space-2);
    margin-top: var(--space-3);
  }

  .product-card__row {
    display: flex;
    justify-content: space-between;
  }

  .product-card__info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-1);
    margin-top: auto;
    font-size: var(--font-size-sm);
  }

  .product-card__prices {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
  }

  .product-card__title {
    font-weight: 300;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card__colour-name {
    margin-top: var(--space-1);
    margin-bottom: var(--space-6);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-size: var(--font-size-4xs);
  }

  .product-card__price {
    font-size: var(--font-size-2xs);

    &[data-type='discount'] {
      color: var(--color-sale);
    }

    &[data-type='sale'] {
      text-decoration: line-through;
      opacity: 0.6;
    }
  }

  .product-card__quick-add {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #000;
    border: 0;
    padding: 0;
    font-size: var(--font-size-2xs);
    font-family: var(--font-button-family);
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    z-index: var(--layer-heightened);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;

    @media (min-width: 768px) {
      opacity: 0;
      transition: opacity 0.2s ease-in-out, transform 0.2s;
      height: 40px;
      padding-inline: var(--space-4);
      transform: translateY(20px) scale(0.9);
      bottom: 10px;
      right: 10px;
      left: 10px;
      justify-content: space-between;
      width: auto;
    }

    svg {
      width: 11px;
      position: relative;
      left: 1px;

      @media (min-width: 768px) {
        width: 12px;
        left: 0;
      }
    }

    span {
      display: none;

      @media (min-width: 768px) {
        display: inline-block;
      }
    }
  }

  .product-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--space-2);
    gap: var(--space-5);
  }

  .product-card__wishlist {
    flex: 0 0 var(--space-4);
    height: auto;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .product-card__colours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .product-card__meta:has(.product-card__colours) + .product-card__details {
    margin-top: 0;
  }

  .product-card__colour {
    position: relative;
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: none;
    outline: none;
    transition: opacity 0.25s ease;
    text-decoration: none;

    &[data-active='true']::after {
      border-color: #fff;
      border-width: 1.5px;
      outline-color: #000;
      outline-width: 0.75px;
      width: 9px;
      height: 9px;
    }

    &[data-overflow='true'] {
      width: 0;
      height: 0;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border-width: 0;
      outline-width: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }

    &::after {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 0.75px solid #000;
      outline: 2px solid transparent;
      background-color: var(--bg-colour, transparent);
    }
  }

  .product-card__colours[data-expanded='true'] {
    .product-card__colour[data-overflow='true'] {
      width: 24px;
      height: 24px;
      border-width: 0;
      overflow: visible;
      opacity: 1;
      pointer-events: auto;
      position: relative;
    }

    .product-card__colour-overflow {
      display: none;
    }
  }

  .product-card__colour-overflow {
    width: 15px;
    height: 15px;
    border: 0;
    background: none;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    color: #000;
  }

  .product-card__swatch-notice {
    position: fixed;
    z-index: var(--layer-temporary);
    max-width: 200px;
    padding: var(--sp-8) var(--sp-12);
    border-radius: var(--radius-sm);
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-body-family);
    font-size: var(--font-size-xs);
    line-height: var(--leading-snug);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--motion-quick) ease, transform var(--motion-quick) ease;

    &[data-variant='error'] {
      background: var(--color-feedback-error);
    }

    &[data-visible='true'] {
      opacity: 1;
      transform: translateY(0);
    }

    &::after {
      content: '';
      position: absolute;
      left: var(--caret-x, 50%);
      width: 8px;
      height: 8px;
      background: inherit;
      transform: translateX(-50%) rotate(45deg);
    }

    &[data-placement='above']::after {
      bottom: -4px;
    }

    &[data-placement='below']::after {
      top: -4px;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
      transform: none;

      &[data-visible='true'] {
        transform: none;
      }
    }
  }

  media-slider[data-swipeable] {
    cursor: grab;
    touch-action: pan-y;

    &:active {
      cursor: grabbing;
    }

    @media (min-width: 768px) {
      &.quick-add-drawer__media {
        cursor: default;
      }
    }

    .media-slider__track {
      touch-action: pan-y;
    }
  }

  .product-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .product-card__stars-container {
    position: relative;
    display: inline-flex;
    line-height: 0;

    svg {
      display: block;
      width: 11px;
      height: 11px;
      flex-shrink: 0;
    }
  }

  .product-card__stars {
    display: flex;
  }

  .product-card__stars--empty {
    svg {
      fill: rgba(0, 0, 0, 0.2);
    }
  }

  .product-card__stars--filled {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: #000;
    width: var(--rating-percentage, 0%);
    pointer-events: none;
  }

  .product-card__rating-count {
    font-size: 12px;
    color: #000;
  }

  /*
   * data-cards-resolving is set transiently by client-hydration surfaces
   * (Searchspring rails, collection/search grids, minicart recommendations,
   * PDP bundle) on the direct parent of a set of card wrappers while the
   * cards settle in; server-rendered cards never receive this attribute.
   */
  @keyframes product-card-resolve {
    from {
      opacity: 0;
      translate: 0 8px;
    }
  }

  @keyframes product-card-resolve-fade {
    from {
      opacity: 0;
    }
  }

  [data-cards-resolving] .product-card__meta,
  [data-cards-resolving] .product-card__details,
  [data-cards-resolving] .product-card__quick-add {
    animation: product-card-resolve var(--motion-quick) var(--ease-out-quint) backwards;
    animation-delay: 160ms;
  }

  /* The quick-add button is absolutely positioned over the media box;
     it fades without the rise so it never drifts across the image.
     On desktop its computed opacity is 0 (hover reveal), which the
     keyframes' implicit `to` respects — the animation is a no-op there. */
  [data-cards-resolving] .product-card__quick-add {
    animation-name: product-card-resolve-fade;
  }

  [data-cards-resolving] > :nth-child(1) .product-card__meta,
  [data-cards-resolving] > :nth-child(1) .product-card__details,
  [data-cards-resolving] > :nth-child(1) .product-card__quick-add {
    animation-delay: 0ms;
  }

  [data-cards-resolving] > :nth-child(2) .product-card__meta,
  [data-cards-resolving] > :nth-child(2) .product-card__details,
  [data-cards-resolving] > :nth-child(2) .product-card__quick-add {
    animation-delay: 40ms;
  }

  [data-cards-resolving] > :nth-child(3) .product-card__meta,
  [data-cards-resolving] > :nth-child(3) .product-card__details,
  [data-cards-resolving] > :nth-child(3) .product-card__quick-add {
    animation-delay: 80ms;
  }

  [data-cards-resolving] > :nth-child(4) .product-card__meta,
  [data-cards-resolving] > :nth-child(4) .product-card__details,
  [data-cards-resolving] > :nth-child(4) .product-card__quick-add {
    animation-delay: 120ms;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cards-resolving] .product-card__meta,
    [data-cards-resolving] .product-card__details,
    [data-cards-resolving] .product-card__quick-add {
      animation: product-card-resolve-fade var(--motion-quick) var(--ease-out-quint) backwards;
      animation-delay: 0ms;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-notify-me-drawer (INDEX:98) */
.product-notify-me-container {
    padding-top: var(--space-2);

    .notify-me {
      position: relative;
      transform: none;
      opacity: 1;
      pointer-events: auto;
      background: transparent;
      display: block !important;

      .notify-me__body {
        padding-inline: 0;
      }
    }
  }

  .product-notify-me-container .notify-me__header {
    display: none; /* Let the drawer header handle title and close */
  }

  .product-notify-me-container .notify-me__body {
    padding: 0 var(--space-2) var(--space-4);
  }
/* END_SNIPPET:product-notify-me-drawer */

/* START_SNIPPET:product-size-guide (INDEX:99) */
.size-guide-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-block: var(--space-2);
  }

  .size-guide-toggle-switch {
    --toggle-circle-size: 16px;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--color-background-accent), #000 5%);
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--color-background-accent);
    padding-inline: var(--space-1);
    line-height: 1;
    height: calc(var(--toggle-circle-size) + 4px);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #000;

    &[data-active='in'] {
      background-color: #77645a;
      color: #fff;

      .size-guide-toggle-switch-track {
        margin-left: 2px;
        margin-right: calc(var(--toggle-circle-size) + 2px);
      }

      .size-guide-toggle-switch-label--cm {
        opacity: 0;
      }

      .size-guide-toggle-switch-label--in {
        opacity: 1;
      }

      .size-guide-toggle-switch-circle {
        left: calc(100% - (var(--toggle-circle-size) + 2px));
      }
    }
  }

  .size-guide-toggle-switch-track {
    display: grid;
    grid-template-areas: 'content';
    align-items: center;
    margin-left: calc(var(--toggle-circle-size) + 2px);
    margin-right: 2px;
    transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .size-guide-toggle-switch-label {
    grid-area: content;
    font-size: var(--font-size-4xs);
    white-space: nowrap;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-body-family);
  }

  .size-guide-toggle-switch-label--in {
    opacity: 0;
  }

  .size-guide-toggle-switch-label--cm {
    opacity: 1;
  }

  .size-guide-toggle-switch-circle {
    position: absolute;
    top: 1px;
    left: 2px;
    width: var(--toggle-circle-size);
    height: var(--toggle-circle-size);
    background-color: #fff;
    border-radius: 50%;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--layer-raised);
  }

  .size-guide-section-title {
    font-family: var(--font-body-family);
    font-size: var(--font-size-xs);
    font-weight: 300;
    margin-bottom: var(--space-2);
  }

  [data-unit-view='cm'] [data-unit='in'],
  [data-unit-view='in'] [data-unit='cm'] {
    display: none;
  }

  .size-guide-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-6);
    text-align: left;
    font-size: var(--font-size-xs);

    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: var(--space-1);
    }

    tr {
      background-color: var(--color-background-accent);
    }

    th {
      font-family: var(--font-button-family);
      text-transform: uppercase;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    td {
      font-family: var(--font-body-family);
    }

    th,
    td {
      padding: var(--space-3) var(--space-3);
    }
  }

  .size-guide-footer {
    margin-block: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  .size-guide-instructions {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    margin-bottom: var(--space-4);

    p:not(:last-child) {
      margin-bottom: var(--space-2);
    }

    a {
      color: #000;
    }
  }

  .size-guide-note {
    font-size: var(--font-size-3xs);
    color: rgba(0, 0, 0, 0.6);
  }
/* END_SNIPPET:product-size-guide */

/* START_SNIPPET:product-urgency-banners (INDEX:100) */
.product-urgency-banners {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    z-index: var(--layer-raised);
    pointer-events: none;
  }

  .product-urgency-banner {
    display: inline-block;
    background-color: var(--bg-color, #000);
    color: var(--text-color, #fff);
    font-family: var(--font-button-family);
    font-size: var(--font-size-4xs);
    text-transform: uppercase;
    padding: 2px var(--space-1);
  }
/* END_SNIPPET:product-urgency-banners */

/* START_SNIPPET:quick-add-drawer (INDEX:101) */
.quick-add-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--layer-menu-drawer);
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: transparent;
    color: inherit;
    overflow: hidden;
    pointer-events: none;
    display: none;

    &[open] {
      display: block;
    }

    &[data-state='open'],
    &[data-state='closing'] {
      pointer-events: auto;
    }

    &[data-state='open'] .quick-add-drawer__sheet {
      transform: translateY(0);
    }

    &[data-state='closing'] {
      .quick-add-drawer__sheet {
        transform: translateY(100%);
      }
    }

    &::backdrop {
      display: none;
    }

    .product-card__rating {
      justify-content: flex-end;
    }
  }

  .quick-add-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-2);
    min-height: 10px;

    @media (min-width: 768px) {
      min-height: unset;
      width: fit-content;
      margin-left: auto;
      padding-right: var(--space-3);
      z-index: var(--layer-raised);
    }
  }

  .quick-add-drawer__sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 95dvh;
    background: var(--color-background-alt);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
  }

  .quick-add-drawer__sheet[data-mode='notify'] {
    .quick-add-drawer__body,
    .quick-add-drawer__footer {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease 0s;
    }
  }

  .quick-add-drawer__sheet:not([data-mode='notify']) {
    .quick-add-drawer__body,
    .quick-add-drawer__footer {
      transition: opacity 0.25s ease 0s;
    }
  }

  .quick-add-drawer[data-notify='true'] .media-slider__arrow {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  @media (min-width: 768px) {
    .quick-add-drawer__sheet {
      width: 900px;
      max-width: 90vw;
      height: 100dvh;
      max-height: none;
      right: 0;
      left: auto;
      top: 0;
      bottom: 0;
      border-radius: 0;
      transform: translateX(100%);
    }

    .quick-add-drawer {
      &[data-state='open'] {
        .quick-add-drawer__sheet {
          transform: translateX(0);
        }
      }

      &[data-state='closing'] {
        .quick-add-drawer__sheet {
          transform: translateX(100%);
        }
      }
    }
  }

  .quick-add-drawer__handle {
    display: none;
    justify-content: center;
    padding-top: var(--space-2);
    padding-bottom: var(--space-1);
    cursor: grab;
    touch-action: none;

    &:active {
      cursor: grabbing;
    }

    @media (min-width: 768px) {
      display: none;
    }
  }

  .quick-add-drawer__handle-bar {
    width: 50px;
    height: 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  .quick-add-drawer__banners {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 44px;
    align-items: center;

    &:empty {
      display: none;
      min-height: 0;
    }
  }

  .quick-add-drawer__banner {
    font-size: var(--font-size-3xs);
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 6px;
  }

  .quick-add-drawer__close {
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: inherit;
    margin-left: auto;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .quick-add-drawer__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    flex: 1;
    min-height: 0;

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(0, 1fr);
      margin-top: -44px;
    }
  }

  .quick-add-drawer__content-right {
    display: contents;

    @media (min-width: 768px) {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      min-height: 0;
      padding-inline: var(--space-4);
      position: sticky;
      top: 44px;
      margin-top: 44px;
    }
  }

  /* .quick-add-drawer__media-wrap {
    @media (min-width: 768px) {
    }
  } */

  .quick-add-drawer__media {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: pan-y;

    @media (min-width: 768px) {
      display: none;
    }

    &:active {
      cursor: grabbing;
    }

    .media-slider__track {
      touch-action: pan-y;
      width: 45.45%; /* 2.2 images */
    }

    /* Fallback to full width if only 1 image */
    .media-slider__track:not(:has(> :nth-child(2))) {
      width: 100%;
    }

    .media-slider__slide {
      flex: 0 0 100%;
      width: 100%;
      display: block;
      aspect-ratio: 3 / 4;
      border-right: 2px solid var(--color-background);

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .media-slider__arrow {
        opacity: 1;
        z-index: var(--layer-raised);
        background: none;
        border-radius: 50%;
      }

      .media-slider__arrow--prev {
        left: var(--space-2);
        transform: translate(0, -50%);
      }

      .media-slider__arrow--next {
        right: var(--space-2);
        transform: translate(0, -50%);
      }
    }
  }

  .quick-add-drawer__desktop-media {
    display: none;

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2px;
      width: 100%;
      height: fit-content;
      max-width: 500px;
    }
  }

  .quick-add-drawer__desktop-media-item {
    aspect-ratio: 3 / 4;
    background: var(--color-background);

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

  .quick-add-drawer__info {
    padding: var(--space-4) var(--space-3) var(--space-3) var(--space-3);

    @media (min-width: 768px) {
      padding-inline: 0;
    }
  }

  .quick-add-drawer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
  }

  .quick-add-drawer__wishlist {
    width: 15px;
    height: auto;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;

    &[data-wishlisted='true'] svg {
      fill: #c8102e;
    }

    &[data-busy='true'] {
      opacity: 0.55;
      pointer-events: none;
    }
  }

  @keyframes quick-add-drawer-wishlist-hint {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.25);
    }
  }

  .quick-add-drawer__title {
    font-size: var(--font-size-sm);
    font-weight: 300;
    margin: 0;
    line-height: 1;
  }

  .quick-add-drawer__colour {
    display: block;
    font-size: var(--font-size-2xs);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    margin-top: var(--space-4);
  }

  .quick-add-drawer__prices {
    display: flex;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
  }

  .quick-add-drawer__price {
    &[data-type='sale'] {
      text-decoration: line-through;
    }

    &[data-type='discount'] {
      color: var(--color-sale);
    }
  }

  .quick-add-drawer__swatches {
    .product-card__colour-overflow {
      width: 24px;
      display: flex;
    }
  }

  .quick-add-drawer__footer {
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    position: sticky;
    bottom: 0;
    background: var(--color-background-alt);
    z-index: 2;

    @media (min-width: 768px) {
      padding: 0 0 var(--space-3) 0;
      position: static;
    }

    .quick-add-dynamic-checkout {
      display: flex;
      flex: 1;
      position: relative;

      &[hidden] {
        display: none;
      }

      .shop-pay-button {
        width: 100%;
        min-height: 52px;
      }
    }

    .quick-add-dynamic-checkout[data-disabled='true'] {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
    }

    .quick-add-dynamic-checkout__spinner {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      pointer-events: none;
      z-index: 1;
    }

    .quick-add-dynamic-checkout[data-loading='true'] {
      pointer-events: none;
      cursor: progress;

      & .quick-add-dynamic-checkout__spinner {
        display: flex;
      }
    }
  }

  .quick-add-drawer__buttons {
    display: flex;
    gap: var(--space-2);
  }

  .quick-add-drawer__links {
    display: flex;
    justify-content: space-between;
  }

  .quick-add-drawer__add-btn {
    width: 100%;
    min-height: 52px;
    background: #000;
    color: #fff;
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    padding: var(--space-4) var(--space-2);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.2s ease,
      transform 0.15s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex: 1;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 35%) 50%, transparent 58%);
      transform: translateX(-101%);
      pointer-events: none;
    }

    &:hover:not(:disabled) {
      background: var(--color-background);
      color: var(--color-foreground);
    }

    @media (prefers-reduced-motion: no-preference) {
      &:active:not(:disabled) {
        transform: scale(0.97);
      }
    }

    &:disabled:not([data-state]) {
      background: none;
      color: #000;
      cursor: not-allowed;
      border-color: #000;
    }

    &[data-state='loading'] {
      background: #000;
      color: #fff;
      cursor: progress;
      opacity: 1;
    }

    &[data-state='added'],
    &[data-state='added']:hover {
      background: color-mix(in srgb, var(--color-success), #000 40%);
      color: #fff;
      cursor: default;
      opacity: 1;
      transition: background-color 0.2s var(--ease-out-quint), border-color 0.2s var(--ease-out-quint),
        color 0.2s var(--ease-out-quint), transform 0.15s ease-out;
    }

    &[data-state='added']::after {
      animation: quick-add-sheen 0.65s var(--ease-out-quint) 0.05s forwards;
    }

    &[data-state='error'] {
      background: var(--color-feedback-error);
      border-color: var(--color-feedback-error);
      color: #fff;
      cursor: default;
      font-size: var(--font-size-4xs);
    }
  }

  .quick-add-drawer__add-btn-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .quick-add-drawer__add-btn-label {
    display: inline-block;
  }

  .quick-add-drawer__add-btn-label[hidden] {
    display: none;
  }

  .quick-add-drawer__add-btn[data-state='added'] .quick-add-drawer__add-btn-result {
    animation: quick-add-rise 0.45s var(--ease-overshoot) 0.2s both;
  }

  @keyframes quick-add-rise {
    from {
      transform: translateY(120%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes quick-add-sheen {
    to {
      transform: translateX(101%);
    }
  }

  .quick-add-drawer__add-btn-check {
    display: none;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: 16px;
    height: 16px;

    & svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    & svg path {
      stroke-dasharray: 28;
      stroke-dashoffset: 28;
    }
  }

  .quick-add-drawer__add-btn[data-state='added'] .quick-add-drawer__add-btn-check {
    display: inline-flex;

    & svg path {
      animation: quick-add-check-draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
    }
  }

  @keyframes quick-add-check-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .quick-add-drawer__add-btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .quick-add-drawer__add-btn-spinner[hidden] {
    display: none;
  }

  .quick-add-drawer__view-link {
    display: block;
    text-align: center;
    font-size: var(--font-size-4xs);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: capitalize;
    margin-top: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add-drawer__sheet,
    .notify-me,
    .notify-me__success {
      transition-duration: 0.01ms;
    }
    .notify-me__success-icon svg path {
      stroke-dashoffset: 0;
      animation: none;
    }
    .quick-add-drawer__add-btn[data-state='added'] .quick-add-drawer__add-btn-result {
      animation: none;
    }
    .quick-add-drawer__add-btn[data-state='added'] .quick-add-drawer__add-btn-check svg path {
      stroke-dashoffset: 0;
      animation: none;
    }
    .quick-add-drawer__add-btn[data-state='added']::after {
      animation: none;
    }
  }

  .quick-add-drawer__sizes {
    display: flex;
    gap: 2px;
    margin-top: var(--space-3);
  }

  .quick-add-drawer__sizes[data-single='true'] {
    display: none;
  }

  .quick-add-drawer__size {
    width: 44px;
    height: 44px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    color: #000;

    &:hover {
      border-color: rgba(0, 0, 0, 0.6);
    }

    &[data-selected='true'] {
      border-color: var(--color-foreground);
    }

    &[data-available='false'] {
      opacity: 0.25;
    }

    &[data-available='false'][data-selected='true'] {
      opacity: 0.6;
    }

    &:only-child {
      flex: 1;
      width: auto;
    }
  }

  .quick-add-drawer__sizes[data-attention='true'] {
    animation: quick-add-drawer-nudge 0.4s ease;
  }

  @keyframes quick-add-drawer-nudge {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-4px);
    }
    75% {
      transform: translateX(4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add-drawer__sizes[data-attention='true'] {
      animation: none;
    }
  }

  .notify-me {
    position: absolute;
    inset: 0;
    background: var(--color-background-alt);
    display: flex;
    flex-direction: column;
    transform: translateX(24px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    will-change: transform, opacity;
    z-index: 2;
    pointer-events: none;

    &[data-state='open'] {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    &[data-state='closing'] {
      transform: translateX(0);
      opacity: 0;
      pointer-events: none;
      transition: none;
    }
  }

  .notify-me__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
    min-height: 44px;
  }

  .notify-me__back {
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.6;
    }

    & svg {
      width: 18px;
      height: 18px;
    }
  }

  .notify-me__title {
    font-size: var(--font-size-sm);
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .notify-me__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .notify-me__product {
    font-size: var(--font-size-sm);
    margin: 0;
    letter-spacing: 0.02em;
  }

  .notify-me__description {
    font-size: var(--font-size-xs);
    margin: 0;
    line-height: 1.5;
    color: var(--color-foreground-muted, currentColor);
    opacity: 0.75;
  }

  .notify-me__states {
    display: grid;

    & > * {
      grid-area: 1 / 1;
    }
  }

  .notify-me__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: opacity 0.3s ease;

    &[data-state='hidden'] {
      opacity: 0;
      pointer-events: none;
    }
  }

  .notify-me__field {
    display: block;
  }

  .notify-me__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-foreground);
    background: transparent;
    font: inherit;
    color: inherit;
    transition: border-color 0.2s ease;

    &:focus {
      outline: none;
      border-color: var(--color-foreground);
      box-shadow: inset 0 0 0 1px var(--color-foreground);
    }
  }

  .notify-me__consent {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: var(--font-size-2xs);
    line-height: 1.5;
    cursor: pointer;

    & input {
      margin-top: 2px;
      flex-shrink: 0;
    }
  }

  .notify-me__error {
    margin: 0;
    font-size: var(--font-size-2xs);
    color: var(--color-error, #b00020);
  }

  .notify-me__submit {
    width: 100%;
    background: #000;
    color: #fff;
    border: 1px solid var(--color-foreground);
    font-size: var(--font-size-sm);
    padding: var(--space-4) var(--space-2);
    font-family: var(--font-button-family);
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    &:disabled {
      opacity: 0.6;
      cursor: progress;
    }
  }

  .notify-me__submit-spinner[hidden],
  .notify-me__submit-label[hidden] {
    display: none;
  }

  .notify-me__success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-4) var(--space-2);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.05s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;

    &:not([hidden]) {
      display: flex;
    }

    &[data-state='visible'] {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .notify-me__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: var(--color-foreground);

    & svg {
      width: 18px;
      height: 18px;
    }

    & svg path {
      stroke-dasharray: 28;
      stroke-dashoffset: 28;
    }
  }

  .notify-me__success[data-state='visible'] .notify-me__success-icon svg path {
    animation: notify-check-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
  }

  @keyframes notify-check-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .notify-me__success-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    max-width: 30ch;
  }
/* END_SNIPPET:quick-add-drawer */

/* START_SNIPPET:refundid (INDEX:102) */
html[data-refundid-credit] .minicart__discount-form,
  html[data-refundid-credit] .minicart__discount-panel {
    display: none;
  }

  .refundid-popup-content {
    border-radius: 0 !important;
    max-width: 600px !important;
  }

  .refundid-start-shopping-btn {
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 100 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .refundid-popup-credit-amount {
    font-size: 34px !important;
    font-weight: 100 !important;
    font-family: var(--font-title-family) !important;
    width: 100% !important;
  }

  .refundid-popup-total-credit {
    font-size: 13px !important;
    opacity: 1 !important;
    font-weight: 100 !important;
    width: 100% !important;
  }

  .refundid-popup-main-text {
    font-size: 13px !important;
    width: 100% !important;
  }

  .refundid-popup-sub-text {
    font-size: 13px !important;
    opacity: 1 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .refundid-popup-text-content {
    text-align: center !important;
  }
/* END_SNIPPET:refundid */

/* START_SNIPPET:search-results (INDEX:103) */
/* Grids */
  .search__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2px;
    row-gap: var(--space-6);
    margin-bottom: var(--space-12);
    transition: opacity 0.2s ease;
    width: 100%;
  }

  .search__grid[hidden] {
    display: none !important;
  }

  @media (min-width: 768px) {
    .search__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .search__grid--skeleton {
    width: 100%;
  }

  .search__skeleton-wrapper {
    display: flex;
    flex-direction: column;
  }

  .search__skeleton-card {
    /* keep in sync with .product-card__media in snippets/product-card.liquid */
    aspect-ratio: 200 / 290;
    background-color: var(--color-background-alt);
  }

  .search__skeleton-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--sp-8);
    gap: var(--sp-20);
  }

  .search__skeleton-swatches {
    width: 60%;
    height: 24px;
  }

  .search__skeleton-wishlist {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  .search__skeleton-info {
    display: flex;
    flex-direction: column;
    margin-inline: var(--sp-8);
  }

  .search__skeleton-title {
    width: 70%;
    height: 16px;
    margin: 0;
  }

  .search__skeleton-colour {
    width: 40%;
    height: 12px;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-24);
  }

  .search__skeleton-price {
    width: 30%;
    height: 14.5px;
    margin: 0;
  }

  /* Pagination */
  .search-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    width: 100%;
  }

  .search-pagination[hidden] {
    display: none !important;
  }

  .search-pagination__progress {
    font-size: var(--font-size-3xs);
    opacity: 0.6;
  }

  .search-pagination__load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 150px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    text-decoration: none;
    padding-inline: var(--space-8);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }

  .search-pagination__load-more[hidden] {
    display: none;
  }

  .search-pagination__load-more:hover {
    background-color: #fff;
    color: #000;
  }

  .search-pagination__load-more[data-loading='true'] {
    opacity: 0.6;
    pointer-events: none;
  }

  .search-pagination__spinner[hidden] {
    display: none;
  }

  .search-pagination__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .search-pagination__nav[hidden] {
    display: none;
  }

  .search-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    text-decoration: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    padding: var(--space-1);
  }

  .search-pagination__page:hover {
    border-color: #000;
    color: #000;
  }

  .search-pagination__page:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .search-pagination__page[data-state='old'] {
    border-color: rgba(0, 0, 0, 0.2);
    color: #000;
  }

  .search-pagination__page[data-state='new'] {
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.4);
  }

  .search-pagination__page[data-state='current'],
  .search-pagination__page[aria-current='page'] {
    border-color: #000;
    color: #000;
    pointer-events: none;
  }

  .search-pagination__arrow {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    border-color: #000;
    color: #000;
    display: none;
  }

  .search-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    pointer-events: none;
  }

  .search-no-results {
    display: flex;
    justify-content: center;
    padding: var(--space-12) 0;
    text-align: center;
    font-family: var(--font-body-family);
    font-size: var(--font-size-md);
    color: rgba(0, 0, 0, 0.6);
    width: 100%;
  }

  .search-no-results[hidden] {
    display: none !important;
  }

  .search-fallback-message {
    text-align: center;
    font-family: var(--font-body-family);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-8);
  }

  @media (prefers-reduced-motion: reduce) {
    .search-pagination__load-more,
    .search-pagination__page {
      transition: none;
    }
  }
/* END_SNIPPET:search-results */

/* START_SNIPPET:search-toolbar (INDEX:104) */
.search-page__toolbar {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    padding-inline: var(--sp-8);
    padding-bottom: var(--sp-8);
    background-color: var(--color-background);
    position: sticky;
    top: var(--header-height);
    transform: translateY(var(--header-offset, 0px));
    z-index: calc(var(--layer-sticky) - 1);
    will-change: transform;
    backface-visibility: hidden;
    transition: transform var(--motion-drawer) var(--ease-out-quint);
  }

  .search-page__toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;

    &[hidden] {
      display: none;
    }
  }

  .search-page__toolbar-controls--start {
    grid-column: 1;
    justify-self: start;
  }

  .search-page__toolbar-controls--end {
    grid-column: 3;
    justify-self: end;
  }

  .collection-toggle-switch {
    --toggle-circle-size: 14px;
    position: relative;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--color-background-accent);
    padding-inline: var(--space-1);
    line-height: 1;
    height: calc(var(--toggle-circle-size) + 4px);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #000;

    &[data-active='product'] {
      background-color: #77645a;
      color: #fff;

      .collection-toggle-switch__track {
        margin-left: 2px;
        margin-right: calc(var(--toggle-circle-size) + 2px);
      }

      .collection-toggle-switch__label[data-label='on-body'] {
        opacity: 0;
      }

      .collection-toggle-switch__label[data-label='product'] {
        opacity: 1;
      }

      .collection-toggle-switch__circle {
        left: calc(100% - (var(--toggle-circle-size) + 2px));
      }
    }
  }

  .collection-toggle-switch__track {
    display: grid;
    grid-template-areas: 'content';
    align-items: center;
    margin-left: calc(var(--toggle-circle-size) + 2px);
    margin-right: 2px;
    transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .collection-toggle-switch__label {
    grid-area: content;
    font-size: var(--font-size-4xs);
    white-space: nowrap;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-body-family);
  }

  .collection-toggle-switch__label[data-label='product'] {
    opacity: 0;
  }

  .collection-toggle-switch__label[data-label='on-body'] {
    opacity: 1;
  }

  .collection-toggle-switch__circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--toggle-circle-size);
    height: var(--toggle-circle-size);
    background-color: #fff;
    border-radius: 50%;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.12);
    z-index: var(--layer-raised);
  }

  .search-page__results-count {
    grid-column: 2;
    min-width: 0;
    font-family: var(--font-button-family);
    font-size: var(--font-size-4xs);
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin-bottom: 0;
  }

  .search-page__results-count-skeleton {
    display: inline-block;
    height: 12px;
    width: 140px;
    background: linear-gradient(
      90deg,
      var(--color-background-alt) 25%,
      var(--color-background-accent) 50%,
      var(--color-background-alt) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-page__results-count-skeleton {
      animation: none;
      background: var(--color-background-alt);
    }
  }
/* END_SNIPPET:search-toolbar */

/* START_SNIPPET:shipping-drawer (INDEX:107) */
.shipping-drawer-instance {
    .bottom-drawer__title {
      font-family: var(--font-body-family);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--font-size-sm);
      text-transform: none;
    }
  }

  .shipping-drawer__icon {
    svg {
      width: 20px;
      height: 20px;
    }
  }

  .shipping-drawer__location-block {
    margin-bottom: var(--space-2);
    margin-top: var(--space-2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: var(--space-3);
  }

  /* Location display ⇄ edit swap, driven by the block's data-mode. */
  .shipping-drawer__location-edit {
    display: none;
  }

  .shipping-drawer__location-block[data-mode="edit"] .shipping-drawer__location-display {
    display: none;
  }

  .shipping-drawer__location-block[data-mode="edit"] .shipping-drawer__location-edit {
    display: flex;
  }

  .shipping-drawer__location-display {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .shipping-drawer__location-info {
    display: flex;
    flex-direction: column;
  }

  .shipping-drawer__location-label {
    font-family: var(--font-body-family);
    font-size: var(--font-size-4xs);
    text-transform: uppercase;
    opacity: 0.4;
  }

  .shipping-drawer__location-value {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
  }

  .shipping-drawer__change-btn {
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--font-size-4xs);
    padding: 0;
    font-family: var(--font-body-family);
    color: #000;
  }

  .shipping-drawer__location-edit {
    gap: var(--space-2);

    input {
      border: 0;
      background-color: var(--color-background-accent);
      font-size: var(--font-size-md);
      padding: var(--space-1) var(--space-2);
      flex: 1;

      &::placeholder {
        font-size: var(--font-size-2xs);
      }
    }

    button {
      background-color: #000;
      color: #fff;
      border: 1px solid transparent;
      font-family: var(--font-button-family);
      font-size: var(--font-size-2xs);
      text-transform: uppercase;
      padding-inline: var(--space-6);

      &:hover,
      &:focus-visible {
        cursor: pointer;
        background-color: transparent;
        color: #000;
        border-color: #000;
      }
    }
  }

  /* Confirm-button spinner — visible only while a check is in flight. */
  .shipping-drawer__spinner {
    display: none;
  }

  .shipping-drawer-instance[data-checking="true"] .shipping-drawer__spinner {
    display: inline-flex;
  }

  .shipping-drawer-instance[data-checking="true"] [data-js="shipping-drawer-confirm-text"] {
    display: none;
  }

  .shipping-drawer__error {
    color: var(--color-feedback-error);
    font-size: var(--font-size-4xs);
    margin-top: var(--space-1);

    &:empty {
      display: none;
    }
  }

  .shipping-drawer__threshold-block {
    margin-bottom: var(--space-4);
  }

  .shipping-drawer__progress-container {
    margin-top: var(--space-3);
    position: relative;
  }

  .shipping-drawer__progress-track {
    position: relative;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
  }

  .shipping-drawer__progress-fill {
    height: 100%;
    background-color: #000;
    border-radius: inherit;
    transition: width 0.4s ease, background-color 0.3s ease;

    &[data-complete="true"] {
      background-color: var(--color-success);
    }
  }

  .shipping-drawer__progress-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #fff;
    z-index: var(--layer-raised);
  }

  .shipping-drawer__progress-legend {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-4xs);
    color: rgba(0, 0, 0, 0.4);
    margin-top: var(--space-2);
    position: relative;
  }

  .shipping-drawer__legend-standard {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
  }

  .shipping-drawer__legend-express {
    text-align: right;
  }

  /* Marker + legend visibility driven by the tier layout (both | single | none). */
  .shipping-drawer__progress-marker--standard,
  .shipping-drawer__legend-standard,
  .shipping-drawer__legend-express {
    display: none;
  }

  .shipping-drawer__progress-container[data-tiers="single"] .shipping-drawer__legend-express {
    display: inline;
  }

  .shipping-drawer__progress-container[data-tiers="both"] .shipping-drawer__progress-marker--standard {
    display: block;
  }

  .shipping-drawer__progress-container[data-tiers="both"] .shipping-drawer__legend-standard,
  .shipping-drawer__progress-container[data-tiers="both"] .shipping-drawer__legend-express {
    display: inline;
  }

  .shipping-drawer__tiers-list {
    display: flex;
    flex-direction: column;
  }

  .shipping-drawer__tier {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(10px);
    animation: shipping-drawer-fade-up 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--item-index, 0) * 0.05s);

    &:last-child {
      border-bottom: none;
    }
  }

  @keyframes shipping-drawer-fade-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shipping-drawer__tier {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .shipping-drawer__tier-info {
    flex: 1;
  }

  .shipping-drawer__tier-name {
    font-size: var(--font-size-2xs);
    font-weight: 300;
    text-transform: uppercase;
  }

  .shipping-drawer__tier-dates,
  .shipping-drawer__tier-description {
    font-size: var(--font-size-3xs);
    color: rgba(0, 0, 0, 0.4);
  }

  .shipping-drawer__tier-price {
    text-align: right;
    white-space: nowrap;
    font-size: var(--font-size-2xs);
  }

  .shipping-drawer__tier-price-original {
    text-decoration: line-through;
    color: rgba(0, 0, 0, 0.4);
  }

  .shipping-drawer__tier-price-current {
    font-weight: 600;

    &[data-free="true"] {
      color: var(--color-success);
      text-transform: uppercase;
    }
  }

  /* Skeleton loading rows (shimmer) — shown in place of live rates while fetching. */
  .shipping-drawer__tier--skeleton {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .shipping-drawer__skeleton {
    display: block;
    border-radius: 3px;
    background: linear-gradient(
      90deg,
      var(--color-background-alt) 25%,
      var(--color-background-accent) 50%,
      var(--color-background-alt) 75%
    );
    background-size: 200% 100%;
    animation: shipping-drawer-shimmer 1.2s ease-in-out infinite;
  }

  .shipping-drawer__skeleton--icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .shipping-drawer__skeleton--name {
    width: 40%;
    height: 0.75em;
    margin-bottom: var(--space-1);
  }

  .shipping-drawer__skeleton--dates {
    width: 60%;
    height: 0.7em;
  }

  .shipping-drawer__skeleton--price {
    width: 3rem;
    height: 0.75em;
  }

  @keyframes shipping-drawer-shimmer {
    to {
      background-position: -200% 0;
    }
  }

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

  .shipping-drawer__no-rates {
    padding: var(--space-4) 0;
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
  }

  /* Motion layer — gated behind no-preference and ≤300ms. */
  @media (prefers-reduced-motion: no-preference) {
    .shipping-drawer__progress-fill[data-pulse="true"] {
      animation: shipping-drawer-pulse 0.45s ease-out;
    }

    .shipping-drawer__message[data-updating="true"] {
      animation: shipping-drawer-fade 0.3s ease;
    }
  }

  @keyframes shipping-drawer-pulse {
    0% {
      filter: brightness(1);
    }

    40% {
      filter: brightness(1.6);
    }

    100% {
      filter: brightness(1);
    }
  }

  @keyframes shipping-drawer-fade {
    from {
      opacity: 0.35;
    }

    to {
      opacity: 1;
    }
  }
/* END_SNIPPET:shipping-drawer */

/* START_SNIPPET:shipping-estimate (INDEX:108) */
.shipping-estimate__input-group {
    display: flex;
    gap: var(--space-1);

    input {
      border: 0;
      background-color: var(--color-background-alt);
      font-size: var(--font-size-md);
      padding: 6px var(--space-2);
      flex: 1;

      &::placeholder {
        font-size: var(--font-size-2xs);
      }
    }

    button {
      background-color: #000;
      color: #fff;
      border: 1px solid transparent;
      font-family: var(--font-button-family);
      font-size: var(--font-size-2xs);
      text-transform: uppercase;
      padding-inline: var(--space-6);

      &:hover,
      &:focus-visible {
        cursor: pointer;
        background-color: transparent;
        color: #000;
        border-color: #000;
      }
    }
  }

  /* State swap: input-state ⇄ persistent-bar, driven by the container's data-state. */
  .shipping-estimate[data-state="resolved"] .shipping-estimate__input-state {
    display: none;
  }

  .shipping-estimate[data-state="input"] .shipping-estimate__persistent-bar {
    display: none;
  }

  /* Check button spinner — visible only while a check is in flight. */
  .shipping-estimate__spinner {
    display: none;
  }

  .shipping-estimate[data-checking="true"] .shipping-estimate__spinner {
    display: inline-flex;
  }

  .shipping-estimate[data-checking="true"] [data-js="shipping-check-text"] {
    display: none;
  }

  .shipping-estimate__hint {
    font-size: var(--font-size-4xs);
    color: rgba(0, 0, 0, 0.4);
  }

  .shipping-estimate__error {
    font-size: var(--font-size-4xs);
    color: var(--color-feedback-error);
    margin-top: var(--space-1);

    /* Auto-hide when JS clears the message — no state class needed. */
    &:empty {
      display: none;
    }
  }

  .shipping-estimate__persistent-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: none;
    border: none;
    padding: var(--space-3);
    cursor: pointer;
    background-color: var(--color-background-alt);
  }

  .shipping-estimate__persistent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: var(--font-size-3xs);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    color: #000;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .shipping-estimate__persistent-message {
    margin-top: var(--space-1);
    font-size: var(--font-size-3xs);
    font-family: var(--font-body-family);
    color: #000;

    &:empty {
      display: none;
    }
  }

  .shipping-estimate__progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-top: var(--space-2);
    overflow: hidden;
  }

  .shipping-estimate__progress-fill {
    height: 100%;
    background-color: #000;
    border-radius: inherit;
    transition: width 0.4s ease, background-color 0.3s ease;

    &[data-complete="true"] {
      background-color: var(--color-success);
    }
  }

  .shipping-estimate__progress-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #fff;
    z-index: var(--layer-raised);
  }

  /* Marker is hidden unless a two-tier (standard + express) layout is active. */
  .shipping-estimate__progress-marker--standard {
    display: none;
  }

  .shipping-estimate__progress-track[data-tiers="both"] .shipping-estimate__progress-marker--standard {
    display: block;
  }

  .shipping-estimate__extra-message {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-4xs);
  }

  @media (prefers-reduced-motion: reduce) {
    .shipping-estimate__progress-fill {
      transition: none;
    }
  }

  /* Motion layer — all effects gated behind no-preference and ≤300ms. */
  @media (prefers-reduced-motion: no-preference) {
    .shipping-estimate[data-state="resolved"] .shipping-estimate__persistent-bar {
      animation: shipping-estimate-reveal 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .shipping-estimate__progress-fill[data-pulse="true"] {
      animation: shipping-estimate-pulse 0.45s ease-out;
    }

    .shipping-estimate__persistent-message[data-updating="true"] {
      animation: shipping-estimate-fade 0.3s ease;
    }
  }

  @keyframes shipping-estimate-reveal {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes shipping-estimate-pulse {
    0% {
      filter: brightness(1);
    }

    40% {
      filter: brightness(1.6);
    }

    100% {
      filter: brightness(1);
    }
  }

  @keyframes shipping-estimate-fade {
    from {
      opacity: 0.35;
    }

    to {
      opacity: 1;
    }
  }
/* END_SNIPPET:shipping-estimate */

/* START_SNIPPET:shipping-progress-bar (INDEX:109) */
.shipping-bar {
    --shipping-bar-text-colour: var(--setting-text-colour);
    --shipping-bar-bold-colour: var(--setting-bold-colour);
    --shipping-bar-fill-colour: var(--setting-fill-colour);
    --shipping-bar-bg-colour: var(--setting-bg-colour);

    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    color: var(--shipping-bar-text-colour);
    padding-block: var(--sp-12) var(--sp-16);
    margin-inline: var(--sp-12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: var(--layer-raised);

    &[data-achieved='true'] {
      --shipping-bar-text-colour: var(--color-success);
      --shipping-bar-bold-colour: var(--color-success);
      --shipping-bar-fill-colour: var(--color-success);

      .shipping-bar__message--in-progress {
        display: none;
      }
    }

    &[data-achieved='false'] {
      .shipping-bar__message--success {
        display: none;
      }
    }

    &[hidden] {
      display: none;
    }
  }

  .shipping-bar__message {
    font-size: var(--font-size-xs);
    text-align: center;
    font-family: var(--font-button-family);
    text-transform: uppercase;
    transition: opacity var(--motion-quick) var(--ease-out-quint);

    strong,
    b {
      color: var(--shipping-bar-bold-colour);
      font-weight: 600;
    }
  }

  /* Syncing: a cart write is in flight. The single animated loading indicator
     lives in the minicart itself — a bar directly below the header (see
     .minicart__loading-bar in the minicart section). Here we only handle the
     reduced-motion fallback: that loader is hidden for those users, so the
     shipping message dims instead. The minicart JS toggles [data-syncing];
     syncShippingBar clears it when the fresh total lands. */
  @media (prefers-reduced-motion: reduce) {
    .shipping-bar[data-syncing] .shipping-bar__message {
      opacity: 0.6;
    }
  }

  .shipping-bar__track {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 2px;
    background-color: var(--shipping-bar-bg-colour);
    overflow: hidden;
  }

  .shipping-bar__fill {
    height: 100%;
    background-color: var(--shipping-bar-fill-colour);
    border-radius: inherit;
  }

  /* Transition gated behind [data-live] (stamped by syncShippingBar() on its
     first sync) so the very first JS-driven update never sweeps from the
     server-rendered width — every sync after that animates smoothly from
     its previous value instead (§4). */
  @media (prefers-reduced-motion: no-preference) {
    .shipping-bar[data-live] .shipping-bar__fill {
      transition: width 450ms var(--ease-out-quint), background-color var(--motion-quick) var(--ease-out-quint);
    }
  }

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

  /* ── Free-shipping celebration (§5.9g / E3) ──
     The minicart JS stamps [data-celebrating] on a genuine below→above
     threshold crossing only. A restrained sweep + message pop — no confetti. */
  @media (prefers-reduced-motion: no-preference) {
    .shipping-bar[data-celebrating] .shipping-bar__fill {
      animation: shipping-bar-celebrate-fill 0.6s ease-out;
    }

    .shipping-bar[data-celebrating] .shipping-bar__message--success {
      animation: shipping-bar-celebrate-message 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
    }
  }

  @keyframes shipping-bar-celebrate-fill {
    /* `filter` is a rule-1 exception here — the target is a 5px bar, so the
       repaint is trivially cheap (see §5.9 rule 1). */
    0% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.6);
    }
    100% {
      filter: brightness(1);
    }
  }

  @keyframes shipping-bar-celebrate-message {
    from {
      opacity: 0;
      transform: translateY(4px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
/* END_SNIPPET:shipping-progress-bar */

/* START_SNIPPET:shop-pay-button (INDEX:113) */
.shop-pay-button {
    --shop-pay-bg: #5931f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap-target);
    background-color: var(--shop-pay-bg);
    color: #fff;
    font-family: var(--font-button-family);
    font-size: var(--font-size-md);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--shop-pay-bg);
    transition: opacity 0.15s ease;

    svg {
      width: 115px;
    }

    &:not([data-disabled='true']):hover {
      opacity: 0.9;
    }

    &:focus-visible {
      outline: 2px solid var(--color-foreground);
      outline-offset: 2px;
    }

    &[data-disabled='true'] {
      opacity: 0.4;
      cursor: not-allowed;
    }

    &[hidden] {
      display: none;
    }
  }
/* END_SNIPPET:shop-pay-button */

/* START_SNIPPET:skip-to-content-link (INDEX:116) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    left: 0;
    top: 0;
    background: none;
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:sort-filter-bar (INDEX:117) */
.collection-toggle-btn {
    background: none;
    border: 0.75px solid rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 2px var(--space-1);
    font-size: var(--font-size-3xs);
    line-height: 1;
    width: max-content;
    cursor: pointer;
    position: relative;
    font-family: var(--font-body-family);
    color: #000;
  }

  .collection-toggle-btn__count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: var(--color-background);
    padding: 2px;
    border-radius: 100%;
    font-size: var(--font-size-4xs);
  }

  .collection-toggle-btn--mobile {
    @media (min-width: 768px) {
      display: none;
    }
  }

  .collection-filter-btn {
    display: none;
    align-items: center;
    background: none;
    border: 0.75px solid rgba(0, 0, 0, 0.6);
    background-clip: padding-box;
    border-radius: 10px;
    padding: 2px var(--space-1);
    font-size: var(--font-size-3xs);
    line-height: 1;
    width: max-content;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--font-body-family);
    color: #000;

    @media (min-width: 768px) {
      display: inline-flex;
    }

    &[data-has-active='true'] {
      border-color: #000;
    }
  }

  .collection-filter-btn__label {
    line-height: 1;
    font-family: inherit;
  }

  .collection-filter-btn__count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: var(--color-background);
    min-width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: var(--font-size-4xs);
    line-height: 1;

    &[hidden] {
      display: none;
    }
  }

  .collection-sort-desktop {
    display: none;

    @media (min-width: 768px) {
      display: block;
      position: relative;
      /* TODO - Dirty fix, need to revisit */
      top: 1px;
    }
  }

  .collection-sort-desktop__label {
    font-size: var(--font-size-4xs);
    font-family: var(--font-body-family);
    white-space: nowrap;
    display: flex;
    align-items: center;
    border: 0.5px solid rgba(0, 0, 0, 0.6);
    background-clip: padding-box;
    border-radius: 15px;
    padding: 1px 6px;
    height: 16px;
    color: #000;

    &::after {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231e1e1e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      top: 1px;
    }

    .collection-sort-desktop__label-value {
      margin-right: var(--space-1);
    }
  }

  .collection-sort-desktop__select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    appearance: none;
  }

  .filter-side-drawer {
    display: none;

    @media (min-width: 768px) {
      display: flex;
    }
  }

  .filter-side-drawer__count {
    font-size: var(--font-size-4xs);
    font-family: var(--font-body-family);
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: var(--space-2);
    display: block;

    &[hidden] {
      display: none;
    }
  }

  .filter-side-drawer__active {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);

    &[hidden] {
      display: none;
    }
  }

  .filter-side-drawer__active-label {
    font-size: var(--font-size-2xs);
    font-family: var(--font-body-family);
  }

  .filter-side-drawer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
  }

  .filter-side-drawer__active-list {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-2) 0;
  }

  .filter-side-drawer__clear {
    background: none;
    border: 0;
    padding: 0 var(--space-2);
    font-size: var(--font-size-4xs);
    font-family: var(--font-body-family);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    color: inherit;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .filter-side-drawer__view-results {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    font-family: var(--font-button-family);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background-color: #fff;
      color: #000;
    }

    &[data-loading='true'] {
      opacity: 0.7;
      pointer-events: none;
    }
  }

  .filter-side-drawer .filter-group__header,
  #filter-drawer .filter-group__header {
    padding: var(--space-5) 0;
    gap: var(--space-3);
    font-family: var(--font-body-family);
    font-size: var(--font-size-2xs);
  }

  .filter-side-drawer .filter-group__content,
  #filter-drawer .filter-group__content {
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
  }

  .filter-side-drawer .filter-swatch,
  #filter-drawer .filter-swatch {
    --swatch-size: 30px;
  }

  .filter-side-drawer,
  .bottom-drawer#filter-drawer {
    .filter-swatch__circle {
      position: relative;
      width: var(--swatch-size);
      height: var(--swatch-size);
      padding: 0;
      cursor: pointer;
      background-color: transparent;
      background-clip: padding-box;
      border: 0.75px solid rgba(0, 0, 0, 0.6);
      border-radius: 50%;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        background: var(--swatch-bg);
        border-radius: 50%;
      }
    }

    .filter-swatch[data-active='true'] .filter-swatch__circle::after {
      inset: 2px;
      border: 0.75px solid rgba(0, 0, 0, 0.6);
    }
  }

  .sort-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: opacity 0.15s ease;

    &:last-child {
      border-bottom: 0;
    }

    &:hover {
      opacity: 0.7;
    }
  }

  .sort-option__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .sort-option__label {
    flex: 1;
  }

  .sort-option__check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    position: relative;
    transition: border-color 0.15s ease;
  }

  .sort-option[data-active='true'] .sort-option__check {
    border-color: var(--color-foreground);

    &::after {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: var(--color-foreground);
    }
  }

  .filter-group {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);

    &:last-child {
      border-bottom: 0;
    }
  }

  .filter-group__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-button-family);
    text-align: left;
    font-size: var(--font-size-xs);
  }

  .filter-group__title {
    flex: 1;
    text-transform: uppercase;
    font-size: var(--font-size-3xs);
    display: flex;
    gap: var(--space-1);
    align-items: center;
    line-height: 1;
    color: #000;

    .filter-group__count {
      opacity: 0.5;
      font-size: var(--font-size-4xs);
    }
  }

  .filter-group__badge {
    font-size: 8px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    border-radius: 50%;
    line-height: 1;

    &[hidden] {
      display: none;
    }
  }

  .filter-group__chevron {
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.4;
    color: #000;
  }

  .filter-group[data-collapsed='true'] .filter-group__chevron {
    transform: rotate(-45deg);
  }

  .filter-group__content {
    padding-bottom: var(--space-4);

    &[hidden] {
      display: none;
    }
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  .filter-group__content--palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .filter-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 0;
    cursor: pointer;
    font-size: var(--font-size-3xs);
    transition: opacity 0.15s ease;

    &:hover {
      opacity: 0.7;
    }
  }

  .filter-value__input--swatch {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    padding: 0;
    margin: 0;
  }

  .filter-value__input {
    width: 14px;
    height: 14px;
    accent-color: var(--color-foreground);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
  }

  .filter-value__label {
    flex: 1;
  }

  .filter-value__count {
    font-size: var(--font-size-4xs);
    opacity: 0.4;
  }

  .filter-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    min-width: 30px;
  }

  .filter-swatch__count {
    font-size: var(--font-size-4xs);
    font-family: var(--font-body-family);
    opacity: 0.4;
    color: #000;
  }

  .filter-swatch__name {
    font-size: var(--font-size-4xs);
    font-family: var(--font-body-family);
    color: #000;
  }

  /* ── Active filter pills ─────────────────────────── */

  .collection-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0 var(--space-2) var(--space-3);

    &[hidden] {
      display: none;
    }
  }

  .filter-pill {
    display: inline-flex;
    align-items: center;
    background: none;
    background-color: var(--color-background-accent);
    border: 0;
    border-radius: 20px;
    padding-inline: var(--space-2) 0;
    height: 18px;
    font-size: var(--font-size-3xs);
    font-family: var(--font-body-family);
    cursor: pointer;
    color: #000;
  }

  .filter-pill__remove {
    width: 22px;
    height: 22px;
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 11px;
      height: 1px;
      background: rgba(0, 0, 0, 0.6);
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
/* END_SNIPPET:sort-filter-bar */

/* START_SNIPPET:swym-wishlist-drawer (INDEX:118) */
.swym-drawer__view {
    display: none;
  }

  .swym-drawer__body[data-active-view='nudge'] [data-view='nudge'],
  .swym-drawer__body[data-active-view='empty'] [data-view='empty'],
  .swym-drawer__body[data-active-view='multi'] [data-view='multi'],
  .swym-drawer__body[data-active-view='single'] [data-view='single'],
  .swym-drawer__body[data-active-view='add'] [data-view='add'] {
    display: block;
  }

  .swym-drawer__handle {
    display: flex;
    justify-content: center;
    padding-top: var(--space-2);
    padding-bottom: var(--space-1);
    cursor: grab;
    touch-action: none;

    &:active {
      cursor: grabbing;
    }

    @media (min-width: 768px) {
      display: none;
    }
  }

  .swym-drawer__handle-bar {
    width: 50px;
    height: 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  .swym-drawer__inner {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .swym-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-background-accent);
  }

  .swym-drawer__header h2 {
    font-family: var(--font-title-family);
    font-size: var(--font-size-xl);
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
  }

  .swym-drawer__close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }

  .swym-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    position: relative;

    &.bottom-drawer__body {
      padding-block: var(--space-4);
    }
  }

  .swym-drawer.is-loading .swym-drawer__body {
    pointer-events: none;
    opacity: 0.55;
    filter: blur(1px);
    transition: opacity 0.2s ease, filter 0.2s ease;
    min-height: 200px;
  }

  .swym-drawer__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: var(--layer-window-overlay);
  }

  .swym-drawer.is-loading .swym-drawer__loading {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }

  .swym-drawer {
    z-index: 100;

    .swym-add-view__lists {
      button {
        color: #000;
      }
    }
  }

  @media (max-width: 767px) {
    .swym-drawer .bottom-drawer__sheet {
      max-height: 90dvh;
    }
  }

  .page-overlay[data-wishlist-open='true'] {
    z-index: 20;
  }
  /* Views */
  .swym-drawer-empty,
  .swym-drawer-nudge {
    text-align: center;
    padding: var(--space-6) 0;
  }

  .swym-drawer-empty h3,
  .swym-drawer-nudge h3 {
    font-family: var(--font-title-family);
    font-size: var(--font-size-2xl);
    font-weight: 300;
    margin-bottom: var(--space-3);
  }

  .swym-drawer-nudge .button {
    margin-top: var(--space-4);
  }

  .swym-drawer-nudge__btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    background: #000;
    color: #fff;
    text-transform: uppercase;
  }

  .swym-list-card {
    display: block;
    background: var(--color-background-alt);
    border-radius: 8px;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
  }

  .swym-list-card:hover {
    background: var(--color-background-accent);
  }

  .swym-list-card__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-button-family);
  }

  .swym-item-card__variant {
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-2);
  }

  .swym-list-card__previews {
    display: flex;
    gap: var(--space-2);
    overflow: hidden;
  }

  .swym-list-card__preview-image {
    width: 40px;
    height: 50px;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .swym-list-card__preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swym-list-card__remaining {
    width: 40px;
    height: 50px;
    border-radius: 4px;
    background: var(--color-background-accent, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--color-foreground);
    flex-shrink: 0;
  }

  .swym-list-card__empty-msg {
    font-size: var(--font-size-xs);
    opacity: 0.6;
  }

  .swym-item-card {
    display: flex;
    gap: var(--space-3);
    position: relative;

    &:has(~ .swym-item-card) {
      border-bottom: 1px solid var(--color-background-accent);
      padding-bottom: var(--space-6);
      margin-bottom: var(--space-6);
    }
  }

  .swym-item-card__image {
    width: 80px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 3/4;
  }

  .swym-item-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swym-item-card__details {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .swym-item-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-1);
  }

  .swym-item-card__price {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
  }

  .swym-item-card__price span[data-type='discount'] {
    color: var(--color-sale);
  }

  .swym-item-card__price span[data-type='sale'] {
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: var(--space-1);
    font-size: var(--font-size-2xs);
  }

  .swym-item-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
  }

  .swym-item-card__add {
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    padding: var(--space-2) var(--space-3);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    cursor: pointer;
    flex: 1;
    text-align: center;
    transition: opacity 0.2s ease;
  }

  .swym-item-card__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .swym-item-card__remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    min-width: 20px;

    svg {
      width: 20px;
      height: auto;
      position: relative;
      top: -1px;
    }
  }

  .swym-drawer__back {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    margin-bottom: var(--space-4);
    cursor: pointer;
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-size: var(--font-size-2xs);
    color: #000;
  }

  .swym-drawer__back svg {
    width: 16px;
    height: 16px;
  }

  .swym-drawer__delete-action {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-background-accent);
  }

  .swym-drawer__delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-button-family);
    text-transform: uppercase;
    font-size: var(--font-size-2xs);
    color: var(--color-sale);

    svg {
      width: 15px;
      fill: currentColor;
    }
  }

  .swym-drawer__error-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background-color: rgba(138, 42, 42, 0.08);
    border-bottom: 1px solid var(--color-feedback-error-border);
    border-top: 1px solid var(--color-feedback-error-border);
    color: var(--color-feedback-error);
    gap: var(--space-2);
    font-size: var(--font-size-2xs);
  }

  .swym-drawer__error-message {
    flex: 1;
  }

  .swym-drawer__error-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
  }

  .swym-drawer__error-close:hover {
    opacity: 1;
  }

  .swym-drawer__error-close svg {
    width: 12px;
    height: 12px;
  }

  /* Add View Styles */
  .swym-add-view {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .swym-add-view__product {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-background-accent);
  }

  .swym-add-view__image {
    width: 80px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 3/4;
  }

  .swym-add-view__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swym-add-view__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .swym-add-view__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
  }

  .swym-add-view__price {
    font-size: var(--font-size-sm);
  }

  .swym-add-view__price span[data-type='discount'] {
    color: var(--color-sale);
  }

  .swym-add-view__price span[data-type='sale'] {
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: var(--space-1);
    font-size: var(--font-size-2xs);
  }

  .swym-add-view__section {
    margin-bottom: var(--space-5);
  }

  .swym-add-view__section-title {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-family: var(--font-body-family);
    margin: 0 0 var(--space-2) 0;
  }

  .swym-add-view__sizes {
    display: flex;
    margin-inline: calc(-1 * var(--space-3));
  }

  .swym-add-view__size {
    width: 44px;
    height: 44px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-button-family);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    color: #000;

    &[data-selected='true'] {
      border-color: var(--color-foreground);
    }

    &[data-available='false'] {
      opacity: 0.2;
    }
  }

  .swym-add-view__lists {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .swym-add-view__list-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--color-background-accent);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .swym-add-view__list-option:hover {
    border-color: var(--color-foreground);
  }

  .swym-add-view__list-option[data-selected='true'] {
    border-color: var(--color-foreground);
    background: var(--color-background-accent);
  }

  .swym-add-view__list-check {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .swym-add-view__list-check svg {
    width: 14px;
    height: 14px;
  }

  .swym-add-view__list-option[data-selected='true'] .swym-add-view__list-check {
    opacity: 1;
  }

  .swym-add-view__create {
    display: flex;
  }

  .swym-add-view__create-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: underline;
    line-height: 1;
  }

  .swym-add-view__create-form {
    display: flex;
    width: 100%;
    gap: var(--space-2);
    margin-top: var(--space-2);
    animation: fadeSlideDown 0.3s ease;
  }

  @keyframes fadeSlideDown {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .swym-add-view__create-input {
    flex: 1;
    height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid #000;

    &::placeholder {
      position: relative;
      /* TODO - investigate why this is needed to keep placeholder central */
      top: -1px;
      font-size: var(--font-size-2xs);
    }
  }

  .swym-add-view__create-submit {
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    text-transform: uppercase;
    font-family: var(--font-button-family);
    font-size: var(--font-size-xs);
    cursor: pointer;
  }

  .swym-add-view__create-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .swym-add-view__create-submit[data-state='loading'] {
    cursor: progress;
  }

  .swym-add-view__cta {
    margin-top: auto;
    width: 100%;
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    padding: var(--space-4) var(--space-2);
    text-transform: uppercase;
    font-family: var(--font-button-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);

    &[data-state='loading'] {
      opacity: 0.8;
      cursor: progress;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &[data-state='success'] {
      background-color: var(--color-success, #2e7d32);
      opacity: 1;

      svg {
        width: 16px;
        height: 16px;
      }
    }
  }
/* END_SNIPPET:swym-wishlist-drawer */

/* START_SNIPPET:yotpo-vip-desktop (INDEX:120) */
.yotpo-vip-desktop {
    max-width: 1600px;
    margin: auto;
    padding-bottom: 80px;
  }

  .yotpo-vip-desktop h2 {
    font-size: 16px;
    font-weight: normal;
    font-family: var(--font-button-family);
    color: #1d1d1d;
    margin: 0 0 80px 0;
    text-transform: uppercase;
    text-align: center;
  }

  .yotpo-vip-desktop .tabs {
    display: flex;
    justify-content: space-evenly;
    gap: 0;
    margin-bottom: 30px;
    padding-bottom: 10px;
  }

  .yotpo-vip-desktop .tab {
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s;
    color: #b7b5b4;
    font-size: 40px;
    font-family: var(--font-title-family);
    font-weight: 400;
    font-style: normal;
    width: 25%;
    border-bottom: 2px solid #b7b5b4;
    text-align: center;
  }

  .yotpo-vip-desktop .tab[data-active='true'] {
    color: #1d1d1d;
    border-color: #000;
  }

  .yotpo-vip-desktop .tiles {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
  }

  .yotpo-vip-desktop .tile {
    width: 25%;
    height: auto;
    min-height: 595px;
    border-radius: 10px;
    overflow: hidden;
    background: #f9f7f5;
    transition: all 0.3s ease;
    position: relative;
  }

  .yotpo-vip-desktop .tile[data-active='true'] {
    overflow: unset;
    border: 1px solid #000;
  }

  .yotpo-vip-desktop .tile::before,
  .yotpo-vip-desktop .tile::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 10px;
    height: 8px;
    background: #fff;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
  }

  .yotpo-vip-desktop .tile[data-active='true']::before,
  .yotpo-vip-desktop .tile[data-active='true']::after {
    border: 1px solid #000;
    border-bottom: none;
  }

  .yotpo-vip-desktop .tile::before {
    top: 23%;
    left: -2px;
    transform: rotate(90deg);
  }

  .yotpo-vip-desktop .tile::after {
    top: 23%;
    right: -2px;
    transform: rotate(270deg);
  }

  .yotpo-vip-desktop .tile img:not(.tier-header) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yotpo-vip-desktop [data-js] .tile img:not(.tier-header) {
    cursor: pointer;
  }

  .yotpo-vip-desktop .tile-content {
    display: none;
    padding: 0 10px;
    text-align: left;
  }

  .yotpo-vip-desktop .tile[data-active='true'] .tile-content {
    display: block;
  }

  .yotpo-vip-desktop .tile[data-active='true'] img:not(.tier-header) {
    display: none;
  }

  .yotpo-vip-desktop .tile-content img.tier-header {
    display: block;
    object-fit: contain;
    width: 100%;
    height: 15vw;
    margin-bottom: 20px;
  }

  .yotpo-vip-desktop .tile-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .yotpo-vip-desktop .tile-content li {
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center;
  }
/* END_SNIPPET:yotpo-vip-desktop */

/* START_SNIPPET:yotpo-vip-mobile (INDEX:121) */
.yotpo-vip-mobile {
    padding-bottom: 60px;
  }

  .yotpo-vip-mobile h2 {
    font-size: 18px;
    font-weight: normal;
    font-family: var(--font-button-family);
    color: #1d1d1d;
    margin: 0 0 60px 0;
    text-transform: uppercase;
    text-align: center;
  }

  #tiers .tab {
    width: 100%;
    max-width: 320px;
    margin: 8px auto;
    padding: 10px 14px;
    border-radius: 15px;
    border: 1px solid #111;
    background: #f9f7f5;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    display: block;
  }

  #tiers .tab[data-active='true'] {
    display: none;
  }

  #tiers .tile {
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 500px;
    margin: 10px auto;
    border-radius: 10px;
    border: 1px solid #fff;
    background: #f9f7f5;
    padding: 10px;
    text-align: left;
    position: relative;
    overflow: hidden;
    display: none;
  }

  #tiers .tile[data-active='true'] {
    display: block;
  }

  #tiers .tile:nth-child(2) {
    background: url(https://cdn.shopify.com/s/files/1/0498/7800/7976/files/Tier_1.png?v=1760090553) no-repeat center /
      cover;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
  }

  #tiers .tile:nth-child(4) {
    background: url(https://cdn.shopify.com/s/files/1/0498/7800/7976/files/Tier_2.png?v=1760090553) no-repeat center /
      cover;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
  }

  #tiers .tile:nth-child(6) {
    background: url(https://cdn.shopify.com/s/files/1/0498/7800/7976/files/Tier_3.png?v=1760090553) no-repeat center /
      cover;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
  }

  #tiers .tile:nth-child(8) {
    background: url(https://cdn.shopify.com/s/files/1/0498/7800/7976/files/Tier_4.png?v=1760090553) no-repeat center /
      cover;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
  }

  #tiers .tile::before,
  #tiers .tile::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 10px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
  }

  #tiers .tile::before {
    top: 27%;
    left: -8px;
    transform: translateY(-50%);
  }

  #tiers .tile::after {
    top: 27%;
    right: -8px;
    transform: translateY(-50%);
  }

  #tiers .tile img.tier-header {
    display: block;
    object-fit: contain;
    width: 100%;
    height: 180px;
    margin-bottom: 20px;
  }

  #tiers .tile ul {
    margin: 0;
    padding-left: 18px;
    list-style: none;
    color: #333;
  }

  #tiers .tile li {
    color: #fff;
    text-align: center;
    padding-bottom: 5px;
    font-size: var(--font-size-sm);
    line-height: 1.5715;
  }

  #tiers .tab:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
  }
/* END_SNIPPET:yotpo-vip-mobile */