/* Tecas — ajustes de 27/10/2026 (noite), pedidos do Nuno:
   1) «no pc as imagens do calçado estão muito grandes»: as fotos de calçado são horizontais (ex.: 800×533) e os cartões/miniaturas
      usavam object-fit:cover num quadrado → a sapatilha era ampliada ~1,5× e cortada nas pontas. No PC (≥ 900px), fotos horizontais
      (classe .img-larga, posta por js/fotos_largas.js) passam a caber inteiras no mesmo quadrado das camisolas, com fundo neutro.
   2) visor de fotos no telemóvel: o ✕ ficava tapado pelo próprio site (cabeçalho z-index 30 por cima do visor z-index 20; na Vista rápida
      o ✕ estava dentro da caixa que rola e a caixa usava 94vh, maior do que o ecrã visível no iPhone). Agora os visores ficam por cima de
      tudo, o ✕ fica sempre visível (44–48px, fundo branco, respeita as zonas seguras) e o botão «voltar» do telemóvel fecha o visor.
   3) barra de categorias (Futebol · Calçado · F1 · Outros) também na página inicial: estilo base partilhado aqui (era só do catálogo). */

/* ---------- 1) fotos horizontais inteiras no PC ---------- */
@media(min-width:900px){
 .pv-foto img.img-larga,.alb img.img-larga,.miniaturas img.img-larga,.qv-mins img.img-larga,.versoes img.img-larga,.fila-lista img.img-larga{object-fit:contain!important;background:#f2f2f2}
}

/* ---------- 2) visores (Vista rápida e fotos do artigo) ---------- */
.pv-modal{z-index:1000}
.lb{z-index:1001}
.lb .fechar{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));background:#fff!important;color:#1B365D;box-shadow:0 2px 10px #0008;font-size:1.9rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.lb .ant{left:calc(8px + env(safe-area-inset-left))}.lb .seg{right:calc(8px + env(safe-area-inset-right))}
.lb .cont{bottom:calc(14px + env(safe-area-inset-bottom))}
.pv-caixa>.pv-fechar{position:sticky;top:.5rem;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-.6rem -.6rem -44px auto;padding:0;background:#fff;color:#1B365D;box-shadow:0 2px 10px #1b365d55;font-size:1.15rem;z-index:6}
.pv-caixa>.pv-fechar:hover{background:var(--coral);color:#fff}
/* Vista rápida no telemóvel: a coluna da grelha não pode crescer com as filas de miniaturas/versões (a caixa ficava com ~1000px e o ✕ e a foto saíam do ecrã) */
.qv-grid>*{min-width:0}
@media(max-width:760px){
 .qv-grid{grid-template-columns:minmax(0,1fr)}
 .pv-modal{padding-top:env(safe-area-inset-top)}
 .pv-caixa{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top))}
 .pv-caixa>.pv-fechar{margin:-.3rem -.3rem -44px auto}
}

/* ---------- 3) barra de categorias (componente do catálogo; também na página inicial) ---------- */
.seps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--navy);padding:6px;border-radius:12px;margin:.3rem 0 .6rem}
.seps button,.seps>a{border:0;background:transparent;color:#fff;border-radius:9px;padding:.45rem .2rem;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}
.seps button .i,.seps>a .i{font-size:1.25rem}.seps button .t,.seps>a .t{font-size:.78rem;font-weight:700}.seps button .k,.seps>a .k{font-size:.66rem;opacity:.75}
.seps button.on{background:var(--coral)}.seps button.on .k{opacity:1}
.seps>a .t{text-transform:uppercase;letter-spacing:.04em}   /* igual a «.seps button .t» de css.css */
.seps>a{text-decoration:none;min-height:44px;min-width:0;justify-content:center}
.seps>a:hover,.seps>a:focus-visible{background:#ffffff1f;outline:none}
.seps-inicio{max-width:1600px;margin:0 auto;padding:.8rem 32px .2rem}
.seps-inicio .seps{margin:0}
@media(max-width:700px){.seps-inicio{padding:.6rem 12px .1rem}}