/** Shopify CDN: Minification failed

Line 1668:70 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-breadcrumb (INDEX:0) */
.about-breadcrumb {
    /* When the header overlays this section transparently, push content below it
       while the cream background still extends up behind the header. Reuses the
       same body-level vars the theme's native .spacing-style offset uses. */
    padding-top: calc(var(--header-height, 64px) * var(--transparent-header-offset-boolean, 0));
  }

  .about-breadcrumb__bar {
    padding: 14px 44px 4px;
    font-family: var(--ga-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ga-ink-55);
  }

  .about-breadcrumb__link:hover { color: var(--ga-oxblood); }
  .about-breadcrumb__sep { opacity: 0.4; margin: 0 8px; }
  .about-breadcrumb__current { color: var(--ga-ink); }

  .about-breadcrumb__rule-wrap {
    max-width: 1240px;
    margin: 6px auto 0;
    padding: 0 44px;
  }

  .about-breadcrumb__rule { height: 1px; background: var(--ga-oxblood-22); }

  @media screen and (max-width: 749px) {
    .about-breadcrumb__bar { padding: 14px 20px 4px; }
    .about-breadcrumb__rule-wrap { padding: 0 20px; }
  }
/* END_SECTION:about-breadcrumb */

/* START_SECTION:about-cta (INDEX:1) */
.about-cta { padding: 0 44px 110px; text-align: center; }

  .about-cta__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 30px);
    margin: 0 0 32px;
  }

  .about-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .about-cta__primary,
  .about-cta__secondary { font-size: 11.5px; }

  @media screen and (max-width: 749px) {
    .about-cta { padding: 0 20px 88px; }
  }
/* END_SECTION:about-cta */

/* START_SECTION:about-everyday (INDEX:2) */
.about-everyday { padding-top: 44px; padding-bottom: 24px; }

  .about-everyday__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 44px;
  }

  .about-everyday__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 40px;
    max-width: 600px;
  }

  .about-everyday__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
  }

  .about-everyday__dominant { width: 100%; height: 520px; }

  .about-everyday__stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
  }

  .about-everyday__support { width: 100%; height: 100%; min-height: 240px; }

  @media screen and (max-width: 989px) {
    .about-everyday__inner { padding: 0 20px; }
    .about-everyday__grid { grid-template-columns: 1fr; }
    .about-everyday__dominant { height: 400px; }
    .about-everyday__stack { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .about-everyday__support { min-height: 220px; }
  }

  @media screen and (max-width: 560px) {
    .about-everyday__stack { grid-template-columns: 1fr; }
  }
/* END_SECTION:about-everyday */

/* START_SECTION:about-gulmohar-idea (INDEX:3) */
.about-gulmohar-idea.gulmohar-about {
    padding: 120px 44px;
    text-align: center;
    background: var(--ga-oxblood);
    color: var(--ga-card-cream);
  }

  .about-gulmohar-idea .ga-eyebrow--blush { margin-bottom: 26px; }

  .about-gulmohar-idea__heading {
    font-family: var(--ga-serif);
    font-weight: 300;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0 auto 28px;
    max-width: 760px;
  }

  .about-gulmohar-idea__heading em { font-style: italic; color: var(--ga-blush-2); }

  .about-gulmohar-idea__body {
    font-family: var(--ga-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ga-cream-on-oxblood-78);
    margin: 0 auto 22px;
    max-width: 520px;
  }

  .about-gulmohar-idea__tagline {
    font-family: var(--ga-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ga-cream-on-oxblood-55);
  }

  @media screen and (max-width: 749px) {
    .about-gulmohar-idea { padding: 88px 24px; }
  }
/* END_SECTION:about-gulmohar-idea */

/* START_SECTION:about-hero (INDEX:4) */
.about-hero { padding-top: 10px; }

  .about-hero__inner {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
    gap: 52px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 44px;
  }

  .about-hero__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
  }

  .about-hero__heading em { font-style: italic; color: var(--ga-oxblood); }

  .about-hero__body {
    font-family: var(--ga-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ga-ink-70);
    margin: 0;
    max-width: 380px;
  }

  .about-hero__media { width: 100%; height: 560px; }

  @media screen and (max-width: 989px) {
    .about-hero__inner { grid-template-columns: 1fr; padding: 0 20px; }
    .about-hero__body { max-width: 100%; }
    .about-hero__media { height: 420px; }
  }
/* END_SECTION:about-hero */

/* START_SECTION:about-idea (INDEX:5) */
.about-idea.gulmohar-about {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.4fr);
    /* Was min-height: 460px with margin-top: 80px. Margin sits outside this
       element's own painted background, and about-hero has no background of
       its own either (it relies on the shared .gulmohar-about cream default,
       which margin still excludes), so that 80px showed the plain white
       <body> behind both sections instead of the intended cream.
       padding-top keeps the identical 80px of visual separation from the
       hero section above, but as part of this section's own cream box, so
       it's actually painted. Since this element is border-box, min-height
       is raised by the same 80px so the copy/media content area keeps its
       original 460px — the padding adds new painted space rather than
       eating into existing content height. */
    min-height: 540px;
    background: var(--ga-card-cream);
    padding-top: 80px;
  }

  .about-idea__copy {
    padding: 70px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .about-idea__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
  }

  .about-idea__heading em { font-style: italic; color: var(--ga-oxblood); }

  .about-idea__body {
    font-family: var(--ga-serif);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ga-ink-72);
    margin: 0;
    max-width: 360px;
  }

  .about-idea__media { width: 100%; height: 100%; min-height: 320px; min-width: 0; }

  @media screen and (max-width: 989px) {
    /* Selector must match the base rule's specificity (.about-idea.gulmohar-about,
       2 classes) — a lower-specificity ".about-idea" override here is beaten
       by the base desktop rule regardless of media query or source order,
       which is why this override was never actually taking effect (the
       original "1fr" value had the same bug, pre-dating this fix). Once
       specificity matches, grid-template-columns: minmax(0, 1fr) removes the
       implicit auto-minimum that was pushing this section past the viewport
       on mobile (same fix already applied to collection-grid.liquid's mobile
       grid this session for the identical symptom). */
    .about-idea.gulmohar-about { grid-template-columns: minmax(0, 1fr); }
    .about-idea__copy { padding: 56px 24px; text-align: center; align-items: center; min-width: 0; }
    .about-idea__body { max-width: 100%; }
    .about-idea__media { height: 360px; }
  }
/* END_SECTION:about-idea */

/* START_SECTION:about-material (INDEX:6) */
.about-material { padding-bottom: 100px; }

  .about-material__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 44px;
    display: grid;
    grid-template-columns: minmax(300px, 1.3fr) minmax(260px, 1fr);
    gap: 56px;
    align-items: center;
  }

  .about-material__media { width: 100%; height: 520px; }

  .about-material__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
  }

  .about-material__heading em { font-style: italic; color: var(--ga-oxblood); }

  .about-material__body {
    font-family: var(--ga-serif);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ga-ink-72);
    margin: 0 0 16px;
    max-width: 380px;
  }

  .about-material__body--last { margin: 0; }

  @media screen and (max-width: 989px) {
    .about-material { padding-bottom: 72px; }
    .about-material__inner { grid-template-columns: 1fr; padding: 0 20px; }
    .about-material__media { height: 380px; }
    .about-material__body { max-width: 100%; }
  }
/* END_SECTION:about-material */

/* START_SECTION:about-philosophy (INDEX:7) */
.about-philosophy { padding: 100px 0; }

  .about-philosophy__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 44px;
  }

  .about-philosophy__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 38px);
    line-height: 1.1;
    text-align: center;
    margin: 0 0 64px;
  }

  .about-philosophy__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--ga-ink-12);
  }

  .about-philosophy__cell { background: var(--ga-cream); padding: 44px 32px; }

  .about-philosophy__numeral {
    font-family: var(--ga-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ga-oxblood);
    margin-bottom: 14px;
  }

  .about-philosophy__title {
    font-family: var(--ga-serif);
    font-weight: 500;
    font-size: 23px;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
  }

  .about-philosophy__desc {
    font-family: var(--ga-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ga-ink-68);
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .about-philosophy { padding: 72px 0; }
    .about-philosophy__inner { padding: 0 20px; }
  }
/* END_SECTION:about-philosophy */

