/** Shopify CDN: Minification failed

Line 671:0 Unexpected "}"

**/
/* ==========================================================================
   Beigic Collection page restyle layer
   --------------------------------------------------------------------------
   Loaded only on collection templates. Visually overrides the existing
   main-collection-product-grid Liquid without touching its HTML or JS.
   Functionality (filters, sort, pagination) is unchanged.
   ========================================================================== */

/* Page surface cream is set globally in beigic-base.css now */

/* Hide any empty section reserves that would create a white gap */
html .collection-hero,
html section[id*="banner"]:empty,
html main > section:empty {
  display: none !important;
}

/* Match beigic spacing: main has padding 198px top, 45px sides, 90px
   bottom on desktop. Collection wrapper itself sits flush. */
@media (min-width: 1000px) {
  html main,
  html #MainContent {
    padding: 0 0 90px !important;
    margin: 0 !important;
  }
  /* Toolbar gets the top breathing room beigic uses */
  html .beigic-collection-toolbar {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }
}
html .collection,
html .collection.page-width,
html .product-grid-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.collection,
.collection-hero,
.facets-container,
.product-grid-container,
.collection .pagination-wrapper,
.collection .product-count {
  background: transparent !important;
}

/* Collection title (defensive — main-collection-banner is usually disabled) */
.collection-hero__title,
.collection-hero h1,
.collection-hero h2 {
  font-family: var(--beigic-font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(40px, 8vw, 80px) !important;
  line-height: 1.05 !important;
  color: var(--beigic-ink) !important;
  letter-spacing: -0.02em !important;
}

.collection-hero__description,
.collection-description {
  font-family: var(--beigic-font-sans) !important;
  font-size: clamp(15px, 3.6vw, 17px) !important;
  line-height: 1.6 !important;
  color: var(--beigic-ink) !important;
  max-width: 56ch;
}

/* ----- Filters (horizontal pills) ----- */
.facets__form,
.facets-container {
  border: 0 !important;
  background: transparent !important;
}

.facets__summary,
.facets__display,
.facets__heading,
.facets__sort,
.facet-filters__sort,
.facet-filters__label,
.product-count__text,
.facet-filters__field label {
  font-family: var(--beigic-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--beigic-ink) !important;
}

.facets__price,
.facets__list,
.facets__list li,
.facets-vertical-form {
  background: transparent !important;
}

.facets__button,
.facet-checkbox,
.facets-pill,
.facet-pill {
  background: transparent !important;
  border: 1px solid rgba(93, 70, 48, 0.25) !important;
  border-radius: 0 !important;
  color: var(--beigic-ink) !important;
  font-family: var(--beigic-font-sans) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  transition: border-color 200ms ease, background 200ms ease;
}

.facets__button:hover,
.facet-checkbox:hover {
  border-color: var(--beigic-ink) !important;
}

.facets__button[aria-expanded="true"],
.facet-checkbox input:checked + label,
.facets-pill.is-active {
  background: var(--beigic-ink) !important;
  color: var(--beigic-bg-cream) !important;
  border-color: var(--beigic-ink) !important;
}

/* Sort dropdown */
.facet-filters__sort,
select.facet-filters__sort {
  border: 0 !important;
  border-bottom: 1px solid rgba(93, 70, 48, 0.4) !important;
  border-radius: 0 !important;
  padding-block: 6px !important;
  background: transparent !important;
  color: var(--beigic-ink) !important;
  font-family: var(--beigic-font-sans) !important;
}

/* ----- Product cards ----- */
.collection .grid--quick-nav,
.product-grid,
.product-grid--collection,
ul.product-grid {
  gap: clamp(12px, 2.5vw, 24px) !important;
}

.product-grid .grid__item,
.product-grid .product-card-wrapper,
.product-grid .card-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card,
.card--standard,
.card--card,
.card--media,
.card--product {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card__inner {
  background: transparent !important;
  border-radius: 0 !important;
}

.card .media,
.card__media,
.card-information__wrapper,
.product-grid .media {
  border-radius: 0 !important;
  overflow: hidden;
}

.card__media img,
.product-grid .media img,
.product-grid .media--transparent img,
.card-wrapper .media img {
  mix-blend-mode: multiply !important;
  filter: contrast(1.14) saturate(1.12) brightness(0.99) !important;
  transition: transform 1200ms cubic-bezier(0.2, 0.0, 0.0, 1.0), filter 600ms ease;
}

.card-wrapper:hover .media img,
.card-wrapper:hover .card__media img {
  transform: scale(1.03);
  filter: contrast(1.20) saturate(1.20) brightness(1.0) !important;
}

/* Force card thumbnail wrappers to a square 1:1 ratio + apply tint backgrounds.
   Dawn theme nests the image in: .grid__item > .card-wrapper > .card > .card__inner > .card__media > .media.media--transparent > img
   We tint the .media (innermost wrapper around the img) so mix-blend on img picks it up. */
.product-grid .grid__item .card,
.product-grid .grid__item .card__inner,
.product-grid .grid__item .card__media,
.product-grid .grid__item .media,
.product-grid .grid__item .media--transparent {
  border-radius: 0 !important;
  overflow: hidden;
}

.product-grid .grid__item .card__media,
.product-grid .grid__item .media {
  aspect-ratio: 5 / 7 !important; /* beigic: 412 × 587 portrait */
}

/* Tinted card backgrounds — beigic palette, muted */
.product-grid > li.grid__item:nth-child(5n+1) .card,
.product-grid > li.grid__item:nth-child(5n+1) .card__inner,
.product-grid > li.grid__item:nth-child(5n+1) .card__media,
.product-grid > li.grid__item:nth-child(5n+1) .media {
  background: #f4ebd9 !important; /* warm cream */
  background-color: #f4ebd9 !important;
}
.product-grid > li.grid__item:nth-child(5n+2) .card,
.product-grid > li.grid__item:nth-child(5n+2) .card__inner,
.product-grid > li.grid__item:nth-child(5n+2) .card__media,
.product-grid > li.grid__item:nth-child(5n+2) .media {
  background: #efe8db !important; /* sand */
  background-color: #efe8db !important;
}
.product-grid > li.grid__item:nth-child(5n+3) .card,
.product-grid > li.grid__item:nth-child(5n+3) .card__inner,
.product-grid > li.grid__item:nth-child(5n+3) .card__media,
.product-grid > li.grid__item:nth-child(5n+3) .media {
  background: #f6e7dc !important; /* soft peach */
  background-color: #f6e7dc !important;
}
.product-grid > li.grid__item:nth-child(5n+4) .card,
.product-grid > li.grid__item:nth-child(5n+4) .card__inner,
.product-grid > li.grid__item:nth-child(5n+4) .card__media,
.product-grid > li.grid__item:nth-child(5n+4) .media {
  background: #ecebe2 !important; /* pale linen */
  background-color: #ecebe2 !important;
}
.product-grid > li.grid__item:nth-child(5n+5) .card,
.product-grid > li.grid__item:nth-child(5n+5) .card__inner,
.product-grid > li.grid__item:nth-child(5n+5) .card__media,
.product-grid > li.grid__item:nth-child(5n+5) .media {
  background: #f4e6d4 !important; /* honey */
  background-color: #f4e6d4 !important;
}

/* Title + price */
.card__heading,
.card__heading a,
.card-information__text,
.card .full-unstyled-link,
.product-card .product-title {
  font-family: var(--beigic-font-sans) !important;
  font-weight: 500 !important;
  font-size: clamp(14px, 3.5vw, 17px) !important;
  letter-spacing: -0.02em !important;
  color: var(--beigic-ink) !important;
  text-decoration: none !important;
}

.card .price,
.card .price-item,
.product-card .price,
.product-card .price-item--regular {
  font-family: var(--beigic-font-sans) !important;
  font-size: clamp(13px, 3.2vw, 15px) !important;
  color: var(--beigic-ink) !important;
}

.card .price--on-sale .price-item--regular,
.price-item--sale,
.price-item--last {
  color: var(--beigic-ink) !important;
}

.price__sale .price-item--regular,
.price-item--sale ~ .price-item--regular,
s.price-item {
  text-decoration: line-through;
  opacity: 0.4;
}

/* Vendor / rating — quiet accents */
.card__vendor,
.product-card .vendor-name {
  font-family: var(--beigic-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(93, 70, 48, 0.55) !important;
}

/* ----- Pagination — editorial ----- */
.pagination,
.pagination-wrapper {
  background: transparent !important;
  border: 0 !important;
  padding-block: 32px !important;
}

/* Editorial pagination — minimal, premium feel.
   Hide numbered buttons, replace with a tight prev/next row that
   sits centered under the product grid. */
@media (min-width: 1000px) {
  html .collection.beigic-has-sidebar .pagination-wrapper,
  html .collection.beigic-has-sidebar .pagination {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
    width: 100% !important;
    text-align: center !important;
    padding-block: 32px 24px !important;
  }
  html .collection.beigic-has-sidebar .pagination-wrapper .pagination__list,
  html .collection.beigic-has-sidebar .pagination .pagination__list {
    justify-content: center !important;
    margin: 0 auto !important;
    gap: 24px !important;
    align-items: center !important;
  }
}

/* Hide all numbered pagination items EXCEPT the current page indicator */
html .pagination__item:not(.pagination__item--current):not(.pagination__item--prev):not(.pagination__item--next) {
  display: none !important;
}
/* Hide ellipsis separators */
html .pagination__item--ellipsis,
html .pagination__item .pagination__item-ellipsis {
  display: none !important;
}

/* Minimal current-page indicator — small uppercase text */
html .pagination__item--current,
html .pagination__item--current span {
  font-family: var(--beigic-font-sans) !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--beigic-ink) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-bottom: 1px solid var(--beigic-ink) !important;
}

/* Prev / next as text links with subtle arrows */
html .pagination__item--prev,
html .pagination__item--next,
html .pagination__item--prev a,
html .pagination__item--next a {
  font-family: var(--beigic-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--beigic-ink) !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html .pagination__item--prev a:hover,
html .pagination__item--next a:hover {
  opacity: 0.6;
}

/* Reduce dawn's auto-injected section padding so there's no
   massive cream gap below pagination before footer */
@media (min-width: 1000px) {
  html .section-template--27201774321940__product-grid-padding,
  html [class*="__product-grid-padding"] {
    padding-bottom: 24px !important;
  }
  html main {
    padding-bottom: 0 !important;
  }
}

.pagination__list {
  gap: 12px !important;
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
}

.pagination__item,
.pagination__item-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--beigic-ink) !important;
  font-family: var(--beigic-font-sans) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
}

.pagination__item--current {
  font-style: italic !important;
  font-family: var(--beigic-font-display) !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
}

/* ----- Plus-icon cart on cards (matches beigic.com bottom-right) ----- */
.card__media,
.product-grid .media {
  position: relative;
}
.card__quick-add,
.product-grid__quick-add,
.quick-add__submit,
.card-wrapper button[name="add"] {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--beigic-font-sans) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  color: var(--beigic-ink) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 200ms ease;
  z-index: 1;
}
.card__quick-add:hover,
.quick-add__submit:hover { opacity: 1; }

