/* ==========================================================================
   P&J Prints — shop archives, toolbar and filter drawer
   ========================================================================== */

/* The Woo container was running a ~68ch measure across a 1200px+ row and
   leaving the right-hand half of the header empty. */
.woocommerce .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container {
  max-width: var(--pj-max);
  margin-inline: auto;
  padding-inline: var(--pj-gutter);
}

/* ---------- Breadcrumb ---------- */
.woocommerce .woocommerce-breadcrumb {
  font-size: .84rem;
  color: var(--pj-muted);
  margin: 0 0 1.1rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--pj-muted); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--pj-green); }

/* ---------- Archive header ---------- */
.woocommerce .woocommerce-products-header {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: 0 0 clamp(22px, 3vw, 34px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--pj-line);
}
.woocommerce .woocommerce-products-header__title {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 .7rem;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
}
.woocommerce .woocommerce-products-header .term-description,
.woocommerce .woocommerce-products-header .woocommerce-archive-description {
  grid-column: 1;
  grid-row: 2;
  max-width: 66ch;
}
.woocommerce .term-description p,
.woocommerce .woocommerce-archive-description p {
  color: var(--pj-muted);
  font-size: 1rem;
  margin: 0 0 .8rem;
}
.woocommerce .term-description p:last-child { margin-bottom: 0; }

/* The card that fills the space the description used to leave empty */
.pj-archive-cta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  background: var(--pj-green-tint);
  border: 1px solid var(--pj-green-line);
  border-radius: var(--pj-radius);
  padding: clamp(18px, 2vw, 26px);
}
.pj-archive-cta h2 {
  font-size: 1.1rem;
  margin: 0 0 .5rem;
}
.pj-archive-cta p {
  font-size: .92rem;
  color: var(--pj-green-deep);
  margin: 0 0 1.1rem;
}
.pj-archive-cta .pj-icon { margin-bottom: .85rem; background: rgba(11,122,43,.1); }

@media (max-width: 900px) {
  .woocommerce .woocommerce-products-header { grid-template-columns: 1fr; }
  .woocommerce .woocommerce-products-header__title,
  .woocommerce .woocommerce-products-header .term-description,
  .pj-archive-cta { grid-column: 1; }
  .woocommerce .woocommerce-products-header__title { grid-row: 1; }
  .woocommerce .woocommerce-products-header .term-description { grid-row: 2; margin-bottom: 1.3rem; }
  .pj-archive-cta { grid-row: 3; }
}

/* ---------- Toolbar ---------- */
.pj-shop-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.woocommerce .pj-shop-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: .9rem;
  color: var(--pj-muted);
  float: none;
}
.woocommerce .pj-shop-toolbar .woocommerce-ordering,
.woocommerce .pj-shop-toolbar .pj-select--ordering {
  margin: 0 0 0 auto;
  float: none;
}

.pj-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: 'PJ Display', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--pj-ink);
  background: var(--pj-paper);
  border: 1px solid var(--pj-line);
  border-radius: 999px;
  padding: .68em 1.15em;
  cursor: pointer;
  transition: border-color .18s var(--pj-ease), box-shadow .18s var(--pj-ease);
}
.pj-filter-trigger:hover { border-color: var(--pj-green); box-shadow: var(--pj-shadow); }
.pj-filter-trigger svg { color: var(--pj-green); }
.pj-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--pj-ink);
  color: var(--pj-lime);
  font-size: .72rem;
  line-height: 1;
}

/* ---------- Select control ----------
   The stock dropdown was clipping its own label: Astra gives the select a
   fixed height while the inherited line-height pushes the text past it.
   Reset both, and draw the arrow on a wrapper since a <select> can't carry
   a pseudo-element. */
.pj-select { position: relative; display: inline-block; }
.pj-select::after {
  content: '';
  position: absolute;
  right: .95rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--pj-ink);
  border-bottom: 2px solid var(--pj-ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.pj-select select,
.woocommerce .woocommerce-ordering select,
.pj-drawer select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: auto;
  min-height: 0;
  line-height: 1.3;
  font-family: inherit;
  font-size: .92rem;
  color: var(--pj-ink);
  background: var(--pj-paper);
  border: 1px solid var(--pj-line);
  border-radius: 999px;
  padding: .72em 2.6em .72em 1.1em;
  cursor: pointer;
  text-overflow: ellipsis;
}
.pj-drawer .pj-select select { border-radius: var(--pj-radius-sm); }
.pj-select select:focus,
.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--pj-green);
  box-shadow: 0 0 0 3px rgba(11,122,43,.14);
  outline: none;
}
.pj-select--ordering { min-width: 210px; }
.pj-select--ordering select { width: 100%; }

