/* =====================================================================
   OFFICE+ DISTRIBUIDORA — loja virtual
   1. Botão do carrinho e contador no cabeçalho
   2. Quantidade + compra nos cards de produto
   3. Compra, frete e argumento de venda na página do produto
   4. Página do carrinho
   5. Checkout
   6. Página do pedido
   7. Aviso flutuante de ação do carrinho
   ===================================================================== */

/* ============================ 1. CABEÇALHO ============================ */
.acao-carrinho {
    position: relative;
}

.acao-carrinho.tem-itens .acao-carrinho-badge {
    display: inline-flex;
}

.acao-carrinho-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--om-laranja);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--om-fundo);
}

.cabecalho-acoes .acao.tem-itens {
    color: var(--om-laranja);
}

@media (max-width: 991.98px) {
    /* No menu mobile a lista já mostra o carrinho com texto. */
    .cabecalho-acoes .acao-carrinho { display: none; }
}

.carrinho-no-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.carrinho-no-menu .contador {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--om-laranja);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ============================ 2. CARD DE PRODUTO ============================ */
.produto-comprar-inline {
    display: flex;
    gap: .4rem;
    align-items: stretch;
}

.produto-qtd {
    width: 62px;
    flex: 0 0 auto;
    padding: .25rem .4rem;
    font-size: .875rem;
    text-align: center;
}

.produto-qtd::-webkit-outer-spin-button,
.produto-qtd::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.produto-qtd {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================ 3. PÁGINA DO PRODUTO ============================ */
.produto-comprar-form {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.produto-qtd-linha {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.produto-qtd-campo {
    display: grid;
    gap: .3rem;
}

.produto-qtd-campo label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--om-texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.produto-qtd-campo .form-control {
    width: 92px;
}

.produto-frete {
    padding: 1rem 1.1rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio);
    background: var(--om-fundo-cinza);
}

.produto-frete-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .6rem;
    font-weight: 600;
    color: var(--om-azul);
}

.produto-frete-campo {
    display: flex;
    gap: .5rem;
}

.produto-frete-campo .form-control {
    max-width: 160px;
}

.produto-frete-aviso {
    margin: .6rem 0 0;
    font-size: .875rem;
    color: var(--om-texto-suave);
}

.produto-frete-aviso[hidden] {
    display: none;
}

.produto-frete-lista {
    display: grid;
    gap: .4rem;
    margin-top: .7rem;
}

.produto-frete-lista[hidden] {
    display: none;
}

/* Lista informativa: a escolha da entrega é feita na página do carrinho. */
.produto-frete-opcao {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-sm);
    background: var(--om-fundo);
    font-size: .9375rem;
}

.produto-frete-opcao strong {
    font-weight: 600;
}

.produto-frete-opcao span {
    margin: 0;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ============================ 4. PÁGINA DO CARRINHO ============================ */
.carrinho-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.carrinho-cabecalho h1 {
    margin: 0;
}

.carrinho-cabecalho p {
    margin: 0;
    color: var(--om-texto-suave);
}

.carrinho-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.8rem;
    align-items: start;
}

.carrinho-lista {
    display: grid;
    gap: .8rem;
}

.carrinho-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio);
    background: var(--om-fundo);
}

.carrinho-item-foto {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: var(--om-raio-sm);
    overflow: hidden;
    background: var(--om-fundo-claro);
}

.carrinho-item-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carrinho-item-info h2 {
    margin: 0 0 .25rem;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.carrinho-item-info h2 a {
    color: inherit;
    text-decoration: none;
}

.carrinho-item-info h2 a:hover {
    color: var(--om-azul);
}

.carrinho-item-marca {
    margin: 0 0 .2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--om-laranja);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.carrinho-item-estoque {
    margin: 0;
    font-size: .8125rem;
    color: var(--om-texto-suave);
}

.carrinho-item-qtd {
    display: grid;
    gap: .25rem;
    justify-items: start;
}

.carrinho-item-qtd label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--om-texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.carrinho-item-qtd .form-control {
    width: 78px;
    text-align: center;
}

.carrinho-item-disponivel {
    margin: 0;
    font-size: .75rem;
    color: var(--om-texto-suave);
}

.carrinho-item-preco {
    display: grid;
    gap: .15rem;
    justify-items: end;
    text-align: right;
    min-width: 120px;
}

.carrinho-item-subtotal {
    font-weight: 700;
    color: var(--om-azul);
}

.carrinho-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}

