/* =============================================================================
   OCompra.com — app.css
   CSS próprio único, sem framework/CDN/webfont de terceiros. Mobile-first.
   Design system: Paleta A (quente/promo). Tokens em tokens.css / critical.css.
   Estrutura:
     1. Base & tipografia          6. Cards (oferta/produto)
     2. Header & busca             7. Badges, selos, pílulas, chips
     3. Hero                       8. Tabela comparativa
     4. Layout & seções           9. Gráfico de preço
     5. Botões & links           10. Breadcrumb, paginação
                                 11. Estado vazio, cupons, alerta
                                 12. Footer, consentimento, anúncios
                                 13. Breakpoints
   ============================================================================= */

/* ============================ 1. BASE & TIPOGRAFIA ========================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--color-bg);
  color:var(--color-text);
  line-height:var(--lh-base);
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);color:var(--color-secondary);font-weight:var(--fw-bold)}
p{margin:0 0 var(--space-3)}
a{color:var(--color-primary);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--color-primary-d)}
ul{margin:0;padding:0}

:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)}

.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  position:fixed;left:8px;top:8px;z-index:1000;width:auto;height:auto;
  background:#fff;color:var(--color-secondary);padding:8px 12px;
  border-radius:var(--radius);box-shadow:var(--shadow-2);font-weight:var(--fw-semibold);
}

.meta{color:var(--color-text-muted);font-size:var(--fs-xs)}

/* ============================ 2. HEADER & BUSCA ============================ */
.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--color-secondary);color:#fff;box-shadow:var(--shadow-2);
}
.header-inner{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:10px var(--space-4);min-height:var(--header-h);
}
.brand{
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-weight:var(--fw-black);font-size:1.3rem;letter-spacing:-.01em;
}
.brand:hover{color:#fff}
.brand-mark{display:inline-flex;width:30px;height:30px;color:var(--color-primary-l);flex:0 0 auto}
.brand-mark svg{width:100%;height:100%}
.brand-name b{color:var(--color-accent)}

.site-search{
  order:3;display:flex;flex:1 1 100%;min-width:0;align-items:center;
  background:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-1);
  overflow:hidden;padding-left:14px;transition:box-shadow var(--t-base);
}
.site-search:focus-within{box-shadow:var(--shadow-2),0 0 0 2px var(--color-primary)}
.site-search .icon{color:var(--color-text-muted);width:20px;height:20px;flex:0 0 auto}
.site-search input{
  flex:1;min-width:0;border:0;padding:11px 12px;font-size:var(--fs-base);
  background:transparent;color:var(--color-text);
}
.site-search input:focus{outline:none}
.site-search button{
  border:0;background:var(--grad-cta);color:#fff;font-weight:var(--fw-bold);
  padding:0 18px;align-self:stretch;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;transition:filter var(--t-fast);
}
.site-search button:hover{filter:brightness(1.06)}
.site-search button .icon{width:18px;height:18px}
.site-search .btn-label{display:none}

.country-selector{display:flex;gap:6px;align-items:center}
.country-selector .label{display:none;color:rgba(255,255,255,.6);font-size:.8rem}
.country-selector a,.country-selector .country-disabled{
  color:#fff;font-size:.8rem;font-weight:var(--fw-semibold);
  padding:5px 9px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.22);text-transform:uppercase;
  letter-spacing:.02em;transition:background var(--t-fast),border-color var(--t-fast);
}
.country-selector a:hover{background:rgba(255,255,255,.12);color:#fff}
.country-selector a[aria-current="true"]{background:var(--color-primary);border-color:var(--color-primary)}
.country-selector .country-disabled{opacity:.45;border-style:dashed;cursor:not-allowed}

/* nav de categorias-topo */
.site-nav{background:var(--color-secondary-l);border-top:1px solid rgba(255,255,255,.08)}
.site-nav .container{display:flex;align-items:center;gap:var(--space-3)}
.site-nav .nav-all{
  display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:var(--fw-semibold);
  font-size:.85rem;padding:9px 0;white-space:nowrap;
}
.site-nav .nav-all .icon{width:16px;height:16px;color:var(--color-accent)}
.site-nav ul{
  list-style:none;display:flex;gap:var(--space-4);overflow-x:auto;
  padding:9px 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.site-nav li{flex:0 0 auto}
.site-nav a{color:rgba(255,255,255,.82);font-size:.85rem;white-space:nowrap;font-weight:var(--fw-medium)}
.site-nav a:hover{color:var(--color-accent)}

/* ================================ 3. HERO ================================== */
/* Full-bleed mesmo dentro de main.container (a home renderiza o hero como
   primeiro filho de <main>): estende às bordas com margem negativa simétrica. */
.hero{background:var(--grad-hero);color:#fff;padding:36px 0 30px;position:relative;overflow:hidden;
  margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-4)) var(--space-8);
  width:auto}
