/** Shopify CDN: Minification failed

Line 1866:2 Unexpected "{"
Line 1866:3 Expected identifier but found "%"
Line 1866:87 Unexpected "<"
Line 1866:93 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-tabs (INDEX:17) */
.collection-tabs-wrapper {
    background: var(--bg-color);
    color: var(--fg-color);
  }

  .collection-tabs-inner {
    padding: var(--mobile-padding-top) var(--mobile-padding-right) var(--mobile-padding-bottom)
      var(--mobile-padding-left);
  }

  /* Inline header: heading left, tabs right (Modern Nomad Home) */
  .collection-tabs-header--inline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: var(--header-margin-bottom);
  }

  .collection-tabs-header--inline .collection-tabs-header__tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 0;
  }

  .collection-tabs-header--inline .collection-tabs-header__tabs scroll-shadow {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Swiper.js */
  .collection-tabs-swiper .swiper-wrapper {
    margin-bottom: 1.5rem;
  }

  .collection-tabs-swiper .swiper-slide {
    height: auto;
  }

  .collection-tabs-swiper .swiper-pagination-progressbar {
    position: relative;
    inset: unset;
    background: var(--progressbar-bg-color);
  }

  .collection-tabs-swiper .swiper-pagination-progressbar-fill {
    background: var(--progressbar-fill-color);
  }

  @media (width >= 64rem) {
    .collection-tabs-inner {
      padding: var(--desktop-padding-top) var(--desktop-padding-right) var(--desktop-padding-bottom)
        var(--desktop-padding-left);
    }

    .collection-tabs-header {
      margin-bottom: 2rem;
    }

    .collection-tabs-header--inline {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: var(--header-margin-bottom);
    }

    .collection-tabs-header--inline .collection-tabs-header__tabs {
      justify-content: flex-end;
    }

    .collection-tabs-header--inline .collection-tabs-header__tabs scroll-shadow {
      overflow: visible;
      mask-image: none;
      -webkit-mask-image: none;
    }

    /* Swiper.js */
    .collection-tabs-swiper .swiper-pagination-progressbar {
      display: none;
    }
  }
/* END_SECTION:collection-tabs */

/* CSS from block stylesheet tags */
/* START_BLOCK:newsletter-form (INDEX:78) */
#newsletter-form {
    display: inline-flex;
    width: 100%;
    max-width: 36rem;
  }

  #newsletter-form form {
    width: 100%;
  }

  .newsletter-form__wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .newsletter-form__wrapper input {
    font-family: var(--font-body--family);
    flex: 1 1 0%;
    width: 100%;
    color: var(--color-muted-foreground);
    background-color: var(--color-input);
    border: var(--input-border-thickness, 1px) solid var(--color-border);
    border-radius: var(--input-border-radius);
    /* max-width: 20rem; */
    min-width: 0;
    /* height: 52px; */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    height: 100%;
    padding: 16px 40px;
    outline: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .newsletter-form__wrapper input::placeholder {
    color: var(--color-muted-foreground);
  }

  .newsletter-form__wrapper input:focus {
    border: 3px solid var(--color-ring);
    box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
  }

  .newsletter-form__success {
    color: green;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    margin-top: 1rem;
  }
/* END_BLOCK:newsletter-form */

/* START_BLOCK:product-hotspots (INDEX:80) */
.hotspot-container {
    position: relative;
    width: 100%;
    /* overflow: hidden; */
  }
/* END_BLOCK:product-hotspots */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:add-to-cart (INDEX:90) */
add-to-cart button {
    position: relative;
    width: 100%;
    background: var(--color-add-to-cart-background);
    color: var(--color-add-to-cart-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 140%;
    font-weight: var(--button-font-weight);
    border-radius: var(--button-border-radius);
    padding: 0.625rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer; /* ✅ CRITICAL FIX FOR HOVER HAND ICON */
  }

  /* Explicit disabled state cursor (overrides :hover) */
  add-to-cart button:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* Optional: visual disabled cue */
  }

  add-to-cart button:hover:not(:disabled) {
    background: var(--color-add-to-cart-hover-background);
    color: var(--color-add-to-cart-hover-foreground);
  }

  /* Rest of your existing styles... */
  add-to-cart .atc-button__loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  add-to-cart button.loading .atc-button__text {
    visibility: hidden;
  }

  add-to-cart button.loading .atc-button__loader {
    display: block;
  }
/* END_SNIPPET:add-to-cart */

/* START_SNIPPET:article-card (INDEX:91) */
.article-card {
    height: 100%;
  }

  .article-card__image-link,
  .article-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .article-card__image-link {
    display: block;
    line-height: 0;
  }

  .article-card__meta {
    color: var(--color-muted-foreground);
    font-size: 0.875rem;
    line-height: 140%;
  }

  .article-card__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    line-height: 140%;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  @media (width >= 64rem) {
    .article-card__title {
      -webkit-line-clamp: 2;
    }
  }

  .article-card--editorial {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
  }

  .article-card--editorial .article-card__content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
  }

  .article-card--editorial .article-card__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .article-card--editorial .article-card__divider {
    width: 100%;
    height: 1px;
    background: var(--color-border);
  }

  .article-card--minimal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .article-card--minimal .article-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .article-card--minimal .article-card__title {
    font-size: 1.25rem;
    font-weight: 400;
  }

  .article-card--minimal .article-card__read-more {
    align-self: flex-start;
    color: inherit;
    font-size: 0.875rem;
    line-height: 140%;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
  }

  /* ---------- Modern Nomad Home listing card ---------- */
  .article-card--mnh {
    /* Fallbacks - the parent section overrides these. */
    /* --mnh-card-gap: 1rem;
    --mnh-media-width: 208px;
    --mnh-media-height: 208px;
    --mnh-media-height-mobile: 208px;
    --mnh-media-bg: #f1e9e3;
    --mnh-date-color: #4a4540;
    --mnh-title-color: #1a1612;
    --mnh-excerpt-color: #4a4540;
    --mnh-date-size: 1rem;
    --mnh-title-size: 1.25rem;
    --mnh-excerpt-size: 0.875rem; */

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--mnh-card-gap);
    height: 100%;
  }

  .article-card--mnh .article-card__media {
    display: block;
    width: 100%;
    height: var(--mnh-media-height-mobile);
    background: var(--mnh-media-bg);
    overflow: hidden;
    line-height: 0;
  }

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

  .article-card--mnh .article-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .article-card--mnh .article-card__date {
    font-size: var(--mnh-date-size);
    line-height: 140%;
    color: var(--mnh-date-color);
    margin-bottom: 0.5rem;
  }

  .article-card--mnh .article-card__title {
    font-size: var(--mnh-title-size);
    line-height: 140%;
    font-weight: 400;
    color: var(--mnh-title-color);
    -webkit-line-clamp: 2;
    font-family: var(--font-body--family);
  }

  .article-card--mnh .article-card__title-link:hover,
  .article-card--mnh .article-card__title-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  .article-card--mnh .article-card__excerpt {
    margin: 1rem 0 0;
    font-size: var(--mnh-excerpt-size);
    line-height: 143%;
    color: var(--mnh-excerpt-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .article-card--mnh .article-card__author {
    margin: 0.5rem 0 0;
    font-size: var(--mnh-date-size);
    line-height: 140%;
    color: var(--mnh-date-color);
  }

  @media (width >= 64rem) {
    .article-card--mnh .article-card__media {
      height: var(--mnh-media-height);
    }

    .article-card--mnh-side {
      grid-template-columns: var(--mnh-media-width) minmax(0, 1fr);
      align-items: start;
    }

    .article-card--mnh-side .article-card__media {
      width: var(--mnh-media-width);
    }

    .article-card--mnh .article-card__title {
      -webkit-line-clamp: 3;
    }
  }
/* END_SNIPPET:article-card */

/* START_SNIPPET:cart-drawer (INDEX:100) */
custom-cart {
    display: inline-flex;
  }

  /* --- Shell ------------------------------------------------------------- */
  .cart-drawer-sheet-content {
    gap: 0;
    overflow: unset; /* keep: the desktop recommendations rail is positioned outside */
    background: var(--cart-drawer-background, #fdfbf8);
    color: var(--cart-drawer-text-color, #4a4540);
    font-family: var(--font-body--family);
  }

  .cart-drawer-form {
    background: var(--cart-drawer-background, #fdfbf8);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* header stays put, .cart-drawer-content scrolls */
  }

  /* --- Header ------------------------------------------------------------ */
  .cart-drawer-sheet-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border-bottom: 0;
    padding: var(--cart-drawer-header-padding-block, 1.5rem) var(--cart-drawer-gutter, 1rem);
  }

  .cart-drawer-sheet-title {
    font-family: var(--font-heading--family);
    font-size: var(--cart-drawer-title-size, 1.5rem);
    line-height: 140%;
    font-weight: 400;
    color: var(--cart-drawer-heading-color, #1a1612);
    margin: 0;
  }

  .cart-drawer-sheet-close {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body--family);
    font-size: var(--cart-drawer-small-size, 0.875rem);
    line-height: 140%;
    font-weight: 400;
    color: var(--cart-drawer-text-color, #4a4540);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.25rem 0;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cart-drawer-sheet-close:hover {
    opacity: 0.7;
  }

  .cart-drawer-sheet-close svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    padding: 2px;
  }

  /* --- Scrollable body --------------------------------------------------- */
  .cart-drawer-content {
    display: flex;
    flex-direction: column;
    gap: var(--cart-drawer-items-gap, 1.5rem);
    padding-inline: var(--cart-drawer-gutter, 1rem);
    padding-block: 2.5rem 1.5rem;
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    margin-top: 0;
  }

  .cart-drawer-content::-webkit-scrollbar {
    display: none;
  }

  .cart-drawer-content:has(.cart-empty) {
    padding-block: 2.5rem;
  }

  /* --- Footer ------------------------------------------------------------ */
  .cart-drawer-sheet-footer {
    background: var(--cart-drawer-background, #fdfbf8);
    display: block;
    padding: 0;
    margin-top: auto;
  }

  @media (width >= 40rem) {
    .cart-drawer-content {
      padding-block: 2.5rem 1.5rem;
    }
  }

  /* Shimmer used by cart.js while an AJAX update is in flight. */
  .price-loading {
    position: relative;
    overflow: hidden;
    min-height: 1.25rem;
  }

  .price-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 25%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      transparent 100%
    );
    animation: smoothShimmer 1.5s ease-in-out infinite;
  }

  @keyframes smoothShimmer {
    0% {
      left: -100%;
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      left: 100%;
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-empty (INDEX:101) */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    text-align: center;
    font-family: var(--font-body--family);
    color: var(--cart-drawer-text-color, #4a4540);
  }

  .cart-empty h2 {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    line-height: 140%;
    font-weight: 400;
    color: var(--cart-drawer-heading-color, #1a1612);
    margin: 0;
  }

  .cart-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
  }

  .cart-empty-inner p,
  .cart-empty-inner span {
    font-size: var(--cart-drawer-small-size, 0.875rem);
    line-height: 140%;
    text-align: center;
    color: var(--cart-drawer-muted-color, #6b6560);
    margin: 0;
  }
  .cart-empty-inner a.btn--primary span{
    color: #ffffff;
  }
  .cart-empty-inner a.btn--primary{
      color: #ffffff;
          text-decoration: none;
  }

  .cart-empty-inner a {
    color: var(--cart-drawer-heading-color, #1a1612);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
/* END_SNIPPET:cart-empty */

/* START_SNIPPET:cart-footer (INDEX:102) */
.cart-drawer-sheet-footer .cart-footer {
    display: flex;
    flex-direction: column;
    padding-block: 1rem;
    padding-inline: var(--cart-drawer-gutter, 1rem);
    border-top: 1px solid var(--cart-drawer-border-color, #e1d6ca);
    font-family: var(--font-body--family);
    color: var(--cart-drawer-text-color, #4a4540);
  }

  .cart-drawer-sheet-footer .cart-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }

  .cart-drawer-sheet-footer .cart-summary-title {
    margin-bottom: 0;
    min-width: 0;
  }

  .cart-drawer-sheet-footer .cart-summary-title-estimated-total {
    font-size: var(--cart-drawer-body-size, 1rem);
    line-height: 140%;
    font-weight: 400;
    color: var(--cart-drawer-heading-color, #1a1612);
    margin-bottom: 0.5rem;
  }

  .cart-drawer-sheet-footer .cart-summary-title-calculation {
    font-size: var(--cart-drawer-small-size, 0.875rem);
    line-height: 140%;
    font-weight: 400;
    color: var(--cart-drawer-muted-color, #6b6560);
    margin: 0;
  }
 @media screen and (max-width: 749px) {
  .cart-drawer-sheet-footer .cart-summary-title-calculation + p {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .cart-drawer-sheet-content .cart-product-recommendations-swiper {
      padding-bottom: 1rem;
  }
  .cart-drawer-sheet-content .cart-drawer-sheet-footer .cart-product-recommendations{
        padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
  .cart-drawer-sheet-content .cart-drawer-sheet-footer .cart-product-recommendations-header {
      margin-bottom: 1rem;
  }
  form.cart-product-recommendations-item {
    gap: 0.5rem;
  }
   .cart-drawer-sheet-content .cart-drawer-sheet-footer .cart-footer{
     padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

  .cart-drawer-sheet-footer .cart-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-shrink: 0;
    font-size: var(--cart-drawer-body-size, 1rem);
    line-height: 140%;
    gap: 0.375rem;
    color: var(--cart-drawer-heading-color, #1a1612);
  }

  .cart-drawer-sheet-footer .cart-summary-total .cart-summary-total--final-price {
    font-weight: 600;
    color: var(--color-price-foreground);
  }

  .cart-drawer-sheet-footer .cart-summary-total s {
    font-size: 0.75rem;
    color: var(--cart-drawer-muted-color, #6b6560);
  }

  .cart-checkout {
    width: 100%;
    min-height: 3.5rem; /* 56px, per design */
    background: var(--color-checkout-background);
    color: var(--color-checkout-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-family: var(--font-body--family);
    font-size: var(--cart-drawer-body-size, 1rem);
    line-height: 140%;
    font-weight: var(--button-font-weight, 500);
    letter-spacing: 0.02em;
    border: 0;
    border-radius: var(--button-border-radius, 0);
    padding-block: 1rem;
    padding-inline: 1rem;
    cursor: pointer;
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .cart-checkout:hover {
    background: var(--color-checkout-hover-background);
    color: var(--color-checkout-hover-foreground);
  }

  .cart-checkout:focus-visible {
    outline: 2px solid var(--color-ring, #a1a1a1);
    outline-offset: 2px;
  }

  .cart-checkout svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .cart-summary-total-in-checkout::before {
    content: '•';
    margin-right: 0.625rem;
  }

  .cart-drawer-sheet-footer .payment-type {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
  }

  .cart-drawer-sheet-footer .payment-type .list-payment {
    gap: 0.5rem;
  }

  .cart-drawer-sheet-footer .payment-type .list-payment-item {
    height: 1.375rem;
    width: 2rem !important;
  }
/* END_SNIPPET:cart-footer */

/* START_SNIPPET:cart-item (INDEX:104) */
/* ---------------------------------------------------------------------
     Cart drawer line item — restyled to the Modern Nomad Home design.
     DOM is unchanged: cart.js targets .cart-item / .cart-item-price-details
     and the <cart-actions> elements. CSS only below.
     --------------------------------------------------------------------- */
  .cart-item {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    font-family: var(--font-body--family);
    color: var(--cart-drawer-text-color, #4a4540);
  }

  .cart-item-image-container {
    width: 7rem; /* 112px, per design */
    height: 7rem;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--cart-drawer-thumbnail-background, #f6f2ee);
    border-radius: var(--image-border-radius, 0);
  }
  .cart-item-image-container > div{
    height: 100% !important;
    width: 100% !important;
  }

  .cart-item-image,
  .cart-item-image-container img {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    color: transparent;
    object-fit: cover;
  }

  .cart-item-content {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
  }

  .cart-item-details-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    height: 100%;
  }

  .cart-item-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .cart-item-details {
    min-width: 0;
  }

  .cart-item-title {
    font-family: var(--font-body--family);
    display: -webkit-box;
    font-size: var(--cart-drawer-body-size, 1rem);
    line-height: 140%;
    font-weight: 500;
    color: var(--cart-drawer-heading-color, #1a1612);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }

  .cart-item-title a {
    color: inherit;
    text-decoration: none;
  }

  .cart-item-title a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .cart-item-variant-container {
    position: relative;
  }

  .cart-item-variant,
  .cart-item-selling-plan {
    color: var(--cart-drawer-muted-color, #6b6560);
    font-size: 0.75rem;
    line-height: 1rem;
    margin-top: 0.25rem;
  }

  .cart-item-variant {
    cursor: help;
  }

  .cart-item .jdgm-prev-badge {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
  }

  .cart-item .jdgm-preview-badge .jdgm-prev-badge__stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cart-item .jdgm-preview-badge .jdgm-star.jdgm-star {
    display: inline-block !important;
    color: var(--color-star-rating-foreground);
    padding: 0 !important;
    margin: 0 !important;
  }

  .cart-item .jdgm-star.jdgm--on:before {
    font-size: 0.75rem;
  }

  .cart-item .jdgm-prev-badge .jdgm-prev-badge__text {
    color: var(--cart-drawer-muted-color, #6b6560);
    font-size: 0.75rem;
    line-height: 1rem;
    margin-left: 0.25rem;
  }

  /* Price sits top-right of the row, per both Figma dumps. */
  .cart-item-price-container {
    font-family: var(--font-body--family);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .cart-item-price-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }

  .cart-item-final-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: 0.5rem;
    row-gap: 0;
    font-size: var(--cart-drawer-body-size, 1rem);
    line-height: 140%;
    font-weight: 500;
    color: var(--cart-drawer-heading-color, #1a1612);
  }

  .cart-item-price {
    color: var(--color-price-foreground);
    font-weight: 600;
  }

  .cart-item-compare-at-price {
    color: var(--cart-drawer-muted-color, #6b6560);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
  }

  /* Quantity stepper + trash, bottom row of the item. */
  .cart-item-quantity-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0;
  }

  .cart-item .quantity-container {
    border: 1px solid var(--cart-drawer-border-color, #e1d6ca);
    border-radius: var(--input-border-radius, 0);
    background: transparent;
  }

  .cart-item .quantity-button {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--cart-drawer-text-color, #4a4540);
  }

  .cart-item .quantity-input {
    color: var(--cart-drawer-heading-color, #1a1612);
    background: transparent;
  }

  .cart-item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 0;
    border-radius: var(--button-border-radius, 0);
    flex-shrink: 0;
    transition:
      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
  }

  .cart-item-remove:hover {
    background: var(--cart-drawer-thumbnail-background, #f6f2ee);
  }

  .cart-item-remove svg {
    color: var(--cart-drawer-remove-color, #7c7268);
    width: 1rem;
    height: 1rem;
  }

  .cart-item-discount {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--cart-drawer-thumbnail-background, #f6f2ee);
    border: 1px solid var(--cart-drawer-border-color, #e1d6ca);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--cart-drawer-text-color, #4a4540);
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
  }

  .cart-item-discount svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /*! ZEPTO PRODUCT PERSONALIZER */
  .zepto-custom-properties.first-zepto {
    margin-top: 0.5rem;
  }

  .zepto-custom-field {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--cart-drawer-muted-color, #6b6560);
  }

  .zepto-preview-link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-accent-background);
  }

  /* Uploaded photo thumbnails */
  .cart-item-uploads {
    margin-top: 0.5rem;
  }

  .cart-item-uploads__label {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--cart-drawer-muted-color, #6b6560);
    margin-bottom: 0.375rem;
  }

  .cart-item-uploads__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .cart-item-upload {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid var(--cart-drawer-border-color, #e1d6ca);
    background: var(--cart-drawer-thumbnail-background, #f6f2ee);
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .cart-item-upload:hover,
  .cart-item-upload:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    outline: none;
  }

  .cart-item-upload__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-item-upload__fallback {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    color: var(--cart-drawer-muted-color, #6b6560);
  }

  .cart-item-upload--broken .cart-item-upload__img {
    display: none;
  }

  .cart-item-upload--broken .cart-item-upload__fallback {
    display: block;
  }

  .cart-item-upload__num {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2px 4px;
    background: var(--cart-drawer-heading-color, #1a1612);
    color: var(--cart-drawer-background, #fdfbf8);
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 600;
    border-top-left-radius: 0.25rem;
  }

  /* Mobile: image 112px stays, details column narrows (Figma cart-mobile). */
  @media (width < 30rem) {
    .cart-item-details-header {
      flex-direction: column;
      gap: 0.25rem;
    }

    .cart-item-price-container {
      justify-content: flex-start;
    }

    .cart-item-price-details,
    .cart-item-final-price {
      align-items: flex-start;
      justify-content: flex-start;
    }
  }
/* END_SNIPPET:cart-item */

/* START_SNIPPET:cart-note (INDEX:105) */
.cart-note {
    font-family: var(--font-heading--family);
    background-color: var(--color-accordion-background);
    color: var(--color-accordion-foreground);
    border-top: var(--accordion-border-thickness) solid var(--color-border, #e5e5e5);
    border-bottom: 0;
    border-radius: var(--accordion-border-radius);
  }

  .cart-note textarea {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5rem;
    border: var(--input-border-thickness, 1px) solid var(--color-border, #e5e5e5);
    border-radius: var(--input-border-radius, 0.5rem);
    outline: none;
    padding: 0.625rem;
  }

  .cart-note textarea:focus {
    border-color: var(--color-ring);
  }

  .cart-note textarea::placeholder {
    display: block !important;
    color: var(--color-muted-foreground) !important;
  }
/* END_SNIPPET:cart-note */

/* START_SNIPPET:cart-product-recommendations-desktop (INDEX:106) */
.cart-product-recommendations-desktop-wrapper {
    background: #f6f6f6;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 184px;
    margin: 0;
    height: auto;
    z-index: -1;
    transform: translate(0);
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    transition:
      transform 0.5s ease-in-out,
      opacity 0.5s ease-in-out;
  }

  .cart-product-recommendations-desktop-wrapper.active {
    transform: translate(-100%);
  }

  .cart-product-recommendations-desktop-wrapper .cart-product-recommendations-desktop {
    padding-block: 1.5rem;
    padding-inline: 1rem;
  }

  .cart-product-recommendations-heading-desktop {
    font-family: var(--font-heading--family);
    font-size: 1.125rem;
    line-height: 140%;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .cart-product-recommendations-list-desktop {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .product-recommendations-item-link-desktop {
    display: block;
    padding-inline: 0.875rem;
  }

  .cart-product-recommendations-item-image-wrapper-desktop {
    position: relative;
    width: 7.75rem;
    height: 7.75rem;
    border: var(--image-border-thickness, 1px) solid var(--color-border, #e5e5e5);
    border-radius: var(--image-border-radius);
    overflow: hidden;
    margin-inline: auto;
    margin-bottom: 0.75rem;
  }

  .cart-product-recommendations-item-image-desktop {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    object-fit: cover;
  }

  .cart-product-recommendations-item-details-desktop {
    text-align: center;
  }

  .cart-product-recommendations-item-title-desktop {
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    line-height: 140%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
  }

  .cart-product-recommendations-item-price-wrapper-desktop {
    font-family: var(--font-body--family);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
  }

  .cart-product-recommendations-item-price-desktop {
    color: var(--color-foreground);
    font-weight: 500;
  }

  .cart-product-recommendations-item-compare-at-price-desktop {
    color: var(--color-muted-foreground);
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
  }

  .cart-product-recommendations-loading {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-product-recommendations-desktop-wrapper {
      display: none;
    }

  @media (width >= 64rem) {
    .cart-product-recommendations-desktop-wrapper {
      display: none;
    }
  }
/* END_SNIPPET:cart-product-recommendations-desktop */

/* START_SNIPPET:cart-product-recommendations-item (INDEX:107) */
.cart-product-recommendations-item {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 1rem;
    font-family: var(--font-body--family);
    color: var(--cart-drawer-text-color, #4a4540);
  }

  .cart-product-recommendations-item-image-container {
    position: relative;
    flex-shrink: 0;
    width: 7rem; /* 112px, per design */
    height: 7rem;
    border: 0;
    border-radius: var(--image-border-radius, 0);
    background: var(--cart-drawer-thumbnail-background, #f6f2ee);
    overflow: hidden;
  }

  .cart-product-recommendations-item-image {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    object-fit: cover;
  }

  .cart-product-recommendations-item-wrapper {
    flex: 1;
    display: flex;
    gap: 1rem;
    min-width: 0;
  }

  .cart-product-recommendations-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .cart-product-recommendations-item-title {
    font-family: var(--font-body--family);
    font-size: var(--cart-drawer-small-size, 0.875rem);
    line-height: 140%;
    font-weight: 500;
    color: var(--cart-drawer-heading-color, #1a1612);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }

  .cart-product-recommendations-item-title a {
    color: inherit;
    text-decoration: none;
  }

  .cart-product-recommendations-item-variant-container {
    position: relative;
  }

  .cart-product-recommendations-item-variant {
    color: var(--cart-drawer-muted-color, #6b6560);
    font-size: 0.75rem;
    line-height: 1rem;
    cursor: help;
  }

  .cart-product-recommendations-item-price-wrapper {
    font-family: var(--font-body--family);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .cart-product-recommendations-item-price-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .cart-product-recommendations-item-final-price {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: var(--cart-drawer-small-size, 0.875rem);
    line-height: 140%;
    color: var(--cart-drawer-heading-color, #1a1612);
  }

  .cart-product-recommendations-item-price {
    color: var(--color-price-foreground);
    font-weight: 600;
  }

  .cart-product-recommendations-item-compare-at-price {
    color: var(--cart-drawer-muted-color, #6b6560);
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .cart-product-recommendations-item-add-to-cart button,
  .cart-product-recommendations-item-add-to-cart a {
    width: auto;
    min-width: 4.5rem;
    background: var(--color-add-to-cart-background);
    color: var(--color-add-to-cart-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 140%;
    font-weight: var(--button-font-weight, 500);
    letter-spacing: 0.02em;
    border: 0;
    border-radius: var(--button-border-radius, 0);
    padding-block: 0.5rem;
    padding-inline: 1rem;
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .cart-product-recommendations-item-add-to-cart button:hover,
  .cart-product-recommendations-item-add-to-cart a:hover {
    background: var(--color-add-to-cart-hover-background);
    color: var(--color-add-to-cart-hover-foreground);
  }
/* END_SNIPPET:cart-product-recommendations-item */

/* START_SNIPPET:cart-product-recommendations (INDEX:108) */
.cart-drawer-sheet-footer .cart-product-recommendations {
    display: block;
    padding-inline: var(--cart-drawer-gutter, 1rem);
    padding-block: 1.5rem;
    font-family: var(--font-body--family);
  }

  .cart-drawer-sheet-footer .cart-product-recommendations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .cart-drawer-sheet-footer .cart-product-recommendations-heading {
    font-family: var(--font-body--family);
    font-size: var(--cart-drawer-body-size, 1rem);
    line-height: 140%;
    font-weight: 400;
    color: var(--cart-drawer-heading-color, #1a1612);
    margin: 0;
  }

  .cart-product-recommendations-swiper {
    padding-bottom: 1.5rem;
  }

  /* --- Swiper overrides --- */
  .cart-product-recommendations .swiper-pagination {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  .cart-product-recommendations .swiper-pagination-bullet {
    background: var(--cart-drawer-muted-color, #6b6560);
    width: 0.625rem;
    height: 0.625rem;
  }

  .cart-product-recommendations .swiper-pagination-bullet-active {
    background: var(--cart-drawer-heading-color, #1a1612);
  }

  .cart-product-recommendations .swiper-pagination-progressbar {
    height: 3px; /* per design */
    background: var(--color-progressbar-background, #f6f2ee) !important;
  }

  .cart-product-recommendations .swiper-pagination-progressbar-fill {
    background: var(--color-progressbar-fill, #1a1612) !important;
  }

  .cart-product-recommendations-loading {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grab:active {
    cursor: grabbing;
  }

  @media (width >= 64rem) {
    .cart-drawer-sheet-footer .cart-product-recommendations {
      display: block;
    }
  }
/* END_SNIPPET:cart-product-recommendations */

/* START_SNIPPET:collection-card (INDEX:110) */
.collection-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .collection-card__title--wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .collection-card__title {
    font-family: var(--font-body--family);
    text-transform: capitalize;
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-hero (INDEX:111) */
.collection-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-background);
    font-family: var(--font-heading--family);
    overflow: hidden;
    padding-block: 3rem;
  }

  .collection-hero.has-bg-image {
    color: #ffffff !important; /* White text on banners */
    padding-block: 4rem;
  }

  .collection-hero.has-bg-image .rte {
    color: #ffffff !important; /* White text on banners */
  }

  .collection-hero.has-bg-image .collection-breadcrumbs {
    color: #ffffff; /* White text on banners */
  }

  .collection-hero.has-bg-image .collection-breadcrumbs .breadcrumbs__link:hover {
    color: #e6e6e6; /* White text on banners */
  }

  .collection-hero.has-bg-image .collection-breadcrumbs .breadcrumbs__link[aria-current='page']:hover {
    color: inherit;
  }

  .collection-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .collection-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Overlay to make text readable on images */
  .collection-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  .collection-hero__content {
    flex: 1 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
  }

  /* Breadcrumbs */
  .collection-breadcrumbs {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 10;
  }

  .collection-hero__title {
    font-size: 2rem;
    line-height: 140%;
    max-width: 548px;
  }

  .collection-hero__description {
    opacity: 0.9;
    max-width: 506px;
    margin-top: 0.75rem;
  }
  .collection-hero {
    display: none !important;
  }

  @media (width >= 64rem) {
    .collection-breadcrumbs {
      left: 48px;
    }

    .collection-hero__title {
      font-size: 2.5rem;
      line-height: 140%;
    }
  }
/* END_SNIPPET:collection-hero */

/* START_SNIPPET:collection-tabs-header (INDEX:112) */
.collection-tabs-header {
    font-family: var(--button-font-family);
    margin-bottom: 1.5rem;
  }

  .collection-tabs-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .collection-tabs-link-desktop {
    display: none;
  }

  .collection-tabs-heading {
    font-family: var(--font-heading--family);
    font-size: var(--heading-font-size);
    line-height: var(--heading-line-height);
    font-weight: var(--heading-font-weight);
  }

  .collection-tabs-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .collection-tabs-link-mobile {
    display: inline-block;
    margin-top: 2rem;
  }

  @media (width >= 64rem) {
    .collection-tabs-link-desktop {
      display: block;
    }

    .collection-tabs-link-mobile {
      display: none;
    }
  }
/* END_SNIPPET:collection-tabs-header */

/* START_SNIPPET:collection-tabs-link (INDEX:113) */
.collection-tabs-linked-to-tab {
    position: relative;
    display: none;
    font-size: 0.875rem;
    line-height: 140%;
    font-weight: 500;
  }

  .collection-tabs-linked-to-tab::before,
  .collection-tabs-linked-to-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    bottom: 0;
    pointer-events: none;
  }

  /* animated fill (starts hidden via scaleX(0)) */
  .collection-tabs-linked-to-tab::before {
    background: var(--fg-color);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 2;
    will-change: transform;
  }

  /* faint baseline */
  .collection-tabs-linked-to-tab::after {
    background: var(--fg-color);
    opacity: 0.25;
    z-index: 1;
  }

  /* trigger on hover / keyboard focus */
  .collection-tabs-linked-to-tab:hover::before,
  .collection-tabs-linked-to-tab:focus::before {
    transform: scaleX(1);
  }

  .collection-tabs-linked-to-tab.active {
    display: block;
  }
/* END_SNIPPET:collection-tabs-link */

/* START_SNIPPET:collection-tabs-swiper-nav (INDEX:114) */
.collection-tabs-swiper-nav {
    display: none;
  }

  .collection-tabs-swiper-nav button {
    cursor: pointer;
  }

  .collection-tabs-swiper-prev.swiper-button-disabled,
  .collection-tabs-swiper-next.swiper-button-disabled {
    opacity: 0.2;
  }

  @media (width >= 64rem) {
    .collection-tabs-swiper-nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }
/* END_SNIPPET:collection-tabs-swiper-nav */

/* START_SNIPPET:collection-tabs (INDEX:115) */
.collection-tabs {
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    /* padding-left: var(--gutter); */
    /* padding-right: var(--gutter); */
  }

  .collection-tab {
    position: relative;
    color: var(--fg-color);
    font-family: var(--collection-title-font-family);
    font-size: var(--collection-title-font-size);
    line-height: var(--collection-title-line-height);
    font-weight: var(--collection-title-font-weight);
    text-transform: var(--collection-title-text-transform);
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
      opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    opacity: 0.25;

    /* Ensure the button doesn't shrink if text is long */
    flex-shrink: 0;
  }

  .collection-tab:hover {
    opacity: 1;
  }

  /* base pseudo */
  .collection-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
    pointer-events: none;
  }

  .collection-tab.active {
    color: var(--collection-title-active-color);
    opacity: 1;
  }

  .collection-tab.active::after {
    animation: underline-slide 360ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  }

  @keyframes underline-slide {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  .collection-tabs span {
    color: var(--fg-color);
    font-family: var(--collection-title-font-family);
    font-size: var(--collection-title-font-size);
    line-height: var(--collection-title-line-height);
    font-weight: var(--collection-title-font-weight);
    text-transform: var(--collection-title-text-transform);
    opacity: 0.25;
  }
/* END_SNIPPET:collection-tabs */

/* START_SNIPPET:discount-code-callout (INDEX:117) */
.cart-free-shipping {
    display: block;
    padding-inline: var(--cart-drawer-gutter, 1rem);
    padding-block: var(--cart-progress-padding-block, 1.5rem) 0;
    color: var(--cart-drawer-text-color, #4a4540);
    font-family: var(--font-body--family);
  }

  .cart-free-shipping__message {
    display: block;
    margin: 0;
    text-align: center;
    font-size: var(--cart-progress-font-size, 0.875rem);
    line-height: 140%;
    font-weight: 400;
  }

  .cart-free-shipping__message strong {
    font-weight: 600;
  }

  .cart-free-shipping__track {
    display: block;
    width: 100%;
    height: var(--cart-progress-track-height, 0.25rem);
    margin-top: 1rem;
    background: var(--cart-progress-track-color, #f1e9e3);
    border-radius: 999px;
    overflow: hidden;
  }

  .cart-free-shipping__fill {
    display: block;
    height: 100%;
    background: var(--cart-progress-fill-color, #885e4f);
    border-radius: inherit;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cart-free-shipping--unlocked .cart-free-shipping__message {
    color: var(--cart-drawer-heading-color, #1a1612);
  }

  {%- comment -%} The unlocked message comes from a richtext setting, so normalise its <p>. {%- endcomment -%}
  .cart-free-shipping__message > p {
    margin: 0;
  }

  .cart-free-shipping__message > p + p {
    margin-top: 0.25rem;
  }
/* END_SNIPPET:discount-code-callout */

/* START_SNIPPET:filter (INDEX:119) */
.filter-disclosure {
    position: relative;
    display: none;
  }

  /* Remove default marker */
  .filter-disclosure summary {
    list-style: none;
  }
  .filter-disclosure summary::-webkit-details-marker {
    display: none;
  }

  /* Style summary to match current trigger button */
  .filter-disclosure-trigger {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.74rem 1.5rem;
    font-size: 1rem;
    line-height: 140%;
    font-weight:400;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: transparent;
    color: var(--color-dropdown-trigger-foreground);
    border: var(--dropdown-trigger-border-thickness, 1px) solid #DED8D0;
    border-radius: var(--button-border-radius);
  }

  .filter-disclosure-trigger:hover {
    background: var(--color-dropdown-trigger-hover-background);
    color: var(--color-dropdown-trigger-hover-foreground);
  }

  .filter-disclosure-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    transition: transform 200ms ease;
  }

  .filter-disclosure[open] .filter-disclosure-icon {
    transform: rotate(180deg);
  }

  /* Click-outside via transparent backdrop */
  .filter-disclosure[open] > summary::before {
    position: fixed;
    inset: 0;
    z-index: 99;
    content: '';
    cursor: default;
  }

  /* Dropdown panel */
  .filter-disclosure-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 100;
    min-width: 14rem;
    max-height: 33rem;
    overflow-y: auto;
    padding: 0.25rem;
    background-color: var(--color-popover-background, #ffffff);
    color: var(--color-popover-foreground, #000000);
    border: var(--popover-border-thickness, 1px) solid var(--color-border, #e5e5e5);
    border-radius: var(--popover-border-radius, 0.375rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
    z-index: 10001;
  }

  .filter-content {
    font-family: var(--font-body--family);
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    padding: 0;
  }

  .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0.5rem;
  }

  .filter-header a {
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-left: auto;
  }

  .filter-form {
    display: grid;
  }

  .filter-form-item {
    padding: 0.375rem 0.5rem;
  }

  .filter-form li label:hover .filter-value-label {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .filter-accordion {
    display: block;
    background-color: transparent;
    color: inherit;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
  }

  .filter-accordion-trigger {
    padding-inline: 1rem;
  }

  .filter-accordion-content {
    padding: 0 1rem 1rem 1rem;
  }

  .filter-accordion-content .filter-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
  }

  .filter-accordion-content .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .filter-accordion-content .filter-header a {
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-left: auto;
  }

  .filter-accordion-content .filter-form {
    display: grid;
    gap: 0.75rem;
  }

  .filter-accordion-content .filter-form li label:hover .filter-value-label {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .filter-form-item-input {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  @media (width >= 64rem) {
    .filter-disclosure {
      display: block;
    }

    .filter-accordion {
      display: none;
    }
  }
/* END_SNIPPET:filter */

/* START_SNIPPET:localization-selector (INDEX:137) */
.localization-selector__form {
    display: inline-block;
    margin: 0;
  }

  .localization-selector {
    position: relative;
    display: inline-block;
  }

  .localization-selector__trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    border-radius: var(--dropdown-trigger-border-radius);
    color: inherit;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-family: var(--font-body--family);
    line-height: 1;
    transition: opacity 180ms ease;
  }

  .localization-selector__trigger::-webkit-details-marker {
    display: none;
  }

  .localization-selector__trigger::marker {
    content: '';
  }

  .localization-selector__trigger:hover {
    opacity: 0.7;
  }

  .localization-selector__trigger:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }

  .localization-selector__flag {
    width: 20px;
    height: auto;
    display: block;
    flex-shrink: 0;
    border-radius: 2px;
  }

  .localization-selector__label {
    white-space: nowrap;
  }

  .localization-selector__currency {
    white-space: nowrap;
  }

  .localization-selector__label + .localization-selector__currency {
    border-inline-start: 1px solid currentColor;
    padding-inline-start: 0.5rem;
    margin-inline-start: 0.25rem;
    opacity: 0.75;
  }

  .localization-selector__chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    transition: transform 150ms ease;
  }

  .localization-selector[open] .localization-selector__chevron {
    transform: rotate(180deg);
  }

  .localization-selector__popover {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 100%;
    max-width: 22rem;
    max-height: 20rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    background: var(--color-popover-background);
    color: var(--color-popover-foreground);
    border: var(--popover-border-thickness) solid var(--color-border);
    border-radius: var(--popover-border-radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    font-family: var(--font-body--family);
    z-index: 100;
  }

  @media (max-width: 767px) {
    .localization-selector__popover {
      top: auto;
      bottom: calc(100% + 0.25rem);
    }
  }

  .localization-selector__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .localization-selector__list > li {
    margin: 0;
  }

  .localization-selector__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    text-align: start;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-family: var(--font-body--family);
    cursor: pointer;
    border-radius: calc(var(--popover-border-radius) * 0.75);
  }

  .localization-selector__item:hover {
    background: var(--color-popover-hover-background);
    color: var(--color-popover-hover-foreground);
  }

  .localization-selector__item:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: -2px;
  }

  .localization-selector__item--active {
    background: var(--color-popover-hover-background);
    color: var(--color-popover-hover-foreground);
    font-weight: 500;
  }
/* END_SNIPPET:localization-selector */

/* START_SNIPPET:pagination-nav (INDEX:141) */
.pagination-nav {
    font-family: var(--font-heading--family);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }

  .pagination-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 2rem;
    height: 2rem;
    border-radius: var(--button-border-radius, 0.375rem);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .pagination-nav-button:hover {
    background-color: var(--color-pagination-nav-hover-background);
    color: var(--color-pagination-nav-hover-foreground);
  }

  .pagination-nav-button svg {
    width: 1rem;
    height: 1rem;
  }

  .pagination-nav-button.current-page {
    background-color: var(--color-pagination-nav-background);
    color: var(--color-pagination-nav-foreground);
    border: var(--pagination-nav-border-thickness, 1px) solid var(--color-border, #e5e5e5);
  }
/* END_SNIPPET:pagination-nav */

/* START_SNIPPET:pdp-size-chart (INDEX:168) */
.pdp-size-chart dialog-trigger button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .pdp-size-chart dialog-trigger svg {
    width: 1rem;
    height: 1rem;
  }

  .pdp-size-chart-dialog-content {
    width: auto;
  }

  .pdp-size-chart--link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .pdp-size-chart--link span {
    text-decoration: underline;
  }

  .pdp-size-chart--link svg {
    width: 1rem;
    height: 1rem;
  }

  .pdp-size-chart__dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .pdp-size-chart__dialog-title {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
    font-weight: 600;
  }

  .pdp-size-chart__content.rte table {
    display: table;
    border-collapse: separate;
    border-spacing: 4px;
    border-color: #aaa;
  }

  .pdp-size-chart__content.rte th {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    border: 1px dashed #aaa; /* The dashed border */
    padding: 10px 15px; /* Space inside the box */
    text-align: left;
  }

  .pdp-size-chart__content.rte td {
    display: table-cell;
    vertical-align: middle;
    border: 1px dashed#aaa; /* The dashed border */
    padding: 10px 15px; /* Space inside the box */
    text-align: left;
  }

  .pdp-size-chart__content.rte thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .pdp-size-chart__content.rte tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .pdp-size-chart__content.rte tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }
/* END_SNIPPET:pdp-size-chart */

/* START_SNIPPET:pill-input (INDEX:177) */
.pill-input__input + .pill-input__label {
    position: relative;
    min-width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-variant-background, rgb(var(--color-background-rgb)));
    color: var(--color-variant-foreground, rgba(var(--color-foreground-rgb)));
    border-radius: var(--button-border-radius);
    border: 1px solid var(--color-border);
    font-size: 1rem;
    line-height: 140%;
    text-align: center;
    text-transform: capitalize;
    transition:
      border 300ms ease,
      background-color 300ms ease,
      color 300ms ease;
    padding-inline: 0.5rem;
    cursor: pointer;
  }

  .pill-input__input + .pill-input__label:before {
    content: '';
    position: absolute;
    top: calc(1px * -1);
    right: calc(1px * -1);
    bottom: calc(1px * -1);
    left: calc(1px * -1);
    z-index: -1;
    border-radius: var(--button-border-radius);
    box-shadow: 0 4px 5px rgba(var(18, 18, 18), 0);
  }

  .pill-input__input + .pill-input__label:hover {
    background-color: var(--color-variant-hover-background, rgb(var(--color-foreground-rgb)));
    color: var(--color-variant-hover-foreground, rgb(var(--color-background-rgb)));
    border-color: var(--color-variant-hover-background, rgb(var(--color-foreground-rgb)));
  }

  .pill-input__input:checked + .pill-input__label {
    background-color: var(--color-variant-hover-background, rgb(var(--color-foreground-rgb)));
    color: var(--color-variant-hover-foreground, rgb(var(--color-background-rgb)));
    border-color: var(--color-variant-hover-background, rgb(var(--color-foreground-rgb)));
  }

  .pill-input__input:checked + .pill-input__label::selection {
    background-color: rgba(var(--color-background-rgb-selection));
  }

  .pill-input__input:disabled + .pill-input__label,
  .pill-input__input.visually-disabled + .pill-input__label {
    border-color: rgba(var(--color-foreground-rgb), 0.1);
    color: rgba(var(--color-foreground-rgb), 0.6);
    text-decoration: line-through;
  }

  .pill-input__input.visually-disabled:checked + .pill-input__label,
  .pill-input__input:disabled:checked + .pill-input__label {
    color: rgba(var(--color-background-rgb), 0.6);
  }
  .pill-input__input:focus-visible + .pill-input__label {
    box-shadow:
      0 0 0 3px rgb(var(--color-background-rgb)),
      0 0 0 5px rgba(var(--color-foreground-rgb), 0.55);
  }

  /* Fallback */
  .pill-input__input.focused + .pill-input__label {
    box-shadow:
      0 0 0 3px rgb(var(--color-background-rgb)),
      0 0 0 5px rgba(var(--color-foreground-rgb), 0.55);
  }
/* END_SNIPPET:pill-input */

/* START_SNIPPET:price-range-filter (INDEX:178) */
.price-range-filter-content {
    font-family: var(--font-body--family);
    padding: 0;
  }

  .price-range-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    gap: 1rem;
    padding: 0.375rem 0.5rem;
  }

  .price-range-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem; /* 20px */
    padding: 0.375rem 0.5rem;
  }

  .price-range-filter-header a {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .price-range-filter-from,
  .price-range-filter-to {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .price-range-filter-accordion {
    display: block;
    background-color: transparent;
    color: inherit;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
  }

  .price-range-filter-accordion-trigger {
    padding-inline: 1rem;
  }

  .price-range-filter-accordion-content {
    padding: 0 1rem 1rem 1rem;
  }

  .price-range-filter-accordion-content .price-range-filter-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .price-range-filter-accordion-content .price-range-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .price-range-filter-accordion-content .price-range-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* Price range panel needs to be wider than standard filters */
  .filter-disclosure-price-range .filter-disclosure-panel {
    min-width: 20rem;
  }

  @media (width >= 64rem) {
    .price-range-filter-accordion {
      display: none;
    }
  }
/* END_SNIPPET:price-range-filter */

/* START_SNIPPET:product-card (INDEX:179) */
.product-card {
    --swatch-input--border-radius: 50%;

    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--font-body--family);
    overflow: hidden;
  }

  .product-card--swatch-rounded {
    --swatch-input--border-radius: 50%;
  }

  .product-card--swatch-square {
    --swatch-input--border-radius: 0;
  }

  .product-image-container {
    position: relative;
    overflow: hidden;
    border: var(--image-border-thickness, 1px) solid var(--color-border, #e5e5e5);
    border-radius: var(--image-border-radius, 0.375rem);
  }

  .secondary-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .product-card:hover .secondary-image-container {
    opacity: 1;
  }

  .product-sold-out-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-muted-background);
    opacity: 0.7;
    z-index: 1;
  }

  .product-badge-sold-out {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background: var(--color-destructive-background);
    color: var(--color-destructive-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
  }

  .product-details-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1rem;
  }

  .product-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;;
  }

  .product-title {
    font-size: 1rem;
    line-height: 140%;
    font-weight: 400;
    text-wrap: pretty;
  }

  .product-vendor {
    font-size: 1rem;
    line-height: 140%;
    color: var(--color-primary-background);
  }

  .product-price-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .product-price-container-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .product-price {
    font-size: 1rem;
    line-height: 140%;
    color: var(--color-price-foreground);
    font-weight: 500;
  }

  .compare-at-price {
    font-size: 0.875rem;
    line-height: 140%;
  }

  .product-discounted-promo {
    align-self: start;
    background-color: var(--color-price-foreground);
    color: var(--color-price-background);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
  }

  product-card-variant-selector {
    display: block;
  }

  .product-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    z-index: 10;
  }

  .product-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--swatch-input--border-radius);
    width: 1.25rem;
    height: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300;
    forced-color-adjust: none;
  }

  .product-swatch:hover {
    border: 1px solid rgba(var(--color-foreground-rgb), 0.4);
  }

  .product-swatch--active {
    border: 1px solid var(--color-foreground);
  }

  .product-swatch div {
    background: var(--swatch-value);
    background-size: cover;
    background-position: center;
    border: 0.1rem solid rgba(var(--color-foreground-rgb), 0.15);
    border-radius: var(--swatch-input--border-radius);
    width: 1.25rem;
    height: 1.25rem;
  }

  .product-swatch--active div {
    width: 1rem;
    height: 1rem;
  }

  .product-swatch:hover div {
    width: 1rem;
    height: 1rem;
  }

  .product-card .jdgm-prev-badge {
    display: flex !important;
    gap: 0.25rem;
    flex-wrap: wrap;
  }

  .product-card .jdgm-preview-badge .jdgm-prev-badge__stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .product-card .jdgm-preview-badge .jdgm-star.jdgm-star {
    display: inline-block !important;
    color: var(--color-star-rating-foreground);
    padding: 0 !important;
    margin: 0 !important;
  }

  .product-card .jdgm-star.jdgm--on:before {
    font-size: 0.75rem;
  }

  .product-card-placeholder-card .product-image-container {
    background: var(--color-muted-background);
  }

  .product-card-placeholder-image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-card-placeholder-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-star-rating-foreground);
  }

  .product-card-placeholder-star {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  .product-card-add-to-cart {
    z-index: 2;
    margin-top: auto;
  }

  .product-size-selector {
    background: var(--color-muted-background);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 3;
    padding: 0.75rem;
    gap: 0.5rem;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  @media (hover: hover) {
    .product-card .product-size-selector {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(0.25rem);
    }

    .product-card:hover .product-size-selector,
    .product-card:focus-within .product-size-selector {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-size-selector {
      transition: none;
      transform: none;
    }
  }

  .product-size-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--color-foreground);
    border: none;
    padding: 0.5rem 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-body--family);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1;
  }

  .product-size-btn:hover {
    background: var(--color-muted-background, #f0f0f0);
  }

  .product-size-btn--active {
    background: var(--color-primary-background, var(--color-foreground));
    color: var(--color-primary-foreground, var(--color-background));
  }

  .product-size-btn--active:hover {
    background: var(--color-primary-hover-background, var(--color-foreground));
    color: var(--color-primary-hover-foreground, var(--color-background));
  }

  @media (width < 64rem) {
    .product-size-selector,
    .product-card-add-to-cart {
      display: none;
    }
  }

  @media (width >= 64rem) {
    .product-title {
      font-size: 1rem;
      line-height: 140%;
      font-weight:400;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:sticky-add-to-cart (INDEX:185) */
sticky-add-to-cart .sticky-add-to-cart__container {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
  }

  sticky-add-to-cart .sticky-add-to-cart__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  sticky-add-to-cart .sticky-add-to-cart__image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--color-primary-background);
  }

  sticky-add-to-cart .sticky-add-to-cart__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  sticky-add-to-cart .sticky-add-to-cart__details {
    flex: 1;
    min-width: 0;
  }

  sticky-add-to-cart .sticky-add-to-cart__title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 0.25rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  sticky-add-to-cart .sticky-add-to-cart__price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
  }

  sticky-add-to-cart .sticky-add-to-cart__price--compare {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-foreground-secondary);
    text-decoration: line-through;
    margin-left: 0.5rem;
  }

  sticky-add-to-cart .sticky-add-to-cart__button {
    flex-shrink: 0;
    min-width: 120px;
  }

  /* Override add-to-cart button padding for sticky context */
  sticky-add-to-cart .sticky-add-to-cart__button add-to-cart button {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  /* Show only on mobile */
  @media (width >= 64rem) {
    sticky-add-to-cart {
      display: none;
    }
  }
/* END_SNIPPET:sticky-add-to-cart */

/* START_SNIPPET:swatch-input (INDEX:186) */
/* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
  .swatch-input__input + .swatch-input__label {
    display: inline-block;
    max-width: 100%;
    border-radius: var(--swatch-input--border-radius, 50%);
    cursor: pointer;
    outline-offset: 2px;
    outline-color: transparent;
    outline-style: solid;
    transition-property: outline-color, outline-width, box-shadow;
    transition-duration: 300;
    transition-timing-function: ease;
    forced-color-adjust: none;
  }

  /* Active state */
  .swatch-input__input:active + .swatch-input__label,
  .swatch-input__input:checked + .swatch-input__label {
    outline: 1px solid rgb(var(--color-foreground-rgb));
  }

  /* Hover state */
  .swatch-input__input + .swatch-input__label:hover,
  .swatch-input__input:hover + .swatch-input__label {
    outline: 2px solid rgba(var(--color-foreground-rgb), 0.4);
  }

  /* Focus visible */
  .swatch-input__input:focus-visible + .swatch-input__label {
    outline: 2px solid rgba(var(--color-foreground-rgb), 0.5);
    box-shadow:
      0 0 0 2px rgb(var(--color-background-rgb)),
      0 0 1px 5px rgba(var(--color-foreground-rgb), 0.25);
  }

  /* Active and focused */
  .swatch-input__input:active:focus-visible + .swatch-input__label,
  .swatch-input__input:checked:focus-visible + .swatch-input__label {
    outline: 1px solid rgb(var(--color-foreground-rgb));
    box-shadow:
      0 0 0 2px rgb(var(--color-background-rgb)),
      0 0 1px 4px rgba(var(--color-foreground-rgb), 0.25);
  }

  /* Visually disabled */
  .swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label {
    transition: none;
  }
  .swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label:hover {
    outline: none;
  }

  /* Actually disabled */
  .swatch-input__input:disabled + .swatch-input__label {
    pointer-events: none;
  }

  /* Overrides for swatch snippet when used inside disabled swatch-input */
  .swatch-input__input:disabled + .swatch-input__label > .swatch,
  .swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
    position: relative;
    overflow: hidden;
  }

  /* Disabled styles */
  .swatch-input__input:disabled + .swatch-input__label > .swatch,
  .swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
    opacity: 0.4;
  }

  /* Display crossed out line over swatch when input is disabled */
  .swatch-input__input:disabled + .swatch-input__label > .swatch::after,
  .swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
    /* Diagonal of a square = length of the side * sqrt(2)  */
    --diagonal--size: calc(var(--swatch-input--size) * 1.414);
    --crossed-line--size: 1px;

    content: '';
    position: absolute;
    bottom: calc(var(--crossed-line--size) * -0.5);
    left: 0;
    width: var(--diagonal--size);
    height: var(--crossed-line--size);
    background-color: rgb(var(--color-foreground-rgb));
    transform: rotate(-45deg);
    transform-origin: left;
  }
/* END_SNIPPET:swatch-input */

/* START_SNIPPET:swatch (INDEX:187) */
/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
  .swatch {
    --swatch--size: var(--swatch-input--size, 4.4rem);
    --swatch--border-radius: var(--swatch-input--border-radius, 50%);

    display: block;
    width: var(--swatch--size);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--swatch--background);
    background-position: var(--swatch-focal-point, initial);
    background-size: cover;
    background-origin: border-box;
    border: 0.1rem solid rgba(var(--color-foreground-rgb), 0.15);
    border-radius: var(--swatch--border-radius);
  }

  .swatch--unavailable {
    border-style: dashed;
    border-color: rgba(var(--color-foreground-rgb), 0.5);
  }
/* END_SNIPPET:swatch */