/*
 * The catalogue (shop page and collection archives): intro band, toolbar with
 * collection chips, count and sort pill, the loop's footer with the shown
 * count and WoodMart's load-more button. Reference: .intro, .bar and .pager
 * in design/shop/Printovi.dc.html. Scoped by the tt-catalogue body class.
 */

/* --- The archive is full-bleed (tt-bleed, see front.css); each section
 * carries its own gutters ---------------------------------------------------- */
.tt-catalogue .woocommerce-notices-wrapper:empty {
  display: none;
}

/* --- Intro band -------------------------------------------------------------- */
.tt-intro {
  background: var(--tt-forest-1);
  padding: var(--tt-section-y-intro) var(--tt-section-x);
  text-align: center;
  color: var(--tt-on-green);
}

.tt-intro__in {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tt-intro__title {
  font-family: var(--tt-display);
  font-weight: 500;
  font-size: var(--tt-size-display-page);
  line-height: 1;
  letter-spacing: var(--tt-tracking-display);
  color: var(--tt-cream-hi);
  margin: 20px 0 0;
}

.tt-intro__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--tt-sage-3);
}

.tt-intro .tt-lede {
  text-align: center;
  max-width: var(--tt-measure);
}

/* --- Toolbar: chips left, count and sort right -------------------------------- */
.tt-catalogue .shop-loop-head {
  display: block;
  padding: clamp(28px, 3.5vw, 44px) var(--tt-section-x) 0;
  margin: 0;
  border: 0;
}

.tt-catalogue .shop-loop-head .wd-shop-tools {
  display: block;
  max-width: var(--tt-container);
  margin-inline: auto;
}

.tt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}

.tt-toolbar__right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* The sort pill: a label and WooCommerce's ordering select in one outline */
.tt-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tt-tap-target);
  padding-left: 22px;
  border-radius: var(--tt-radius-pill);
  border: var(--tt-hairline) solid var(--tt-btn-outline);
  background: var(--tt-input);
}

.tt-sort__label {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  color: var(--tt-ink-3);
  font-weight: 400;
}

.tt-catalogue .woocommerce-ordering {
  margin: 0;
}

.tt-catalogue .woocommerce-ordering select.orderby {
  appearance: none;
  width: auto;
  max-width: none;
  min-height: var(--tt-tap-target);
  height: auto;
  padding: 11px 44px 11px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tt-ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2b22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: var(--tt-icon-s) var(--tt-icon-s);
}

.tt-catalogue .woocommerce-ordering select.orderby:focus-visible {
  outline: 2px solid var(--tt-royal);
  outline-offset: 2px;
}

/* --- Grid gutters ------------------------------------------------------------- */
.tt-catalogue .wd-products-element,
.tt-catalogue .wd-products.wd-grid-g {
  max-width: var(--tt-container);
  margin-inline: auto;
}

.tt-catalogue .wd-products.wd-grid-g {
  padding-inline: var(--tt-section-x);
  padding-top: clamp(32px, 4vw, 56px);
  box-sizing: content-box;
}

/* --- Loop footer: shown count + load more -------------------------------------- */
/* The caption precedes WoodMart's footer (a sibling, printed before the
 * pagination hook); together they read as one centred column. */
.tt-catalogue .tt-shown {
  display: block;
  text-align: center;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0 var(--tt-section-x);
}

.tt-catalogue .wd-loop-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: var(--tt-container);
  margin: 18px auto 0;
  padding: 0 var(--tt-section-x);
}

.tt-catalogue .wd-content-area {
  padding-bottom: var(--tt-section-y-sub);
}

.tt-catalogue .wd-loop-footer:empty {
  display: none;
}

.tt-catalogue .wd-loop-footer .woocommerce-pagination {
  margin: 0;
}

.tt-catalogue .btn.wd-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tt-button-height);
  padding: var(--tt-button-padding);
  border-radius: var(--tt-radius-pill);
  border: var(--tt-hairline) solid var(--tt-btn-outline);
  background: transparent;
  color: var(--tt-ink);
  font-family: var(--tt-sans);
  font-size: var(--tt-size-button);
  font-weight: 500;
  letter-spacing: var(--tt-tracking-button);
  text-transform: uppercase;
  box-shadow: none;
}

.tt-catalogue .btn.wd-load-more:hover,
.tt-catalogue .btn.wd-load-more:focus-visible {
  border-color: var(--tt-ink);
  background: transparent;
  color: var(--tt-ink);
}

/* Classic pagination, if load-more is ever switched off */
.tt-catalogue .wd-pagination .page-numbers {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  color: var(--tt-ink-2);
}

.tt-catalogue .wd-pagination .page-numbers.current {
  background: var(--tt-forest-1);
  color: var(--tt-cream);
  border-radius: var(--tt-radius-pill);
}