/* START_SECTION:about-statement (INDEX:8) */
.about-statement { padding: 140px 44px; text-align: center; }

  .about-statement__heading {
    font-family: var(--ga-serif);
    font-weight: 400;
    font-size: clamp(34px, 6.4vw, 68px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0 auto;
    max-width: 920px;
  }

  .about-statement__heading em { font-style: italic; color: var(--ga-oxblood); }

  @media screen and (max-width: 749px) {
    .about-statement { padding: 88px 24px; }
  }
/* END_SECTION:about-statement */

/* START_SECTION:collection-category-tiles (INDEX:9) */
.gc-tiles { padding: clamp(56px, 8vw, 90px) 0; }

  .gc-tiles__head { text-align: center; margin-bottom: 44px; }

  .gc-tiles__heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .gc-tiles__heading em { font-style: italic; color: var(--gulmohar-terracotta); }

  .gc-tiles__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }

  .gc-tiles__tile {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: block;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .gc-tiles__tile:hover { transform: translateY(-3px); }

  .gc-tiles__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 55%, rgba(42, 26, 18, 0.4) 100%);
  }

  .gc-tiles__label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
  }

  .gc-tiles__name { color: var(--gulmohar-cream); font-family: var(--gulmohar-serif); font-size: 19px; margin-bottom: 4px; }

  .gc-tiles__count {
    color: rgba(246, 236, 213, 0.75);
    font-family: var(--gulmohar-mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .gc-tiles__count:not(:empty)::after { content: ' pieces'; }

  @media screen and (max-width: 989px) {
    .gc-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  }
/* END_SECTION:collection-category-tiles */

/* START_SECTION:collection-grid (INDEX:10) */
/* ——— Controls bar ——— */
  .gc-grid { padding: 4px 0 clamp(48px, 7vw, 80px); }

  .gc-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 14px;
    border-top: 1px solid rgba(42, 26, 18, 0.1);
    border-bottom: 1px solid rgba(42, 26, 18, 0.1);
    gap: 16px;
  }

  .gc-controls__count {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    white-space: nowrap;
  }

  .gc-controls__right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .gc-controls__filter-btn--mobile {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut);
  }

  .gc-controls__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 4px;
    background: var(--gulmohar-terracotta);
    color: var(--gulmohar-cream);
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1;
  }

  /* ——— View switcher ——— */
  .gc-view-switcher {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .gc-view-btn {
    background: none;
    border: 1px solid transparent;
    padding: 5px;
    cursor: pointer;
    color: var(--gulmohar-walnut-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .gc-view-btn:hover { color: var(--gulmohar-walnut); }

  .gc-view-btn[aria-pressed="true"] {
    color: var(--gulmohar-walnut);
    border-color: rgba(42, 26, 18, 0.2);
  }

  /* ——— Sort ——— */
  .gc-sort {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .gc-sort__label {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    white-space: nowrap;
  }

  .gc-sort__select {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(42, 26, 18, 0.2);
    padding: 2px 16px 2px 0;
    font-family: var(--gulmohar-sans);
    font-size: 12px;
    color: var(--gulmohar-walnut);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%232A1A12' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
  }

  .gc-sort__select:focus-visible {
    outline: 2px solid var(--gulmohar-terracotta);
    outline-offset: 2px;
  }

  /* ——— Active filter chips ——— */
  .gc-chips { padding-top: 14px; }

  .gc-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .gc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(42, 26, 18, 0.18);
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    color: var(--gulmohar-walnut);
    transition: border-color 0.15s ease;
    cursor: pointer;
  }

  .gc-chip:hover { border-color: var(--gulmohar-terracotta); }

  .gc-chip__x {
    font-size: 13px;
    line-height: 1;
    opacity: 0.5;
  }

  .gc-chips__clear {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    padding: 5px 0;
    border-bottom: 1px solid transparent;
  }

  .gc-chips__clear:hover { color: var(--gulmohar-terracotta); border-bottom-color: currentColor; }

  /* ——— Main layout ——— */
  .gc-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    padding-top: 28px;
  }

  .gc-layout--no-sidebar { grid-template-columns: 1fr; }

  /* ——— Desktop sidebar ——— */
  .gc-sidebar {
    min-width: 0;
  }

  .gc-sidebar__inner {
    position: sticky;
    top: calc(var(--header-height, 80px) + 20px);
    max-height: calc(100vh - var(--header-height, 80px) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(42, 26, 18, 0.15) transparent;
    padding-right: 8px;
  }

  .gc-sidebar__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(42, 26, 18, 0.1);
    margin-bottom: 4px;
  }

  .gc-sidebar__title {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut);
  }

  .gc-sidebar__clear {
    font-family: var(--gulmohar-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
  }

  .gc-sidebar__clear:hover { color: var(--gulmohar-terracotta); }

  /* ——— Filter groups ——— */
  .gc-filter-group {
    border-bottom: 1px solid rgba(42, 26, 18, 0.08);
  }

  .gc-filter-group__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--gulmohar-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut);
  }

  .gc-filter-group__toggle::-webkit-details-marker { display: none; }

  .gc-filter-group__caret {
    transition: transform 0.2s ease;
    flex: none;
    opacity: 0.4;
  }

  .gc-filter-group[open] > .gc-filter-group__toggle .gc-filter-group__caret {
    transform: rotate(180deg);
  }

  .gc-filter-group__body {
    padding: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ——— Filter options (checkboxes) ——— */
  .gc-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--gulmohar-serif);
    font-size: 14px;
    color: var(--gulmohar-walnut);
  }

  .gc-filter-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .gc-filter-option__box {
    width: 15px;
    height: 15px;
    flex: none;
    border: 1px solid rgba(42, 26, 18, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .gc-filter-option input:checked + .gc-filter-option__box {
    background: var(--gulmohar-terracotta);
    border-color: var(--gulmohar-terracotta);
  }

  .gc-filter-option input:checked + .gc-filter-option__box::after {
    content: '✓';
    color: var(--gulmohar-cream);
    font-size: 9px;
    line-height: 1;
  }

  .gc-filter-option input:focus-visible + .gc-filter-option__box {
    outline: 2px solid var(--gulmohar-terracotta);
    outline-offset: 2px;
  }

  .gc-filter-option__count {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    color: var(--gulmohar-walnut-faint);
    margin-left: auto;
  }

  /* ——— Price range filter ——— */
  .gc-price-filter__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }

  .gc-price-filter__field {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(42, 26, 18, 0.2);
    padding: 6px 8px;
    flex: 1;
    min-width: 0;
  }

  .gc-price-filter__currency {
    font-family: var(--gulmohar-sans);
    font-size: 12px;
    color: var(--gulmohar-walnut-faint);
    flex: none;
  }

  .gc-price-filter__input {
    width: 100%;
    border: 0;
    background: none;
    font-family: var(--gulmohar-sans);
    font-size: 12px;
    color: var(--gulmohar-walnut);
    padding: 0;
    -moz-appearance: textfield;
  }

  .gc-price-filter__input::-webkit-inner-spin-button,
  .gc-price-filter__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .gc-price-filter__input:focus { outline: none; }

  .gc-price-filter__field:focus-within {
    border-color: var(--gulmohar-terracotta);
  }

  .gc-price-filter__sep {
    color: var(--gulmohar-walnut-faint);
    font-size: 14px;
    flex: none;
  }

  .gc-price-filter__slider {
    position: relative;
    height: 20px;
    margin-top: 4px;
  }

  .gc-price-filter__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(42, 26, 18, 0.12);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .gc-price-filter__range {
    position: absolute;
    top: 50%;
    height: 2px;
    background: var(--gulmohar-terracotta);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .gc-price-filter__handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
  }

  .gc-price-filter__handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gulmohar-cream);
    border: 2px solid var(--gulmohar-terracotta);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
  }

  .gc-price-filter__handle::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gulmohar-cream);
    border: 2px solid var(--gulmohar-terracotta);
    cursor: pointer;
    pointer-events: auto;
  }

  .gc-price-filter__handle:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--gulmohar-terracotta);
    outline-offset: 2px;
  }

  /* ——— Product grid ——— */
  .gc-products { min-width: 0; }

  .gc-grid__grid {
    display: grid;
    gap: 36px 26px;
  }

  .gc-grid__grid[data-view="4"] { grid-template-columns: repeat(4, 1fr); }
  .gc-grid__grid[data-view="2"] { grid-template-columns: repeat(2, 1fr); }
  .gc-grid__grid[data-view="list"] { grid-template-columns: 1fr; }

  /* ——— List view card layout ——— */
  .gc-grid__grid[data-view="list"] .gc-card {
    flex-direction: row;
    gap: 24px;
  }

  .gc-grid__grid[data-view="list"] .gc-card__media {
    width: 180px;
    flex: none;
  }

  .gc-grid__grid[data-view="list"] .gc-card__body {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
  }

  .gc-grid__grid[data-view="list"] .gc-card__name {
    font-size: 19px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    margin-bottom: 6px;
  }

  .gc-grid__grid[data-view="list"] .gc-card__price {
    font-size: 14px;
    margin-bottom: 14px;
  }

  .gc-grid__grid[data-view="list"] .gc-card__add {
    margin-top: 4px;
    max-width: 240px;
  }

  .gc-grid__grid[data-view="list"] .qv-trigger {
    margin-top: 8px;
    border-top: 0;
    padding-top: 0;
  }

  /* ——— Loading state ——— */
  .gc-grid.is-loading .gc-products { opacity: 0.4; pointer-events: none; transition: opacity 0.2s ease; }

  /* ——— Empty state ——— */
  .gc-empty {
    text-align: center;
    padding: 60px 20px;
  }

  .gc-empty__heading {
    font-family: var(--gulmohar-serif);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
    margin: 0 0 8px;
  }

  .gc-empty__body {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--gulmohar-walnut-soft);
    margin: 0 0 20px;
  }

  .gc-empty__clear {
    display: inline-block;
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }

  .gc-empty__clear:hover { color: var(--gulmohar-terracotta); }

  /* ——— Pagination ——— */
  .gc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 48px;
    flex-wrap: wrap;
  }

  .gc-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-family: var(--gulmohar-sans);
    font-size: 12px;
    color: var(--gulmohar-walnut);
    border: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  a.gc-pagination__link:hover { border-color: rgba(42, 26, 18, 0.2); }

  .gc-pagination__current {
    border-color: var(--gulmohar-terracotta);
    color: var(--gulmohar-terracotta);
    font-weight: 600;
  }

  .gc-pagination__gap { opacity: 0.4; border: 0; min-width: auto; }

  .gc-pagination__prev,
  .gc-pagination__next {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* ——— Product card base (carried from original) ——— */
  .gc-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .gc-card[hidden] { display: none; }
  .gc-card__media { display: block; position: relative; }

  /* Groups info + add-to-bag + quick-view as a single flex item so list
     view (which switches .gc-card to flex-direction: row) puts image and
     this whole stack side by side, instead of info/add/quick-view each
     becoming their own row column. */
  .gc-card__body { display: flex; flex-direction: column; min-width: 0; }

  .gc-card__caption {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    font-family: var(--gulmohar-mono); font-size: 7.5px;
    letter-spacing: 0.06em; color: rgba(42, 26, 18, 0.42);
    line-height: 1.4; max-width: 80%;
  }

  .gc-card__badge {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    background: var(--gulmohar-cream); padding: 4px 10px;
    font-family: var(--gulmohar-sans); font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gulmohar-terracotta);
  }

  .gc-card__material {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    background: rgba(246, 236, 213, 0.7);
    border: 1px solid rgba(42, 26, 18, 0.14);
    padding: 5px 10px;
    font-family: var(--gulmohar-mono); font-size: 9px;
    line-height: 1; letter-spacing: 0.1em;
    text-transform: uppercase; white-space: nowrap;
    color: var(--gulmohar-terracotta); pointer-events: none;
  }

  .gc-card__material--stacked { top: 34px; }

  @media screen and (max-width: 460px) {
    .gc-card__material { padding: 3px 6px; font-size: 6.5px; letter-spacing: 0.05em; }
  }

  .gc-card__info { display: flex; flex-direction: column; margin-top: 8px; }

  /* Slightly quieter than the shared .gulmohar-eyebrow default (0.22em) —
     that tracking reads as over-spaced at collection-card widths, especially
     on mobile. Scoped here rather than touching the shared class, which
     other cards/sections still use at its original spacing. */
  .gc-card__eyebrow { margin-bottom: 4px; letter-spacing: 0.17em; }

  /* ——— Product name: editorial serif, refined weight ———
     Tighter than a body-copy line-height so a two/three-line title reads as
     one considered block rather than loose stacked sentences. Line-clamped
     so a long title never balloons card height — the full title stays in
     the DOM (and on the product page) either way, this is presentation only. */
  .gc-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--gulmohar-serif);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.22;
    letter-spacing: -0.003em;
    color: var(--gulmohar-walnut);
    min-width: 0;
    margin: 0 0 4px;
  }

  /* ——— Price: sits below the name, sans-serif commerce register ——— */
  .gc-card__price {
    font-family: var(--gulmohar-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--gulmohar-terracotta);
    margin: 0 0 10px;
  }

  .gc-card__price-compare {
    color: var(--gulmohar-walnut-faint);
    text-decoration: line-through;
    font-size: 0.85em;
    font-weight: 500;
    margin-inline-end: 6px;
  }

  .gc-card__price-sale { color: var(--gulmohar-terracotta); }

  /* ——— Add to Bag: primary action — restrained bordered button, not a
     filled CTA, but readable and tappable (was a near-invisible 0.5-opacity
     ghost label at 9px/20px tall; this keeps the understated language but
     gives it real presence). ——— */
  .gc-card__add { margin-top: 2px; }

  .gc-card__add .quick-add { position: static; inset: auto; pointer-events: auto; width: 100%; }

  .gc-card__add quick-add-component,
  .gc-card__add product-form-component,
  .gc-card__add add-to-cart-component { display: contents; }

  .gc-card__add .quick-add__button .add-to-cart-text {
    overflow: visible; flex-shrink: 0; width: auto; height: auto; background: none;
  }

  .gc-card__add .shopify-product-form {
    height: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
  }

  .gc-card__add .quick-add__button {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 40px !important;
    opacity: 1 !important;
    background: none !important;
    border: 1px solid rgba(42, 26, 18, 0.28) !important;
    padding: 0 14px !important;
    height: auto !important;
    border-radius: 2px !important;
    backdrop-filter: none !important;
    color: var(--gulmohar-walnut) !important;
    font-family: var(--gulmohar-sans); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .gc-card__add .quick-add__button:hover {
    border-color: var(--gulmohar-terracotta) !important;
    color: var(--gulmohar-terracotta) !important;
  }

  .gc-card__add .quick-add__button .add-to-cart-text__content {
    grid-template-columns: max-content; width: max-content;
  }

  .gc-card__add .quick-add__button .add-to-cart-text__content span span {
    opacity: 1; translate: 0 0; filter: none; padding-right: 0;
  }

  .gc-card__add .quick-add__button--add .add-to-cart-text__content span span::after { content: ' to Bag'; }
  .gc-card__add .add-to-cart-icon { display: none; }
  .gc-card__add .quick-add__button--choose { display: none !important; }

  .gc-card__add--static .gc-card__add-label {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 40px;
    border: 1px solid rgba(42, 26, 18, 0.28);
    border-radius: 2px;
    color: var(--gulmohar-walnut);
    font-family: var(--gulmohar-sans); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .gc-card:hover .gc-card__add--static .gc-card__add-label {
    border-color: var(--gulmohar-terracotta);
    color: var(--gulmohar-terracotta);
  }

  /* ——— Mobile filter drawer ——— */
  .gc-drawer-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(42, 26, 18, 0.5);
    animation: gulmohar-fade-in 0.25s ease both;
  }

  .gc-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: min(400px, 100vw);
    background: var(--gulmohar-sandstone-deep);
    box-shadow: -16px 0 60px rgba(42, 26, 18, 0.2);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
  }

  .gc-drawer.is-open { transform: translateX(0); }

  .gc-drawer__head {
    padding: 22px 28px;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--gulmohar-cream);
    border-bottom: 1px solid rgba(42, 26, 18, 0.1);
  }

  .gc-drawer__title { font-family: var(--gulmohar-serif); font-size: 22px; }

  .gc-drawer__close {
    background: none; border: 0; color: var(--gulmohar-walnut);
    font-family: var(--gulmohar-serif); font-size: 26px;
    cursor: pointer; line-height: 1;
  }

  .gc-drawer__body { flex: 1; overflow: auto; padding: 4px 28px; }

  .gc-drawer__section { border-bottom: 1px solid rgba(42, 26, 18, 0.08); }

  .gc-drawer__label {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0; cursor: pointer; list-style: none;
    font-family: var(--gulmohar-sans); font-size: 12px;
    font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--gulmohar-walnut);
  }

  .gc-drawer__label::-webkit-details-marker { display: none; }

  .gc-drawer__options {
    display: flex; flex-direction: column; gap: 12px;
    padding: 0 0 18px;
  }

  .gc-drawer__foot {
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(42, 26, 18, 0.1);
    background: var(--gulmohar-cream);
    display: flex; flex-direction: column; gap: 10px;
  }

  .gc-drawer__clear {
    background: none; border: 0; padding: 0; cursor: pointer;
    align-self: center;
    font-family: var(--gulmohar-mono); font-size: 9.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    text-align: center;
  }

  .gc-drawer__show {
    width: 100%;
    background: var(--gulmohar-walnut); color: var(--gulmohar-cream);
    border: 0; padding: 14px;
    font-family: var(--gulmohar-sans); font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s ease;
  }

  .gc-drawer__show:hover { background: var(--gulmohar-terracotta); }

  /* ——— Responsive ——— */
  @media screen and (max-width: 989px) {
    .gc-layout {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .gc-sidebar { display: none; }

    .gc-controls__filter-btn--mobile { display: flex; align-items: center; }

    .gc-grid__grid[data-view="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .gc-grid__grid[data-view="list"] .gc-card__media { width: 120px; }
    .gc-grid__grid[data-view="list"] .gc-card__name { font-size: 16px; }
  }

  @media screen and (max-width: 749px) {
    .gc-grid__grid { gap: 22px 12px; }

    .gc-view-switcher { gap: 4px; }
    .gc-view-btn { padding: 4px; }

    .gc-sort__label { display: none; }

    .gc-drawer {
      top: auto; left: 0; right: 0; bottom: 0;
      width: auto; max-height: 80vh;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -16px 40px rgba(42, 26, 18, 0.22);
      transform: translateY(100%);
    }

    .gc-drawer.is-open { transform: translateY(0); }
    .gc-drawer__head { border-radius: 16px 16px 0 0; }

    .gc-grid__grid[data-view="list"] .gc-card { gap: 14px; }
    .gc-grid__grid[data-view="list"] .gc-card__media { width: 100px; }

    /* ——— Mobile card-height reduction ———
       Image stays full-size; the information block tightens instead.
       Titles get one more clamped line since narrower 2-up cards wrap
       more, so 3 short lines here reads the same as 2 lines on desktop. */
    .gc-card__info { margin-top: 6px; }
    .gc-card__eyebrow { margin-bottom: 3px; }

    .gc-card__name {
      font-size: 13.5px;
      line-height: 1.18;
      -webkit-line-clamp: 3;
      margin-bottom: 4px;
    }

    .gc-card__price { font-size: 12px; margin-bottom: 8px; }

    .gc-card__add .quick-add__button,
    .gc-card__add--static .gc-card__add-label {
      min-height: 38px !important;
      font-size: 10px;
      letter-spacing: 0.11em;
    }

    /* quick-add.liquid renders this button with icon_only_on_mobile: true,
       which adds .is-visually-hidden-mobile to the text label below 749px
       (screen-reader-only, via clip-rect). Combined with our own icon
       removal above, that left the button showing nothing at all on
       mobile — the "empty outlined rectangle" bug. Un-hide the label here
       rather than editing the shared snippet (also used by home-product-card). */
    .gc-card__add .add-to-cart-text__content.is-visually-hidden-mobile {
      position: static !important;
      width: auto !important;
      height: auto !important;
      overflow: visible !important;
      margin: 0 !important;
      padding: 0 !important;
      clip: auto !important;
    }

    .gc-grid__grid[data-view="list"] .gc-card__name {
      font-size: 15px;
      -webkit-line-clamp: 2;
      margin-bottom: 5px;
    }

    .gc-grid__grid[data-view="list"] .gc-card__price {
      font-size: 12.5px;
      margin-bottom: 8px;
    }

    .gc-grid__grid[data-view="list"] .gc-card__add { max-width: none; }
  }
/* END_SECTION:collection-grid */

/* START_SECTION:collection-hero (INDEX:11) */
.gc-hero { padding: clamp(16px, 2.5vw, 20px) 0 0; }

  .gc-hero {
    padding-top: calc(clamp(16px, 2.5vw, 20px) + (160px + var(--header-group-height, 0px)) * var(--transparent-header-offset-boolean, 0));

    @media screen and (max-width: 749px) {
      padding-top: calc(clamp(16px, 2.5vw, 20px) + (65px + var(--header-group-height, 0px)) * var(--transparent-header-offset-boolean, 0));
    }
  }

  .gc-hero__crumb {
    padding-block: 0 10px;
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
  }

  .gc-hero__crumb a:hover { color: var(--gulmohar-terracotta); opacity: 1; }
  .gc-hero__crumb-sep { opacity: 0.4; margin: 0 6px; }

  .gc-hero__tabs {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 6px;
    border-top: 1px solid rgba(42, 26, 18, 0.06);
    overflow-x: auto;
  }

  .gc-hero__tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 7px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--gulmohar-sans);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    transition: color 0.15s ease;
  }

  .gc-hero__tab:hover { color: var(--gulmohar-walnut); }

  .gc-hero__tab.is-active {
    color: var(--gulmohar-walnut);
    border-bottom-color: var(--gulmohar-terracotta);
  }

  .gc-hero__identity {
    text-align: center;
    padding: 16px 0 8px;
  }

  .gc-hero__heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
  }

  .gc-hero__lede {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: clamp(13px, 0.85rem + 0.2vw, 14.5px);
    line-height: 1.5;
    color: var(--gulmohar-walnut-soft);
    max-width: 480px;
    margin: 0 auto;
  }

  @media screen and (max-width: 749px) {
    .gc-hero__tabs {
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 22px;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }

    .gc-hero__tabs::-webkit-scrollbar { display: none; }

    .gc-hero__tab {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      min-height: 40px;
    }

    .gc-hero__identity { padding: 10px 0 4px; }
  }
/* END_SECTION:collection-hero */

/* START_SECTION:collection-just-landed (INDEX:12) */
.gc-landed { padding: clamp(56px, 8vw, 90px) 0 clamp(80px, 10vw, 120px); }
  .gc-landed__head { text-align: center; margin-bottom: 50px; }

  .gc-landed__heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.2rem + 2.8vw, 2.75rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .gc-landed__heading em { font-style: italic; color: var(--gulmohar-terracotta); }

  @media screen and (max-width: 989px) {
    .gc-landed__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  }
/* END_SECTION:collection-just-landed */

