/** Shopify CDN: Minification failed

Line 603:0 Unexpected "}"

**/
.template-collection .banner {
  position: relative;
}
/* Banner heading + breadcrumb text color fix */
.template-collection .banner .banner-content .banner-content-main .text-content-heading { color: #ffffff; }
.template-collection .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper,
.template-collection .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper .breadcrumb-item a.link-text { color: #ffffff; }

/* Vertical filter panel text color fix */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets { color: #222222; }
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets h3,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facets-summary,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-checkbox span[aria-hidden="true"],
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-display-header { color: #222222; }

/* Price range numbers, sort label, sort dropdown text */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-display-header,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .range-values .field .field-input,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .range-values .field .field-label,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .range-values .lowercase,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-sorting label,
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-sorting .select-select { color: #222222; }

/* Checkbox square border + price input border */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-checkbox .input-face::after { box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.4); }
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facets-price .range-values .field { --color-input-border: 34, 34, 34; }

/* Collection page background */
.main-collection__wrapper.template-collection { background: #dddddd; }
.main-search__wrapper.template-collection {
  background: #dddddd;
}
.main-list-collections__wrapper.template-collection {
  background: #dddddd;
}

.main-blog__wrapper.template-collection { background: #dddddd; }

/* "No results found" empty state text — same dark text treatment
   as the rest of the light-background collection/search layout */
.template-collection .paginate-content--empty .empty-title {
  color: #222222;
  font-weight: var(--font-body-weight-bold);
}

/* Sort-by dropdown border color — same mechanism as the price inputs, just targeting .select this time */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-sorting .select {
  --color-input-border: 34, 34, 34;
}

/* Pagination number text color — these are "ethereal" buttons with no visible border box;
   --color-button-text inherits the theme's white foreground, invisible against our new #dddddd
   background. Overriding the text-color variable only, no border/background/padding touched. */
.template-collection .pagination-container .pagination-item.button--ethereal {
  --color-button-text: 34, 34, 34;
}

/* Checkbox checkmark fill color */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .facet-checkbox {
  --color-foreground: 34, 34, 34;
}

/* "Read more / Read less" link + underline color */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .expand-button-wrapper .expand-button {
  --color-button-text: 34, 34, 34;
}

/* "Read more / Read less" underline color (drawn via a ::after pseudo using --color-foreground) */
.template-collection .content-grid-main.has-vertical-facets .facets-vertical .facets .expand-button-wrapper .expand-button {
  --color-foreground: 34, 34, 34;
}

/* "+N" more-swatches button — force dark text/border on collection cards,
   matching the #222222 foreground used elsewhere on this page */
.template-collection .card-swatches .color-swatches .swatch-more--button {
  --color-foreground: 34, 34, 34;
  --border-opacity: 0.5;
}

.main-search .banner.gradient {
  background: #dddddd !important;
}

/* Search page hero — override the color-accent-1 scheme variables
   locally, scoped to .main-search only. Does NOT modify color-accent-1
   itself, so every other section using that scheme is unaffected. */
.main-search .banner {
  --color-background: 221, 221, 221; /* #dddddd */
  --color-foreground: 34, 34, 34;    /* #222222 */
  --color-button: 0, 125, 194;       /* #007DC2 */
  --color-button-text: 255, 255, 255;
}

/* The collection-page rule above hardcodes white heading/breadcrumb text
   for its dark banner. The search page banner is now light, so it needs
   the opposite — scoped to .main-search only; the collection-page rule
   is untouched and still applies there. */
.main-search .banner .banner-content .banner-content-main .text-content-heading,
.main-search .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper,
.main-search .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper .breadcrumb-item a.link-text {
  color: #222222;
}

/* Collection card overlay ("card-information") on the All Collections page.
   Same root cause as the search-page banner: color-inverse's actual colors
   live in Shopify's auto-generated color-scheme stylesheet, not in any file
   we can edit directly — so we override the scheme variables locally,
   scoped to .main-list-collections so no other page's collection cards
   (if this markup is reused elsewhere) are affected. */
.main-list-collections .card-wrapper.collection-card-wrapper .card-information {
  --color-background: 34, 34, 34;
  --color-foreground: 255, 255, 255;
  --color-button: 0, 125, 194;       /* #007DC2, same brand blue as before */
  --color-button-text: 255, 255, 255;
}

/* .card-heading is forced to #a1a1a1 globally elsewhere in style.css —
   that rule would fight the override above. Counter-override scoped to
   just this card's heading; the global #a1a1a1 rule is untouched
   everywhere else it applies. */
.main-list-collections .card-wrapper.collection-card-wrapper .card-heading {
  color: #ffffff !important;
}

/* "All collections" banner — same fix as the search-page banner: the
   gradient class paints the real background from Shopify's auto-generated
   color-scheme stylesheet, so we override the final background directly.
   Scoped to .main-list-collections .banner.gradient — this exact
   combination only exists on this page, so it cannot affect the product
   collection page or search page banners. */
.main-list-collections .banner.gradient {
  background: #dddddd !important;
}

.main-list-collections .banner {
  --color-background: 221, 221, 221; /* #dddddd */
  --color-foreground: 34, 34, 34;    /* #222222 */
}

/* The .template-collection rule elsewhere in this file hardcodes white
   heading/breadcrumb text for the dark collection-page banner. This banner
   is now light, so it needs the opposite — scoped to .main-list-collections
   only; the original .template-collection rule is untouched and still
   applies correctly on the product collection page. */
.main-list-collections .banner .banner-content .banner-content-main .text-content-heading,
.main-list-collections .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper,
.main-list-collections .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper .breadcrumb-item a.link-text {
  color: #222222;
}

/* Blog banner — same fix as list-collections/search banners: the gradient
   class paints the real background from the color-scheme stylesheet, so we
   override the final background directly. Scoped to .main-blog only. */
.main-blog .banner.gradient {
  background: #dddddd !important;
}

.main-blog .banner {
  --color-background: 221, 221, 221; /* #dddddd */
  --color-foreground: 34, 34, 34;    /* #222222 */
}

/* Heading + breadcrumb: counter the .template-collection dark-banner rule,
   scoped to .main-blog only — the original rule stays untouched elsewhere. */
.main-blog .banner .banner-content .banner-content-main .text-content-heading,
.main-blog .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper,
.main-blog .banner .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper .breadcrumb-item a.link-text {
  color: #222222;
}

/* ================================================================
   TABLET ONLY (750–1199px) — "Filter and sort" trigger + product count
   Same dark-on-dark contrast issue as the mobile fix above, but the
   drawer trigger is visible up to 1200px (large-up-hide), not just
   ≤749px, so it needs the identical color fix in this band too.
   Color-only — no layout changes, since the row already fits fine
   at this width and we don't want to touch anything that isn't broken.
   ================================================================ */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .template-collection .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper modal-opener.button {
    --color-button-text: 255, 255, 255;
  }

  .template-collection .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper .facets-active-count {
    color: #ffffff;
  }
}

/* ================================================================
   MOBILE ONLY — "Filter and sort" trigger + product count
   Figma reference: single row, button on the left, count on the
   right, no line-wrap. Scoped to max-width:749px only so tablet
   (750–1199px) and desktop (1200px+) keep their existing layout
   untouched.
   ================================================================ */
@media screen and (max-width: 749px) {
  .template-collection .banner .banner-content .banner-content-bottom.facets-group {
    padding-block-start: 0.75rem;
    padding-block-end: 0.75rem;
  }

  .template-collection .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
  }

  /* "Filter and sort" trigger — stay compact, never grow to fill
     the row, never wrap its label onto a second line */
  .template-collection .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper modal-opener.button {
    flex: 0 0 auto;
    width: auto;
    max-width: 65%;
    white-space: nowrap;
    padding-inline: 1rem;
    --color-button-text: 255, 255, 255; 
  }

  .template-collection .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper modal-opener.button span {
    white-space: nowrap;
  }

  /* Product count — sits to the right, truncates gracefully instead
     of dropping to its own line when space is tight */
  .template-collection .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper .facets-active-count {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: end;
    font-size: 0.8125rem;
    color: #ffffff;
  }

  .main-search .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper modal-opener.button {
    --color-button-text: 34, 34, 34;
  }

  .main-search .banner .banner-content .banner-content-bottom .facets-drawer-opener-wrapper .facets-active-count {
    color: #222222;
  }
}

/* ================================================================
   "Filter and sort" trigger + product count — dark-banner-text
   variant. Mirrors the TABLET ONLY and MOBILE ONLY blocks above,
   line for line, but scoped to .banner--dark-text (only present
   when the "dark_banner_text" section setting is on). Higher
   specificity from the extra class wins over the base white-text
   rules above without editing them — any section that doesn't use
   banner--dark-text (including the entire default template) keeps
   exactly the same white text as before, untouched.
   ================================================================ */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .template-collection .banner.banner--dark-text .banner-content .banner-content-bottom .facets-drawer-opener-wrapper modal-opener.button {
    --color-button-text: 34, 34, 34;
  }

  .template-collection .banner.banner--dark-text .banner-content .banner-content-bottom .facets-drawer-opener-wrapper .facets-active-count {
    color: #222222;
  }
}

@media screen and (max-width: 749px) {
  .template-collection .banner.banner--dark-text .banner-content .banner-content-bottom .facets-drawer-opener-wrapper modal-opener.button {
    --color-button-text: 34, 34, 34;
  }

  .template-collection .banner.banner--dark-text .banner-content .banner-content-bottom .facets-drawer-opener-wrapper .facets-active-count {
    color: #222222;
  }
}

/* Move the collection-card title below the image, mobile only.
   Total: X and View all stay exactly where they are (inside the image
   overlay) — only the heading relocates. Reuses card-collection.liquid's
   existing below-image .card-content block (normally hidden globally for
   collection cards) instead of touching any markup. Scoped to
   .main-list-collections + mobile only — desktop/tablet, and any other
   page using collection-card-wrapper cards, are completely untouched. */
@media screen and (max-width: 749px) {
  /* Hide only the heading inside the image overlay; Total + View all remain. */
  .main-list-collections .card-wrapper.collection-card-wrapper .card-information .card-heading {
    display: none;
  }

  /* Reveal the below-image block for the title only. */
  .main-list-collections .card-wrapper.collection-card-wrapper .card .card-content {
    display: block;
    padding-block: 0.5rem 0;
    text-align: center;
  }

  .main-list-collections .card-wrapper.collection-card-wrapper .card .card-content .card-heading {
    font-size: 0.8125rem;
    color: #222222;
  }

  /* This block has its own "View all"/count built in — hide them here
     since Total + View all already show inside the image overlay above. */
  .main-list-collections .card-wrapper.collection-card-wrapper .card .card-content .card-buttons {
    display: none;
  }

  .main-list-collections .card-wrapper.collection-card-wrapper .card .card-inner .card-inner-content .card-information {
    padding: 0.375rem;
  }

  .main-list-collections .card-wrapper.collection-card-wrapper .card-information .light {
    font-size: 1rem;
  }

  /* Same specificity fix for the button's top margin. */
  .main-list-collections .card-wrapper.collection-card-wrapper .card .card-inner .card-inner-content .card-information .card-buttons {
    margin-block-start: 0.75rem;
  }

  .main-list-collections .card-wrapper.collection-card-wrapper .card-information .card-buttons .button {
    min-height: 2rem;
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 1199px) {
  #Facets-Drawer .facet-display {
    background: #222222;
    color: #ffffff;
    --color-background: 34, 34, 34;
  }

  #Facets-Drawer .facet-display .facet-display-header,
  #Facets-Drawer .facet-display .facet-checkbox span[aria-hidden="true"],
  #Facets-Drawer .facet-display .range-values .field .field-input,
  #Facets-Drawer .facet-display .range-values .field .field-label,
  #Facets-Drawer .facet-display .range-values .lowercase,
  #Facets-Drawer .facet-display .menu-link {
    color: #ffffff;
  }

  #Facets-Drawer .facet-display .facet-checkbox .input-face::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  }

  #Facets-Drawer .facet-display .facets-price .range-values .field {
    --color-input-border: 255, 255, 255;
  }

  #Facets-Drawer .facet-display .facet-checkbox {
    --color-foreground: 255, 255, 255;
  }

  #Facets-Drawer .facet-display .facets-price .range-slider-wrapper {
    background: rgba(255, 255, 255, 0.2);
  }

  #Facets-Drawer .facet-display .facets-price .range-slider-wrapper .range-progress:after {
    background: #ffffff;
  }

  #Facets-Drawer .facet-display .facets-price .range-slider-wrapper input[type="range"]::-webkit-slider-thumb {
    background: #ffffff;
  }

  #Facets-Drawer .facet-display .facets-price .range-slider-wrapper input[type="range"]::-moz-range-thumb {
    background: #ffffff;
  }

  #Facets-Drawer .facet-display .facets-price .range-slider-wrapper input[type="range"]::-ms-thumb {
    background: #ffffff;
  }

  #Facets-Drawer .facet-display .expand-button-wrapper .expand-button {
    --color-button-text: 255, 255, 255;
    --color-foreground: 255, 255, 255;
  }
}

