/* Página de produtos — usa os tokens e componentes do /styles.css */

.pg-produtos{background:var(--cream)}

/* ---------- topo ---------- */
.pr-hero{
  position:relative;overflow:hidden;color:#fff;padding:130px 0 0;
  background:linear-gradient(135deg,#b3124f 0%,#6d0a6a 26%,#3d0768 56%,#23084f 80%,#083a52 100%);
}
.pr-hero .blob{position:absolute}
.pr-hero .b1{width:40vw;height:40vw;left:-12vw;top:-18vw}
.pr-hero .b2{width:30vw;height:30vw;right:-8vw;bottom:-16vw}
.pr-hero__in{position:relative;z-index:1;padding-bottom:56px}
.pr-hero .display{font-size:clamp(46px,7.4vw,108px);margin-bottom:18px}
.pr-hero__lead{font-size:clamp(16px,1.3vw,19px);font-weight:300;max-width:560px;opacity:.9}

/* ---------- barra de filtros (gruda embaixo do menu) ---------- */
.pr-bar{position:sticky;top:66px;z-index:20;background:rgba(251,244,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(78,10,126,.08);padding:16px 0 12px}
.pr-bar__top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.pr-search{flex:1;min-width:min(420px,100%);height:48px;box-shadow:0 6px 18px -12px rgba(78,10,126,.4)}
.pr-count{font-size:14px;color:var(--muted);font-weight:500;white-space:nowrap}
.pr-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;-webkit-overflow-scrolling:touch}
.pr-chips::-webkit-scrollbar{display:none}
.pr-chip{
  flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:#fff;
  font-weight:600;font-size:14px;border:1.5px solid transparent;color:var(--ink);transition:all .25s var(--ease)
}
.pr-chip i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--magenta))}
.pr-chip small{font-weight:500;opacity:.55;font-size:12px}
.pr-chip:hover{border-color:var(--c,var(--magenta))}
.pr-chip[aria-pressed="true"]{background:var(--c,var(--plum));color:#fff}
.pr-chip[aria-pressed="true"] i{background:#fff}
.pr-chip[aria-pressed="true"] small{opacity:.8}
.pr-chips--sub{margin-top:6px}
.pr-chips--sub .pr-chip{padding:7px 14px;font-size:13px;background:transparent;border-color:rgba(78,10,126,.15)}
.pr-chips--sub .pr-chip[aria-pressed="true"]{background:var(--c,var(--plum));border-color:transparent}
.pr-chips--sub:empty{display:none}

/* ---------- grade ---------- */
.pr-lista{padding-top:28px;padding-bottom:40px}
.pr-grupo{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin:26px 0 2px}
.pr-grupo:first-child{margin-top:0}
.pr-grupo h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3vw,38px);line-height:1;color:var(--ink)}
.pr-grupo span{font-family:var(--script);font-size:24px;color:var(--c)}
.pr-grupo::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--c);opacity:.25;align-self:center}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.pr-card{
  position:relative;display:flex;flex-direction:column;text-align:left;background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 1px 0 rgba(78,10,126,.06);transition:transform .35s var(--ease),box-shadow .35s;cursor:pointer;
  animation:prIn .5s var(--ease) both
}
@keyframes prIn{from{opacity:0;transform:translateY(12px)}}
.pr-card:hover{transform:translateY(-4px);box-shadow:0 20px 34px -22px var(--c)}
.pr-card:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.pr-card__img{aspect-ratio:1;background:#fff;display:grid;place-items:center;overflow:hidden}
.pr-card__img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.pr-card:hover .pr-card__img img{transform:scale(1.05)}
.pr-card__txt{padding:12px 16px 16px;border-top:3px solid var(--c);flex:1;display:flex;flex-direction:column}
.pr-card__fam{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c);line-height:1.25}
.pr-card__var{font-size:16px;font-weight:700;line-height:1.2;margin-top:4px}
.pr-card__meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px}
.pr-selo{position:absolute;left:12px;top:12px;z-index:1;background:var(--teal);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px}
.pr-vazio{text-align:center;padding:60px 20px;color:var(--muted)}
.pr-vazio b{display:block;font-size:22px;color:var(--ink);margin-bottom:6px}
.pr-link{color:var(--magenta);font-weight:700;text-decoration:underline}

