/* ============================================================================
   Loja Audio Systems — complementos ao tema.
   O styles.css é o MESMO do Audio Systems University (SB UI Kit Pro com a
   paleta da University: teal #41887A, degradê #428C7D → #304746). Aqui ficam
   só as peças que a loja tem e a University não: busca e carrinho no menu,
   cartões de produto, galeria, carrossel.
   ============================================================================ */

:root {
    --store-teal: #41887A;
    --store-teal-dark: #304746;
    --store-ink: #212832;
}

.store-body { min-height: 40vh; }

/* ---------- Menu ---------- */

/* O tema fixa o logo do menu em 1rem; o da loja (350x161) precisa de mais. */
.navbar-marketing .navbar-brand img.store-logo { height: 54px; width: auto; }

.store-navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }

.store-search .form-control { border: 0; }
.store-search .btn svg { width: 1.1rem; height: 1.1rem; }

.store-cart-badge { font-size: .65rem; }

.store-categories-menu { max-height: 70vh; overflow-y: auto; min-width: 16rem; }

@media (min-width: 992px) {
    .store-search { max-width: 520px; }
}

/* Celular: o menu aberto precisa de fundo — a faixa transparente do topo não
   dá contraste para os itens. */
@media (max-width: 991.98px) {
    .store-navbar .navbar-collapse { background: var(--store-ink); margin: .5rem -1rem 0; padding: .5rem 1rem 1rem; border-radius: .5rem; }
    .navbar-marketing .navbar-brand img.store-logo { height: 42px; }
}

/* ---------- Cabeçalhos ---------- */

/* A curva do tema fica 1px acima do fim da faixa em alguns zooms (subpixel),
   e a fresta mostra uma linha do degradê. Encostar 1px resolve. */
.page-header-ui .svg-border-rounded svg, section .svg-border-rounded svg { bottom: -1px; }

/* Páginas internas: a faixa da University com menos altura — numa loja o
   conteúdo (produto, carrinho) precisa subir mais na tela. */
/* O menu fixo ocupa ~6rem; o título precisa de respiro abaixo dele, senão
   parece colado no menu. */
.store-header { padding-top: 10.5rem; padding-bottom: 4.5rem; }
.store-header .page-header-ui-content .page-header-ui-title { font-size: 2rem; }
.store-header .page-header-ui-content .page-header-ui-text { opacity: .8; }
/* Faixa reta só com a altura do menu (produto e grades de produto): o menu é
   transparente e fixo, então precisa de fundo escuro atrás; o título da página
   fica no corpo, e o conteúdo sobe na tela. */
.store-header-bar { height: 6rem; }

@media (max-width: 991.98px) {
    .store-header { padding-top: 9rem; padding-bottom: 3.5rem; }
}

@media (max-width: 575.98px) {
    .store-header { padding-top: 8.5rem; padding-bottom: 3rem; }
    .store-header .page-header-ui-content .page-header-ui-title { font-size: 1.6rem; }
    .store-header .page-header-ui-content .page-header-ui-text { font-size: 1rem; }
}

/* Home */
.store-hero {
    position: relative;
    background-image:
        linear-gradient(100deg, rgba(8,15,17,0.95) 0%, rgba(8,15,17,0.82) 45%, rgba(8,15,17,0.45) 100%),
        url('/images/store_hero.jpg');
    background-size: cover;
    background-position: center center;
}
/* Altura próxima da faixa preta da primeira versão: o hero apresenta a loja,
   mas os produtos precisam aparecer logo na primeira tela. */
.store-hero { padding-top: 0; padding-bottom: 0; }
.store-hero .page-header-ui-content { padding-top: 9.5rem; padding-bottom: 4.5rem; }
.store-hero .page-header-ui-content .page-header-ui-title { font-size: 2.4rem; }

@media (max-width: 575.98px) {
    .store-hero .page-header-ui-content .page-header-ui-title { font-size: 2rem; }
    .store-hero .page-header-ui-content { padding-top: 8.5rem; padding-bottom: 3.5rem; }
    .store-hero .page-header-ui-content .page-header-ui-text { font-size: 1rem; }
}

