/* ===== Base ===== */
:root {
    --cor-primaria: #1f3a5f;
    --cor-destaque: #e8a33d;
    --cor-texto: #1d2330;
    --cor-suave: #5f6b7a;
    --cor-fundo: #f6f7f9;
    --cor-borda: #e4e7ec;
    --raio: 14px;
    --sombra: 0 6px 24px rgba(16, 24, 40, .07);
    --sombra-forte: 0 14px 34px rgba(16, 24, 40, .13);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-primaria); }

/* ===== Botões ===== */
.btn { border-radius: 10px; font-weight: 600; }

.btn-primaria {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}
.btn-primaria:hover, .btn-primaria:focus-visible {
    background: color-mix(in srgb, var(--cor-primaria) 85%, #000);
    border-color: color-mix(in srgb, var(--cor-primaria) 85%, #000);
    color: #fff;
}

.btn-outline-primaria {
    border: 1px solid var(--cor-borda);
    color: var(--cor-primaria);
    background: #fff;
}
.btn-outline-primaria:hover, .btn-outline-primaria:focus-visible {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    background: color-mix(in srgb, var(--cor-primaria) 6%, #fff);
}

.btn-destaque {
    background: var(--cor-destaque);
    border-color: var(--cor-destaque);
    color: #1d2330;
}
.btn-destaque:hover, .btn-destaque:focus-visible {
    background: color-mix(in srgb, var(--cor-destaque) 88%, #000);
    border-color: color-mix(in srgb, var(--cor-destaque) 88%, #000);
    color: #1d2330;
}

/* ===== Topo ===== */
.topo {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--cor-borda);
}
.topo .navbar { min-height: 68px; }
.marca-logo { max-height: 46px; max-width: 180px; width: auto; object-fit: contain; }
.marca-nome { font-weight: 800; font-size: 1.2rem; color: var(--cor-primaria); letter-spacing: -.01em; }
.topo .nav-link { font-weight: 500; color: var(--cor-texto); }
.topo .nav-link:hover { color: var(--cor-primaria); }
.navbar-toggler { border: 0; font-size: 1.7rem; color: var(--cor-primaria); padding: .2rem .4rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 25%, transparent); }

/* ===== Hero ===== */
.hero {
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--cor-destaque) 14%, transparent) 0, transparent 40%),
        linear-gradient(135deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 70%, #000));
    color: #fff;
    padding: 64px 0 88px;
}
.hero-banner { background: linear-gradient(90deg, rgb(233,185,160), rgb(213,139,132)); line-height: 0; overflow: hidden; }
.hero-banner-img { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }
.hero.hero-busca { padding: 26px 0 70px; }
.hero-com-imagem { background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-titulo { font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: -.02em; line-height: 1.1; }
.hero-texto { font-size: 1.1rem; opacity: .88; margin: 14px auto 28px; max-width: 560px; }

.busca { position: relative; max-width: 560px; margin: 0 auto; }
.busca .bi-search { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--cor-suave); }
.busca .form-control {
    height: 54px;
    border-radius: 999px;
    border: 0;
    padding-left: 48px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.busca .form-control:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-destaque) 55%, transparent); }

/* ===== Catálogo ===== */
.catalogo { margin-top: -44px; padding-bottom: 64px; }

.filtros {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--sombra);
    scrollbar-width: none;
    position: sticky;
    top: 76px;
    z-index: 10;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
    flex: 0 0 auto;
    border: 1px solid var(--cor-borda);
    background: #fff;
    color: var(--cor-texto);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 500;
    font-size: .95rem;
    transition: all .2s ease;
}
.filtro:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.filtro.ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

.barra-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 4px 14px; }
.sem-filtros .barra-lista { margin-top: 60px; }
.contagem { color: var(--cor-suave); font-size: .92rem; margin: 0; min-height: 1.3em; }
.ordenar .form-select { border-radius: 999px; border-color: var(--cor-borda); min-width: 170px; font-size: .9rem; }

.card-produto {
    background: #fff;
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-produto:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }

.card-imagem {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #eef0f3;
    border: 0;
    padding: 0;
    overflow: hidden;
}
.foto-quadrada .card-imagem { aspect-ratio: 1 / 1; }
.foto-paisagem .card-imagem { aspect-ratio: 4 / 3; }
.card-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-produto:hover .card-imagem img { transform: scale(1.04); }
.sem-imagem { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.2rem; color: #b5bcc6; }

.selo {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--cor-destaque);
    color: #1d2330;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 999px;
}

