/* Botões */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: var(--ag-pill);
  font-weight: 600; font-size: 17px; text-decoration: none; border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.ag-btn:active { transform: scale(.98); }
.ag-btn svg { transition: transform .2s ease; }
.ag-btn:hover svg { transform: translateX(3px); }
.ag-btn-whatsapp:hover svg { transform: none; }
.ag-btn-primary { background: var(--ag-indigo); color: #fff; }
.ag-btn-primary:hover { background: var(--ag-indigo-dark); color: #fff; }
.ag-btn-outline { background: var(--ag-surface); color: var(--ag-indigo); border-color: var(--ag-line-strong); }
.ag-btn-outline:hover { border-color: var(--ag-indigo); }
.ag-btn-whatsapp { background: var(--ag-yellow); color: var(--ag-ink); font-size: 16px; padding: 0 20px; }
.ag-btn-whatsapp:hover { background: #f2b70f; color: var(--ag-ink); }
.ag-btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.ag-btn-dark { background: var(--ag-ink); color: #fff; align-self: flex-start; }
.ag-btn-dark:hover { background: #000; color: #fff; }

/* Quadro de foto: fundo colorido; embalagem em fundo branco aparece inteira e se mistura ao fundo */
.ag-photo { display: block; overflow: hidden; background: var(--ag-tint, #ecedf8); }
.ag-photo img { width: 100%; height: 100%; object-fit: cover; }
.ag-photo.is-packshot img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.ag-tint-1 { --ag-tint: #ecedf8; }
.ag-tint-2 { --ag-tint: #fdf1d3; }
.ag-tint-3 { --ag-tint: #f3ebf7; }
.ag-tint-4 { --ag-tint: #e7f1f4; }

/* Seções */
.ag-section { display: flex; flex-direction: column; gap: 32px; padding-top: 96px; }
.ag-section-last { padding-bottom: 96px; }
.ag-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ag-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 16px; text-decoration: none; }
.ag-link svg { transition: transform .2s ease; }
.ag-link:hover svg { transform: translateX(3px); }
@media (max-width: 760px) { .ag-section { padding-top: 64px; gap: 24px; } .ag-section-last { padding-bottom: 64px; } }

/* Como comprar */
.ag-steps { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px; border-radius: 28px; background: var(--ag-indigo); color: #fff; }
.ag-steps li { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: 18px; }
.ag-steps span { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ag-yellow); color: var(--ag-ink); font-family: var(--ag-font-display); font-weight: 700; font-size: 20px; }
.ag-steps strong { display: block; font-size: 18px; line-height: 1.3; }
.ag-steps p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ag-on-indigo); }

/* Lojas: foto do time à esquerda, as duas lojas empilhadas à direita, cada uma com o mapa ao lado */
.ag-stores { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: stretch; }
.ag-stores-team { position: relative; margin: 0; min-height: 100%; }
.ag-stores-team img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center 25%; border-radius: 28px; }
.ag-stores-team figcaption { position: absolute; left: 20px; bottom: 20px; padding: 10px 18px; border-radius: var(--ag-pill); background: var(--ag-yellow); color: var(--ag-ink); font-family: var(--ag-font-display); font-size: 20px; font-weight: 700; }
.ag-stores-list { display: flex; flex-direction: column; gap: 28px; }
.ag-store { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: stretch; }
.ag-store-minimap { display: block; width: 100%; height: 100%; min-height: 250px; border: 0; border-radius: 24px; background: var(--ag-surface); }
.ag-store-body { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ag-store h3 { font-family: var(--ag-font-display); font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.ag-store-address { font-size: 18px; line-height: 1.45; color: var(--ag-ink); }
.ag-store-hours { margin: 4px 0 0; padding: 10px 0; border-top: 1px solid var(--ag-line-strong); border-bottom: 1px solid var(--ag-line-strong); display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.ag-store-hours div { display: flex; justify-content: space-between; gap: 16px; }
.ag-store-hours dt { color: var(--ag-muted); }
.ag-store-hours dd { margin: 0; font-weight: 600; color: var(--ag-ink); text-align: right; }
.ag-store-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Sem a foto do time (página Sobre): as duas lojas lado a lado */
.ag-stores-two { grid-template-columns: minmax(0, 1fr); }
.ag-stores-two .ag-stores-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ag-stores-two .ag-store { grid-template-columns: minmax(0, 1fr); }
.ag-stores-two .ag-store-minimap { height: 240px; min-height: 0; }
@media (max-width: 1020px) { .ag-stores { grid-template-columns: minmax(0, 1fr); } .ag-stores-team img { height: auto; min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 640px) {
  .ag-stores-team img { aspect-ratio: 4 / 3; }
  .ag-store, .ag-stores-two .ag-stores-list { grid-template-columns: minmax(0, 1fr); }
  .ag-store-minimap, .ag-stores-two .ag-store-minimap { height: 220px; min-height: 0; }
}
.ag-delivery-wrap { padding-block: 24px 72px; }
.ag-delivery { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 32px 36px; border-radius: 28px; background: var(--ag-yellow); }
.ag-delivery .ag-btn { align-self: center; }
.ag-delivery > div { flex: 1 1 320px; }
.ag-delivery h3 { font-family: var(--ag-font-display); font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ag-ink); margin-bottom: 8px; }
.ag-delivery p { font-size: 16px; line-height: 1.5; color: var(--ag-ink); max-width: 640px; }
@media (max-width: 760px) { .ag-delivery { border-radius: 22px; padding: 20px; } }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Busca */
.ag-search { flex: 0 1 380px; display: flex; align-items: center; height: 52px; border-radius: var(--ag-pill); background: var(--ag-surface); box-shadow: inset 0 0 0 1px var(--ag-line-strong); transition: box-shadow .15s; }
.ag-search:focus-within { box-shadow: inset 0 0 0 2px var(--ag-indigo); }
.ag-search input[type="search"] { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 22px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ag-ink); outline: none; }
.ag-search input::placeholder { color: var(--ag-muted); }
.ag-search button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 4px; border: 0; border-radius: 50%; background: var(--ag-indigo); color: #fff; cursor: pointer; }
.ag-search button:hover { background: var(--ag-indigo-dark); }
.ag-header-search { position: relative; }
.ag-search-drop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 22px; background: var(--ag-surface); box-shadow: 0 0 0 1px var(--ag-line), 0 18px 40px rgba(22, 22, 46, .16); }
.ag-search-drop[hidden] { display: none; }
.ag-search-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-decoration: none; color: var(--ag-ink); }
.ag-search-item:hover, .ag-search-item:focus-visible { background: var(--ag-ground); outline: none; }
.ag-search-photo { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #ecedf8; }
.ag-search-photo img { width: 100%; height: 100%; object-fit: cover; }
.ag-search-text { display: flex; flex-direction: column; min-width: 0; }
.ag-search-text strong { font-size: 16px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-search-text small { font-size: 14px; color: var(--ag-muted); }
.ag-search-price { font-size: 15px; font-weight: 700; color: var(--ag-indigo); }
.ag-search-all { display: block; margin-top: 4px; padding: 12px; border-top: 1px solid var(--ag-line); text-align: center; font-size: 16px; font-weight: 600; color: var(--ag-indigo); text-decoration: none; }
.ag-search-all:hover, .ag-search-all:focus-visible { text-decoration: underline; outline: none; }
.ag-search-none { padding: 14px 12px; font-size: 16px; line-height: 1.45; color: var(--ag-ink); }

/* Faixa do topo */
.ag-topbar { background: var(--ag-indigo); color: #fff; font-size: 14px; }
.ag-topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 24px; min-height: 40px; padding-block: 6px; }
.ag-topbar nav { display: flex; gap: 22px; }
.ag-topbar a { color: #fff; font-weight: 600; text-decoration: none; padding-block: 4px; }
.ag-topbar a:hover { color: var(--ag-yellow); }
@media (max-width: 760px) { .ag-topbar span { display: none; } .ag-topbar-inner { justify-content: center; } }

/* Cabeçalho */
.ag-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ag-line); }
.ag-header { transition: transform .3s ease; }
.ag-header-hidden .ag-header { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .ag-header { transition: none; } }
.ag-header-inner { display: flex; align-items: center; gap: 12px 28px; padding-block: 12px; }
.ag-logo { display: flex; flex: none; }
.ag-logo img { height: 44px; width: auto; }
.ag-header-search { flex: 1 1 auto; max-width: 520px; margin-inline: auto; height: 48px; }
.ag-header-search button { width: 40px; height: 40px; }
.ag-header-actions { display: flex; align-items: center; gap: 6px 18px; flex: none; }
.ag-my-list-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--ag-pill); font-weight: 600; font-size: 16px; text-decoration: none; }
.ag-my-list-link:hover { background: rgba(49, 49, 128, .08); }
.ag-my-list-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ag-pill); background: var(--ag-yellow); color: var(--ag-ink); font-size: 13px; font-weight: 700; }
.ag-my-list-count[hidden] { display: none; }
.ag-nav { border-top: 1px solid var(--ag-line); transition: margin-top .25s ease, opacity .2s ease; }
.ag-nav-inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: auto; padding-block: 4px; }
.ag-nav-inner::-webkit-scrollbar { display: none; }
/* Quando o menu não cabe, a borda de onde ainda há itens some num degradê. */
.ag-nav-inner.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.ag-nav-inner.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.ag-nav-inner.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.ag-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--ag-pill); color: var(--ag-ink); font-size: 16px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s; }
.ag-nav a:first-child { margin-left: -14px; }
.ag-nav a:hover { background: rgba(49, 49, 128, .08); color: var(--ag-indigo); }
.ag-nav a[aria-current] { color: var(--ag-indigo); font-weight: 700; }
@media (max-width: 760px) {
  .ag-header-inner { flex-wrap: wrap; padding-block: 10px 8px; gap: 8px 12px; }
  .ag-logo img { height: 36px; }
  .ag-header-actions { margin-left: auto; gap: 4px; }
  .ag-my-list-link span:first-child { display: none; }
  .ag-my-list-link::before { content: "Lista"; }
  .ag-header-search { order: 3; flex-basis: 100%; max-width: none; height: 46px; }
  .ag-btn-whatsapp { min-height: 44px; padding: 0 16px; }
  .ag-nav a { font-size: 15px; padding: 0 12px; }
  .ag-nav a:first-child { margin-left: -12px; }
}

/* Selo de novidade */
.ag-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--ag-pill); background: var(--ag-yellow); color: var(--ag-ink); font-size: 15px; font-weight: 700; }

