/* ==========================================================================
   Ícone de carrinho no menu principal
   Spec: .specs/features/menu-carrinho-checkout/spec.md (MENU-01, MENU-02, MENU-04)

   O item é injetado no menu do Elementor (filtro wp_nav_menu_items), então
   herda o espaçamento de .menu-item. O ícone é o PNG da marca (#077BCD),
   carregado como background-image: tem cor própria e não acompanha a cor do
   texto do menu — se o header mudar para fundo escuro, o ícone continua azul.

   O badge NUNCA é impresso pelo PHP — o header do site passa pelo cache do
   LiteSpeed e um número no HTML seria servido para o visitante seguinte. Ele
   nasce vazio e [hidden]; quem o preenche é o cart-badge.js.
   ========================================================================== */

.tt-cart-menu-item .tt-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

/* PNG 64x64 exibido a 22px — 3x, nítido em retina.
   Via background-image, não <img>: ver o comentário em tt_cart_menu_item(). */
.tt-cart-icon {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("../images/icon-cart.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

.tt-cart-link:hover .tt-cart-icon {
  transform: translateY(-1px);
  opacity: 0.85;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.tt-cart-badge {
  position: absolute;
  top: 1px;
  left: 32px;
  z-index: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  /* Vermelho, não o azul do ícone: o badge fica em cima dele e precisa contrastar,
     não combinar. Tom da família do #e53935 do whatsapp-popup.css, escurecido
     para o branco atingir 4.5:1. */
  background: #d32f2f;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  border-radius: 999px;
  /* Anel na cor do fundo do header: separa o badge do desenho do ícone. */
  box-shadow:
    0 0 0 2px #ffffff,
    0 1px 3px rgba(0, 0, 0, 0.22);
  animation: tt-cart-badge-pop 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* [hidden] precisa vencer o display:inline-flex acima. */
.tt-cart-badge[hidden] {
  display: none;
}

@keyframes tt-cart-badge-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Rótulo textual ──────────────────────────────────────────────────────── */
/* No desktop o ícone basta. Na gaveta do mobile ele viraria um item mudo no meio
   de uma lista de textos, então o rótulo aparece. */

.tt-cart-text {
  display: none;
}

.elementor-nav-menu--dropdown .tt-cart-menu-item .tt-cart-link,
.elementor-nav-menu__container.elementor-nav-menu--dropdown .tt-cart-link {
  gap: 10px;
}

.elementor-nav-menu--dropdown .tt-cart-text {
  display: inline;
}

/* Na gaveta o item ocupa a linha inteira: o badge sai de cima do ícone e vira
   contador ao lado do texto, que é onde o olho já está. */
.elementor-nav-menu--dropdown .tt-cart-badge {
  position: static;
  margin-left: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ── Acessibilidade ──────────────────────────────────────────────────────── */

.tt-cart-link:focus-visible {
  outline: 2px solid #077bcd;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tt-cart-icon,
  .tt-cart-badge {
    transition: none;
    animation: none;
  }
}