/*
 * flyer.css — estilos partilhados do folheto (A4 imprimível + página pública)
 * Extraído de sales-app/docs/flyer-mockup-reference.html (maquete aprovada).
 *
 * --accent / --accent-ink NÃO têm valor fixo aqui (exceto o fallback abaixo):
 * são injetados por secção via inline style="--accent:..;--accent-ink:.."
 * em cada .flyer-page (ver Task 7 dos partials).
 */

:root{
  --steel:#20242a; --steel2:#2c323a;
  --paper:#ffffff; --ink:#16181b; --line:#e2e3e6; --muted:#6b7076;
  --cut:#d8321e; --chip:#eef0f2;
  /* Fallback inofensivo para componentes isolados (fora de uma secção com acento injetado) */
  --accent:#febd17; --accent-ink:#4a3600;
}
*{ box-sizing:border-box; }

.flyer-page{ width:794px; max-width:100%; background:var(--paper); border-radius:4px; overflow:hidden; }

/* ---- Cabeçalho de marca (imagem de categoria + título) ---- */
.head{ position:relative; background:var(--steel); color:#fff; overflow:hidden;
       display:grid; grid-template-columns:1fr 300px; min-height:200px; }
.head__img{ position:relative; overflow:hidden; background:
    repeating-linear-gradient(135deg,#242a31 0 22px,#20252c 22px 44px);
    display:flex; align-items:center; justify-content:center; }
/* Imagem de categoria: preenche a coluna sem transbordar nem esticar o cabeçalho */
.head__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.head__img span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8b929b;
                 border:1px dashed #495059; padding:8px 12px; border-radius:6px; text-align:center; }
.head__body{ padding:52px 28px 22px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.head__accent{ position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--accent); }
.eyebrow{ font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:800; }
.head h1{ margin:.28em 0 .12em; font-size:40px; line-height:.98; font-weight:800; letter-spacing:-.5px;
          text-transform:uppercase; font-style:italic; }
.head h1 em{ color:var(--accent); font-style:italic; }
.head p{ margin:0; color:#c4c9cf; font-size:14.5px; letter-spacing:.02em; text-transform:uppercase; font-weight:600; }
.seal{ position:absolute; right:14px; top:14px; width:74px; height:74px; border-radius:50%;
       background:var(--accent); color:var(--accent-ink); display:flex; flex-direction:column; align-items:center;
       justify-content:center; font-weight:800; line-height:1; transform:rotate(-8deg); box-shadow:0 4px 12px rgba(0,0,0,.3); }
.seal b{ font-size:18px; } .seal small{ font-size:9px; letter-spacing:.1em; margin-top:2px; }

/* ---- Grelha de produtos ---- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.card{ background:var(--paper); padding:16px 16px 18px; display:flex; flex-direction:column; position:relative; }
.badge{ position:absolute; top:12px; right:12px; background:var(--cut); color:#fff; font-weight:800;
        font-size:15px; padding:5px 9px; border-radius:6px; letter-spacing:.02em; }
.thumb{ height:118px; border-radius:8px; background:var(--chip); display:flex; align-items:center; justify-content:center;
        margin-bottom:12px; color:#aeb3b9; }
.thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.thumb svg{ width:52px; height:52px; opacity:.55; }
.pname{ font-size:14px; font-weight:700; line-height:1.22; margin:0 0 3px; min-height:34px; }
.pspec{ font-size:11.5px; color:var(--muted); margin:0 0 12px; letter-spacing:.01em; }
.prices{ margin-top:auto; }
.old{ font-size:12.5px; color:var(--muted); text-decoration:line-through; }
.now{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.iva{ font-size:11px; color:var(--muted); font-weight:600; margin-left:2px; }
.stock{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:11px; font-weight:700;
        text-transform:uppercase; letter-spacing:.06em; color:#1c7a44; }
.stock.low{ color:#b26a00; }
.stock i{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

/* ---- Benefícios + rodapé ---- */
.benefits{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--steel2); color:#fff; }
.benefit{ padding:16px 10px; text-align:center; border-left:1px solid #363c45; }
.benefit:first-child{ border-left:0; }
.benefit svg{ width:26px; height:26px; color:var(--accent); margin-bottom:6px; }
.benefit b{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.benefit span{ font-size:10.5px; color:#aab0b8; }
.foot{ background:var(--ink); color:#fff; display:flex; align-items:center; gap:22px; padding:16px 24px; }
.foot__qr{ background:#fff; padding:8px; border-radius:8px; line-height:0; flex:none; display:inline-block; }
.foot__qr img, .foot__qr canvas, .foot__qr table{ display:block; width:92px; height:92px; }
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.foot__logo{ background:#fff; border-radius:6px; padding:4px 9px; display:inline-flex; }
.foot__logo img{ height:22px; display:block; }
.foot__name{ font-size:13px; font-weight:800; color:#fff; }
.foot__info{ font-size:11px; color:#9aa0a7; line-height:1.45; }
.foot__valid{ margin-left:auto; color:var(--accent); font-weight:800; text-transform:uppercase;
              letter-spacing:.05em; font-size:12.5px; text-align:right; max-width:220px; line-height:1.25; }

/* ---- Logótipo ---- */
.logo{ position:absolute; top:15px; left:24px; display:flex; align-items:center; gap:9px; z-index:3; }
.logo__mark{ width:30px; height:30px; background:#e2241a; color:#fff; font-weight:800; font-size:14px;
             display:flex; align-items:center; justify-content:center; border-radius:6px; font-style:normal; }
.logo__txt{ font-weight:800; font-size:15px; color:#fff; letter-spacing:.02em; line-height:1; text-transform:uppercase; font-style:normal; }
.logo__txt small{ display:block; font-size:8.5px; letter-spacing:.26em; color:#9aa0a7; font-weight:600; margin-top:2px; }

/* Painel claro para o logótipo real (imagem azul/vermelho) legível sobre o cabeçalho escuro */
.logo__panel{ background:#fff; border-radius:8px; padding:6px 10px; display:inline-flex; align-items:center; }
.logo__panel img{ height:26px; display:block; }

/* ---- Página de DESTAQUE (1 produto hero) ---- */
.flyer-page.hero{ margin-top:34px; }
.hero__top{ position:relative; background:var(--steel); color:#fff; border-top:6px solid var(--accent);
            padding:16px 28px 14px; display:flex; justify-content:flex-end; align-items:center; min-height:52px; }
.hero__eyebrow{ color:var(--accent); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:12px; }
.hero__main{ display:grid; grid-template-columns:1fr 1fr; background:var(--paper); }
.hero__img{ position:relative; background:
    repeating-linear-gradient(135deg,#f1f2f4 0 22px,#eceef0 22px 44px);
    display:flex; align-items:center; justify-content:center; min-height:380px; color:#aeb3b9; }
.hero__img span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#9aa0a7;
                 border:1px dashed #c7cbcf; padding:8px 12px; border-radius:6px; text-align:center; }
.hero__img img{ max-width:100%; max-height:100%; object-fit:contain; }
.hero__info{ padding:30px 30px 26px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.hero__cat{ color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.hero__name{ font-size:33px; font-weight:800; line-height:1.02; letter-spacing:-.5px; margin:.22em 0 .1em;
             text-transform:uppercase; font-style:italic; color:var(--ink); }
.hero__name em{ color:var(--accent-ink); background:var(--accent); padding:0 8px; font-style:italic; border-radius:4px; }
.hero__specs{ list-style:none; padding:0; margin:16px 0 22px; }
.hero__specs li{ font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); display:flex; gap:9px; align-items:center; color:#33383e; }
.hero__specs li::before{ content:""; width:8px; height:8px; background:var(--accent); border-radius:2px; flex:none; }
.hero__price .old{ font-size:16px; } .hero__price .now{ font-size:46px; }
.hero__seal{ position:absolute; top:22px; right:24px; width:96px; height:96px; border-radius:50%;
             background:var(--cut); color:#fff; display:flex; flex-direction:column; align-items:center;
             justify-content:center; font-weight:800; line-height:1; transform:rotate(-8deg); box-shadow:0 5px 14px rgba(0,0,0,.22); }
.hero__seal b{ font-size:30px; } .hero__seal small{ font-size:10px; letter-spacing:.08em; margin-top:3px; }

/* Fonte do folheto — garante sans-serif mesmo no A4 autónomo (que não carrega app.css) */
.flyer-page{ font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; margin: 0; }
  .no-print { display: none !important; }
  .flyer-page { box-shadow: none !important; border-radius: 0 !important; break-after: page; }
  .flyer-page:last-child { break-after: auto; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}