/* Destaques em órbita (inspirado no "dish orbit"): prato à esquerda que troca numa órbita larga, título em duas
   espessuras, cartão de detalhes, faixa de cor afinada nas pontas e miniaturas. Sem JS: coluna com o primeiro prato.
   Com orbita.js e largura >= 700px: .orbita--tela, uma tela de 960x520 escalada (--s) com as posições do original. */
/* sem recorte: a faixa e o prato girando passam da caixa; quem corta é a vitrine, na borda da tela */
.orbita { position: relative; outline: none; }
.vitrine:has(.orbita) { overflow-x: clip; }
.orbita:focus-visible { outline: 3px solid var(--anel); outline-offset: -3px; border-radius: var(--raio-cartao); }
.orbita button { font: inherit; }
.orbita__tela { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 0 .5rem; }

/* faixa de cor: traço grosso ao longo do círculo da órbita, afinado nas pontas (o JS desenha o caminho) */
.orbita__faixa { position: absolute; left: -60%; top: -2.5rem; width: 220%; height: auto; overflow: visible; pointer-events: none; }
.orbita__faixa path { opacity: .34; transition: fill 1.1s ease; }

/* pontos verticais */
.orbita__pontos { position: absolute; left: .25rem; top: 7rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.orbita__ponto { display: grid; place-items: center; width: 24px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; transition: height .45s var(--suave); }
.orbita__ponto i { display: block; width: 3px; height: 3px; border-radius: 3px; background: var(--texto); opacity: .45; transition: height .45s var(--suave), opacity .3s; }
.orbita__ponto[aria-current] { height: 34px; }
.orbita__ponto[aria-current] i { height: 22px; opacity: .9; }

/* prato: gira em volta de um pivô bem acima (o mesmo centro do círculo da faixa) */
.orbita__palco { position: relative; z-index: 1; width: min(56vw, 15rem); aspect-ratio: 1; touch-action: pan-y; }
.orbita__prato { position: absolute; inset: 0; transform-origin: 69% -217%; will-change: transform; }
.orbita__prato[hidden] { display: block; visibility: hidden; }
.orbita__prato img, .orbita__vazio { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 16px 22px rgb(0 0 0 / .35)) drop-shadow(0 3px 5px rgb(0 0 0 / .2)); }
.orbita__vazio { display: grid; place-items: center; background: color-mix(in srgb, var(--texto) 12%, var(--superficie)); color: var(--texto); font: 400 4rem/1 var(--fonte-titulo); }

/* informação do prato: preço grande e descrição no lugar do nome (que não aparece), depois o botão */
.orbita__cabecas { position: relative; z-index: 1; display: grid; width: 100%; padding: 0 1.25rem; }
.orbita__cabeca { grid-area: 1 / 1; display: grid; justify-items: center; align-content: start; gap: .6rem; text-align: center; }
.orbita__cabeca[hidden] { display: grid; visibility: hidden; }
.orbita__preco { margin: 0; font: 700 clamp(3rem, 15vw, 4rem)/1 var(--fonte); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.orbita__preco small { margin-right: .15em; font-size: .4em; letter-spacing: 0; }
/* descrição dentro do cartão de vidro; o preço fica fora, logo acima */
.orbita__cartao { width: 100%; max-width: 26rem; padding: 1rem 1.15rem; border-radius: 20px; text-align: left;
  background: color-mix(in srgb, var(--superficie) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--texto) 8%, transparent), 0 18px 40px -24px rgb(0 0 0 / .5); }
.orbita__desc { display: grid; gap: .35rem; margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.45; }
.orbita__pote { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.orbita__acoes { margin-top: .4rem; }
.orbita__acao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 1.6rem; border: 0; border-radius: var(--raio-pilula); background: var(--cor-forte); color: var(--sobre-cor); font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform .3s var(--suave); }
.orbita__acao:disabled { opacity: .5; cursor: not-allowed; }

/* miniaturas: só na tela larga */
.orbita__faixa-minis { display: none; }

/* ---------- tela larga: 960x520 escalada, posições do original ---------- */
.orbita--tela { height: calc(520px * var(--s, 1)); }
.orbita--tela .orbita__tela { position: absolute; left: 50%; top: 0; display: block; width: 960px; height: 520px; padding: 0; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 0; }
.orbita--tela .orbita__faixa { left: 0; top: 0; width: 960px; height: 520px; }
.orbita--tela .orbita__pontos { left: 76px; top: 172px; }
.orbita--tela .orbita__palco { position: absolute; left: 130px; top: 82px; width: 245px; height: 245px; }
.orbita--tela .orbita__cabecas { position: absolute; left: 410px; top: 78px; width: 500px; padding: 0; }
.orbita--tela .orbita__cabeca { justify-items: start; gap: 14px; text-align: left; }
.orbita--tela .orbita__preco { font-size: 84px; }
.orbita--tela .orbita__cartao { max-width: 470px; padding: 16px 20px; }
.orbita--tela .orbita__desc { font-size: 16px; }
.orbita--tela .orbita__pote { font-size: 24px; }
.orbita--tela .orbita__acoes { margin-top: 10px; }
.orbita--tela .orbita__acao { min-height: 46px; font-size: 15px; }
.orbita--tela .orbita__faixa-minis { position: absolute; left: 130px; top: 362px; display: flex; align-items: center; width: 550px; height: 122px; }
.orbita__seta { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--texto); cursor: pointer; }
.orbita__seta svg { width: 12px; height: 16px; fill: currentColor; }
.orbita__janela { position: relative; flex: none; width: 472px; height: 122px; margin: 0 2px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.orbita__trilho { position: absolute; left: 0; top: 0; display: flex; margin: 0; padding: 0; list-style: none; transition: transform .6s var(--suave); }
.orbita__trilho li { display: flex; justify-content: center; width: 118px; height: 122px; padding-top: 3px; }
.orbita__mini { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 80px; height: 116px; padding: 9px 0 0; border: 0; border-radius: 14px; background: none; color: color-mix(in srgb, var(--texto) 78%, transparent); cursor: pointer; transition: background-color .45s; }
.orbita__mini[aria-current] { background: color-mix(in srgb, var(--superficie) 70%, transparent); box-shadow: 0 10px 24px -16px rgb(0 0 0 / .5); }
.orbita__mini img, .orbita__mini .orbita__vazio { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; font-size: 1.5rem; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); transition: transform .45s; }
.orbita__mini[aria-current] img { transform: scale(1.06); }
.orbita__mini span:last-child { max-width: 78px; font-size: 10px; font-weight: 500; line-height: 1.25; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .orbita__acao:hover, .orbita__acao:focus-visible { transform: translateY(-2px); }
  .orbita__seta:hover, .orbita__seta:focus-visible { background: color-mix(in srgb, var(--texto) 10%, transparent); }
  .orbita__mini:hover, .orbita__mini:focus-visible { color: var(--texto); }
}
@media (prefers-reduced-motion: reduce) {
  .orbita__faixa path, .orbita__ponto, .orbita__ponto i, .orbita__trilho, .orbita__mini, .orbita__mini img, .orbita__acao { transition: none; }
}

/* ingredientes da descrição: negrito e sublinhado na cor da loja */
.ing { font-weight: 700; text-decoration: underline; text-decoration-color: var(--cor-clara); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--texto); }