/** Shopify CDN: Minification failed

Line 187:38 Expected identifier but found whitespace
Line 187:40 Unexpected "{"
Line 187:49 Expected ":"
Line 187:81 Expected ":"
Line 188:34 Expected identifier but found whitespace
Line 188:36 Unexpected "{"
Line 188:45 Expected ":"
Line 189:40 Expected identifier but found whitespace
Line 189:42 Unexpected "{"
Line 189:51 Expected ":"
... and 16 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:community-worn-by-you (INDEX:9) */
/* Values from the design's .wby / .wby-head / .wby-title / .wby-sub / .rail.
     The side padding lives on the head and rail, not the section, so the rail
     can bleed past the right edge while the heading stays inset. */
  .wby {
    padding: 22px 0 8px;
    border-top: 1px solid #ececec;
  }
  .wby-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 16px 12px;
  }
  .wby-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .wby-sub {
    color: #888;
    font-size: 10.5px;
  }
  .wby-rail {
    display: flex;
    gap: 10px;
    padding: 0 16px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wby-rail::-webkit-scrollbar {
    display: none;
  }
  .wby-card {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }
  .wby-card .wby-img,
  .wby-card .wby-ph {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
  }
  .wby-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.12);
    color: rgba(128, 128, 128, 0.9);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }
  /* Design .cred */
  .wby-cred {
    color: #888;
    font-size: 10px;
    padding-top: 6px;
  }
  @media (min-width: 990px) {
    .wby-card {
      flex-basis: 22%;
    }
  }
/* END_SECTION:community-worn-by-you */

