/* =========================================================================
   IS Studio — sistema de design
   Dois mundos, uma identidade: o tom "papel kraft/MDF" da produção física
   contra o "azul de projeto" da automação, com o vermelho de linha de corte
   como acento comum aos dois. Hairlines no lugar de cards com sombra.
   ========================================================================= */

:root {
    --cor-grafite: #17191b;
    --cor-grafite-alt: #202325;
    --cor-papel: #f1ede3;
    --cor-papel-alt: #e8e2d2;
    --cor-card: #ffffff;
    --cor-texto-claro: #ece8de;
    --cor-texto-claro-suave: #a9a79f;
    --cor-texto-escuro: #1b1d1e;
    --cor-texto-escuro-suave: #5c584c;
    --cor-corte: #e8432e;
    --cor-corte-escuro: #c23320;
    --cor-vetor: #3d63e8;
    --cor-vetor-escuro: #2a48c4;
    --cor-linha-clara: rgba(27, 29, 30, 0.14);
    --cor-linha-escura: rgba(236, 232, 222, 0.16);

    --fonte-titulo: "Space Grotesk", "Segoe UI", sans-serif;
    --fonte-corpo: "IBM Plex Sans", "Segoe UI", sans-serif;

    --largura-conteudo: 1160px;
    --espaco-secao: clamp(2.5rem, 6vw, 5.5rem);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fonte-corpo);
    color: var(--cor-texto-escuro);
    background: var(--cor-papel);
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    line-height: 1.15;
    margin: 0 0 0.5em 0;
    font-weight: 600;
}

p {
    max-width: 62ch;
    margin: 0 0 1em 0;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* Foco visível — nunca remover sem substituir */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cor-vetor);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

.container {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Cabeçalho ---------- */

.cabecalho-site {
    border-bottom: 1px solid var(--cor-linha-clara);
    background: var(--cor-papel);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cabecalho-site .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.marca-site {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.nav-site {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-site a {
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.15rem;
}

.nav-site a:hover {
    border-bottom-color: var(--cor-corte);
}

/* ---------- Cabeçalho: menu suspenso (ex. "Parametrizador") ---------- */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    /* Sem margin-top: um espaço em branco aqui vira uma "zona morta" entre o link
       "Parametrizador" e o menu — ao descer o mouse em diagonal pra escolher um sub-item, o
       ponteiro passa por fora de QUALQUER elemento com :hover nesse intervalo e o navegador
       fecha o menu antes de chegar lá. padding-top empurra o conteúdo visualmente pra baixo do
       mesmo jeito, mas sem abrir esse buraco — a caixa do menu (o que importa pro :hover)
       continua colada em top: 100%. */
    top: 100%;
    left: 0;
    padding: 0.6rem 0 0.4rem;
    min-width: 180px;
    background: var(--cor-papel);
    border: 1px solid var(--cor-linha-clara);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-menu a {
    padding: 0.5rem 1rem;
    border-bottom: none !important;
}

.nav-dropdown-menu a:hover {
    background: var(--cor-papel-alt);
}

/* ---------- Home — hero + painéis partidos ---------- */

.home-hero {
    padding: var(--espaco-secao) 0 2.5rem;
}

.home-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    max-width: 16ch;
}

.home-hero p {
    font-size: 1.15rem;
    color: var(--cor-texto-escuro-suave);
}

.home-paineis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    border-top: 1px solid var(--cor-linha-clara);
}

.painel-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
    text-decoration: none;
    position: relative;
}

.painel-vertical--arte {
    background: var(--cor-papel-alt);
    color: var(--cor-texto-escuro);
    border-right: 1px solid var(--cor-linha-clara);
}

.painel-vertical--tecnologia {
    background: var(--cor-grafite);
    color: var(--cor-texto-claro);
}

.painel-vertical h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.painel-vertical--arte p {
    color: var(--cor-texto-escuro-suave);
}

.painel-vertical--tecnologia p {
    color: var(--cor-texto-claro-suave);
}

.painel-cta {
    margin-top: 1.5rem;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.95rem;
}

.painel-vertical--arte .painel-cta {
    color: var(--cor-corte-escuro);
}

.painel-vertical--tecnologia .painel-cta {
    color: #7c96ff;
}

@media (max-width: 760px) {
    .home-paineis {
        grid-template-columns: 1fr;
    }

    .painel-vertical--arte {
        border-right: none;
        border-bottom: 1px solid var(--cor-linha-clara);
    }
}

/* ---------- Filtros da vitrine ---------- */

.filtros-vitrine {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--cor-linha-clara);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.filtros-vitrine label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--cor-texto-escuro-suave);
}