/* Aviso (TempData) na home fica por cima do hero, abaixo do menu. */
.store-alert-home { position: relative; z-index: 2; margin-top: -2.5rem; margin-bottom: 1rem; }

.store-banners { border-radius: .75rem; overflow: hidden; box-shadow: 0 1rem 2rem rgba(33, 40, 50, .15); }

/* Formato fixo (o mesmo que o Backoffice pede: 1920 x 600 e 800 x 1000). Uma
   imagem fora do formato é cortada nas bordas em vez de esticar o carrossel. */
.store-banners img { aspect-ratio: 16 / 5; object-fit: cover; }

@media (max-width: 767.98px) {
    .store-banners img.store-banner-has-mobile { aspect-ratio: 4 / 5; }
}

/* Seção cujas sombras passam da borda de baixo: fica por cima da seguinte
   (senão o fundo da próxima seção corta a sombra dos cartões). */
.store-section-over { position: relative; z-index: 1; }

/* Seção "por que comprar aqui" e categorias da home */
.store-feature .icon-stack svg { width: 1.5rem; height: 1.5rem; }

.category-card { border: 0; transition: transform .15s ease, box-shadow .15s ease; }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(33, 40, 50, .12) !important; }
.category-card img { aspect-ratio: 4 / 3; object-fit: cover; }
.category-card .icon-stack svg { width: 1.4rem; height: 1.4rem; }

.store-brand { display: inline-block; padding: .65rem 1.25rem; border-radius: 2rem; background: #fff; color: var(--store-ink);
               font-weight: 600; text-decoration: none; box-shadow: 0 .15rem .5rem rgba(33, 40, 50, .08); transition: color .15s, box-shadow .15s; }
.store-brand:hover { color: var(--store-teal); box-shadow: 0 .5rem 1rem rgba(33, 40, 50, .12); }

/* ---------- Cartão de produto ---------- */

/* A área da foto tem proporção fixa e a foto fica inteira ("contain"): foto
   de equipamento cortada esconde exatamente o que o cliente quer ver
   (painel, conectores). */