.hero::before{
  content:"";position:absolute;left:-80px;bottom:-80px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);pointer-events:none;
}
.hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none;
}
.hero-inner{position:relative;text-align:center;max-width:760px;margin:0 auto}
.hero h1{
  color:#fff;font-size:var(--fs-2xl);font-weight:var(--fw-black);
  letter-spacing:-.02em;text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.hero-sub{margin:12px auto 0;max-width:580px;font-size:1.05rem;color:rgba(255,255,255,.92)}
.hero-search{
  display:flex;margin:20px auto 0;max-width:580px;background:#fff;
  border-radius:var(--radius-pill);box-shadow:var(--shadow-2);overflow:hidden;
  align-items:center;padding-left:16px;
}
.hero-search:focus-within{box-shadow:var(--shadow-3),0 0 0 3px rgba(255,255,255,.55)}
.hero-search .icon{color:var(--color-text-muted);flex:0 0 auto}
.hero-search input{flex:1;min-width:0;border:0;padding:14px 12px;font-size:1.05rem;background:transparent;color:var(--color-text)}
.hero-search input:focus{outline:none}
.hero-search button{
  border:0;background:var(--grad-cta);color:#fff;font-weight:var(--fw-bold);
  padding:0 22px;align-self:stretch;cursor:pointer;transition:filter var(--t-fast);
}
.hero-search button:hover{filter:brightness(1.06)}

/* O foco das barras de busca é dado pelo CONTAINER (:focus-within = anel no pill
   inteiro). Os controles internos NÃO devem receber o anel global :focus-visible:
   dentro do pill (overflow:hidden) ele fica com a forma errada (radius-sm) e
   recortado. Mantém-se feedback de teclado sutil no botão (brilho). */
.site-search :focus,.site-search :focus-visible,
.hero-search :focus,.hero-search :focus-visible{box-shadow:none !important;border-radius:0;outline:none}
.site-search button:focus-visible,
.hero-search button:focus-visible{filter:brightness(1.12)}

.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.hero-chips .chip-label{width:100%;font-size:.8rem;color:rgba(255,255,255,.78);margin-bottom:2px}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);
  padding:6px 13px;font-size:.85rem;font-weight:var(--fw-semibold);
  transition:background var(--t-fast),transform var(--t-fast);
}
.chip:hover{background:rgba(255,255,255,.28);color:#fff;transform:translateY(-1px)}
.chip .icon{width:15px;height:15px}

.hero-stats{
  display:flex;justify-content:center;flex-wrap:wrap;gap:18px 28px;margin-top:22px;
  font-size:.85rem;color:rgba(255,255,255,.9);
}
.hero-stats li{list-style:none;display:inline-flex;align-items:center;gap:7px}
.hero-stats .icon{width:18px;height:18px;color:var(--color-accent)}
.hero-stats strong{color:#fff;font-weight:var(--fw-black);font-size:1rem}

/* ===================== 3b. STORE STRIP (lojas parceiras) ================= */
/* Faixa horizontal de marketplaces/lojas parceiras (placeholder de logo).
   Scroll-snap no mobile, distribuída no desktop. Sem assets de terceiros: o
   "logo" é um chip neutro com a inicial/nome da loja. */
.store-strip{margin:0 0 var(--space-8)}
.store-strip-head{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-3);
  color:var(--color-text-muted);font-size:.85rem;font-weight:var(--fw-semibold)}
.store-strip-head .icon{width:16px;height:16px;color:var(--color-primary)}
.store-strip-list{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-3);padding:2px 0 6px;
}
.store-chip{
  flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  padding:8px 16px;font-weight:var(--fw-bold);font-size:.9rem;color:var(--color-secondary);
  box-shadow:var(--shadow-1);white-space:nowrap;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.store-chip:hover{border-color:var(--color-primary);box-shadow:var(--shadow-2);transform:translateY(-2px);color:var(--color-secondary)}
.store-chip-logo{
  flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-bg-warm);color:var(--color-primary-d);border-radius:var(--radius-pill);
  font-weight:var(--fw-black);font-size:.95rem;text-transform:uppercase;
}
.store-chip-logo img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-pill)}

/* ========================== 4. LAYOUT & SEÇÕES ============================ */
main{padding-top:var(--space-6);padding-bottom:var(--space-8)}

.section{margin:0 0 var(--space-8)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--space-4)}
.section-head h2{
  font-size:var(--fs-lg);position:relative;padding-left:14px;
}
.section-head h2::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:1.05em;border-radius:var(--radius-pill);background:var(--grad-cta);
}
.section-head h2 .icon{width:20px;height:20px;color:var(--color-primary);vertical-align:-3px;margin-right:6px}
.section-head .see-all{
  display:inline-flex;align-items:center;gap:4px;font-weight:var(--fw-semibold);
  font-size:.9rem;white-space:nowrap;
}
.section-head .see-all .icon{width:16px;height:16px;transition:transform var(--t-fast)}
.section-head .see-all:hover .icon{transform:translateX(3px)}

/* Listas de produtos em grade: cards de largura CONSISTENTE (flex-grow:0 — não
   esticam) e a ÚLTIMA LINHA incompleta CENTRALIZADA (justify-content:center). Com
   flex-grow:1 a última linha esticava os cards (ficavam maiores que os demais).
   Vale p/ TODAS as listas (busca, categoria, intenção, relacionadas, lojas). */
.offer-grid,.product-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);
}
.product-grid{gap:var(--space-6)}
.offer-grid>*,.product-grid>*{flex:0 1 210px}