/* ---------- chamada ---------- */
.pr-cta{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin:20px 0 80px;
  background:var(--plum);color:#fff;border-radius:var(--r-xl);padding:clamp(28px,4vw,52px);position:relative;overflow:hidden
}
.pr-cta::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--magenta);filter:blur(100px);opacity:.45;right:-120px;top:-160px}
.pr-cta>*{position:relative}
.pr-cta__script{font-size:28px;color:var(--rose)}
.pr-cta .display{font-size:clamp(36px,4.6vw,64px);margin:4px 0 12px}
.pr-cta p{opacity:.8;max-width:420px}
.pr-cta__btns{display:flex;flex-wrap:wrap;gap:12px}
.pr-cta__onde{border-color:rgba(255,255,255,.6);color:#fff}
.pr-cta__onde:hover{background:#fff;color:var(--plum)}

/* ---------- detalhe ---------- */
.pr-modal{position:fixed;inset:0;z-index:200;background:rgba(20,3,35,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px}
.pr-modal[hidden]{display:none}
.pr-modal__box{
  position:relative;background:#fff;border-radius:32px;overflow:hidden;width:min(980px,100%);max-height:calc(100vh - 40px);
  display:grid;grid-template-columns:1fr 1fr;animation:prPop .35s var(--ease)
}
@keyframes prPop{from{opacity:0;transform:translateY(20px) scale(.98)}}
.pr-modal__x{position:absolute;right:14px;top:12px;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--cream);font-size:28px;line-height:1;color:var(--plum)}
.pr-modal__foto{background:#fff;display:grid;place-items:center;border-right:1px solid rgba(78,10,126,.08)}
.pr-modal__foto img{width:100%;height:100%;max-height:calc(100vh - 40px);object-fit:contain}
.pr-modal__info{padding:40px 34px 32px;overflow:auto;display:flex;flex-direction:column}
.pr-modal__fam{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.pr-modal__info h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,3.6vw,48px);line-height:.95;margin:8px 0 14px}
.pr-modal__desc{color:var(--muted);font-size:16px;margin-bottom:18px}
.pr-modal__dados{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;padding:14px 16px;border-radius:16px;background:var(--cream);margin-bottom:18px}
.pr-modal__dados dt{color:var(--muted)}
.pr-modal__dados dd{font-weight:600}
.pr-irmaos__t{font-size:13px;font-weight:700;margin-bottom:8px}
.pr-irmaos{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:thin}
.pr-irmao{flex:none;width:68px;text-align:center;font-size:11px;font-weight:600;line-height:1.2;color:var(--ink)}
.pr-irmao img{width:68px;height:68px;object-fit:contain;border-radius:14px;border:2px solid #eee;background:#fff;margin-bottom:4px;transition:border-color .2s}
.pr-irmao:hover img{border-color:var(--c)}
.pr-irmao[aria-current="true"] img{border-color:var(--c);box-shadow:0 0 0 2px var(--c)}
.pr-modal__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.pr-modal__btns .btn{flex:1;min-width:180px}

@media (max-width:860px){
  .pr-bar{top:62px}
  .pr-hero{padding-top:110px}
  .pr-modal{padding:0;place-items:end stretch}
  .pr-modal__box{grid-template-columns:1fr;border-radius:28px 28px 0 0;max-height:94vh;overflow:auto}
  .pr-modal__foto{border-right:0;border-bottom:1px solid rgba(78,10,126,.08)}
  .pr-modal__foto img{max-height:48vh}
  .pr-modal__info{padding:24px 20px 28px;overflow:visible}
}
@media (max-width:560px){
  .pr-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pr-card{border-radius:18px}
  .pr-card__txt{padding:10px 12px 12px}
  .pr-card__var{font-size:14px}
  .pr-search{min-width:100%}
  .pr-count{display:none}
}