/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}

/* ===== BASE ===== */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#000;
  color:#e9e9ec;
  line-height:1.4;
}
.container{max-width:1180px;margin:0 auto;padding:0 12px}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  /* era: background:rgba(0,0,0,.28);  -> ficou escuro */
  background: rgba(255,255,255,.14);        /* mais claro */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.20);
}

.header-inner{
  display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0;
}

.logo{ height:48px; margin-left:0; filter:none; } 
/* se sua logo for escura e perder contraste, ative a linha abaixo */
/* .logo{ filter: brightness(1.1) contrast(1.05); } */


/* Lojas (pequeno, sem textão) */
.shops{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.shop{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:#e9e9ec;font-weight:600;font-size:12px;
}
.shop .flag{
  display:inline-block;width:18px;height:12px;border-radius:2px;background:transparent; /* troque por <img> se quiser */
}
.shop .brand{width:26px;height:26px;border-radius:6px}

/* ===== BANNER ===== (quadrado) */
.banner{display:block;margin:14px auto 12px}
.banner img{width:100%;height:auto;display:block}

/* ===== MENU ===== (menor, lado a lado) */
.menu{
  width:100%;
  display:flex; justify-content:center; align-items:center; 
  column-gap: 12px; row-gap: 10px;        /* mais afastamento entre botões */
  flex-wrap:wrap;
  margin: 10px 0 18px;
  padding: 6px 8px;
  background: transparent; border: none; box-shadow: none;
}

.menu a{
  display:inline-flex; align-items:center; justify-content:center;
  height: 36px;                             /* altura coerente p/ alinhamento */
  padding: 0 14px;                          /* mais respiro */
  background:#141414; color:#fff; 
  border-radius:10px; text-decoration:none; 
  font-weight:600; font-size:13px;          /* um tiquinho maior no mobile */
  line-height:1; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.menu a:hover{ transform: translateY(-1px); background:#1b1b1b; }
.menu a:active{ transform: translateY(0) scale(.98); }


/* ===== CARD / MOCKUP ===== (profundidade + moldura + micro-interações) */
.card{
  position:relative;border-radius:8px;overflow:hidden;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 42px rgba(0,0,0,.65); /* “fundo pra trás” */
  transform:translateZ(0);
  transition:transform .2s ease, box-shadow .2s ease
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;pointer-events:none;opacity:.6
}
.card a{display:block;text-decoration:none;outline:none}
.card img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none
}
.card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 22px 54px rgba(0,0,0,.68)}
.card:active{transform:translateY(-1px) scale(.985)}
.card:focus-within{box-shadow:0 0 0 3px rgba(100,150,255,.35),0 22px 54px rgba(0,0,0,.68)}

/* ===== FOOTER ===== */
.site-footer{
  padding:24px 0 36px;background:#0b0b0e;border-top:1px solid rgba(255,255,255,.04);
  box-shadow:0 -10px 28px rgba(0,0,0,.35) inset;color:#eaeaea
}
.site-footer .icons{display:flex;gap:14px;justify-content:center;align-items:center;margin-bottom:10px}
.site-footer .whats{display:flex;justify-content:flex-start;align-items:center;margin:8px 0}
.site-footer .whats img{width:32px;height:32px} /* menor e à esquerda */
.site-footer .links{text-align:center;font-size:14px;opacity:.9;margin-top:8px;margin-bottom:10px}
.site-footer .locale{text-align:center;font-size:14px;color:#fff}

/* ===== MOBILE (mantém 3 colunas e dá respiro lateral) ===== */
@media (max-width:560px){
  .container{padding-left:12px;padding-right:12px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* === Botão WhatsApp flutuante (canto inferior direito) === */
.fab-whats{
  position: fixed;
  right: 16px; bottom: 16px; z-index: 20;
  width: 56px; height: 56px;            /* tamanho do botão */
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.fab-whats img{
  width: 24px !important;               /* <<< força o tamanho do ícone   */
  height: 24px !important;              /* <<< mesmo valor para quadrado   */
  object-fit: contain;                  /* garante que não “estoure”       */
  display: block;
}
.site-footer .whats { display: block; }  /* mostra o da esquerda */
.fab-whats { display: none !important; } /* oculta qualquer flutuante, por via das dúvidas */
/* + espaço antes do rodapé */
.main-content{ padding-bottom: 56px; }
/* + espaço antes do rodapé */
.main-content{ padding-bottom: 56px; }
/* faz a grade (grid) ter a mesma largura do container */
.grid-wrap{ max-width: 1180px; margin: 0 auto; padding: 6px 12px 28px; }
/* espaço abaixo das lojas no topo */
.shops{ margin-bottom: 12px; }
/* ——— ALINHAR LOJAS (INK/ETSY) À RÉGUA DOS MOCKUPS ——— */
.site-header .header-inner{
  padding-left: 12px !important;
  padding-right: 12px !important;
  max-width: 1180px;      /* mesma largura da .container/.grid-wrap */
  margin: 0 auto;
}

/* não deixar colar na borda direita */
.shops{ 
  margin-right: 0 !important; 
  margin-bottom: 12px !important;  /* respiro abaixo (opcional) */
}
.site-header .container{
  max-width: 900px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin: 0 auto !important;
}
.shops{
  align-items: flex-start !important;
  margin-right: 0 !important;
  margin-bottom: 12px !important;
}
/* ——— LOJAS (topo) alinhadas à direita, um embaixo do outro ——— */

/* garante que o topo usa a mesma régua e recuo do site */
.site-header .container{
  max-width: 1180px;        /* troque para 900px se sua grid for 900 */
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* coluna, borda direita como referência */
.shops{
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* alinha pela DIREITA */
  text-align: right;         /* texto também à direita */
  gap: 6px;                  /* espaço entre as duas linhas */
  margin: 0;                 /* sem empurrar nada */
}

/* cada linha: conteúdo “encostado” à direita */
.shop{
  display: flex;
  align-items: center;
  justify-content: flex-end; /* tudo termina à direita */
  gap: 8px;
  margin: 0;
  padding: 0;
  white-space: nowrap;       /* evita quebrar em duas linhas */
}

/* ordem do conteúdo: ajuda a manter o ícone na ponta direita */
.shop .shop-help{ order: 1; }
.shop .shop-label{ order: 2; font-weight: 800; letter-spacing: .2px; }
.shop .brand{ order: 3; width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
/* ——— BLOCO FINAL: padroniza a régua e alinha as lojas ——— */

/* 1) UMA régua única para tudo */
:root{
  --page-width: 1180px;   /* se sua grade for 900px, troque aqui para 900px */
  --pad-x: 12px;
}

/* 2) Mesma largura e mesmo recuo para topo, conteúdo e grid */
.site-header .container,
.container,
.grid-wrap{
  max-width: var(--page-width) !important;
  margin: 0 auto !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

/* 3) Header com flex e sem empurrar nada para fora */
.header-inner{
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 4) Lojas (INK/ETSY): coluna, alinhadas À DIREITA, uma embaixo da outra */
.shops{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* 5) Cada link termina à direita (texto + marca) */
.shop{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  font-size: 15px !important;  /* ~+20% */
  font-weight: 600;
}
.shop .shop-label{ font-weight: 800; letter-spacing: .2px; }
.shop .brand{ width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }

/* 6) Garante que a grid não “caia” (3 colunas) */
.grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
}

/* 7) Evita rolagem lateral por sobra antiga */
body{ overflow-x: hidden; }
/* === ALINHAR TOPO À MESMA RÉGUA DOS MOCKUPS (provável: 900px) === */
.site-header .header-inner{
  box-sizing: border-box;
  max-width: 900px !important;   /* >>> se sua grade for 1180px, troque para 1180px */
  margin: 0 auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

/* Lojas INK/ETSY à direita, uma embaixo da outra */
.shops{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;  /* direita */
  text-align: right !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Cada link “termina” na direita */
.shop{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
/* === ALINHAR INK/ETSY COM O BANNER (DIREITA) === */
/* usa a mesma “régua” e o mesmo recuo lateral do banner (.container) */
.site-header .container{
  max-width: 1180px !important;   /* se sua página estiver em 900px, troque aqui para 900px */
  margin: 0 auto !important;
  padding-left: 12px !important;  /* mesmo recuo do banner */
  padding-right: 12px !important; /* mesmo recuo do banner */
}

/* tira qualquer padding extra do miolo do header */
.header-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* empilha os dois links e ancora pela direita */
.shops{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* direita */
  text-align: right !important;
  gap: 6px !important;
  margin: 0 !important;             /* sem empurrar pra fora */
}
.header-inner{display:flex;justify-content:space-between;align-items:flex-start;}
.shops{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px;margin:0;}
.shop{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap;}
.site-header .container{padding-left:12px;padding-right:12px;} /* mesmo recuo do banner */
.logo-banner {
.site-header {
  position: static;
}

  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  padding: 8px 16px;
  z-index: 10;
  text-align: center;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.shops {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.shop {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-size: 13px;
}

.shop-help {
  margin-right: 6px;
}

.brand {
  height: 16px;
}