/* ===================================
   Ficheiro: style.css
   Pasta: /assets/css/
   Ultima Actualizacao: 2026-04-06 14:12 GMT
   Versao: 10
   2026-04-06 14:12 - Versao 10: .product-detail-description-html:
                      line-height reduzido de 1.65 para 1.45.
   2026-04-03 17:00 - Versao 9: .section-related: removido override de
                      .product-description (classe ja nao usada nos relacionados).
   2026-04-03 17:00 - Versao 8: .section-related .product-card: max-width:220px
                      impede expansao quando ha poucos relacionados.
                      Grid: minmax(180px,220px) + justify-content:center.
                      Todos os elementos do card com tamanhos reduzidos. .produto-info-html ul/ol: substituido
                      margin-left por padding-left (1.5em). Com o reset
                      global (* {margin:0;padding:0}) e list-style-position
                      outside (default), bullets renderizados fora da caixa
                      sem padding-left podiam ficar cortados em containers
                      com overflow:hidden. padding-left e o metodo correcto.
   Ficheiro: style.css | Pasta: /assets/css/
   Codificacao: UTF-8 com LF

   ALTERACOES:
   2026-04-03 15:39 - Versao 4: product-detail-short-desc: font-size 1.05rem
                       (classe nao tinha estilo, letra ficava demasiado pequena).
                       product-detail-description-html p: margin reduzida de
                       0.75em para 0.35em (intervalo entre linhas excessivo).
   2026-04-03 10:06 - Versao 3: adicionado .product-detail-description-html.
                      Wrapper HTML para a descricao do produto (agora HTML
                      editado com TinyMCE em vez de texto puro). Remove a
                      altura e scroll anteriores (inexistentes no wrapper <p>)
                      e garante rendering correcto de paragrafos, listas, links
                      e formatacao TinyMCE dentro do bloco de descricao.
   2026-04-01 13:00 - @media print: adicionadas regras print-color-adjust:exact
                      para .blk e elementos filhos do bloco B (.blk-b-body,
                      .blk-b-row, .blk-b-c1, .blk-b-vsep). Sem esta directiva
                      os browsers com print-color-adjust:economy suprimem
                      bordas claras (#d8dde8) na impressao do modal de produto.
                      Adicionado page-break-inside:avoid em .blk-row.
   2026-03-05 17:05 - .price-value-free: removidas sobreposicoes de cor e tamanho.
                      A classe sobrepunha a cor branca do .product-detail-price
                      com verde (#059669) e reduzia o tamanho de 2rem para 1.5rem.
                      "Gratis" deve aparecer igual ao preco: branco, 2rem, bold.
                      .product-price-free (cards da listagem) nao alterado:
                      ai o fundo e branco e o verde e intencional.
                    - .price-label: font-size aumentado de 1rem para 1.4rem.
                      A label "Preco" aparecia pequena ao lado do valor a 2rem.
   2026-03-05 12:00 - :root removido do style.css.
                      As variaveis --primary-color, --secondary-color,
                      --accent-color, --text-dark, --text-light, --bg-light,
                      --bg-white, --border-color, --font-corpo, --font-titulo,
                      --hero-*, --rodape-*, --badge-* passam a existir APENAS
                      em getColorCSS() (includes/functions.php), que as emite
                      como <style> inline ANTES do <link> para style.css.
                      O :root do style.css sobrepunha os valores configurados
                      em Administracao porque o <link> e carregado depois do
                      <style> inline: o ultimo :root vence na cascata CSS.
                      Variaveis que nao existem em getColorCSS() (sombras,
                      radii, transition) sao mantidas aqui com valores fixos.
   2026-03-04 18:15 - .hero: background passa de gradiente hardcoded
                      (#667eea -> #764ba2) para var(--hero-fundo1) e
                      var(--hero-fundo2). .hero-content: color passa de
                      white para var(--hero-letra). As tres variaveis sao
                      emitidas por getColorCSS() com os valores de
                      cor_hero_fundo1, cor_hero_fundo2, cor_hero_letra
                      da tabela configuracoes.
                      .footer: background passa de var(--text-dark) para
                      var(--rodape-fundo); color passa de white para
                      var(--rodape-letra). Idem para cor_rodape_fundo e
                      cor_rodape_letra. Rodape e hero totalmente
                      configuraves em Administracao > Configuracoes.
   2026-03-01 10:16 - .product-badge-unavailable: badge de produto indisponivel
                      (top-right, cinza escuro). Versao .product-badge-large para
                      pagina de produto. .product-unavailable-notice: caixa de
                      aviso na pagina do produto (substitui o botao de compra).

   ALTERACOES:
   2026-02-28 15:39 - Todas as font-family hardcoded substituidas por CSS
                      variables --font-corpo e --font-titulo, injectadas via
                      getColorCSS() com os valores configurados em admin.
   2026-02-28 15:01 - footer-content: grid de 3 colunas fixas (2fr 1fr 1fr)
                      para distribuir melhor o espaco horizontal. A coluna
                      "Sobre" fica mais larga; Contactos e Legal dividem o
                      restante em partes iguais.
   2026-02-28 14:51 - footer-bottom: align-items:stretch + flex no copy para
                      centrar verticalmente o copyright. font-size ligeiramente
                      maior no .footer-bottom-copy.
   2026-02-28 14:48 - footer-bottom: padding e font-size reduzidos.
                      .footer-bottom-operator: posicionado a direita via flex,
                      texto internamente alinhado a esquerda (text-align:left).
   2026-02-28 14:24 - footer-bottom: layout flex, copyright a esquerda,
                      info do operador (3 linhas, letra pequena) a direita.
                      Responsivo: empilha em mobile.
   2026-02-28 14:02 - section-title: font-size reduzido (2.5rem -> 1.8rem).
   2026-02-28 13:59 - Hero: padding reduzido (4.5rem -> 3rem), hero-title
                      font-size reduzido (3rem -> 2.5rem).
   2026-02-28 13:53 - hero-decoration: height reduzida (100px -> 50px) para
                      diminuir a onda de transicao entre hero e destaques.
                      .section-featured: padding-top reduzido (2rem -> 0.5rem)
                      para encostar mais o titulo "Montra" ao hero.
   2026-02-28 13:48 - Hero: padding aumentado ligeiramente (4rem -> 4.5rem).
   2026-02-28 13:44 - Reducao da zona do hero (padding, font-size, margens)
                      e da seccao de destaques, para que a primeira linha de
                      produtos seja visivel sem scroll na pagina inicial.
   2026-02-26 17:15 - Badges "Destaque" e "Gratis": cores passam a ser CSS
                      variables (--badge-destaque-fundo, --badge-destaque-letra,
                      --badge-gratis-fundo, --badge-gratis-letra) configuradas
                      em admin/configuracoes.php. Gradient hardcoded do badge
                      "Gratis" substituido por cor solida via variavel.
                      product-overlay: opacidade 0.9 -> 0.45 -- a imagem do
                      produto e visivel por baixo da sombra ao hover.
   2026-02-26 16:46 - Scrollbar do preview: track passa de transparent para
                      #e2e8f0 (cinza claro) -- torna visivel a extensao total
                      da barra. Indicador mantido em #94a3b8 (mais escuro que
                      o track). Ao hover do indicador: #64748b. Firefox
                      actualizado: scrollbar-color: #94a3b8 #e2e8f0.
   2026-02-27 02:05 - .product-card: display:flex;flex-direction:column para que
 *                    .product-footer fique sempre no fundo do card.
 *                    .product-info: flex:1;display:flex;flex-direction:column.
 *                    .product-footer: margin-top:auto.
 *   2026-02-26 16:42 - .product-info-preview: bordas laterais removidas do hover.
                      O estado hover passa a ter apenas as linhas top e bottom.
   2026-02-26 16:39 - Gap de 4px entre imagem e preview, retirado da imagem.
                      padding-bottom:4px na regra :has(.product-info-preview)
                      da .product-detail-image. overflow:hidden corta a imagem
                      4px acima do fundo; background:#f7fafc (identico ao do
                      preview) preenche o espaco -- gap visualmente limpo sem
                      alterar a altura total do elemento (aspect-ratio mantido).
   2026-02-26 16:36 - .product-info-preview: linhas top/bottom e bordas laterais
                      ao hover mais subtis: #94a3b8 -> #cbd5e0 (um passo acima
                      do cinza-claro do estado normal #e2e8f0).
   2026-02-26 16:33 - CORRECCAO: linhas tenues a esquerda/direita do preview.
                      CAUSA: .product-detail-image tem box-shadow:var(--shadow-lg)
                      (0 10px 25px rgba(0,0,0,0.15)). O blur de 25px + offset 10px
                      estende-se ~35px abaixo da imagem, dentro da zona de preview.
                      Nos cantos arredondados da imagem (border-radius inferior),
                      essa sombra aparecia como linhas tenues nos lados do preview.
                      CORRECCAO: a regra :has(.product-info-preview) passa a
                      incluir box-shadow:none, eliminando a sombra quando o
                      preview esta presente.
   2026-02-26 16:27 - .product-info-preview: bordas laterais (esquerda/direita)
                      removidas do estado normal; aparecem apenas ao hover.
                      Estado normal: apenas linhas top e bottom (#e2e8f0, 2px).
                      Hover: top/bottom escurecem (#94a3b8) e bordas laterais
                      surgem com a mesma cor via box-shadow inset (respeita
                      border-radius nos cantos; nao afecta o box-model).
   2026-02-26 16:23 - .product-info-preview: borda azul ao hover substituida
                      por linha top e linha bottom cinzas.
                      Estado normal: border-top e border-bottom 2px cinza-claro
                      (#e2e8f0); bordas laterais e raio mantidos sem cor de acento.
                      Hover/focus: as duas linhas escurecem para #94a3b8 (cinza-medio).
                      A borda de contorno do elemento (border: 1px solid #e2e8f0)
                      mantida para preservar o contorno lateral subtil; apenas o
                      realce hover deixa de ser azul.
                      Scrollbar ao hover mantida neutra: rgba substituido por
                      tons de cinza (#94a3b8 / #64748b) para coerencia.
   2026-02-26 12:11 - Modal de informacao do produto: dimensionamento alinhado
                      com o preview e margens A4.
                      .produto-modal-painel: max-width 820px -> 826px.
                        Calculo: preview 648px x 110% = 713px de conteudo util
                        + 2x57px de margem A4 (15mm a 96dpi) = 826px.
                        O modal apresenta o conteudo a 110% da largura do
                        preview, com o mesmo alinhamento visual.
                      .produto-modal-corpo: padding 1.5rem -> 1.5rem 57px.
                        57px = 15mm a 96dpi (margem lateral A4 standard).
                        No @media print o padding e 0 (as margens fisicas
                        sao definidas pelo @page { margin: 15mm }).
   2026-02-26 11:47 - .container: max-width aumentado de 1200px para 1400px.
                      Sem impacto em mobile (max-width nunca e atingido em
                      ecras estreitos; media queries de mobile inalteradas).
                      Em desktop, ecras >= 1400px passam a usar mais espaco
                      horizontal; ecras < 1400px comportam-se como antes.
                      No detalhe do produto (grid 1fr 1fr, gap 4rem) cada
                      coluna passa de ~568px para ~648px em ecras largos.
   2026-02-26 10:53 - Mobile: correcao definitiva do layout da pagina de produto.
                      PROBLEMA 1 - Imagem enorme:
                        aspect-ratio:4/3 sobre largura total (375px) = 281px de
                        altura; a regra max-height:260px anterior nao era suficiente
                        e conflituava com aspect-ratio (dois constrangimentos de
                        altura divergentes). Solucao: aspect-ratio:unset + height
                        e max-height:200px fixos -- a imagem fica sempre com 200px.
                      PROBLEMA 2 - Coluna direita (titulo/preco) sobrepoe-se ao
                        preview de informacao:
                        overflow:hidden em .product-detail-image-col (CSS desktop)
                        nao era anulado em mobile; em grid de coluna unica isso
                        podia colapsar a altura calculada do item, fazendo o
                        product-detail-info comecar antes do fim do preview.
                        Solucao: overflow:visible em mobile.
                        Adicionalmente, sem restricao de altura o preview
                        expandia-se ao conteudo completo do TinyMCE (centenas de
                        pixeis). Solucao: max-height:120px + overflow-y:auto no
                        .product-info-preview em mobile.
   2026-02-26 10:46 - Mobile: imagem do produto demasiado grande no telemovel.
                      product-detail-image-col: max-width:480px + margin auto --
                      limita a largura da coluna da imagem no layout de 1 coluna.
                      product-detail-image: max-height:260px -- impede que
                      aspect-ratio:4/3 ocupe demais o viewport em ecras estreitos;
                      object-fit:contain (ja existente) preserva as proporcoes.
                      product-detail-title: font-size:1.75rem (era 2.5rem).
                      product-detail-price: flex-direction:column em mobile
                      para que o valor e a etiqueta nao se sobreponham.
   2026-02-25 23:44 - Preview alinhado com "Pagamento Seguro" via JS:
                      CSS puro tem ciclo vicioso: preview cresce -> coluna
                      esquerda cresce -> grid estica coluna direita -> espaco
                      entre botao e "Pagamento Seguro" aumenta.
                      Solucao: align-items:start no grid (colunas independentes);
                      product-detail-image-col display:block;
                      product-detail-image flex:0 0 auto removido (irrelevante
                      num block); produto.php: JS ajustarAlturaPreview() mede
                      a coluna direita, subtrai a imagem, aplica essa altura
                      exacta ao preview. Chamada no load e no resize.
   2026-02-25 23:40 - Preview alinhado com "Pagamento Seguro":
                      grid align-items:stretch -- ambas as colunas mesma altura.
                      product-detail-image-col: display:flex;flex-direction:column.
                      product-detail-image: flex:0 0 auto -- a imagem nunca
                      cresce (aspect-ratio:4/3 ja fixa a altura).
                      product-info-preview: flex:1;min-height:0 -- preenche
                      exactamente o espaco restante ate ao fundo da coluna,
                      alinhando com "Pagamento Seguro" sem max-height fixo.
   2026-02-25 23:34 - Badge: width:fit-content em product-badge-large.
                      position:absolute ignora display:inline-block;
                      fit-content limita a largura ao conteudo.
                      Preview: align-items:start no grid (colunas com
                      altura propria; espaco entre botao e "Pagamento
                      Seguro" permanece fixo). product-detail-image-col
                      volta a display:block. preview com max-height:200px.
   2026-02-27 15:59 - Badge customizada por produto: .product-badge substituida por
                      .product-badge-custom (top-left, cores via style inline).
                      .product-badge-large actualizada (cores via style inline).
                      Regra de offset destaque+gratis removida.
   2026-02-25 23:28 - Badge "GRATIS": display:inline-block em product-badge-large
                      para que o div nao ocupe a largura total da imagem.
                      Preview de informacao: altura alinhada com "Pagamento seguro".
                      product-detail-grid: align-items volta a stretch -- a coluna
                      esquerda fica com a mesma altura da coluna direita.
                      product-detail-image-col: display:grid com grid-template-rows:
                      auto 1fr -- linha "auto" para a imagem (altura determinada
                      pelo aspect-ratio:4/3, nunca cresce); linha "1fr" para o
                      preview (preenche o espaco restante ate ao fundo da coluna).
                      product-info-preview: max-height removido; min-height:0
                      (necessario para item de grid poder encolher); overflow e
                      scrollbar inalterados.
   2026-02-25 23:06 - Imagem do produto: area SEMPRE identica, com ou sem preview.
                      Causa raiz: itens de CSS grid tem min-width:auto por
                      defeito. O preview continha HTML com elementos largos
                      (imagens/tabelas do TinyMCE com largura fixa), que
                      forcavam a coluna do grid a crescer, arrastando a imagem.
                      Correcao: min-width:0 em product-detail-image-col --
                      obriga o grid a respeitar o 1fr mesmo com conteudo
                      mais largo. overflow:hidden contem os filhos.
                      product-info-preview: overflow:hidden + overflow-y:auto
                      (scroll vertical ao hover); conteudo horizontal cortado.
                      product-info-preview-inner img: max-width:100% --
                      impede que imagens do TinyMCE excedam a largura da zona.
   2026-02-25 22:30 - Layout da pagina de produto (product-detail-grid):
                      product-detail-grid: align-items alterado de start para
                      stretch -- ambas as colunas ficam com a mesma altura.
                      product-detail-image: flex-shrink:0 -- a imagem mantem
                      o tamanho natural e nao cresce por causa do flex.
                      product-detail-info: display:flex;flex-direction:column
                      -- coluna direita empilha os elementos verticalmente.
                      product-security: margin-top:auto -- os indicadores de
                      seguranca sao empurrados para o fundo da coluna direita.
                      product-info-preview: flex:1;min-height:0 -- a zona de
                      preview ocupa todo o espaco restante abaixo da imagem
                      (ate ao nivel dos indicadores de seguranca) sem JS.
                      Scrollbar: oculta por defeito; visivel apenas quando o
                      rato esta sobre a zona (scrollbar-width:none por defeito;
                      scrollbar-width:thin e ::-webkit-scrollbar:6px em :hover).
                      JS ajustarAlturaPreview removido de produto.php
                      (substituido por CSS puro).
   2026-02-25 19:00 - Preview da informacao do produto:
                      Botoes up/down removidos. Scroll por scrollbar vertical
                      nativa (overflow-y:auto). Scrollbar estilizada (6px,
                      translucida) via ::-webkit-scrollbar e scrollbar-width.
                      .product-info-preview-inner: position:absolute removido
                      (nao necessario com scroll nativo); padding reduzido para
                      0.5rem 0.75rem (margens menores). Gradiente ::after removido.
   2026-02-25 18:00 - Preview da informacao do produto sem escala:
                      Conteudo em tamanho real; overflow-x:hidden corta o que
                      exceder a largura horizontal.
                      Botao de scroll unico substituido por 2 botoes separados
                      (product-info-scroll-up / product-info-scroll-down),
                      translucidos (rgba + backdrop-filter), posicionados no
                      canto superior e inferior direito do preview.
   2026-02-23 16:05 - product-detail-image: removido aspect-ratio:4/3 e object-fit:contain.
                      A imagem passa a definir a sua propria altura (width:100%;height:auto).
                      Elimina a barra branca vertical que aparecia com imagens nao-4:3.
   2026-02-23 15:42 - Removidas regras do botao .btn-info-detail (substituido).
                    - Adicionado .product-detail-image-col (wrapper da coluna imagem).
                    - Adicionado .product-info-preview: zona clicavel abaixo da imagem,
                      cursor zoom-in (lupa), excerto do conteudo do modal como preview.
   2026-02-18 16:00 - product-card: adicionado position:relative para badges ancorados correctamente
                    - product-image: object-fit alterado de cover para contain (imagens digitais
                      devem ser mostradas inteiras); adicionado padding de 0.5rem
   2026-02-18 15:30 - Removidas 3 classes nao usadas:
                      .hero-bg (div nunca emitido em index.php)
                      .paypal-logo (sem img.paypal-logo no checkout.php)
                      .checkout-status-success (JS so usa checkout-status-error)
   =================================== */

