/* =========================================================================
   Shop / category archive (woocommerce/archive-product.php).
   Reuses base.css tokens + shared components (.str-container, .str-h1,
   .str-lede, .str-breadcrumb, .str-products, .str-product-card, .str-btn,
   .str-panel, .str-field, .str-swatch, .str-checkbox-row). Only the classes
   below (filter sidebar, chips, price slider, active-filter pills, sort
   dropdown restyle, mobile drawer) are new.
   ========================================================================= */

/* ---------- hero ---------- */
.str-hero-shop{
  padding:34px 0 26px;
  background:linear-gradient(120deg,var(--c-cream-1),var(--c-cream-2));
}
.str-hero-shop .str-breadcrumb{padding:0 0 10px}
.str-hero-shop__title{font-size:56px;margin-bottom:10px}
.str-hero-shop__desc{max-width:560px;color:var(--c-ink-soft)}
@media (max-width:600px){
  .str-hero-shop__title{font-size:38px}
}

/* ---------- toolbar ---------- */
.str-toolbar{border-bottom:1px solid var(--c-line);padding:20px 0}
.str-toolbar__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

.str-chip-row{display:flex;gap:10px;flex-wrap:wrap}
.str-chip{
  font:600 13px var(--font-body);padding:9px 16px;border-radius:100px;
  background:#fff;border:1.5px solid var(--c-line-strong);color:var(--c-ink);
}
.str-chip:hover{border-color:var(--c-accent);color:var(--c-accent-ink)}
.str-chip.is-active{background:var(--c-dark);border-color:var(--c-dark);color:#fff}

.str-toolbar__meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.str-result-count{font:500 13.5px var(--font-body);color:var(--c-ink-mute);white-space:nowrap}

/* sort dropdown — restyles WooCommerce's native woocommerce_catalog_ordering() output */
.str-sort{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--c-line-strong);border-radius:10px;padding:10px 34px 10px 14px;
  font:600 13.5px var(--font-body);white-space:nowrap;
}
.str-sort__label{color:var(--c-ink)}
.str-sort .woocommerce-ordering{display:contents}
.str-sort select.orderby{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:none;background:transparent;font:600 13.5px var(--font-body);color:var(--c-ink);
  padding:0;margin:0;cursor:pointer;
}
.str-sort select.orderby:focus{outline:none}
.str-sort select.orderby::-ms-expand{display:none}
.str-sort::after{
  content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--c-ink-faint);font-size:11px;pointer-events:none;
}

/* mobile-only "Filtros" toggle button (shown <900px, see media query below) */
.str-filters-toggle{
  display:none;font:700 13.5px var(--font-body);padding:10px 16px;border-radius:10px;
  border:1.5px solid var(--c-line-strong);background:#fff;color:var(--c-ink);cursor:pointer;
}

/* ---------- body: sidebar + grid ---------- */
.str-shop-body{display:grid;grid-template-columns:260px 1fr;gap:36px;padding:30px 0 50px}

.str-filters__form{display:flex;flex-direction:column}
.str-filters__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.str-filters__title{font-family:var(--font-display);font-weight:700;font-size:24px}
.str-filters__clear{font:600 12.5px var(--font-body);color:var(--c-accent)}
.str-filters__clear:hover{text-decoration:underline}
.str-filters__submit{margin-top:8px}

.str-filter-group{border-bottom:1px solid var(--c-line);padding:18px 0}
.str-filter-group:last-of-type{border-bottom:none}
.str-filter-group__head{
  display:flex;justify-content:space-between;align-items:center;
  font:700 14px var(--font-body);margin-bottom:14px;
}
.str-filter-group__ind{color:var(--c-ink-line);font-size:16px}

.str-filter-list{display:flex;flex-direction:column;gap:11px}
.str-filter-check{color:var(--c-ink-soft);cursor:pointer}
.str-filter-check input[type="checkbox"],
.str-filter-check input[type="radio"]{
  width:18px;height:18px;flex:none;accent-color:var(--c-accent);cursor:pointer;
}
.str-filter-check input[type="radio"]{border-radius:50%}
.str-filter-count{margin-left:auto;font:500 12px var(--font-body);color:var(--c-ink-faint)}

