/* CSS Document */ 
/*
.print-prod-nomecliente{display:block}
.print-prod-telcliente,
.print-prod-emailcliente,
.print-prod-doccliente,
.print-prod-endcliente{display:none !important}
*/
/*
.col-unit{color:#fff !important;}
*/!doctype html>
html lang="pt-BR">
head>
  meta charset="utf-8" />
  meta name="viewport" content="width=device-width,initial-scale=1" />
  title>FastColor — Gráfica Rápida (Loja)/title>
  meta name="description" content="Loja online de serviços de impressão rápida: cartões, flyers, banners, camisetas e muito mais." />
  style>
    /* ====== RESET ====== */
    :root{
      --bg:#f6f7fb; --card:#ffffff; --accent:#ff6b35; --muted:#6b7280; --dark:#0f1724; --glass: rgba(255,255,255,0.6);
      --max-width:1200px; --radius:12px; --shadow: 0 6px 22px rgba(12,12,20,0.08);
      --transition: 250ms cubic-bezier(.2,.9,.3,1);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:linear-gradient(180deg,var(--bg),#ffffff);color:var(--dark);-webkit-font-smoothing:antialiased}

    /* ====== LAYOUT ====== */
    .wrap{max-width:var(--max-width);margin:28px auto;padding:20px}
    header{display:flex;align-items:center;gap:20px;margin-bottom:22px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#ff9a6b);display:grid;place-items:center;color:white;font-weight:700;font-size:18px;box-shadow:var(--shadow)}
    .brand h1{margin:0;font-size:18px}
    nav{margin-left:auto;display:flex;gap:12px;align-items:center}
    .search{flex:1;max-width:460px;display:flex;background:var(--card);padding:8px;border-radius:10px;align-items:center;gap:8px;box-shadow:var(--shadow)}
    .search input{border:0;outline:0;font-size:14px;background:transparent;width:100%}
    .btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;transition:var(--transition)}
    .btn.secondary{background:transparent;color:var(--dark);border:1px solid rgba(15,23,36,0.06)}
    .btn:hover{transform:translateY(-2px)}

    /* ====== HERO ====== */
    .hero{background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));padding:22px;border-radius:14px;display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:center;box-shadow:var(--shadow)}
    .hero h2{margin:0 0 8px 0;font-size:24px}
    .hero p{margin:0;color:var(--muted)}
    .hero .categories{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .pill{background:var(--card);padding:8px 10px;border-radius:999px;border:1px solid rgba(15,23,36,0.04);font-size:13px}

    /* ====== MAIN GRID ====== */
    .main{display:grid;grid-template-columns:260px 1fr;gap:18px;margin-top:18px}
    aside{background:var(--card);padding:16px;border-radius:12px;box-shadow:var(--shadow)}
    .filters h3{margin:0 0 8px 0;font-size:14px}
    .cat-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
    .cat{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;cursor:pointer}
    .cat:hover{background:linear-gradient(90deg,rgba(255,107,53,0.06),rgba(255,154,107,0.02))}
    .price-range{display:flex;gap:8px;margin-top:12px}
    .price-range input{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(15,23,36,0.06)}

    /* ====== PRODUCTS ====== */
    .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
    .card{background:var(--card);border-radius:12px;padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
    .thumb{height:140px;border-radius:10px;background:linear-gradient(180deg,#f2f3f7,#e9eef8);display:grid;place-items:center;font-weight:700;color:var(--muted)}
    .meta{display:flex;justify-content:space-between;align-items:center}
    .price{font-weight:700}
    .product-actions{display:flex;gap:8px}
    .small{font-size:13px;color:var(--muted)}

    /* ====== SIDEBAR CART ====== */
    .cart-drawer{position:fixed;right:18px;bottom:18px;background:var(--card);border-radius:14px;padding:12px;box-shadow:0 18px 40px rgba(12,12,20,0.12);width:320px;max-height:70vh;overflow:auto}
    .cart-header{display:flex;justify-content:space-between;align-items:center}
    .cart-items{display:flex;flex-direction:column;gap:10px;margin-top:12px}
    .cart-item{display:flex;gap:10px;align-items:center}
    .cart-item img{width:56px;height:56px;border-radius:8px;object-fit:cover}

    /* ====== FOOTER ====== */
    footer{margin-top:26px;text-align:center;color:var(--muted);font-size:14px;padding:18px}

    /* ====== MODAL ====== */
    .modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,0.4);opacity:0;pointer-events:none;transition:var(--transition)}
    .modal.open{opacity:1;pointer-events:auto}
    .modal-panel{background:var(--card);padding:18px;border-radius:12px;max-width:760px;width:96%;box-shadow:0 30px 80px rgba(12,12,20,0.3)}

    /* ====== RESPONSIVE ====== */
    @media (max-width:880px){
      .hero{grid-template-columns:1fr}
      .main{grid-template-columns:1fr}
      aside{order:2}
    }

    /* little utilities */
    .muted{color:var(--muted)}
    .flex{display:flex;align-items:center;gap:8px}
    a{text-decoration:none;color:inherit}
  /style>
/head>
body>
  div class="wrap">
    header>
      div class="brand">
        div class="logo">FC/div>
        div>
          h1>FastColor — Gráfica Rápida/h1>
          div class="muted small">Impressão expressa | Retire em loja ou receba em casa/div>
        /div>
      /div>

      div class="search" role="search">
        svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>path d="M21 21l-4.35-4.35" stroke="#9AA3B2" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>/svg>
        input id="q" placeholder="Buscar por serviço, produto ou acabamento..." />
        nav>
          button class="btn secondary" onclick="openDesign()">Solicitar Arte/button>
          button class="btn" onclick="toggleCart()">Carrinho (span id="cartCount">0/span>)/button>
        /nav>
      /div>
    /header>

    section class="hero">
      div>
        h2>Imprima rápido, com qualidade profissional/h2>
        p>Escolha entre nossas categorias de serviços — desde cartões de visita até banners e impressão em camisetas. Preços transparentes e opções de acabamento./p>
        div class="categories" id="topCats">/div>
      /div>

      div style="text-align:right">
        div style="background:linear-gradient(180deg,#fff,#fff);padding:12px;border-radius:10px"> 
          div class="muted">Promoção/div>
          h3 style="margin:6px 0">10% OFF em cartões de visita (primeira compra)/h3>
          div class="small muted">Frete grátis para São Paulo acima de R$120/div>
        /div>
      /div>
    /section>

    div class="main">
      aside>
        div class="filters">
          h3>Filtrar por categoria/h3>
          div class="cat-list" id="catList">/div>

          h3 style="margin-top:12px">Faixa de preço/h3>
          div class="price-range">
            input id="minPrice" placeholder="mín" />
            input id="maxPrice" placeholder="máx" />
          /div>
          div style="margin-top:12px;display:flex;gap:8px">
            button class="btn" onclick="applyFilters()">Aplicar/button>
            button class="btn secondary" onclick="resetFilters()">Limpar/button>
          /div>

          h3 style="margin-top:14px">Serviços de acabamento/h3>
          div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px">
            label class="pill">input type="checkbox" value="lamination" /> Laminação/label>
            label class="pill">input type="checkbox" value="verniz" /> Verniz UV/label>
            label class="pill">input type="checkbox" value="corte" /> Corte/label>
            label class="pill">input type="checkbox" value="dobra" /> Dobra/label>
          /div>
        /div>
      /aside>

      main>
        div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
          div class="muted">Mostrando span id="showCount">0/span> produtos/div>
          div class="flex">
            label class="small muted">Ordenar/label>
            select id="sort" onchange="renderProducts()">
              option value="relevance">Mais relevantes/option>
              option value="price_asc">Preço: menor/option>
              option value="price_desc">Preço: maior/option>
            /select>
          /div>
        /div>

        section class="products" id="products">/section>
      /main>
    /div>

    footer>
      © span id="year">/span> FastColor — Impressão rápida. Atendimento: contato@fastcolor.exemplo | (11) 94002-281
    /footer>
  /div>

  !-- CART DRAWER -->
  div id="cart" class="cart-drawer" style="display:none">
    div class="cart-header">
      strong>Carrinho/strong>
      button class="btn secondary" onclick="toggleCart()">Fechar/button>
    /div>
    div class="cart-items" id="cartItems">/div>
    div style="margin-top:12px;display:flex;justify-content:space-between;align-items:center">
      div class="muted">Total/div>
      div>strong id="cartTotal">R$0,00/strong>/div>
    /div>
    div style="margin-top:12px;display:flex;gap:8px">
      button class="btn" onclick="checkout()">Finalizar pedido/button>
      button class="btn secondary" onclick="clearCart()">Esvaziar/button>
    /div>
  /div>

  !-- PRODUCT MODAL -->
  div id="modal" class="modal" role="dialog" aria-hidden="true">
    div class="modal-panel" id="modalPanel">/div>
  /div>

  
    // ====== Dados base (exemplos) ======
    const CATEGORIES = [
      'Cartões de Visita','Flyers & Panfletos','Banners e Faixas','Adesivos & Etiquetas','Camisetas & Têxteis','Canecas & Brindes','Cartazes & Posters','Booklets & Catálogos','Convites & Papelaria','Fotografia','Lona / Impressão Grande Formato','Impressão Offset','Acabamento & Encadernação','Design Gráfico'
    ];

    const PRODUCTS = [
      {id:1,title:'Cartão de Visita (50 un.)',cat:'Cartões de Visita',price:29.90,desc:'Couchê 300g, frente colorida, corte reto',img:''},
      {id:2,title:'Flyer A5 (100 uni.)',cat:'Flyers & Panfletos',price:89.90,desc:'Impressão 4x4, papel fosco 150g',img:''},
      {id:3,title:'Banner 1x2m',cat:'Banners e Faixas',price:139.90,desc:'Lona frontlit 440g, ilhós',img:''},
      {id:4,title:'Adesivo recortado (30x30cm)',cat:'Adesivos & Etiquetas',price:49.90,desc:'Vinil adesivo recortado',img:''},
      {id:5,title:'Camiseta personalizada',cat:'Camisetas & Têxteis',price:59.90,desc:'Malha 100% algodão, silk frente',img:''},
      {id:6,title:'Caneca personalizada',cat:'Canecas & Brindes',price:39.90,desc:'Cerâmica 330ml, impressão dye-sublimation',img:''},
      {id:7,title:'Poster A2',cat:'Cartazes & Posters',price:24.90,desc:'Papel fotográfico 200g',img:''},
      {id:8,title:'Catálogo 12 pág.',cat:'Booklets & Catálogos',price:199.90,desc:'Impressão miolo e capa em couchê',img:''},
      {id:9,title:'Convite de casamento',cat:'Convites & Papelaria',price:129.90,desc:'Papel cartão 300g + envelope',img:''},
      {id:10,title:'Retoque fotográfico',cat:'Fotografia',price:69.90,desc:'Tratamento de 10 imagens',img:''},
      {id:11,title:'Lona 3x2m',cat:'Lona / Impressão Grande Formato',price:249.90,desc:'Lona frontlit + acabamento',img:''},
      {id:12,title:'Impressão Offset (milho)',cat:'Impressão Offset',price:899.90,desc:'Tiragem média em papel offset',img:''},
      {id:13,title:'Encadernação wire-o',cat:'Acabamento & Encadernação',price:39.90,desc:'Encadernação wire-o para relatórios',img:''},
      {id:14,title:'Projeto de identidade visual',cat:'Design Gráfico',price:599.90,desc:'Logo + paleta + aplicações',img:''}
    ];

    // ====== Estado simples ======
    const state = {products:PRODUCTS.slice(),cart:[],filters:{cat:null,min:null,max:null},q:'',sort:'relevance'};

    // ====== Inicialização ======
    document.getElementById('year').textContent = new Date().getFullYear();
    const catList = document.getElementById('catList');
    const topCats = document.getElementById('topCats');
    CATEGORIES.forEach(c=>{
      const el = document.createElement('button'); el.className='cat'; el.innerHTML = `span>${c}/span>small class="small muted">›/small>`;
      el.onclick = ()=>{ state.filters.cat = c; renderProducts() }
      catList.appendChild(el);

      const pill = document.createElement('div'); pill.className='pill'; pill.textContent = c; pill.onclick = ()=>{ state.filters.cat = c; renderProducts() }
      topCats.appendChild(pill);
    });

    // ====== Helpers ======
    function fmt(v){ return v.toLocaleString('pt-BR',{style:'currency',currency:'BRL'}) }

    // ====== Render produtos ======
    function renderProducts(){
      const container = document.getElementById('products'); container.innerHTML='';
      let list = state.products.slice();

      // search
      const q = (document.getElementById('q').value || '').toLowerCase();
      if(q) list = list.filter(p => (p.title+p.desc+p.cat).toLowerCase().includes(q));

      // category filter
      if(state.filters.cat) list = list.filter(p=>p.cat===state.filters.cat);

      // price filter
      const min = parseFloat(document.getElementById('minPrice').value) || state.filters.min;
      const max = parseFloat(document.getElementById('maxPrice').value) || state.filters.max;
      if(!isNaN(min)) list = list.filter(p=>p.price>=min);
      if(!isNaN(max)) list = list.filter(p=>p.price=max);

      // sort
      const s = document.getElementById('sort').value;
      if(s==='price_asc') list.sort((a,b)=>a.price-b.price);
      if(s==='price_desc') list.sort((a,b)=>b.price-a.price);

      document.getElementById('showCount').textContent = list.length;

      list.forEach(p=>{
        const card = document.createElement('article'); card.className='card';
        card.innerHTML = `
          div class="thumb" aria-hidden> ${p.cat.split(' ')[0]} /div>
          div>
            div style="display:flex;justify-content:space-between;align-items:center">
              div>
                strong>${p.title}/strong>
                div class="small muted">${p.cat}/div>
              /div>
              div class="price">${fmt(p.price)}/div>
            /div>
            p class="small muted" style="margin:10px 0">${p.desc}/p>
            div class="product-actions">
              button class="btn" onclick="openProduct(${p.id})">Ver/button>
              button class="btn secondary" onclick="addToCart(${p.id})">Adicionar/button>
            /div>
          /div>
        `;
        container.appendChild(card);
      });
    }

    // ====== Product modal ======
    function openProduct(id){
      const p = PRODUCTS.find(x=>x.id===id);
      const panel = document.getElementById('modalPanel');
      panel.innerHTML = `
        div style="display:flex;gap:14px">
          div style="flex:1">
            div style="height:260px;background:#f3f6fb;border-radius:10px;display:grid;place-items:center;font-weight:700;color:var(--muted)">${p.cat}/div>
          /div>
          div style="flex:1">
            h3 style="margin-top:0">${p.title}/h3>
            div class="muted small">${p.cat}/div>
            p class="small muted" style="margin-top:12px">${p.desc}/p>
            div style="margin-top:12px">strong>${fmt(p.price)}/strong>/div>
            div style="margin-top:12px;display:flex;gap:8px">
              button class="btn" onclick="addToCart(${p.id})">Adicionar ao carrinho/button>
              button class="btn secondary" onclick="closeModal()">Fechar/button>
            /div>
          /div>
        /div>
      `;
      document.getElementById('modal').classList.add('open');
      document.getElementById('modal').setAttribute('aria-hidden','false');
    }
    function closeModal(){ document.getElementById('modal').classList.remove('open'); document.getElementById('modal').setAttribute('aria-hidden','true'); }

    // ====== Cart actions ======
    function addToCart(id){
      const p = PRODUCTS.find(x=>x.id===id);
      const found = state.cart.find(i=>i.id===id);
      if(found) found.qty++;
      else state.cart.push({id:p.id,title:p.title,price:p.price,qty:1});
      updateCartUI();
      toggleCart(true);
    }
    function updateCartUI(){
      document.getElementById('cartCount').textContent = state.cart.reduce((s,i)=>s+i.qty,0);
      const list = document.getElementById('cartItems'); list.innerHTML='';
      state.cart.forEach(i=>{
        const node = document.createElement('div'); node.className='cart-item';
        node.innerHTML = `img src="" alt="${i.title}"/>div style="flex:1">strong style="font-size:14px">${i.title}/strong>div class="small muted">${i.qty}x ${fmt(i.price)}/div>/div>div style="text-align:right">div style="font-weight:700">${fmt(i.qty*i.price)}/div>div style="display:flex;gap:6px;margin-top:6px">button class="btn secondary" onclick="changeQty(${i.id},-1)">-/button>button class="btn" onclick="changeQty(${i.id},1)">+/button>/div>/div>`;
        list.appendChild(node);
      });
      const total = state.cart.reduce((s,i)=>s+i.price*i.qty,0);
      document.getElementById('cartTotal').textContent = fmt(total);
    }
    function changeQty(id,delta){
      const item = state.cart.find(i=>i.id===id); if(!item) return;
      item.qty += delta; if(item.qty=0) state.cart = state.cart.filter(x=>x.id!==id);
      updateCartUI();
    }
    function clearCart(){ state.cart=[]; updateCartUI(); }

    function toggleCart(forceOpen){
      const el = document.getElementById('cart');
      if(forceOpen===true) el.style.display='block'; else el.style.display = (el.style.display==='none')?'block':'none';
      updateCartUI();
    }

    function checkout(){
      if(state.cart.length===0){ alert('Seu carrinho está vazio.') ; return }
      // Mock checkout flow
      alert('Fluxo de checkout simulado. Implementar integração com gateway de pagamento e formulário de envio.');
    }

    // ====== Filters ======
    function applyFilters(){ state.filters.min = parseFloat(document.getElementById('minPrice').value) || null; state.filters.max = parseFloat(document.getElementById('maxPrice').value) || null; renderProducts(); }
    function resetFilters(){ state.filters={cat:null,min:null,max:null}; document.getElementById('minPrice').value=''; document.getElementById('maxPrice').value=''; renderProducts(); }

    // ====== small utilities ======
    document.getElementById('q').addEventListener('input',()=>renderProducts());
    document.getElementById('modal').addEventListener('click', (e)=>{ if(e.target.id==='modal') closeModal(); });

    function openDesign(){ alert('Solicitar arte: implemente um formulário para upload de briefing e arquivos.'); }

    // ====== start ======
    renderProducts(); updateCartUI();
  
/body>
/html>