/* START_SECTION:collections-index (INDEX:13) */
.gulmohar-collections-index { padding: clamp(56px, 8vw, 96px) 0; }
  .gulmohar-collections-index__eyebrow { margin-bottom: 18px; }
  .gulmohar-collections-index__title {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
  }
  .gulmohar-collections-index__lede {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--gulmohar-walnut-soft);
    max-width: 540px;
    margin: 0 0 40px;
  }
  .gulmohar-collections-index__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 26px;
    margin-top: 40px;
  }
  .gulmohar-collections-index__media { margin-bottom: 16px; }
  .gulmohar-collections-index__name {
    font-family: var(--gulmohar-serif);
    font-size: 19px;
    letter-spacing: -0.005em;
  }
  .gulmohar-collections-index__count {
    font-family: var(--gulmohar-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    margin-top: 4px;
  }
  .gulmohar-collections-index__empty {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    color: var(--gulmohar-walnut-soft);
  }
  @media screen and (max-width: 989px) {
    .gulmohar-collections-index__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  }
  @media screen and (max-width: 460px) {
    .gulmohar-collections-index__grid { grid-template-columns: 1fr; max-width: 22rem; margin-left: auto; margin-right: auto; }
  }
/* END_SECTION:collections-index */

/* START_SECTION:header-announcements (INDEX:15) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:16) */
/* Header typography system (header-scoped only, per approved plan — does not touch global --font-* tokens) */
  @font-face {
    font-family: 'EB Garamond';
    src: url('{{ 'eb-garamond-400.woff2' | asset_url }}') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'EB Garamond';
    src: url('{{ 'eb-garamond-500.woff2' | asset_url }}') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Satoshi';
    src: url('{{ 'satoshi-400.woff2' | asset_url }}') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Satoshi';
    src: url('{{ 'satoshi-500.woff2' | asset_url }}') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Satoshi';
    src: url('{{ 'satoshi-700.woff2' | asset_url }}') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  #header-component {
    --header-font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --header-font-text: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* New header-local design language: independent spacing scale, motion, and proportions
       (deliberately not reusing the theme's shared --padding-*/--gap-*/--animation-* tokens,
       so this header reads as its own thing rather than a retint of the stock component) */
    --hdr-space-3xs: 0.4rem;
    --hdr-space-2xs: 0.8rem;
    --hdr-space-xs: 1.2rem;
    --hdr-space-sm: 1.8rem;
    --hdr-space-md: 2.8rem;
    --hdr-space-lg: 4rem;
    --hdr-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hdr-duration: 0.5s;
    --hdr-duration-fast: 0.28s;
    --hdr-rest-padding: var(--hdr-space-md);
    --hdr-sticky-padding: var(--hdr-space-2xs);

    /* Slower, more deliberate dropdown reveal (scoped override — this token is header-only sitewide) */
    --submenu-animation-speed: 550ms;

    /* Same deliberate pace for every header-triggered drawer (menu, cart, account) —
       scoped to #header-component only, so it doesn't touch drawers elsewhere in the theme */
    --drawer-animation-speed: 0.38s;

    @media screen and (max-width: 749px) {
      --hdr-rest-padding: var(--hdr-space-sm);
      --hdr-sticky-padding: var(--hdr-space-3xs);
    }
  }

  /* Nav typography: Satoshi for all UI text. Scoped on #header-component itself (not on
     individual link classes) so it inherits into BOTH the desktop nav and the mobile
     drawer, which are separate DOM branches under the same header-component root. */
  #header-component {
    --menu-top-level-font-family: var(--header-font-text);
    --menu-parent-font-family: var(--header-font-text);
    --menu-child-font-family: var(--header-font-text);
  }

  body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    display: block;
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;

    /* used to apply transparency to .header__row, will only ever be transparent or unset */
    --header-bg-color: transparent;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    /* transparent color scheme on .header should never apply its background color */
    background-color: transparent;
    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* Faster transition for "in" animation */
        transition: color var(--hdr-duration-fast) var(--hdr-ease), border-color var(--hdr-duration-fast) var(--hdr-ease),
          background-color var(--hdr-duration-fast) var(--hdr-ease);
      }
    }

    .header__row {
      /* Slower, more deliberate transition for "out" animation */
      transition: color var(--hdr-duration) var(--hdr-ease), border-color var(--hdr-duration) var(--hdr-ease),
        background-color var(--hdr-duration) var(--hdr-ease);
    }
  }

  :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active'])
    .header__row:not(
      :has(
          .mega-menu__list:hover,
          .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true']),
          .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])
        )
    ) {
    /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true']))
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --submenu-max-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

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

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

  /*
   * New sticky behaviour: the resting header is tall, quiet, and borderless.
   * On stick, it compresses to a slim frosted bar with a hairline + soft shadow
   * that fade in — a real, visible state change rather than a same-height nav
   * that just gains `position: sticky`.
   */
  /* Logo no longer shrinks in the sticky header (explicit request) — was scale: 0.72,
     which also shrank asymmetrically toward the left edge on the mobile centered
     logo since .header-logo__image's transform-origin is left-anchored (correct for
     desktop's left-aligned logo, wrong for mobile's centered one). Kept at 1 for
     every page/breakpoint rather than patching the mobile centering, since the
     request is for the logo to hold its size on scroll everywhere. */
  #header-component[data-sticky-state='active'] .header-logo__image {
    scale: 1;
  }

  #header-component .header-logo__image {
    transition: scale var(--hdr-duration) var(--hdr-ease);
  }

  /* :not(:has(gulmohar-mobile-drawer.is-open)) — backdrop-filter (like transform,
     filter, contain: layout, etc.) creates a new containing block for any
     position:fixed descendant. Once scrolled, this rule is what compresses the
     mobile drawer's full-screen scrim/panel down into the header row's own
     ~60px box, making the drawer look broken/unresponsive after scrolling. The
     drawer already covers the header underneath when open, so dropping the
     blur here is invisible to the user — same fix pattern as the
     `contain: layout` escape hatch below. */
  .header[data-sticky-state='active']:not(:has(gulmohar-mobile-drawer.is-open)) .header__row {
    background-color: rgb(var(--color-background-rgb) / 0.86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
      0 1px 0 0 rgb(var(--color-border-rgb) / 1),
      0 20px 32px -20px rgb(var(--color-foreground-rgb) / 0.16);
  }

  @media (prefers-reduced-motion: no-preference) {
    .header__row {
      transition: background-color var(--hdr-duration) var(--hdr-ease), box-shadow var(--hdr-duration) var(--hdr-ease),
        backdrop-filter var(--hdr-duration) var(--hdr-ease);
    }
  }

  .header__row {
    position: relative;

    /* will default to bg from its color scheme unless --header-bg-color is transparent */
    background-color: var(--header-bg-color, var(--color-background));
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--hdr-space-lg);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--hdr-space-sm);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--hdr-space-lg);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      position: relative;
      --header-template-columns: auto auto 1fr auto;

      grid-template-areas: 'leftA leftB spacer right';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      /* Centered on the header/viewport itself (not on leftover grid space), so it
         stays centered no matter how many icons end up in the left/right groups.
         Offset -23px: the right icon cluster (wishlist+account+cart, 132px) is
         wider than the left one (drawer+search, 88px), so the midpoint of the
         actual gap between them sits 23px left of true-viewport-center; without
         this correction a logo sized to fill that gap overlaps the right icons
         before it overlaps the left ones. */
      .header-logo {
        position: absolute;
        top: 50%;
        left: calc(50% - 23px);
        transform: translate(-50%, -50%);
        margin-inline: 0;
      }

      /* On the narrowest phones, 5 fixed-width icon buttons plus a centered logo
         don't all fit at full size. Let the logo shrink (never distort) just enough
         to clear the wider of the two icon groups; above ~430px this is a no-op. */
      .header-logo__image {
        /* Available width = viewport minus the two fixed icon clusters (measured:
           leftA+leftB drawer/search = 88px, right action group = 132px = 220px),
           minus a small breathing margin either side. Scales with viewport instead
           of a fixed guess, so the wordmark logo fills the real gap between the
           icon groups on any phone width without ever touching them. */
        max-width: clamp(48px, calc(100vw - 236px), 220px);
        height: auto;
      }

      .header__drawer {
        grid-area: leftA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: right;
      }
    }
  }

  /* Base-case fallback for the left column's track width. The stock :has(header-menu)
     rules above only re-size --header-left to content when the menu markup is a literal
     <header-menu> element; this store's customized menu isn't, so those selectors never
     match and --header-left silently stays the bare "1fr" default, whose automatic
     minimum is the column's min-content (near-zero once the mobile-only drawer button
     is hidden) rather than its max-content. Net effect: the left column's real content
     (the logo) was never counted when sizing the grid track, so a wider logo just
     overflowed across the center column instead of pushing it over. Lower specificity
     than the :has() rules above (which still win whenever they do match), so this only
     fills the gap they leave. */
  .header__columns {
    --header-left: minmax(max-content, 1fr);
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
  We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    position: relative;
    --header-template-columns: auto auto 1fr auto;

    grid-template-areas: 'leftA leftB spacer right';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      /* Same -23px icon-asymmetry correction as the plain mobile media query above. */
      position: absolute;
      top: 50%;
      left: calc(50% - 23px);
      transform: translate(-50%, -50%);
      margin-inline: 0;
    }

    .header-logo__image {
      /* Same real-gap-based formula as the plain mobile media query above, kept
         in sync for the touch/[data-menu-style='drawer'] duplicate. */
      max-width: clamp(48px, calc(100vw - 236px), 220px);
      height: auto;
    }

    .header__drawer {
      grid-area: leftA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: right;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /*
   * Header action buttons. No opacity/color/visibility dimming of siblings on hover —
   * every icon stays fully visible regardless of what else is being hovered. The only
   * hover feedback is a plain color shift (icon → foreground-accent) plus a small scale,
   * neither of which reduces legibility of anything else in the row.
   */
  .header-actions__action {
    --button-color: var(--color-foreground);

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  .header-actions__action .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    transition: transform var(--hdr-duration-fast) var(--hdr-ease);
  }

  @media (hover: hover) {
    .header-actions__action:hover svg {
      transform: scale(1.08);
    }
  }

  /* Header proportions: generous at rest, compressed once stuck — see the sticky block above */
  .header {
    --header-padding: var(--hdr-rest-padding);
    --font-paragraph--line-height: 1;
    contain: layout style;
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header[data-sticky-state='active'] {
    --header-padding: var(--hdr-sticky-padding);
  }

  @media (prefers-reduced-motion: no-preference) {
    .header__columns {
      transition: padding var(--hdr-duration) var(--hdr-ease);
    }
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
      padding-bottom: 7px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
      padding-bottom: 7px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
   * the height of the header
   */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-foreground);
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }
/* END_SECTION:header */

/* START_SECTION:home-atelier (INDEX:17) */
.gh-atelier {
    background: var(--gh-ink);
    color: var(--gh-ink);
    padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px);
  }

  .gh-atelier__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 78rem;
    margin: 0 auto;
  }

  .gh-craft__media { --gh-art-ratio: 4 / 5; margin-bottom: 22px; }

  .gh-craft__no {
    font-family: var(--gh-mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
  }

  .gh-craft__no--overlay {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    background: rgba(245, 238, 221, 0.7);
    padding: 3px 8px;
  }

  .gh-craft__no--inline { display: none; }

  .gh-craft__title { font-family: var(--gh-serif); font-size: 26px; letter-spacing: -0.005em; margin-bottom: 10px; text-align: center; }

  .gh-craft__body {
    font-family: var(--gh-serif);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--gh-ink-70);
    text-align: center;
    margin: 0;
  }

  @media screen and (max-width: 989px) {
    .gh-atelier__grid { grid-template-columns: 1fr 1fr; }
  }

  @media screen and (max-width: 560px) {
    /* Compact 2x2 editorial grid: keeps all four images (this is real
       storytelling content, not decoration) but stops them from stacking
       full-width four times over, which is what made this section ~1700px
       tall. Square ratio + reserved 2-line title height + clamped body
       copy keep all four cards the same height regardless of how long any
       one title/description happens to be, so rows stay visually even. */
    .gh-atelier__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; max-width: 100%; }
    .gh-craft__media { --gh-art-ratio: 1 / 1; margin-bottom: 12px; }

    .gh-craft__no--overlay { display: none; }
    .gh-craft__no--inline {
      display: block;
      font-size: 13px;
      color: var(--gh-tan);
      margin-bottom: 2px;
    }

    .gh-craft__heading { display: flex; flex-direction: column; align-items: center; }

    .gh-craft__title {
      font-size: 15px;
      line-height: 1.3;
      min-height: 39px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .gh-craft__body {
      font-size: 13px;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  /* Pair with the dual-render in the loop above: only one of the two
     shows at a time. Default/desktop sees the original full sentence;
     mobile sees the same sentence with the redundant clause trimmed. */
  .gh-craft__body--trimmed { display: none; }
  @media screen and (max-width: 749px) {
    .gh-craft__body--full { display: none; }
    .gh-craft__body--trimmed { display: block; }
  }
/* END_SECTION:home-atelier */

/* START_SECTION:home-care (INDEX:18) */
.gh-care { padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px); background: var(--gh-bg-alt); }

  .gh-care__inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    max-width: 78rem;
    margin: 0 auto;
    align-items: center;
  }

  .gh-care__lede {
    font-family: var(--gh-serif);
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--gh-ink-70);
    margin: 20px 0 0;
    text-align: left;
  }

  .gh-care__list { display: flex; flex-direction: column; gap: 28px; }

  .gh-care__item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 22px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gh-ink-10);
    text-align: left;
  }

  .gh-care__no { font-family: var(--gh-serif); font-style: italic; font-weight: 300; font-size: 38px; line-height: 1; color: var(--gh-burgundy); }
  .gh-care__title { font-family: var(--gh-serif); font-size: 26px; letter-spacing: -0.005em; margin-bottom: 6px; }
  .gh-care__body { font-family: var(--gh-serif); font-size: 15.5px; line-height: 1.55; color: var(--gh-ink-62); margin: 0; }

  @media screen and (max-width: 860px) {
    .gh-care__inner { grid-template-columns: 1fr; }
    .gh-care__lead { text-align: center; }
    .gh-care__lede { text-align: center; margin-left: auto; margin-right: auto; }
  }

  /* Mobile only: "Easy Exchanges" duplicates home_trust_strip verbatim.
     Lifetime Care, Yearly Polishing and Care Guide are unaffected — the
     list is a simple vertical stack, so removing one item just shortens
     it, no grid to rebalance. */
  @media screen and (max-width: 749px) {
    .gh-care__item--dup-mobile { display: none; }
  }
/* END_SECTION:home-care */

/* START_SECTION:home-curated-edit (INDEX:19) */
.gh-curated { padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px); }

  .gh-curated__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 28px;
    max-width: 85rem;
    margin: 0 auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .gh-curated__grid::-webkit-scrollbar { display: none; }

  /* Divisor is intentionally non-integer (4.15, not 4) so a sliver of the
     next card peeks past the visible edge instead of the row landing flush
     — that peek is what signals "more content" instead of a static grid. */
  .gh-curated__grid > * {
    flex: 0 0 auto;
    width: calc((100% - 3 * 28px) / 4.15);
    scroll-snap-align: start;
  }

  .gh-curated__card { display: block; text-align: center; }

  .gh-curated__label {
    margin-top: 16px;
    font-family: var(--gh-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gh-ink-70);
  }

  /* Minimal editorial scroll-progress indicator: one dot per category,
     joined by a hairline. Purely decorative echo of .gh-curated__grid's
     real scroll position (kept in sync by home-interactions.js) — the
     actual navigable content is the cards themselves, so this is
     aria-hidden rather than a second, redundant set of controls. */
  .gh-curated__progress {
    display: flex;
    justify-content: center;
    margin: 28px auto 0;
  }

  .gh-curated__progress-dots {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 36px);
  }

  .gh-curated__progress-dots::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 1px;
    background: var(--gh-ink-10);
    transform: translateY(-50%);
    z-index: 0;
  }

  .gh-curated__progress-dot {
    position: relative;
    z-index: 1;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gh-bg-main);
    border: 1px solid var(--gh-ink-48);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }

  .gh-curated__progress-dot.is-active {
    background: var(--gh-burgundy);
    border-color: var(--gh-burgundy);
    transform: scale(1.3);
  }

  .gh-curated__foot { text-align: center; margin-top: 32px; }

  @media screen and (max-width: 989px) {
    .gh-curated__grid { gap: 16px; }
    .gh-curated__grid > * { width: calc((100% - 16px) / 2.15); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gh-curated__progress-dot { transition: none; }
  }
/* END_SECTION:home-curated-edit */

/* START_SECTION:home-flagship (INDEX:20) */
.gh-flagship {
    background: var(--gh-burgundy);
    color: var(--gh-ink);
    text-align: center;
    padding: clamp(60px, 10vw, 100px) clamp(20px, 4vw, 48px);
  }

  .gh-flagship__inner { max-width: 40rem; margin: 0 auto; }

  .gh-flagship__list {
    list-style: none;
    margin: 34px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--gh-ink-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 0;
  }

  .gh-flagship__list-item {
    font-family: var(--gh-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gh-ink-70);
    padding: 0 22px;
    position: relative;
  }

  .gh-flagship__list-item + .gh-flagship__list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--gh-ink-10);
  }

  @media screen and (max-width: 620px) {
    .gh-flagship__list { flex-direction: column; gap: 12px; }
    .gh-flagship__list-item { padding: 0; }
    .gh-flagship__list-item + .gh-flagship__list-item::before { display: none; }
  }

  /* Mobile only: this section just restates home-trust-strip's 4 points
     (Lightweight/Gift-ready/Exchanges/Secure) in different words, lower on
     the page. Kept on desktop, where it reads as a deliberate closing recap
     rather than a repeat. */
  @media screen and (max-width: 749px) {
    .gh-flagship { display: none; }
  }