/* ---------- Drawer ---------- */
.pj-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,15,14,.5);
  opacity: 0;
  transition: opacity .28s var(--pj-ease);
  z-index: 998;
}
.pj-drawer-overlay.is-open { opacity: 1; }

.pj-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 88vw);
  background: var(--pj-paper);
  border-left: 1px solid var(--pj-line);
  box-shadow: -18px 0 46px -22px rgba(12,15,14,.5);
  transform: translateX(100%);
  transition: transform .3s var(--pj-ease);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.pj-drawer.is-open { transform: none; }

/* `hidden` alone loses to display:flex, so the attribute is enforced here —
   otherwise the panel sits on top of the page with no way to dismiss it. */
.pj-drawer[hidden],
.pj-drawer-overlay[hidden] { display: none !important; }

.pj-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--pj-line);
  flex: none;
}
.pj-drawer__head h2 { font-size: 1.05rem; margin: 0; }
.pj-drawer__close {
  border: 0;
  background: var(--pj-shell);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pj-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pj-drawer__close:hover { background: var(--pj-shell-2); }

.pj-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.pj-filter-group h3 {
  font-family: 'PJ Display', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pj-muted);
  margin: 0 0 .8rem;
}
.pj-filter-hint { font-size: .85rem; color: var(--pj-muted); margin: 0 0 .8rem; }

.pj-filter-cats { list-style: none; margin: 0; padding: 0; }
.pj-filter-cats li + li { margin-top: .3rem; }
.pj-filter-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .6rem .8rem;
  border-radius: var(--pj-radius-sm);
  text-decoration: none;
  color: var(--pj-text);
  font-size: .93rem;
  transition: background-color .16s var(--pj-ease);
}
.pj-filter-cats a:hover { background: var(--pj-green-tint); color: var(--pj-green-deep); }
.pj-filter-cats em {
  font-style: normal;
  font-size: .78rem;
  color: var(--pj-muted);
  background: var(--pj-shell);
  border-radius: 999px;
  padding: .12em .6em;
  flex: none;
}

.pj-price-row { display: flex; align-items: flex-end; gap: .6rem; }
.pj-price-row label { flex: 1 1 0; min-width: 0; }
.pj-price-row span {
  display: block;
  font-size: .76rem;
  color: var(--pj-muted);
  margin-bottom: .3rem;
}
.pj-price-row input {
  width: 100%;
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-radius-sm);
  padding: .68em .8em;
  font-family: inherit;
  font-size: .95rem;
  color: var(--pj-text);
  background: var(--pj-paper);
}
.pj-price-row input:focus {
  border-color: var(--pj-green);
  box-shadow: 0 0 0 3px rgba(11,122,43,.14);
  outline: none;
}
.pj-price-dash { color: var(--pj-muted); padding-bottom: .7rem; flex: none; }

.pj-check {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .93rem;
  padding: .4rem 0;
  cursor: pointer;
}
.pj-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--pj-green);
  flex: none;
  margin: 0;
}

.pj-drawer__foot {
  margin-top: auto;
  padding-top: .4rem;
  display: grid;
  gap: .7rem;
  justify-items: center;
}
.pj-drawer__clear { font-size: .85rem; color: var(--pj-muted); }
.pj-drawer__clear:hover { color: var(--pj-green); }

body.pj-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pj-drawer, .pj-drawer-overlay { transition: none; }
}

/* The WhatsApp widget is fixed bottom-right with a very high z-index, so it
   sat directly over the drawer's "Show results" button. Lift the drawer above
   it and take the bubble out of the way while the panel is open. */
.pj-drawer { z-index: 100001; }
.pj-drawer-overlay { z-index: 100000; }

body.pj-drawer-open .qlwapp,
body.pj-drawer-open .qlwapp-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--pj-ease);
}

/* Breathing room so the submit button never ends up under a floating widget */
.pj-drawer__foot { padding-bottom: .5rem; }
.pj-drawer__body { padding-bottom: 2rem; }

/* With a long category list the submit button scrolled out of reach at the
   bottom of the panel. Stick it to the foot of the scroll area so it is
   always one tap away. */
.pj-drawer__foot {
  position: sticky;
  bottom: 0;
  background: var(--pj-paper);
  padding: 1rem 0 .25rem;
  margin-top: auto;
  box-shadow: 0 -14px 18px -14px rgba(12,15,14,.28);
}