/* ============================================================
   Catálogo ATUAL — vitrine simples, letras grandes, foco no WhatsApp
   Carregado DEPOIS de style.css
   ============================================================ */
:root{
  --wa:#128c4b;          /* verde WhatsApp escurecido: contraste AA com texto branco */
  --wa-dark:#0d6e3a;
}
html{font-size:17px}
section[id], [id="inicio"]{scroll-margin-top:84px}

/* ---------- Header branco fixo ---------- */
.header,.header.scrolled{background:var(--white);padding:12px 0;border-bottom:1px solid var(--border-light);box-shadow:0 2px 14px rgba(24,20,16,.05)}
.header .logo-mark{color:var(--black)}
.header__nav a{color:var(--black);font-size:.95rem}
.header__nav a::after{background:var(--salmon)}
.header__nav a:hover{color:var(--salmon-dark)}
.header__ig{color:var(--black)}
.header__burger span{background:var(--black)}

/* ---------- Botões do catálogo ---------- */
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--wa);color:#fff;font-weight:700;font-size:.95rem;line-height:1.2;
  padding:13px 18px;border-radius:12px;min-height:48px;text-align:center;
  transition:background .2s ease, transform .2s ease;
}
.btn-wa:hover{background:var(--wa-dark)}
.btn-wa:active{transform:scale(.98)}
.btn-wa svg{flex-shrink:0}
.btn-wa--lg{font-size:1.1rem;padding:17px 22px;min-height:58px;border-radius:14px}
.btn-out{
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--black);color:var(--black);background:var(--white);
  font-weight:700;font-size:1rem;padding:13px 20px;min-height:52px;border-radius:14px;
  transition:background .2s ease;
}
.btn-out:hover{background:var(--off-white)}
.header__wa{padding:10px 18px;min-height:44px;border-radius:999px}
:focus-visible{outline:3px solid var(--salmon-dark);outline-offset:2px}

/* WhatsApp flutuante no verde do catálogo */
.whats-float{background:var(--wa);box-shadow:0 10px 26px rgba(13,110,58,.35)}
.whats-float:hover{background:var(--wa-dark)}

