/* D'Lu Empório e VKS Condimentos — estilos do site.
   Portado fielmente do design original (feira de temperos do Brás). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..100,500..900&family=Figtree:wght@400;500;600;700;800&display=swap');

/* cores por loja: a D’Lu usa os valores de :root; a VKS troca para os verdes da logo */
:root{--c-ponto1:#8f2414;--c-ponto2:#d4553a;--c-escuro:#1d2240;--c-escuro2:#23336b;--c-escuro3:#2c3d78;--c-linha-esc:#4a5a94;--c-texto-esc:#c9d0e6;--c-mudo-esc:#8f98bd;--c-linha-esc2:#333a5c;--c-acento:#b8321e;--c-acento-esc:#9b2a1c;--c-destaque:#f2b31b;--c-destaque-claro:#ffc93d;--c-fundo:#f8f3ea;--c-borda:#ece5d6;--c-borda2:#e2d9c6;--c-fundo2:#fdf6e8;--c-acento-bg:#fde6e2;--c-acento-bg2:#fde3da;--c-mudo:#5a5f78;--c-fundo3:#fffaf0;--c-borda3:#efe7d9;--c-borda4:#e9e1d2;--c-destaque-bg:#f0e2c0;--c-destaque-bg2:#efe3c4}
:root[data-loja="vks"]{--c-ponto1:#005a1a;--c-ponto2:#5cb83a;--c-escuro:#0b4420;--c-escuro2:#0e6a2b;--c-escuro3:#127a33;--c-linha-esc:#3f8a55;--c-texto-esc:#d6eedb;--c-mudo-esc:#a9d3b3;--c-linha-esc2:#2a6b3e;--c-acento:#00802a;--c-acento-esc:#00661f;--c-destaque:#7cc61a;--c-destaque-claro:#98d84a;--c-fundo:#f1f7ec;--c-borda:#dce8d3;--c-borda2:#cfe0c3;--c-fundo2:#eef7e6;--c-acento-bg:#e2f3e3;--c-acento-bg2:#d9efda;--c-mudo:#4d6355;--c-fundo3:#f6fbf2;--c-borda3:#dbe8d1;--c-borda4:#d5e3cb;--c-destaque-bg:#e3f2c9;--c-destaque-bg2:#dcefc0}

:root{
  --azul:var(--c-escuro); --azul-marca:var(--c-escuro2); --azul2:var(--c-escuro3);
  --amarelo:var(--c-destaque); --vermelho:var(--c-acento); --verde:#1b7a4b; --verde-h:#155f3b;
  --creme:var(--c-fundo); --linha:var(--c-borda); --linha2:var(--c-borda2); --sec:var(--c-mudo);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--azul);font-family:'Figtree','Segoe UI',system-ui,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--azul)}
img{max-width:100%}
button{font-family:inherit}

.wrap{max-width:1240px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}
.disp{font-family:'Archivo','Arial Narrow',sans-serif;font-stretch:72%;letter-spacing:-0.015em}
.caps{text-transform:uppercase;letter-spacing:-0.01em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:currentColor}
.head-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center}
.catnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.bowls{position:relative;width:100%;max-width:540px;justify-self:end}
.bowls::before{content:'';display:block;padding-top:100%}
.bowl{position:absolute;border-radius:50%;overflow:hidden;border:8px solid var(--c-escuro3);box-shadow:0 30px 50px -20px rgba(0,0,0,.6);isolation:isolate}
.bowl-in{border-radius:50%;overflow:hidden;clip-path:circle(50%)}
.bowl img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;transition:transform .6s ease}

.fita{overflow:hidden;padding-block:22px;margin-top:-26px;position:relative;z-index:3}
.fita-faixa{transform:rotate(-1.6deg);background:var(--amarelo);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.fita-trilho{display:flex;width:max-content;animation:corre 60s linear infinite}
@keyframes corre{to{transform:translateX(-50%)}}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.circles{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px}
.circles > *{flex:0 0 calc((100% - 100px) / 6);min-width:0}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:14px}
.bento > *:first-child{grid-column:span 2;grid-row:span 2}
.bento-item img{transition:transform .5s ease}

.atacado{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pedir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center}
.lojas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
.card{transition:box-shadow .2s,transform .2s}