.card-corpo { padding: 14px 14px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.card-categoria {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-primaria);
    opacity: .75;
    margin-bottom: 4px;
}
.card-titulo { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-titulo button { all: unset; cursor: pointer; }
.card-titulo button:hover { color: var(--cor-primaria); }
.card-titulo button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; border-radius: 4px; }
.card-resumo {
    color: var(--cor-suave);
    font-size: .9rem;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-rodape { margin-top: auto; padding-top: 12px; width: 100%; }
.card-rodape .btn { white-space: normal; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.card-preco { display: block; font-weight: 800; font-size: 1.05rem; color: var(--cor-texto); }

.cores { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.cor { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }
.cor-mais { font-size: .75rem; color: var(--cor-suave); line-height: 16px; }
.cores-grandes { justify-content: flex-start; margin-top: 6px; }
.cores-grandes .cor { width: 26px; height: 26px; }
.tamanhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tamanho { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 4px 12px; font-weight: 600; font-size: .9rem; min-width: 42px; text-align: center; }
.modal-variacao { margin-top: 16px; }
.modal-rotulo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-suave); }

.vazio { text-align: center; color: var(--cor-suave); padding: 48px 16px; }
.vazio .bi { font-size: 2.2rem; display: block; margin-bottom: 8px; }

/* ===== Seções ===== */
.secao-titulo { font-weight: 800; font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -.01em; margin-bottom: 20px; }

.sobre { background: #fff; padding: 64px 0; }
.sobre-texto { color: var(--cor-suave); font-size: 1.05rem; line-height: 1.75; }

.contato { padding: 64px 0; }
.contato-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: var(--raio);
    padding: 18px 20px;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: var(--cor-texto);
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
    word-break: break-word;
}
a.contato-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); color: var(--cor-texto); }
.contato-card .bi { font-size: 1.5rem; color: var(--cor-primaria); flex: 0 0 auto; }
.contato-card strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-suave); }