/* color swatches (checkbox-driven, visually a .str-swatch circle) */
.str-swatch-row{display:flex;flex-wrap:wrap;gap:12px}
.str-swatch-option{cursor:pointer;line-height:0}
.str-swatch{background:var(--swatch-color,#ccc)}
.str-swatch--fallback{background:var(--c-canvas)}
.str-swatch--terracota{background:#c9622e}
.str-swatch--preto{background:#0f2f34}
.str-swatch--branco{background:#e8e2d6}
.str-swatch--verde{background:#2f7d6b}
.str-swatch--roxo{background:#7d5cc9}
.str-swatch--amarelo{background:#c9b52e}
.str-swatch-option .str-swatch{width:30px;height:30px}
.str-swatch-option.is-selected .str-swatch{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c-accent)}

/* price range */
.str-price-slider__track{
  height:4px;background:var(--c-line-strong);border-radius:100px;position:relative;margin:0 6px 16px;
}
.str-price-slider__fill{
  position:absolute;top:0;bottom:0;left:0;right:0;background:var(--c-accent);border-radius:100px;
}
.str-price-slider__fields{display:flex;align-items:center;gap:10px}
.str-price-field{
  position:relative;flex:1;display:flex;align-items:center;
  border:1.5px solid var(--c-line-strong);border-radius:10px;padding:0 12px;
}
.str-price-field:focus-within{border-color:var(--c-accent)}
.str-price-field__prefix{font:600 13px var(--font-body);color:var(--c-ink-faint)}
.str-price-input{
  border:none;padding:11px 4px 11px 6px;width:100%;min-width:0;font:600 13px var(--font-body);color:var(--c-ink);
}
.str-price-input:focus{outline:none}
/* hide native number spinners so the field reads like a plain amount */
.str-price-input::-webkit-outer-spin-button,
.str-price-input::-webkit-inner-spin-button{appearance:none;margin:0}
.str-price-input[type="number"]{appearance:textfield;-moz-appearance:textfield}
.str-price-sep{color:var(--c-ink-faint);font:600 13px var(--font-body)}

/* active-filter pills */
.str-active-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.str-active-filters__label{font:500 13px var(--font-body);color:var(--c-ink-faint)}
.str-filter-pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--c-accent-soft);
  color:var(--c-accent-ink);font:600 13px var(--font-body);padding:7px 13px;border-radius:100px;
}
.str-filter-pill:hover{background:var(--c-accent-soft-2);text-decoration:line-through}

/* pagination — restyles WooCommerce's woocommerce_pagination() output */
.woocommerce-pagination{margin-top:40px}
.woocommerce-pagination ul.page-numbers{
  list-style:none;display:flex;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;
}
.woocommerce-pagination .page-numbers li{display:contents}
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span{
  width:40px;height:40px;border-radius:10px;border:1.5px solid var(--c-line-strong);
  display:flex;align-items:center;justify-content:center;font:700 15px var(--font-body);color:var(--c-ink);
}
.woocommerce-pagination .page-numbers span.current{background:var(--c-dark);border-color:var(--c-dark);color:#fff}
.woocommerce-pagination .page-numbers a:hover{border-color:var(--c-accent);color:var(--c-accent-ink)}
.woocommerce-pagination .page-numbers .dots{border:none;color:var(--c-ink-faint)}

/* responsive: sidebar becomes a toggleable drawer below ~900px */
@media (max-width:900px){
  .str-filters-toggle{display:inline-flex;align-items:center;justify-content:center}
  .str-shop-body{grid-template-columns:1fr;gap:24px}
  .str-filters{
    display:none;background:var(--c-panel);border-radius:var(--radius-lg);padding:22px 22px 26px;margin-bottom:8px;
  }
  .str-filters.is-open{display:block}
}
@media (max-width:640px){
  .str-toolbar__row{align-items:flex-start}
  .str-toolbar__meta{width:100%;justify-content:space-between}
}