/*
  AVANTCHA — avantcha-collection-products.css
  PLP grid (OS 3.0) — migrated from OS 2.1 section-collection-product-list.css
  Custom AVANTCHA: .av-* class prefix.
  Native OS 3.0 classes kept: .grid, .color-*, .enable-filtering.
  Removed vs OS 2.1 (now native): loading spinner, infinite scroll.
  Kept / adapted: promo block, B2B layout, grid max-width 1545px.
*/

/* ============================================================
   ROOT AND ANIMATIONS
   ============================================================ */


:root {
  --grid-horizontal-spacing: 10px;
}

@keyframes av-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ============================================================
   CONTAINER & GRID
   ============================================================ */

.av-collection__products {
  padding-top: 32px;
}

.av-collection__list {
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  padding: 0;
  gap: var(--size-24);
  --column-gap: var(--size-24);
  row-gap: var(--size-36);
  --row-gap: var(--size-36);
  overflow-x: visible;
}

.av-collection__no-products {
  text-align: center;
  padding: var(--size-68) var(--size-24);
}

/* ============================================================
   INFINITE SCROLL
   ============================================================ */

.av-collection__sentinel {
  height: 1px;
}

.av-collection__loader {
  display: none;
  justify-content: center;
  padding: 24px 0;
}

.av-collection__loader--active {
  display: flex;
}

.av-collection__loader::after {
  content: "";
  width: 28px;
  height: 28px;
  border: 2px solid #e0e0e0;
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: av-spin 0.7s linear infinite;
}


/* ============================================================
       FILTER BAR
       FILTER left, sort + count pushed right (drawer layout)
       ============================================================ */

.av-collection theme-facets-form.hidden-mobile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  padding-top: 16px;
  padding-bottom: 0;
  margin-inline: -30px;
  padding-inline: 30px;
  border-bottom: 1px solid #e8e8e8;
}

/* Flatten .facets-filtering — its children become direct flex items */
.av-collection .facets-filtering {
  display: contents;
}

/* FILTER button: row 1, pushes VIEW+SORT to far right */
.av-collection .facets-filtering__filters {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  order: 1;
  margin-right: auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.facets-mobile__modals .facets-filtering__summary .body-font-bold {text-transform:uppercase;}

.av-collection .facets-filtering__filters>* {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* VIEW toggle: row 1, right side */
.av-collection .av-view-toggle {
  order: 2;
}

/* SORT: row 1, rightmost */
.av-collection .facets-sorting {
  order: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Active tags: row 2, full width */
.av-collection .facets-filtering__active {
  order: 5;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
}

.av-collection .facets-count {
  display: none;
}

/* Active filter tags — light grey pill, matches live CH */
.av-collection .facets-filtering__active-button {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  text-decoration: none;
}

.av-collection .av-facet-tag-text {
  text-transform: lowercase;
}

.av-collection .av-facet-tag-text::first-letter {
  text-transform: uppercase;
}

.av-collection .facets-filtering__active-button-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
}

.av-collection .facets-filtering__active-button-inner svg {
  width: 10px;
  height: 10px;
  color: inherit;
  flex-shrink: 0;
}

.av-collection .facets-filtering__active-clear-all {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  color: var(--color-text);
  background-color: transparent;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-text);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.av-collection .facets-filtering__active-clear-all:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

/* ============================================================
   COLUMN VIEW TOGGLE (4 / 3 / 2)
   Injected by view-toggle.js into the desktop facets bar.
   ============================================================ */

.av-view-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.av-view-toggle__label {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Force Gotham (sans) for all text in the facets bar — body* classes default to serif */
.av-collection .facets-desktop .body1,
.av-collection .facets-desktop .body2,
.av-collection .facets-desktop .body3,
.av-collection .facets-desktop .body4 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
}

.av-view-btn {
  width: 42px;
  height: 32px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.av-view-btn svg rect {
  fill: none;
  stroke: var(--color-link);
  stroke-width: 1;
}

.av-view-btn--active {
  background: #f7f7f7;
}

.av-view-btn--active svg rect {
  stroke: var(--color-body);
}

.av-collection__list--switching .av-product-item {
  opacity: 0;
  transform: scale(0.97);
}


/* ============================================================
   PROMO BLOCK (.av-promo-block)
   Positioned via CSS order (order = grid_position * 2 - 1)
   Products use order = index * 2; promo inserts between them
   ============================================================ */

.av-promo-block {
  position: relative;
  overflow: hidden;
}

.av-promo-block__inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  text-decoration: none;
  color: inherit;
}

.av-promo-block__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* image component output — target child <img> */
.av-promo-block__image img,
.av-promo-block__inner>.av-promo-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.av-promo-block__content {
  position: relative;
  z-index: 2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  height: 100%;
}

.av-promo-block__label {
  display: inline-block;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.av-promo-block__title {
  margin: 0;
  color: #ffffff;
}

/* Light dark overlay (optional) */
.av-promo-block__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}




/* ============================================================
   MOBILE STYLING RULES
   Live CH: FILTER + SORT as two equal pill buttons side by side.
   OS 3.0 native theme-modal[data-placement="right"] already does
   the right-slide drawer — we only restyle the trigger bar here.
   Scoped to the top trigger summaries only (not inner filter groups).
   ============================================================ */


@media (max-width: 958px) {

  .av-collection theme-facets-form.hidden-mobile {
      margin-inline: -16px;
      padding-inline: 16px;
    }
    .av-view-toggle {
      display: none;
    }
  .av-collection .facets-mobile__modals {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding-bottom: 16px;
  }

  /* Border at end of form — sits after tags when open, after buttons when closed */
  .av-collection .facets-mobile {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 4px;
  }

  .av-collection .facets-mobile .facets-filtering,
  .av-collection .facets-mobile .facets-sorting {
    flex: 1 1 0;
    display: flex;
    margin: 0;
  }

  /* FILTER trigger + SORT trigger */
  .av-collection .facets-mobile .facets-filtering>theme-modal>details>summary,
  .av-collection .facets-mobile .facets-sorting__summary {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid rgb(var(--color-entry-line));
    border-radius: 4px;
    padding: 8px 10px;
    font-family: var(--font-family-sans);
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
  }

  .av-collection .facets-mobile summary::-webkit-details-marker,
  .av-collection .facets-mobile .facets-sorting__summary::-webkit-details-marker {
    display: none;
  }

  /* Active filter tags: hidden by default on mobile, revealed by badge click */
  .av-collection .facets-mobile .facets-filtering__active {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 4px;
  }

  .av-collection .facets-mobile .facets-filtering__active.av-tags-open {
    display: flex;
  }

  .av-collection .facets-mobile .facets-filtering__active-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .av-collection .facets-mobile .facets-filtering__active-button,
  .av-collection .facets-mobile .facets-filtering__active-button * {
    font-size: 11px !important;
  }

  .av-collection .facets-mobile .facets-filtering__active-clear-all,
  .av-collection .facets-mobile .facets-filtering__active-clear-all * {
    font-size: 11px !important;
  }

  /* Count badge on FILTER button */
  .av-mobile-filter-badge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: #d0d0d0;
    border-radius: 50%;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    cursor: pointer;
  }
}