/* END_SECTION:home-flagship */

/* START_SECTION:home-gift-banner (INDEX:21) */
.gh-gift {
    background: var(--gh-bg-alt);
    border-top: 1px solid var(--gh-ink-10);
    border-bottom: 1px solid var(--gh-ink-10);
  }

  .gh-gift__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 26px 20px;
    text-align: center;
  }

  .gh-gift__text {
    font-family: var(--gh-serif);
    font-style: italic;
    font-size: 19px;
    color: var(--gh-ink);
  }

  .gh-gift__link {
    font-family: var(--gh-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gh-burgundy);
    border-bottom: 1px solid var(--gh-burgundy);
    padding-bottom: 3px;
    transition: opacity 0.2s ease;
  }

  .gh-gift__inner:hover .gh-gift__link { opacity: 0.7; }
/* END_SECTION:home-gift-banner */

/* START_SECTION:home-gulmohar-difference (INDEX:22) */
.gh-diff {
    padding: clamp(64px, 9vw, 120px) 0;
    background: var(--gh-bg-main);
  }

  .gh-diff .accent { color: var(--gh-burgundy); font-style: italic; }

  .gh-diff__heading {
    font-family: var(--gh-serif);
    font-weight: 300;
    font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 24px;
    color: var(--gh-ink);
  }

  .gh-diff__heading em { font-style: italic; color: var(--gh-burgundy); }
  .gh-diff__heading--center { text-align: center; margin: 0 auto; max-width: 36rem; }

  /* ---------- 1 · intro ---------- */
  .gh-diff__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    max-width: 90rem;
    margin: 0 auto clamp(72px, 10vw, 128px);
    padding: 0 clamp(20px, 4vw, 48px);
  }

  .gh-diff__intro-copy { max-width: 32rem; }

  .gh-diff__intro-media { --gh-art-ratio: 4 / 5; }

  .gh-diff__intro-body {
    font-family: var(--gh-sans);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--gh-ink-70);
    margin-bottom: 28px;
  }

  .gh-diff__intro-body p { margin: 0 0 16px; }
  .gh-diff__intro-body p:last-child { margin: 0; }
  .gh-diff__intro-body .accent { font-style: normal; border-bottom: 1px solid rgba(75, 31, 35, 0.35); }

  /* ---------- 2 · comparison table ---------- */
  .gh-diff__compare {
    max-width: 46rem;
    margin: 0 auto clamp(72px, 10vw, 128px);
    padding: 0 clamp(20px, 4vw, 48px);
  }

  .gh-diff__eyebrow-title {
    text-align: center;
    font-family: var(--gh-serif);
    font-size: 15px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gh-ink);
    margin-bottom: 48px;
  }

  .gh-diff__table { display: flex; flex-direction: column; }

  .gh-diff__row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--gh-ink-10);
    font-family: var(--gh-sans);
    font-size: 14.5px;
  }

  .gh-diff__row--head {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
    border-bottom-color: var(--gh-ink);
    padding-bottom: 14px;
  }

  .gh-diff__row--head .accent { font-style: normal; }

  .gh-diff__row-label {
    font-family: var(--gh-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
  }

  .gh-diff__row .accent { font-family: var(--gh-serif); font-size: 16px; }

  /* ---------- 3 · signature statement ---------- */
  .gh-diff__signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    max-width: 90rem;
    margin: 0 auto clamp(72px, 10vw, 128px);
    padding: 0 clamp(20px, 4vw, 48px);
  }

  .gh-diff__signature-media { --gh-art-ratio: 4 / 5; }

  .gh-diff__signature-number {
    font-family: var(--gh-serif);
    font-weight: 300;
    font-size: clamp(3.5rem, 2rem + 7vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: var(--gh-burgundy);
    margin-bottom: 16px;
  }

  .gh-diff__signature-sub {
    font-family: var(--gh-serif);
    font-style: italic;
    font-size: clamp(18px, 1rem + 1vw, 24px);
    color: var(--gh-ink-70);
    margin: 0 0 32px;
  }

  .gh-diff__signature-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--gh-sans);
    font-size: 15px;
    color: var(--gh-ink);
  }

  /* ---------- 4 · benefits ---------- */
  .gh-diff__benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 78rem;
    margin: 0 auto clamp(72px, 10vw, 128px);
    padding: clamp(48px, 7vw, 72px) clamp(20px, 4vw, 48px);
    border-top: 1px solid var(--gh-ink-10);
    border-bottom: 1px solid var(--gh-ink-10);
    text-align: center;
  }

  .gh-diff__benefit-icon {
    color: var(--gh-burgundy);
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
  }

  .gh-diff__benefit-icon svg { width: 30px; height: 30px; }

  .gh-diff__benefit-title {
    font-family: var(--gh-serif);
    font-size: 19px;
    letter-spacing: -0.005em;
    margin-bottom: 10px;
    color: var(--gh-ink);
  }

  .gh-diff__benefit-body {
    font-family: var(--gh-sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gh-ink-62);
    margin: 0;
  }

  /* ---------- 5 · macro gallery ---------- */
  .gh-diff__gallery-head {
    text-align: center;
    max-width: 90rem;
    margin: 0 auto 40px;
    padding: 0 clamp(20px, 4vw, 48px);
  }

  .gh-diff__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 90rem;
    margin: 0 auto clamp(72px, 10vw, 128px);
    padding: 0 clamp(20px, 4vw, 48px);
  }

  .gh-diff__gallery-item { --gh-art-ratio: 4 / 5; }

  /* ---------- 6 · thickness scale ---------- */
  .gh-diff__scale-wrap {
    max-width: 46rem;
    margin: 0 auto clamp(72px, 10vw, 128px);
    padding: 0 clamp(20px, 4vw, 48px);
    text-align: center;
  }

  .gh-diff__scale { position: relative; padding-top: 32px; }

  .gh-diff__scale-line {
    position: relative;
    height: 1px;
    background: var(--gh-ink-10);
  }

  .gh-diff__scale-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 0%;
    background: var(--gh-burgundy);
    transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gh-diff__scale.is-active .gh-diff__scale-fill { width: 100%; }

  .gh-diff__scale-dot {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gh-burgundy);
    transform: translate(-50%, -50%);
    transition: left 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gh-diff__scale.is-active .gh-diff__scale-dot { left: 100%; }

  .gh-diff__scale-ticks {
    position: relative;
    height: 40px;
    margin-top: 14px;
  }

  .gh-diff__scale-ticks span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--gh-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--gh-ink-55);
    white-space: nowrap;
  }

  .gh-diff__scale-ticks span:first-child { transform: translateX(0); }
  .gh-diff__scale-ticks span:last-child { transform: translateX(-100%); font-size: 13px; }

  .gh-diff__scale-label {
    margin-top: 22px;
    font-family: var(--gh-mono);
    font-size: 10.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
  }

  /* ---------- 7 · philosophy ---------- */
  .gh-diff__philosophy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
  }

  .gh-diff__philosophy-copy { max-width: 32rem; }

  /* ---------- responsive ---------- */
  @media screen and (max-width: 989px) {
    .gh-diff__intro,
    .gh-diff__signature,
    .gh-diff__philosophy {
      grid-template-columns: 1fr;
    }

    .gh-diff__signature { display: flex; flex-direction: column-reverse; }
    .gh-diff__intro-copy,
    .gh-diff__signature-copy,
    .gh-diff__philosophy-copy { max-width: 100%; text-align: center; }
    .gh-diff__signature-lines { align-items: center; }

    .gh-diff__benefits { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
    .gh-diff__gallery { grid-template-columns: 1fr 1fr; }

    .gh-diff__row { grid-template-columns: 1fr 1fr 1fr; font-size: 13px; }
  }

  @media screen and (max-width: 560px) {
    .gh-diff__benefits {
      grid-template-columns: 1fr;
      max-width: 22rem;
      margin-left: auto;
      margin-right: auto;
      gap: 24px;
      padding-top: 32px;
      padding-bottom: 32px;
    }

    /* Real content stays visible — 2 of the 4 macro detail shots, one row
       instead of two, rather than hiding the gallery's purpose entirely. */
    .gh-diff__gallery { grid-template-columns: 1fr 1fr; }
    .gh-diff__gallery-item:nth-child(n + 3) { display: none; }

    .gh-diff__scale-ticks span:nth-child(2),
    .gh-diff__scale-ticks span:nth-child(3) { display: none; }

    /* Placeholder art on mobile: the tall 4/5 portrait ratio is sized for
       these images sitting beside their copy on desktop. Once the layout
       stacks to one column, that same ratio at near-full-viewport width
       makes each block far taller than its actual (currently short) text
       content, reading as empty space rather than intentional breathing
       room. Images stay visible — this only shortens the crop; desktop
       is untouched. Signature image is deliberately left alone: it
       already renders at 0 height on mobile via a pre-existing
       flex/aspect-ratio interaction unrelated to this change. */
    .gh-diff__intro-media { --gh-art-ratio: 2 / 1; }
    .gh-diff__gallery-item { --gh-art-ratio: 3 / 2; }

    /* Same reasoning for the inter-block rhythm: clamp(72px, 10vw, 128px)
       is already flat at 72px below a 720px viewport, so every phone
       width pays the same fixed cost six times over in this one section.
       Trim it moderately here rather than removing it — these blocks
       still need visible separation from one another. */
    .gh-diff__intro,
    .gh-diff__compare,
    .gh-diff__signature,
    .gh-diff__benefits,
    .gh-diff__gallery,
    .gh-diff__scale-wrap {
      margin-bottom: 32px;
    }
  }

  /* Mobile only: the closing "Luxury philosophy" block (7) restates
     home_letter's "shouldn't be reserved for special occasions" idea
     almost verbatim. The comparison table, signature 4-micron statement,
     benefits and macro gallery above it — the section's actual unique
     material/quality differentiation — are unaffected and still render. */
  @media screen and (max-width: 749px) {
    .gh-diff__philosophy { display: none; }
  }
/* END_SECTION:home-gulmohar-difference */

/* START_SECTION:home-hero (INDEX:23) */
/* Force true edge-to-edge bleed, overriding the theme's default section gutter */
  .shopify-section:not(.header-section) .gh-hero.section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gh-hero {
    position: relative;
    height: var(--hero-height, 100svh);
    min-height: 560px;
    overflow: hidden;
    background: var(--gh-ink);
  }

  .gh-hero__media {
    position: absolute;
    inset: -5% 0;
    will-change: transform;
  }

  .gh-hero__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--gh-hero-focal, center);
    transform: scale(1);
    animation: gh-hero-zoom 22s ease-out forwards;
  }

  @keyframes gh-hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.03); }
  }

  .gh-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #EEE7D8 0%, #E8DFCC 55%, #DFD4BB 100%);
    text-align: center;
    padding: 24px;
  }

  .gh-hero__placeholder p {
    font-family: var(--gh-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
    line-height: 1.8;
  }

  .gh-hero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(20, 14, 12, calc(0.62 * var(--gh-hero-overlay-o))) 0%, rgba(20, 14, 12, calc(0.26 * var(--gh-hero-overlay-o))) 40%, rgba(20, 14, 12, 0) 65%),
      linear-gradient(180deg, rgba(20, 14, 12, calc(0.22 * var(--gh-hero-overlay-o))) 0%, transparent 26%, transparent 68%, rgba(20, 14, 12, calc(0.4 * var(--gh-hero-overlay-o))) 100%);
    pointer-events: none;
  }

  .gh-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(24px, 6vw, 64px) clamp(24px, 6vw, 90px);
    pointer-events: none;
  }

  .gh-hero__inner {
    pointer-events: auto;
    max-width: 550px;
    color: #F5EEDD;
    opacity: 0;
    transform: translateY(18px);
    animation: gh-hero-content-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  }

  @keyframes gh-hero-content-in {
    to { opacity: 1; transform: translateY(0); }
  }

  .gh-hero__heading {
    margin: 0 0 20px;
    font-family: var(--gh-serif);
    font-weight: 300;
    font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: #F5EEDD;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
  }

  .gh-hero__heading em { font-style: italic; font-weight: 400; color: var(--gh-tan); }

  .gh-hero__sub {
    margin: 0 0 32px;
    font-family: var(--gh-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(15px, 0.9rem + 0.6vw, 19px);
    line-height: 1.5;
    color: rgba(245, 238, 221, 0.88);
    max-width: 30rem;
  }

  .gh-hero__ctas {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }

  .gh-hero__cta-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 16px 34px;
    font-family: var(--gh-sans);
    font-size: 11.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #F5EEDD;
    background: transparent;
    border: 1px solid rgba(245, 238, 221, 0.65);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .gh-hero__cta-ghost:hover {
    background: rgba(245, 238, 221, 0.12);
    border-color: #F5EEDD;
    transform: translateY(-2px);
  }

  .gh-hero__trust {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--gh-sans);
    font-size: 11.5px;
    color: rgba(245, 238, 221, 0.78);
  }

  .gh-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3vw, 30px);
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--gh-mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 238, 221, 0.75);
  }

  .gh-hero__scroll-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, rgba(245, 238, 221, 0.8), transparent);
    animation: gh-hero-scroll-line 2.4s ease-in-out infinite;
  }

  @keyframes gh-hero-scroll-line {
    0%, 100% { opacity: 0.4; transform: scaleY(0.7); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  }

  @media screen and (max-width: 749px) {
    .gh-hero { height: 100dvh; }

    .gh-hero__content {
      align-items: flex-end;
      justify-content: center;
      padding: 28px 22px calc(56px + env(safe-area-inset-bottom));
      text-align: center;
    }

    .gh-hero__inner { max-width: 100%; }

    .gh-hero__ctas { justify-content: center; }

    .gh-hero__ctas .gh-btn,
    .gh-hero__ctas .gh-hero__cta-ghost { width: auto; }

    .gh-hero__trust { justify-content: center; }

    .gh-hero__scroll { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gh-hero__img { animation: none; }
    .gh-hero__inner { animation: none; opacity: 1; transform: none; }
    .gh-hero__scroll-line { animation: none; }
  }
/* END_SECTION:home-hero */

/* START_SECTION:home-journal (INDEX:24) */
.gh-journal { padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px); background: var(--gh-bg-alt); }

  .gh-journal__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 36px;
    max-width: 78rem;
    margin: 0 auto;
  }

  .gh-journal__feature { display: block; text-align: left; }
  .gh-journal__feature-media { margin-bottom: 26px; }

  .gh-journal__tag {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 1;
    background: var(--gh-burgundy);
    color: var(--gh-cream);
    padding: 5px 14px;
    font-family: var(--gh-sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .gh-journal__feature-title {
    font-family: var(--gh-serif);
    font-weight: 300;
    font-size: clamp(1.75rem, 1rem + 2.4vw, 2.9rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
  }

  .gh-journal__feature-title em { font-style: italic; color: var(--gh-burgundy); }

  .gh-journal__excerpt {
    font-family: var(--gh-serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--gh-ink-70);
    margin: 0 0 16px;
    max-width: 32rem;
  }

  .gh-journal__side { display: flex; flex-direction: column; gap: 26px; }

  .gh-journal__row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--gh-ink-10);
    text-align: left;
  }

  .gh-journal__row-title {
    font-family: var(--gh-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin: 0 0 8px;
  }

  .gh-journal__row-title em { font-style: italic; color: var(--gh-burgundy); }

  .gh-journal__read {
    font-family: var(--gh-sans);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
  }

  @media screen and (max-width: 989px) {
    .gh-journal__grid { grid-template-columns: 1fr; }
    .gh-journal__row { grid-template-columns: 90px 1fr; }
  }

  /* Mobile only: pure editorial teasers with no conversion role (links are
     unconfigured placeholders). Keeps the desktop page's editorial depth
     while shortening the mobile scroll to product/purchase content. */
  @media screen and (max-width: 749px) {
    .gh-journal { display: none; }
  }
/* END_SECTION:home-journal */

/* START_SECTION:home-letter (INDEX:25) */
.gh-letter { padding: clamp(60px, 10vw, 120px) clamp(20px, 4vw, 48px); text-align: center; }

  .gh-letter__inner { max-width: 48rem; margin: 0 auto; }

  .gh-letter__heading {
    font-family: var(--gh-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.6rem, 1rem + 2.4vw, 3.25rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin: 0 0 40px;
    color: var(--gh-ink);
  }

  .gh-letter__heading .accent { color: var(--gh-burgundy); }

  .gh-letter__body {
    font-family: var(--gh-serif);
    font-size: clamp(14.5px, 1vw + 0.7rem, 17px);
    line-height: 1.72;
    color: var(--gh-ink-70);
    text-align: left;
    column-count: 2;
    column-gap: 44px;
    margin: 0 0 40px;
  }

  .gh-letter__body p { margin: 0 0 18px; }
  .gh-letter__body p:last-child { margin: 0; }
  .gh-letter__body em { font-style: italic; color: var(--gh-burgundy); }

  .gh-letter__signature { font-family: var(--gh-serif); font-style: italic; font-size: 32px; color: var(--gh-burgundy); line-height: 1; }

  .gh-letter__signature-role {
    font-family: var(--gh-sans);
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
    margin-top: 6px;
  }

  @media screen and (max-width: 749px) {
    .gh-letter__body { column-count: 1; }
  }
/* END_SECTION:home-letter */

/* START_SECTION:home-muses (INDEX:26) */
.gh-muses { padding: clamp(56px, 9vw, 100px) clamp(20px, 4vw, 48px); background: var(--gh-bg-alt); }

  .gh-muses__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 100rem;
    margin: 0 auto;
  }

  .gh-muse { display: flex; flex-direction: column; align-items: center; text-align: center; }

  .gh-muse__media { --gh-art-ratio: 4 / 3; width: 100%; margin-bottom: 22px; }

  .gh-muse__no {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    font-family: var(--gh-mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
    background: rgba(245, 238, 221, 0.7);
    padding: 3px 8px;
  }

  .gh-muse__name { font-family: var(--gh-serif); font-size: 24px; letter-spacing: -0.005em; margin-bottom: 6px; }

  .gh-muse__description {
    font-family: var(--gh-serif);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gh-ink-62);
    margin: 0 0 14px;
  }

  @media screen and (max-width: 989px) {
    .gh-muses__grid { gap: 24px; max-width: 40rem; }
  }

  @media screen and (max-width: 460px) {
    .gh-muses__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
      max-width: 24rem;
    }

    .gh-muse__media { --gh-art-ratio: 1 / 1; margin-bottom: 12px; }

    .gh-muse__no {
      top: 10px;
      right: 10px;
      padding: 2px 6px;
      font-size: 8px;
    }

    .gh-muse__name { font-size: 16px; line-height: 1.15; margin-bottom: 4px; }

    .gh-muse__description { font-size: 12.5px; line-height: 1.4; margin: 0 0 10px; }

    .gh-text-link { font-size: 9.5px; }
  }
/* END_SECTION:home-muses */

/* START_SECTION:home-occasion (INDEX:27) */
.gh-occasion { padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px); }

  .gh-occasion__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 72rem;
    margin: 0 auto;
  }

  .gh-occasion__card { display: block; }

  .gh-occasion__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 45%, rgba(30, 21, 18, 0.62) 100%);
    transition: background 0.4s ease;
  }

  .gh-occasion__card:hover .gh-occasion__scrim { background: linear-gradient(180deg, transparent 30%, rgba(30, 21, 18, 0.72) 100%); }

  .gh-occasion__label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    font-family: var(--gh-serif);
    font-style: italic;
    font-size: 21px;
    color: var(--gh-cream);
    line-height: 1.15;
  }

  /* Shop by Budget price labels: an earlier pass moved these to upright
     Manrope semi-bold to match .gc-card__price's "this is a price" sans
     convention — correct in principle, but at this section's much larger
     display size Manrope's rounded geometric digits read as generic/chunky
     rather than premium. Reusing the site's actual premium serif
     (--gh-serif, Cormorant Garamond — already used for every other display
     heading in this system) at a light, elegant weight gives the numerals
     the refined high-contrast glyph shapes the brand's other headings have,
     without introducing a new font. Upright, not italic — italic stays
     reserved for the accent/voice role it plays elsewhere (.gh-lede, the
     <em> word in headings), not a data value like a price. Size bumped from
     22 to 24px (the same size already used for .gh-muse__name, another
     serif card title in this exact system) since a serif reads slightly
     lighter than a sans semi-bold at the same pixel height. Letter-spacing
     switched from sans-label tracking (0.1em) to the same tight, slightly
     negative value used on this system's other serif headings. Scoped as a
     modifier on top of the base label (positioning/line-height inherited)
     so .gh-occasion__label itself, and any other use of it, is untouched.
     The soft cream text-shadow keeps the dark burgundy legible once a real
     photo replaces the current light placeholder background, without
     giving up the burgundy fill itself. */
  .gh-occasion__label--price {
    font-family: var(--gh-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--gh-burgundy);
    text-shadow: 0 1px 14px rgba(245, 238, 221, 0.55), 0 1px 3px rgba(245, 238, 221, 0.45);
  }

  .gh-occasion__info { margin-top: 16px; text-align: center; }

  .gh-occasion__description {
    font-family: var(--gh-serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--gh-ink-62);
    margin: 0 0 10px;
  }

  @media screen and (max-width: 989px) {
    /* Four tiers divide evenly into a 2x2 grid — unlike the old 5-category
       version, there's no odd item left over to center on its own row. */
    .gh-occasion__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 34rem; }
  }

  /* Below 768px: an earlier pass hid the photo entirely in favour of a large
     text panel, on the (then-correct) assumption these cards were text-only.
     They're not — real product/lifestyle photography is coming, and once it
     does the photo needs to read as the hero of each card, with the price
     as a small editorial caption over it (same role .gh-occasion__label
     already plays at every other breakpoint) rather than a competing
     headline. So this block now only: (1) keeps the single-column stacked
     layout from that earlier pass — full-width cards are still correct,
     that part wasn't the problem; (2) shrinks the price caption specifically
     for this narrower width, since 24px reads as a heading rather than a
     caption at this size; (3) removes the description sentence from the
     card entirely (data stays in the block setting, just not rendered
     visually here — it was never meant to survive real photography); (4)
     widens the gap before "Shop Now" so it reads as a quiet secondary
     action, not a caption/CTA pair competing for attention. */
  @media screen and (max-width: 767px) {
    .gh-occasion__grid {
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 30rem;
    }

    .gh-occasion__label--price {
      font-size: 14px;
      letter-spacing: 0.03em;
    }

    .gh-occasion__description { display: none; }

    .gh-occasion__info { margin-top: 20px; }
  }
