/* A VITRINE DA LOJA (29/09) - ele: "falta um pouco de vida nessa parte da loja... categorias ilustradas com foto... um
   banner com algumas amostras" e "carrosséis para cada categoria". Referências: Juniqe (blocos com foto, garantias,
   carrosséis), Minted (categorias com foto), Desenio (foto de ambiente). O PHP está em inc/woo.php (pon_loja_vitrine). */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- o banner ---------- */
.pon-vitrine-topo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:.6rem 0 2.2rem}
.pon-vitrine-topo h1{font-size:clamp(2rem,4.2vw,3.2rem);max-width:16ch;margin:0 0 .9rem}
.pon-vitrine-topo__lede{color:var(--text-secondary);font-size:1.08rem;max-width:44ch;margin:0 0 1.5rem}
.pon-vitrine-topo__mosaico{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(300px,34vw,470px)}
.pon-vitrine-topo__foto{display:block;overflow:hidden;border-radius:14px;background:var(--panel)}
.pon-vitrine-topo__foto:first-child{grid-row:1 / 3}
.pon-vitrine-topo__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.pon-vitrine-topo__foto:hover img{transform:scale(1.04)}

/* ---------- a busca (no banner e no topo das categorias e da busca) ---------- */
.pon-busca{display:flex;align-items:center;max-width:460px;border:1.5px solid var(--line);border-radius:999px;background:var(--panel);padding:4px 4px 4px 1.2rem;transition:border-color .2s}
.pon-busca:focus-within{border-color:var(--accent)}
.pon-busca input[type=search]{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;font:inherit;font-size:1rem;color:var(--ink);padding:.7rem 0;outline:none}
.pon-busca button{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;transition:filter .2s}
.pon-busca button:hover{filter:brightness(1.08)}
.pon-busca svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pon-loja-topo .pon-busca{margin-top:1.2rem}

/* ---------- as garantias ---------- */
.pon-garantias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 1.4rem;list-style:none;margin:0 0 3rem;padding:1.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pon-garantias li{display:flex;align-items:center;gap:.8rem;margin:0}
.pon-garantias svg{flex:0 0 34px;width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pon-garantias b{display:block;font-family:var(--display);font-size:.95rem;line-height:1.3}
.pon-garantias small{display:block;color:var(--text-secondary);font-size:.84rem}

/* ---------- os tipos com foto ---------- */
.pon-tipos{margin:0 0 3rem}
.pon-tipos h2,.pon-carrossel__topo h2,.pon-vitrine-fim h2{font-size:clamp(1.3rem,2.3vw,1.75rem);margin:0}
.pon-tipos h2{margin-bottom:1.2rem}
.pon-tipos__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pon-tipo{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#3B3E36;text-decoration:none;color:#fff}/* 29/09: fundo escuro enquanto a foto chega (no celular o nome branco sumia no fundo claro) */
.pon-tipo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.pon-tipo:hover img{transform:scale(1.05)}
.pon-tipo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,18,.74),rgba(20,22,18,0) 58%);pointer-events:none}
.pon-tipo__rot{position:absolute;left:1.1rem;right:1rem;bottom:.95rem;z-index:1}
.pon-tipo__rot b{display:block;font-family:var(--display);font-size:1.3rem;line-height:1.2}
.pon-tipo__rot small{font-family:var(--mono);font-size:.78rem;opacity:.88}

/* ---------- os carrosséis (um por tipo na vitrine, um por tema na página do tipo) ---------- */
.pon-carrossel{margin:0 0 2.6rem}
.pon-carrossel__topo{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--line)}
.pon-carrossel__topo a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}/* 29/09: 44 px de toque (auditoria do celular: tinha 26) */
.pon-carrossel__topo a:hover{text-decoration:underline}
.pon-carrossel__palco{position:relative}
.pon-carrossel__trilho{display:flex;align-items:flex-start;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem 0 .4rem;scrollbar-width:none}
.pon-carrossel__trilho::-webkit-scrollbar{display:none}
.pon-mini{flex:0 0 clamp(165px,18vw,225px);scroll-snap-align:start;text-decoration:none;color:var(--ink)}
.pon-mini--deitado{flex-basis:calc(clamp(165px,18vw,225px) * 1.45)}
.pon-mini--comp{flex-basis:calc(clamp(165px,18vw,225px) * 1.8)}
.pon-mini--comp2{flex-basis:calc(clamp(165px,18vw,225px) * 1.1726)}/* 29/09: dupla na mesma altura do trio (1,8 × 7/16 × 1,489), ver parts/topo.php */
.pon-mini .pon-card{transition:transform .35s ease}
.pon-mini:hover .pon-card{transform:translateY(-4px)}
.pon-mini img{width:100%;height:auto;display:block;margin:0}
.pon-mini b{display:block;font-family:var(--display);font-size:.92rem;line-height:1.3;margin-top:.7rem}
.pon-mini__preco{display:block;font-family:var(--mono);font-size:.8rem;color:var(--text-secondary);margin-top:.15rem}
.pon-mini__preco .amount{color:var(--ink);font-weight:600}
/* 29/09 (ele: "ainda está pequeno... um que preencha toda a altura vertical do carrossel, parecido com o da Netflix"): a
   seta virou FAIXA da altura dos cards, na calha lateral. O palco sangra --calha para os dois lados (o 1º card segue alinhado
   ao título) e a faixa ocupa essa calha, por cima do card cortado. --calha nunca passa da margem real da página: 4vw, até
   72 px na tela larga (o -1197px desconta a barra de rolagem). Chevron branco que cresce no hover, igual à home. */