.filtros-vitrine select {
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--cor-linha-clara);
    background: var(--cor-papel);
    color: var(--cor-texto-escuro);
}

/* ---------- Grade de catálogo + card ---------- */

.grade-catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.75rem;
    padding-bottom: var(--espaco-secao);
}

.card-item-catalogo {
    text-decoration: none;
    color: inherit;
    display: block;
    /* Card branco destacado do fundo papel da página — hairline em vez de sombra,
       mantendo a regra do sistema de design. */
    background: var(--cor-card);
    border: 1px solid var(--cor-linha-clara);
    transition: border-color 0.15s ease;
}

.card-item-catalogo:hover {
    border-color: var(--cor-corte);
}

.card-item-catalogo-moldura {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--cor-card);
    overflow: hidden;
}

/* Marcas de registro nos cantos — o mesmo recurso visual usado em arquivos de
   corte a laser pra indicar alinhamento, aqui como assinatura gráfica do card. */
.card-item-catalogo-moldura::before,
.card-item-catalogo-moldura::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--cor-corte);
    opacity: 0.55;
}

.card-item-catalogo-moldura::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.card-item-catalogo-moldura::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

.card-item-catalogo-moldura img {
    width: 100%;
    height: 100%;
    /* contain (não cover) — mesma escolha do .detalhe-produto-imagem-principal: a moldura tem
       proporção fixa (4:3), mas a imagem cadastrada pode ter outra, e cover cortava as bordas
       de fotos mais quadradas/verticais pra preencher o quadro. Contain encolhe a imagem
       inteira pra caber dentro da moldura, sobrando um respiro de var(--cor-card) nas
       laterais quando a proporção não bate. */
    object-fit: contain;
}

.card-item-catalogo-corpo {
    padding: 0.85rem 1rem 1rem;
}

.card-item-catalogo-corpo h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.card-item-catalogo-corpo p {
    font-size: 0.9rem;
    color: var(--cor-texto-escuro-suave);
    margin-bottom: 0.5rem;
}

.card-item-catalogo-preco {
    font-family: var(--fonte-titulo);
    font-weight: 600;
}

/* ---------- Páginas de detalhe ---------- */

.detalhe-produto,
.detalhe-automacao {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding: var(--espaco-secao) 0;
}

@media (max-width: 800px) {
    .detalhe-produto,
    .detalhe-automacao {
        grid-template-columns: 1fr;
    }
}

.detalhe-produto-categoria,
.detalhe-automacao-categoria {
    color: var(--cor-texto-escuro-suave);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.detalhe-produto-preco,
.detalhe-automacao-preco {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1.25rem 0;
}

/* Nota logo abaixo do preço calculado de produto personalizável — cola no preço. */
.detalhe-produto-preco:has(+ .detalhe-produto-preco-nota) {
    margin-bottom: 0.2rem;
}

.detalhe-produto-preco-nota {
    font-size: 0.8rem;
    color: var(--cor-texto-escuro-suave);
    margin: 0 0 1.25rem;
}

/* Mídia do produto (ver DetalheProduto.razor) — imagem grande de apresentação à esquerda com
   um carrossel de miniaturas logo abaixo (troca qual imagem aparece na área grande); um botão
   sempre visível e semi-transparente, sobreposto à imagem grande, chama o visualizador 3D, que
   toma o lugar da imagem enquanto ativo. Layout inspirado na página de produto da Printify. */
.detalhe-produto-midia {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.detalhe-produto-imagem-principal {
    position: relative;
    height: 460px;
    background: var(--cor-card);
    /* Mesma hairline cinza das miniaturas (.detalhe-produto-miniatura). */
    border: 1px solid var(--cor-linha-clara);
    overflow: hidden;
}

.detalhe-produto-imagem-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.detalhe-produto-sem-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--cor-texto-escuro-suave);
    font-size: 0.9rem;
}

