/** Shopify CDN: Minification failed

Line 1700: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; }

  .about-cta__business { margin: 38px auto 0; color: var(--ga-ink-70); font-size: 12px; line-height: 1.75; }
  .about-cta__business p { margin: 0 0 4px; }
  .about-cta__business a { color: inherit; text-underline-offset: 3px; }
  .about-cta__business a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

  @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, 36, 32, 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(245, 242, 234, 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, 36, 32, 0.1);
    border-bottom: 1px solid rgba(42, 36, 32, 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, 36, 32, 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, 36, 32, 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='%232A2420' 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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(245, 242, 234, 0.7);
    border: 1px solid rgba(42, 36, 32, 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.

     Every card's title box must be exactly 2 lines tall so Add to Bag/Quick
     View align across a row regardless of title length — see
     assets/collection-interactions.js's fixTitleLines(), which measures each
     title's natural (unclamped) line count and forces a short one-line title
     to break before its last word. -webkit-line-clamp here still does the
     truncation+ellipsis work for a title that would naturally run 3+ lines;
     JS only ever acts on genuinely 1-line titles. min-height is a pre-JS/
     no-JS fallback so the box is never shorter than 2 lines even before that
     script runs — once it runs, forced titles fill that height with real
     text instead of empty space. */
  .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;
    min-height: calc(1.22em * 2);
  }

  /* Toggled on briefly by fixTitleLines() to measure a title's true,
     unclamped line count — clamp actively caps rendered height at 2 lines,
     which would make a naturally-3-line title indistinguishable from a
     naturally-2-line one if measured while clamped. */
  .gc-card__name--measuring {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    min-height: 0;
  }

  /* ——— 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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.
       Title stays clamped to 2 lines here too (was 3) — every card's title
       box must be the same height for Add to Bag/Quick View to align across
       a row, and fixTitleLines() (assets/collection-interactions.js) now
       forces short titles to genuinely fill 2 lines rather than relying on
       a taller clamp to visually average out the difference. */
    .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: 2;
      margin-bottom: 4px;
      min-height: calc(1.18em * 2);
    }

    .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, 36, 32, 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: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --header-font-text: 'Instrument Sans', -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: #F2F0E9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
      0 1px 0 0 rgb(42 36 32 / 0.12);
  }

  @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(244, 241, 234, 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-best-sellers (INDEX:18) */
.gh-bestsellers {
    padding: clamp(56px, 9vw, 104px) clamp(16px, 4vw, 44px) clamp(48px, 8vw, 100px);
    --bs-gap-x: 12px;
    --bs-cols: 2;
  }

  /* Flex-wrap (not grid) so a short last row — 4 + 2 on desktop — is centred
     under the heading at the same card width instead of hugging the left. */
  .gh-bestsellers__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px var(--bs-gap-x);
    max-width: 1240px;
    margin: clamp(32px, 5vw, 56px) auto 0;
  }

  .gh-bestsellers__item {
    flex: 0 0 calc((100% - (var(--bs-cols) - 1) * var(--bs-gap-x)) / var(--bs-cols));
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .gh-bestsellers__item > .pdp-rcard { flex: 1 1 auto; }

  /* Reference card has no Quick View row; the chip is the add-to-bag control. */
  .gh-bestsellers .qv-trigger { display: none; }

  /* Products 7-8 are desktop-only so 2- and 3-column layouts end on a full row of 6. */
  .gh-bestsellers__item--desktop { display: none; }

  .gh-bestsellers__foot { text-align: center; margin-top: clamp(32px, 5vw, 48px); }

  @media screen and (min-width: 750px) {
    .gh-bestsellers { --bs-cols: 3; --bs-gap-x: 20px; }
  }

  @media screen and (min-width: 990px) {
    .gh-bestsellers { --bs-cols: 4; --bs-gap-x: 24px; }
    .gh-bestsellers__item--desktop { display: flex; }
    .gh-bestsellers__grid { row-gap: 44px; }
  }
/* END_SECTION:home-best-sellers */

/* START_SECTION:home-care (INDEX:19) */
.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.
     The remaining promises 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:20) */