.carrinho-resumo {
    position: sticky;
    top: calc(var(--om-altura-cabecalho) + 1rem);
    padding: 1.4rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-lg);
    background: var(--om-fundo-cinza);
}

.carrinho-resumo h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.carrinho-totais {
    display: grid;
    gap: .5rem;
    margin: 0 0 1rem;
}

.carrinho-totals,
.carrinho-totais > div {
    margin: 0;
}

.carrinho-totais > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.carrinho-totais dt {
    font-weight: 500;
    color: var(--om-texto-suave);
}

.carrinho-totais dd {
    margin: 0;
    font-weight: 600;
}

.carrinho-total-final {
    padding-top: .6rem;
    border-top: 1px solid var(--om-borda);
    font-size: 1.125rem;
}

.carrinho-total-final dt {
    font-weight: 700;
    color: var(--om-azul);
}

.carrinho-total-final dd {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--om-azul);
}

.carrinho-frete-escolhido {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: .6rem .7rem;
    border-radius: var(--om-raio-sm);
    background: var(--om-fundo-claro);
    font-size: .875rem;
    color: var(--om-texto-suave);
}

.carrinho-seguranca {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .9rem 0 0;
    font-size: .8125rem;
    color: var(--om-texto-suave);
}

.carrinho-frete-caixa {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-lg);
    background: var(--om-fundo);
}

.carrinho-frete-caixa h2 {
    margin: 0 0 .3rem;
    font-size: 1.125rem;
}

.carrinho-frete-caixa > p {
    margin: 0 0 1rem;
    color: var(--om-texto-suave);
}

.carrinho-frete-cep-atual {
    font-size: .875rem;
}

.carrinho-frete-form {
    display: grid;
    gap: 1rem;
    max-width: 720px;
}

.carrinho-frete-campo {
    display: flex;
    gap: .5rem;
}

.carrinho-frete-campo .form-control {
    max-width: 170px;
}

.carrinho-frete-opcoes {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.carrinho-frete-opcoes[hidden] {
    display: none;
}

.carrinho-frete-opcao {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .6rem;
    align-items: center;
    padding: .7rem .8rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-sm);
    background: var(--om-fundo);
    cursor: pointer;
    transition: border-color var(--om-transicao);
}

.carrinho-frete-opcao:hover {
    border-color: var(--om-azul-claro);
}

.carrinho-frete-opcao:has(input:checked) {
    border-color: var(--om-azul);
    background: var(--om-fundo-claro);
}

.carrinho-frete-opcao-nome {
    font-weight: 600;
}

.carrinho-frete-opcao-prazo {
    font-size: .875rem;
    color: var(--om-texto-suave);
}

.carrinho-frete-opcao-valor {
    font-weight: 700;
    color: var(--om-azul);
}

.carrinho-vazio {
    display: grid;
    justify-items: center;
    gap: .6rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.carrinho-vazio > i {
    font-size: 3rem;
    color: var(--om-borda);
}

.carrinho-vazio h1 {
    margin: 0;
    font-size: 1.5rem;
}

.carrinho-vazio p {
    margin: 0 0 .6rem;
    color: var(--om-texto-suave);
}

.carrinho-remover-aviso {
    margin-top: 1.5rem;
    font-size: .875rem;
    color: var(--om-texto-suave);
}

/* ============================ 5. CHECKOUT ============================ */
.checkout-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.8rem;
    align-items: start;
}

.checkout-dados {
    display: grid;
    gap: 1.4rem;
}

.checkout-bloco {
    margin: 0;
    padding: 1.4rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-lg);
    background: var(--om-fundo);
}

