/* =========================================================
   Relevo suave (neumórfico leve) — G&A Embalagens /promo/
   Fundos claros com toque azul/amarelo da loja, sombras
   claras/escuras, cantos arredondados, estado "afundado" ao
   pressionar e o botão + do card que abre para − qtd +.
   Carregado depois do CSS inline (por isso alguns !important,
   que vencem os !important já existentes no index.php).
   ========================================================= */
:root {
  --nm-fundo: #E7EDF7;                     /* fundo claro com leve tom azul */
  --nm-sup: linear-gradient(145deg, #F8FAFE 0%, #EAF0F9 100%); /* cartão convexo */
  --nm-sup-cor: #F1F5FB;
  --nm-luz: rgba(255, 255, 255, .92);
  --nm-sombra: rgba(120, 140, 182, .45);
  --nm-sombra-forte: rgba(96, 118, 166, .50);
  --nm-alto: 8px 8px 18px var(--nm-sombra), -8px -8px 18px var(--nm-luz);
  --nm-alto-hover: 11px 11px 24px var(--nm-sombra-forte), -9px -9px 20px var(--nm-luz);
  --nm-medio: 5px 5px 11px var(--nm-sombra), -5px -5px 11px var(--nm-luz);
  --nm-baixo: 3px 3px 7px var(--nm-sombra), -3px -3px 7px var(--nm-luz);
  --nm-afundado: inset 3px 3px 7px var(--nm-sombra), inset -3px -3px 7px var(--nm-luz);
  --nm-press: inset 3px 3px 8px rgba(0, 0, 0, .25), inset -2px -2px 6px rgba(255, 255, 255, .30);
  --nm-btn: 4px 4px 10px var(--nm-sombra), -4px -4px 10px var(--nm-luz), inset 0 1px 0 rgba(255, 255, 255, .35);
  --nm-btn-hover: 6px 6px 14px var(--nm-sombra-forte), -5px -5px 12px var(--nm-luz), inset 0 1px 0 rgba(255, 255, 255, .35);
  --nm-azul: #0037AC;
  --nm-amarelo: #FFEB3C;
  --nm-grad-azul: linear-gradient(180deg, #1A52C2 0%, #0037AC 52%, #002A85 100%);
  --nm-grad-amarelo: linear-gradient(180deg, #FFF59D 0%, #FFEB3C 48%, #F0C800 100%);
  /* brilho de marca nos fundos claros: amarelo num canto, azul no outro */
  --nm-fundo-marca:
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(255, 235, 60, .16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(0, 55, 172, .08), transparent 70%),
    var(--nm-fundo);
}

/* ---------- Fundos claros, com toque das cores da loja ---------- */
body { background: var(--nm-fundo) !important; }
#beneficios, .sec-cats, .sec-catalogo, #como-comprar, #localizacao {
  background: var(--nm-fundo-marca) !important;
}
.navbar-gea, .navbar-gea.sticky-top, #navGea.navbar-gea {
  background: rgba(231, 237, 247, .94) !important;
  box-shadow: 0 6px 16px var(--nm-sombra), inset 0 -2px 0 rgba(255, 235, 60, .75) !important;
}
/* traço amarelo sob os títulos das secções claras */
#beneficios .section-title::after,
#categorias .section-title::after,
#catalogo .section-title::after,
#como-comprar .section-title::after,
#localizacao .section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: .3rem;
  border-radius: 99px;
  background: var(--nm-grad-amarelo);
  box-shadow: 0 2px 5px rgba(240, 200, 0, .45);
}
#beneficios .text-center .section-title::after,
#como-comprar .text-center .section-title::after,
#localizacao .text-center .section-title::after { margin-left: auto; margin-right: auto; }

/* ---------- Cartões em alto relevo ---------- */
.benefit-card,
.cat-card,
.map-card,
.step-card,
.sec-catalogo .prod-card,
.prod-card {
  background-image: var(--nm-sup) !important;
  background-color: var(--nm-sup-cor) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 1.25rem;
  box-shadow: var(--nm-alto) !important;
  transition: transform .2s, box-shadow .2s, outline-color .2s;
}
.benefit-card:hover,
.cat-card:hover,
.step-card:hover,
.sec-catalogo .prod-card:hover { box-shadow: var(--nm-alto-hover) !important; }
.cat-card:active,
.benefit-card:active { transform: translateY(0) !important; box-shadow: var(--nm-medio) !important; }
/* filete azul→amarelo no topo dos cartões de vantagens e passos */
.benefit-card, .step-card { position: relative; overflow: hidden; }
.benefit-card::before, .step-card::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 0;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, #0037AC, #FFEB3C);
  opacity: .85;
}
.map-note { background: var(--nm-fundo); box-shadow: var(--nm-afundado); }

