/* ================================================================
   Loja – tema multi-tenant
   Cores injetadas como variáveis CSS pelo layout (config do tenant).
   ================================================================ */

:root {
    --primary:    #004b93;
    --secondary:  #ff6900;
    --primary-dk: #003b74;
    --bg:         #f5f7fa;
}

body {
    background: var(--bg);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Topbar ────────────────────────────────────────────────────── */
.loja-topbar {
    background: var(--primary-dk);
    color: #fff;
    padding: 7px 0;
    font-size: 0.82rem;
}

/* ── Header ────────────────────────────────────────────────────── */
.loja-header {
    background: #fff;
    padding: 16px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.loja-logo {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loja-logo:hover { color: var(--primary); }

.loja-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.loja-location {
    line-height: 1.3;
    font-size: 0.85rem;
    color: #555;
}

.loja-location strong { color: #212121; font-size: 0.92rem; }

/* Busca */
.loja-search-btn {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #fff !important;
}

.loja-search-btn:hover {
    filter: brightness(0.9);
}

/* Ícones direita */
.loja-header-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.loja-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #444;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    transition: background .15s, color .15s;
    gap: 2px;
}

.loja-icon-btn i { font-size: 1.4rem; }
.loja-icon-btn:hover { background: #f0f0f0; color: var(--primary); }

.loja-cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff !important;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background .2s;
    white-space: nowrap;
}

.loja-cart-btn:hover { background: var(--primary-dk); color: #fff; }

.loja-cart-btn i { font-size: 1.1rem; }

.loja-cart-count {
    background: var(--secondary);
    color: #fff;
    border-radius: 10px;
    padding: 0 7px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    line-height: 20px;
    height: 20px;
    display: inline-block;
}

/* ── Menu de categorias ────────────────────────────────────────── */
.loja-menu {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 3px solid var(--primary);
    /* SEM overflow — qualquer overflow corta o dropdown (position:absolute) */
}

.loja-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Posicionamento correto para o dropdown */
.loja-nav-list > li.dropdown {
    position: relative;
}

/* Links e botão da barra de nav — seletor direto para não vazar no dropdown-menu */
.loja-nav-list > li > .loja-nav-link {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    line-height: 1.4;
}

.loja-nav-list > li > .loja-nav-link:hover,
.loja-nav-list > li > .loja-nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.loja-nav-dept {
    font-weight: 700 !important;
    color: var(--primary) !important;
}

.loja-menu ul li a,
.loja-menu ul li span {
    display: block;
    padding: 11px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    transition: color .15s, border-color .15s;
}

.loja-menu ul li a:hover,
.loja-menu ul li span:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.loja-menu ul li.departamentos > a,
.loja-menu ul li.departamentos > span {
    color: var(--primary);
    font-weight: 700;
}

/* ── Hero banner ───────────────────────────────────────────────── */
.loja-hero {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #2567ad));
    padding: 72px 0;
    border-radius: 0 0 24px 24px;
    text-align: center;
    color: #fff;
}

.loja-hero h1 { font-weight: 800; font-size: 2rem; }
.loja-hero p  { opacity: .9; font-size: 1.1rem; }

/* ── Cards de categoria ────────────────────────────────────────── */
.cat-card {
    background: #fff;
    padding: 20px 12px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    color: #333;
    display: block;
    height: 100%;
    font-size: 0.875rem;
    font-weight: 500;
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    color: var(--primary);
}

.cat-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
}

/* ── Card de produto ───────────────────────────────────────────── */
.product-card {
    background: #fff;
    padding: 16px;
    border-radius: 14px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.product-img {
    height: 160px;
    background: #f0f2f5;
    border-radius: 10px;
    margin: 10px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-img img { max-height: 100%; object-fit: contain; }

.product-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a7a3c;
    margin: 4px 0;
}

.product-pix {
    font-size: 0.78rem;
    color: #666;
}

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover {
    filter: brightness(.9);
}

/* ── Card de produto ───────────────────────────────────────────── */
.product-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid #f0f0f0;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.09);
}

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: .72rem;
    z-index: 1;
}

.product-badge-promo,
.produto-badge-promo {
    background: linear-gradient(135deg, #e63946, #c1121f);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 4px;
}

.product-img {
    height: 140px;
    background: #f5f7fa;
    border-radius: 8px;
    margin: 8px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    max-height: 100%;
    object-fit: contain;
}

.product-img-icon {
    font-size: 3rem;
    color: #cbd5e0;
}

.product-group {
    font-size: .7rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.product-name {
    font-size: .875rem;
    font-weight: 600;
    color: #1a202c;
    margin: 4px 0 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-pricing { line-height: 1.3; }

.product-old-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: .8rem;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #166534;
}

.product-unit {
    font-size: .72rem;
    font-weight: 400;
    color: #6b7280;
}

.btn-add-cart {
    font-size: .85rem;
    padding: 7px 12px;
}

/* ── Link do card ──────────────────────────────────────────────── */
.product-img-link { display: block; text-decoration: none; }
.product-name-link { text-decoration: none; color: inherit; }
.product-name-link:hover .product-name { color: var(--primary); }

/* ── Página single produto ─────────────────────────────────────── */
.produto-single { background: #fff; border-radius: 14px; padding: 28px; }

/* Imagem principal */
.produto-img-main {
    background: #f5f7fa;
    border-radius: 12px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #eee;
}

.produto-img-placeholder { font-size: 6rem; color: #cbd5e0; }

/* Miniaturas */
.produto-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.produto-thumb {
    width: 72px;
    height: 72px;
    background: #f5f7fa;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s;
    font-size: 1.5rem;
    color: #cbd5e0;
}

.produto-thumb.active,
.produto-thumb:hover { border-color: var(--primary); }

/* Info direita */
.produto-categoria {
    font-size: .8rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
}

.produto-categoria:hover { text-decoration: underline; }

.produto-titulo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a202c;
    margin: 6px 0 0;
    line-height: 1.3;
}

.produto-subtitulo { color: #6b7280; font-size: .9rem; margin-top: 4px; }

/* Preços */
.produto-preco-area { line-height: 1.3; }

.produto-preco-old {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 1rem;
}

.produto-preco-atual {
    font-size: 2rem;
    font-weight: 900;
    color: #166534;
    line-height: 1.1;
}

.produto-unidade { font-size: .85rem; font-weight: 400; color: #6b7280; }

.produto-economia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dcfce7;
    color: #166534;
    font-size: .82rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 6px;
}

/* Quantidade */
.produto-qty {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    height: 44px;
}

.qty-btn {
    width: 40px;
    height: 100%;
    border: none;
    background: #f9fafb;
    color: #374151;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover { background: #e5e7eb; }

.qty-input {
    width: 52px;
    height: 100%;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    outline: none;
    background: #fff;
}

/* Botão carrinho grande */
.btn-add-cart-lg {
    background: var(--secondary) !important;
    border: none !important;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    height: 44px;
    transition: filter .2s;
}

.btn-add-cart-lg:hover { filter: brightness(.9); }

/* Specs rápidas */
.produto-specs-quick {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .875rem;
    color: #555;
}

.produto-specs-quick li { display: flex; align-items: center; gap: 8px; }
.produto-specs-quick i  { color: var(--primary); }

/* Abas */
.produto-tabs { border-bottom: 2px solid #e5e7eb; }

.produto-tabs .nav-link {
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: .9rem;
}

.produto-tabs .nav-link.active {
    color: var(--secondary);
    border-bottom-color: var(--secondary);
    background: transparent;
}

.produto-tab-content {
    padding: 24px 0;
    font-size: .9rem;
    color: #444;
    line-height: 1.7;
}

/* Breadcrumb */
.breadcrumb-item a { color: var(--primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Paginação ─────────────────────────────────────────────────── */
.loja-pagination .page-link {
    color: var(--primary);
    border-color: #e5e7eb;
    padding: 8px 14px;
    font-size: .9rem;
}

.loja-pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.loja-pagination .page-link:hover {
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    border-color: var(--primary);
    color: var(--primary);
}

/* ── Footer ────────────────────────────────────────────────────── */
.loja-footer {
    background: #1f2937;
    color: #d1d5db;
    padding: 48px 0 24px;
    margin-top: 56px;
}

.loja-footer h5 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.loja-footer a {
    color: #9ca3af;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    font-size: .9rem;
}

.loja-footer a:hover { color: #fff; }

.loja-footer-bottom {
    border-top: 1px solid #374151;
    margin-top: 32px;
    padding-top: 20px;
    text-align: center;
    font-size: .82rem;
    color: #6b7280;
}

/* ── Dropdown departamentos ────────────────────────────────────── */
.loja-nav-dept::after { display: none; } /* remove seta padrão do Bootstrap */

.loja-dept-menu {
    min-width: 260px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 6px 0;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 0 !important;
}

.loja-dept-menu .dropdown-item {
    padding: 9px 20px;
    font-size: 0.875rem;
    color: #333;
    transition: background .12s, color .12s;
}

.loja-dept-menu .dropdown-item:hover,
.loja-dept-menu .dropdown-item:focus {
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
}

.loja-dept-all {
    font-weight: 600 !important;
    color: var(--primary) !important;
}

/* ── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .loja-location { display: none; }
    .loja-icon-btn span { display: none; }
    .loja-hero { padding: 48px 0; }
    .loja-hero h1 { font-size: 1.5rem; }
}