.botao-ver-3d {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 5;
    padding: 0.6rem 1.1rem;
    font-family: var(--fonte-titulo);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cor-texto-claro);
    background: rgba(23, 25, 27, 0.62);
    border: 1px solid rgba(236, 232, 222, 0.4);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.botao-ver-3d:hover,
.botao-ver-3d:focus-visible {
    background: rgba(23, 25, 27, 0.82);
    border-color: var(--cor-corte);
}

.detalhe-produto-carrossel {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.detalhe-produto-miniatura {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 1px solid var(--cor-linha-clara);
    background: var(--cor-card);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.detalhe-produto-miniatura:hover,
.detalhe-produto-miniatura:focus-visible {
    border-color: var(--cor-texto-escuro-suave);
}

.detalhe-produto-miniatura.ativa {
    border-color: var(--cor-corte);
    border-width: 2px;
}

.detalhe-produto-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 800px) {
    .detalhe-produto-imagem-principal {
        height: 340px;
    }
}

.detalhe-automacao-video {
    aspect-ratio: 16 / 9;
    background: var(--cor-grafite);
}

.detalhe-automacao-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Botões / CTAs ---------- */

.botao-cta {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.botao-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.botao-whatsapp {
    background: var(--cor-corte);
    color: #fff;
}

.botao-whatsapp:hover {
    background: var(--cor-corte-escuro);
}

.botao-secundario {
    background: transparent;
    color: var(--cor-texto-escuro);
    border: 1px solid var(--cor-linha-clara);
}

.botao-secundario:hover {
    border-color: var(--cor-texto-escuro-suave);
}

.links-venda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.botao-link-venda {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    color: #fff;
    background: var(--cor-vetor);
}

.botao-link-venda:hover {
    background: var(--cor-vetor-escuro);
}

.botao-link-venda.botao-whatsapp {
    background: var(--cor-corte);
}

.botao-link-venda.botao-whatsapp:hover {
    background: var(--cor-corte-escuro);
}

/* ---------- Rodapé ---------- */

.rodape-site {
    border-top: 1px solid var(--cor-linha-clara);
    padding: 2rem 0;
    color: var(--cor-texto-escuro-suave);
    font-size: 0.85rem;
}

/* ---------- Visualizador 3D ---------- */

.visualizador-3d {
    width: 100%;
    height: 100%;
}

.visualizador-3d model-viewer {
    width: 100%;
    height: 100%;
    background: var(--cor-card);
}

.visualizador-3d-indisponivel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--cor-card);
    color: var(--cor-texto-escuro-suave);
    font-size: 0.9rem;
}

/* ---------- Personalização do produto (Fase 6, estendida na Fase 7) ---------- */

.personalizacao-produto {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--cor-linha-clara);
}

.personalizacao-produto h2 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.personalizacao-login-necessario {
    background: var(--cor-papel-alt);
    padding: 1.5rem;
}

.personalizacao-login-acoes {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.personalizacao-sem-campos {
    color: var(--cor-texto-escuro-suave);
    font-size: 0.9rem;
}

.personalizacao-sucesso {
    color: var(--cor-texto-escuro);
    background: rgba(61, 99, 232, 0.08);
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--cor-vetor);
    font-size: 0.9rem;
}

