/* ==========================================================================
   Veduka — catalogue browsing: the carousel, the search form, the chips, the
   result grid and its pagination. Shared by every page template built on a
   catalogue context (the shop and the member portal). Tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Carousel
   -------------------------------------------------------------------------- */
.vd-catalog__section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--vd-space-5); flex-wrap: wrap;
}
.vd-catalog__section-head .vd-section-head { margin-bottom: var(--vd-space-8); }

.vd-catalog__carousel-nav { display: flex; gap: var(--vd-space-2); margin-bottom: var(--vd-space-8); }
.vd-catalog__arrow {
  width: 2.75rem; height: 2.75rem; border-radius: var(--vd-radius-circle);
  display: grid; place-items: center; font-size: var(--vd-text-lg);
  background: var(--vd-cream-200); color: var(--vd-ink);
  transition: background-color var(--vd-duration-fast) var(--vd-ease), transform var(--vd-duration-fast) var(--vd-ease-bounce);
}
.vd-catalog__arrow:hover { background: var(--vd-purple-100); color: var(--vd-purple-700); transform: translateY(-2px); }
.vd-catalog__arrow[disabled] { opacity: 0.4; pointer-events: none; }

.vd-carousel { position: relative; }
/* Beat `.woocommerce ul.products` (0,2,1) — this is 0,3,1. */
.vd-carousel ul.products.vd-carousel__track {
  display: flex; gap: var(--vd-space-6);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--vd-space-1);
  padding-bottom: var(--vd-space-4);
  /* Room for the cards' hover lift, which would otherwise be clipped. */
  padding-top: var(--vd-space-2);
  scrollbar-width: thin; scrollbar-color: var(--vd-cream-400) transparent;
}
.vd-carousel ul.products.vd-carousel__track > li.product {
  flex: 0 0 auto; width: min(72vw, 15rem); scroll-snap-align: start;
}
.vd-carousel__track::-webkit-scrollbar { height: 8px; }
.vd-carousel__track::-webkit-scrollbar-thumb { background: var(--vd-cream-400); border-radius: var(--vd-radius-pill); }
.vd-carousel__track::-webkit-scrollbar-track { background: transparent; }
.vd-carousel__track:focus-visible { outline: 3px solid var(--vd-focus-ring); outline-offset: 4px; border-radius: var(--vd-radius-lg); }

/* --------------------------------------------------------------------------
   2. Search, filters, results
   -------------------------------------------------------------------------- */
.vd-catalog__form {
  display: flex; flex-wrap: wrap; gap: var(--vd-space-3); align-items: center;
  margin-bottom: var(--vd-space-5);
}
.vd-catalog__search { flex: 1 1 min(100%, 22rem); }
.vd-catalog__order { width: auto; min-width: 12rem; flex: 0 1 auto; }

.vd-catalog__chips { margin-bottom: var(--vd-space-5); }

.vd-catalog__summary {
  font-size: var(--vd-text-sm); color: var(--vd-ink-muted);
  margin-bottom: var(--vd-space-6); min-height: 1.5em;
}

.vd-catalog__results { position: relative; min-height: 8rem; }
.vd-catalog__results.is-loading { opacity: 0.45; pointer-events: none; }
.vd-catalog__results.is-loading::after {
  content: ""; position: absolute; inset: 0; z-index: var(--vd-z-raised);
  background: var(--vd-surface-page); opacity: 0.35; border-radius: var(--vd-radius-lg);
}

.vd-catalog__more { margin-top: var(--vd-space-8); text-align: center; }

/* --------------------------------------------------------------------------
   3. Pagination sits under the grid with room to breathe
   -------------------------------------------------------------------------- */
.vd-catalog__results + [data-vd-search-pages] .vd-pagination { margin-top: var(--vd-space-9); }

/* --------------------------------------------------------------------------
   4. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .vd-catalog__form { gap: var(--vd-space-2); }
  .vd-catalog__order, .vd-catalog__form .vd-btn { width: 100%; }
  .vd-catalog__section-head { align-items: flex-start; }
  .vd-catalog__carousel-nav { display: none; }
}

/* --------------------------------------------------------------------------
   5. A page head sitting directly above the catalogue
   -------------------------------------------------------------------------- */
/* Two full section paddings back to back leave a hole between the heading and
   the search box. When the head is the previous section, the catalogue only
   needs a little room of its own. */
.vd-section--tight + .vd-catalog { padding-top: var(--vd-space-6); }
.vd-section--tight > .vd-container > .vd-section-head:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Game cards
   -------------------------------------------------------------------------- */
.vd-game .vd-card__media { aspect-ratio: 4 / 3; }

/* A play badge over the thumbnail, so a game reads as a game at a glance. */
.vd-game__play {
  position: absolute; inset: auto var(--vd-space-3) var(--vd-space-3) auto;
  width: 2.5rem; height: 2.5rem; border-radius: var(--vd-radius-circle);
  display: grid; place-items: center;
  background: var(--vd-surface-card); color: var(--vd-purple-700);
  font-size: var(--vd-text-sm); padding-left: 0.15em;
  box-shadow: var(--vd-shadow-md);
  transition: transform var(--vd-duration-base) var(--vd-ease-bounce),
              background-color var(--vd-duration-base) var(--vd-ease);
}
.vd-game:hover .vd-game__play { transform: scale(1.12); background: var(--vd-yellow-400); }

/* Cards that are <article>s, not WooCommerce <li>s, still need to fill a cell. */
.vd-cards > .vd-card { width: 100%; }