.checkout-bloco legend {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .5rem;
    font-family: var(--om-fonte-titulo);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--om-azul);
}

.checkout-campo {
    margin-bottom: .9rem;
}

.checkout-campo .form-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--om-texto-suave);
}

.checkout-campo.tem-erro .form-control {
    border-color: #dc2626;
}

.checkout-erro {
    display: block;
    margin-top: .25rem;
    color: #dc2626;
    font-size: .8125rem;
}

.checkout-bloco-nota {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 1rem 0 0;
    padding: .7rem .8rem;
    border-radius: var(--om-raio-sm);
    background: var(--om-fundo-cinza);
    font-size: .875rem;
    color: var(--om-texto-suave);
}

.checkout-bloco-nota a {
    margin-left: .3rem;
}

.checkout-formas {
    display: grid;
    gap: .5rem;
}

.checkout-forma {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio);
    cursor: pointer;
    transition: border-color var(--om-transicao);
}

.checkout-forma:hover {
    border-color: var(--om-azul-claro);
}

.checkout-forma:has(input:checked) {
    border-color: var(--om-azul);
    background: var(--om-fundo-claro);
}

.checkout-forma-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--om-fundo-claro);
    color: var(--om-azul);
}

.checkout-forma-texto {
    display: grid;
}

.checkout-forma-texto small {
    color: var(--om-texto-suave);
}

.checkout-seguranca {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1rem 0 0;
    font-size: .8125rem;
    color: var(--om-texto-suave);
}

.checkout-resumo {
    position: sticky;
    top: calc(var(--om-altura-cabecalho) + 1rem);
    padding: 1.4rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-lg);
    background: var(--om-fundo-cinza);
}

.checkout-resumo h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.checkout-itens {
    display: grid;
    gap: .7rem;
    margin: 0 0 1.1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--om-borda);
    list-style: none;
}

.checkout-itens li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: .5rem;
    align-items: center;
    font-size: .875rem;
}

.checkout-itens img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--om-raio-sm);
    background: var(--om-fundo);
}

.checkout-item-nome {
    line-height: 1.3;
}

.checkout-item-qtd {
    color: var(--om-texto-suave);
}

.checkout-item-valor {
    font-weight: 600;
}

.checkout-aceite {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0;
    font-size: .875rem;
    color: var(--om-texto-suave);
}

.checkout-aceite input {
    margin-top: .25rem;
    flex: 0 0 auto;
}

.checkout-sucesso {
    display: grid;
    justify-items: center;
    gap: .7rem;
    max-width: 620px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.checkout-sucesso > i {
    font-size: 3.5rem;
    color: #16a34a;
}

.checkout-sucesso h1 {
    margin: 0;
    font-size: 1.75rem;
}

.checkout-sucesso p {
    margin: 0;
    color: var(--om-texto-suave);
}

.checkout-sucesso-valor {
    font-size: 1.125rem;
    color: var(--om-azul) !important;
}

.checkout-sucesso .btn-link {
    margin-top: .5rem;
}

/* ============================ 6. PÁGINA DO PEDIDO ============================ */
/* Lista de pedidos dentro da conta. */
.conta-pedidos {
    display: grid;
    gap: .5rem;
}

.conta-pedido {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.1rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-sm);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.conta-pedido:hover,
.conta-pedido:focus-visible {
    border-color: var(--om-azul-claro);
    background: var(--om-fundo);
    color: inherit;
}

.conta-pedido-codigo {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}

.conta-pedido-data {
    font-size: .875rem;
    color: var(--om-texto-suave, #666);
}

.conta-pedido-valor {
    margin-left: auto;
    font-weight: 600;
}

/* Confirmação de posse: só aparece para quem não provou ser o cliente. */
.pedido-bloqueio {
    max-width: 34rem;
    margin-inline: auto;
    padding: 1.75rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio);
    background: var(--om-superficie, #fff);
    text-align: center;
}

.pedido-bloqueio h2 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
}

.pedido-confirmar {
    display: grid;
    gap: .9rem;
    margin-top: 1.25rem;
    text-align: left;
}

.pedido-confirmar .campo label {
    font-size: .875rem;
}

.pedido-confirmar .btn {
    width: 100%;
}

.pedido-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.pedido-cabecalho h1 {
    margin: 0;
}

.pedido-data {
    margin: .3rem 0 0;
    color: var(--om-texto-suave);
}

.pedido-status {
    margin: 0;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--om-fundo-claro);
    font-size: .875rem;
    font-weight: 600;
    color: var(--om-azul);
}