.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:21) */
.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-genuine-reviews (INDEX:22) */
.tgc-customer-voices { padding: clamp(56px, 8vw, 96px) 20px; background: #f6f2ec; color: #372d28; }
  .tgc-customer-voices__inner { max-width: 1200px; margin: 0 auto; text-align: center; }
  .tgc-customer-voices__eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
  .tgc-customer-voices__title { margin: 0 0 32px; font-family: var(--gh-serif, Georgia, serif); font-size: clamp(30px, 4vw, 44px); font-weight: 400; line-height: 1.16; }
  .tgc-customer-voices__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
  .tgc-customer-voices__card { display: grid; grid-template-columns: minmax(150px, 37%) minmax(0, 1fr); min-width: 0; min-height: 250px; background: #fbf9f5; border: 1px solid rgba(55,45,40,.14); }
  .tgc-customer-voices__card:nth-child(even) { background: #f0e9e0; }
  .tgc-customer-voices__photo { position: relative; min-height: 100%; overflow: hidden; background: #e9e2d9; }
  .tgc-customer-voices__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
  .tgc-customer-voices__copy { padding: clamp(20px, 2.5vw, 32px); }
  .tgc-customer-voices__stars { font-size: 19px; line-height: 1; letter-spacing: .12em; color: #946f50; }
  .tgc-customer-voices__quote { margin: 18px 0 20px; font-family: var(--gh-serif, Georgia, serif); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; }
  .tgc-customer-voices__quote p { margin: 0; }
  .tgc-customer-voices__byline { margin: 0 0 14px; font-size: 13px; font-weight: 600; }
  .tgc-customer-voices__product { display: inline-block; color: inherit; font-size: 12px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
  .tgc-customer-voices__product:focus-visible, .tgc-customer-voices__link:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
  .tgc-customer-voices__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin: 0 auto; }
  .tgc-customer-voices__grid--single .tgc-customer-voices__card { grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; }
  .tgc-customer-voices__grid--single .tgc-customer-voices__copy { display: flex; flex-direction: column; justify-content: center; }
  .tgc-customer-voices__invitation { max-width: 560px; margin: 0 auto 20px; font-family: var(--gh-sans, sans-serif); font-size: 15px; line-height: 1.7; }
  .tgc-customer-voices__link { display: inline-block; padding: 8px 0; border-bottom: 1px solid currentColor; color: inherit; font-family: var(--gh-sans, sans-serif); font-size: 13px; text-decoration: none; }
  .tgc-customer-voices__feed { margin-top: 32px; text-align: left; }
  @media (max-width: 989px) and (min-width: 750px) { .tgc-customer-voices__card { grid-template-columns: 1fr; } .tgc-customer-voices__photo { height: 230px; min-height: 0; } }
  @media (max-width: 749px) {
    .tgc-customer-voices { padding: 56px 20px; }
    .tgc-customer-voices__title { margin-bottom: 24px; }
    .tgc-customer-voices__grid { grid-template-columns: 1fr; gap: 16px; }
    .tgc-customer-voices__card, .tgc-customer-voices__grid--single .tgc-customer-voices__card { grid-template-columns: minmax(115px, 34%) minmax(0, 1fr); min-height: 200px; }
    .tgc-customer-voices__copy { padding: 18px; }
    .tgc-customer-voices__quote { font-size: 18px; margin: 14px 0; }
  }
  @media (max-width: 420px) {
    .tgc-customer-voices__card, .tgc-customer-voices__grid--single .tgc-customer-voices__card { grid-template-columns: 1fr; }
    .tgc-customer-voices__photo { height: 220px; min-height: 0; }
  }
/* END_SECTION:home-genuine-reviews */

/* START_SECTION:home-gift-banner (INDEX:23) */
.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:24) */
.gh-diff {
    padding: clamp(64px, 9vw, 120px) 0;
    background: var(--gh-bg-main);
  }

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

  /* ---------- 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);
  }

  /* ---------- 5 · 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);
  }

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

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

  @media screen and (max-width: 560px) {
    .gh-diff__scale-ticks span:nth-child(2),
    .gh-diff__scale-ticks span:nth-child(3) { display: none; }

    /* 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 across the two remaining blocks in this section. Trim
       it moderately here rather than removing it — they still need
       visible separation from one another. */
    .gh-diff__signature,
    .gh-diff__scale-wrap {
      margin-bottom: 32px;
    }
  }
/* END_SECTION:home-gulmohar-difference */

/* START_SECTION:home-hero (INDEX:25) */
/* 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, #F2F0E9 0%, #E3DED2 55%, #DDD6C6 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: #F4F1EA;
    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: #F4F1EA;
    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); }

  /* Mobile-only heading/CTA override (see has-gh-mobile-hero above). Hidden
     at every width by default; only a hero that sets a mobile heading ever
     shows them, and only below the mobile breakpoint.
     .gh-hero__ctas--mobile needs the compound .gh-hero__ctas.gh-hero__ctas--mobile
     selector, not the class alone: the element carries both classes, and the
     existing unconditional ".gh-hero__ctas { display: flex; }" rule below is
     the same one-class specificity, so whichever of the two came later in
     the file would otherwise win regardless of order intent — verified this
     the naive way lost the tie and leaked the mobile button onto desktop. */
  .gh-hero__heading--mobile,
  .gh-hero__ctas.gh-hero__ctas--mobile { display: none; }

  .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(244, 241, 234, 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: #F4F1EA;
    background: transparent;
    border: 1px solid rgba(244, 241, 234, 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(244, 241, 234, 0.12);
    border-color: #F4F1EA;
    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(244, 241, 234, 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(244, 241, 234, 0.75);
  }

  .gh-hero__scroll-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, rgba(244, 241, 234, 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) {
    /* svh, not dvh: the hero is sized to the initial (toolbar-expanded)
       viewport and stays put when the mobile browser's toolbar collapses,
       instead of resizing on every scroll. */
    .gh-hero { height: 100svh; }

    /* The mobile art is wrapped in <picture> (inline, auto height), so the
       img's "height: 100%" had nothing to resolve against and the image sat
       at its natural ~700px height. Whenever the hero grew past that (tall
       phones, toolbar collapsing under the old 100dvh) the leftover strip
       showed the hero's dark --gh-ink background between the hero and the
       next section. Making the picture fill the media box lets the img's
       existing height:100% + object-fit:cover always cover the hero. */
    .gh-hero__media picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    .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; }

    /* Mobile-only override, scoped to has-gh-mobile-hero so no other hero
       instance (none currently, but the section type is reusable) is
       affected — swap the desktop heading/description/two CTAs/trust line
       for the single mobile heading + CTA, and anchor that shorter block
       higher up so it clears the model's face and sits over the clothing
       rather than at the very bottom edge. */
    .gh-hero.has-gh-mobile-hero .gh-hero__heading--desktop,
    .gh-hero.has-gh-mobile-hero .gh-hero__sub,
    .gh-hero.has-gh-mobile-hero .gh-hero__ctas--desktop,
    .gh-hero.has-gh-mobile-hero .gh-hero__trust { display: none; }

    .gh-hero.has-gh-mobile-hero .gh-hero__heading--mobile { display: block; }
    .gh-hero.has-gh-mobile-hero .gh-hero__ctas--mobile { display: flex; }

    .gh-hero.has-gh-mobile-hero .gh-hero__content {
      align-items: flex-end;
      padding-bottom: calc(26vh + env(safe-area-inset-bottom));
    }

    /* .gh-hero__inner is a row-flex item with no flex-grow, so by default it
       shrink-wraps to its narrowest child (the heading) rather than filling
       the available content width — which left the CTA's 70% computed
       against that narrow box instead of the hero's actual content width.
       Giving it an explicit full width fixes that; the heading, already
       hard-wrapped by its own \n (not by container width), is unaffected —
       still centered, just with correct room on either side. */
    .gh-hero.has-gh-mobile-hero .gh-hero__inner { width: 100%; }

    .gh-hero.has-gh-mobile-hero .gh-hero__heading {
      margin-bottom: 24px;
      font-size: clamp(2.1rem, 1.5rem + 3vw, 3rem);
    }

    .gh-hero.has-gh-mobile-hero .gh-hero__cta-mobile {
      width: 70%;
      max-width: 300px;
      /* .gh-btn's shared padding/tracking (36px sides, 0.24em) is tuned for
         its longer desktop labels; at the narrowest supported width (320px)
         it wrapped "Shop Collection" onto two lines. Tightened here, scoped
         to this one button only, matching the tracking already used for the
         mobile CTA in sections/home-occasion.liquid. */
      padding-left: 20px;
      padding-right: 20px;
      letter-spacing: 0.2em;
      white-space: nowrap;
    }
  }

  @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:26) */
.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:27) */
.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:28) */
.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(244, 241, 234, 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:29) */
.gb-shop-budget {
    /* Colour + type inherited from the homepage design system
       (gulmohar-home-fonts). Literal fallbacks only apply if this section
       ever renders outside the .gulmohar-home token context. */
    --gb-serif: var(--gh-serif, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
    --gb-sans: var(--gh-sans, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --gb-ink: var(--gh-ink, #1E1512);
    --gb-accent: var(--gh-burgundy, #4B1F23);
    --gb-muted: var(--gh-ink-62, rgba(30, 21, 18, 0.62));
    --gb-muted-strong: var(--gh-ink-70, rgba(30, 21, 18, 0.70));
    --gb-faint: var(--gh-ink-48, rgba(30, 21, 18, 0.48));
    --gb-rule: rgba(75, 31, 35, 0.7);
    --gb-frame-bg: var(--gh-cream, #F4F1EA);

    background: var(--gh-bg-main, #F2F0E9);
    padding: 104px 0;
    color: var(--gb-ink);
  }

  .gb-shop-budget * { box-sizing: border-box; }
  .gb-shop-budget a { color: inherit; text-decoration: none; }

  .gb-head {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 44px;
    text-align: center;
  }

  .gb-heading {
    font-family: var(--gb-serif);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--gb-ink);
  }

  /* Subcopy matches the homepage's section lede: italic Cormorant, not sans. */
  .gb-sub {
    font-family: var(--gb-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 19px);
    line-height: 1.6;
    color: var(--gb-muted);
    margin: 13px auto 0;
    max-width: 32rem;
  }

  /* Native horizontal scroll rail — no JS carousel. */
  .gb-rail {
    margin: 66px auto 0;
    max-width: 1080px;
    display: flex;
    gap: 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 44px;
    padding: 0 44px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gb-rail::-webkit-scrollbar { display: none; }

  /* Each .gb-tile IS the link (the whole card is one <a>), so an over-swipe
     past either end of the rail — dragging past the first card, or past the
     last — has nowhere left to scroll. With nothing to consume the gesture,
     Chrome interprets it as its own edge-swipe "navigate back/forward"
     shortcut instead, leaving the section entirely (verified: reproduces
     with a real over-swipe past the first card, sends the tab to
     about:blank). overscroll-behavior on the rail itself does not stop this
     (same finding as the PDP gallery carousel) — it only stops once the
     document root has it and the rail is left at its default. Scoped to
     pages that actually render this rail, same approach used there. */
  html:has(.gb-shop-budget .gb-rail) { overscroll-behavior-x: contain; }

  .gb-tile {
    flex: 0 0 max(200px, calc((100% - 144px) / 4));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
  }

  .gb-tile:focus-visible {
    outline: 1px solid var(--gb-accent);
    outline-offset: 10px;
  }

  /* Wraps rule/price/desc/cta so the mobile-only peek behaviour (below) can
     fade the whole info block as one unit without affecting .gb-frame. Opacity
     is always 1 outside the mobile breakpoint — see the section's own <script>,
     which only ever sets an inline opacity when its matchMedia query matches. */
  .gb-info {
    opacity: 1;
    transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .gb-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gb-frame-bg);
  }

  .gb-frame__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .gb-frame__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    font-family: var(--gb-sans);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gb-faint);
    transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .gb-tile:hover .gb-frame > *,
  .gb-tile:focus-visible .gb-frame > * { transform: scale(1.025); }

  .gb-rule {
    margin-top: 26px;
    width: 24px;
    height: 1px;
    background: var(--gb-rule);
    transition: width 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .gb-tile:hover .gb-rule,
  .gb-tile:focus-visible .gb-rule { width: 44px; }

  .gb-price {
    font-family: var(--gb-serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 16px 0 0;
  }

  .gb-price__under {
    font-size: 13px;
    color: var(--gb-muted);
  }

  .gb-price__amt { color: var(--gb-accent); }

  .gb-desc {
    font-family: var(--gb-sans);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gb-muted);
    margin: 10px 0 0;
    max-width: 24ch;
    min-height: 40px;
  }

  .gb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-top: 26px;
    font-family: var(--gb-sans);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gb-muted-strong);
    transition: color 300ms ease;
  }

  .gb-tile:hover .gb-cta,
  .gb-tile:focus-visible .gb-cta { color: var(--gb-accent); }

  .gb-tile:hover .gb-cta__label,
  .gb-tile:focus-visible .gb-cta__label {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }

  .gb-cta__arrow {
    display: inline-block;
    transition: transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .gb-tile:hover .gb-cta__arrow,
  .gb-tile:focus-visible .gb-cta__arrow { transform: translateX(4px); }

  @media (prefers-reduced-motion: reduce) {
    .gb-frame__img,
    .gb-frame__ph,
    .gb-cta__arrow,
    .gb-rule,
    .gb-info { transition: none !important; }

    .gb-tile:hover .gb-frame > *,
    .gb-tile:focus-visible .gb-frame > * { transform: none; }
  }

  /* ============ MOBILE (design_handoff_shop_by_budget_mobile/README.md) ============
     Same markup/classes as desktop, above — this only changes what fits on a
     phone: the rail becomes a one-card-plus-peek swipe carousel (flex-basis
     81vw instead of a 4-up row) and every size below scales down to match.
     Desktop rules above are untouched; nothing here is duplicated elsewhere. */
  @media screen and (max-width: 749px) {
    .gb-shop-budget { padding: 64px 0 72px; }

    .gb-head { padding: 0 20px; }

    .gb-heading {
      font-size: clamp(24px, 6vw, 40px);
      line-height: 1.12;
      letter-spacing: -0.01em;
    }

    .gb-sub { margin-top: 10px; }

    .gb-rail {
      margin: 40px auto 0;
      max-width: 100%;
      gap: 18px;
      padding: 0 20px;
      scroll-padding-left: 20px;
    }

    .gb-tile { flex: 0 0 81vw; }

    .gb-rule { margin-top: 20px; }

    .gb-price {
      font-size: 17px;
      margin-top: 12px;
    }

    .gb-price__under { font-size: 12px; }

    .gb-desc {
      font-size: 12px;
      margin-top: 8px;
      min-height: 36px;
    }

    .gb-cta {
      margin-top: 20px;
      font-size: 9.5px;
      letter-spacing: 0.2em;
    }
  }
/* END_SECTION:home-occasion */

/* START_SECTION:home-recently-viewed (INDEX:31) */
.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;
  }

  @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:32) */
.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:33) */
.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:34) */
.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:36) */
.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:37) */
.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-sans);
    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:38) */