/* Pagination spacing — beigic uses lots of breathing room */
@media (min-width: 1000px) {
  html .pagination-wrapper {
    padding-block: 80px 120px !important;
  }
}

/* ----- Mobile filter drawer ----- */
@media (max-width: 767px) {
  .facets-container,
  .mobile-facets__main,
  .mobile-facets {
    background: var(--beigic-bg-cream) !important;
  }

  .mobile-facets__header,
  .mobile-facets__heading,
  .mobile-facets__close {
    color: var(--beigic-ink) !important;
    font-family: var(--beigic-font-sans) !important;
  }

  .product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .pagination-wrapper {
    padding-block: 24px !important;
  }
}

/* ==========================================================================
   Sidebar hero cell + 4-column grid — injected via beigic-collection-sidebar
   ========================================================================== */

/* Hide dawn-theme filter / sort / count clutter — beigic shows none of this */
html .facets-container,
html facet-filters-form,
html facet-filters-form.facets,
html .facets,
html .facets__wrapper,
html .facets__heading,
html .facets__disclosure,
html .facet-filters,
html .facet-filters.sorting,
html .facet-filters__field,
html .facet-filters__label,
html .facet-filters__sort,
html .product-count,
html .product-count__text,
html #ProductCountDesktop,
html #ProductCount,
html .mobile-facets__count,
html .mobile-facets,
html .mobile-facets__details,
html facet-remove,
html .active-facets,
html .collection-filters,
html .filter-form,
html #main-collection-filters {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Sidebar (hero portrait) — matched to beigic.com exact dimensions.
   beigic measurements (1839px viewport DevTools): sidebar 407.88px,
   each card 412px, column-gap 30px, 3 cards = 1296px grid.
   In percentages: sidebar 22.2%, card 22.4%, gaps 30px. */