/* Página de erro pública (404/500): centralizada, com respiro generoso. */
.error-page{padding:var(--space-12) var(--space-4);text-align:center}
.error-code{font-size:var(--fs-3xl);margin-bottom:0}

/* Grid de categorias (tiles com ícone) — auto-fill, mais largo que o de cards */
.category-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3);
}

/* Trilho horizontal (rail): no MOBILE rola com scroll-snap; no desktop vira grid.
   Use .rail no mesmo elemento que receberia .offer-grid quando a seção for um
   carrossel ("Maiores quedas", "Achadinhos", trilhos por nicho). */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(var(--card-min),45vw,230px);
  gap:var(--space-4);overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  scroll-padding-left:2px;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-pill)}
.rail>*{scroll-snap-align:start}

/* ============================ 5. BOTÕES & LINKS =========================== */
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--grad-cta);color:#fff;border:0;border-radius:var(--radius);
  padding:11px 16px;font-weight:var(--fw-bold);font-size:var(--fs-base);
  cursor:pointer;box-shadow:var(--shadow-cta);text-align:center;
  transition:transform var(--t-fast),filter var(--t-fast),box-shadow var(--t-fast);
}
.btn-cta:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 20px rgba(232,71,12,.4)}
.btn-cta:active{transform:translateY(0)}
.btn-cta .icon{width:18px;height:18px}
.btn-cta--block{width:100%}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;color:var(--color-primary);border:1.5px solid var(--color-primary);
  border-radius:var(--radius);padding:10px 16px;font-weight:var(--fw-bold);
  cursor:pointer;transition:background var(--t-fast),color var(--t-fast);
}
.btn-ghost:hover{background:var(--color-bg-soft);color:var(--color-primary-d)}

