/** Shopify CDN: Minification failed

Line 320:48 Unexpected "{"
Line 320:57 Expected ":"

**/
/* ═══════════════════════════════════════════════
   THE ANTIQUE ROOM — Custom Theme Styles
   Overrides Horizon with our cream/navy palette
   v3
   ═══════════════════════════════════════════════ */

:root {
  --ar-cream:   #EDE6D6;
  --ar-white:   #ffffff;
  --ar-dark:    #0F1728;
  --ar-slate:   #5B6480;
  --ar-brown:   #3A2116;
  --ar-taupe:   #A89B82;
  --ar-muted:   #7A7470;
  --ar-border:  #DDD6C8;
}

/* ── Fleur-de-lis ornament divider — used across homepage sections ── */
.ar-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto;
}
.ar-ornament__line {
  display: block;
  width: 40px;
  height: 1px;
  background: #A89B82;
}
.ar-ornament__img {
  width: 22px;
  height: auto;
  opacity: 0.9;
}

/* ── Fonts ── */

body,
.body {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  background-color: #ffffff !important;
  color: var(--ar-dark);
}

/* Product + collection pages — white background so image backgrounds blend in.
   Horizon paints sections via .section-background pseudo-elements,
   so both body and those elements need overriding. */
body.template-product .section-background,
body.template-collection .section-background,
body.template-search .section-background {
  background-color: #ffffff !important;
}

/* Search results page — white background throughout */
body.template-search,
body.template-search .search-results,
body.template-search main,
body.template-search .content-for-layout,
body.template-search [class*="search-results__section"],
body.template-search [class*="search-results"] > *,
body.template-search .section-title,
body.template-search [class*="section-title"],
body.template-search [class*="section-header"],
body.template-search sticky-header,
body.template-search [sticky] {
  background-color: #ffffff !important;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4,
[class*="heading"],
[class*="title"] {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Override Horizon's font CSS variables */
:root {
  --font-body-family: 'Jost', sans-serif;
  --font-heading-family: 'Cormorant Garamond', serif;
  --font-body-style: normal;
  --font-heading-style: normal;
  --font-body-weight: 300;
  --font-heading-weight: 400;
}

/* ── Top announcement bar ── */
.announcement-bar,
.header-announcements,
[class*="announcement"] {
  background-color: var(--ar-dark) !important;
  color: #fff !important;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center !important;
}
[class*="announcement"] p,
[class*="announcement"] span,
[class*="announcement"] div {
  text-align: center !important;
  width: 100% !important;
  justify-content: center !important;
}

/* ── Header ── */
.header,
.header-section,
header {
  background-color: #D8C9AE !important;
}

.header__underlay-closed {
  background: #D8C9AE !important;
}

/* Bottom border: subtle, elegant stripe */
.header-section {
  border-bottom: 1px solid #BCAA90 !important;
}

/* Break header columns out of the page-width grid gutter so nav aligns with content below.
   The .header__row is a section with a 3-col grid: [gutter | content | gutter].
   Default places .header__columns in col 2 (centered), which indents the nav.
   Spanning 1/-1 makes it full-width; explicit padding recreates the margin. */
.header__row > .header__columns {
  grid-column: 1 / -1 !important;
  padding-inline-start: 2rem !important;
  padding-inline-end: var(--page-margin, 40px) !important;
}

/* Logo — centered, Cormorant Garamond, uppercase */
.ar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ar-logo__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.79rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ar-dark);
  line-height: 1;
  display: block;
}

.ar-logo__sub {
  font-family: 'Jost', sans-serif;
  font-size: 0.77rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0F1728; /* taupe on the parchment header failed WCAG AA at 1.68:1; slate only reaches 3.6:1 here, navy passes at 10.98:1 */
  font-weight: 400;
  margin-top: 0.3rem;
  display: block;
}

@media (max-width: 768px) {
  html { font-size: 15px; }

  /* Reset the desktop 4.5rem indent — eats 67px on a 390px screen */
  .header__row > .header__columns {
    padding-inline-start: 0.5rem !important;
    padding-inline-end: 0.5rem !important;
  }

  /* Horizon mobile grid: leftA leftB [center 1fr] rightA rightB.
     Bookends default 44px each (176px total). Shrink to 36px to give
     the center column ~32px more room for the logo text. */
  #header-component {
    --header-mobile-bookend: 36px !important;
  }

  /* Logo — nowrap forces one line */
  .ar-logo__name {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .ar-logo__sub {
    font-size: 0.58rem;
    margin-top: 0.25rem;
    letter-spacing: 0.1em;
  }

  /* Banner: tighter tracking so it stays one line */
  .announcement-bar,
  .header-announcements,
  [class*="announcement"] {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
  }
}

/* Nav links — override Horizon CSS variables AND target elements directly */
:root {
  --menu-top-level-font-weight: 600;
  --menu-top-level-font-size: 0.8rem;
  --menu-top-level-font-size-desktop: 0.8rem;
}

.header__menu-item,
.header__nav-link,
.header-nav a,
.menu-list__link,
.list-menu__item a,
.header__inline-menu a,
.site-nav a,
header nav a,
header-menu a,
[class*="header"][class*="nav"] a,
[class*="header"][class*="menu"] a,
#shopify-section-group-header-group nav a,
#shopify-section-group-header-group [class*="menu"] a {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0F1728 !important;
  font-weight: 650 !important;
  font-variation-settings: 'wght' 650 !important;
}

.menu-list__link-title {
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em !important;
}

#shopify-section-group-header-group nav a:hover,
header nav a:hover,
header-menu a:hover {
  color: var(--ar-taupe) !important;
}

