/** Shopify CDN: Minification failed

Line 3678:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.main-404-section__top-image {
    width: 100%;
    margin-bottom: var(--content-spacing-4);
  }

  .main-404-section .content-group.align-center .main-404-section__top-image {
    margin-inline: auto;
  }

  /* Title — H1 tag at H4 size, medium weight, uppercase. */
  .main-404-section .content-group h1 {
    font-weight: 500;
    text-transform: uppercase;
  }

  /* Search bar — square field + plain outline magnifier to match the design
     (overrides the searchbar block's pill + icon-circle, scoped to 404 only). */
  /* Constrain + centre the whole field so the icon stays pinned to its right edge. */
  .main-404-section .form-search-bar {
    width: 100%;
    max-width: 394px;
  }

  .main-404-section .content-group.align-center .form-search-bar {
    margin-inline: auto;
  }

  .main-404-section .form-search-bar input[type='text'] {
    border-radius: 0;
    height: 39px;
  }

  .main-404-section .form-search-bar .submit-group {
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
    right: 16px;
  }

  .main-404-section .form-search-bar .submit-group svg {
    width: 18px;
    height: 18px;
    color: var(--brand-color-1);
  }

  .main-404-section .content-group {
    grid-column: 4 / span 6;
  }

  @media (max-width: 991.98px) {
    .main-404-section .content-group {
      grid-column: 3 / span 8;
    }
  }

  @media (max-width: 767.98px) {
    .main-404-section .content-group {
      grid-column: span 6;
    }
  }

  .main-404-section .content-group.content-left {
    grid-column: 1 / span 6;
  }

  @media (max-width: 991.98px) {
    .main-404-section .content-group.content-left {
      grid-column: 1 / span 8;
    }
  }
/* END_SECTION:404 */

/* START_SECTION:accordion-media (INDEX:1) */
.accordion-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--grid-gap);
    align-items: flex-start;
  }

  /* Content on the right — swap the column order */
  .accordion-media--right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .accordion-media--right .accordion-media__content {
    order: 2;
  }
  .accordion-media--right .accordion-media__figure {
    order: 1;
  }

  /* The accordion list sits directly under the intro copy */
  .accordion-media__items {
    margin-top: var(--content-spacing-2);
  }

  /* Layers are rendered inside each block (in the items column) then moved into the
     figure by JS — keep them hidden until relocated. */
  .accordion-media__items [data-accordion-media-layer] {
    display: none;
  }

  /* Media stack — layers share the same box; the active one fades in */
  .accordion-media__figure {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
  }
  .accordion-media__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .accordion-media__layer.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  /* Fallback: if no item is open by default, show the first layer */
  .accordion-media__figure:not(:has(.is-active)) .accordion-media__layer:first-child {
    opacity: 1;
    pointer-events: auto;
  }
  .accordion-media__layer img,
  .accordion-media__layer svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media only screen and (max-width: 767.98px) {
    .accordion-media,
    .accordion-media--right {
      grid-template-columns: 1fr;
      align-items: initial;
      gap: var(--content-spacing-6);
    }

    /* Image on top, content below (regardless of desktop content position) */
    .accordion-media__figure {
      order: 1;
    }
    .accordion-media__content {
      order: 2;
      max-width: none;
    }
  }
/* END_SECTION:accordion-media */

/* START_SECTION:ambassador-as-seen (INDEX:2) */
/* Two-up: image bleeds left/top/bottom, cream panel (heading + product) on the right. */
  .ambassador-as-seen__slide {
    display: grid;
    grid-template-columns: 1fr var(--amb-panel-w, 34%);
    height: var(--amb-height, 640px);
  }

  .ambassador-as-seen__media {
    overflow: hidden;
    height: 100%;
  }

  .ambassador-as-seen__panel {
    padding: 40px clamp(24px, 3vw, 60px);
    gap: clamp(14px, 3vw, 24px);
    align-items: center;
  }

  .ambassador-as-seen__heading {
    width: 100%;
    max-width: 300px;
    text-align: left;
  }

  .ambassador-as-seen__product {
    width: 100%;
    max-width: 300px;
  }

  /* Arrows pinned to the bottom-right corner of the image (just inside its right edge). */
  .ambassador-as-seen__arrows {
    position: absolute;
    right: calc(var(--amb-panel-w, 34%) + 24px);
    bottom: 24px;
    z-index: 3;
  }

  @media only screen and (max-width: 767.98px) {
    .ambassador-as-seen__slide {
      grid-template-columns: 1fr;
      height: auto;
    }
    .ambassador-as-seen__media {
      aspect-ratio: 4 / 3;
      height: auto;
    }
    .ambassador-as-seen__panel {
      padding: var(--content-spacing-5) var(--page-width-padding-mobile) var(--content-spacing-6);
      gap: var(--content-spacing-4);
    }
    .ambassador-as-seen__heading {
      text-align: center;
    }
    /* Anchor the arrows to the bottom-right of the 4/3 image (full-width → height = 75vw). */
    .ambassador-as-seen__arrows {
      right: var(--page-width-padding-mobile);
      bottom: auto;
      top: calc(75vw - 54px);
    }
  }
/* END_SECTION:ambassador-as-seen */

/* START_SECTION:ambassador-header (INDEX:3) */
.ambassador-header .ambassador-header__inner {
    padding-top: 0;
    padding-bottom: var(--content-spacing-6);
  }

  /* When the banner sits below the text, give the copy a little more room beneath it. */
  .ambassador-header--media-bottom .ambassador-header__inner {
    padding-bottom: var(--content-spacing-8);
  }

  .ambassador-header__banner {
    aspect-ratio: var(--amb-banner-ratio, 1440 / 560);
  }

  /* Fixed pixel height instead of an aspect ratio */
  .ambassador-header--fixed-banner .ambassador-header__banner {
    aspect-ratio: auto;
    height: var(--amb-banner-h, 300px);
  }

  .ambassador-header__banner-img {
    display: block;
  }

  .ambassador-header__desc {
    max-width: 60ch;
  }

  @media only screen and (max-width: 767.98px) {
    .ambassador-header__banner {
      aspect-ratio: 3 / 4;
    }

    .ambassador-header--fixed-banner .ambassador-header__banner {
      aspect-ratio: auto;
      height: var(--amb-banner-h-mobile, var(--amb-banner-h, 360px));
    }
  }
/* END_SECTION:ambassador-header */

/* START_SECTION:ambassador-hub-grid (INDEX:4) */
.ambassador-hub-grid__heading em {
    font-style: italic;
  }

  .ambassador-hub-grid__grid {
    grid-template-columns: repeat(var(--ahg-cols, 4), minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  /* CTA tile spans two columns; the card fills the row height beside it. */
  .ambassador-hub-grid__cta {
    grid-column: span 2;
    display: flex;
  }
  .ambassador-hub-grid__cta .cta {
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 991.98px) {
    .ambassador-hub-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    /* CTA spans the full row here — give it a portrait aspect. */
    .ambassador-hub-grid__cta {
      aspect-ratio: 2 / 3;
    }
  }
/* END_SECTION:ambassador-hub-grid */

/* START_SECTION:ambassador-products (INDEX:5) */
.ambassador-products__heading em {
    font-style: italic;
  }

  .ambassador-products__grid {
    grid-template-columns: repeat(var(--amb-cols, 4), minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  /* Third tile spans two columns and shows its hover (lifestyle) state permanently.
     A 2:1 media keeps its height equal to the square cards beside it. */
  .ambassador-products__grid > .product-card:nth-child(3) {
    grid-column: span 2;
  }
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__media {
    aspect-ratio: 2 / 1;
  }
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__hover-media,
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__scrim {
    opacity: 1;
  }
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__content {
    background: transparent;
    color: var(--brand-color-2);
  }
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__title,
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__amount,
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__from,
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__compare,
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__finance {
    color: var(--brand-color-2);
  }
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__compare,
  .ambassador-products__grid > .product-card:nth-child(3) .product-card__finance {
    opacity: 1;
  }

  /* Grid collapses to 2-up (10px gap) at 992 and below; the wide tile fills the row. */
  @media only screen and (max-width: 991.98px) {
    .ambassador-products__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
  }

  @media only screen and (max-width: 767.98px) {
    /* Slider bleeds full-width; the first card still starts at the 20px page gutter,
       cards peek off the right edge. Heading/arrows stay within the page width. */
    .ambassador-products .blaze-container-wrapper {
      width: calc(100% + (var(--page-width-padding-mobile) * 2));
      max-width: calc(100% + (var(--page-width-padding-mobile) * 2));
      margin-inline: calc(-1 * var(--page-width-padding-mobile));
    }
    .ambassador-products .blaze-track-container {
      padding-left: var(--page-width-padding-mobile);
    }
  }
/* END_SECTION:ambassador-products */

/* START_SECTION:ambassador-quote (INDEX:6) */
.ambassador-quote__media {
    flex: 0 0 42%;
    align-self: stretch;
    overflow: hidden;
  }

  .ambassador-quote__img {
    display: block;
  }

  .ambassador-quote--image-right .ambassador-quote__layout {
    flex-direction: row-reverse;
  }

  /* Quote body: a subtle left rule with the copy inset from it. */
  .ambassador-quote__body {
    background: unset;
    border-left: 1px solid var(--brand-color-3);
    padding-left: 40px;
  }

  .ambassador-quote__mark {
    display: block;
    line-height: 0;
    margin-bottom: 20px;
  }

  .ambassador-quote__mark svg {
    display: block;
    width: 38px;
    height: auto;
  }

  /* Lead line: uppercase Work Sans medium, tight to the paragraph below. */
  .ambassador-quote__text h4 {
    text-transform: uppercase;
    font-weight: 500;
    font-style: normal;
    margin: 0 0 10px;
  }

  .ambassador-quote__text > :first-child {
    margin-top: 0;
  }

  @media only screen and (max-width: 991.98px) {
    /* Stack: portrait on top, quote below — regardless of desktop side. */
    .ambassador-quote--image-right .ambassador-quote__layout {
      flex-direction: column;
    }
    .ambassador-quote__media {
      flex-basis: auto;
      width: 100%;
      aspect-ratio: 3 / 2;
    }
    /* Drop the left rule + inset once stacked. */
    .ambassador-quote__body {
      border-left: none;
      padding: 0;
      margin: 0;
    }
  }
/* END_SECTION:ambassador-quote */

/* START_SECTION:announcement-bar (INDEX:7) */
section.announcement-bar-section {
    z-index: 98;
    overflow: hidden;
    transition: top 150ms ease-in-out;
  }

  .announcement-bar-slider {
    --ann-spv: var(--ann-spv-dt, 3);
    min-height: 34px;
    background-color: var(--brand-color-4);
    color: var(--text-color);
  }

  @media (max-width: 991.98px) {
    .announcement-bar-slider {
      --ann-spv: 1;
    }
  }

  .announcement-track {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }

  .announcement-track::-webkit-scrollbar {
    display: none;
  }

  .announcement-slide {
    flex: 0 0 calc(100% / var(--ann-spv));
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px;
    text-align: center;
    color: inherit;
  }

  .announcement-slide,
  .announcement-slide span,
  .announcement-slide > * {
    margin-block: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
  }

  @media (max-width: 767.98px) {
    .announcement-slide,
    .announcement-slide span,
    .announcement-slide > * {
      font-size: 13px;
    }
  }

  .announcement-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .announcement-arrow svg {
    width: 10px;
    height: auto;
  }

  .announcement-arrow svg path {
    stroke: currentColor;
    fill: none;
  }

  .announcement-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
  }

  /* Countdown */
  .ann-countdown {
    gap: 12px;
  }

  .ann-countdown-label {
    white-space: nowrap;
  }

  .ann-countdown-timer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .ann-countdown-timer > span {
    font-variant-numeric: tabular-nums;
  }

  .ann-countdown-timer b {
    font-weight: 600;
  }

  .ann-countdown-timer sup {
    margin-left: 1px;
    font-size: 0.7em;
    font-weight: 500;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article (INDEX:8) */
/* No top padding — the breadcrumbs sit directly under the hero image */
  .article .section-container.vertical-padding {
    padding-top: 0;
  }

  .article .article-breadcrumbs-wrap {
    margin-bottom: var(--content-spacing-6);
  }

  /* Render the breadcrumb as natural inline text so a long article title wraps like a
     sentence (matches the PDP). A flex row wraps each crumb as an atomic block, which
     strands "Home" and orphans the "/" separator at the start of the next line. */
  .article .article-breadcrumbs-wrap .breadcrumbs ul {
    display: block;
    margin-top: var(--content-spacing-3);
    margin-bottom: var(--content-spacing-3);
  }
  @media only screen and (min-width: 768px) {
    .article .article-breadcrumbs-wrap .breadcrumbs ul {
      margin-bottom: var(--content-spacing-10);
    }
  }
  .article .article-breadcrumbs-wrap .breadcrumbs li {
    display: inline;
  }
  .article .article-breadcrumbs-wrap .breadcrumbs span,
  .article .article-breadcrumbs-wrap .breadcrumbs a {
    white-space: normal;
  }

  .article .article-header {
    margin-bottom: var(--content-spacing-6);
  }

  /* Tag badge — mirrors the article card tag badge (Linen pill, uppercase Work Sans) */
  .article .article-header__tags .badge-1 {
    display: inline-block;
    width: fit-content;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 20px;
    border-radius: 0;
    background-color: var(--brand-color-7);
    color: var(--text-color);
  }

  /* Author + date, and excerpt — Work Sans 500, 15px, +4% tracking, uppercase */
  .article .article-header__meta,
  .article .article-header__excerpt {
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .article .article-header__excerpt {
    margin-top: var(--content-spacing-1);
  }

  /* Embeds have no intrinsic size like <img>, so make them responsive with an explicit
     width + 16:9 ratio (otherwise a fixed-size iframe can't stretch or keep its shape). */
  .article .article-content iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Let images / embeds bleed to the page edges within the narrow content on mobile */
  @media only screen and (max-width: 767.98px) {
    .article .article-content img,
    .article .article-content iframe {
      margin-left: -20px;
      max-width: calc(100% + 40px);
    }
    .article .article-content iframe {
      width: calc(100% + 40px);
    }
  }
/* END_SECTION:article */

/* START_SECTION:blog-header (INDEX:10) */
.blog-header .blog-header-inner {
    padding-bottom: 60px;
  }
  .blog-header .blog-header-inner .content {
    margin-top: 40px;
  }
  .blog-header .blog-header-container .blog-header-grid .media .media-item {
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 767.98px) {
    .blog-header .blog-header-inner {
      padding-bottom: 40px;
    }
    .blog-header .blog-header-inner .content {
      margin-top: 55px;
    }
    .blog-header .blog-header-container .blog-header-grid .content {
      order: 2;
    }
    .blog-header .blog-header-container .blog-header-grid .media {
      order: 1;
      aspect-ratio: 3/2;
    }
    .blog-header .blog-header-container .blog-header-grid .media .media-item {
      position: relative;
      left: calc(-1 * var(--page-width-padding));
      width: calc(100% + (var(--page-width-padding) * 2));
    }
  }

  .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container picture,
  .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container img,
  .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container svg,
  .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point comes from `image.liquid`'s .img-focal rule (desktop + mobile). */
  }

  @media only screen and (max-width: 767.98px) {
    .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container picture,
    .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container img,
    .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container svg,
    .blog-header .blog-header-container .blog-header-grid .media .media-item .media-wrapper .media-container video {
      left: 0;
      width: 100%;
      transform: unset;
    }

    .blog-header .full-width .content.span-centre .filter-by-text {
      margin-inline: auto;
    }
  }

  .blog-header .full-width .content {
    z-index: 1;
  }

  .blog-header .full-width .content.truncate-text .rte {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--webkit-line-clamp);
    line-clamp: var(--webkit-line-clamp);
  }

  .blog-header .full-width .content.span-centre {
    text-align: center;
  }
  .blog-header .full-width .content.span-centre a:not(.blog-filter-button) {
    display: block;
    margin-inline: auto;
  }

  @media only screen and (min-width: 768px) {
    .blog-header .full-width .content.span-centre {
      grid-column: 4 / 10;
      padding-inline: 0;
    }
  }
/* END_SECTION:blog-header */

/* START_SECTION:blog-slider (INDEX:11) */
.blog-slider__body {
    position: relative;
  }

  /* Anchor scroll offset — clears the sticky header when a skip-to pill jumps here */
  .blog-slider-section .section-container[id] {
    scroll-margin-top: calc(var(--header-height, 120px) + 60px);
  }

  /* Each blaze slide is 50%: the featured fills its slide (matching the pair height) */
  .blog-slider__slide--featured,
  .blog-slider__slide--featured .article-card {
    height: 100%;
  }

  /* A pair slide holds 2 compact cards (each = 25% of the row) */
  .blog-slider__slide--pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--grid-gap);
  }

  /* A single slide holds one compact card (equal-card / no-featured mode) */
  .blog-slider__slide--single,
  .blog-slider__slide--single .article-card {
    height: 100%;
  }

  /* Inline mode only (arrows on the slider edges) — scoped to the slider body so it never
     affects the header arrows. High z-index so the prev arrow sits above the featured slide. */
  .blog-slider__body .blaze-navigation-arrows {
    pointer-events: none;
  }

  .blog-slider__body .blaze-navigation-arrows .blaze-button-prev,
  .blog-slider__body .blaze-navigation-arrows .blaze-button-next {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    z-index: 10;
  }

  .blog-slider__body .blaze-navigation-arrows .blaze-button-prev {
    left: 0;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .blog-slider__body .blaze-navigation-arrows .blaze-button-next {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
  }

  .blog-slider__viewall-mobile {
    align-self: flex-start;
  }

  /* ---- Mobile: static featured + individual-card scroll slider ---- */
  .blog-slider__featured-mobile .article-card--overlay {
    height: auto;
    aspect-ratio: 320 / 226;
  }

  .blog-slider__mobile-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .blog-slider__mobile-track::-webkit-scrollbar {
    display: none;
  }

  .blog-slider__mslide {
    flex: 0 0 auto;
    width: 70%;
    scroll-snap-align: start;
  }

  @media only screen and (max-width: 767.98px) {
    /* No arrows on mobile */
    .blog-slider .blaze-navigation-arrows {
      display: none;
    }

    /* Full-bleed the mobile slider to the screen edges. The first card still starts 20px in
       (aligned to the content margin) but the track slides the full width to the right edge. */
    .blog-slider__mobile {
      margin-left: calc(-1 * var(--page-width-padding-mobile));
      margin-right: calc(-1 * var(--page-width-padding-mobile));
    }
    .blog-slider__mobile-track {
      padding-left: var(--page-width-padding-mobile);
      /* Inset the snap point too, otherwise mandatory snapping pulls the first card
         back to the very edge and cancels the padding. */
      scroll-padding-left: var(--page-width-padding-mobile);
    }
  }
/* END_SECTION:blog-slider */

/* START_SECTION:blog (INDEX:12) */
/* ---- Toolbar ---- */
  .blog-toolbar {
    margin-bottom: var(--content-spacing-6);
    padding-bottom: var(--content-spacing-5);
    border-bottom: 1px solid rgba(57, 57, 57, 0.15);
  }

  .blog-toolbar__search {
    flex: 0 1 320px;
    max-width: 320px;
  }
  .blog-toolbar__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--brand-color-4);
    border-radius: 0;
    background: var(--brand-color-2);
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    -webkit-appearance: none;
    appearance: none;
  }
  .blog-toolbar__search-input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
  }
  .blog-toolbar__search-input:focus {
    outline: none;
    border-color: var(--text-color);
  }
  .blog-toolbar__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  .blog-toolbar__search-icon,
  .blog-toolbar__search-clear {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    line-height: 0;
  }
  .blog-toolbar__search-clear {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .blog-toolbar__search-icon svg {
    display: block;
    width: 17px;
    height: 17px;
  }
  .blog-toolbar__search-icon[hidden],
  .blog-toolbar__search-clear[hidden] {
    display: none;
  }

  /* ---- Tag dropdown (the alternative to the pills) ---- */
  .blog-toolbar__filter {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .blog-toolbar__filter-select {
    box-sizing: border-box;
    min-width: 200px;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--brand-color-4);
    border-radius: 0;
    background: var(--brand-color-2);
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .blog-toolbar__filter-select:focus {
    outline: none;
    border-color: var(--text-color);
  }
  .blog-toolbar__filter-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
    line-height: 0;
  }
  .blog-toolbar__filter-chevron svg {
    width: 14px;
    height: 14px;
  }

  /* ---- Tag pills (mirrors the predictive-search .ps-pill / .ps-tab styling) ---- */
  .blog-toolbar__tabs {
    display: flex;
    flex: 0 1 auto;
    gap: var(--content-spacing-2, 10px);
    min-width: 0;
    margin-left: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-toolbar__tabs::-webkit-scrollbar {
    display: none;
  }
  /* Scoped under the container so these beat critical.css's `button:not([class^="button-"])`
     reset (0,1,1) — a bare `.blog-pill` (0,1,0) loses to it and the pill renders borderless. */
  .blog-toolbar__tabs .blog-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 7px 18px;
    border: 1px solid color-mix(in srgb, var(--brand-color-1) 25%, transparent);
    border-radius: 100px;
    background: transparent;
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  /* Pills are anchors now, so pin the colour and kill the underline — critical.css's
     `a:not([class^="button-"]):hover` would otherwise recolour the label gold on hover. */
  .blog-toolbar__tabs .blog-pill,
  .blog-toolbar__tabs .blog-pill:hover,
  .blog-toolbar__tabs .blog-pill:focus {
    color: var(--text-color);
    text-decoration: none;
  }
  .blog-toolbar__tabs .blog-pill:hover {
    border-color: var(--brand-color-4);
  }
  .blog-toolbar__tabs .blog-pill.is-active {
    background: var(--brand-color-4);
    border-color: var(--brand-color-4);
    cursor: default;
  }
  .blog-toolbar__tabs .blog-pill:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
  }

  /* ---- Grid ---- */
  .blog-listing .blog-grid {
    display: grid;
    gap: clamp(
      var(--grid-gap-mobile),
      calc(var(--grid-intercept) + var(--grid-slope) * 1vw),
      var(--grid-gap)
    );
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }

  /* Featured post spans 2 columns and a single row; its height comes from the compact cards
     beside it in the same row (like the blog slider's featured). */
  .blog-listing .blog-grid > .article-card--overlay {
    grid-column: span 2;
    grid-row: span 1;
  }

  .blog-grid__empty {
    grid-column: 1 / -1;
    padding: var(--content-spacing-6) 0;
    text-align: center;
  }

  /* Dim the grid while a search / filter request is in flight */
  .blog-grid-region.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /* Tablet — 3 columns, featured stays 2 wide */
  @media only screen and (max-width: 991.98px) {
    .blog-listing .blog-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Mobile — 2 columns; featured goes full width with a landscape ratio (matches the slider) */
  @media only screen and (max-width: 767.98px) {
    .blog-toolbar__search {
      flex: 1 1 100%;
      max-width: none;
    }
    .blog-toolbar__filter,
    .blog-toolbar__filter-select {
      width: 100%;
      margin-left: 0;
    }

    /* Pills scroll sideways rather than wrapping onto several rows. Bleed to the page edges so
       the row reads as scrollable, and hide the scrollbar. */
    .blog-toolbar__tabs {
      width: 100%;
      margin-left: 0;
      padding-inline: var(--page-width-padding-mobile, 20px);
      margin-inline: calc(-1 * var(--page-width-padding-mobile, 20px));
    }
    .blog-listing .blog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .blog-listing .blog-grid > .article-card--overlay {
      grid-column: 1 / -1;
      grid-row: auto;
      height: auto;
      aspect-ratio: 320 / 226;
    }
  }
/* END_SECTION:blog */

/* START_SECTION:cart (INDEX:17) */
/* -----------------------
    Cart Section Styles
  ----------------------- */

  body {
    overflow-x: hidden;
  }

  #cart-container {
    background: var(--body-background-color, #fff);
  }

  /* -----------------------
    Heading Wrapper
  ----------------------- */
  #cart-container .heading-wrapper {
    gap: 40px;
    margin-bottom: 45px;
  }

  #cart-container .heading-wrapper .title-counter {
    gap: 10px;
  }

  #cart-container .heading-wrapper .cart__title {
    font-weight: 400;
    line-height: 1;
  }

  @media (max-width: 640px) {
    #cart-container .heading-wrapper {
      margin-bottom: 20px;
    }

    #cart-container .heading-wrapper .title-counter {
      justify-content: center;
      width: 100%;
    }
  }

  /* -----------------------
    Cart Layout
  ----------------------- */
  #cart-container .cart {
    gap: 30px;
  }

  @media (max-width: 1024px) {
    #cart-container .cart {
      flex-flow: column nowrap;
    }
  }

  /* Items wrapper */
  #cart-container .cart .items-wrapper {
    /* min-width: 0 lets this flex child shrink below its content's intrinsic width. Without it,
       the wide blaze track in the upsell slider forces the whole .cart flex row past the viewport
       (page overflow-x). With it, the slider clips/scrolls inside its own overflow:hidden track. */
    min-width: 0;
  }

  /* -----------------------
    Cart Details
  ----------------------- */
  #cart-container .cart-details {
    box-sizing: border-box;
    width: 380px;
    min-width: 200px;
    margin-left: auto;
    padding: 0;
  }

  @media (max-width: 1024px) {
    #cart-container .cart-details {
      width: 100%;
    }
  }

  /* Mobile: break the summary out of the page-width padding so it's flush to the screen edges. */
  @media (max-width: 767.98px) {
    #cart-container .cart-details {
      width: auto;
      margin-right: calc(-1 * var(--page-width-padding-mobile));
      margin-left: calc(-1 * var(--page-width-padding-mobile));
    }
  }

  #cart-container .cart-details {
    background: transparent;
  }

  #cart-container .cart-details__inner {
    top: 9rem;

    /* border: 1px solid var(--brand-color-5, #e9e9e9); */
    background: var(--brand-color-4);
  }

  /* Order summary — mirrors the side cart (subtotal + compare, Diamond Points, checkout, finance).
     These styles live in side-cart.liquid's stylesheet, which isn't loaded on the cart page, so
     they're replicated here. */
  #cart-container .cart-details__inner > * {
    width: 100%;
  }
  #cart-container .cart-details__inner {
    gap: var(--content-spacing-2);
  }
  #cart-container .subtotal-heading {
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
  }
  #cart-container .subtotal-heading__label {
    font-weight: 600;
  }
  #cart-container .subtotal-heading__count {
    font-weight: 400;
  }
  #cart-container .sub-total {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 600;
  }
  #cart-container .sub-total__compare {
    font-weight: 400;
    opacity: 0.5;
  }
  #cart-container .diamond-points-row {
    color: var(--brand-color-1);
    opacity: 0.7;
  }
  #cart-container .diamond-points-row__icon {
    display: inline-flex;
  }
  #cart-container .diamond-points-row__icon svg {
    width: 17px;
    height: 17px;
  }
  #cart-container .cart__checkout-button {
    height: 44px;
  }
  #cart-container .express-options-text {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
  }

  /* Space between stacked upsell blocks ("Protect your jewellery" then "Complete the look").
     Adjacent-sibling rather than a plain top margin, so the first block still sits tight to the
     cart items and any future block gets the gap automatically. */
  #cart-container .cart-upsell-wrap + .cart-upsell-wrap {
    margin-top: var(--content-spacing-8);
  }

  /* Accepted payment methods under the checkout button. The shared snippet's wrapper is
     `max-w-max`, so centring happens on the flex parent; the list itself re-centres when it
     wraps to a second row on narrow summaries. */
  #cart-container .cart__payment-icons {
    margin-top: 15px;
  }
  #cart-container .cart__payment-icons .payment-icons-list {
    justify-content: center;
  }
  /* payment_type_svg_tag emits SVGs with their own intrinsic size — pin the height so the row
     is even, and let width follow each brand's aspect ratio. */
  #cart-container .cart__payment-icons .payment-icons-list .icon {
    width: auto;
    height: 24px;
  }

  /* -----------------------
    Cart Item Styles
  ----------------------- */

  #cart-container .items:first-child {
    padding-top: 22px;
    border-top: 1px solid;
    border-color: var(--brand-color-5);
  }

  #cart-container .item.side-cart-item,
  #cart-container .items > div:not([data-variant-id]) {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid;
    border-color: var(--brand-color-5);
  }

  /* Base divider setup (but not active yet) */
  #cart-container .items > div::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--brand-color-5);
    content: '';
    pointer-events: none;
    opacity: 0; /* default hidden */
  }

  /* Add the border only when the next sibling is NOT a non-variant item */
  #cart-container .item.side-cart-item[data-variant-id]:has(+ .item[data-variant-id]) {
    margin-bottom: 30px; /* increase space */
    padding-bottom: 30px;
  }

  #cart-container .personalised {
    margin-right: auto;
  }

  #cart-container .item {
    width: 100%;
  }

  #cart-container .item .title {
    width: 100%;
    margin-bottom: 0;
  }

  #cart-container .item .quantity-remove-wrapper {
    align-self: stretch;
  }

  /* -----------------------
    Cart Item — DESKTOP only (mobile stays identical to the side cart). The desktop 2-column cart
    layout kicks in at ≥1025px, so the larger item treatment matches it.
  ----------------------- */
  @media (min-width: 1025px) {
    #cart-container .item {
      gap: var(--content-spacing-6); /* g-6 */
    }

    /* Larger product image */
    #cart-container .item .img-wrapper {
      width: 178px;
      height: 204px;
    }

    /* Product name (Libre Caslon) */
    #cart-container .item .title .product-link {
      max-width: 80%;
      font-family: var(--heading-font-family);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.2;
    }

    /* Delete icon to the right of the title (title row is already flex-between). Full size here —
     the side cart renders the same snippet at a smaller 14x18. */
    #cart-container .item .cart-remove-wrap {
      display: flex;
    }
    #cart-container .item .remove-button button {
      width: 18px;
      max-width: 18px;
      height: 23px;
    }

    /* Price on the right, quantity on the left (reverse), centred */
    #cart-container .item .price {
      flex-direction: row-reverse;
    }
    #cart-container .item .price .price-amounts {
      align-items: center;
      text-align: center;
    }
    #cart-container .item .price .bold {
      font-size: 22px;
    }
    #cart-container .item .price .strikethrough {
      font-size: 14px;
    }

    /* Finance line below the price */
    #cart-container .item .cart-item-finance {
      display: block;
      text-align: right;
    }
  }

  /* -----------------------
    Empty Cart Styles
  ----------------------- */
  .cart-no-items {
    text-align: center;
  }

  .cart-no-items__title {
    margin-bottom: 20px;
  }

  .cart-no-items a {
    display: block;
    margin: 0 auto;
  }

  .cart-no-items .back-link {
    margin-top: 1rem;
    color: #000;
    font-size: 14px;
    text-decoration: underline;
  }

  /* -----------------------
    Free shipping
  ----------------------- */

  #cart-container .free-delivery-status {
    margin-bottom: 33px;
    border: 1px solid var(--brand-color-6, #b4b4b4);
  }

  /* -----------------------
    ASSETSURE (app extension)
    Mirrors the side cart — those rules live in side-cart.liquid's stylesheet, which isn't loaded
    on the cart page, so they're replicated here scoped to #cart-container. Keep the two in sync.
  ----------------------- */
  #cart-container assetsure-cover-cart .assetsure-title {
    font-weight: 600;
    text-transform: inherit;
  }

  #cart-container assetsure-cover-cart .assetsure-summary {
    display: none;
  }

  /* critical.css draws its own checkbox tick via ::after and shows it on :checked — suppress it
     here so only the background-image tick below renders. */
  #cart-container assetsure-cover-cart label input[type='checkbox']::after {
    display: none;
  }

  /* NB the tick SVGs are data URIs, and custom properties can't be interpolated inside url(), so
     the fills are literal: %23404040 is --brand-color-1. Update if that token changes. */
  #cart-container assetsure-cover-cart input[type='checkbox'] {
    border: 1px solid var(--brand-color-1);
    border-radius: 3px;
  }

  #cart-container assetsure-cover-cart input[type='checkbox']:hover {
    border-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23404040' fill-opacity='0.4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  #cart-container assetsure-cover-cart input[type='checkbox']:checked {
    border-color: var(--brand-color-1);
    background-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  #cart-container assetsure-cover-cart a {
    font-weight: 600;
    color: var(--brand-color-1) !important;
  }
/* END_SECTION:cart */

/* START_SECTION:category-cta (INDEX:18) */
/* Flush grid: featured row (2-up) then the rest (3-up), no gaps */
  .category-cta__featured {
    display: grid;
    grid-template-columns: repeat(var(--cta-featured-cols, 2), 1fr);
  }

  .category-cta__rest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .category-cta__tile {
    height: var(--cta-tile-h, 520px);
  }

  .category-cta__tile > picture,
  .category-cta__tile > img,
  .category-cta__tile > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .category-cta__gradient {
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.055) 66.06%, rgba(0, 0, 0, 0.55) 100%);
  }

  .category-cta__content {
    left: 0;
    bottom: 0;
    z-index: 1;
    padding: clamp(20px, 2.5vw, 40px);
    color: var(--text-color-alternate);
  }

  /* Uniform link type = H1 token (Libre Caslon 400, 32/22px, 122% lh) */
  .category-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin: 0;
    color: var(--text-color-alternate);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Keep the text colour on hover (override the global link-hover highlight) */
  .category-cta .category-cta__link:hover {
    color: var(--text-color-alternate);
  }

  /* Arrow: fixed-height chevron head + a shaft (arm) that grows on hover */
  .category-cta__arrow {
    display: inline-flex;
    align-items: center;
    height: 12px;
  }

  .category-cta__arrow-shaft {
    width: 34px;
    height: 1.5px;
    background: currentColor;
    transition: width 0.25s ease;
  }

  .category-cta__arrow-head {
    flex: 0 0 auto;
    width: 7px;
    height: 12px;
    margin-left: -7px;
  }

  .category-cta__link:hover .category-cta__arrow-shaft {
    width: 54px;
  }

  /* Mobile: featured tiles stack, the rest become a peek slider */
  @media only screen and (max-width: 767.98px) {
    .category-cta__featured {
      grid-template-columns: 1fr;
    }

    .category-cta__rest {
      display: flex;
      grid-template-columns: none;
      padding-inline: var(--page-width-padding-mobile, 20px);
      scroll-padding-left: var(--page-width-padding-mobile, 20px);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .category-cta__rest::-webkit-scrollbar {
      display: none;
    }

    .category-cta__rest > .category-cta__tile {
      flex: 0 0 80%;
      scroll-snap-align: start;
    }

    .category-cta__tile {
      height: var(--cta-tile-h-mobile, 300px);
    }
  }
/* END_SECTION:category-cta */

/* START_SECTION:certification-stack (INDEX:19) */
.certification-stack .cert-stack__list {
    display: flex;
    flex-direction: column;
    gap: var(--cert-card-gap, 30px);
  }

  .certification-stack .cert-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cert-card-bg, #fcfcfc);
    color: var(--cert-card-text, var(--text-color));
    border-radius: var(--global-radius, 0);
    overflow: hidden;
    isolation: isolate;
  }

  .certification-stack .cert-card__content {
    justify-content: center;
    padding: clamp(24px, 4vw, 60px);
  }

  .certification-stack .cert-card__heading {
    font-family: var(--heading-font-family);
  }

  .certification-stack .cert-card__media {
    min-height: var(--cert-media-min-height, 460px);
  }

  .certification-stack .cert-card__media img,
  .certification-stack .cert-card__media picture,
  .certification-stack .cert-card__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Desktop: sticky-stack. Each card pins just below the header and the next
     card scrolls up over it. The last card is the final child, so it releases
     as the section ends and the page scrolls on normally. */
  @media screen and (min-width: 768px) {
    .certification-stack.cert-stack--sticky .cert-card {
      position: sticky;
      top: calc(var(--header-height, 120px) + var(--cert-stack-offset, 40px));
    }
  }

  /* Mobile: no pinning — cards stack in normal flow, image on top.
     Full-bleed the cards flush to the screen edges (past the section's
     horizontal padding) and drop the corner radius so they sit edge to edge. */
  @media screen and (max-width: 767.98px) {
    .certification-stack .cert-card {
      display: flex;
      flex-direction: column;
      margin-inline: calc(-1 * var(--page-width-padding-mobile));
      border-radius: 0;
    }
    .certification-stack .cert-card__media {
      order: -1;
      min-height: 0;
      aspect-ratio: 4 / 3;
    }
  }
/* END_SECTION:certification-stack */

/* START_SECTION:collection-header (INDEX:20) */
/* Min height + vertical centring. Breadcrumb stays at the top (in flow); the content is
     centred in the remaining height set for desktop. */
  .page-header .page-header-container {
    min-height: var(--ph-min-height, 0);
  }

  .page-header .page-header-container .page-header__inner {
    display: flex;
    flex-direction: column;
    min-height: var(--ph-min-height, 0);
  }

  .page-header .page-header__inner .page-header-grid {
    flex: 1 1 auto;
  }

  /* Full width: centre the content block over the image */
  .page-header .full-width .page-header__inner .page-header-grid {
    align-content: center;
  }

  /* Side by side: text centres in its column, image fills the height */
  .page-header .side-by-side .page-header__inner .page-header-grid {
    align-items: center;
  }
  .page-header .side-by-side .page-header__inner .page-header-grid .media {
    align-self: stretch;
  }

  /* Text colour override (desktop) — also recolours the breadcrumb when an override is set */
  .page-header .content {
    color: var(--ph-text-color-desktop, inherit);
  }

  .page-header-wrapper.ph-override-desktop .page-header__breadcrumbs,
  .page-header-wrapper.ph-override-desktop .page-header__breadcrumbs a,
  .page-header-wrapper.ph-override-desktop .page-header__breadcrumbs span {
    color: var(--ph-text-color-desktop);
  }

  @media only screen and (max-width: 767.98px) {
    .page-header .page-header-container,
    .page-header .page-header-container .page-header__inner {
      min-height: var(--ph-min-height-mobile, 0);
    }

    .page-header .content {
      color: var(--ph-text-color-mobile, inherit);
    }

    .page-header-wrapper.ph-override-mobile .page-header__breadcrumbs,
    .page-header-wrapper.ph-override-mobile .page-header__breadcrumbs a,
    .page-header-wrapper.ph-override-mobile .page-header__breadcrumbs span {
      color: var(--ph-text-color-mobile);
    }

    /* Mobile content position within the header height (middle / bottom only) */
    .page-header .mob-content-middle .page-header__inner .page-header-grid {
      align-content: center;
    }
    .page-header .mob-content-bottom .page-header__inner .page-header-grid {
      align-content: flex-end;
    }

    /* Mobile text alignment */
    .page-header .mob-text-left .content {
      text-align: left;
    }
    .page-header .mob-text-center .content {
      text-align: center;
    }
    .page-header .mob-text-right .content {
      text-align: right;
    }
  }

  .page-header .page-header-container .page-header-grid .media .media-item {
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 767.98px) {
    .page-header .page-header-container .page-header-grid .content {
      order: 2;
    }
    .page-header .page-header-container .page-header-grid .media {
      order: 1;
      aspect-ratio: 3/2;
    }
    .page-header .page-header-container .page-header-grid .media .media-item {
      position: relative;
      left: calc(-1 * var(--page-width-padding));
      width: calc(100% + (var(--page-width-padding) * 2));
    }
  }

  @media only screen and (min-width: 768px) {
    .page-header
      .side-by-side
      .page-header-container
      .page-header-grid
      .media
      .media-item
      .media-wrapper {
      width: calc((100vw / 2) - (var(--page-width-padding) - 58px));
    }
  }

  .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container picture,
  .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container img,
  .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container svg,
  .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point comes from `image.liquid`'s .img-focal rule (desktop + mobile). */
  }

  @media only screen and (max-width: 767.98px) {
    .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container picture,
    .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container img,
    .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container svg,
    .page-header .page-header-container .page-header-grid .media .media-item .media-wrapper .media-container video {
      left: 0;
      width: 100%;
      transform: unset;
    }
  }

  .page-header .full-width .content {
    z-index: 1;
  }

  .page-header .content.truncate-text .rte {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--webkit-line-clamp);
    line-clamp: var(--webkit-line-clamp);
  }

  .page-header .full-width .content.span-centre {
    text-align: center;
  }

  @media only screen and (min-width: 768px) {
    .page-header .full-width .content.span-centre {
      grid-column: var(--ph-content-col-start, 4) / span var(--ph-content-span, 6);
      padding-inline: 0;
    }
  }
/* END_SECTION:collection-header */

/* START_SECTION:collection (INDEX:21) */
/* Sub-collection slider — sits above the filter bar. Vertical spacing uses the theme's
     fluid section-spacing tokens (equal gap above and below). */
  .sub-collection-slider {
    --sub-slider-spacing: clamp(
      var(--spacing-sections-mobile),
      calc(var(--spacing-intercept) + var(--spacing-slope) * 1vw),
      var(--spacing-sections-desktop)
    );
    margin-top: var(--sub-slider-spacing);
    margin-bottom: var(--sub-slider-spacing);
  }

  /* Card: centred small-caps title under a square image (matches the design) */
  .sub-collection-slider .collection-card--simple {
    text-align: center;
  }

  /* No blend mode here — the images can be transparent PNGs, which sit on the page background
     as-is. (This previously used `mix-blend-mode: multiply` over an explicit backdrop to dissolve
     white studio backgrounds; that would darken a transparent or dark image.) */
  .sub-collection-slider .card-image {
    max-height: 170px;
    max-width: 170px;
    margin: 0 auto;
  }
  .sub-collection-slider .collection-card__title {
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  /* Arrows on desktop only — mobile is swipe with a slide peek */
  @media (max-width: 767.98px) {
    .sub-collection-slider .blaze-navigation-arrows {
      display: none;
    }

    /* Full-bleed on mobile: break out of the page width so the peeking slide reaches the
       screen edge. First slide stays aligned to the page padding (left), bleeds off the right. */
    .slider-section.sub-collection-slider {
      width: 100vw;
      max-width: none;
      margin-left: calc(-50vw + 50%);
      padding-left: var(--page-width-padding-mobile);
      padding-right: 0;
    }

    /* Dim the partially-visible (peeking) slide so the 0.5 reads as "swipe for more".
       `.is-peek` is toggled by slider-peek.js based on geometry. */
    .sub-collection-slider .blaze-track > .is-peek {
      opacity: 0.5;
      transition: opacity 0.3s ease;
    }
  }

  .collection-grid {
    gap: clamp(
      var(--listing-grid-gap-mobile),
      calc(var(--listing-grid-intercept) + var(--listing-grid-slope) * 1vw),
      var(--listing-grid-gap)
    );
  }
  .collection-listing .collection-grid-filters {
    /* Give the vertical filters a comfortable, roomy width instead of a narrow ~20%
       column: at least 300px, ~26% of the row, capped at 380px so it never gets
       cramped on smaller desktops nor over-wide on large ones. Products take the rest. */
    grid-template-columns: clamp(300px, 26%, 380px) 1fr;
  }
  .collection-listing .collection-grid-filters.horizontal-filters {
    grid-template-columns: 1fr;
  }
  /* Horizontal layout keeps the auto-fill grid; the vertical layout uses fixed columns below. */
  .collection-listing .collection-grid-filters.horizontal-filters .collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 20vw, 340px), 1fr));
  }
  .collection-listing .plp-cta-card {
    min-height: 454px;
  }

  @media (max-width: 991.98px) {
    .collection-listing .collection-grid-filters {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767.98px) {
    .collection-listing .plp-cta-card {
      grid-column: span 2 !important;
      min-height: 454px;
    }
  }

  /* ============================================================
     Hide / Show Filters toolbar + fixed-column product grid
     (vertical filter layout). Columns by breakpoint & state:
       desktop >=1280  3 → 4   tablet 992–1280  2 → 3   mobile <992  2 (fixed)
     ============================================================ */
  /* Top row above the grid: Hide / Show filters toggle */
  .collection-toolbar-top {
    margin-bottom: var(--content-spacing-4);
  }

  /* Fixed action bar pinned to the viewport bottom: View-by-metal (left) + Sort (right).
     Publishes its own height as --collection-bar-height (see collection-toolbar.js) so the grid
     can reserve clearance for it. */
  .collection-toolbar-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    /* Bottom inset keeps the buttons above the iOS home indicator (viewport-fit=cover). */
    padding: var(--content-spacing-4) 0 calc(var(--content-spacing-4) + env(safe-area-inset-bottom, 0px));
    background: var(--brand-color-7);
    border-top: 1px solid var(--brand-color-4);
  }

  /* Sorting is handled by the toolbar/mobile bar on every viewport, so the sidebar's own sort
     control is hidden (kept in the DOM as #SortBy — the toolbar mirrors its value). */
  .collection-listing .vertical-filters .sort-container {
    display: none;
  }

  /* View by metal */
  .metal-view__label,
  .collection-toolbar__sort .sort-label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--text-color);
  }
  /* Swatches reuse the global .product-range-swatch (PDP) styles so they match 1:1.
     But these are <button>s, so the global `button:not([class^=button-])` reset strips the
     border (border: none) — which hides the selected ring. Re-assert the ring here, scoped high
     enough (0,2,0 / 0,3,0) to beat that reset. Active border-colour comes from the inline metal
     colour (metal swatches) or the gold-dust rule below (the "All" chip). */
  .metal-swatch {
    background: transparent;
    cursor: pointer;
  }
  .collection-toolbar-bar .metal-swatch {
    border: 1px solid transparent;
  }
  .collection-toolbar-bar .metal-swatch.is-active {
    padding: 4px;
    border-width: 2px;
    background: var(--body-background-color);
  }
  .collection-toolbar-bar .metal-swatch--all {
    border-color: var(--brand-color-4);
  }

  /* Styled tooltip (metal name) — shown above the swatch since the bar sits at the viewport
     bottom. `.product-range-swatch` clips overflow to keep the fill circular, so allow overflow
     here (the fill is self-clipped by its own border-radius). */
  .collection-toolbar-bar .metal-swatch {
    position: relative;
    overflow: visible;
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--brand-color-1);
    color: var(--text-color-alternate);
    font-family: var(--body-font-family);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 0;
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--brand-color-1);
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]::after,
  .collection-toolbar-bar .metal-swatch[data-tooltip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.2s ease;
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]:hover::after,
  .collection-toolbar-bar .metal-swatch[data-tooltip]:hover::before,
  .collection-toolbar-bar .metal-swatch[data-tooltip]:focus-visible::after,
  .collection-toolbar-bar .metal-swatch[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
  }

  /* Sort select */
  .toolbar-sort-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 41px;
    padding: 0 38px 0 15px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-6);
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
  }
  .collection-toolbar__sort .toolbar-sort-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    line-height: 0;
    pointer-events: none;
  }
  .collection-toolbar__sort .toolbar-sort-chevron svg {
    display: block;
    width: 12px;
    height: auto;
  }

  .collection-filter-toggle {
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-color);
    cursor: pointer;
  }
  .collection-filter-toggle:hover {
    color: var(--text-color-highlight, var(--brand-color-4));
  }
  .collection-filter-toggle__icon {
    line-height: 0;
  }
  .collection-filter-toggle__icon svg {
    display: block;
    width: 14px;
    height: 14px;
  }
  .collection-filter-toggle__label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
  }

  /* Hide-filters toggle is desktop/tablet only. On mobile the bottom bar becomes Filter + Sort. */
  @media (max-width: 991.98px) {
    .collection-toolbar-top {
      display: none;
    }
    .collection-toolbar-bar .metal-view {
      display: none;
    }
    /* Mobile bar: Filter + Sort split evenly (50/50) with a 20px gap. */
    .collection-toolbar-bar .page-width {
      gap: 20px;
    }
    .collection-toolbar-bar .collection-toolbar__left,
    .collection-toolbar-bar .collection-toolbar__sort {
      flex: 1 1 0;
      min-width: 0;
    }
    .collection-toolbar-bar .toolbar-filter-btn {
      display: inline-flex;
      width: 100%;
      justify-content: space-between;
    }
    .collection-toolbar-bar .toolbar-sort-select {
      width: 100%;
    }
  }

  /* Filter button is mobile only (the sticky bar's Filter opener). Hidden on desktop — scoped to
     the bar so it beats the base `.collection-toolbar-bar .toolbar-filter-btn` rule below. */
  @media (min-width: 992px) {
    .collection-toolbar-bar .toolbar-filter-btn {
      display: none;
    }
  }
  /* Scoped to the bar so it beats the global `button:not([class^=button-])` reset. */
  .collection-toolbar-bar .toolbar-filter-btn {
    appearance: none;
    align-items: center;
    gap: 10px;
    height: 41px;
    padding: 0 15px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-6);
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
  }
  .toolbar-filter-btn__chevron {
    display: flex;
    line-height: 0;
  }
  .toolbar-filter-btn__chevron svg {
    display: block;
    width: 12px;
    height: auto;
  }

  /* Sidebar-collapse behaviour applies wherever the sidebar exists (>=992, tablet + desktop) */
  @media (min-width: 992px) {
    .collection-listing.filters-hidden .collection-grid-filters:not(.horizontal-filters) {
      grid-template-columns: 1fr;
    }
    .collection-listing.filters-hidden .vertical-filters {
      display: none;
    }
  }

  /* Desktop (>=1280): sidebar + 3-col grid; hidden → 4-col */
  @media (min-width: 1280px) {
    .collection-listing .collection-grid-filters:not(.horizontal-filters) .collection-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .collection-listing.filters-hidden .collection-grid-filters:not(.horizontal-filters) .collection-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Tablet (992–1280): sidebar + 2-col grid; hidden → 3-col */
  @media (min-width: 992px) and (max-width: 1279.98px) {
    .collection-listing .collection-grid-filters:not(.horizontal-filters) .collection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .collection-listing.filters-hidden .collection-grid-filters:not(.horizontal-filters) .collection-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Mobile (<992): always 2-col */
  @media (max-width: 991.98px) {
    .collection-listing .collection-grid-filters:not(.horizontal-filters) .collection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* The span-2 CTA can leave a one-cell gap whenever its row doesn't have room (hiding filters
     adds a column on desktop; the 2-col mobile grid has the same issue). Dense flow backfills
     that hole with the next product, keeping every row complete. It's a no-op where the layout
     is already gap-free. */
  .collection-listing .collection-grid-filters:not(.horizontal-filters) .collection-grid {
    grid-auto-flow: row dense;
  }
/* END_SECTION:collection */

/* START_SECTION:contact-form (INDEX:22) */
.contact-page .contact-page__title {
    margin: 0;
  }

  .contact-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--content-spacing-8), 6vw, 96px);
    align-items: start;
  }
  .contact-page__grid--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-page .contact-page__group-heading {
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
  }

  .contact-page .contact-details-list svg {
    flex: 0 0 auto;
  }

  /* Pulsing green status dot (e.g. opening-times response line) */
  .contact-page__status-dot {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4fb176;
  }
  .contact-page__status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4fb176;
    animation: contact-status-pulse 1.8s ease-out infinite;
  }
  @keyframes contact-status-pulse {
    0% {
      transform: scale(1);
      opacity: 0.5;
    }
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .contact-page__status-dot::after {
      animation: none;
    }
  }

  /* Contact link rows (right column) */
  .contact-link {
    padding: clamp(16px, 2vw, 22px) clamp(16px, 2.5vw, 28px);
    background: var(--brand-color-4);
  }
  .contact-link__number {
    font-family: var(--body-font-family);
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.5;
  }
  .contact-link__label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }
  .contact-link__button {
    flex: 0 0 auto;
    width: 185px;
    text-align: center;
  }
  @media only screen and (min-width: 768px) {
    .contact-link__label {
      font-size: 17px;
    }
  }

  @media only screen and (max-width: 991.98px) {
    .contact-page__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media only screen and (max-width: 767.98px) {
    .contact-page .contact-page__title {
      margin-bottom: 0;
    }
    /* Stacked, centred link rows on mobile (no number) */
    .contact-link {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--content-spacing-3);
    }
    .contact-link__number {
      display: none;
    }
    .contact-link__button {
      width: 100%;
      text-align: center;
    }
  }
/* END_SECTION:contact-form */

/* START_SECTION:content-image-slider (INDEX:23) */
.content-image-slider {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--grid-gap);
    align-items: center;
  }

  .content-image-slider--right {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  }

  .content-image-slider--right .content-image-slider__content {
    order: 2;
  }

  .content-image-slider--right .content-image-slider__slider {
    order: 1;
  }

  .content-image-slider__content {
    max-width: 460px;
  }

  /* Bleed the slider out of page-width to the right viewport edge; the clip stops
     any sub-pixel horizontal scroll. Content column stays inside page-width. */
  .content-image-slider-section {
    overflow-x: clip;
  }

  @media only screen and (min-width: 768px) {
    .content-image-slider__slider {
      margin-right: calc(-1 * max(
        clamp(
          var(--page-width-padding-mobile),
          calc(var(--padding-intercept) + var(--padding-slope) * 1vw),
          var(--page-width-padding)
        ),
        calc(50vw - var(--page-width) / 2)
      ));
    }
  }

  /* Slide images keep the blaze slide width (the image block's own rule sets width:auto,
     which would break slides-per-view sizing) but otherwise honour the block's own
     height / aspect-ratio settings. */
  .content-image-slider .image-block.image-wrapper.set-height {
    width: var(--slide-width);
    height: var(--height);
    aspect-ratio: auto;
  }

  .content-image-slider .image-block.image-wrapper.set-aspect {
    width: var(--slide-width);
  }

  .content-image-slider .image-block img,
  .content-image-slider .image-block > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media only screen and (max-width: 767.98px) {
    .content-image-slider,
    .content-image-slider--right {
      grid-template-columns: 1fr;
      align-items: initial;
      gap: var(--content-spacing-6);
    }

    /* Slider on top, full-bleed to both screen edges */
    .content-image-slider__slider {
      order: 1;
      margin-inline: calc(-1 * clamp(
        var(--page-width-padding-mobile),
        calc(var(--padding-intercept) + var(--padding-slope) * 1vw),
        var(--page-width-padding)
      ));
    }

    .content-image-slider__content {
      order: 2;
      max-width: none;
    }
  }
/* END_SECTION:content-image-slider */

/* START_SECTION:countdown-bar (INDEX:24) */
.countdown-bar {
    background: var(--cd-bg, var(--brand-color-5));
    color: var(--cd-color, var(--text-color));
    border-top: 1px solid var(--brand-color-3);
  }

  .countdown-bar__inner {
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
    text-align: center;
    color: inherit;
  }

  .countdown-bar__label {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
  }

  .countdown-bar__timer {
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 20px);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: inherit;
  }

  .countdown-bar__timer > span {
    display: inline-flex;
    align-items: baseline;
  }

  .countdown-bar__timer b {
    font-family: var(--body-font-family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
  }

  .countdown-bar__timer sup {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 500;
  }

  .countdown-bar__cta {
    white-space: nowrap;
    color: inherit;
  }

  /* Text-link style matches the detailed collection card's shop link (weight 500) */
  .countdown-bar__cta.button-6 {
    font-weight: 500;
  }

  @media only screen and (max-width: 767.98px) {
    .countdown-bar__inner {
      flex-direction: column;
      gap: 8px;
    }

    .countdown-bar__timer b {
      font-size: 22px;
    }
  }
/* END_SECTION:countdown-bar */

/* START_SECTION:cta-banner (INDEX:25) */
.cta-banner__inner {
    isolation: isolate;
  }

  .cta-banner__placeholder {
    min-height: 200px;
    background: var(--brand-color-4);
  }

  .cta-banner__bg img,
  .cta-banner__bg > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cta-banner__row {
    gap: clamp(24px, 4vw, 48px);
    padding-block: clamp(28px, 5vw, 48px);
  }

  .cta-banner__text {
    max-width: 560px;
  }

  .cta-banner__logo {
    flex: 0 0 auto;
    width: clamp(88px, 10vw, 124px);
  }

  .cta-banner__logo img,
  .cta-banner__logo > svg {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .cta-banner__divider {
    align-self: stretch;
    width: 1px;
    background: currentColor;
    opacity: 0.25;
  }

  /* Heading — Libre Caslon 400, 36px desktop (via heading-h2 token, keeps mobile scaling) */
  .cta-banner__heading {
    line-height: 1.22;
    letter-spacing: 0;
    text-align: center;
  }

  .cta-banner__subheading {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  @media only screen and (max-width: 767.98px) {
    .cta-banner__row {
      gap: var(--content-spacing-4);
    }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:cta-card-grid (INDEX:26) */
.cta-card-grid-container swiper-container::part(slide) {
  max-width: 100% !important;
}

.cta-card-grid .cta {
  height: var(--mobile-cta-card-height) !important;
}

/* Desktop swiper to grid override */
@media screen and (min-width: 768px) {
  .cta-card-grid .cta {
    height: var(--cta-card-height) !important;
  }
  /* Apply grid to wrapper, NOT swiper-container */
  .cta-card-grid-container .desktop-grid-wrapper.desktop {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--content-spacing-6);
  }

  .cta-card-grid-container .desktop-grid-wrapper.desktop .swiper-slide {
    display: none;
  }

  .cta-card-grid-container .desktop-grid-wrapper.desktop .desktop-slide:has(.span-4) {
    grid-column: span 4;
  }

  .cta-card-grid-container .desktop-grid-wrapper.desktop .desktop-slide:has(.span-6) {
    grid-column: span 6;
  }

  .cta-card-grid-container .desktop-grid-wrapper.desktop .desktop-slide:has(.span-12) {
    grid-column: span 12;
  }

  /* Hide swiper on desktop */
  .cta-card-grid-container .desktop-grid-wrapper.desktop swiper-container {
    display: none;
  }

  /* Show slides as direct children of grid wrapper */
  .cta-card-grid-container .desktop-grid-wrapper.desktop > .desktop-slide {
    display: block;
  }
}
/* END_SECTION:cta-card-grid */

/* START_SECTION:cta-product-grid (INDEX:27) */
.cta-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--grid-gap);
    align-items: stretch;
  }

  /* Default: the CTA card's aspect ratio drives the section height */
  .cta-product-grid__cta .cta {
    height: auto;
    aspect-ratio: var(--cpg-aspect, 608 / 754);
  }

  /* Viewport-height mode: a fixed vh height instead, CTA fills it */
  .cta-product-grid--vh {
    height: var(--cpg-vh, 80vh);
  }

  .cta-product-grid--vh .cta-product-grid__cta .cta {
    aspect-ratio: auto;
    height: 100%;
  }

  .cta-product-grid__placeholder {
    background: var(--brand-color-3);
  }

  /* Products fill the same height and scroll inside it (content is absolute so
     the product count never stretches the row past the CTA height) */
  .cta-product-grid__products-wrap {
    min-height: 0;
  }

  .cta-product-grid__products-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .cta-product-grid__products-scroll::-webkit-scrollbar {
    display: none;
  }

  .cta-product-grid__products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  /* Soft gradient that fades the bottom of the grid to soften the scroll.
     --cpg-fade-start (set by cta-product-grid.js) ramps toward 100% as the list is
     scrolled to the end, removing the fade so the last row isn't obscured. Defaults
     to 76% so the fade shows before the script runs / without JS. */
  .cta-product-grid__products-scroll--soften {
    --cpg-fade-start: 76%;
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--cpg-fade-start), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 var(--cpg-fade-start), transparent 100%);
  }

  /* Mobile: fixed CTA on top, products become a horizontal slider below */
  @media only screen and (max-width: 767.98px) {
    .cta-product-grid,
    .cta-product-grid--vh {
      grid-template-columns: 1fr;
      height: auto;
      gap: var(--content-spacing-6);
      align-items: initial;
    }

    /* Fixed mobile CTA aspect ratio (both height modes) */
    .cta-product-grid__cta .cta,
    .cta-product-grid--vh .cta-product-grid__cta .cta {
      aspect-ratio: 320 / 501;
      height: auto;
    }

    .cta-product-grid__products-scroll {
      position: static;
      inset: auto;
      overflow-y: visible;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .cta-product-grid__products {
      display: flex;
      gap: var(--grid-gap);
    }

    .cta-product-grid__slide {
      flex: 0 0 auto;
      width: 78%;
      scroll-snap-align: start;
    }
  }
/* END_SECTION:cta-product-grid */

/* START_SECTION:custom-section (INDEX:30) */
.custom-section .custom-grid {
    gap: clamp(
      var(--grid-gap-mobile),
      calc(var(--grid-intercept) + var(--grid-slope) * 1vw),
      var(--grid-gap)
    );
  }
/* END_SECTION:custom-section */

/* START_SECTION:divider (INDEX:31) */
.divider-section .divider-line {
    width: 100%;
    margin: 0;
  }
/* END_SECTION:divider */

/* START_SECTION:faq-group (INDEX:32) */
.faq-group .accordion:first-of-type {
    border-top: 1px solid var(--brand-color-4);
  }

  /* Optional image sits to the left on desktop */
  .faq-group__image {
    flex: 0 0 40%;
    align-self: stretch;
  }

  /* Body: heading (left) + "all FAQs" link (right) on one row, accordions full-width below */
  .faq-group__body {
    row-gap: var(--content-spacing-4);
  }

  .faq-group__body > .section-content {
    flex: 0 1 auto;
  }

  .faq-group__body > .section-navigation {
    margin-left: auto;
  }

  .faq-group__body > .faq-group__accordions {
    flex: 0 0 100%;
  }

  /* Mobile: one column — image on top, then heading, FAQs, and the "all FAQs" link last */
  @media screen and (max-width: 991.98px) {
    /* Image goes full-bleed (edge to edge, outside the page width) above the content */
    .faq-group__image {
      flex-basis: auto;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
    }

    .faq-group__body > .section-content {
      flex: 0 0 100%;
    }

    .faq-group__body > .faq-group__accordions {
      order: 2;
    }

    .faq-group__body > .section-navigation {
      order: 3;
      flex: 0 0 100%;
      margin-left: 0;
    }

    .faq-group__body > .section-navigation .section-navigation-container {
      justify-content: flex-start;
    }
  }
/* END_SECTION:faq-group */

/* START_SECTION:featured-product (INDEX:33) */
/* Card look (scoped to the featured-product section only — does not affect the PDP) */
  .featured-product .featured-product__media {
    background: var(--brand-color-2);
    align-self: center;
  }
  .featured-product .featured-product__panel {
    background: var(--brand-color-6);
  }
  .featured-product .grid-section {
    background: var(--brand-color-7);
    padding: 20px;
  }
  @media only screen and (max-width: 767.98px) {
    .featured-product .grid-section {
      background: none;
      padding: 0;
    }
    .featured-product .featured-product__panel {
      padding: 0;
    }
    /* Hide the size label (legend) and let the dropdown fill the width */
    .featured-product .variant-selector legend {
      display: none;
    }
    .featured-product custom-option-dropdown.custom-dropdown {
      max-width: 100%;
    }
  }
  .featured-product .featured-product__stars {
    align-self: flex-start;
    margin-bottom: var(--content-spacing-2);
  }

  /* Title → H3 sizing (product-title snippet outputs .heading-h1) */
  .featured-product .product-title.heading-h1 {
    font-family: var(--heading-h3-font-family);
    font-size: 22px;
    font-weight: var(--heading-h3-font-weight);
    line-height: var(--heading-h3-line-height);
  }

  /* Price → 14px, not bold (the values are .large-body-text .bold spans = 18px/bold) */
  .featured-product .product-price {
    font-weight: 400;
  }
  .featured-product .variant-prices-container .large-body-text {
    font-size: 14px;
    font-weight: 400;
  }

  /* Trim the fake-variant / description / quantity / find-size UI, the finance "from"
     label, and the price + dash inside the Add to bag button — upsell card only */
  .featured-product .product-description-container,
  .featured-product .product-range-block--band,
  .featured-product .product-range-block--stone,
  .featured-product .size-selector__find,
  .featured-product .quantity-total-wrapper,
  .featured-product .finance-options__from,
  .featured-product .finance-options__trigger,
  .featured-product [add-to-cart-label] [data-variant-price-submit],
  .featured-product [add-to-cart-label] span[aria-hidden="true"] {
    display: none;
  }

  /* Add to bag label uppercase */
  .featured-product [add-to-cart-label],
  .featured-product .product-submit-wrapper label input {
    text-transform: uppercase;
  }

  /* Layout: Assetsure spans the full width; ADD TO BAG + Product Details share the row below, 50/50.
     product-form is a flex column, so switch it to a 2-col grid. The Add-to-Bag button lives INSIDE
     the submit <form> (together with the app-injected <assetsure-cover-add-to-cart>), while the
     Product Details link is a sibling of the form — so unwrap the form + its inner container with
     display:contents to let Assetsure and the button row become grid items alongside the link. */
  .featured-product .product-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Title / price / description / selectors each span the full width. */
  .featured-product .product-form > * {
    grid-column: 1 / -1;
  }

  /* Unwrap the (doubly-nested) submit form so its children participate in the grid directly. */
  .featured-product .product-form > .product-submit-container,
  .featured-product .product-form > .product-submit-container > .product-submit-container {
    display: contents;
  }

  /* Assetsure = full row; ADD TO BAG (the submit wrapper) = left half; Product Details = right half. */
  .featured-product .product-form assetsure-cover-add-to-cart {
    grid-column: 1 / -1;
  }

  .featured-product .product-form .product-submit-wrapper {
    grid-column: 1 / 2;
    align-self: center;
  }

  .featured-product .product-form > .theme-link {
    grid-column: 2 / 3;
    align-self: center;
  }

  /* "Product Details" link — normal case, weight 400, underline kept (was uppercase / 600) */
  .featured-product .theme-link {
    text-align: center;
    text-transform: none;
    font-weight: 400;
    text-decoration: underline;
  }

  .featured-product .product-submit-container.with-sample [quick-add-qf] {
    order: 1 !important;
    flex: 1 !important;
  }
  .featured-product .product-submit-container .product-submit-wrapper label[add-to-cart-label] {
    order: 3 !important;
    flex: 1 !important;
    min-width: 100% !important;
  }

  /* -----------------------
    ASSETSURE (app extension) — same treatment as the PDP (sections/product.liquid), re-scoped to
    .featured-product. <assetsure-cover-add-to-cart> is injected into the product form by the
    Assetsure app block, so we override its styling from here to out-specify the app's own CSS.
  ----------------------- */
  .featured-product assetsure-cover-add-to-cart {
    background-color: var(--brand-color-4);
    border: none;
    border-radius: 0;
  }

  .featured-product assetsure-cover-add-to-cart .assetsure-title {
    font-weight: 600;
    font-size: 14px;
    text-transform: inherit;
  }

  /* critical.css draws its own checkbox tick via ::after and shows it on :checked — suppress it
     here so only the background-image tick below renders. */
  .featured-product assetsure-cover-add-to-cart label input[type='checkbox']::after {
    display: none;
  }

  /* NB the tick SVGs are data URIs, and custom properties can't be interpolated inside url(), so
     the fills are literal: %23404040 is --brand-color-1. Update if that token changes. */
  .featured-product assetsure-cover-add-to-cart input[type='checkbox'] {
    border: 1px solid var(--brand-color-1);
    border-radius: 3px;
  }

  .featured-product assetsure-cover-add-to-cart input[type='checkbox']:hover {
    border-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23404040' fill-opacity='0.4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .featured-product assetsure-cover-add-to-cart input[type='checkbox']:checked {
    border-color: var(--brand-color-1);
    background-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .featured-product assetsure-cover-add-to-cart a {
    font-weight: 600;
    color: var(--brand-color-1) !important;
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer (INDEX:34) */
.footer {
    border-top: 1px solid var(--brand-color-5);
  }

  .footer-wrapper {
    gap: var(--content-spacing-7, 48px);
  }

  /* ---- TOP: columns + signup ---- */
  .footer-top {
    align-items: flex-start;
  }

  .footer-columns {
    align-items: flex-start;
  }

  .footer-signup {
    flex: 0 0 clamp(320px, 34%, 480px);
  }

  .footer-signup__heading {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .footer-signup__text p {
    margin: 0;
  }

  .footer-signup__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-spacing-3, 12px);
  }

  .footer-signup__input {
    width: 100%;
    cursor: text;
  }

  .footer-signup__input--full {
    grid-column: 1 / -1;
  }

  .footer-signup__submit {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
    cursor: pointer;
    color: var(--text-color);
    border-color: var(--text-color);
  }

  .footer-signup__submit:hover {
    color: #1e1e1e;
    border-color: #1e1e1e;
  }

  .footer-signup__success {
    font-size: var(--input-font-size);
  }

  .footer-signup__message {
    margin-top: var(--content-spacing-2, 8px);
    color: var(--input-error-text-color);
    font-size: 0.85rem;
  }

  /* ---- MID: badges + social ---- */
  .footer-mid {
    flex-wrap: wrap;
    gap: var(--content-spacing-4, 20px);
    padding-top: var(--content-spacing-4, 16px);
    padding-bottom: var(--content-spacing-4, 16px);
  }

  .footer-badges {
    flex: 1 1 auto;
  }

  .footer-social .social-icon-block,
  .footer-social .social-icons {
    display: flex;
    align-items: center;
    gap: var(--content-spacing-4, 20px);
  }

  .footer-social .social-icons a {
    width: auto !important;
    height: auto !important;
  }

  .footer-social .social-icons svg {
    width: auto !important;
    height: 22px !important;
  }

  /* ---- BOTTOM ---- */
  .footer-bottom {
    padding-top: var(--content-spacing-8, 40px);
    border-top: 1px solid var(--brand-color-4);
  }

  .footer-copyright {
    font-size: 0.85rem;
  }

  .footer-locale {
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--body-font-family);
    font-size: 0.85rem;
    cursor: pointer;
  }

  .footer-locale__label {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .footer-locale__icon svg {
    width: 18px;
    height: 18px;
  }

  /* ---- LEGAL (with mobile "read more") ---- */
  .footer-legal {
    font-size: 0.72rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--section-text-color) 70%, transparent);
  }

  .footer-legal__text p {
    margin: 0;
  }

  .footer-legal__more {
    display: none;
  }

  /* ============ Responsive ============ */
  @media only screen and (max-width: 991.98px) {
    .footer-signup {
      flex: 0 0 38%;
    }
  }

  @media only screen and (max-width: 767.98px) {
    .footer-top {
      flex-direction: column;
      gap: 0;
    }

    /* Signup sits first on mobile */
    .footer-signup {
      flex: 1 1 auto;
      order: -1;
      width: 100%;
      padding-bottom: var(--content-spacing-5, 24px);
      border-bottom: 1px solid color-mix(in srgb, var(--brand-color-1) 20%, transparent);
    }

    .footer-columns {
      flex-direction: column;
      gap: 0;
      width: 100%;
    }

    .footer-signup__submit {
      justify-self: end;
    }

    /* Social above badges, both centred */
    .footer-mid {
      flex-direction: column-reverse;
      align-items: center;
      gap: var(--content-spacing-6, 30px);
      text-align: center;
    }

    .footer-badges {
      width: 100%;
    }

    .footer-social .social-icon-block {
      justify-content: center;
    }

    /* Locale above copyright, all centred */
    .footer-utility {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .footer-locale {
      order: -1;
    }

    .footer-copyright {
      text-align: center;
    }

    .footer-legal {
      text-align: center;
    }

    /* Clamp legal text until "Read more" is toggled */
    .footer-legal__text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    .footer-legal__toggle:checked ~ .footer-legal__text {
      -webkit-line-clamp: unset;
      overflow: visible;
    }

    .footer-legal__more {
      display: inline-block;
      margin-top: var(--content-spacing-2, 8px);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .footer-legal__toggle:checked ~ .footer-legal__more {
      display: none;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:full-width-image (INDEX:35) */
.full-width-image .full-width-image-container {
    width: 100%;
    height: var(--desktop-max-height, 200px);
    overflow: hidden;
  }

  @media only screen and (max-width: 767.98px) {
    .full-width-image .full-width-image-container {
      height: var(--mobile-max-height, 200px);
    }
  }

  .full-width-image .full-width-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .full-width-image .full-width-image-container.preserve-dimensions {
    height: auto;
  }

  .full-width-image .full-width-image-container.preserve-dimensions img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
/* END_SECTION:full-width-image */

/* START_SECTION:header (INDEX:36) */
/* -----------------------
    HEADER WRAPPER / SCROLL
  ----------------------- */
  .header-outer-shopify-wrapper {
    top: 0;
    transition: all 150ms ease-in-out;
  }

  .header-outer-shopify-wrapper.scrolled-past,
  .header-outer-shopify-wrapper.fixed {
    position: fixed;
    z-index: 99;
  }

  /* Keep the whole header group above the mega-menu scrim */
  #header-group {
    position: relative;
    z-index: 100;
  }

  /* Mega-menu hover scrim (page dim under the header) */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: color-mix(in srgb, var(--brand-color-1) 70%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
  }

  body:has(.header .mega-menu-group:hover)::after,
  body:has(.header .mega-menu-group:focus-within)::after {
    opacity: 1;
    visibility: visible;
  }

  .header {
    z-index: 999;
  }

  .header-nav-row {
    position: relative;
    background-color: var(--brand-color-5);
  }

  .header-main {
    background-color: var(--brand-color-2);
    color: var(--text-color);
  }

  .header .header-wrapper {
    padding-block: 12px;
  }

  /* Side zones flex to keep the logo centred */
  .header .header-left,
  .header .header-right {
    flex: 1 1 0;
    min-width: 0;
  }

  .header .header-right {
    justify-content: flex-end;
  }

  .header .logo-container {
    flex: 0 0 auto;
  }

  /* -----------------------
    LOGO
  ----------------------- */
  .header .store-logo--default {
    width: 194px;
    height: 47px;
  }

  .header .store-logo img {
    height: 67px;
    width: auto;
  }

  /* -----------------------
    SEARCH BAR
  ----------------------- */
  .header .header-search-bar {
    width: clamp(160px, 18vw, 187px);
  }

  .header .form-search-bar {
    width: 100%;
  }

  .header .header-search-input {
    width: 100%;
    height: 36px;
    padding: 0 40px 0 16px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background-color: var(--brand-color-6);
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    transition: border-color 0.2s ease;
  }

  .header .header-search-input::placeholder {
    color: var(--text-color);
    opacity: 1;
  }

  .header .header-search-input:focus {
    outline: none;
    border-color: var(--brand-color-1);
  }

  .header .form-search-bar .submit-group {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--icon-color);
  }

  .header .form-search-bar .submit-group svg {
    width: 18px;
    height: 16px;
  }

  .header .form-search-bar .submit-group svg path {
    stroke: var(--icon-color);
  }

  .header .form-search-bar .submit-group input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Header search close — hidden by default; only shown on mobile while the overlay is open.
     Sits just left of the search icon (submit-group is anchored at right: 10px). */
  .header .form-search-bar .header-search-close {
    display: none;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--icon-color);
  }

  .header .form-search-bar .header-search-close svg {
    width: 15px;
    height: 15px;
  }

  .header .form-search-bar .header-search-close svg path {
    stroke: var(--icon-color);
  }

  /* -----------------------
    MARKET SELECTOR
  ----------------------- */
  .header .header-market .market-placeholder,
  .header .header-market localization-form button {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .header .market-flag,
  .header .header-market localization-form img {
    width: 18px;
    height: auto;
    border-radius: 2px;
  }

  .header .market-caret svg,
  .header .header-market localization-form svg {
    width: 11px;
    height: auto;
  }

  /* -----------------------
    DIAMOND CLUB
  ----------------------- */
  .header .diamond-club {
    color: var(--text-color);
    transition: color 0.2s ease;
  }

  .header .diamond-club:hover {
    color: #1e1e1e;
  }

  .header .diamond-club__icon {
    display: inline-flex;
  }

  .header .diamond-club__icon svg {
    width: 22px;
    height: 22px;
  }

  .header .diamond-club__icon svg path {
    fill: currentColor;
  }

  .header .diamond-club__text {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .header .header-divider {
    width: 1px;
    height: 26px;
    background-color: color-mix(in srgb, var(--brand-color-1) 25%, transparent);
  }

  /* -----------------------
    HEADER ICONS (outline / stroke icons)
  ----------------------- */
  .header .header-icons {
    gap: 18px;
  }

  .header .header-icons a,
  .header .header-icons button,
  .header .header-mobile-left a,
  .header .header-mobile-left button,
  .header .header-mobile-right a,
  .header .header-mobile-right button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .header .header-icons a:hover,
  .header .header-icons button:hover {
    color: #1e1e1e;
  }

  .header .header-icons svg,
  .header .header-mobile-left svg,
  .header .header-mobile-right svg {
    width: auto;
    height: 22px;
  }

  .header .header__cart {
    position: relative;
  }

  .header .cart-count {
    top: -7px;
    right: -10px;
    width: 17px;
    height: 17px;
    padding-top: 1px;
    background-color: var(--brand-color-1);
    color: var(--text-color-alternate);
    font-family: var(--body-font-family);
    font-size: 10px;
    font-weight: 600;
  }

  .header .cart-count.empty-cart {
    display: none;
  }

  /* -----------------------
    MOBILE CONTROL (burger)
  ----------------------- */
  .header .mobile-control .closeMenu {
    display: none;
  }

  .header .mobile-control.active .openMenu {
    display: none;
  }

  .header .mobile-control.active .closeMenu {
    display: flex;
  }

  .header .mobile-control svg {
    width: auto;
    height: 22px;
  }

  /* -----------------------
    RESPONSIVE: desktop >= 992
  ----------------------- */
  .header .header-mobile-left,
  .header .header-mobile-right,
  .header .header-mobile-search {
    display: none;
  }

  @media screen and (max-width: 991.98px) {
    .header .header-left,
    .header .header-right,
    .header .header-nav-row {
      display: none;
    }

    .header .header-mobile-left,
    .header .header-mobile-right {
      display: flex;
      flex: 1 1 0;
    }

    .header .header-mobile-right {
      justify-content: flex-end;
    }

    .header .header-mobile-search {
      display: block;
      padding-block: 0 10px;
    }

    .header .header-mobile-search .header-search-input {
      height: 36px;
    }

    /* Reveal the header close button on mobile while the predictive search overlay is open. */
    body.predictive-search-open .header .header-mobile-search .header-search-close {
      display: inline-flex;
    }

    .header .store-logo--default,
    .header .store-logo img {
      height: 54px;
      width: auto;
    }

    .header .header-wrapper {
      padding-block: 5px;
    }
  }

  /* Swym wishlist launcher icon (app-injected) — scale up to match the other header icons */
  .swym-header-icon-html svg {
    transform: scale(1.2);
  }
/* END_SECTION:header */

/* START_SECTION:hero-slider (INDEX:37) */
/* ── Natural height ──────────────────────────────────────────────────
     Fixed mode: the media is absolutely positioned over a fixed-height box and cropped to fill it.
     Natural mode inverts that — the media returns to normal flow and the <img>, at height:auto,
     gives the slide its height. Same idea as `full-width-image`'s "preserve dimensions".

     Three things have to give way for that to work:

     1. The 12-column `.hero-grid`. In flow, `.media` becomes a grid item and gets squeezed into a
        column (with `.content` holding span-5) — which is why it first rendered as a small centred
        thumbnail. Collapsing the grid to a block gives the media the full width.
     2. `.page-width`'s max-width and padding. When absolute, the media escaped them by positioning
        against `.hero-container`; in flow it would sit inside them, so the strip would no longer be
        full-bleed.
     3. The `--height` min-heights. These selectors are deliberately one class deeper than the
        `.hero-slider …` rules further down (which would otherwise win on source order, leaving the
        section stuck at its fixed height with a small image floating in it). */
  .hero-slider .hero-wrapper--natural .page-width,
  body:has(.announcement-bar-section) .hero-slider .hero-wrapper--natural .page-width {
    min-height: 0;
  }

  .hero-wrapper--natural .page-width {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-wrapper--natural .hero-grid {
    display: block;
  }

  /* Written out as the full descendant chain, not a short `.hero-wrapper--natural .media-container
     img`. `_hero-slide.liquid` styles these through
     `.hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container img`
     — (0,7,0), with `height: 100%; object-fit: cover`. A two-class selector loses to that, so the
     image kept filling and cropping whenever any ancestor had a definite height. Matching the chain
     and adding one class puts these at (0,8,0), which wins outright and no longer depends on every
     ancestor happening to collapse to auto. */
  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media,
  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item,
  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item .media-wrapper,
  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item .media-wrapper .media-container {
    position: relative;
    inset: auto;
    /* `_hero-slide.liquid` widens `.media-item` past the viewport on mobile
       (`width: calc(100% + page-padding*2)` with a matching negative `left`) so the image bleeds
       past the page gutters. Natural mode already removes those gutters, so that bleed doubles up
       and pushes the image off the right edge — reset both. */
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
  }

  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item .media-wrapper .media-container picture,
  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item .media-wrapper .media-container img,
  .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item .media-wrapper .media-container video {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Overlay copy would push the slide taller than its image; float it over so the image alone sets
     the height. Slides with no copy — a plain editorial strip — are unaffected. */
  .hero-wrapper--natural .hero-grid .content {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Mobile also pins `.media` to `aspect-ratio: 3/2` in `_hero-slide.liquid` (0,4,0). The chain
     above clears it at (0,5,0), but repeat it inside the query so the intent is obvious to anyone
     reading the mobile rules — the artwork here is portrait (1100×1477), so 3:2 cropped it hard. */
  @media only screen and (max-width: 767.98px) {
    .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media {
      aspect-ratio: auto;
      height: auto;
    }

    .hero-slider .hero-wrapper--natural .hero-container .hero-grid .media .media-item {
      left: 0;
      width: 100%;
      transform: none;
    }
  }

  .hero-slider .page-width {
    min-height: var(--height);
  }

  body:has(.announcement-bar-section) .hero-slider .page-width {
    min-height: calc(var(--height) + 30px);
  }

  @media only screen and (max-width: 767.98px) {
    .hero-slider .page-width {
      min-height: var(--mobile-height);
    }

    body:has(.announcement-bar-section) .hero-slider .page-width {
      min-height: calc(var(--mobile-height) + 30px);
    }

    .hero-slider .hero-slider__pagination {
      bottom: 15px !important;
    }
  }

  .hero-slider .hero-slider__pagination button {
    display: flex;
  }

  /* Autoplay progress bar */
  .hero-slider .hero-slider__progress {
    bottom: 0;
    left: 0;
    height: 4px;
    z-index: 2;
    background: color-mix(in srgb, var(--brand-color-2) 30%, transparent);
    overflow: hidden;
  }

  .hero-slider .hero-slider__progress-fill {
    width: 100%;
    background: var(--brand-color-2);
    transform: scaleX(0);
    transform-origin: left center;
  }

  .hero-slider .hero-slider__progress-fill.is-animating {
    animation: hero-progress-fill var(--hero-progress-duration, 5000ms) linear forwards;
  }

  @keyframes hero-progress-fill {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-slider .hero-slider__progress-fill.is-animating {
      animation: none;
      transform: scaleX(1);
    }
  }

  /* Picture with image
.hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container picture:has(img) img {
  position: unset;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: unset;
  /* Focal point comes from `image.liquid`'s .img-focal rule (desktop + mobile). */
} */


  @media only screen and (max-width: 767.98px) {
  }

  /* Prev/next arrows — pinned to the hero's bottom-right, above the media/overlay/progress bar. */
  .hero-slider .hero-slider__blaze .blaze-navigation-arrows {
    position: absolute;
    right: var(--page-width-padding);
    bottom: var(--content-spacing-4);
    z-index: 3;
  }

  @media only screen and (max-width: 767.98px) {
    .hero-slider .hero-slider__blaze .blaze-navigation-arrows {
      right: var(--page-width-padding-mobile);
      bottom: var(--content-spacing-3);
    }
  }
/* END_SECTION:hero-slider */

/* START_SECTION:how-it-works (INDEX:38) */
.how-it-works__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: var(--grid-gap);
    align-items: center;
  }

  .how-it-works__grid--right {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }

  .how-it-works__grid--right .how-it-works__content {
    order: 2;
  }

  .how-it-works__grid--right .how-it-works__media {
    order: 1;
  }

  .how-it-works__content {
    max-width: 680px;
  }

  .how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(var(--step-count, 3), minmax(0, 1fr));
    gap: var(--content-spacing-5);
    margin-top: var(--content-spacing-3);
  }

  .how-it-works__number {
    color: var(--brand-color-3);
    font-weight: 400;
    font-size: 32px;
    line-height: 122%;
    letter-spacing: 0.02em;
  }

  .how-it-works__step-title {
    font-weight: 500;
    margin: 0;
  }

  .how-it-works__media {
    aspect-ratio: var(--hiw-aspect, 3 / 2);
    overflow: hidden;
  }

  .how-it-works__media .how-it-works__img,
  .how-it-works__media img,
  .how-it-works__media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 767.98px) {
    .how-it-works__grid,
    .how-it-works__grid--right {
      grid-template-columns: 1fr;
      gap: var(--content-spacing-6);
      align-items: initial;
    }

    /* Steps stack vertically, each laid out as number | text */
    .how-it-works__steps {
      grid-template-columns: 1fr;
      gap: var(--content-spacing-5);
    }

    .how-it-works__step {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--content-spacing-5);
    }

    .how-it-works__number {
      flex: none;
      min-width: 48px;
    }

    .how-it-works__grid--right .how-it-works__content,
    .how-it-works__content {
      order: 2;
      max-width: none;
    }

    .how-it-works__grid--right .how-it-works__media,
    .how-it-works__media {
      order: 1;
    }
  }
/* END_SECTION:how-it-works */

/* START_SECTION:instagram-feed (INDEX:39) */
.instagram-feed__heading-link {
    display: inline-flex;
    align-items: center;
    gap: var(--content-spacing-3);
    width: fit-content;
    text-decoration: none;
  }

  .instagram-feed .instagram-feed__heading-link,
  .instagram-feed .instagram-feed__heading-link:hover {
    color: inherit;
  }

  /* Intact arrow (line + chevron), stretched horizontally on hover so it
     "extends". stroke stays charcoal regardless of the link's hover colour. */
  .insta-arrow {
    flex: none;
    width: 34px;
    height: 12px;
    transition: width 0.3s ease;
  }

  .insta-arrow path {
    stroke: var(--brand-color-1);
  }

  .instagram-feed__heading-link:hover .insta-arrow {
    width: 44px;
  }

  /* Hide the Instafeed app's carousel arrows. */
  .instagram-feed__app .instafeed-new-layout-container .instafeed-new-arrow {
    display: none !important;
  }
/* END_SECTION:instagram-feed */

/* START_SECTION:newsletter (INDEX:41) */
.newsletter__container .newsletter__content h1,
  .newsletter__container .newsletter__content h2,
  .newsletter__container .newsletter__content h3 {
    position: relative;
    top: -4px;
  }
/* END_SECTION:newsletter */

/* START_SECTION:page-header (INDEX:42) */
/* Skip-to anchor pills */
  html {
    scroll-behavior: smooth;
  }

  /* Keep the breadcrumb above the full-width image overlay (beats the .z-3 utility) */
  .page-header .page-header__breadcrumbs {
    z-index: 9;
  }

  .page-header__anchors {
    margin-top: var(--content-spacing-5);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .page-header__anchors::-webkit-scrollbar {
    display: none;
  }
  .page-header__anchors-inner {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .page-header__anchors-label {
    flex: 0 0 auto;
    font-family: var(--body-font-family);
    font-size: 14px;
    white-space: nowrap;
    opacity: 0.7;
  }
  .page-header__anchor-pill {
    flex: 0 0 auto;
    padding: 8px 20px;
    border: 1px solid var(--brand-color-4);
    border-radius: 999px;
    font-family: var(--body-font-family);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-color);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .page-header__anchors .page-header__anchor-pill:hover,
  .page-header__anchors .page-header__anchor-pill.is-active {
    color: var(--text-color);
    background: var(--brand-color-4);
    border-color: var(--brand-color-4);
  }

  /* Min height + vertical centring. Breadcrumb stays at the top (in flow); the content is
     centred in the remaining height set for desktop. */
  .page-header .page-header-container {
    min-height: var(--ph-min-height, 0);
  }

  .page-header .page-header-container .page-header__inner {
    display: flex;
    flex-direction: column;
    min-height: var(--ph-min-height, 0);
  }

  .page-header .page-header__inner .page-header-grid {
    flex: 1 1 auto;
  }

  /* Full width: centre the content block over the image */
  .page-header .full-width .page-header__inner .page-header-grid {
    align-content: center;
  }

  /* Side by side: text centres in its column, image fills the height */
  .page-header .side-by-side .page-header__inner .page-header-grid {
    align-items: center;
  }
  .page-header .side-by-side .page-header__inner .page-header-grid .media {
    align-self: stretch;
  }

  /* Optional max-width on the text content (applied inline via --ph-content-max-width) */

  /* Text colour override (desktop) — also recolours the breadcrumb when an override is set */
  .page-header .content {
    color: var(--ph-text-color-desktop, inherit);
  }

  .page-header-wrapper.ph-override-desktop .page-header__breadcrumbs,
  .page-header-wrapper.ph-override-desktop .page-header__breadcrumbs a,
  .page-header-wrapper.ph-override-desktop .page-header__breadcrumbs span {
    color: var(--ph-text-color-desktop);
  }

  @media only screen and (max-width: 767.98px) {
    .page-header .page-header-container,
    .page-header .page-header-container .page-header__inner {
      min-height: var(--ph-min-height-mobile, 0);
    }

    .page-header .content {
      color: var(--ph-text-color-mobile, inherit);
    }

    .page-header-wrapper.ph-override-mobile .page-header__breadcrumbs,
    .page-header-wrapper.ph-override-mobile .page-header__breadcrumbs a,
    .page-header-wrapper.ph-override-mobile .page-header__breadcrumbs span {
      color: var(--ph-text-color-mobile);
    }

    /* Mobile content position within the header height (middle / bottom only) */
    .page-header .mob-content-middle .page-header__inner .page-header-grid {
      align-content: center;
    }
    .page-header .mob-content-bottom .page-header__inner .page-header-grid {
      align-content: flex-end;
    }

    /* Mobile text alignment */
    .page-header .mob-text-left .content {
      text-align: left;
    }
    .page-header .mob-text-center .content {
      text-align: center;
    }
    .page-header .mob-text-right .content {
      text-align: right;
    }

    /* Flex children (e.g. the links container) don't respond to text-align, so the
       mobile alignment above has to be restated as justify-content. Desktop gets this
       for free from the literal .text-center class; mobile only sets .mob-text-*. */
    .page-header .mob-text-left .content .links-container {
      justify-content: flex-start;
    }
    .page-header .mob-text-center .content .links-container {
      justify-content: center;
    }
    .page-header .mob-text-right .content .links-container {
      justify-content: flex-end;
    }
  }

  .page-header .page-header-container .page-header-grid .media .media-item {
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 767.98px) {
    .page-header .page-header-container .page-header-grid .content {
      order: 2;
    }
    .page-header .page-header-container .page-header-grid .media {
      order: 1;
      aspect-ratio: 3/2;
    }
    .page-header .page-header-container .page-header-grid .media .media-item {
      position: relative;
      left: calc(-1 * var(--page-width-padding));
      width: calc(100% + (var(--page-width-padding) * 2));
    }
  }

  @media only screen and (min-width: 768px) {
    .page-header
      .side-by-side
      .page-header-container
      .page-header-grid
      .media
      .media-item
      .media-wrapper {
      width: calc((100vw / 2) - (var(--page-width-padding) - 58px));
    }
  }

  /* `image.liquid` wraps the <img> in a <picture>, which critical.css sets to
     height: auto — so the image can't fill a definite-height parent (e.g. the
     full-width background wrapper). Percentage height only resolves where the
     parent has a definite height, so content images are unaffected. */
  .page-header picture {
    height: 100%;
  }

  .page-header
    .page-header-container
    .page-header-grid
    .media
    .media-item
    .media-wrapper
    .media-container
    picture,
  .page-header
    .page-header-container
    .page-header-grid
    .media
    .media-item
    .media-wrapper
    .media-container
    img,
  .page-header
    .page-header-container
    .page-header-grid
    .media
    .media-item
    .media-wrapper
    .media-container
    svg,
  .page-header
    .page-header-container
    .page-header-grid
    .media
    .media-item
    .media-wrapper
    .media-container
    video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point comes from `image.liquid`'s .img-focal rule (desktop + mobile). */
  }

  @media only screen and (max-width: 767.98px) {
    .page-header
      .page-header-container
      .page-header-grid
      .media
      .media-item
      .media-wrapper
      .media-container
      picture,
    .page-header
      .page-header-container
      .page-header-grid
      .media
      .media-item
      .media-wrapper
      .media-container
      img,
    .page-header
      .page-header-container
      .page-header-grid
      .media
      .media-item
      .media-wrapper
      .media-container
      svg,
    .page-header
      .page-header-container
      .page-header-grid
      .media
      .media-item
      .media-wrapper
      .media-container
      video {
      left: 0;
      width: 100%;
      transform: unset;
    }
  }

  .page-header .full-width .content {
    z-index: 1;
  }

  .page-header .full-width .content.truncate-text .rte {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--webkit-line-clamp);
    line-clamp: var(--webkit-line-clamp);
  }

  .page-header .full-width .content.span-centre {
    text-align: center;
    /* Keep a max-width capped content block centred in its grid area
       (max-width alone pins it to the left). */
    margin-inline: auto;
  }
  .page-header .full-width .content.span-centre a {
    display: block;
    margin-inline: auto;
  }

  @media only screen and (min-width: 768px) {
    .page-header .full-width .content.span-centre {
      grid-column: var(--ph-content-col-start, 4) / span var(--ph-content-span, 6);
      padding-inline: 0;
    }

    /* Right-aligned: sit the block flush against the last column, and push a
       max-width capped block to the right edge of that area.
       Desktop only; mobile alignment comes from .mob-text-*. */
    .page-header .full-width .content.span-end {
      grid-column: var(--ph-content-col-end-start, 7) / -1;
      margin-left: auto;
      margin-right: 0;
      padding-inline: 0;
    }
  }
/* END_SECTION:page-header */

/* START_SECTION:password (INDEX:43) */
body.password {
    height: 100vh;
    margin: 0;
  }

  /* password-main */
  body.password .password-main .bg-image {
    z-index: -1;
  }
/* END_SECTION:password */

/* START_SECTION:product (INDEX:48) */
@media only screen and (max-width: 991.98px) {
    .main-product {
      overflow: hidden;
    }
  }

  /* #main-product-container #main-product.oos {
  border-top: 1px solid var(--brand-color-1);
} */

  #main-product-container .mobile-slider-overflow {
    overflow: visible !important;
  }

  #main-product-container #main-product .product-details {
    top: 160px;
    transition: all 0.3s;
  }

  /*
#main-product-container .size-guide {
  display: block !important;
} */

  /* Grid gallery bleeds to the left viewport edge (desktop only; mobile stays a slider).
     Shifts left by the page padding AND, on viewports wider than --page-width, by the
     container's centring margin — so the left edge reaches the true viewport edge rather
     than stopping at the page-width edge. Width grows by the same amount so the right edge
     (and the gap to the product info column) stays put. overflow-x: clip on the section
     absorbs the sub-pixel scrollbar overshoot from 100vw without breaking sticky. */
  #main-product-container {
    overflow-x: clip;
  }

  @media only screen and (min-width: 992px) {
    .gallery--grid-flush {
      /* .page-width caps at (--page-width + 2 × padding) and then centres, so the container's
         content-left = max(padding, (100vw − page-width) / 2). Subtract the padding inside the
         max() so we don't double-count it above the cap (≈ 2040px), which was dragging the
         gallery ~60px past the left edge. */
      --grid-flush-offset: calc(
        var(--page-width-padding) +
          max(0px, (100vw - var(--page-width)) / 2 - var(--page-width-padding))
      );

      justify-self: start;
      width: calc(100% + var(--grid-flush-offset));
      max-width: none;
      margin-left: calc(-1 * var(--grid-flush-offset));
    }
  }

  /* Product title — Libre Caslon Text 400, 28px / 122% (per design spec) */
  #main-product-container .product-title.heading-h1 {
    font-family: var(--heading-font-family);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.22;
    letter-spacing: 0;
  }

  /* Price row — prices on the left, finance options on the right */
  #main-product-container .product-price {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* Price row — price + strikethrough + savings badge (per design spec) */
  #main-product-container .product-price .variant-price-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Price: Work Sans 500, 22px / 100%, uppercase */
  #main-product-container .product-price .price-item--regular {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  /* Compare-at: Work Sans 400, 14px / 150%, line-through, 50% opacity */
  #main-product-container .product-price .price-item--compare {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    opacity: 0.5;
  }

  /* Savings badge: Work Sans 400, 14px / 150%, #FFCACA background */
  #main-product-container .product-price .price-savings {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    background: #ffcaca;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-color);
  }

  /* Main add-to-cart — section-level style: 52px tall, 17px medium uppercase, no icon */
  #main-product-container [add-to-cart-label] {
    height: 52px;
    min-height: 52px;
  }

  #main-product-container [add-to-cart-label] input,
  #main-product-container [add-to-cart-label] span {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  /* Divider before the variant selector */
  #main-product-container .variant-selectors {
    padding-top: var(--content-spacing-6);
    border-top: 1px solid var(--brand-color-4);
  }

  /* BM badge logo to the right of the product title */
  #main-product-container .product-title--with-logo .heading-h1 {
    margin-block: 0;
  }

  #main-product-container .product-title-logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    color: var(--text-color);
  }

  /* The Positive Luxury widget appends its panel <iframe> (#pl-passport-iframe-v1) to <body>,
     not inside the product container — so this is intentionally unscoped. Opt it out of the
     theme's base iframe rule (width:100% + 16/9 aspect-ratio) so it keeps its own sizing. */
  #pl-passport-iframe-v1 {
    aspect-ratio: unset;
    width: unset;
  }

  /* Strip the injected badge's inline border, padding + background. */
  #main-product-container #pl-passport-widget-trigger-v1-container {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
  }

  /* Cap the injected badge image (inline width is 70px). */
  #main-product-container #pl-passport-widget-trigger-v1 img {
    max-width: 55px;
    max-height: 55px;
  }

  #main-product-container .product-title-logo svg {
    display: block;
    width: 64px;
    height: 64px;
  }

  /* Butterfly Mark badge rendered in the price row is desktop-hidden — desktop keeps the badge
     beside the title. It only appears on mobile (see the <=991.98px block below). */
  #main-product-container .product-price-badge {
    display: none;
  }

  /* Breadcrumb + review stars row above the title */
  #main-product-container .product-top-bar .breadcrumbs {
    min-width: 0;
  }

  /* Render the breadcrumb as natural inline text so it wraps like a sentence.
     (A flex row wraps each crumb as an atomic block, which stranded "Home" on its
     own line and orphaned the "/" separator at the start of the next line.) */
  #main-product-container .product-top-bar .product-breadcrumbs ul {
    display: block;
  }

  #main-product-container .product-top-bar .product-breadcrumbs li {
    display: inline;
  }

  #main-product-container .product-top-bar .product-breadcrumbs span,
  #main-product-container .product-top-bar .product-breadcrumbs a {
    white-space: normal;
  }

  #main-product-container .product-top-bar .review-stars {
    flex-shrink: 0;
  }

  @media only screen and (min-width: 992px) {
    #main-product-container .product-information {
      padding-top: 50px;
      padding-left: 20px;
    }
  }

  /* ---- Mobile layout (now < 992px) ---- */
  @media only screen and (max-width: 991.98px) {
    /* Stack gallery + info full-width; no row gap between them */
    #main-product-container #main-product {
      row-gap: 0;
    }

    #main-product-container .gallery,
    #main-product-container .product-information {
      grid-column: 1 / -1;
    }

    #main-product-container .product-information {
      width: 100%;
    }

    /* Gallery full-bleed: flush to both viewport edges, regardless of the fluid page padding */
    #main-product-container .gallery {
      width: 100vw;
      max-width: none;
      justify-self: start;
      margin-left: calc(-50vw + 50%);
      margin-right: 0;
    }

    /* Price-increase bar spans the full viewport width. `calc(-50vw + 50%)` self-adjusts to the
       fluid page padding (which is a clamp between mobile/desktop, not a fixed 20px). */
    #main-product-container .price-increase-bar {
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      margin-right: 0;
    }

    /* Space between the gallery and the breadcrumb once they stack on mobile */
    #main-product-container .product-information {
      margin-top: var(--content-spacing-5);
    }

    /* Breadcrumb full line, review stars underneath; cap the (long) breadcrumb to one line */
    #main-product-container .product-top-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--content-spacing-1);
    }

    #main-product-container .product-top-bar .product-breadcrumbs {
      width: 100%;
    }

    #main-product-container .product-top-bar .product-breadcrumbs ul {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* Smaller product title */
    #main-product-container .product-title.heading-h1 {
      font-size: 22px;
    }

    /* Butterfly Mark: on mobile the badge leaves the title row and moves into the price row,
       right-aligned via the price row's space-between. Hide the title-row widget here. */
    #main-product-container .product-title-logo {
      display: none;
    }

    #main-product-container .product-price-badge {
      display: block;
      order: 2;
      flex-shrink: 0;
      line-height: 0;
      color: var(--text-color);
    }

    /* The relocated Butterfly Mark widget (an injected <img>) sits in the price row on mobile;
       cap it a touch smaller than the desktop title badge so it balances the price line. */
    #main-product-container .product-price-badge #pl-passport-widget-trigger-v1 img {
      max-width: 48px;
      max-height: 48px;
    }

    /* Prices on the left, badge on the right, all on ONE vertically-centred line; finance below. */
    #main-product-container .product-price {
      align-items: center;
      justify-content: space-between;
      margin-top: -10px;
    }

    /* Two things keep the badge on the prices' line:
       1. flex:1 1 0 — flex line-breaking uses each item's BASIS, not its shrunk width. At basis 0
          the prices container counts as zero when the browser decides breaks, so the badge always
          lands on the same line; flex-grow then expands the container to fill and push the badge
          hard right (the "justify between" look).
       2. nowrap on .variant-price-wrapper — the price/compare/discount items never drop the "-48%"
          onto a second line even while the container is being grown/shrunk. */
    #main-product-container .product-price .variant-prices-container {
      order: 1;
      flex: 1 1 0;
      min-width: 0;
    }

    #main-product-container .product-price .variant-price-wrapper {
      flex-wrap: nowrap;
    }

    #main-product-container .product-price .finance-options {
      order: 3;
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      text-align: left;
      white-space: nowrap;
    }

    #main-product-container .product-price .finance-options__from {
      margin: 0;
    }

    /* On the "Finance from" line, not the trigger — the trigger is underlined and would paint
       its underline under the pipe and its margin. See _product-delivery-info.liquid. */
    #main-product-container .product-price .finance-options__from::after {
      content: '|';
      margin-left: 6px;
    }
  }

  /* -----------------------
    ASSETSURE (app extension)
    <assetsure-cover-add-to-cart> is injected into the product form by the Assetsure app block,
    so we can only override its styling from here — scoped to #main-product-container purely to
    out-specify the app's own CSS, which loads independently of the theme's.
  ----------------------- */
  #main-product-container assetsure-cover-add-to-cart {
    background-color: var(--brand-color-4);
    border: none;
    border-radius: 0;
  }

  #main-product-container assetsure-cover-add-to-cart .assetsure-title {
    font-weight: 600;
    font-size: 14px;
    text-transform: inherit;
  }

  /* critical.css draws its own checkbox tick via ::after and shows it on :checked — suppress it
     here so only the background-image tick below renders. */
  #main-product-container assetsure-cover-add-to-cart label input[type='checkbox']::after {
    display: none;
  }

  /* NB the tick SVGs are data URIs, and custom properties can't be interpolated inside url(), so
     the fills are literal: %23404040 is --brand-color-1. Update if that token changes.
     The cart/side-cart equivalents of these rules live in cart.liquid and side-cart.liquid. */
  #main-product-container assetsure-cover-add-to-cart input[type='checkbox'] {
    border: 1px solid var(--brand-color-1);
    border-radius: 3px;
  }

  #main-product-container assetsure-cover-add-to-cart input[type='checkbox']:hover {
    border-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23404040' fill-opacity='0.4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  #main-product-container assetsure-cover-add-to-cart input[type='checkbox']:checked {
    border-color: var(--brand-color-1);
    background-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  #main-product-container assetsure-cover-add-to-cart a {
    font-weight: 600;
    color: var(--brand-color-1) !important;
  }
/* END_SECTION:product */

/* START_SECTION:promo-bar (INDEX:49) */
.promo-bar-section {
    z-index: 97;
  }

  .promo-bar {
    min-height: 30px;
    padding: 7px 20px;
    gap: 20px;
    background-color: var(--brand-color-1);
    color: var(--text-color-alternate);
  }

  /* Countdown. Mirrors the announcement bar's `.ann-countdown-*` treatment, but kept on its own
     classes so the two bars can be restyled independently — they sit on different backgrounds and
     the promo bar's text is uppercase/tracked. */
  .promo-bar__countdown {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .promo-bar__countdown-label {
    white-space: nowrap;
  }

  .promo-bar__countdown-timer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  /* Tabular figures stop the row jittering as the seconds tick. */
  .promo-bar__countdown-timer > span {
    font-variant-numeric: tabular-nums;
  }

  .promo-bar__countdown-timer b {
    font-weight: 600;
  }

  .promo-bar__countdown-timer sup {
    margin-left: 1px;
    font-size: 0.7em;
    font-weight: 500;
  }

  .promo-bar__message,
  .promo-bar__message > * {
    margin-block: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
  }

  /* The promo bar isn't a .section-container, so its link falls through to the
     global `a:not([class^="button-"]):hover` in critical.css, which resolves to
     --text-color-highlight (#404040) — exactly this bar's default background, so
     the text disappeared on hover. Use the theme's Gold Dust link hover instead. */
  .promo-bar a.promo-bar__message:hover,
  .promo-bar a.promo-bar__message:focus {
    color: var(--brand-color-4);
  }

  @media (max-width: 767.98px) {
    .promo-bar__message,
    .promo-bar__message > * {
      font-size: 12px;
    }

    /* Message + countdown side by side is too wide for a phone — stack and tighten. */
    .promo-bar {
      flex-direction: column;
      gap: 4px;
    }

    .promo-bar__countdown {
      gap: 8px;
      font-size: 12px;
    }
  }
/* END_SECTION:promo-bar */

/* START_SECTION:quickview (INDEX:50) */
/* Ensure quickview overlay wrapper visual state */
  quickview-modal .quick-view-wrapper {
    display: flex;
    background: rgb(0 0 0 / 80%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  quickview-modal[open] .quick-view-wrapper {
    pointer-events: auto;
    opacity: 1;
  }

  quickview-modal .quick-view-wrapper quick-view-inner {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }

  quickview-modal[open] .quick-view-wrapper quick-view-inner {
    /* Ensure quickview panel width matches the side-cart drawer.
     Preferred: remove the inline max-width (done above).
     Fallback: override with a higher-specificity rule so the quickview
     matches the cart drawer width (min 400px or 90vw). */
    quickview-modal quick-view-inner {
      width: min(400px, 90vw);
      max-width: min(400px, 90vw);
    }

    transform: translateX(0);
  }

  quickview-modal [close-quick-view] {
    transition: 0.3s ease;
  }

  quickview-modal [close-quick-view]:hover {
    rotate: 90deg;
  }

  quickview-modal .quickview-selects {
    flex-direction: column;
    gap: var(--content-spacing-3);
  }

  quickview-modal .custom-select-option-name {
    display: inline-flex !important;
  }

  quickview-modal .quickview-selects,
  quickview-modal .variant-price-wrapper {
    padding-bottom: var(--content-spacing-3);
    border-bottom: 1px solid var(--brand-color-5);
  }
/* END_SECTION:quickview */

/* START_SECTION:recently-viewed (INDEX:51) */
.rv-tabs__header {
    margin-bottom: var(--content-spacing-6);
  }

  .rv-tabs__heading {
    flex: 0 1 auto;
  }

  /* Tab pills — mirror the products-tabs block */
  .rv-tabs__tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
  }
  .rv-tabs__tabs::-webkit-scrollbar {
    display: none;
  }
  .rv-tabs__tabs .rv-tabs__tab {
    flex: 0 0 auto;
    padding: 10px 22px;
    border: 1px solid var(--brand-color-4);
    border-radius: 999px;
    background: transparent;
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .rv-tabs__tabs .rv-tabs__tab:hover {
    border-color: var(--brand-color-1);
  }
  .rv-tabs__tabs .rv-tabs__tab.active {
    background: var(--brand-color-4);
    border-color: var(--brand-color-4);
  }

  .rv-tabs__actions {
    flex: 0 0 auto;
  }
  .rv-tabs__arrow-set[hidden] {
    display: none;
  }

  /* Force-hide inactive panels regardless of .page-width / utility display rules. */
  .rv-tabs__panel.is-hidden,
  .rv-tabs__panel[hidden] {
    display: none !important;
  }

  /* Recently Viewed loading spinner (shown while cards are fetched) */
  .rv-tabs__loading {
    min-height: 220px;
  }
  .rv-tabs__loading[hidden] {
    display: none;
  }
  .rv-tabs__spinner {
    width: 44px;
    height: 44px;
  }

  /* Shop All lives in the header on desktop; a mobile copy sits under the slider instead. */
  .rv-tabs__shop-all-mobile {
    display: none;
  }

  /* Mobile: heading + tabs on top; the whole header actions group (arrows + desktop Shop All)
     is hidden, and Shop All reappears below the slider at its regular (content) width. */
  @media only screen and (max-width: 767px) {
    .rv-tabs__header {
      row-gap: var(--content-spacing-4);
    }
    .rv-tabs__tabs {
      order: 3;
      width: 100%;
    }
    .rv-tabs__actions {
      display: none;
    }
    .rv-tabs__shop-all-mobile {
      display: flex;
      justify-content: flex-start;
      margin-top: var(--content-spacing-5);
    }
  }
/* END_SECTION:recently-viewed */

/* START_SECTION:ring-sizer-form (INDEX:53) */
.ring-sizer__inner {
    max-width: var(--ring-sizer-max, 540px);
    margin-inline: auto;
  }

  .ring-sizer .ring-sizer__label {
    font-family: var(--body-font-family);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-color);
  }

  /* Two-up row → single column on mobile */
  .ring-sizer__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }

  .ring-sizer .ring-sizer__field select,
  .ring-sizer .ring-sizer__field input {
    width: 100%;
  }

  /* Chevron on the fake selects (the native arrow is removed globally). */
  .ring-sizer .ring-sizer__field select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='10'%20viewBox='0%200%2016%2010'%20fill='none'%3E%3Cpath%20d='M8%207.25L14.864%200.5L16%201.625L8%209.5L0%201.625L1.136%200.5L8%207.25Z'%20fill='%23404040'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--input-h-padding, 17px) center;
    background-size: 14px 9px;
  }

  .ring-sizer__note {
    opacity: 0.6;
  }

  /* Custom checkbox — mirrors the PDP engraving checkbox. */
  .ring-sizer .select-checkbox .checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1px solid var(--brand-color-1);
    background: var(--brand-color-2);
    transition: background 0.2s ease;
  }
  .ring-sizer .select-checkbox input[type="checkbox"]:checked + .checkbox {
    background: var(--brand-color-1);
  }
  .ring-sizer .select-checkbox .checkbox svg {
    width: 11px;
    height: 11px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .ring-sizer .select-checkbox input[type="checkbox"]:checked + .checkbox svg {
    opacity: 1;
  }
  .ring-sizer .select-checkbox .checkbox svg path {
    fill: var(--brand-color-2);
  }

  .ring-sizer__terms-text {
    font-size: 13px;
    line-height: 1.4;
  }

  .ring-sizer__submit {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ring-sizer__errors {
    color: var(--input-error-border-color, #e1182f);
  }

  @media only screen and (max-width: 767.98px) {
    /* Single column throughout */
    .ring-sizer__row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--content-spacing-5);
    }
    /* Button above the checkbox, both full width */
    .ring-sizer__actions {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: var(--content-spacing-5);
    }
    .ring-sizer__submit {
      width: 100%;
    }
  }
/* END_SECTION:ring-sizer-form */

/* START_SECTION:search (INDEX:54) */
/* ============================================================
     Search header ("Results for '…'") — centred Libre Caslon; only the "for" is italic.
     Note: Libre Caslon is self-hosted at weight 400 only (no italic face), so the italic "for"
     renders as a synthesised (faux) italic. Add libre-caslon-text-400-italic.woff2 for a true one.
     ============================================================ */
  /* Size/line-height/family come from the .heading-h2 class on the element; only the
     letter-spacing tweak + the italic "for" are section-specific. */
  .search-header h1 {
    letter-spacing: 0.02em;
  }
  .search-header h1 em {
    font-style: italic;
  }

  /* Shared listing heading + count ("Products (42)", "Pages & Articles (9)") */
  .listing-count {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-color);
  }

  /* ============================================================
     Pages & Articles slider (below the product grid)
     ============================================================ */
  .pages-articles-slider {
    --pa-slider-spacing: clamp(
      var(--spacing-sections-mobile),
      calc(var(--spacing-intercept) + var(--spacing-slope) * 1vw),
      var(--spacing-sections-desktop)
    );
    margin-top: var(--pa-slider-spacing);
  }
  .pa-slider-heading {
    margin-bottom: var(--content-spacing-4);
  }
  .pa-card {
    text-align: left;
  }
  .pages-articles-slider .pa-card,
  .pages-articles-slider .pa-card:hover,
  .pages-articles-slider .pa-card:focus {
    text-decoration: none;
  }
  .pa-card__image {
    width: 150px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--brand-color-6);
    margin-bottom: var(--content-spacing-2);
  }
  .pa-card__image img,
  .pa-card__image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* No-image fallback: Brand logo, contained on a white background (not cropped). */
  .pa-card__image--logo {
    background-color: #fff;
  }
  .pa-card__image--logo img,
  .pa-card__image--logo picture {
    object-fit: contain;
    padding: 18px;
  }
  .pa-card__title {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-color);
    text-decoration: none;
  }

  @media (max-width: 767.98px) {
    .pages-articles-slider .blaze-navigation-arrows {
      display: none;
    }
    /* Full-bleed on mobile so the peeking slide reaches the screen edge */
    .slider-section.pages-articles-slider {
      width: 100vw;
      max-width: none;
      margin-left: calc(-50vw + 50%);
      padding-left: var(--page-width-padding-mobile);
      padding-right: 0;
    }
    .pages-articles-slider .blaze-track > .is-peek {
      opacity: 0.5;
      transition: opacity 0.3s ease;
    }
  }

  /* ============================================================
     Product grid + filters — ported from the collection listing so
     search matches it 1:1 (minus the CTA cards).
     ============================================================ */
  .collection-grid {
    gap: clamp(
      var(--listing-grid-gap-mobile),
      calc(var(--listing-grid-intercept) + var(--listing-grid-slope) * 1vw),
      var(--listing-grid-gap)
    );
  }
  .collection-listing .collection-grid-filters {
    /* Roomy vertical filters column (matches the collection template): at least 300px,
       ~26% of the row, capped at 380px. Products take the rest. */
    grid-template-columns: clamp(300px, 26%, 380px) 1fr;
  }

  @media (max-width: 991.98px) {
    .collection-listing .collection-grid-filters {
      grid-template-columns: 1fr;
    }
  }

  /* Top row above the grid: Hide / Show filters toggle */
  .collection-toolbar-top {
    margin-bottom: var(--content-spacing-4);
  }

  /* Fixed action bar pinned to the viewport bottom: View-by-metal (left) + Sort (right).
     Publishes its own height as --collection-bar-height (see collection-toolbar.js). */
  .collection-toolbar-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    /* Bottom inset keeps the buttons above the iOS home indicator (viewport-fit=cover). */
    padding: var(--content-spacing-4) 0 calc(var(--content-spacing-4) + env(safe-area-inset-bottom, 0px));
    background: var(--brand-color-7);
    border-top: 1px solid var(--brand-color-4);
  }

  /* Sorting is handled by the toolbar/mobile bar on every viewport, so the sidebar's own sort
     control is hidden (kept in the DOM as #SortBy — the toolbar mirrors its value). */
  .collection-listing .vertical-filters .sort-container {
    display: none;
  }

  /* The synthetic metal group's wrapper element must not create its own box, so its <custom-filter>
     stays a direct flex child of .filter-list (like every other filter group). */
  search-metal-filter {
    display: contents;
  }

  /* View by metal */
  .metal-view__label,
  .collection-toolbar__sort .sort-label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--text-color);
  }
  /* Swatches reuse the global .product-range-swatch (PDP) styles. They're <button>s, so the global
     `button:not([class^=button-])` reset strips the border — re-assert the ring here, scoped high
     enough to beat that reset. */
  .metal-swatch {
    background: transparent;
    cursor: pointer;
  }
  .collection-toolbar-bar .metal-swatch {
    border: 1px solid transparent;
  }
  .collection-toolbar-bar .metal-swatch.is-active {
    padding: 4px;
    border-width: 2px;
    background: var(--body-background-color);
  }
  .collection-toolbar-bar .metal-swatch--all {
    border-color: var(--brand-color-4);
  }

  /* Styled tooltip (metal name) — shown above the swatch since the bar sits at the viewport bottom. */
  .collection-toolbar-bar .metal-swatch {
    position: relative;
    overflow: visible;
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--brand-color-1);
    color: var(--text-color-alternate);
    font-family: var(--body-font-family);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 0;
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--brand-color-1);
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]::after,
  .collection-toolbar-bar .metal-swatch[data-tooltip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.2s ease;
  }
  .collection-toolbar-bar .metal-swatch[data-tooltip]:hover::after,
  .collection-toolbar-bar .metal-swatch[data-tooltip]:hover::before,
  .collection-toolbar-bar .metal-swatch[data-tooltip]:focus-visible::after,
  .collection-toolbar-bar .metal-swatch[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
  }

  /* Sort select */
  .toolbar-sort-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 41px;
    padding: 0 38px 0 15px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-6);
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
  }
  .collection-toolbar__sort .toolbar-sort-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    line-height: 0;
    pointer-events: none;
  }
  .collection-toolbar__sort .toolbar-sort-chevron svg {
    display: block;
    width: 12px;
    height: auto;
  }

  .collection-filter-toggle {
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-color);
    cursor: pointer;
  }
  .collection-filter-toggle:hover {
    color: var(--text-color-highlight, var(--brand-color-4));
  }
  .collection-filter-toggle__icon {
    line-height: 0;
  }
  .collection-filter-toggle__icon svg {
    display: block;
    width: 14px;
    height: 14px;
  }
  .collection-filter-toggle__label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
  }

  /* On mobile the bottom bar becomes Filter + Sort (metal swatches hidden). The top row is the
     "Products (N)" heading here (not a desktop-only toggle), so it stays visible. */
  @media (max-width: 991.98px) {
    /* Unlike the collection page, the search top row is the "Products (N)" heading, not a
       desktop-only filter toggle — keep it visible on mobile. */
    .collection-toolbar-top.listing-heading {
      display: flex;
    }
    .collection-toolbar-bar .metal-view {
      display: none;
    }
    /* Mobile bar: Filter + Sort split evenly (50/50) with a 20px gap. */
    .collection-toolbar-bar .page-width {
      gap: 20px;
    }
    .collection-toolbar-bar .collection-toolbar__left,
    .collection-toolbar-bar .collection-toolbar__sort {
      flex: 1 1 0;
      min-width: 0;
    }
    .collection-toolbar-bar .toolbar-filter-btn {
      display: inline-flex;
      width: 100%;
      justify-content: space-between;
    }
    .collection-toolbar-bar .toolbar-sort-select {
      width: 100%;
    }
  }

  /* Filter button is mobile only (the sticky bar's Filter opener). Hidden on desktop — scoped to
     the bar so it beats the base `.collection-toolbar-bar .toolbar-filter-btn` rule below. */
  @media (min-width: 992px) {
    .collection-toolbar-bar .toolbar-filter-btn {
      display: none;
    }
  }
  /* Scoped to the bar so it beats the global `button:not([class^=button-])` reset. */
  .collection-toolbar-bar .toolbar-filter-btn {
    appearance: none;
    align-items: center;
    gap: 10px;
    height: 41px;
    padding: 0 15px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-6);
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
  }
  .toolbar-filter-btn__chevron {
    display: flex;
    line-height: 0;
  }
  .toolbar-filter-btn__chevron svg {
    display: block;
    width: 12px;
    height: auto;
  }

  /* Sidebar-collapse behaviour applies wherever the sidebar exists (>=992, tablet + desktop) */
  @media (min-width: 992px) {
    .collection-listing.filters-hidden .collection-grid-filters {
      grid-template-columns: 1fr;
    }
    .collection-listing.filters-hidden .vertical-filters {
      display: none;
    }
  }

  /* Desktop (>=1280): sidebar + 3-col grid; hidden → 4-col */
  @media (min-width: 1280px) {
    .collection-listing .collection-grid-filters .collection-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .collection-listing.filters-hidden .collection-grid-filters .collection-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Tablet (992–1280): sidebar + 2-col grid; hidden → 3-col */
  @media (min-width: 992px) and (max-width: 1279.98px) {
    .collection-listing .collection-grid-filters .collection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .collection-listing.filters-hidden .collection-grid-filters .collection-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Mobile (<992): always 2-col */
  @media (max-width: 991.98px) {
    .collection-listing .collection-grid-filters .collection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:search */

/* START_SECTION:slider (INDEX:58) */
.slider-section .section-header:has(.section-content:empty):has(.section-navigation-container:empty) {
    display: none;
  }
  .slider-section:has(.no-navigation) .blaze-navigation-arrows {
    display: none;
  }
  @media only screen and (max-width: 767.98px) {
    .slider-section:has(.desktop-navigation) .blaze-navigation-arrows {
      display: none;
    }
  }
  @media only screen and (min-width: 768px) {
    .slider-section:has(.mobile-navigation) .blaze-navigation-arrows {
      display: none;
    }
  }

  @media only screen and (max-width: 767.98px) {
    /* Keep the heading + arrows on one row on mobile (arrows to the right) */
    .mobile-nav-inline .section-header {
      flex-wrap: nowrap;
    }
    .mobile-nav-inline .section-header .section-content {
      width: auto;
      flex: 1 1 auto;
      min-width: 0;
    }

    /* Move the header nav (button) below the slider on mobile. Promoting the
       header's children into the flex column lets us re-order them; page-width
       padding is re-applied since the header wrapper is dissolved. */
    .mobile-nav-below .section-header {
      display: contents;
    }
    .mobile-nav-below .section-content {
      order: 0;
      padding-left: var(--page-width-padding-mobile);
      padding-right: var(--page-width-padding-mobile);
    }
    .mobile-nav-below .content-container {
      order: 1;
    }
    .mobile-nav-below .section-navigation {
      order: 2;
      padding-left: var(--page-width-padding-mobile);
      padding-right: var(--page-width-padding-mobile);
    }
    .mobile-nav-below .section-navigation-container {
      justify-content: flex-start;
    }
  }
/* END_SECTION:slider */

/* START_SECTION:swym-wishlist (INDEX:59) */
.swym-wishlist-page__heading {
    margin: 0 0 var(--content-spacing-6);
    text-align: center;
  }
/* END_SECTION:swym-wishlist */

/* START_SECTION:text-media (INDEX:60) */
/* Anchor-target text-media (e.g. the collection "Read more" section): stop the scroll below
     the sticky header instead of underneath it. */
  .text-media .tm-anchor {
    scroll-margin-top: calc(var(--header-height, 120px) + var(--content-spacing-4, 20px));
  }

  /* Whole-banner link: an overlay anchor covering the container. The content's own links and
     buttons are raised above it so they still win the click. */
  .text-media .text-media-container .text-media__banner-link {
    position: absolute;
    z-index: 1;
    inset: 0;
  }

  .text-media .text-media-container:has(.text-media__banner-link) .content a,
  .text-media .text-media-container:has(.text-media__banner-link) .content button {
    position: relative;
    z-index: 2;
  }

  .text-media .text-media-container .content {
    order: 1;
  }

  /* Headings inside a Richtext block get bottom spacing (the container is .no-text-margins).
     Scoped to .rte so it only affects rich-text/metafield content, never Heading blocks. */
  .text-media .text-media-container .content .rte :is(h1, h2, h3, h4, h5) {
    margin-bottom: var(--content-spacing-3);
  }

  /* Custom text-container colours, driven by CSS vars so mobile can override. */
  .text-media .text-media-container.has-custom-container {
    background: var(--tm-container-bg);
    color: var(--tm-container-text);
  }

  @media screen and (max-width: 767.98px) {
    .text-media .text-media-container.has-custom-container {
      background: var(--tm-container-bg-mobile, var(--tm-container-bg));
      color: var(--tm-container-text-mobile, var(--tm-container-text));
    }
  }

  /* ------------------------------------------------------------------
     Image-as-background (overlay) layout. The image fills the whole
     container and the text content overlays it, anchored to the bottom
     over a gradient scrim. Enabled per-breakpoint via tm-bg--mobile /
     tm-bg--desktop — everything (layout AND scrim) is scoped inside the
     matching media query so a mobile-only setting never leaks to desktop.
     Set the container text colour (Custom styling) to a light colour for
     readable text over the image.
     ------------------------------------------------------------------ */
  @media screen and (min-width: 768px) {
    .text-media .text-media-container.tm-bg--desktop .content::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--tm-scrim-alpha, 0.55)),
        transparent 70%
      );
    }

    .text-media .text-media-container.tm-bg--desktop {
      display: block;
      position: relative;
      min-height: var(--tm-bg-min-height, 500px);
    }
    .text-media .text-media-container.tm-bg--desktop .image {
      position: absolute !important;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
    }
    .text-media .text-media-container.tm-bg--desktop .image img,
    .text-media .text-media-container.tm-bg--desktop .image picture {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .text-media .text-media-container.tm-bg--desktop .content {
      position: relative;
      z-index: 1;
      align-items: flex-end;
      min-height: inherit;
    }
  }

  @media screen and (max-width: 767.98px) {
    .text-media .text-media-container.tm-bg--mobile {
      display: block;
      position: relative;
      min-height: var(--tm-bg-min-height-mobile, 480px);
    }
    .text-media .text-media-container.tm-bg--mobile .image {
      position: absolute !important;
      inset: 0;
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      order: 0;
    }
    .text-media .text-media-container.tm-bg--mobile .image img,
    .text-media .text-media-container.tm-bg--mobile .image picture {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .text-media .text-media-container.tm-bg--mobile .content {
      position: relative;
      z-index: 1;
      align-items: flex-end;
      min-height: inherit;
      order: 0;
    }
    .text-media .text-media-container.tm-bg--mobile .content::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--tm-scrim-alpha, 0.55)),
        transparent 70%
      );
    }
  }

  @media screen and (max-width: 767.98px) {
    .text-media .html .image {
      width: calc(
        100% +
          clamp(
            var(--page-width-padding-mobile),
            calc(var(--padding-intercept) + var(--padding-slope) * 1vw),
            var(--page-width-padding)
          ) *
          2
      );
      margin-inline: calc(
        -1 *
          clamp(
            var(--page-width-padding-mobile),
            calc(var(--padding-intercept) + var(--padding-slope) * 1vw),
            var(--page-width-padding)
          )
      );
    }
    .text-media .text-media-container .content {
      order: 2;
    }
  }

  .text-media .text-media-container .image {
    order: 2;
  }

  @media screen and (max-width: 767.98px) {
    .text-media .text-media-container .image.cover {
      order: 1;
      aspect-ratio: 4/3;
    }
  }

  .text-media .text-media-container .image.cover img,
  .text-media .text-media-container .image.cover picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-position, center);

    /* Soft fade of the image's inner edge into the background (kept clear elsewhere) */
    -webkit-mask-image: var(--image-mask-desktop, none);
    mask-image: var(--image-mask-desktop, none);
  }

  @media screen and (max-width: 767.98px) {
    .text-media .text-media-container .image.cover img,
    .text-media .text-media-container .image.cover picture {
      -webkit-mask-image: var(--image-mask-mobile, none);
      mask-image: var(--image-mask-mobile, none);
    }
  }

  /* Desktop: keep the image a decent height even when the text is short */
  @media screen and (min-width: 768px) {
    .text-media .text-media-container .image.cover,
    .text-media .text-media-container .image.contain {
      min-height: var(--image-min-height, 500px);
    }
  }

  .text-media .text-media-container .image.contain img,
  .text-media .text-media-container .image.contain picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Video set to "Stretch to fill": cover the whole media column (like a cover image),
     not just the video's intrinsic box. */
  .text-media .text-media-container .image.video-media--cover [js-video-controls] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .text-media .text-media-container .image.video-media--cover [js-video-controls] video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (min-width: 768px) {
    .text-media .text-media-container .image.video-media--cover {
      min-height: var(--image-min-height, 500px);
    }
  }

  @media screen and (max-width: 767.98px) {
    .text-media .text-media-container .image.video-media--cover {
      aspect-ratio: 4 / 3;
    }
  }

  /* ------------------------------------------------------------------
     Media full-bleed — extend the media out to the viewport edge on its
     outer side (desktop), or both sides (mobile). Uses the fluid page
     gutter so it lands on the edge at the default page width.
     ------------------------------------------------------------------ */
  .text-media {
    --tm-edge-pad: clamp(
      var(--page-width-padding-mobile),
      calc(var(--padding-intercept) + var(--padding-slope) * 1vw),
      var(--page-width-padding)
    );
  }

  @media screen and (min-width: 768px) {
    /* Image on the right (default text-left): bleed right. */
    .text-media .text-media-container.media-bleed.section-text-left .image {
      margin-right: calc(-1 * var(--tm-edge-pad));
    }
    /* Image on the left (text-right): bleed left. */
    .text-media .text-media-container.media-bleed.section-text-right .image {
      margin-left: calc(-1 * var(--tm-edge-pad));
    }
  }

  @media screen and (max-width: 767.98px) {
    /* Full-bleed both sides, out of the page width. */
    .text-media .text-media-container.media-bleed .image {
      width: calc(100% + (var(--tm-edge-pad) * 2));
      margin-inline: calc(-1 * var(--tm-edge-pad));
    }
  }

  @media screen and (min-width: 768px) {
    .text-media .text-media-container.section-text-right .content {
      order: 2;
    }
    .text-media .text-media-container.section-text-right .image {
      order: 1;
    }

    /* Desktop inner gap between the text and the image. Applied to the content's
       inner edge — the side nearest the image — so it flips with the layout.
       Default layout (text left, image right) => padding on the right.
       section-text-right (text right, image left) => padding on the left. */
    .text-media .text-media-container .content.tm-inner-pad {
      padding-right: var(--tm-content-inner-pad, 0);
    }
    .text-media .text-media-container.section-text-right .content.tm-inner-pad {
      padding-right: 0;
      padding-left: var(--tm-content-inner-pad, 0);
    }
  }

  @media screen and (max-width: 767.98px) {
    .text-media .text-media-container.text-top .content {
      order: 1;
    }
    .text-media .text-media-container.text-top .image {
      order: 2;
    }
  }
/* END_SECTION:text-media */

/* START_SECTION:video (INDEX:62) */
/* ---- Video with content overlay ---- */
  .video-has-overlay .video-container {
    height: var(--video-height, 600px);
  }

  .video-has-overlay [js-video-controls] {
    width: 100%;
    height: 100%;
  }

  .video-has-overlay .video-container video,
  .video-has-overlay .video-container picture,
  .video-has-overlay .video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Embed (YouTube) with overlay content: iframes can't object-fit, so size the iframe to the
     smallest box that still covers the container while keeping its aspect ratio (set inline),
     then centre it and clip the overflow — i.e. an object-fit:cover equivalent. */
  .video-has-overlay .video-embed-cover {
    z-index: 0;
  }

  .video-has-overlay .video-embed-cover__iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
  }

  .video-media-overlay {
    z-index: 1;
    pointer-events: none;
    background: var(--video-overlay, linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%));
  }

  .video-media-content {
    z-index: 2;
    pointer-events: none;
    /* Vertical breathing room so Top/Bottom content positions aren't flush against
       the video edge. Harmless for Center (content just centres inside the padded box).
       Panel mode overrides this with its own `padding` shorthand below. */
    padding-block: clamp(28px, 5vw, 64px);
  }

  .video-media-content__inner {
    pointer-events: auto;
    color: var(--text-color-alternate);
  }

  /* Inline play ring is mobile-only (desktop keeps the snippet's own corner control). */
  .video-inline-play {
    display: none;
  }

  /* The play/pause control is rendered by the video snippet; in overlay mode
     lift it above the gradient and match the section's corner spacing. */
  .video-has-overlay .video-control-icon {
    z-index: 3;
    bottom: clamp(20px, 3vw, 40px);
    left: clamp(20px, 3vw, 40px);
  }

  /* Play button disabled — hide the control (click-to-play still works). */
  .video-hide-controls div[js-video-controls] .video-control-icon {
    display: none;
  }

  /* ---- Panel style: video beside a solid-colour content panel ---- */
  .video-content-panel .video-container {
    display: flex;
    flex-direction: row;
  }

  .video-content-panel [js-video-controls] {
    flex: 0 0 var(--video-media-width, 60%);
    width: auto;
    height: 100%;
  }

  .video-content-panel .video-media-content {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: auto;
    align-items: center;
    padding: clamp(28px, 4vw, 72px);
    background: var(--panel-bg, var(--brand-color-6));
    color: var(--panel-text, var(--text-color));
  }

  .video-content-panel .video-media-content .grid-section {
    display: block;
  }

  .video-content-panel .video-media-content__inner {
    grid-column: auto;
    max-width: 520px;
    color: inherit;
  }

  /* ---- Mobile: content overlays the video (softer bottom gradient) ---- */
  @media only screen and (max-width: 767.98px) {
    /* Full bleed on mobile: video runs edge to edge (default page width). */
    .video-full-bleed-mobile .page-width {
      padding-inline: 0;
      max-width: none;
    }
    .video-full-bleed-mobile .video-container {
      border-radius: 0;
    }

    .video-has-overlay .video-container {
      height: auto;
      aspect-ratio: 4 / 5;
    }

    /* Softer, full-height fade so the content reads over the video */
    .video-media-overlay {
      background: var(
        --video-overlay-mobile,
        linear-gradient(180deg, rgba(17, 18, 19, 0) 0%, rgba(17, 18, 19, 0.8) 100%)
      );
    }

    /* Anchor content to the bottom over the gradient, full width */
    .video-has-overlay .video-media-content {
      align-items: flex-end;
      padding-bottom: clamp(28px, 8vw, 44px);
    }

    .video-has-overlay .video-media-content__inner {
      grid-column: 1 / -1;
    }

    /* Mobile: replace the snippet's absolutely-positioned control with the inline ring
       that lives at the top of the content column (so it's a fixed 20px above the heading
       via the column gap, and rides with the bottom-anchored content). */
    .video-has-overlay [js-video-controls] .video-control-icon {
      /* !important beats the snippet's .video-paused .play-icon / .video-playing .pause-icon
         toggle rules (higher specificity) so the corner control is fully hidden on mobile. */
      display: none !important;
    }

    .video-has-overlay .video-inline-play {
      display: flex;
      align-self: flex-start;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    /* Taps anywhere on the content (except the actual links/buttons) fall through to the
       video so the ring — and the copy around it — act as play/pause. */
    .video-has-overlay .video-media-content__inner {
      pointer-events: none;
    }

    .video-has-overlay .video-media-content__inner a,
    .video-has-overlay .video-media-content__inner button {
      pointer-events: auto;
    }

    /* Fade the ring away once the video is playing. */
    .video-has-overlay:has([js-video-controls].video-playing) .video-inline-play {
      opacity: 0;
    }

    /* No "PLAY VIDEO" label on mobile — just the ring */
    .video-has-overlay .video-control-label {
      display: none;
    }

    /* Panel style on mobile: video on top, content panel below */
    .video-content-panel .video-container {
      flex-direction: column;
      height: auto;
      aspect-ratio: auto;
    }

    .video-content-panel [js-video-controls] {
      flex: none;
      width: 100%;
      aspect-ratio: 4 / 5;
    }

    .video-content-panel .video-media-content {
      align-items: center;
      padding: clamp(24px, 8vw, 40px) var(--page-width-padding-mobile, 20px);
    }

    /* Play control stays bottom-left on the video (content is below it, not over it) */
    .video-content-panel .video-control-icon {
      top: auto;
      bottom: clamp(20px, 5vw, 32px);
    }
  }
/* END_SECTION:video */

/* START_SECTION:vip-tiers (INDEX:63) */
.vip-tiers__grid {
    display: grid;
    grid-template-columns: repeat(var(--vip-tier-count, 4), minmax(0, 1fr));
    gap: var(--content-spacing-6);
  }

  .vip-tiers__col {
    gap: var(--content-spacing-4);
    padding: var(--content-spacing-5) var(--content-spacing-4);
    background: var(--brand-color-2);
    border-top: 7px solid var(--vip-accent);
  }

  /* Highlighted / featured tier — framed on the sides + bottom to complete the accent top border. */
  .vip-tiers__col--highlight {
    border-right: 1px solid var(--vip-accent);
    border-bottom: 1px solid var(--vip-accent);
    border-left: 1px solid var(--vip-accent);
  }

  .vip-tiers__col-head {
    padding-bottom: var(--content-spacing-3);
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .vip-tiers__name {
    margin: 0;
    text-align: center;
    font-weight: 500;
  }

  .vip-tiers__subtitle {
    opacity: 0.5;
    font-size: 14px;
  }

  .vip-tiers__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .vip-tiers__item {
    line-height: 1.4;
  }

  .vip-tiers__icon {
    flex: none;
    margin-top: 2px;
  }

  .vip-tiers__icon--tick {
    color: var(--brand-color-1);
  }

  .vip-tiers__item--off {
    opacity: 0.4;
  }

  .vip-tiers__icon--cross {
    color: currentColor;
  }

  /* Mobile: full-bleed horizontal slider — same design as the reasons grid. */
  @media (max-width: 767.98px) {
    .vip-tiers__grid {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--page-width-padding-mobile);
      -webkit-overflow-scrolling: touch;
      width: calc(100% + var(--page-width-padding-mobile) * 2);
      margin-inline: calc(-1 * var(--page-width-padding-mobile));
      padding-left: var(--page-width-padding-mobile);
      padding-right: var(--page-width-padding-mobile);
    }

    .vip-tiers__grid::-webkit-scrollbar {
      display: none;
    }

    .vip-tiers__col {
      flex: 0 0 72%;
      max-width: 72%;
      scroll-snap-align: start;
    }
  }
/* END_SECTION:vip-tiers */

/* START_SECTION:ways-to-earn (INDEX:64) */
.wte-card {
    padding: var(--content-spacing-2);
  }

  .wte-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-color-4);
  }

  .wte-card__icon img {
    width: 20px;
    height: 20px;
  }

  .wte-card__title {
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  .wte-card__points {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 17px;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--brand-color-1);
  }

  .ways-to-earn__nav .blaze-navigation-arrows {
    margin-inline: auto;
  }
/* END_SECTION:ways-to-earn */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion (INDEX:66) */
.accordion-item-ref {
    margin-bottom: var(--content-spacing-2);
  }
/* END_BLOCK:_accordion */

/* START_BLOCK:_column (INDEX:71) */
.custom-section .column {
    gap: var(--column-gap, var(--content-spacing-2));
  }
  .custom-section .column:empty {
    display: none;
  }

  /* Content-card headings sit at medium weight */
  .custom-section .heading-h4 {
    font-weight: 500;
  }
/* END_BLOCK:_column */

/* START_BLOCK:_content-grid (INDEX:75) */
@media (max-width: 767.98px) {
    /* Turn the grid into a horizontal, full-bleed slider on mobile. Breaks out of
       page-width to the screen edges, but the first card keeps a 20px indent
       (scroll-padding-left so scroll-snap respects the indent — see the padding gotcha). */
    .grid-section--mobile-slider {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--page-width-padding-mobile);
      -webkit-overflow-scrolling: touch;
      width: calc(100% + var(--page-width-padding-mobile) * 2);
      margin-inline: calc(-1 * var(--page-width-padding-mobile));
      padding-left: var(--page-width-padding-mobile);
      padding-right: 0;
    }

    .grid-section--mobile-slider::-webkit-scrollbar {
      display: none;
    }

    .grid-section--mobile-slider > .column {
      flex: 0 0 72%;
      max-width: 72%;
      scroll-snap-align: start;
    }
  }
/* END_BLOCK:_content-grid */

/* START_BLOCK:_drop-down_cta-group (INDEX:79) */
.mega-menu-cta-group {

    flex: 1 1 0;

    min-width: 0;

  }



  .mega-menu-cta-group > .cta {

    flex: 1 1 0;

    min-width: 0;

    height: 100%;

    grid-column: unset !important;

  }
/* END_BLOCK:_drop-down_cta-group */

/* START_BLOCK:_drop-down_link-group (INDEX:80) */
.mega-menu-links-container .sublinks-container .dropdown-title,
  .mega-menu-links-container .top-level-link {
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase;
  }

  .mega-menu-links-container .sublinks-container .dropdown-title.heading-h3,
  .mega-menu-links-container .top-level-link.heading-h3 {
    margin: 0 0 4px;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .mega-menu-links-container .sublinks-container .sublink {
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .mega-menu-links-container .sublinks-container .sublink:hover {
    color: #1e1e1e;
    text-decoration: underline;
  }

  .mega-menu-dropdown .sublinks-container .sublink {
    text-decoration: none;
  }
/* END_BLOCK:_drop-down_link-group */

/* START_BLOCK:_fact (INDEX:82) */
.fact-label {
    opacity: 0.65;
  }
  .fact-value {
    letter-spacing: 0.04em;
  }
  /* Two classes to beat the .heading-h5 utility's font-size */
  .fact-slide .fact-value {
    font-size: 17px;
  }
/* END_BLOCK:_fact */

/* START_BLOCK:_footer-accordion-item (INDEX:83) */
/* Column heading: Work Sans, uppercase (override accordion's serif default) */
  .footer-link-group .button-accordion,
  .footer-link-group .accordion__question {
    margin-bottom: 0;
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .footer-link-group .footer-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--content-spacing-2, 10px);
  }

  .footer-link-group .footer-item-list a {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-color);
  }

  .footer-link-group .footer-item-list a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Desktop: static columns, no accordion chrome */
  @media only screen and (min-width: 767.98px) {
    .footer-link-group .button-accordion {
      padding: 0;
      border-bottom: none;
      cursor: default;
    }
    .footer-link-group .button-accordion.accordion .chevron {
      display: none;
    }
    .footer-link-group .panel {
      max-height: 100% !important;
      border: none;
    }
    .footer-link-group .content {
      padding: 0;
    }
  }

  /* Mobile: accordion rows divided at charcoal 20% */
  @media only screen and (max-width: 767.98px) {
    .footer-link-group {
      border-bottom: 1px solid color-mix(in srgb, var(--brand-color-1) 20%, transparent);
    }
    .footer-link-group .panel {
      border-bottom: none;
    }
    .footer-link-group .content {
      padding-bottom: var(--content-spacing-4, 16px);
    }
  }
/* END_BLOCK:_footer-accordion-item */

/* START_BLOCK:_footer-badge (INDEX:84) */
.footer-badge .footer-badge__img {
    width: auto;
    height: var(--footer-badge-height, 56px);
    max-width: 140px;
  }
/* END_BLOCK:_footer-badge */

/* START_BLOCK:_footer-badges (INDEX:85) */
.footer-badges-group {
    row-gap: var(--content-spacing-3, 12px);
    column-gap: var(--content-spacing-5, 24px);
  }

  @media only screen and (max-width: 767.98px) {
    .footer-badges-group {
      justify-content: center;
    }
  }
/* END_BLOCK:_footer-badges */

/* START_BLOCK:_footer-passport (INDEX:86) */
/* The widget appends its panel <iframe> (#pl-passport-iframe-v1) to <body> with its own
     inline sizing; opt it out of the theme's base iframe rule (width:100% + 16/9 aspect-ratio)
     so those don't fight the widget's fixed-position panel. */
  #pl-passport-iframe-v1 {
    aspect-ratio: unset;
    width: unset;
  }

  /* Strip the injected badge's inline border, padding + background. */
  #pl-passport-widget-trigger-v1-container {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
  }

  /* Cap the injected badge image (inline width is 70px). */
  #pl-passport-widget-trigger-v1 img {
    max-width: 55px;
    max-height: 55px;
  }
/* END_BLOCK:_footer-passport */

/* START_BLOCK:_hero-slide (INDEX:88) */
@media only screen and (max-width: 767.98px) {
    .hero-slider .hero-container .hero-grid .content {
      order: 2;
    }
  }

  /* Breadcrumbs */

  .hero-slider .hero-container .hero-grid .content .breadcrumbs-container ul {
    margin: 0;
  }

  @media only screen and (max-width: 767.98px) {
    .hero-slider .hero-container .hero-grid .content .breadcrumbs-container ul li {
      padding: 0 4px;
    }
  }

  /* Media section */

  @media only screen and (max-width: 767.98px) {
    .hero-slider .hero-container .hero-grid .media {
      order: 1;
      aspect-ratio: 3/2;
    }
  }

  .hero-slider .hero-container .hero-grid .media .media-item {
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 767.98px) {
    .hero-slider .hero-container .hero-grid .media .media-item {
      width: calc(100% + (var(--page-width-padding) * 2));
      position: relative;
      left: calc(-1 * var(--page-width-padding));
    }
  }

  /* Media wrapper */
  .hero-slider .hero-container .hero-grid .media .media-item .media-wrapper {
    width: 100%;
  }

  @media only screen and (min-width: 768px) {
    .hero-slider .side-by-side .hero-container .hero-grid .media .media-item .media-wrapper {
      width: calc((100vw / 2) - (var(--page-width-padding) - 58px));
    }
  }

  /* Media container */

  .hero-slider
    .hero-container
    .hero-grid
    .media
    .media-item
    .media-wrapper
    .media-container
    picture,
  .hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container img,
  .hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container svg,
  .hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point comes from `image.liquid`'s .img-focal rule (desktop + mobile). */
  }

  @media only screen and (max-width: 767.98px) {
    .hero-slider
      .hero-container
      .hero-grid
      .media
      .media-item
      .media-wrapper
      .media-container
      picture,
    .hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container img,
    .hero-slider .hero-container .hero-grid .media .media-item .media-wrapper .media-container svg,
    .hero-slider
      .hero-container
      .hero-grid
      .media
      .media-item
      .media-wrapper
      .media-container
      video {
      left: 0;
      width: 100%;
      transform: unset;
    }
  }

  /* The video snippet's own wrapper needs to fill the media box so the video can cover it
     (the existing .media-container video rule below handles object-fit). */
  .hero-slider .hero-container .hero-grid .media .media-container [js-video-controls] {
    width: 100%;
    height: 100%;
  }

  /* A hero video is decorative background — it renders without controls, so the snippet's
     default cursor: pointer would be a lie. A slide link, when set, supplies its own. */
  .hero-slider .hero-container .hero-grid .media [js-video-controls] {
    cursor: default;
  }

  .hero-slider .full-width .content {
    z-index: 1;
  }

  /* Keep content above the whole-slide link on BOTH layouts (the rule above only covers
     full-width), so buttons inside section-content stay clickable. */
  .hero-slider .hero-container .hero-grid .content {
    z-index: 1;
  }

  .hero-slide-link {
    z-index: 0;
  }

  /* Custom overlay: desktop + mobile gradients driven by CSS variables so a
     full-bleed slide can use a horizontal fade on desktop and a softer
     vertical fade on mobile. Falls back to the desktop gradient if no mobile
     value is set. */
  .hero-slider .full-width.has-custom-overlay .overlay {
    background: var(--hero-overlay-desktop);
  }

  @media only screen and (max-width: 767.98px) {
    .hero-slider .full-width.has-custom-overlay .overlay {
      background: var(--hero-overlay-mobile, var(--hero-overlay-desktop));
    }

    .hero-slider .full-width.has-custom-overlay .page-width {
      align-items: flex-end;
    }
  }

  .hero-slider .full-width .content.truncate-text .rte {
    display: -webkit-box;
    line-clamp: var(--webkit-line-clamp);
    -webkit-line-clamp: var(--webkit-line-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* END_BLOCK:_hero-slide */

/* START_BLOCK:_image (INDEX:89) */
.image-block.image-wrapper.set-height {
    position: relative;
    height: var(--height);
    width: auto;
  }

  /* Aspect-ratio mode: full-width box at the given ratio, image fills it (object-fit via image_fit). */
  .image-block.image-wrapper.set-aspect {
    position: relative;
    width: 100%;
  }

  .image-block.image-wrapper.set-aspect img,
  .image-block.image-wrapper.set-aspect picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  a.image-block.image-wrapper img {
    transition: all 0.3s ease;
  }
  a.image-block.image-wrapper:hover img {
    scale: 1.05;
  }

  /* Video modal — 16:9 frame, panel sized to the viewport rather than the 1100px default so a
     video fills the space properly on a wide screen. No padding or background: the player is the
     whole panel, sitting straight on the overlay scrim. */
  .image-video-modal .image-video-modal__panel {
    width: min(1100px, 92vw);
    padding: 0;
    background: transparent;
  }

  .image-video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .image-video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
/* END_BLOCK:_image */

/* START_BLOCK:_logo (INDEX:90) */
.logo-slide__inner img,
  .logo-slide__inner > svg {
    height: var(--logo-height, 36px);
    width: auto;
    max-width: 170px;
    object-fit: contain;
  }
/* END_BLOCK:_logo */

/* START_BLOCK:_mega-menu (INDEX:91) */
/* -----------------------
    TOP-LEVEL LINKS WRAPPER
    ----------------------- */
  .header .top-level-links-wrapper:not(.in-header) .top-level-links {
    justify-content: center;
    gap: 0;
    height: 35px;
  }

  /* Padding instead of gap so the items are contiguous and the underline slides
     seamlessly between them (no dead-zone). Two paddings = the old gap. */
  .header .top-level-links-wrapper:not(.in-header) .link-group {
    width: unset;
    padding: 0 clamp(10px, 1.5vw, 17.5px) !important;
  }

  /* Sliding hover underline ("magic line") — positioned/animated by menu-underline.js */
  .top-level-links {
    position: relative;
  }

  .top-level-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--text-color);
    pointer-events: none;
    transition:
      left 0.3s ease,
      width 0.3s ease;
  }

  .header .top-level-links-wrapper:not(.in-header) .top-level-link,
  .header .top-level-links-wrapper:not(.in-header) .top-level-link a {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-color);
  }

  /* Plain links wrap their text in an <a>. Collapse that <a> out of the layout
     (display: contents) so the text span becomes a direct flex child of
     .top-level-link and centres exactly like the drop-down links. */
  .header .top-level-links-wrapper:not(.in-header) .top-level-link a {
    display: contents;
  }

  @media screen and (max-width: 991.98px) {
    .header .top-level-links-wrapper .top-level-links {
      display: none;
    }
  }

  .top-level-links-wrapper.in-header .top-level-links .link-group {
    width: auto;
    flex-shrink: 0;
  }

  .top-level-links .top-level-link,
  .top-level-links .top-level-link a span {
    white-space: nowrap;
  }

  .top-level-links .top-level-link-text {
    transition: text-shadow 0.2s ease;
  }

  /* Semibold on hover with no layout shift — thicken the glyphs via text-shadow
     instead of a clone pseudo (which added a flex line and broke centring) */
  .top-level-links .link-group:hover .top-level-link-text,
  .top-level-links .link-group:focus-within .top-level-link-text {
    text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
  }

  .header .top-level-links-wrapper .top-level-links .link-group .top-level-link a .menu-link-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 30px;
    transform: translate(-50%, calc(-50% - 1px));
  }

  .header
    .top-level-links-wrapper
    .top-level-links
    .link-group
    .top-level-link
    a
    .menu-link-bg.highlight {
    height: calc(100% + 14px);
    transform: translate(-50%, calc(-50% - 2px));
  }
/* END_BLOCK:_mega-menu */

/* START_BLOCK:_mobile-cta-group (INDEX:92) */
.mobile-cta-group {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
    scrollbar-width: none;
  }

  .mobile-cta-group::-webkit-scrollbar {
    display: none;
  }
  .mobile-cta-group .cta {
    width: 100%;
    height: auto;
    aspect-ratio: 268 / 357;
  }
/* END_BLOCK:_mobile-cta-group */

/* START_BLOCK:_mobile-mega-menu (INDEX:93) */
.mobile-menu-outer-wrapper {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    visibility: hidden;
  }

  .mobile-menu-outer-wrapper.active {
    pointer-events: all;
    visibility: visible;
  }

  /* Charcoal 70% scrim under the panel (matches the mega-menu scrim) */
  .mobile-menu-outer-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: color-mix(in srgb, var(--brand-color-1) 70%, transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .mobile-menu-outer-wrapper.active::before {
    opacity: 1;
  }

  .mobile-menu {
    position: relative;
    z-index: 1;
    margin-left: auto;
    width: 100%;
    max-width: 300px;
    height: 100%;
    background: var(--brand-color-6);
    color: var(--text-color);
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  .mobile-menu-outer-wrapper.active .mobile-menu {
    transform: translateX(0);
  }

  /* Close button: top-right of the drawer, over the panel header */
  .mobile-menu-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
  }

  .mobile-menu-close svg {
    width: 18px;
    height: 18px;
  }

  /* Navigation viewport (root rows in flow; category panels overlay) */
  .mobile-nav {
    position: relative;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Clear the absolute close button at the root level (panels start at the very top) */
  .mobile-nav > *:first-child {
    margin-top: 44px;
  }

  /* Plain top-level links (e.g. About) rendered as a row */
  .mobile-nav > .link-group {
    width: 100%;
    height: auto;
    padding: var(--content-spacing-4) var(--content-spacing-4);
  }

  /* Divider between all top-level items, inset left/right like the drill sections */
  .mobile-nav > .mobile-nav-row,
  .mobile-nav > .link-group {
    position: relative;
  }

  .mobile-nav > .mobile-nav-row::after,
  .mobile-nav > .link-group::after {
    content: "";
    position: absolute;
    right: var(--content-spacing-4);
    bottom: 0;
    left: var(--content-spacing-4);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color-1) 20%, transparent);
  }

  .mobile-nav > .link-group .top-level-link,
  .mobile-nav > .link-group .top-level-link a {
    justify-content: flex-start;
    padding: 0;
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-color);
  }

  /* Footer: My Account / Diamond Club */
  .mobile-menu-footer {
    flex-shrink: 0;
    padding: var(--content-spacing-5) var(--content-spacing-4);
    gap: var(--content-spacing-4);
  }

  .mobile-menu-footer__link {
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mobile-menu-footer__icon {
    display: inline-flex;
    width: 24px;
    justify-content: center;
  }

  .mobile-menu-footer__icon svg {
    width: auto;
    height: 22px;
  }

  .mobile-menu-footer__icon--diamond svg path {
    fill: currentColor;
  }

  @media screen and (min-width: 992px) {
    .mobile-menu-outer-wrapper {
      display: none;
    }
  }
/* END_BLOCK:_mobile-mega-menu */

/* START_BLOCK:_mobile-mega-menu_accordion (INDEX:94) */
/* Root category row */
  .mobile-nav-row {
    padding: var(--content-spacing-4) var(--content-spacing-4);
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
  }

  .mobile-nav-row__label {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mobile-nav-row__chevron svg {
    display: block;
  }

  /* Category panel (slides in from the right) */
  .mobile-nav-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--brand-color-6);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.25s ease,
      visibility 0.25s ease;
    overflow-y: auto;
  }

  .mobile-nav-panel.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Beige breadcrumb / title zone */
  .mobile-nav-panel__head {
    padding: var(--content-spacing-3) var(--content-spacing-4) var(--content-spacing-4);
    background: var(--brand-color-5);
    border-bottom: none;
    padding-left: var(--content-spacing-1);
  }

  .mobile-nav-breadcrumb {
    margin-bottom: var(--content-spacing-2);
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-color);
  }

  .mobile-nav-titlerow {
    justify-content: flex-start;
    padding-left: var(--content-spacing-5);
  }

  .mobile-nav-back {
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
  }

  .mobile-nav-back svg {
    display: block;
  }

  .mobile-nav-title {
    font-family: var(--heading-font-family);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--text-color);
  }

  .mobile-nav-panel__body {
    flex: 1 1 auto;
    padding: var(--content-spacing-2) var(--content-spacing-4) var(--content-spacing-4);
  }
/* END_BLOCK:_mobile-mega-menu_accordion */

/* START_BLOCK:_mobile-mega-menu_link-group (INDEX:96) */
.mobile-nav-panel .mobile-group-title {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-nav-panel .accordion {
    border-bottom: 0;
  }

  .mobile-nav-panel .panel {
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color-1) 20%, transparent);
  }

  /* Inner links list: 14px, 14px gap */
  .mobile-nav-panel .panel .content {
    gap: 14px;
    padding-bottom: 14px;
  }

  .mobile-nav-panel .mobile-sublink {
    display: block;
    padding: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-color);
    transition: color 0.2s ease;
  }

  .mobile-nav-panel .mobile-sublink:hover {
    color: var(--brand-color-1);
  }
/* END_BLOCK:_mobile-mega-menu_link-group */

/* START_BLOCK:_payment-icons (INDEX:97) */
.product-form .payment-icons-container:empty {
    display: none;
  }
/* END_BLOCK:_payment-icons */

/* START_BLOCK:_product-complementary-products (INDEX:99) */
@media only screen and (max-width: 768px) {
    .complementary-products-container {
      width: calc(
        100% +
          (
            2 *
              clamp(
                var(--page-width-padding-mobile),
                calc(var(--padding-intercept) + var(--padding-slope) * 1vw),
                var(--page-width-padding)
              )
          )
      );
      margin-inline: calc(-1 * var(--page-width-padding-mobile));
      padding-inline: var(--page-width-padding-mobile);
    }
  }

  @media only screen and (min-width: 768px) {
    .complementary-products-container {
      clip-path: inset(0 -100vw 0 0);
    }
  }

  .complementary-products-container product-card product-form {
    justify-items: stretch;
    height: 100%;
  }

  .complementary-products-container product-card product-form .variant-prices-container {
    margin-top: auto;
  }
/* END_BLOCK:_product-complementary-products */

/* START_BLOCK:_product-delivery-info (INDEX:101) */
.product-delivery-info {
    margin-top: -10px;
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
  }

  /* Divider below the delivery timer — matches the one above the variant selector
     (same gold-dust line + content-spacing-6 gap). */
  .product-delivery-info {
    padding-bottom: var(--content-spacing-6);
    border-bottom: 1px solid var(--brand-color-4);
  }

  .product-delivery-info__icon svg {
    display: block;
  }

  .product-delivery-info__meta {
    row-gap: var(--content-spacing-2);
  }

  /* Mobile: stack centred, finance above points */
  @media only screen and (max-width: 991.98px) {
    /* -10px pull-up is desktop-only */
    .product-delivery-info {
      margin-top: 0;
    }

    .product-delivery-info__meta {
      flex-direction: column;
      align-items: center;
    }

    .product-delivery-info__finance {
      order: 1;
      justify-content: center;
    }

    .product-delivery-info__points {
      order: 2;
      justify-content: center;
    }

    /* Delivery timer centred */
    .delivery-timer {
      justify-content: center;
    }

    .delivery-timer__text {
      text-align: center;
    }
  }

  /* Finance line reused inline (icon · Finance from £X/mo | View Options) */
  .product-delivery-info__finance .finance-options {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
  }

  /* Separator hangs off the end of the "Finance from" line, NOT off the trigger. A ::before
     inside the trigger sits in that button's own line box, and the button is underlined — an
     ancestor's text-decoration is painted across its whole line box, so `text-decoration: none`
     on the pseudo can't lift it (nor can inline-block: that stops the decoration propagating
     into the box, but the button still draws its underline beneath it). The result was an
     underlined pipe plus a stray 6px of underline before the label. The <p> isn't underlined,
     so putting it there keeps the underline on "View Options" alone.
     Spacing is unchanged: 6px here, then the flex container's 6px gap. */
  .product-delivery-info__finance .finance-options__from::after {
    content: '|';
    margin-left: 6px;
    color: var(--text-color);
  }

  /* The widget is an iframe PayPal sizes itself; just stop it stretching the flex row and
     collapse the reserved space on the (eligible-but-not-rendered) case. */
  .product-delivery-info__paypal-msg {
    min-width: 0;
  }

  /* critical.css gives every iframe `aspect-ratio: 16 / 9` so YouTube embeds stay proportional.
     PayPal sizes its message frame itself (inline height, ~49px at 136 wide), so that ratio just
     distorts it. critical.css is frozen, so it's undone here — one class beats the bare `iframe`
     selector, and the override stays scoped to this widget so real embeds keep their ratio. */
  .product-delivery-info__paypal-msg iframe {
    aspect-ratio: auto;
  }

  /* PayPal can still decline to render (amount outside its own eligibility). The message div is
     the wrapper's only child now, so collapse both rather than leave an empty flex item holding
     a gap open in the meta row. */
  .product-delivery-info__paypal-msg:empty {
    display: none;
  }

  .product-delivery-info__finance:has(> .product-delivery-info__paypal-msg:empty) {
    display: none;
  }

  .product-delivery-info__delivery {
    margin-top: var(--content-spacing-4);
  }

  .delivery-timer {
    padding: 10px 14px;
    background: var(--brand-color-4);
  }

  .delivery-timer__icon {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
  }

  .delivery-timer__icon svg {
    display: inline-block;
    width: 20px;
    height: auto;
    vertical-align: middle;
  }

  .delivery-timer__text {
    font-size: 14px;
    font-weight: 400;
  }

  /* Only the value is emphasised, not the sentence around it: the live counter on the countdown
     line, and the lead-time figure (already marked up as <strong>) on the made-to-order line —
     the two are alternates of the same message, so they carry the weight in the same place. */
  .delivery-timer__text [data-delivery-counter],
  .delivery-timer__text strong,
  .delivery-timer__text b {
    font-weight: 600;
  }
/* END_BLOCK:_product-delivery-info */

/* START_BLOCK:_product-finance-promo (INDEX:103) */
/* Padded when the metaobject sets a background (so the copy isn't flush to the colour's edge)
     or an explicit padding. The metaobject's `padding` rides in as a custom property, so this one
     rule covers both — override present, or the content-spacing-1 default. */
  .finance-promo--boxed {
    padding: var(--finance-promo-padding, var(--content-spacing-1));
  }

  /* Scoped under the wrapper purely for specificity. critical.css has
     `button:not([class^="button-"]) { color: var(--text-color); ... }` at (0,1,1) — this trigger
     isn't a `button-*`, so that rule caught it and outranked a bare `.finance-promo__trigger`
     (0,1,0), pinning the copy to the body colour and ignoring the metaobject's text_colour.
     Naming the parent takes this to (0,2,0), which wins. critical.css is frozen, hence the
     override here rather than an exclusion there. */
  .finance-promo .finance-promo__trigger {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: var(--finance-promo-align, left);
    /* Moves the icon + copy group as one. `w-100` on the trigger gives it the room to shift in. */
    justify-content: var(--finance-promo-justify, flex-start);
    cursor: pointer;
    color: var(--finance-promo-text, var(--text-color));
    font-family: var(--body-font-family);
  }

  /* The copy column: text-align handles the richtext, but the timer is a flex row and would stay
     left whatever the text-align, so the column's align-items has to move with it. */
  .finance-promo__body {
    align-items: var(--finance-promo-align-items, stretch);
  }

  .finance-promo__icon {
    flex: 0 0 auto;
    width: 75px;
  }

  .finance-promo__icon img {
    display: block;
    width: 100%;
    height: auto;
  }

  .finance-promo__text {
    font-size: 12px;
    line-height: 1.4;
  }

  .finance-promo__timer {
    font-size: 12px;
    line-height: 1;
  }

  .finance-promo-modal .finance-promo-modal__panel {
    width: min(760px, 92vw);
    padding: var(--content-spacing-5);
  }
/* END_BLOCK:_product-finance-promo */

/* START_BLOCK:_product-information (INDEX:105) */
.product-accordions #description-read-more {
    scroll-margin-top: 170px;
  }

  @media only screen and (min-width: 992px) {
    .product-accordions {
      margin-top: -10px;
    }
  }
/* END_BLOCK:_product-information */

/* START_BLOCK:_product-specification (INDEX:110) */
.pdp-spec__list {
    display: flex;
    flex-direction: column;
    gap: var(--content-spacing-2, 10px);
  }

  .pdp-spec__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    align-items: baseline;
    font-size: var(--body-font-size, 14px);
    line-height: 1.5;
  }

  .pdp-spec__label::after {
    content: ":";
  }

  .pdp-spec__value {
    color: var(--text-color);
    font-weight: 600;
  }

  .pdp-spec__link {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pdp-spec__note {
    margin-top: var(--content-spacing-2, 10px);
    font-size: var(--caption-font-size, 12px);
    opacity: 0.8;
  }
/* END_BLOCK:_product-specification */

/* START_BLOCK:_product-usp-group (INDEX:114) */
.product-usp-group.has-divider-top {
    padding-top: var(--content-spacing-4);
    border-top: 1px solid var(--brand-color-4);
  }

  .product-usp-group.has-divider-bottom {
    padding-bottom: var(--content-spacing-4);
    border-bottom: 1px solid var(--brand-color-4);
  }

  /* Card-as-link: keep it looking exactly like a plain card. Without this the global
     `a:not([class^="button-"]):hover` rule recolours the whole card's text on hover. The
     heading keeps its own underline — that is set on the span, not inherited from here. */
  a.product-usp-card--link,
  a.product-usp-card--link:hover,
  a.product-usp-card--link:focus {
    color: inherit;
    text-decoration: none;
  }

  .product-usp-card__icon {
    flex: 0 0 auto;
  }

  .product-usp-card__icon img {
    width: auto;
    height: 19px;
    max-width: 28px;
  }

  .product-usp-card__heading {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .product-usp-card__text,
  .product-usp-card__text p {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
  }

  /* Mobile: the group itself stays within the page width (so its divider stays contained),
     while the slider inside bleeds out to the right viewport edge so slides slide edge-to-edge.
     The group already sits at the page-width left edge, so the first slide stays aligned; we
     only need to extend the slider right by the page-width padding to reach the viewport edge. */
  @media screen and (max-width: 991.98px) {
    .product-usp-group .blaze-container-wrapper {
      width: calc(100% + var(--page-width-padding-mobile));
    }
  }
/* END_BLOCK:_product-usp-group */

/* START_BLOCK:_product-whatsapp (INDEX:116) */
@media only screen and (min-width: 992px) {
    .product-whatsapp {
      margin-top: -10px;
    }
  }

  .product-whatsapp.has-divider-top {
    padding-top: var(--content-spacing-4);
    border-top: 1px solid var(--brand-color-4);
  }

  .product-whatsapp.has-divider-bottom {
    padding-bottom: var(--content-spacing-4);
    border-bottom: 1px solid var(--brand-color-4);
  }

  .product-whatsapp__link {
    color: var(--text-color);
  }

  .product-whatsapp__icon svg {
    display: block;
    width: auto;
    height: 21px;
  }

  .product-whatsapp__heading {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--text-color);
  }

  .product-whatsapp__text {
    padding-left: calc(21px + var(--content-spacing-2));
  }

  .product-whatsapp__text,
  .product-whatsapp__text p {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
  }

  @media only screen and (max-width: 767.98px) {
    .product-whatsapp__text {
      padding-left: 0;
    }
  }
/* END_BLOCK:_product-whatsapp */

/* START_BLOCK:_slider-ambassadors (INDEX:117) */
/* Static CTA + sliding cards. The CTA stays put; only the track moves. */
  .ambassador-slider {
    display: flex;
    gap: var(--grid-gap);
    align-items: stretch;
  }

  .ambassador-slider__cta {
    flex: 0 0 var(--amb-cta-basis, 24%);
    max-width: var(--amb-cta-basis, 24%);
    display: flex;
  }
  .ambassador-slider__cta .cta {
    width: 100%;
    height: 100%;
  }

  .ambassador-slider__track {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Arrows: contained inside the track, vertically centred just inside each edge.
     Selectors carry an extra class so they beat the base `.blaze-navigation-arrows` rules. */
  .ambassador-slider__arrows .blaze-navigation-arrows {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100% !important;
    max-width: none;
    pointer-events: none;
    z-index: 2;
  }
  .ambassador-slider__arrows .blaze-navigation-arrows .blaze-button-prev,
  .ambassador-slider__arrows .blaze-navigation-arrows .blaze-button-next {
    position: absolute;
    top: 50%;
    pointer-events: auto;
  }
  /* Straddle the slider edges, matching the theme's usual inline nav. */
  .ambassador-slider__arrows .blaze-navigation-arrows .blaze-button-prev {
    left: 0;
    right: auto;
    transform: translate(-50%, -50%);
  }
  .ambassador-slider__arrows .blaze-navigation-arrows .blaze-button-next {
    right: 0;
    left: auto;
    transform: translate(50%, -50%);
  }

  @media only screen and (max-width: 767.98px) {
    /* Stack: CTA within the page width on top, cards slider below, no arrows.
       The CTA keeps the page gutter; the slider bleeds off the right edge but the
       first card still starts at the 20px gutter. */
    .ambassador-slider {
      flex-direction: column;
      gap: var(--content-spacing-5);
    }
    .ambassador-slider__cta {
      flex: 0 0 auto;
      width: 100%;
      max-width: none;
      aspect-ratio: 4 / 5;
    }
    .ambassador-slider__track {
      flex: 0 0 auto;
      width: calc(100% + var(--page-width-padding-mobile));
    }
    .ambassador-slider__arrows {
      display: none;
    }
  }
/* END_BLOCK:_slider-ambassadors */

/* START_BLOCK:_slider-facts (INDEX:121) */
/* Vertical dividers between fact slides, centred in the slide gap
     (matches the USP slider styling exactly). */
  .usp-slide:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 6%;
    bottom: 6%;
    right: calc(-0.5 * var(--slide-gap, 0px));
    width: 1px;
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
    pointer-events: none;
  }

  /* Desktop: cap the fact content width */
  @media only screen and (min-width: 768px) {
    .usp-slide > * {
      max-width: 200px;
      margin-inline: auto;
    }
  }

  /* Mobile: keep 30px between the content and the divider (which sits in the
     slide gap), and dim non-active slides — active centred slide fades to full */
  @media only screen and (max-width: 767.98px) {
    .usp-slide > * {
      padding-inline: max(0px, calc(30px - 0.5 * var(--slide-gap, 0px)));
    }

    /* Dim the slide CONTENT, not the .usp-slide itself — opacity on the slide would also fade its
       ::after divider. Targeting the content children keeps the dividing lines at full opacity. */
    [data-usp-slider] .usp-slide > * {
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }

    [data-usp-slider] .usp-slide.is-active > * {
      opacity: 1;
    }
  }

  /* End dividers at the slider container edges (desktop, where arrows show),
     with the arrow circle centred on them */
  @media only screen and (min-width: 768px) {
    .slider-section:has(.usp-slide) [data-usp-slider] .blaze-container-wrapper::before,
    .slider-section:has(.usp-slide) [data-usp-slider] .blaze-container-wrapper::after {
      content: "";
      position: absolute;
      top: 6%;
      bottom: 6%;
      width: 1px;
      background: color-mix(in srgb, var(--text-color) 18%, transparent);
      z-index: 0;
      pointer-events: none;
    }

    .slider-section:has(.usp-slide) [data-usp-slider] .blaze-container-wrapper::before {
      left: 0;
    }

    .slider-section:has(.usp-slide) [data-usp-slider] .blaze-container-wrapper::after {
      right: 0;
    }
  }
/* END_BLOCK:_slider-facts */

/* START_BLOCK:_slider-logos (INDEX:122) */
/* Logo slider renders its own centred heading. Hide the Slider section's default
     header blocks via the editor's visibility (eye) toggle rather than CSS. */
  .logo-slider__heading {
    margin-bottom: var(--content-spacing-6);
    color: var(--text-color);
    font-weight: 500;
  }

  /* Vertical dividers between logos, centred in the slide gap */
  .logo-slider .logo-slide:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    right: calc(-0.5 * var(--slide-gap, 0px));
    width: 1px;
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
    pointer-events: none;
  }

  /* Mobile: dim non-active logos, active centred slide fades to full */
  @media only screen and (max-width: 767.98px) {
    [data-usp-slider].logo-slider .logo-slide {
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }

    [data-usp-slider].logo-slider .logo-slide.is-active {
      opacity: 1;
    }
  }

  /* End dividers at the slider container edges (desktop, where arrows show),
     with the arrow circle centred on them. Skipped when desktop overflow is on —
     the slides run past the container edge, so an end divider there would just
     double up with the between-slide divider next to the arrow. */
  @media only screen and (min-width: 768px) {
    .slider-section:has(.logo-slider) .logo-slider:not(.desktop-slider-overflow) .blaze-container-wrapper::before,
    .slider-section:has(.logo-slider) .logo-slider:not(.desktop-slider-overflow) .blaze-container-wrapper::after {
      content: "";
      position: absolute;
      top: 12%;
      bottom: 12%;
      width: 1px;
      background: color-mix(in srgb, var(--text-color) 18%, transparent);
      z-index: 0;
      pointer-events: none;
    }

    .slider-section:has(.logo-slider) .logo-slider:not(.desktop-slider-overflow) .blaze-container-wrapper::before {
      left: 0;
    }

    .slider-section:has(.logo-slider) .logo-slider:not(.desktop-slider-overflow) .blaze-container-wrapper::after {
      right: 0;
    }
  }
/* END_BLOCK:_slider-logos */

/* START_BLOCK:_slider-products-tabs (INDEX:125) */
/* This block renders its own header (title + tabs) and inline arrows. Hide the
     Slider section's default heading/richtext/link/arrows blocks via the editor's
     visibility (eye) toggle rather than CSS. */
  .product-tabs__header {
    margin-bottom: var(--content-spacing-6);
    /* Desktop/tablet: keep the intro + tabs on one row so a long tab list scrolls
       horizontally (inside .product-tabs__tabs) instead of wrapping to a new line. */
    flex-wrap: nowrap;
  }

  /* Mobile: stack the intro above the full-width tabs bar. */
  @media only screen and (max-width: 767.98px) {
    .product-tabs__header {
      flex-wrap: wrap;
    }

    /* `.to-sm-w-100` sets the width; restore grow so the bar fills the row rather
       than hugging its tabs. */
    .product-tabs__tabs-wrap {
      flex: 1 1 100%;
    }
  }

  /* Tabs bar — horizontally scrollable with a soft fade on the right.
     `flex: 0 1 auto` sizes the wrap to its tabs and lets it SHRINK, so:
       - room to spare  → the wrap is only as wide as the tabs, and the header's
         flex-between drops it against the right edge (previously `flex: 1 1 0`
         stretched it across the row, stranding the tabs on the left);
       - not enough room → it shrinks to the leftover width and the inner bar
         scrolls, rather than pushing the header wider.
     min-width:0 is what permits that shrink below content size. */
  .product-tabs__tabs-wrap {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Fade + scroll padding only while there's actually something to scroll to
     (`is-scrollable` from product-tabs.js). Applied unconditionally they'd wash out
     the last tab and hold it off the right edge when the tabs already fit. */
  .product-tabs__tabs-wrap.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }

  .product-tabs__tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* Momentum scroll on touch; drag-to-scroll wired in product-tabs.js */
    -webkit-overflow-scrolling: touch;
  }

  .product-tabs__tabs-wrap.is-scrollable .product-tabs__tabs {
    padding-right: var(--content-spacing-6);
  }

  .product-tabs__tabs.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
  }

  .product-tabs__tabs.is-dragging .product-tabs__tab {
    /* Don't let a drag land as a click on a tab */
    pointer-events: none;
  }

  .product-tabs__tabs::-webkit-scrollbar {
    display: none;
  }

  /* Parent class added for specificity so these beat the global
     button:not([class^="button-"]) reset */
  .product-tabs__tabs .product-tabs__tab {
    flex: 0 0 auto;
    padding: 10px 22px;
    border: 1px solid var(--brand-color-4);
    border-radius: 999px;
    background: transparent;
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .product-tabs__tabs .product-tabs__tab:hover {
    border-color: var(--brand-color-1);
  }

  .product-tabs__tabs .product-tabs__tab.active {
    background: var(--brand-color-4);
    border-color: var(--brand-color-4);
  }

  .product-tabs__panel.is-hidden {
    display: none;
  }
/* END_BLOCK:_slider-products-tabs */

/* START_BLOCK:_slider-usps (INDEX:127) */
/* Vertical dividers between USP slides, centred in the slide gap */
  .usp-slide:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 6%;
    bottom: 6%;
    right: calc(-0.5 * var(--slide-gap, 0px));
    width: 1px;
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
    pointer-events: none;
  }

  /* Desktop: cap the USP content width */
  @media only screen and (min-width: 768px) {
    .usp-slide > * {
      max-width: 200px;
      margin-inline: auto;
    }
  }

  /* Mobile: keep 30px between the content and the divider (which sits in the
     slide gap), and dim non-active slides — active centred slide fades to full */
  @media only screen and (max-width: 767.98px) {
    .usp-slide > * {
      padding-inline: max(0px, calc(30px - 0.5 * var(--slide-gap, 0px)));
    }

    /* Dim the slide CONTENT, not the .usp-slide itself — opacity on the slide would also fade its
       ::after divider. Targeting the content children keeps the dividing lines at full opacity. */
    [data-usp-slider] .usp-slide > * {
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }

    [data-usp-slider] .usp-slide.is-active > * {
      opacity: 1;
    }
  }

  /* End dividers at the slider container edges (desktop, where arrows show),
     with the arrow circle centred on them. Skipped when desktop overflow is on —
     the slides run past the container edge, so an end divider there would just
     double up with the between-slide divider next to the arrow. */
  @media only screen and (min-width: 768px) {
    .slider-section:has(.usp-slide) [data-usp-slider]:not(.desktop-slider-overflow) .blaze-container-wrapper::before,
    .slider-section:has(.usp-slide) [data-usp-slider]:not(.desktop-slider-overflow) .blaze-container-wrapper::after {
      content: "";
      position: absolute;
      top: 6%;
      bottom: 6%;
      width: 1px;
      background: color-mix(in srgb, var(--text-color) 18%, transparent);
      z-index: 0;
      pointer-events: none;
    }

    .slider-section:has(.usp-slide) [data-usp-slider]:not(.desktop-slider-overflow) .blaze-container-wrapper::before {
      left: 0;
    }

    .slider-section:has(.usp-slide) [data-usp-slider]:not(.desktop-slider-overflow) .blaze-container-wrapper::after {
      right: 0;
    }
  }
/* END_BLOCK:_slider-usps */

/* START_BLOCK:_social-links (INDEX:128) */
.social-icon-block svg path {
    fill: var(--svg-color);
  }
  .social-icon-block svg:hover path {
    fill: var(--svg-color-hover);
  }
/* END_BLOCK:_social-links */

/* START_BLOCK:_top-level_drop-down (INDEX:129) */
.header-mega-menu-container:first-of-type .top-level-link {
    padding-left: 0 !important;
  }

  .mega-menu-dropdown_outer-wrapper {
    top: calc(100% - 1px);
    width: 100dvw;

    /* Full-bleed to the viewport edges: left:0 is relative to the (centred, capped) page-width
       header container, so on wide screens it sits inset. Pull it back to the true left edge. */
    margin-left: calc(-50dvw + 50%);
    background: var(--brand-color-6);
    transition: 0.2s all;
  }

  .mega-menu-dropdown {
    min-height: 540px;
    max-height: 70vh;
  }

  /* Link columns share the available space evenly */
  .mega-menu-dropdown > .mega-menu-links-container:not(.mega-menu-cta-group) {
    flex: 1 1 0;
    min-width: 0;
  }

  /* CTA sits as a fixed-width card on the right */
  .mega-menu-dropdown > .cta,
  .mega-menu-dropdown > .mega-menu-cta-group {
    flex: 0 0 clamp(300px, 24%, 380px);
    min-width: 0;
    height: auto;
    grid-column: unset !important;
  }

  /* Image-card CTA fallback background keeps the (white) text legible
     even before/without an image on the metaobject */
  .mega-menu-dropdown .cta:not(.cta-card) {
    background-color: var(--brand-color-1);
  }

  .link-group:hover,
  .link-group:focus-within {
    opacity: 1;
  }

  .link-group:hover .mega-menu-dropdown_outer-wrapper,
  .link-group:focus-within .mega-menu-dropdown_outer-wrapper,
  .mega-menu-dropdown_outer-wrapper:hover,
  .link-group.open-to-customise .mega-menu-dropdown_outer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px;
    min-height: 500px;
    max-height: 70vh;
    cursor: default;
    pointer-events: auto;
  }

  .link-group.open-to-customise .mega-menu-dropdown_outer-wrapper {
    max-height: 9999px;
    opacity: 1;
  }

  .mega-menu-dropdown_outer-wrapper:hover .mega-menu-dropdown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
/* END_BLOCK:_top-level_drop-down */

/* START_BLOCK:_top-level_link (INDEX:130) */
.mobile-menu-outer-wrapper .mobile-menu .mobile-menu-navigation .link-group {
    border-bottom: 1px solid var(--brand-color-2);
  }

  /* Vertical spacing for plain links in the mobile menu (desktop has none) */
  .mobile-nav .link-group {
    padding-top: var(--content-spacing-4);
    padding-bottom: var(--content-spacing-4);
  }
/* END_BLOCK:_top-level_link */

/* START_BLOCK:_usp (INDEX:131) */
.usp-heading {
    letter-spacing: 0.04em;
  }
/* END_BLOCK:_usp */

/* START_BLOCK:contact-details (INDEX:133) */
.contact-block svg path {
    stroke: var(--svg-color);
  }
  .contact-block p {
    margin-top: 0;
  }
  .contact-block {
    ul {
      margin: 0;
      padding: 0;
    }
  }
/* END_BLOCK:contact-details */

/* START_BLOCK:custom-liquid (INDEX:134) */
/* Yotpo reviews widget (full list) — theme overrides. Selectors are Yotpo-only, so they're inert
     when this block holds anything else. */
  .yotpo-base-layout {
    width: 100% !important;
  }

  .yotpo-review-border-smooth.yotpo-border-margin {
    display: none !important;
  }

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

  .yotpo-display-l .yotpo-main-layout .yotpo-head,
  .yotpo-display-m .yotpo-main-layout .yotpo-head,
  .yotpo-display-s .yotpo-head {
    margin-top: 0;
  }

  /* Headline in the theme heading font, at heading-h2 size */
  .yotpo-display-l .yotpo-main-layout .yotpo-head .yotpo-headline,
  .yotpo-display-m .yotpo-main-layout .yotpo-head .yotpo-headline {
    font-family: var(--heading-h2-font-family);
    font-size: clamp(
      var(--heading-h2-size-mobile),
      calc(var(--heading-h2-intercept) + var(--heading-h2-slope) * 1vw),
      var(--heading-h2-size)
    );
  }

  /* Small (mobile) display: fixed heading-h2 mobile size */
  .yotpo-display-s .yotpo-head .yotpo-headline {
    margin-top: 0;
    font-family: var(--heading-h2-font-family);
    font-size: var(--heading-h2-size-mobile);
  }

  .yotpo-empty-state svg {
    margin: 0 auto;
  }

  /* Write-review button. ID + !important to beat both the theme's global button reset and Yotpo's
     own Vue-scoped rule (whose [data-v-…] hash changes between widget builds). */
  #yotpo-main-widget-btn {
    padding: 0 14px !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

  .yotpo-new-review-btn-wrapper .yotpo-btn-l {
    width: auto !important;
  }

  .yotpo-new-review-btn-wrapper .yotpo-new-review-btn.empty-state {
    margin-bottom: 0;
  }

  /* Review cards */
  .yotpo-star-rating .star-container {
    width: 16px;
  }

  .yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title,
  .yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title {
    flex-direction: column !important;
  }

  .yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-title,
  .yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-title {
    margin-top: 5px;
    margin-left: 0;
  }

  .yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review),
  .yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) {
    margin: 0;
  }

  .yotpo-display-s .yotpo-review,
  .yotpo-media-modal .yotpo-review {
    margin: 0 !important;
  }

  .yotpo-reviews-item {
    padding: 15px;
    background: #fff;
  }

  .yotpo-reviews-item .yotpo-review-border-smooth.top-margin,
  .yotpo-review-border-smooth {
    display: none !important;
  }

  /* Star-distribution dividers match the theme dividers (Gold Dust) */
  .yotpo-bottom-line .yotpo-star-distribution,
  .yotpo-bottom-line .yotpo-vertical-border {
    border-color: var(--brand-color-4) !important;
  }

  /* Filters + layout-header spacing */
  .yotpo-filters-container {
    margin: 0 0 20px !important;
  }

  .yotpo-display-l .yotpo-main-layout .yotpo-layout-header-wrapper {
    margin-bottom: 20px !important;
  }

  /* Write-review modal (portaled to <body> when opened) */
  .modal-backdrop.yotpo-review-form-modal .yotpo-modal {
    height: fit-content;
    border-radius: 0;
  }

  .yotpo-device-mobile .modal-backdrop.yotpo-review-form-modal .yotpo-modal,
  .yotpo-device-tablet .modal-backdrop.yotpo-review-form-modal .yotpo-modal {
    height: fit-content;
  }
/* END_BLOCK:custom-liquid */

/* START_BLOCK:link (INDEX:137) */
/* Optional button icon — inline with the label, sized to the text. */
  .link-has-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--content-spacing-2);
  }

  .link-has-icon .link-icon {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
  }

  .link-has-icon .link-icon img,
  .link-has-icon .link-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Desktop/mobile button swap — clean split at 768px. */
  @media screen and (min-width: 768px) {
    .link-mobile-only {
      display: none !important;
    }
  }

  @media screen and (max-width: 767.98px) {
    .link-desktop-only {
      display: none !important;
    }
  }
/* END_BLOCK:link */

/* START_BLOCK:links-container (INDEX:138) */
.links-container:empty {
    display: none;
  }
  .text-center .links-container {
    justify-content: center;
  }
  .text-right .links-container {
    justify-content: flex-end;
  }

  .links-container--grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .links-container--grid-2 > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
/* END_BLOCK:links-container */

/* START_BLOCK:searchbar (INDEX:140) */
.form-search-bar input {
    border: 1px solid var(--brand-color-5);
    border-radius: 20px;
  }
  .form-search-bar input::placeholder {
    color: var(--body-color);
  }
  .form-search-bar .submit-group {
    right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--brand-color-2);
  }
  .form-search-bar .submit-group svg {
    width: 12px;
    height: 12px;
    color: #fff;
  }
/* END_BLOCK:searchbar */

/* START_BLOCK:section-navigation (INDEX:142) */
.section-navigation-container:has(.blaze-navigation-arrows.inline) {
    gap: 0;
  }
/* END_BLOCK:section-navigation */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-item-general (INDEX:144) */
.panel {
    height: 100%;
  }
/* END_SNIPPET:accordion-item-general */

/* START_SNIPPET:accordion-item (INDEX:145) */
.accordion {
    background: transparent;
    border: none;
    outline: none;
    transition: 0.3s all;
  }

  .accordion > div {
    display: flex;
    align-items: center;
  }

  .panel {
    border-bottom: 1px solid var(--brand-color-4);
  }

  /* Accordion title = H5 (Work Sans 500, 15px, 150%, 4% tracking, uppercase). Colour
     comes from the inline heading_color (charcoal by default). */
  .accordion .accordion__question {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Panel copy = body text */
  .panel .content {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size, 14px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
  }

  .accordion * {
    user-select: none;
    pointer-events: none;
  }

  .accordion .chevron {
    display: flex;
    flex: 0 0 auto;
    width: 18px;
    height: 8px;
  }

  @media only screen and (max-width: 767.98px) {
    .accordion .chevron {
      width: 14px;
      height: 7px;
    }

    .button-accordion.accordion {
      padding-top: var(--content-spacing-3);
      padding-bottom: var(--content-spacing-3);
    }
  }

  .accordion .chevron svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
  }

  .accordion.active .chevron svg {
    transform: rotateX(180deg);
  }

  .panel {
    transition: max-height 0.2s ease-out;
  }
/* END_SNIPPET:accordion-item */

/* START_SNIPPET:article-card (INDEX:148) */
.article-card:hover img {
    transform: scale(1.05);
  }

  .article-card .article-card-image img {
    transition: all 0.3s;
  }

  .article-card .article-card-tags {
    top: 0;
    left: 0;
  }

  /* ---- Blog-slider card variants ---- */
  .article-card--overlay .article-card-image img,
  .article-card--overlay .article-card-image > svg,
  .article-card--compact .article-card-image img,
  .article-card--compact .article-card-image > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-card--compact .article-card-image {
    aspect-ratio: 289 / 349;
  }

  .article-card--overlay .badge-container.top-left,
  .article-card--compact .badge-container.top-left {
    position: absolute;
    top: clamp(6px, 2vw, 20px);
    left: clamp(6px, 2vw, 20px);
    /* Long tags ("Engagement & Wedding Rings") ran past the card edge in the 2-column mobile
       grid. Cap the badge at the card width minus the inset it sits at on both sides. */
    max-width: calc(100% - (2 * clamp(6px, 2vw, 20px)));
    z-index: 3;
  }

  /* Badges match the product card badges exactly (mirrors .product-card .product-badge) */
  .article-card .badge-1,
  .article-card .badge-2 {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 20px;
    border-radius: 0;
    background-color: var(--brand-color-6);
    /* Wrap inside the capped container instead of overflowing the card. */
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .article-card__scrim {
    z-index: 1;
    /* Let clicks fall through to the full-card image link beneath, so the whole
       featured card is clickable (like the regular card). */
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.72) 100%);
  }

  .article-card--overlay .article-card__overlay-content {
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(20px, 3vw, 34px);
    color: var(--text-color-alternate);
  }

  /* Article title — uppercase Work Sans, shared by both variants */
  .article-card__title {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Explicit colours so the global link-hover can't recolour them:
     compact stays charcoal, featured (overlay) stays optic white — on hover too. */
  .article-card--compact .article-card__title {
    color: var(--text-color);
  }

  /* Optional excerpt (line-clamped to 2) + read-more link — shown when the blog slider enables them */
  .article-card--compact .article-card__excerpt-text {
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
  }
  .article-card--compact .article-card__read-more {
    width: fit-content;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--text-color);
  }

  .article-card--overlay .article-card__title,
  .article-card--overlay .article-card__excerpt {
    color: var(--text-color-alternate);
    max-width: 70%;
  }

  .article-card--overlay .article-card__excerpt {
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
  }

  @media only screen and (max-width: 767.98px) {
    .article-card__title {
      font-size: 15px;
    }

    /* Featured (overlay) card on mobile: title full width, no excerpt */
    .article-card--overlay .article-card__title {
      max-width: none;
    }

    .article-card--overlay .article-card__excerpt {
      display: none;
    }
  }
/* END_SNIPPET:article-card */

/* START_SNIPPET:breadcrumbs (INDEX:158) */
/* `cont_hide_mob: true` above drops the product-title crumb below 767px (it's the full title,
     far too long for one line) — despite the name it only hides `.blink-product-current`, not the
     whole trail. Blink leaves the delimiter that preceded it, so trim that here; the remaining
     crumbs still scroll horizontally via `cont_scroll_mob`. */
  @media only screen and (max-width: 767px) {
    .breadcrumbs .blink-bc-delim:has(+ .blink-product-current) {
      display: none;
    }
  }

  /* Underline the linked crumbs on hover only. The current-page crumb is a
     <span class="blink-breadcrumbs-current">, so it never underlines. */
  .breadcrumbs .blink-breadcrumb-list a {
    text-decoration: none;
  }
  .breadcrumbs .blink-breadcrumb-list a:hover {
    text-decoration: underline;
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:cart-drawer (INDEX:160) */
/* Cart drawer shell */
  .cart-drawer-container {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .cart-drawer-container.open,
  .cart-drawer-container.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }

  .cart-drawer-backdrop {
    flex: 1;
    background: rgb(64 64 64 / 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .cart-drawer-container.open .cart-drawer-backdrop,
  .cart-drawer-container.is-open .cart-drawer-backdrop {
    opacity: 1;
  }

  .cart-drawer-panel {
    position: relative;

    /* Full dynamic-viewport height; the header takes its natural height at the top and
       .cart-drawer-content fills whatever remains (so nothing overflows off the bottom). */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    width: min(340px, 90vw);
    max-width: 340px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 0 24px rgb(0 0 0 / 20%);
    background: var(--brand-color-7);
    color: inherit;
    transform: translateX(100%);
    transition: transform 0.32s ease;
  }

  .cart-drawer-container.open .cart-drawer-panel,
  .cart-drawer-container.is-open .cart-drawer-panel {
    transform: translateX(0);
  }

  .cart-drawer-panel .side-cart-tab[data-cart-tab] {
    transition:
      background-color 200ms ease 0s,
      color 200ms ease 0s,
      border-color 200ms ease 0s;
    transition-delay: 0s;
  }

  .cart-recommendations-modal .modal-content {
    opacity: 0;
    transform: translateX(-64px);
    transition:
      transform 0.24s ease,
      opacity 0.24s ease;
    will-change: transform, opacity;
  }

  .cart-recommendations-modal .modal-close svg {
    pointer-events: none;
  }

  .cart-recommendations-modal .modal-content.slide-in-active {
    opacity: 1;
    transform: translateX(0);
  }

  @media (max-width: 768px) {
    .cart-recommendations-modal .modal-content {
      transform: translateY(48px);
    }

    .cart-recommendations-modal .modal-content.slide-in-active {
      transform: translateY(0);
    }

    .cart-drawer-panel {
      width: calc(100vw - 20px);
      max-width: unset;
    }
  }

  /* Header row: Gold Dust bar (same as the close button) with the title sitting on it as a
     sand-coloured tab (left) and the close (right). */
  .cart-drawer-header {
    flex-shrink: 0;
    background: var(--brand-color-4);
  }

  .cart-drawer-title {
    padding: 0 20px;
    background: var(--brand-color-7);
    color: var(--text-color);
    white-space: nowrap;
  }

  .cart-drawer-title__icon {
    display: inline-flex;
  }

  .cart-drawer-title__icon svg {
    width: 20px;
    height: 20px;
  }

  .cart-drawer-title__text {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .cart-drawer-close[data-close-cart] {
    padding: 15px;
    border: 0;
    background: var(--brand-color-4);
    color: var(--brand-color-1);
    cursor: pointer;
    appearance: none;
  }

  .cart-drawer-close[data-close-cart] svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  .cart-drawer-content {
    flex: 1;
    min-height: 0;
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-item-remove (INDEX:161) */
.remove-item svg {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:cart-item-remove */

/* START_SNIPPET:cart-item (INDEX:162) */
/* .side-cart-item {
  border-bottom: 1px solid var(--brand-color-5);
} */
  .img-wrapper {
    border: 1px solid var(--brand-color-5);
  }
  .remove-button button {
    max-width: 18px;
    padding: 0;
    cursor: pointer;
  }
  .remove-button button:hover svg path {
    fill: var(--button-3-color);
  }
/* END_SNIPPET:cart-item */

/* START_SNIPPET:cart-upsell (INDEX:164) */
.cart-upsell__heading {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .cart-upsell__slider {
    width: 100%;
  }

  /* Horizontal card: image left, details right */
  .cu-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .cu-card__media {
    flex: 0 0 40%;
    max-width: 150px;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--brand-color-5);
  }

  .cu-card__img,
  .cu-card__media > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cu-card__info {
    flex: 1 1 auto;
    gap: 8px;
    align-items: flex-start;
  }

  .cu-card__title {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .cu-card__amount {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-color);
  }

  .cu-card__compare {
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.6;
  }

  .cu-card__actions {
    margin-top: 4px;
  }

  /* Quantity stepper — matches the cart item quantity control */
  .cu-qty {
    min-height: 34px;
    border: 1px solid var(--brand-color-5);
    background-color: var(--brand-color-7);
  }

  .cu-qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-color);
  }

  .cu-qty__value {
    min-width: 24px;
    text-align: center;
    font-family: var(--body-font-family);
    font-size: 14px;
  }

  /* Add-to-cart button — solid charcoal with the cart icon. Scoped with .cu-card to beat the global
     `button:not([class^="button-"])` reset (specificity 0,1,1). */
  .cu-card .cu-card__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 100%;
    border: 1px solid var(--button-1-color);
    background: var(--button-1-color);
    color: var(--button-1-text-color);
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .cu-card .cu-card__add:hover {
    background: var(--button-1-hover-color);
    border-color: var(--button-1-hover-color);
  }

  .cu-card__add[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
  }

  .cu-card__add svg {
    width: 19px;
    height: 19px;
  }

  @media only screen and (max-width: 767.98px) {
    .cu-card {
      gap: 12px;
    }
    .cu-card__media {
      max-width: 110px;
    }
  }
/* END_SNIPPET:cart-upsell */

/* START_SNIPPET:collection-card (INDEX:167) */
/* Collection card title — shared by the detailed and simplified cards */
  .collection-card__title {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-color);
  }

  /* Uncontained cards (detailed + simplified) — image fills its 1:1 box */
  .collection-card--detailed .card-image img,
  .collection-card--detailed .card-image > svg,
  .collection-card--simple .card-image img,
  .collection-card--simple .card-image > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Image, title and link are all links — show the pointer cursor */
  .collection-card--detailed a,
  .collection-card--simple a,
  .collection-card--detailed .card-image img,
  .collection-card--simple .card-image img {
    cursor: pointer;
  }

  .collection-card--detailed .collection-card__desc {
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
  }

  /* Shop link uses button-6 (text link) but at weight 500 per design */
  .collection-card--detailed .collection-card__shop {
    font-weight: 500;
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:custom-option-dropdown (INDEX:171) */
custom-option-dropdown.custom-dropdown {
    z-index: 10;
    display: block;
    max-width: 320px;
  }

  custom-option-dropdown.custom-dropdown.dropdown-open {
    z-index: 1000;
  }

  custom-option-dropdown .dropdown-toggle {
    height: 39px;
    padding: 0 12px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-7, #fcfcfa);
    transition: all 0.3s ease;
  }

  custom-option-dropdown .dropdown-toggle:hover {
    filter: brightness(0.97);
  }

  /* "Size:" prefix */
  custom-option-dropdown .custom-select-option-name {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  /* Selected value */
  custom-option-dropdown .selected-text {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  custom-option-dropdown .dropdown-chevron {
    flex-shrink: 0;
    color: var(--text-color);
  }

  custom-option-dropdown .dropdown-toggle.open {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  custom-option-dropdown .dropdown-toggle svg {
    transition: transform 0.3s ease;
  }

  custom-option-dropdown .dropdown-toggle.open svg {
    transform: rotateX(180deg);
  }

  custom-option-dropdown .dropdown-options {
    top: 100%;
    left: 0;
    z-index: 1000;
    max-height: 200px;
  }

  custom-option-dropdown .dropdown-options.open {
    z-index: 1001 !important;
    display: block !important;
  }

  custom-option-dropdown .dropdown-options .variant-wrapper {
    border-bottom: 1px solid #eee;
  }

  custom-option-dropdown .dropdown-options .variant-wrapper:last-child {
    border-bottom: none;
  }

  custom-option-dropdown .dropdown-options .variant-wrapper label {
    margin: 0;
    transition: background-color 0.2s ease;
  }

  custom-option-dropdown .dropdown-options .variant-wrapper:hover label {
    background-color: #f0f0f0;
  }

  custom-option-dropdown .dropdown-options .variant-wrapper input:checked + label {
    background-color: var(--brand-color-1);
    color: var(--text-color-alternate);
  }

  /* Sold-out / unavailable options — muted, struck through, on-brand */
  custom-option-dropdown .dropdown-options .variant-wrapper.out-of-stock label,
  custom-option-dropdown .dropdown-options .variant-wrapper.unavailable-combination label {
    position: relative;
    background-color: transparent;
    color: var(--input-placeholder-color, #787878);
  }

  custom-option-dropdown .dropdown-options .variant-wrapper.out-of-stock:hover label,
  custom-option-dropdown .dropdown-options .variant-wrapper.unavailable-combination:hover label {
    background-color: var(--brand-color-6, #f7f5f1);
  }

  custom-option-dropdown .dropdown-options .variant-wrapper.unavailable-combination {
    pointer-events: none;
    cursor: not-allowed;
  }
/* END_SNIPPET:custom-option-dropdown */

/* START_SNIPPET:filters-horizontal (INDEX:174) */
.filter-container-wrapper {
background-color: inherit;
}
@media only screen and (max-width: 991.98px) {
.filter-container-wrapper {
  max-height: 80vh;
  z-index: 10;
  position: fixed;
  inset: auto 0 0 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-inline: 0;
  transform: translateY(calc(100% - 38px));
  transition: all 250ms ease;
}

.filter-container-wrapper:has(.open) {
  transform: translateY(0);
}

.filter-container-wrapper .filter-container {
  max-height: 70vh;
  margin-inline: auto;
}

.filter-container-wrapper.open .reset-filter-wrapper {
  inset: auto 0 15px 0;
}
.filter-container-wrapper .custom-filter-wrapper {
  pointer-events: none;
  display: block;
}

.filter-container-wrapper .custom-filter-wrapper.open {
  pointer-events: auto;
}
}

@media only screen and (min-width: 992px) {
.filter-container-wrapper {
  position: sticky;
  top: 120px;
}
}

.filter-container-wrapper.open {
padding-bottom: 50px;
}

@media only screen and (min-width: 992px) {
.filter-container-wrapper .mobile-filter-heading {
  display: none;
  padding-bottom: 0px;
  color: #fff;
  transition: all 250ms ease;
}
}
.filter-container-wrapper .mobile-filter-heading {
line-height: 22.5px;
}
.filter-container-wrapper .mobile-filter-heading > svg {
pointer-events: none;
transform: translateY(1px) rotate(180deg);
}

.filter-container-wrapper .mobile-filter-heading.open > svg {
transform: translateY(2px);
}

.filter-container-wrapper .mobile-filter-heading h4 {
font-size: 18px;
}

.filter-container-wrapper .mobile-filter-heading h2 svg {
margin-right: 5px;
}

.filter-container-wrapper .mobile-filter-heading svg {
cursor: pointer;
transition: 0.3s ease;
}

@media only screen and (min-width: 992px) {
.selected-filter-wrapper:empty {
  display: none !important;
}
}

.selected-filter-wrapper:has(.selected-filter) {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

@media (max-width: 991.98px) {
.selected-filter-wrapper {
  margin-top: 15px;
}
}
.selected-filter-wrapper .selected-filter {
width: fit-content;
color: var(--text-color);
background: var(--brand-color-4);
border-radius: var(--button-1-radius);
text-decoration: none;
border: none;
font: inherit;
cursor: pointer;
text-align: inherit;
}
.selected-filter-wrapper .selected-filter:hover svg {
rotate: 90deg;
}
.selected-filter-wrapper .selected-filter svg {
margin-right: 5px;
width: 10px;
height: 10px;
transition: all 0.3s;
}
.selected-filter-wrapper .selected-filter svg path {
stroke: var(--text-color);
}
@media (max-width: 991.98px) {
.selected-filter-wrapper.desktop {
  display: none;
}
}

.custom-filter[data-theme="sale"] {
display: none;
background-color: transparent;
border-radius: 0px;
padding: 0;
}
.custom-filter[data-theme="sale"] input {
position: absolute;
}
.filter-wrapper .custom-filter, .filter-wrapper .sort-container {
border-bottom: 1px solid currentColor;
}
.filter-wrapper .custom-filter .button {
width: unset;
text-align: center;
}
.filter-wrapper .custom-filter .filter-heading {
color: var(--text-color-secondary);
white-space: nowrap;
}
.filter-wrapper .custom-filter .filter-heading svg {
cursor: pointer;
transition: 0.3s ease;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.filter-wrapper .custom-filter .filter-body {
display: none;
}
.filter-wrapper .custom-filter.open .filter-body label input,
.custom-filter.open .filter-heading svg {
transform: rotate(180deg) translateY(6px);
}
.filter-wrapper .custom-filter.open .filter-body {
display: flex;
flex-direction: column;
margin-top: 5px;
max-height: 40vh;
overflow-x: hidden;
overflow-y: auto !important;
scrollbar-width: thin;
scrollbar-color: var(--brand-color-4) var(--brand-color-6);
}
.filter-wrapper .custom-filter.open .filter-body::-webkit-scrollbar {
width: 8px;
}
.filter-wrapper .custom-filter.open .filter-body::-webkit-scrollbar-track {
background: var(--brand-color-6);
border-radius: 999px;
}
.filter-wrapper .custom-filter.open .filter-body::-webkit-scrollbar-thumb {
background: var(--brand-color-4);
border-radius: 999px;
}
.filter-wrapper .custom-filter.open .filter-body::-webkit-scrollbar-thumb:hover {
background: var(--brand-color-2);
}
.filter-wrapper .custom-filter.open .filter-body label input:focus {
outline: none;
}
.filter-wrapper .custom-filter.open .filter-body label .custom-check {
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
aspect-ratio: 1;
padding: 2px;
margin-left: 3px;
margin-right: 5px;
background: var(--text-color-alternate);
border-radius: 50%;
border: 1px solid var(--brand-color-6);
}
.filter-wrapper .custom-filter.open .filter-body label .custom-check svg {
opacity: 0;
object-fit: contain;
width: 100%;
height: 100%;
min-height: 15px;
min-width: 15px;
}
.filter-wrapper .custom-filter.open .filter-body label input:checked + .custom-check {
background: var(--brand-color-4);
border: unset;
outline: 1px solid var(--brand-color-4);
outline-offset: 1px;
width: 13px;
height: 13px;

}
.filter-wrapper .custom-filter.open .filter-body label input:checked + .custom-check svg {
opacity: 1;
}
.filter-wrapper .custom-filter.open .filter-body label input:checked + .custom-check svg path {
fill: #fff;
}
@media (max-width: 991.98px) {
.filter-wrapper .custom-filter.open .filter-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 425px) {
.filter-wrapper .custom-filter.open .filter-body {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
}

.sort-container {
min-width: 200px;
}
.sort-container select {
  background-color: transparent;
}
@media screen and (max-width: 991.98px) {
.sort-container {
  margin-top: 15px;
}
}
.sort-container.vertical-filter::before {
inset: 0 auto 0 0;
}
.sort-container select {
border: none;
text-decoration: none;
}
.sort-container select:focus-visible {
outline: none;
}
.sort-container svg {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
pointer-events: none;
transition: 0.3s ease;
}
@media only screen and (max-width: 991.98px) {
.sort-container svg {
  right: 5px;
}
}
.sort-container select:focus-visible + svg {
transform: rotate(180deg) translateY(6px);
}

.price-wrapper .filter-heading {
margin-bottom: 15px;
font-weight: 600;
}

.price-wrapper .custom-range ::selection {
color: #fafafa;
background: #000;
}

.price-wrapper .custom-range .wrapper {
width: 400px;
background: #fff;
border-radius: 10px;
padding: 20px 25px 40px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.price-wrapper .custom-range header h2 {
font-size: 24px;
font-weight: 600;
}

.price-wrapper .custom-range header p {
margin-top: 5px;
font-size: 12px;
}

.price-wrapper .custom-range .price-input .field {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
}
.price-wrapper .custom-range .price-input .field * {
font-size: 12px;
font-weight: 300;
}
.price-wrapper .custom-range .price-input .field:first-of-type input {
text-align: left;
padding-left: 5px;
}
.price-wrapper .custom-range .price-input .field:last-of-type input {
text-align: right;
}

.price-wrapper .custom-range .field input {
width: max-content;
height: 100%;
outline: none;
font-size: 12px;
border: none;
appearance: none;
-moz-appearance: textfield;
-webkit-appearance: none;
background: #fafafa;
max-width: 37px;
}

.price-wrapper .custom-range input[type="number"]::-webkit-outer-spin-button,
.price-wrapper .custom-range input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}

.price-wrapper .custom-range .price-input .separator {
width: 130px;
display: flex;
font-size: 12px;
align-items: center;
justify-content: center;
}

.price-wrapper .custom-range .slider {
height: 2px;
position: relative;
margin-inline: 5px;
background: #ddd;
border-radius: 5px;
translate: 0 -1px;
}

.price-wrapper .custom-range .slider .progress {
height: 3px;
left: 0;
right: 0;
position: absolute;
border-radius: 5px;
translate: 0 -1.5px;
background: var(--brand-color-4);
}

.price-wrapper .custom-range .range-input {
position: relative;
overflow-x: clip;
padding-inline: 5px;
}

.price-wrapper .custom-range .range-input input {
position: absolute;
left: 0;
width: 100%;
height: 5px;
top: -7px;
background: none;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
}

.price-wrapper .custom-range .range-input input:focus {
outline: none;
}

.price-wrapper .custom-range input[type="range"]::-webkit-slider-thumb {
height: 10px;
width: 10px;
border-radius: 50%;
background: var(--brand-color-4);
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.price-wrapper .custom-range input[type="range"]::-moz-range-thumb {
height: 10px;
width: 10px;
border: none;
border-radius: 50%;
background: var(--brand-color-2);
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 991.98px) {
.price-wrapper {
  grid-column: span 2;
}
.price-wrapper .custom-range .slider,
.price-wrapper .custom-range .range-input {
  margin-inline: 13px;
  padding-inline: 0;
}
.price-wrapper .custom-range input[type="range"]::-webkit-slider-thumb {
  height: 26px;
  width: 26px;
}

.price-wrapper .custom-range input[type="range"]::-moz-range-thumb {
  height: 26px;
  width: 26px;
}
}

.price-wrapper button {
margin-top: 8px;
width: 100%;
}

@media (min-width: 992px) {

.horizontal-filters filter-container {
  position: static;
  top: unset;
}

.horizontal-filters .filter-container-wrapper .filter-container {
  display: flex;
  gap: 20px;
  /* flex-wrap: wrap; */
}

.horizontal-filters .filter-container-wrapper .filter-container .sort-container {
  margin-bottom: 0;
}

.horizontal-filters .filter-container-wrapper .filter-container .custom-filter {
  position: relative;
  height: max-content;
  margin-bottom: 0;
}

.horizontal-filters .filter-container-wrapper .filter-container .custom-filter .filter-heading {
  padding-right: 80px;
}

.horizontal-filters .filter-container-wrapper .filter-container .custom-filter .filter-body {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--section-background-color-2);
  overflow: hidden;
  border-radius: 5px;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.horizontal-filters .filter-container-wrapper .filter-container .custom-filter .filter-body .price-wrapper {
  padding: 0 15px;
}

.horizontal-filters .filter-container-wrapper .filter-container .custom-filter.open .filter-body {
  height: max-content;
}

.horizontal-filters .filter-container-wrapper .filter-container .reset-filter-wrapper {
  display: none;
}

.horizontal-filters .filter-container-wrapper .selected-filter-wrapper {
  order: 999;
  display: none;
  margin-bottom: 0;
}
}

@media (max-width: 991.98px) {
.horizontal-filters .filter-container-wrapper .selected-filter-wrapper {
  display: flex;
  order: 98;
}

.horizontal-filters .selected-filter-wrapper:not(.desktop) {
  display: flex;
  order: 98;
}
.horizontal-filters .sort-container {
  order: 1 !important;
}
}

.horizontal-filters .selected-filter-wrapper .reset-filter-wrapper {
display: flex;
align-items: center;
}

.horizontal-filters .selected-filter-wrapper .reset-filter-wrapper [data-reset-filters] {
margin-top: 0;
}

@media only screen and (max-width: 1150px) and (min-width: 992px) {
.filter-container-wrapper {
  flex-wrap: wrap;
  gap: var(--content-spacing-2);
}
}
/* END_SNIPPET:filters-horizontal */

/* START_SNIPPET:filters-vertical (INDEX:175) */
/* Desktop: pull the filter list up under the "Filter by" header.
     Only needed when the filter search field is on (`show_filter_search`) — without it
     there is no extra gap to absorb, so the pull-up would over-tighten the heading. */
  @media only screen and (min-width: 992px) {
    .vertical-filters.has-filter-search .custom-filter-wrapper {
      margin-top: calc(-1 * var(--content-spacing-3));
    }
  }

  .filter-wrapper.vertical-filters .custom-filter.open .filter-body {
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-color-4) var(--brand-color-6);
  }

  .filter-wrapper.vertical-filters .custom-filter.open .filter-body::-webkit-scrollbar {
    width: 6px;
  }

  .filter-wrapper.vertical-filters .custom-filter.open .filter-body::-webkit-scrollbar-track {
    background: var(--brand-color-6);
    border-radius: 999px;
  }

  .filter-wrapper.vertical-filters .custom-filter.open .filter-body::-webkit-scrollbar-thumb {
    background: var(--brand-color-4);
    border-radius: 999px;
  }

  .filter-wrapper.vertical-filters .custom-filter.open .filter-body::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color-2);
  }

  @media only screen and (max-width: 991.98px) {
    /* Mobile: the filter panel is a bottom sheet, hidden until the Filter button opens it, styled
       like the desktop panel (pearl + gold-dust border) and scrollable. */
    .vertical-filters .filter-container-wrapper {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 30;
      /* Fixed height overrides the h-max (height: max-content) utility on this element — without
         it the sheet grows to fit all content and its top (the Filter heading) gets pushed above
         the screen when a filter opens. Fixed = stable top; the filter list scrolls inside. */
      height: 85vh;
      /* Flush to bottom: 0 (viewport-fit=cover); add the iOS home-indicator inset to the bottom
         padding so the last row/content clears the safe area. */
      padding: 0 var(--content-spacing-4) calc(var(--content-spacing-4) + env(safe-area-inset-bottom, 0px));
      background: var(--brand-color-5);
      border: 1px solid var(--brand-color-4);
      border-bottom: none;
      transform: translateY(100%);
      transition: transform 250ms ease;
      /* Height of the pinned Reset/Apply bar below, reserved as padding on the form. Single row
         of buttons, so it's stable; tune here if that row ever gains a second line. */
      --filter-actions-height: 80px;
    }

    /* Scroll the inner wrapper (not the whole sheet) so the sheet's bottom padding is always
       visible below the last row instead of being swallowed by the scroll container. */
    .vertical-filters .filter-container-wrapper .custom-filter-wrapper {
      /* Override the `flex align-center` utilities: as a flex row that centred its content, an
         overflowing list couldn't be scrolled back to the top. A plain block scroll container
         flows top-to-bottom and scrolls normally in both directions. */
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .vertical-filters.mobile-filters-open .filter-container-wrapper {
      transform: translateY(0);
    }

    /* Backdrop (shown with the sheet) */
    .vertical-filters .filter-mobile-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 29;
      background: rgba(64, 64, 64, 0.4);
    }
    .vertical-filters.mobile-filters-open .filter-mobile-backdrop {
      display: block;
    }

    .vertical-filters .filter-container-wrapper .filter-container {
      /* No inner cap — the sheet's .custom-filter-wrapper is the single scroll container. */
      margin-inline: auto;
      /* Reserve the pinned actions bar's height so the last filter row — and the selected-filter
         chips, which sit outside the scroll container — can still be scrolled clear of it.
         Out-specifies the .to-md-pb-3 utility on this same element. */
      padding-bottom: var(--filter-actions-height);
    }

    /* Reset / Apply pinned to the foot of the sheet, so they stay reachable however far down the
       filter list the shopper has scrolled.

       `position: fixed` here resolves against .filter-container-wrapper rather than the viewport:
       that element carries a transform (translateY, for the slide-up), and a transformed ancestor
       becomes the containing block for fixed descendants. That is exactly what's wanted — the bar
       sits at the bottom of the SHEET and slides in and out with it, instead of being stranded
       over the page while the sheet is closed.

       Replaces an earlier rule that set `inset` with no `position`, which did nothing. */
    .vertical-filters .filter-container-wrapper .reset-filter-wrapper {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 2;
      margin: 0;
      /* Own background + top rule: the list scrolls behind this, so it can't be transparent. */
      padding: var(--content-spacing-2) var(--content-spacing-4)
        calc(var(--content-spacing-2) + env(safe-area-inset-bottom, 0px));
      background: var(--brand-color-5);
      border-top: 1px solid var(--brand-color-4);
    }

    .vertical-filters .filter-container-wrapper .custom-filter-wrapper {
      pointer-events: auto;
      display: block;
    }

    /* Hide the search + results row inside the mobile filter panel */
    .vertical-filters .filter-search,
    .vertical-filters .results-wrapper {
      display: none;
    }

    .vertical-filters .selected-filter-wrapper {
      margin-top: 15px;
    }

    .vertical-filters .selected-filter-wrapper.desktop {
      display: none;
    }

    /* Match desktop: single-column option list (not the old 2-col drawer grid).
       Drop the 240px cap/inner scroll here — the sheet's own scroll handles the list, so an
       open filter shows its options in full instead of a cramped scroll-box-within-a-scroll.
       Selector matches the base rule's specificity (.filter-wrapper.vertical-filters …) so this
       actually overrides the max-height: 240px. */
    .filter-wrapper.vertical-filters .custom-filter.open .filter-body {
      display: flex;
      flex-direction: column;
      max-height: none;
      overflow: visible;
    }

    .vertical-filters .sort-container {
      margin-top: 0;
    }

    .vertical-filters .filter-container-wrapper .selected-filter-wrapper {
      display: flex;
    }

    .vertical-filters .selected-filter-wrapper:not(.desktop) {
      display: flex;
    }

    .vertical-filters .price-wrapper {
      grid-column: span 2;
    }

    .vertical-filters .price-wrapper .custom-range .slider,
    .vertical-filters .price-wrapper .custom-range .range-input {
      margin-inline: 13px;
      padding-inline: 0;
    }

    .vertical-filters .price-wrapper .custom-range input[type='range']::-webkit-slider-thumb {
      height: 26px;
      width: 26px;
    }

    .vertical-filters .price-wrapper .custom-range input[type='range']::-moz-range-thumb {
      height: 26px;
      width: 26px;
    }
  }

  @media (max-width: 425px) {
    .vertical-filters .custom-filter.open .filter-body {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .vertical-filters .filter-container-wrapper.open {
    padding-bottom: 50px;
  }

  @media only screen and (min-width: 992px) {
    .vertical-filters .filter-container-wrapper {
      position: sticky;
      top: 120px;
    }

    .vertical-filters .filter-container-wrapper .mobile-filter-heading {
      display: none;
      padding-bottom: 0;
      color: #fff;
      transition: all 250ms ease;
    }

    .vertical-filters .selected-filter-wrapper:empty {
      display: none !important;
    }

    /* Desktop counterpart to the mobile sheet's pinned actions bar: keep Reset reachable however
       far down a long filter list the shopper has scrolled.

       `sticky`, not `fixed`. Out here there is no transformed ancestor to act as a containing
       block, so `fixed` would resolve against the viewport and float the bar over the page.
       Sticky pins it to the foot of `.vertical-filters` — which is already the desktop scroll
       container (it caps itself to the header/toolbar gap and scrolls internally, see below) —
       and drops it back into flow at the end of the list once fully scrolled.

       Holds Reset + Apply, exactly as mobile does: nothing fetches until Apply is pressed, so the
       bar has to stay on screen while the shopper works down the list.

       `flex-center` on the element already supplies display:flex; only the pinning, the gap and
       the background are added here. The background is not optional: the filter list scrolls
       behind this. */
    .vertical-filters .filter-container-wrapper .reset-filter-wrapper {
      position: sticky;
      /* Overshoots the scrollport bottom by the 15px of `pb-3` on `.vertical-filters`, so the
         bar tucks under the panel's edge instead of leaving a strip of list showing below it. */
      bottom: -15px;
      z-index: 2;
      align-items: center;
      gap: var(--content-spacing-2);
      /* Full-bleed across the panel's own `p-6`: without this the bar only spans the form, and
         filter rows slide past it in the gutters either side as the list scrolls. The negative
         bottom margin lets its background reach the panel's bottom edge — it pulls the form's
         end up by exactly the padding the panel then adds back. */
      margin: 0 calc(-1 * var(--content-spacing-6)) calc(-1 * var(--content-spacing-6));
      padding: var(--content-spacing-2) var(--content-spacing-6) var(--content-spacing-2);
      background: var(--brand-color-5);
      border-top: 1px solid var(--brand-color-4);
    }

  }

  .vertical-filters .filter-container {
    gap: 15px;
  }

  .vertical-filters .filter-container .sort-container,
  .vertical-filters .filter-container .custom-filter {
    margin: 0;
  }

  .vertical-filters .mobile-filter-heading > svg {
    pointer-events: none;
    transform: translateY(1px) rotate(180deg);
  }

  .vertical-filters .mobile-filter-heading > svg path {
    stroke: var(--text-color-alternate);
  }

  .vertical-filters .mobile-filter-heading.open > svg {
    transform: translateY(2px);
  }

  .vertical-filters .mobile-filter-heading h4 {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
  }

  .vertical-filters .mobile-filter-heading svg {
    cursor: pointer;
    transition: 0.3s ease;
  }

  .vertical-filters .selected-filter-wrapper:has(.selected-filter) {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .vertical-filters .selected-filter-wrapper .selected-filter {
    width: fit-content;
    padding: 2px 10px 2px 8px;
    border-radius: 0;
    text-decoration: none;
    border: none;
    font: inherit;
    cursor: pointer;
  }

  @media only screen and (max-width: 991.98px) {
    .vertical-filters .selected-filter-wrapper .selected-filter {
      color: var(--text-color);
      background: var(--brand-color-4);
      border-radius: var(--button-1-radius);
    }

    .vertical-filters .selected-filter-wrapper .selected-filter svg path {
      stroke: var(--text-color);
    }
  }

  @media only screen and (min-width: 992px) {
    .vertical-filters .selected-filter-wrapper .selected-filter {
      background: var(--brand-color-1);
      color: var(--text-color-alternate);
    }

    .vertical-filters .selected-filter-wrapper .selected-filter svg path {
      stroke: var(--text-color-alternate);
    }
  }

  .vertical-filters .selected-filter-wrapper .selected-filter:hover svg {
    rotate: 90deg;
  }

  .vertical-filters .selected-filter-wrapper .selected-filter svg {
    margin-right: 5px;
    width: 10px;
    height: 10px;
    transition: all 0.3s;
  }

  .vertical-filters .custom-filter[data-theme='sale'] {
    display: none;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .vertical-filters .custom-filter[data-theme='sale'] input {
    position: absolute;
  }

  .vertical-filters .custom-filter .button {
    width: unset;
    text-align: center;
  }

  @media only screen and (max-width: 991.98px) {
    .vertical-filters .custom-filter {
      border-bottom: 2px solid var(--brand-color-4);
    }

    .vertical-filters .custom-filter .filter-heading {
      color: var(--text-color-secondary);
      white-space: nowrap;
    }

    .vertical-filters .custom-filter .filter-heading svg {
      cursor: pointer;
      transition: 0.3s ease;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }

    .vertical-filters .custom-filter .filter-body {
      display: none;
    }

    .vertical-filters .custom-filter.open .filter-body label input,
    .vertical-filters .custom-filter.open .filter-heading svg {
      transform: rotate(180deg) translateY(6px);
    }

    .vertical-filters .custom-filter.open .filter-body {
      display: flex;
      flex-direction: column;
      margin-top: 5px;
    }

    .vertical-filters .custom-filter.open .filter-body label input:focus {
      outline: none;
    }

    .vertical-filters .custom-filter.open .filter-body label .custom-check {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      aspect-ratio: 1;
      padding: 2px;
      margin-left: 3px;
      margin-right: 5px;
      background: var(--text-color-alternate);
      border-radius: 50%;
      border: 1px solid var(--brand-color-6);
    }

    .vertical-filters .custom-filter.open .filter-body label input:checked + .custom-check {
      background: var(--brand-color-4);
      border: unset;
      outline: 1px solid var(--brand-color-4);
      outline-offset: 1px;
      width: 13px;
      height: 13px;
    }

    .vertical-filters .custom-filter.open .filter-body label input:checked + .custom-check svg path {
      fill: #fff;
    }

    .vertical-filters .sort-container {
      border-bottom: 2px solid var(--brand-color-4);
      min-width: 200px;
    }

    .vertical-filters .sort-container::before {
      content: attr(data-text);
      position: absolute;
      inset: 0 auto 0 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
    }

    .vertical-filters .sort-container.vertical-filter::before {
      inset: 0 auto 0 0;
    }

    .vertical-filters .sort-container select {
      border: none;
      text-decoration: none;
    }

    .vertical-filters .sort-container select:focus-visible {
      outline: none;
    }

    .vertical-filters .sort-container svg {
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
      pointer-events: none;
      transition: 0.3s ease;
    }

    .vertical-filters .sort-container select:focus-visible + svg {
      transform: rotate(180deg) translateY(6px);
    }

    .vertical-filters .price-wrapper .custom-range .slider .progress {
      background: var(--brand-color-4);
    }

    .vertical-filters .price-wrapper .custom-range input[type='range']::-webkit-slider-thumb {
      background: var(--brand-color-4);
    }
  }

  @media only screen and (min-width: 992px) {
    /* The sidebar is sticky under the header. On short viewports the filter list is taller
       than the space between the header and the fixed bottom toolbar, so its lower filters
       hid behind the bar. Bound it to that gap and let it scroll internally instead.
       align-self: start stops the grid stretching it to the full row height — without it the
       max-height leaves a gap and breaks the sticky on tall viewports. */
    .vertical-filters {
      align-self: start;
      max-height: calc(
        100vh - var(--header-height, 120px) - var(--collection-bar-height, 0px) -
          var(--content-spacing-4)
      );
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .vertical-filters .custom-filter {
      border-bottom: 1px solid var(--brand-color-1);
    }

    .vertical-filters .custom-filter .filter-heading {
      color: var(--text-color-secondary);
    }

    .vertical-filters .custom-filter .filter-heading svg {
      position: absolute;
      top: 50%;
      right: 0;
      cursor: pointer;
      transform: translateY(-50%);
      transition: 0.3s ease;
    }

    .vertical-filters .custom-filter .filter-heading svg path {
      stroke: var(--brand-color-2);
    }

    .vertical-filters .custom-filter .filter-body {
      display: none;
    }

    .vertical-filters .custom-filter.open .filter-body label input,
    .vertical-filters .custom-filter.open .filter-heading svg {
      transform: rotateX(180deg) translateY(8px);
    }

    .vertical-filters .custom-filter.open .filter-body {
      display: flex;
      flex-direction: column;
      margin-top: 5px;
    }

    .vertical-filters .custom-filter.open .filter-body label {
      color: var(--text-color);
    }

    .vertical-filters .custom-filter.open .filter-body label .custom-check {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15px;
      height: 15px;
      margin-left: 3px;
      margin-right: 5px;
      padding: 2px;
      border: 1px solid var(--brand-color-6);
      border-radius: 50%;
      background: var(--text-color-alternate);
    }

    .vertical-filters .custom-filter.open .filter-body label input:checked + .custom-check {
      width: 13px;
      height: 13px;
      border: unset;
      outline: 1px solid var(--brand-color-2);
      background: var(--brand-color-2);
      outline-offset: 1px;
    }

    .vertical-filters .custom-filter.open .filter-body label input:checked + .custom-check svg path {
      fill: #fff;
    }

    .vertical-filters .sort-container {
      border-bottom: 1px solid var(--brand-color-1);
      color: var(--text-color);
    }

    .vertical-filters .sort-container::before {
      position: absolute;
      inset: 0 auto 0 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 14px;
      font-weight: 700;
      content: attr(data-text);
    }

    .vertical-filters .sort-container.vertical-filter::before {
      inset: 0 auto 0 0;
    }

    .vertical-filters .sort-container select {
      border: none;
      background-color: unset;
      color: inherit;
      text-decoration: none;
    }

    .vertical-filters .sort-container svg {
      position: absolute;
      top: 50%;
      right: 8px;
      pointer-events: none;
      transform: translateY(-50%);
      transition: 0.3s ease;
      stroke: var(--brand-color-2);
    }

    .vertical-filters .price-wrapper .custom-range .slider .progress {
      background: var(--brand-color-2);
    }

    .vertical-filters .price-wrapper .custom-range input[type='range']::-webkit-slider-thumb {
      background: var(--brand-color-2);
    }

    .vertical-filters .price-wrapper .custom-range input[type='range']::-moz-range-thumb {
      background: var(--brand-color-2);
    }
  }

  .vertical-filters .sort-container select:focus-visible + svg {
    transform: rotate(180deg) translateY(6px);
  }

  .vertical-filters .price-wrapper .filter-heading {
    margin-bottom: 15px;
    font-weight: 600;
  }

  .vertical-filters .price-wrapper .custom-range ::selection {
    color: #fafafa;
    background: #000;
  }

  /* Editable price boxes — white box, static currency (40%) + typed amount */
  .vertical-filters .price-wrapper .custom-range .price-input .field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--content-spacing-2);
    background: var(--brand-color-2);
  }

  .vertical-filters .price-wrapper .custom-range .price-input .field .price-currency {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.4;
  }

  .vertical-filters .price-wrapper .custom-range .price-input .field input,
  .vertical-filters .price-wrapper .custom-range .field input {
    width: 68px;
    max-width: none;
    height: auto;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
    text-align: left;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
  }

  .vertical-filters .price-wrapper .custom-range input[type='number']::-webkit-outer-spin-button,
  .vertical-filters .price-wrapper .custom-range input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .vertical-filters .price-wrapper .custom-range .slider {
    position: relative;
    height: 3px;
    margin-inline: 8px;
    border-radius: 5px;
    background: rgba(73, 73, 73, 0.2);
    translate: 0 -1.5px;
  }

  .vertical-filters .price-wrapper .custom-range .slider .progress {
    position: absolute;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 5px;
    background: var(--text-color);
    translate: 0 -1.5px;
  }

  .vertical-filters .price-wrapper .custom-range .range-input {
    position: relative;
    /* Inset the thumb travel to match the visual track (which uses margin-inline: 8px),
       and don't clip — otherwise the thumbs at 0% / 100% get cut off at the edges. */
    overflow: visible;
    margin-inline: 8px;
  }

  .vertical-filters .price-wrapper .custom-range .range-input input {
    position: absolute;
    top: -8.5px;
    left: 0;
    width: 100%;
    height: 5px;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .vertical-filters .price-wrapper .custom-range input[type='range']::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--text-color);
    box-shadow: 0 0 6px rgb(0 0 0 / 5%);
    pointer-events: auto;
    -webkit-appearance: none;
  }

  .vertical-filters .price-wrapper .custom-range input[type='range']::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background: var(--text-color);
    box-shadow: 0 0 6px rgb(0 0 0 / 5%);
    pointer-events: auto;
    -moz-appearance: none;
  }

  .vertical-filters .price-wrapper button {
    width: 100%;
    margin-top: 8px;
  }

  .vertical-filters .selected-filter-wrapper .reset-filter-wrapper {
    display: flex;
    align-items: center;
  }

  .vertical-filters .selected-filter-wrapper .reset-filter-wrapper [data-reset-filters] {
    margin-top: 0;
  }

  @media only screen and (max-width: 1150px) and (min-width: 992px) {
    .vertical-filters .filter-container-wrapper {
      flex-wrap: wrap;
      gap: var(--content-spacing-2);
    }
  }

  /* ============================================================
     The Diamond Store — filter sidebar restyle
     ============================================================ */

  /* "Filter by" heading — Work Sans 500, 17px, uppercase */
  .vertical-filters .desktop-filter-heading {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-color);
  }

  /* Results count sits to the right of "Filter by" — regular case, normal weight */
  .vertical-filters .desktop-filter-heading .desktop-filter-count {
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
  }

  /* Filter section headings — Work Sans 500, 15px, +4% tracking, uppercase */
  .vertical-filters .custom-filter .filter-heading {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  @media only screen and (min-width: 992px) {
    /* Container: pearl fill + gold-dust border */
    .vertical-filters .filter-container-wrapper.secondary {
      background: var(--brand-color-5);
      border: 1px solid var(--brand-color-4);
    }

    /* Even, consistent dividers between each filter section (#393939 @ 50%) */
    .vertical-filters .filter-list {
      gap: 0;
    }
    .vertical-filters .filter-list .custom-filter {
      margin: 0;
      padding: var(--content-spacing-3) 0;
      border-bottom: 1px solid rgba(57, 57, 57, 0.5);
    }
  }

  /* Swatch checkbox — filter values with a native swatch (e.g. Metal) render like the PDP /
     toolbar swatches instead of the plain check. Fill = swatch colour/image; when checked, a
     2px ring in the swatch colour with a gap (padding + content-box clip). */
  .vertical-filters .filter-swatch {
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border: 1px solid var(--brand-color-4);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    transition: border-color 0.2s ease, padding 0.2s ease;
  }
  .vertical-filters .filter-body label input:checked + .filter-swatch {
    padding: 3px;
    border: 2px solid var(--fs-ring, var(--brand-color-1));
    background-clip: content-box;
  }

  /* Square checkbox for non-swatch filter options (Gemstone, Setting, …) — mirrors the
     engraving / gift-message checkbox: white square + charcoal border, charcoal fill + white
     tick when checked. Overrides the default round custom-check. */
  .vertical-filters .custom-filter.open .filter-body label .custom-check {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin: 0 8px 0 0;
    padding: 2px;
    border: 1px solid var(--brand-color-1);
    border-radius: 2px;
    outline: none;
    background: var(--brand-color-5);
  }
  .vertical-filters .custom-filter.open .filter-body label input:checked + .custom-check {
    width: 19px;
    height: 19px;
    padding: 2px;
    border: 1px solid var(--brand-color-1);
    outline: none;
    outline-offset: 0;
    background: var(--brand-color-1);
  }
  /* High specificity so it beats the global `.custom-check svg { width:100%; min:15px }`
     rule (from filters-horizontal) that otherwise forces the tick to 15px. */
  .vertical-filters .custom-filter.open .filter-body label .custom-check .check {
    width: 12px;
    height: 12px;
    min-width: 0;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .vertical-filters .custom-filter.open .filter-body label input:checked + .custom-check .check {
    opacity: 1;
  }
  .vertical-filters .custom-check .check path {
    fill: var(--brand-color-2);
  }

  /* Search filters box */
  .vertical-filters .filter-search {
    padding-bottom: var(--content-spacing-4);
    border-bottom: 1px solid rgba(57, 57, 57, 0.5);
  }
  .vertical-filters .filter-search__field {
    position: relative;
  }
  .vertical-filters .filter-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 38px 10px 12px;
    border: 1px solid var(--brand-color-4);
    border-radius: 0;
    background: var(--brand-color-2);
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
  }
  .vertical-filters .filter-search__input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
  }
  .vertical-filters .filter-search__input:focus {
    outline: none;
    border-color: var(--text-color);
  }
  .vertical-filters .filter-search__icon,
  .vertical-filters .filter-search__clear {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    line-height: 0;
  }
  .vertical-filters .filter-search__clear {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .vertical-filters .filter-search__icon svg {
    display: block;
    width: 17px;
    height: 17px;
  }
  .vertical-filters .filter-search__icon[hidden],
  .vertical-filters .filter-search__clear[hidden] {
    display: none;
  }

  /* Price bands (single-select radios styled as the square checkbox) */
  .vertical-filters .price-bands {
    margin-top: 0;
  }

  /* Snapped band slider (non-GBP markets): the top bucket is open-ended, so the To field
     gets a trailing "+" when the handle is parked at the ceiling. */
  .vertical-filters .price-input .field.is-open-ended::after {
    content: "+";
    margin-left: 1px;
    color: var(--text-color);
  }

  /* The price filter holds the slider + bands — never scroll/clip it */
  .filter-wrapper.vertical-filters .custom-filter--price.open .filter-body {
    max-height: none;
    overflow: visible;
  }

  /* Filter option count — pushed to the right (space-between), no brackets */
  .vertical-filters .filter-option-count {
    margin-left: auto;
    padding-left: 8px;
    color: var(--text-color);
    opacity: 0.6;
  }

  /* Reset filters link */
  .vertical-filters .reset-filter-wrapper button:not([class^="button-"]) {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
  }
  .vertical-filters .reset-filter-wrapper button:not([class^="button-"]):hover {
    text-decoration: none;
  }
/* END_SNIPPET:filters-vertical */

/* START_SNIPPET:finance-options (INDEX:177) */
.finance-options {
    text-align: right;
    font-weight: 600;
  }

  .finance-options__from {
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
  }

  .finance-options__amount {
    font-weight: 600;
  }

  .finance-options__trigger {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Modal */
  .finance-modal__panel {
    width: min(760px, 92vw);
    max-height: 88vh;
    padding: 30px;
    overflow-y: auto;
    background: var(--brand-color-2, #fff);
  }

  /* Pull content up under the floating close button so it reserves no row */
  .finance-modal__content {
    margin-top: -36px;
  }

  .finance-modal__title {
    margin: 0 0 6px;
  }

  .finance-modal__offer {
    display: inline-block;
    margin: 10px 0 10px !important;
    padding: 5px 12px;
    border: 1px solid var(--brand-color-5, #e0e0e0);
    border-radius: 30px;
    background: #e3efd5;
    font-size: 14px;
  }

  .finance-modal__amount {
    margin: 0 0 12px;
    font-size: 14px;
  }

  .finance-table-scroll {
    overflow-x: auto;
  }

  .finance-table-scroll + .finance-table-scroll {
    margin-top: 24px;
  }

  .finance-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  }

  .finance-table th {
    padding: 0 6px 10px;
    font-size: 13px;
    font-weight: 600;
  }

  .finance-table td,
  .finance-table tbody th {
    padding: 8px 6px;
    background: #f2f2f2;
    font-size: 14px;
    font-weight: 400;
  }

  .finance-table tbody th {
    font-weight: 600;
  }

  .finance-table__row--highlight td,
  .finance-table__row--highlight th {
    background: #e3efd5;
  }

  .finance-table img {
    display: inline-block;
    max-width: 60px;
    height: auto;
    vertical-align: middle;
  }

  .finance-modal__legal {
    margin-top: 20px;
  }

  .finance-modal__legal p {
    margin: 0 0 10px;
    font-size: 11px;
    color: #555;
  }

  /* Novuna finance example */
  .finance-example {
    max-width: 520px;
    margin: 24px auto 0;
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f9f9f9;
    text-align: left;
  }

  .finance-example__title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
    font-family: var(--heading-font-family);
    font-weight: 400;
    font-size: 20px;
    text-align: center;
  }

  .finance-example__line {
    margin: 0 0 4px;
    font-size: 15px;
  }

  .finance-example__muted {
    color: #888;
  }

  .finance-example__subtitle {
    margin: 16px 0;
    font-family: var(--heading-font-family);
    font-size: 16px;
    text-align: center;
  }

  .finance-example__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .finance-example__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
  }

  .finance-example__list li > span:last-child {
    font-weight: 600;
  }

  .finance-example__free {
    color: #2f7a3d;
  }

  .finance-example__apr {
    color: #888;
  }

  @media only screen and (max-width: 767.98px) {
    .finance-modal__panel {
      padding: 16px;
    }
  }
/* END_SNIPPET:finance-options */

/* START_SNIPPET:image (INDEX:187) */
/* Shopify focal point, written onto the <img> above as --object-position-desktop /
     --object-position-mobile. Only the properties that exist are emitted, so the var()
     fallbacks below resolve in order: mobile focal point, then desktop, then centre. That
     matters for the common case of an image with a desktop focal point and no separate
     mobile crop — it should stay framed on mobile, not snap back to centre. */
  .img-focal {
    object-position: var(--object-position-desktop, 50% 50%);
  }

  @media only screen and (max-width: 767.98px) {
    .img-focal {
      object-position: var(--object-position-mobile, var(--object-position-desktop, 50% 50%));
    }
  }
/* END_SNIPPET:image */

/* START_SNIPPET:klaviyo-bis-form (INDEX:188) */
.pdp-sold-out-form__form form.notify-form button {
    white-space: nowrap;
  }

  .pdp-sold-out-form__form form.notify-form input::placeholder {
    color: var(--placeholder-color);
  }

  .pdp-sold-out-form__form .form-message:empty {
    display: none;
  }
/* END_SNIPPET:klaviyo-bis-form */

/* START_SNIPPET:language-select-modal (INDEX:189) */
localization-form button,
  localization-form li {
    cursor: pointer;
    transition: background-color 150ms ease;
  }
  localization-form button:hover,
  localization-form li:hover {
    background-color: #e9e7e7;
  }
  localization-form button svg {
    transition: transform 150ms ease;
  }
  localization-form button[aria-expanded='true'] {
    border-bottom: none !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  localization-form button[aria-expanded='true'] svg {
    transform: rotate(180deg);
  }
  localization-form ul:not([hidden]) {
    border-right: 1px solid var(--brand-color-6);
    border-bottom: 1px solid var(--brand-color-6);
    border-left: 1px solid var(--brand-color-6);
    border-radius: 8px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  localization-form li:has(a.active) {
    color: var(--text-color-highlight);
    font-weight: 600;
  }
/* END_SNIPPET:language-select-modal */

/* START_SNIPPET:language-select (INDEX:190) */
.header .header-wrapper .header-icons localization-form,
  .mobile-menu-outer-wrapper .mobile-menu .mobile-menu-bottom localization-form {
    aspect-ratio: unset;
  }
  .header .header-wrapper .header-icons localization-form #language-list:not([hidden]),
  .mobile-menu-outer-wrapper .mobile-menu .mobile-menu-bottom #language-list:not([hidden]) {
    top: 100%;
    display: flex;
    flex-direction: column;
    padding-right: var(--content-spacing-3);
    padding-left: var(--content-spacing-3) !important;
    border-radius: var(--global-radius-large);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .header .header-wrapper .header-icons localization-form form button,
  .mobile-menu-outer-wrapper .mobile-menu .mobile-menu-bottom localization-form form button {
    color: inherit;
    aspect-ratio: unset;
  }
  .header .header-wrapper .header-icons localization-form form button img:not([alt='Caret icon']) {
    height: 16px;
  }
  .header .header-wrapper .header-icons localization-form form button .caret svg,
  .mobile-menu-outer-wrapper
    .mobile-menu
    .mobile-menu-bottom
    localization-form
    form
    button
    img[alt='Caret icon'] {
    height: 8px;
    transition: transform 200ms ease;
  }
  .header
    .header-wrapper
    .header-icons
    localization-form:has(ul:not([hidden]))
    form
    button
    .caret
    svg {
    transform: rotateX(180deg);
  }

  /* Mobile menu */
  .mobile-menu-outer-wrapper .mobile-menu .mobile-menu-bottom #language-list:not([hidden]) {
    top: unset;
    bottom: calc(100% + 10px);
    border: 1px solid var(--brand-color-5);
    font-size: 15px;
  }
  .mobile-menu-outer-wrapper .mobile-menu .mobile-menu-bottom localization-form {
    position: relative;
  }
  .mobile-menu-outer-wrapper
    .mobile-menu
    .mobile-menu-bottom
    localization-form
    button[aria-controls='language-list'] {
    gap: var(--content-spacing-2);
    font-size: 14px;
  }
  .mobile-menu-outer-wrapper
    .mobile-menu
    .mobile-menu-bottom
    localization-form
    button[aria-controls='language-list']
    img {
    width: 20px;
    height: 20px;
  }
  .mobile-menu-outer-wrapper
    .mobile-menu
    .mobile-menu-bottom
    localization-form
    form
    button
    img[alt='Caret icon'] {
    transform: rotate(180deg);
  }
  .mobile-menu-outer-wrapper
    .mobile-menu
    .mobile-menu-bottom
    localization-form:has(ul:not([hidden]))
    form
    button
    img[alt='Caret icon'] {
    transform: rotate(0deg);
  }
/* END_SNIPPET:language-select */

/* START_SNIPPET:line-item-properties (INDEX:192) */
/* Stack each property as its own shrink-wrapped badge (engraving, gift message, etc.). */
  .line-item-props {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .line-item-prop {
    display: inline-flex;
    padding: 10px;
    background: var(--brand-color-4);
    font-size: 14px;
  }

  .line-item-prop strong {
    font-weight: 600;
  }

  @media (max-width: 767.98px) {
    .line-item-prop {
      padding: 5px;
      font-size: 12px;
    }
  }
/* END_SNIPPET:line-item-properties */

/* START_SNIPPET:loyalty-points-earn (INDEX:194) */
/* On a converted-currency storefront the value is left blank for JS to fill (see above).
     If that never happens — JS blocked, no FX rate — hide the whole row rather than leaving a
     dangling "Diamond Points:" label with nothing after it. */
  .product-delivery-info__points-text:has(.loyalty-points-earn:empty),
  .diamond-points-row:has(.loyalty-points-earn:empty) {
    display: none;
  }
/* END_SNIPPET:loyalty-points-earn */

/* START_SNIPPET:magic360-spin (INDEX:195) */
/* The spin sits inside a square (1:1) gallery tile. The Magic360 engine sizes its own
     container to the frame's natural aspect ratio, which overflows the tile and breaks the
     grid — so we pin the engine's container + current frame to fill the square and clip. */
  .m360-spin {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #fff;
  }

  .m360-spin .Magic360-container,
  .m360-spin .Magic360,
  .m360-spin .Magic360 > img,
  .m360-spin .Magic360 > canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* Fill the square like the still tiles (object-cover). Swap to `contain` if the ring
     gets cropped too tightly. */
  .m360-spin .Magic360 > img,
  .m360-spin .Magic360 > canvas {
    display: block;
    object-fit: cover;
  }

  /* In the lightbox the spin is the whole slide, not a cropped tile: show the entire frame and
     lose the tile's white fill so it sits on the modal's own backdrop. */
  .m360-spin--lightbox {
    background: none;
  }

  .m360-spin--lightbox .Magic360 > img,
  .m360-spin--lightbox .Magic360 > canvas {
    object-fit: contain;
  }

  /* Transparent layer over the spin, for touch input only. It keeps horizontal swipe with the
     gallery slider (vertical scroll still allowed via pan-y) while the arrows drive the spin. */
  .m360-drag-block {
    position: absolute;
    inset: 0;
    z-index: 3;
    touch-action: pan-y;
  }

  /* Mouse / trackpad: drop the block so real drags land on Magic360 — click-drag to spin,
     plus its magnifier and fullscreen, matching the live site. The arrows keep working either
     way, since they synthesise their own drag rather than relying on hit-testing. */
  @media (hover: hover) and (pointer: fine) {
    .m360-drag-block {
      display: none;
    }
  }

  /* "‹ 360 Spin ›" arrow controls — arrows styled to match the theme's slider arrows
     (30px gold-dust circle + charcoal chevron), but with their own classes so the Blaze
     slider JS doesn't bind them to slide navigation. */
  .m360-controls {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 16px;
    transform: translateX(-50%);
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  /* Scoped under .m360-controls so specificity (0,2,0) beats critical.css's
     button:not([class^="button-"]) (0,1,1), whose `background: none` would otherwise
     strip the circle fill + chevron. */
  .m360-controls .m360-arrow {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand-color-4);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5px 7px;
    cursor: pointer;
    user-select: none;
    touch-action: none;
  }

  .m360-controls .m360-arrow--prev {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='7'%20viewBox='0%200%205%207'%20fill='none'%3E%3Cpath%20d='M4.646%200.354L1.646%203.354L4.646%206.354'%20stroke='%23404040'/%3E%3C/svg%3E");
  }

  .m360-controls .m360-arrow--next {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='7'%20viewBox='0%200%205%207'%20fill='none'%3E%3Cpath%20d='M0.354%200.354L3.354%203.354L0.354%206.354'%20stroke='%23404040'/%3E%3C/svg%3E");
  }

  .m360-controls .m360-arrow:hover {
    opacity: 0.5;
  }
/* END_SNIPPET:magic360-spin */

/* START_SNIPPET:mobile-sticky-atc (INDEX:198) */
.sticky-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: block;
    padding: var(--content-spacing-2) var(--page-width-padding-mobile, 20px);
    padding-bottom: calc(var(--content-spacing-2) + env(safe-area-inset-bottom, 0px));
    background: var(--body-background-color);
    border-top: 1px solid var(--brand-color-4);
    transform: translateY(110%);
    transition: transform 0.3s ease;
    pointer-events: none;
  }

  .sticky-atc.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .sticky-atc__inner {
    display: flex;
    flex-direction: column;
    gap: var(--content-spacing-2);
  }

  .sticky-atc__title {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Size / metal dropdowns */
  .sticky-atc__select {
    height: 39px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-2);
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .sticky-atc__caret {
    position: absolute;
    top: 50%;
    right: 12px;
    display: inline-flex;
    color: var(--text-color);
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* Add button (charcoal, price + bag icon) */
  .sticky-atc .sticky-atc__add {
    height: 39px;
    min-width: 140px;
    padding: 0 12px;
    border: 1px solid var(--brand-color-1);
    background: var(--brand-color-1);
    color: var(--text-color-alternate);
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .sticky-atc .sticky-atc__add[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .sticky-atc__icon {
    display: inline-flex;
  }

  /* Mobile only */
  @media only screen and (min-width: 768px) {
    .sticky-atc {
      display: none;
    }
  }
/* END_SNIPPET:mobile-sticky-atc */

/* START_SNIPPET:modal-close (INDEX:199) */
.modal-close-btn {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-color-6) !important;
    color: var(--text-color);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgb(64 64 64 / 8%);
    transition: background-color 0.2s ease;
  }

  .modal-close-btn:hover {
    background: var(--brand-color-4);
  }

  .modal-close-btn svg {
    width: 14px;
    height: 14px;
  }
/* END_SNIPPET:modal-close */

/* START_SNIPPET:newsletter-form (INDEX:200) */
@media only screen and (max-width: 767.98px) {
    .form .newsletter-form .field .field__label {
      order: 4 !important;
    }
    .form .newsletter-form .field button {
      order: 3 !important;
    }
  }

  .form .newsletter-form .field .field__input {
    width: 100%;
    min-width: 350px;
  }

  @media only screen and (max-width: 767.98px) {
    .form .newsletter-form .field .field__input {
      min-width: 100%;
    }
  }

  .form .newsletter-form .field .custom-checkbox {
    display: flex;
    align-items: center;
    margin: 0;
    text-align: left;
  }
/* END_SNIPPET:newsletter-form */

/* START_SNIPPET:password-form (INDEX:201) */
body.password .modal__content img {
    max-width: 300px;
    pointer-events: none;
  }

  body.password .modal__content .rte {
    margin-bottom: 20px;
  }

  body.password .password-modal__content {
    gap: 32px;
  }

  body.password .password-modal__content form {
    gap: 20px;
  }

  body.password .password-modal__content form .password-field.password-field--error,
  body.password .password-modal__content form .password-button.password-field--error {
    margin-top: 30px;
  }

  body.password .password-modal__content form .password-field {
    margin-right: 10px;
  }

  body.password .password-modal__content form .password-field.password-field--error input {
    border: solid 1px red;
  }

  body.password #password-login-form-password-error {
    position: absolute;
    top: -10px;
    left: 0;
  }

  body.password .form-errors {
    left: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 10px;
    width: 100%;
    margin: 0 auto;
    padding: 5px 10px;
    background: var(--error-color);
    color: red;
  }

  body.password .form-errors .icon-error {
    width: 20px;
    min-width: 15px;
    height: 20px;
    min-height: 15px;
  }

  body.password .form-errors .icon-error svg,
  body.password .form-errors .icon-error svg path,
  body.password .form-errors .icon-error svg circle {
    fill: #fff;
  }

  body.password .form-errors .form__message {
    margin: -2px 5px 0 10px;
  }

  body.password .form-errors .form__message strong {
    outline: none;
  }

  body.password .form-errors .form__message strong:focus,
  body.password .form-errors .form__message strong:focus-visible {
    outline: none;
  }

  body.password .form-errors ul {
    flex-basis: 100%;
    margin: 0;
    padding: 0 0 0 15px;
    list-style-type: none;
  }
/* END_SNIPPET:password-form */

/* START_SNIPPET:payment-icons (INDEX:202) */
/* critical.css sets a global `li + li { margin-top: 0.25rem }` for prose lists. This list is a
     flex row of icons, so that offset just pushes every icon after the first down a few pixels
     (and misaligns wrapped rows). Frozen file, so it's overridden here instead — one class of
     specificity is enough to beat `li + li`, and this covers every place the snippet renders:
     cart, footer, PDP. Spacing comes from the list's own `g-1` gap. */
  .payment-icons-list li + li {
    margin-top: 0;
  }
/* END_SNIPPET:payment-icons */

/* START_SNIPPET:predictive-search-results (INDEX:204) */
/* Loading-state fade (driven by search.js) */
  predictive-search.predictive-search-section .predictive-search-results__sidebar,
  predictive-search.predictive-search-section .predictive-search-results__product-grid-outer {
    transition: opacity 0.25s ease-in 0.1s;
  }

  /* ---- Pills (tabs + collection label) ---- */
  .ps-inner .ps-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1px solid color-mix(in srgb, var(--brand-color-1) 25%, transparent);
    border-radius: 100px;
    background: transparent;
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .ps-inner .ps-tab:hover {
    border-color: var(--brand-color-4);
  }

  .ps-inner .ps-tab.is-active,
  .ps-inner .ps-pill--label {
    background: var(--brand-color-4);
    border-color: var(--brand-color-4);
    cursor: default;
  }

  /* ---- Link lists (collections / articles / pages) ---- */
  .ps-inner .ps-link {
    width: max-content;
    color: var(--text-color);
    font-size: 14px;
    text-decoration: none;
  }

  /* Small square collection thumbnail */
  .ps-inner .ps-link-thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    background: var(--brand-color-5);
  }
  .ps-inner .ps-link-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* "View more" — button-3 (outline) recoloured charcoal, centred under the grid */
  .ps-inner .ps-viewmore {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: var(--content-spacing-5, 24px);
    color: var(--text-color);
    border-color: var(--text-color);
  }
  .ps-inner .ps-viewmore:hover {
    color: var(--brand-color-4);
    border-color: var(--brand-color-4);
  }
  .ps-inner .ps-link:hover {
    color: var(--text-color-highlight);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .ps-inner .ps-empty {
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
    font-size: 14px;
  }

  /* "No results found for '<term>'" note shown above the recommended-product fallback grid. */
  .ps-inner .ps-no-results-note {
    margin-bottom: var(--content-spacing-3);
    font-weight: 500;
  }

  /* ---- Accordion heads: hidden on desktop, shown on mobile ---- */
  .ps-inner .ps-acc-head {
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .ps-inner .ps-acc-head .chevron,
  .ps-inner .ps-acc-head svg {
    width: 12px;
    height: auto;
    transition: transform 0.25s ease;
  }

  /* Keep the chevron charcoal on the light panel (overrides the near-white default) */
  .ps-inner .ps-acc-head svg,
  .ps-inner .ps-acc-head svg path {
    color: var(--text-color);
    stroke: var(--text-color);
  }

  /* =========================================================
     DESKTOP (>= 992px): collections sidebar + right-hand tabs
     ========================================================= */
  @media screen and (min-width: 992px) {
    .ps-inner {
      display: grid;
      grid-template-columns: minmax(180px, 230px) 1fr;
      gap: var(--grid-gap, 30px);
      align-items: start;
    }

    /* Sidebar: static pill + always-visible list */
    .ps-inner .ps-sidebar .ps-acc-head {
      display: none;
    }
    .ps-inner .ps-sidebar .ps-pill--label {
      margin-bottom: var(--content-spacing-4, 16px);
    }
    .ps-inner .ps-acc-panel {
      max-height: none !important;
      overflow: visible !important;
    }

    /* Tab bar */
    .ps-inner .ps-tabbar {
      gap: var(--content-spacing-3, 12px);
      margin-bottom: var(--content-spacing-4, 16px);
    }

    /* Panels: only the active one shows */
    .ps-inner .ps-main .ps-acc-head {
      display: none;
    }
    .ps-inner .ps-panel {
      display: none;
    }
    .ps-inner .ps-panel.is-active {
      display: block;
    }

    .ps-inner .predictive-search-results__product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media screen and (min-width: 1400px) {
    .ps-inner .predictive-search-results__product-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* =========================================================
     MOBILE (< 992px): single stacked accordion list
     ========================================================= */
  @media screen and (max-width: 991.98px) {
    .ps-inner {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Hide desktop-only chrome */
    .ps-inner .ps-pill--label,
    .ps-inner .ps-tabbar {
      display: none;
    }

    /* Stack the panels and reorder so Products is the last accordion */
    .ps-inner .ps-panels {
      display: flex;
      flex-direction: column;
    }
    .ps-inner [data-ps-panel="pages"] {
      order: 1;
    }
    .ps-inner [data-ps-panel="articles"] {
      order: 2;
    }
    .ps-inner [data-ps-panel="products"] {
      order: 3;
    }

    /* Every group is shown; the accordion controls open/closed */
    .ps-inner .ps-panel {
      display: block;
    }

    .ps-inner .ps-acc-head {
      display: flex;
      padding: var(--content-spacing-4, 16px) 0;
      border-bottom: 1px solid color-mix(in srgb, var(--brand-color-1) 20%, transparent);
    }
    .ps-inner .ps-acc-head.active,
    .ps-inner .ps-group:has(.accordion-open) .ps-acc-head {
      border-bottom: 0;
    }

    .ps-inner .ps-acc-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease-out;
    }
    .ps-inner .ps-acc-panel.accordion-open {
      max-height: var(--content-height, 1500px);
      margin-bottom: var(--content-spacing-4, 16px);
    }

    /* Products is pinned open on mobile: it's the point of the search, so it never collapses.
       No chevron and no pointer cursor, so it doesn't invite a click that does nothing — the
       heading reads as a label rather than a control. `max-height: none` beats the shared
       `--content-height` transition, which would otherwise clip a tall grid mid-animation. */
    .ps-inner .resource-heading--product-grid svg {
      display: none;
    }
    .ps-inner .resource-heading--product-grid {
      cursor: default;
    }
    .ps-inner .predictive-search-results__product-grid.ps-acc-panel {
      max-height: none;
      margin-bottom: var(--content-spacing-4, 16px);
    }

    .ps-inner .predictive-search-results__product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    /* Products is the default-open accordion; let it size to content
       (no max-height clip once product images load) */
    .ps-inner .predictive-search-results__product-grid.accordion-open {
      max-height: none;
    }
  }
/* END_SNIPPET:predictive-search-results */

/* START_SNIPPET:predictive-search (INDEX:205) */
/* -----------------------
   Predictive Search Modal
----------------------- */
  predictive-search.predictive-search-section {
    top: 100%;
    z-index: 2;
    flex-wrap: nowrap;
    height: 100dvh;
    opacity: 1;
  }

  predictive-search.predictive-search-section[aria-hidden='true'] {
    height: 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
  }

  /* Predictive Search Header (full-width white bar with the search input) */
  predictive-search.predictive-search-section .predictive-search-header {
    z-index: 2;
    width: 100%;
    background: var(--brand-color-2);
  }

  predictive-search.predictive-search-section .predictive-search-header-container {
    padding-top: var(--content-spacing-3);
    padding-bottom: var(--content-spacing-3);
  }

  predictive-search.predictive-search-section
    .predictive-search-header
    .predictive-search-header-container
    .predictive-search-form {
    align-items: center;
    min-height: 40px;
  }

  /* Previous Searches */

  predictive-search.predictive-search-section
    .predictive-search-header
    .predictive-search-header-container
    #predictive-previous-searches
    .popular-searches
    .popular-searches-container
    .search-heading {
    white-space: nowrap;
  }

  predictive-search.predictive-search-section
    .predictive-search-header
    .predictive-search-header-container
    #predictive-previous-searches
    .popular-searches
    .popular-searches-container
    .previous-searches-list {
    padding-inline-start: 0;
  }

  predictive-search.predictive-search-section
    .predictive-search-header
    .predictive-search-header-container
    #predictive-previous-searches
    .popular-searches
    .popular-searches-container
    .previous-searches-list
    a {
    font-weight: 400;
    text-transform: capitalize;
  }

  /* Predictive Search Results (full-bleed cream panel; content is centred via .ps-inner) */
  predictive-search.predictive-search-section .predictive-search-results {
    width: 100%;
    /* JS sets max-height to (viewport bottom - 100px); this is the fallback */
    max-height: var(--ps-max-height, calc(100dvh - 200px));
    padding-top: var(--content-spacing-6);
    overflow: hidden auto;
    background: var(--body-background-color);
  }

  /* Charcoal 70% scrim covering the page below the header (sits behind the panels) */
  predictive-search.predictive-search-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--brand-color-1) 70%, transparent);
  }

  predictive-search.predictive-search-section .predictive-search-results.results-loading::after {
    opacity: 1;
    visibility: visible;
  }

  predictive-search.predictive-search-section
    .predictive-search-results.results-loading
    .predictive-search-results__sidebar,
  predictive-search.predictive-search-section
    .predictive-search-results.results-loading
    .predictive-search-results__product-grid-outer {
    pointer-events: none;
    opacity: 0;
  }

  predictive-search.predictive-search-section .predictive-search-results::after {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 10;
    width: 40px;
    height: 40px;
    border: solid 4px var(--primary-color);
    border-radius: 50%;
    content: '';
    pointer-events: none;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-in 0.1s;
    animation: loading-spin 1s infinite ease-out;
    border-right-color: transparent;
    translate: -50% -50%;
  }

  @keyframes loading-spin {
    0% {
      rotate: 0deg;
    }
    100% {
      rotate: 360deg;
    }
  }

  /* Resource Heading */
  predictive-search.predictive-search-section .predictive-search-results .resource-heading {
    color: var(--text-color);
  }

  predictive-search.predictive-search-section
    .predictive-search-results
    .resource-heading:has(+ .accordion-open) {
    border-bottom: none;
  }

  predictive-search.predictive-search-section .predictive-search-results .resource-heading > svg {
    position: absolute;
    inset: 50% 0 auto auto;
    width: 15px;
    height: 14px;
    object-fit: contain;
    color: var(--text-color);
    pointer-events: none;
    user-select: none;
    translate: 0 -50%;
  }

  predictive-search.predictive-search-section
    .predictive-search-results
    .resource-heading:has(+ .accordion-open)
    > svg {
    rotate: 180deg;
  }

  /* Underline Link */
  predictive-search.predictive-search-section .predictive-search-results .underline-link {
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 7px;
  }

  predictive-search.predictive-search-section .predictive-search-results .underline-link:hover {
    color: var(--text-color-highlight);
  }

  @media (max-width: 992px) {
    predictive-search.predictive-search-section,
    predictive-search.predictive-search-section .predictive-search-header {
      padding: 0;
    }

    /* The header already has a fixed search field on mobile, so the
       overlay's own search bar is redundant. */
    predictive-search.predictive-search-section .predictive-search-header {
      display: none;
    }

    predictive-search.predictive-search-section .predictive-search-results {
      display: flex !important;
      flex-direction: column;
      width: 100%;
      min-height: 70dvh;
      padding-top: 0;
    }
    predictive-search.predictive-search-section
      .predictive-search-results
      .predictive-search-results__product-grid:not(.search-inactive, .accordion-open) {
      display: none !important;
    }
    predictive-search.predictive-search-section
      .predictive-search-results
      .predictive-search-results__product-grid.open {
      display: grid !important;
    }
  }

  /* Predictive Search Form */
  .predictive-search-form {
    align-items: stretch;
    min-height: 70px;
    background: var(--brand-color-2);
    transition: 150ms ease-in-out;
  }

  .predictive-search-form.mobile {
    height: 35px;
    padding-left: 45px;
    font-size: 18px;
    font-weight: 400;
  }
  .predictive-search-form.mobile span {
    font-size: 14px;
  }

  .predictive-search-form__input {
    padding: 0 44px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 400;
    appearance: none;
  }

  /* No focus outline on the search field (it sat over the white bar a bit much) */
  .predictive-search-form__input:focus {
    outline: none;
  }

  .predictive-search-form__input::placeholder {
    color: color-mix(in srgb, var(--text-color) 60%, transparent);
    font-size: 14px;
  }

  .predictive-search-form__reset {
    z-index: 5;
    width: 16px;
  }
  .predictive-search-form__submit {
    z-index: 5;
    width: 22px;
  }

  .predictive-search-form__reset > svg,
  .predictive-search-form__submit > svg {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    pointer-events: none;
  }

  .predictive-search-form__reset > svg path,
  .predictive-search-form__reset > svg line,
  .predictive-search-form__submit > svg path,
  .predictive-search-form__submit > svg line {
    stroke: var(--text-color);
  }

  .predictive-search-form__submit {
    inset: 0 auto 0 0;
  }

  .predictive-search-form__reset {
    inset: 0 0 0 auto;
  }

  @media (min-width: 992px) {
    .predictive-search-form.mobile {
      display: none;
    }

    predictive-search.predictive-search-section .predictive-search-header,
    predictive-search.predictive-search-section .predictive-search-results {
      width: calc(100% - 50px);
      margin: 0 25px;
    }
  }

  @media (max-width: 992px) {
    .predictive-search-form__input {
      padding: 0 40px 0 54px;
    }
    .predictive-search-form__submit {
      inset: 0 auto 0 18px;
      width: 29px;
    }

    .predictive-search-form__reset {
      inset: 0 18px 0 auto;
    }
  }
/* END_SNIPPET:predictive-search */

/* START_SNIPPET:price-increase-bar (INDEX:206) */
.price-increase-bar {
    margin-bottom: var(--content-spacing-4);
    padding: 5px 10px;
    background: #ffebca;
    text-align: center;
  }

  .price-increase-bar__text {
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
  }

  .price-increase-bar__text strong {
    font-weight: 600;
  }
/* END_SNIPPET:price-increase-bar */

/* START_SNIPPET:product-card-quick-add (INDEX:209) */
.product-card-quick-add .product-submit-wrapper {
    gap: var(--content-spacing-2);
  }

  @media only screen and (max-width: 767.98px) {
    .product-card-quick-add .product-submit-container {
      display: none;
    }
    .product-card-quick-add .quickview-selects {
      display: none;
    }
    .product-card-quick-add .variant-price-wrapper * {
      font-size: 14px !important;
      font-weight: 500;
    }
    .product-card-quick-add .product-title {
      font-size: 15px;
      line-height: 105%;
    }
    .product-card-quick-add .variant-radios {
      gap: var(--content-spacing-1);
    }
  }
/* END_SNIPPET:product-card-quick-add */

/* START_SNIPPET:product-card (INDEX:210) */
.product-card {
    height: 100%;
    background: var(--brand-color-2);
    /* Query container for the swatch row (see `@container product-card` further down).
       `inline-size` contains only the inline axis, so the card still grows to fit vertically. */
    container-type: inline-size;
    container-name: product-card;
  }

  /* Media / images */
  .product-card__media {
    background: #fff;
    z-index: 0;
  }

  .product-card__hover-media {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .product-card__img,
  .product-card .product-card__media > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* First (featured) image is usually a white-background studio shot on a square canvas —
     contain it so it isn't cropped to fill the card. Two-class selector beats the base rule
     above; scoped to __media so the hover image is unaffected. */
  .product-card__media .product-card__img {
    object-fit: contain;
  }

  /* Hover (lifestyle) image must keep covering the whole card. */
  .product-card__hover-media .product-card__img {
    position: absolute;
    inset: 0;
    object-fit: cover;
  }

  /* Content sits above the hover image; white card normally */
  .product-card__content {
    z-index: 2;
    flex: 1;
    padding: 16px;
    background: var(--brand-color-2);
    transition: background 0.3s ease, color 0.3s ease;
  }

  /* Legibility scrim: a soft bottom-up gradient behind the content, shown only on hover.
     Guarantees the optic-white text stays readable over ANY second image — near-invisible on
     dark lifestyle shots, provides the needed contrast on light/white studio shots. Sits above
     the hover image (z1) but below the content (z2), badges + wishlist (z3). */
  .product-card__scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* Card hover: reveal second image full-card, flip text to optic white */
  .product-card:hover .product-card__hover-media,
  .product-card:hover .product-card__scrim {
    opacity: 1;
  }

  .product-card:hover .product-card__content {
    background: transparent;
    color: var(--brand-color-2);
  }

  .product-card:hover .product-card__title,
  .product-card:hover .product-card__amount,
  .product-card:hover .product-card__from,
  .product-card:hover .product-card__compare,
  .product-card:hover .product-card__finance {
    color: var(--brand-color-2);
  }

  /* The title is an <a>, so hovering it also matches critical.css's
     `a:not([class^="button-"]):hover { color: var(--text-color-highlight) }` — which at (0,2,1)
     outranks the (0,2,0) rule above and turned the title charcoal on the dark card. Re-assert it
     for that one case; naming the element and its own :hover takes this to (0,4,1). */
  .product-card:hover a.product-card__title:hover {
    color: var(--brand-color-2);
  }

  /* On hover a metal keeps its own colour — that ring IS the metal, so losing it on hover would
     drop the identity. Only the charcoal fallback swaps to optic white, since charcoal disappears
     against the darkened card; that's the stones and any metal with no colour set. */
  .product-card:hover .product-card__metal.is-selected {
    border-color: var(--swatch-ring, var(--brand-color-2));
  }

  /* compare/finance are dimmed off-hover; make them fully optic white on hover */
  .product-card:hover .product-card__compare,
  .product-card:hover .product-card__finance {
    opacity: 1;
  }

  /* On hover the card goes dark — flip the gold stars to white (mirrors the gold logic in
     product-review-stars.liquid: full = solid white, empty = white outline, half = gradient
     filled stop → white). Higher specificity than the gold defaults so it wins on hover. */
  .product-card:hover .yotpo-widget-instance .yotpo-sr-star-full path,
  .product-card:hover .yotpo-widget-instance .yotpo-sr-star-half path,
  .product-card:hover .yotpo-widget-instance .yotpo-sr-star-empty path {
    stroke: #fff !important;
  }
  .product-card:hover .yotpo-widget-instance .yotpo-sr-star-full path {
    fill: #fff !important;
  }
  .product-card:hover .yotpo-widget-instance .yotpo-sr-star-empty path {
    fill: transparent !important;
  }
  .product-card:hover .yotpo-widget-instance .yotpo-sr-star-half stop:first-of-type {
    stop-color: #fff !important;
  }

  .product-card:hover .yotpo-widget-instance .yotpo-sr-bottom-line-text {
    color: #fff !important;
  }

  /* Title */
  .product-card__title {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }
  @media (max-width: 767.98px) {
    .product-card__title {
      font-size: 14px;
      line-height: 1;
    }
    /* Only one badge on mobile */
    .product-card .badge-container .product-badge ~ .product-badge {
      display: none;
    }
    .product-card__content {
      padding: 10px;
    }
  }

  /* Price — pinned to the bottom so price + swatches align across cards of unequal title length */
  .product-card__price-row {
    margin-top: auto;
  }

  .product-card__price {
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }

  .product-card__from,
  .product-card__amount {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: var(--text-color);
  }

  .product-card__compare {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    text-decoration: line-through;
    opacity: 0.6;
  }

  .product-card__finance {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    opacity: 0.5;
    white-space: nowrap;
  }

  /* Swatches — metals left, stones right, same circle styling as the PDP picker. The top margin
     lives on the row so a card with only stones is spaced like one with only metals. */
  .product-card__swatch-row {
    margin-top: 8px;
  }

  .product-card__metals,
  .product-card__stones {
    gap: 6px;
  }

  /* Brief dip while the sibling card is fetched — enough to acknowledge the click without a
     spinner, and short enough that a cached swap doesn't visibly flash. */
  .product-card.is-swapping {
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }

  .product-card.is-swapping .product-card__metals,
  .product-card.is-swapping .product-card__stones {
    pointer-events: none;
  }

  /* Overflow marker when a range has more swatches than the row shows. */
  .product-card__metal-more {
    font-family: var(--body-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-color);
  }

  .product-card:hover .product-card__metal-more {
    color: var(--brand-color-2);
  }

  /* Stones are the secondary axis, so they're the first thing dropped when the card runs out of
     room. Keyed to the CARD's width, not the viewport: the same card is wide in a 2-up slider and
     narrow in a 5-up grid at identical viewport widths, so a media query would hide them in the
     wrong places. Driven by the `container-type` on `.product-card` above. */
  @container product-card (max-width: 220px) {
    .product-card__stones {
      display: none;
    }
  }

  .product-card__metal {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
  }

  .product-card__metal-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }

  /* Selected swatch: slightly larger than the unselected 20px so it reads as picked, ringed in
     the metal's own colour. That colour arrives inline as `--swatch-ring` rather than as
     `border-color` — an inline border-color would outrank the hover rule below and the ring could
     never turn white. Stones (and any metal with no colour set) fall back to charcoal. */
  .product-card__metal.is-selected {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-width: 2px;
    border-color: var(--swatch-ring, var(--brand-color-1));
    /* transparent gap so it blends with the card's default AND dark-hover background */
    background: transparent;
  }

  /* Swym Advanced Collections wishlist heart. Swym injects a container + button and shoves the
     button rightward with an inline `transform: translate(300px,0)` from a top-left origin — that
     offset is card-width-dependent and flashes on the left first. Instead, pin the (out-of-flow)
     container to the card's own top-right and let the button sit statically inside it, transform
     killed. Two-class / !important selectors beat Swym's single-class + inline rules. */
  .product-card .swym-advanced-wishlist-collections-container {
    position: absolute !important;
    top: 14px;
    right: 14px;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    z-index: 3;
  }

  .product-card .swym-advanced-wishlist-collections {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    padding: 0 !important;
    color: var(--text-color);
    transform: none !important;
  }

  .product-card .swym-advanced-wishlist-collections svg {
    width: 20px;
    height: 20px;
  }

  /* Heart turns optic white on card hover, like the old QF wishlist */
  .product-card:hover .swym-advanced-wishlist-collections {
    color: var(--brand-color-2);
  }

  .product-card:hover .swym-advanced-wishlist-collections svg,
  .product-card:hover .swym-advanced-wishlist-collections svg path {
    color: var(--brand-color-2);
    stroke: var(--brand-color-2);
  }

  /* Added-to-wishlist (filled heart) state — fill white on hover too.
     Scoped to Swym's "added" hooks so the plain outline heart isn't filled. */
  .product-card:hover .swym-advanced-wishlist-collections.swym-added svg path,
  .product-card:hover .swym-advanced-wishlist-collections[aria-pressed="true"] svg path {
    fill: var(--brand-color-2);
    stroke: var(--brand-color-2);
  }

  /* Badges — unchanged on hover */
  .product-card .badge-container {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
  }

  /* Mobile positioning for badge + wishlist heart. Declared after the desktop
     rules above so it wins on source order — no !important needed. */
  @media (max-width: 767.98px) {
    .product-card .swym-advanced-wishlist-collections-container {
      top: 5px;
      right: 3px;
    }
    .product-card .badge-container {
      top: 5px;
      left: 5px;
    }
  }

  .product-card .product-badge {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 10px;
    border-radius: 0;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-form (INDEX:211) */
.product-details .border-bottom {
    border-bottom: 1px solid var(--brand-color-5);
  }
  .product-details .accordion:first-of-type {
    padding-top: 0;
  }
/* END_SNIPPET:product-form */

/* START_SNIPPET:product-gallery (INDEX:212) */
/* Product badges over the gallery hero — top-left, 14px desktop / 5px mobile
     (the badge-position setting was removed, so pin it here). */
  .main-gallery > .badge-container {
    top: 14px;
    left: 14px;
  }

  @media only screen and (max-width: 767px) {
    .main-gallery > .badge-container {
      top: 5px;
      left: 5px;
    }

    /* Mobile: bleed the gallery to both viewport edges (cancel the page-width padding) so the
       main image is full-bleed. The slider inside shows ~20px of the next image (slidesToShow
       1.06). The section container clips the overshoot (overflow-x: clip), so no h-scroll.
       Two IDs so this beats the same-specificity `width: 100%` reset in the <=991.98px block. */
    #main-product-container #main-product .gallery {
      width: calc(100% + (2 * var(--page-width-padding-mobile)));
      max-width: none;
      margin-left: calc(-1 * var(--page-width-padding-mobile));
    }
  }

  .gallery-mount {
    position: relative;
    width: 100%;
  }

  .gallery-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
  }

  main-product:not([data-gallery-revealed]) .gallery-placeholder {
    transition: opacity 0.4s ease;
  }

  @media screen and (min-width: 992px) {
    .gallery-placeholder[data-thumb-positioning='left'] {
      bottom: 0;
      align-items: flex-start;
    }

    .gallery-placeholder[data-thumb-positioning='left'] .gallery-placeholder__thumb-spacer {
      flex-shrink: 0;
      width: calc(20% - var(--content-spacing-3, 12px));
    }
  }

  .gallery-mount:not(.gallery-mount--settled) .gallery-container[data-gallery-style='slider'] {
    overflow: hidden;
    pointer-events: none;
  }

  .gallery-mount--settled .gallery-container[data-gallery-style='slider'] {
    overflow: visible;
    pointer-events: auto;
  }

  .gallery-mount:has(.gallery-container--ready) .gallery-placeholder {
    opacity: 0;
  }

  .gallery-placeholder--removed {
    display: none;
  }

  main-product:not([data-gallery-revealed]) .gallery-container[data-gallery-style='slider'] {
    transition: opacity 0.4s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    main-product:not([data-gallery-revealed]) .gallery-container[data-gallery-style='slider'],
    main-product:not([data-gallery-revealed]) .gallery-placeholder {
      transition: none;
    }
  }

  /* Stable layout before Blaze initializes (prevents stacked full-width slides/thumbs) */
  .gallery-container[data-gallery-style='slider'] .main-slider:not([data-slider-initialized='true']) .blaze-track-container,
  .gallery-container[data-gallery-style='slider'] .thumb-slider:not([data-slider-initialized='true']) .blaze-track-container {
    overflow: hidden !important;
  }

  @media screen and (max-width: 991.98px) {
    .gallery-container[data-gallery-style='slider'] .thumb-slider:not([data-slider-initialized='true']) {
      --slider-overflow-behavior: hidden;
    }

    .gallery-mount:not(:has(.gallery-container--ready)) .main-slider .blaze-pagination {
      min-height: 8px;
      margin-top: var(--content-spacing-4, 1rem);
    }
  }

  @media screen and (min-width: 992px) {
    .gallery-container[data-gallery-style='slider'][data-thumb-orientation='vertical']:not(.gallery-container--ready) .thumb-gallery {
      overflow: hidden;
      max-height: calc(
        (min(100vw, var(--page-width, 1440px)) - (var(--page-width-padding, 40px) * 2)) / 2 * 0.8
      );
    }
  }

  @media only screen and (min-width: 992px) {
    #main-product .main-slider .slider-pagination {
      display: none;
    }
  }

  .main-gallery .main-slider .main-gallery-navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    aspect-ratio: 1 / 1;
    pointer-events: none;
  }

  .main-gallery .main-slider .main-gallery-navigation .blaze-navigation-arrows {
    width: 100%;
    height: 100%;
  }

  .main-gallery .main-slider .main-gallery-navigation .blaze-button-prev,
  .main-gallery .main-slider .main-gallery-navigation .blaze-button-next {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    transform: translateY(-50%);
  }

  .main-gallery .main-slider .main-gallery-navigation .blaze-button-prev {
    left: var(--content-spacing-2, 0.5rem);
  }

  .main-gallery .main-slider .main-gallery-navigation .blaze-button-next {
    right: var(--content-spacing-2, 0.5rem);
  }

  @media only screen and (max-width: 991.98px) {
    .gallery-image-holder .variant-image-wrapper {
      display: none;
    }

    /* Mobile carousel uses DOM order + data-slider-initial, not desktop grid reordering.
       The grid slider carries a `.desktop` class, so this must NOT exclude it — otherwise the
       slides keep their grid layout below 992 and the slider can't move. */
    .gallery-container[data-gallery-style='grid'] .main-slider .blaze-track > .main-slider-slide {
      order: 0 !important;
      flex: 0 0 var(--slide-width) !important;
      width: var(--slide-width) !important;
      max-width: var(--slide-width) !important;
      grid-column: unset !important;
    }
  }

  .gallery-lightbox-trigger {
    position: absolute;
    top: var(--content-spacing-2);
    right: var(--content-spacing-8);
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;

    /* border-radius: 50%; */

    /* background: rgba(17, 17, 17, 0.55); */
    color: #fff;
    cursor: pointer;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
  }

  /* Tile-scoped copy for the 360 spin. The shared rule offsets from the gallery edge
     (right: --content-spacing-8 / 9vw on mobile); this one sits in its own tile's corner, above
     the spin's stack (spin 2, drag-block 3, arrows 4). */
  .gallery-lightbox-trigger--m360 {
    top: var(--content-spacing-2);
    right: var(--content-spacing-2);
    z-index: 5;
  }

  @media only screen and (max-width: 767.98px) {
    .gallery-lightbox-trigger--m360 {
      right: var(--content-spacing-2);
    }
  }

  .gallery-lightbox-trigger:hover,
  .gallery-lightbox-trigger:focus {
    outline: none;

    /* background: rgba(17, 17, 17, 0.85); */
    transform: scale(1.05);
  }

  .gallery-lightbox-trigger svg {
    display: block;
    width: 20px;
    height: 20px;

    /* fill: currentColor; */
    pointer-events: none;
  }

  /* Mobile: inset the lightbox trigger from the right edge with a fluid value; the narrower
     rule (<500px) is listed second so it wins on small viewports. */
  @media only screen and (max-width: 767.98px) {
    .gallery-lightbox-trigger {
      right: 9vw;
    }
  }

  @media only screen and (max-width: 499.98px) {
    .gallery-lightbox-trigger {
      right: 10vw;
    }
  }

  .product-lightbox-modal {
    display: none;
    padding: 0;
  }

  .product-lightbox-modal.modal-overlay--visible {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
  }

  .product-lightbox-modal .product-lightbox-modal__content.modal-panel,
  .product-lightbox-modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: #f7f5f1;
  }

  .product-lightbox-modal__title {
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .product-lightbox-modal__close {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    color: inherit;

    /* border-radius: 50%; */

    /* background: rgba(17, 17, 17, 0.65); */
    cursor: pointer;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
  }

  .product-lightbox-modal__close:hover,
  .product-lightbox-modal__close:focus {
    outline: none;

    /* background: rgba(17, 17, 17, 0.85); */
    transform: scale(1.05);
  }

  .product-lightbox-modal__close svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
    fill: currentcolor;
  }

  .product-lightbox-modal__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    flex-shrink: 0;
    padding: clamp(12px, 2vw, 20px);
    pointer-events: none;
  }

  .product-lightbox-modal__header > * {
    pointer-events: auto;
  }

  .product-lightbox-modal__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .product-lightbox-modal__body > .flex {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  .lightbox-slider {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .lightbox-slider .blaze-track-container {
    height: 100%;
  }

  .lightbox-slider .blaze-track {
    height: 100%;
    align-items: center;
  }

  .lightbox-slider .slider-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* Plain #fff, not a brand token: the product shots and the 360 frames are cut out on true
       white, so anything near-white leaves a visible box around the subject. */
    background: #fff;
  }

  /* The spin is absolutely positioned inside its tile, so give it a box to fill. Square like the
     gallery tile, capped so a tall viewport doesn't push the frame past the modal chrome. */
  .lightbox-m360 {
    width: 100%;
    max-width: min(90vw, 90vh);
    aspect-ratio: 1;
    margin-inline: auto;
  }

  .lightbox-slider .slider-zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    /* Clip the zoomed image (scaled via transform in lightbox-zoom.js) to the slide. */
    overflow: hidden;
  }

  /* Desktop: click the lightbox image to zoom, move the cursor to pan (lightbox-zoom.js). */
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .product-lightbox-modal .lightbox-slider-slide {
      cursor: zoom-in;
    }
    .product-lightbox-modal .lightbox-slider-slide.is-touch-zoomed {
      cursor: zoom-out;
    }
  }

  .lightbox-slider-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* .lightbox-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
} */

  #main-product-container #main-product .gallery .gallery-container {
    top: 105px;
  }

  .main-slider .slider-slide {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Single media item styles */
  .main-gallery .gallery-image-holder {
    aspect-ratio: 1 / 1;
  }

  /* Very landscape stills (roughly 1.5:1 and wider) are letterboxed rather than cropped — an
     `object-cover` crop of a 1000×395 image inside the square tile shows only a thin band of it.
     Beats the `.object-cover` utility on specificity, so no `!important` needed. */
  .gallery-image-holder--wide img {
    object-fit: contain;
    background-color: var(--brand-color-2);
  }

  /* Subtle zoom on hover to signal the tile is interactive.
     Excludes the 360-spin tile so it doesn't fight the spin. */
  .main-gallery .gallery-image-holder img {
    transition: transform 0.4s ease;
  }

  .main-gallery .gallery-image-holder:hover img {
    transform: scale(1.07);
  }

  .main-gallery .gallery-image-holder:hover .m360-spin img {
    transform: none;
  }

  .thumb-slider {
    width: 100%;
    height: auto;
  }

  .thumb-slider .slider-slide {
    aspect-ratio: 1 / 1;
  }

  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    video,
  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    iframe,
  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    model-viewer,
  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    svg:not([lightbox-trigger] svg) {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media only screen and (min-width: 992px) {
    .gallery-container[data-thumb-orientation='vertical'] .thumb-slider {
      height: 100%;
      max-height: 100%;
      overflow: hidden !important;
    }

    .gallery-container[data-thumb-orientation='vertical'] .thumb-slider .blaze-track-container {
      height: 100%;
      padding-right: 2px;
      overflow: hidden auto;
      cursor: grab;
      touch-action: pan-y;
    }

    .gallery-container[data-thumb-orientation='vertical']
      .thumb-slider
      .blaze-track-container.thumb-dragging {
      cursor: grabbing;
      user-select: none;
    }

    .gallery-container[data-thumb-orientation='vertical'] .thumb-slider .blaze-track {
      display: flex;
      flex-direction: column;
      gap: 10px;
      transform: none !important;
      will-change: auto;
    }

    .gallery-container[data-thumb-orientation='vertical'] .thumb-slider .blaze-track > * {
      flex: 0 0 auto;
      width: 100% !important;
    }

    .gallery-container[data-thumb-orientation='vertical'] .thumb-slider .thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
    }
  }

  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    video,
  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    iframe,
  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    model-viewer,
  #main-product-container
    #main-product
    .gallery
    .gallery-container
    .main-gallery
    .gallery-image-holder
    svg:not([lightbox-trigger] svg) {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media only screen and (min-width: 992px) {
    .thumb-gallery {
      flex-shrink: 0; /* Prevent growing */
      width: calc(20% - var(--content-spacing-3));
      height: auto; /* Let JavaScript control the height */
      overflow: hidden;
    }

    .thumb-gallery.under {
      width: 100%;
    }

    .thumb-gallery.under .thumb-slider {
      height: 100px;
    }

    .thumb-gallery.under .thumb-slider .blaze-track {
      height: 100px;
    }

    .thumb-slider {
      overflow: hidden !important;
    }

    .gallery-lightbox-trigger {
      top: 0.75rem;
      right: 0.75rem;
      width: 20px;
      height: 20px;
      padding: 0;
    }

    .thumb-slider .slider-slide {
      width: auto;
      height: auto;
      aspect-ratio: 1 / 1;
    }

    .lightbox-slider {
      height: 100%;
    }

    #main-product-container #main-product .gallery .gallery-container {
      top: 105px;
    }

    .thumb-slider .slider-slide {
      height: auto;
      aspect-ratio: 1 / 1;
    }

    .main-slider .variant-image-wrapper {
      display: none;
    }

    .variant-image-wrapper.attached-false {
      display: none !important;
    }

    .main-slider .slider-slide .gallery-image-holder {
      border: 1px solid var(--brand-color-5);
      background-color: #fff;
    }
    .main-slider .variant-image-wrapper.active {
      display: block;
    }

    .main-slider .slider-slide .first-image .gallery-image-holder:has(.active) > img {
      display: none;
    }

    /* Single media item styles */
    .main-gallery .gallery-image-holder {
      aspect-ratio: 1 / 1;
    }

    /* Desktop grid layout: driven by Liquid (hero index, span-*, --slide-order), not JS.
       Flush two-up: no gap and no radius so tiles butt together seamlessly. */
    .gallery-container[data-gallery-style='grid'] .main-gallery .main-slider .blaze-track {
      display: grid;
      gap: 0;
      grid-template-columns: repeat(12, 1fr);
      transform: none !important;
    }

    .gallery-container[data-gallery-style='grid'] .gallery-image-holder {
      border: 0;
      border-radius: 0;
    }

    .gallery-container[data-gallery-style='grid'] .main-gallery .main-slider .blaze-track > .main-slider-slide {
      order: var(--slide-order);
      width: 100%;
    }

    /* The odd-count tile spans both columns, so a 1:1 holder would be enormous — and a video in
       that slot ends up pillarboxed inside a square. Give the full-width tile a 16:9 frame, which
       suits video natively and keeps a landscape crop for stills. Beats the `pb-100` utility on
       specificity, and overrides the square `aspect-ratio` set above. */
    .gallery-container[data-gallery-style='grid'] .main-gallery .main-slider .blaze-track > .main-slider-slide.span-12 .gallery-image-holder {
      padding-bottom: 0;
      aspect-ratio: 16 / 9;
      height: auto;
    }

    .gallery-container[data-gallery-style='grid'] .main-gallery .main-slider .blaze-track-container {
      overflow: visible;
    }

    .gallery-container[data-gallery-style='grid'] .main-gallery .main-slider .blaze-pagination,
    .gallery-container[data-gallery-style='grid'] .main-gallery .main-slider .slider-pagination {
      display: none;
    }

    /* Grid gallery is a static two-up on desktop — no need for prev/next arrows. */
    .gallery-container[data-gallery-style='grid'] .main-gallery .main-gallery-navigation {
      display: none;
    }

    .main-gallery .main-slider .main-slider-slide {
      flex-shrink: 0 !important;
    }

    /* THIS IS THE ORIGINAL CODE FOR THE GALLERY  */
  }

  /* ---- Mobile gallery (now < 992px): full-width slider, no gap, no pagination, no arrows ---- */
  @media only screen and (max-width: 991.98px) {
    #main-product-container .main-slider .blaze-pagination,
    #main-product-container .main-slider .slider-pagination {
      display: none !important;
    }

    #main-product-container .main-gallery-navigation {
      display: none !important;
    }

    /* Kill the slide gap at the source: zero --slide-gap (drives both the flex gap and the
       --slide-width calc) plus the flex gap itself, on the slider and the track. */
    #main-product-container .main-slider,
    #main-product-container .main-slider .blaze-track {
      --slide-gap: 0px !important;
      --slide-gap-mobile: 0px !important;
      --slide-gap-tablet: 0px !important;
    }

    #main-product-container .main-slider .blaze-track {
      gap: 0 !important;
    }

    /* No gap beneath the slider (drop the container gap + any pagination spacing) */
    #main-product-container .gallery-container {
      gap: 0 !important;
    }

    #main-product-container .main-slider .blaze-pagination {
      display: none !important;
      margin: 0 !important;
      min-height: 0 !important;
    }

    #main-product-container .gallery,
    #main-product-container .mobile-slider-overflow,
    #main-product-container .gallery-container,
    #main-product-container .main-gallery,
    #main-product-container .main-slider {
      width: 100%;
    }

    /* Single-image product (no slider): full-bleed the gallery to the viewport edges and show the
       one image whole at its natural ratio. Bleed lives on the container (same width:100vw +
       margin-left:calc(-50vw+50%) pattern as the price-increase bar) so the image just fills it. */
    #main-product-container .main-gallery--single {
      width: 100vw;
      max-width: 100vw;
    }

    #main-product-container .main-gallery--single .gallery-image-holder {
      aspect-ratio: auto;
      width: 100%;
      height: auto;
      padding-bottom: 0;
      border-radius: 0;
    }

    #main-product-container .main-gallery--single .gallery-image-holder img {
      position: relative;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
/* END_SNIPPET:product-gallery */

/* START_SNIPPET:product-gift-card-fields (INDEX:213) */
.gift-card-divider {
    border-top: 1px solid var(--brand-color-4);
    margin-block: var(--content-spacing-2);
  }

  /* Gift card: "Voucher Value" legend styled like the field labels (Work Sans 400 / 14px / 150%) */
  .product-form:has([product-gift-card-fields]) .variant-selectors--dropdown legend {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Voucher Value block spans full width so its legend row can justify "Voucher Value"
     (left) against "*Required Fields" (far right); the divider matches the other blocks. */
  .product-form:has([product-gift-card-fields]) product-range-selector {
    border-top: 1px solid var(--brand-color-4);
  }

  .product-form:has([product-gift-card-fields]) .variant-selectors--dropdown {
    border-top: 0 !important;
    padding-top: var(--content-spacing-4) !important;
  }

  /* Full-width legend so "Voucher Value" / "*Required Fields" justify to the row edges */
  .product-form:has([product-gift-card-fields]) .variant-selectors--dropdown legend {
    width: 100%;
  }

  /* Dropdown itself stays half width (left), so the toggle can share its row on the right */
  .product-form:has([product-gift-card-fields]) .custom-dropdown {
    max-width: calc(50% - (var(--content-spacing-4) / 2));
  }

  /* "*Required Fields" note lives in the Voucher Value legend — reset the legend's
     bold/uppercase styling so it reads as a quiet helper note. */
  .gift-card-required-note {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand-color-1);
    opacity: 0.5;
    white-space: nowrap;
  }

  /* Toggle sits on the Voucher Value dropdown row, right half */
  .product-form:has([product-gift-card-fields]) .gift-card-gift-toggle {
    align-self: flex-start;
    width: calc(50% - 10px);
    margin-left: calc(50% + (var(--content-spacing-4) / 2));
    margin-top: -44px;
  }

  /* Field inputs (recipient name/email, delivery date) + the Voucher Value dropdown = 39px */
  .product-form:has([product-gift-card-fields]) .gift-card-field input,
  .product-form:has([product-gift-card-fields]) .variant-selectors--dropdown .dropdown-toggle {
    height: 39px;
  }

  /* critical.css sets cursor:pointer on ALL input/select/textarea. The recipient detail fields are
     for typing, so restore the regular (text) cursor here. Scoped to .gift-card-field inputs only —
     the Voucher Value dropdown (.dropdown-toggle) is left as a pointer. */
  .product-form:has([product-gift-card-fields]) .gift-card-field input,
  .product-form:has([product-gift-card-fields]) .gift-card-field textarea {
    cursor: auto;
  }

  .select-checkbox .checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 3px;
    background: white;
    transition: all 0.2s ease;
  }

  .select-checkbox input[type='checkbox']:checked + .checkbox {
    border-color: var(--brand-color-1, #000);
    background: var(--brand-color-1, #000);
  }

  .select-checkbox .checkbox svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .select-checkbox input[type='checkbox']:checked + .checkbox svg {
    opacity: 1;
  }

  .select-checkbox .checkbox svg path {
    fill: white;
  }

  /* Mobile: single column — full-width dropdown, toggle drops onto its own row below */
  @media (max-width: 767.98px) {
    .product-form:has([product-gift-card-fields]) .custom-dropdown {
      max-width: 100%;
    }

    .product-form:has([product-gift-card-fields]) .gift-card-gift-toggle {
      margin-left: 0;
      margin-top: 0;
      width: 100%;
    }
  }
/* END_SNIPPET:product-gift-card-fields */

/* START_SNIPPET:product-personalise (INDEX:216) */
/* Block reads like the band/stone blocks: Gold Dust divider, balanced top/bottom padding */
  .product-personalise .personalise-block {
    padding-top: var(--content-spacing-5);
    padding-bottom: var(--content-spacing-5);
    border-top: 1px solid var(--brand-color-4);
  }

  .product-personalise .personalise-header {
    justify-content: flex-start;
    gap: 12px;
  }

  .product-personalise .personalise-header__title {
    margin: 0;
    font-weight: 600;
  }

  .product-personalise .personalise-header__toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  /* Collapsible panel */
  .product-personalise [data-personalise-panel] {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .product-personalise .personalise-block:not(.is-open) [data-personalise-panel] {
    max-height: 0;
  }

  .product-personalise .personalise-block:not(.is-open) {
    gap: 0;
  }

  /* Custom checkbox (mirrors gift-card-fields) */
  .product-personalise .select-checkbox .checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--brand-color-1);
    background: var(--brand-color-2);
    transition: background 0.2s ease;
  }

  .product-personalise .select-checkbox input[type='checkbox']:checked + .checkbox {
    background: var(--brand-color-1);
  }

  .product-personalise .select-checkbox .checkbox svg {
    width: 11px;
    height: 11px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .product-personalise .select-checkbox input[type='checkbox']:checked + .checkbox svg {
    opacity: 1;
  }

  .product-personalise .select-checkbox .checkbox svg path {
    fill: var(--brand-color-2);
  }

  .product-personalise .personalise-option__label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .product-personalise .personalise-option__price {
    font-weight: 600;
  }

  /* Engraving input + counter */
  .product-personalise .engraving-input,
  .product-personalise .gift-input {
    padding: var(--content-spacing-2) var(--content-spacing-3);
    padding-right: 56px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    background: var(--brand-color-2);
    font-family: var(--body-font-family);
    font-size: 14px;
    transition: border-color 0.2s ease;
  }

  .product-personalise .gift-input {
    padding-right: var(--content-spacing-3);
    resize: vertical;
  }

  /* Focus: change the border colour instead of the default browser outline */
  .product-personalise .engraving-input:focus,
  .product-personalise .gift-input:focus {
    outline: none;
    border-color: var(--brand-color-1);
  }

  .product-personalise .char-count {
    position: absolute;
    top: 50%;
    right: var(--content-spacing-3);
    transform: translateY(-50%);
    opacity: 0.6;
    pointer-events: none;
  }

  .product-personalise .delivery-note {
    opacity: 0.6;
  }

  .product-personalise .hidden {
    display: none;
  }
/* END_SNIPPET:product-personalise */

/* START_SNIPPET:product-range-selector (INDEX:217) */
/* Blocks read like the product's other elements: a Gold Dust divider above each,
     with matching space on both sides of the line. */
  .product-range-block {
    padding-top: var(--content-spacing-5);
    padding-bottom: var(--content-spacing-5);
    border-top: 1px solid var(--brand-color-4);
  }

  .product-range-selector .product-range-header {
    /* title + (i) sit together at the left, no chevron */
    justify-content: flex-start;
    gap: 12px;
  }

  /* Semi-bold heading (override heading-h5's 500 without the 700 `bold` utility) */
  .product-range-header .product-range-header__title {
    margin: 0;
    font-weight: 600;
  }

  .product-range-selector .product-range-header__toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    gap: 6px;
  }

  /* Underline only the words on hover, not the caret — the button is a flex row, so a
     text-decoration on it would run under the icon too. */
  .product-range-selector .product-range-header__toggle:hover .product-range-header__title {
    text-decoration: underline;
  }

  .product-range-header__toggle .icon-caret-down {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  /* Flip once open: a caret still pointing down at an expanded panel says "expand" when the
     only thing left to do is collapse. Matches the panel's own 0.3s. */
  .product-range-block--stone.is-open .product-range-header__toggle .icon-caret-down {
    transform: rotate(180deg);
  }

  .product-range-selector .product-range-info-trigger,
  .product-range-selector .product-range-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--content-spacing-1);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
  }

  .product-range-selector .product-range-info-trigger svg {
    width: 15px;
    height: 15px;
  }

  .product-range-selector .product-range-pill svg {
    width: 15px;
    height: 15px;
  }

  /* Collapsible stone body (band body has no [data-range-panel] → always visible) */
  [data-range-panel] {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .product-range-block--stone:not(.is-open) [data-range-panel] {
    max-height: 0;
  }

  /* Closed: drop the header↔panel flex gap so the block's top/bottom padding stays balanced */
  .product-range-block--stone:not(.is-open) {
    gap: 0;
  }

  /* ── Swatches ── 32×32, 14px apart; selected keeps 32×32 total with a 2px ring + inner gap */
  .product-range-swatches {
    gap: 14px;
  }

  .product-range-swatch {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    transition:
      border-color 0.2s ease,
      padding 0.2s ease;
  }

  .product-range-swatch__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .product-range-swatch.is-active {
    padding: 4px; /* inner gap between the ring and the fill */
    border-width: 2px;
    border-color: var(--brand-color-3);
    /* the padding reveals this as a gap (body background) around the fill */
    background: var(--body-background-color);
  }

  /* ── "Metal: 18K YELLOW GOLD" ── */
  .product-range-metal-label {
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
  }

  .product-range-metal-value {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
  }

  /* ── Stone panel ── */
  .product-range-selected-label {
    font-size: 14px;
    color: var(--text-color);
  }

  .product-range-selected-label .icon-diamond {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  /* Cards: selected summary + each alternative row */
  .product-range-card {
    padding: var(--content-spacing-3);
    border: 1px solid var(--brand-color-5);
  }

  /* Selected summary: filled and unbordered — the fill is what separates "this is yours" from the
     outlined rows you can pick. `relative` anchors the corner badge.
     Even 10px inset from ≥768px up; the phone block at the bottom tightens it to 2px 5px. */
  .product-range-card--selected {
    position: relative;
    padding: 10px;
    background: var(--brand-color-2);
    border: 0;
  }

  .product-range-card__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 2px 6px;
    background: var(--brand-color-4);
    color: var(--brand-color-1);
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Alternative rows: outlined and unfilled, so they read as choices against the filled card */
  .product-range-card--row {
    padding: 10px;
    border: 1px solid var(--brand-color-1);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .product-range-card--row:hover {
    background: var(--brand-color-5);
  }

  .product-range-card--row[hidden] {
    display: none;
  }

  /* No stone image (the norm now that stones aren't imaged): the empty thumbnail box is dropped in
     Liquid; swap the 2px thumbnail gutter for a proper inset so the specs don't hug the edge. */
  .product-range-card.product-range-card--no-media {
    padding: var(--content-spacing-3) var(--content-spacing-4);
  }

  .product-range-card__media {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--brand-color-2);
    /* Circular crop — overflow clips the gemstone graphic to the radius. */
    border-radius: 100%;
    overflow: hidden;
  }

  .product-range-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Specs (label + value); a button when it opens the slide-out, else plain text */
  .product-range-selector .product-range-spec {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 64px;
    text-align: left;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .product-range-selector button.product-range-spec {
    cursor: pointer;
  }

  .product-range-spec__label {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    opacity: 0.6;
  }

  .product-range-spec__value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .icon-caret-down {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
  }

  .product-range-selector .product-range-spec .icon-caret-down {
    width: 8px;
    height: 8px;
  }

  .product-range-stone__delta {
    font-weight: var(--body-font-weight);
    opacity: 0.7;
  }

  /* Explore alternatives heading + divider before the filter */
  .product-range-alternatives__title .icon-caret-down {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
  }

  .product-range-alternatives__title {
    /* Flex row, not inline flow: a global rule blocks the icon, so as inline content it dropped
       onto its own line under the heading. */
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-bottom: var(--content-spacing-3);
    border-bottom: 1px solid var(--brand-color-4);
  }

  .product-range-filter__label {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  /* Learn-about box */
  .product-range-learn {
    padding: var(--content-spacing-2) var(--content-spacing-4);
    background: var(--brand-color-5);
  }

  .product-range-learn__label {
    flex-shrink: 0;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .product-range-selector .product-range-pill {
    border: 1px solid var(--brand-color-3);
    border-radius: 999px;
    padding: var(--content-spacing-1) var(--content-spacing-2);
    background: var(--brand-color-2);
    height: 32px;
    min-width: 96px;
    transition: border-color 0.2s ease;
  }

  .product-range-selector .product-range-pill:hover {
    border-color: var(--brand-color-1);
  }

  /* Lab Grown / Natural filter — bordered rectangles, filled when active */
  .product-range-selector .product-range-filter__btn {
    border: 1px solid var(--brand-color-1);
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: var(--content-spacing-2) var(--content-spacing-5);
    font-family: var(--body-font-family);
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .product-range-selector .product-range-filter__btn:hover {
    background: var(--brand-color-4);
  }

  .product-range-selector .product-range-filter__btn.is-active {
    background: var(--brand-color-1);
    color: var(--text-color-alternate);
  }

  /* Narrow-column layout: specs collapse from horizontal columns to stacked
     label-left / value-right rows.

     Applied at two widths, because the card is narrow in both:
       ≤767.98px  — phone, whole page is one column;
       992–1399.98px — the PDP splits into gallery + info columns, and the info column
                       is narrower here than it is on a phone.
     The horizontal layout needs roughly 4 × 64px of spec plus 3 × 30px of gap before the
     media and padding, so in that band it wrapped mid-row and stranded "Type" and
     "Total price" on lines of their own. Stacking is the same treatment mobile already
     used, rather than a third bespoke layout. */
  @media only screen and (max-width: 767.98px),
    only screen and (min-width: 992px) and (max-width: 1399.98px) {
    /* no vertical gap before the wrapped Total row (keep the image↔specs column gap) */
    .product-range-selector .product-range-card--row {
      row-gap: 0;
    }

    /* stacked rows, no gap between them (beats the g-6 utility) */
    .product-range-card .product-range-card__specs {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    /* label (fixed width) then value left-aligned, so values line up across rows */
    .product-range-selector .product-range-spec {
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--content-spacing-2);
    }

    .product-range-selector .product-range-spec__label {
      width: 72px;
      flex-shrink: 0;
    }
  }

  /* Phone-only trimmings (the narrow desktop column keeps the standard treatment). */
  @media only screen and (max-width: 767.98px) {
    /* Tighter card inset — 2px left would crowd the circle against the edge */
    .product-range-card--selected,
    .product-range-card--row {
      padding: 2px 5px;
    }

    /* Learn about: label centred on top, pills spread on their own row */
    .product-range-learn {
      flex-direction: column;
      align-items: stretch;
    }

    .product-range-learn__label {
      text-align: center;
    }

    .product-range-learn__pills {
      justify-content: space-between;
    }

    /* Alternative rows: Total spans full width below the image + specs, on a sand band */
    .product-range-selector .product-range-spec--total {
      flex-basis: 100%;
      justify-content: center;
      padding: var(--content-spacing-1);
      background: var(--brand-color-5);
    }

    .product-range-selector .product-range-spec--total .product-range-spec__label {
      width: auto;
    }

    .product-range-selector .product-range-spec--total .product-range-spec__label::after {
      content: ':';
    }
  }
/* END_SNIPPET:product-range-selector */

/* START_SNIPPET:product-reference-slider (INDEX:218) */
@media only screen and (min-width: 992px) {
    .product-ref-slider {
      margin-top: -10px;
    }
  }

  .product-ref-slider.has-divider-top {
    padding-top: var(--content-spacing-4);
    border-top: 1px solid var(--brand-color-4);
  }

  .product-ref-slider.has-divider-bottom {
    padding-bottom: var(--content-spacing-4);
    border-bottom: 1px solid var(--brand-color-4);
  }

  .product-ref-slider__heading {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  /* Slider stays contained within the page width — the peeking next card is clipped
     at the container's right edge (via .blaze-track-container overflow), no bleed. */
  .product-ref-slider__slider {
    width: 100%;
  }

  /* Horizontal card: image left, details right */
  .prs-card {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  @media only screen and (max-width: 767.98px) {
    .prs-card {
      align-items: flex-start;
    }
  }

  .prs-card__media {
    flex: 0 0 42%;
    max-width: 120px;
    display: block;
    background: #fff;
    overflow: hidden;
  }

  .prs-card__img,
  .prs-card__media > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .prs-card__info {
    flex: 1 1 auto;
    gap: 8px;
    align-items: flex-start;
  }

  .prs-card__title {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .prs-card__amount {
    font-family: var(--body-font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .prs-card__compare {
    font-family: var(--body-font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-decoration: line-through;
    opacity: 0.6;
  }

  .prs-card__cta {
    margin-top: 4px;
    font-weight: 400;
  }
/* END_SNIPPET:product-reference-slider */

/* START_SNIPPET:product-review-stars (INDEX:219) */
/* Yotpo review-count text (scoped under the widget to beat Yotpo's own single-class rules) */
  .yotpo-widget-instance .yotpo-sr-bottom-line-text,
  .yotpo-widget-instance .yotpo-sr-bottom-line-text--right-panel {
    font-size: 12px !important;
    line-height: 1 !important;
    color: rgba(64, 64, 64, 0.5) !important;
    text-decoration: underline !important;
  }

  /* Card/collection widget defaults to a stacked column — force stars + count onto one line (like the PDP) */
  .yotpo-widget-instance .yotpo-sr-bottom-line-summary {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Collapse the fixed-height stars wrapper (works for both the card div and the PDP button) */
  .yotpo-widget-instance .yotpo-sr-bottom-line-summary > span > span {
    height: auto !important;
  }

  /* Widget root — dropped the responsive device/display classes so it applies on all breakpoints */
  .yotpo-widget-instance .yotpo-reviews-star-ratings-widget.yotpo-star-ratings-widget-override-css {
    margin-bottom: 0 !important;
  }

  /* Star rating → brand gold. Yotpo fills each star path with a dynamic-id linear gradient,
     so we can't target the gradient by id: full stars get a solid gold fill (overriding the
     gradient), empty stars a gold outline only, and half stars keep their gradient with the
     filled <stop> recoloured. */
  .yotpo-widget-instance .yotpo-sr-star-full path,
  .yotpo-widget-instance .yotpo-sr-star-half path,
  .yotpo-widget-instance .yotpo-sr-star-empty path {
    stroke: #dfc799 !important; /* brand gold (stars) */
  }
  .yotpo-widget-instance .yotpo-sr-star-full path {
    fill: #dfc799 !important; /* brand gold (stars) */
  }
  .yotpo-widget-instance .yotpo-sr-star-empty path {
    fill: transparent !important;
  }
  .yotpo-widget-instance .yotpo-sr-star-half stop:first-of-type {
    stop-color: #dfc799 !important; /* brand gold (stars) */
  }
/* END_SNIPPET:product-review-stars */

/* START_SNIPPET:product-sold-out (INDEX:220) */
/* Usual section spacing (same clamp as .vertical-margin) above the banner, below it before the
     main product, and between the banner and the alternatives. */
  .pdp-sold-out-form {
    --oos-section-spacing: clamp(
      var(--spacing-sections-mobile),
      calc(var(--spacing-intercept) + var(--spacing-slope) * 1vw),
      var(--spacing-sections-desktop)
    );

    margin-top: var(--oos-section-spacing);
    margin-bottom: var(--oos-section-spacing);
  }

  .pdp-sold-out-form .recommended-products-section {
    margin-top: var(--oos-section-spacing);
  }

  /* Mobile: keep the title + arrows inline on one row (grid stacks them by default),
     letting the long heading wrap instead of the arrows dropping to their own row. */
  @media (max-width: 767.98px) {
    .pdp-sold-out-form .recommended-products-section .section-header {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--content-spacing-3);
    }

    .pdp-sold-out-form .recommended-products-section .section-header > .span-5 {
      flex: 1 1 auto;
      min-width: 0;
    }

    .pdp-sold-out-form .recommended-products-section .section-header .section-navigation {
      flex: 0 0 auto;
      width: auto;
    }

    .pdp-sold-out-form .recommended-products-section .section-header h2 {
      overflow-wrap: break-word;
    }
  }

  /* Sold-out banner is always Gold Dust (brand 4) with charcoal text, regardless of section scheme */
  .pdp-sold-out-form__wrapper.section-container {
    background-color: var(--brand-color-4);
    color: var(--brand-color-1);
  }

  /* Sold-out / back-in-stock heading at medium weight */
  .pdp-sold-out-form .product-title {
    font-weight: 500;
  }

  .pdp-sold-out-form__wrapper.has-bis-form::after {
    content: '';
    order: 2;
    width: 1px;
    height: auto;
    display: flex;
    background: #ffffff;
    position: relative;
  }

  @media (max-width: 1199.98px) {
    .pdp-sold-out-form__wrapper.has-bis-form::after {
      width: 100%;
      height: 1px;
    }
  }

  .pdp-sold-out-form__product-card {
    order: 1;
  }

  .pdp-sold-out-form__product-card .product-image {
    width: 104px;
    min-width: 104px;
    height: 104px;
    background: #fff;
  }

  @media (max-width: 767.98px) {
    .pdp-sold-out-form__product-card .product-image {
      width: 100%;
      min-width: 100%;
      height: unset;
    }
  }

  .pdp-sold-out-form__form {
    order: 3;
  }
/* END_SNIPPET:product-sold-out */

/* START_SNIPPET:product-submit-wrapper (INDEX:221) */
@media only screen and (min-width: 768px) {
    .product-submit-wrapper label {
      flex: 1;
    }
  }

  .product-submit-wrapper label input {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text--color-secondary);
    font-size: 16px;
  }

  .product-submit-wrapper label input:focus-visible,
  .product-submit-wrapper label input:focus {
    outline: none;
  }

  .product-submit-wrapper label.disabled {
    cursor: not-allowed;
    opacity: 0.8;
  }

  .product-submit-wrapper label.disabled input:disabled {
    pointer-events: none;
  }

  .product-submit-wrapper label.disabled svg {
    display: none;
  }

  .product-submit-container .low-stock-icon {
    outline: 4px solid #0003;
  }

  @media only screen and (max-width: 767.98px) {
    .product-submit-wrapper .quantity-total-wrapper {
      order: 1;
    }
    .product-submit-wrapper label {
      order: 3;
    }
  }
/* END_SNIPPET:product-submit-wrapper */

/* START_SNIPPET:product-variant-prices (INDEX:223) */
.variant-prices-container .large-body-text {
    font-size: 18px;
  }

  /* Base strikethrough for the compare-at price (shared across PDP, quickview, quick-add). */
  .variant-prices-container .price-item--compare {
    text-decoration: line-through;
    opacity: 0.5;
  }
/* END_SNIPPET:product-variant-prices */

/* START_SNIPPET:quantity-selector-product (INDEX:224) */
.quantity-select {
    border: 1px solid var(--Light-Grey, #e9e9e9);
    border-radius: 100px;
  }

  .quantity-select > * {
    width: 30px;
    height: 30px;
    border: none;
  }

  .quantity-select .quantity {
    flex: 2;
  }
/* END_SNIPPET:quantity-selector-product */

/* START_SNIPPET:quantity-selector (INDEX:225) */
/* -----------------------
   Cart/Side Cart Item Quantity
   ----------------------- */
  .quantity-wrapper {
    display: flex;
    width: 90px;
    min-width: 90px;
    min-height: 34px;
    border: 1px solid var(--brand-color-5);
    border-radius: 0;
    overflow: hidden;
    background-color: var(--brand-color-6);
  }

  .quantity-wrapper > * {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 21px;
    height: auto;
    border: none;
    text-align: center;
  }

  .quantity-wrapper .quantity-btn--increment,
  .quantity-wrapper .quantity-btn--decrement {
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s ease;
  }

  .quantity-wrapper .quantity-btn--increment[data-pending='true'],
  .quantity-wrapper .quantity-btn--decrement[data-pending='true'] {
    cursor: not-allowed;
  }

  .quantity-wrapper .quantity {
    border-right: none;
    border-left: none;
  }

  .quantity-wrapper .quantity span {
    position: relative;
    top: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
  }

  /* -----------------------
   Side Cart Item Out of Stock
   ----------------------- */

  /* .oos {
  font-size: 12px;
  width: 50%;
  margin: 0px;
  text-align: right;
} */

  /* -----------------------
   Product Quantity (Form)
   ----------------------- */

  .quantity-select > * {
    width: 30px;
    height: 100%;
    border: none;
  }

  .quantity-select .quantity {
    flex: 2;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quickview-gallery (INDEX:227) */
quick-view-inner .main-slider .main-slider-slide .gallery-image-holder {
    border: none;
  }
/* END_SNIPPET:quickview-gallery */

/* START_SNIPPET:search (INDEX:233) */
.main-404-section .form-search-bar input[type='text'] {
    cursor: text !important;
  }

  .form-search-bar .submit-group {
    background: none;
  }

  .form-search-bar .submit-group label input[type='submit'],
  .form-search-bar .submit-group label input[type='button'] {
    border: none;
    background: none;
  }
/* END_SNIPPET:search */

/* START_SNIPPET:selling-plan-selector (INDEX:234) */
.selling-plan-selectors .selling-plan-wrapper label {
    width: 100%;
  }

  .selling-plan-selectors .selling-plan-wrapper:hover label {
    background-color: var(--brand-color-5, #f5f5f5);
  }

  .selling-plan-selectors .selling-plan-wrapper label.is-selected,
  .selling-plan-selectors .selling-plan-wrapper:has(input:checked) label {
    background-color: var(--brand-color-2);
    color: var(--text-color-alternate);
  }

  .selling-plan-selectors--dropdown fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .selling-plan-selectors--dropdown legend {
    margin-bottom: var(--spacing-1, 0.5rem);
  }

  selling-plan-picker.is-updating,
  .selling-plan-selectors.is-updating {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .selling-plan-selectors .money-savings-badge {
    padding: 2px 6px;
    white-space: nowrap;
  }

  .selling-plan-selectors .selling-plan-wrapper label.is-selected .money-savings-badge,
  .selling-plan-selectors .selling-plan-wrapper:has(input:checked) label .money-savings-badge {
    background-color: var(--badge-background-color-2);
    color: var(--badge-text-color-2);
  }
/* END_SNIPPET:selling-plan-selector */

/* START_SNIPPET:side-cart-item (INDEX:235) */
.side-cart-item .img-wrapper {
    width: 72px;
    height: 82px;
    border: 1px solid var(--brand-color-5);
  }
  /* Engraving add-on lines are skipped in the side-cart list (folded into the parent ring's price).
     Defensive: if one is ever rendered here directly, keep it hidden. */
  .side-cart-item--addon {
    display: none;
  }

  /* Finance line is cart-PAGE-desktop only (see sections/cart.liquid). The delete icon shows
     everywhere, top-right of the title row, matching the cart page. */
  .side-cart-item .cart-item-finance {
    display: none;
  }
  .side-cart-item .cart-remove-wrap {
    display: flex;
  }
  .side-cart-item .cart-item-finance {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.8;
  }
  /* Smaller than the cart page's icon so it takes less room in the narrow drawer column
     (the cart page keeps 18x23 — see sections/cart.liquid). Ratio matches the source SVG. */
  .side-cart-item .remove-button button {
    width: 14px;
    max-width: 14px;
    height: 18px;
    padding: 0;
    cursor: pointer;
  }
  .side-cart-item .remove-button button:hover svg path {
    fill: var(--brand-color-1);
  }

  /* Product title */
  .side-cart-item .title .product-link {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }

  /* Variant */
  .side-cart-item .variant-title {
    font-family: var(--body-font-family);
    font-size: 12px;
    font-weight: 400;
  }

  /* Bullet separator, shown only when the variant title follows the stone name on the row */
  .side-cart-item .variant-title-row .variant-title + .variant-title::before {
    content: '•';
    margin: 0 6px;
  }

  /* Actual price */
  .side-cart-item .price .bold {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 600;
  }

  /* Compare-at (was-price) */
  .side-cart-item .price .strikethrough {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.5;
  }
/* END_SNIPPET:side-cart-item */

/* START_SNIPPET:side-cart (INDEX:236) */
.free-delivery-status,
  .free-gift-status {
    background-color: var(--brand-color-3);
  }

  .free-delivery-progress-bar,
  .free-gift-progress-bar {
    position: relative;
    height: 3px;
    min-height: 3px;
    margin: 12px 0 8px;
    background-color: rgb(255 255 255 / 30%);
    background-color: color-mix(in srgb, var(--text-color-alternate) 30%, transparent);
  }

  .free-delivery-progress,
  .free-gift-progress {
    height: 100%;
    background-color: white;
    transition: width 0.3s ease;
    will-change: width;
  }

  /* knob (circle) that rides the progress bar */
  .free-delivery-knob,
  .free-gift-knob {
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .free-delivery-knob-inner,
  .free-gift-knob-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid rgb(0 0 0 / 6%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
    background: var(--text-color-alternate);
  }

  .free-delivery-knob-inner svg,
  .free-gift-knob-inner svg {
    display: block;
  }

  .free-delivery-text,
  .free-gift-text {
    display: block;
    margin-top: 0;
    font-weight: 400;
  }

  /* Empty state fills the panel colour rather than the section-container scheme background. */
  .empty-cart {
    background: var(--brand-color-7);
  }

  /* Thin, styled scrollbar for the scrolling items list */
  .items-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-color-3) transparent;
  }
  .items-wrapper::-webkit-scrollbar {
    width: 5px;
  }
  .items-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }
  .items-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: var(--brand-color-3);
  }

  /* Smaller property badges in the side cart (the cart page keeps the larger default). */
  #shopify-section-side-cart .line-item-prop {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Fill the drawer content area (panel height minus the header), not the full viewport — the
     panel now owns the 100dvh sizing, so the bottom (subtotal/checkout) stays on-screen. */
  [cart-items-container] {
    height: 100%;
  }

  .cart-recommendations-slider,
  .cart-recommendations-slider .shopify-section {
    width: 100%;
  }

  #shopify-section-side-cart .item.side-cart-item {
    position: relative;
    padding-bottom: 20px;
  }

  /* Base divider setup (but not active yet) */
  #shopify-section-side-cart .items > div::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--brand-color-5);
    content: '';
    pointer-events: none;
    opacity: 0; /* default hidden */
  }

  /* Add the border only when the next sibling is NOT a non-variant item */
  #shopify-section-side-cart .item.side-cart-item[data-variant-id]:has(+ .item[data-variant-id]) {
    padding-bottom: 40px; /* increase space */
  }

  #shopify-section-side-cart
    .item.side-cart-item[data-variant-id]:has(+ .item[data-variant-id])::after {
    bottom: 20px; /* center line within the padding */
    opacity: 1; /* show border */
  }
  #shopify-section-side-cart .items > div:not([data-variant-id]) {
    position: relative;
    margin-bottom: 40px;
  }
  #shopify-section-side-cart .items > div:not([data-variant-id])::after {
    bottom: -20px; /* center line within the padding */
    opacity: 1; /* show border */
  }

  /* Cart summary panel — Gold Dust background (overrides the .section-container.third scheme). */
  .cart-details {
    background: var(--brand-color-4);
  }

  .cart__checkout-button {
    height: 44px;
  }

  /* Subtotal row */
  .subtotal-heading {
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
  }
  .subtotal-heading__label {
    font-weight: 600;
  }
  .subtotal-heading__count {
    font-weight: 400;
  }
  .sub-total {
    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 600;
  }
  .sub-total__compare {
    font-weight: 400;
    opacity: 0.5;
  }

  /* Diamond Points placeholder row (under the subtotal) */
  .diamond-points-row {
    color: var(--brand-color-1);
    opacity: 0.7;
  }
  .diamond-points-row__icon {
    display: inline-flex;
  }
  .diamond-points-row__icon svg {
    width: 17px;
    height: 17px;
  }

  /* Plain text link rather than one of the `button-*` styles — no `.button-text` class exists in
     this theme, so this carries its own minimal treatment. */
  .view-full-cart {
    display: block;
    margin-top: 15px;
    font-family: var(--body-font-family);
    font-size: 14px;
    text-decoration: underline;
  }

  .express-options-text {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 14px;
  }

  .cart form .recommended-mobile-products {
    position: relative;
    z-index: 1;
    background-color: var(--brand-color-2);

    /* Subtle top-edge shadow so the "you may also like" pullout lifts off the side cart.
       Negative spread keeps the shadow tight to the top edge (minimal side bleed). */
    box-shadow: 0 -14px 22px -6px #00000012;
  }

  .cart form .recommended-mobile-products .panel {
    border-bottom: unset;
  }

  .cart form .recommended-mobile-products .button-accordion {
    background: var(--brand-color-6);
    border-bottom: 1px solid var(--brand-color-5);
  }

  .cart form .recommended-mobile-products .content {
    background-color: var(--brand-color-6);

    /* padding: 16px 8px; */
  }

  .cart form .recommended-mobile-products .button-accordion .accordion__question {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 150%; /* 21px */
  }

  .cart form .recommended-mobile-products .button-accordion .chevron {
    height: auto;
  }

  /* Chevron points down when closed, flips up when open (icon--chevron-down points down by default). */
  .cart-drawer-content .recommended-mobile-products .button-accordion .chevron svg {
    transform: rotateX(0deg);
  }
  .cart-drawer-content .recommended-mobile-products .button-accordion.active .chevron svg {
    transform: rotateX(180deg);
  }

  /* -----------------------
    ASSETSURE (app extension)
    <assetsure-cover-cart> is injected into the line items by the Assetsure app. Scoped to
    #CartDrawer to out-specify the app's own CSS, which loads independently of the theme's.
    The cart page equivalents are replicated in cart.liquid (this stylesheet doesn't load there);
    the PDP's <assetsure-cover-add-to-cart> rules live in product.liquid.
  ----------------------- */
  #CartDrawer assetsure-cover-cart .assetsure-title {
    font-weight: 600;
    text-transform: inherit;
  }

  #CartDrawer assetsure-cover-cart .assetsure-summary {
    /*display: none;*/
  }

  /* critical.css draws its own checkbox tick via ::after and shows it on :checked — suppress it
     here so only the background-image tick below renders. */
  #CartDrawer assetsure-cover-cart label input[type='checkbox']::after {
    display: none;
  }

  /* NB the tick SVGs are data URIs, and custom properties can't be interpolated inside url(), so
     the fills are literal: %23404040 is --brand-color-1. Update if that token changes. */
  #CartDrawer assetsure-cover-cart input[type='checkbox'] {
    border: 1px solid var(--brand-color-1);
    border-radius: 3px;
  }

  #CartDrawer assetsure-cover-cart input[type='checkbox']:hover {
    border-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23404040' fill-opacity='0.4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  #CartDrawer assetsure-cover-cart input[type='checkbox']:checked {
    border-color: var(--brand-color-1);
    background-color: var(--brand-color-1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  #CartDrawer assetsure-cover-cart a {
    font-weight: 600;
    color: var(--brand-color-1) !important;
  }
/* END_SNIPPET:side-cart */

/* START_SNIPPET:size-guide-modal (INDEX:239) */
.size-guide-modal__panel {
    width: min(680px, 92vw);
    max-height: 88vh;
    padding: 30px;
    overflow-y: auto;
    background: var(--brand-color-2, #fff);
  }

  /* Pull content up under the floating close button so it reserves no row */
  .size-guide-modal__content {
    margin-top: -36px;
  }

  /* The size-guide page content uses legacy classes (.btn / .row / .col-* / .rte__video-wrapper /
     .ml-*) that don't exist in this theme — style them here so pasted content renders cleanly. */
  .size-guide-modal__content img {
    max-width: 100%;
    height: auto;
  }

  .size-guide-modal__content ul,
  .size-guide-modal__content ol {
    margin: 0 0 var(--content-spacing-3);
    padding-left: 1.25rem;
  }

  .size-guide-modal__content li {
    margin-bottom: var(--content-spacing-1);
  }

  .size-guide-modal__content hr {
    margin: var(--content-spacing-5) 0;
    border: 0;
    border-top: 1px solid var(--brand-color-4);
  }

  .size-guide-modal__content .btn {
    display: inline-block;
    padding: 9px 30px;
    border: 1px solid var(--button-background-1, var(--brand-color-1));
    background: var(--button-background-1, var(--brand-color-1));
    color: var(--button-text-1, var(--brand-color-2));
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .size-guide-modal__content .btn:hover {
    background: var(--button-background-hover-1, #212121);
    border-color: var(--button-background-hover-1, #212121);
  }

  .size-guide-modal__content .rte__video-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    margin: var(--content-spacing-3) 0;
  }

  .size-guide-modal__content .rte__video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .size-guide-modal__content .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--content-spacing-2);
    margin-top: var(--content-spacing-3);
  }

  .size-guide-modal__content .row .col-12 {
    flex: 1 1 100%;
  }

  @media only screen and (min-width: 576px) {
    .size-guide-modal__content .row .col-sm-6 {
      flex: 1 1 calc(50% - var(--content-spacing-2));
    }
  }

  @media only screen and (max-width: 767.98px) {
    .size-guide-modal__panel {
      padding: 16px;
    }
  }
/* END_SNIPPET:size-guide-modal */

/* START_SNIPPET:size-selector (INDEX:240) */
/* Reads like the band/stone/personalise blocks: Gold Dust dividers above (from personalise)
     and below (before Add to cart), balanced padding */
  .size-selector {
    border-top: 1px solid var(--brand-color-4);
    border-bottom: 1px solid var(--brand-color-4);
    padding-top: var(--content-spacing-5);
    padding-bottom: var(--content-spacing-5);
  }

  .size-selector .size-selector__header {
    gap: 12px;
  }

  .size-selector__title {
    margin: 0;
    font-weight: 600;
  }

  .size-selector .size-selector__info,
  .size-selector .size-selector__edit,
  .size-selector .size-selector__find {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
  }

  .size-selector .size-selector__info svg {
    width: 15px;
    height: 15px;
  }

  .size-selector .size-selector__find {
    font-family: var(--body-font-family);
    font-size: 14px;
    text-decoration: underline;
  }

  .size-selector .size-selector__find:hover,
  .size-selector .size-selector__confirm-later:hover .size-selector__confirm-label {
    text-decoration: none;
  }

  .size-selector .size-selector__select-btn {
    justify-content: center;
    max-width: 232px;
    font-weight: 400;
  }

  .size-selector .size-selector__default,
  .size-selector .size-selector__selected {
    max-width: 232px;
    width: 100%;
  }

  .size-selector .size-selector__selected-box {
    padding: var(--content-spacing-2) var(--content-spacing-3);
    border: 1px solid var(--brand-color-5);
    background: var(--brand-color-2);
    color: inherit;
    font-family: var(--body-font-family);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }

  .size-selector .size-selector__confirm-later {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: var(--content-spacing-1) 0;
    font-family: var(--body-font-family);
    font-size: 14px;
    white-space: nowrap;
  }

  .size-selector .size-selector__confirm-label {
    text-decoration: underline;
  }

  /* Checkmark hidden until "Confirm later" is the active choice */
  .size-selector .size-selector__confirm-check {
    display: none;
    align-items: center;
  }

  .size-selector .size-selector__confirm-later.is-active {
    color: var(--brand-color-1);
    font-weight: 500;
  }

  .size-selector .size-selector__confirm-later.is-active .size-selector__confirm-check {
    display: inline-flex;
  }


  /* Mobile: stack them */
  @media only screen and (max-width: 767.98px) {
    .size-selector .size-selector__actions {
      flex-direction: column;
      align-items: stretch;
      gap: var(--content-spacing-2);
    }

    .size-selector .size-selector__default,
    .size-selector .size-selector__selected {
      max-width: 100%;
      margin: 0 auto;
    }

    .size-selector .size-selector__select-btn {
      max-width: 100%;
    }
  }
/* END_SNIPPET:size-selector */

/* START_SNIPPET:size-slideout (INDEX:241) */
/* Right-drawer override of the centered base .modal-overlay */
  .modal-overlay.size-slideout-overlay.modal-overlay--visible {
    justify-content: flex-end;
    align-items: stretch;
  }

  .size-slideout-overlay .modal-panel {
    width: 100%;
    max-width: min(440px, 94vw);
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 0.32s ease;
  }

  .size-slideout-overlay .modal-panel.slide-in-active {
    transform: translateX(0);
  }

  .size-slideout-overlay .size-slideout__close {
    position: sticky;
    top: 0;
    align-self: flex-end;
    z-index: 2;
    display: inline-flex;
    padding: var(--content-spacing-3);
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
  }

  .size-slideout-overlay .size-slideout__close svg {
    width: 16px;
    height: 16px;
  }

  .size-slideout__scroll {
    padding-top: 0;
  }

  /* Size chips — 58×58 charcoal-outlined squares on the slide-out background */
  .size-slideout-overlay .size-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 1px solid var(--brand-color-1);
    border-radius: 5px;
    background: transparent;
    color: var(--brand-color-1);
    cursor: pointer;
    text-align: center;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }

  .size-slideout-overlay .size-chip__label {
    font-family: var(--body-font-family);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
  }

  .size-slideout-overlay .size-chip__status {
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
  }

  /* "In Stock" reads green; made-to-order keeps the inherited text colour. Uses the brand Success
     token (#4FB176, editable under Inputs) rather than a one-off hex, so it moves with the palette.
     Keyed off the chip's own data attribute — the same flag the JS reads — so the colour can't
     disagree with the lead time being applied. */
  .size-slideout-overlay .size-chip[data-in-stock="true"] .size-chip__status {
    color: var(--input-success-text-color, #4fb176);
  }

  /* Selected chip goes charcoal-on-white, so the green would drop to near-invisible contrast. */
  .size-slideout-overlay .size-chip.is-selected[data-in-stock="true"] .size-chip__status {
    color: inherit;
  }

  .size-slideout-overlay .size-chip:hover {
    border-color: var(--brand-color-1);
  }

  .size-slideout-overlay .size-chip.is-selected {
    background: var(--brand-color-1);
    border-color: var(--brand-color-1);
    color: var(--text-color-alternate);
  }

  .size-slideout-overlay .size-chip[hidden] {
    display: none;
  }

  /* Rows of 58px squares with an 8px gutter */
  .size-slideout-overlay .size-instock,
  .size-slideout-overlay .size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Windowed range (Option 2) — nav buttons occupy the first/last grid cells */
  .size-window {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .size-slideout-overlay .size-window__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    padding: 4px;
    border: 1px solid var(--brand-color-1);
    border-radius: 5px;
    background: transparent;
    color: var(--brand-color-1);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      opacity 0.2s ease;
  }

  .size-slideout-overlay .size-window__nav:hover:not([disabled]) {
    background: var(--brand-color-4);
  }

  .size-slideout-overlay .size-window__nav-label {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
  }

  .size-slideout-overlay .size-window__nav-arrow {
    font-size: 16px;
    line-height: 1;
  }

  .size-slideout-overlay .size-window__nav[disabled] {
    opacity: 0.3;
    cursor: default;
  }

  /* Option 2 chips fill their grid column */
  .size-slideout-overlay .size-window .size-chip {
    width: 100%;
  }

  /* Headings — Libre Caslon 28px, tight leading, slight tracking */
  .size-slideout-overlay .size-slideout__title,
  .size-slideout-overlay .size-slideout__mto-heading h3 {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .size-slideout-overlay .size-slideout__mto-heading em {
    font-style: italic;
  }

  /* Made-to-order lead time line — bold number */
  .size-slideout-overlay .size-slideout__lead {
    font-family: var(--body-font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--brand-color-1);
  }

  .size-slideout-overlay .size-slideout__lead strong {
    font-weight: 700;
  }

  /* Not-sure button fixed height */
  .size-slideout-overlay .size-slideout__not-sure {
    height: 44px;
  }

  .size-slideout__mto,
  .size-slideout__heritage {
    max-width: 36ch;
    margin-inline: auto;
  }

  .size-slideout-overlay .size-slideout__add {
    height: 44px;
  }

  .size-slideout__add[disabled] {
    opacity: 0.3;
    cursor: default;
  }
/* END_SNIPPET:size-slideout */

/* START_SNIPPET:slider-navigation (INDEX:244) */
/* Hide the pair when neither arrow can do anything (a slider whose slides all fit). The
     controller sets BOTH `disabled` and `aria-disabled`, so match either — and drop the `+`
     adjacency, which failed on any markup that puts something between the two buttons. */
  .blaze-navigation-arrows:not(:has(.blaze-button-prev:not([disabled]):not([aria-disabled="true"]))):not(
      :has(.blaze-button-next:not([disabled]):not([aria-disabled="true"]))
    ) {
    display: none;
  }

  /* Base arrow look (used for BOTH default and inline): 30px gold-dust circle
     with a small charcoal chevron. Only the positioning differs — default sits
     statically in the header, inline pins to the slider container edges. */
  .blaze-navigation-arrows .blaze-button-prev,
  .blaze-navigation-arrows .blaze-button-next {
    position: static;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--brand-color-4);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5px 7px;
    cursor: pointer;
    user-select: none;
  }

  .blaze-navigation-arrows .blaze-button-prev {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='7'%20viewBox='0%200%205%207'%20fill='none'%3E%3Cpath%20d='M4.646%200.354L1.646%203.354L4.646%206.354'%20stroke='%23404040'/%3E%3C/svg%3E");
  }

  .blaze-navigation-arrows .blaze-button-next {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='7'%20viewBox='0%200%205%207'%20fill='none'%3E%3Cpath%20d='M0.354%200.354L3.354%203.354L0.354%206.354'%20stroke='%23404040'/%3E%3C/svg%3E");
  }

  /* Chevron is drawn via the background; hide the inline SVG/img icon */
  .blaze-navigation-arrows .blaze-button-prev svg,
  .blaze-navigation-arrows .blaze-button-next svg,
  .blaze-navigation-arrows .blaze-button-prev img,
  .blaze-navigation-arrows .blaze-button-next img,
  .blaze-navigation-arrows .blaze-button-prev .slider-navigation-icon,
  .blaze-navigation-arrows .blaze-button-next .slider-navigation-icon {
    display: none;
  }

  .blaze-navigation-arrows .blaze-button-prev:hover,
  .blaze-navigation-arrows .blaze-button-next:hover {
    opacity: 0.5;
  }

  .blaze-navigation-arrows .blaze-button-prev::after,
  .blaze-navigation-arrows .blaze-button-next::after {
    display: none;
  }

  .blaze-navigation-arrows .blaze-button-prev[disabled],
  .blaze-navigation-arrows .blaze-button-next[disabled] {
    cursor: not-allowed;
    opacity: 0.2;
  }

  .slider-section:has(.inline) {
    --slider-inline-page-width: var(--page-width);
  }

  .slider-section:has(.page-width--narrow):has(.inline) {
    --slider-inline-page-width: var(--page-width-narrow);
  }

  .slider-section:has(.page-width--wide):has(.inline) {
    --slider-inline-page-width: var(--page-width-wide);
  }

  .slider-section:has(.inline) .blaze-navigation-arrows {
    pointer-events: none;
  }

  /* Inline mode: pin the same arrows to the slider container edges */
  .slider-section:has(.inline) .blaze-navigation-arrows .blaze-button-prev,
  .slider-section:has(.inline) .blaze-navigation-arrows .blaze-button-next {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    z-index: 1;
  }

  .slider-section:has(.inline) .blaze-navigation-arrows .blaze-button-prev {
    left: 0;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .slider-section:has(.inline) .blaze-navigation-arrows .blaze-button-next {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
  }
/* END_SNIPPET:slider-navigation */

/* START_SNIPPET:usp-card (INDEX:253) */
/* Card-as-link: keep it looking exactly like a plain card. Without this the global
     `a:not([class^="button-"]):hover` rule recolours the whole card's text on hover. */
  a.usp-card-link,
  a.usp-card-link:hover,
  a.usp-card-link:focus {
    color: inherit;
    text-decoration: none;
  }
/* END_SNIPPET:usp-card */

/* START_SNIPPET:variant-card (INDEX:255) */
variant-card .product-form product-form .product-title {
    min-height: unset;
  }

  @media only screen and (max-width: 767.98px) {
    variant-card .product-image {
      padding-bottom: 40% !important;
      aspect-ratio: unset !important;
    }
  }
/* END_SNIPPET:variant-card */

/* START_SNIPPET:variant-info-panel (INDEX:256) */
/* Right-drawer override of the centered base .modal-overlay (utilities.css) */
  .modal-overlay.variant-info-overlay.modal-overlay--visible {
    justify-content: flex-end;
    align-items: stretch;
  }

  .variant-info-overlay .modal-panel {
    width: 100%;
    max-width: min(440px, 94vw);
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 0.32s ease;
  }

  .variant-info-overlay .modal-panel.slide-in-active {
    transform: translateX(0);
  }

  .variant-info-panel__close {
    position: sticky;
    top: 0;
    align-self: flex-end;
    z-index: 2;
    display: inline-flex;
    padding: var(--content-spacing-3);
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
  }

  .variant-info-panel__close svg {
    width: 16px;
    height: 16px;
  }

  .variant-info-panel__scroll {
    padding-top: 0;
  }

  .variant-info-panel__title {
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }

  .variant-info-panel__title em {
    font-style: italic;
  }

  /* Section labels: Subtitle / Carat / Clarity / Type */
  .variant-info-panel__label {
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .variant-info-panel__media {
    display: block;
  }

  .variant-info-panel__media video,
  .variant-info-panel__media img {
    width: 100%;
    display: block;
  }

  .variant-info-panel__media div[js-video-controls] .video-control-icon {
    bottom: 10px;
    left: 10px;
  }

  /* USPs — diamond icon + underlined heading inline, text below, two columns */
  .variant-info-panel__usps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block: 1px solid var(--brand-color-4);
    padding-block: var(--content-spacing-4);
  }

  .variant-info-usp__icon {
    display: inline-flex;
    align-items: center;
  }

  .variant-info-usp__icon img {
    max-height: 20px;
    width: auto;
  }

  .variant-info-usp__name {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: underline;
  }

  /* Carat marker slider (single-thumb, read-only) */
  .variant-info-carat {
    display: flex;
    flex-direction: column;
    gap: var(--content-spacing-4);
    padding-top: 52px;
  }

  .variant-info-carat__track {
    position: relative;
    height: 2px;
    background: #dfc799;
  }

  /* Single read-only value, so no from-0 fill */
  .variant-info-carat__fill {
    display: none;
  }

  /* Charcoal handle on the track (like the range mock) */
  .variant-info-carat__marker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 16px;
    border-radius: 2px;
    background: var(--brand-color-1);
    transform: translate(-50%, -50%);
  }

  /* Beige value chip above the handle */
  .variant-info-carat__bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: var(--brand-color-4);
    white-space: nowrap;
    font-size: 14px;
  }

  /* Pills are <button> now — scope past the global button reset */
  .variant-info-panel .variant-info-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1px solid var(--brand-color-3);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-family: var(--body-font-family);
    font-size: 14px;
    cursor: pointer;
  }

  .variant-info-panel .variant-info-pill.is-active {
    border-color: var(--brand-color-1);
    background: var(--brand-color-1);
    color: var(--text-color-alternate);
  }

  /* Group the slider arrows together, bottom-right (below each card) */
  .variant-info-panel .blaze-navigation-arrows {
    justify-content: flex-end;
    gap: 8px;
  }

  .variant-info-clarity-card__media {
    flex-shrink: 0;
    width: 72px;
  }

  /* Carat two-value range bar (between the low + high handles) */
  .variant-info-carat__range {
    position: absolute;
    top: 50%;
    height: 4px;
    background: var(--brand-color-1);
    transform: translateY(-50%);
  }

  .variant-info-card img {
    height: 140px;
    object-fit: cover;
  }

  /* Divider above the info cards (only rendered when cards exist) */
  .variant-info-panel__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--brand-color-4);
    padding-top: var(--content-spacing-4);
  }
/* END_SNIPPET:variant-info-panel */

/* START_SNIPPET:variant-selector (INDEX:260) */
.variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper label {
    min-width: calc(var(--variant-option-ch, 2) * 1ch + 2 * var(--content-spacing-2) + 2px);
    width: calc(var(--variant-option-ch, 2) * 1ch + 2 * var(--content-spacing-2) + 2px);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-wrapper label {
    flex-shrink: 0;
    width: var(--swatch-size, 24px);
    min-width: var(--swatch-size, 24px);
    height: var(--swatch-size, 24px);
    min-height: var(--swatch-size, 24px);
    padding: 0;
    box-sizing: border-box;
    background-color: transparent;
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-swatch-visual {
    display: block;
    width: 100%;
    height: 100%;
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-wrapper:hover label {
    background-color: transparent;
    outline: 1px solid var(--brand-color-5, #f5f5f5);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-wrapper label.is-selected,
  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-wrapper:has(input:checked) label {
    background-color: transparent;
    color: inherit;
    outline: 2px solid var(--brand-color-2);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-wrapper.out-of-stock label.is-selected,
  .variant-selectors:not(.variant-selectors--dropdown) .variant-selector--swatch .variant-wrapper.out-of-stock:has(input:checked) label {
    background-color: transparent;
    color: inherit;
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper:hover label {
    background-color: var(--brand-color-5, #f5f5f5);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.out-of-stock label {
    position: relative;
    border-color: var(--variant-out-of-stock-border, #bdbdbd);
    background-color: var(--variant-out-of-stock-bg, #ececec);
    color: var(--variant-out-of-stock-text, #5a5a5a);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.out-of-stock label::after {
    position: absolute;
    top: 50%;
    right: 10%;
    left: 10%;
    height: 1px;
    background-color: var(--variant-out-of-stock-text, #5a5a5a);
    content: '';
    transform: translateY(-50%) rotate(-12deg);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.unavailable-combination label {
    border-color: var(--variant-unavailable-border, #bdbdbd);
    background-color: var(--variant-unavailable-bg, #ececec);
    color: var(--variant-unavailable-text, #5a5a5a);
    cursor: not-allowed;
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.unavailable-combination {
    pointer-events: none;
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.unavailable-combination label::after {
    position: absolute;
    top: 50%;
    right: 10%;
    left: 10%;
    height: 1px;
    background-color: var(--variant-unavailable-text, #5a5a5a);
    content: '';
    pointer-events: none;
    transform: translateY(-50%) rotate(-12deg);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper label.is-selected,
  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper:has(input:checked) label {
    background-color: var(--brand-color-2);
    color: var(--text-color-alternate);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.out-of-stock label.is-selected,
  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.out-of-stock:has(input:checked) label {
    background-color: var(--brand-color-2);
    color: var(--text-color-alternate);
  }

  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.unavailable-combination label.is-selected,
  .variant-selectors:not(.variant-selectors--dropdown) .variant-wrapper.unavailable-combination:has(input:checked) label {
    background-color: var(--variant-unavailable-bg, #ececec);
    color: var(--variant-unavailable-text, #5a5a5a);
  }

  .variant-selectors--dropdown fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .variant-selectors--dropdown legend {
    margin-bottom: var(--spacing-1, 0.5rem);
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  variant-option-picker.is-updating,
  .variant-selectors.is-updating {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
/* END_SNIPPET:variant-selector */

/* START_SNIPPET:video (INDEX:261) */
div[js-video-controls] .video-control-icon,
  div[js-video-controls].video-playing .play-icon {
    display: none;
  }

  div[js-video-controls].video-playing .pause-icon,
  div[js-video-controls].video-paused .play-icon {
    display: flex;
  }

  div[js-video-controls][data-autoplay='true'] .video-control-icon {
    opacity: 0;
  }

  div[js-video-controls][data-autoplay='true']:hover .video-control-icon {
    opacity: 1;
  }

  div[js-video-controls] .video-control-icon {
    bottom: 21px;
    left: 21px;
    transition: opacity 250ms ease;
  }

  /* Clean double-ring control: faint outer ring + solid optic-white core */
  .video-control-ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-color-2) 20%, transparent);
    transition: transform 0.45s ease;
  }

  .video-control-inner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-color-2);
    transition: transform 0.45s ease;
  }

  .video-control-inner svg {
    display: block;
    width: 13px;
    height: 15px;
    transform: translate(2px, 0px);
  }

  /* Pause glyph — two charcoal bars */
  .video-control-bars {
    position: relative;
    width: 12px;
    height: 13px;
  }

  .video-control-bars::before,
  .video-control-bars::after {
    content: "";
    position: absolute;
    top: 0;
    width: 3.5px;
    height: 100%;
    border-radius: 1px;
    background: var(--text-color);
  }

  .video-control-bars::before {
    left: 0.5px;
  }

  .video-control-bars::after {
    right: 0.5px;
  }

  /* Optional label next to the play control (e.g. "PLAY VIDEO") */
  .video-control-label {
    font-family: var(--body-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-color-2);
  }

  /* Soft ring expand on hover of the (clickable) video */
  div[js-video-controls]:hover .video-control-ring {
    transform: scale(1.18);
  }

  div[js-video-controls]:hover .video-control-inner {
    transform: scale(0.847);
  }

  @media only screen and (max-width: 767.98px) {
    div[js-video-controls]:has(video.to-sm-hidden) .video-control-icon {
      display: none;
    }
  }

  @media only screen and (min-width: 768px) {
    div[js-video-controls]:has(video.to-sm-block) .video-control-icon {
      display: none;
    }
  }
/* END_SNIPPET:video */