/* ========================================================================== ANTETUL PE DESKTOP (≥992px) — butonul de FAVORITE nu mai înfometează câmpul de căutare ========================================================================== ── DE CE O FOAIE SEPARATĂ ──────────────────────────────────────────────── `public/css/shop-header-mobile.css` e integral într-un `@media (max-width: 767px)`; problema reparată aici e la 1024–1529px. Amestecul celor două ar face imposibil de citit „ce se aplică unde", deci foaia asta ține DOAR regulile de desktop. Tot fișierul e într-un singur `@media (min-width: 992px) and (max-width: 1529px)` — sub 992 și peste 1529 niciun selector de aici nu se potrivește. Se încarcă printr-un `` în ``, din `resources/views/shop/partials/header.blade.php`, imediat după foaia mobilă: layout-ul include partial-ul DUPĂ ``, deci un `@push('head')` de acolo ar cădea în gol, tăcut (lecția plătită la subsol). Fiind ultima foaie din document, câștigă la specificitate egală peste `legacy/header.css` și peste `shop-responsive.css`. ══════════════════════════════════════════════════════════════════════════ DEFECTUL, MĂSURAT (2026-08-30, Chrome 152 headless, membru logat `Francy` cu 3 favorite, `/category/lenjerie-erotica/lenjerie-pentru-ea/body`) ══════════════════════════════════════════════════════════════════════════ De când antetul are și blocul de favorite, `.header-search` (care e `flex: 1 1 0%` — adică primește DOAR spațiul rămas) se strânge: lățime vizitator membru logat (înainte) 1024–1269 213.61px 67px ⇒ 2px utili — inutilizabil 1270–1529 459.61px 247.77px ⇒ 182.77px utili ≥1530 500px 497.77px ⇒ practic neschimbat Nu e o regresie a portului: producția are exact același comportament (măsurat prin injectarea blocului în DOM-ul live, la 0,00px diferență). Cauza e că producția colapsează butonul la iconiță abia sub 992px (`legacy/header.css:1051-1075`), iar între 992 și 1529 îl lasă cu text. La 1024 se vede și cu ochiul liber: „VEZI FAVORITE" și „VEZI COSUL" trec pe două rânduri (56px → 74px înălțime), iar căutarea rămâne o fantă. Divergență DELIBERATĂ față de producție, aprobată de owner (2026-08-30): un câmp de căutare de 67px nu e o funcție de replicat. Consemnată și în `docs/DE-IMBUNATATIT-la-final.md`. ══════════════════════════════════════════════════════════════════════════ DE CE FEREASTRA E 992–1529 ȘI NU 992–1279 ══════════════════════════════════════════════════════════════════════════ `.wrapper-full` (deci și `.header-container`, care poartă ambele clase) are `max-width` în TREPTE: 1024 de la 1024px, 1270 de la 1270px, 1520 de la 1530px (`legacy/stylesheet.css:1748-1766`). Lățimea disponibilă în antet e deci CUANTIFICATĂ — nu variază continuu cu fereastra. Măsurat: 1024 și 1100 dau exact aceleași cifre; 1279 și 1280 la fel; 1529 și 1530 diferă. Există prin urmare exact trei stări de desktop, iar „doar cât timp e nevoie" se citește pe ele (nevoia = placeholderul „Caută produsul perfect pentru tine..." cere 292px de text, adică 357px de câmp cu tot cu padding): stare buton cu text buton iconiță verdict 1024–1269 67px 122.61px nici așa nu încape ⇒ colapsăm 1270–1529 247.77px 368.61px colapsul e EXACT ce lipsea ⇒ da ≥1530 497.77px — încape fără colaps ⇒ NU atingem Pragul propus inițial (991 → 1279) ar fi reparat doar prima stare și ar fi introdus o INVERSIUNE: la 1279 căutarea ar fi fost 368.61px, iar la 1280 — fereastră mai LARGĂ — ar fi căzut înapoi la 247.77px. Măsurat, nu presupus. Pragul corect e cel al containerului: 1530. Marginea de jos e 992, nu 768: sub 992 `legacy/header.css:1051-1075` face deja exact același lucru, iar sub 768 comandă `shop-header-mobile.css` (iconița de 38×46 a temei `Mobile`). Fără marginea asta ar apărea o basculare urâtă 991 iconiță → 992 buton cu text → 1024 iconiță. ══════════════════════════════════════════════════════════════════════════ CE NU SE ATINGE ══════════════════════════════════════════════════════════════════════════ Declarațiile de mai jos sunt COPIA EXACTĂ a blocului `@media (max-width: 991px)` din `legacy/header.css:1051-1075` — aceeași iconiță de 44×44 pe care producția o arată deja pe tablete. Nu se inventează niciun aspect nou: se mută doar fereastra în care e folosit. • coșul, telefonul, logo-ul, meniul ☰, bara de login: NEATINSE; • bulina `.wishlist-button-badge` rămâne cea a producției (cerc alb de 22px + contur roșu, `top/right: -8px`) — verificat că nu e tăiată: `.header-wishlist-comparison` nu are `overflow` și cei 8px de ieșire intră în padding-ul lui de 10px; • sub 768px nimic din fișierul ăsta nu se potrivește, deci telefonul e neatins prin construcție; • pentru un VIZITATOR blocul de favorite nici nu se randează, deci foaia asta n-are pe ce să se aplice: desktopul anonim rămâne bit-identic. ========================================================================== */ @media (min-width: 992px) and (max-width: 1529px) { #header .wishlist-wrapper { margin-right: 10px; } #header .wishlist-comparison-info { display: none; } #header .header-wishlist-comparison { padding: 10px; } /* `font-size: 0` stinge textul „VEZI FAVORITE" fără să atingă markup-ul — exact mecanismul producției. Bulina își redeclară propriul `font-size` (`legacy/header.css:1046`), deci contorul rămâne lizibil. */ #header .wishlist-comparison-button { padding: 12px; margin-left: 0; font-size: 0; } /* `!important` obligatoriu: `style="margin-right: 5px"` e INLINE în markup-ul producției, copiat ca atare în antet. Producția folosește același `!important` la `legacy/header.css:1071`. */ #header .wishlist-comparison-button svg { margin-right: 0 !important; } } /* ========================================================================== 1024–1269px, MEMBRU LOGAT — căutarea primește RÂND PROPRIU ========================================================================== (aprobat de coordonator, 2026-08-30, după măsurătorile de mai jos) ── DE CE MAI E NEVOIE DE CEVA ──────────────────────────────────────────── Blocul de mai sus repară complet banda 1270–1529 (câmp 368,61px ⇒ placeholderul „Caută produsul perfect pentru tine..." încape întreg). Banda 1024–1269 NU se poate repara doar din colaps: acolo containerul are 994px de conținut, iar logo (217) + telefon + coș iau atât încât până și un VIZITATOR rămâne cu 213,61px de câmp — 133,61px de text vizibil, ~13 caractere. Cu iconița de favorite (91px: 44 buton + 20 padding + 2 bordură + 10 margine + 15 `gap`) membrul cobora la 122,61px ⇒ 42,61px vizibili, ~4 caractere. ── SOLUȚIA E A PRODUCȚIEI, DOAR ÎN ALTĂ FEREASTRĂ ──────────────────────── `legacy/header.css:763-775` face EXACT asta la ≤991px: `flex-wrap: wrap` pe container + căutarea pe `order: 3` cu lățime completă. Portul o aplică deja la ≤1023 (`shop-responsive.css`, blocul 5). Aici se prelungește până la 1269, adică fix cât ține treapta de 1024 a containerului. Rezultat măsurat: câmp 1024px, 535px de text vizibil (~53 caractere). ── DE CE `:has()` ȘI NU UN MEDIA QUERY SIMPLU ──────────────────────────── Un `flex-wrap` necondiționat ar fi mutat rândul și pentru VIZITATOR — adică ar fi schimbat desktopul anonim, singurul lucru pe care harness-ul de paritate îl compară, ca să repare o problemă pe care doar membrii o au. `:has(.wishlist-wrapper)` e adevărat DOAR când blocul de favorite există în DOM, iar blocul e gardat de `@if ($shopHeaderMember)` în Blade. Deci: vizitator ⇒ selectorul nu se potrivește ⇒ zero schimbare, bit cu bit. ⚠️ FIECARE regulă de mai jos are UN SINGUR selector, deliberat. Într-o listă de selectori, un `:has()` nesuportat ar invalida ÎNTREAGA regulă, inclusiv selectorii valizi de lângă el. Așa, dacă `:has()` lipsește, cad exact aceste două reguli și rămâne comportamentul blocului de sus (câmp 122,61px) — o degradare grațioasă, nu o pagină ruptă. Suport `:has()`: Chrome 105+, Safari 15.4+, Firefox 121+ (adică din 2022-2023). Verificat pe browserul de test, Chrome 152: DA. Nu s-a scris nicio rezervă în JS — ar fi însemnat cod nou pe o cale în care „vechi" înseamnă un browser de peste patru ani, care oricum vede antetul de azi, funcțional. ── CONSECINȚĂ DE CONSEMNAT ─────────────────────────────────────────────── Pentru un membru, la 1270px antetul trece din două rânduri în unul singur, deci câmpul scade de la 1024px la 368,61px. Nu e o inversiune de tipul celei respinse la §2.3 din raport (acolo pragul era inventat, la aceeași lățime de container): aici e o schimbare de MOD de așezare, exact cea pe care producția o are la propriul ei hotar de 991/992px. ========================================================================== */ @media (min-width: 1024px) and (max-width: 1269px) { #header .header-container:has(.wishlist-wrapper) { flex-wrap: wrap; } /* ⚠️ `max-width: 600px` PE `.header-search`, nu doar pe `.search-wrapper` — și e obligatoriu, nu cosmetic. `.search-button` e `position: absolute; right: 0` (`legacy/header.css:463`) și se ancorează în `.header-search` (`:703-708`, `position: relative`, regulă FĂRĂ media query). `.search-wrapper` are `max-width: 600px; margin: 0 auto` (`:428-437`), deci dacă rândul e lat de 1024px câmpul rămâne 600px și CENTRAT, în timp ce butonul roșu zboară la marginea din dreapta a rândului. Măsurat la 1024, cu prima variantă a blocului ăstuia: câmpul 227→827, butonul la x=979 — **152px de spațiu gol între ei**. Aș fi schimbat o căutare inutilizabilă cu una cu butonul rupt de câmp. Cu plafonul mutat pe `.header-search`, ancora absolută are exact lățimea câmpului, deci butonul rămâne lipit; `margin: 15px auto 0` păstrează centrarea pe care o dădea `margin: 0 auto` de pe wrapper. Rezultat: câmp 600px, 535px de text vizibil (~53 caractere), buton lipit. ⚠️ DEFECTUL EXISTĂ ȘI ÎN AFARA FERESTREI ĂSTEIA, preexistent și pentru VIZITATORI, la **769–1023px** (blocul 5 din `shop-responsive.css`, care face același `flex: 1 1 100%` fără să mute plafonul). Măsurat: decalaj 75px la 900, 121px la 992, 136,5px la 1023 — pentru toată lumea, logat sau nu. NU e reparat aici: fișierul acela e al altui agent, iar reparația ar schimba randarea pentru vizitatori, în afara mandatului. Consemnat în raport ca observație. Producția are aceeași regulă (`legacy/header.css:763-775`), dar nu se vede niciodată la ea: servește tema desktop cu `viewport width=1024` fix și tema `Mobile` sub 992. */ #header .header-container:has(.wishlist-wrapper) .header-search { flex: 1 1 100%; order: 3; margin: 15px auto 0; max-width: 600px; } }