/* AGRUNI: carregar DEPOIS de todos os CSS atuais.
   Seletores compatíveis com #productGrid e os cards da loja existente. */
#productGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  gap: clamp(12px, 1.5vw, 22px);
}
#productGrid .product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid #e2e5dd;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 14px #153d3008;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* A altura da fotografia depende da caixa, nunca da proporção do arquivo. */
#productGrid .product-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fafbf8;
  border-bottom: 1px solid #eef0e9;
}
#productGrid .product-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8%;
  object-fit: contain;
  object-position: center;
}
/* Categoria, título e embalagem permanecem completos, sem corte de texto. */
#productGrid .product-card-body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px;
}
#productGrid .product-category {
  min-height: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #53634f;
  overflow-wrap: anywhere;
}
#productGrid .product-card h3 {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: #193c2d;
  overflow-wrap: anywhere;
}
#productGrid .product-unit {
  min-height: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #63705f;
  overflow-wrap: anywhere;
}
/* Espaçamento natural: preço e controles seguem o conteúdo sem estirar o card. */
#productGrid .product-price {
  display: block;
  margin-top: 0;
  padding-top: 0;
  color: #153d30;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#productGrid .product-card button {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #153d30;
  color: #fff;
  font: 750 14px/1.2 system-ui, sans-serif;
  cursor: pointer;
}
/* Manter o atributo disabled no HTML: aparência não substitui o bloqueio real. */
#productGrid .product-card button:disabled {
  border-color: #d8dcd2;
  background: #eceee7;
  color: #5b6455;
  box-shadow: none;
  cursor: not-allowed;
}

/* Marcas: painel de destaque com superfícies brancas para preservar os logos.
   Usa .brand-discovery, .brand-list e .brand-chip já presentes no Agruni. */