/* END_SECTION:home-occasion */

/* START_SECTION:home-recently-viewed (INDEX:29) */
.gh-recent {
    position: relative;
    display: block;
    padding: clamp(40px, 6vw, 56px) clamp(20px, 4vw, 48px) clamp(48px, 7vw, 64px);
    border-top: 1px solid var(--gh-ink-10);
  }

  .gh-recent[hidden] { display: none; }

  .gh-recent__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    max-width: 85rem;
    margin-left: auto;
    margin-right: auto;
  }

  .gh-recent__items {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: 85rem;
    margin: 0 auto;
  }

  .gh-recent__items .gh-card__name { font-size: 16px; }
  .gh-recent__items .gh-card__price,
  .gh-recent__items .gh-card__price .price { font-size: 13px; }
  .gh-recent__items .gh-card__descriptor { display: none; }

  @media screen and (max-width: 989px) {
    .gh-recent__items { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  }

  @media screen and (max-width: 460px) {
    .gh-recent__items { grid-template-columns: repeat(2, 1fr); }
  }
/* END_SECTION:home-recently-viewed */

/* START_SECTION:home-ritual (INDEX:30) */
.gh-ritual { padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px); }

  .gh-ritual__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 75rem;
    margin: 0 auto;
    text-align: center;
  }

  .gh-ritual__no { font-family: var(--gh-serif); font-style: italic; font-weight: 300; font-size: 62px; line-height: 1; color: var(--gh-burgundy); margin-bottom: 18px; }
  .gh-ritual__title { font-family: var(--gh-serif); font-size: 26px; letter-spacing: -0.005em; margin-bottom: 10px; }
  .gh-ritual__detail { font-family: var(--gh-serif); font-size: 15.5px; line-height: 1.55; color: var(--gh-ink-62); margin: 0; }

  @media screen and (max-width: 989px) {
    .gh-ritual__grid { grid-template-columns: 1fr 1fr; }
  }

  @media screen and (max-width: 500px) {
    .gh-ritual__grid { grid-template-columns: 1fr; max-width: 20rem; }
  }
/* END_SECTION:home-ritual */

/* START_SECTION:home-testimonials (INDEX:31) */
.gh-testimonials { padding: clamp(56px, 9vw, 104px) clamp(20px, 4vw, 48px); }

  .gh-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 72rem;
    margin: 0 auto;
  }

  .gh-testimonial { text-align: center; display: flex; flex-direction: column; align-items: center; }

  .gh-testimonial__photo {
    width: 64px;
    border-radius: 50%;
    margin-bottom: 16px;
  }

  .gh-testimonial__stars {
    color: var(--gh-burgundy);
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }

  .gh-testimonial__quote {
    font-family: var(--gh-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--gh-ink);
    margin: 0 0 16px;
  }

  .gh-testimonial__attribution {
    font-family: var(--gh-sans);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
  }

  @media screen and (max-width: 749px) {
    .gh-testimonials__grid { grid-template-columns: 1fr; gap: 40px; max-width: 26rem; }
  }
/* END_SECTION:home-testimonials */

/* START_SECTION:home-trust-strip (INDEX:32) */
.gh-trust {
    padding: 22px clamp(20px, 4vw, 48px);
    border-bottom: 1px solid var(--gh-ink-10);
  }

  .gh-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 0;
    max-width: 72rem;
    margin: 0 auto;
  }

  .gh-trust__item {
    font-family: var(--gh-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gh-ink-62);
    padding: 0 22px;
    position: relative;
  }

  .gh-trust__item + .gh-trust__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--gh-ink-10);
  }

  @media screen and (max-width: 749px) {
    .gh-trust__list { flex-direction: column; gap: 12px; }
    .gh-trust__item { padding: 0; text-align: center; }
    .gh-trust__item + .gh-trust__item::before { display: none; }
  }
/* END_SECTION:home-trust-strip */

/* START_SECTION:main-404 (INDEX:34) */
.gc-404 {
    padding-block: clamp(64px, 12vw, 140px);
  }

  .gc-404__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }

  .gc-404__kicker {
    margin-bottom: 18px;
    font-size: 11px;
  }

  .gc-404__heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
    color: var(--gulmohar-walnut);
  }

  .gc-404__body {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: clamp(14px, 0.9rem + 0.3vw, 16px);
    line-height: 1.55;
    color: var(--gulmohar-walnut-soft);
    max-width: 460px;
    margin: 0 auto 40px;
  }

  .gc-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .gc-404__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 16px 36px;
    font-family: var(--gulmohar-sans);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gulmohar-cream);
    background: var(--gulmohar-terracotta);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .gc-404__cta:hover {
    background: var(--gulmohar-walnut);
    transform: translateY(-2px);
  }

  .gc-404__secondary {
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    text-decoration: none;
    border-bottom: 1px solid var(--gulmohar-walnut-faint);
    padding-bottom: 3px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .gc-404__secondary:hover {
    color: var(--gulmohar-walnut);
    border-color: var(--gulmohar-walnut);
  }

  @media screen and (max-width: 749px) {
    .gc-404__actions {
      flex-direction: column;
      gap: 18px;
    }

    .gc-404__cta {
      width: 100%;
    }
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-article (INDEX:35) */
.gulmohar-article { padding: clamp(56px, 8vw, 96px) 0; }
  .gulmohar-article__inner { max-width: 760px; }
  .gulmohar-article__eyebrow { margin-bottom: 18px; }
  .gulmohar-article__title {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 32px;
  }
  .gulmohar-article__media { margin-bottom: 40px; }
  .gulmohar-article__content {
    font-family: var(--gulmohar-serif);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--gulmohar-walnut-soft);
  }
  .gulmohar-article__content p { margin: 0 0 1.3em; }
  .gulmohar-article__content a { color: var(--gulmohar-terracotta); }
  .gulmohar-article__back {
    display: inline-block;
    margin-top: 48px;
    font-family: var(--gulmohar-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
  }
  .gulmohar-article__back:hover { color: var(--gulmohar-terracotta); }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:36) */
.gulmohar-blog { padding: clamp(56px, 8vw, 96px) 0; }
  .gulmohar-blog__eyebrow { margin-bottom: 18px; }
  .gulmohar-blog__title {
    font-family: var(--gulmohar-serif);
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 48px;
  }
  .gulmohar-blog__empty { font-family: var(--gulmohar-serif); font-style: italic; color: var(--gulmohar-walnut-soft); }
  .gulmohar-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 26px;
  }
  .gulmohar-blog__card-media { margin-bottom: 16px; }
  .gulmohar-blog__card-meta {
    font-family: var(--gulmohar-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    margin-bottom: 6px;
  }
  .gulmohar-blog__card-title {
    font-family: var(--gulmohar-serif);
    font-size: 19px;
    margin-bottom: 6px;
  }
  .gulmohar-blog__card-excerpt {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--gulmohar-walnut-soft);
    line-height: 1.5;
    margin: 0;
  }
  @media screen and (max-width: 989px) {
    .gulmohar-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  }
  @media screen and (max-width: 749px) {
    .gulmohar-blog__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:37) */
