/* ==========================================================================
   HALLY - paginile de categorie (/tricouri/, /hanorace/, /bluze/).
   Vitrina familiei (hero-ul parametrizat, ecranul masurat, neatins) plus grila
   de produse care curge sub ea. Se incarca DOAR pe cele 3 pagini de categorie.

   style.css spune body{overflow:hidden} fiindca hero-ul de acasa e un ecran fix.
   O categorie are inventar sub vitrina, deci aici, si numai aici, pagina
   deruleaza. Stage-ul ramane 100vh cu toate ancorele lui procentuale exact unde
   le-a masurat verify_geometry.py: nu scurtam ecranul, adaugam continut DUPA el.

   Fisierul nu aduce nicio culoare, niciun token, nicio umbra si nicio animatie
   noua. Grila, cardurile si footerul isi iau tot look-ul din pages.css, hero-ul
   din style.css + shop.css + product.css.
   ========================================================================== */

/* Aceeasi mecanica pe care pages.css o foloseste deja pentru body.page: acelasi
   nivel de specificitate ca `body` din style.css, dar cu o clasa in plus, deci
   castiga fara sa depinda de ordinea fisierelor.
   overflow-x: hidden fiindca .stage e 100vw, iar 100vw include bara de derulare
   pe Windows: fara el, pagina ar capata si o bara orizontala de cativa pixeli. */
body.catpage { overflow-y: auto; overflow-x: hidden; }

/* Regiunea de sub hero. Trei lucruri, fiecare cu motivul lui:

   position: relative e obligatoriu, nu decorativ: cele doua straturi .bg sunt
   fixate (deci pozitionate), iar un bloc static de dupa stage s-ar picta SUB ele
   si grila ar disparea. Stage-ul scapa doar fiindca e el insusi pozitionat.
   Fara z-index: ordinea de pictare o da DOM-ul, iar .cat-below vine dupa .bg.

   font-family si color le declara style.css pe .stage, si numai pe .stage. Pe
   paginile interioare grila traieste INAUNTRUL stage-ului, deci le mostenea; aici
   traieste dupa el, deci le pierdea. Fara randul asta cardurile si footerul cad pe
   serif-ul implicit al browserului (Times), lucru pe care nicio verificare
   mecanica nu il vede: contrastul, hit-testing-ul si geometria raman toate verzi.
   Nu e un font nou, e acelasi token pe care il foloseste restul paginii. */
.cat-below {
  position: relative;
  color: var(--ink);
  font-family: var(--sans);
  padding: 56px 20px calc(32px + env(safe-area-inset-bottom));
}

/* Footerul de sub grila: aceleasi neutralizari pe care pages.css le face sub
   .stage--page. Fara ele, style.css ar ancora social-ul absolut la 87.4% din
   .cat-below, adica peste carduri. */
.cat-below .social { position: static; transform: none; display: flex; gap: 4px; }
.cat-below .social a { width: 44px; height: 44px; min-width: 0; display: grid; place-items: center; }
.cat-below .social svg { width: 19px; height: 19px; }

@media (max-width: 1024px) {
  .cat-below { padding-top: 32px; }
}