/* ==========================================================================
   REBRANDING: OGANI MASTER -> ELECTRO TECH STORE
   Visão: Gestão de Projeto & UI/UX Sênior
   ========================================================================== */

/* 1. IMPORTAÇÃO E RESET FONTE 
   Usando Plus Jakarta Sans por ser mais moderna que a Open Sans padrão do Electro */
/*@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');*/
:root {
    --primaria: #0592a5;       /* Amarelo Electro (Ação) w*/
    --secundaria: #031035;     /* Cinza Escuro Técnico (Estrutura) */
    --dark: #010921;           /* Texto Principal */
    --text-muted: #777777;     /* Texto secundário */
    --bg-light: #F5F5F5;       /* Fundo de seções utilitárias */
    --border-color: #EBEBEB;   /* Bordas finas de e-commerce */
    --radius-tech: 4px;        /* Geometria de eletrônicos (menos arredondada) */
    --primaria-dark : #18b0c4;
}

body, h1, h2, h3, h4, h5, h6, p, a, span, button, input {
    font-family: 'Kufam', sans-serif !important;
    color: var(--dark);
}

.active a
{
    color:var(--primaria) !important;
}

/* 2. HEADER TOP (Barra de utilidades) */
.header__top {
    background-color: #ffffff !important; 
    border-bottom: 1px solid var(--border-color);
    padding: 4px 0;
}

.header__top__left ul li, 
.header__top__right__auth a, 
.header__top__right__language div {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
}

/* 3. MENU DE NAVEGAÇÃO */
.header__menu ul li a {
    text-transform: capitalize !important;
    letter-spacing: 0.2px;
    font-weight: 400 !important;
    color: var(--secundaria) !important;
    font-size: 14px;
}

.header__menu ul li a:hover {
    color: var(--primaria) !important;
}

/* 4. HERO SECTION - O CORE DO ELECTRO */

/* Botão de Departamentos (All Departments) */
.hero__categories__all {
    background: var(--primaria) !important; 
    border-radius: 50px;
    padding-left: 5px !important;
    margin-bottom:15px;
    
}

.hero__categories__all i, 
.hero__categories__all span {
    color: var(--white) !important; /* Texto preto no fundo amarelo */
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 14px;
}


/* Barra de Busca (Estilo Robusto Electro) */
.hero__search__form {
    border: 2px solid var(--primaria) !important; /* Borda amarela forte */
    overflow: hidden;
    height: 50px;
    display: flex;
}

.hero__search__form input {
    font-size: 14px !important;
    color: var(--text-muted);
    width: 70%;
}

.hero__search__form button {
    background: var(--primaria) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border:none!important; /* Botão reto dentro da borda da busca */
    transition: 0.3s;
    margin-top:-8px;
}

.hero__search__form button:hover {
    color: var(--white) !important;
}

/* 5. CARDS DE PRODUTO (Estilo Catálogo Denso) */
.featured__item {
    transition: transform 0.3s ease;
    border: 1px solid transparent;
}

.featured__item:hover {
    transform: translateY(-5px);
    border-color: var(--border-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.featured__item__pic {
    border-radius: var(--radius-tech) !important; 
    background-color: #fff;
    border: 1px solid var(--border-color);
}

.featured__item__text h6 a {
    color: var(--secundaria) !important;
    font-weight: 500 !important;
    font-size: 14px;
}

/* Preço em destaque (Estilo Electro) */
.featured__item__text h5 {
    color: var(--dark) !important;
    font-weight: 800 !important;
    font-size: 18px;
    margin-top: 10px;
}

/* Badge de Promoção */
.product__label {
    background: #dd3333; /* Vermelho para ofertas */
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 800;
}

/* 6. COMPONENTES DE APOIO (Benefícios e Banners) */
.content-box-beneficios {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-tech);
    background: #fff;
}

.content-box-beneficios .icon {
    color: var(--primaria) !important;
}

.content-box-beneficios h6 {
    color: var(--secundaria);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Botões Globais */
.primary-btn {
    background: var(--primaria) !important;
    color: #fff !important;
    /*border-radius: var(--radius-tech) !important;*/
    font-weight: 500 !important;
    text-transform: uppercase;
    box-shadow: none !important;
    border-radius: 50px!important;
}
.hero__text   a
{
     color:var(--dark)!important;
}
.primary-btn:hover {
    background: var(--primaria-dark) !important;
    color: var(--dark) !important;
}

/* Footer Custom */
.footer {
    background: #fdfdfd;
    border-top: 1px solid var(--border-color);
}

.footer__about ul li, .footer__widget ul li a {
    color: var(--text-muted) !important;
}

.footer-title {
    font-weight: 800 !important;
    color: var(--secundaria);
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 20px;
}

/* Container da busca com a borda amarela e o arredondamento reposto */
.hero__search__form {
    border: 2px solid var(--primaria) !important;
    border-radius: 30px !important; /* Arredondamento moderno reposto */
    height: 40px;
    overflow: hidden; /* Garante que o botão e o texto respeitem a curva */
    display: flex;
    align-items: center;
    background: #fff;
}

.hero__search__form form {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* 1. O Texto Fixo (Todas categorias) */
.hero__search__categories {
    width: 170px; /* Ajustado para caber o texto com o novo radius */
    font-size: 0.5rem;
    color: var(--text-muted)!important;
    font-weight: 500;
    padding-left: 25px; /* Mais padding para não colar na curva do border-radius */
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding-bottom:8px;
}

/* Linha divisória interna */
.hero__search__categories::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15px;
    height: 40px;
    width: 1px;
    background: #ebebeb;
}

/* 2. O Input */
.hero__search__form input {
    flex-grow: 1;
    border: none;
    height: 100%;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
    outline: none;
    background: transparent;
}


/* O Palco do Banner (Alinhado à direita das categorias) */
.hero__item {
    height: 430px; /* Altura padrão da Electro */
    display: flex;
    align-items: center; /* Centraliza o texto verticalmente */
   z-index:1;
    border-radius: 4px; /* Geometria tech */
    
    /* Configuração da Imagem de Ambiente */
    background-size: cover; 
    background-position: center right; /* Garante que o produto na foto apareça à direita */
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Ajuste do Texto (Para não brigar com a imagem do produto à direita) */
.hero__text {
    max-width: 50%; /* Ocupa apenas metade da largura para deixar a direita livre */
    z-index: 2; /* Fica por cima de qualquer efeito de fundo */
}

.hero__text h2 {
    font-size: 46px; /* Fonte grande e impactante de tecnologia */
    color: var(--secundaria);
    line-height: 52px;
    font-weight: 800;
    margin-bottom: 15px;
}

.hero__text span {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primaria); /* O "Badge" de destaque */
    margin-bottom: 10px;
    display: block;
}

.hero__categories {
    position: relative;
}
/* Wrapper para alinhar texto e imagem lado a lado */
.hero__text__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 450px; /* Garante altura consistente */
    padding: 20px 0;
}

.hero__text {
    flex: 0 0 55%; /* Texto ocupa 55% da largura */
    text-align: left;
    padding-right: 30px;
}

.hero__product__img {
    flex: 0 0 45%; /* Imagem ocupa 45% */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero__product__img img {
    max-width: 130% !important; /* Permite que a imagem seja um pouco maior que o container */
    height: auto;
    width: auto !important; /* Owl Carousel força width 100%, isto anula */
    transition: transform 0.8s ease-in-out;
}

/* Animação suave para a imagem quando o slide muda */
.owl-item.active .hero__product__img img {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.owl-item .hero__product__img img {
    transform: translateX(50px) scale(0.9);
    opacity: 0;
}

/* Ajustes de Tipografia conforme a Electro */
.hero__text h2 {
    font-size: 3rem;
    line-height: 50px;
    font-weight: 800;
    margin-bottom:10px;
    letter-spacing: -1px;
}

.hero__text p {
    font-size: 16px;
    color: #555;
    margin-bottom: 35px;
    max-width: 400px;
}
/*  A LISTA DESACOPLADA (O segredo do seu problema) */
.hero__categories__list {
    position: absolute; 
    width: 100%;
    z-index: 999;
    background: #ffffff; 
    border-top: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin: 0;
}


.hero__text__slider {
    display: block !important; 
    width: 100% !important;
    position: relative;
}

/* Cada item do slide deve ocupar exatamente 100% da col-lg-9 */
.hero__text__slider .hero__text {
    width: 100% !important;
    display: block !important;
    float: left; /* Garante o alinhamento em linha para o cálculo do Owl */
}

/* Ajuste dos Dots para não chocarem com o texto */
.hero__text__slider .owl-dots {
    text-align: left;
    margin-top: 25px;
}
/* Posicionamento dos Dots abaixo do conteúdo */
.hero__text__slider.owl-carousel .owl-dots {
    margin-top: 0px;
    display: flex;
    gap: 8px;
    z-index:20;
}

/* O Dot Inativo (Pequeno e discreto) */
.hero__text__slider.owl-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc;
    display: block;
    border-radius: 50%;
    transition: 0.3s;
}

/* O Dot Ativo (Estilo Pílula da Electro) */
.hero__text__slider.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--primaria);
    width: 25px; /* Alonga o dot ativo */
    border-radius: 10px;
}