/* cart-items-component is a custom element with no site-wide `display`
     rule (only header-actions.liquid sets a view-transition-name on it).
     Custom elements default to `display: inline` in the absence of one.
     Inside the cart drawer that's masked because its parent is a flex/grid
     container, which auto-blockifies direct children regardless of their
     own declared display; here it's a direct child of a plain block div, so
     it actually renders inline — collapsing everything inside it (including
     the .gc-cart__layout grid) to a shrink-wrapped, near-zero-width inline
     box. This is the fix for the full-page layout collapse. */
  .gc-cart cart-items-component {
    display: block;
  }

  .gc-cart { padding: clamp(20px, 3vw, 24px) 0 clamp(70px, 9vw, 110px); }

  .gc-cart__crumb {
    padding-block: 0 12px;
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
  }

  .gc-cart__crumb a:hover { color: var(--gulmohar-terracotta); opacity: 1; }
  .gc-cart__crumb-sep { opacity: 0.4; margin: 0 8px; }

  .gc-cart__head {
    padding-block: 8px 32px;
    border-top: 1px solid rgba(42, 26, 18, 0.06);
  }

  .gc-cart__heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .gc-cart__subheading {
    font-family: var(--gulmohar-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    margin: 10px 0 0;
  }

  /* ---------- empty state ---------- */
  .gc-cart__empty {
    text-align: center;
    padding-block: 56px 90px;
    max-width: 560px;
  }

  .gc-cart__empty-heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem);
    margin: 14px 0 12px;
  }

  .gc-cart__empty-body {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gulmohar-walnut-soft);
    margin: 0 0 32px;
  }

  .gc-cart__cta,
  .gc-cart__summary-card .cart__checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gulmohar-walnut);
    color: var(--gulmohar-cream);
    border: 0;
    padding: 16px 40px;
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .gc-cart__cta:hover,
  .gc-cart__summary-card .cart__checkout-button:hover { background: var(--gulmohar-terracotta); }

  .gc-cart__summary-card .cart__checkout-button {
    width: 100% !important;
    height: 58px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.24em !important;
    padding-inline: 24px !important;
  }

  .gc-cart__reassurance {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--gulmohar-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--gulmohar-walnut-faint);
  }

  .gc-cart__reassurance li { display: flex; align-items: center; gap: 10px; }

  .gc-cart__reassurance li:not(:last-child)::after {
    content: '·';
    margin-left: 10px;
    color: var(--gulmohar-walnut-faint);
    opacity: 0.6;
  }

  .gc-cart__brand-line {
    margin: 4px 0 0;
    text-align: center;
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--gulmohar-walnut-soft);
  }

  /* ---------- two-column layout ---------- */
  .gc-cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 64px;
    align-items: start;
  }

  .gc-cart__items { min-width: 0; }

  .gc-cart__continue-wrap {
    padding-block: 28px 0;
  }

  .gc-cart__continue {
    display: inline-block;
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    transition: color 0.2s ease;
  }

  .gc-cart__continue:hover { color: var(--gulmohar-terracotta); }

  .gc-cart__summary { position: sticky; top: 24px; }

  .gc-cart__summary-card {
    background: var(--gulmohar-cream);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .gc-cart__summary-heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: 20px;
    margin: 0;
  }

  .gc-cart__shipping-note {
    margin: 0;
    font-family: var(--gulmohar-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--gulmohar-walnut-faint);
  }

  /* ---------- restyle the real cart-items component ---------- */
  .gc-cart .cart-items { --cart-items-gap: 28px; }

  .gc-cart .cart-items__table-row {
    grid-template-columns: 168px minmax(0, 1fr) auto;
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: 22px;
    border-bottom: 1px solid rgba(42, 26, 18, 0.1) !important;
  }

  .gc-cart .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid rgba(42, 26, 18, 0.1); }

  .gc-cart .cart-items__media-container {
    background: var(--gulmohar-sandstone-deep);
    aspect-ratio: 4 / 5;
  }

  .gc-cart .cart-items__details { color: var(--gulmohar-walnut-soft); }

  .gc-cart .cart-items__details * { font-family: var(--gulmohar-sans); font-size: 12.5px; }

  /* Product name: match .gc-card__name (Collection page) and .pdp-rec-name
     (Product page recommendations) exactly — 17px, regular weight. The
     previous 20px/500 was a cart-only invention with no counterpart
     elsewhere in the theme. */
  .gc-cart .cart-items__title,
  .gc-cart .cart-items__title * {
    font-family: var(--gulmohar-serif);
    font-size: 17px;
    font-weight: 400;
    color: var(--gulmohar-walnut);
  }

  /* Category label: match .gulmohar-eyebrow / .pdp-rec-cat exactly (9px). */
  .gc-cart .cart-items__category,
  .gc-cart .cart-items__category * {
    font-family: var(--gulmohar-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gulmohar-terracotta);
  }

  .gc-cart .cart-items__variants dd,
  .gc-cart .cart-items__variants dt {
    font-family: var(--gulmohar-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 10px;
  }

  .gc-cart .cart-items__unit-price,
  .gc-cart .cart-items__unit-price * {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--gulmohar-terracotta);
  }

  /* Compare-at price: matches .gulmohar-card__price .compare-at-price
     (Collection page) — stays in the parent's Newsreader italic, just
     smaller/faded/struck-through. The previous sans-serif/non-italic
     override didn't trace back to anything else in the theme. */
  .gc-cart .cart-items__unit-price .compare-at-price,
  .gc-cart .cart-items__unit-price .compare-at-price * {
    font-size: 0.85em;
    opacity: 0.5;
  }

  .gc-cart .cart-items__price,
  .gc-cart .cart-items__price text-component {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--gulmohar-terracotta);
  }

  .gc-cart .cart-items__price .compare-at-price {
    opacity: 0.5;
  }

  /* quantity controls: quiet, thin-bordered, no giant boxes */
  .gc-cart .quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(42, 26, 18, 0.25);
    height: 36px;
  }

  .gc-cart .quantity-minus,
  .gc-cart .quantity-plus {
    width: 32px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gulmohar-walnut);
    background: none;
    border: 0;
  }

  .gc-cart .quantity-minus:hover,
  .gc-cart .quantity-plus:hover { color: var(--gulmohar-terracotta); }

  .gc-cart .quantity-selector input[type='number'] {
    width: 34px;
    height: 34px;
    border: 0;
    border-left: 1px solid rgba(42, 26, 18, 0.15);
    border-right: 1px solid rgba(42, 26, 18, 0.15);
    text-align: center;
    font-family: var(--gulmohar-sans);
    font-size: 13px;
    color: var(--gulmohar-walnut);
    background: none;
  }

  .gc-cart .cart-items__remove {
    color: var(--gulmohar-walnut-faint);
    opacity: 0.6;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  .gc-cart .cart-items__remove:hover { opacity: 1; color: var(--gulmohar-terracotta); }

  .gc-cart .cart-items__empty-button { display: none; } /* we render our own empty state */

  /* ---------- order summary totals ---------- */
  .gc-cart .cart-totals__total-label,
  .gc-cart .cart-totals__original-label {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
  }

  .gc-cart .cart-totals__original-value,
  .gc-cart .cart-totals__total-value {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    color: var(--gulmohar-terracotta);
  }

  .gc-cart .cart-totals__total-value { font-size: 22px; }
  .gc-cart .cart-totals__original-value { font-size: 15px; }

  .gc-cart .cart-totals { border-top: 1px solid rgba(42, 26, 18, 0.12) !important; padding-top: 20px !important; }
  .gc-cart .cart-totals:not(:has(.cart-actions)) { border-top: 1px solid rgba(42, 26, 18, 0.12); padding-top: 20px; }
  .gc-cart .cart-actions { border-color: rgba(42, 26, 18, 0.12) !important; }

  /* hairline divider directly above Estimated Total, separating it from
     Subtotal/discounts — the visual "line" the summary reads against */
  .gc-cart .cart-totals__container {
    border-top: 1px solid rgba(42, 26, 18, 0.12);
    padding-top: 14px;
  }

  /* quantity + remove: remove sits quietly underneath, not beside, the
     quantity control — text link, not a boxed button */
  .gc-cart .cart-items__quantity-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .gc-cart .cart-items__remove-text {
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }

  .gc-cart .cart-note__label,
  .gc-cart .cart-discount__label {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
  }

  .gc-cart .cart-discount__input,
  .gc-cart .cart-note__instructions {
    border-color: rgba(42, 26, 18, 0.25);
    font-family: var(--gulmohar-sans);
  }

  .gc-cart .cart-discount__button {
    font-family: var(--gulmohar-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gulmohar-walnut);
    color: var(--gulmohar-cream);
  }

  /* ---------- recommendations: secondary cross-sell, not primary content —
     kept visually quieter than the cart/checkout above it ---------- */
  .gc-cart__recs {
    padding-top: clamp(48px, 6vw, 72px);
    border-top: 1px solid rgba(42, 26, 18, 0.08);
  }
  .gc-cart__recs-head { text-align: center; margin-bottom: 36px; }

  .gc-cart__recs-heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .gc-cart__recs-heading em { font-style: italic; color: var(--gulmohar-terracotta); }

  /* Grid must match .gc-grid__grid on the Collection page exactly — same
     component, same spacing, no cart-specific card styling. */
  .gc-cart__recs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 26px;
  }

  @media screen and (max-width: 989px) {
    .gc-cart__layout { grid-template-columns: 1fr; gap: 40px; }
    .gc-cart__summary { position: static; }
    .gc-cart__recs-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  }

  @media screen and (max-width: 749px) {
    .gc-cart .cart-items__table-row {
      grid-template-columns: 120px minmax(0, 1fr);
      grid-template-areas:
        'media details'
        'media quantity'
        'media price'
        'media error';
      row-gap: 8px;
    }

    .gc-cart .cart-items__price { justify-self: flex-start; text-align: left; }

    /* larger touch targets for +/- on mobile without changing the visual language */
    .gc-cart .quantity-selector { height: 40px; }
    .gc-cart .quantity-minus,
    .gc-cart .quantity-plus { width: 38px; height: 38px; }
    .gc-cart .quantity-selector input[type='number'] { width: 38px; height: 38px; }

    .gc-cart__reassurance { justify-content: flex-start; text-align: left; }
    .gc-cart__brand-line { text-align: left; }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-page (INDEX:38) */
.gulmohar-page { padding: clamp(56px, 8vw, 96px) 0; }
  .gulmohar-page__inner { max-width: 720px; }
  .gulmohar-page__eyebrow { margin-bottom: 18px; }
  .gulmohar-page__title {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 28px;
  }
  .gulmohar-page__content {
    font-family: var(--gulmohar-serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--gulmohar-walnut-soft);
  }
  .gulmohar-page__content p { margin: 0 0 1.2em; }
  .gulmohar-page__content a { color: var(--gulmohar-terracotta); text-decoration: underline; text-underline-offset: 3px; }
  .gulmohar-page__form { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
  .gulmohar-page__form-row { display: flex; gap: 16px; flex-wrap: wrap; }
  .gulmohar-page__form-row input { flex: 1; min-width: 180px; }
  .gulmohar-page__form input,
  .gulmohar-page__form textarea {
    font-family: var(--gulmohar-sans);
    font-size: 14px;
    background: transparent;
    border: 1px solid var(--gulmohar-walnut-faint);
    padding: 12px 14px;
    color: var(--gulmohar-walnut);
  }
  .gulmohar-page__form textarea { resize: vertical; }
  .gulmohar-page__form-submit {
    align-self: flex-start;
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--gulmohar-walnut);
    color: var(--gulmohar-cream);
    border: 0;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .gulmohar-page__form-submit:hover { background: var(--gulmohar-terracotta); }
  .gulmohar-page__form-success { color: var(--gulmohar-terracotta); }
  .gulmohar-page__form-error { color: #b3261e; }
/* END_SECTION:main-page */

/* START_SECTION:plp-editorial-spread (INDEX:40) */
.gulmohar-editorial {
    max-width: var(--gulmohar-content-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    min-height: 640px;
  }

  .gulmohar-editorial--media-right {
    grid-template-columns: 1fr 1.35fr;
  }

  .gulmohar-editorial--media-right .gulmohar-editorial__media {
    order: 2;
  }

  .gulmohar-editorial__media {
    position: relative;
    overflow: hidden;
    background: var(--gulmohar-sandstone-deep);
  }

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

  .gulmohar-editorial__placeholder {
    position: absolute;
    inset: 0;
    background: rgb(42 26 18 / 6%);
  }

  .gulmohar-editorial__caption {
    position: absolute;
    bottom: 26px;
    left: 30px;
    font-family: var(--gulmohar-mono);
    font-size: 8.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgb(246 236 213 / 70%);
  }

  .gulmohar-editorial__media--collage {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 24px 24px 24px 0;
    background: transparent;
  }

  .gulmohar-editorial--media-right .gulmohar-editorial__media--collage {
    padding: 24px 0 24px 24px;
  }

  .gulmohar-editorial__collage-item {
    position: relative;
    overflow: hidden;
    background: var(--gulmohar-sandstone-deep);
  }

  .gulmohar-editorial__collage-item--hero {
    grid-row: span 2;
  }

  .gulmohar-editorial__collage-item .gulmohar-editorial__img {
    position: absolute;
  }

  .gulmohar-editorial__collage-caption {
    position: absolute;
    bottom: 20px;
    right: 22px;
    font-family: var(--gulmohar-serif);
    font-style: italic;
    font-size: 18px;
    color: rgb(246 236 213 / 75%);
  }

  .gulmohar-editorial__content {
    /* Default (media on the left): content is the 2nd column, so its right
       edge is the true page edge and must equal the shared gutter; its left
       edge is the inner gap next to the image. */
    padding: var(--gulmohar-gap-lg) var(--gulmohar-gutter) var(--gulmohar-gap-lg) var(--gulmohar-editorial-gap);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .gulmohar-editorial--media-right .gulmohar-editorial__content {
    /* Media on the right: content is now the 1st column, so the gutter/gap
       sides flip to keep the same page edge aligned either way. */
    padding-left: var(--gulmohar-gutter);
    padding-right: var(--gulmohar-editorial-gap);
  }

  .gulmohar-editorial__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.32em;
    margin: 0 0 26px;
  }

  .gulmohar-editorial__heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 2.5vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0 0 26px;
    color: var(--color-foreground, currentColor);
  }

  .gulmohar-editorial__heading em {
    font-style: italic;
    color: var(--gulmohar-terracotta-soft);
  }

  .gulmohar-editorial__body {
    font-family: var(--gulmohar-serif);
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.82;
    margin: 0 0 22px;
    max-width: 460px;
  }

  .gulmohar-editorial__body p {
    margin: 0 0 12px;
  }

  .gulmohar-editorial__fine-print {
    font-family: var(--gulmohar-sans);
    font-size: 13px;
    line-height: 1.7;
    opacity: 0.6;
    margin: 0 0 34px;
    max-width: 440px;
  }

  .gulmohar-editorial__stats {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 22px 0;
    margin-top: 14px;
    border-top: 1px solid rgb(from currentColor r g b / 14%);
    border-bottom: 1px solid rgb(from currentColor r g b / 14%);
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
    flex-wrap: wrap;
  }

  .gulmohar-editorial__stat-sep {
    opacity: 0.5;
  }

  .gulmohar-editorial__actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 28px;
  }

  .gulmohar-editorial__button {
    font-family: var(--gulmohar-sans);
    font-size: 11.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .gulmohar-editorial__button--primary {
    background: var(--gulmohar-cream);
    color: var(--gulmohar-walnut);
    padding: 16px 30px;
    font-weight: 500;
  }

  .gulmohar-editorial__button--primary:hover {
    background: var(--gulmohar-terracotta-soft);
    color: var(--gulmohar-cream);
    opacity: 1;
  }

  .gulmohar-editorial__button--secondary {
    border-bottom: 1px solid rgb(from currentColor r g b / 55%);
    padding-bottom: 4px;
  }

  @media screen and (max-width: 989px) {
    .gulmohar-editorial,
    .gulmohar-editorial--media-right {
      grid-template-columns: 1fr;
    }

    .gulmohar-editorial__media {
      aspect-ratio: 4 / 4.4;
      order: 0;
    }

    .gulmohar-editorial__media--collage {
      aspect-ratio: 4 / 4.6;
      padding: 0;
    }

    .gulmohar-editorial__content {
      padding: 32px var(--gulmohar-gutter-mobile) 40px;
    }

    .gulmohar-editorial--media-right .gulmohar-editorial__content {
      padding-left: var(--gulmohar-gutter-mobile);
      padding-right: var(--gulmohar-gutter-mobile);
    }

    .gulmohar-editorial__stats {
      gap: 10px;
    }
  }
/* END_SECTION:plp-editorial-spread */

/* START_SECTION:quick-view-content (INDEX:43) */
.qv-content {
    --qv-cream: #f6ecd5;
    --qv-ink: #2a1a12;
    --qv-terracotta: #9e2a1e;
    --qv-serif: 'Newsreader', Georgia, serif;
    --qv-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --qv-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    display: grid;
    grid-template-columns: 1fr;
    /* Media row auto-sized to its own explicit height; info row gets exactly
       what's left. minmax(0, 1fr) — not 1fr alone — lets .qv-info shrink
       below its content size so its own overflow-y:auto can actually engage. */
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--qv-cream);
    color: var(--qv-ink);
    font-family: var(--qv-sans);
    /* A definite height (not max-height) so the grid row tracks get a real,
       bounded basis to stretch against instead of sizing to unclamped content
       first. The dialog itself is capped at max-height:92vh (quick-view-dialog
       .qv-dialog) and contains the 14px-tall drag handle (4px + 10px margin,
       snippets/quick-view-dialog.liquid .qv-dialog__handle) above this content
       — subtract that explicitly rather than also asking for a full 92vh here,
       which would double-count it and overflow the dialog. */
    height: calc(92vh - 14px);
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .qv-content {
      grid-template-columns: 58% 42%;
      grid-template-rows: minmax(0, 1fr);
      height: 86vh;
    }
  }

  /* ---------- media column ----------
     Mobile: .qv-media is auto-height, sized by .qv-media__main's own
     aspect-ratio:1/1 (a definite value once width is known) — per spec,
     "image area: top ~60–65% of sheet, aspect-ratio 1:1, full width". This is
     safe from the grid row-track/stretch runaway that hit the info column,
     because .qv-media now has its own dedicated grid row (`auto`) rather than
     sharing an implicit row with .qv-info's unbounded content. */
  .qv-media {
    position: relative;
    background: var(--qv-cream);
    min-height: 0;
  }

  @media screen and (min-width: 750px) {
    .qv-media {
      height: 100%;
    }
  }

  .qv-media__main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .qv-media__main {
      aspect-ratio: auto;
      height: 100%;
    }
  }

  .qv-media__main--empty {
    background: rgba(42, 26, 18, 0.06);
  }

  .qv-media__img-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .qv-media__img-wrap[data-qv-active] {
    opacity: 1;
  }

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

  /* Desktop vertical thumbnail rail */
  .qv-thumbs {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .qv-thumbs {
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }
  }

  .qv-thumb {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: none;
    cursor: pointer;
    overflow: hidden;
  }

  .qv-thumb.is-active {
    border-color: var(--qv-terracotta);
  }

  .qv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Mobile dot pagination */
  .qv-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
  }

  @media screen and (min-width: 750px) {
    .qv-dots {
      display: none;
    }
  }

  .qv-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(42, 26, 18, 0.3);
    cursor: pointer;
  }

  .qv-dot.is-active {
    background: var(--qv-terracotta);
  }

  /* ---------- info column ----------
     .qv-info is a flex column that fills the grid cell. .qv-info-scroll is the
     only part that scrolls (flex:1); the footer and "View Full Details" link
     are normal, fixed-size flex siblings after it, so they're always visible
     without needing position:sticky (which can't reliably coexist with a
     trailing non-sticky sibling — that sibling ends up rendered underneath it). */
  .qv-info {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .qv-info-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 20px;
  }

  @media screen and (min-width: 750px) {
    .qv-info-scroll {
      padding: 48px 44px;
    }
  }

  .qv-eyebrow {
    font-family: var(--qv-mono);
    font-size: 9px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--qv-terracotta);
    margin-bottom: 10px;
  }

  @media screen and (min-width: 750px) {
    .qv-eyebrow {
      font-size: 10px;
      letter-spacing: 0.3em;
      margin-bottom: 14px;
    }
  }

  .qv-name {
    font-family: var(--qv-serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
  }

  @media screen and (min-width: 750px) {
    .qv-name {
      font-size: 28px;
      line-height: 1.15;
      margin-bottom: 10px;
    }
  }

  .qv-price {
    font-family: var(--qv-sans);
    font-size: 14px;
    color: rgba(42, 26, 18, 0.72);
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  @media screen and (min-width: 750px) {
    .qv-price {
      font-size: 15px;
      margin-bottom: 18px;
    }
  }

  .qv-price__compare {
    color: rgba(42, 26, 18, 0.4);
    font-size: 0.85em;
  }

  .qv-desc {
    font-family: var(--qv-serif);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(42, 26, 18, 0.72);
    margin: 0 0 16px;
  }

  @media screen and (min-width: 750px) {
    .qv-desc {
      font-size: 14.5px;
      line-height: 1.55;
      margin-bottom: 22px;
    }
  }

  .qv-specs {
    border-top: 1px solid rgba(42, 26, 18, 0.1);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
  }

  @media screen and (min-width: 750px) {
    .qv-specs {
      padding-top: 16px;
      gap: 9px;
      margin-bottom: 22px;
    }
  }

  .qv-spec-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--qv-sans);
    font-size: 11px;
  }

  @media screen and (min-width: 750px) {
    .qv-spec-row {
      font-size: 11.5px;
    }
  }

  .qv-spec-label {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(42, 26, 18, 0.5);
  }

  .qv-spec-value {
    color: var(--qv-ink);
  }

  .qv-options {
    border-top: 1px solid rgba(42, 26, 18, 0.1);
    padding-top: 12px;
    margin-bottom: 16px;
  }

  @media screen and (min-width: 750px) {
    .qv-options {
      padding-top: 16px;
      margin-bottom: 24px;
    }
  }

  .qv-option-group + .qv-option-group {
    margin-top: 14px;
  }

  .qv-option-label {
    font-family: var(--qv-sans);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(42, 26, 18, 0.5);
    margin-bottom: 10px;
  }

  .qv-option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  @media screen and (min-width: 750px) {
    .qv-option-values {
      gap: 18px;
    }
  }

  .qv-option-value {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 0 0 4px;
    font-family: var(--qv-sans);
    font-size: 13px;
    color: var(--qv-ink);
    cursor: pointer;
  }

  .qv-option-value.is-selected {
    border-bottom-color: var(--qv-terracotta);
  }

  .qv-option-value[data-unavailable='true'] {
    color: rgba(42, 26, 18, 0.35);
    text-decoration: line-through;
  }

  .qv-add-btn {
    width: 100%;
    padding: 13px;
    border: 1px solid var(--qv-ink);
    background: var(--qv-ink);
    color: var(--qv-cream);
    font-family: var(--qv-sans);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  @media screen and (min-width: 750px) {
    .qv-add-btn {
      padding: 15px;
      font-size: 11px;
      letter-spacing: 0.18em;
    }
  }

  .qv-add-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .qv-add-btn--oos {
    background: transparent;
    border-color: var(--qv-terracotta);
    color: var(--qv-terracotta);
  }

  /* ---------- footer + "View Full Details": always-visible, fixed-size flex
     siblings after the scrollable .qv-info-scroll (see the info column comment
     above) — no position:sticky needed, so there's no risk of a trailing
     element rendering underneath a pinned bar. ---------- */
  .qv-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid rgba(42, 26, 18, 0.1);
    padding: 12px 20px 14px;
  }

  @media screen and (min-width: 750px) {
    .qv-footer {
      display: block;
      border-top: 0;
      padding: 0 44px;
    }
  }

  .qv-footer product-form-component,
  .qv-footer form {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .qv-footer product-form-component {
      flex: 1;
    }
  }

  .qv-price--footer {
    display: block;
    font-family: var(--qv-serif);
    font-size: 16px;
    color: var(--qv-ink);
    white-space: nowrap;
  }

  @media screen and (min-width: 750px) {
    /* Price already shown near the top (.qv-price--top) on desktop. */
    .qv-price--footer {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .qv-price--top {
      display: none;
    }
  }

  .qv-view-full {
    display: block;
    flex: none;
    text-align: center;
    font-family: var(--qv-sans);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-decoration: underline;
    color: rgba(42, 26, 18, 0.6);
    padding: 8px 20px 16px;
  }

  @media screen and (min-width: 750px) {
    .qv-view-full {
      padding: 14px 44px 44px;
    }
  }

  .qv-view-full:hover {
    color: var(--qv-terracotta);
  }
/* END_SECTION:quick-view-content */

/* START_SECTION:search-page (INDEX:45) */
.gulmohar-search { padding: clamp(56px, 8vw, 96px) 0; }
  .gulmohar-search__eyebrow { margin-bottom: 18px; }
  .gulmohar-search__title {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
  }
  .gulmohar-search__form {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin-bottom: 40px;
  }
  .gulmohar-search__input {
    flex: 1;
    font-family: var(--gulmohar-sans);
    font-size: 14px;
    background: transparent;
    border: 1px solid var(--gulmohar-walnut-faint);
    padding: 12px 16px;
    color: var(--gulmohar-walnut);
  }
  .gulmohar-search__submit {
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--gulmohar-walnut);
    color: var(--gulmohar-cream);
    border: 0;
    padding: 0 24px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .gulmohar-search__submit:hover { background: var(--gulmohar-terracotta); }
  .gulmohar-search__empty {
    font-family: var(--gulmohar-serif);
    font-style: italic;
    color: var(--gulmohar-walnut-soft);
  }
  .gulmohar-search__count {
    font-family: var(--gulmohar-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gulmohar-walnut-faint);
    margin-bottom: 24px;
  }
  .gulmohar-search__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 26px;
  }
  .gulmohar-search__other-card { display: block; }
  .gulmohar-search__other-title { font-family: var(--gulmohar-serif); font-size: 17px; margin-top: 6px; }
  @media screen and (max-width: 989px) {
    .gulmohar-search__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  }
  @media screen and (max-width: 749px) {
    .gulmohar-search__grid { grid-template-columns: 1fr; }
    .gulmohar-search__form { flex-direction: column; }
  }
