/* ============================================================================
   iValeneExpress — camada global de LAYOUT e ESPAÇAMENTO
   ----------------------------------------------------------------------------
   Carregada por último no site público e nos painéis. Corrige na origem:
     1. Rodapé sempre no fundo (sticky footer estrutural, sem alturas fixas)
     2. Escala de espaçamento única para toda a aplicação
     3. Campos, botões e grupos com respiração garantida (gap, não margens soltas)
     4. Contentores com largura máxima e gutters em todos os ecrãs
     5. Painéis: sidebar e conteúdo sem sobreposição nem scroll horizontal global
   Não usa overflow-x:hidden global nem posicionamentos absolutos de remendo.
   ========================================================================== */

:root{
    --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;
    --ix-gutter:24px;          /* margem lateral em desktop */
    --ix-gutter-md:20px;       /* tablet */
    --ix-gutter-sm:16px;       /* telemóvel */
    --ix-card-pad:20px;
    --ix-radius:14px;
}

/* ===========================================================================
   1. STICKY FOOTER ESTRUTURAL
   O body é a coluna flex da página; o rodapé recebe margin-top:auto, por isso
   desce até ao fundo quando há pouco conteúdo e acompanha o conteúdo quando
   há muito. Sem height fixo, sem position:fixed, sem margens artificiais.
   ========================================================================= */
html{ height:100%; }
body.mkx-body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
@supports (min-height:100svh){ body.mkx-body{ min-height:100svh; } }
body.mkx-body > .mkx-footer{ margin-top:auto; flex:0 0 auto; }
body.mkx-body > header,
body.mkx-body > .mkx-header{ flex:0 0 auto; }
/* o conteúdo cresce; elementos soltos (scripts, inputs ocultos, modais) não */
body.mkx-body > .main-container,
body.mkx-body > .mkx-page{ flex:1 0 auto; }
body.mkx-body > script,
body.mkx-body > link,
body.mkx-body > style,
body.mkx-body > input,
body.mkx-body > .modal,
body.mkx-body > lgpd-cookie,
body.mkx-body > .sg-drop{ flex:0 0 auto; }

/* ===========================================================================
   2. CONTENTORES — largura máxima e gutters coerentes
   ========================================================================= */
.mkx-wrap{ padding-left:var(--ix-gutter); padding-right:var(--ix-gutter); }
body.mkx-body > .main-container{
    padding-left:var(--ix-gutter);
    padding-right:var(--ix-gutter);
}
@media (max-width:1024px){
    :root{ --ix-gutter:var(--ix-gutter-md); }
}
@media (max-width:767px){
    :root{ --ix-gutter:var(--ix-gutter-sm); --ix-card-pad:16px; }
}

/* ===========================================================================
   3. ESPAÇAMENTO DE FORMULÁRIOS, CAMPOS E BOTÕES
   ========================================================================= */

/* 3.1 input + botão: o padrão Bootstrap cola os dois. Separa-os e devolve
       os cantos arredondados a ambos, mantendo o alinhamento. */
.mkx-body .input-group:has(.input-group-btn),
.mkx-body .input-group:has(.input-group-append),
.mkx-body .input-group:has(> .btn){
    display:flex;
    align-items:stretch;
    gap:var(--sp-3);
    flex-wrap:wrap;
}
.mkx-body .input-group:has(.input-group-btn) > .form-control,
.mkx-body .input-group:has(.input-group-append) > .form-control,
.mkx-body .input-group:has(> .btn) > .form-control{
    flex:1 1 220px;
    width:auto;
    border-radius:10px;
}
.mkx-body .input-group:has(.input-group-btn) .input-group-btn,
.mkx-body .input-group:has(.input-group-append) .input-group-append{
    display:flex;
    align-items:stretch;
    gap:var(--sp-2);
    width:auto;
    font-size:inherit;
}
.mkx-body .input-group:has(.input-group-btn) .input-group-btn > .btn,
.mkx-body .input-group:has(.input-group-append) > .btn{
    border-radius:10px;
    white-space:nowrap;
}
/* grupos com addon de quantidade (− / +) mantêm-se colados de propósito */
.mkx-body .input-group.quantity-control{ gap:0; }

