:root{
  --marrom:#6B3A1E; --marrom2:#8a5434;
  --rosa:#F38BA0; --rosa-claro:#FDE3E8;
  --turquesa:#5BC6C4; --turq-claro:#DDF4F3;
  --amarelo:#F6C453;
  --creme:#FFFAF6; --branco:#fff;
  --texto:#4a3328; --suave:#8b746a;
  --borda:#f1dfd8;
  --sombra:0 6px 20px rgba(107,58,30,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--texto);font-family:Quicksand,system-ui,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}

.topo{background:var(--branco);text-align:center;padding:18px 16px 14px;border-bottom:2px dashed var(--rosa-claro)}
.logo{width:min(420px,88vw);height:auto;margin:0 auto;mix-blend-mode:multiply}
.chamada{margin:6px auto 0;max-width:560px;color:var(--suave);font-size:15px}
.chamada b{color:var(--marrom)}

.produtos{position:sticky;top:0;z-index:5;background:rgba(255,250,246,.96);backdrop-filter:blur(6px);
  display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none;border-bottom:1px solid var(--borda)}
.produtos::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:2px solid var(--borda);background:var(--branco);color:var(--marrom);border-radius:999px;
  padding:8px 16px;font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;transition:.15s}
.chip:hover{border-color:var(--rosa)}
.chip.ativo{background:var(--marrom);border-color:var(--marrom);color:#fff}
.chip small{opacity:.7;font-weight:500;margin-left:4px}

.busca-wrap{max-width:1100px;margin:18px auto 4px;padding:0 16px}
.busca{display:flex;align-items:center;gap:10px;background:var(--branco);border:2px solid var(--rosa-claro);border-radius:16px;padding:0 14px;box-shadow:var(--sombra)}
.busca:focus-within{border-color:var(--rosa)}
.busca svg{width:22px;height:22px;fill:none;stroke:var(--rosa);stroke-width:2.4;stroke-linecap:round;flex:0 0 auto}
.busca input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;padding:14px 0;color:var(--texto)}
.busca input::-webkit-search-cancel-button{display:none}
.limpar{border:0;background:var(--rosa-claro);color:var(--marrom);width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1}
.info{margin:10px 2px 0;color:var(--suave);font-size:14px;min-height:21px}

main{max-width:1100px;margin:0 auto;padding:8px 16px 40px}
.secao{margin-top:22px}
.secao-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.secao h2{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--marrom);font-size:24px;margin:0}
.secao h2 span{color:var(--rosa)}
.ver-todos{color:var(--turquesa);font-weight:700;text-decoration:none;white-space:nowrap;font-size:15px}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
@media (min-width:700px){.grade{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}}
.tema{background:var(--branco);border:1px solid var(--borda);border-radius:16px;overflow:hidden;padding:0;text-align:left;
  box-shadow:0 2px 8px rgba(107,58,30,.06);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.tema:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.tema .foto{aspect-ratio:4/3;background:#fff;overflow:hidden;border-bottom:1px solid var(--borda)}
.tema .foto img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.tema .nome{padding:10px 12px 2px;font-weight:700;color:var(--marrom);font-size:15px;line-height:1.3}
.tema .qtd{padding:0 12px 12px;color:var(--suave);font-size:13px}
.tema .qtd b{color:var(--rosa)}

.vazio{text-align:center;padding:40px 16px;color:var(--suave)}
.vazio strong{display:block;font-family:Fraunces,Georgia,serif;color:var(--marrom);font-size:22px;margin-bottom:6px}

.rodape{text-align:center;padding:30px 16px 40px;background:var(--branco);border-top:2px dashed var(--rosa-claro);color:var(--suave)}
.rodape img{margin:0 auto 8px}
.rodape p{margin:4px auto;max-width:520px}
.rodape .peq{font-size:13px}

/* modal */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden]{display:none}
.modal-fundo{position:absolute;inset:0;background:rgba(60,30,15,.55)}
.modal-caixa{position:relative;background:var(--branco);border-radius:20px;width:min(760px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:18px 16px 18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.fechar{position:absolute;top:10px;right:12px;border:0;background:var(--rosa-claro);color:var(--marrom);width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;z-index:2}
.m-produto{margin:0 50px 0 0;color:var(--turquesa);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.modal h2{font-family:Fraunces,Georgia,serif;color:var(--marrom);margin:2px 50px 12px 0;font-size:24px;line-height:1.2}
.m-foto{position:relative;background:var(--creme);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:240px}
.m-foto img{max-height:52dvh;width:auto;margin:0 auto;user-select:none;-webkit-user-drag:none}
.seta{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.92);color:var(--marrom);width:42px;height:42px;border-radius:50%;font-size:28px;line-height:1;box-shadow:var(--sombra)}
.seta.esq{left:8px}.seta.dir{right:8px}
.seta[hidden]{display:none}
.m-legenda{text-align:center;color:var(--suave);font-size:14px;margin:8px 0 4px}
.m-miniaturas{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px}
.m-miniaturas button{flex:0 0 auto;width:64px;height:64px;border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;background:var(--creme)}
.m-miniaturas button.ativo{border-color:var(--rosa)}
.m-miniaturas img{width:100%;height:100%;object-fit:cover}
.m-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn{flex:1 1 200px;border:0;border-radius:12px;padding:13px 16px;font-weight:700;background:var(--rosa);color:#fff;font-size:16px}
.btn.sec{background:var(--turq-claro);color:#2c7b79}
.btn.ok{background:var(--turquesa)}

/* lupa: tocar na foto ou no botão amplia; arrastar/mover o mouse passeia pela arte */
.m-foto img{cursor:zoom-in}
.lupa{position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;gap:6px;border:0;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--marrom);padding:7px 12px 7px 9px;font-weight:700;font-size:14px;box-shadow:var(--sombra)}
.lupa svg{width:20px;height:20px;fill:none;stroke:var(--rosa);stroke-width:2.4;stroke-linecap:round}
.m-foto.zoom{display:block;overflow:auto;height:52dvh;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.m-foto.zoom img{max-height:none;max-width:none;width:280%;cursor:zoom-out}
.m-foto.zoom .seta{display:none}
.m-foto.zoom .lupa{position:sticky;top:8px;left:8px;margin-bottom:-38px}