/* ===================================
   VARIAVEIS CSS
   =================================== */
:root {
    /* --- Variaveis de cor: VALORES DE EMERGENCIA apenas. ---
     * Em condicoes normais estas variaveis sao sobrepostas pela <style>
     * inline emitida por getColorCSS() (includes/functions.php) que e
     * incluida ANTES deste ficheiro em todas as paginas publicas.
     * Estes valores so se aplicam se getColorCSS() nao for chamada
     * (ex: paginas standalone sem config.php). */
    --primary-color: #667eea;
    --primary-dark:  #5568d3;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --text-dark: #1a202c;
    --text-light: #718096;
    --bg-light: #f7fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;

    /* --- Variaveis de layout: constantes, nao configuradas em admin. ---
     * Estas NAO existem em getColorCSS() -- vivem aqui exclusivamente. */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   RESET E BASE
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-corpo);
    color: var(--text-dark);
    background: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* ===================================
   CONTAINER E LAYOUT
   =================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================================
   HEADER
   =================================== */
.header {
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
}

.logo {
    font-family: var(--font-titulo);
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-dark);
    font-weight: 500;
    position: relative;
    transition: var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link:hover::after {
    width: 100%;
}

/* ===================================
   HERO SECTION
   =================================== */
/* Hero: padding reduzido (4.5rem -> 3rem) para diminuir a altura total. */
/* Hero: fundo e letra usam variaveis CSS configuradas em admin.
 * Por defeito --hero-fundo1 = cor_primaria, --hero-fundo2 = cor_secundaria,
 * --hero-letra = #ffffff. Configuravel em Administracao > Configuracoes. */
