/* RVREBOX: cards da home com imagem clicável e barra de carrinho; seletor rápido de variação */

/* ── Card ─────────────────────────────────────────────────── */
.product-img-wrap { container-type: inline-size; }
.product-img-link { position: absolute; inset: 0; z-index: 1; }
.product-img-link:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.product-img-wrap .product-num,
.product-img-wrap .product-badge { pointer-events: none; }

button.product-overlay { width: auto; font: inherit; color: var(--foreground); text-align: left; }
.product-overlay.rvr-add { cursor: pointer; }
.product-overlay.rvr-add:hover .overlay-label,
.product-overlay.rvr-add:focus-visible .overlay-label { color: var(--accent); }
.product-overlay:focus-visible { transform: translateY(0); outline: 1px solid var(--accent); outline-offset: -1px; }
.product-overlay.loading { opacity: 0.6; pointer-events: none; }
.product-img-wrap .added_to_cart { display: none; } /* o painel do carrinho já abre sozinho */

.overlay-label .rvr-curto { display: none; }
@container (max-width: 300px) {
  .overlay-label .rvr-longo { display: none; }
  .overlay-label .rvr-curto { display: inline; }
}

/* Tela de toque não tem hover: a barra de compra fica sempre à mostra */
@media (hover: none) {
  .product-overlay.rvr-add { transform: none; padding: 10px 12px; }
  .product-overlay.rvr-add .overlay-price { display: none; }
}

/* ── Seletor rápido ───────────────────────────────────────── */
.rvr-quick {
  margin: auto; /* o reset do tema zera a margem e tira o centro do <dialog> */
  padding: 0; border: 1px solid var(--border-bright); border-radius: 0;
  background: var(--background); color: var(--foreground);
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
}
.rvr-quick::backdrop { background: rgba(0, 0, 0, 0.78); }
.rvr-quick__caixa { position: relative; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rvr-quick__fechar {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
  color: var(--foreground-muted); cursor: pointer; font-size: 0.875rem;
}
.rvr-quick__fechar:hover { color: var(--foreground); }
.rvr-quick__topo { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding-right: 28px; }
.rvr-quick__img { width: 72px; height: 72px; object-fit: contain; background: var(--surface-elevated); border: 1px solid var(--border); }
.rvr-quick__sobre { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.15em; color: var(--foreground-muted); }
.rvr-quick__nome { font-weight: 700; font-size: 1rem; line-height: 1.25; margin-top: 4px; }
.rvr-quick__preco { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--accent); margin-top: 4px; }

.rvr-quick__campos { display: flex; flex-direction: column; gap: 14px; }
.rvr-quick__campo { display: flex; flex-direction: column; gap: 6px; }
.rvr-quick__campo label {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--foreground-muted);
}
.rvr-quick__campo select {
  appearance: none; -webkit-appearance: none; width: 100%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--foreground); border: 1px solid var(--border); border-radius: 0;
  padding: 12px 36px 12px 12px; font-family: var(--font-sans); font-size: 0.875rem; cursor: pointer;
}
.rvr-quick__campo select:focus { outline: none; border-color: var(--accent); }
.rvr-quick__campo option:disabled { color: var(--foreground-dim); }

.rvr-quick__aviso { min-height: 1em; margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--foreground-muted); }
.rvr-quick__aviso.erro { color: #ff6b6b; }
.rvr-quick__add {
  width: 100%; padding: 14px 16px; cursor: pointer;
  background: var(--accent); color: var(--background); border: 1px solid var(--accent);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em;
  transition: opacity var(--t-fast);
}
.rvr-quick__add:disabled { opacity: 0.35; cursor: not-allowed; }
.rvr-quick__add.carregando { opacity: 0.6; cursor: wait; }
.rvr-quick__ver {
  align-self: center; font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--foreground-muted);
}
.rvr-quick__ver:hover { color: var(--foreground); }