/* ==========================================================================
   Loja (Shop archive / category archive) — only enqueued on shop-related
   templates (see inc/enqueue.php). Dense, product-first grid — no big hero
   section above the fold, matching how real activewear PLPs (reference:
   avvi.com.br) get straight to the catalog. Mobile is the primary case:
   the filter row scrolls horizontally instead of wrapping into a messy stack.
   ========================================================================== */

/* ---------- category header — only on a filtered category view (see
   $gyo_category_term in archive-product.php), not the plain "Loja" (all
   products) view, so the dense product-first philosophy above still holds
   there. With a category image set (WooCommerce's own per-category
   thumbnail) it's a proper banner; without one, a compact text intro. */
.category-hero{ position:relative; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.category-hero:not(.has-image){
  max-width:1440px; margin-left:auto; margin-right:auto; padding: clamp(1.8rem, 4vw, 2.8rem) var(--edge) 0;
}
.category-hero.has-image{ height: clamp(220px, 30vw, 340px); overflow:hidden; }
.category-hero-art{ position:absolute; inset:0; }
/* .scrim only has a rule scoped under .hero/.banner elsewhere — reusing
   the bare class here without one meant no darkening at all, so the text
   contrast depended entirely on luck with whatever part of the photo
   happened to sit behind it. */
.category-hero-art .scrim{ position:absolute; inset:0; z-index:1; background: rgba(15,13,10,0.5); }
.category-hero-copy{
  position:relative; z-index:2; max-width:60ch;
}
.category-hero.has-image .category-hero-copy{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#F3EBDF; padding: 1.5rem var(--edge); max-width:none;
}
.category-hero.has-image .eyebrow{ color: rgba(243,235,223,0.75); }
.category-hero h1{ font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight:400; letter-spacing:0.02em; margin: 0.4rem 0 0.5rem; }
.category-hero p{ color: var(--ink-soft); font-size:0.92rem; max-width:52ch; }
.category-hero.has-image p{ color: rgba(243,235,223,0.85); max-width:48ch; }

.shop-context-label{
  max-width:1440px; margin:0 auto; padding: clamp(1.6rem, 3.5vw, 2.6rem) var(--edge) 0.6rem;
}
.shop-context-label h1{
  font-family:var(--font-display); font-weight:400; letter-spacing:0.02em;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color:var(--ink);
}

.shop-controls{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 0 var(--edge) 1.1rem; max-width:1440px; margin:0 auto;
  border-bottom:1px solid var(--line);
}
.filter-pills{
  display:flex; gap:0.5rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.filter-pills::-webkit-scrollbar{ display:none; }
.filter-pill{
  flex:0 0 auto; text-decoration:none; font-size:0.76rem; font-weight:600; font-variation-settings:'wght' 600;
  letter-spacing:0.05em; color: var(--ink-soft); background: var(--surface); border:1px solid var(--line);
  padding: 0.55rem 1.1rem; border-radius:999px; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.filter-pill:hover{ border-color: var(--line-strong); }
.filter-pill.is-active{ background: var(--ink); color:#F3EBDF; border-color:var(--ink); }

.toolbar-sort{ flex-shrink:0; }
.toolbar-sort select{
  border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink);
  padding: 0.55rem 1rem; font-size:0.78rem; cursor:pointer;
}

@media (max-width: 640px){
  .shop-controls{ flex-direction:column; align-items:stretch; gap:0.7rem; padding-bottom:0.9rem; }
  .toolbar-sort select{ width:100%; }
}

.shop-catalog{ padding-top: 1.5rem; }

/* ---------- closing promise band ----------
   Was a second scrolling ticker duplicating the header's own notice bar —
   two independently-scrolling bands on the same page read as noisy/broken
   rather than intentional. Its own dark 4-up card grid, deliberately NOT
   the same component as the Home hero's inline icon+text row — a different
   spot on the site asking for something new gets an actually different
   design, not the same strip copy-pasted in. */
.shop-promise{
  display:grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink); margin-top: clamp(1.6rem, 4vw, 3.5rem);
  /* Full-bleed and flush against the footer below (same --ink color, zero
     gap) — rounding the BOTTOM corners here left two cream-colored notches
     cut into the box right where it meets the footer's square edge, which
     read as a rendering glitch rather than a deliberate shape. Top corners
     still round since there's real cream space above them to curve into. */
  border-radius:20px 20px 0 0;
  overflow:hidden;
}
.shop-promise-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.7rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) 1.2rem;
  border-left: 1px solid rgba(243,235,223,0.14);
}
.shop-promise-item:first-child{ border-left:none; }
.shop-promise-icon{
  width:3rem; height:3rem; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(243,235,223,0.1); color:#F3EBDF;
}
.shop-promise-text{ display:flex; flex-direction:column; gap:0.15rem; }
.shop-promise-text strong{ font-family:var(--font-display); font-size:0.95rem; font-weight:400; letter-spacing:0.02em; text-transform:uppercase; color:#F3EBDF; }
.shop-promise-text{ font-size:0.76rem; color: rgba(243,235,223,0.6); }
@media (max-width: 780px){
  .shop-promise{ grid-template-columns: repeat(2, 1fr); border-radius:16px 16px 0 0; }
  .shop-promise-item:nth-child(2){ border-left: 1px solid rgba(243,235,223,0.14); }
  .shop-promise-item:nth-child(3){ border-left:none; border-top: 1px solid rgba(243,235,223,0.14); }
  .shop-promise-item:nth-child(4){ border-top: 1px solid rgba(243,235,223,0.14); }
}

.woocommerce-pagination{ margin-top: 2rem; }
.woocommerce-pagination ul.page-numbers{ list-style:none; display:flex; gap:0.5rem; margin:0; padding:0; }
.woocommerce-pagination .page-numbers{
  display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border-radius:50%; text-decoration:none; color:var(--ink); font-size:0.85rem; font-variant-numeric: tabular-nums;
}
.woocommerce-pagination .page-numbers.current{ background:var(--ink); color:#F3EBDF; }
.woocommerce-pagination .page-numbers:not(.current):hover{ background:var(--surface); }