.beigic-collection-sidebar { display: none; }

@media (min-width: 1000px) {
  /* The .collection wrapper becomes a 2-column grid: sidebar | products.
     overflow:visible everywhere up the tree so position:sticky keeps working. */
  html main, html #MainContent, html body, html .collection,
  html .collection.beigic-has-sidebar, html .product-grid-container {
    overflow: visible !important;
  }
  html .collection.beigic-has-sidebar {
    display: grid !important;
    grid-template-columns: 22.2% 1fr !important;
    column-gap: 30px !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Equal 45px gap on both sides: hero offset from left edge,
       products offset from right edge */
    padding: 0 45px !important;
    margin: 0 !important;
  }

  /* Sidebar grid item stretches to fill the grid row (matches products
     column height) — no empty cream below the products. The inner
     __media element is sticky and pins to viewport while you scroll. */
  .beigic-collection-sidebar {
    display: block;
    grid-column: 1 / 2;
    grid-row: 1;
    align-self: stretch;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .beigic-collection-sidebar__media {
    position: sticky;
    top: 0;
    width: 100%;
    /* Cap the visible portrait at viewport height OR the column
       height (whichever is smaller) so it never extends past the
       products area. */
    height: min(100vh, 100%);
    max-height: 100vh;
    overflow: hidden;
  }
  .beigic-collection-sidebar__media img,
  .beigic-collection-sidebar__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .beigic-collection-sidebar__placeholder {
    background: linear-gradient(180deg, #d8c8b6 0%, #c9b6a1 50%, #b39a85 100%);
  }
  .beigic-collection-sidebar__caption {
    position: absolute;
    top: 32px;
    left: 28px;
    right: 28px;
    margin: 0;
    font-family: var(--beigic-font-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.45;
    color: var(--beigic-bg-cream);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    z-index: 2;
  }
}

  /* Product grid: 3 columns inside col 2 of the collection wrapper.
     Beigic uses 30px column gap and ~30px row gap. */
  html ul#product-grid,
  html ul#product-grid.grid,
  html ul#product-grid.product-grid,
  html ul#product-grid.grid--3-col-desktop,
  html ul#product-grid.grid--4-col-desktop,
  html ul#product-grid.grid--2-col-desktop {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-auto-flow: row !important;
    gap: 30px !important;
    row-gap: 60px !important;
    column-gap: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-wrap: nowrap !important;
  }

  /* Toolbar — flex layout: title flush left, sort flush right (matches beigic) */
  html .beigic-collection-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 56px 45px 32px !important;
    margin: 0 !important;
  }
  html .beigic-collection-toolbar__title {
    flex: 0 0 22.2% !important;
  }
  html .beigic-collection-toolbar__sort {
    margin-left: auto !important;
  }
  html .beigic-collection-toolbar__categories {
    left: 0 !important;
    min-width: 100% !important;
  }

  html ul#product-grid > li.grid__item,
  html .grid--3-col-desktop > li.grid__item,
  html .grid--2-col-tablet-down > li.grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cards fill their grid column (no max-width cap). Removing cap
     because grid cells are ~25% viewport (~470px) which is fine and
     matches beigic.com edge-to-edge density. */
  html ul#product-grid > li.grid__item .card-wrapper,
  html ul#product-grid > li.grid__item .product-card-wrapper,
  html ul#product-grid > li.grid__item .card,
  html ul#product-grid > li.grid__item .card__inner,
  html ul#product-grid > li.grid__item .card__media,
  html ul#product-grid > li.grid__item .media {
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* Reduce hero row span so empty grid space below isn't massive
     when the page has few products. */
  html ul#product-grid > li.beigic-hero-cell {
    grid-row: 1 / span 12 !important;
  }

  /* Full-width collection wrapper. Padding lives on the
     .collection.beigic-has-sidebar rule above (45px both sides) so
     don't override here. */
  html .collection,
  html .collection.page-width,
  html .product-grid-container {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* ==========================================================================
   Beigic collection toolbar — "Best +" expand + sort dropdown
   ========================================================================== */
/* Toolbar uses the SAME 4-column grid as the product grid below it,
   so the title aligns to where the first product card starts (col 2)
   and the plus icon sits at the right edge of that card column. The
   sort dropdown lives in col 4 right-aligned. */
.beigic-collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 56px 45px 32px;
  background: var(--beigic-bg-cream);
  position: relative;
}
@media (max-width: 999px) {
  .beigic-collection-toolbar {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 18px 16px;
  }
}