.hero {
    position: relative;
    padding: 3rem 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hero-fundo1) 0%, var(--hero-fundo2) 100%);
}

/* A cor do texto e do botao herda --hero-letra para suportar fundos claros. */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--hero-letra);
}

/* Titulo do hero: font-size reduzido de 3rem para 2.5rem. */
.hero-title {
    font-family: var(--font-titulo);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1rem;
    animation: fadeInUp 0.8s ease-out;
}

/* Subtitulo: margin-bottom reduzida de 2.5rem para 1.5rem. */
.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* Onda de transicao no fundo do hero: height reduzida de 100px para 50px
 * para diminuir o espaco visual entre o hero e a seccao de destaques. */
.hero-decoration {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--bg-light);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}

/* ===================================
   BUTTONS
   =================================== */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: white;
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--primary-color);
    color: white;
}

.btn-secondary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

.btn-link {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-link:hover {
    gap: 1rem;
}

/* ===================================
   SECTIONS
   =================================== */
/* Seccao: padding reduzido de 5rem para 3.5rem. */
.section {
    padding: 3.5rem 0;
}

/* Titulo da seccao: font-size reduzido de 2.5rem para 1.8rem. */
.section-title {
    font-family: var(--font-titulo);
    font-size: 1.8rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

/* Seccao de destaques (Montra): padding-top reduzido para aproximar
 * o titulo do hero -- o padding-bottom mantem-se igual ao das outras
 * seccoes para nao comprimir a grelha de produtos. */
.section-featured {
    padding-top: 0.5rem;
}

/* Produtos relacionados: cards compactos.
 * Imagem mais baixa, padding reduzido, fontes menores.
 * max-width no card individual impede expansao excessiva quando
 * existem poucos relacionados numa grelha larga. */
.section-related .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    justify-content: center;
    gap: 1rem;
}

.section-related .product-card {
    max-width: 220px;
}

.section-related .product-image-wrapper {
    padding-top: 70%;
}

.section-related .product-info {
    padding: 0.75rem;
}

.section-related .product-category {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}

.section-related .product-title {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.section-related .product-short-desc {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.section-related .product-footer {
    padding-top: 0.5rem;
}

.section-related .product-price {
    font-size: 0.95rem;
}

.section-related .btn-link {
    font-size: 0.8rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

/* ===================================
   PRODUCTS GRID
   =================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.featured-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.product-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out backwards;
    /* Necessario para ancorar os badges (position:absolute) ao card */
    position: relative;
    /* Flex column: permite empurrar .product-footer para o fundo do card */
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.product-image-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 66.67%;
    background: var(--bg-light);
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* contain: mostra a imagem inteira sem cortar (adequado para produtos digitais) */
    object-fit: contain;
    /* Pequeno padding para a imagem nao encostar nas bordas */
    padding: 0.5rem;
    box-sizing: border-box;
    transition: var(--transition);
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Opacidade reduzida de 0.9 para 0.45: a imagem e visivel por baixo
     * da sombra ao hover, em vez de ser completamente ocultada. */
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.45), rgba(118, 75, 162, 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

/* Badge customizavel por produto -- canto superior esquerdo dos cards.
 * Cores definidas via atributo style inline (badge_cor_fundo / badge_cor_letra
 * do produto, com fallback para os defaults de configuracoes).
 * Posicionada a esquerda para nao colidir com a badge "Gratis" (top-right). */
.product-badge-custom {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
    text-transform: uppercase;
}

.product-info {
    padding: 1.5rem;
    /* Ocupa todo o espaco restante apos a imagem, empurrando
     * .product-footer para o fundo do card independentemente
     * da altura do titulo ou da descricao */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-category {
    display: inline-block;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.product-title a {
    transition: var(--transition);
}

.product-title a:hover {
    color: var(--primary-color);
}

.product-description {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    /* Empurrar sempre para o fundo do card (funciona porque .product-info
     * e flex-direction:column e .product-card e flex-direction:column) */
    margin-top: auto;
}

/* Coluna do preco: empilha o valor e a nota de IVA verticalmente */
.product-price-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Nota de IVA abaixo do preco (visivel apenas para visitantes UE) */
.product-vat-notice {
    font-size: 0.68rem;
    color: var(--text-light);
    line-height: 1.3;
}

/* Variante para a pagina de detalhe do produto: ligeiramente maior
 * porque o preco em product-detail-price e maior (1.75rem) */
.product-vat-notice-detail {
    font-size: 0.78rem;
    display: block;
    margin-top: 0.2rem;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ===================================
   PRODUCT DETAIL
   =================================== */
.breadcrumb {
    background: var(--bg-white);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--primary-color);
}

.product-detail {
    padding: 4rem 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    /* start: colunas com altura natural propria. A altura do preview
     * e definida por JS (ajustarAlturaPreview) para alinhar com
     * "Pagamento Seguro" sem o ciclo vicioso do CSS stretch. */
    align-items: start;
}

/* Coluna da imagem: block simples.
 * min-width:0 evita expansao por conteudo largo; overflow:hidden corta.
 * A altura do preview e definida por JS (ajustarAlturaPreview()). */
.product-detail-image-col {
    display: block;
    min-width: 0;
    overflow: hidden;
}

/* Coluna de informacao: flex column para que margin-top:auto em
 * .product-security empurre os indicadores para o fundo, alinhados
 * verticalmente com o fundo da zona de preview da coluna da esquerda. */
.product-detail-info {
    display: flex;
    flex-direction: column;
}

.product-detail-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg-light);
    /* aspect-ratio:4/3 fixa a altura proporcional a largura.
     * A area de imagem e sempre identica, com ou sem preview abaixo. */
    width: 100%;
    aspect-ratio: 4 / 3;
}

.product-detail-image img {
    /* A imagem escala para caber no contentor de altura fixa.
     * object-fit:contain mostra a imagem inteira sem corte;
     * o fundo (bg-light) preenche as margens se a proporcao
     * da imagem diferir de 4:3. */
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Badge customizavel na pagina de detalhe do produto (versao grande).
 * Cores definidas via style inline pelo PHP, identico ao card de listagem. */
.product-badge-large {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* width:fit-content: position:absolute ignora display; fit-content
     * limita a largura ao conteudo, impedindo que o div ocupe toda
     * a largura do contentor da imagem. */
    width: fit-content;
    z-index: 2;
}

.product-category-large {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.product-detail-title {
    font-family: var(--font-titulo);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.product-detail-price {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-label {
    font-size: 1.4rem;
    opacity: 0.9;
}

/* Grupo direito: valor + aviso IVA, alinhados a direita */
.price-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.price-value {
    font-size: 2rem;
    font-weight: 700;
}

/* Aviso IVA na pagina de detalhe: mesma cor do preco (branco sobre gradiente) */
.product-vat-notice-detail {
    font-size: 0.78rem;
    color: white;
    opacity: 0.88;
    display: block;
    margin-top: 0.2rem;
}

.product-detail-description {
    margin-bottom: 2rem;
}

.product-detail-description h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Wrapper HTML da descricao (TinyMCE desde produto_form.php v2).
 * Renderiza HTML real (paragrafos, listas, links, formatacao).
 * Sem altura maxima nem scroll -- apresenta o conteudo com a
 * altura real tal como antes com texto puro. */
.product-detail-description-html {
    color: var(--text-dark);
    line-height: 1.45;
    word-break: break-word;
}

/* Paragrafos gerados pelo TinyMCE ou pela migracao */
.product-detail-description-html p {
    margin: 0 0 0.35em;
}

.product-detail-description-html p:last-child {
    margin-bottom: 0;
}

/* Listas */
.product-detail-description-html ul,
.product-detail-description-html ol {
    padding-left: 1.5em;
    margin: 0 0 0.75em;
}

.product-detail-description-html li {
    margin-bottom: 0.25em;
}

/* Titulos dentro da descricao (uso incomum mas suportado) */
.product-detail-description-html h2,
.product-detail-description-html h3 {
    margin: 0.75em 0 0.4em;
    font-weight: 600;
}

/* Links */
.product-detail-description-html a {
    color: var(--primary-color, #667eea);
    text-decoration: underline;
}

.product-detail-description-html a:hover {
    opacity: 0.8;
}

/* Descricao curta do produto (tagline entre nome e preco) */
.product-detail-short-desc {
    font-size: 1.05rem;
    color: var(--text-light);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.product-features {
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
}

.product-features h3 {
    margin-bottom: 1rem;
}

.product-features ul {
    list-style: none;
}

.product-features li {
    padding: 0.5rem 0;
    color: var(--text-dark);
}

.product-buy-form {
    margin-bottom: 2rem;
}

.product-security {
    display: flex;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    /* margin-top:auto: empurra os indicadores de seguranca para o fundo
     * da coluna da direita (que e agora display:flex;flex-direction:column).
     * Garante alinhamento vertical com o fundo da zona de preview
     * da coluna da esquerda. */
    margin-top: auto;
}

.security-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.security-icon {
    font-size: 1.25rem;
}

/* ===================================
   CHECKOUT
   =================================== */
.page-title {
    font-family: var(--font-titulo);
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 3rem;
}

.checkout-section {
    padding: 4rem 0;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
}

.checkout-summary,
.checkout-form-wrapper {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.checkout-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.order-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.order-item-image {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.order-item-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.order-item-category {
    color: var(--text-light);
    font-size: 0.875rem;
}

.order-item-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.order-total {
    padding: 1.5rem 0;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.order-total-final {
    font-size: 1.25rem;
    font-weight: 700;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
}

.checkout-benefits {
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
}

.checkout-benefits h3 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.checkout-benefits ul {
    list-style: none;
}

.checkout-benefits li {
    padding: 0.5rem 0;
    color: var(--text-dark);
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--text-dark);
}

.form-input {
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group small {
    color: var(--text-light);
    font-size: 0.875rem;
}

.payment-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.payment-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.payment-info {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#paypal-button-container {
    margin: 1.5rem 0;
}

.security-badges {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-light);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-dark);
}

/* ===================================
   CHECKBOX CGV (CHECKOUT)
   =================================== */

/* Contentor da linha de aceitacao das CGV */
.cgv-group {
    padding: 0.85rem 1rem;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--primary-color, #667eea);
    border-radius: 6px;
}

/* Label que engloba checkbox + texto */
.cgv-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
    line-height: 1.5;
}

/* A checkbox em si */
.cgv-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
    accent-color: var(--primary-color, #667eea);
    cursor: pointer;
}

/* Texto da label com o link para as CGV */
.cgv-text {
    font-size: 0.78rem;
    color: #1e3a5f;
}

.cgv-text a {
    color: var(--primary-color, #667eea);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    font-weight: 700;
    white-space: nowrap;
}

/* Icone de ligacao externa junto ao texto do link */
.cgv-text a::after {
    content: '\00a0\2197'; /* espaco + seta diagonal */
    font-size: 0.8em;
    font-weight: 400;
    vertical-align: super;
    line-height: 1;
}

.cgv-text a:hover {
    text-decoration: none;
    color: var(--primary-dark, #5568d3);
}

/* Estado de erro: borda vermelha quando nao aceite e tentativa de submit */
.cgv-group.cgv-erro {
    border-color: #f87171;
    border-left-color: #dc2626;
    background: #fff5f5;
    animation: cgv-shake 0.35s ease;
}

@keyframes cgv-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

/* ===================================
   SUCCESS PAGE
   =================================== */
.success-section {
    padding: 4rem 0;
}

.success-card {
    background: var(--bg-white);
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 2rem;
    animation: scaleIn 0.5s ease-out;
}

.success-title {
    font-family: var(--font-titulo);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.success-message {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 3rem;
}

.order-summary {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    text-align: left;
}

.order-summary h2 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.order-product-image {
    width: 200px;
    height: auto;
    margin: 0 auto 1.5rem;
    border-radius: var(--radius-md);
}

.order-table {
    width: 100%;
}

.order-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.download-section {
    padding: 2rem 0;
}

.download-section h3 {
    margin-bottom: 1rem;
}

.download-note {
    margin-top: 1.5rem;
    color: var(--text-light);
}

.success-actions {
    margin: 2rem 0;
}

.support-info {
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.support-info h4 {
    margin-bottom: 0.5rem;
}

/* Confetti animation */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    z-index: 9999;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    to {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* ===================================
   FOOTER
   =================================== */
/* Rodape: fundo e letra usam variaveis CSS configuradas em admin.
 * Por defeito --rodape-fundo = cor_texto_escuro (#1a202c), --rodape-letra = #ffffff. */
.footer {
    background: var(--rodape-fundo);
    color: var(--rodape-letra);
    padding: 3rem 0 1rem;
    margin-top: 5rem;
}

/* 3 colunas: "Sobre" mais larga (2fr), Contactos e Legal iguais (1fr cada).
 * Substitui o auto-fit que podia gerar 1 ou 2 colunas conforme a largura. */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-title {
    font-family: var(--font-titulo);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.footer-subtitle {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.footer-text {
    opacity: 0.8;
    line-height: 1.8;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    opacity: 0.8;
    transition: var(--transition);
}

.footer-links a:hover {
    opacity: 1;
    color: var(--primary-color);
}

/* Linha inferior do rodape: copyright a esquerda, info do operador a direita.
 * flex-wrap permite empilhar em ecras pequenos sem aumentar a altura em desktop. */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.6;
    font-size: 0.72rem;
}

/* Copyright: font-size ligeiramente maior e centrado verticalmente
 * usando flex no proprio elemento. */
.footer-bottom-copy {
    margin: 0;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
}

/* Info do operador: bloco posicionado a direita via flex (justify-content),
 * mas o texto dentro do bloco alinha-se a esquerda. */
.footer-bottom-operator {
    font-size: 0.68rem;
    line-height: 1.55;
    text-align: left;
}

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================
   ANIMATIONS
   =================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    /* -------------------------------------------------------
     * HEADER MOBILE: links + selector de idioma em flex-wrap.
     *
     * O <nav> tem flex-wrap:wrap. O .language-selector usa
     * margin-left:auto para se ancorar sempre a direita, na
     * mesma fila dos links (se couber) ou numa fila propria
     * (se os links ocuparem toda a largura).
     * .lang-name e ocultado: mostra so bandeira+seta (~44px)
     * em vez de bandeira+texto (~140px).
     * Resultado: o selector nunca sai do ecra.
     * ------------------------------------------------------- */

    .header-content {
        padding: 0.75rem 0;
        align-items: flex-start;
    }

    .logo {
        font-size: 1.4rem;
        line-height: 1.2;
        padding-top: 0.15rem;
    }

    /* Nav: flex-wrap activo; links podem quebrar linha */
    .nav {
        flex-wrap: wrap;
        gap: 0.3rem 0.75rem;
        align-items: center;
    }

    /* Selector de idioma: ancora-se sempre a direita da fila */
    .nav .language-selector {
        margin-left: auto;
    }

    /* Botao compacto: apenas bandeira + seta */
    .nav .lang-name {
        display: none;
    }

    .nav .language-button {
        padding: 5px 8px;
        gap: 4px;
    }
    
    .products-grid,
    .featured-grid {
        grid-template-columns: 1fr;
    }
    
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* --- Coluna da imagem em mobile ---
     * overflow:visible anula o overflow:hidden do CSS de desktop,
     * que em grid de coluna unica podia colapsar a altura do item
     * e fazer o product-detail-info sobrepor-se ao preview.
     * Largura total disponivel (sem max-width nem margin auto):
     * a imagem ja tem max-height para controlar a sua propria altura. */
    .product-detail-image-col {
        overflow: visible;
        width: 100%;
        min-width: 0;
    }

    /* --- Imagem do produto em mobile ---
     * aspect-ratio:16/9 substituido por altura fixa maxima:
     * impede que o 4/3 calculado sobre a largura total do ecra
     * (ex: 375px -> 281px de altura) domine o viewport.
     * max-height:200px limita a altura; width:100% mantem a largura
     * e object-fit:contain (herdado) preserva as proporcoes sem corte.
     * aspect-ratio e anulado para que max-height seja a unica
     * restricao de altura -- evita conflito entre as duas regras. */
    .product-detail-image {
        aspect-ratio: unset;
        height: 200px;
        max-height: 200px;
        width: 100%;
    }

    /* --- Preview de informacao em mobile ---
     * Em desktop a altura e calculada por JS (ajustarAlturaPreview).
     * Em mobile, o JS limpa a altura inline (preview.style.height='').
     * Sem restricao de altura o preview expande-se ao conteudo total
     * do TinyMCE, podendo ocupar centenas de pixeis e "soterrar" o
     * product-detail-info que vem a seguir no grid.
     * max-height:120px + overflow-y:auto dao uma vista parcial util
     * sem dominar o ecra; o utilizador pode tocar para abrir o modal. */
    .product-info-preview {
        max-height: 120px;
        overflow-y: auto;
        /* scrollbar sempre visivel em mobile para dar a entender
         * que ha mais conteudo para rolar */
        scrollbar-width: thin;
    }

    /* Titulo mais compacto no telemovel */
    .product-detail-title {
        font-size: 1.75rem;
    }

    /* Preco: empilha verticalmente em ecras estreitos */
    .product-detail-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Em mobile o grupo direito passa a alinhar a esquerda */
    .price-right {
        align-items: flex-start;
        text-align: left;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .product-security {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ===================================
   PRODUTOS GRATUITOS
   Ultima Actualizacao: 2026-03-05 12:00:26 UTC
   Estilos para badges, precos e botoes
   de produtos com preco = 0
   =================================== */

/* Badge "Gratis" nos cards de produto */
.product-badge-free {
    /* Fundo e letra configurados em admin/configuracoes.php */
    background: var(--badge-gratis-fundo, #10b981);
    color: var(--badge-gratis-letra, #ffffff);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* Offset badge-destaque + badge-gratis removido: badge customizada vai para top-left, sem conflito */

/* Badge de produto indisponivel (top-right, nos cards e na pagina do produto) */
.product-badge-unavailable {
    background: #4a5568;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* Versao maior para a pagina de detalhe do produto */
.product-badge-large.product-badge-unavailable {
    font-size: 0.82rem;
    padding: 6px 14px;
}

/* Caixa de aviso de indisponibilidade (substitui o botao de compra) */
.product-unavailable-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    color: #742a2a;
}

.product-unavailable-notice .product-unavailable-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.product-unavailable-notice strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: #c53030;
}

.product-unavailable-notice p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #742a2a;
}

/* Preco verde para produtos gratuitos (nos cards) */
.product-price-free {
    color: #059669;
    font-weight: 700;
}

/* Preco "Gratis" na pagina de detalhe: herda cor branca de .product-detail-price
 * e tamanho 2rem de .price-value. Nao sobrepor com verde (verde e so para cards
 * com fundo branco, via .product-price-free na listagem de produtos). */
.price-value-free {
    /* Cor e tamanho herdados -- nao sobrepor */
}

/* Botao verde "Obter Gratis" */
.btn-free {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #ffffff;
}

.btn-free:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Preco no resumo do checkout (gratuito) */
.order-item-price-free {
    color: #059669;
    font-weight: 700;
}

/* Mensagens de estado no checkout gratuito */
.checkout-status {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-top: 12px;
    font-size: 0.9rem;
}

.checkout-status-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* =========================================================================
 * Botao de informacao detalhada (produto.php - abaixo da imagem)
 * ========================================================================= */

/* =========================================================================
 * Zona de preview da informacao detalhada (abaixo da imagem do produto)
 *
 * Preenche por CSS (flex:1) todo o espaco restante na coluna da imagem
 * abaixo da fotografia do produto, ate ao nivel do fundo da coluna da
 * direita (onde estao os indicadores de seguranca).
 * Sem JS: o layout e gerido inteiramente por flexbox.
 *
 * Scrollbar vertical: oculta por defeito; visivel apenas quando o rato
 * esta sobre a zona e o conteudo excede a altura disponivel.
 * Corte horizontal: overflow-x:hidden.
 * ========================================================================= */

.product-info-preview {
    /* Altura definida por JS (ajustarAlturaPreview()) para alinhar o fundo
     * do preview com "Pagamento Seguro" sem ciclos de layout CSS.
     * overflow:hidden corta conteudo horizontal; overflow-y:auto activa
     * scroll vertical quando o conteudo excede a altura imposta pelo JS. */
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    background: #f7fafc;
    /* Sem borda visivel no estado normal (border:none).
     * border-radius preservado para arredondar os cantos do fundo. */
    border: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    cursor: zoom-in;
    /* Linhas top e bottom: 2px, cinza claro. Bordas laterais: ausentes.
     * box-shadow interno nao afecta o box-model (sem deslocamento de vizinhos)
     * e respeita o border-radius nos cantos. */
    box-shadow:
        inset  0  2px 0 0 #e2e8f0,   /* linha no topo  */
        inset  0 -2px 0 0 #e2e8f0;   /* linha na base  */
    transition: box-shadow 0.18s;
    outline: none;
    /* Scrollbar oculta por defeito (Firefox) */
    scrollbar-width: none;
}

.product-info-preview:hover,
.product-info-preview:focus-visible {
    /* Hover: apenas as linhas top e bottom ficam mais escuras.
     * Sem bordas laterais. */
    box-shadow:
        inset 0  2px 0 0 #cbd5e0,   /* linha no topo */
        inset 0 -2px 0 0 #cbd5e0;   /* linha na base */
}

/* Inner: padding interno. */
.product-info-preview-inner {
    padding: 0.5rem 0.75rem;
}

/* Imagens dentro do preview: nunca mais largas que a zona.
 * Impede que <img width="N"> do TinyMCE force expansao horizontal. */
.product-info-preview-inner img {
    max-width: 100%;
    height: auto;
}

/* Scrollbar vertical: oculta por defeito; aparece ao hover.
 * Webkit (Chrome, Edge, Safari): largura 0 por defeito, 6px ao hover.
 * Firefox: scrollbar-width:none por defeito; thin ao hover. */

/* Webkit: esconder scrollbar por defeito */
.product-info-preview::-webkit-scrollbar {
    width: 0;
}

/* Webkit: mostrar scrollbar ao hover (estreita e discreta) */
.product-info-preview:hover::-webkit-scrollbar {
    width: 6px;
}

/* Track: cinza claro visivel (distingue a zona total da barra) */
.product-info-preview:hover::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 3px;
}

/* Indicador: cinza medio, mais escuro que o track */
.product-info-preview:hover::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}

/* Indicador ao hover: ainda mais escuro */
.product-info-preview:hover::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Firefox: track claro (#e2e8f0) + indicador medio (#94a3b8) */
.product-info-preview:hover {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

/* Indicador de lupa no canto inferior esquerdo */
.product-info-preview-hint {
    position: absolute;
    bottom: 0.55rem;
    left: 0.75rem;
    font-size: 0.7rem;
    color: #94a3b8;   /* cinza medio, sem cor de acento */
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.75;
    z-index: 2;
}

.product-info-preview:hover .product-info-preview-hint {
    opacity: 1;
    color: #64748b;   /* cinza mais escuro ao hover */
}

/* =========================================================================
 * Modal de Informacao Detalhada do Produto
 * ========================================================================= */

/* Contentor principal: ocupa todo o ecra, centrado */
.produto-modal {
    position: fixed;
    inset: 0;                   /* top/right/bottom/left = 0 */
    z-index: 1000;
    display: flex;              /* visivel: flex; oculto: none (via JS) */
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Backdrop semi-transparente */
.produto-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

/* Painel do modal (sobre o backdrop)
 *
 * DIMENSIONAMENTO:
 *   O conteudo e apresentado a 110% da largura do preview na loja,
 *   com margens laterais equivalentes as margens A4 de impressao (15mm).
 *   Calculo:
 *     preview (loja):     648px  (container 1400px, grid 1fr 1fr, gap 4rem)
 *     110% do preview:    713px  (conteudo util do modal)
 *     margem A4 (15mm):    57px  cada lado  (15mm x 96dpi/25.4 = 56.7px)
 *     max-width:          826px  = 713 + 2 x 57
 *   No @media print, as margens sao removidas do corpo (padding:0) porque
 *   o @page ja define as margens fisicas de impressao. */
.produto-modal-painel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 826px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    outline: none;              /* foco gerido por tabindex=-1 via JS */
}

/* Cabecalho do modal */
.produto-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.produto-modal-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
    line-height: 1.4;
}

/* Botao de fechar (X) */
.produto-modal-fechar {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #718096;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.produto-modal-fechar:hover {
    background: #f7fafc;
    color: #1a202c;
}

/* Quando existe zona de informacao, a imagem perde os cantos inferiores
 * para se ligar visualmente a essa zona.
 * box-shadow: none elimina a sombra que sangrava para o preview:
 *   var(--shadow-lg) = 0 10px 25px rgba(0,0,0,0.15) tem blur de 25px e
 *   offset de 10px, totalizando ~35px abaixo da imagem. Com border-radius
 *   nos cantos inferiores da imagem, esse blur aparecia como linhas tenues
 *   nos lados esquerdo e direito do preview -- mesmo sem border visivel.
 * padding-bottom: 4px cria o gap visual entre imagem e preview.
 *   O elemento mantem a altura definida por aspect-ratio (4/3); o padding
 *   e absorvido por overflow:hidden, que corta a imagem 4px antes do fundo
 *   do contentor. O background (#f7fafc) preenche esses 4px -- igual ao
 *   fundo do preview. O gap sai da imagem, nao do preview. */
.product-detail-image-col:has(.product-info-preview) .product-detail-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: none;
    padding-bottom: 4px;
}

/* Corpo do modal: scroll se o conteudo for longo.
 * padding lateral de 57px = 15mm a 96dpi -- margens A4 standard.
 * No @media print este padding e removido (padding:0 !important)
 * porque o @page { margin: 15mm } ja define as margens fisicas. */
.produto-modal-corpo {
    overflow-y: auto;
    padding: 1.5rem 57px;
    flex: 1 1 auto;
}

/* Rodape do modal */
.produto-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8e8e8;
    text-align: right;
    flex-shrink: 0;
}

/* Estilos do conteudo HTML inserido pelo admin na informacao detalhada.
 * Reseta o layout para que o conteudo nao quebre o painel. */
.produto-info-html {
    color: #2d3748;
    line-height: 1.7;
    font-size: 0.95rem;
}

.produto-info-html h1,
.produto-info-html h2,
.produto-info-html h3,
.produto-info-html h4 {
    margin: 1.2em 0 0.5em;
    font-weight: 600;
    color: #1a202c;
}

.produto-info-html p  { margin: 0 0 0.9em; }
.produto-info-html ul,
.produto-info-html ol { padding-left: 1.5em; margin: 0 0 0.9em; }
.produto-info-html li { margin-bottom: 0.3em; }

.produto-info-html table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
    font-size: 0.9rem;
}

.produto-info-html table th,
.produto-info-html table td {
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    text-align: left;
}

.produto-info-html table th {
    background: #f7fafc;
    font-weight: 600;
}

.produto-info-html img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5em 0;
}

.produto-info-html a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Responsivo: modal usa quase todo o ecra em mobile */
@media (max-width: 600px) {
    .produto-modal {
        padding: 0.5rem;
        align-items: flex-end;      /* desliza da base em mobile */
    }

    .produto-modal-painel {
        max-height: 92vh;
        border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    }
}
/* =========================================================================
 * Botao de impressao do modal de informacao detalhada
 * ========================================================================= */

/* Botao "Imprimir" no rodape do modal -- ao lado do botao "Fechar" */
.btn-imprimir {
    background: #fff;
    color: var(--primary-color, #667eea);
    border: 1.5px solid var(--primary-color, #667eea);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-right: 0.75rem;
}

.btn-imprimir:hover {
    background: var(--primary-color, #667eea);
    color: #fff;
}

/* =========================================================================
 * IMPRESSAO -- modal de informacao detalhada
 *
 * Quando o utilizador clica "Imprimir" (com o modal aberto), o browser
 * invoca window.print(). As regras abaixo garantem que:
 *   - So o conteudo do modal e impresso (tudo o resto e ocultado)
 *   - O modal e apresentado como bloco estatico (nao fixed/overlay)
 *   - O conteudo se ajusta a largura de uma folha A4 com margens de 15mm
 *   - Tabelas e imagens nao excedem a largura imprimivel
 *   - Botoes e cabecalho de navegacao sao omitidos
 * ========================================================================= */
@media print {

    /* Definir pagina A4 em orientacao retrato com margens standard */
    @page {
        size: A4 portrait;
        margin: 15mm 15mm 20mm 15mm;
    }

    /* Ocultar tudo excepto o modal de informacao */
    body > *:not(#modal-informacao) {
        display: none !important;
    }

    /* Tornar o modal visivel como bloco normal (nao fixed/overlay) */
    #modal-informacao {
        position: static !important;
        display: block !important;
        padding: 0 !important;
        z-index: auto !important;
    }

    /* Ocultar o backdrop semi-transparente */
    .produto-modal-backdrop {
        display: none !important;
    }

    /* Painel: largura total, sem sombra nem altura maxima */
    .produto-modal-painel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        display: block !important;
        border: none !important;
    }

    /* Cabecalho do modal: manter titulo, remover botao de fechar */
    .produto-modal-header {
        border-bottom: 1px solid #ccc !important;
        padding: 0 0 8px 0 !important;
        margin-bottom: 12px !important;
    }

    .produto-modal-fechar {
        display: none !important;
    }

    /* Corpo do modal: sem scroll, altura automatica */
    .produto-modal-corpo {
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Ocultar rodape (botoes Fechar e Imprimir) */
    .produto-modal-footer {
        display: none !important;
    }

    /* Garantir que imagens nao excedem a largura imprimivel */
    .produto-info-html img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Tabelas: largura maxima da folha, sem transbordamento horizontal */
    .produto-info-html table {
        max-width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word;
        page-break-inside: auto;
    }

    /* Evitar quebra de pagina no meio de titulos e paragrafos */
    .produto-info-html h1,
    .produto-info-html h2,
    .produto-info-html h3,
    .produto-info-html h4 {
        page-break-after: avoid;
    }

    .produto-info-html p,
    .produto-info-html li {
        page-break-inside: avoid;
    }

    /* Blocos de layout (.blk): garantir que bordas e fundos do bloco B
     * sao impressos com a cor exacta.
     * print-color-adjust:economy (default) pode suprimir bordas claras. */
    .produto-info-html .blk,
    .produto-info-html .blk-b-body,
    .produto-info-html .blk-b-row,
    .produto-info-html .blk-b-c1,
    .produto-info-html .blk-b-vsep {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Evitar quebra de pagina no interior de uma linha de blocos */
    .produto-info-html .blk-row {
        page-break-inside: avoid;
    }
}