/* START_SECTION:footer (INDEX:16) */
/* Centres the footer content instead of letting it span the full viewport. */
  .footer-inner {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Brand column — logo, blurb and socials stacked together */
  .footer-brand__heading {
    margin-top: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .footer-brand__text {
    /* Capped so the blurb keeps a readable line length in the wide column. */
    max-width: 380px;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.7;
  }
  /* Menu columns — small caps heading over a stacked link list */
  .footer-menu__heading {
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .footer-menu__list {
    font-size: 14px;
    line-height: 2;
  }

  /* ---- Mobile: menus become full-width rows, brand drops to the bottom ---- */
  @media (max-width: 1023px) {
    /* DOM order stays brand-first (correct for desktop and for screen readers);
       `order` moves it below the menus visually on mobile only. */
    .footer-brand {
      order: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .footer-brand__text {
      margin-left: auto;
      margin-right: auto;
    }
    .footer-menu {
      order: 1;
    }
    /* Compound selector so it outranks the theme's padding utilities (same
       specificity on their own), letting the row borders run edge to edge
       like the design's .frow. */
    .footer-menu.section-x-padding {
      padding: 0;
    }
    /* The design's mobile footer is a single flat list — no column headings. */
    .footer-menu__heading {
      display: none;
    }
    .footer-menu__list {
      font-size: 11px;
      line-height: 1.4;
    }
    .footer-menu__list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid #e1e1e1;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .footer-menu__list a::after {
      content: "\203A";
      font-size: 15px;
      font-weight: 400;
      opacity: 0.5;
    }
    .footer-copyright-section {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:image-text-logo (INDEX:20) */
/* Media Post */
  .media-section {
    /* Define CSS variables for section level settings */
    --media-section-heading-font-size: {{ section.settings.heading_font_size }}px;
    --media-section-heading-color: {{ section.settings.heading_color }};
    --media-section-heading-font-family: {{ section.settings.heading_font_family.family }}, {{ section.settings.heading_font_family.fallback_families }};

    --media-section-description-font-size: {{ section.settings.description_font_size }}px;
    --media-section-description-color: {{ section.settings.description_color }};
    --media-section-description-font-family: {{ section.settings.description_font_family.family }}, {{ section.settings.description_font_family.fallback_families }};

    margin-bottom: 50px;
  }

  .media-heading {
    text-align: center;
    font-size: var(--media-section-heading-font-size);
    color: var(--media-section-heading-color);
    font-family: var(--media-section-heading-font-family);
    margin-bottom: 20px;
  }
  .media-description {
    text-align: center;
    font-size: var(--media-section-description-font-size);
    color: var(--media-section-description-color);
    font-family: var(--media-section-description-font-family);
    margin-bottom: 40px;
  }
  .flex-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 30px;
    row-gap: 50px;
  }
  .flex-item-wrapper .flex-item {
    width: calc(33.33% - 20px);
    display: flex;
    gap: 15px;
  }
  .flex-item-wrapper .flex-item .item-img {
    width: 300px;
  }
  .flex-item-wrapper .flex-item .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flex-item-wrapper .flex-item .item-info {
    width: calc(100% - 315px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .dq-icon {
    margin-bottom: 20px;
  }
  .image-text-logo_text > p {
    font-size: var(--block-text-font-size);
    color: var(--block-text-color, #000);
    font-family: var(--block-text-font-family, sans-serif);
    line-height: 1.4;
  }
  .image-text-logo_logo span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
  }
  .image-text-logo_logo img {
    height: 42px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
  }
  .for-mobile {
    display: none !important;
  }

  .flex-item-slider button {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000 !important;
    color: #fff !important;
  }
  .flex-item-slider button.disabled {
    background-color: rgba(0, 0 , 0 , 0.10) !important;
    color: rgba(0, 0 , 0 , 0.40) !important;
  }
  .flex-item-slider button span {
    line-height: 1.2;
    font-size: 25px;
  }
  .flex-item-slider .flex-item {
    width: 100%;
  }

  /* Responsive */
  @media (max-width: 1500px) {
    .flex-item-wrapper .flex-item .item-img {
      width: 43%;
    }
    .flex-item-wrapper .flex-item .item-info {
      width: calc(100% - (43% + 10px));
    }
    .image-text-logo_logo img {
      height: 35px;
    }
    .dq-icon {
      margin: 10px 0;
      width: 15px;
    }
  }

  @media (max-width: 1440px) {
    /* You might want to use responsive CSS variables here too if needed */
    .image-text-logo_text > p {
      font-size: var(--block-text-font-size);
    }
  }

  @media (max-width: 1250px) {
    .flex-item-wrapper {
      gap: 30px;
    }
    .flex-item-wrapper .flex-item {
      width: calc(50% - 15px);
    }
  }

  @media (max-width: 767px) {
    .for-desktop {
      display: none;
    }
    .for-mobile {
      display: block !important;
    }

    .flex-item-slider {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .flex-item-slider .owl-item .flex-item {
      flex-direction: column;
    }
    .flex-item-slider .owl-item .flex-item .item-img {
      width: 100%;
    }
    .flex-item-slider .owl-item .flex-item .item-info {
      display: flex;
      flex-direction: column;
      gap: 30px;
      justify-content: flex-start;
      gap: 20px;
    }
    .flex-item-slider .owl-item .flex-item .dq-icon {
      width: 22px;
    }
    .image-text-logo_logo img {
      height: 100px;
    }
  }
/* END_SECTION:image-text-logo */

/* START_SECTION:monogramme-editorial (INDEX:37) */
.monogramme-editorial {
    background: #000;
    color: #fff;
  }
  .monogramme-editorial__copy {
    padding: 34px 20px;
  }
  .monogramme-editorial__heading {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 16px;
  }
  .monogramme-editorial__kicker {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: #ccc;
  }
  .monogramme-editorial__body {
    font-size: 12.5px;
    line-height: 1.75;
    color: #e8e8e8;
  }
  .monogramme-editorial__body p {
    margin-bottom: 12px;
  }
  .monogramme-editorial__macro-img {
    width: 100%;
    display: block;
  }
  @media (min-width: 990px) {
    .monogramme-editorial__copy {
      padding: 64px 40px;
      max-width: 720px;
      margin: 0 auto;
    }
    .monogramme-editorial__heading {
      font-size: 32px;
    }
    .monogramme-editorial__body {
      font-size: 15px;
    }

    /* Desktop: 50/50 with the image on the left.
       The DOM order stays copy-first so mobile keeps the design's stacked order
       (copy, then the macro image); `order` flips it visually on desktop only. */
    .monogramme-editorial--split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .monogramme-editorial--split .monogramme-editorial__macro {
      order: 1;
      height: 100%;
    }
    .monogramme-editorial--split .monogramme-editorial__copy {
      order: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 560px;
    }
    /* Fill the column height the copy establishes, cropping rather than letterboxing. */
    .monogramme-editorial--split .monogramme-editorial__macro-img {
      height: 100%;
      object-fit: cover;
    }
  }
/* END_SECTION:monogramme-editorial */

/* START_SECTION:product-recommendations (INDEX:46) */
.prec {
    margin-top: var(--prec-mt, 30px);
    margin-bottom: var(--prec-mb, 30px);
    /* Side padding sits on the head and rail (design .relt / .relg) so the rail
       can bleed past the right edge while the heading stays inset. */
    padding: 0 10px;
  }
  /* The placeholder renders before the recommendations are fetched (and stays
     empty when there are none) — collapse it so it costs no space or border. */
  .prec:empty {
    display: none;
  }
  /* Design .relt — deliberately smaller and lighter than the Community
     heading (.wby-title), which the mockup sets at 12px/700/.16em. */
  .prec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .prec .prec-head {
    padding: 20px 16px 4px;
  }
  .prec .prec-rail {
    padding: 12px 16px 20px;
  }
  .prec-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  /* Horizontal rail (design .relg / .relc) */
  .prec-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .prec-rail::-webkit-scrollbar {
    display: none;
  }
  .prec-card {
    flex: 0 0 44%;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
  }
  .prec-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 0.86;
    object-fit: contain;
    background: #f6f6f6;
  }
  .prec-card__name {
    margin-top: 8px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .prec-card__price {
    margin-top: 3px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #444;
  }
  .prec-card__price s {
    margin-left: 4px;
    opacity: 0.6;
  }
  @media (min-width: 1024px) {
    .prec-card {
      flex-basis: 23%;
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product-review-quote (INDEX:47) */
/* The shared SVG sprite holds only referenced symbols and must never take up
     space. The theme has a global svg { width: 100% } rule, and CSS beats the
     width="0"/height="0" attributes — so without this the absolutely-positioned
     sprite stretched over the page and swallowed clicks (e.g. "More reviews").
     !important overrides the theme rule; pointer-events belt-and-suspenders. */
  .rq-sprite {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Values come from the design mockup (.rev). */
  .review-quote {
    /* Faded fill for empty/half stars, and the ink used by the Verified badge's
       check (white circle, dark tick) — both consumed by the shared SVG parts. */
    --rqm-star-empty: rgba(255, 255, 255, 0.28);
    --rqm-ink: #111111;
    padding: 26px 18px;
    background: var(--rq-bg, #000000);
    color: var(--rq-text, #ffffff);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  /* The design is a mobile mock and the card runs full-bleed there. On desktop
     an unconstrained black band would dwarf the quote, so the content is capped
     and centred while the background still spans the screen. */
  .review-quote__inner {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Average summary (live mode) — heading, big score, stars, review count. */
  .review-quote__summary {
    margin-bottom: 20px;
  }
  .review-quote__summary[hidden] {
    display: none;
  }
  .review-quote__heading {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .review-quote__score {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .review-quote__avg {
    font-size: 52px;
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.01em;
  }
  .review-quote__score-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .review-quote__based {
    font-style: italic;
    font-size: 13px;
    color: var(--rq-meta, #bbbbbb);
  }

  /* Scroll-snap rather than a transform track, matching the other carousels in
     this theme: swipe comes free on touch, and it degrades to a plain scroller
     if the JS never runs. */
  .review-quote__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .review-quote__track::-webkit-scrollbar {
    display: none;
  }
  .review-quote__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .review-quote__stars {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    letter-spacing: 8px;
    line-height: 1;
  }
  .review-quote__text {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--rq-text, #eeeeee);
  }
  .review-quote__who {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 11px;
    color: var(--rq-meta, #bbbbbb);
  }
  .review-quote__who a {
    color: var(--rq-accent, #ffffff);
    text-decoration: underline;
  }
  /* Byline: author, the check badge, then "Verified Buyer" on one line. */
  .review-quote__byline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  /* .review-quote__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  } */
  /* No dots rendered means one quote, so the row should take no space at all. */
  /* .review-quote__dots:empty {
    display: none;
  } */
  .review-quote__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rq-meta, #bbbbbb);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .review-quote__dot.is-active {
    background: var(--rq-accent, #ffffff);
    opacity: 1;
  }

  @media (min-width: 1024px) {
    .review-quote {
      padding: 40px 24px;
    }
    .review-quote__text {
      font-size: 14px;
    }
  }

  /* Reviews modal — NDG Popups V1, Popup 01 (design/NDG_POPUPS_V1.html).
     A dark (#111) customer-reviews sheet that replaces the Judge.me widget's
     look. Lives on <body>, so it is deliberately not scoped to .review-quote.
     Radius 0 throughout; the only circle is the Verified badge. */
  .rq-modal {
    --rqm-ink: #111111;
    --rqm-line: rgba(255, 255, 255, 0.22);
    --rqm-muted: rgba(255, 255, 255, 0.65);
    --rqm-body: rgba(255, 255, 255, 0.78);
    --rqm-star-empty: rgba(255, 255, 255, 0.28);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Design .pop-reviews inset (14px sides / 22px top-bottom): a centred card,
       not a fullscreen sheet. */
    padding: 22px 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .rq-modal[hidden] {
    display: none;
  }
  /* The SVG sprite is a flex child; a sizeless inline <svg> is given a ~300px
     default box, which would push the centred panel off to one side. Take it out
     of flow so it never affects layout. */
  .rq-modal .rq-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .rq-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(17, 17, 17, 0.45);
  }
  /* Centred card: full width of the inset area on mobile, capped at 560px and
     80vh on desktop — the design's Popup 01. */
  .rq-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    max-height: 100%;
    background: var(--rqm-ink);
    color: #ffffff;
  }
  @media (min-width: 1024px) {
    .rq-modal__panel {
      max-height: 80vh;
    }
  }

  /* Header */
  .rq-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rqm-line);
  }
  .rq-modal__title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .rq-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  /* Summary */
  .rq-modal__summary {
    flex: none;
    padding: 24px 20px 22px;
    border-bottom: 1px solid var(--rqm-line);
  }
  .rq-modal__score {
    display: flex;
    align-items: flex-end;
    gap: 14px;
  }
  .rq-modal__score strong {
    font-size: 42px;
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.01em;
  }
  .rq-modal__score .rq-stars {
    padding-bottom: 2px;
  }
  .rq-modal__based {
    margin-top: 11px;
    font-style: italic;
    font-size: 12px;
    color: var(--rqm-muted);
  }

  /* Scrollable review list */
  .rq-modal__list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
  }
  .rq-review {
    padding: 22px 0;
    border-bottom: 1px solid var(--rqm-line);
  }
  .rq-review:last-child {
    border-bottom: 0;
    padding-bottom: 28px;
  }
  .rq-review__title {
    margin: 11px 0 7px;
    font-size: 13px;
    font-weight: 700;
  }
  .rq-review__body {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--rqm-body);
  }
  .rq-review__title + .rq-review__body {
    margin-top: 0;
  }
  /* Customer photos — square thumbnails, radius 0 (design: only the Verified
     badge is round). Each opens the full image in a new tab. */
  .rq-review__pics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .rq-review__pic {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }
  .rq-review__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rq-review__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    font-size: 12px;
  }
  .rq-review__date {
    margin-left: auto;
    font-size: 11px;
    color: var(--rqm-muted);
  }
  /* The one circular element (DA iconography), per the spec. */
  .rq-vbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--rqm-ink);
  }

  /* Shared SVG star — same path in summary and rows so the shape never drifts. */
  .rq-stars {
    display: inline-flex;
    gap: 3px;
  }
  .rq-star {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .rq-star--sm {
    width: 13px;
    height: 13px;
  }

  /* Pagination — pinned below the scrolling list. Mirrors the widget's page
     links but styled to the dark sheet; radius 0. */
  .rq-modal__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    flex: none;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--rqm-line);
  }
  .rq-modal__foot[hidden] {
    display: none;
  }
  .rq-page {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--rqm-line);
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .rq-page.is-current {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--rqm-ink);
  }

  /* Photo lightbox — opens above the modal when a review thumbnail is clicked.
     Full image, prev/next through that review's photos, a counter and a close. */
  .rq-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .rq-lightbox[hidden] {
    display: none;
  }
  .rq-lightbox__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(17, 17, 17, 0.9);
  }
  .rq-lightbox__img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .rq-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    cursor: pointer;
  }
  .rq-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
  }
  .rq-lightbox__nav[hidden] {
    display: none;
  }
  .rq-lightbox__nav--prev {
    left: 8px;
  }
  .rq-lightbox__nav--next {
    right: 8px;
  }
  .rq-lightbox__counter {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .rq-lightbox__counter[hidden] {
    display: none;
  }
/* END_SECTION:product-review-quote */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:carousel-nav (INDEX:66) */
/* Positioning context for the overlay arrows — wrap the rail in this. */
  .rail-wrap {
    position: relative;
    padding: 0 2px;
  }
  /* Hidden on touch/mobile where the rail is swiped; shown from the theme's lg breakpoint. */
  .rail-nav {
    display: none;
  }
  @media (min-width: 1024px) {
    .rail-nav {
      display: block;
    }
  }
  /* Set by custom.js when the rail has no overflow — nothing to scroll to. */
  .rail-nav.rail-nav--hidden {
    display: none;
  }
  .rail-nav__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    /* Solid fill so the control stays legible over product imagery. */
    background: #fff;
    color: #111;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease;
  }
  .rail-nav__btn[data-rail-prev] {
    left: 0;
  }
  .rail-nav__btn[data-rail-next] {
    right: 0;
  }
  .rail-nav__btn:disabled {
    opacity: 0.25;
    cursor: default;
  }
/* END_SNIPPET:carousel-nav */

/* START_SNIPPET:newsletter-ndg-list (INDEX:137) */
/* ---- Mobile: faithful to the design's .nl block ---- */
  .ndgnl {
    position: relative;
    overflow: hidden;
    padding: 26px 20px;
    text-align: left;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .ndgnl__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .ndgnl__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
  }
  .ndgnl__inner {
    position: relative;
    z-index: 1;
  }
  /* design: .nl .t */
  .ndgnl__kicker {
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ndgnl-accent, #111);
  }
  .ndgnl__heading {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
  }
  .ndgnl__heading em,
  .ndgnl__heading i {
    font-style: italic;
    color: var(--ndgnl-accent, #a08a6a);
  }
  /* design: .nl p */
  .ndgnl__body {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ndgnl-body, #444);
  }
  .ndgnl__body p {
    margin: 0;
  }
  /* design: .nl .field — underlined row, chevron on the right */
  .ndgnl__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--ndgnl-field, #111);
  }
  .ndgnl__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .ndgnl__input:focus {
    outline: none;
  }
  .ndgnl__input::placeholder {
    opacity: 0.55;
  }
  .ndgnl__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ndgnl-button, inherit);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .ndgnl__submit-text {
    display: none;
  }
  .ndgnl__submit::after {
    content: "→";
    font-size: 17px;
    line-height: 1;
  }
  .ndgnl__note {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ndgnl-body, #666);
    opacity: 0.85;
  }
  .ndgnl__note a {
    color: inherit;
    text-decoration: underline;
  }
  .ndgnl__success,
  .ndgnl__errors {
    font-size: 12px;
    line-height: 1.6;
  }

  /* ---- Desktop: two columns, copy left / form right ---- */
  @media (min-width: 1024px) {
    .ndgnl {
      padding: 56px 40px;
    }
    /* Deliberately uncapped: the newsletter spans the full screen width, unlike
       the footer's menu grid and copyright row, which sit in a centred 1280px
       container. */
    .ndgnl__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .ndgnl__kicker {
      margin-bottom: 14px;
      font-size: 11px;
      letter-spacing: 0.2em;
    }
    .ndgnl__heading {
      margin-bottom: 14px;
      font-size: 30px;
    }
    .ndgnl__body {
      margin-bottom: 0;
      font-size: 13.5px;
      line-height: 1.7;
    }
    .ndgnl__input {
      font-size: 13px;
      letter-spacing: normal;
      text-transform: none;
    }
    /* Worded button replaces the chevron once there's room. */
    .ndgnl__submit-text {
      display: inline;
      white-space: nowrap;
    }
    .ndgnl__submit::after {
      content: none;
    }
  }
/* END_SNIPPET:newsletter-ndg-list */

/* START_SNIPPET:product-block-accordion (INDEX:144) */
.product-accordion__row {
    border-bottom: 1px solid #ececec;
  }
  .product-accordion__row--first {
    border-top: 1px solid #ececec;
  }
  .product-accordion .product-accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .product-accordion__title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .product-accordion__icon {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
  .product-accordion__chevron {
    flex-shrink: 0;
    margin-left: 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #666;
    transition: transform 0.2s ease;
  }
  .product-accordion__head.is-open .product-accordion__chevron {
    transform: rotate(90deg);
  }
  .product-accordion .product-accordion__body {
    /* Header row and border span the full column; only the body text is capped
       so it lines up with the buy buttons. */
    max-width: 575px;
    padding: 0 0 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.65;
    color: #333;
  }
  .product-accordion .product-accordion__body p {
    margin-bottom: 12px;
  }
  .product-accordion .product-accordion__body p:last-child {
    margin-bottom: 0;
  }
  /* Mobile mirrors the design, where .acc sits outside the padded buy block:
     the row borders run edge to edge while the label and copy stay inset 16px,
     matching .arow / .abody. The section's 16px side padding is cancelled with a
     negative margin so the borders can reach the column edges, then put back as
     padding on the head and body so the text still lines up with the price and
     buttons above.

     Desktop keeps the borders at column width — 64px of padding there makes an
     edge-to-edge rule read as a page divider rather than part of the product
     column — and only insets the copy. */
  /* Scoped to the padded container, not .product-accordion on its own: the
     negative margin only cancels padding that is actually there. In
     main-product-horizontal-gallery the two classes sit on different divs, so
     the inner column has no side padding — an unscoped -16px would push the
     accordion 16px past each edge and give the page a horizontal scrollbar. */
  .product-content-container.section-x-padding .product-accordion {
    margin-left: -16px;
    margin-right: -16px;
  }
  .product-accordion .product-accordion__head,
  .product-accordion .product-accordion__body {
    padding-left: 16px;
    padding-right: 16px;
  }
  @media (min-width: 1024px) {
    .product-content-container.section-x-padding .product-accordion {
      margin-left: 0;
      margin-right: 0;
    }
  }
  /* product-description source: hide media that slips through the cleaning */
  .product-accordion__desc img,
  .product-accordion__desc figure,
  .product-accordion__desc iframe {
    display: none;
  }
  /* Backstop: never show the embedded size-guide widget inside an accordion,
     whatever the content source (custom.css sets .guides-btns-wrapper to flex). */
  .product-accordion__body .guides-btns-wrapper,
  .product-accordion__body .col-item,
  .product-accordion__body #sizeOpen,
  .product-accordion__body #sizeOpen2,
  .product-accordion__body #sizeOpen3 {
    display: none !important;
  }
/* END_SNIPPET:product-block-accordion */

/* START_SNIPPET:product-pdp-styles (INDEX:164) */
/* PDP design system — title & price (design/product-page-mobile-layout.html) */
  /* Design font stack (design body: 'Helvetica Neue', Helvetica, Arial, sans-serif).
     Set on the container so everything inside inherits it, including the accordion.
     Title/price/buttons repeat it because they carry the theme's own font utilities. */
  .product-content-container {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  /* product-form wraps every @app block in <div class="mt-8"> unconditionally,
     so an app that outputs nothing (e.g. the restock "Notify me when available"
     button while the product is in stock) still reserves 2rem of margin.
     Collapse those. Scoped to the product column so the global .mt-8 utility is
     untouched everywhere else. */
  .product-content-container .mt-8:empty {
    display: none;
  }
  /* Same wrapper, same problem for the review badge: the design puts the stars
     8px under the price (.stars), not 2rem. Scoped with :has() so only the badge
     is affected — the restock and delivery app blocks still want their own
     spacing. Browsers without :has() simply keep the old margin. */
  .product-content-container .mt-8:has(.jdgm-preview-badge) {
    margin-top: 8px;
  }
  /* The theme's .section-x-padding is only 8px / 16px, which leaves the copy
     almost flush with the column edge. Inset it so the content sits away from
     both sides. Compound selector so it outranks .section-x-padding, which has
     the same specificity on its own. */
  .product-content-container.section-x-padding {
    padding-left: 16px;
    padding-right: 16px;
  }
  @media (min-width: 1024px) {
    .product-content-container.section-x-padding {
      padding-left: 64px;
      padding-right: 64px;
    }
  }
  .product-content-container .product-title-block {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .product-content-container .product-price-block {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 6px;
    font-size: 14px;
  }
  /* Rating badge (product-block-rating-badge): compact stars + review count,
     opens the reviews modal on click. Stars are the shared .rq-star SVGs; here
     they inherit the dark product-column text, with a light grey empty state. */
  .product-rating-badge {
    --rqm-star-empty: rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
  }
  .product-rating-badge[hidden] {
    display: none;
  }
  .product-rating-badge__count {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* Buy buttons — ADD TO CART (black) + BUY NOW (outline), side by side (design .ctas/.atc/.bn) */
  .product-ctas {
    display: flex;
    gap: 10px;
    align-items: stretch;
    /* Design .ctas — the mt-8 utility that used to sit here was 2rem. */
    margin: 0;
    /* Full width of the product column so the buy buttons line up with the
       restock app button ("Notify me when available"), which is 100%. */
    max-width: 100%;
  }
  .product-ctas .product-cta {
    flex: 1;
    width: auto;
    padding: 15px 8px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .product-ctas .product-cta--atc {
    flex: 1.15;
  }
  /* Hover dims the button rather than swapping its colours. The theme's
     hover: colour utilities are filtered out in product-form.liquid, so this is
     the only hover treatment left. */
  .product-ctas .product-cta:hover,
  .product-ctas .product-cta:focus-visible {
    opacity: 0.8;
  }
  /* Disabled already sits at opacity 0.5 via the theme's utility; without this
     a hover would brighten a sold-out button back to 0.8. */
  .product-ctas .product-cta[disabled]:hover {
    opacity: 0.5;
  }
  /* Desktop: one button per row (full width, stacked) */
  @media (min-width: 1024px) {
    .product-ctas {
      flex-direction: column;
    }
    .product-ctas .product-cta,
    .product-ctas .product-cta--atc {
      flex: 1 1 auto;
      width: 100%;
    }
  }
  /* Design .bnpl — the buttons already contribute 10px below, so the top is
     only 2px. */
  .product-bnpl {
    padding: 2px 0 0;
    font-size: 11.5px;
    color: #444;
  }
  /* Colour swatches + size line share one wrapper, so the wrapper owns the
     outer spacing (set inline from the block's margin settings) and the
     children only space themselves from each other. */
  .product-options > * + * {
    margin-top: 10px;
  }

  /* Colour swatches (design .sw / .swc) */
  .product-colorways {
    margin: 12px 0 2px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .product-colorways__label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #444;
  }
  .product-colorways__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .product-colorways__swatch {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
  }
  .product-colorways__swatch img,
  .product-colorways__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Outline sits outside the circle, so it reads as a ring around the active
     colour without changing the swatch size. */
  .product-colorways__swatch.is-current {
    outline: 1px solid currentColor;
    outline-offset: 3px;
  }
  .product-colorways__fill.is-empty {
    background: rgba(128, 128, 128, 0.25);
  }

  /* "Also available" size line (design .sizes) */
  .product-sizes {
    margin: 10px 0 2px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: #444;
  }
  .product-sizes__label {
    margin-right: 4px;
  }
  .product-sizes__option {
    color: #111;
  }
  .product-sizes__text {
    text-decoration: underline;
  }
  /* Separator only between rendered options, so skipping the current product
     never leaves a dangling dot. */
  .product-sizes__option + .product-sizes__option::before {
    content: "\00B7";
    display: inline-block;
    margin: 0 6px;
    color: #444;
    text-decoration: none;
  }
  .product-sizes__option.is-unavailable {
    color: #999;
  }
  .product-sizes__option.is-unavailable .product-sizes__text {
    text-decoration: line-through;
  }

  /* Material line (design .mat) */
  .product-material {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.03em;
    color: #444;
  }
  .product-material p {
    margin: 0;
  }

  /* Reassurance line (design .trust) */
  .product-reassurance {
    padding: 10px 0 12px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    line-height: 1.6;
    text-transform: uppercase;
    color: #555;
  }
  /* Separator sits between adjacent items only, so a blanked-out slot never
     leaves a dangling dot. */
  .product-reassurance__item + .product-reassurance__item::before {
    content: "\00B7";
    margin: 0 8px;
    color: #bbb;
  }
  .product-reassurance a {
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
  }
  /* Contact note (design .contact) */
  .product-contact-note {
    padding: 16px 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    line-height: 1.6;
    color: #444;
  }
  .product-contact-note a,
  .product-contact-note__label {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
  }
/* END_SNIPPET:product-pdp-styles */

/* START_SNIPPET:product-sticky-atc (INDEX:165) */
/* Values from the design's .stickybar. Its max-width/left/translateX are
     dropped: those centre the bar inside the mockup's phone frame, and on a real
     phone the bar is already the width of the screen. */
  .sticky-atc {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* env() keeps the bar clear of the iOS home indicator; the fallback in the
       first value applies everywhere else. */
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
    background: #000;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Resting off-screen rather than display:none, so revealing it slides. */
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .sticky-atc.is-visible {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .sticky-atc {
      transition: none;
    }
  }
  @media (min-width: 1024px) {
    .sticky-atc {
      display: none;
    }
  }
  .sticky-atc__info {
    min-width: 0;
  }
  /* Design .sb-l b */
  .sticky-atc__title {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Design .sb-l */
  .sticky-atc__price {
    margin: 0;
    color: #ddd;
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }
  /* Design .sb-atc */
  .sticky-atc__button {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    background: #fff;
    color: #000;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
  }
  .sticky-atc__button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* END_SNIPPET:product-sticky-atc */