.card .midia-img{transition:transform .5s ease}

.btn-wa{transition:background .15s}

.btn-y{transition:background .15s,transform .15s}



.circ .dot{transition:transform .2s,box-shadow .2s}

.search:focus{outline:3px solid var(--amarelo);outline-offset:1px}
button:focus-visible,a:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}


/* preços */
.preco{font-family:'Archivo','Arial Narrow',sans-serif;font-stretch:75%;font-weight:900;color:var(--azul);line-height:1}
.preco-kg{font-size:12px;font-weight:800;color:var(--sec);letter-spacing:.02em;text-transform:none}
.preco-sel{font-size:22px}
.preco-consulta{font-size:13px;font-weight:800;color:var(--sec);text-transform:uppercase;letter-spacing:.06em}

/* ===== animações ===== */
@keyframes sobeA{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes popA{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes popB{from{opacity:0;transform:scale(.6) rotate(14deg)}to{opacity:1;transform:none}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes balanco{0%,100%{transform:rotate(12deg)}50%{transform:rotate(2deg) scale(1.05)}}
@keyframes ping{from{transform:scale(1);opacity:.45}to{transform:scale(1.8);opacity:0}}
@keyframes pendulo{0%{transform:rotate(-2deg)}30%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}100%{transform:rotate(-2deg)}}
@keyframes brilho{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(260%) skewX(-20deg)}}
.entra{animation:sobeA .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}
.bowl{animation:flutua 6s ease-in-out infinite}
.bowl-in{width:100%;height:100%;animation:popA .8s cubic-bezier(.2,.8,.2,1.2) both}
.gira{animation:gira 90s linear infinite;transform-origin:50% 50%}
.selo-250{animation:balanco 4.5s ease-in-out infinite}
.pulso{position:relative}
.pulso::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--verde);animation:ping 2.4s ease-out infinite;z-index:-1}
.etiqueta{transform:rotate(-2deg);transform-origin:50% 0}

.btn-y{position:relative;overflow:hidden}
.btn-y::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-20deg)}

