<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Murecho:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  body { margin: 0; background: #f7f4ee; font-family: 'Murecho', sans-serif; }
  * { box-sizing: border-box; }
  a { color: #fe9900; text-decoration: none; }
  a:hover { color: #ffca01; }
</style>
</helmet>
<div style="{{ pageWrapStyle }}">
  <header style="{{ headerStyle }}">
    <div style="{{ headerInnerStyle }}">
      <a href="Home.dc.html" style="{{ logoLinkStyle }}"><img src="uploads/imgi_1_logotipowhite.png" alt="Estores Brigantinos" style="{{ logoImgStyle }}"/></a>
      <sc-if value="{{ notMobile }}" hint-placeholder-val="{{ true }}">
        <nav style="{{ navStyle }}">
          <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
            <a href="{{ item.href }}" style="{{ item.active }}">{{ item.label }}</a>
          </sc-for>
        </nav>
      </sc-if>
      <sc-if value="{{ notMobile }}" hint-placeholder-val="{{ true }}">
        <a href="Contactos.dc.html" style="{{ ctaHeaderStyle }}">Pedir orçamento</a>
      </sc-if>
      <sc-if value="{{ mobile }}" hint-placeholder-val="{{ false }}">
        <button onClick="{{ toggleMenu }}" style="{{ burgerStyle }}" aria-label="Menu">
          <span style="{{ burgerLineStyle }}"></span>
          <span style="{{ burgerLineStyle }}"></span>
          <span style="{{ burgerLineStyle }}"></span>
        </button>
      </sc-if>
    </div>
    <sc-if value="{{ menuOpen }}" hint-placeholder-val="{{ false }}">
      <nav style="{{ mobileNavStyle }}">
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
          <a href="{{ item.href }}" style="{{ mobileLinkStyle }}" onClick="{{ closeMenu }}">{{ item.label }}</a>
        </sc-for>
        <a href="Contactos.dc.html" style="{{ ctaMobileStyle }}" onClick="{{ closeMenu }}">Pedir orçamento</a>
      </nav>
    </sc-if>
  </header>

  <section style="{{ pageHeroStyle }}">
    <span style="{{ kickerLightStyle }}">As nossas soluções</span>
    <h1 style="{{ pageHeroTitleStyle }}">Produtos</h1>
    <p style="{{ pageHeroSubStyle }}">Da proteção solar à privacidade, temos a solução certa para cada janela, varanda ou espaço exterior.</p>
  </section>

  <sc-if value="{{ showDetail }}" hint-placeholder-val="{{ false }}">
    <section style="{{ detailSectionStyle }}">
      <div style="{{ detailInnerStyle }}">
        <button onClick="{{ closeDetail }}" style="{{ backLinkStyle }}">← Voltar aos produtos</button>
        <div style="{{ detailGridStyle }}">
          <div style="{{ galleryColStyle }}">
            <div style="{{ mainPhotoStyle }}"></div>
            <div style="{{ thumbRowStyle }}">
              <sc-for list="{{ detailThumbs }}" as="th" hint-placeholder-count="3">
                <button onClick="{{ th.select }}" style="{{ th.style }}"></button>
              </sc-for>
            </div>
          </div>
          <div style="{{ detailInfoColStyle }}">
            <span style="{{ detailTagStyle }}">{{ selectedProduct.category }}</span>
            <h2 style="{{ detailTitleStyle }}">{{ selectedProduct.name }}</h2>
            <p style="{{ detailDescStyle }}">{{ selectedProduct.long }}</p>
            <a href="Contactos.dc.html" style="{{ detailCtaStyle }}">Pedir orçamento para este produto</a>
            <a href="{{ selectedProduct.catHref }}" style="{{ detailCatLinkStyle }}">Ver mais em {{ selectedProduct.category }} →</a>
          </div>
        </div>
      </div>
    </section>
  </sc-if>

  <sc-if value="{{ showGrid }}" hint-placeholder-val="{{ true }}">
    <section style="{{ shopSectionStyle }}">
      <div style="{{ shopInnerStyle }}">
        <aside style="{{ sidebarStyle }}">
          <h3 style="{{ sidebarHeadStyle }}">Categorias</h3>
          <sc-for list="{{ filters }}" as="f" hint-placeholder-count="5">
            <button onClick="{{ f.select }}" style="{{ f.style }}">{{ f.label }}<span style="{{ f.countStyle }}">{{ f.count }}</span></button>
          </sc-for>
        </aside>
        <div style="{{ gridColStyle }}">
          <div style="{{ prodGridStyle }}">
            <sc-for list="{{ visibleProducts }}" as="p" hint-placeholder-count="8">
              <button onClick="{{ p.select }}" style="{{ prodCardStyle }}">
                <div style="{{ p.photoStyle }}"></div>
                <div style="{{ prodCardBodyStyle }}">
                  <span style="{{ prodTagStyle }}">{{ p.category }}</span>
                  <h3 style="{{ prodNameStyle }}">{{ p.name }}</h3>
                  <p style="{{ prodDescStyle }}">{{ p.short }}</p>
                  <span style="{{ prodLinkStyle }}">Ver detalhes →</span>
                </div>
              </button>
            </sc-for>
          </div>
        </div>
      </div>
    </section>
  </sc-if>

  <section style="{{ ctaBandStyle }}">
    <h2 style="{{ ctaBandTitleStyle }}">Peça já o seu orçamento</h2>
    <p style="{{ ctaBandTextStyle }}">Diga-nos o que precisa e entramos em contacto para agendar uma visita técnica gratuita.</p>
    <a href="Contactos.dc.html" style="{{ ctaBandBtnStyle }}">Enviar pedido</a>
  </section>

  <footer style="{{ footerStyle }}">
    <div style="{{ footerGridStyle }}">
      <div style="{{ footerColStyle }}">
        <img src="uploads/imgi_1_logotipowhite.png" alt="Estores Brigantinos" style="{{ footerLogoStyle }}"/>
        <p style="{{ footerDescStyle }}">Soluções em estores, toldos e portadas, com qualidade, design moderno e confiança, para transformar o seu espaço.</p>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Links rápidos</h4>
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
          <a href="{{ item.href }}" style="{{ footerLinkStyle }}">{{ item.label }}</a>
        </sc-for>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Morada</h4>
        <p style="{{ footerTextStyle }}">Zona Industrial das Cantarias<br/>Av. Dr. Mário Soares, nº 1<br/>5300-423 Bragança</p>
        <h4 style="{{ footerHeadStyle }}">Horário</h4>
        <p style="{{ footerTextStyle }}">Segunda a Sexta<br/>8:30h – 12:00h · 14:00h – 18:30h<br/>Sábado e Domingo: Fechado</p>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Contactos</h4>
        <p style="{{ footerTextStyle }}">273 332 702<br/><span style="{{ footerNoteStyle }}">Chamada para Rede Fixa Nacional</span></p>
        <p style="{{ footerTextStyle }}">geral@estoresbrigantinos.pt</p>
      </div>
    </div>
    <div style="{{ footerBottomStyle }}">© {{ year }} Estores Brigantinos. Todos os direitos reservados.</div>
  </footer>
</div>

</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440}}">
const MOBILE_BP = 900;
const img = (id, w) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w || 900}&q=60`;
const layered = (grad, id) => id
  ? { backgroundImage: `linear-gradient(0deg, rgba(20,22,18,.08), rgba(20,22,18,.02)), url(${img(id)}), ${grad}`, backgroundSize: 'cover, cover, cover', backgroundPosition: 'center, center, center' }
  : { background: grad };

class Component extends DCLogic {
  state = { width: 1400, menuOpen: false, filter: 'Todos', selectedId: null, activePhoto: 0 };
  componentDidMount() {
    this.onResize = () => this.setState({ width: window.innerWidth });
    window.addEventListener('resize', this.onResize);
    this.onResize();
  }
  componentWillUnmount() { window.removeEventListener('resize', this.onResize); }

  renderVals() {
    const mobile = this.state.width < MOBILE_BP;
    const notMobile = !mobile;
    const dark = '#2c302e', yellow = '#ffca01', orange = '#fe9900', cream = '#f7f4ee';

    const navItems = [
      { label: 'Home', href: 'Home.dc.html' },
      { label: 'Produtos', href: 'Produtos.dc.html' },
      { label: 'Projetos', href: 'Projetos.dc.html' },
      { label: 'Empresa', href: 'Empresa.dc.html' },
      { label: 'Contactos', href: 'Contactos.dc.html' }
    ].map(n => ({ ...n, active: { color: n.label === 'Produtos' ? yellow : '#fff', fontWeight: 600, fontSize: 15, letterSpacing: '.2px' } }));

    const PH = {
      estores: ['photo-1600210492493-0946911123ea', 'photo-1600121848594-d8644e57abab', 'photo-1560448204-e02f11c3d0e2'],
      toldos: ['photo-1600566753086-00f18fb6b3ea', 'photo-1600566753190-17f0baa2a6c3', 'photo-1615873968403-89e068629265'],
      portadas: ['photo-1600607687939-ce8a6c25118c', 'photo-1512918728675-ed5a9ecdebfd', 'photo-1600585152915-d208bec867a1'],
      fachadas: ['photo-1571508601891-ca5e7a713859', 'photo-1600585154340-be6161a56a0c', 'photo-1560185127-6ed189bf02f4']
    };
    const grads = {
      estores: 'linear-gradient(150deg,#4a4f47,#2c302e)',
      toldos: 'linear-gradient(150deg,#fe9900,#2c302e)',
      portadas: 'linear-gradient(150deg,#565b53,#2c302e)',
      fachadas: 'linear-gradient(150deg,#ffca01,#2c302e)'
    };
    const catHref = { Estores: 'Estores.dc.html', Toldos: 'Toldos.dc.html', Portadas: 'Portadas.dc.html', 'Fachadas têxteis': 'Fachadas.dc.html' };

    const catalogRaw = [
      { key: 'estores', name: 'Estore interior de rolo', category: 'Estores', short: 'Tecido técnico blackout ou screen.', long: 'Estore de rolo interior com tecido técnico, disponível em blackout ou screen. Ideal para quartos, salas e escritórios que precisam de controlo de luz sem perder luminosidade natural.' },
      { key: 'estores', name: 'Estore de lâminas verticais', category: 'Estores', short: 'Controlo preciso de luz em grandes vãos.', long: 'Sistema de lâminas verticais orientáveis, indicado para grandes envidraçados e escritórios, permitindo um controlo fino da entrada de luz e privacidade.' },
      { key: 'estores', name: 'Estore exterior de lâminas', category: 'Estores', short: 'Alumínio resistente à intempérie.', long: 'Estore exterior em lâminas de alumínio, resistente à chuva e ao vento, com bom isolamento térmico para varandas e fachadas.' },
      { key: 'estores', name: 'Estore motorizado', category: 'Estores', short: 'Comando remoto ou domótica.', long: 'Estore motorizado com comando remoto ou integração domótica, com opção de sensor solar automático para maior conforto no dia a dia.' },
      { key: 'toldos', name: 'Toldo articulado', category: 'Toldos', short: 'Braços articulados, projeção ajustável.', long: 'Toldo com braços articulados e projeção ajustável, ideal para varandas e terraços que precisam de sombra flexível ao longo do dia.' },
      { key: 'toldos', name: 'Toldo retráctil', category: 'Toldos', short: 'Recolhe totalmente quando não usado.', long: 'Toldo retráctil que recolhe por completo, protegendo o tecido da intempérie quando não está em uso e prolongando a sua durabilidade.' },
      { key: 'toldos', name: 'Toldo fixo', category: 'Toldos', short: 'Sombra constante em esplanadas.', long: 'Estrutura fixa pensada para sombra permanente em esplanadas e negócios, com tecidos técnicos resistentes à exposição solar constante.' },
      { key: 'toldos', name: 'Toldo motorizado com sensores', category: 'Toldos', short: 'Sensores de vento e sol.', long: 'Toldo motorizado equipado com sensores de vento e sol, que recolhe automaticamente em condições adversas para proteger a estrutura.' },
      { key: 'portadas', name: 'Portada de alumínio articulada', category: 'Portadas', short: 'Estrutura robusta e segura.', long: 'Portada articulada em alumínio com fecho reforçado, pensada para máxima segurança em casas e negócios.' },
      { key: 'portadas', name: 'Portada de correr', category: 'Portadas', short: 'Sistema deslizante para grandes vãos.', long: 'Sistema de correr para grandes vãos, sem ocupar espaço no exterior, com deslizamento suave e duradouro.' },
      { key: 'portadas', name: 'Portada de enrolar', category: 'Portadas', short: 'Recolhe verticalmente, discreta.', long: 'Portada de enrolar que recolhe verticalmente para uma caixa discreta, prática para uso diário em lojas e habitações.' },
      { key: 'portadas', name: 'Portada com isolamento térmico', category: 'Portadas', short: 'Reforço térmico e eficiência.', long: 'Portada com reforço de isolamento térmico, contribuindo para maior eficiência energética da habitação durante todo o ano.' },
      { key: 'fachadas', name: 'Cortina de vidro deslizante', category: 'Fachadas têxteis', short: 'Painéis de vidro sem perfis verticais.', long: 'Cortina de vidro com painéis deslizantes que se recolhem lateralmente, sem perfis verticais, mantendo a vista e a luz natural.' },
      { key: 'fachadas', name: 'Fachada têxtil retráctil', category: 'Fachadas têxteis', short: 'Tecido translúcido retráctil.', long: 'Fachada têxtil com tecido técnico translúcido que fecha e abre o espaço à vontade, ideal para todo o ano.' },
      { key: 'fachadas', name: 'Cortina de PVC transparente', category: 'Fachadas têxteis', short: 'Solução económica contra o vento.', long: 'Cortina de PVC transparente, uma solução económica para fechar esplanadas e varandas em dias de vento e chuva.' },
      { key: 'fachadas', name: 'Fachada têxtil para negócios', category: 'Fachadas têxteis', short: 'Ideal para esplanadas o ano todo.', long: 'Fachada têxtil pensada para esplanadas de restaurantes e cafés, permitindo o uso do espaço exterior durante todo o ano.' }
    ];

    const catalog = catalogRaw.map((p, i) => ({
      ...p,
      id: i,
      photos: PH[p.key],
      grad: grads[p.key],
      catHref: catHref[p.category],
      photoStyle: { height: 150, borderRadius: '14px 14px 0 0', ...layered(grads[p.key], PH[p.key][0]) },
      select: () => this.setState({ selectedId: i, activePhoto: 0 })
    }));

    const catCounts = {};
    catalog.forEach(p => { catCounts[p.category] = (catCounts[p.category] || 0) + 1; });
    const filterLabels = ['Todos', 'Estores', 'Toldos', 'Portadas', 'Fachadas têxteis'];
    const filters = filterLabels.map(label => ({
      label,
      count: label === 'Todos' ? catalog.length : (catCounts[label] || 0),
      select: () => this.setState({ filter: label }),
      style: {
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
        textAlign: 'left', border: 'none', background: 'none', cursor: 'pointer',
        padding: '10px 12px', borderRadius: 8,
        fontWeight: this.state.filter === label ? 700 : 500,
        color: this.state.filter === label ? dark : '#5a5e56',
        background2: undefined,
        backgroundColor: this.state.filter === label ? '#efeae0' : 'transparent',
        fontSize: 14.5
      },
      countStyle: { color: '#9a9d95', fontSize: 12.5, fontWeight: 600 }
    }));

    const visibleProducts = this.state.filter === 'Todos' ? catalog : catalog.filter(p => p.category === this.state.filter);

    const selectedProduct = this.state.selectedId != null ? catalog[this.state.selectedId] : null;
    const detailThumbs = selectedProduct ? selectedProduct.photos.map((ph, i) => ({
      select: () => this.setState({ activePhoto: i }),
      style: {
        height: 64, borderRadius: 8, border: this.state.activePhoto === i ? `2px solid ${yellow}` : '2px solid transparent',
        cursor: 'pointer', padding: 0, ...layered(selectedProduct.grad, ph)
      }
    })) : [];

    return {
      mobile, notMobile,
      showDetail: !!selectedProduct,
      showGrid: !selectedProduct,
      selectedProduct,
      detailThumbs,
      closeDetail: () => this.setState({ selectedId: null }),
      mainPhotoStyle: selectedProduct ? { height: mobile ? 280 : 420, borderRadius: 16, marginBottom: 12, ...layered(selectedProduct.grad, selectedProduct.photos[this.state.activePhoto]) } : {},

      pageWrapStyle: { background: cream, minHeight: '100vh', overflowX: 'hidden' },
      headerStyle: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, background: dark, boxShadow: '0 2px 18px rgba(0,0,0,.18)' },
      headerInnerStyle: { maxWidth: 1360, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: mobile ? '10px 18px' : '10px 32px', gap: 24 },
      logoLinkStyle: { display: 'flex', alignItems: 'center' },
      logoImgStyle: { height: mobile ? 40 : 48, width: 'auto', display: 'block' },
      navStyle: { display: 'flex', gap: 30, alignItems: 'center' },
      ctaHeaderStyle: { background: yellow, color: dark, fontWeight: 700, fontSize: 14, padding: '11px 22px', borderRadius: 8, whiteSpace: 'nowrap' },
      burgerStyle: { background: 'none', border: 'none', display: 'flex', flexDirection: 'column', gap: 5, padding: 8, cursor: 'pointer' },
      burgerLineStyle: { width: 24, height: 2, background: '#fff', display: 'block' },
      mobileNavStyle: { display: 'flex', flexDirection: 'column', background: dark, padding: '8px 18px 20px', gap: 4, borderTop: '1px solid rgba(255,255,255,.08)' },
      mobileLinkStyle: { color: '#fff', fontWeight: 600, fontSize: 16, padding: '12px 4px', borderBottom: '1px solid rgba(255,255,255,.08)' },
      ctaMobileStyle: { marginTop: 12, background: yellow, color: dark, fontWeight: 700, fontSize: 15, padding: '13px 20px', borderRadius: 8, textAlign: 'center' },
      toggleMenu: () => this.setState(s => ({ menuOpen: !s.menuOpen })),
      closeMenu: () => this.setState({ menuOpen: false }),
      menuOpen: this.state.menuOpen,

      pageHeroStyle: { background: `linear-gradient(150deg,#2c302e 0%,#23261f 60%,#181a17 100%)`, padding: mobile ? '120px 20px 44px' : '170px 64px 60px' },
      kickerLightStyle: { color: yellow, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase' },
      pageHeroTitleStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 800, fontSize: mobile ? 34 : 48, margin: '10px 0 14px' },
      pageHeroSubStyle: { color: 'rgba(255,255,255,.75)', fontSize: mobile ? 15 : 17, maxWidth: 600, margin: 0, lineHeight: 1.6 },

      shopSectionStyle: { padding: mobile ? '40px 20px 60px' : '56px 64px 100px', background: cream },
      shopInnerStyle: { maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '240px 1fr', gap: mobile ? 24 : 40, alignItems: 'flex-start' },
      sidebarStyle: { background: '#fff', borderRadius: 14, padding: '18px', boxShadow: '0 4px 20px rgba(44,48,46,.06)', display: 'flex', flexDirection: mobile ? 'row' : 'column', gap: 4, flexWrap: mobile ? 'wrap' : 'nowrap', position: mobile ? 'static' : 'sticky', top: mobile ? 'auto' : 110 },
      sidebarHeadStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 15, margin: mobile ? '0 8px 0 4px' : '0 0 10px 4px', width: mobile ? 'auto' : '100%' },
      gridColStyle: {},
      prodGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(3,1fr)', gap: 18 },
      prodCardStyle: { background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 4px 18px rgba(44,48,46,.07)', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left', display: 'block', width: '100%', fontFamily: "'Murecho',sans-serif" },
      prodCardBodyStyle: { padding: '14px 14px 18px' },
      prodTagStyle: { color: orange, fontWeight: 700, fontSize: 10.5, letterSpacing: '.5px', textTransform: 'uppercase' },
      prodNameStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 15.5, margin: '5px 0 6px', lineHeight: 1.25 },
      prodDescStyle: { color: '#65695f', fontSize: 12.5, lineHeight: 1.5, margin: '0 0 10px' },
      prodLinkStyle: { color: dark, fontWeight: 700, fontSize: 12.5 },

      detailSectionStyle: { padding: mobile ? '40px 20px 60px' : '56px 64px 100px', background: cream },
      detailInnerStyle: { maxWidth: 1200, margin: '0 auto' },
      backLinkStyle: { background: 'none', border: 'none', color: dark, fontWeight: 700, fontSize: 14, cursor: 'pointer', padding: 0, marginBottom: 24 },
      detailGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr .9fr', gap: mobile ? 24 : 48 },
      galleryColStyle: {},
      thumbRowStyle: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 },
      detailInfoColStyle: { display: 'flex', flexDirection: 'column' },
      detailTagStyle: { color: orange, fontWeight: 700, fontSize: 12.5, letterSpacing: '.6px', textTransform: 'uppercase' },
      detailTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 26 : 32, margin: '8px 0 16px' },
      detailDescStyle: { color: '#4d514c', fontSize: 15.5, lineHeight: 1.7, margin: '0 0 26px' },
      detailCtaStyle: { display: 'inline-block', background: yellow, color: dark, fontWeight: 700, fontSize: 15, padding: '14px 26px', borderRadius: 9, marginBottom: 16, textAlign: 'center' },
      detailCatLinkStyle: { color: dark, fontWeight: 700, fontSize: 13.5 },

      ctaBandStyle: { background: `linear-gradient(120deg,${yellow},${orange})`, padding: mobile ? '48px 20px' : '64px 64px', textAlign: 'center' },
      ctaBandTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 26 : 34, margin: '0 0 12px' },
      ctaBandTextStyle: { color: '#3a3f3c', fontSize: mobile ? 15 : 17, margin: '0 0 26px' },
      ctaBandBtnStyle: { display: 'inline-block', background: dark, color: '#fff', fontWeight: 700, fontSize: 16, padding: '15px 34px', borderRadius: 9 },

      footerStyle: { background: '#1c1f1d', padding: mobile ? '48px 20px 24px' : '72px 64px 28px' },
      footerGridStyle: { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr 1fr 1fr', gap: 36 },
      footerColStyle: {},
      footerLogoStyle: { height: 40, marginBottom: 14 },
      footerDescStyle: { color: 'rgba(255,255,255,.6)', fontSize: 14, lineHeight: 1.6, maxWidth: 280 },
      footerHeadStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 700, fontSize: 15, margin: '0 0 16px' },
      footerLinkStyle: { display: 'block', color: 'rgba(255,255,255,.65)', fontSize: 14, marginBottom: 10 },
      footerTextStyle: { color: 'rgba(255,255,255,.65)', fontSize: 14, lineHeight: 1.7, margin: '0 0 16px' },
      footerNoteStyle: { color: 'rgba(255,255,255,.4)', fontSize: 12 },
      footerBottomStyle: { maxWidth: 1280, margin: '40px auto 0', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.08)', color: 'rgba(255,255,255,.4)', fontSize: 12.5, textAlign: 'center' },

      year: new Date().getFullYear(),
      navItems, filters, visibleProducts
    };
  }
}

</script>
</body>
</html>