/* Garante que o carrossel tenha espaço para respirar e esconder o que vaza */
.hero__text__slider.owl-carousel {
    display: block !important;
    overflow: hidden; /* OBRIGATÓRIO para o slide não "vazar" no canto */
}

/* O segredo para não chocarem: Cada item deve ser um bloco rígido */
.hero__text__slider .hero__text {
    display: block !important;
    width: 100% !important;
    float: left;
    padding-right: 20px; /* Cria um "vazio" de segurança entre um slide e outro */
}

/* Força o Owl Stage (o trilho onde os slides correm) a ser flexível mas contido */
/* Container Principal */
.hero__item {
    position: relative;
    overflow: hidden;
}

/* Forçar o Slider a respeitar o container pai */
.hero__text__slider.owl-carousel {
    display: block !important;
    overflow: hidden;
    position: relative;
}

.hero__display__flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 500px; /* Aumentado para dar impacto visual */
    position: relative;
}

/* Bloco de Texto à Esquerda */
.hero__text {
    flex: 0 0 55%;
    position: relative;
    z-index: 5;
    padding-bottom: 40px; /* Espaço para os dots abaixo */
}

/* Imagem à Direita Ocupando Toda a Altura */
.hero__img {
    flex: 0 0 45%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero__img img {
    height: 100% !important; /* Ocupa toda a altura do container */
    width: auto !important;
    object-fit: contain;
    object-position: right center;
}
/* 1. Reset e Alinhamento dos Dots */
.hero__text__slider.owl-carousel .owl-dots {
    position: absolute;
    bottom: 50px; 
    left: 0;
    display: flex !important; /* Essencial para os dots ficarem em linha */
    align-items: center;
    gap: 8px; /* Espaço entre as bolinhas */
    z-index: 99;
}


/* 2. O Dot Inativo (Bolinha padrão) */
.hero__text__slider.owl-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc; /* Cor neutra para inativos */
    display: block;
    border-radius: 50%;
    margin: 0; /* Remove margens padrão do Owl que podem quebrar o layout */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave de esticamento */
}

/* 3. O Dot Ativo (Efeito Pílula da Electro) */
.hero__text__slider.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--primaria); /* Sua cor secundária de destaque */
    width: 30px; /* O segredo do alongamento */
    border-radius: 10px; /* Transforma a bolinha numa pílula */
}

/* 4. Ajuste de Botão (O Owl Carousel usa <button> para os dots) */
.hero__text__slider.owl-carousel .owl-dots .owl-dot {
    outline: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* 5. Hover para Feedback Visual */
.hero__text__slider.owl-carousel .owl-dots .owl-dot:not(.active):hover span {
    background: #dadbf3; /* Sua cor primária no hover */
    transform: scale(1.2);
}


/* Container Principal */
.policy-section {
    padding: 35px 0;
    background: #ffffff;
}

/* Item Individual */
.policy__item {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o bloco na coluna */
    padding: 10px;
    transition: transform 0.3s ease;
}

/* Efeito sutil ao passar o mouse (opcional) */
.policy__item:hover {
    transform: translateY(-2px);
}

/* Ícone Estilizado */
.policy__icon {
    margin-right: 18px;
}

.policy__icon img{
    width:3rem;
} 

.policy__icon i {
    font-size: 38px;
    color: var(--primaria); /* O amarelo da sua marca */
    display: block;
}

/* Tipografia */
.policy__text h6 {
    color: #333333;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: none; /* Mantém a leitura natural */
}

.policy__text span {
    color: #888888;
    font-size: 13px;
    display: block;
    line-height: 1.4;
}

/* Ajuste para Mobile */
@media only screen and (max-width: 991px) {
    .policy__item {
        justify-content: flex-start; /* Alinha à esquerda em telas menores */
        margin-bottom: 25px;
    }
}


.banner-sections {
    padding-bottom: 50px;
}

.banner__item {
    background: #f5f5f5; /* Cinza muito claro, padrão Electro */
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 4px;
    transition: all 0.3s;
    height: 150px; /* Altura fixa para manter simetria */
    margin-bottom: 30px;
}

.banner__item:hover {
    transform: translateY(-5px);
}

.banner__item__pic {
    flex: 0 0 40%;
}

.banner__item__pic img {
    max-width: 90%;
    transition: 0.3s;
}

.banner__item__text {
    flex: 0 0 60%;
    
}

.banner__item__text h6 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.banner__item__text span {
    font-size: 13px;
    color: #888;
    display: block;
    margin-bottom: 10px;
}

.banner__item__text a {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    text-decoration: none;
}

.banner__item__text a i {
    color: var(--primaria); /* Seta em amarelo */
    margin-left: 5px;
}


/*list produtos*/


/* Título e Abas */
.section-title__group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #f2f2f2;
    margin-bottom: 40px;
    padding-bottom: 10px;
}