.pedido-status-pago,
.pedido-status-entregue {
    background: #dcfce7;
    color: #15803d;
}

.pedido-status-cancelado,
.pedido-status-recusado {
    background: #fee2e2;
    color: #b91c1c;
}

.pedido-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.8rem;
    align-items: start;
}

.pedido-itens {
    display: grid;
    gap: .7rem;
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
}

.pedido-itens li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: .7rem 0;
    border-bottom: 1px solid var(--om-borda);
    font-size: .9375rem;
}

.pedido-itens small {
    display: block;
    font-size: .8125rem;
    color: var(--om-texto-suave);
}

.pedido-item-total {
    font-weight: 700;
    color: var(--om-azul);
}

.pedido-info {
    padding: 1.4rem;
    border: 1px solid var(--om-borda);
    border-radius: var(--om-raio-lg);
    background: var(--om-fundo-cinza);
}

.pedido-info h2 {
    margin: 0 0 .5rem;
    font-size: 1rem;
}

.pedido-info h2:not(:first-child) {
    margin-top: 1.4rem;
}

.pedido-info p {
    font-size: .9375rem;
    line-height: 1.55;
}

.pedido-historico {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.pedido-historico li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding-left: .8rem;
    border-left: 3px solid var(--om-azul-claro);
}

.pedido-historico small {
    color: var(--om-texto-suave);
}

.pedido-duvida {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--om-borda);
}

/* ============================ 7. AVISO FLUTUANTE ============================ */
.carrinho-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1090;
    max-width: min(92vw, 420px);
    padding: .8rem 1.1rem;
    border-radius: var(--om-raio);
    background: var(--om-azul);
    color: #fff;
    font-size: .9375rem;
    font-weight: 500;
    box-shadow: var(--om-sombra-forte);
    transform: translate(-50%, 0);
    transition: opacity .25s ease, transform .25s ease;
}

.carrinho-toast-erro {
    background: #b91c1c;
}

.carrinho-toast.saindo {
    opacity: 0;
    transform: translate(-50%, 12px);
}

/* ============================ RESPONSIVO ============================ */
@media (max-width: 991.98px) {
    .carrinho-form,
    .checkout-colunas,
    .pedido-colunas {
        grid-template-columns: minmax(0, 1fr);
    }

    .carrinho-resumo,
    .checkout-resumo {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .carrinho-item {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            'foto info'
            'qtd  preco';
        gap: .8rem;
    }

    .carrinho-item-foto {
        grid-area: foto;
        width: 72px;
        height: 72px;
    }

    .carrinho-item-info { grid-area: info; }
    .carrinho-item-qtd   { grid-area: qtd; }
    .carrinho-item-preco { grid-area: preco; min-width: 0; }

    .carrinho-frete-opcao {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: .2rem;
    }

    .carrinho-frete-opcao-prazo,
    .carrinho-frete-opcao-valor {
        grid-column: 2;
    }

    .produto-frete-campo { flex-wrap: wrap; }
    .produto-frete-campo .form-control { max-width: none; flex: 1 1 130px; }

    .checkout-bloco { padding: 1.1rem; }
    .carrinho-frete-caixa { padding: 1.2rem; }
}

@media (max-width: 575.98px) {
    .carrinho-qtd-linha { flex-direction: column; align-items: stretch; }
    .carrinho-qtd-linha .btn { width: 100%; }
    .carrinho-qtd-campo .form-control { width: 100%; }
}