/* ==========================================================================
   Shop + product category archives.
   The card and the grid itself live in product-card.css.
   ========================================================================== */

/* -- hero ----------------------------------------------------------------- */

/* The old build hard-coded the literal word "Products" into an Elementor
   heading, so /product-category/laptops/ announced "Products" and nothing on
   the page identified the category. inc/woocommerce.php renders the real term
   name and its description; this styles that band. */
.effectus-shop-hero {
  position: relative;
  display: flex;
  min-height: 40vh;
  background-color: var(--effectus-brand);
  color: var(--effectus-text-invert);
  isolation: isolate;
  overflow: hidden;
}

.effectus-shop-hero.has-bg {
  background-image: var(--effectus-shop-hero-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.effectus-shop-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

.effectus-shop-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(24px, 4vw, 48px);
}

.effectus-shop-hero__title {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 50px);
  font-weight: var(--effectus-weight-heading);
  line-height: 1.15;
  color: var(--effectus-text-invert);
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.effectus-shop-hero__desc {
  max-width: 62ch;
  margin-top: .6em;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.effectus-shop-hero__desc p:last-child { margin-bottom: 0; }

/* -- filter --------------------------------------------------------------- */

/* Rebuilt as a plain GET form. The original was a Select2 widget that rewrote
   the URL with window.location.replace(), which meant the browser back button
   skipped past every filter step the visitor had taken. */
.effectus-shop__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid var(--effectus-border);
  border-radius: var(--effectus-radius);
}

.effectus-shop__filter-field {
  display: flex;
  flex: 1 1 190px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.effectus-shop__filter-field--search { flex: 2 1 260px; }

.effectus-shop__filter-field label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--effectus-text-muted);
}

.effectus-shop__filter-field input[type="search"],
.effectus-shop__filter-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--effectus-border);
  border-radius: 3px;
  background: var(--effectus-card-bg);
  color: var(--effectus-text);
  font: inherit;
  font-size: .92rem;
  line-height: 1.3;
}

/* appearance:none plus a drawn caret — the native arrow sits wrong once the
   select is given padding, and it differs on every platform. */
.effectus-shop__filter-field select,
.effectus-shop__toolbar select.orderby {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d3748'%3E%3Cpath d='m7 10 5 5 5-5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
}

.effectus-shop__filter-field input[type="search"]:focus-visible,
.effectus-shop__filter-field select:focus-visible {
  outline: 2px solid var(--effectus-brand);
  outline-offset: 1px;
}

.effectus-shop__filter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.effectus-shop__filter-actions .effectus-btn {
  border-radius: 3px;
  padding: .78em 1.5em;
}

.effectus-shop__filter-reset {
  font-size: .88rem;
  font-weight: 600;
  color: var(--effectus-text-muted);
  text-decoration: underline;
}
.effectus-shop__filter-reset:hover { color: var(--effectus-brand); }

@media (max-width: 640px) {
  .effectus-shop__filter { padding: 16px; gap: 12px; }
  .effectus-shop__filter-field,
  .effectus-shop__filter-field--search { flex: 1 1 100%; }
  .effectus-shop__filter-actions { flex: 1 1 100%; }
  .effectus-shop__filter-actions .effectus-btn { flex: 1 1 auto; justify-content: center; }
}

/* -- toolbar: result count + ordering ------------------------------------- */

/* Opened at woocommerce_before_shop_loop priority 19 and closed at 31, so the
   native result count (20) and ordering form (30) land inside it. */
.effectus-shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--effectus-border);
}

.woocommerce .effectus-shop__toolbar .woocommerce-result-count {
  margin: 0;
  font-size: .9rem;
  color: var(--effectus-text-muted);
}

.woocommerce .effectus-shop__toolbar .woocommerce-ordering {
  margin: 0;
  float: none;
}

.effectus-shop__toolbar select.orderby {
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--effectus-border);
  border-radius: 3px;
  background-color: var(--effectus-card-bg);
  color: var(--effectus-text);
  font: inherit;
  font-size: .9rem;
}

/* -- pagination ----------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination { margin: 40px 0 0; text-align: left; }

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--effectus-border);
  border-radius: 2px;
  background: var(--effectus-card-bg);
  color: var(--effectus-text);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  border-color: var(--effectus-brand);
  background: var(--effectus-brand);
  color: var(--effectus-text-invert);
}

/* -- empty state ---------------------------------------------------------- */

.woocommerce .effectus-shop .woocommerce-info,
.woocommerce .effectus-shop .woocommerce-no-products-found {
  border-top-color: var(--effectus-brand);
}