/* ============================================================
   ShoppingMz — correcções para telemóvel
   Carregado em ÚLTIMO lugar em todas as páginas da loja (depois de
   main.css e dos <style> de cada página), para ganhar às regras delas.
   ============================================================ */

/* Sem zoom por duplo toque e sem o atraso de ~300 ms que o acompanha. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
/* Nada pode alargar a página para os lados (obrigava o telemóvel a fazer
   zoom out e deixava margens desiguais). "clip" não cria uma área de scroll
   nova, por isso o cabeçalho fixo (sticky) continua a funcionar. */
html, body { max-width: 100%; overflow-x: clip; }
a, button, input, select, textarea, label, summary, [onclick], [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(23, 71, 207, .12);
}

/* ------------------------------------------------------------
   "Tenho de tocar duas vezes"
   No iPhone (e em vários Android) o 1º toque num elemento cujo :hover
   mostra/mexe conteúdo é gasto a aplicar o hover — o clique só acontece
   no 2º toque. Os cartões de produto tinham precisamente isso: os botões
   .product-actions só apareciam com :hover e o cartão subia 4 px.
   Em ecrãs de toque, tudo passa a estar sempre visível e parado.
   ------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  .product-card .product-actions { opacity: 1 !important; transform: none !important; }
  .product-card:hover,
  .ticket-card:hover,
  .ad-banner-card:hover,
  .ship-banner-cta:hover,
  .btn-add-cart:hover,
  .btn-add-to-cart:hover,
  .btn-buy-now:hover,
  .checkout-btn:hover,
  .btn-next:hover,
  .btn-hero-primary:hover,
  .btn-comprar:hover,
  .btn-buy:hover,
  .tqv-btn:hover,
  .scroll-top:hover { transform: none !important; }
  .product-card:hover .product-img-wrap img,
  .ticket-card:hover .ticket-img-wrap img,
  .ad-footer-card:hover .ad-footer-bg,
  .gallery-main:hover img { transform: none !important; }
  .cat-nav-item:hover .cat-nav-dropdown { display: none; }
}

/* ------------------------------------------------------------
   Botões "Esgotado" — cinzentos em todas as páginas (na página de
   categorias o botão desactivado ficava azul como um botão activo).
   ------------------------------------------------------------ */
.btn-add-cart:disabled,
.btn-add-to-cart:disabled,
.btn-buy-now:disabled,
.btn-add-cart:disabled:hover,
.btn-add-to-cart:disabled:hover,
.btn-buy-now:disabled:hover {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1;
}

/* ------------------------------------------------------------
   Layout no telemóvel
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* O iPhone faz zoom sozinho ao tocar num campo com letra < 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
}

@media (max-width: 640px) {
  /* Margens laterais iguais em todas as páginas. */
  .container { padding-left: 14px !important; padding-right: 14px !important; }

  /* Preço: o valor não se parte a meio ("13 900 / MZN"); o preço antigo
     passa para a linha de baixo quando não cabe. */
  .product-price-row { flex-wrap: wrap; row-gap: 0; column-gap: 6px; align-items: baseline; }
  .price-current, .price-cur { white-space: nowrap; }
  .price-original, .price-orig { white-space: nowrap; font-size: .75rem; }

  /* Campos em coluna: o último campo de cada linha perdia a margem e ficava
     colado ao seguinte (ex.: Telefone / Endereço no checkout). */
  .form-row { row-gap: 0 !important; }
  .form-row > .form-group:last-child { margin-bottom: 14px; }

  /* Alvos de toque com pelo menos 40 px. */
  .product-action-btn { width: 38px !important; height: 38px !important; }
  .page-btn { min-width: 40px; min-height: 40px; }

  /* Tabelas largas deslizam dentro do cartão em vez de alargar a página. */
  .table-responsive, .cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Página Sobre: colunas empilhadas. */
  .about-intro { grid-template-columns: 1fr !important; gap: 20px !important; }
  .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  /* Modais nunca mais largos que o ecrã. */
  .modal, .modal-content, .promo-modal, .tqv-modal { max-width: calc(100vw - 24px); }
}

@media (max-width: 380px) {
  .about-values { grid-template-columns: 1fr !important; }
}