.brand-discovery {
  margin: 8px 0 26px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #315a47;
  border-radius: 24px;
  background: linear-gradient(120deg, #123729, #22543f);
  box-shadow: 0 16px 36px #153d3017;
}
.brand-discovery .brand-select,
.brand-discovery .catalog-count { color: #edf4e7; }
.brand-discovery .catalog-tools { margin-top: 0; }
.brands-heading{margin:0 0 8px;color:#fff;font:500 clamp(25px,3vw,38px)/1.15 Georgia,serif}
.brands-subtitle{margin:0 0 22px;color:#dcebd8;font:400 14px/1.5 system-ui,sans-serif}
.footer-main .social-instagram{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #c9d7c3;border-radius:14px;color:#153d30;background:#f4f8ef;transition:background .2s,color .2s}
.social-instagram svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.footer-main .social-instagram:hover{background:#153d30;color:#fff}
.social-instagram:focus-visible{outline:3px solid #b16d25;outline-offset:3px}
.brand-discovery .brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: 12px;
  padding: 0;
}
.brand-discovery .brand-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 17px;
  background: #fff;
  color: #193c2d;
  font: 750 13px/1.3 system-ui, sans-serif;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.brand-discovery .brand-chip img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.brand-discovery .brand-wordmark { display: block; width: 100%; padding: 6px; font-size: clamp(19px, 2.2vw, 29px); font-weight: 850; line-height: 1.1; overflow-wrap: anywhere; }
.brand-discovery .brand-chip.active { border-color: #e2b76f; box-shadow: 0 0 0 3px #e2b76f33; }
.brand-discovery .brand-monogram { background: #edf2e9; color: #244a35; }

/* FAB de ajuda: inserir o HTML e carregar agruni-fab.js uma única vez. */
.agruni-fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 80; }
.agruni-fab__trigger {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border: 1px solid #ffffff80; border-radius: 21px;
  background: #153d30; color: #fff;
  box-shadow: 0 9px 28px #153d3040;
  cursor: pointer;
  animation: agruni-help-pulse 2.8s ease-in-out 3;
}
.agruni-fab__trigger svg { width: 27px; height: 27px; }
.agruni-fab__panel {
  position: absolute; right: 0; bottom: 76px;
  width: min(300px, calc(100vw - 36px)); padding: 18px;
  border: 1px solid #fff9; border-radius: 22px;
  background: #f8fbf5f5; /* Base opaca para navegadores sem blur. */
  color: #173e30; box-shadow: 0 16px 48px #112b3026;
}
.agruni-fab__panel[hidden] { display: none; }
.agruni-fab__panel h2 { margin: 0 0 12px; font: 750 18px system-ui, sans-serif; }
.agruni-fab__panel a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px; border-radius: 12px; color: #173e30; text-decoration: none; font: 650 14px system-ui, sans-serif; }
.agruni-fab__panel a:hover { background: #153d300d; }
.agruni-fab__panel a span[aria-hidden] { width: 22px; text-align: center; }
@supports (backdrop-filter: blur(18px)) {
  .agruni-fab__panel { background: #f8fbf5dd; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}
@media (hover: hover) and (pointer: fine) {
  #productGrid .product-card:hover { transform: translateY(-4px); border-color: #cbd7c5; box-shadow: 0 14px 32px #153d3014; }
  .brand-discovery .brand-chip:hover { transform: translateY(-3px); border-color: #e2b76f; }
}
:where(.agruni-fab button, .agruni-fab a, .brand-chip):focus-visible { outline: 3px solid #b16d25; outline-offset: 4px; }
@keyframes agruni-help-pulse { 0%, 100% { box-shadow: 0 9px 28px #153d3040, 0 0 0 0 #276e4f24; } 50% { box-shadow: 0 9px 28px #153d3040, 0 0 0 8px #276e4f00; } }
@media (max-width: 1050px) { #productGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: none) { #productGrid .product-card:hover { transform: none; box-shadow: 0 4px 14px #153d3008; } }
@media (max-width: 760px) { #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .brand-discovery .brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  #productGrid .product-card { border-radius: 17px; }
  #productGrid .product-card-body { padding: 12px; gap: 8px; }
  #productGrid .product-card h3 { font-size: 14px; }
  #productGrid .product-category { font-size: 10px; }
  #productGrid .product-unit { font-size: 12px; }
  #productGrid .product-card button { font-size: 12px; }
  .brand-discovery { padding: 16px; border-radius: 19px; }
  .brand-discovery .brand-chip { min-height: 0; }
  .agruni-fab__trigger { width: 56px; height: 56px; border-radius: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  #productGrid .product-card, .brand-chip { transition: none; }
  #productGrid .product-card:hover, .brand-discovery .brand-chip:hover { transform: none; }
  .agruni-fab__trigger { animation: none; }
}

/* Quantidade por produto, com nomes completos e alvos de toque de 44px. */
#productGrid .product-quantity{display:grid;grid-template-columns:44px minmax(44px,1fr) 44px;gap:4px;align-items:center;width:100%;margin:0}
#productGrid .product-quantity button{width:44px;height:44px;min-height:44px;padding:0;border:1px solid #c7d3c0;background:#f5f7ee;color:#173e30;font:700 21px/1 system-ui;border-radius:10px;box-shadow:none}
#productGrid .product-quantity input{width:100%;min-width:0;height:44px;margin:0;padding:6px 2px;border:1px solid #c7d3c0;border-radius:10px;background:#fff;color:#173e30;text-align:center;font:600 16px/1.2 system-ui;appearance:textfield;-moz-appearance:textfield}
#productGrid .product-quantity input::-webkit-inner-spin-button,#productGrid .product-quantity input::-webkit-outer-spin-button{appearance:none;margin:0}
#productGrid .product-quantity button:disabled,#productGrid .product-quantity input:disabled{background:#eceee7;color:#5b6455;cursor:not-allowed;opacity:1}
#productGrid .product-quantity :focus-visible{outline:3px solid #b16d25;outline-offset:2px}
@media(max-width:480px){#productGrid{gap:9px}#productGrid .product-card-body{padding:10px;gap:7px}#productGrid .product-category{font-size:10px}#productGrid .product-card h3{font-size:13px;line-height:1.3}#productGrid .product-unit{font-size:12px}#productGrid .product-price{font-size:22px}#productGrid .product-card> .product-card-body>button{min-height:44px;padding:10px 5px}}
@media(max-width:380px){#productGrid .product-card-body{padding:8px}}
@media(max-width:359px){#productGrid{grid-template-columns:minmax(0,1fr)}#productGrid .product-media{height:220px;aspect-ratio:auto}}

/* Contraste dos controles: prevalece sobre o estilo genérico de compra. */
#productGrid .product-card .product-quantity button:not(:disabled){background:#f5f7ee;color:#173e30;box-shadow:none}