/* Perguntas frequentes (rodapé de todas as páginas) */
.ag-faq { padding-block: 24px 96px; }
.ag-faq h2 { margin-bottom: 28px; }
.ag-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; }
.ag-faq-grid > div { display: flex; flex-direction: column; gap: 12px; }
.ag-faq details { border-radius: 20px; background: var(--ag-surface); }
.ag-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 22px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ag-ink); border-radius: 20px; }
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary:hover { color: var(--ag-indigo); }
.ag-faq-toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ag-ground); color: var(--ag-indigo); transition: transform .25s ease, background-color .2s; }
.ag-faq:not(.ag-js) details[open] .ag-faq-toggle, .ag-faq.ag-js details.is-open .ag-faq-toggle { transform: rotate(180deg); background: var(--ag-yellow); color: var(--ag-ink); }
.ag-faq-answer { padding: 0 22px 20px; }
.ag-faq-answer p { font-size: 17px; line-height: 1.6; color: var(--ag-text); max-width: 60ch; }
@media (max-width: 860px) { .ag-faq-grid { grid-template-columns: minmax(0, 1fr); } .ag-faq { padding-bottom: 64px; } .ag-faq summary { font-size: 17px; padding-inline: 18px; } .ag-faq-answer { padding-inline: 18px; } }

