.main-collection-container {
  background-color: rgb(var(--color-background));
  border-block: 1px solid rgb(var(--color-entry-line));
}

.main-collection {
  padding-block: 40px;
}

.main-collection__no-products-tips {
  color: rgb(var(--color-text));
}

.main-collection__list {
  margin-block-end: 40px;
  overflow: visible;
}

@media (max-width: 959px) {
  .main-collection__list {
    margin-block-end: 20px;
  }
}

@media (max-width: 959px) {
  .main-collection {
    padding-block: 20px;
  }
}

@media (min-width: 960px) {
  .main-collection {
    display: grid;
  }

  .main-collection .main-collection__products {
    grid-area: list;
  }

  .main-collection .facets-filtering {
    grid-area: filtering;
  }

  .main-collection .facets-sorting {
    grid-area: sorting;
  }

  .main-collection .facets-count {
    grid-area: count;
  }

  .main-collection.facets-layout-horizontal {
    grid-template:
      "filtering sorting count"
      "list list list" /
      1fr auto auto;
    row-gap: 40px;
  }

  .main-collection.facets-layout-vertical {
    grid-template:
      "count count sorting" 10px
      "list list list" /
      256px auto auto;
    gap: 40px;
  }

  .main-collection.facets-layout-vertical.enable-filtering {
    grid-template:
      "count count sorting" auto
      "filtering list list" /
      256px auto auto;
  }

  .main-collection.facets-layout-drawer {
    grid-template:
      "filtering sorting count"
      "list list list" /
      1fr auto auto;
  }
}

/* ====== Queen Cosmetics — collection page (match live) ====== */

/* Equal-height cards so the ADD TO CART button bottom-aligns across the grid */
.main-collection__list > li {
  display: flex;
}
.main-collection__list > li > .block-product-card,
.main-collection__list > li .block-product-card {
  width: 100%;
  height: 100%;
}

/* Filter accordion titles (Availability / Price) + category links + sort summary.
   The title text is a nested span (.body2/.body3), so target descendants too.
   Small 12px / 500 / uppercase / NO letter-spacing. */
