/* ==========================================================
   ARQUIVO: css/detail-fixes.css
   Correções para slider, mobile e linhas indesejadas
   ========================================================== */

/* --- 1. AJUSTES MOBILE --- */
@media (max-width: 768px) {
    .b-related { margin-bottom: 50px !important; }
    .b-detail__main-info-text { margin-top: 50px !important; }
}

/* --- 2. ESTRUTURA DO SLIDER (IMPEDE EMPILHAMENTO) --- */
/* Reset das listas */
ul.slider-desktop, ul.slider-mobile {
    padding: 0;
    margin: 0;
    list-style: none !important;
}

/* --- REGRAS DE VISIBILIDADE ESTRITAS --- */

/* Por defeito (PC): Esconde o Mobile, Mostra o Desktop */
.slider-mobile {
    display: none !important;
}
.slider-desktop {
    display: block !important;
}
.d-md-block .bx-wrapper {
    display: block !important;
}

/* No Telemóvel (ecrãs até 768px): Esconde o Desktop, Mostra o Mobile */
@media (max-width: 768px) {
    .slider-desktop {
        display: none !important;
    }
    .slider-mobile {
        display: block !important;
    }
    /* Esconde o wrapper do desktop para não ocupar espaço */
    .d-none.d-md-block {
        display: none !important;
    }
}

/* --- ESTILOS VISUAIS --- */

/* Garante que a imagem ocupa o espaço */
img.img-fluid {
    width: 100%;
    height: auto;
    display: block;
}

/* Quando o bxSlider ativa, garante que os itens visíveis aparecem */
.bx-wrapper li {
    display: block; /* Removi o !important aqui para não conflitar */
}

/* --- 3. REMOÇÃO DE LINHAS, BORDAS E SOMBRAS ("GHOST LINES") --- */

/* Limpeza do contentor do plugin bxSlider */
.bx-wrapper {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* Limpeza das caixas de texto */
.b-detail__main-info,
.b-detail__main-info-text,
#info1 {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remoção de pseudo-elementos (:after/:before) que criam linhas */
.b-detail__main-info:after, .b-detail__main-info:before,
.b-detail__main-info-text:after, .b-detail__main-info-text:before,
#info1:after, #info1:before,
.col-12:after, .col-12:before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remoção de <hr> */
hr {
    display: none !important;
    border: none !important;
    height: 0 !important;
}

/* --- 4. CORREÇÃO DE LINKS (LINHAS AZUIS NAS IMAGENS/BOLINHAS) --- */

/* Links com a classe .no-line */
a.no-line {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: block;
}

a.no-line:after, a.no-line:before {
    display: none !important;
    content: none !important;
}

/* Limpeza das "bolinhas" (Pager) no Mobile */
.bx-wrapper .bx-pager a {
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background: #666; /* Cor das bolinhas inativas */
}

.bx-wrapper .bx-pager a.active {
    background: #000; /* Cor da bolinha ativa */
}

.bx-wrapper .bx-pager a:after,
.bx-wrapper .bx-pager a:before {
    content: none !important;
    display: none !important;
}

.bx-default-pager, .bx-pager {
    padding-top: 10px !important;
    border: none !important;
}

/* --- ESPAÇAMENTO DAS MINIATURAS (PC) --- */
#bx-pager a {
    display: block !important;
    margin-bottom: 15px !important; /* Ajuste este valor (10px, 15px, 20px) conforme o gosto */
    padding-bottom: 5px !important; /* Segurança extra para garantir separação */
}

/* Opcional: Se quiser que a última miniatura não tenha margem em baixo */
#bx-pager a:last-child {
    margin-bottom: 0 !important;
}

/* --- ALINHAMENTO À ESQUERDA (REF E TÍTULO) --- */

/* 1. Alinha a Referência */
.b-world__item-val {
    text-align: left !important;
    justify-content: flex-start !important; /* Caso o tema use Flexbox */
    margin-left: 0 !important;
    display: block !important;
}

/* 2. Alinha o Título do Produto */
/* Usamos .b-auto__main-item h2 para ser específico deste bloco */
.b-auto__main-item h2 {
    text-align: left !important;
    width: 100% !important;
}

/* --- CORREÇÃO DO CORTE DA IMAGEM NO PC --- */

/* 1. Força o modelo de caixa para incluir bordas no cálculo da largura */
.slider-desktop li,
.slider-desktop img,
.bx-wrapper,
.bx-viewport {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* 2. Anula o desvio padrão do bxSlider */
/* O plugin normalmente empurra a imagem -5px para a esquerda. Isto traz para o zero. */
.bx-wrapper .bx-viewport {
    left: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    /* Garante que a janela visível ocupa 100% da coluna */
    width: 100% !important; 
}

/* 3. Força a imagem a preencher o espaço disponível sem cortes */
.slider-desktop img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Remove padding da coluna do Bootstrap APENAS na área do slider */
/* Às vezes o padding da coluna (col-10) aperta o slider. Isto ganha espaço. */
.b-detail__main-info-images .col-10 {
    padding-right: 0 !important;
    padding-left: 0 !important; 
}
/* Compensa o padding removido na row (opcional, para alinhar com o resto) */
.b-detail__main-info-images .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}