.pon-carrossel__palco{--calha:clamp(4vw,calc((100vw - 1197px) / 2 + 4vw),72px);margin:0 calc(-1 * var(--calha))}
.pon-carrossel__trilho{padding-left:var(--calha);padding-right:var(--calha);scroll-padding-left:var(--calha)}
.pon-carrossel__seta{position:absolute;top:1.2rem;bottom:calc(1.1rem + 3px);z-index:3;width:max(var(--calha),40px);padding:0;border:0;background:rgba(241,90,35,.42);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .25s,background .2s}
.pon-carrossel__seta svg{width:clamp(28px,2.6vw,40px);height:clamp(28px,2.6vw,40px);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));transition:transform .15s ease-out}
.pon-carrossel__palco:hover .pon-carrossel__seta{background:rgba(241,90,35,.52)}/* 29/09 (ele): laranja, e depois mais transparente */
.pon-carrossel__palco .pon-carrossel__seta:hover{background:rgba(241,90,35,.74)}
.pon-carrossel__seta:hover svg{transform:scale(1.25)}
.pon-carrossel__seta:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.pon-carrossel__seta--esq{left:0;border-radius:0 12px 12px 0}.pon-carrossel__seta--dir{right:0;border-radius:12px 0 0 12px}
.pon-carrossel__seta[hidden]{display:flex;opacity:0;pointer-events:none}
.pon-carrossel__progresso{position:relative;height:3px;margin:.7rem var(--calha) 0;background:var(--line);border-radius:3px;overflow:hidden}
.pon-carrossel__progresso i{position:absolute;top:0;bottom:0;left:0;background:var(--ink);border-radius:3px;transition:transform .25s,width .25s}
.pon-carrossel__progresso[hidden]{display:none}

/* ---------- o fim da vitrine ---------- */
.pon-vitrine-fim{padding-top:1.6rem;border-top:1px solid var(--line);margin:0 0 1rem}
.pon-vitrine-fim h2{margin-bottom:1rem}
/* 29/09 (ele, pela MoldurOn: "alinhar todos os textos"): as seções de coluna única da vitrine ("Escolha pelo tipo" e o
   fim) abrem CENTRADAS; o banner (duas colunas) e os carrosséis (título e "Ver todos" na mesma linha) seguem como estão. */
.pon-tipos h2,.pon-vitrine-fim h2{text-align:center}
@media (min-width:601px){.pon-vitrine-fim .pon-chips{justify-content:center}}

/* ---------- telas menores ---------- */
@media (max-width:900px){
  .pon-vitrine-topo{grid-template-columns:1fr}
  .pon-garantias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pon-tipos__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pon-vitrine-topo__mosaico{height:280px}
  .pon-busca{max-width:none}
  .pon-tipos__grade{gap:8px}
  .pon-tipo{aspect-ratio:4/3}
  .pon-tipo__rot{left:.8rem;bottom:.7rem}.pon-tipo__rot b{font-size:1.05rem}
  .pon-mini{flex-basis:44vw}.pon-mini--deitado{flex-basis:70vw}.pon-mini--comp{flex-basis:80vw}.pon-mini--comp2{flex-basis:52.1vw}
}

/* ---------- a paginação (29/09, ele: "a parte de passar para a próxima está meio bugada, melhore o layout desses ícones")
   A do WooCommerce vinha em caixinhas coladas, com borda cinza e o "→" solto. Agora: botões redondos separados, a página
   atual em tinta, "Anterior" e "Próxima" escritos (woocommerce_pagination_args em inc/woo.php). ---------- */
html .woocommerce nav.woocommerce-pagination{margin:2.8rem 0 1rem;text-align:center}
html .woocommerce nav.woocommerce-pagination ul.page-numbers{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;border:0;margin:0;padding:0;white-space:normal}
html .woocommerce nav.woocommerce-pagination ul.page-numbers li{border:0;float:none;margin:0;overflow:visible;display:block}
html .woocommerce nav.woocommerce-pagination ul.page-numbers li a,html .woocommerce nav.woocommerce-pagination ul.page-numbers li span{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:44px;height:44px;padding:0 .95rem;border:1.5px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
html .woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover,html .woocommerce nav.woocommerce-pagination ul.page-numbers li a:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--panel);outline:none}
html .woocommerce nav.woocommerce-pagination ul.page-numbers li span.current{background:var(--ink);border-color:var(--ink);color:var(--canvas,#ECEAE3)}
html .woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots{border:0;background:none;min-width:22px;padding:0;color:var(--text-secondary)}
html .woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev,html .woocommerce nav.woocommerce-pagination ul.page-numbers li a.next{padding:0 1.15rem}
@media (max-width:600px){html .woocommerce nav.woocommerce-pagination ul.page-numbers li a,html .woocommerce nav.woocommerce-pagination ul.page-numbers li span{min-width:40px;height:40px;padding:0 .75rem;font-size:.9rem}}