/* ── Buttons ── */
.button:not(.slideshow-control),
.btn,
[class*="button--primary"],
.shopify-payment-button__button {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  background-color: var(--ar-dark) !important;
  color: #fff !important;
  border-color: var(--ar-dark) !important;
}

.button:hover,
[class*="button--primary"]:hover {
  background-color: var(--ar-brown) !important;
  border-color: var(--ar-brown) !important;
}

[class*="button--secondary"],
.button--outline {
  background-color: transparent !important;
  color: var(--ar-dark) !important;
  border: 1px solid var(--ar-border) !important;
}

[class*="button--secondary"]:hover,
.button--outline:hover {
  border-color: var(--ar-dark) !important;
}

/* ── Section eyebrows / labels ── */
[class*="eyebrow"],
[class*="overline"],
[class*="caption"],
.section__header-caption {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ar-taupe) !important;
  font-weight: 400 !important;
  margin-bottom: 1.0rem !important;
}

/* Eyebrows on light backgrounds — taupe fails WCAG AA contrast there
   (as low as ~1.7:1). Same fix as .ar-hero__eyebrow, applied everywhere
   else an eyebrow sits on white/cream/off-white rather than navy. */
.ar-hero__eyebrow,
.ar-about-story__eyebrow,
.ar-pillars__eyebrow,
.ar-contact__eyebrow,
.ar-faq__eyebrow,
.ar-policy__eyebrow,
.ar-offer__modal-eyebrow,
.ar-popup__eyebrow,
.ar-testimonials__eyebrow {
  color: #0F1728 !important; /* navy clears AAA (7:1+) on every light bg used here; slate only reached AA */
}

/* ── Collection / category grid ── */
.collection-list__item,
.collection-card {
  border-radius: 0 !important;
}

/* Hide Availability filter everywhere — all products are in stock */
body.template-collection details#Facet-Details-{{ section.id }}-filter-p-availability,
body.template-collection [id^="Facet-Details-"][id$="filter-p-availability"] {
  display: none !important;
}

/* Hide Product Type on category pages — redundant (already in that category) */
/* Keep it visible on /collections/all where it's useful */
body.template-collection:not(.collection-all) [id^="Facet-Details-"][id$="filter-p-product_type"] {
  display: none !important;
}

/* Hide "The highest price is $XX" label in price filter */
.price-facet__highest-price {
  display: none !important;
}

/* An earlier "narrower filter sidebar" rule used to live here, reducing
   this grid track from the stock 6 (~30% of the 14-column layout) down
   to 4 (~20%). Removed 2026-07-07: the filter redesign needs real width
   for its content (14px text, bordered price inputs, color swatches +
   counts) and forcing the sidebar's own CSS width wider than this grid
   track allowed it made it spill directly onto the product grid next to
   it — a real, visible overlap bug, not a style nitpick. Reverting to
   stock's own column count here is the fix; .facets--vertical below now
   fills whatever this track provides (width:100%) rather than fighting
   it with a fixed px value that can mismatch again if this ever
   changes. If the sidebar needs to be narrower again in the future,
   change it here (the grid track), not by shrinking .facets--vertical's
   own width below what this allocates. */

.collection-card__title,
.collection-card__heading {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--ar-dark) !important;
}

/* ── Product cards ── */
/* Horizon uses a <product-card> custom element — target by tag, not class */
product-card,
.product-card,
.card-product {
  border-radius: 0 !important;
  background-color: #ffffff !important;
}

product-card .product-card__content,
.product-card__content,
.product-grid__card {
  background-color: #ffffff !important;
}

/* Image container inside cards — contain-fit leaves gaps, force white so cream doesn't bleed through */
product-card .media,
product-card [class*="media"],
.card-product .media,
.card-product [class*="media"],
[class*="product-card"] .media,
[class*="product-card"] [class*="media"] {
  background-color: #ffffff !important;
}

