/* ==========================================================================
SUBSOLUL PE MOBIL — compactare spre forma producției
==========================================================================
Fișier propriu al portului. Se încarcă din `shop/partials/footer.blade.php`
(vezi comentariul de acolo pentru DE CE dintr-un `` cu ``-uri plate separate cu „|", stilat de
`mobile/css/stylesheet.css:82-92`.
Dacă am fi copiat aici numele lui de clase, am fi obținut un subsol
NESTILIZAT — capcana care a lovit deja de mai multe ori proiectul. Așa că:
s-au citit VALORILE din tema mobilă și s-au transcris pe clasele PORTULUI
(`#footer .top-row`, `.footer-content .icon-menu`, `.copyrights`), care sunt
cele reale, verificate cu grep în `public/css/legacy/stylesheet.css:1457-1556`.
── CIFRELE DE PORNIRE (măsurate în Chrome, 375px, UA de iPhone, pe /login) ─
portul: #footer h=448,38 17 linkuri (16 vizibile)
.top-row h= 52,38 5 linkuri de navigație
.footer-content h=136 7 linkuri, 4 rânduri de 25px
.copyrights h=240 11 rânduri de 15px + siglele
(+ 20px `padding-top` pe #footer, `stylesheet.css:1460`)
producția: footer.clearfix h=171 8 linkuri, 2 imagini
1px bordură + 5px + 60px text (3 rânduri de 20px) + 100px siglele
(2 × 200×50, una sub alta) + 5px
── CE FACE FIȘIERUL, ÎN ORDINEA IMPORTANȚEI ──────────────────────────────
1. Ascunde `.top-row` (rândul de NAVIGAȚIE, nu de conținut legal). Producția
nu-l randează deloc pe telefon. VERIFICAT în browser, la 375px, că toate
cele 5 destinații rămân accesibile:
Acasa → logo-ul din antet (``, vizibil
fără să deschizi nimic)
Articole → sertarul ☰ PRODUSE
Magazine → sertarul ☰ PRODUSE
Contact → sertarul ☰ PRODUSE
Detalii livrare → „Livrare si transport" din `.icon-menu`, ACELAȘI href
(`/informations/transport-si-livrare`), rămâne vizibil
Deci zero destinații pierdute.
2. NU se ascunde NICIUN link cu valoare legală. Rămân toate, pe telefon ca pe
desktop: Termeni si conditii, Confidentialitate, Protectia datelor
personale, Garantie, Retrageți-vă din contract aici, A.N.P.C., SAL, SOL —
plus „Livrare si transport" și „Cum platesti". E un magazin din România;
alea nu se ascund ca să câștigăm pixeli. Cele 7 pastile de `width:108px`
devin linkuri text într-un șir plat cu separatori „|", forma producției.
3. Disclaimerul despre suplimente alimentare se COMPACTEAZĂ, nu se șterge.
Tema mobilă a producției nu-l randează deloc, deci „paritate" ar însemna
ascundere — dar e text cu tentă legală, iar ștergerea lui e o decizie de
owner. Aici doar se micșorează (9px, spațiere strânsă, bloc propriu).
Cât ar aduce ascunderea lui e măsurat și raportat separat.
Zero culori noi, zero fonturi noi: toate valorile sunt cele deja prezente în
foaia producției. Tot conținutul e într-un singur `@media (max-width: 767px)`
— breakpoint-ul proiectului e 767, deci la 768 și peste nu se poate potrivi
nimic. Desktopul rămâne neatins (dovedit cu geometrie per-element la 1280,
1024 și 768, înainte/după).
========================================================================== */
@media (max-width: 767px) {
/* ── 1. Rândul de navigare ──────────────────────────────────────────────
52,38px de linkuri duplicate. Producția nu-l are pe telefon, iar toate
cele 5 destinații rămân accesibile (vezi antetul). */
#footer .top-row {
display: none;
}
/* Cei 20px de `padding-top` (`stylesheet.css:1459`) existau ca să distanțeze
bordura lui `.top-row` de conținut. Fără `.top-row`, banda gri a lui
`.footer-content` face singură separarea; rămân 6px de respiro. */
#footer {
padding-top: 6px;
}
/* ── 2. Blocul de informații: șir plat de linkuri, ca în producție ───────
Pastilele erau deja scoase din grila de 108px de blocul 13 din
`shop-responsive.css`; aici se strânge doar spațierea (4 rânduri de 25px
→ 5 rânduri de 17px: 100px → 85px) și se adaugă separatorul „|" al
producției. Rândurile sunt mai multe fiindcă textul nu s-a micșorat. */
#footer .footer-content {
padding: 3px 0;
}
#footer .footer-content .wrapper-full {
padding-top: 5px;
padding-bottom: 5px;
}
/* Pasul dintre rânduri e dat de „strut"-ul lui `ul` (moștenea 19px de pe
`#footer`), NU de `line-height`-ul lui `li` — de-aia se setează pe toate
trei. Corpul literei rămâne la 12px: linkurile astea sunt obligatorii
legal și trebuie să rămână citibile și atingibile, iar producția le dă
chiar 14px. Se strânge spațiul dintre rânduri, nu textul. */
#footer .footer-content .icon-menu ul {
line-height: 17px;
}
#footer .footer-content .icon-menu ul li {
margin: 0 2px;
line-height: 17px;
}
#footer .footer-content .icon-menu ul li a {
padding: 0;
font-size: 12px;
line-height: 17px;
}
/* Separatorul „|" dintre linkuri — exact ce desparte ``-urile în
`Themed/Mobile/Elements/footer.ctp`. Stă pe `li::after`, adică ÎN AFARA
ancorei: nu mărește suprafața de clic a linkului.
`::after`, nu `::before`: pseudo-elementul face parte din cutia
`inline-block` a lui `li`, deci rămâne LIPIT de elementul lui. Pe
`::before` (încercat și fotografiat) separatorul se agăța de începutul
elementului URMĂTOR și, la rupere de rând, ateriza singur la ÎNCEPUTUL
liniei — „| TERMENI SI CONDITII". Pe `::after` închide linia, ca într-o
enumerare normală. */
#footer .footer-content .icon-menu ul li:not(:last-child)::after {
content: "|";
padding-left: 5px;
color: #8d8d8d;
}
/* ── 3. Drepturi de autor + siglele obligatorii ─────────────────────────
Aceleași elemente, spațiere strânsă. Siglele SAL/SOL rămân la 40px
înălțime (blocul 13 din `shop-responsive.css`) și UNA LÂNGĂ ALTA — 44px
în total după ce se taie padding-ul inline, față de cei 100px ai
producției, care le pune una sub alta fiindcă acolo sunt la mărimea
naturală de 200×50 și 2×200 nu încap în 375. */
#footer .copyrights {
padding: 5px 0;
}
#footer .copyrights .text-center {
line-height: 1.3;
}
/* Siglele SAL/SOL: `!important` fiindcă spațierea lor e un `style=` INLINE
în markup (`padding: 10px 5px 5px 0` / `5px 5px 5px 0`), iar acela nu
poate fi bătut altfel. Se taie DOAR spațiul din jur — înălțimea imaginii
rămâne 40px, ca să nu devină ilizibile siglele obligatorii. */
#footer .copyrights .litigii {
padding: 2px 6px 2px 0 !important;
vertical-align: middle;
}
/* ── 4. Disclaimerul despre suplimente alimentare ────────────────────────
COMPACTAT, NU ȘTERS (vezi antetul). Bloc propriu ca să-și poată impune
propriul `line-height`: pe un `` inline, înălțimea rândurilor ar fi
rămas dictată de „strut"-ul părintelui (`.text-center`), iar micșorarea
fontului n-ar fi câștigat nimic pe verticală. */
#footer .copyrights .supplements-note {
display: block;
max-width: 350px;
margin: 4px auto;
font-size: 9px;
line-height: 1.3;
}
/* Cele două `