@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

/* =============================================================================
   SV WALLS - folha propria do site (svwalls.shopeasy.pt)
   -----------------------------------------------------------------------------
   Carregada DEPOIS do all.min.css (ver logic/00-setup-assets.php), so neste site.
   Nao mexer no general.css/responsive.css: o template e partilhado com os outros
   clones (ver "A fazer Gil/CORRECOES-TEMPLATE.md").

   2026-10-15 - Replica do svwalls.com (Shopify/Dawn): topo preto, header branco,
   acento amarelo #edac27, tipografia Montserrat (titulos) + Figtree (texto).
   ============================================================================= */

:root {
    --sv-amarelo: #edac27;
    --sv-amarelo-escuro: #d99c1d;
    --sv-preto: #000000;
    --sv-texto: #303030;
    --sv-cinza: #f3f3f3;
    --sv-linha: #e6e6e6;
    --sv-saldo: #ec2c1b;
}

/* ---------- Paleta do template ----------------------------------------------------
   O template pinta-se quase todo por estas variaveis (general.css da Pura): troca-las
   aqui muda o site inteiro de uma vez. As cores de estado (erro/aviso/stock) ficam.
   ----------------------------------------------------------------------------------- */
:root {
    --eko-green: #111111;          /* accao principal: preto, como no Dawn */
    --eko-green-dark: #333333;
    --eko-green-bright: #555555;
    --eko-bronze: #8a6d14;
    --eko-sand: var(--sv-amarelo);
    --eko-gold: var(--sv-amarelo);  /* contadores do carrinho/favoritos */
    --eko-olive: #000000;           /* barra de topo */
    --eko-header-bg: #ffffff;
    --eko-cream: #ffffff;
    --eko-cream-2: var(--sv-cinza);
    --eko-border: var(--sv-linha);
    --eko-text: var(--sv-texto);
    --eko-text-light: #6b6b6b;
    --eko-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --eko-font-serif: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, .eko-section-head h2 { font-family: "Montserrat", sans-serif; }

/* ---------- Barra de topo preta ---------- */
.eko-topbar { background: var(--sv-preto); color: #ffffff; font-size: 13px; }
.eko-topbar-inner { height: 38px; }
.eko-topbar a, .eko-topbar-right a, .eko-topbar-social a, .eko-topbar-right .mod-languages a { color: #ffffff; }
.eko-topbar-list svg { opacity: .8; }

/* Redes a esquerda e a mensagem de portes ao centro, como no svwalls.com. */
.eko-topbar-inner { position: relative; }
.eko-topbar-social-esq { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; align-items: center; }
.eko-topbar-social-esq svg { width: 16px; height: 16px; }
.sv-topbar-msg {
    position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
    font-size: 13px; font-weight: 600; color: #ffffff; white-space: nowrap;
}
@media (max-width: 900px) { .sv-topbar-msg { position: static; transform: none; font-size: 12px; } }

/* ---------- Header branco ---------- */
.eko-header-sticky { background: #ffffff; border-bottom: 1px solid var(--sv-linha); }

/* Logotipo: o template dimensiona-o pela ALTURA (68px, 48px depois de rolar) e o atributo
   width="320" do HTML nao conta. O logotipo da SV Walls e muito mais largo do que alto
   (600x115), por isso fixar tambem a largura deformava-o no header fixo - aqui so se
   ajusta a altura e deixa-se a largura automatica. */
.eko-logo img,
.eko-header-sticky .eko-logo img { height: 34px; width: auto; max-width: 240px; }
.eko-header-sticky.is-scrolled .eko-logo img { height: 28px; width: auto; }
.eko-menu-top img { height: 26px; width: auto; }
.eko-footer-brand img { height: 38px; width: auto; }

/* O total do carrinho ficava colado ao icone (o template usa gap: 8px em todos os
   botoes do header) - so o do carrinho leva mais folga. */
.eko-action-cart { gap: 14px; }

/* O item do menu que esta em campanha (Novidades) fica de fundo amarelo, como no Shopify. */
.eko-nav-list a.is-campanha,
.eko-nav-list li[data-sv-campanha] > a { background: var(--sv-amarelo); color: #000; padding: 4px 12px; font-weight: 600; }

/* ---------- Botoes ---------- */
.sv-btn-preto, .sv-btn-amarelo, .sv-cta {
    display: inline-block; padding: 11px 26px; font-weight: 600; font-size: 15px;
    text-decoration: none; border: 0; cursor: pointer; transition: opacity .25s ease;
}
.sv-btn-preto { background: #111111; color: #ffffff; }
.sv-btn-amarelo, .sv-cta { background: var(--sv-amarelo); color: #000000; }
.sv-btn-preto:hover, .sv-btn-amarelo:hover, .sv-cta:hover { opacity: .85; color: inherit; }
.sv-btn-preto:hover { color: #ffffff; }

/* ---------- Promocoes nos cartoes da listagem ---------- */
/* o template gera a classe a partir do proprio texto do selo, por isso fica com cedilha */
.eko-badge-promoção, .eko-badge-promocao { background: var(--sv-amarelo); color: #000000; font-weight: 700; letter-spacing: .04em; }
.eko-product-price-antes { color: #8a8a8a; font-weight: 400; margin-right: 6px; }
.eko-product-price-saldo { color: var(--sv-saldo); }

/* ---------- 3 cartoes de categoria ---------- */
.sv-cartoes { padding: 40px 0 52px; }
.sv-cartoes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sv-cartao { position: relative; display: block; height: 520px; overflow: hidden; text-decoration: none; }
.sv-cartao img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sv-cartao:hover img { transform: scale(1.05); }
.sv-cartao-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 30px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 75%);
}
/* os dois sao <span> dentro do <a> do cartao: sem display:block o max-width nao pega e o texto corta */
.sv-cartao-titulo { display: block; font-family: "Montserrat", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 10px; }
.sv-cartao-texto { display: block; margin-bottom: 14px; max-width: 46ch; }
.sv-cartao .sv-cta { align-self: flex-start; padding: 5px 20px; }

/* ---------- Carrossel de produtos ---------- */
.sv-carrossel { position: relative; padding: 39px 0; max-width: 1400px; margin: 0 auto; }
.sv-carrossel-head h2 { font-size: 1.9rem; font-weight: 700; margin: 0 0 24px; }
.sv-carrossel-head h2:empty { display: none; }
.sv-carrossel-pista {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 15px); gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding-bottom: 8px;
}
.sv-carrossel-pista::-webkit-scrollbar { display: none; }
.sv-prod { scroll-snap-align: start; }
.sv-prod-media { position: relative; display: block; aspect-ratio: 1; background: var(--sv-cinza); overflow: hidden; }
.sv-prod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-prod-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--sv-amarelo); color: #000;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px;
}
.sv-prod-nome { font-family: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.4; margin: 12px 0 6px; }
.sv-prod-nome a { color: var(--sv-texto); text-decoration: none; }
.sv-prod-nome a:hover { text-decoration: underline; }
.sv-prod-preco { font-size: 14px; margin: 0 0 12px; display: flex; gap: 8px; align-items: baseline; }
.sv-prod-preco s { color: #8a8a8a; }
.sv-prod-preco .sv-preco-saldo { color: var(--sv-saldo); font-weight: 500; }
.sv-prod-add {
    width: 100%; background: #ffffff; color: #111111; border: 1px solid #111111;
    padding: 11px 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.sv-prod-add:hover:not([disabled]) { background: #111111; color: #ffffff; }
.sv-prod-add[disabled] { opacity: .45; cursor: not-allowed; }
.sv-carrossel-setas { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.sv-seta {
    width: 38px; height: 38px; border: 1px solid var(--sv-linha); background: #fff; color: #111;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.sv-seta:hover { border-color: #111; }
.sv-carrossel-vertudo { text-align: center; margin-top: 22px; }

/* ---------- 3 beneficios ---------- */
.sv-beneficios { padding: 20px 0 40px; }
.sv-beneficios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv-beneficio { background: var(--sv-cinza); padding: 34px 30px; }
.sv-beneficio-icone { width: 40px; height: 40px; display: block; margin-bottom: 14px; }
.sv-beneficio h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 10px; }
.sv-beneficio p { font-size: 14px; line-height: 1.6; color: #4a4a4a; margin: 0; }

/* ---------- Amostras ---------- */
.sv-amostras { padding: 40px 0; }
.sv-amostras-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--sv-cinza); }
.sv-amostras-texto { padding: 60px 56px; }
.sv-amostras-texto h2 { font-size: 2.1rem; font-weight: 700; margin: 0 0 16px; }
.sv-amostras-texto p { font-size: 15px; line-height: 1.65; margin: 0 0 24px; max-width: 46ch; }
.sv-amostras-media img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; display: block; }

/* ---------- Video ---------- */
.sv-video { padding: 24px 0 40px; }
.sv-video-caixa { position: relative; overflow: hidden; }
.sv-video-caixa img, .sv-video-caixa iframe { width: 100%; display: block; aspect-ratio: 16/8; object-fit: cover; border: 0; }
.sv-video-play {
    position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
    width: 68px; height: 68px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.35);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sv-video-play span { width: 0; height: 0; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.sv-video-titulo {
    position: absolute; bottom: 42px; left: 0; right: 0; text-align: center; color: #fff;
    font-size: 2.6rem; font-weight: 500; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.4);
}

/* ---------- Blocos imagem/texto ---------- */
.sv-bloco { padding: 30px 0; }
.sv-bloco-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; background: var(--sv-cinza); }
.sv-bloco-texto { padding: 64px 60px; }
.sv-bloco-texto h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.2; margin: 0 0 18px; }
.sv-bloco-texto p { font-size: 15px; line-height: 1.7; margin: 0 0 26px; max-width: 48ch; }
.sv-bloco-media img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 560px; }
.sv-bloco-inverso .sv-bloco-texto { order: 2; }
.sv-bloco-inverso .sv-bloco-media { order: 1; }

/* ---------- Barra de servicos ---------- */
.sv-servicos { padding: 30px 0 50px; }
.sv-servicos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sv-servico { display: flex; gap: 14px; align-items: flex-start; justify-content: center; text-align: left; }
.sv-servico img { width: 28px; height: 28px; margin-top: 2px; }
.sv-servico strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.sv-servico span { font-size: 14px; color: #5a5a5a; }

/* ---------- Largura comum dos blocos novos ---------- */
.sv-cartoes, .sv-beneficios, .sv-amostras, .sv-video, .sv-bloco, .sv-servicos, .sv-carrossel {
    max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
    .sv-cartoes-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .sv-cartao { height: 460px; }
    .sv-carrossel-pista { grid-auto-columns: calc(50% - 10px); }
    .sv-beneficios-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sv-cartoes-grid { grid-template-columns: 1fr; gap: 12px; }
    .sv-cartao { height: 420px; }
    .sv-carrossel-pista { grid-auto-columns: calc(75% - 10px); }
    .sv-amostras-inner, .sv-bloco-inner { grid-template-columns: 1fr; }
    .sv-amostras-texto, .sv-bloco-texto { padding: 36px 24px; }
    .sv-bloco-inverso .sv-bloco-texto { order: 2; }
    .sv-bloco-inverso .sv-bloco-media { order: 1; }
    .sv-video-titulo { font-size: 1.6rem; bottom: 24px; }
    .sv-servicos-grid { grid-template-columns: 1fr; }
    .sv-cartao-titulo { font-size: 1.5rem; }
}