.comp { position: relative; width: 460px; max-width: 100%; height: 540px; margin-inline: auto; }

.comp .cena { inset: 0; }

.cartao {
  position: absolute; padding: 18px; border-radius: 22px; background: #fff; color: #1b1814; font-size: var(--t-ui); line-height: 1.4; letter-spacing: 0; text-align: left;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .5), 0 10px 24px -14px rgba(0, 0, 0, .3), 0 0 0 1px rgba(27, 24, 20, .06);
}

.cena .cartao { animation: cartao-entra .6s var(--ease) both; }
.cena .cartao.c2 { animation-delay: .35s; }
.cena .cartao.c3 { animation-delay: .7s; }

@keyframes cartao-entra {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.cima-esq { left: 0; top: 0; }
.meio-dir { right: 0; top: 32%; }
.baixo-esq { left: 6%; bottom: 4%; }
.largo { width: 310px; }
.medio { width: 260px; }

.cartao small { display: block; font-size: var(--t-ui-rotulo); font-weight: 400; color: #7a7268; }
.cartao b { font-weight: 700; }
.cartao-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 700; font-size: var(--t-ui-titulo); }
.cartao-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(150deg, #f1592b, #ef4338); color: #fff; flex: none; }
.cartao-icone .icon { width: 16px; height: 16px; }

.cartao-foto { position: relative; height: 220px; border-radius: 14px; background: radial-gradient(120% 90% at 50% 20%, #f7f1e8, #e9dfcf); display: grid; place-items: center; overflow: hidden; }
.cartao-foto::after { content: ""; position: absolute; bottom: 16px; width: 46%; height: 12px; border-radius: 50%; background: rgba(90, 70, 40, .14); }
.cartao-foto > svg { position: relative; z-index: 1; width: 66%; height: 86%; }
.cartao-foto.baixa { height: 170px; }
.cartao-selo { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: #1b1814; color: #fff; font-size: var(--t-ui-rotulo); font-weight: 600; letter-spacing: .08em; }
.cartao-produto { padding: 12px; }
.cartao-produto .produto-dados { padding: 12px 6px 4px; }
.produto-nome { font-weight: 600; }
.produto-preco { margin-top: 2px; font-size: var(--t-ui-titulo); font-weight: 700; }

.grade-tam { display: flex; gap: 6px; margin-top: 10px; }
.grade-tam span { display: grid; place-items: center; width: 32px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px #e4ddd4; font-size: var(--t-ui-rotulo); font-weight: 600; color: #5c554d; }
.grade-tam .ok { background: #f1592b; box-shadow: none; color: #fff; }

.item-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.item-linha + .item-linha { margin-top: 10px; padding-top: 10px; border-top: 1px solid #efe9e1; }
.item-linha b { font-variant-numeric: tabular-nums; }

.contas { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e4ddd4; display: grid; gap: 4px; }
.contas p { display: flex; justify-content: space-between; color: #5c554d; }
.contas .verde { color: #1f8f4e; font-weight: 600; }
.contas .total { margin-top: 4px; color: #1b1814; font-size: var(--t-ui-titulo); font-weight: 700; }

.meta-frete p { display: grid; font-weight: 600; }
.meta-frete p span { grid-area: 1 / 1; }
.meta-frete .falta { animation: some .3s var(--ease) 1.6s both; }
.meta-frete .liberado { opacity: 0; color: #1f8f4e; animation: aparece .4s var(--ease) 1.7s both; }
.meta-barra { margin-top: 10px; height: 8px; border-radius: 99px; background: #f1ebe2; overflow: hidden; }
.meta-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1592b, #ef4338); transform-origin: left; animation: enche 1.2s var(--ease) .6s both; --de: .62; }

.hero-composicao .hero-cartoes { position: absolute; right: -10px; bottom: -60px; width: 262px; }
.hero-cartoes .cartao { position: relative; }
.hero-cartoes .cartao + .cartao { position: absolute; left: -70px; top: 36px; width: 190px; }

@media (max-width: 900px) {
  .hero-composicao .hero-cartoes { right: 50%; bottom: -120px; transform: translateX(50%) scale(.8); transform-origin: 50% 100%; }
}

@media (max-width: 900px) {
  .comp::before, .hero-lado .comp::before { left: 2%; right: auto; width: 96%; }
}

@media (max-width: 520px) {
  .comp { width: 460px; max-width: none; zoom: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .cena .cartao, .meta-frete span, .meta-barra i { animation-duration: .01ms !important; animation-delay: 0s !important; }
}
.item-linha > b { white-space: nowrap; }
.hero-composicao .hero-resumo { width: 330px; }