/* ======================= 6. CARDS (oferta/produto) ======================= */
.card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:var(--color-bg-warm)}
.card-media{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden}
.card-media img{
  width:100%;height:100%;object-fit:contain;
  transition:transform var(--t-slow);
}
.card:hover .card-media img{transform:scale(1.05)}
.card-media .placeholder-img{width:100%;height:100%;object-fit:cover;opacity:.9}
/* Galeria + vídeo da oferta (mídia rica AliExpress) */
.product-gallery{aspect-ratio:auto}
.product-thumbs{display:flex;gap:6px;flex-wrap:wrap;padding:10px;background:#fff;border-top:1px solid var(--border,#e5e7eb)}
.product-thumb{width:58px;height:58px;padding:0;border:1px solid var(--border,#e5e7eb);border-radius:6px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color var(--t,.15s)}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:none}
.product-thumb:hover,.product-thumb:focus{border-color:var(--brand,#e8590c)}
.product-video{width:100%;display:block;background:#000;border-top:1px solid var(--border,#e5e7eb)}
.card-fav{
  position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;
  width:34px;height:34px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--color-border);
  border-radius:var(--radius-pill);color:var(--color-text-muted);
  box-shadow:var(--shadow-1);transition:color var(--t-fast),transform var(--t-fast);
}
.card-fav:hover{color:var(--color-primary);transform:scale(1.08)}
.card-fav .icon{width:18px;height:18px}

.card-body{padding:var(--space-3);display:flex;flex-direction:column;gap:7px;flex:1}
.card-title{font-size:.95rem;font-weight:var(--fw-semibold);line-height:var(--lh-snug);
  margin:0;color:var(--color-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-title a{color:var(--color-text)}
.card-title a:hover{color:var(--color-primary)}
.card-store{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:.78rem;color:var(--color-text-muted)}
.card-store .icon{width:14px;height:14px;color:var(--color-text-muted)}
/* Prova social da oferta (avaliação + vendas) */
.offer-social{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 2px;font-size:.85rem;color:var(--color-text-muted)}
.offer-rating{display:inline-flex;align-items:center;gap:4px;color:#f59e0b;font-weight:600}
.offer-rating .icon{width:15px;height:15px}
.offer-sold{color:var(--color-text-muted)}
.card-brand{margin:0;font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-text-muted)}

.card-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:auto}
.price-now{font-size:1.35rem;font-weight:var(--fw-black);color:var(--color-primary);line-height:1.1}
.price-from{font-size:.7rem;color:var(--color-text-muted);width:100%;margin:0 0 -2px}
.price-old{text-decoration:line-through;color:var(--color-text-muted);font-size:.82rem}
.price-installments{width:100%;margin:2px 0 0;font-size:.76rem;color:var(--color-success);font-weight:var(--fw-semibold)}

.card-cta{margin-top:8px}
.card-cta .btn-cta{width:100%;padding:9px 12px;font-size:.9rem}
.card-compare{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-size:.82rem;font-weight:var(--fw-semibold);
}
.card-compare .icon{width:15px;height:15px}
.card .out-of-stock{display:inline-flex;align-items:center;gap:5px;color:var(--color-alert);
  font-weight:var(--fw-semibold);font-size:.8rem;margin:0}
.card-meta{margin:0;font-size:.72rem;color:var(--color-text-muted)}

/* ================== 7. BADGES, SELOS, PÍLULAS, CHIPS ===================== */
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:var(--fw-black);
  border-radius:var(--radius-pill);padding:4px 9px;line-height:1;letter-spacing:.01em;
}
.badge .icon{width:13px;height:13px}
.badge-discount{
  position:absolute;top:8px;left:8px;z-index:2;
  background:var(--color-accent);color:var(--color-secondary);
  box-shadow:0 2px 6px rgba(255,183,3,.45);border:1px solid var(--color-accent-d);
}
.badge-lowest{
  background:var(--color-success);color:#fff;
  box-shadow:0 2px 6px rgba(27,158,90,.32);
}
.badge-lowest.is-floating{position:absolute;top:8px;left:8px;z-index:2}
.badge-soft{background:var(--color-bg-warm);color:var(--color-primary-d)}
.out-of-stock{color:var(--color-alert);font-weight:var(--fw-semibold)}
.price-drop{color:var(--color-success);font-weight:var(--fw-semibold)}

/* --- Comparação de preços por EAN (página de oferta) --- */
.price-compare .offer-table-wrap{overflow-x:auto}
.price-compare-table{width:100%;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.price-compare-table th,.price-compare-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--color-border-soft);vertical-align:middle}
.price-compare-table thead th{font-size:.78rem;font-weight:var(--fw-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.02em}
.price-compare-table tbody tr:last-child td{border-bottom:0}
.price-compare-table .price-now{font-size:1.1rem;white-space:nowrap}
.price-compare-table tr.is-cheapest{background:var(--color-success-l)}
.price-compare-table tr.is-cheapest .price-now{color:var(--color-success)}
.badge-cheapest{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--radius-pill);background:var(--color-success);color:#fff;font-size:.68rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em;vertical-align:middle}
.btn-cta--sm{padding:6px 14px;font-size:.85rem;white-space:nowrap}

.pill{
  display:inline-flex;align-items:center;gap:5px;background:var(--color-bg-soft);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);
  padding:4px 11px;font-size:.8rem;font-weight:var(--fw-semibold);color:var(--color-text-soft);
}

/* ======================= 8. TABELA COMPARATIVA =========================== */
.price-table-wrap{margin:var(--space-6) 0}
.price-table-wrap h2{font-size:var(--fs-lg);margin-bottom:var(--space-4)}
.price-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;
}
.price-table th,.price-table td{text-align:left;padding:12px var(--space-3);vertical-align:middle}
.price-table thead th{
  background:var(--color-bg-soft);color:var(--color-text-soft);
  font-weight:var(--fw-bold);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  border-bottom:2px solid var(--color-border);
}
.price-table tbody tr{transition:background var(--t-fast)}
.price-table tbody tr:nth-child(even){background:var(--color-bg-soft)}
.price-table tbody tr:hover{background:var(--color-bg-warm)}
.price-table tbody td{border-bottom:1px solid var(--color-border-soft)}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table-store{font-weight:var(--fw-semibold)}
.price-table-store .icon{width:16px;height:16px;color:var(--color-text-muted);vertical-align:-3px;margin-right:5px}
.price-table-price{font-weight:var(--fw-black);color:var(--color-primary);white-space:nowrap;font-size:1.05rem}
.price-table-avail .pill{font-size:.74rem}
.price-table-cta .btn-cta{padding:8px 14px;font-size:.85rem}
.price-disclaimer{display:block;margin-top:5px;font-size:.72rem;color:var(--color-text-muted)}

/* ========================== 9. GRÁFICO DE PREÇO ========================== */
.price-chart{margin:var(--space-6) 0;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow-1)}
.price-chart h2{font-size:var(--fs-lg);margin-bottom:var(--space-3)}
.price-chart-canvas{width:100%;position:relative}
.price-chart-canvas canvas{width:100%;height:240px;display:block}
.price-chart-tooltip{
  position:absolute;pointer-events:none;z-index:3;transform:translate(-50%,-115%);
  background:var(--color-secondary);color:#fff;padding:6px 9px;border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:var(--fw-semibold);white-space:nowrap;box-shadow:var(--shadow-2);
  opacity:0;transition:opacity var(--t-fast);
}
.price-chart-tooltip.is-visible{opacity:1}
.price-chart-tooltip b{color:var(--color-accent)}
.price-chart-note{margin:10px 0 0;font-size:.78rem;color:var(--color-text-muted)}
.price-chart-fallback{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:10px}
.price-chart-fallback th,.price-chart-fallback td{padding:6px 8px;border-bottom:1px solid var(--color-border);text-align:left}

/* ===================== 10. BREADCRUMB, PAGINAÇÃO ========================= */
.breadcrumb{margin:0 0 var(--space-4)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:0;margin:0;font-size:.82rem;color:var(--color-text-muted)}
.breadcrumb a{color:var(--color-text-muted);font-weight:var(--fw-medium)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb li{display:inline-flex;align-items:center;gap:4px}
.breadcrumb li:not(:last-child) .icon{width:13px;height:13px;color:var(--color-border);margin-left:2px}
.breadcrumb [aria-current="page"]{color:var(--color-text-soft);font-weight:var(--fw-semibold)}

.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:var(--space-8) 0}
.pagination a{
  display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--color-border);border-radius:var(--radius-pill);
  padding:9px 16px;font-weight:var(--fw-semibold);color:var(--color-text-soft);
  box-shadow:var(--shadow-1);transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.pagination a:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}
.pagination a .icon{width:16px;height:16px}
.pagination .pg-prev-icon{display:inline-flex;transform:scaleX(-1)}
.pagination-current{color:var(--color-text-muted);font-size:.9rem;font-weight:var(--fw-semibold)}

/* =============== 11. ESTADO VAZIO, CUPONS, ALERTA ======================= */
.empty-state{
  background:var(--color-bg-soft);border:1.5px dashed var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-10) var(--space-6);text-align:center;
  color:var(--color-text-muted);display:flex;flex-direction:column;align-items:center;gap:6px;
}
.empty-state .empty-illo{
  width:96px;height:96px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);background:var(--color-bg-warm);color:var(--color-primary);
  margin-bottom:6px;box-shadow:var(--shadow-1);
}
.empty-state .empty-illo .icon{width:48px;height:48px}
.empty-state strong{display:block;color:var(--color-secondary);font-size:1.1rem;margin-bottom:2px}
.empty-state p{margin:0;max-width:380px}

