/* Hoop DNA / Parede de Riscas — alinhado ao visual actual */

.stripes-page{
  background:var(--cream);
  padding:28px 0 64px;
}
.stripes-page .container,
.stripes.container{
  width:min(1600px,100%);
  margin:0 auto;
  padding:0 clamp(18px,3.5vw,48px);
}

.stripes .collection-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 28px;
  margin-bottom:10px;
}
.stripes .page-title{
  font-family:var(--serif);
  font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.05;
  margin:6px 0 0;
  color:var(--ink);
}
.stripes .page-count{
  margin:0;
  font-size:14px;
  font-weight:650;
  color:var(--muted);
}
.stripes .page-count strong{
  color:var(--forest);
  font-size:1.35em;
  font-weight:800;
}

.stripes-intro{
  max-width:62ch;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
  margin:.35rem 0 1.4rem;
}

.stripes-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
}
.stripes-filters .select-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  border:1px solid #d2d3c9;
  border-radius:25px;
  padding:0 12px 0 16px;
  background:#fff;
  color:#26332c;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
}
.stripes-filters .select-wrap select{
  border:0;
  background:transparent;
  min-width:90px;
  max-width:180px;
  outline:0;
  cursor:pointer;
  color:#33483d;
  font-size:13px;
  font-weight:600;
}
.stripes-filters .button{min-height:40px;padding:8px 18px;font-size:13px}

.stripes .empty-state{
  border:1px dashed #bdc6ba;
  border-radius:15px;
  text-align:center;
  padding:48px 20px;
  color:var(--muted);
  margin:20px 0;
}
.stripes .empty-state a{color:var(--forest);font-weight:700}

/* Parede de chips */
.dna-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:6px;
}
.dna-chip-wrap{position:relative}
.dna-chip{
  position:relative;
  display:block;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:1/3.4;
  box-shadow:0 8px 20px rgba(7,27,21,.1);
  transition:transform .25s ease,box-shadow .25s ease,z-index 0s;
}
.dna-chip:hover,
.dna-chip:focus-visible{
  transform:scale(1.12);
  box-shadow:0 16px 36px rgba(7,27,21,.18);
  z-index:5;
  outline:none;
}
.dna-strip{position:absolute;inset:0;display:block}
.dna-label{
  position:absolute;
  inset:auto 0 0 0;
  padding:.5rem .4rem;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:650;
  line-height:1.1;
  color:#fff;
  text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.dna-label small{opacity:.85;font-weight:500}
.dna-chip:hover .dna-label,
.dna-chip:focus-visible .dna-label,
.dna-chip:active .dna-label{opacity:1}

.dna-pick{
  position:absolute;
  z-index:6;
  top:4px;
  left:4px;
  margin:0;
  cursor:pointer;
}
.dna-pick input{
  width:1.05rem;
  height:1.05rem;
  accent-color:var(--forest);
}

.dna-compare-bar{
  position:sticky;
  bottom:1rem;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:1.2rem 0 0;
  padding:.85rem 1.1rem;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.dna-compare-bar[hidden]{display:none!important}
.dna-compare-bar p{margin:0;font-size:14px;font-weight:650;color:var(--muted)}

/* Compare page */
.compare-page{
  background:var(--cream);
  padding:28px 0 64px;
}
.compare-page .container{
  width:min(1600px,100%);
  margin:0 auto;
  padding:0 clamp(18px,3.5vw,48px);
}
.compare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
  margin-top:1.5rem;
}
.compare-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--small-radius);
  overflow:hidden;
  box-shadow:0 10px 28px rgba(7,27,21,.07);
}
.compare-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}
.compare-card .compare-strip{
  height:28px;
  display:block;
}
.compare-card .compare-body{padding:14px 16px 18px}
.compare-card h2{
  font-family:var(--serif);
  font-size:1.15rem;
  margin:0 0 6px;
  letter-spacing:-.02em;
}
.compare-card h2 a{color:inherit;text-decoration:none}
.compare-card h2 a:hover{color:var(--forest)}
.compare-card p{margin:0;font-size:13px;color:var(--muted)}
.compare-facts{list-style:none;padding:0;margin:.8rem 0 0;font-size:.9rem;display:grid;gap:.35rem}
.compare-facts .swatches{display:flex;gap:.35rem}
.compare-facts .sw{width:1.4rem;height:1.4rem;border-radius:4px;border:1px solid rgba(0,0,0,.08);display:inline-block}

@media (hover:none){
  .dna-label{
    opacity:.95;
    padding:.35rem .3rem;
    font-size:.62rem;
    background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
  }
}
@media (max-width:560px){
  .dna-wall{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
  .dna-label{font-size:.6rem}
  .stripes-filters .select-wrap{flex:1 1 calc(50% - 6px)}
  .stripes-filters .select-wrap select{max-width:none;width:100%}
}