/* ---------- Catálogo (duas linhas em carrossel) ---------- */
/* espaço vertical para a sombra não ser cortada (a largura dos cards não muda) */
#catalogo .prod-grid.prod-grid-row { padding: 6px 0 12px !important; }
#catalogo .prod-grid .prod-card {
  border-radius: 14px;
  box-shadow: 4px 4px 9px var(--nm-sombra), -4px -4px 9px var(--nm-luz) !important;
}
#catalogo .prod-grid .prod-card:hover { box-shadow: 6px 6px 13px var(--nm-sombra-forte), -5px -5px 11px var(--nm-luz) !important; }
#catalogo .prod-grid .prod-card-ph { box-shadow: none !important; background: transparent !important; border-color: transparent !important; }
/* foto num "visor" com fundo branco */
#catalogo .prod-grid .prod-card .prod-card-img,
.prod-grid .prod-card .prod-card-img {
  border-bottom: 0 !important;
  box-shadow: inset 0 -6px 10px -8px var(--nm-sombra);
}
/* preço na cor da loja */
#catalogo .prod-grid .prod-preco,
.prod-card .prod-preco { color: var(--nm-azul) !important; }
/* card com item no carrinho: contorno amarelo */
.prod-card.is-in-cart {
  outline: 2px solid rgba(240, 200, 0, .95);
  outline-offset: -2px;
}