.personalizacao-caixa-laser-aviso {
    background: rgba(232, 67, 46, 0.06);
    border-left: 3px solid var(--cor-corte);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.personalizacao-caixa-laser-aviso p {
    margin: 0;
}

.personalizacao-caixa-laser-aviso a {
    color: var(--cor-corte-escuro);
    font-weight: 600;
}

.personalizacao-campo {
    border: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.personalizacao-campo legend {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--cor-texto-escuro-suave);
    padding: 0;
    margin-bottom: 0.6rem;
}

.personalizacao-variantes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.personalizacao-variante {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--cor-linha-clara);
    cursor: pointer;
}

.personalizacao-variante input {
    margin: 0;
}

.personalizacao-variante-selecionada {
    border-color: var(--cor-corte);
    background: rgba(232, 67, 46, 0.06);
}

.personalizacao-campo input[type="number"],
.personalizacao-campo input[type="text"] {
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--cor-linha-clara);
    background: #fff;
    color: var(--cor-texto-escuro);
    width: 100%;
    max-width: 20rem;
}

.personalizacao-faixa {
    font-size: 0.8rem;
    color: var(--cor-texto-escuro-suave);
    margin-top: 0.5rem;
    max-width: none;
}

.personalizacao-faixa-aviso {
    font-size: 0.8rem;
    color: var(--cor-corte-escuro);
    margin-top: 0.25rem;
    max-width: none;
}

.personalizacao-campo select {
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--cor-linha-clara);
    background: #fff;
    color: var(--cor-texto-escuro);
    max-width: 20rem;
}

.personalizacao-barra-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.personalizacao-aba-botao {
    font-family: var(--fonte-titulo);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border: 1px solid var(--cor-linha-clara);
    background: var(--cor-papel);
    color: var(--cor-texto-escuro);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.personalizacao-aba-botao:hover,
.personalizacao-aba-botao:focus-visible {
    border-color: var(--cor-texto-escuro-suave);
}

.personalizacao-aba-botao.ativa {
    border-color: var(--cor-corte);
    background: rgba(232, 67, 46, 0.06);
}

.personalizacao-painel {
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--cor-linha-clara);
}

.personalizacao-preco-composicao {
    margin: 1.25rem 0;
}

.personalizacao-preco-estimado {
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.personalizacao-preco-nota {
    font-family: var(--fonte-corpo);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cor-texto-escuro-suave);
}

/* Checkbox de entrega — mesma ideia visual de .caixa-laser-checkbox (linha, alinhado,
   checkbox destacado na cor de corte), mas fora de .caixa-laser-formulario pra também valer
   na tela de personalização de produto cadastrado (PersonalizacaoProduto.razor). */
.personalizacao-entrega-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    margin: 0.6rem 0;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
}

.personalizacao-entrega-checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--cor-corte);
    cursor: pointer;
}

.personalizacao-preco-total {
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.6rem 0 0;
}

/* ---------- Login / cadastro (admin Fase 5, conta do cliente Fase 7) ---------- */

.pagina-login {
    max-width: 420px;
    padding-top: var(--espaco-secao);
    padding-bottom: var(--espaco-secao);
}

.pagina-login-rodape {
    font-size: 0.9rem;
    color: var(--cor-texto-escuro-suave);
}

.formulario-login {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.5rem;
}

.formulario-login label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--cor-texto-escuro-suave);
}

.formulario-login input {
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--cor-linha-clara);
    background: #fff;
    color: var(--cor-texto-escuro);
}

.formulario-login .validation-message {
    color: var(--cor-corte-escuro);
    font-size: 0.8rem;
}

.formulario-login button {
    margin-top: 0.5rem;
    cursor: pointer;
}

.erro-login {
    color: var(--cor-corte-escuro);
    font-size: 0.9rem;
    background: rgba(232, 67, 46, 0.08);
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--cor-corte);
}

/* ---------- Carrinho / repositório de personalizações do cliente (Fase 7) ---------- */