.section-title__group h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    position: relative;
}

.section-title__group .nav-tabs {
    border: none;
}

.section-title__group .nav-link {
    border: none;
    color: #888;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
}

.section-title__group .nav-link.active {
    color: var(--primaria);
    background: transparent;
}

/* Card do Produto */
.product__card {
    background: #fff;
    padding: 15px;
    position: relative;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Invisível até o hover */
}

.product__card:hover,
.latest-product__item:hover {
    border-color: #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.product__card__pic {
    position: relative;
    overflow: hidden;
    background:var(--white);
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-category {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
}

/* Botão de Carrinho Circular (Amarelo) */
.product__card__action {
    position: absolute;
    right: 10px;
    bottom: 5px;
    transition: all 0.3s;
}



.add-to-cart {
    width: 40px;
    height: 40px;
    background: var(--primaria);
    border: none;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
}

/* Textos e Preços */
.product__card__text h6 a {
    color: var(--primaria); 
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin: 10px 0;
    cursor: pointer;
}

.product__price {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.product__price span {
    font-size: 12px;
    color: #b2b2b2;
    text-decoration: line-through;
    margin-left: 10px;
    font-weight: 400;
}

/* Info Extra (Só aparece no Hover) */
.product__hover__info {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: 0.3s;
}

.product__card:hover .product__hover__info {
    opacity: 1;
}

.product__hover__info a {
    font-size: 12px;
    color: #777;
}


.product__discount__percent {
    position: absolute;
    right: -10px;
    top: 5px;
    background: #ff3344;
    color: #fff;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 800;
    z-index: 5;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    height: 30px;
}

.product__new__percent
{
   position: absolute;
    right: -10px;
    top: 5px;
    background: #f8eb35;
    color: #fff;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 800;
    z-index: 5;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    height: 30px;
}



/* Centraliza e estiliza os dots abaixo do carrossel */
.product__slider.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
    
}

.product__slider.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
}

.product__slider.owl-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #e1e1e1;
    display: block;
    margin: 0 5px;
    border-radius: 50%;
    transition: all 0.3s;
}

.product__slider.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--primaria); /* Seu amarelo */
    width: 25px; /* Estilo 'pílula' para o ativo */
    border-radius: 5px;
}





.brand-section
{
    background-color:var(--border-color);
  
}

.brand-banner__item {
    background: #f7f7f7; /* Cinza muito suave */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 15px;
    border-radius: 4px;
    height: 160px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid transparent;
}

.brand-banner__item:hover {
    background: #fff;
    border-color: var(--primaria);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.brand-banner__text {
    flex: 0 0 60%; /* Texto ocupa 60% da largura */
    z-index: 2;
}

.brand-banner__text h6 {
    font-size: 18px;
    font-weight: 800;
    color: #222;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.brand-banner__text span {
    font-size: 12px;
    color: #666;
    display: block;
    margin-bottom: 15px;
    line-height: 1.2;
}

.brand-banner__pic {
    flex: 0 0 40%; /* Imagem ocupa 40% e fica à direita */
    display: flex;
    justify-content: flex-end;
}

.brand-banner__pic img {
    max-width: 120%; /* A imagem pode "vazar" levemente para fora para efeito de profundidade */
    height: auto;
    transition: transform 0.4s ease;
}


/* Reutilizando seu estilo de link com círculo */
.primary-link {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
}

/* Container Principal da Sessão */
.brand-section {
    position: relative;
    overflow: hidden;
    background-color:var(--white);
    margin-bottom:50px;
    margin-top:50px;
}

/* Container do Item Individual */
.brand__item {
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:4px;
    min-height: 140px; /* Altura confortável para os logos */
}

/* O Wrapper que segura o logo e o botão */
.brand__logo__wrapper {
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 1. O Efeito do Logo (Começa Colorido) */
.brand__logo {
    width:100%;
    height:100%;
    width: auto !important;
    display: inline-block !important;
    /* Estado Normal: Colorido e visível */
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

/* Hover no Item Total: Logo fica cinza */
.brand__item:hover .brand__logo {
    filter: grayscale(100%); /* Efeito reverso da Electro */
    opacity: 0.3; /* Fica bem discreto para destacar o botão */
}

/* 2. O Efeito do Botão Centralizado (Estilo Sistec) */
.brand__action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Começa menor e centralizado */
    opacity: 0; /* Começa invisível */
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 5; /* Garante que fique acima do logo discreto */
}

/* Hover revela o botão centralizado */
.brand__item:hover .brand__action {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); /* Ganha tamanho normal */
}

/* Estilo do Botão "Ver produtos" (Seta simples da Sistec) */
.brand-btn-overlay {
    font-size: 13px;
    font-weight: 700;
    width:100%;
    color: #333; /* Cor neutra para o botão */
    text-transform: uppercase;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent; /* Botão minimalista */
    padding: 8px 15px;
    border-radius: 4px;
    transition: color 0.3s;
}

.brand-btn-overlay i {
    font-size: 12px;
    transition: transform 0.3s;
}

/* Hover no próprio botão muda para a cor primária (Azul #12147f) */
.brand-btn-overlay:hover {
    color: #12147f;
}

.brand__item:hover .brand-btn-overlay i {
    transform: translateX(5px); /* Seta move para a direita no hover */
}





/* Cards Gerais */
.category__item, .category__small-card, .category__wide-card {
    border-radius: 6px;
    padding: 25px;
    transition: all 0.4s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Destaque 6 Colunas */
.category__main-highlight {
    min-height: 445px;
    justify-content: space-between;
}


.category__main-highlight h2 {
    font-size: 42px;
    font-weight: 800;
    margin: 10px 0;
}

.btn-square-red {
    width: 45px;
    height: 45px;
    background: #e61e2a; /* Vermelho NCR/Sistec */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-top: 20px;
}

/* Itens de 4 Colunas (Small Cards) */
.category__small-card {
    min-height: 180px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.category__small-card img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    margin: 15px 0;
}

/* Item de 8 Colunas (Wide Card) */
.category__wide-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 200px;
}

.category__wide-card h2 {
    font-size: 28px;
    font-weight: 800;
}

.wide-img img {
    max-height: 180px;
    width: auto;
}

/* Efeito Hover Suave */
.category__item:hover, .category__small-card:hover, .category__wide-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.02);
    transform: translateY(-2px);
}