.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:39) */
/* 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, 36, 32, 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);
    border: 1px solid rgba(75, 31, 35, 0.16);
    border-radius: 8px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .gc-cart__summary-heading {
    font-family: var(--gulmohar-serif);
    font-weight: 400;
    font-size: 25px;
    line-height: 1.1;
    margin: 0;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(42, 36, 32, 0.14);
  }

  .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, 36, 32, 0.1) !important;
  }

  .gc-cart .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid rgba(42, 36, 32, 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;
  }

  /* Cart amounts match the upright Instrument Sans prices on product and collection cards. */
  .gc-cart .cart-items__unit-price,
  .gc-cart .cart-items__unit-price * {
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gulmohar-terracotta);
  }

  .gc-cart .cart-items__unit-price .compare-at-price,
  .gc-cart .cart-items__unit-price .compare-at-price * {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.5;
  }

  .gc-cart .cart-items__price,
  .gc-cart .cart-items__price text-component {
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    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, 36, 32, 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); }

  /* Quantity number: functional UI, so Manrope at a legible weight with
     lining, evenly-spaced numerals — no serif, no display contrast, and no
     tracking (the theme default added 0.04em, which loosens a single digit). */
  .gc-cart .quantity-selector input[type='number'] {
    width: 34px;
    height: 34px;
    border: 0;
    border-left: 1px solid rgba(42, 36, 32, 0.15);
    border-right: 1px solid rgba(42, 36, 32, 0.15);
    text-align: center;
    font-family: var(--gulmohar-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: lining-nums tabular-nums;
    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 {
    gap: 16px;
    border: 0 !important;
    padding: 0 !important;
  }
  .gc-cart .cart-totals__original-container { order: 1; gap: 12px; }
  .gc-cart .cart-totals__container {
    order: 2;
    border-top: 1px solid rgba(42, 36, 32, 0.14);
    padding-top: 16px;
  }
  .gc-cart .cart-actions {
    order: 3;
    border-block: 1px solid rgba(42, 36, 32, 0.14) !important;
    margin-block: 2px 0;
  }
  .gc-cart .cart-discount__summary { min-height: 46px; }
  .gc-cart .cart-discount__label {
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--gulmohar-walnut-soft);
  }
  .gc-cart .cart-totals__original,
  .gc-cart .cart-discounts__item {
    align-items: flex-start;
    gap: 12px;
  }
  .gc-cart .cart-totals__original-value,
  .gc-cart .cart-discounts__value { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
  .gc-cart .cart-discounts__item { color: var(--gulmohar-terracotta); }
  .gc-cart .cart-discounts__label { min-width: 0; }
  .gc-cart .gc-cart__quantity-discount .cart-discounts__label { align-items: flex-start; }
  .gc-cart__discount-detail { display: grid; gap: 3px; }
  .gc-cart__discount-detail > span:first-child {
    font-family: var(--gulmohar-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
  .gc-cart__discount-detail small {
    font-family: var(--gulmohar-sans);
    font-size: 10px;
    color: var(--gulmohar-walnut-faint);
  }
  .gc-cart__savings-pill {
    width: fit-content;
    margin-top: 4px;
    padding: 4px 7px;
    border-radius: 3px;
    background: rgba(75, 31, 35, 0.08);
    font-family: var(--gulmohar-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gulmohar-terracotta);
  }
  .gc-cart .cart-totals__tax-note { line-height: 1.45; }
  .gc-cart .cart-totals__total { gap: 12px; }
  .gc-cart .cart-totals__total-value { font-size: 23px; font-variant-numeric: tabular-nums; text-align: right; }


  .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,
  .gc-cart .cart-discounts__value {
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gulmohar-terracotta);
  }

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





  /* 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;
  }

  /* REMOVE: cart-products.liquid sets this to Manrope; on the cart
     page it is functional UI text, so it uses Manrope like everything else
     in the controls column. */
  .gc-cart .cart-items__remove-text {
    font-family: var(--gulmohar-sans);
    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, 36, 32, 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);
  }

  /* ---------- typography rule ----------
     Cormorant Garamond (--gulmohar-serif) = editorial / brand / product
     identity: "Your Cart" and other headings, product names, prices, and the
     brand line.
     Manrope (--gulmohar-sans) = functional / readability / UI: everything
     listed below. Declared once, last, so no theme-level serif or mono
     fallback (cart-products.liquid still defaults several of these to
     Manrope) can leak into UI text on the cart page. Scoped to
     .gc-cart, so the cart drawer and every other page are untouched. */
  .gc-cart .gc-cart__subheading,
  .gc-cart .cart-items__category,
  .gc-cart .quantity-selector,
  .gc-cart .quantity-selector input,
  .gc-cart .quantity-minus,
  .gc-cart .quantity-plus,
  .gc-cart .cart-items__remove,
  .gc-cart .cart-items__remove-text,
  .gc-cart .cart-totals__original-label,
  .gc-cart .cart-totals__total-label,
  .gc-cart .cart-note__label,
  .gc-cart .cart-discount__label,
  .gc-cart .cart-discount__input,
  .gc-cart .cart-discount__button,
  .gc-cart .cart-totals__tax-note,
  .gc-cart .cart-totals__tax-note small,
  .gc-cart .gc-cart__shipping-note,
  .gc-cart .gc-cart__reassurance,
  .gc-cart .gc-cart__cta,
  .gc-cart .cart__checkout-button,
  .gc-cart .cart__checkout-button .button-text {
    font-family: var(--gulmohar-sans);
  }

  /* ---------- 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, 36, 32, 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; }
  }
  .gc-cart .cart-discount__label {
    font-size: 11px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--gulmohar-walnut-soft);
  }
  .gc-cart .cart-totals__total-value { font-size: 23px; }
  @media screen and (max-width: 749px) {
    .gc-cart__summary-card { padding: 24px 20px; }
    .gc-cart .cart-totals__total-value { font-size: 21px; }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-page (INDEX:40) */
.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:42) */
.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:product-genuine-reviews (INDEX:45) */
.tgc-product-reviews { padding: clamp(56px, 8vw, 96px) 20px; background: #f6f2ec; color: #372d28; }
  .tgc-product-reviews__inner { max-width: 1200px; margin: 0 auto; }
  .tgc-product-reviews__title { margin: 0 0 24px; text-align: center; font-family: var(--gh-serif, Georgia, serif); font-size: clamp(30px, 4vw, 44px); font-weight: 400; line-height: 1.16; }
  .tgc-product-reviews__empty { margin: 0 0 20px; text-align: center; font-family: var(--gh-sans, sans-serif); font-size: 15px; line-height: 1.6; }
  .tgc-product-reviews:has(#vstar-reviews) .tgc-product-reviews__empty { display: none; }
  .tgc-product-reviews__widget { width: 100%; }
  .tgc-product-reviews .noreviews-title,
  .tgc-product-reviews .noreviews-center { display: none; }
  .tgc-product-reviews #noreviews-wrapper { background: transparent !important; padding: 0 !important; }
  .tgc-product-reviews #tt-first-row { justify-content: center; }
  .tgc-product-reviews .noreviews-button {
    border: 1px solid #372d28;
    background: transparent;
    color: #372d28;
    font: inherit;
    min-height: 44px;
  }
  .tgc-product-reviews :focus-visible { outline: 2px solid #372d28; outline-offset: 3px; }
  @media (max-width: 749px) { .tgc-product-reviews { padding: 56px 20px; } }
/* END_SECTION:product-genuine-reviews */

/* START_SECTION:quick-view-content (INDEX:46) */
.qv-content {
    --qv-cream: #f5f2ea;
    --qv-ink: #2a2420;
    --qv-terracotta: #4b1f23;
    --qv-serif: 'Cormorant Garamond', Georgia, serif;
    --qv-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --qv-mono: 'Instrument Sans', system-ui, -apple-system, sans-serif;

    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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 0.5);
  }

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

  .qv-options {
    border-top: 1px solid rgba(42, 36, 32, 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, 36, 32, 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, 36, 32, 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, 36, 32, 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-sans);
    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, 36, 32, 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:48) */
.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:49) */
.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:50) */
.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:51) */
.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: #2a2420;
  transition: color 200ms ease, border-color 200ms ease;
}