/* ---------- Botão + que abre para − qtd + ---------- */
.prod-actions .prod-step,
#catalogo .prod-grid .prod-actions .prod-step { margin-left: auto; }
.prod-step {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  transition: background-color .2s, box-shadow .2s, padding .2s;
}
.prod-step button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, max-width .22s, opacity .18s, filter .2s;
}
.prod-step button i { pointer-events: none; }
/* + amarelo com ícone azul (fechado) */
.prod-step-plus {
  background: var(--nm-grad-amarelo);
  color: var(--nm-azul);
  font-weight: 800;
  box-shadow: 3px 3px 7px var(--nm-sombra), -3px -3px 7px var(--nm-luz), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.prod-step-plus i { font-size: 1rem; -webkit-text-stroke: .6px currentColor; }
.prod-step-plus:hover { filter: brightness(1.04); }
/* − e quantidade escondidos enquanto fechado */
.prod-step-min,
.prod-step-qtd {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}
.prod-step-qtd {
  min-width: 0;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
  transition: max-width .22s, opacity .18s, min-width .22s;
}
/* aberto: pílula azul − qtd + */
.prod-step.is-open {
  background: var(--nm-grad-azul);
  padding: 0 2px;
  box-shadow: var(--nm-btn);
}
.prod-step.is-open .prod-step-min,
.prod-step.is-open .prod-step-qtd {
  max-width: 44px;
  opacity: 1;
  visibility: visible;
}
.prod-step.is-open .prod-step-qtd { min-width: 1.7rem; }
.prod-step.is-open .prod-step-min {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .85rem;
}
.prod-step.is-open .prod-step-min:hover { background: rgba(255, 255, 255, .26); }
.prod-step.is-open .prod-step-plus {
  width: 26px;
  height: 26px;
  box-shadow: 0 1px 3px rgba(0, 20, 80, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.prod-step button:active { transform: scale(.9); box-shadow: var(--nm-press); }
.prod-step button:focus-visible { outline: 3px solid var(--nm-amarelo); outline-offset: 2px; }
.prod-step-plus:focus-visible { outline-color: var(--nm-azul); }

/* ---------- Ícones e números com relevo ---------- */
.ico-sq { box-shadow: var(--nm-medio) !important; }
.step-num { box-shadow: 7px 7px 15px var(--nm-sombra-forte), -7px -7px 15px var(--nm-luz) !important; }
.sec-cats .cat-link { box-shadow: var(--nm-baixo); }

/* ---------- Botões coloridos: relevo + afundado ao pressionar ---------- */
.btn-amarelo,
.btn-azul,
.btn-whatsapp,
.prod-add,
.btn-carregar,
.cat-page-btn.is-active,
.navbar-gea .btn-nav-cta {
  box-shadow: var(--nm-btn) !important;
  transition: transform .15s, box-shadow .15s, filter .2s;
}
.btn-amarelo:hover, .btn-amarelo:focus-visible,
.btn-azul:hover, .btn-azul:focus-visible,
.btn-whatsapp:hover, .btn-whatsapp:focus-visible,
.prod-add:hover, .btn-carregar:hover,
.navbar-gea .btn-nav-cta:hover {
  box-shadow: var(--nm-btn-hover) !important;
}
.btn-amarelo:active,
.btn-azul:active,
.btn-whatsapp:active,
.btn-outline-white:active,
.btn-carregar:active,
.prod-add:active:not(:disabled),
.navbar-gea .btn-nav-cta:active {
  transform: translateY(1px) !important;
  box-shadow: var(--nm-press) !important;
}
.prod-add:disabled, .prod-add:disabled:hover { box-shadow: var(--nm-afundado) !important; }

/* Em fundo azul ou amarelo (hero, faixa CTA, rodapé): só sombra escura */
.hero .btn, .cta-band .btn, .site-footer .btn {
  box-shadow: 0 6px 14px rgba(0, 20, 80, .30), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.hero .btn:active, .cta-band .btn:active, .site-footer .btn:active {
  box-shadow: var(--nm-press) !important;
}

/* ---------- Botões claros (navbar, chips, paginação, Google) ---------- */
.btn-nav-loja, .btn-nav-icon, .btn-nav-account,
.cat-chip:not(.active),
.cat-page-btn:not(.is-active),
.cat-chips-btn,
.btn-google-login {
  background-image: var(--nm-sup) !important;
  background-color: var(--nm-sup-cor) !important;
  border-color: rgba(255, 255, 255, .75) !important;
  box-shadow: var(--nm-baixo) !important;
  transition: box-shadow .15s, transform .15s, color .2s;
}
.btn-nav-loja:hover, .btn-nav-loja:focus-visible,
.cat-chip:not(.active):hover,
.cat-page-btn:not(.is-active):hover,
.btn-google-login:hover {
  box-shadow: var(--nm-medio) !important;
  color: var(--nm-azul);
}
.btn-nav-loja:active,
.cat-chip:active,
.cat-page-btn:active,
.cat-chips-btn:active,
.btn-google-login:active {
  transform: translateY(1px);
  box-shadow: var(--nm-afundado) !important;
}
/* setas do carrossel: azul com relevo */
.prod-carousel-btn { box-shadow: var(--nm-btn) !important; }
.prod-carousel-btn:active { transform: translateY(-50%) scale(.94) !important; box-shadow: var(--nm-press) !important; }
/* Chip ativo = afundado, com sublinhado amarelo */
.cat-chip.active {
  box-shadow: inset 3px 3px 7px rgba(0, 20, 80, .45), inset -2px -2px 6px rgba(255, 255, 255, .25), inset 0 -3px 0 var(--nm-amarelo) !important;
}
/* barra de progresso do carrossel em azul→amarelo */
.prod-carousel-progress { background: var(--nm-fundo) !important; box-shadow: var(--nm-afundado); }
.prod-carousel-progress > span { background-image: linear-gradient(90deg, #0037AC, #1A52C2 60%, #FFEB3C) !important; }

/* ---------- Campos afundados ---------- */
.cat-search .form-control,
#catalogo .cat-search .form-control,
.cat-por-wrap select,
#modalLoginLanding .form-control {
  background: var(--nm-fundo) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--nm-afundado) !important;
}
.cat-search .form-control:focus,
.cat-por-wrap select:focus,
#modalLoginLanding .form-control:focus {
  background: #F2F6FC !important;
  border-color: rgba(0, 55, 172, .45) !important;
  box-shadow: var(--nm-afundado), 0 0 0 .2rem rgba(255, 235, 60, .45) !important;
}
.prod-qty {
  background-image: none !important;
  background-color: var(--nm-fundo) !important;
  border-color: transparent !important;
  box-shadow: var(--nm-afundado) !important;
}
.prod-qty input { background: transparent !important; }
.prod-qty button:active { box-shadow: var(--nm-press) !important; }

/* ---------- Carrinho, menus e modais ---------- */
.nav-account-menu { box-shadow: var(--nm-alto) !important; }
.cart-row img, .offcanvas-carrinho .cart-row .cart-row-img { box-shadow: var(--nm-afundado); }
#modalLoginLanding .modal-content,
#modalProdutoLanding .modal-content,
#modalContaCliente .modal-content,
.rm-modal { box-shadow: 0 22px 50px rgba(0, 20, 80, .30) !important; }
.btn-nav-loja .badge-carrinho { box-shadow: 0 2px 5px rgba(0, 20, 80, .35); }

/* Botão flutuante do WhatsApp */
.wa-float {
  box-shadow: 6px 6px 16px rgba(20, 110, 60, .40), -4px -4px 12px var(--nm-luz),
              inset 0 2px 0 rgba(255, 255, 255, .25) !important;
}
.wa-float:active { transform: scale(.96); box-shadow: var(--nm-press) !important; }

/* ---------- Celular ---------- */
@media (max-width: 575.98px) {
  :root {
    --nm-alto: 5px 5px 12px var(--nm-sombra), -5px -5px 12px var(--nm-luz);
    --nm-alto-hover: 6px 6px 14px var(--nm-sombra-forte), -6px -6px 14px var(--nm-luz);
    --nm-medio: 4px 4px 9px var(--nm-sombra), -4px -4px 9px var(--nm-luz);
    --nm-baixo: 2px 2px 6px var(--nm-sombra), -2px -2px 6px var(--nm-luz);
  }
  /* alvo de toque um pouco maior */
  .prod-step, .prod-step button { height: 32px; }
  .prod-step button { width: 32px; }
  .prod-step.is-open .prod-step-min,
  .prod-step.is-open .prod-step-plus { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-step, .prod-step button, .prod-step-qtd { transition: none !important; }
  .btn-amarelo:active, .btn-azul:active, .btn-whatsapp:active, .btn-carregar:active,
  .prod-add:active, .cat-chip:active, .btn-nav-loja:active, .wa-float:active,
  .prod-step button:active { transform: none !important; }
}