/* ============================================================
   VALENA — catalogue: filter panel, toolbar, results
   ============================================================ */

.v-catalog__results {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.v-catalog__seo { max-width: 80ch; }

/* ----------------------------------------------------------- toolbar -- */
.v-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v-toolbar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.v-toolbar__count {
  color: var(--v-black-60);
  font-size: var(--v-small);
}
.v-toolbar__filter-btn {
  min-height: 44px;
  padding: 0 14px;
  gap: 8px;
  font-size: var(--v-small);
}
.v-toolbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--v-radius-pill);
  background: var(--v-pink);
  color: var(--v-on-ink);
  font-size: 11px;
  font-weight: 600;
}
.v-toolbar__sort { width: 100%; }
.v-dropdown__menu--right { left: auto; right: 0; }

@media (max-width: 767px) {
  .v-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v-toolbar__left { display: contents; }
  .v-toolbar__filter-btn,
  .v-toolbar__sort { width: 100%; }

  .v-toolbar__count { grid-column: 1 / -1; grid-row: 1; }
  .v-toolbar__filter-btn { grid-column: 1; grid-row: 2; }
  .v-toolbar__sort { grid-column: 2; grid-row: 2; }
  .v-toolbar__left .v-chips { grid-column: 1 / -1; grid-row: 3; }

  .v-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .v-products .v-product-card__body {
    gap: 8px;
    padding: 8px;
  }

  .v-products .v-product-card__brand,
  .v-products .v-product-card__title,
  .v-products .v-product-card .v-btn--cart {
    font-size: var(--v-caption);
  }

  .v-products .v-product-card__body:has(.v-badge) .v-product-card__brand {
    padding-right: 0;
  }

  .v-products .v-product-card__meta { gap: 6px; }
  .v-products .v-product-card__variant { width: 72px; }
  .v-products .v-product-card__variant .v-dropdown__toggle,
  .v-products .v-product-card__volume {
    padding-inline: 6px;
    font-size: var(--v-caption);
  }

  .v-products .v-product-card__volume { min-width: 52px; }
  .v-products .v-product-card__meta .v-price { font-size: var(--v-small); }
  .v-products .v-product-card .v-btn--cart {
    gap: 5px;
    padding-inline: 6px;
  }
  .v-products .v-product-card .v-btn--cart .v-icon { width: 18px; height: 18px; }
}

@media (min-width: 768px) {
  .v-toolbar__sort { width: 180px; }
}

@media (min-width: 1280px) {
  .v-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ filters -- */
/*
 * One markup, two presentations: a sticky rail from 1024px up, a bottom sheet
 * below it. No duplicated template, no duplicated state.
 */
.v-filters {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--v-z-sheet);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 88vh;
  padding: 20px;
  border-radius: var(--v-radius) var(--v-radius) 0 0;
  background: var(--v-surface);
  box-shadow: var(--v-shadow-pop);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v-filters.is-open { transform: none; }
.v-filters[hidden] { display: none; }

.v-filters__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v-filters__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 var(--v-body) / 1.5 var(--v-font-text);
}

.v-filters__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--v-line);
}
.v-filters__group:first-of-type { padding-top: 0; border-top: 0; }
.v-filters__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 var(--v-body) / 1.5 var(--v-font-text);
  color: var(--v-text);
  text-align: left;
  cursor: pointer;
}
.v-filters__group-title:hover { color: var(--v-pink); }
.v-filters__group-title[aria-expanded="true"] .v-icon { transform: rotate(180deg); }
.v-filters__group-title .v-icon { transition: transform var(--v-ease); }

.v-filters__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.v-filters__options[hidden] { display: none; }
/* Short groups that are never long enough to need their own scroll area. */
.v-filters__options--plain {
  gap: 12px;
  max-height: none;
  overflow: visible;
}

.v-filters__actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--v-line);
}
.v-filters__apply {
  flex: 1 1 auto;
  min-height: var(--v-control-h-sm);
  padding: 0 20px;
  gap: 8px;
}
.v-filters__reset {
  flex: 0 0 auto;
  min-height: var(--v-control-h-sm);
  padding: 0 16px;
  gap: 8px;
}

.v-swatches--filter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.v-swatches--filter .v-swatch { width: 36px; height: 36px; }
.v-swatches--filter .v-swatch .v-icon { opacity: 0; }
.v-swatches--filter .v-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--v-pink); }
.v-swatches--filter .v-swatch:has(input:checked) .v-icon { opacity: 1; }

/* ------------------------------------------------------- price slider -- */
.v-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v-price-range .v-field { height: 40px; font-size: var(--v-small); }
.v-price-range > span { color: var(--v-muted); }