.product-card { border: 0; transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(33, 40, 50, .12) !important; }
.product-card-image { position: relative; display: flex; align-items: center; justify-content: center;
                      aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid #eef1f5; padding: .75rem; }
.product-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card-image .bi { font-size: 2.5rem; }
.product-card-badge { position: absolute; top: .5rem; left: .5rem; }
.product-card-price { font-size: 1.15rem; font-weight: 700; color: var(--store-ink); white-space: nowrap; }
.product-card-unavailable .product-card-image img { opacity: .55; }

/* ---------- Página do produto ---------- */

.product-gallery-main { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 1rem; }
.product-gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-gallery-main .bi { font-size: 4rem; }
.product-gallery-thumb { width: 72px; height: 72px; padding: .25rem; }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery-thumb.active { border-color: var(--store-teal) !important; box-shadow: 0 0 0 2px rgba(65, 136, 122, .25); }

.product-price { font-size: 2rem; font-weight: 700; color: var(--store-ink); line-height: 1.1; }

/* Promoção: "De: R$ X" riscado em cima, "Por:" antes do preço que vale. */
.product-price-from { color: #8a929c; }
.product-price-from del { color: #8a929c; }
.product-price-label { font-size: .55em; font-weight: 600; color: #69707a; vertical-align: .2em; }
.product-card-price .product-price-label { font-size: .75em; vertical-align: .1em; }
.product-price-saving { font-size: .875rem; font-weight: 600; color: #1c7a4e; }

.product-description p, .product-description ul { margin-bottom: 1rem; }

/* Caixas brancas das páginas internas (carrinho, conta, checkout) seguem os
   cartões da University: sem borda, com sombra. */
.store-body .card { border: 0; }

.border-teal { border-color: var(--store-teal) !important; }

/* Celular: dois cartões por linha deixam pouco espaço — o preço não pode
   quebrar ("R$" sozinho numa linha) e o respiro interno do cartão diminui. */
@media (max-width: 575.98px) {
    .product-card .card-body { padding: .75rem; }
    .product-card .card-title { font-size: .9rem; }
    .product-card-price { font-size: 1rem; }
    .product-price { font-size: 1.6rem; }
}

/* ---------- Login, cadastro e senha ---------- */

/* A faixa dessas telas é mais alta embaixo e o cartão sobe por cima dela,
   como nos cartões sobrepostos do University. */
.store-header-auth { padding-bottom: 8.5rem; }
.store-auth { margin-top: -6rem; position: relative; z-index: 2; border-radius: 1rem; }
.store-auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
                   border-radius: 50%; margin-bottom: 1rem; color: #fff;
                   background-image: linear-gradient(135deg, #428C7D 0%, #304746 100%); }
.store-auth-icon svg { width: 1.3rem; height: 1.3rem; }
.store-auth-side { color: #fff; background-image: linear-gradient(135deg, #428C7D 0%, #304746 100%); }
.store-auth-side svg { width: 1rem; height: 1rem; vertical-align: -2px; }

@media (max-width: 991.98px) {
    .store-header-auth { padding-bottom: 7.5rem; }
}

@media (max-width: 575.98px) {
    .store-header-auth { padding-bottom: 6.5rem; }
    .store-auth { margin-top: -4.5rem; }
}

/* ---------- Menu da área logada ---------- */

.min-w-0 { min-width: 0; }

.store-account-nav { border: 0; border-radius: 1rem; overflow: hidden; }
.store-account-nav-header { align-items: center; gap: .75rem; padding: 1.25rem;
                            background-image: linear-gradient(135deg, #428C7D 0%, #304746 100%); }
.store-account-avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
                        border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; font-size: 1.15rem; }

.store-account-nav-links { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; }
.store-account-nav-links a, .store-account-nav-footer button {
    display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: .6rem;
    color: #4a515b; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s;
}
.store-account-nav-links svg, .store-account-nav-footer svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.store-account-nav-links a:hover { background: rgba(65, 136, 122, .1); color: #1c5c58; }
.store-account-nav-links a.active { background: var(--store-teal); color: #fff; box-shadow: 0 .35rem .8rem rgba(65, 136, 122, .3); }
.store-account-nav-links a.store-account-danger:not(.active) { color: #c0392b; }
.store-account-nav-links a.store-account-danger:not(.active):hover { background: rgba(192, 57, 43, .08); }
.store-account-nav-links a.store-account-danger.active { background: #c0392b; box-shadow: none; }

.store-account-nav-footer { border-top: 1px solid #eef1f5; padding: .75rem; }
.store-account-nav-footer button { width: 100%; border: 0; background: none; color: #69707a; }
.store-account-nav-footer button:hover { background: #f2f6fc; color: var(--store-ink); }

@media (min-width: 992px) {
    .store-account-nav { position: sticky; top: 7.5rem; }
}

/* Celular e tablet: uma fileira de pílulas que rola para o lado. */
@media (max-width: 991.98px) {
    .store-account-nav { background: transparent; box-shadow: none !important; border-radius: 0; overflow: visible; }
    .store-account-nav-links { flex-direction: row; overflow-x: auto; padding: 0 0 .25rem; gap: .5rem; scrollbar-width: none; }
    .store-account-nav-links::-webkit-scrollbar { display: none; }
    .store-account-nav-links a { flex: 0 0 auto; padding: .55rem 1rem; border-radius: 2rem; background: #fff; white-space: nowrap;
                                 box-shadow: 0 .15rem .5rem rgba(33, 40, 50, .08); }
}

/* ---------- Celular: ajustes gerais ---------- */

@media (max-width: 575.98px) {
    .store-body .card-body.p-4, .store-body .card-body.p-md-5 { padding: 1.25rem !important; }
}

.store-cart-thumb { width: 80px; height: 80px; }

@media (max-width: 575.98px) {
    .store-cart-thumb { width: 64px; height: 64px; }
}

/* ---------- Avaliações ---------- */

.store-stars { color: #f4a100; white-space: nowrap; letter-spacing: .05em; }
.store-star-on { color: #f4a100; }

/* Comentário em texto puro: as quebras de linha do cliente valem. */
.store-review-text { white-space: pre-line; overflow-wrap: anywhere; }
.store-review-reply { border-left: 3px solid var(--store-teal); background: #f2f6fc; padding: .75rem 1rem; border-radius: 0 .5rem .5rem 0; }

/* Escolha da nota: rádios em ordem inversa (5 → 1) e row-reverse, para o
   hover/checked acender a estrela e as anteriores só com CSS. */
.store-rating-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.store-rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.store-rating-input label { font-size: 2rem; line-height: 1; color: #d4d9e1; cursor: pointer; transition: color .1s, transform .1s; }
.store-rating-input label:hover,
.store-rating-input label:hover ~ label,
.store-rating-input input:checked ~ label { color: #f4a100; }
.store-rating-input label:hover { transform: scale(1.1); }
.store-rating-input input:focus-visible + label { outline: 2px solid var(--store-teal); outline-offset: 2px; border-radius: .25rem; }

/* O contador fica preso ao canto do ícone, DENTRO do link (o translate-middle
   do Bootstrap o centralizava na borda, e metade dele encostava no botão da
   conta). A margem do link separa o carrinho do botão. */
.store-cart-link { margin-right: 1.25rem !important; }
.store-cart-link .store-cart-badge { left: auto !important; right: 0; top: .1rem !important; transform: translate(35%, -35%) !important; min-width: 1.25rem; }

/* ---------- Ambiente de testes (Store:Homologation) ---------- */

/* Faixa fixa no rodapé da tela: não desloca o menu fixo do topo e fica
   visível em toda página. */
.store-homologacao-faixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; padding: .4rem 1rem;
                           background: #f4a100; color: #212832; font-size: .85rem; font-weight: 600; text-align: center;
                           box-shadow: 0 -.25rem .75rem rgba(33, 40, 50, .2); }
.store-homologacao { padding-bottom: 2.2rem; }

/* ---------- Página de manutenção (loja desligada no Backoffice) ---------- */

.store-maintenance { min-height: 100vh; }
.store-maintenance-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
                          gap: 2rem; padding: 3rem 1rem; }
.store-maintenance-logo { height: 64px; width: auto; }
.store-maintenance-card { width: 100%; max-width: 560px; border-radius: 1rem; }
.store-maintenance-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
                          border-radius: 50%; background: rgba(65, 136, 122, .12); color: #41887A; font-size: 1.75rem; }
.store-maintenance-footer { color: rgba(255, 255, 255, .7); text-align: center; }
@media (max-width: 575.98px) {
    .store-maintenance-logo { height: 48px; }
}

/* Janela do pagamento com cartão (página do Safrapay num iframe, no pedido) */
.store-cartao-frame { display: block; width: 100%; height: min(720px, 78vh); border: 0; background: #fff; }
@media (max-width: 575.98px) {
    .store-cartao-frame { height: calc(100vh - 7rem); }
}

/* ============================================================================
   Componentes da loja (padrão visual único: botões, trilha, ordenação, frete,
   ficha técnica, galeria, confirmação). Cores: teal da marca e, nas ações
   destrutivas, um vermelho "desbotado" — nunca o vermelho vivo.
   ============================================================================ */

:root {
    --store-danger: #c96f68;
    --store-danger-dark: #b35a53;
    --store-danger-soft: #fbeeed;
    --store-line: #e6eaf0;
    --store-soft: rgba(65, 136, 122, .1);
}

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

.store-body .btn { border-radius: .6rem; font-weight: 600; }
.store-body .btn-sm { border-radius: .5rem; }

/* Botões sempre com cor sólida: nada de botão vazado (só borda) ou branco. */

/* Ação neutra (voltar, cancelar, continuar comprando): cinza sólido, fonte branca. */
.btn-store-neutral { background: #7a828d; color: #fff; border: 1px solid #7a828d; }
.btn-store-neutral:hover, .btn-store-neutral:focus { background: #5f6771; border-color: #5f6771; color: #fff; box-shadow: 0 .35rem .8rem rgba(33, 40, 50, .2); }

/* Escolha entre opções (Pix ou cartão, pessoa física ou jurídica): cinza claro
   preenchido; a escolhida fica teal. */
.btn-store-choice { background: #e9edf2; color: var(--store-ink); border: 1px solid #e9edf2; }
.btn-store-choice:hover { background: #dde3ea; border-color: #dde3ea; color: var(--store-ink); }
.btn-check:checked + .btn-store-choice, .btn-check:focus-visible + .btn-store-choice { background: var(--store-teal); border-color: var(--store-teal); color: #fff; }

/* Ação secundária: fundo teal claro. */
.btn-store-soft { background: var(--store-soft); color: #1c5c58; border: 1px solid transparent; }
.btn-store-soft:hover, .btn-store-soft:focus { background: var(--store-teal); color: #fff; box-shadow: 0 .35rem .8rem rgba(65, 136, 122, .3); }

/* Ação destrutiva (remover, cancelar): vermelho desbotado, fonte branca. */
.btn-store-danger { background: var(--store-danger); color: #fff; border: 1px solid var(--store-danger); }
.btn-store-danger:hover, .btn-store-danger:focus { background: var(--store-danger-dark); border-color: var(--store-danger-dark); color: #fff; box-shadow: 0 .35rem .8rem rgba(201, 111, 104, .3); }

/* Dúvidas pelo WhatsApp: verde sólido. */
.btn-store-whatsapp { background: #1fb95b; color: #fff; border: 1px solid #1fb95b; }
.btn-store-whatsapp:hover, .btn-store-whatsapp:focus { background: #179a4b; border-color: #179a4b; color: #fff; box-shadow: 0 .35rem .8rem rgba(37, 211, 102, .3); }

/* ---------- Campos ---------- */

.store-body .form-control, .store-body .form-select, .store-modal .form-control, .store-modal .form-select { border-radius: .6rem; border-color: #d4dae3; }
.store-body .form-control:focus, .store-body .form-select:focus,
.store-modal .form-control:focus, .store-modal .form-select:focus { border-color: var(--store-teal); box-shadow: 0 0 0 .2rem rgba(65, 136, 122, .15); }
.store-body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.store-body .input-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- Avisos ---------- */

main .alert { border: 0; border-radius: .75rem; }
.alert-store-danger { background: var(--store-danger-soft); color: #8f3b35; border-left: 4px solid var(--store-danger) !important; }

/* ---------- Trilha ("você está em") ---------- */

.store-breadcrumb { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: .25rem; margin-bottom: 1.5rem;
                    padding: .45rem 1.1rem; background: #fff; border-radius: 2rem; font-size: .85rem;
                    box-shadow: 0 .15rem .6rem rgba(33, 40, 50, .08);
                    --bs-breadcrumb-divider: '\203A'; --bs-breadcrumb-item-padding-x: .55rem; --bs-breadcrumb-divider-color: #a7aeb8; }
.store-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; }
.store-breadcrumb .breadcrumb-item + .breadcrumb-item::before { font-size: 1.05rem; line-height: 1; }
.store-breadcrumb a { color: #4a515b; text-decoration: none; font-weight: 500; transition: color .15s; }
.store-breadcrumb a:hover { color: var(--store-teal); }
.store-breadcrumb .breadcrumb-item.active { color: var(--store-teal-dark); font-weight: 600; }
.store-breadcrumb .breadcrumb-item.active span { display: inline-block; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.store-breadcrumb .bi-house-door { font-size: .95rem; margin-right: .35rem; }

@media (max-width: 575.98px) {
    .store-breadcrumb .breadcrumb-item.active span { max-width: 11rem; }
}

/* ---------- Barra da listagem e ordenação ---------- */

.store-listbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.store-count { display: inline-flex; align-items: center; gap: .4rem; color: #69707a; font-size: .9rem; }
.store-count strong { color: var(--store-ink); }

.store-sort .dropdown-toggle { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #d4dae3; border-radius: 2rem;
                               padding: .45rem 1rem; font-size: .875rem; color: var(--store-ink); font-weight: 500; box-shadow: 0 .15rem .5rem rgba(33, 40, 50, .06); }
.store-sort .dropdown-toggle:hover, .store-sort .dropdown-toggle.show { border-color: var(--store-teal); color: var(--store-teal); }
.store-sort .dropdown-toggle .bi { color: var(--store-teal); }
.store-sort-label { color: #8a929c; font-weight: 400; }

.store-body .dropdown-menu { border: 0; border-radius: .9rem; padding: .4rem; box-shadow: 0 1rem 2rem rgba(33, 40, 50, .15); }
.store-body .dropdown-item { border-radius: .55rem; padding: .5rem .85rem; font-size: .9rem; }
.store-body .dropdown-item:hover { background: var(--store-soft); color: #1c5c58; }
.store-body .dropdown-item.active { background: var(--store-teal); color: #fff; }

.store-chip { display: inline-flex; align-items: center; padding: .4rem .95rem; border-radius: 2rem; background: #fff; color: #4a515b;
              font-size: .85rem; font-weight: 500; text-decoration: none; box-shadow: 0 .15rem .5rem rgba(33, 40, 50, .08); transition: color .15s, box-shadow .15s; }
.store-chip:hover { color: var(--store-teal); box-shadow: 0 .4rem .9rem rgba(33, 40, 50, .12); }
/* Filtro aplicado: o clique tira o filtro. */
.store-chip-active { background: var(--store-soft); color: #1c5c58; }

/* ---------- Título no corpo (páginas com a faixa reta) ---------- */

.store-page-title { font-size: 1.75rem; font-weight: 600; color: var(--store-ink); margin-bottom: .35rem; }
.store-page-intro { color: #69707a; max-width: 52rem; }
@media (max-width: 575.98px) {
    .store-page-title { font-size: 1.45rem; }
}

/* ---------- Filtros da grade (marca e preço) ---------- */

.store-filters { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 .15rem .5rem rgba(33, 40, 50, .06); }
.store-filter-group + .store-filter-group { border-top: 1px solid var(--store-line); margin-top: 1.1rem; padding-top: 1.1rem; }
.store-filter-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--store-ink); margin-bottom: .75rem; }
.store-filter-option { margin-bottom: .45rem; }
.store-filter-option .form-check-label { font-size: .9rem; color: #4a515b; cursor: pointer; }
.store-filter-option .form-check-input:checked { background-color: var(--store-teal); border-color: var(--store-teal); }
.store-filter-count { color: #a7aeb8; font-size: .8rem; margin-left: .2rem; }
/* Marca única da página: marcada e travada, mas sem o apagado do "desabilitado". */
.store-filter-fixed .form-check-input:disabled, .store-filter-fixed .form-check-input:disabled ~ .form-check-label { opacity: 1; cursor: default; }
.store-filter-clear { display: inline-block; margin-top: 1rem; font-size: .85rem; color: #69707a; text-decoration: none; }
.store-filter-clear:hover { color: var(--store-teal); }
@media (min-width: 992px) {
    .store-filters { position: sticky; top: 6.5rem; }
}

.store-body .pagination { gap: .35rem; }
.store-body .page-link { border: 0; border-radius: .6rem !important; color: #4a515b; min-width: 2.4rem; text-align: center; box-shadow: 0 .15rem .5rem rgba(33, 40, 50, .08); }
.store-body .page-item.active .page-link { background: var(--store-teal); color: #fff; }

/* ---------- Calculadora de frete (produto e carrinho) ---------- */

.store-shipping { border: 1px solid var(--store-line); border-radius: .9rem; padding: 1rem; background: #fbfcfe; }
.store-shipping-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--store-ink); margin-bottom: .6rem; }
.store-shipping-title .bi { color: var(--store-teal); font-size: 1.1rem; }
.store-shipping-form { display: flex; gap: .5rem; }
.store-shipping-form .form-control { max-width: 11rem; }
.store-shipping-help { font-size: .8rem; }
.store-shipping-free { font-size: .85rem; color: #1c7a4e; font-weight: 500; margin-bottom: .6rem; }

.store-shipping-options { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .5rem; }
.store-shipping-option { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem;
                         padding: .65rem .85rem; background: #fff; border: 1px solid var(--store-line); border-radius: .7rem; }
.store-shipping-option-icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
                              background: var(--store-soft); color: var(--store-teal); }
.store-shipping-option-name { font-weight: 600; font-size: .9rem; color: var(--store-ink); line-height: 1.25; }
.store-shipping-option-name small { display: block; font-weight: 400; color: #69707a; font-size: .8rem; margin-top: .15rem; }
.store-shipping-option-price { font-weight: 700; color: var(--store-ink); white-space: nowrap; }
.store-shipping-option-price.free { color: #1c7a4e; }
.store-shipping-option.cheapest { border-color: rgba(65, 136, 122, .45); }
.store-shipping-note { font-size: .78rem; color: #8a929c; margin-top: .5rem; }

/* ---------- Simulação de parcelas (cartão no fechamento) ---------- */

.store-installments { border: 1px solid var(--store-line); border-radius: .9rem; padding: 1rem; background: #fbfcfe; }
.store-installments-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--store-ink); margin-bottom: .6rem; }
.store-installments-title .bi { color: var(--store-teal); font-size: 1.1rem; }
/* Em colunas, lidas de cima para baixo (1x a 9x, depois 10x a 18x). */
.store-installments-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
.store-installments-list li { display: flex; align-items: baseline; gap: .35rem; padding: .3rem 0; border-bottom: 1px solid #f0f2f6; font-size: .875rem; break-inside: avoid; }
.store-installments-list li span { min-width: 3.75rem; color: #69707a; }
.store-installments-list li strong { color: var(--store-ink); white-space: nowrap; }
@media (min-width: 768px) {
    .store-installments-list { columns: 3; }
}

/* ---------- Escolhas em cartão (endereço e entrega no fechamento) ---------- */

.store-choice { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; margin-bottom: .6rem; cursor: pointer; background: #fff;
                border: 1px solid var(--store-line); border-radius: .8rem; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.store-choice:hover { border-color: rgba(65, 136, 122, .5); }
.store-choice:has(input:checked) { border-color: var(--store-teal); background: rgba(65, 136, 122, .05); box-shadow: 0 0 0 1px var(--store-teal); }
.store-choice .form-check-input { margin: 0; flex: 0 0 auto; }
.store-choice .form-check-input:checked { background-color: var(--store-teal); border-color: var(--store-teal); }
.store-choice-price { font-weight: 700; white-space: nowrap; }
.store-choice-price.free { color: #1c7a4e; }

/* ---------- Ficha técnica ---------- */

.store-specs { background: #fff; border-radius: .9rem; overflow: hidden; box-shadow: 0 .15rem .6rem rgba(33, 40, 50, .08); margin: 0; }
.store-spec { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid #f0f2f6; }
.store-spec:last-child { border-bottom: 0; }
.store-spec:nth-child(even) { background: #fafbfd; }
.store-spec dt { font-weight: 500; color: #69707a; font-size: .875rem; }
.store-spec dd { margin: 0; font-weight: 600; color: var(--store-ink); font-size: .9rem; overflow-wrap: anywhere; }

.store-section-title { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; margin-bottom: 1rem; }
.store-section-title .bi { color: var(--store-teal); }

/* ---------- Galeria e visualizador de fotos ---------- */

.product-gallery-main { position: relative; cursor: zoom-in; border-radius: .9rem !important; transition: box-shadow .15s; }
.product-gallery-main:hover { box-shadow: 0 .75rem 1.5rem rgba(33, 40, 50, .1); }
.product-gallery-zoom { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem;
                        padding: .35rem .75rem; border-radius: 2rem; background: rgba(33, 40, 50, .72); color: #fff; font-size: .78rem; pointer-events: none; }
.product-gallery-main .product-gallery-zoom .bi { font-size: .85rem; }
.product-gallery-thumb { border-radius: .6rem !important; transition: border-color .15s; }
.product-gallery-thumb:hover { border-color: var(--store-teal) !important; }

.store-viewer .modal-content { background: rgba(15, 20, 24, .97); border: 0; }
.store-viewer .modal-header { border: 0; color: #fff; }
.store-viewer .btn-close { filter: invert(1); opacity: .8; }
.store-viewer-counter { font-size: .9rem; color: rgba(255, 255, 255, .75); }
.store-viewer .carousel-item { height: calc(100vh - 11rem); }
.store-viewer .carousel-item > div { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 4.5rem; }
.store-viewer .carousel-item img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; background: #fff; border-radius: .5rem; }
.store-viewer .carousel-control-prev, .store-viewer .carousel-control-next { width: 4.5rem; opacity: 1; }
.store-viewer-nav { display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
                    background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.4rem; transition: background-color .15s; }
.store-viewer .carousel-control-prev:hover .store-viewer-nav, .store-viewer .carousel-control-next:hover .store-viewer-nav { background: var(--store-teal); }
.store-viewer-thumbs { display: flex; justify-content: center; gap: .5rem; padding: .75rem; overflow-x: auto; }
.store-viewer-thumbs button { flex: 0 0 auto; width: 64px; height: 64px; padding: .2rem; border-radius: .5rem; background: #fff; border: 2px solid transparent; opacity: .55; transition: opacity .15s, border-color .15s; }
.store-viewer-thumbs button.active, .store-viewer-thumbs button:hover { opacity: 1; border-color: var(--store-teal); }
.store-viewer-thumbs img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 575.98px) {
    .store-viewer .carousel-item > div { padding: 0 .5rem; }
    .store-viewer .carousel-control-prev, .store-viewer .carousel-control-next { width: 3rem; }
}

/* ---------- Modais (confirmação, cancelamento) — substituem o confirm() ---------- */

.store-modal .modal-content { border: 0; border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(33, 40, 50, .25); }
.store-modal .modal-header { border: 0; padding: 1.5rem 1.5rem 0; }
.store-modal .modal-body { padding: 1rem 1.5rem; }
.store-modal .modal-footer { border: 0; padding: 0 1.5rem 1.5rem; gap: .5rem; }
.store-modal .btn { border-radius: .6rem; font-weight: 600; }
.store-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
                    font-size: 1.4rem; background: var(--store-danger-soft); color: var(--store-danger); flex: 0 0 auto; }
.store-modal-icon.neutral { background: var(--store-soft); color: var(--store-teal); }

/* ---------- Página do produto: caixa de compra ---------- */

.store-buybox { background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 .25rem 1rem rgba(33, 40, 50, .08); }
.store-stock { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 2rem; font-size: .85rem; font-weight: 600; }
.store-stock.in { background: #e6f5ee; color: #1c7a4e; }
.store-stock.out { background: #f1f3f6; color: #69707a; }
.store-stock.sku { background: #f1f3f6; color: #4a515b; font-weight: 500; }
.store-qty { max-width: 90px; }

/* ---------- Página do pedido ---------- */

.store-back { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- Textos (políticas, Quem somos) ---------- */

.store-prose { background: #fff; border-radius: 1rem; padding: 2rem 2.25rem; box-shadow: 0 .25rem 1rem rgba(33, 40, 50, .08); line-height: 1.7; color: #3d444d; }
.store-prose h2 { color: var(--store-ink); font-weight: 700; padding-top: .5rem; }
.store-prose h2:first-child { margin-top: 0 !important; }
.store-prose ul { padding-left: 1.25rem; }
.store-prose li { margin-bottom: .35rem; }
.store-prose li::marker { color: var(--store-teal); }
.store-prose-card { border-radius: 1rem; }

@media (max-width: 575.98px) {
    .store-prose { padding: 1.35rem 1.25rem; }
}