.pagina-carrinho {
    padding: var(--espaco-secao) 0;
}

.lista-carrinho {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.item-carrinho {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.25rem;
    border: 1px solid var(--cor-linha-clara);
    padding: 1.25rem;
}

@media (max-width: 600px) {
    .item-carrinho {
        grid-template-columns: 1fr;
    }
}

.item-carrinho-imagem {
    aspect-ratio: 4 / 3;
    background: var(--cor-papel-alt);
    overflow: hidden;
}

.item-carrinho-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Miniatura de item avulso (Criador de caixa/Recortes) — SVG congelado no lugar da <img>,
   mesma "vaga" reservada acima. object-fit não se aplica a <svg> inline, então quem garante a
   proporção aqui é o próprio viewBox do SVG (preserveAspectRatio padrão "xMidYMid meet" já
   encolhe/centraliza mantendo a proporção original — silhueta da caixa, forma do recorte —
   sem cortar nada, diferente de uma foto de produto que pode usar "cover" sem problema). */
.item-carrinho-imagem svg {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0.5rem;
    box-sizing: border-box;
}

.item-carrinho-corpo h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.item-carrinho-corpo h3 a {
    text-decoration: none;
}

.item-carrinho-valores {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--cor-texto-escuro-suave);
}

.item-carrinho-acabamento {
    font-size: 0.85rem;
    color: var(--cor-texto-escuro-suave);
    margin-bottom: 0.5rem;
}

.item-carrinho-rodape {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.item-carrinho-quantidade {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--cor-texto-escuro-suave);
}

.item-carrinho-quantidade input {
    width: 4.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--cor-linha-clara);
    background: #fff;
}

.item-carrinho-precos {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.item-carrinho-preco-unitario {
    font-size: 0.8rem;
    color: var(--cor-texto-escuro-suave);
}

.item-carrinho-subtotal {
    font-family: var(--fonte-titulo);
    font-weight: 600;
}

.item-carrinho-remover {
    background: none;
    border: none;
    color: var(--cor-corte-escuro);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-left: auto;
}

.carrinho-total {
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.75rem 0 1rem;
}

/* ---------- Criador de caixas a laser ---------- */

.pagina-caixa-laser {
    padding: var(--espaco-secao) 0;
}

/* Reaproveita a grade de duas colunas de .detalhe-produto (mídia à esquerda, opções à
   direita — ver DetalheProduto.razor) — aqui só ajusta o espaçamento vertical, já que o
   parágrafo de introdução da página (.pagina-caixa-laser) substitui o papel do cabeçalho de
   categoria/preço que .detalhe-produto normalmente tem acima dele. */
.caixa-laser-layout {
    padding-top: 2rem;
    padding-bottom: 0;
}

/* A "mídia" da caixa é o visualizador 3D em vez de uma foto — mesma moldura de
   .detalhe-produto-imagem-principal (altura fixa, overflow escondido), com o botão de
   destampar sobreposto no canto, do mesmo jeito que .botao-ver-3d fica sobre a imagem do
   produto. */
.caixa-laser-imagem-principal {
    background: transparent;
    /* A borda da apresentação de produto não se aplica às ferramentas (Caixa/Recortes/Frases). */
    border: none;
}

.caixa-laser-painel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.caixa-laser-formulario {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.caixa-laser-formulario label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--cor-texto-escuro-suave);
}

/* Linha com vários campos lado a lado (material/cor/espessura, depois
   largura/profundidade/altura) — cada label vira uma coluna igual, quebrando pra baixo em
   telas estreitas. */