.coupon-card{
  background:#fff;border:1px solid var(--color-border);border-left:4px solid var(--color-primary);
  border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-3);
  box-shadow:var(--shadow-1);
}
.coupon-code{
  font-family:var(--font-mono);font-size:1.05rem;font-weight:var(--fw-bold);letter-spacing:.06em;
  border:1.5px dashed var(--color-primary);border-radius:var(--radius);padding:7px 12px;
  display:inline-block;background:var(--color-bg-soft);color:var(--color-primary-d);cursor:pointer;
  transition:background var(--t-fast),transform var(--t-fast);
}
button.coupon-code:hover{background:var(--color-bg-warm);transform:translateY(-1px)}
button.coupon-code.is-copied{border-style:solid;border-color:var(--color-success);color:var(--color-success)}

/* Cabeçalho de loja (página /loja e /cupons) */
.store-hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  background:var(--color-bg-soft);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin:0 0 var(--space-8);
}
.store-hero-logo{
  flex:0 0 auto;width:88px;height:88px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-1);
}
.store-hero-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.store-hero-initial{font-size:2.2rem;font-weight:var(--fw-black);color:var(--color-primary)}
.store-hero-body{flex:1 1 240px;min-width:0}
.store-hero-name{font-size:var(--fs-xl);margin:0 0 6px}
.store-hero-intro{margin:0 0 var(--space-3);color:var(--color-text-soft);max-width:60ch}
.store-hero-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-2)}
.store-hero-meta .pill .icon{width:14px;height:14px;color:var(--color-primary)}
.store-hero-disclaimer{margin:6px 0 0}

/* Lista de cupons (grid 1 col mobile, 2 col em telas largas) */
.store-coupon-list{list-style:none;display:grid;grid-template-columns:1fr;gap:var(--space-3)}
.coupon-card{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
}
.coupon-card-body{flex:1 1 220px;min-width:0}
.coupon-card-title{font-size:1.02rem;margin:0 0 6px;color:var(--color-secondary)}
.coupon-rule{margin:0 0 6px;font-size:.9rem;color:var(--color-text-soft)}
.coupon-rule-label{font-weight:var(--fw-bold);color:var(--color-text)}
.coupon-validity{margin:0 0 6px}
.coupon-disclaimer{margin:0}
.coupon-card-action{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;
  text-align:center;min-width:160px;
}
.coupon-code-label{display:block}
.coupon-card-action .coupon-code{text-align:center}
.coupon-card-action .pill{justify-content:center}
.coupon-card-action .coupon-go{width:100%}
.coupons-store-disclaimer{margin:var(--space-4) 0 0}

.price-alert-form{display:grid;gap:12px;max-width:520px;margin:var(--space-4) auto;text-align:left;
  background:var(--color-bg-soft);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-5)}
