/* ============================================================
   PRODUTO — Página do produto: galeria, setas, miniaturas, compartilhar
   Parte do app.css original. A ORDEM dos <link> no index.html
   reproduz a ordem deste arquivo: não reordene, a cascata depende disso.
   ============================================================ */

/* =========================================================
   PÁGINA DO PRODUTO
   Mobile: bottom-sheet (igual antes). Desktop (>=768px): página inteira.
========================================================= */
#modal-produto.pp-overlay{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6);
  display:flex; align-items:flex-end; justify-content:center; }
#modal-produto.pp-overlay.hidden{ display:none; }
.pp-painel{ background:#fff; width:100%; height:92vh; border-radius:1rem 1rem 0 0;
  overflow:hidden; display:flex; flex-direction:column; }
.pp-conteudo{ display:flex; flex-direction:column; flex:1; min-height:0; }
.pp-galeria{ position:relative; background:#f1f5f9; height:42%; flex-shrink:0; }
#mp-img-wrap{ position:relative; overflow:hidden; height:100%; }
#mp-img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-info{ display:flex; flex-direction:column; flex:1; min-height:0; }
.pp-info-scroll{ flex:1; overflow-y:auto; min-height:0; padding:1rem 1rem .5rem; }
.pp-rodape{ display:flex; align-items:center; gap:.625rem; padding:.75rem 1rem;
  border-top:1px solid #f1f5f9; background:#fff; flex-shrink:0; }
.pp-bread, .pp-thumbs, .pp-seta, .pp-fechar-desk{ display:none; }
.pp-x-mob{ position:absolute; top:.75rem; right:.75rem; background:rgba(255,255,255,.9);
  border-radius:9999px; height:2.25rem; width:2.25rem; box-shadow:0 1px 3px rgba(0,0,0,.1); z-index:10; }

/* botão compartilhar no WhatsApp */
.pp-share{ display:inline-flex; align-items:center; gap:.4rem; background:#25D366; color:#fff;
  font-size:.8rem; font-weight:600; padding:.5rem .8rem; border-radius:.6rem; transition:opacity .15s; }
.pp-share:hover{ opacity:.9; }
.pp-ref{ font-size:.75rem; color:#94a3b8; }

@media (min-width:768px){
  #modal-produto.pp-overlay{ background:#fff; display:block; overflow-y:auto; }
  .pp-painel{ height:auto; min-height:100%; border-radius:0; overflow:visible;
    max-width:1120px; margin:0 auto; padding:0 1.5rem 3rem; }
  .pp-bread{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.25rem 0 1rem; border-bottom:1px solid #eef1f5; margin-bottom:1.75rem; }
  .pp-bread-links{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:#94a3b8; flex-wrap:wrap; }
  .pp-bread-links a{ color:#64748b; cursor:pointer; }
  .pp-bread-links a:hover{ color:var(--cor); }
  .pp-fechar-desk{ display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem;
    font-weight:600; color:#64748b; }
  .pp-fechar-desk:hover{ color:#0f172a; }
  .pp-conteudo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:2.5rem; align-items:start; flex:none; }
  .pp-galeria{ height:auto; background:transparent; }
  #mp-img-wrap{ height:auto; border:1px solid #eef1f5; border-radius:.9rem; background:#f8fafc; }
  #mp-img{ height:520px; object-fit:contain; cursor:zoom-in; }
  .pp-x-mob{ display:none; }
  #mp-dots{ display:none !important; }
  /* setinhas de navegação das fotos (só desktop) */
  .pp-seta{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%;
    transform:translateY(-50%); z-index:10; height:2.6rem; width:2.6rem; border-radius:9999px;
    background:#fff; color:#334155; box-shadow:0 2px 10px rgba(15,23,42,.16); transition:all .15s; }
  .pp-seta:hover{ background:var(--cor); color:#fff; }
  .pp-seta.prev{ left:.75rem; }
  .pp-seta.next{ right:.75rem; }
  .pp-thumbs{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
  .pp-thumb{ height:4.5rem; width:4.5rem; border-radius:.6rem; overflow:hidden;
    border:2px solid #eef1f5; background:#f8fafc; cursor:pointer; transition:border-color .15s; }
  .pp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pp-thumb.sel{ border-color:var(--cor); }
  .pp-info{ display:block; }
  .pp-info-scroll{ overflow:visible; padding:0; flex:none; }
  .pp-rodape{ padding:1.25rem 0 0; margin-top:1.25rem; border-top:1px solid #f1f5f9; }
}



/* selo de desconto na página do produto */
.selo-off{ background:#ef4444; color:#fff; font-size:.7rem; font-weight:700;
  padding:.15rem .45rem; border-radius:.35rem; }

/* escolha da forma de entrega no carrinho */
.entrega-opt{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.7rem .8rem;
  border:1.5px solid #e8ecf1; border-radius:.7rem; margin-bottom:.4rem; font-size:.85rem;
  color:#334155; background:#fff; transition:all .15s; }
.entrega-opt:hover{ border-color:#cbd5e1; }
.entrega-opt.sel{ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 6%, #fff); }
.entrega-radio{ height:1rem; width:1rem; border-radius:9999px; border:2px solid #cbd5e1; flex-shrink:0; }
.entrega-opt.sel .entrega-radio{ border-color:var(--cor); border-width:5px; }
.entrega-valor{ font-weight:700; font-size:.8rem; color:#0f172a; }


/* rodapé clonado na página do produto: largura total, abaixo de tudo */
.mp-rodape-clone{ width:100%; margin-top:3rem; border-top:1px solid #f1f5f9; }


/* Veja também: cards de tamanho fixo (iguais aos do catálogo), rolagem horizontal com setas */
.pp-rel-wrap{ position:relative; }
.pp-rel-lista > *{ flex:0 0 auto; width:150px; scroll-snap-align:start; }
@media (min-width:768px){ .pp-rel-lista > *{ width:180px; } }
.pp-rel-lista{ overflow-x:auto; scroll-behavior:smooth; padding-bottom:.25rem; }
.pp-rel-seta{ position:absolute; top:38%; transform:translateY(-50%); z-index:4;
  height:2.2rem; width:2.2rem; border-radius:9999px; background:#fff;
  border:1px solid #e2e8f0; color:#334155; display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(15,23,42,.12); cursor:pointer; }
.pp-rel-seta:hover{ background:#f8fafc; border-color:#cbd5e1; }
.pp-rel-seta.esq{ left:-.5rem; }
.pp-rel-seta.dir{ right:-.5rem; }
/* setas só no desktop (no mobile rola com o dedo) */
@media (min-width:768px){ .pp-rel-seta{ display:flex; } }