.navlink,.catnav button{transition:background .2s,color .2s}
.cel{display:grid}
@supports (animation-timeline: view()){
  .revela{animation:revela linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes revela{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
  .revela-esq{animation:revelaEsq linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes revelaEsq{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
  .bolha{animation:bolha linear both;animation-timeline:view();transform-origin:100% 100%}
  .bolha.b1{animation-range:entry 30% cover 30%}
  .bolha.b2{animation-range:cover 25% cover 38%;transform-origin:0 100%}
  .bolha.b3{animation-range:cover 33% cover 45%}
  @keyframes bolha{from{opacity:0;transform:translateY(18px) scale(.85)}to{opacity:1;transform:none}}
}
@supports (animation-timeline: scroll()){
  .topo{animation:topoSombra linear both;animation-timeline:scroll();animation-range:0 160px}
  @keyframes topoSombra{to{box-shadow:0 12px 30px -14px rgba(20,24,48,.45)}}
  .topo-barra{max-height:60px;overflow:hidden;animation:recolhe linear both;animation-timeline:scroll();animation-range:0 120px}
  @keyframes recolhe{to{max-height:0;opacity:0}}
  .logo-img{animation:logoMenor linear both;animation-timeline:scroll();animation-range:0 160px}
  @keyframes logoMenor{to{height:40px}}
  .head-pad{animation:menosPad linear both;animation-timeline:scroll();animation-range:0 160px}
  @keyframes menosPad{to{padding-top:6px;padding-bottom:6px}}
}
@keyframes puloA{0%{transform:scale(1)}35%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes gaveta{from{transform:translateX(100%)}to{transform:none}}
@keyframes fundoEntra{from{opacity:0}to{opacity:1}}
@keyframes avisoSobe{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes piscaVerde{0%,100%{box-shadow:0 0 0 0 rgba(76,194,127,.6)}50%{box-shadow:0 0 0 5px rgba(76,194,127,0)}}
.pulo{animation:puloA .45s ease}
.gaveta{animation:gaveta .35s cubic-bezier(.2,.8,.2,1) both}
.gaveta-fundo{animation:fundoEntra .25s ease both}
.aviso{animation:avisoSobe .3s ease both}
.ponto-vivo{animation:piscaVerde 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .pulo,.gaveta,.gaveta-fundo,.aviso,.ponto-vivo,.entra,.bowl,.bowl-in,.gira,.selo-250,.pulso::before,.revela,.revela-esq,.bolha,.etiqueta:hover,.btn-y:hover::after{animation:none!important}
  .fita-trilho{animation:none}.card,.circ .dot,.bowl img,.bento-item img,.card .midia-img{transition:none}.card:hover{transform:none}
}
@media (max-width:980px){
  .circles > *{flex-basis:calc((100% - 60px) / 4)}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
}
@media (max-width:760px){
  .head-row{grid-template-columns:1fr auto}
  .head-search{grid-column:1 / -1;order:3}
  .hero,.atacado,.lojas,.pedir{grid-template-columns:1fr}
  .bowls{justify-self:center;max-width:380px}
  .hide-sm{display:none!important}
  .topo-barra{max-height:120px}
  .topo{position:static!important}
  .circles > *{flex-basis:calc((100% - 40px) / 3)}
}
@media (max-width:480px){
  .foot,.trust{grid-template-columns:1fr}
  .tags{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
/* atacado e desconto */
.tag-atac{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--c-acento);padding:2px 8px;border-radius:999px;vertical-align:middle}
.linha-atac{font-size:13px;color:var(--c-mudo)}.linha-atac b{color:var(--c-acento)}
.dica-atac{display:block;font-size:12px;font-weight:700;color:var(--c-acento);margin-top:2px}
.faixa-desc{margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#e3f5ea;color:#146b3f;font-weight:800;font-size:14px;padding:9px 16px;border-radius:999px}
.peso-liq{font-size:12px;color:var(--c-mudo);line-height:1.35}
.foto-tam{animation:trocaPote .25s ease both}
@keyframes trocaPote{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.foto-tam{animation:none}}

/* escolha de Tipo (produtos agrupados) */
.chip-tipo.chip-falta{opacity:.6;text-decoration:line-through;text-decoration-thickness:1.5px}
.chip-tipo.chip-falta small{text-decoration:none;font-weight:700}

/* hover só onde existe mouse: no celular (iPhone) um :hover que muda a aparência faz o 1º toque só "passar o mouse" e o 2º clicar */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--vermelho)}
  .bowl:hover img{transform:scale(1.08) rotate(3deg)}
  .bento-item:hover img{transform:scale(1.06)}
  .card:hover{box-shadow:0 18px 34px -18px rgba(29,34,64,.5);transform:translateY(-4px)}
  .card:hover .midia-img{transform:scale(1.07)}
  .btn-wa:hover{background:var(--verde-h);color:#fff}
  .btn-y:hover{background:var(--c-destaque-claro);color:var(--azul);transform:translateY(-1px)}
  .btn-ghost:hover{background:#fff;color:var(--azul)}
  .navlink:hover{background:var(--azul2);color:#fff}
  .circ:hover .dot{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 26px -14px rgba(29,34,64,.55)}
  .qtd-btn:hover{background:var(--creme)}
  .etiqueta:hover{animation:pendulo 1s ease-in-out}
  .btn-y:hover::after{animation:brilho .7s ease}
}
/* toque: sem espera de duplo toque para zoom e sem flash cinza */
button,a,label,[data-act],summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
section[id]{scroll-margin-top:90px}
/* botão voltar ao topo (canto esquerdo; o WhatsApp fica no direito) */
.topo-btn{position:fixed;left:20px;bottom:24px;z-index:60;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;background:var(--c-escuro);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.topo-btn.ver{opacity:1;transform:none;pointer-events:auto}
.topo-btn:focus-visible{outline:3px solid var(--c-destaque);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.topo-btn:hover{background:var(--c-escuro2)}}
@media (max-width:480px){.topo-btn{left:14px;bottom:22px;width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.topo-btn{transition:none}}

/* ===== redesenho 2026-10: celular compacto, folha do produto, menos caixa-alta ===== */
.hero{padding-top:56px;padding-bottom:92px;position:relative}
.hero-h1{margin:0;font-weight:900;font-size:clamp(46px,6.6vw,88px);line-height:.9;text-wrap:balance}
.hero-p{margin:0;font-size:19px;color:var(--c-texto-esc);max-width:42ch}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}
.hero-nav{display:flex;align-items:center;gap:10px;padding-top:14px}
.nome-prod{margin:0;font-family:'Archivo','Arial Narrow',sans-serif;font-stretch:82%;font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.005em}
/* barra das lojas */
.barra-lojas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding-top:6px;padding-bottom:6px}
.barra-esq{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.loja-pill{font:inherit;font-weight:800;font-size:13px;padding:5px 13px;min-height:32px;border-radius:999px;border:1px solid;cursor:pointer;white-space:nowrap}
.barra-status{font-weight:700;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.so-sm{display:none}
@media (max-width:1180px){.st-hor{display:none!important}}
@media (max-width:960px){.lbl-lojas{display:none!important}}
/* paginação e nota das lojas */
.ver-mais{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px}
.btn-mais{font:inherit;font-weight:800;font-size:16px;padding:13px 28px;min-height:52px;border-radius:999px;border:2px solid var(--c-escuro);background:#fff;color:var(--c-escuro);cursor:pointer}
.btn-mais span{font-weight:600;color:var(--c-mudo)}
.ver-mais-info{font-size:13px;color:var(--c-mudo)}
.nota-lojas{margin:0;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--c-borda);color:var(--c-mudo);font-size:14px;line-height:1.5}
.nota-lojas b{color:var(--c-escuro)}
.nota-lojas button{font:inherit;font-weight:800;color:var(--c-acento);background:none;border:0;padding:10px 2px;margin:-10px 0;cursor:pointer;line-height:1.5}
@media (hover:hover) and (pointer:fine){.btn-mais:hover{background:var(--c-escuro);color:#fff}.btn-mais:hover span{color:var(--c-texto-esc)}}
/* cartão compacto (celular) */
.card-mini{height:100%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--c-borda)}
.mini-abrir{font:inherit;color:inherit;border:0;margin:0;padding:0;background:none;width:100%;height:100%;text-align:left;cursor:pointer;display:flex;flex-direction:column}
.mini-midia{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:5/4;overflow:hidden}
.mini-mais{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;background:var(--c-escuro);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.mini-txt{display:flex;flex-direction:column;gap:3px;padding:10px 12px 13px;flex:1}
.mini-marca{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-acento)}
.mini-nome{font-weight:800;font-size:15px;line-height:1.22;color:var(--c-escuro);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-preco{margin-top:auto;padding-top:4px;font-weight:800;font-size:15px;color:var(--c-escuro);font-variant-numeric:tabular-nums}
.mini-preco small{font-weight:600;font-size:12px;color:var(--c-mudo)}
.mini-consulta{font-size:13px;color:var(--c-mudo);font-weight:700}
.mini-falta{font-size:13px;color:var(--c-acento-esc)}
.mini-abrir:focus-visible{outline:3px solid var(--c-destaque);outline-offset:-3px;border-radius:16px}
/* folha do produto */
html.folha-aberta,html.folha-aberta body{overflow:hidden}
.folha-camada{position:fixed;inset:0;z-index:90}
.folha-fundo{position:absolute;inset:0;border:0;padding:0;background:rgba(15,18,38,.55);cursor:pointer;animation:fundoEntra .25s ease both}
.folha{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;max-height:92vh;max-height:92dvh;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:0 -20px 40px -20px rgba(0,0,0,.5);animation:folhaSobe .32s cubic-bezier(.2,.8,.2,1) both;transition:transform .2s ease;padding-bottom:env(safe-area-inset-bottom)}
@keyframes folhaSobe{from{transform:translateY(100%)}to{transform:none}}
.folha-pega{flex:none;height:24px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
.folha-pega span{width:44px;height:5px;border-radius:9px;background:var(--c-borda2)}
.folha-x{position:absolute;top:32px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(0,0,0,.2);color:var(--c-escuro);display:flex;align-items:center;justify-content:center;cursor:pointer}
.folha-rolar{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.card-folha{box-shadow:none!important;border-radius:0!important;transform:none!important;height:auto!important}
.card-folha > div:first-child{max-height:44vh}
.card-folha [data-act=opt],.card-folha .chip-tipo{min-height:44px!important;padding:8px 15px!important;font-size:14px!important}
.card-folha [data-act=add]{min-height:52px!important;font-size:16px!important}
.card-folha .btn-wa{width:52px!important;height:52px!important}
@media (prefers-reduced-motion:reduce){.folha,.folha-fundo{animation:none}}
.topo-btn.com-fab{bottom:96px}
@media (max-width:760px){
  .so-sm{display:inline}
  .barra-lojas{flex-wrap:nowrap;gap:8px;padding-top:7px;padding-bottom:7px}
  .barra-esq{flex-wrap:nowrap;gap:5px}
  .loja-pill{font-size:12.5px;padding:6px 10px;min-height:40px}
  .navlink{min-height:44px!important}
  .barra-status{font-size:12px;gap:6px;margin-left:auto}
  .topo-barra{max-height:none!important;animation:none!important;opacity:1!important}
  .hero{padding-top:22px;padding-bottom:44px;gap:20px}
  .hero > div:first-child{gap:14px!important}
  .hero-h1{font-size:clamp(34px,10.6vw,44px);line-height:.95}
  .hero-p{font-size:16px;line-height:1.45}
  .hero-btns{flex-wrap:nowrap;gap:8px;padding-top:2px}
  .hero-btns a{padding:12px 16px!important;font-size:14px!important;min-height:48px!important;flex:1 1 auto;justify-content:center;white-space:nowrap}
  .hero-nav{padding-top:0}
  .bowls{max-width:250px}
  .selo-250{width:84px!important;height:84px!important}
  .selo-250 .disp{font-size:22px!important}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .carrossel{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px) / 2.2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin:0 calc(-1 * clamp(16px,3vw,32px));padding:2px clamp(16px,3vw,32px) 10px;scroll-padding:0 clamp(16px,3vw,32px)}
  .carrossel::-webkit-scrollbar{display:none}
  .carrossel > *{scroll-snap-align:start}
  .sec-dest{padding-top:30px!important;padding-bottom:36px!important}
  .sec-dest .wrap{gap:18px!important}
  .nome-prod{font-size:21px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .trust > div{flex-direction:column;align-items:flex-start!important;gap:10px!important;padding:14px!important}
  .trust > div > span:first-child{width:40px!important;height:40px!important}
}
@media (max-width:360px){.loja-pill{font-size:11.5px;padding:6px 8px}.barra-status{font-size:11px}}
.aval-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.aval-grade{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;gap:12px;margin:0 -16px;padding:0 16px 6px}.aval-grade .aval{flex:0 0 82%;scroll-snap-align:start}}
/* círculos das categorias: sempre redondos (sem aspect-ratio, que falha no Safari do iPhone) */
.circ{min-width:0;width:100%}
.circ .dot{position:relative;display:block;width:100%;max-width:150px;border-radius:50%;overflow:hidden;flex-shrink:0;box-sizing:border-box}
.circ .dot::before{content:"";display:block;padding-top:100%}
.circ .dot-in{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.circ .dot-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* troca de tamanho/tipo: a foto entra com um leve zoom */
.midia-img.troca{animation:troca-foto .35s cubic-bezier(.2,.8,.3,1.2)}
@keyframes troca-foto{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.midia-img.troca{animation:none}}

/* granel: preço do kg em destaque e caixinha de quantidade livre */
.preco .por-kg{font-size:.55em;font-weight:800;color:var(--c-mudo)}
.preco-qtd{font-size:13px;color:var(--c-mudo)}
.preco-qtd b{color:var(--c-escuro)}
.qtd-livre{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.qtd-livre label{font-size:12px;font-weight:800;color:var(--c-mudo)}
.qtd-linha{display:flex;gap:6px}
.qtd-linha input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 12px;min-height:40px;border-radius:999px;border:1.5px solid var(--c-borda2);background:#fff;color:var(--c-escuro)}
.qtd-linha input:focus{outline:2px solid var(--c-destaque);outline-offset:1px;border-color:var(--c-escuro)}
.qtd-linha button{font:inherit;font-size:13px;font-weight:800;padding:0 16px;min-height:40px;border-radius:999px;border:1.5px solid var(--c-escuro);background:#fff;color:var(--c-escuro);cursor:pointer}
.qtd-dica{font-size:12px;color:var(--c-mudo)}
.qtd-dica.qtd-erro{color:var(--c-acento-esc);font-weight:700}