.template-collection .banner .banner-image {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
}
.template-collection .banner .banner-image.synergy--fixed {
  clip-path: inset(-1px);
}
.template-collection .banner .banner-image.synergy--fixed img {
  position: fixed;
}
@media screen and (min-width: 750px) and (prefers-reduced-motion: no-preference) {
  .template-collection .banner .banner-image.scroll-synergy img {
    visibility: hidden;
    opacity: 0;
  }
  .template-collection .banner .banner-image.scroll-synergy[data-init=true] img {
    visibility: visible;
    animation: fadeIn 1200ms cubic-bezier(0, 0, 0.3, 1) forwards;
  }
  .template-collection .banner .banner-image.scroll-synergy.synergy--zoom-in img {
    transform: scale(var(--zoom-in-ratio));
  }
  .template-collection .banner .banner-image.scroll-synergy.synergy--parallax img {
    height: 150%;
    transform: translateY(calc(-33% * var(--parallax-ratio)));
  }
}
.template-collection .banner .banner-content {
  display: grid;
  grid-template-rows: 1fr auto;
  z-index: 1;
}
.template-collection .banner .banner-content .banner-content-main {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: 3rem;
}
.template-collection .banner .banner-content .banner-content-main .text-content-heading {
  font-size: 3rem;
}
.template-collection .banner .banner-content .banner-content-main .text-content-heading.heading-size--small {
  font-size: 2rem;
}
.template-collection .banner .banner-content .banner-content-main .text-content-heading.heading-size--large {
  font-size: 4rem;
}
@media screen and (max-width: 749px) {
  .template-collection .banner .banner-content .banner-content-main .text-content-heading {
    font-size: 2rem;
  }
  .template-collection .banner .banner-content .banner-content-main .text-content-heading.heading-size--small {
    font-size: 1.5rem;
  }
  .template-collection .banner .banner-content .banner-content-main .text-content-heading.heading-size--large {
    font-size: 2.5rem;
  }
}
.main-list-collections .template-collection .banner .banner-content .banner-content-main .text-content {
  max-width: 40rem;
}
.template-collection .banner .banner-content .banner-content-main .subcategory-list {
  margin-block-start: 2rem;
}
.template-collection .banner .banner-content .banner-content-main .subcategory-list ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2rem;
}
.template-collection .banner .banner-content .banner-content-main .subcategory-list ul .subcategory-item {
  flex: 0 0 auto;
}
.template-collection .banner .banner-content .banner-content-main .subcategory-list ul .subcategory-item a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.template-collection .banner .banner-content .banner-content-main .subcategory-list ul .subcategory-item .media {
  flex: 0 0 auto;
  width: 4rem;
}
.template-collection .banner .banner-content .banner-content-bottom {
  width: 100%;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}