.lastest-product_top-content
{
    padding:10px;
    padding-left:0!important;
    margin:0;
}

.footer_action
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-right:8px;
}

.footer_action .add-to-cart
{
    width: 35px!important;
    height: 35px!important;
}
.lastest-product_top-content small
{
    color:var(--text-muted);
}

 


.sidebar_item_categories {
	
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 12px;
	padding-right:10px;
}

.sidebar_item_categories li {
	list-style: none;
	border-bottom:1px solid rgba(0, 0, 0, 0.05);
	border-top:1px solid rgba(0, 0, 0, 0.05);
}
.sidebar_item_categories li:first-child
{
   border-top:none!important;
}
.sidebar_item_categories li:last-child
{
   border-bottom:none!important;
}
.sidebar_item_categories li a {
	font-size: 0.8rem;
	color: var(--secundaria);
	line-height: 39px;
	font-weight:700;
	display: block;
	padding-left:4px;
    font-size:.9rem!important;
}

.sidebar_item_categories  li:hover {
    background-color: var(--border-color) !important;
}

/* Imagem principal do produto — tamanho fixo */
.product__details__pic__item {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f8f8f8;
}

.product__details__pic__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container das miniaturas sem carrossel */
.product__details__pic__slider-static {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha se houver muitas imagens */
    gap: 10px;       /* Espaço entre as miniaturas */
    margin-top: 15px;
    
}

.product__details__pic__slider-static img {
    width: calc(25% - 8px);
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding-bottom: 5px;
    transition: all 0.3s ease;
    opacity: 0.6;
    border:1px solid var(--border-color);
    border-radius:2px;
}

/* Mantém a lógica da borda vermelha que criamos anteriormente */
.product__details__pic__slider-static img.active {
    opacity: 1;
    border-bottom: 3px solid var(--primaria); 
}

.product__details__pic__slider-static img:hover {
    opacity: 1;
}

/* Responsividade: 2 por linha em ecrãs muito pequenos */
@media (max-width: 480px) {
    .product__details__pic__slider-static img {
        width: calc(50% - 5px);
    }
}

.product__details_add_info {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    border-top: 1px solid #f2f2f2; /* Linha sutil para separar do preço */
    padding-top: 15px;
}

.product__details_add_info li {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha em telemóveis muito pequenos */
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.5;
}

.product__details_add_info li b {
    width: 140px; /* Alinhamento vertical dos rótulos */
    color: #222;
    font-weight: 700;
    flex-shrink: 0; /* Impede o negrito de encolher */
}

.product__details_add_info li span {
    color: #666;
}

.product__details_add_info li .status-stock {
    color: #28a745;
    font-weight: 600;
}

/* Responsividade para Mobile */
@media only screen and (max-width: 479px) {
    .product__details_add_info li {
        flex-direction: column; /* Rótulo em cima, valor em baixo */
        align-items: flex-start;
        margin-bottom: 15px;
    }
    
    .product__details_add_info li b {
        width: 100%;
        margin-bottom: 2px;
    }
}

/* Container das tabelas para garantir espaçamento */
.product__details__tab__content {
    padding-top:10px;
}

.custom-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.custom-details-table tr {
    border-bottom: 1px solid #f0f0f0; /* Linha divisória muito suave */
}

/* Efeito Zebrado (Fundo cinza nas linhas pares) */
.custom-details-table tr:nth-child(even) {
    background-color: #f4f4f4;
}

.custom-details-table th, 
.custom-details-table td {
    padding: 15px 25px;
    text-align: left;
    font-size: 15px;
}

/* Estilo do Rótulo (Esquerda) */
.custom-details-table th {
    width: 30%; /* Mantém o alinhamento como na imagem */
    color: #333;
    font-weight: 700;
}

/* Estilo do Valor (Direita) */
.custom-details-table td {
    color: #666;
    font-style: italic; /* Segue o padrão da imagem enviada */
}

/* Ajuste de cor para links de marca (como o Hisense em azul) */
.custom-details-table td a {
    color: #00aaff;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
}

/* Responsividade para Tabelas */
@media only screen and (max-width: 575px) {
    .custom-details-table th {
        width: 40%;
        padding: 10px 15px;
    }
    .custom-details-table td {
        padding: 10px 15px;
    }
}




/* Container Principal do Item */
.electro-mini-product {
    display: flex !important;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea; /* Divisor entre itens da lista */
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.electro-mini-product:hover {
    background-color: #fcfcfc;
}

/* Área da Imagem */
.electro-mini-product .latest-product__item__pic {
    width: 85px !important;
    height: 85px !important;
    flex-shrink: 0;
    margin-right: 15px;
}

.electro-mini-product .latest-product__item__pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Área de Texto */
.electro-mini-product .latest-product__item__text {
    flex: 1;
}

.electro-mini-product .latest-product__item__text h6 {
    font-size: 14px;
    color: #333e48; /* Cor padrão Electro */
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 5px;
    white-space: normal; /* Permite quebra de linha como na imagem */
}


/* Preços */
.product__price-box {
    display: flex;
    flex-direction: column; /* Preços um por cima do outro como na imagem */
}

.product__price-box del {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.product__price-box span {
    font-size: 16px;
    color: var(--dark); /* Vermelho da tua marca */
    font-weight: 700;
}
.electro-mini-product:hover
{
    background-color:var(--white)!important;
     border-top:none!important;
     border-left:none!important;
     border-right:none!important;
     box-shadow:none!important;
}

/* Container do Checkbox Personalizado */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333e48; /* Cor Electro */
    user-select: none;
    
}

/* Esconde o checkbox original */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    border-radius:50px;
}

/* A caixa do checkbox (checkmark) */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 2px solid #d1d1d1;
    border-radius: 2px;
    transition: all 0.2s;
    border-radius:50px;
}

/* Quando marcado, muda a cor para a sua BRAND */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #0592a5;
    border-color: #0592a5;
}

/* O símbolo de "check" (v) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Mostra o check ao marcar */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Desenho do check */
.custom-checkbox .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Estilo do Botão Ver Mais */
.show-more-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 5px;
}