.price-alert-form input{padding:13px 14px;border:1px solid var(--color-border);
  border-radius:var(--radius);font-size:1.02rem;background:#fff}
.price-alert-form input:focus-visible{border-color:var(--color-primary)}
.price-alert-form button{justify-self:center;width:auto;min-width:260px;margin-top:2px}
.price-alert-form.is-active{box-shadow:0 0 0 3px rgba(255,183,3,.35)}

/* ============= 12. FOOTER, CONSENTIMENTO, ANÚNCIOS ===================== */
.site-footer{
  background:var(--color-secondary);color:rgba(255,255,255,.78);
  margin-top:var(--space-12);padding:var(--space-10) 0 var(--space-6);font-size:.9rem;
}
.footer-top{display:grid;grid-template-columns:1fr;gap:var(--space-8) var(--space-6)}
.footer-brand .brand{font-size:1.4rem;margin-bottom:10px}
.footer-tagline{max-width:320px;color:rgba(255,255,255,.66);font-size:.88rem}
.footer-seal{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:10px 12px;max-width:340px;
}
.footer-seal .icon{width:22px;height:22px;color:var(--color-accent);flex:0 0 auto}
.footer-seal .seal-body{font-size:.78rem;line-height:1.4;color:rgba(255,255,255,.72)}
.footer-seal .seal-body strong{display:block;color:#fff;font-size:.82rem}
.footer-col h3{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px}
.footer-col a{color:rgba(255,255,255,.74);font-weight:var(--fw-medium)}
.footer-col a:hover{color:var(--color-accent)}
.footer-bottom{
  margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.footer-legal a{color:rgba(255,255,255,.7);font-size:.84rem}
.footer-legal a:hover{color:var(--color-accent)}
.affiliate-disclosure{margin:var(--space-4) 0 0;font-size:.78rem;color:rgba(255,255,255,.55);max-width:760px}
.footer-rights{margin:0;font-size:.82rem;color:rgba(255,255,255,.6)}

/* Banner de país (dispensável, sem auto-redirect) */
.country-banner{background:var(--color-bg-warm);border-bottom:1px solid var(--color-border);font-size:.9rem}
.country-banner .container{display:flex;align-items:center;gap:12px;padding:10px var(--space-4);flex-wrap:wrap}
.country-banner-go{font-weight:var(--fw-bold);color:var(--color-primary-d)}
.country-banner button{margin-left:auto;background:transparent;border:0;font-size:1.3rem;
  line-height:1;cursor:pointer;color:var(--color-text-muted)}
.country-banner button:hover{color:var(--color-text)}

/* Banner de consentimento */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--color-secondary);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.consent-banner[hidden]{display:none}
.consent-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px var(--space-4)}
.consent-text{margin:0;flex:1 1 240px;font-size:.9rem;color:rgba(255,255,255,.9)}
.consent-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.consent-btn{padding:9px 16px;border:0;border-radius:var(--radius);font-weight:var(--fw-bold);cursor:pointer}
.consent-accept{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-cta)}
.consent-reject{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.consent-link{color:#fff;text-decoration:underline}

/* Slot de anúncio (F11, só com flag + consentimento) */
.ad-slot{min-height:90px;margin:var(--space-6) 0;background:var(--color-bg-soft);
  border:1px dashed var(--color-border);border-radius:var(--radius)}
.ad-slot[hidden]{display:none}

/* Admin (interface só pt-BR) — herda os tokens */
.admin-shell{max-width:420px;margin:8vh auto;padding:0 16px}
.admin-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-2)}
.admin-card h1{margin-top:0;font-size:1.3rem}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:.9rem;margin-bottom:5px;font-weight:var(--fw-semibold)}
.form-field input{width:100%;padding:11px;border:1px solid var(--color-border);border-radius:var(--radius);font-size:1rem}
.alert-error{background:var(--color-alert-l);border:1px solid var(--color-alert);color:var(--color-alert);
  border-radius:var(--radius);padding:11px 13px;margin-bottom:14px;font-size:.9rem}

.legal-content{max-width:740px}
.legal-content h1{font-size:var(--fs-xl);margin-bottom:var(--space-4)}

/* ============= 12b. LISTAGEM (categoria/busca) ========================= */
.category-header,.search-header{margin:0 0 var(--space-4)}
.category-header h1,.search-header h1{font-size:var(--fs-xl);letter-spacing:-.01em}
.category-description{margin:8px 0 0;max-width:680px;color:var(--color-text-soft)}
.search-header .search-term{color:var(--color-primary)}
/* Hub /buscas: a barra de busca precisa respirar antes das listas. */
.hub-page .hero-search{margin:0 auto var(--space-8)}
/* Hub /buscas: índice de buscas em colunas alinhadas. As keywords têm comprimento
   muito variável (de "Nubia" a frases longas); a grade alinha verticalmente e o
   ellipsis evita chips gigantes — visual de índice, não de nuvem de tags. */
.search-index{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2px 22px;
  margin:0 0 var(--space-6);
}
.search-index-link{
  display:block;
  padding:7px 2px;
  font-size:.9rem;
  line-height:1.35;
  color:var(--color-text-soft);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-bottom:1px solid var(--color-border-soft);
}
.search-index-link:hover{color:var(--color-primary)}
/* reCAPTCHA v3: badge flutuante escondido — a atribuição obrigatória ao Google
   aparece como texto (.recaptcha-notice) dentro de cada form público. */
.grecaptcha-badge{visibility:hidden}
.recaptcha-notice{margin:12px 0 0;font-size:.76rem;line-height:1.4;color:var(--color-text-muted)}
.recaptcha-notice a{color:var(--color-text-muted);text-decoration:underline}
/* Feedback do alerta de preço (AJAX inline) e dos forms (contato). Sucesso com
   destaque forte (verde + check); erro discreto em vermelho. */
