/*
 * replica-collection.css (area C: product card, collection page, list of collections, search page, predictive search).
 *
 * Everything structural comes from the Horizon compiled CSS (base.css / styles.css) because the templates reuse the live
 * class names. This file only holds:
 *   1. the per-section inline <style> blocks of the live pages, renamed to stable ids/classes
 *      (raw/analysis/inline-styles-collections_on.css, -search_q_cloud.css, -collections.css);
 *   2. the no-JS pagination fallback (the live store paginates with infinite scroll, so the nav is hidden when JS runs);
 *   3. a few replica-only hooks (mobile single column grid view, revealed hidden slides).
 */

/* ---------------------------------------------------------------- 1. collection heading image (AI block ai_gen_block_76d8ef4) */
.collection-banner__image {
  display: block;
  width: 20%;
  max-width: 100%;
}

.collection-banner__image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0px;
}

.collection-banner__image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.collection-banner__placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 0px;
}

.collection-banner__placeholder svg {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
}

.collection-banner__empty-state {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  font-size: 14px;
  color: #666;
  text-align: center;
  pointer-events: none;
}

@media screen and (max-width: 749px) {
  .collection-banner__image {
    width: 30%;
  }
}

/* ---------------------------------------------------------------- 1. product grid columns (snippets/product-grid.liquid, product_card_size medium) */
@media screen and (min-width: 750px) {
  .product-grid--replica-results:is(.product-grid--grid) {
    --product-grid-columns-desktop: repeat(auto-fill, minmax(250px, 1fr));
  }

  /* When zoomed out, fit as many 100px-wide columns as possible */
  .product-grid--replica-results[product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(auto-fill, minmax(6.25rem, 1fr));
  }

  .product-grid--replica-results[product-grid-view='zoom-out'] .product-grid-view-zoom-out--details {
    display: block;
  }

  .product-grid--replica-results[product-grid-view='zoom-out'] .product-grid__card {
    padding-inline-start: var(--zoom-out-padding-inline-start, 0);
    padding-inline-end: var(--zoom-out-padding-inline-end, 0);
    padding-block-start: var(--zoom-out-padding-block-start, 0);
    padding-block-end: var(--zoom-out-padding-block-end, 0);
  }
}

/* The theme's results-list.js switches the mobile grid to one column; same effect for the replica radio */
@media screen and (max-width: 749px) {
  .product-grid--replica-results[product-grid-view='mobile-single'] {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- 2. pagination: live = infinite scroll, links only without JS */
results-list[infinite-scroll='true'] .pagination {
  display: none;
}

results-list[data-no-infinite-scroll] .pagination {
  display: flex;
}

/* ---------------------------------------------------------------- 3. replica hooks */
/* A hidden variant slide that a swatch reveals (the theme keeps `slideshow-slide[hidden]:not([reveal]) {display:none}`) */
.card-gallery slideshow-slide[hidden][reveal] {
  display: block;
}

/* Keep the card's quick add buttons clickable above the full-card link, like the theme */
.card-gallery quick-add-component .quick-add__button {
  pointer-events: auto;
}

/* The predictive search status line is for screen readers only */
.predictive-search-results__inner > .visually-hidden[role='status'] {
  position: absolute;
}