.beigic-collection-toolbar__title {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--beigic-font-sans);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 44px);
  letter-spacing: -0.02em;
  color: var(--beigic-ink);
  text-transform: capitalize;
  cursor: pointer;
  line-height: 1;
}
.beigic-collection-toolbar__plus {
  font-weight: 300;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1;
  color: var(--beigic-ink);
  opacity: 0.7;
  transition: transform 200ms ease;
}
.beigic-collection-toolbar__title[aria-expanded="true"] .beigic-collection-toolbar__plus {
  transform: rotate(45deg);
}

/* Title wrap is the positioning context for the category dropdown */
.beigic-collection-toolbar__title-wrap {
  position: relative;
  flex: 0 0 22.2%;
  display: block;
}
@media (max-width: 999px) {
  .beigic-collection-toolbar__title-wrap { flex: 1 1 auto; }
}

/* Category dropdown — opens directly under the title button */
.beigic-collection-toolbar__categories {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--beigic-bg-cream);
  z-index: 50;
  min-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.beigic-collection-toolbar__categories li { margin: 0; padding: 0; }
.beigic-collection-toolbar__categories a {
  display: block;
  padding: 10px 0;
  font-family: var(--beigic-font-sans);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--beigic-ink);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.beigic-collection-toolbar__categories a:hover { opacity: 0.6; }