.alert-feedback,.form-feedback{margin:16px 0 0;padding:16px 18px;border-radius:14px;font-size:1.05rem;line-height:1.45;font-weight:var(--fw-semibold,600)}
.alert-feedback--success,.form-feedback--success{background:#e7f7ed;color:#13703a;border:1.5px solid #9fdcb4;box-shadow:var(--shadow-2)}
.alert-feedback--success::before,.form-feedback--success::before{content:"✓";display:inline-block;margin-right:9px;font-weight:800;font-size:1.2em;vertical-align:-1px}
.alert-feedback--error,.form-feedback--error{background:#fdecea;color:#a8231a;border:1.5px solid #f3bdb6}
/* Bloco de anúncio (AdSense) — centralizado, espaçado, sem estourar o layout.
   Só aparece com ads.enabled + consentimento (renderizado por ad_slot()/app.js). */
.ad-slot{margin:24px auto;text-align:center;max-width:100%;overflow:hidden;min-height:1px}
.ad-slot .ad-ins{display:block}

/* chips de subcategoria / sugestões */
.subcategory-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-6)}
.chip-cat{
  background:var(--color-bg-soft);color:var(--color-text-soft);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);
  padding:7px 14px;font-size:.85rem;font-weight:var(--fw-semibold);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.chip-cat:hover{background:var(--color-bg-warm);border-color:var(--color-primary);
  color:var(--color-primary-d);transform:translateY(-1px)}

/* barra de filtros/ordenação + contagem */
.listing-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 var(--space-5);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-border);
}
.listing-count{margin:0;font-weight:var(--fw-semibold);color:var(--color-text-soft);font-size:.95rem}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filter-bar-icon{display:inline-flex;color:var(--color-text-muted)}
.filter-bar-icon .icon{width:18px;height:18px}
.filter-field{display:inline-flex;align-items:center;gap:8px}
.filter-field-label{font-size:.85rem;color:var(--color-text-muted);font-weight:var(--fw-semibold)}
.select-wrap{position:relative;display:inline-flex;align-items:center}
.select-wrap select{
  appearance:none;-webkit-appearance:none;background:#fff;color:var(--color-text);
  border:1px solid var(--color-border);border-radius:var(--radius);
  padding:9px 34px 9px 12px;font-size:.9rem;font-weight:var(--fw-semibold);
  cursor:pointer;transition:border-color var(--t-fast);
}
.select-wrap select:hover{border-color:var(--color-primary)}
.select-caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--color-text-muted)}
.select-caret .icon{width:16px;height:16px}
.filter-toggle{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;
  color:var(--color-text-soft);font-weight:var(--fw-medium);cursor:pointer}
.filter-toggle input{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer}
.filter-apply{padding:8px 14px}

/* termo destacado nos cards de resultado */
.search-mark{background:var(--color-accent);color:var(--color-secondary);
  border-radius:var(--radius-sm);padding:0 2px;font-weight:var(--fw-bold)}

/* sugestões (estado vazio/sem termo) */
.search-suggestions{margin:var(--space-6) 0}
.search-suggestions h2{font-size:var(--fs-lg);margin-bottom:var(--space-4)}

/* ============= 12c. PRODUTO/OFERTA (detalhe) =========================== */
/* Layout de detalhe: galeria + resumo. Mobile-first (empilha); 2 colunas em
   telas largas. Reaproveita .card/.card-media/.card-body/.price-now. */
.product-detail{margin:0 0 var(--space-8)}
.product-hero{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin:0 0 var(--space-8)}

.product-gallery{
  margin:0;max-width:520px;width:100%;align-self:start;
}
.product-gallery.card-media{aspect-ratio:auto}
.product-gallery img{
  width:100%;height:auto;max-height:480px;object-fit:contain;
  aspect-ratio:1/1;background:#fff;
}
.product-gallery .badge-discount{top:10px;left:10px}

.product-summary{align-self:start}
.product-summary .card-body{gap:10px;padding:var(--space-4)}
.product-title{font-size:var(--fs-xl);line-height:var(--lh-tight);color:var(--color-secondary)}
.product-summary-badges{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.product-offer-count{margin:0}
.product-from{margin:6px 0 0}
.product-price{margin-top:0}
.product-price-now{font-size:var(--fs-2xl);line-height:1.05}
.product-lowest-note{margin:0;color:var(--color-success)}
.product-jump,.offer-detail-cta{margin-top:8px}
.product-no-price{margin-top:6px}
.product-trust{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0}
.product-trust .icon{width:15px;height:15px;color:var(--color-success);flex:0 0 auto}
.offer-detail-meta{margin:6px 0 0}
.lowest-title{font-size:var(--fs-lg)}
.lowest-back{margin-top:8px}

/* Bloco de alerta de preço (seção) */
.price-alert{margin:var(--space-8) 0;text-align:center}
.price-alert h2{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-lg)}
.price-alert h2 .icon{width:20px;height:20px;color:var(--color-primary)}
.price-alert-form label{font-size:.88rem;font-weight:var(--fw-semibold);color:var(--color-text-soft)}

/* Ficha técnica (specs) — mesma base visual da tabela de preços */
.product-specs{margin:var(--space-8) 0}
.specs-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;
}
.specs-table th,.specs-table td{text-align:left;padding:11px var(--space-3);vertical-align:top}
.specs-table th{
  width:40%;background:var(--color-bg-soft);color:var(--color-text-soft);
  font-weight:var(--fw-semibold);border-bottom:1px solid var(--color-border-soft);
}
.specs-table td{border-bottom:1px solid var(--color-border-soft);color:var(--color-text)}
.specs-table tr:last-child th,.specs-table tr:last-child td{border-bottom:0}

