/* Product archive: banner, category pills, toolbar, grid. */

.pp-archive__banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 220px;
  margin-block-end: var(--pp-sp-5);
  padding: var(--pp-sp-6) var(--pp-sp-7);
  overflow: hidden;
  border-radius: var(--pp-radius);
  /* Pink on the image side (inline end), white behind the title. */
  background: linear-gradient(to left, var(--pp-red-soft), var(--pp-box) 60%);
  box-shadow: var(--pp-shadow);
}

[dir="rtl"] .pp-archive__banner { background: linear-gradient(to right, var(--pp-red-soft), var(--pp-box) 60%); }

.pp-archive__banner-copy {
  position: relative;
  z-index: 1;
  max-width: 60%;
}

.pp-archive__title {
  margin: 0 0 var(--pp-sp-2);
  font-size: var(--pp-fs-4xl);
}

.pp-archive__lead {
  margin: 0;
  font-size: var(--pp-fs-lg);
  color: var(--pp-ink-soft);
}

.pp-archive__banner-media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 45%;
  pointer-events: none;
}

/* Fade the photo out towards the headline so text stays readable.
   Gradients take physical directions only, hence the RTL variant. */
.pp-archive__banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
  mask-image: linear-gradient(to left, #000 55%, transparent);
}

[dir="rtl"] .pp-archive__banner-media img {
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
  mask-image: linear-gradient(to right, #000 55%, transparent);
}

/* Shop artwork: a transparent cut-out, shown whole (contain) with a little
   breathing room, rather than cropped like the category photos. */
.pp-archive__banner-media--shop {
  width: 45%;
}

/* Pinned to the inline-end edge and scaled up from there, so the artwork
   fills the pink side; the banner's overflow clips the empty margins. */
.pp-archive__banner-media--shop img {
  object-fit: contain;
  object-position: right center;
  -webkit-mask-image: none;
  mask-image: none;
  transform: scale(1.35);
  transform-origin: right center;
}

[dir="rtl"] .pp-archive__banner-media--shop img {
  object-position: left center;
  -webkit-mask-image: none;
  mask-image: none;
  transform-origin: left center;
}

/* Title only (the shop, or a category without description or image): no
   need for the full banner height. */
.pp-archive__banner.pp-archive__banner--plain {
  min-height: 0;
  padding-block: var(--pp-sp-6);
  background: var(--pp-red-soft) url("../../images/bg-cat-1.webp") center 60% / cover no-repeat;
}

/* The photo's large capsule is on its left. RTL titles sit on the right,
   clear of it; for LTR the photo is mirrored so the title stays clear. */
[dir="ltr"] .pp-archive__banner.pp-archive__banner--plain { background-image: none; }

[dir="ltr"] .pp-archive__banner.pp-archive__banner--plain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/bg-cat-1.webp") center 60% / cover no-repeat;
  transform: scaleX(-1);
}

.pp-archive__banner--plain .pp-archive__title { margin: 0; font-size: var(--pp-fs-3xl); }

/* ---------- Pills ---------- */

.pp-archive__pills { margin-block-end: var(--pp-sp-5); }

/* ---------- Toolbar ---------- */

.pp-archive__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pp-sp-4);
  margin-block-end: var(--pp-sp-5);
  padding: var(--pp-sp-3) var(--pp-sp-5);
  background: var(--pp-box);
  border-radius: var(--pp-radius-pill);
  box-shadow: var(--pp-shadow-sm);
}

.pp-archive__count {
  margin: 0;
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-archive__tools {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-3);
}

/* WooCommerce renders its ordering control as a bare form/select. */
.pp-archive__tools .woocommerce-ordering { margin: 0; }

.pp-archive__tools select {
  /* Own chevron instead of the native one, which sat against the edge. */
  -webkit-appearance: none;
  appearance: none;
  padding-block: var(--pp-sp-2);
  padding-inline: var(--pp-sp-5) 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A2547' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background-color: var(--pp-box);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
  cursor: pointer;
}

[dir="rtl"] .pp-archive__tools select { background-position: left 18px center; }

.pp-archive__tools select:focus {
  outline: none;
  border-color: var(--pp-red);
  box-shadow: 0 0 0 4px var(--pp-red-soft);
}

.pp-archive__filter-toggle { border: 0; }

/* ---------- Filters panel ---------- */

.pp-archive__filters {
  margin-block-end: var(--pp-sp-5);
  padding: var(--pp-sp-5);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
}

.pp-widget + .pp-widget { margin-block-start: var(--pp-sp-5); }

.pp-widget__title {
  margin-block-end: var(--pp-sp-3);
  font-size: var(--pp-fs-md);
}

.pp-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-widget li + li { margin-block-start: var(--pp-sp-2); }

/* ---------- Load more / empty ---------- */

/* Same space above the footer as the home page (half the section gap here,
   plus the footer's own margin), whether or not "Show more" is present. */
.pp-archive__body { padding-block-end: calc(var(--pp-section-gap) / 2); }

.pp-archive__more {
  display: flex;
  justify-content: center;
  padding-block-start: var(--pp-sp-7);
}

/* The script removes the button after the last page; drop the empty row
   so its padding doesn't add to the footer gap. */
.pp-archive__more:not(:has(*)) { display: none; }

.pp-archive__empty {
  text-align: center;
  padding-block: var(--pp-sp-7);
}

.pp-archive__empty .pp-search {
  max-width: 420px;
  margin-inline: auto;
  margin-block-start: var(--pp-sp-4);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pp-archive__banner {
    min-height: 160px;
    padding: var(--pp-sp-5);
  }

  .pp-archive__banner-copy { max-width: 60%; }
  .pp-archive__banner-media { width: 48%; }
}

@media (max-width: 600px) {
  .pp-archive__banner.pp-archive__banner--plain { padding: var(--pp-sp-5); }
  .pp-archive__banner { min-height: 130px; }
  .pp-archive__title { font-size: 22px; }
  .pp-archive__banner--plain .pp-archive__title { font-size: 22px; }

  /* Pills scroll sideways in one row instead of wrapping into a block;
     the negative margin lets them run to the screen edge. */
  .pp-archive__pills {
    flex-wrap: nowrap;
    gap: var(--pp-sp-2);
    margin-inline: calc(-1 * var(--pp-gutter));
    padding: var(--pp-sp-1) var(--pp-gutter) var(--pp-sp-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pp-archive__pills::-webkit-scrollbar { display: none; }
  .pp-archive__pills .pp-pill { padding: var(--pp-sp-2) var(--pp-sp-4); }

  /* Count and sorting share one row. */
  .pp-archive__toolbar {
    flex-wrap: nowrap;
    gap: var(--pp-sp-3);
    padding: var(--pp-sp-2) var(--pp-sp-2) var(--pp-sp-2) var(--pp-sp-4);
  }

  [dir="rtl"] .pp-archive__toolbar { padding: var(--pp-sp-2) var(--pp-sp-4) var(--pp-sp-2) var(--pp-sp-2); }

  .pp-archive__count { flex: 0 0 auto; font-size: var(--pp-fs-sm); }
  .pp-archive__tools { min-width: 0; }
  .pp-archive__tools select { max-width: 100%; padding-inline: var(--pp-sp-3) 36px; font-size: var(--pp-fs-xs); background-position: right 12px center; }
  [dir="rtl"] .pp-archive__tools select { background-position: left 12px center; }
}