/* =====================================================================
   APTK — imagem de produto (leva 08)
   Componentes <x-product.image> e <x-product.placeholder>. Arquivo próprio
   porque é usado na loja (layouts public/app) E no admin (layout admin,
   que não carrega o aptk.css). Só tokens de aptk-tokens.css.
   ===================================================================== */

/* Produto sem foto (leva 08) — <x-product.placeholder> / <x-product.image>.
   A caixa ocupa o lugar da <img> (tamanho vem de quem usa: aspect-ratio ou
   width/height); a área absoluta herda o padding dela e dá altura definida
   para a moldura 2:3 caber — height: 100% não resolve contra aspect-ratio. */
.prod-ph-box {
  display: block;
  position: relative;
  background: var(--color-bg-media);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prod-ph-area {
  position: absolute;
  inset: 0;
  padding: inherit;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 2 / 3;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: var(--color-bg-media);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-media);
  text-align: center;
  padding: 12%;
  box-sizing: border-box;
}
.prod-ph__symbol { width: 34%; max-width: 72px; height: auto; color: var(--color-text-on-media); opacity: .8; }
.prod-ph__txt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.prod-ph--compact { gap: 0; padding: 0; border-radius: var(--radius-sm); }
.prod-ph--compact .prod-ph__symbol { width: 48%; }

/* Miniatura (carrinho, checkout, pedidos, admin): o tamanho vem de quem usa. */
.prod-thumb {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--color-bg-media);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px;
  box-sizing: border-box;
}
.prod-thumb.prod-ph-box { padding: 4px; }
.prod-thumb .prod-ph { border: none; }

/* ---- Garrafa custom (leva 11): prévia = imagem da bebida + texto na área
   em branco do rótulo. A área e o tamanho (cqw = % da largura da prévia)
   vêm de config/custom.php via <x-custom.previa>. ---- */
.cst-previa {
  position: relative;
  container-type: inline-size;
  background: var(--color-bg-media);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-sizing: border-box;
}
.cst-previa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cst-previa__area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.cst-previa__txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.15;
  overflow-wrap: anywhere;
  white-space: normal;
}
.cst-f-pprader { font-family: var(--font-display); font-weight: 700; }
.cst-f-amithen { font-family: var(--font-amithen); font-weight: 400; }
.cst-f-blacksword { font-family: var(--font-blacksword); font-weight: 400; }
/* Miniatura (carrinho, checkout, pedidos): tamanho vem de quem usa. */
.cst-previa--thumb { border: 1px solid var(--color-border); border-radius: var(--radius-sm); flex-shrink: 0; }
/* Ficha da personalização ao lado do nome do item. */
.cst-ficha { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.cst-ficha__texto { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text); flex-basis: 100%; }
.cst-cor-dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; margin-right: 4px; border: 1px solid var(--color-border); }
.cst-selo { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 100px; padding: 2px 8px; line-height: 1.4; vertical-align: middle; }