.content_Search
{
    padding:20px;
    padding-left:0;
    font-weight:700;
}
.content_Search h6
{
      font-weight:700;
}


/* Sidebar do Carrinho */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* Escondido por padrão */
    width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

/* Quando estiver ativo */
.cart-sidebar.active {
    right: 0;
}

/* Overlay Escuro */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    display: none;
}


.cart-sidebar__header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-sidebar__content {
    flex: 1;
    overflow-y: auto; /* Permite scroll se houver muitos produtos */
    padding: 15px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
    position: relative;
}

.cart-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.cart-item__details {
    flex: 1;
}

.cart-item__details h6 {
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
}

/* Botão Remover (Lixeira) */
.remove-item {
    background: #f8f8f8;
    border: none;
    padding: 10px;
    color: #888;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
}

.remove-item:hover {
    color: #ff4d4d;
    background: #fff0f0;
}

/* Container do Item */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr 45px; /* Define colunas fixas para evitar desalinhamento */
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #f2f2f2;
    align-items: center;
}

.cart-item__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Detalhes do Produto */
.cart-item__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #333;
}

.cart-item__ref {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 12px;
}

/* Ações (Preço e Quantidade lado a lado) */
.cart-item__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top:20px;
}

.cart-item__price {
    font-weight: 800;
    color: #333;
    font-size: 16px;
    margin-bottom:20px;
}

/* Seletor de Quantidade Estilo NCR */
.qty-selector {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    height: 32px;
}

