/* ===================================================================
   Correcoes de responsividade (celular).

   Levantadas com qa/responsivo.py e qa/medir_cards.py — scripts que abrem a
   loja com emulacao real de aparelho e medem estouro e sobreposicao. Rode de
   novo depois de mexer em header ou card.
   =================================================================== */

/* ---- 1. preco do card x icone da plataforma ----
   Em celular estreito (~320px) o rodape do card tem 125px: o preco (80px de
   texto) invadia o icone do PlayStation/Xbox/Steam em ate 19px — 239 de 255
   cards na home do iPhone SE. A partir de ~390px sobra folga e nada muda. */
@media (max-width: 399px) {
  .uk-card__footer {
    gap: 0.35rem;
    padding: 0.65rem 0.6rem;
  }

  .uk-card__price { font-size: 15px; }

  .uk-platform-mark {
    width: 1.35rem;
    height: 1.35rem;
  }

  .uk-platform-mark svg,
  .uk-platform-mark .uk-ico {
    width: 1.05rem;
    height: 1.05rem;
  }
}

/* rede de seguranca em qualquer tela: preco longo demais corta com
   reticencias em vez de passar por cima do icone */
.uk-card__price {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- 2. header: nome da loja e pilulas em telas bem estreitas ----
   Em 320px os quatro botoes da direita espremiam o nome ate "Unl...". A logo
   ja identifica a marca, entao abaixo de 360px o nome sai. */
@media (max-width: 359px) {
  .uk-header__brand-name { display: none; }
}

/* as tres pilulas nao cabiam em 320px — o Xbox ficava cortado na borda */
@media (max-width: 374px) {
  .uk-plat--row { gap: 0.3rem; }

  .uk-plat--row .uk-plat__item {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    gap: 0.3rem;
  }
}

/* ---- 3. pagina de produto ----
   Ela e `immersive` (sem padding do <main>) e desce o conteudo com pt-24 fixo,
   96px — menos que os 122px da header no celular, entao o "Voltar para a loja"
   ficava embaixo das pilulas. Aqui passa a seguir a mesma variavel do resto.
   CSS puro de proposito: o bundle Tailwind da plataforma esta congelado (ver o
   comentario do core.css no layout) e classe arbitraria nova nao seria gerada. */
@media (max-width: 1023.98px) {
  .uk-pdp-top { padding-top: calc(var(--uk-header-h) + 1rem); }
}