/* ---------- Ferramentas (categorias, busca, ordem) ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.catalog{padding:92px 0 90px}
@media (max-width:700px){.catalog{padding:78px 0 70px}}
.cat-tools{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.cat-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cat-pills button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:10px 16px;border-radius:999px;
  border:1.5px solid var(--border-light);background:var(--white);
  font-size:1rem;font-weight:600;color:var(--black);
  transition:background .2s, color .2s, border-color .2s;
}
.cat-pills button span{font-size:.82rem;font-weight:700;color:var(--gray);background:var(--off-white);border-radius:999px;padding:2px 9px}
.cat-pills button:hover{border-color:var(--black)}
.cat-pills button.on{background:var(--black);border-color:var(--black);color:var(--white)}
.cat-pills button.on span{background:rgba(255,255,255,.18);color:var(--white)}
.cat-tools__row{display:flex;gap:12px;justify-content:center}
.cat-search{position:relative;flex:1;max-width:520px}
.cat-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--gray)}
.cat-search input{
  width:100%;min-height:52px;padding:12px 16px 12px 48px;border-radius:12px;
  border:1.5px solid var(--border-light);background:var(--white);
  font:inherit;font-size:1rem;color:var(--black);
}
.cat-search input:focus{outline:none;border-color:var(--black)}
.catalog__count{color:var(--gray);font-size:.95rem;margin-bottom:16px;text-align:center}

/* ---------- Grade de peças ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 18px}
.prod{display:flex;flex-direction:column;background:var(--white)}
.prod__img{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:var(--off-white);cursor:pointer}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.prod__img:hover img{transform:scale(1.04)}
.prod__zoom{position:absolute;left:10px;bottom:10px;font-size:.82rem;font-weight:700;padding:7px 12px;border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.94);color:var(--black)}
.prod__body{display:flex;flex-direction:column;gap:3px;padding-top:12px;flex:1}
.prod__name{font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.3;color:var(--black)}
.prod__linho{font-size:.82rem;font-weight:700;color:var(--salmon-dark)}

.cat-empty{text-align:center;padding:60px 0;color:var(--gray);font-size:1.05rem}
.cat-empty__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------- Janela da peça ---------- */
.pm{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s}
.pm.open{opacity:1;visibility:visible}
.pm__back{position:absolute;inset:0;background:rgba(24,20,16,.65)}
.pm__card{--pm-photo-h:min(76dvh,720px);position:relative;background:var(--white);border-radius:18px;width:100%;max-width:1040px;max-height:94dvh;overflow:auto}
.pm__body{display:grid;grid-template-columns:auto 1fr}
.pm__close{
  position:absolute;top:12px;right:12px;z-index:3;width:48px;height:48px;border-radius:50%;
  background:var(--white);font-size:1.8rem;line-height:1;color:var(--black);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.pm__gallery{width:calc(var(--pm-photo-h) * .75);display:flex;flex-direction:column;gap:10px;background:var(--off-white);padding-bottom:10px}
/* A moldura tem o mesmo 3:4 das fotos: a foto preenche tudo, sem faixas nem corte */
.pm__main{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ece6e1 center/cover no-repeat;cursor:zoom-in}
.pm__main img{width:100%;height:100%;object-fit:cover}
.pm__zoomhint{
  position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);color:var(--black);font-size:.82rem;font-weight:700;padding:7px 12px;border-radius:999px;
}
.pm__thumbs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,64px));gap:6px;justify-content:center;padding:0 10px}
.pm__thumbs button{aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.7;transition:opacity .2s,border-color .2s}
.pm__thumbs button.on{border-color:var(--black);opacity:1}
.pm__thumbs img{width:100%;height:100%;object-fit:cover}
.pm__info{padding:44px 32px 32px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pm__cat{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--salmon-dark)}
.pm__title{font-family:var(--font-display);font-size:1.8rem;font-weight:600;line-height:1.15;padding-right:40px}
.pm__price{font-size:2rem;font-weight:800}
.pm__linho{font-size:.92rem;font-weight:700;color:var(--salmon-dark)}
.pm__pieces{list-style:none;display:flex;flex-direction:column;margin-top:4px}
.pm__pieces li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--border-light)}
.pm__pieces span{font-weight:600}
.pm__pieces em{display:block;font-style:normal;font-size:.82rem;font-weight:700;color:var(--salmon-dark)}
.pm__pieces strong{font-size:1.05rem;font-weight:800;white-space:nowrap}
.pm__sizes{font-size:1rem;color:var(--gray);margin-top:4px}
.pm__sizes strong{color:var(--black)}
.pm__actions{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pm__note{font-size:.88rem;color:var(--gray);text-align:center;margin-top:6px;line-height:1.5}

/* ---------- Zoom da foto ---------- */
.zm{position:fixed;inset:0;z-index:1200;background:#14110e;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.zm.open{opacity:1;visibility:visible}
.zm__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in;user-select:none}
.zm__stage.is-zoomed{cursor:grab}
.zm__stage.is-zoomed:active{cursor:grabbing}
.zm__stage img{max-width:100%;max-height:100%;width:auto;height:auto;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.zm__close,.zm__bar button{
  width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--black);
  font-size:1.7rem;line-height:1;box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.zm__close{position:absolute;top:14px;right:14px}
.zm__bar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:12px}

.section{padding:80px 0}

/* ---------- Responsivo ---------- */
@media (max-width:1240px){
  /* 7 categorias: limita a largura p/ quebrar em 4 + 3, nunca com uma sozinha na linha */
  .cat-pills{max-width:680px;margin-inline:auto}
}
@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .pm__card{--pm-photo-h:min(76dvh,600px)}
}
@media (max-width:1024px){
  .header__wa span{display:none}
  .header__wa{width:46px;height:46px;padding:0;border-radius:50%}
}
@media (max-width:820px){
  .pm{padding:0;align-items:flex-end}
  .pm__card{max-height:100dvh;height:100dvh;border-radius:0;max-width:none}
  .pm__body{grid-template-columns:1fr;min-height:100%;align-content:start}
  /* Celular: foto de ponta a ponta na largura da tela */
  .pm__gallery{width:100%}
  /* Look com muitas fotos: miniaturas em 2 linhas iguais, grandes o bastante para o dedo */
  .pm__thumbs{grid-template-columns:repeat(var(--n-cel),minmax(0,64px))}
  .pm__info{padding:18px 20px 0;gap:6px}
  .pm__title{font-size:1.5rem;padding-right:0}
  .pm__price{font-size:1.7rem}
  .pm__actions{position:sticky;bottom:0;background:var(--white);padding:12px 0 16px;margin-top:4px;box-shadow:0 -10px 16px -12px rgba(0,0,0,.18)}
  .pm__note{padding-bottom:24px}
}
@media (max-width:700px){
  /* "Todas" em linha cheia + 6 categorias em 2x3: sem item sozinho */
  .cat-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cat-pills button:first-child{grid-column:1 / -1}
  .cat-tools{gap:8px;margin-bottom:10px}
  .cat-pills button{min-height:44px;padding:6px 12px;font-size:.98rem}
  .cat-search{max-width:none;min-width:0}
  .cat-search svg{left:12px}
  .cat-search input{min-height:46px;padding:8px 8px 8px 40px}
  .catalog__count{margin-bottom:10px;font-size:.9rem}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .prod__name{font-size:.95rem}
  .prod__zoom{left:8px;bottom:8px;font-size:.78rem;padding:6px 10px}
  .whats-float{width:56px;height:56px}
}