/* Empty collection / no-results state */
.collection-no-results,
.no-results,
[class*="no-results"],
[class*="empty-state"],
.collection__empty,
.collection-empty {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Product grid background (fills gaps between cards) */
.product-grid,
.product-grid-container {
  background-color: #ffffff !important;
}

/* ============================================================
   Product card redesign — category pages AND search results
   (.template-collection, .template-search — the body classes Shopify
   sets for /collections/* pages and /search respectively). Per explicit
   design brief: a quiet gallery-plate presentation, not an e-commerce
   listing tile. Extended to search results 2026-07-07 so the two pages
   match — same markup (<product-card>, .product-media, the
   __product_title_ text-block), same rules, no new styling invented. */
:is(.template-collection, .template-search) product-card {
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 21px rgba(15, 23, 40, 0.11) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  /* Equal-height cards regardless of title length: CSS Grid stretches
     items to the tallest one in their row by default (align-items:
     stretch), so height:100% here + the price's margin-top:auto below
     is enough — no JS, no fixed pixel guess. */
  height: 100% !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
}
:is(.template-collection, .template-search) product-card:hover {
  box-shadow: 0 18px 47px rgba(15, 23, 40, 0.19) !important;
  transform: translateY(-3px) !important;
}

/* Image: contained (the whole object always visible, never cropped —
   object-fit: contain guarantees that regardless of padding), sized as
   large as possible within the box. Down to 1% — just enough that the
   image never literally touches the edge, while staying as large as
   object-fit: contain allows. */
:is(.template-collection, .template-search) product-card .product-media {
  aspect-ratio: 1 / 1 !important;
  background: #ffffff !important;
  padding: 1% !important;
  box-sizing: border-box !important;
}
:is(.template-collection, .template-search) product-card .product-media__image {
  object-fit: contain !important;
}

/* Content area (title + price) */
:is(.template-collection, .template-search) product-card .product-card__content,
:is(.template-collection, .template-search) .product-grid__card {
  background-color: #ffffff !important;
  padding: 1.75rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Title — a quiet caption under a gallery piece, not a headline. The
   rule below only ever matched the compact "zoomed out" list-view title
   (a real <h3 class="h4">); the DEFAULT grid-view title actually shown
   is a plain <p role="heading"> inside an auto-generated text-block
   class (…__product_title_…) that was never targeted before, silently
   falling back to the theme's body font. Both are caught here. Clamped
   to 3 lines so a long title can never make one card taller than its
   neighbors. */
:is(.template-collection, .template-search) .product-card__title,
:is(.template-collection, .template-search) .card-product__title,
:is(.template-collection, .template-search) [class*="product-card"] h3,
:is(.template-collection, .template-search) [class*="product-card"] .title,
:is(.template-collection, .template-search) h3.h4,
:is(.template-collection, .template-search) :is(.product-card, .product-grid__card) :is(h4, .h4),
:is(.template-collection, .template-search) .product-grid__item .h4,
:is(.template-collection, .template-search) .product-grid__item h4,
:is(.template-collection, .template-search) [class*="__product_title_"],
:is(.template-collection, .template-search) [class*="__product_title_"] p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.275rem !important; /* 1.5rem - 15%, per explicit request */
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--ar-dark) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Price — quiet sans-serif caption directly under the title, navy (not
   slate/blue) to match the rest of the site, comfortable space above
   it. margin-top: auto anchors it to the card's bottom edge regardless
   of how many lines the title above it took — the other half of the
   equal-height-cards mechanism. */
:is(.template-collection, .template-search) .product-card__price,
:is(.template-collection, .template-search) .price {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--ar-dark) !important;
  margin-top: auto !important;
  padding-top: 0.75rem !important;
}

/* Grid gutters — more breathing room between cards, both axes. */
:is(.template-collection, .template-search) .product-grid {
  --product-grid-gap: 32px !important;
}
@media screen and (max-width: 749px) {
  /* Its own mobile treatment, not the desktop numbers shrunk — 32px
     gutters and 28px card padding read as generous on desktop, but
     crowd two-per-row cards on a phone. */
  :is(.template-collection, .template-search) .product-grid {
    --product-grid-gap: 18px !important;
  }
  :is(.template-collection, .template-search) product-card .product-card__content,
  :is(.template-collection, .template-search) .product-grid__card {
    padding: 1.1rem !important;
  }
  :is(.template-collection, .template-search) .product-card__title,
  :is(.template-collection, .template-search) .card-product__title,
  :is(.template-collection, .template-search) [class*="product-card"] h3,
  :is(.template-collection, .template-search) [class*="product-card"] .title,
  :is(.template-collection, .template-search) h3.h4,
  :is(.template-collection, .template-search) :is(.product-card, .product-grid__card) :is(h4, .h4),
  :is(.template-collection, .template-search) .product-grid__item .h4,
  :is(.template-collection, .template-search) .product-grid__item h4,
  :is(.template-collection, .template-search) [class*="__product_title_"],
  :is(.template-collection, .template-search) [class*="__product_title_"] p {
    font-size: 0.89rem !important; /* 1.05rem - 15%, kept proportional to desktop */
  }
  :is(.template-collection, .template-search) .product-card__price,
  :is(.template-collection, .template-search) .price {
    font-size: 0.75rem !important;
  }
}

/* ── Footer ── */
footer,
.footer {
  background-color: var(--ar-dark) !important;
  color: rgba(255,255,255,0.45) !important;
}

.footer a,
.footer p,
.footer li,
.footer span:not(.footer__heading):not(.footer__title) {
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.45) !important;
}

.footer a:hover {
  color: #fff !important;
}