.template-collection .banner.banner--small {
  position: relative;
}
.template-collection .banner.banner--small:before {
  content: "";
  display: block;
  width: 0;
  padding-block-end: 10rem;
}
.template-collection .banner.banner--medium {
  position: relative;
}
.template-collection .banner.banner--medium:before {
  content: "";
  display: block;
  width: 0;
  padding-block-end: 25rem;
}
.template-collection .banner.banner--large {
  position: relative;
}
.template-collection .banner.banner--large:before {
  content: "";
  display: block;
  width: 0;
  padding-block-end: 30rem;
}
.template-collection .content-grid-main {
  padding-block-start: 3rem;
  padding-block-end: 3rem;
}
.template-collection .content-grid-main .advertisement-item {
  min-height: 20rem;
}
@media screen and (min-width: 750px) {
  .template-collection .content-grid-main .advertisement-item {
    min-height: 30rem;
  }
  .template-collection .content-grid-main.has-vertical-facets {
    display: flex;
    align-items: flex-start;
  }
  .template-collection .content-grid-main.has-vertical-facets > * {
    flex: 1 1 auto;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical {
    flex: 0 0 auto;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu {
    width: 20rem;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu .menu-link:hover,
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu summary:hover {
    opacity: 0.75;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu .menu-link {
    display: block;
    padding-block: 0.5rem;
    padding-inline: 0;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu summary {
    display: flex;
    align-items: center;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu summary .icon-caret {
    width: 0.875rem;
    margin-inline-start: auto;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu .details-disclosure-content {
    padding-inline-start: 1rem;
  }
  .template-collection .content-grid-main.has-vertical-facets .facets-vertical .collection-menu + .facets {
    padding-block-start: 1rem;
    margin-block-start: 1rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.1);
  }
  .template-collection .content-grid-main.has-vertical-facets.vertical-facets--sticky .facets-vertical {
    position: sticky;
    top: calc(var(--header-height, 5rem) + 1rem);
  }
  .template-collection .content-grid-main.has-vertical-facets.facets-side--left .facets-vertical {
    padding-inline-end: var(--facets-vertical-gap);
  }
  .template-collection .content-grid-main.has-vertical-facets.facets-side--right {
    flex-direction: row-reverse;
  }
  .template-collection .content-grid-main.has-vertical-facets.facets-side--right .facets-vertical {
    padding-inline-start: var(--facets-vertical-gap);
  }
}
@media screen and (min-width: 750px) {
  .template-collection .banner .banner-content .banner-content-main .text-content.text-content--align-grid {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
}
.template-collection {
  --facets-vertical-gap: 3rem;
  --banner-action-width: 20rem;
}
@media screen and (min-width: 1200px) {
  .template-collection .banner .banner-content .banner-content-main.banner-content-main--grid-align {
    display: flex;
    align-items: flex-start;
  }
  .template-collection .banner .banner-content .banner-content-main.banner-content-main--grid-align .banner-content-spacer {
    flex: 0 0 auto;
    visibility: hidden;
    pointer-events: none;
  }
  .template-collection .banner .banner-content .banner-content-main.banner-content-main--grid-align .text-content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .template-collection .banner .banner-content .banner-content-main.banner-content-main--grid-align.facets-side--left .banner-content-spacer {
    padding-inline-end: var(--facets-vertical-gap);
  }
  .template-collection .banner .banner-content .banner-content-main.banner-content-main--grid-align.facets-side--right {
    flex-direction: row-reverse;
  }
  .template-collection .banner .banner-content .banner-content-main.banner-content-main--grid-align.facets-side--right .banner-content-spacer {
    padding-inline-start: var(--facets-vertical-gap);
  }
}
}
/* --------------------------------------------------------------------
   Normalizes legacy container-fluid/row/col-xs-12 rich-text markup
   when it's pasted into a collection description, mirroring the
   equivalent rules already defined for product descriptions
   (see style.css ~line 8052, .product-page .pdp-description-content).
   Scoped to .template-collection so it never touches search/blog/
   list-collections pages that reuse the same .text-content-description
   class name.
   -------------------------------------------------------------------- */
.template-collection .text-content-description .container,
.template-collection .text-content-description .container-fluid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}
.template-collection .text-content-description .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}
.template-collection .text-content-description .row > [class*="col-"] {
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding-inline: 0;
  float: none;
  box-sizing: border-box;
}
.template-collection .text-content-description .row.description-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.template-collection .text-content-description .description-grid > .col-xs-12:first-child {
  grid-column: 1 / -1;
}
@media screen and (max-width: 989px) {
  .template-collection .text-content-description .row.description-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 749px) {
  .template-collection .text-content-description .row.description-grid {
    grid-template-columns: 1fr;
  }
}
.template-collection .text-content-description .row .row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
}
.template-collection .text-content-description .row.components-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.template-collection .text-content-description .components-grid > .col-xs-12:first-child {
  grid-column: 1 / -1;
}
@media screen and (max-width: 989px) {
  .template-collection .text-content-description .row.components-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 749px) {
  .template-collection .text-content-description .row.components-grid {
    grid-template-columns: 1fr;
  }
}
.template-collection .text-content-description img {
  display: block;
  width: 100%;
  height: auto;
}
.template-collection .banner.banner--dark-text .banner-content .banner-content-main .text-content-heading,
.template-collection .banner.banner--dark-text .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper,
.template-collection .banner.banner--dark-text .banner-content .banner-content-main nav.breadcrumb .breadcrumb-wrapper .breadcrumb-item a.link-text {
  color: #222222;
}
/* --------------------------------------------------------------------
   Collection description "action" links (Skip to View Products /
   Become a Reseller). These classes ship inside the collection's
   description content (data, not theme code) with no matching CSS
   in this theme, so they render as plain underlined text. This block
   makes them look like real theme buttons (mirrors .button +
   .button--pill + .button--hover-animate in style.css ~line 1990)
   and lays them out on opposite sides of their row — all without
   touching the description content itself, so it can't affect any
   other page/theme using that same collection description.
   -------------------------------------------------------------------- */
.template-collection .text-content-description :is(p, div):has(> a.action_button) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  margin-block-end: 1rem;
}
.template-collection .text-content-description .action_button.right {
  margin-inline-start: auto;
}
.template-collection .text-content-description .action_button {
  --color-button: 0, 125, 194; /* #007DC2 */
  --color-button-text: 255, 255, 255;
  --buttons-radius: 9999px;
  --border-width: 1px;
  --border-color: var(--color-button-text);
  --border-opacity: 0.05;
  --alpha-button-background: 1;
  --alpha-button-text: 1;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0;
  padding-inline: 2.5rem;
  min-height: 3.5rem;
  min-width: 3rem;
  width: var(--banner-action-width);
  max-width: 100%;
  border: 0;
  border-radius: var(--buttons-radius);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--font-body-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(var(--color-button-text), var(--alpha-button-text));
  background: rgba(var(--color-button), var(--alpha-button-background));
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0, 0, 0.3, 1);
}
.template-collection .text-content-description .action_button:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--color-button-text));
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0, 0, 0.3, 1);
}
.template-collection .text-content-description .action_button:hover {
  transform: translateY(-0.125rem);
}
.template-collection .text-content-description .action_button:hover:before {
  opacity: 0.2;
}
.template-collection .text-content-description .action_button:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 var(--border-width) rgba(var(--border-color), var(--border-opacity));
  pointer-events: none;
  border-radius: var(--buttons-radius);
  transition: box-shadow 300ms ease;
}
@media screen and (max-width: 749px) {
  .template-collection .text-content-description :is(p, div):has(> a.action_button) {
    justify-content: center;
  }
  .template-collection .text-content-description .action_button.right {
    margin-inline-start: 0;
  }
}
/* --------------------------------------------------------------------
   Compact sort-only control next to the heading, used when
   "sort_in_banner" is on. Reuses the same markup/CSS classes the
   vertical facets sidebar renders (facet-wrapper, facet-sorting,
   select, etc.) — see component-facets.css — just re-laid-out and
   trimmed down to the dropdown alone.
   -------------------------------------------------------------------- */
