/* ===== v2: cartão curto + "Mais detalhes" ===== */
.prod .curto { margin: 0; }
.mais { margin-top: 4px; }
.mais summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--vinho); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.mais summary::-webkit-details-marker { display: none; }
.mais summary::after { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--creme2); font-size: 14px; line-height: 1; }
.mais[open] summary::after { content: "\2212"; }
.det { padding: 8px 0 2px; font-size: 13.5px; color: var(--suave); animation: abre .25s ease; }
.det p { margin: 0 0 6px; }
.det ul { margin: 0 0 8px; padding-left: 18px; }
.det li { margin: 2px 0; }
.det-rot { font-weight: 700; color: var(--texto); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 4px !important; }
.det-medida { font-weight: 600; color: var(--texto); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { background: var(--creme); border: 1px solid var(--linha); border-radius: 99px; padding: 2px 9px; font-size: 12.5px; color: var(--texto); }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.galeria figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria figcaption { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }

/* ===== loja com abas ===== */
.loja-abas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.loja-abas button { flex: none; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #f3e6d8; border-radius: 99px; padding: 9px 16px; font-weight: 700; white-space: nowrap; }
.loja-abas button.on { background: var(--ouro); border-color: var(--ouro); color: var(--choco); }
.loja-obs { color: var(--ouro); font-weight: 600; margin: 0 0 10px; }
.prods.loja .prod { background: rgba(255, 255, 255, .06); box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); }
.prods.loja .prod h4, .prods.loja .preco { color: #fff; }
.prods.loja .prod p, .prods.loja .det { color: #e3d2c2; }
.prods.loja .det-rot, .prods.loja .det-medida { color: #fff; }
.prods.loja .chips span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #fff; }
.prods.loja .mais summary { color: var(--ouro); }
.prods.loja .mais summary::after { background: rgba(255, 255, 255, .12); }
.prods.loja .tags span { background: rgba(255, 255, 255, .1); color: #f3e6d8; }
.turbine { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: rgba(244, 182, 63, .12); border: 1px dashed rgba(244, 182, 63, .5); border-radius: 14px; padding: 12px 14px; }
.turbine b { color: var(--ouro); margin-right: 4px; }
.turbine span { background: rgba(0, 0, 0, .2); border-radius: 99px; padding: 5px 11px; font-size: 14px; }
.turbine i { font-style: normal; color: var(--ouro); font-weight: 700; margin-left: 4px; }

/* ===== monte seu bolo (passo a passo) ===== */
.mb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mb > * { min-width: 0; }
.mb-palco { position: sticky; top: 68px; z-index: 5; background: radial-gradient(80% 70% at 50% 35%, #fff4e0, #ecd2a8); border-radius: var(--raio); padding: 6px 10px 10px; box-shadow: var(--sombra); }
.mb-cena { position: relative; }
.mb-cena svg { width: 100%; max-height: 180px; display: block; margin: 0 auto; }
#mb-bolo { transform-origin: 200px 300px; }
#mb-bolo.pop { animation: pop .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pop { from { transform: scale(.94); opacity: .4; } }
.mb-nome { position: absolute; left: 0; top: 4px; font: 700 12px/1.2 var(--sans); background: var(--choco); color: #fff; padding: 5px 10px; border-radius: 99px; max-width: 62%; }
.mb-foto { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.mb-foto[hidden] { display: none; }
.mb-foto img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.mb-foto span { font-size: 10.5px; font-weight: 700; color: var(--vinho); }
.mb-info { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 6px; text-align: center; }
.mb-info small { display: block; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.mb-info b { font-size: 14px; }
.mb-info .preco b { font: 800 22px/1.1 var(--serif); color: var(--vinho); }
.mb-pessoas { display: none; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 8px; }
.mb-pessoas i { width: 12px; height: 16px; background: radial-gradient(circle at 50% 22%, var(--vinho) 0 3.5px, transparent 4px), radial-gradient(ellipse at 50% 100%, var(--vinho) 0 6px, transparent 6.5px); animation: entra .3s both; }
.mb-pessoas b { font-size: 13px; color: var(--vinho); margin-left: 4px; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } }
.mb-passos { background: #fff; border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); }
.mb-trilha { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mb-trilha button { width: 100%; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--suave); padding: 0; }
.mb-trilha button b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--creme2); color: var(--suave); font-size: 13px; }
.mb-trilha button.on b { background: var(--vinho); color: #fff; box-shadow: 0 0 0 4px #6e142322; }
.mb-trilha button.on { color: var(--vinho); }
.mb-trilha button.feito b { background: var(--laranja); color: #fff; }
.mb-passo { min-height: 220px; animation: abre .25s ease; }
.mb-passo h3 { font-size: 24px; margin-bottom: 12px; }
.mb-passo h3 small { font: 500 13px var(--sans); color: var(--suave); margin-left: 6px; }
.mb-tipos { display: grid; gap: 10px; }
.mb-tipos button { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; border: 2px solid var(--linha); background: #fff; border-radius: 16px; padding: 8px; }
.mb-tipos img { grid-row: span 2; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.mb-tipos b { font: 800 19px var(--serif); align-self: end; }
.mb-tipos small { color: var(--suave); align-self: start; }
.mb-tipos button.on { border-color: var(--vinho); background: #fbeff1; }
.mb-filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.mb-filtros button { flex: none; border: 1.5px solid var(--linha); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--suave); }
.mb-filtros button.on { background: var(--choco); border-color: var(--choco); color: #fff; }
.mb-sabores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 300px; overflow: auto; padding: 2px; }
.mb-sabores button { position: relative; text-align: left; border: 1.5px solid var(--linha); background: #fff; border-radius: 12px; padding: 8px 10px 8px 34px; display: flex; flex-direction: column; line-height: 1.2; }
.mb-sabores button i { position: absolute; left: 9px; top: 10px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0002; }
.mb-sabores button span { font-weight: 600; font-size: 13.5px; }
.mb-sabores button small { color: var(--suave); font-size: 11.5px; margin-top: 2px; }
.mb-sabores button.on { border-color: var(--vinho); background: #fbeff1; }
.mb-passo .mais { margin-top: 10px; background: var(--creme); border-radius: 12px; padding: 8px 12px; }
.mb-rapido { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mb-rapido button { border: 1.5px solid var(--linha); background: #fff; border-radius: 99px; padding: 8px 12px; font-weight: 700; font-size: 14px; }
.mb-regua { width: 100%; accent-color: var(--vinho); height: 34px; }
.mb-marcas { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); padding: 0 4px; }
.mb-marcas span.on { color: var(--vinho); font-weight: 800; transform: scale(1.2); }
.mb-extras { display: grid; gap: 6px; }
.mb-extras label { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--linha); border-radius: 12px; padding: 9px 12px; font-size: 14px; cursor: pointer; }
.mb-extras label.on { border-color: var(--vinho); background: #fbeff1; }
.mb-extras input { width: 18px; height: 18px; accent-color: var(--vinho); }
.mb-extras small { margin-left: auto; color: var(--suave); white-space: nowrap; }
.mb-extras .qtd button { width: 28px; height: 28px; }
.mb-resumo { margin: 14px 0 12px; background: var(--creme); border-radius: 14px; padding: 12px 14px; }
.mb-resumo div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; }
.mb-resumo .soma { margin: 6px 0 0; }
.mb-nav { display: flex; justify-content: space-between; margin-top: 14px; }

/* ===== bandeja de docinhos ===== */
.bandeja { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; background: #fff7ec; border-radius: 14px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .12); max-height: 210px; overflow: hidden; }
.bandeja i { width: var(--r); height: var(--r); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--p) 0 12%, transparent 13%), radial-gradient(circle at 65% 60%, var(--p) 0 10%, transparent 11%), var(--f); box-shadow: 0 0 0 2px #e64b4b inset, 0 2px 3px rgba(0, 0, 0, .25); animation: cai .35s both; }
.bandeja i.x { background: radial-gradient(circle at 50% 50%, var(--e) 0 22%, transparent 23%), var(--f); }
@keyframes cai { from { opacity: 0; transform: translateY(-10px) scale(.6); } }
.bandeja-legenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: #f3c9d0; margin: 8px 0 0; }
.bandeja-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.bandeja-legenda i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px #fff6; }
.sabores-doce button { display: inline-flex; align-items: center; gap: 6px; }
.sabores-doce button i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px #0002; }
.festa-escolha .mais { margin-top: 12px; }

@media (min-width: 640px) {
  .mb-tipos { grid-template-columns: repeat(3, 1fr); }
  .mb-tipos button { grid-template-columns: 1fr; text-align: center; }
  .mb-tipos img { width: 100%; height: 110px; grid-row: auto; }
  .galeria { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 960px) {
  .mb { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 22px; }
  .mb-palco { top: 90px; padding: 14px 18px 18px; }
  .mb-cena svg { max-height: 360px; }
  .mb-nome { font-size: 14px; }
  .mb-foto img { width: 70px; height: 70px; }
  .mb-info b { font-size: 16px; }
  .mb-info .preco b { font-size: 30px; }
  .mb-pessoas { display: flex; }
  .mb-passos { padding: 22px; }
  .mb-sabores { max-height: 380px; }
}

/* o "monte seu bolo" v2 ocupa a largura toda (a regra da v1 dividia em 2 colunas) */
.bolo-app { display: block !important; }