@media (max-width: 999px) {
  .beigic-collection-toolbar__categories {
    position: static;
    left: 0;
    min-width: 100%;
  }
  .beigic-collection-toolbar__categories a { font-size: 22px; }
}

/* Premium custom sort dropdown — matches the title/+ aesthetic */
.beigic-collection-toolbar__sort {
  position: relative;
  margin-left: auto;
}
.beigic-collection-toolbar__sort-trigger {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  color: var(--beigic-ink);
  font-family: var(--beigic-font-sans);
}
.beigic-collection-toolbar__sort-trigger:focus { outline: none; }
.beigic-collection-toolbar__sort-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beigic-ink);
  opacity: 0.55;
}
.beigic-collection-toolbar__sort-current {
  font-family: var(--beigic-font-sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--beigic-ink);
  border-bottom: 1px solid var(--beigic-ink);
  padding-bottom: 2px;
}
.beigic-collection-toolbar__sort-plus {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
  color: var(--beigic-ink);
  opacity: 0.7;
  transition: transform 200ms ease;
  margin-left: 2px;
}
.beigic-collection-toolbar__sort-trigger[aria-expanded="true"] .beigic-collection-toolbar__sort-plus {
  transform: rotate(45deg);
}

.beigic-collection-toolbar__sort-options {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  margin: 0;
  padding: 16px 24px;
  list-style: none;
  background: var(--beigic-bg-cream);
  z-index: 50;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.beigic-collection-toolbar__sort-options li {
  padding: 10px 0;
  font-family: var(--beigic-font-sans);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--beigic-ink);
  cursor: pointer;
  transition: opacity 150ms ease;
  border: 0;
}
.beigic-collection-toolbar__sort-options li:hover {
  opacity: 0.6;
}
.beigic-collection-toolbar__sort-options li[aria-selected="true"] {
  font-style: italic;
  font-family: var(--beigic-font-display);
}

/* Top spacing — push grid down from page top */
@media (min-width: 1000px) {
  html .collection {
    padding-top: 0 !important;
  }
  html ul#product-grid {
    margin-top: 24px !important;
  }
  /* Toolbar should be inside the page-width-bound container */
  .beigic-collection-toolbar {
    padding-left: clamp(24px, 4vw, 64px);
    padding-right: clamp(24px, 4vw, 64px);
  }
}

/* Mobile: simpler stacked layout, smaller fonts */
@media (max-width: 999px) {
  .beigic-collection-toolbar {
    padding: 32px 18px 16px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .beigic-collection-toolbar__title { font-size: 28px; }
  .beigic-collection-toolbar__categories {
    position: static;
    margin: 0;
  }
}

/* ==========================================================================
   RESPONSIVE — Tablet (768-999px) and Mobile (<768px)
   Sidebar hides, grid collapses to 2 (tablet) / 2 (mobile) columns,
   toolbar simplifies to stack.
   ========================================================================== */

/* ---- Tablet (768-999px) ---- */
@media (min-width: 768px) and (max-width: 999px) {
  html .collection,
  html .collection.beigic-has-sidebar {
    padding: 0 24px !important;
  }
  html ul#product-grid,
  html ul#product-grid.grid--3-col-desktop,
  html ul#product-grid.grid--2-col-tablet-down {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    column-gap: 16px !important;
    row-gap: 32px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html ul#product-grid > li.grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  html .beigic-collection-toolbar {
    padding: 32px 24px 16px !important;
  }
  html .beigic-collection-toolbar__title-text {
    font-size: clamp(28px, 5vw, 36px) !important;
  }
}