/* 3.2 grupos de botões consecutivos nunca colados */
.mkx-body .form-actions,
.mkx-body .btn-group-spaced,
.mkx-body .ix-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.mkx-body .btn + .btn:not(.btn-group .btn){ margin-left:var(--sp-2); }
.mkx-body .btn-group .btn + .btn{ margin-left:0; }

/* 3.3 rótulos, ajudas e mensagens */
.mkx-body .form-group{ margin-bottom:var(--sp-5); }
.mkx-body .form-group > label,
.mkx-body .control-label{ margin-bottom:var(--sp-2); display:inline-block; }
.mkx-body .help-block,
.mkx-body .form-text,
.mkx-body .invalid-feedback{ margin-top:var(--sp-2); }
.mkx-body .alert{ margin-bottom:var(--sp-5); padding:var(--sp-4) var(--sp-5); }

/* 3.4 bloco de compra (quantidade / acção / favorito) da página de produto */
.mkx-body .box-info-product{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
.mkx-body .box-info-product .option.quantity,
.mkx-body .box-info-product .cart{ margin:0; float:none; }
.mkx-body .box-info-product .cart{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.mkx-body #button-cart{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.mkx-body .btn-desejo{
    width:46px; height:46px; flex:0 0 auto;
    border:2px solid #e2e8f0; border-radius:10px; background:#fff;
    color:#ec4899; font-size:18px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:border-color .15s, color .15s, background .15s;
}
.mkx-body .btn-desejo:hover,
.mkx-body .btn-desejo:focus-visible{ border-color:#ec4899; background:#fff5f9; }

/* ===========================================================================
   4. CARDS, PAINÉIS E TABELAS
   ========================================================================= */
.mkx-body .panel,
.mkx-body .card{ border-radius:var(--ix-radius); margin-bottom:var(--sp-5); }
.mkx-body .panel-body,
.mkx-body .card-body{ padding:var(--ix-card-pad); }
.mkx-body .panel-heading,
.mkx-body .card-header{ padding:var(--sp-4) var(--ix-card-pad); }
.mkx-body .panel-body > :last-child,
.mkx-body .card-body > :last-child{ margin-bottom:0; }

/* tabelas: o scroll horizontal vive no contentor da tabela, nunca na página */
.mkx-body .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mkx-body .table{ margin-bottom:0; }
.mkx-body .table > thead > tr > th,
.mkx-body .table > tbody > tr > td{ padding:var(--sp-3) var(--sp-4); vertical-align:middle; }

/* ===========================================================================
   5. MENU "A MINHA CONTA"
   ========================================================================= */
.mkx-conta > .mkx-act--btn{
    background:none; border:0; font:inherit; color:inherit; cursor:pointer;
    text-align:left; gap:var(--sp-2);
}
.mkx-conta > .mkx-act--btn:focus-visible{ outline:2px solid var(--mkx-orange,#ea580c); outline-offset:2px; border-radius:8px; }
.mkx-conta .mkx-act__caret{ font-size:14px; opacity:.65; transition:transform .15s; }
.mkx-conta.open .mkx-act__caret{ transform:rotate(180deg); }
.mkx-conta.open > .mkx-act--btn{ background:var(--mkx-line-2,#f1f5f9); border-radius:8px; }
.mkx-conta__menu{
    left:auto; right:0; min-width:250px; max-width:min(300px, calc(100vw - 24px));
    padding:var(--sp-2) 0; z-index:1600;
}
.mkx-conta__menu a{ padding:10px 14px; gap:10px; white-space:nowrap; }
.mkx-conta__menu a i{ width:18px; text-align:center; opacity:.8; }
.mkx-conta__menu a:focus-visible{ background:var(--mkx-orange-l,#fff1e6); outline:none; }
.mkx-conta__menu .mkx-conta__sair{
    border-top:1px solid var(--mkx-line,#e6ebf2); margin-top:var(--sp-2); padding-top:12px; color:#b91c1c;
}
.mkx-conta__menu .mkx-conta__sair:hover{ background:#fef2f2; color:#991b1b; }
@media (max-width:767px){
    .mkx-conta__menu{ right:0; left:auto; min-width:220px; }
}

/* ===========================================================================
   6. RODAPÉ — respiração interna coerente
   ========================================================================= */
.mkx-footer__grid{ gap:var(--sp-7) var(--sp-8); }
.mkx-footer__top{ padding-top:var(--sp-8); padding-bottom:var(--sp-7); }


/* ===========================================================================
   7. OVERFLOW HORIZONTAL — resolvido na origem
   ========================================================================= */
/* 7.1 O scroll de uma tabela larga vive dentro do próprio contentor da tabela.
       O tema tinha #content .table-responsive{overflow-x:hidden}, que impedia
       o scroll e empurrava a página inteira para o lado no telemóvel. */
body.mkx-body #content .table-responsive,
body.mkx-body .table-responsive{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; max-width:100%; }

/* 7.2 Linhas do tema com margens laterais negativas dentro de contentores sem
       padding (saíam ~8px para fora do ecrã em telemóvel). */
@media (max-width:767px){
    /* As colunas de produto usam padding 6px e a linha margem -6/-8px: quando o
       contentor acima não tem padding lateral, a linha saía do ecrã. Em telemóvel
       a margem negativa é anulada e o gutter passa a viver nas colunas. */
    body.mkx-body .products-list.row{ margin-left:0 !important; margin-right:0 !important; }
    body.mkx-body .products-list.row > [class*="col-"]{ padding-left:6px; padding-right:6px; }
}

/* 7.3 Newsletter do rodapé: campo e botão deixam de estar fundidos. */
.mkx-footer .mkx-news form,
.mkx-footer form:has(> input[type=email]){ display:flex; gap:var(--sp-2); align-items:stretch; flex-wrap:nowrap; }

/* 7.4 Linhas aninhadas: o tema zera o padding de algumas colunas mas as linhas
       lá dentro mantêm margin:0 -15px, o que as fazia sair do contentor (e
       criava barra horizontal na página de produto). A coluna que contém uma
       linha recupera o padding que compensa essas margens. */
body.mkx-body [class*="col-"]:has(> .row){ padding-left:15px !important; padding-right:15px !important; }
/* 7.5 O mesmo, para a coluna #content (o tema força padding:0 !important com
       especificidade de id). */
body.mkx-body #content[class*="col-"]:has(> .row){ padding-left:15px !important; padding-right:15px !important; }

/* ===========================================================================
   8. PÁGINAS SEM CONTENTOR PRÓPRIO
   Algumas páginas (lista de produtos, categoria, subcategoria, cursos…) não
   abrem `.main-container`: o conteúdo era filho directo do <body> e ficava
   praticamente colado às bermas. Esse filho passa a comportar-se como o
   contentor da página, com os mesmos gutters e largura máxima das restantes.
   ========================================================================= */
body.mkx-body > [class*="col-"],
body.mkx-body > .row,
body.mkx-body > .ax{
    width:100%;
    max-width:1720px;
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--ix-gutter);
    padding-right:var(--ix-gutter);
}
/* A linha imediatamente dentro dessas páginas não volta a aplicar margens
   negativas (senão comia o gutter que acabámos de dar à página). */
body.mkx-body > [class*="col-"] > .row,
body.mkx-body > .row > [class*="col-"] > .row{ margin-left:0; margin-right:0; }
/* A linha principal da página de produto também não volta a aplicar margens
   negativas: o cartão do produto alinha com o resto da página (breadcrumb,
   abas e "Outros produtos deste vendedor") em vez de ficar 15px mais à
   esquerda, quase encostado à berma. */
body.mkx-body #content > .row,
body.mkx-body #content > .product-view.row{ margin-left:0; margin-right:0; }

/* ===========================================================================
   9. PÁGINA DE PRODUTO — coluna lateral compacta
   O módulo "Produtos Recentes" desenhava cartões do tamanho dos da grelha
   principal e esticava a coluna por 1400px, desalinhando a página toda.
   Passa a ser uma lista compacta (miniatura + texto).
   ========================================================================= */
body.mkx-body #column-left .product-simple .item-inner{
    display:flex; align-items:center; gap:var(--sp-3);
    padding:10px 0; border-bottom:1px solid var(--mkx-line,#e6ebf2);
}
body.mkx-body #column-left .product-simple .item-inner:last-child{ border-bottom:0; }
body.mkx-body #column-left .product-simple .item-image{ flex:0 0 64px; width:64px; margin:0; }
body.mkx-body #column-left .product-simple .item-image img{ width:64px; height:64px; object-fit:cover; border-radius:10px; }
body.mkx-body #column-left .product-simple .item-info{ flex:1 1 auto; min-width:0; text-align:left; padding:0; }
body.mkx-body #column-left .product-simple .item-title a{ font-size:13px; line-height:1.3; }
body.mkx-body #column-left .product-simple .rating{ margin:2px 0; font-size:11px; }
body.mkx-body #column-left .product-simple .content_price{ font-size:13px; }
body.mkx-body #column-left .module{ margin-bottom:var(--sp-5); }

/* ===========================================================================
   10. PÁGINA DE PRODUTO — galeria, reserva e bloco de compra
   ========================================================================= */

/* 10.1 Imagem principal centrada no cartão (estava encostada à esquerda com
       muito espaço vazio ao lado) */
@media (min-width:768px){
    /* só em ecrãs onde a imagem grande é mostrada: em telemóvel o tema
       esconde-a (.ocultar_mobile) e o cartão ficaria alto e vazio */
    body.mkx-body .content-product-left .large-image,
    body.mkx-body .content-product-left .product-image-container{
        display:flex; align-items:center; justify-content:center;
        min-height:min(56vh, 460px);
    }
    body.mkx-body .content-product-left .large-image img{ max-height:460px; width:auto; object-fit:contain; }
}

/* 10.2 Miniaturas: sem setas de carrossel quando há uma só imagem (eram duas
       setas soltas ao lado da miniatura, sem nada para navegar) */
body.mkx-body .yt-content-slider:not(:has(.owl2-item + .owl2-item)) .owl2-controls{ display:none; }
/* Setas do carrossel de miniaturas/relacionados: discretas e dentro do bloco */
body.mkx-body .content-product-left .owl2-controls .owl2-nav{ opacity:.55; }
body.mkx-body .content-product-left .owl2-controls .owl2-nav:hover{ opacity:1; }
body.mkx-body .content-product-left .image-additional{ margin-top:var(--sp-4); }

/* 10.3 Horários do serviço: grelha de chips em vez de pilha a toda a largura */
body.mkx-body .slots-titulo{ margin:0 0 var(--sp-3); font-size:14px; }
body.mkx-body .slots-ajuda{ color:var(--mkx-muted,#64748b); font-weight:400; font-size:12.5px; }
body.mkx-body .slots-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
    gap:var(--sp-2);
}
body.mkx-body .slots-grid .slot-btn{
    width:100%; margin:0; border-radius:10px; padding:10px 8px;
    font-size:14px; font-weight:600; white-space:nowrap;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
body.mkx-body .slots-grid .slot-btn i{ opacity:.7; font-size:12.5px; }
body.mkx-body .slots-vazio{ margin:0; display:flex; align-items:center; gap:var(--sp-2); }

/* 10.4 Bloco de compra: quantidade, acção e favorito alinhados e com folga */
body.mkx-body .box-info-product .option.quantity .quantity-control{ gap:0; }
body.mkx-body .box-info-product .option.quantity label{ margin:0 var(--sp-2) 0 0; align-self:center; }
body.mkx-body #button-cart{ padding-left:22px; padding-right:22px; }
body.mkx-body #button-cart[disabled]{ cursor:not-allowed; }
/* 10.5 Quantidade, acção e favorito com a mesma altura e alinhados ao centro
       (tinham 52 / 44 / 46 px e pareciam degraus) */
body.mkx-body .box-info-product .option.quantity .quantity-control,
body.mkx-body #button-cart,
body.mkx-body .btn-desejo{ height:46px; }
body.mkx-body .box-info-product .option.quantity .quantity-control{ display:flex; align-items:center; }
body.mkx-body .box-info-product .option.quantity .quantity-control > input#qtd{ height:46px; }
@media (max-width:767px){
    /* Em telemóvel a imagem grande está escondida pelo tema: o cartão vazio
       deixava uma faixa branca antes da galeria. */
    body.mkx-body .content-product-left .large-image:not(:has(img:not(.ocultar_mobile))){
        display:none;
    }
}