.caixa-laser-linha {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.caixa-laser-linha label {
    flex: 1 1 160px;
}

/* Linha de largura/altura com o cadeado "Manter proporção" no meio (Recortes) — mesma
   estética da personalização de produto: caixas alinhadas pela base, cadeado sem esticar.
   Os seletores com ".caixa-laser-linha >" precisam da especificidade extra pra vencer
   ".caixa-laser-linha label" e ".caixa-laser-formulario label/input". */
.caixa-laser-linha-medidas {
    align-items: flex-end;
}

.caixa-laser-linha > .trava-proporcao {
    flex: 0 0 auto;
    gap: 0.15rem;
    color: var(--cor-texto-escuro-suave);
}

.caixa-laser-linha > .trava-proporcao-ligada {
    color: var(--cor-corte);
}

.caixa-laser-formulario .trava-proporcao input {
    padding: 0;
}

.caixa-laser-formulario input,
.caixa-laser-formulario select {
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--cor-linha-clara);
    background: #fff;
    color: var(--cor-texto-escuro);
}

.caixa-laser-dica {
    font-size: 0.78rem;
    color: var(--cor-texto-escuro-suave);
    font-weight: 400;
}

/* Sobrescreve o layout em coluna de ".caixa-laser-formulario label" (usado nos campos
   numéricos) só pra este label específico — o checkbox "Incluir tampa" fica melhor numa
   linha só, com a caixinha antes do texto. */
.caixa-laser-formulario label.caixa-laser-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.caixa-laser-formulario label.caixa-laser-checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--cor-corte);
    cursor: pointer;
}

.caixa-laser-erro {
    color: var(--cor-corte-escuro);
    font-size: 0.85rem;
    background: rgba(232, 67, 46, 0.08);
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--cor-corte);
    max-width: none;
}

/* Sobreposto no canto da moldura (.detalhe-produto-imagem-principal), igual .botao-ver-3d faz
   com o botão "Ver em 3D" da página de produto — não empurra o visualizador pra baixo. */
.caixa-laser-botao-tampa {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 5;
    padding: 0.5rem 0.9rem;
    font-family: var(--fonte-corpo);
    font-size: 0.82rem;
    color: var(--cor-corte-escuro);
    background: rgba(241, 237, 227, 0.9);
    border: 1px solid var(--cor-corte);
    cursor: pointer;
}

.caixa-laser-botao-tampa:hover {
    background: rgba(232, 67, 46, 0.16);
}

.caixa-laser-3d {
    width: 100%;
    height: 100%;
    background: var(--cor-papel-alt);
    /* Evita que o navegador tente rolar a página junto com o arraste do mouse/toque usado
       pra girar a câmera do visualizador (OrbitControls). */
    touch-action: none;
}

.caixa-laser-3d canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.caixa-laser-dica-3d {
    font-size: 0.78rem;
    color: var(--cor-texto-escuro-suave);
    margin-top: 0.5rem;
}

.caixa-laser-info {
    font-size: 0.85rem;
    color: var(--cor-texto-escuro-suave);
    margin-top: 0.85rem;
    max-width: none;
}

/* ---------- Recortes (formas geométricas) ---------- */

/* A "mídia" do recorte é uma prévia 2D da forma (SVG gerado por GeradorRecorteService) em vez
   de foto ou visualizador 3D — a peça é plana, sem volume, então o SVG já representa o
   resultado final tal como sai da máquina. */
.recorte-imagem-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

.recorte-imagem-principal svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Detalhamento da precificação (só Admin — DetalhamentoPrecoAdmin.razor) ----------
   Uma linha por componente (nome à esquerda, valor à direita, nunca quebra), no mesmo tom de
   "papel" do site com um filete azul de projeto à esquerda marcando que é camada interna da
   equipe. As contas por extenso ficam na memória de cálculo recolhível, em corpo menor. */

.detalhamento-preco {
    margin: 0 0 1.25rem;
    padding: 0.8rem 0.95rem 0.7rem;
    background: var(--cor-papel-alt);
    border-left: 3px solid var(--cor-vetor);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.detalhamento-preco-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.detalhamento-preco-titulo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.detalhamento-preco-selo {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 2px;
    white-space: nowrap;
    color: var(--cor-vetor-escuro);
    background: rgba(61, 99, 232, 0.12);
}

.detalhamento-preco-selo-calculosimplificado {
    color: var(--cor-corte-escuro);
    background: rgba(232, 67, 46, 0.12);
}

.detalhamento-preco-selo-precocadastrado {
    color: var(--cor-texto-escuro-suave);
    background: rgba(27, 29, 30, 0.08);
}

.detalhamento-preco-observacao {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--cor-texto-escuro-suave);
}