/* All Products is the only top-level link with a literal resting color
   above instead of color: var(--menu-top-level-font-color) (see
   .menu-list__link), so unlike HOME / OUR STORY / CONTACT US it never
   picked up --color-foreground and stayed black over the homepage's
   transparent hero header. Reuse the header's own transparent-and-not-
   hovering condition (sections/header.liquid, ".header[transparent]" /
   ".header__row" rules) so this trigger turns white in that exact same
   state — the resting color above is untouched for every other state
   (scrolled/sticky, other pages), and so is the hover/open color below. */
: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'])
      )
  )
  .gc-mega-menu__trigger {
  color: var(--menu-top-level-font-color);
}

/* 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: #4b1f23;
  border-bottom-color: #4b1f23;
}

.gc-mega-menu__panel {
  position: absolute;
  left: 50%;
  right: auto;
  top: calc(100% - 1px + var(--border-bottom-width, 0px));
  z-index: var(--layer-header-menu);
  width: min(1060px, calc(100vw - 40px));
  background: #F2F0E9;
  border: 1px solid rgba(42, 36, 32, 0.14);
  border-radius: 4px;
  box-shadow: 0 18px 36px rgba(42, 36, 32, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -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: translate(-50%, 0);
  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 {
  width: 100%;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 26px;
  box-sizing: border-box;
}

.gc-mega-menu__col--discover,
.gc-mega-menu__col--featured {
  border-left: 1px solid rgba(42, 36, 32, 0.1);
  padding-left: 26px;
}

.gc-mega-menu__eyebrow {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4b1f23;
}

.gc-mega-menu__links--categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, auto));
  grid-auto-flow: column;
  gap: 3px 24px;
}

.gc-mega-menu__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 18px;
  line-height: 1.2;
  color: #2a2420;
  text-decoration: none;
  transition: color 200ms ease;
}

a.gc-mega-menu__cat-link:hover,
a.gc-mega-menu__cat-link:focus-visible {
  color: #4b1f23;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.gc-mega-menu__cat-arrow,
.gc-mega-menu__discover-link > span {
  flex: none;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 12px;
  color: rgba(42, 36, 32, 0.45);
  transition: transform 200ms ease;
}

a.gc-mega-menu__cat-link:hover .gc-mega-menu__cat-arrow,
a.gc-mega-menu__discover-link:hover > span {
  transform: translateX(3px);
}

.gc-mega-menu__cat-link--soon,
.gc-mega-menu__discover-link--soon { color: rgba(42, 36, 32, 0.55); }

.gc-mega-menu__cat-link small,
.gc-mega-menu__discover-link small {
  flex: none;
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 9px;
  font-weight: 500;
  color: rgba(42, 36, 32, 0.55);
  white-space: nowrap;
}

.gc-mega-menu__links--discover {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gc-mega-menu__discover-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 16px;
  line-height: 1.2;
  color: #2a2420;
  text-decoration: none;
  transition: color 200ms ease;
}

a.gc-mega-menu__discover-link:hover,
a.gc-mega-menu__discover-link:focus-visible {
  color: #4b1f23;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.gc-mega-menu__feature {
  display: block;
  color: #2a2420;
  text-decoration: none;
}

.gc-mega-menu__feature-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(42, 36, 32, 0.06);
}

.gc-mega-menu__feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms ease;
}

.gc-mega-menu__feature:hover img,
.gc-mega-menu__feature:focus-visible img { transform: scale(1.03); }

.gc-mega-menu__feature-eyebrow {
  margin: 10px 0 5px;
  font-size: 9px;
}

.gc-mega-menu__feature-title {
  display: block;
  font-family: var(--font-cormorant, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 19px;
  line-height: 1.1;
}

.gc-mega-menu__feature-cta {
  display: inline-block;
  margin-top: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(75, 31, 35, 0.35);
  font-family: var(--font-manrope, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 11px;
  color: #4b1f23;
}

@media screen and (min-width: 990px) and (max-width: 1100px) {
  .gc-mega-menu__panel { width: min(860px, calc(100vw - 32px)); }
  .gc-mega-menu__inner { grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.85fr); }
  .gc-mega-menu__col--featured { display: none; }
}

@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:53) */
.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:54) */
.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:best-sellers-card (INDEX:56) */
.bsc-card {
    display: block;
    text-align: left;
  }

  .bsc-card--empty { opacity: 0.6; }

  /* Media wrapper is the positioning context for every badge/chip on the
     card (handoff bug #2 fix). .gh-media already provides position:relative,
     aspect-ratio and overflow:hidden. */
  .bsc-card__media { display: block; }

  .bsc-card__img--hover {
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  product-card:is(:hover, :focus-within) .bsc-card__img--hover { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .bsc-card__img--hover { transition: none; }
  }

  /* Full-photo link for PDP navigation, beneath the badges/chip. The
     carousel JS intercepts clicks on side cards (they recenter instead). */
  .bsc-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Material badge — top-left, ivory chip, inside the media wrapper. */
  .bsc-card__material {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 9px;
    background: rgba(244, 241, 234, 0.92);
    font-family: var(--gh-mono);
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gh-ink);
    pointer-events: none;
  }

  /* Image-gallery dots — bottom-center, inside the media wrapper. */
  .bsc-card__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    pointer-events: none;
  }

  .bsc-card__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(30, 21, 18, 0.28);
  }

  .bsc-card__dot.is-active { background: var(--gh-burgundy); }

  /* Bag chip — bottom-right, inside the media wrapper. This reuses the real
     quick-add component (add-to-cart, the "choose options" fallback and cart
     state all behave exactly as sitewide); only its position and chrome are
     restyled to the handoff's 34px ivory circle, scoped to .bsc-card__cta so
     no other product card on the site is affected. It is always visible
     here, not hover-gated. */
  .bsc-card__cta {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }

  .bsc-card__cta .quick-add {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Sitewide, both the "Add" and "Choose" buttons render until a variant is
     actively selected (data-quick-add-button defaults to "both"), staying
     invisible only because they are absolutely stacked at the same spot.
     Re-chrome them here, and make the add/choose exclusivity explicit so
     exactly one chip shows. */
  .bsc-card__cta .quick-add__button { display: none; }

  .bsc-card__cta .quick-add:not([data-quick-add-button='choose']) .quick-add__button--add {
    display: flex;
  }

  .bsc-card__cta .quick-add[data-quick-add-button='choose'] .quick-add__button--choose {
    display: flex;
  }

  .bsc-card__cta .quick-add__button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    top: auto;
    left: auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(244, 241, 234, 0.92);
    backdrop-filter: none;
    box-shadow: none;
    color: rgba(30, 21, 18, 0.65);
    opacity: 1;
    pointer-events: auto;
    transition: color 180ms ease, transform 180ms ease;
  }

  .bsc-card__cta .quick-add__button:hover {
    color: var(--gh-burgundy);
    transform: scale(1.08);
  }

  .bsc-card__cta .add-to-cart-text {
    background: none;
    border-radius: 0;
    height: auto;
  }

  .bsc-card__cta .add-to-cart-icon {
    width: 16px;
    height: 16px;
  }

  .bsc-card__cta .add-to-cart-icon svg { width: 16px; height: 16px; }

  .bsc-card__cta .add-to-cart-text__content { display: none; }

  /* Info — below the photo. */
  .bsc-card__info {
    display: block;
    padding: 16px 34px 0;
  }

  .bsc-card__eyebrow {
    font-family: var(--gh-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gh-burgundy);
  }

  .bsc-card__name {
    font-family: var(--gh-serif);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.28;
    margin-top: 5px;
    color: var(--gh-ink);
  }

  .bsc-card__price,
  .bsc-card__price .price {
    font-family: var(--gh-sans);
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    color: var(--gh-burgundy);
    margin-top: 6px;
  }

  @media screen and (max-width: 749px) {
    .bsc-card__info { padding: 16px 22px 0; }
  }