.v-slider {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}
.v-slider__track,
.v-slider__fill {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--v-radius-pill);
  pointer-events: none;
}
.v-slider__track { background: var(--v-blush); }
.v-slider__fill { background: var(--v-pink); }

/* Two overlaid range inputs: only the thumbs stay interactive. */
.v-slider__input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
}
.v-slider__input::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--v-surface);
  box-shadow: 0 0 0 1px var(--v-pink);
  cursor: pointer;
}
.v-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--v-pink);
  border-radius: 50%;
  background: var(--v-surface);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .v-filters {
    position: static;
    /*
     * Back to the flow's own order. `position: static` does not neutralise the
     * sheet's z-index here — the rail is a grid item, and a grid item honours
     * z-index as though it were relative, which floated it over the pinned
     * header.
     */
    z-index: auto;
    display: flex !important;
    max-height: none;
    padding: 20px;
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-card);
    overflow: visible;
    transform: none;
  }
  .v-filters[hidden] { display: flex !important; }
  .v-filters__options { max-height: 300px; }
}

/* ------------------------------------------------------- page heading -- */
/*
 * The catalogue H1 is the h2 step, not the h1 one: at 48px it out-shouts the
 * product grid it is supposed to introduce.
 */
.v-catalog .v-page-head h1 { font-size: var(--v-h2); }

/* ---------------------------------------------------- category pills --- */
/*
 * Scrolls sideways on every viewport rather than wrapping to a second row —
 * two rows of pills read as a menu, one row reads as a switch.
 */
.v-cat-tabs {
  margin-inline: calc(var(--v-gutter) * -1);
  padding-inline: var(--v-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.v-cat-tabs::-webkit-scrollbar { display: none; }

.v-cat-tabs-wrap { position: relative; }
.v-cat-tabs__hint { display: none; }

.v-cat-tabs__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-cat-tabs__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-line-strong);
  color: var(--v-text);
  font-size: var(--v-small);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--v-ease), color var(--v-ease), box-shadow var(--v-ease);
}
.v-cat-tabs__link:hover {
  box-shadow: inset 0 0 0 1px var(--v-pink);
  color: var(--v-text);
}
.v-cat-tabs__link.is-current {
  background: var(--v-ink);
  box-shadow: none;
  color: var(--v-on-ink);
  font-weight: 600;
}
.v-cat-tabs__link.is-current:hover { background: var(--v-ink-hover); color: var(--v-on-ink); }

@media (max-width: 767px) {
  .v-cat-tabs { padding-right: 56px; }
  .v-cat-tabs__hint {
    position: absolute;
    z-index: 2;
    top: 0;
    right: calc(var(--v-gutter) * -1);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 64px;
    height: 40px;
    padding-right: var(--v-gutter);
    background: linear-gradient(90deg, rgb(255 255 255 / 0), var(--v-page) 58%);
    color: var(--v-ink);
    pointer-events: none;
  }

  .v-cat-tabs__hint .v-icon {
    border-radius: 50%;
    background: var(--v-page);
    box-shadow: 0 0 0 1px var(--v-line-strong);
  }
}

/* --------------------------------------------------- load more + pages -- */
.v-catalog__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
}
.v-catalog__more-btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------ editorial band -- */
.v-catalog-seo { background: var(--v-blush); }

.v-catalog-seo__inner {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

/*
 * The collage: one portrait picture beside a stacked pair. With fewer than
 * three images the leader simply grows to fill the space it is given.
 */
.v-catalog-seo__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* Fixed shape: product photography is square, and two stacked squares make
     a column far taller than the paragraph it sits beside. */
  aspect-ratio: 3 / 2;
}
.v-catalog-seo__figure {
  margin: 0;
  border-radius: var(--v-radius);
  overflow: hidden;
  background: var(--v-surface);
}
.v-catalog-seo__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-catalog-seo__figure:first-child { grid-row: span 2; }
.v-catalog-seo__figure:first-child:last-child { grid-column: span 2; }
/* Two images: a pair of full-height columns, not one column and a hole. */
.v-catalog-seo__figure:first-child:nth-last-child(2),
.v-catalog-seo__figure:first-child:nth-last-child(2) ~ .v-catalog-seo__figure { grid-row: span 2; }
.v-catalog-seo__figure:nth-child(n + 4) { display: none; }

.v-catalog-seo__title {
  margin: 0 0 20px;
  font-size: var(--v-h2);
}
.v-catalog-seo__text { max-width: 60ch; }
.v-catalog-seo__text p { margin: 0 0 1em; }
.v-catalog-seo__text p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .v-catalog-seo__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}