/* ---- Mobile (<768px) ---- */
@media (max-width: 767px) {
  html .collection,
  html .collection.beigic-has-sidebar,
  html .collection.page-width {
    padding: 0 14px !important;
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  /* Sidebar hidden on mobile */
  html .beigic-collection-sidebar { display: none !important; }

  /* Grid: 2 columns mobile */
  html ul#product-grid,
  html ul#product-grid.grid--3-col-desktop,
  html ul#product-grid.grid--2-col-tablet-down {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    column-gap: 8px !important;
    row-gap: 24px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html ul#product-grid > li.grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  /* Toolbar: stack title above sort, simplified */
  html .beigic-collection-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px 14px 12px !important;
  }
  html .beigic-collection-toolbar__title-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  html .beigic-collection-toolbar__title {
    width: 100%;
  }
  html .beigic-collection-toolbar__title-text {
    font-size: 26px !important;
  }
  html .beigic-collection-toolbar__plus { font-size: 20px !important; }
  html .beigic-collection-toolbar__categories {
    position: static !important;
    margin-top: 8px !important;
    min-width: 100% !important;
  }
  html .beigic-collection-toolbar__categories a {
    font-size: 18px !important;
  }
  html .beigic-collection-toolbar__sort {
    margin-left: 0 !important;
    width: auto;
  }
  html .beigic-collection-toolbar__sort-current { font-size: 15px !important; }
  html .beigic-collection-toolbar__sort-options {
    right: auto !important;
    left: 0 !important;
    min-width: 220px !important;
  }
  /* Product card title/price smaller on mobile */
  html .product-grid .card__heading,
  html .product-grid .card__heading a {
    font-size: 14px !important;
  }
  html .product-grid .price,
  html .product-grid .price-item {
    font-size: 13px !important;
  }
  /* Pagination: tighter */
  html .collection.beigic-has-sidebar .pagination-wrapper,
  html .pagination-wrapper {
    padding-block: 32px !important;
  }
}

/* ---- Very small (<400px) ---- */
@media (max-width: 399px) {
  html ul#product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   RESPONSIVE FIXATION — collection page tuning
   ========================================================================== */
@media (min-width: 768px) and (max-width: 999px) {
  /* Toolbar tablet: tighter padding + smaller title */
  html .beigic-collection-toolbar {
    padding: 32px 24px 16px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
  }
  html .beigic-collection-toolbar__title-wrap { flex: 0 0 auto !important; }
  html .beigic-collection-toolbar__title-text {
    font-size: clamp(28px, 4vw, 36px) !important;
  }
  html .beigic-collection-toolbar__plus { font-size: 22px !important; }
  html .beigic-collection-toolbar__sort-current { font-size: 16px !important; }
  /* Card title/price tablet */
  html .product-grid .card__heading,
  html .product-grid .card__heading a {
    font-size: 15px !important;
  }
  html .product-grid .price,
  html .product-grid .price-item { font-size: 14px !important; }
  /* Pagination tablet */
  html .pagination-wrapper {
    padding-block: 48px !important;
  }
}

@media (max-width: 767px) {
  /* Toolbar mobile spacing */
  html .beigic-collection-toolbar {
    padding: 24px 14px 16px !important;
  }
  html .beigic-collection-toolbar__title-text {
    font-size: 24px !important;
    letter-spacing: 0 !important;
  }
  html .beigic-collection-toolbar__categories a {
    font-size: 16px !important;
    padding: 6px 0 !important;
  }
  html .beigic-collection-toolbar__sort-trigger {
    gap: 8px !important;
  }
  html .beigic-collection-toolbar__sort-current {
    font-size: 14px !important;
    padding-bottom: 1px !important;
  }
  html .beigic-collection-toolbar__sort-options {
    min-width: 200px !important;
    padding: 12px 16px !important;
  }
  html .beigic-collection-toolbar__sort-options li {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }

  /* Product card mobile */
  html .product-grid .grid__item .card__media,
  html .product-grid .grid__item .media {
    aspect-ratio: 5 / 7 !important;
  }
  html .product-grid .card__heading,
  html .product-grid .card__heading a {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  html .product-grid .price,
  html .product-grid .price-item {
    font-size: 12px !important;
  }
  /* Pagination mobile */
  html .pagination-wrapper {
    padding-block: 32px !important;
  }
}

@media (max-width: 399px) {
  html .beigic-collection-toolbar__title-text { font-size: 20px !important; }
  html .product-grid .card__heading,
  html .product-grid .card__heading a { font-size: 12px !important; }
}