.qty-btn {
    background: #f8f8f8;
    border: none;
    width: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

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

.qty-selector input {
    width: 40px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

/* Botão de Remover (A lixeira cinza da lateral) */
.btn-remove-item {
    background: #f5f5f5;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-remove-item:hover {
    background: #ffecec;
    color: #ff4d4d;
}


.cart-sidebar__footer {
    padding: 20px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
}

.total-row.main {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

/* Botão Finalizar com sua cor Brand #0592a5 */
.cart-sidebar__footer .primary-btn
{
    color:#fff!important;
}
#cart-items-label
{
    font-size:14px!important;
}
.btn-checkout {
    background: #0592a5;
    color: #fff!important;
    width: 100%;
    border: none;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 10px;
    text-align:center!important;
    transition: 0.3s;
}

.btn-checkout:hover {
    background: #047a8a;
}

.btn-continue {
    background: transparent;
    border: 1px solid #ddd;
    width: 100%;
    padding: 15px;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    font-size:16px!important;
}

/* Botão Fechar Simples */
.close-cart {
    background: transparent; /* Remove qualquer fundo */
    border: none;
    padding: 0;
    cursor: pointer;
    color: #333; /* Cor neutra para o X */
    font-size: 22px; /* Tamanho visível para facilitar o clique */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-sidebar__header .close-sidebar-btn,
.close-user-sidebar
{
    background: #f1f5f9!important;
    border: none!important;
    color: #64748b!important;
    width: 32px!important;
    height: 32px!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    cursor: pointer!important;
    transition: background 0.2s!important;
}

.border-separator-menu
{
      border-top: 2px solid #ebebeb!important;
}
/* Garantir que o cabeçalho alinhe o X à direita */
.cart-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f2f2f2;
}

.breadcrumb-section {
  
    padding: 20px 0;
    border-top: 2px solid #ebebeb;
    margin-bottom: 30px;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb__list li {
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
}

/* O separador ">" entre os itens */


.breadcrumb__list li:last-child::after {
    display: none; /* Remove a seta do último item */
}

.breadcrumb__list li a {
    color: #666;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb__list li a:hover {
    color: #0592a5; /* Tua cor principal */
}

/* Estilo para o item atual (ativo) */
.breadcrumb__list li.active {
    color: #333;
    font-weight: 600;
}

/* Container Principal */
.checkout-stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f2f2f2; /* Linha sutil de base do Figma */
    margin-bottom: 40px;
}

/* Bloco de cada Passo */
.step {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.4; /* Inativo por padrão conforme o esboço */
    transition: all 0.3s ease;
}

/* O Quadrado Colorido (Fiel ao Figma) */
.step-icon {
    width: 65px;
    height: 55px;
    background-color: #e9e9e9; /* Cinza claro do modelo */
    border-radius: 4px; /* Leve arredondado das caixas */
    flex-shrink: 0;
}

/* Textos do Indicador */
.step p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
}

.step p span {
    display: block;
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

/* --- ESTADO ATIVO (O seu Azul Turquesa) --- */
.step.active {
    opacity: 1;
}

.step.active .step-icon {
    background-color: #0b96a9; /* Cor exata do seu Figma */
}

.step.active p {
    font-weight: 600;
}

/* Botão Anterior - Fiel ao Figma */
.btn-secondary {
    display: inline-block;
    background-color: #f6f6f6; 
    color: #8c8c8c;     
    padding: 16px 35px;     
    border: none;       
    border-radius: 4px;       
    font-size: 14px;
    font-weight: 700;          
    text-transform: uppercase; 
    letter-spacing: 1.5px;     
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-secondary:hover {
    background-color: #ededed; /* Escurece levemente ao passar o rato */
    color: #666666;
}



/* Esconde o rádio original mas mantém acessível */
.method-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Estilo Base do Card (Fiel ao Figma) */
.method-card {
    display: block;
    cursor: pointer;
    margin-bottom: 15px;
}

.method-content {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid #ebebeb; /* Cor neutra do seu design */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.method-content img {
    max-width: 50px;
    margin-right: 20px;
}

.method-content span {
    font-weight: 500;
    color: #444;
}

/* --- QUANDO O RÁDIO ESTIVER SELECIONADO --- */
.method-card input[type="radio"]:checked + .method-content {
    border-color: #0b96a9; /* Turquesa Albertec */
    background-color: #f0f9fa; /* Fundo leve para destaque */
    box-shadow: 0 2px 8px rgba(11, 150, 169, 0.1);
}

/* Opcional: Adicionar um pequeno "check" ou mudar a cor do texto */
.method-card input[type="radio"]:checked + .method-content span {
    color: #0b96a9;
    font-weight: 700;
}

.selected-method-info {
    background-color: #f8f9fa;
  
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.selected-method-info strong {
    color: #0b96a9;
    text-transform: uppercase;
}




.shoping__cart__item
{
    display:flex!important;
    gap:10px;
    align-items:center;
}
.shoping__cart__item div
{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.shoping__cart__item div h5
{
    font-size:14px;
    font-weight:700;
    color:#1c1c1c;
}
.shoping__cart__item div span
{
    font-size:14px;
    font-weight:700;
    color:#1c1c1c;  
}



/* Fundo do Modal */
.modal-auth {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-auth-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 40px;
    width: 400px;
    border-radius: 15px;
    text-align: center;
    position: relative;
}

.modal-auth-content h3 { font-size: 24px; color: #333; margin-bottom: 5px; }
.modal-auth-content p { color: #888; font-size: 14px; margin-bottom: 30px; }

/* Inputs Estilo Electro */
.input-group-auth {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 30px;
    margin-bottom: 15px;
    overflow: hidden;
}

.input-icon {
    padding: 12px 15px;
    background: #f9f9f9;
    color: #999;
    border-right: 1px solid #ddd;
}

.input-group-auth input {
    border: none;
    padding: 10px 15px;
    width: 100%;
    outline: none;
}

/* Botão Login Amarelo */
.btn-login-main {
    width: 100%;
    background: #FFD200; /* Amarelo Electro */
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
}

/* Redes Sociais */
.social-login { display: flex; gap: 10px; margin-top: 20px; }
.btn-social {
    flex: 1;
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
}
.fb { background: #e9eff9; color: #3b5998; }
.google { background: #fdf0ef; color: #db4437; }

.divider { margin: 20px 0; color: #ccc; font-size: 12px; }
.close-modal { position: absolute; right: 20px; top: 10px; cursor: pointer; font-size: 24px; }





.auth-drawer {
    position: fixed;
    top: 0;
    right: -450px; 
    width: 400px;
    height: 100vh;
    background: #ffffff;
    z-index: 999999 !important;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Sombra mais pronunciada para compensar a falta de overlay */
    box-shadow: -10px 0 30px rgba(0,0,0,0.15); 
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
}

.auth-drawer.active {
    right: 0 !important;
}



.auth-drawer.active {
    right: 0; /* Desliza para dentro */
}


/* Estilo de Cabeçalho */
.auth-drawer-header
{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.forgot-link,
.switch-auth
{
    font-size:14px;
    font-weight:500;
}
.switch-auth
{
    text-align:center!important;
    margin:10px;

}
.auth-drawer-header h3 { font-size: 26px; color: #333; margin-bottom: 5px; font-weight: 700; }
.auth-drawer-header p { color: #888; font-size: 14px; margin-bottom: 30px; }

/* Inputs Arredondados */
.input-group-auth {
    display: flex;
    border: 1px solid #ebebeb;
    border-radius: 50px; /* Estilo pill da Electro */
    margin-bottom: 15px;
    overflow: hidden;
    background: #fdfdfd;
}

.input-icon {
    padding: 12px 18px;
    color: #999;
    border-right: 1px solid #ebebeb;
    display: flex;
    align-items: center;
}

.input-group-auth input {
    border: none;
    padding: 10px 15px;
    width: 100%;
    outline: none;
    background: transparent;
}

/* Botão de Login (Destaque Albertec) */
.btn-login-main {
     background: var(--primaria) !important;
    color: #fff !important;
    /*border-radius: var(--radius-tech) !important;*/
    font-weight: 500 !important;
    text-transform: uppercase;
    box-shadow: none !important;
    border-radius: 50px!important;
}

.btn-login-main:hover { background: var(--primaria-dark); }

/* Botões Sociais */
.social-login { display: flex; gap: 10px; margin-top: 20px; }
.btn-social {
    flex: 1;
    border: none;
    padding: 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.google { background: #fdf0ef; color: #db4437; }

/* Divider */
.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}
.divider::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #eee;
    left: 0;
    top: 50%;
    z-index: 1;
}
.divider span {
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    color: #bbb;
    font-size: 12px;
}





/* ==========================================================================
   ESTILO DOS BOTÕES DE NAVEGAÇÃO EM CÍRCULO (OWL CAROUSEL)
   ========================================================================== */

/* 1. Reset do texto antigo e configuração do container do botão */
.owl-nav .owl-prev,
.owl-nav .owl-next {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;           /* Largura do círculo */
    height: 30px !important;          /* Altura do círculo */
    background-color: #f1f5f9 !important; /* Cor de fundo cinza bem claro */
    border-radius: 50% !important;    /* Força o formato perfeitamente circular */
    margin: 0 5px !important;         /* Espaçamento entre os dois botões */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* 2. Efeito Hover (Quando passas o rato por cima do botão) */
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
    background-color: #0d8a9e !important; /* Muda o fundo para o Azul Teal da Albertec */
}

/* 3. Ícone da Seta Esquerda (Inativo) */
.owl-nav .owl-prev::before {
    font-family: 'tabler-icons' !important;
    content: "\ea60" !important;
    font-size: 14px !important;       /* Tamanho do ícone dentro do círculo */
    color: #334155 !important;        /* Cor do ícone escuro */
    transition: color 0.3s ease !important;
}

/* 4. Ícone da Seta Direita (Inativo) */
.owl-nav .owl-next::before {
    font-family: 'tabler-icons' !important;
    content: "\ea61" !important;
    font-size: 14px !important;
    color: #334155 !important;
    transition: color 0.3s ease !important;
}

/* 5. Muda a cor do ícone para branco quando o botão estiver em Hover */
.owl-nav .owl-prev:hover::before,
.owl-nav .owl-next:hover::before {
    color: #ffffff !important;        /* Seta fica branca sobre o fundo Teal */
}

/* 6. Mantém os clones gerados pelo JS ocultados */
.owl-nav .owl-prev span,
.owl-nav .owl-next span,
.owl-nav .fa {
    display: none !important;
}




/* Botões de Navegação (Setas) no Topo Direito */
.product-tabs .tab-pane { position: relative; }

.product__slider.owl-carousel .owl-nav {
    position: absolute;
    top: -65px; /* Alinha com as abas */
    right: 0;
    display: flex !important;
}

.product_slider_brand .product__slider.owl-carousel .owl-nav {
    position: absolute;
    top: -85px!important; /* Alinha com as abas */
    right: 0;
    display: flex !important;
}


.product__slider.owl-carousel .owl-nav button {
    width: 30px !important;
    height: 30px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s;
    border: none !important;
}

.product__slider.owl-carousel .owl-nav button:hover {
    background: #0d8a9e !important;
}

/* Ícones das Setas */
.product__slider.owl-carousel .owl-nav .owl-prev::before {
    font-family: 'tabler-icons'; content: "\ea60"; font-size: 20px; color: #1e293b;
}
.product__slider.owl-carousel .owl-nav .owl-next::before {
    font-family: 'tabler-icons'; content: "\ea61"; font-size: 20px; color: #1e293b;
}
.product__slider.owl-carousel .owl-nav button:hover::before {
    color: #fff !important;
}




/* ==========================================================================
   CONTROLO DE INDICADORES EM CÍRCULO - SLIDER DE MARCAS
   ========================================================================== */

.brand-section {
    position: relative;
}

/* Posiciona os botões no canto superior direito alinhados com o título */
.brand-section .brand__slider.owl-carousel .owl-nav {
    position: absolute;
    top: -65px;
    right: 15px;
    display: flex !important;
}

/* Estilização circular dos botões */
.brand-section .brand__slider.owl-carousel .owl-nav button {
    width: 30px !important;
    height: 30px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    border: none !important;
    cursor: pointer !important;
}

/* Hover com a cor da Albertec */
.brand-section .brand__slider.owl-carousel .owl-nav button:hover {
    background: #0d8a9e !important;
}

/* Ícone Seta Esquerda */
.brand-section .brand__slider.owl-carousel .owl-nav .owl-prev::before {
    font-family: 'tabler-icons' !important;
    content: "\ea60" !important;
    font-size: 14px !important;
    color: #1e293b !important;
    transition: color 0.3s ease;
}

/* Ícone Seta Direita */
.brand-section .brand__slider.owl-carousel .owl-nav .owl-next::before {
    font-family: 'tabler-icons' !important;
    content: "\ea61" !important;
    font-size: 14px !important;
    color: #1e293b !important;
    transition: color 0.3s ease;
}

/* Altera a seta para branco no hover */
.brand-section .brand__slider.owl-carousel .owl-nav button:hover::before {
    color: #ffffff !important;
}



/* Responsivo para telemóveis */
@media only screen and (max-width: 767px) {
    .brand-section .brand__slider.owl-carousel .owl-nav {
        position: static !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }
}





/* ==========================================================================
   CONTROLO DE INDICADORES EM CÍRCULO - SLIDER DE CATEGORIAS
   ========================================================================== */

.category-section {
    position: relative;
}

/* Alinhamento absoluto das setas no topo direito da secção */
.category-section .category__slider.owl-carousel .owl-nav {
    position: absolute;
    top: -65px;
    right: 15px;
    display: flex !important;
}

/* Design dos Botões Circulares */
.category-section .category__slider.owl-carousel .owl-nav button {
    width: 30px !important;
    height: 30px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none !important;
    cursor: pointer !important;
}

/* Hover Teal da marca */
.category-section .category__slider.owl-carousel .owl-nav button:hover {
    background: #0d8a9e !important;
}

/* Ícone Tabler Seta Esquerda */
.category-section .category__slider.owl-carousel .owl-nav .owl-prev::before {
    font-family: 'tabler-icons' !important;
    content: "\ea60" !important;
    font-size: 14px !important;
    color: #1e293b !important;
    transition: color 0.3s ease;
}

/* Ícone Tabler Seta Direita */
.category-section .category__slider.owl-carousel .owl-nav .owl-next::before {
    font-family: 'tabler-icons' !important;
    content: "\ea61" !important;
    font-size: 14px !important;
    color: #1e293b !important;
    transition: color 0.3s ease;
}

/* Transição de cor interna do ícone no Hover */
.category-section .category__slider.owl-carousel .owl-nav button:hover::before {
    color: #ffffff !important;
}

/* Limpeza de tags desnecessárias geradas */
.category-section .category__slider.owl-carousel .owl-nav span {
    display: none !important;
}

/* Ocultar Dots inferiores */
.category-section .category__slider.owl-carousel .owl-dots {
    display: none !important;
}

/* Tratamento Responsivo */
@media only screen and (max-width: 767px) {
    .category-section .category__slider.owl-carousel .owl-nav {
        position: static !important;
        justify-content: center !important;
        margin-top: 20px !important;
    }
}


/* ==========================================================================
   SIDEBAR PREMIUM MULTINÍVEL (BONECA RUSSA)
   ========================================================================== */
/* Botão "Todos os Produtos" */
.btn-all-products {
    color:#1e293b;
    background:transparent;
    border: none;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.btn-all-products Img, 
.btn-all-products i {
    font-size: 18px;
}   

.category-sidebar {
    position: fixed;
    top: 0;
    left: -350px;
    width: 340px;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden; /* Importante para esconder os submenus laterais */
}

.category-sidebar.active {
    left: 0;
}

/* Base de todos os painéis internos */
.sidebar-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

/* Estado inicial dos submenus (escondidos à direita) */
.sidebar-submenu {
    transform: translateX(100%);
    z-index: 2;
}

/* Quando o submenu fica ativo, desliza para a frente */
.sidebar-panel.panel-active {
    transform: translateX(0);
}

/* Cabeçalho Customizado estilo NCR (Cinza Sutil) */
.category-sidebar__header {
    padding: 18px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-sidebar__header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

/* Botão Voltar (Submenu) */
.back-level-btn {
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0;
}

.back-level-btn i {
    font-size: 18px;
    color: #64748b;
}

.back-level-btn:hover {
    color: #0d8a9e;
}

/* Ícone de fechar em círculo cinza sutil */
.category-sidebar__header .close-sidebar-btn {
    background: #f1f5f9;
    border: none;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.category-sidebar__header .close-sidebar-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Lista de Links Internos */
.sidebar-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-category-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.sidebar-category-list li a span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-category-list li a span i {
    font-size: 18px;
    color: #0d8a9e; /* Ícones principais em azul Albertec */
}

.sidebar-category-list li a .arrow-next {
    font-size: 14px;
    color: #94a3b8;
}

.sidebar-category-list li a:hover {
    background-color: #f8fafc;
    color: #0d8a9e;
}

/* Link Especial "Ver todos os produtos" no fim */
.view-all-item a {
    color: #64748b !important;
    font-weight: 600 !important;
}

.view-all-item a:hover {
    color: #0d8a9e !important;
}

/* Overlay do fundo */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    z-index: 9998;
    display: none;
}
.sidebar-overlay.active { display: block; }



/* ==========================================================================
   SISTEMA DE MEGA MENU DROPDOWN (CORREÇÃO DE LARGURA TOTAL)
   ========================================================================== */

/* 1. Força a ancoragem a começar no início da barra inteira (abrange o botão + menu) */
.header__navigation-wrapper {
    position: relative !important;
}

/* 2. Remove restrições ou posicionamentos relativos da lista ul */
.main-menu-list {
    position: static !important;
}

/* 3. Garante que o item da lista não limita o tamanho do dropdown */
.header__menu ul li.has-megamenu {
    position: static !important; 
}

/* 4. Painel Dropdown Ajustado para cobrir 100% da header__navigation-wrapper */
.megamenu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Agora ocupa 100% do wrapper completo, incluindo o botão */
    background: #ffffff;
    z-index: 990;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    border-top: 1px solid #0d8a9e; /* Linha superior Teal Albertec */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

/* Disparo do Hover permanecendo suave */
.header__menu ul li.has-megamenu:hover .megamenu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Contentor Interno Flexbox */
.megamenu-inner-container {
    display: flex;
    min-height: 380px;
}

/* Banner Lateral Esquerdo */
.megamenu-banner {
    width: 240px;
    background-color: #f8fafc;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 1px solid #e2e8f0;
}

.megamenu-banner-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Área de Grid do Conteúdo */
.megamenu-content-grid {
    flex-grow: 1;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cabeçalho Interno do Megamenu */
.megamenu-main-title h5 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.megamenu-main-title h5 i {
    color: #0d8a9e;
    font-size: 20px;
}

/* Linha Organizadora das Colunas (4 colunas perfeitas) */
.megamenu-columns-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Estilização das Colunas e Linhas Divisórias */
.megamenu-column {
    border-right: 1px solid #e2e8f0;
    padding-right: 15px;
}

.megamenu-column:last-child {
    border-right: none;
}

.megamenu-column h6 {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 15px;
}

.megamenu-column ul {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.megamenu-column ul li {
    display: block !important;
    margin-bottom: 8px;
}

.megamenu-column ul li a {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    padding: 3px 0 !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.megamenu-column ul li a:hover {
    color: #0d8a9e !important;
}

.megamenu-column ul li.view-all-sub {
    margin-top: 12px;
}

.megamenu-column ul li.view-all-sub a {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.megamenu-column ul li.view-all-sub a:hover {
    color: #0d8a9e !important;
}

/* Desativação em ecrãs Mobile */
@media only screen and (max-width: 991px) {
    .megamenu-dropdown {
        display: none !important;
    }
}





/* ==========================================================================
   HEADER + MENU COLOQUIAL INTEGRADO (STICKY COMPLETO)
   ========================================================================== */

/* Wrapper que o JS vai criar dinamicamente para juntar o Header e o Menu */
.sticky-complete-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff !important;
    z-index: 995; /* Fica acima do conteúdo, mas abaixo dos drawers/sidebars */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    /*nimation: stickyComboDown 0.3s ease-out;*/
    padding-bottom: 10px;
}

/* Remove margens duplicadas ou quebras quando fixo */
.sticky-complete-wrapper .header {
    margin-top: 0 !important;
    padding-bottom: 5px;
}

/* Espaçador dinâmico para o corpo da página não dar um "salto" */
.sticky-body-spacer {
    display: block;
}

@keyframes stickyComboDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Desativa o efeito em Mobile/Tablets para preservar o menu responsivo padrão */
@media only screen and (max-width: 991px) {
    .sticky-complete-wrapper {
        position: static !important;
        box-shadow: none !important;
        animation: none !important;
    }
    .sticky-body-spacer {
        display: none !important;
    }
}



/* ==========================================================================
   USER SIDEBAR - ALBERTEC PREMIUM SYSTEM
   ========================================================================== */

.user-sidebar {
    position: fixed;
    right: -400px;
    top: 0;
    width: 360px;
    height: 100%;
   background: #fff;
    z-index: 9999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 30px 0px;
    display: flex;
    flex-direction: column;
}

.user-sidebar.active {
    right: 0;
}

.user-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: none;
}

.user-sidebar-overlay.active {
    display: block;
}

/* Header do Painel (Avatar + Meta Info) */
.user-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding:0px 25px 25px 25px!important;
    border-bottom: 1px solid var(--border-color)!important;
}

.user-profile-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar-circle {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.user-text-meta h5 {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}

.user-text-meta p {
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 0;
}

.close-user-sidebar {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.close-user-sidebar:hover {
    color: #ffffff;
}

/* Área de Autenticação */
.user-auth-action-box {
    padding: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-login-sidebar {
    display: block;
    width: 100%;
    font-weight: 600;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    border-radius: var(--radius-tech);
    border: none;
}

.btn-login-sidebar:hover {
    background: var(--primaria-dark);
}

.register-link-text {
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
}

.register-link-text a {
    color: var(--primaria) !important;
    font-weight: 500;
    text-decoration: none;
}

.register-link-text a:hover {
    text-decoration: underline;
}

/* Lista de Menus */
.user-sidebar-menu-list {
    list-style: none;
    padding: 15px 25px 25px 25px;
    margin: 0;
}

.user-sidebar-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px;
    color: #e2e8f0 !important;
    font-size: 14px;
    font-weight: 400;
    border-radius: var(--radius-tech);
    transition: background 0.2s;
}

.menu-label-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-sidebar-menu-list li a i {
    font-size: 18px;
    color: #94a3b8;
}

.user-sidebar-menu-list li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
}

.user-sidebar-menu-list li a:hover i {
    color: var(--primaria);
}

/* Linha separadora discreta interna */
.menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 10px 0;
}

/* Badge Vermelho de Notificação */
.sidebar-badge-count {
    background: #ef4444; /* Vermelho limpo de e-commerce */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1;
}

/* Preloader com fundo transparente (para carrinho) */
#preloder.preloader-transparent {
    background: rgba(255, 255, 255, 0.7);
}

/* Botao "Mostrar mais" nos filtros */
.btn-filter-more {
    background: none;
    border: none;
    color: var(--primaria);
    cursor: pointer;
    font-size: 0.85em;
    padding: 6px 0 0;
    display: inline-block;
}
.btn-filter-more:hover {
    text-decoration: underline;
}

/* ==========================================================================
   WISHLIST BUTTON (CORACAO)
   ========================================================================== */

.wishlist-btn {
    background: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wishlist-btn i {
    font-size: 18px;
    color: #999;
    transition: all 0.3s ease;
}

.wishlist-btn:hover {
    background: #fff0f0;
    transform: scale(1.1);
}

.wishlist-btn:hover i {
    color: #ff4d4d;
}

/* Estado Ativo (Favoritado) */
.wishlist-btn.active {
    background: #fff0f0;
}

.wishlist-btn.active i {
    color: #ff4d4d;
}

/* Animacao de "pop" ao favoritar */
@keyframes heartPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.wishlist-btn.animating {
    animation: heartPop 0.4s ease;
}

/* Botao de wishlist na wishlist page (tamanho maior) */
.wishlist-page .wishlist-btn {
    width: 45px;
    height: 45px;
}

.wishlist-page .wishlist-btn i {
    font-size: 20px;
}

/* Responsividade */
@media only screen and (max-width: 479px) {
    .user-sidebar {
        width: 100%;
        right: -100%;
    }
}