/* ===== Polimento: leveza, tipografia fluida e animações ===== */

/* 1) Tipografia fluida — o texto acompanha a largura da tela em vez de
      quebrar em 2/3 linhas com uma palavra por linha. */
.storeInfo h1{font-size:clamp(26px,7.2vw,58px);line-height:1.05;text-wrap:balance}
.storeInfo p{font-size:clamp(15px,3.6vw,34px);line-height:1.35;text-wrap:balance;margin:0 auto 34px;max-width:22ch}
.searchBox{font-size:clamp(14px,3.4vw,32px);padding:clamp(14px,3vw,26px) clamp(16px,4vw,36px)}
.marquee{font-size:clamp(13px,3vw,26px)}
.marquee span{padding:clamp(10px,2.4vw,24px) 0}
.eyebrow{font-size:clamp(12px,2.6vw,28px);letter-spacing:.18em}
.hero h1{font-size:clamp(28px,7.6vw,68px);line-height:1.02;text-wrap:balance}
.hero p{font-size:clamp(15px,3.6vw,30px);line-height:1.4;text-wrap:pretty;max-width:34ch}
.cta{font-size:clamp(15px,3.2vw,26px);padding:clamp(13px,2.6vw,22px) clamp(20px,4vw,42px)}
.badges .badge{font-size:clamp(12px,2.6vw,23px);padding:clamp(9px,2vw,16px) clamp(12px,2.6vw,24px)}
.filter{font-size:clamp(13px,3vw,24px);padding:clamp(10px,2.2vw,20px) clamp(14px,3.2vw,32px)}
.sectionTitle{font-size:clamp(20px,5vw,36px);text-wrap:balance}
.card h3{font-size:clamp(14px,3.6vw,18px);line-height:1.25;min-height:0;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .price{font-size:clamp(18px,4.6vw,24px);white-space:nowrap}
.card .priceOld{font-size:clamp(12px,3vw,15px);white-space:nowrap}
.buy,.detail{font-size:clamp(12px,3.2vw,15px);white-space:nowrap;padding:12px 6px}
.openBadge{white-space:nowrap;text-wrap:nowrap}
.trust div h3,.review strong{text-wrap:balance}

/* 2) Leveza: nada de repaint caro em telas pequenas */
img{max-width:100%}
.card img,.heroCard img{content-visibility:auto}
.card{contain:paint}
.grid>.card{content-visibility:auto;contain-intrinsic-size:360px}
@media(max-width:900px){
  header{backdrop-filter:none;background:#fffaf4}
  :root{--shadow:0 8px 20px rgba(101,50,43,.12)}
  .floatingCart,.openBadge{box-shadow:0 6px 16px rgba(0,0,0,.14)}
  .storeInfo p{margin-bottom:22px}
}
.marquee span{will-change:transform;backface-visibility:hidden}

/* 3) Animações bonitas (só transform/opacity = 60fps) */
@keyframes riseIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes softPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes glowRing{0%,100%{box-shadow:0 10px 30px rgba(229,43,126,.18)}50%{box-shadow:0 14px 44px rgba(229,43,126,.34)}}

.reveal{opacity:0}
.reveal.in{animation:riseIn .62s cubic-bezier(.22,.68,.32,1) both}
.reveal.in.pop{animation:softPop .5s cubic-bezier(.22,.68,.32,1) both}
.profileLogo{animation:softPop .7s cubic-bezier(.22,.68,.32,1) both,glowRing 4.5s ease-in-out 1s infinite}

.card{transition:transform .28s cubic-bezier(.22,.68,.32,1),box-shadow .28s ease}
.card:hover{transform:translateY(-6px)}
.card img{transition:transform .5s cubic-bezier(.22,.68,.32,1)}
.card:hover img{transform:scale(1.05)}
.buy,.detail,.cta,.cartBtn,.filter,.floatingCart{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.buy:active,.detail:active,.cta:active,.filter:active,.floatingCart:active{transform:scale(.96)}
.cta:hover,.buy:hover{transform:translateY(-2px)}
.filter.active{animation:softPop .28s ease both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1}
}

/* 4) Encaixe fino do celular */
@media(max-width:520px){
  .wrap{padding:16px 14px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card img{height:150px}
  .cardBody{padding:11px}
  .btnRow{gap:6px}
  .filters{gap:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .hero{margin:26px 14px 0;padding:26px 18px;grid-template-columns:1fr}
  .searchBox{margin:0 14px}
  .trust,.reviews{grid-template-columns:1fr}
}
@media(max-width:380px){
  .grid{grid-template-columns:1fr}
  .card img{height:210px}
}

/* Fotos integradas aos cards, sem moldura circular ou recorte aparente */
.card > img{
  display:block!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#fff!important;
}
.cardBody{
  position:relative;
  background:#fff;
  border-top:1px solid #f3e4df;
}
@media(max-width:520px){
  .card > img{aspect-ratio:1/1!important;height:auto!important}
}

/* ===== Tela de pagamento PIX (design referência) ===== */
.payTop{background:#fdf3d4;color:#7a5b12;text-align:center;font-weight:800;font-size:clamp(12px,3.2vw,14px);padding:12px 16px;line-height:1.35}
.payWrap{max-width:520px;margin:0 auto;padding:26px 16px 60px}
.payCard{background:#fff;border:1px solid #f1e6dd;border-radius:22px;padding:clamp(16px,4vw,26px);box-shadow:0 18px 45px rgba(101,50,43,.10)}
.payHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.payHead h1{font-family:Georgia,serif;font-size:clamp(20px,5vw,26px);margin:0}
.payLock{background:#e9f8ef;color:#15804a;border:1px solid #cceedd;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;white-space:nowrap}
.payMethod{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#f4fbf6,#eef9f2);border:1px solid #d8eee1;border-radius:16px;padding:14px}
.payMethod b{display:block;font-size:15px}
.payMethod span{color:#6b7c72;font-size:13px;font-weight:600}
.payPixLogo{background:#18a05e;color:#fff;border-radius:10px;padding:8px 10px;font-weight:900;font-size:14px;line-height:1}
.payAlert{margin-top:14px;background:#fdf6dd;border:1px solid #f0e2ad;border-radius:14px;padding:14px;color:#7a5b12;font-weight:800;font-size:14px;line-height:1.4}
.payQrBox{margin:22px auto 10px;width:max-content;background:#fff;border:1px solid #eee3f3;border-radius:16px;padding:14px;box-shadow:0 10px 24px rgba(80,50,120,.10)}
.payQrBox .pixQr canvas,.payQrBox .pixQr img{width:208px!important;height:208px!important}
.payScan{text-align:center;font-weight:800;font-size:14px;margin:8px 0 14px}
.payCode{max-width:360px;margin:0 auto;background:#fafaff;border:1px solid #e7e7f4;border-radius:10px;padding:11px 14px;font-family:ui-monospace,monospace;font-size:12px;color:#4a4a63;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payBtn{display:block;width:100%;max-width:360px;margin:20px auto 0;border:0;border-radius:14px;padding:18px 16px;background:#128a45;color:#fff;font-weight:900;font-size:clamp(14px,3.6vw,16px);letter-spacing:.02em;cursor:pointer;box-shadow:0 12px 28px rgba(18,138,69,.25);transition:transform .15s ease,box-shadow .15s ease}
.payBtn:active{transform:scale(.985)}
.payGhost{display:block;width:100%;max-width:360px;margin:14px auto 0;background:#fff;border:1px solid #eae0f0;border-radius:14px;padding:14px;font-weight:800;font-size:15px;color:#3a2a33;cursor:pointer}
.paySteps{list-style:none;max-width:360px;margin:18px auto 0;padding:0;display:grid;gap:10px}
.paySteps li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #efe6f0;border-radius:12px;padding:12px 14px;font-weight:700;font-size:13px;line-height:1.35}
.paySteps li span{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#1b1b1f;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.payMeta{max-width:360px;margin:18px auto 0;color:#8b7f86;font-size:13px;font-weight:700;line-height:1.5}
.payQrBox .pixQr img,.payQrBox .pixQr table{display:none!important}
.payQrBox .pixQr canvas{display:block!important;margin:0 auto!important}
.payPixLogo{opacity:1!important;color:#fff!important;text-shadow:none}
/* Combos: fundo branco contínuo, sem borda visível */
.card > img[src*="combo-"]{background:#fff!important;border:0!important;box-shadow:none!important}
.card:has(> img[src*="combo-"]) .cardBody{border-top:0}

/* Android: Combos mantém cover; demais categorias (Café da Manhã p/ baixo) sem zoom (contain) */
@media(max-width:760px){
  .catBlock.gridTwoMobile .grid{gap:10px!important}
  .catBlock.gridTwoMobile .card > img,
  .catBlock[data-cat] .card > img{
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;
    padding:0!important;border-radius:0!important;background:#fff!important}
  /* Combos: imagem preenchendo (cover) */
  .catBlock.gridTwoMobile .card > img,
  .catBlock[data-cat] .card > img{object-fit:cover!important}
  /* Café da Manhã e demais (tudo após Combos): sem zoom, foto inteira */
  .catBlock ~ .catBlock .card > img{object-fit:contain!important;object-position:center!important}
  .catBlock.gridTwoMobile .card{overflow:hidden}
}

/* Rodapé: dados da empresa e selos */
.legalBox{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:18px;text-align:center}
.legalAbout p{margin:0 auto;max-width:60ch;font-size:15px}
.legalSeals{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.seal{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:10px 14px;font-weight:800;font-size:13px;color:#fff;min-width:140px}
.seal small{font-weight:600;font-size:11px;opacity:.85}
.pixSeal b{background:#18a05e;color:#fff;border-radius:6px;padding:2px 8px;font-size:12px;margin-bottom:2px}
.legalInfo p{margin:2px 0;font-size:13px}
.legalNote{opacity:.75;font-size:12px!important;margin-top:8px!important}
@media(max-width:520px){.seal{flex:1 1 42%;min-width:0}}
.footSeals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fseal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,215,223,.35);border-radius:14px;padding:10px 6px;color:#fff}
.fseal i{font-style:normal;font-size:20px}.fseal b{font-size:12.5px}.fseal small{font-size:10.5px;opacity:.8}

/* Fotos dos produtos: sem zoom/corte, imagem inteira e visual limpo no Android */
.card > img{object-fit:contain!important;background:#fff!important}
.card:hover img{transform:none!important}
.card img{transition:none!important}
@media(max-width:760px){
  .catBlock .card > img,
  .catBlock.gridTwoMobile .card > img,
  .catBlock[data-cat] .card > img,
  .catBlock ~ .catBlock .card > img{
    object-fit:contain!important;object-position:center!important;
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;
    background:#fff!important;padding:6px!important}
  .catBlock .grid{gap:12px!important}
  .card{border-radius:18px!important}
  .card h3{font-size:15px!important;min-height:38px}
  .price{font-size:20px!important}
  .detail,.buy{padding:12px 6px!important;font-size:14px!important}
}
/* Topo estilo loja oficial: ícone de conta + sacola */
.shopActions{position:absolute;right:18px;top:20px;display:flex;gap:10px;z-index:3}
.acctIcon,.bagBtn{width:46px;height:46px;border-radius:50%;background:#fff;color:#1b1b1f;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.14);border:0}
.acctIcon{pointer-events:none;cursor:default}
.bagBtn{position:relative;cursor:pointer;transition:transform .18s ease}
.bagBtn:active{transform:scale(.94)}
.bagBtn .cartCount{position:absolute;top:-3px;right:-3px;background:#1b1b1f;color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;place-items:center;border:2px solid #fff}

.reviewAvatar{width:64px;height:64px;object-fit:cover;border-radius:50%;display:block;margin:0 0 14px;border:3px solid var(--white,#fff);box-shadow:0 3px 12px rgba(65,27,35,.16)}