/* ===== Rodapé ===== */
.rodape { background: #111827; color: #cbd2dc; padding: 26px 0 90px; font-size: .92rem; }
@media (min-width: 768px) { .rodape { padding-bottom: 26px; } }
.voltar-topo { color: #fff; text-decoration: none; }
.voltar-topo:hover { color: var(--cor-destaque); }

.whats-flutuante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 10px 25px rgba(37, 211, 102, .4);
    z-index: 1030;
    transition: transform .2s ease;
}
.whats-flutuante:hover { transform: scale(1.08); color: #fff; }

/* ===== Modal ===== */
.modal-content { border: 0; border-radius: 18px; }
.galeria-principal { aspect-ratio: 1 / 1; background: #eef0f3; border-radius: var(--raio); overflow: hidden; max-height: 72vh; margin: 0 auto; }
.foto-retrato .galeria-principal { aspect-ratio: 3 / 4; }
.foto-paisagem .galeria-principal { aspect-ratio: 4 / 3; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.galeria-miniaturas button {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: #eef0f3;
}
.galeria-miniaturas button.ativa { border-color: var(--cor-primaria); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.modal-titulo { font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
.modal-preco { font-weight: 800; font-size: 1.35rem; color: var(--cor-primaria); margin: 8px 0 0; }
.modal-descricao { color: var(--cor-suave); line-height: 1.7; margin-top: 14px; white-space: pre-line; }
.link-compartilhar { color: var(--cor-suave); text-decoration: none; font-weight: 500; }
.link-compartilhar:hover { color: var(--cor-primaria); }

/* ===== Responsivo ===== */
@media (max-width: 767.98px) {
    .hero { padding: 44px 0 76px; }
    .topo .navbar-collapse { padding: 8px 0 14px; }
    .filtros { border-radius: 16px; top: 72px; }
    .card-corpo { padding: 12px 10px 14px; }
    .card-titulo { font-size: .92rem; }
    .card-rodape .btn { font-size: .8rem; padding-left: 6px; padding-right: 6px; }
    .galeria-principal { max-height: 58vh; }
    .card-resumo { display: none; }
    .card-categoria { display: none; }
    .barra-lista { flex-wrap: wrap; }
    .ordenar .form-select { min-width: 150px; }
    .whats-flutuante { width: 52px; height: 52px; font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card-produto, .card-imagem img, .contato-card, .whats-flutuante { transition: none; }
}

/* ===== Loja: sacola, escolha de variação e checkout ===== */
.btn-sacola { position: relative; border: 0; background: transparent; color: var(--cor-primaria); font-size: 1.55rem; padding: .2rem .5rem; line-height: 1; }
.btn-sacola:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; border-radius: 8px; }
.sacola-qtd { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cor-primaria); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }

.escolha-nome { text-transform: none; letter-spacing: 0; color: var(--cor-texto); font-weight: 600; }
.cores-escolha { gap: 10px; }
.cores-escolha .cor { width: 34px; height: 34px; padding: 0; cursor: pointer; box-shadow: 0 0 0 2px #fff inset; transition: transform .15s ease; }
.cores-escolha .cor:hover { transform: scale(1.08); }
.cores-escolha .cor.escolhida { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
button.tamanho { background: #fff; color: var(--cor-texto); cursor: pointer; padding: 8px 14px; }
button.tamanho:hover { border-color: var(--cor-primaria); }
button.tamanho.escolhida { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.modal-rotulo { display: block; margin-bottom: 2px; }

.qtd { display: inline-flex; align-items: center; border: 1px solid var(--cor-borda); border-radius: 10px; overflow: hidden; background: #fff; }
.qtd button { border: 0; background: transparent; width: 38px; height: 38px; font-size: 1.15rem; font-weight: 600; color: var(--cor-texto); }
.qtd button:hover { background: var(--cor-fundo); }
.qtd input { width: 46px; height: 38px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd-pequena button { width: 32px; height: 32px; }
.qtd-pequena input { width: 38px; height: 32px; }
.aviso-escolha { margin: 12px 0 0; color: #b42318; font-weight: 600; font-size: .92rem; }

.sacola { max-width: 420px; }
.sacola .offcanvas-body { padding-top: 0; }
.sacola-vazia { text-align: center; color: var(--cor-suave); padding: 48px 0; }
.sacola-vazia .bi { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.sacola-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cor-borda); }
.sacola-foto { width: 70px; flex: 0 0 70px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #eef0f3; }
.sacola-foto img { width: 100%; height: 100%; object-fit: cover; }
.sacola-info { flex: 1; min-width: 0; font-size: .95rem; }
.sacola-var { display: block; color: var(--cor-suave); font-size: .85rem; }
.sacola-remover { border: 0; background: transparent; padding: 0; margin-top: 6px; color: var(--cor-suave); font-size: .82rem; text-decoration: underline; }
.sacola-remover:hover { color: #b42318; }
.sacola-rodape { border-top: 1px solid var(--cor-borda); padding-top: 14px; margin-top: 8px; position: sticky; bottom: 0; background: #fff; }

.minimo { margin-bottom: 12px; }
.minimo-barra { height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.minimo-barra span { display: block; height: 100%; width: 0; background: var(--cor-destaque); border-radius: 999px; transition: width .3s ease; }
.minimo-barra.completo span { background: #12b76a; }
.minimo-texto { margin: 6px 0 0; font-size: .88rem; font-weight: 600; color: #b54708; }
.minimo-texto.ok { color: #067647; }
.btn.disabled, .btn:disabled { opacity: .5; pointer-events: none; }

.checkout { padding: 32px 0 64px; }
.checkout h1 { font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); }
.bloco { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px; margin-bottom: 18px; }
.bloco h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.bloco h2 .passo { width: 28px; height: 28px; border-radius: 50%; background: var(--cor-primaria); color: #fff; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.checkout .form-control, .checkout .form-select { border-radius: 10px; min-height: 46px; }
.opcao-frete { display: flex; align-items: center; gap: 12px; border: 1px solid var(--cor-borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; background: #fff; }
.opcao-frete:hover { border-color: var(--cor-primaria); }
.opcao-frete input { flex: 0 0 auto; margin: 0; width: 18px; height: 18px; accent-color: var(--cor-primaria); }
.opcao-frete img { width: 56px; max-height: 26px; object-fit: contain; }
.opcao-frete .nome { flex: 1; min-width: 0; }
.opcao-frete .nome small { display: block; color: var(--cor-suave); }
.opcao-frete.ativa { border-color: var(--cor-primaria); box-shadow: 0 0 0 1px var(--cor-primaria) inset; }
.resumo { position: sticky; top: 90px; }
.resumo-linha { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.resumo-total { font-weight: 800; font-size: 1.25rem; border-top: 1px solid var(--cor-borda); margin-top: 8px; padding-top: 10px; }
.selo-seguro { color: var(--cor-suave); font-size: .85rem; text-align: center; margin: 10px 0 0; }
.status-pedido { text-align: center; padding: 26px 16px; }
.status-pedido .bi { font-size: 3rem; display: block; margin-bottom: 6px; }
.status-ok .bi { color: #12b76a; }
.status-espera .bi { color: #f79009; }
.status-erro .bi { color: #d92d20; }

.selo-esgotado { background: #3b3f4a; color: #fff; }
.modal-esgotado { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #f1f1f3; color: #3b3f4a; font-weight: 600; }