/* Rodapé */
.ag-footer { background: var(--ag-ink); color: #c9c9e0; font-size: 16px; line-height: 1.6; }
.ag-footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1.4fr; gap: 40px 48px; padding-block: 64px 48px; }
.ag-footer h2 { font-family: var(--ag-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin-bottom: 14px; }
.ag-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ag-footer-logo { display: block; }
.ag-footer-logo img { height: 56px; width: auto; filter: brightness(0) invert(1); }
.ag-footer-brand p { max-width: 300px; }
.ag-footer-social { display: flex; gap: 10px; }
.ag-footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .15s, color .15s; }
.ag-footer-social a:hover { background: var(--ag-yellow); color: var(--ag-ink); }
.ag-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ag-footer li a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: #fff; text-decoration: none; }
.ag-footer li a:hover { color: var(--ag-yellow); }
.ag-footer-stores li { margin-bottom: 14px; }
.ag-footer-stores strong { display: block; color: #fff; }
.ag-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 22px; font-size: 14px; color: #a9a9cf; }
.ag-footer-bottom a { margin-left: auto; color: #c9c9e0; text-decoration: underline; text-underline-offset: 3px; }
.ag-footer-bottom a:hover { color: #fff; }
@media (max-width: 960px) { .ag-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; padding-block: 48px 36px; } .ag-footer-brand, .ag-footer-stores { grid-column: 1 / -1; } }