.template-collection .text-content-heading-row.text-content-heading-row--with-sort {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  flex-wrap: nowrap;
}
.template-collection .text-content-heading-row.text-content-heading-row--with-sort .text-content-heading {
  flex: 1 1 auto;
  min-width: 0;
}
.template-collection .banner-sort-control {
  flex: 0 0 auto;
}
/* Hide everything except the actual dropdown: the "Filter and sort"
   heading and the "Sort by" label. */
.template-collection .banner-sort-control h3,
.template-collection .banner-sort-control label,
.template-collection .banner-sort-control .field-label,
.template-collection .banner-sort-control .facet-sorting label,
.template-collection .banner-sort-control .facet-filters-field label {
  display: none !important;
}
.template-collection .banner-sort-control .facet-filters-field {
  padding: 0;
}
.template-collection .banner-sort-control .select-select {
  width: var(--banner-action-width);
  min-height: 2.4rem;
  font-size: 0.875rem;
  padding-block: 0;
  padding-inline: 1rem;
}

/* --------------------------------------------------------------------
   Divider below the heading/sort row, matching the default collection
   template's layout. Opt-in via "show_heading_divider" (default off),
   so it only ever appears where explicitly enabled — the default
   template's section settings won't have this key at all, so it
   falls back to the schema default and stays untouched.
   -------------------------------------------------------------------- */