/* FAQ (details/summary) */
.product-faq{margin:var(--space-8) 0}
.faq-item{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  margin-bottom:var(--space-3);overflow:hidden;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--space-3) var(--space-4);cursor:pointer;list-style:none;
  font-weight:var(--fw-semibold);color:var(--color-secondary);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{width:18px;height:18px;color:var(--color-text-muted);flex:0 0 auto;transition:transform var(--t-fast)}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-q{flex:1;min-width:0}
.faq-body{padding:0 var(--space-4) var(--space-4);color:var(--color-text-soft)}
.ai-seal{margin:var(--space-3) 0 0}

/* Tiles de categoria/guia (home) — card com ícone em círculo quente */
.category-tile,.guide-tile{
  flex-direction:row;align-items:center;gap:var(--space-3);
  padding:var(--space-3);text-decoration:none;
}
.category-tile:hover,.guide-tile:hover{border-color:var(--color-primary)}
.category-tile-icon,.guide-tile-icon{
  flex:0 0 auto;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-bg-warm);color:var(--color-primary);border-radius:var(--radius-pill);
}
.category-tile-icon .icon,.guide-tile-icon .icon{width:24px;height:24px}
.category-tile .card-body,.guide-tile .card-body{
  flex:1;min-width:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.category-tile .card-title,.guide-tile .card-title{color:var(--color-text)}
.category-tile:hover .card-title,.guide-tile:hover .card-title{color:var(--color-primary)}
.category-tile .card-compare,.guide-tile .card-compare{color:var(--color-primary)}

/* Intro de guias / nicho da home */
.home-guides-intro{margin:0 0 var(--space-4);max-width:680px;color:var(--color-text-soft)}

/* "Mais buscados" — nuvem de chips de busca (reaproveita .chip-cat) */
.most-searched{margin:0 0 var(--space-8)}
.most-searched .subcategory-chips{margin:0}
.most-searched .chip-cat{display:inline-flex;align-items:center;gap:6px}
.most-searched .chip-cat .icon{width:14px;height:14px;color:var(--color-primary)}

/* "Em alta hoje" — destaque curado pela IA matinal de tendências (tema + ofertas) */
.home-trending-theme{margin:-4px 0 var(--space-3);color:var(--color-text-muted);font-size:.92rem}

/* Home: blocos de categorias e "mais buscados" CENTRALIZADOS (pedido do dono).
   Categorias viram flex centrado (centraliza inclusive a última linha incompleta,
   o que o grid não faz); o título e os chips alinham ao centro. */
.home-categories .section-head,
.most-searched .section-head{justify-content:center;text-align:center}
.home-categories .category-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}
.home-categories .category-tile{flex:0 1 200px}
.most-searched .subcategory-chips{justify-content:center}
.store-strip-all{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-2);
  font-size:.85rem;font-weight:var(--fw-semibold);color:var(--color-primary)}
.store-strip-all .icon{width:15px;height:15px;transition:transform var(--t-fast)}
.store-strip-all:hover .icon{transform:translateX(3px)}

/* Página de lojas (/lojas) — grade de cards VERTICAIS centralizados (logo no topo,
   nome + nº de ofertas embaixo). Card vertical trabalha COM o .card base (que é
   flex-direction:column) e nada estoura: nome em até 2 linhas, tudo centralizado. */
.stores-page{margin:0 0 var(--space-8)}
.stores-header{text-align:center;margin:0 0 var(--space-5)}
.stores-header h1{display:inline-flex;align-items:center;gap:10px;justify-content:center}
.stores-header h1 .icon{width:24px;height:24px;color:var(--color-primary)}
.stores-intro{color:var(--color-text-muted);margin:var(--space-2) 0 0}
.store-card-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);align-items:stretch}
.store-card-grid > li{display:flex}
.store-card{flex:1;width:100%;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:10px;padding:20px 12px;min-height:140px}
.store-card-logo{flex:0 0 auto;width:56px;height:56px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;background:var(--color-bg-warm);
  font-weight:var(--fw-black);font-size:1.4rem;text-transform:uppercase;
  color:var(--color-primary-d);overflow:hidden}
.store-card-logo img{width:56px;height:56px;object-fit:contain;border-radius:50%}
.store-card-body{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;min-width:0}
.store-card-name{font-weight:var(--fw-bold);color:var(--color-text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.store-card:hover .store-card-name{color:var(--color-primary)}

/* Variação de preço no detalhe do produto (queda/alta) — nunca converte câmbio */
.price-variation{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;
  font-size:.85rem;font-weight:var(--fw-bold);padding:4px 10px;border-radius:var(--radius-pill)}
.price-variation .icon{width:15px;height:15px}
.price-variation.is-down{background:var(--color-success-l);color:var(--color-success)}
.price-variation.is-up{background:var(--color-alert-l);color:var(--color-alert)}

/* =============================== 13. BREAKPOINTS ========================= */
@media (min-width:680px){
  .site-search{order:0;flex:1 1 auto;max-width:480px}
  .site-search .btn-label{display:inline}
  .country-selector .label{display:inline}
}
@media (min-width:900px){
  .footer-top{grid-template-columns:2fr 1fr 1fr 1fr}
  .store-coupon-list{grid-template-columns:1fr 1fr}
  .product-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-8);align-items:start}
  .product-gallery{max-width:none}
}
@media (min-width:1100px){
  .offer-grid{gap:var(--space-6)}
}