/* Só o cálculo sem tempo de corte é alerta de verdade (cadastro faltando). */
.detalhamento-preco-observacao-alerta {
    color: var(--cor-corte-escuro);
}

.detalhamento-preco-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.2rem 0;
    white-space: nowrap;
}

.detalhamento-preco-linha > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cor-texto-escuro-suave);
}

.detalhamento-preco-linha small {
    font-size: 0.75rem;
}

.detalhamento-preco-linha-margem > span:last-child {
    color: var(--cor-vetor-escuro);
}

.detalhamento-preco-linha-subtotal {
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--cor-linha-clara);
    font-weight: 600;
}

.detalhamento-preco-linha-subtotal > span:first-child,
.detalhamento-preco-linha-total > span:first-child {
    color: var(--cor-texto-escuro);
}

/* Primeira linha do bloco nunca abre com filete (ex.: Props sem entrega = só o total). */
.detalhamento-preco-linhas > .detalhamento-preco-linha:first-child {
    margin-top: 0;
    padding-top: 0.2rem;
    border-top: none;
}

.detalhamento-preco-linha-total {
    margin-top: 0.3rem;
    padding-top: 0.45rem;
    border-top: 2px solid var(--cor-texto-escuro);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1rem;
}

.detalhamento-preco-memoria {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--cor-texto-escuro-suave);
}

.detalhamento-preco-memoria summary {
    cursor: pointer;
    color: var(--cor-vetor-escuro);
    font-weight: 500;
}

.detalhamento-preco-memoria dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    margin: 0.45rem 0 0;
}

.detalhamento-preco-memoria dt {
    grid-column: 1;
    font-weight: 600;
}

.detalhamento-preco-memoria dd {
    grid-column: 2;
    margin: 0;
}

/* Medidas: sempre em mm, com o equivalente em cm no tooltip (ver Components/Shared/Medida.razor). */
.medida {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* "Manter proporção" na personalização: digita uma medida, a outra acompanha. */
.personalizacao-proporcao {
    margin: 0 0 0.75rem;
}

.personalizacao-proporcao label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

/* Personalizar produto: blocos fixos de matéria-prima e dimensões, cada um numa linha só
   (mesma ideia de .caixa-laser-linha das ferramentas), quebrando pra baixo em telas estreitas. */
.personalizacao-bloco {
    margin-bottom: 1.25rem;
}

.personalizacao-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.personalizacao-linha > label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 120px;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--cor-texto-escuro-suave);
}

.personalizacao-campo .personalizacao-linha select,
.personalizacao-campo .personalizacao-linha input[type="number"] {
    width: 100%;
    max-width: none;
}

.personalizacao-linha-medidas + .personalizacao-faixa {
    margin-top: 0.4rem;
}

/* Cadeado do "Manter proporção" entre largura e altura: ícone em cima, checkbox embaixo,
   alinhado à base das caixas de texto. Travado = cor de corte; livre = cinza. */
.trava-proporcao,
.personalizacao-linha > .trava-proporcao {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding-bottom: 0.3rem;
    cursor: pointer;
    color: var(--cor-texto-escuro-suave);
    user-select: none;
}

.trava-proporcao-ligada,
.personalizacao-linha > .trava-proporcao-ligada {
    color: var(--cor-corte);
}

.trava-proporcao input {
    margin: 0;
    accent-color: var(--cor-corte);
    cursor: pointer;
}

.trava-proporcao:focus-within {
    outline: 2px solid var(--cor-corte);
    outline-offset: 2px;
}