.main-collection .facets-filtering__summary,
.main-collection .facets-filtering__summary span,
.main-collection .facets-filtering__submenu-summary,
.main-collection .facets-filtering__submenu-summary span,
.main-collection .facets-filtering__content-header,
.main-collection .facets-sorting__content-header,
.main-collection .facets-sorting__summary,
.main-collection .facets-sorting__summary span {
  font-size: 12px;
  /* .body-font-bold forces weight via !important, so override it here too */
  font-weight: 600 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Filter "Confirm" / apply button — brand style (violet, like the add-to-cart) */
.main-collection .facets-confirm {
  background-color: #DD9FD7;
  color: #faf4fa;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 500;
  transition: background-color 250ms ease, color 250ms ease;
}
.main-collection .facets-confirm:hover {
  background-color: #000000;
  color: #faf4fa;
}

/* Filter checkbox OPTION labels (In stock / Out of stock) — live: 14px / 400 / normal */
.main-collection .facets-filtering__item,
.main-collection .facets-filtering__item a,
.main-collection .facets-filtering__item label,
.main-collection .facets-sorting__content a,
.main-collection .facets-sorting__content button,
.main-collection .facets-sorting__content label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* Toolbar (product count + sort) sits flush under the hero, full-width divider */
.main-collection {
  position: relative;
  padding-block-start: 0;
}
.main-collection .facets-count,
.main-collection .facets-sorting {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 54px;
  padding-block: 0;
}
.main-collection .facets-count {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.main-collection .facets-sorting {
  justify-content: flex-end;
}
.main-collection .facets-sorting__summary {
  line-height: 1;
}

/* Full-width divider beneath the toolbar row.
   Anchored to the page-width grid container and bled out to the viewport edges,
   so it stays centered regardless of where the sort sits. */
.main-collection.facets-layout-vertical.enable-filtering::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 53px;
  /* Full-bleed divider to viewport edges; body's overflow-x: clip absorbs the
     scrollbar-width overshoot from 50vw/100vw without a horizontal scrollbar. */
  inset-inline-start: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background-color: rgba(var(--color-text), 0.12);
  pointer-events: none;
}

/* Pagination — match live: centered row, every item carries a thin bottom
   border (light grey, dark on the active page); plain chevron, no circle. */
.pagination {
  display: flex;
  justify-content: center;
  margin-block-start: 56px;
}
.pagination__parts-wrapper {
  display: flex;
  align-items: stretch;
}
.pagination__parts {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Numbered page links + the next chevron all share the same cell shape */
.pagination .pagination__item a,
.pagination .pagination__indicator a,
.pagination .pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16px 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6a6a6a;
  text-decoration: none;
  /* continuous underline under the whole row */
  border-block-end: 1px solid #dddddd;
  border-radius: 0;
  background: none;
  transition: color 200ms ease, border-color 200ms ease;
}

/* Active page — darker text + dark underline */
.pagination .pagination__item.active a,
.pagination .pagination__indicator.active a {
  color: #1c1b1b;
  border-block-end-color: #1c1b1b;
}

.pagination .pagination__item:not(.active) a:hover,
.pagination .pagination__button:hover {
  color: #1c1b1b;
}

/* Next button — plain chevron, no circular frame */
.pagination .pagination__button {
  width: auto;
  height: auto;
  border: 0;
  border-block-end: 1px solid #dddddd;
  border-radius: 0;
}
.pagination .pagination__button .icon {
  width: 13px;
  height: 13px;
}

/* The active indicator's base 2px black underline → align to our 1px scheme */
.pagination .pagination__indicator.active {
  border-block-end: 0;
}

/* Remove the base 20px row gap so the underline reads as one continuous line */
.pagination .pagination__parts-wrapper,
.pagination .pagination__parts {
  gap: 0;
}

/* ====== Queen Cosmetics — mobile collection toolbar + drawer ====== */
@media (max-width: 959px) {
  /* 1) "Filter(N)" toggle — uppercase to match the SORT label */
  .facets-mobile .facets-filtering > theme-modal > details > summary,
  .facets-mobile__modals .facets-filtering summary.js-action {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* 2) Spacing between the toolbar and the product grid (top + bottom) */
  .main-collection__list {
    margin-block-start: 24px;
    margin-block-end: 32px;
  }
}

/* 3) Filter drawer modal header — title row + close button (was missing) */
.facets-filtering__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.facets-filtering__modal-header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
/* kill the base 4.5px block padding on the title so it sits tight to the count */
.facets-mobile .facets-filtering__modal-header .facets-filtering__modal-header-text,
.facets-mobile .facets-filtering__modal-header .facets-filtering__modal-header-text > * {
  padding-block: 0;
}
.facets-filtering__modal-header-text .body1 {
  line-height: 1.2;
}
/* item count — small, muted, left-aligned subtitle under the FILTER title */
.facets-filtering__modal-header-text .facets-count {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color-light-text));
}
/* close button — consistent with the cart drawer close (absolute, top-right,
   same offsets, 16px icon). Header is the positioning context; do NOT make
   .modal-content relative — that breaks the theme-modal overlay positioning. */
.facets-filtering__modal-header {
  position: relative;
}
.facets-filtering__modal-close {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-end: 16px;
  z-index: 3;
  padding: 6px;
  cursor: pointer;
  color: rgb(var(--color-text));
  background: none;
  border: 0;
}
.facets-filtering__modal-close svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 959px) {
  /* 4) Mobile toolbar — vertically center the FILTER / SORT labels in the row */
  .facets-mobile__modals {
    align-items: center;
    min-height: 54px;
    padding-block: 0;
  }
  .facets-mobile__modals > * {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }
  .facets-mobile__modals summary {
    align-items: center;
  }

  /* 5) Filter drawer title — uppercase, letter-spaced */
  .facets-mobile .facets-filtering__modal-header .body1 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* 6) Pin the Clear / Confirm buttons to the BOTTOM of the drawer.
     The modal content is a flex column whose height is supplied by the
     theme-modal overlay — let the body grow and push the button group down.
     (Do NOT set height/position on .modal-content; that breaks the overlay.) */
  .facets-mobile .facets-filtering__modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .facets-mobile .facets-filtering__modal-body > div:first-child {
    flex: 1;
  }
  /* sticky footer for the Clear / Confirm buttons. Padding (incl. the top
     space from the divider) is set on the base rule in facets.css so it isn't
     overridden by load order. */
  .facets-mobile .facets-filtering__submenu-button-group {
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    background-color: rgb(var(--color-background));
    border-block-start: 1px solid rgba(var(--color-text), 0.12);
  }
  /* both drawer buttons (Clear / Confirm) — identical font styling
     (12px / 500 / 0.16em / uppercase), matching the Confirm primary button. */
  .facets-mobile .facets-filtering__submenu-button-group .button,
  .facets-mobile .facets-filtering__submenu-button-group .button .qc-btn__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
}

/* 7) Pagination — give the mobile collection breathing room at the bottom */
@media (max-width: 959px) {
  .main-collection .pagination {
    margin-block-start: 32px;
    padding-block-end: 24px;
  }
}