.template-collection .text-content-heading-divider {
  width: 100%;
  margin-block-start: 1rem;
  margin-block-end: 1.5rem;
  border: none;
  border-block-start: 1px solid rgba(var(--color-foreground), 0.2);
}
/* --------------------------------------------------------------------
   Description link color. Opt-in via "blue_description_links"
   (default off) so the default template's description links keep
   their existing color. Excludes .action_button — those are the
   filled blue buttons and must keep their own white-on-blue styling,
   not become blue-on-blue.
   -------------------------------------------------------------------- */
.template-collection .text-content.text-content--blue-links .text-content-description .content-main.rte a:not(.action_button) {
  color: #007DC2;
}

/* ================================================================
   MOBILE STICKY FILTER/SORT BAR
   Landing container for the "Filter and sort" trigger + product
   count row once component-facets.js relocates it out of the
   banner at <750px. Hidden by default (tablet/desktop never see
   it — the row lives inside the banner there, untouched).
   ================================================================ */
.facets-mobile-sticky-bar {
  display: none;
}

@media screen and (max-width: 1199px) {
  .facets-mobile-sticky-bar {
    display: block;
    position: sticky;
    top: var(--sticky-bar-offset, var(--header-bottom, var(--header-height, 5rem)));
    z-index: 2;
    background: #dddddd;
    border-block-start: 1px solid #222222;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  .facets-mobile-sticky-bar:empty {
    display: none;
  }

  .facets-mobile-sticky-bar .facets-drawer-opener-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding-block: 0.75rem;
    --color-button-text: 34, 34, 34;
  }

  .facets-mobile-sticky-bar .facets-drawer-opener-wrapper modal-opener.button {
    flex: 0 0 auto;
    width: auto;
    max-width: 65%;
    white-space: nowrap;
    padding-inline: 1rem;
    border: 1.5px solid #222222;
    color: #222222;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
  }

  .facets-mobile-sticky-bar .facets-drawer-opener-wrapper modal-opener.button::before,
  .facets-mobile-sticky-bar .facets-drawer-opener-wrapper modal-opener.button::after {
    box-shadow: none;
  }

  .facets-mobile-sticky-bar .facets-drawer-opener-wrapper modal-opener.button span {
    white-space: nowrap;
  }

  .facets-mobile-sticky-bar .facets-active-count {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: end;
    font-size: 14px;
    color: #222222;
  }

  /* dark_banner_text variant kept identical to base now that the bar
     is light by default — retained as its own rule (rather than
     deleted) so this class still resolves to something explicit if
     the section setting is ever combined with a future dark variant. */
  .facets-mobile-sticky-bar.facets-mobile-sticky-bar--dark-text {
    background: #dddddd;
    border-block-start-color: rgba(0, 0, 0, 0.1);
  }
  .facets-mobile-sticky-bar.facets-mobile-sticky-bar--dark-text .facets-drawer-opener-wrapper {
    --color-button-text: 34, 34, 34;
  }
  .facets-mobile-sticky-bar.facets-mobile-sticky-bar--dark-text modal-opener.button {
    border-color: #222222;
  }
  .facets-mobile-sticky-bar.facets-mobile-sticky-bar--dark-text .facets-active-count {
    color: #222222;
  }
}