.footer__heading,
.footer__title {
  font-family: 'Cormorant Garamond', serif !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* ── Dividers / borders ── */
.divider,
hr {
  border-color: var(--ar-border) !important;
}

/* ── Inputs ── */
input,
textarea,
select {
  border-radius: 0 !important;
  font-family: 'Jost', sans-serif !important;
  border-color: var(--ar-border) !important;
  background-color: var(--ar-white) !important;
  color: var(--ar-dark) !important;
}

input:focus,
textarea:focus {
  border-color: var(--ar-slate) !important;
  outline: none !important;
}

/* ── Policy pages ── */
body.page-width-narrow {
  --normal-content-width: 80rem;
  --narrow-content-width: 80rem;
}

/* Custom policy template wrapper (merchant-written policies: shipping, returns) */
.ar-pol {
  padding: 4rem 3rem 8rem;
}
.ar-pol__inner {
  max-width: 900px;
  margin-inline: auto;
}
.ar-pol__title {
  font-family: 'Cormorant Garamond', serif;
  text-align: left !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 400 !important;
  color: #0F1728 !important;
  margin-bottom: 2.5rem !important;
  letter-spacing: 0.02em !important;
}
.ar-pol__divider {
  width: 36px;
  height: 1px;
  background: #A89B82;
  margin-bottom: 2.5rem;
}

/* Shopify's native policy rendering — fix width, title alignment, heading sizes */
.shopify-policy__container {
  max-width: 900px !important;
  margin-inline: auto !important;
  padding: 4rem 3rem 8rem !important;
}

/* body.template-policy is added via template-{{ template.name }} in theme.liquid */
body.template-policy h1,
.shopify-policy__container h1 {
  text-align: left !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 400 !important;
  color: #0F1728 !important;
  margin-bottom: 2.5rem !important;
  letter-spacing: 0.02em !important;
}

/* Section headings inside policy body — knock down to label style */
body.template-policy h2,
.shopify-policy__container h2,
.shopify-policy__title h2 {
  font-size: 0.78rem !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0F1728 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 0.6rem !important;
}

body.template-policy p,
body.template-policy li,
.shopify-policy__container p,
.shopify-policy__container li {
  font-size: 1rem !important;
  color: #3A3F52 !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  font-family: 'Jost', sans-serif !important;
}

/* Hide internal tags from filter sidebar */
.facets__inputs-list label[for*="derank"],
.facets__panel label[for*="derank"] {
  display: none !important;
}

/* ── Misc ── */
.badge,
[class*="badge"] {
  border-radius: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Remove Horizon's rounded corners everywhere */
*,
[class*="card"],
[class*="button"],
[class*="badge"],
[class*="input"],
[class*="drawer"],
[class*="popover"],
[class*="modal"] {
  border-radius: 0 !important;
}

/* On mobile hide the hero photo, keep the text/buttons */
@media (max-width: 900px) {
  .ar-hero__right {
    display: none !important;
  }
}

/* ── Product page ── */

/* Gallery — white background to blend with product images */
.product-media-gallery,
.media-gallery,
[class*="product-media"] .media,
.media--image,
media-component,
product-media-gallery {
  background-color: #ffffff !important;
}

/* Horizon sets img background to --color-background (cream) for mix-blend-mode arrow visibility.
   Override to white so arrow hit areas don't show cream boxes. */
.media-fit-contain :is(img, .deferred-media__poster-image) {
  background-color: #ffffff !important;
}

/* Gallery — square container matches the 1600×1600 product images: no crop, no bars.
   Fixed 500px media column (down from ~660px) keeps the square image at a reasonable
   size and gives the right column more room. */
:not(.dialog-zoomed-gallery) > .product-media-container {
  aspect-ratio: 1 !important;
}

@media (min-width: 750px) {
  .product-information__grid.product-information--media-left {
    grid-template-columns: 1fr 1fr !important;
    max-width: 1100px !important;
    margin-inline: auto !important;
  }
}

/* Hide quantity selector — all pieces are one-of-a-kind */
.quantity-selector,
.quantity-selector-wrapper,
.quantity-label {
  display: none !important;
}

/* Price color */
.price,
.price__regular,
.price__sale,
[class*="price"] .price-item,
.price-item,
.price-item--regular {
  color: #0F1728 !important;
}

/* Make an Offer button — don't stretch full width on desktop, but full width on mobile */
@media (min-width: 750px) {
  .product-form-buttons .ar-offer__trigger {
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: flex-start;
  }
}
@media (max-width: 749px) {
  .product-form-buttons .ar-offer__trigger {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Product description typography */
.product__description,
[class*="product-description"],
.product-description {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  color: #3A3F52 !important;
}

.product__description p,
.product-description p {
  margin-bottom: 1.2rem;
}

.product__description ul,
.product-description ul {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.product__description li,
.product-description li {
  margin-bottom: 0.4rem;
  font-family: 'Jost', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #3A3F52 !important;
}

.product__description strong,
.product-description strong {
  font-weight: 500 !important;
  color: #0F1728 !important;
}

/* ── Collection page ── */

/* 4-column product grid on desktop */
@media (min-width: 990px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* "Shop All" page title */
body.template-collection h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2rem, 3.2vw, 3.2rem) !important; /* clamp(2.5rem, 4vw, 4rem) scaled down 20% */
  font-weight: 400 !important;
  color: #0F1728 !important;
  line-height: 1.1 !important;
}

/* ============================================================
   Filters sidebar — exact values per detailed design spec (2026-07-07,
   second pass). Values below (background #FAF7F3, border #EFE7DD, text
   #1B1B1B, accent #A47C5A) are given as literal hex in that spec rather
   than the site's usual --ar-* tokens — kept as-given rather than
   substituted, since this was an unusually precise, deliberate brief.
   ============================================================ */

/* Sidebar card container — the "vertical" filter layout specifically
   (not the horizontal filter bar used elsewhere, which shouldn't get a
   narrow fixed width or a card background). */
.facets--vertical {
  background: #FAF7F3 !important;
  border: 1px solid #EFE7DD !important;
  border-radius: 6px !important;
  padding: 20px !important;
  /* Fill whatever the grid track above allocates — never a fixed px
     value. A fixed width here that exceeds the track's actual rendered
     size is exactly what caused the sidebar to visibly overlap the
     product grid next to it (the track was narrowed by an older rule,
     now reverted, but a hardcoded width here would just reintroduce the
     same class of bug the next time the grid or viewport changes). */
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 320px !important;
}
@media screen and (max-width: 749px) {
  .facets--vertical {
    max-width: none !important;
  }
}

/* "Filters" heading. Divider line below it separates the master heading
   from the Price/Color groups. */
.facets--filters-title {
  font-family: 'Cormorant Garamond', serif !important;
  /* Medium (500), not semi-bold (600) — Cormorant Garamond's elegance is
     in its delicate, high-contrast strokes; bold small caps flattened
     that into something closer to a generic label than a refined one. */
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #1B1B1B !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #EFE7DD !important;
  margin-bottom: 16px !important;
}

/* Divider between each filter group (Price / Color / etc). */
.facets__item {
  border-bottom: 1px solid #EFE7DD !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}
.facets__item:last-of-type {
  border-bottom: none !important;
}

/* Filter accordion group headers — "Price" / "Color" — matches
   .facets--filters-title ("FILTERS") above.
   (.facets__label, the child span carrying this same text, used to have
   its own competing font-size/weight here too — that was based on a
   wrong assumption that it held individual value names like "Beige" or
   "Black"; it doesn't, those use .checkbox__label-text. Removed the
   duplicate rather than leave two rules fighting over the same text.) */
.facets__summary {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #1B1B1B !important;
}

/* Chevron toggle icon — thin/elegant, matches the accent color. */
.facets .icon-caret {
  color: #A47C5A !important;
}

/* Native Shopify "active filter" removable pill (e.g. "$0.00–$100.00 ✕")
   — explicitly not wanted in this sidebar per the design spec ("do not
   use ... tag-style price display"). Scoped to the vertical sidebar only
   so any other legitimate use of this component elsewhere is untouched. */
.facets--vertical .facets-remove {
  display: none !important;
}

/* "$" symbol next to each price input — sized to match .price-facet__input
   (14px, set further down) for visual consistency; that rule handles the
   input box itself. */
.price-facet__label {
  font-size: 14px !important;
  font-family: 'Jost', sans-serif !important;
  color: #1B1B1B !important;
  /* Tighter than stock's default inset — frees up room for the actual
     number in a narrow input box. Must stay in sync with
     .price-facet__input's padding-inline-start below (the "$" needs to
     sit fully inside that reserved space, not touching the number). */
  padding: 8px 8px !important;
}

/* Product price */
.price,
.price-item--sale.price {
  font-size: 1.2rem !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  color: #3A2116 !important;
}

/* An older "Color filter swatches" block (label:has(input[name*="custom.color"]))
   used to live here — removed 2026-07-07. It could never actually match:
   checkbox.liquid renders <input> and <label> as siblings, not
   parent/child, so :has() on the label could never see the input. Dead
   code since whenever it was written. Real swatch dots now live further
   down, targeting li[data-filter-value] instead. */

/* ── Search modal (header magnifying glass) — brand styling only, no logic touched ── */

/* Outer floating panel: warm cream frame with breathing room on every side,
   soft warm-toned shadow, generous rounding for a luxurious feel */
.search-modal__content {
  border: 1px solid #DDD6C8 !important;
  border-radius: 14px !important;
  box-shadow: 0 32px 80px rgba(58, 33, 22, 0.25) !important;
  background: #F2F1EF !important;
  overflow: hidden !important;
  flex-direction: column !important;
  padding: 1.35rem 1.75rem 1.5rem !important;
  /* Reclaim vertical budget for the intro + "Try Searching" header content we
     added on top of the stock layout, so the results grid never runs past
     the viewport bottom. Stock's --modal-max-height/--modal-top-margin were
     sized assuming a much shorter header. */
  --modal-max-height: 46dvh !important;
  --modal-top-margin: 4dvh !important;
  max-height: 92dvh !important;
}
@media screen and (max-width: 749px) {
  /* Framed card instead of edge-to-edge full-bleed: stock forces the mobile
     dialog to exactly 100dvw/100dvh with square corners (assets/base.css
     .dialog-modal). Overriding to an inset size lets the page behind show
     through around the edges — re-enabling the backdrop dim below is what
     makes that read as a deliberate "framed" card rather than a mistake. */
  .search-modal__content {
    border-radius: 14px !important;
    width: calc(100dvw - 1.75rem) !important;
    height: auto !important;
    max-height: calc(100dvh - 3.5rem) !important;
    margin: auto !important;
    padding: 1.1rem 1.25rem 1.35rem !important;
    --modal-max-height: 40dvh !important;
  }
  .search-modal__content::backdrop {
    display: block !important;
  }
}

/* Unify the whole modal to a single cream background. predictive-search-component
   carries Shopify's own "color-custom-popover" scheme, which independently sets
   --color-background/background-color to the theme's popover swatch (a darker
   tan) — that's the second background color showing through behind the
   "Try Searching" row. Force it to match everything else. */
.search-modal__content predictive-search-component {
  --color-background: #F2F1EF !important;
  background: #F2F1EF !important;
  background-color: #F2F1EF !important;
}

/* Intro block: fleur ornament, title, subtitle — shown once the modal opens */
.ar-search-modal__intro {
  text-align: center;
  margin-bottom: 1.1rem;
}
.ar-search-modal__ornament {
  width: 26px;
  height: auto;
  margin-bottom: 0.6rem;
  opacity: 0.8;
}
.ar-search-modal__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 2rem;
  color: #0F1728;
  margin: 0 0 0.4rem;
  line-height: 1.15;
}
.ar-search-modal__subtitle {
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #5B6480;
  margin: 0;
}
@media screen and (max-width: 749px) {
  .ar-search-modal__intro { margin-bottom: 1.1rem; }
  .ar-search-modal__ornament { width: 22px; margin-bottom: 0.6rem; }
  .ar-search-modal__title { font-size: 1.5rem; }
  .ar-search-modal__subtitle { font-size: 0.78rem; }
}

/* Search input row — a contained, rounded white bar inset within the cream
   frame, not a stark flush-edge bar */
.predictive-search-form__header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.predictive-search-form__header-inner {
  background: #fff !important;
  border: 1px solid #DDD6C8 !important;
  border-radius: 100px !important;
  /* Left side keeps its original inset (the search icon's absolute offset
     is measured from this padding edge regardless of the value, so this is
     safe to leave alone); right side is zeroed out so the submit button
     below can sit flush against the pill's edge with no visible seam —
     overflow:hidden on this element clips the button's square corner into
     the pill's own curve automatically, no separate radius needed on it. */
  padding-inline: 0.5rem 0 !important;
  overflow: hidden !important;
}
/* Stock CSS has an !important, higher-specificity :focus-within rule that
   re-asserts border-color: var(--color-border) (and drops some sides to
   transparent) the instant the search input is focused — which happens
   immediately on modal open, since the input auto-focuses. That's what was
   producing the mismatched/cut-off border on the left. Match its selector
   list with boosted specificity (repeated class) so ours wins outright. */
.predictive-search-form__header-inner.predictive-search-form__header-inner:focus-within,
.predictive-search-form__header.predictive-search-form__header:focus-within,
.predictive-search-form__header-inner.predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
  border-color: #DDD6C8 !important;
}
.search-input {
  font-size: 1.3rem !important;
  font-family: 'Jost', sans-serif !important;
  color: #0F1728 !important;
}
@media screen and (max-width: 749px) {
  .search-input { font-size: 1.1rem !important; }
}
.search-input::placeholder {
  color: #A89B82 !important;
  opacity: 1 !important;
  font-style: italic;
  /* Explicit one-off exception to the sitewide 400 font-weight floor,
     requested by name — 300 is one of the statically-loaded Jost weights
     so no font-variation-settings pairing is needed here. */
  font-weight: 300 !important;
}
.predictive-search__icon { color: #A89B82 !important; }

/* Submit button — merged into the search bar itself rather than floating
   beside it. It's a plain rectangle flush against the header-inner's right
   edge; the parent's overflow:hidden + border-radius:100px clip it into a
   matching rounded cap, so no seam is visible between the white input area
   and the navy button. align-self:stretch makes it fill the bar's full
   height. Genuinely submits the form (routes.search_url) — same as
   pressing Enter, no different from any other search-bar submit control. */
.ar-search-modal__submit,
button.ar-search-modal__submit {
  flex-shrink: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.4rem !important;
  margin-left: 0.6rem !important;
  background: #0F1728 !important;
  background-color: #0F1728 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.2s;
}
.ar-search-modal__submit:hover,
button.ar-search-modal__submit:hover {
  background: #1e2d4a !important;
  background-color: #1e2d4a !important;
}
.ar-search-modal__submit .svg-wrapper,
.ar-search-modal__submit svg {
  color: #EDE6D6 !important;
}
@media screen and (max-width: 749px) {
  .ar-search-modal__submit,
  button.ar-search-modal__submit { width: 3rem !important; }
}

/* The bar (and the submit button stretched inside it) needs to clear the
   theme's own 44px minimum-touch-target standard on mobile — font-size and
   padding alone got close but not reliably past it. */
@media screen and (max-width: 749px) {
  .predictive-search-form__header-inner { min-height: 44px !important; }
}

/* Close button — root cause of the "navy box, invisible navy X" finally
   found: the sitewide brand rule `.button:not(.slideshow-control) { background-color:
   var(--ar-dark) !important; }` (line ~246) has higher CSS specificity
   (0,2,0, from the :not() pseudo-class) than a plain single-class selector
   like `.predictive-search__close-modal-button` (0,1,0) — so on the
   !important-vs-!important tiebreak, the global navy-button rule was always
   winning regardless of what this block set. Boosting specificity via an
   ancestor + repeated class (0,3,0) fixes it for good.
   Also relocated from inline-in-the-search-bar to a floating top-right
   corner button (a common luxury-ecommerce modal pattern), matching cream
   background + navy X against the modal card itself. */
.search-modal__content {
  position: relative !important;
}
.search-modal__content .predictive-search__close-modal-button.predictive-search__close-modal-button {
  position: absolute !important;
  /* Now a direct child of the dialog (moved out of the search-bar row in
     the markup), so this offset is relative to the whole card. Vertically
     centered against the "Find what speaks to you" title line specifically
     (below the ornament, above the subtitle), not the card's top edge. */
  top: 3.9rem !important;
  right: 1.75rem !important;
  z-index: 30 !important;
  margin: 0 !important;
  width: 38px !important;
  height: 38px !important;
  background: #F2F1EF !important;
  background-color: #F2F1EF !important;
  border: 1px solid #DDD6C8 !important;
  border-radius: 50% !important;
  transition: background 0.2s, border-color 0.2s;
}
.search-modal__content .predictive-search__close-modal-button.predictive-search__close-modal-button .svg-wrapper,
.search-modal__content .predictive-search__close-modal-button.predictive-search__close-modal-button svg {
  color: #0F1728 !important;
}
.search-modal__content .predictive-search__close-modal-button.predictive-search__close-modal-button svg path {
  fill: #0F1728 !important;
  stroke: #0F1728 !important;
}
.search-modal__content .predictive-search__close-modal-button.predictive-search__close-modal-button:hover {
  background: #fff !important;
  background-color: #fff !important;
  border-color: #A89B82 !important;
}
@media screen and (max-width: 749px) {
  /* 44px — the theme's own --minimum-touch-target standard. It was 34px
     here before, which was a real "tiny tap target" miss on the modal's
     most frequently-used control. */
  .search-modal__content .predictive-search__close-modal-button.predictive-search__close-modal-button {
    top: 2.9rem !important;
    right: 0.85rem !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* "Try Searching" quick-search chips + AI tagline — sits inside the sticky
   header (after the input row) so it never overlaps the results dropdown
   below, which is positioned relative to the header's full height */
.ar-search-modal__try {
  padding: 1rem 0 1.1rem;
}
.ar-search-modal__try-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A89B82;
  font-weight: 500;
  margin-bottom: 0.9rem;
}
.ar-search-modal__try-line {
  flex: 1;
  height: 1px;
  background: #DDD6C8;
}
/* All five chips stay on one line on desktop — sized tight enough to fit,
   with overflow-x as a safety net (not a design goal) on unusually narrow
   desktop windows rather than an awkward wrap. Mobile wraps normally
   instead, since a horizontally-scrolling strip is worse on a phone than
   two centered rows. */
.ar-search-modal__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.ar-search-modal__chips::-webkit-scrollbar { display: none; }
.ar-search-modal__chip {
  font-family: 'Jost', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0F1728;
  text-decoration: none;
  background: #fff;
  border: 1px solid #DDD6C8;
  border-radius: 100px;
  padding: 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.ar-search-modal__chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #A89B82;
  transition: color 0.2s;
}
.ar-search-modal__chip:hover {
  border-color: #0F1728;
  background: #F2F1EF;
}
.ar-search-modal__chip:hover svg { color: #0F1728; }
.ar-search-modal__ai-tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: #A89B82;
  text-align: center;
  margin: 1.1rem 0 0;
}
@media screen and (max-width: 749px) {
  .ar-search-modal__try { padding: 0.85rem 0 1rem; }
  /* Mobile gets its own chip treatment, not a shrunk desktop pill — larger
     type, more generous padding, more gap between adjacent pills so a
     thumb can't easily mis-tap the wrong one. Comfortably clears 44px
     tall with this padding + line-height. */
  .ar-search-modal__chips { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; gap: 0.65rem; }
  .ar-search-modal__chip { font-size: 0.78rem; padding: 0.75rem 1.15rem; gap: 0.45rem; }
  .ar-search-modal__chip svg { width: 14px; height: 14px; }
  .ar-search-modal__ai-tag { font-size: 0.68rem; margin-top: 1rem; }
}

/* Divider + secondary "value" tiles beneath the suggestions — replaces a
   products grid with something quieter and more brand-appropriate. */
.ar-search-modal__divider {
  display: flex;
  justify-content: center;
  margin: 0 0 1.1rem;
  opacity: 0.55;
}
.ar-search-modal__divider img { width: 15px; height: auto; }
.ar-search-modal__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid #DDD6C8;
}
.ar-search-modal__tile { text-align: center; }
.ar-search-modal__tile .svg-wrapper {
  display: inline-flex;
  color: #A89B82;
  margin-bottom: 0.5rem;
}
.ar-search-modal__tile .svg-wrapper svg { width: 19px; height: 19px; }
.ar-search-modal__tile h5 {
  font-family: 'Jost', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  color: #0F1728;
  margin: 0 0 0.3rem;
}
.ar-search-modal__tile p {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: #5B6480;
  margin: 0;
  line-height: 1.5;
}
@media screen and (max-width: 749px) {
  .ar-search-modal__tiles { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .ar-search-modal__tile .svg-wrapper svg { width: 21px; height: 21px; }
  .ar-search-modal__tile p { font-size: 0.72rem; line-height: 1.45; }
}

/* No default products grid on open — Shannon wants just the title/search
   bar/chips, nothing else, until an actual search is typed. The Liquid-level
   empty-state render is already turned off (search-modal.liquid), but the
   JS also auto-loads a "Recently Viewed" grid on dialog open for returning
   visitors independent of that flag — this catches that case too. Real
   typed-search results (from sections/predictive-search.liquid) always
   carry a [data-search-results] marker the auto-loaded grids don't have, so
   this only ever hides the default/recently-viewed state, never an actual
   search result. */
.search-modal__content .predictive-search-form__content-wrapper {
  display: none !important;
}
.search-modal__content .predictive-search-form__content-wrapper:has([data-search-results]) {
  display: flex !important;
}

/* Results panel — same warm background as the input row, no visible seam */
.predictive-search-form__content,
.predictive-search-dropdown,
.predictive-search-results__inner {
  background: #F2F1EF !important;
}
.predictive-search-results__inner { padding: 1.75rem 0 !important; }

/* Section labels ("Recently viewed" / "Products") styled as brand eyebrows —
   small-caps, letter-spaced, navy for accessible contrast on this background */
.predictive-search-results__title {
  font-size: 0.78rem !important;
  font-family: 'Jost', sans-serif !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #0F1728 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.1rem !important;
}
.predictive-search-results__clear {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #5B6480 !important;
  border: 1px solid #DDD6C8 !important;
  border-radius: 100px !important;
  padding: 0.35rem 0.9rem !important;
  background: #fff !important;
  transition: color 0.2s, border-color 0.2s;
}
.predictive-search-results__clear:hover {
  color: #0F1728 !important;
  border-color: #0F1728 !important;
}
.predictive-search-results__card .resource-card__title,
.predictive-search-results__card--product .resource-card__title { font-size: 1.3rem !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 500 !important; }
.predictive-search__search-button {
  font-family: 'Jost', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: #0F1728 !important;
  color: #EDE6D6 !important;
  border: 1px solid #0F1728 !important;
  border-radius: 100px !important;
}
.predictive-search__search-button:hover { background: #1e2d4a !important; }

/* ── Filters sidebar (category pages + search results — same shared
   .facets component either way, no template scoping needed) ──
   "Price" / "Color" heading uppercase/tracking is handled by
   .facets__summary above, not here — see the comment there for why. */

/* Price range number inputs — stock .field__input relies on a subtle
   box-shadow only (no real border), which read as flat/undefined. */
.price-facet__input {
  border: 1px solid #E6DED2 !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  /* NOT a plain "padding: 8px 12px" shorthand — that was overwriting stock's
     reserved left space (calc(2.5 * --input-padding-x)) that the
     absolutely-positioned "$" label (.price-facet__label, position:
     absolute; left:0) depends on, causing the $ to overlap the input's own
     text. Keep that exact stock calc for the start side, only override
     block/end padding. */
  padding-block: 8px !important;
  /* 24px, not stock's 2.5x calc (~32px) — that was sized for a larger
     default font than this sidebar's 14px; a tighter reserve still
     clears the "$" (see .price-facet__label above, now matched to
     8px inset) and gives the actual number several more px of room in
     an already-narrow box. */
  padding-inline-start: 24px !important;
  padding-inline-end: 10px !important;
  min-width: 0 !important;
  /* Font-family was unset here, so this <input> fell back to stock's
     inherited font rather than Jost — at the same nominal 14px, a
     different font's x-height/cap-height can read visibly larger, which
     is why this looked bigger than .checkbox__label-text next to it
     despite both being "14px". Matching font-family AND sizing a notch
     smaller than the color labels (13px vs 14px) so the price numbers
     read as secondary/quieter, not the dominant element in the row. */
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  color: #1B1B1B !important;
}
.price-facet__separator {
  color: #6B6B6B !important;
  font-size: 14px !important;
}

/* Checkboxes — stock border exists but at low opacity, easy to miss.
   Scoped to .facets so this doesn't touch checkboxes used elsewhere on
   the site (cart terms, newsletter, etc.). */
.facets .checkbox .icon-checkmark {
  width: 15px !important;
  height: 15px !important;
  border: 1px solid #D6C7B3 !important;
  border-radius: 3px !important;
  background-color: #fff !important;
}
.facets .checkbox__input:checked + .checkbox__label .icon-checkmark {
  background-color: #1B1B1B !important;
  border-color: #1B1B1B !important;
}
.facets .checkbox__label-text {
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  color: #1B1B1B !important;
  /* Stock already sets white-space:nowrap + text-overflow:ellipsis on
     this, but as a flex child it needs min-width:0 to actually be
     ALLOWED to shrink/ellipsis within the row — without it, the label
     claims its full natural width and pushes .checkbox__count (below)
     out past the sidebar's edge instead of the label truncating. That
     was rendering as counts showing only "(" with the number clipped
     off entirely. */
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Result count next to each option ("(48)") — a separate span
   (snippets/checkbox.liquid) so it can be styled distinctly and pushed
   to the right, rather than plain text concatenated into the label. */
.facets .checkbox__label {
  width: 100% !important;
  justify-content: space-between !important;
}
.facets .checkbox__count {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  color: #6B6B6B !important;
  padding-left: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Vertical spacing between filter options. */
.facets .facets__inputs-list-item {
  margin-bottom: 11px !important;
}

/* Color swatch dot before each option — real per-product swatch/color
   metafield data isn't populated for this filter (checked: value.swatch
   is empty for every value), so this maps the known, fixed set of color
   filter names to real colors via data-filter-value (set in
   list-filter.liquid) rather than leaving it unswatched. If real swatch
   data is ever added in Shopify Admin, prefer switching the filter to
   is_swatch rendering instead of maintaining this list. */
.facets li[data-filter-value] .checkbox__label-text::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #EFE7DD;
  margin-right: 10px;
  vertical-align: middle;
  background: #EFE7DD;
}
.facets li[data-filter-value="beige"] .checkbox__label-text::before { background: #D8C9AE; }
.facets li[data-filter-value="black"] .checkbox__label-text::before { background: #1A1A1A; }
.facets li[data-filter-value="blue"] .checkbox__label-text::before { background: #3B6EA5; }
.facets li[data-filter-value="brown"] .checkbox__label-text::before { background: #7B5230; }
.facets li[data-filter-value="gray"] .checkbox__label-text::before,
.facets li[data-filter-value="grey"] .checkbox__label-text::before { background: #9B9B93; }
.facets li[data-filter-value="green"] .checkbox__label-text::before { background: #5C7A5C; }
.facets li[data-filter-value="multicolor"] .checkbox__label-text::before {
  background: conic-gradient(from 180deg, #A83A3A, #D9822B, #5C7A5C, #3B6EA5, #7B5CA8, #A83A3A);
}
.facets li[data-filter-value="orange"] .checkbox__label-text::before { background: #D9822B; }
.facets li[data-filter-value="purple"] .checkbox__label-text::before { background: #7B5CA8; }
.facets li[data-filter-value="red"] .checkbox__label-text::before { background: #A83A3A; }
.facets li[data-filter-value="white"] .checkbox__label-text::before { background: #FFFFFF; }
.facets li[data-filter-value="tan"] .checkbox__label-text::before { background: #C9A876; }
.facets li[data-filter-value="yellow"] .checkbox__label-text::before { background: #E8C547; }

/* Range slider colors (structure/positioning is in price-filter.liquid's
   own stylesheet). Track and fill are the same accent color per spec —
   this reference only shows the full-range (no filter applied) state,
   where both look identical anyway. The thumbs are plain divs, driven
   directly by Pointer Events (see price-filter.liquid) — not native
   <input type="range"> elements. */
.price-facet__slider-track { background: #A47C5A !important; }
.price-facet__slider-fill { background: #A47C5A !important; }
.price-facet__slider-thumb {
  background: #fff !important;
  border: 2px solid #A47C5A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 40, 0.15) !important;
}

/* "+ Show more" link */
.facets .show-more__button {
  color: #A47C5A !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  padding-top: 6px !important;
}
.facets .show-more__button .svg-wrapper {
  color: #A47C5A !important;
}