/* ==========================================================================
   NMix Technology — tema "Premium Sport"
   Camada de design por cima de style.min.css / style.deferred.min.css.
   Só estilos: nenhuma lógica PHP, JS ou texto foi alterado.
   Para voltar ao visual anterior: remover a linha que carrega este ficheiro
   em includes/head_assets.php.
   ========================================================================== */

/* ---------- Tipografia desportiva (Barlow Condensed, ficheiros locais) ---------- */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-latin-700-italic.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-condensed-latin-800-italic.woff2') format('woff2')}

/* ---------- Tokens da marca ---------- */
:root{
  --nx-ink:#06121b;        /* azul-gelo muito escuro */
  --nx-navy:#0f2b3d;       /* azul NMix */
  --nx-blue:#1a4a6f;
  --nx-ice:#1d9bd6;
  --nx-gold:#ffd700;       /* dourado NMix */
  --nx-steel:#e9eef3;
  --nx-line:#d3dce6;
  --nx-muted:#4a6072;
  --nx-display:'Barlow Condensed','Outfit',system-ui,sans-serif;
  --nx-cut:clamp(28px,4.2vw,64px);
}

html body{background:var(--nx-steel);color:#0e202e}

/* ---------- Títulos ---------- */
html body .section-header h2,
html body .seo-institucional h2,
html body .page-header h1,
html body .categoria-header h1,
html body .produto-info-detalhe h1{
  font-family:var(--nx-display);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.005em;line-height:1;color:var(--nx-ink)
}
html body .section-header h2{font-size:clamp(2rem,3.6vw,3rem)}
html body .seo-institucional h2{font-size:clamp(1.8rem,3vw,2.5rem)}
html body .produto-info-detalhe h1{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.02}
html body .page-content h2{font-family:var(--nx-display);font-weight:700;text-transform:uppercase;font-size:1.65rem;color:var(--nx-navy);letter-spacing:.01em}
html body .page-content h3{font-family:var(--nx-display);font-weight:700;font-size:1.35rem;color:var(--nx-ink)}

/* Marca de velocidade: barra dourada inclinada (repete-se no hero, títulos e rodapé) */
html body .section-header{text-align:left;margin-bottom:2rem}
html body .section-header h2{display:inline-block;position:relative;padding-left:1.15rem}
html body .section-header h2 i{display:none}
html body .section-header h2::before,
html body .categoria-header h1::before{
  content:"";position:absolute;left:0;top:.06em;bottom:.06em;width:.26em;
  background:var(--nx-gold);transform:skewX(-14deg)
}
html body .section-header p{color:var(--nx-muted);padding-left:1.15rem;margin-top:.45rem}
html body .categoria-header h1{border-left:0;position:relative;padding-left:1.2rem;font-size:clamp(2rem,3.4vw,2.8rem)}

/* ---------- Barra lateral ---------- */
html body .sidebar{
  background:linear-gradient(180deg,#040d14 0%,#0a1f2f 55%,#0f2b3d 100%);
  border-right:1px solid rgba(255,215,0,.16)
}
html body .sidebar-header{position:relative;border-bottom:0;padding-bottom:1.4rem}
html body .sidebar-header::after{
  content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--nx-gold) 0 38%,rgba(255,215,0,.15) 38% 100%);
  transform:skewX(-30deg)
}
html body .sidebar-header p{font-family:var(--nx-display);font-weight:600;font-size:.82rem;letter-spacing:.2em;opacity:.7}
html body .language-selector{border-radius:4px;background:rgba(255,255,255,.06)}
html body .language-selector a{border-radius:3px}
html body .language-selector a:hover,
html body .language-selector a.active{background:var(--nx-gold);color:var(--nx-ink)}
html body .sidebar-nav a{
  font-family:var(--nx-display);font-weight:600;font-size:1.1rem;letter-spacing:.06em;
  text-transform:uppercase;border-radius:0;padding:.62rem 1rem;color:rgba(255,255,255,.78)
}
html body .sidebar-nav a:hover{background:linear-gradient(90deg,rgba(255,255,255,.1),transparent);color:#fff;transform:translateX(3px)}
html body .sidebar-nav a.active{
  background:linear-gradient(90deg,rgba(255,215,0,.18),transparent 85%);
  color:var(--nx-gold);box-shadow:inset 4px 0 0 var(--nx-gold)
}
html body .sidebar-footer{background:#040d14}
html body .mobile-menu-btn-top{border-radius:4px;background:rgba(6,18,27,.82)}

/* ---------- Hero ---------- */
html body .hero-banner{
  --cut:var(--nx-cut);
  height:auto;min-height:max(540px,74vh);
  justify-content:flex-start;text-align:left;
  background:linear-gradient(115deg,#040d14 0%,#0a1f2f 55%,#123a56 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)
}
html body .hero-slide.active{opacity:.55}
html body .hero-banner::before{
  background:
    url('/assets/img/nmix-shield.svg') no-repeat right 5% center / min(46vw,600px),
    radial-gradient(ellipse at 80% 25%,rgba(29,155,214,.32),transparent 55%),
    linear-gradient(100deg,rgba(4,13,20,.94) 0%,rgba(4,13,20,.72) 42%,rgba(4,13,20,.18) 100%)
}
/* fio dourado ao longo do corte diagonal */
html body .hero-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--cut);z-index:2;pointer-events:none;
  background:linear-gradient(to top left,transparent 50%,var(--nx-gold) 50%,var(--nx-gold) calc(50% + 4px),transparent calc(50% + 4px))
}
html body .hero-content{
  max-width:1180px;width:100%;margin:0;
  padding:3.2rem clamp(1.5rem,6vw,5.5rem) calc(var(--nx-cut) + 1.6rem) clamp(3rem,7vw,6.4rem);
  text-align:left
}
html body .hero-content::before{
  content:"";position:absolute;left:clamp(1.2rem,4.2vw,4rem);top:3.2rem;bottom:calc(var(--nx-cut) + 1.6rem);
  width:24px;background:var(--nx-gold);
  clip-path:polygon(14px 0,24px 0,10px 100%,0 100%)
}
html body .hero-logo{width:210px;margin-bottom:2rem;filter:none}
html body .hero-content .slogan{
  font-family:var(--nx-font-sans,'Plus Jakarta Sans',system-ui,sans-serif);
  font-size:1.05rem;font-weight:600;letter-spacing:.01em;opacity:.8;margin-bottom:.35rem
}
html body .hero-content .slogan-line2{
  font-family:var(--nx-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.6rem,6.4vw,5.8rem);line-height:.92;letter-spacing:0;color:#fff;
  max-width:15ch;margin-bottom:2.2rem
}
html body .hero-buttons{justify-content:flex-start;gap:.9rem}
html body .btn-hero-primary,
html body .btn-hero-secondary{
  font-family:var(--nx-display);font-weight:700;font-size:1.2rem;letter-spacing:.07em;text-transform:uppercase;
  border:0;border-radius:0;padding:.9rem 2.4rem;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)
}
html body .btn-hero-primary{background:var(--nx-gold);color:var(--nx-ink)}
html body .btn-hero-primary:hover{background:#fff;color:var(--nx-ink);transform:none;box-shadow:none}
html body .btn-hero-secondary{background:rgba(255,255,255,.12);color:#fff}
html body .btn-hero-secondary:hover{background:#fff;color:var(--nx-ink);transform:none}
html body .hero-indicators{
  left:auto;right:clamp(1.5rem,5vw,4rem);justify-content:flex-end;
  bottom:calc(var(--nx-cut) + 1.1rem)
}
html body .hero-dot{width:26px;height:4px;border-radius:0;transform:skewX(-30deg);background:rgba(255,255,255,.35)}
html body .hero-dot.active{width:52px;background:var(--nx-gold);border-radius:0}

/* Entrada única do hero (não repete noutras zonas) */
@keyframes nxHeroIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
html body .hero-content{animation:nxHeroIn .7s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Mosaico de categorias ---------- */
html body .cat-mosaico,
html body .produtos-section{background:transparent}
html body .cat-mosaico{padding-top:2.2rem}
html body .cat-grid{gap:1.1rem}
html body .cat-tile{
  border-radius:4px;background:var(--nx-ink);box-shadow:none;
  border:1px solid var(--nx-line)
}
html body .cat-tile img{background:linear-gradient(160deg,#fff 0%,#e9eff5 100%)}
html body .cat-tile:hover,
html body .cat-tile:focus-visible{transform:none;box-shadow:none;border-color:var(--nx-gold)}
html body .cat-tile span{
  font-family:var(--nx-display);font-weight:700;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--nx-ink);border-top:3px solid var(--nx-gold);padding:.55rem .9rem .6rem
}

/* ---------- Cartões de produto ---------- */
html body .produto-card,
html body .relacionado-card{
  border-radius:4px;border:1px solid var(--nx-line);background:#fff
}
html body .produto-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--nx-gold),var(--nx-ice));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease
}
html body .produto-card:hover{transform:none;box-shadow:0 14px 30px -14px rgba(6,18,27,.35)}
html body .produto-card:hover::before{transform:scaleX(1)}
html body .relacionado-card:hover{transform:none;box-shadow:0 12px 26px -14px rgba(6,18,27,.3)}
html body .produto-imagem,
html body .relacionado-imagem{background:linear-gradient(160deg,#fff 0%,#e9eff5 100%)}
html body .produto-badge{
  top:12px;left:0;border-radius:0;padding:.28rem 1.1rem .28rem .8rem;
  font-family:var(--nx-display);font-weight:800;font-style:italic;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--nx-gold);color:var(--nx-ink);
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)
}
html body .produto-info{padding:1rem 1.05rem 1.1rem}
html body .produto-info h2,
html body .produto-info h3{color:var(--nx-ink);font-weight:700}
html body .produto-sku,
html body .sku-badge{
  font-family:var(--nx-display);font-weight:600;font-size:.88rem;letter-spacing:.08em;
  color:var(--nx-muted);background:none;padding:0;border-radius:0
}
html body .preco-comiva,
html body .relacionado-preco,
html body .preco-com-iva{font-family:var(--nx-display);font-weight:800;font-style:italic;color:var(--nx-navy);letter-spacing:.01em}
html body .preco-comiva{font-size:1.75rem;line-height:1.05}
html body .preco-com-iva{font-size:2.3rem}
html body .preco-semiva{color:var(--nx-muted)}
html body .preco-consulta{
  border-radius:2px;background:rgba(255,215,0,.2);color:#5f4b00;font-weight:600;
  border-left:3px solid var(--nx-gold)
}
html body .btn-add-cart{
  border-radius:3px;background:var(--nx-navy);color:#fff;
  font-family:var(--nx-display);font-weight:700;font-size:1.1rem;letter-spacing:.07em;text-transform:uppercase
}
html body .btn-add-cart:hover{background:var(--nx-gold);color:var(--nx-ink);transform:none}
html body .btn-detalhe{border-radius:3px;background:var(--nx-steel);color:var(--nx-navy);font-weight:600}
html body .btn-detalhe:hover{background:var(--nx-navy);color:#fff}

/* ---------- Ficha de produto ---------- */
html body .produto-main{border-radius:4px;box-shadow:none;border:1px solid var(--nx-line)}
html body .main-image{border-radius:2px;background:linear-gradient(160deg,#fff 0%,#e9eff5 100%)}
html body .main-image img{border-radius:0}
html body .precos-detalhe{
  background:#fff;border-radius:2px;border:1px solid var(--nx-line);border-left:6px solid var(--nx-gold)
}
html body .tamanho-btn{
  border-radius:3px;border:2px solid var(--nx-line);
  font-family:var(--nx-display);font-weight:700;font-size:1.1rem;letter-spacing:.04em
}
html body .tamanho-btn:hover,
html body .tamanho-btn.active{background:var(--nx-navy);border-color:var(--nx-gold);color:#fff}
html body .breadcrumb a{color:var(--nx-blue)}

/* ---------- Categorias / subcategorias ---------- */
html body .subcategorias-grid{border-radius:4px;background:#fff}
html body .subcat-link{
  border-radius:3px;background:var(--nx-steel);color:var(--nx-navy);
  font-family:var(--nx-display);font-weight:700;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase
}
html body .subcat-link:hover{background:var(--nx-ink);color:var(--nx-gold)}

/* ---------- Banda de vantagens ---------- */
html body .features{background:var(--nx-ink);border:0;padding:3.2rem 0}
html body .features-grid{text-align:left;gap:0}
html body .feature{padding:.6rem 1.6rem;border-left:1px solid rgba(255,255,255,.12)}
html body .feature i{
  background:none;-webkit-text-fill-color:currentColor;color:var(--nx-gold);font-size:2rem
}
html body .feature h3{font-family:var(--nx-display);font-weight:700;font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}
html body .feature p{color:#9fb4c6}

/* ---------- Texto institucional e páginas de conteúdo ---------- */
html body .page-container{border-radius:4px;box-shadow:none;border:1px solid var(--nx-line);border-top:5px solid var(--nx-gold)}
html body .page-header h1{font-size:clamp(2rem,4vw,2.9rem)}
html body .page-divider{width:72px;height:6px;border-radius:0;background:var(--nx-gold);transform:skewX(-30deg)}
html body .page-content .citacao{border-radius:0;background:#f4f7fa;border-left:5px solid var(--nx-gold);color:var(--nx-navy)}

/* ---------- Rodapé ---------- */
html body .main-footer{background:var(--nx-ink);border-top:5px solid var(--nx-gold);margin-top:0;padding-top:3rem}
html body .footer-col h4,
html body .footer-col .footer-h4{font-family:var(--nx-display);font-weight:700;font-size:1.3rem;letter-spacing:.07em;text-transform:uppercase}
html body .footer-col h4::after,
html body .footer-col .footer-h4::after{width:42px;height:3px;transform:skewX(-30deg);transform-origin:left}
html body .social-links-footer a{border-radius:3px;background:rgba(255,255,255,.08)}
html body .social-links-footer a:hover{background:var(--nx-gold);color:var(--nx-ink)}
html body .footer-bottom{border-top-color:rgba(255,255,255,.1)}

/* ---------- Cookies ---------- */
html body .cookie-banner{background:var(--nx-ink);border-top:3px solid var(--nx-gold)}

/* ---------- Foco visível (acessibilidade) ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible{outline:3px solid var(--nx-gold);outline-offset:2px;box-shadow:0 0 0 5px rgba(6,18,27,.55)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  html body .hero-banner{height:auto;min-height:500px;padding-top:4.5rem}
  html body .hero-content{padding:1rem 1.2rem calc(var(--nx-cut) + 1.6rem) 3rem}
  html body .hero-content::before{top:1rem}
  /* etiqueta passa para a direita: o botão do menu (fixo, canto esquerdo) não a tapa */
  html body .produto-badge{left:auto;right:0;padding:.28rem .8rem .28rem 1.1rem;clip-path:polygon(9px 0,100% 0,100% 100%,0 100%)}
  html body .hero-logo{width:170px;margin-bottom:1.4rem}
  html body .hero-banner::before{background-position:right -18% center,0 0,0 0;background-size:90vw,auto,auto}
}
@media (max-width:600px){
  html body .hero-banner{min-height:520px}
  html body .hero-indicators{display:none}
  html body .hero-buttons{flex-direction:column;align-items:flex-start}
  html body .btn-hero-primary,html body .btn-hero-secondary{padding:.85rem 2rem}
  html body .feature{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:1rem .2rem}
}
@media (prefers-reduced-motion:reduce){
  html body .hero-content{animation:none}
}

/* ---------- Margens interiores dos cartões (vence o padding:0 !important do mobile) ---------- */
html body .produto-card .produto-info{padding:1.1rem 1.25rem 1.3rem!important}
html body .relacionado-card .relacionado-info{padding:.9rem 1rem 1rem!important}
html body .produto-card .produto-info .btn-add-cart{margin-top:.9rem}
@media (max-width:900px){
  html body .produto-card .produto-info{padding:1.1rem 1.25rem 1.3rem!important}
}

/* ---------- Pormenores ---------- */
html body .feature:first-child{border-left:0}
@media (max-width:600px){html body .feature:first-child{border-top:0}}

/* ---------- Gaveta do carrinho (mesma linguagem visual) ---------- */
html body .cart-drawer-header{background:var(--nx-ink);border-bottom:3px solid var(--nx-gold)}
html body .cart-drawer-header h2,
html body .cart-drawer-header h3,
html body .cart-drawer-header strong{font-family:var(--nx-display);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.02em;font-size:1.4rem}
html body .cart-drawer-footer .btn-drawer-primary{
  border-radius:3px;background:var(--nx-navy);
  font-family:var(--nx-display);font-weight:700;font-size:1.15rem;letter-spacing:.07em;text-transform:uppercase
}
html body .cart-drawer-footer .btn-drawer-primary:hover{background:var(--nx-gold);color:var(--nx-ink)}
html body .cart-drawer-footer .btn-drawer-secondary{border-radius:3px;font-family:var(--nx-display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Vitrine de produtos no hero (só em ecrãs largos; não carrega imagens no telemóvel) ---------- */
html body .hero-showcase{display:none}
@media (min-width:1360px){
  html body .hero-showcase{
    display:block;position:absolute;z-index:2;
    right:clamp(2rem,5vw,6rem);top:50%;transform:translateY(-54%);
    width:clamp(320px,29vw,500px);aspect-ratio:1/.92;pointer-events:none
  }
  html body .hero-showcase-item{
    position:absolute;display:block;pointer-events:auto;
    filter:drop-shadow(0 26px 28px rgba(0,0,0,.55));
    transition:transform .35s cubic-bezier(.2,.7,.2,1)
  }
  html body .hero-showcase-item img{display:block;width:100%;height:auto;object-fit:contain}
  html body .hero-showcase-item.hs1{width:64%;left:18%;top:2%;z-index:3}
  html body .hero-showcase-item.hs2{width:42%;left:8%;bottom:2%;z-index:2;transform:rotate(-7deg)}
  html body .hero-showcase-item.hs3{width:42%;right:0;bottom:6%;z-index:2;transform:rotate(6deg)}
  html body .hero-showcase-item.hs1:hover{transform:translateY(-8px)}
  html body .hero-showcase-item.hs2:hover{transform:rotate(-7deg) translateY(-8px)}
  html body .hero-showcase-item.hs3:hover{transform:rotate(6deg) translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){html body .hero-showcase-item{transition:none}}