/* END_SNIPPET:best-sellers-card */

/* START_SNIPPET:cart-products (INDEX:59) */
.cart-items {
    --cart-item-media-width-min: 6rem;
    --cart-item-media-width-max: 10rem;
    --cart-card-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --cart-card-mono: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    /* Colour-system refinement (site-wide): matches the oxblood/soft-dark-
       brown values used everywhere else, instead of the old orange-red
       terracotta. */
    --cart-card-terracotta: #4B1F23;
    --cart-card-walnut: #2A2420;
    --cart-card-walnut-faint: rgba(42, 36, 32, 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(--font-manrope, 'Instrument Sans', sans-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:60) */
.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:64) */
/* 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;
    /* The real clip boundary lives two levels up on .gc-card__media (via
       .gulmohar-media/.gulmohar-art's own overflow:hidden), but that leaves
       this element — a genuine box, since custom elements default to
       display:block — unclipped in between. A scrolling element's own
       momentum/rubber-band overscroll is a compositor-level effect that
       isn't reliably caught by a distant ancestor's clip, so the boundary
       needs to sit immediately next to the thing it's clipping. */
    overflow: hidden;
  }

  .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%;
    /* Individual slides had no clip of their own — only the outer gallery
       wrap/track boundaries did. The shared hover-zoom rule
       (.gulmohar-media:hover .gulmohar-media__img { transform: scale(1.035) })
       in gulmohar-fonts.liquid scales an image from its own center, and with
       no per-slide clip that scaled image visually bled past its own slide's
       edge into the neighboring slide's space within the track (still fully
       inside the outer wrap, so the earlier outer overflow:hidden never
       caught it). Verified live: forcing that same scale transform onto an
       adjacent slide's image reproduced the exact edge strip; this fixes it
       by containing each slide's own content to its own box. */
    overflow: hidden;
  }

  @media (hover: none), (pointer: coarse) {
    .gc-card__gallery {
      overflow-x: auto;
      /* overflow-y was previously left undeclared, which computes to `auto`
         (not `visible`) once overflow-x is non-visible — that marks the
         track as vertically scrollable with zero actual overflow content,
         so a real swipe's inevitable small vertical component triggers a
         rubber-band/overscroll-glow displacement instead of doing nothing.
         Locking it to `hidden` removes that scrollability entirely, so the
         browser's default touch-action: auto correctly leaves the vertical
         gesture unclaimed here and it passes straight through to the page's
         own scroll — no touch-action override needed. */
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      /* Stops the X-axis rubber-band bounce at the first/last slide from
         chaining into anything else — pure boundary containment, unrelated
         to gesture capture. */
      overscroll-behavior-x: contain;
    }

    .gc-card__gallery-slide {
      scroll-snap-align: start;
      /* Forces a stop at every slide even on a fast flick, so a quick
         swipe can't carry momentum through the adjacent slide and reveal a
         third one mid-gesture. */
      scroll-snap-stop: always;
    }
  }

  @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, 36, 32, 0.12);
    transform: scale(1);
    transition: transform 0.3s ease, background 0.3s ease;
  }

  .gc-card__dot.is-active {
    background: var(--gulmohar-cream, #f5f2ea);
    transform: scale(1.4);
  }
/* END_SNIPPET:gc-product-card */

/* START_SNIPPET:header-actions (INDEX:69) */
.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:70) */
.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:72) */
.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(244, 241, 234, 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:76) */
/* 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:84) */
.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:88) */
.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:89) */
#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:90) */
/* 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:91) */
#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, 36, 32, 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: #2a2420;
    font-family: 'Instrument Sans', sans-serif;
    padding: 4px;
  }

  .qv-dialog__close:hover,
  .qv-dialog__close:focus-visible {
    color: #4b1f23;
  }

  @media screen and (max-width: 749px) {
    .qv-dialog__close {
      top: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(245, 242, 234, 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, 36, 32, 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:92) */
.qv-skeleton {
    display: grid;
    grid-template-columns: 1fr;
    background: #f5f2ea;
    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, 36, 32, 0.05), rgba(42, 36, 32, 0.12), rgba(42, 36, 32, 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:93) */
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, 36, 32, 0.18);
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--gulmohar-sans, 'Instrument Sans', 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: #2a2420;
    transition: color 0.15s ease;
  }

  .qv-trigger:hover,
  .qv-trigger:focus-visible {
    color: #4b1f23;
  }

  .qv-trigger__icon {
    flex: none;
  }
/* END_SNIPPET:quick-view-trigger */

/* START_SNIPPET:resource-card (INDEX:94) */
.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:97) */
/* 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:98) */
.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:100) */
.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:103) */
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:105) */
/*
   * 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:117) */
.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 */