/* END_SECTION:search-page */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:46) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_header-logo (INDEX:47) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: 2rem;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

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

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);
    transform-origin: left center;

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);

      /* Safety cap: the logo's own column now sizes to its content (see the
         --header-left fix in sections/header.liquid), but the menu + search +
         account/wishlist/cart column still claim a large, roughly fixed chunk
         of the row (measured ~1190px combined on this store's current header
         content, plus margin). Without this, a merchant setting a tall desktop
         logo_height on a narrower laptop viewport could push the row wider
         than the page and clip the action icons off-screen. Scales up
         automatically as the viewport grows past ~1440px, and never collapses
         smaller than 64px. */
      max-width: clamp(64px, calc(100vw - 1220px), 340px);
      height: auto;
    }
  }

  @media (hover: hover) {
    .header-logo:hover .header-logo__image {
      scale: 1.035;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    #header-component:not([data-sticky-state]) .header-logo__image {
      animation: header-logo-in 0.7s var(--hdr-ease, ease) both;
    }
  }

  @keyframes header-logo-in {
    from {
      opacity: 0;
      translate: 0 0.4rem;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:48) */
.menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  /* Drawer menu featured content */
  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: 500;
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--menu-top-level-font-color);
    transition: color var(--hdr-duration-fast, 0.28s) var(--hdr-ease, ease);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

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

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

  /* New nav presentation: an underline that draws in from the center, replacing a plain color swap */
  .menu-list__link-title {
    position: relative;
    padding-inline: calc(var(--hdr-space-lg, var(--gap-xl)) / 2);
  }

  .menu-list__link-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.2rem;
    width: calc(100% - var(--hdr-space-lg, var(--gap-xl)));
    height: 1px;
    background-color: currentColor;
    translate: -50% 0;
    scale: 0 1;
    opacity: 0;
    transition: scale var(--hdr-duration, 0.5s) var(--hdr-ease, ease), opacity var(--hdr-duration-fast, 0.28s) var(--hdr-ease, ease);
  }

  .menu-list__link:is(:hover, :focus-visible, [aria-expanded='true']) .menu-list__link-title::after,
  .menu-list__link--active .menu-list__link-title::after {
    scale: 1 1;
    opacity: 1;
  }

  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

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

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


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

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

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: calc(var(--layer-header-menu) - 1);
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--hdr-ease, var(--animation-easing));

    visibility: hidden;
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 24px 40px -28px rgb(var(--color-foreground-rgb) / 0.22);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--hdr-ease, var(--ease-out-cubic));
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

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

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

  .overflow-menu::part(overflow-list) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

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

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

    display: contents;
    white-space: normal;

    .menu-list__link {
      --submenu-content-opacity: 0;

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

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

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

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

  .header-menu {
    height: 100%;
  }
  .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    translate: 0 calc((1 - var(--submenu-content-opacity, 1)) * 0.6rem);
    transition: var(--submenu-content-animation), translate var(--hdr-duration, 0.5s) var(--hdr-ease, ease);
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--hdr-space-3xs, var(--padding-2xs)) 0;
    transition: color var(--hdr-duration-fast, 0.28s) var(--hdr-ease, ease), translate var(--hdr-duration-fast, 0.28s) var(--hdr-ease, ease);

    &:hover {
      color: var(--menu-child-active-font-color);
      translate: 0.3rem 0;
    }
  }

  /* Category headers in the dropdown speak in the display serif, italic — the editorial
     contrast against the sans child links is the point of this new dropdown treatment */
  .mega-menu__link--parent {
    font-family: var(--header-font-display, var(--menu-parent-font-family));
    font-style: italic;
    font-weight: 500;
    font-size: calc(var(--menu-parent-font-size) * 1.2);
    line-height: var(--menu-parent-font-line-height);
    text-transform: none;
    letter-spacing: 0;
    color: var(--menu-parent-font-color);
    margin-block-end: var(--hdr-space-2xs, 0.8rem);

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

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
  
/* Add this CSS to replace the existing badge styles */


.menu-badge {
  font-size: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  line-height: 1;
  background: #000;
  color: #fff;
  position: relative;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 2px; /* Space between badge and text */
  z-index: 2; /* Ensure badge is above other elements */
}

.menu-badge::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

/* Alternative: If you want the badge overlapping the text slightly */
.menu-badge.overlap {
  margin-bottom: -4px; /* Pulls text up slightly under badge */
}

/* Hide on mobile */
@media (max-width: 749px) {
  .menu-badge {
    display: none;
  }
}
/* ===== PERFECT FLOATING MENU BADGE ===== */

.menu-text-wrapper {
  position: relative;
  display: inline-block;
}

.menu-badge {
  position: absolute;
  top: -12px;      /* Controls height above text */
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  line-height: 1;
  background: #000;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* Bottom triangle */
.menu-badge::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

/* Hide on mobile */
@media (max-width: 749px) {
  .menu-badge {
    display: none;
  }
}

/* ============================================================
   "All Products" editorial mega menu — design handoff rebuild.
   Deliberately self-contained (own literal color/type tokens, own
   hover-panel component) rather than reusing .mega-menu__* / generic
   header-menu activate-deactivate: the handoff calls for exact colors,
   spacing and a 260ms cancelable close-delay that the generic system
   doesn't provide. Scoped entirely to .gc-mega-menu* selectors so it
   cannot affect any other nav item or the mobile drawer.

   Typography repointed 2026-08-16 to the site's Manrope + Cormorant
   Garamond system (Newsreader → Cormorant Garamond, JetBrains Mono →
   Manrope) — this block previously carried its own literal font-family
   values pointing at fonts that were removed from the theme elsewhere,
   so this panel kept rendering the old typefaces even after the
   sitewide swap.
   ============================================================ */

mega-menu-panel.gc-mega-menu {
  display: flex;
  align-items: center;
  height: 100%;
}

.gc-mega-menu__trigger {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  color: #2a1a12;
  transition: color 200ms ease, border-color 200ms ease;
}

/* Replace the theme's generic center-drawn underline with the handoff's
   simple bottom-border treatment for this one trigger only. */
.gc-mega-menu__trigger .menu-list__link-title::after {
  content: none;
}

mega-menu-panel[open] .gc-mega-menu__trigger,
.gc-mega-menu__trigger:hover,
.gc-mega-menu__trigger:focus-visible {
  color: #9e2a1e;
  border-bottom-color: #9e2a1e;
}

.gc-mega-menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px + var(--border-bottom-width, 0px));
  z-index: var(--layer-header-menu);
  background: #efebe3;
  border-bottom: 1px solid rgba(42, 26, 18, 0.1);
  box-shadow: 0 12px 24px rgba(42, 26, 18, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 220ms;
}

mega-menu-panel[open] .gc-mega-menu__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .gc-mega-menu__panel {
    transition-duration: 0ms;
  }
}

.gc-mega-menu__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: 36px 48px 40px;
  display: grid;
  grid-template-columns: 190px 210px 1fr;
  gap: 64px;
}

.gc-mega-menu__eyebrow {
  margin-bottom: 18px;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #9e2a1e;
}

.gc-mega-menu__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gc-mega-menu__cat-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 16.5px;
  color: #2a1a12;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}

.gc-mega-menu__cat-link:hover,
.gc-mega-menu__cat-link:focus-visible {
  color: #9e2a1e;
  border-bottom-color: rgba(158, 42, 30, 0.22);
}

.gc-mega-menu__cat-arrow {
  margin-left: 10px;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 12px;
  color: rgba(42, 26, 18, 0.4);
  transition: transform 200ms ease;
}

.gc-mega-menu__cat-link:hover .gc-mega-menu__cat-arrow {
  transform: translateX(4px);
}

.gc-mega-menu__view-all {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(42, 26, 18, 0.1);
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42, 26, 18, 0.55);
  text-decoration: none;
  transition: color 200ms ease;
}

.gc-mega-menu__view-all:hover,
.gc-mega-menu__view-all:focus-visible {
  color: #9e2a1e;
}

.gc-mega-menu__links--discover {
  gap: 10px;
}

.gc-mega-menu__discover-link {
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 14.5px;
  color: #2a1a12;
  text-decoration: none;
  transition: color 200ms ease;
}

.gc-mega-menu__discover-link:hover,
.gc-mega-menu__discover-link:focus-visible {
  color: #9e2a1e;
}

.gc-mega-menu__shopby {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(42, 26, 18, 0.1);
}

.gc-mega-menu__shopby-label {
  margin-bottom: 10px;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(42, 26, 18, 0.45);
}

.gc-mega-menu__links--shopby {
  gap: 8px;
}

.gc-mega-menu__shopby-link {
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 12.5px;
  color: rgba(42, 26, 18, 0.7);
  text-decoration: none;
  transition: color 200ms ease;
}

.gc-mega-menu__shopby-link:hover,
.gc-mega-menu__shopby-link:focus-visible {
  color: #9e2a1e;
}

.gc-mega-menu__statement {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(42, 26, 18, 0.1);
}

.gc-mega-menu__statement-line {
  margin: 0 0 4px;
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2a1a12;
}

.gc-mega-menu__statement-sub {
  margin: 0;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(42, 26, 18, 0.5);
}

.gc-mega-menu__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 20px;
}

