/* ========== Base / Tokens ========== */
:root{
  --o8-primary: #2d3443;     /* navy Omni8 (fallback) */
  --o8-accent:  #f0b429;
  --o8-text:    #111111;

  --o8-bg: #ffffff;
  --o8-muted: #f6f7f9;
  --o8-border: #d9dde6;      /* borda mais visível */
  --o8-border-strong: rgba(45,52,67,.22);
  --o8-shadow: 0 2px 10px rgba(0,0,0,.06);
  --o8-radius-lg: 16px;
  --o8-radius-md: 12px;
  --o8-radius-sm: 10px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--o8-text);
  background:var(--o8-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Links / Botões */
a{ color:inherit; text-decoration:none; }
a.o8-link{ color:var(--o8-primary); font-weight:600; }
.o8-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem; border-radius:var(--o8-radius-md); border:1px solid transparent;
  font-weight:600; cursor:pointer; transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.o8-btn:active{ transform: translateY(1px); }
.o8-btn--primary{ background:var(--o8-primary); color:#fff; box-shadow:var(--o8-shadow); }
.o8-btn--primary:hover{ filter:brightness(1.05); }
.o8-btn--accent{ background:var(--o8-accent); color:#000; box-shadow:var(--o8-shadow); }

/* ========== Header ========== */
.o8-header{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
  padding:.75rem 1rem; background:#fff; border-bottom:1px solid var(--o8-border);
}
.o8-header__brand{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.o8-logo{ height:40px; width:auto; }
.o8-logo--placeholder{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 .75rem;
  border-radius:8px; background:var(--o8-primary); color:#fff; font-weight:800; letter-spacing:.5px;
}
.o8-welcome{ white-space:nowrap; }
.o8-chip{ background:var(--o8-accent); color:#000; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.o8-nav{ display:flex; gap:.75rem; }
.o8-nav__link{ padding:.5rem .75rem; border-radius:8px; color:#2c2c2c; font-weight:600; }
.o8-nav__link:hover{ background:var(--o8-muted); }

/* ========== Hero ========== */
.o8-hero{
  position:relative; overflow:hidden; margin:0 auto; margin-top:.25rem; border-radius:0;
  background:
    radial-gradient(1200px 300px at 10% -40%, rgba(45,52,67,.25), transparent 70%),
    radial-gradient(1000px 300px at 90% -40%, rgba(240,180,41,.25), transparent 70%),
    linear-gradient(180deg,#f7f9fc 0%,#fff 100%);
  min-height:240px; display:grid; place-items:center; border-bottom:1px solid var(--o8-border);
}
.o8-hero__content{ padding:2rem 1rem; text-align:center; max-width:920px; width:100%; }
.o8-hero__title{ margin:0 0 .5rem; font-size:clamp(1.6rem,2.5vw,2.2rem); color:var(--o8-primary); letter-spacing:.2px; }
.o8-hero__subtitle{ margin:0 0 1rem; color:#4b5563; font-size:1rem; }

/* ========== Shelf (prateleiras) ========== */
/* Agora sem scroll horizontal: grid fluido que se adapta ao espaço disponível */
.o8-shelf{ margin:1rem auto 0; padding:0 1rem 1.25rem; max-width:1280px; }
.o8-shelf__header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.6rem; padding:0 .25rem; }
.o8-shelf__title{ font-size:1.1rem; margin:0; color:#111; letter-spacing:.2px; }

/* Grid responsivo SEM overflow */
.o8-shelf__scroller{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  overflow:visible;
  padding:.25rem;
}

/* ========= OVERRIDES: manter no final do arquivo ========= */

/* card como coluna flex para centralizar o body */
.o8-shelf__scroller .o8-card{
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;

  /* gradiente DIAGONAL: verde -> azul */
  background: linear-gradient(180deg, #ffffff 0%, #c6c6c6 100%) !important;

  /* se alguma regra antiga ainda pintar outra cor, isso garante o gradiente */
  background-color: transparent !important;
}

/* faixa superior (capa) — mantém altura e deixa o gradiente do card aparecer ao fundo */
.o8-shelf__scroller .o8-card__media{
  width: 100% !important;
  height: 140px !important;
  border-radius: var(--o8-radius-lg) var(--o8-radius-lg) 0 0 !important;
  background: linear-gradient(180deg, rgba(128,128,128,.85) 0%, rgba(255,255,255,.85) 100%) !important;
}

/* corpo CENTRALIZADO vertical e horizontalmente */
.o8-shelf__scroller .o8-card__body{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;     /* centro horizontal */
  justify-content: center !important; /* centro vertical   */
  gap: .6rem !important;
  padding: 1rem .9rem 1.1rem !important;
  width: 100% !important;
  min-height: 240px;                   /* garante área mínima para centrar */
}

/* textos assegurados no centro */
.o8-shelf__scroller .o8-card__title,
.o8-shelf__scroller .o8-card__meta,
.o8-shelf__scroller .o8-card__price{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* QR centralizado e com tamanho consistente */
.o8-shelf__scroller .o8-card__qr{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: .35rem 0 .15rem !important;
}
.o8-shelf__scroller .o8-qr{
  width: 120px !important;
  height: 120px !important;
  max-width: 140px !important;
  max-height: 140px !important;
  margin: 0 auto !important;
}

/* botão centralizado */
.o8-shelf__scroller .o8-card__actions{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: .25rem !important;
}


/* ========== Card ========== */
.o8-card{
  display: grid;
  grid-template-rows: auto;
  border: 1.5px solid #000;          /* borda mais marcada */
  border-radius: var(--o8-radius-lg);
  background:linear-gradient(180deg,#ffffff 100%,#aaaaaa 100%)!important;
  box-shadow: var(--o8-shadow);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;

  /* === Centralização === */
  place-items: center;               /* alinha conteúdo horizontal e verticalmente */
  text-align: center;                /* centraliza textos */
}


.o8-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  border-color: rgba(45,52,67,.32);
}

.o8-card__media{
  background:linear-gradient(180deg,#f2f4f8 0%,#eef1f6 100%);
  height:140px;
  border-radius:var(--o8-radius-lg) var(--o8-radius-lg) 0 0;
}

/* garante que o bloco de conteúdo interno também fique alinhado */
.o8-card__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/*.o8-card__body{ display:grid; gap:.5rem; padding:.9rem .9rem 1rem; }*/
.o8-card__title{ margin:0; font-size:.98rem; line-height:1.25rem; font-weight:700; color:#111; }
.o8-card__meta{ margin:0; font-size:.83rem; color:#6b7280; }
.o8-card__price{ margin:.15rem 0 0; font-size:1.05rem; font-weight:800; color:#111; }
.o8-card__off{ color:#64748b; font-weight:600; }

/* QR code agora dentro do corpo, logo abaixo do preço */
.o8-card__qr{
  display:flex; align-items:center; justify-content:center;
  padding:.4rem 0 .2rem;
}
.o8-qr{
  width:120px; height:120px;            /* se ajuste automático for preciso, use 28vw limitado */
  max-width:140px; max-height:140px;
}

/* Ações */
.o8-card__actions{ margin-top:.25rem; }



/* ===== Vitrine Omni8 — Centralização interna dos cards ===== */

/* Garante que a grade não force alinhamentos estranhos */
.grid--vitrine {
  align-items: stretch;
  justify-items: stretch;
}

/* Card com coluna e conteúdo centralizado */
.card--vitrine {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.card--vitrine .card__body {
  display: flex;
  flex-direction: column;
  align-items: center;     /* <- centraliza horizontalmente TUDO */
  text-align: center;      /* <- centraliza textos */
  width: 100%;
  gap: 8px;
}

/* Título e tipo */
.card--vitrine .card__title {
  margin: 4px 0 0 0;
  font-size: 1.05rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.card--vitrine .card__type {
  margin-top: 2px;
  font-size: .9rem;
}

/* Preço */
.card--vitrine .card__price {
  margin: 6px 0 10px 0;
  font-weight: 800;
  font-size: 1.05rem;
}

/* QR centralizado e com espaçamento consistente */
.card--vitrine .card__qr {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 6px 0 8px 0;
}

.card--vitrine .qr-canvas {
  display: block;
  width: 160px;
  height: 160px;
  max-width: 70%;
  border-radius: 12px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CTA centralizado */
.card--vitrine .card__cta {
  margin: 2px 0 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Botão no padrão da vitrine */
.btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}

.btn--primary {
  background: #f0b429;                 /* dourado Omni8 */
  color: #111;
}

/* Ajustes finos para o “look” do mock */
.card--vitrine .muted {
  color: #5f6b7a !important;
}

.card--vitrine .price small {
  display: inline-block;
  margin-left: 4px;
  font-weight: 400;
}

/* Em telas maiores, dá um leve respiro vertical dentro do card */
@media (min-width: 768px) {
  .card--vitrine {
    padding: 18px 16px 16px;
  }
}

/* ===== Grade dos cards: centralizada e responsiva ===== */
.grid--vitrine {
  display: grid !important;
  gap: 20px !important;

  /* Mantém múltiplas colunas no desktop e 1 coluna no mobile,
     sempre CENTRALIZANDO a grade inteira. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important;
  justify-content: center !important;   /* <- centraliza o conjunto de cards */
  align-content: start !important;
}

/* Cada card com largura controlada (não estica demais) */
.grid--vitrine > .card--vitrine {
  width: 100% !important;
  max-width: 340px !important;          /* mesmo min/max da coluna acima */
  justify-self: center !important;      /* garante centralização de cada item */
}

/* Estrutura interna do card (mantém tudo centralizado) */
.card--vitrine {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
}

.card--vitrine .card__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 8px !important;
}

/* Títulos, tipo e preço — ajustes finos */
.card--vitrine .card__title {
  margin: 4px 0 0 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.card--vitrine .card__type { font-size: .92rem !important; }
.card--vitrine .card__price { font-weight: 800 !important; }

/* QR centralizado e consistente */
.card--vitrine .card__qr {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 8px 0 !important;
}
.card--vitrine .qr-canvas {
  display: block !important;
  width: 160px !important;
  height: 160px !important;
  max-width: 80% !important;
  border-radius: 12px !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* CTA centralizado */
.card--vitrine .card__cta {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

/* Botão */
.btn { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.btn--primary { background: #f0b429; color: #111; }

/* Quebra fluida em telas menores */
@media (max-width: 640px) {
  .grid--vitrine {
    grid-template-columns: 1fr !important;  /* 1 coluna no mobile */
  }
}

/* ====== FORÇAR 4 COLUNAS EM TELAS GRANDES ====== */
@media (min-width: 1200px){
  /* cobre diferentes seletores que a vitrine possa usar */
  .grid.grid--vitrine,
  .o8-shelf .grid--vitrine,
  .o8-shelf__scroller.grid--vitrine{
    display: grid !important;                 /* caso o original use flex */
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* se algum container limitar a largura, aumente */
  .o8-shelf, .o8-shelf__scroller{
    max-width: 1440px !important;             /* ajuste se precisar */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* impedir limite de largura dos cards */
  .card.card--vitrine{
    width: 100% !important;
    max-width: none !important;               /* remove caps que travam 3 colunas */
    flex: 1 1 auto !important;                /* se ainda for flex em algum breakpoint */
  }
}

/* ====== RESPONSIVO (degrau para baixo) ====== */
@media (max-width: 1199.98px){
  .grid.grid--vitrine,
  .o8-shelf .grid--vitrine,
  .o8-shelf__scroller.grid--vitrine{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 960px){
  .grid.grid--vitrine,
  .o8-shelf .grid--vitrine,
  .o8-shelf__scroller.grid--vitrine{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 580px){
  .grid.grid--vitrine,
  .o8-shelf .grid--vitrine,
  .o8-shelf__scroller.grid--vitrine{
    grid-template-columns: 1fr !important;
  }
}

/* ====== CASO A GRADE ORIGINAL SEJA FLEX: anular wrap/controladores ====== */
.grid--vitrine{
  flex-wrap: nowrap !important;   /* evita “quebrar” em 3 por largura do card */
}


  /* Complementar: controla a área de mídia do card com degradê e a imagem */
  .o8-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;        /* mantém proporção moderna para vitrine */
    overflow: hidden;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    background: linear-gradient(180deg, rgba(45,52,67,.25), rgba(45,52,67,.15)); /* seu degradê */
  }
  .o8-card__media::after {
    /* uma leve camada de degradê no rodapé da imagem para dar leitura ao título */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.15) 100%);
    pointer-events: none;
  }
  .o8-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;            /* cobre a área sem deformar */
    object-position: center;      /* centraliza o foco */
    display: block;
  }