.gc-mega-menu__tile {
  display: block;
  text-decoration: none;
}

.gc-mega-menu__tile-image {
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: rgba(42, 26, 18, 0.06);
}

.gc-mega-menu__tile-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.gc-mega-menu__tile:hover .gc-mega-menu__tile-image img,
.gc-mega-menu__tile:focus-visible .gc-mega-menu__tile-image img {
  transform: scale(1.02);
}

.gc-mega-menu__tile-badge {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9e2a1e;
}

.gc-mega-menu__tile-name {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 13.5px;
  color: #2a1a12;
}

.gc-mega-menu__tile-price,
.gc-mega-menu__tile-price-row {
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 11px;
  color: #2a1a12;
}

.gc-mega-menu__tile-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.gc-mega-menu__tile-compare {
  color: rgba(42, 26, 18, 0.42);
  text-decoration: line-through;
}

@media screen and (max-width: 989px) {
  .gc-mega-menu-item {
    display: none;
  }
}
/* END_BLOCK:_header-menu */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:50) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 300px) {
      grid-template-columns: 1fr;
    }
  }

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

    .account-actions :is(a.button, a.button-secondary):focus-visible {
      outline: none;
      overflow: visible;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inset: calc(-1 * var(--focus-outline-offset));
        border: var(--focus-outline-width) solid currentColor;
        border-radius: var(--style-border-radius-buttons-secondary);
        display: inherit;
      }
    }

    .account-actions a.button:focus-visible::after {
      border-color: var(--button-background-color);
      border-radius: var(--style-border-radius-buttons-primary);
    }
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:51) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
    anchor-name: --account-button-trigger;
  }

  .account-button__avatar {
    --account-button-size: 1.3rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--color-primary-button-background);
    font-size: var(--font-size--xs);
    font-weight: 500;
    color: var(--color-primary-button-text);
    text-transform: uppercase;
    line-height: 1;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:cart-products (INDEX:55) */
.cart-items {
    --cart-item-media-width-min: 6rem;
    --cart-item-media-width-max: 10rem;
    --cart-card-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --cart-card-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --cart-card-terracotta: #9E2A1E;
    --cart-card-walnut: #2A1A12;
    --cart-card-walnut-faint: rgba(42, 26, 18, 0.55);

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(var(--cart-item-media-width-min), 30cqi, var(--cart-item-media-width-max)) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

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

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

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

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

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

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

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

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

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

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

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

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

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

  .cart-items__category {
    font-family: var(--cart-card-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cart-card-terracotta);
    margin-block-end: var(--margin-3xs);
  }

  .cart-items__title {
    font-family: var(--cart-card-serif);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.15;
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
  }

  .cart-items__unit-price,
  .cart-items__unit-price * {
    font-family: var(--cart-card-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--cart-card-terracotta);
  }

  .cart-items__unit-price .compare-at-price {
    opacity: 0.55;
    font-size: 0.85em;
    margin-inline-end: 6px;
  }

  .cart-items__variant {
    display: inline-block;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
    border-color: var(--cart-card-walnut-faint);
    border-radius: 999px;
    overflow: hidden;
  }

  .cart-items__quantity .quantity-selector input {
    font-family: var(--cart-card-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .cart-items__quantity .quantity-minus,
  .cart-items__quantity .quantity-plus {
    color: var(--cart-card-walnut-faint);
    transition: color 0.2s ease;
  }

  .cart-items__quantity .quantity-minus:hover,
  .cart-items__quantity .quantity-plus:hover {
    color: var(--cart-card-terracotta);
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--cart-card-walnut-faint);
    width: auto;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: flex-start;
    gap: 6px;
    box-shadow: none;
    padding: 0;
    transition: color 0.2s ease;
  }

  .cart-items__remove:hover {
    color: var(--cart-card-terracotta);
  }

  .cart-items__remove-text {
    font-family: var(--cart-card-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: var(--cart-item-media-width-max) 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    overflow-wrap: break-word;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:56) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:gc-product-card (INDEX:60) */
/* Product card image gallery: one horizontal track holds every product
     image (so desktop hover and mobile swipe share the exact same <img>
     elements — nothing is fetched twice). Each slide reuses the shared
     .gulmohar-media__img rule for position/object-fit/aspect-ratio, so
     card dimensions and cropping are untouched.

     Desktop (hover + fine pointer): overflow-x stays hidden so the track
     can't be mouse/trackpad-dragged — it only ever moves programmatically
     (see product-card-gallery.js), which advances it to slide 2 on
     mouseenter and back to slide 1 on mouseleave, exactly like the old
     opacity crossfade but via a smooth native scroll.

     Touch (no hover / coarse pointer): overflow-x switches to a native
     snap-scroll, so every image is swipeable with zero custom touch JS —
     the browser's own scroll-vs-tap disambiguation means a swipe never
     accidentally opens the product page. */
  .gc-card__gallery-wrap {
    display: block;
    position: absolute;
    inset: 0;
  }

  .gc-card__gallery {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gc-card__gallery::-webkit-scrollbar { display: none; }

  .gc-card__gallery-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
  }

  @media (hover: none), (pointer: coarse) {
    .gc-card__gallery {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .gc-card__gallery-slide { scroll-snap-align: start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gc-card__gallery { scroll-behavior: auto; }
  }

  /* Pagination dots: only ever rendered when a product has 2+ images
     (see the Liquid above), so a single-image card never shows them.
     Kept tiny and translucent per the brand's editorial restraint. */
  .gc-card__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    pointer-events: none;
  }

  .gc-card__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(42, 26, 18, 0.12);
    transform: scale(1);
    transition: transform 0.3s ease, background 0.3s ease;
  }

  .gc-card__dot.is-active {
    background: var(--gulmohar-cream, #f6ecd5);
    transform: scale(1.4);
  }
/* END_SNIPPET:gc-product-card */

/* START_SNIPPET:header-actions (INDEX:64) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

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

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;

    position-anchor: --account-button-trigger;
    border-radius: 1.2rem;
    margin: 0;
    left: unset;
    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: 0 20px 48px -16px rgb(var(--color-foreground-rgb) / 0.28);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
    top: calc(anchor(bottom) + var(--header-padding));
    right: anchor(right);

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }

    @supports not (position-anchor: --account-button-trigger) {
      top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
      right: calc(var(--anchor-right) * 1px);
    }

    @supports not selector(:popover-open) {
      &.\:popover-open {
        --account-popover-opacity: 1;
        --account-popover-y: 0px;
      }
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }

    .account-popover__panel:popover-open {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }
  }

  .account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .dialog-drawer.account-drawer__dialog[open] {
    --start-x: 0px;
    --end-x: 0px;
    --start-y: 100%;
    --start-opacity: 1;
  }

  .dialog-drawer.account-drawer__dialog.dialog-closing {
    --start-x: 0px;
    --end-x: 0px;
    --end-y: 100%;
    --start-opacity: 1;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

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

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }

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

  header-actions {
    display: flex;

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

  /* Same outer box model as .account-button (44x44 touch target, reset button
     chrome) — the icon itself is sized by the existing .header-actions__action
     svg-wrapper/svg rules above, same as the account and cart icons. */
  .wishlist-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: color var(--hdr-duration-fast) var(--hdr-ease);
  }

  .wishlist-button[aria-pressed='true'] {
    color: var(--color-primary-button-background, currentColor);
  }

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

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

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

    position: relative;
  }

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

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

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

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

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

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

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

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:65) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    border-radius: 50%;
    transition: background-color var(--hdr-duration-fast, 0.28s) var(--hdr-ease, ease);
  }

  @media (hover: hover) {
    .menu-drawer-container .header__icon--summary:hover {
      background-color: rgb(var(--color-foreground-rgb) / 0.06);
    }
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: var(--menu-top-level-font-line-height);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

  .menu-drawer__menu-item--parent {
    font-family: var(--header-font-display, var(--menu-parent-font-family));
    font-style: italic;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: var(--menu-parent-font-line-height);
    text-transform: none;
    letter-spacing: 0;
    color: var(--menu-parent-font-color);

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
  @media screen and (max-width: 768px) {
    .menu-drawer__menu-item--mainlist {
      font-size: 1.4rem;
      line-height: 1.4;
    }

    .menu-drawer__menu-item--child {
      font-size: 1.3rem;
    }
  }

  .menu-drawer__backdrop {
    -webkit-backdrop-filter: blur(4px) brightness(0.75);
    backdrop-filter: blur(4px) brightness(0.75);
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:home-product-card (INDEX:67) */
.gh-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    transition: transform 0.25s ease;
  }

  .gh-card:hover { transform: translateY(-4px); }

  .gh-card__media { z-index: 0; }

  .gh-card__img--hover {
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  product-card:is(:hover, :focus-within) .gh-card__img--hover { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .gh-card__img--hover { transition: none; }
  }

  .gh-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .gh-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: var(--gh-cream);
    padding: 4px 10px;
    font-family: var(--gh-sans);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gh-burgundy);
  }

  /* Material annotation: a single-line cream strip, top-right, matching the
     approved reference exactly — wide and shallow, not the earlier stacked
     square. Background/border/inset reuse the same translucent-cream +
     hairline-border language as the theme's other small top-corner
     annotations; the color is the brand accent per the brief. Only
     rendered when is_sterling_silver is true, so it never appears on a
     non-silver piece. white-space: nowrap is deliberate — it must stay one
     line, never wrap into a tall stack, so mobile shrinks the type
     instead of letting it break. */
  .gh-card__material {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(245, 238, 221, 0.7);
    border: 1px solid rgba(30, 21, 18, 0.16);
    padding: 5px 10px;
    font-family: var(--gh-mono);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gh-burgundy);
    pointer-events: none;
  }

  /* If a product ever carries both the new/bestseller badge and the
     material annotation, drop the annotation below the badge instead of
     overlapping it — doesn't occur in the current catalog, kept as a
     defensive rule since both sit top-right. */
  .gh-card__material--stacked { top: 38px; }

  @media screen and (max-width: 460px) {
    .gh-card__material { padding: 3px 6px; font-size: 6.5px; letter-spacing: 0.05em; }
  }

  .gh-card__info { display: block; }

  .gh-card__name {
    font-family: var(--gh-serif);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
  }

  .gh-card__price,
  .gh-card__price .price {
    font-family: var(--gh-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: var(--gh-burgundy);
  }

  .gh-card__descriptor {
    font-family: var(--gh-sans);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gh-ink-55);
    margin-top: 6px;
  }

  .gh-card--empty .gh-art { opacity: 0.6; }
/* END_SNIPPET:home-product-card */

/* START_SNIPPET:localization-form (INDEX:71) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:predictive-search-products-list (INDEX:78) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:quantity-selector (INDEX:82) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:83) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

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

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:84) */
/* Position the Quick View button in the top right */
.quick-add__button--view {
  top: var(--quick-add-offset);
  right: var(--quick-add-right);
  bottom: auto; 
  width: auto; /* Allow it to expand for text on hover */
  min-width: var(--button-size-md);
  justify-content: flex-start;
}

/* Fix: Ensure the text becomes visible on hover for the view button */
.quick-add__button--view:is(:hover, :focus-visible) {
  .add-to-cart-text__content {
    grid-template-columns: 1fr;
    
    span span {
      opacity: 1;
      translate: 0 0;
      filter: blur(0);
    }
  }
}

/* Ensure the button is clickable and visible on card hover */
product-card:is(:hover, :focus-within) .quick-add__button--view {
  opacity: 1;
  display: flex; /* Force display on hover */
}

/* Adjust the existing bottom button if needed to ensure no overlap */
.quick-add__button--add, 
.quick-add__button--choose {
  bottom: var(--quick-add-bottom);
  /* keeps your existing right positioning */
}
  /* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }



/* =====================================
   Add To Cart + Quick View Side by Side
   ===================================== */

/* .quick-add__button--add {
  display: flex !important;
  opacity: 1 !important;
  right: 65px !important;
  z-index: 2;
}

.quick-add__button--choose {
  display: flex !important;
  opacity: 1 !important;
  right: 12px !important;
  z-index: 2;
}
/* END_SNIPPET:quick-add */

/* START_SNIPPET:quick-view-dialog (INDEX:85) */
#quick-view-dialog {
    display: contents;
  }

  .qv-dialog {
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
  }

  .qv-dialog::backdrop {
    background: rgba(42, 26, 18, 0.4);
    backdrop-filter: blur(20px);
  }

  @media screen and (min-width: 750px) {
    .qv-dialog {
      width: min(1040px, 92vw);
      box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
    }
  }

  @media screen and (max-width: 749px) {
    .qv-dialog {
      position: fixed;
      inset: auto 0 0 0;
      width: 100%;
      max-height: 92vh;
    }
  }

  .qv-dialog[open] {
    animation: qvRiseIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .qv-dialog.dialog-closing {
    animation: qvRiseOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  @keyframes qvRiseIn {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes qvRiseOut {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .qv-dialog[open],
    .qv-dialog.dialog-closing {
      animation: none;
    }
  }

  .qv-dialog__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #2a1a12;
    font-family: 'Manrope', sans-serif;
    padding: 4px;
  }

  .qv-dialog__close:hover,
  .qv-dialog__close:focus-visible {
    color: #9e2a1e;
  }

  @media screen and (max-width: 749px) {
    .qv-dialog__close {
      top: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(246, 236, 213, 0.85);
      font-size: 16px;
    }
  }

  .qv-dialog__handle {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .qv-dialog__handle {
      display: block;
      width: 36px;
      height: 4px;
      background: rgba(42, 26, 18, 0.25);
      border-radius: 2px;
      margin: 10px auto 0;
    }
  }

  .qv-dialog__content {
    max-height: inherit;
  }
/* END_SNIPPET:quick-view-dialog */

/* START_SNIPPET:quick-view-skeleton (INDEX:86) */
.qv-skeleton {
    display: grid;
    grid-template-columns: 1fr;
    background: #f6ecd5;
    min-height: 420px;
  }

  @media screen and (min-width: 750px) {
    .qv-skeleton {
      grid-template-columns: 58% 42%;
      min-height: 520px;
    }
  }

  .qv-skeleton__media {
    min-height: 260px;
  }

  @media screen and (min-width: 750px) {
    .qv-skeleton__media {
      min-height: 100%;
    }
  }

  .qv-skeleton__info {
    padding: 22px 20px;
  }

  @media screen and (min-width: 750px) {
    .qv-skeleton__info {
      padding: 48px 44px;
    }
  }

  .qv-shimmer,
  .qv-skeleton__line {
    background: linear-gradient(90deg, rgba(42, 26, 18, 0.05), rgba(42, 26, 18, 0.12), rgba(42, 26, 18, 0.05));
    background-size: 200% 100%;
    animation: qvShimmer 1.4s ease-in-out infinite;
  }

  @keyframes qvShimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .qv-shimmer,
    .qv-skeleton__line {
      animation: none;
    }
  }
/* END_SNIPPET:quick-view-skeleton */

/* START_SNIPPET:quick-view-trigger (INDEX:87) */
quick-view-trigger {
    display: block;
  }

  .qv-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    padding-top: 11px;
    border: 0;
    /* Stronger than a purely decorative hairline — this line is the only
       divider between it and Add to Cart, so it needs real presence. */
    border-top: 1px solid rgba(42, 26, 18, 0.18);
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--gulmohar-sans, 'Manrope', sans-serif);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /* Full ink at rest, not a faint tint — the row was already always in the
       DOM (never hover-gated), it just read as illegible fine print. This is
       the actual fix for discoverability, not a hover mechanic. */
    color: #2a1a12;
    transition: color 0.15s ease;
  }

  .qv-trigger:hover,
  .qv-trigger:focus-visible {
    color: #9e2a1e;
  }

  .qv-trigger__icon {
    flex: none;
  }
/* END_SNIPPET:quick-view-trigger */

/* START_SNIPPET:resource-card (INDEX:88) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    /* Explicit, rather than relying on the shared .paragraph/.h5 utility
       classes for this, so this card reliably speaks the site's Manrope
       voice regardless of how those shared utility classes resolve. */
    font-family: var(--font-manrope, 'Manrope', sans-serif);
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
    font-family: var(--font-manrope, 'Manrope', sans-serif);
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:search-modal (INDEX:91) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:92) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

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

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

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

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

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

/* START_SNIPPET:skip-to-content-link (INDEX:94) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-controls (INDEX:97) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

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

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:99) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:111) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */