/* ========================================================================== ANTETUL PE TELEFON (≤767px) — trei defecte de randare, valori transcrise din tema `Mobile` a producției ========================================================================== ── DE CE O FOAIE SEPARATĂ ──────────────────────────────────────────────── `public/css/shop-responsive.css` a construit silueta mobilă a antetului (blocurile 5, 9 și 11). Fișierul acela e al altui agent; aici se scriu DOAR corecțiile de randare, PESTE el. Foaia se încarcă printr-un `` în ``, din `shop/partials/header.blade.php` — layout-ul include partial-ul DUPĂ ``, deci un `@push('head')` de acolo ar cădea în gol, tăcut (lecția plătită deja la subsol, v. `shop/partials/footer.blade.php:19-35`). Fiind ultima foaie din document, câștigă la specificitate egală; nicăieri mai jos nu e nevoie de `!important` decât acolo unde producția însăși folosește unul (`mega-menu.css:6`). ── DESKTOPUL E NEATINS PRIN CONSTRUCȚIE ────────────────────────────────── TOT fișierul e într-un singur `@media (max-width: 767px)`. La 768px+ niciun selector de aici nu se potrivește. Breakpointul e 767, nu 768 — același cu al lui `shop-responsive.css`. ── CE S-A MĂSURAT PE PRODUCȚIE (2026-08-30, Chrome 152 headless, 375px, UA de iPhone 17.5) ────────────────────────────────────────────────────── Tema `Mobile`, `/` și `/category/cadouri/cadouri-si-glume`: header#main-header 375×128.28, background #f5f5f5, padding 5px .search-wrapper 365×42, position: relative (FĂRĂ overflow) .search-input 365×42, padding 10px 40px 10px 15px, border 1px #e0e0e0, radius 8px, bg #f8f8f8, 14px .search-button absolut, right:15px, top:50%, translateY(-50%), background: NONE, color #dc3545, font-size 18px ⇒ glifă 18×18 ÎN INTERIORUL padding-ului de 40px al câmpului a[href="/cart"] 38×46, padding 8px 4px, fundal TRANSPARENT, SVG 30×30 în contur, culoare moștenită #333; contorul = `span.badge.rounded-pill.bg-danger` (#dc3545), randat doar când count > 0 (`Themed/Mobile/Elements/header.ctp:57-62`) .MobileMenuTriggerButton 51×55.28, background #f5f5f5, SVG 35×35 cu `stroke: rgb(51,51,51)` ⇒ CONTRAST 11.59:1 ⚠️ CAPCANA CLASELOR: tema `Mobile` a producției are ALT markup ȘI alt arbore CSS (`public_html/mobile/css/**`, Bootstrap 5.1.3), pe care portul NU îl încarcă. Aici nu se copiază NICIUN nume de clasă al ei: `.navbar-nav-icons`, `.nav-link`, `.MobileMenuTriggerButton`, `.rounded-pill`, `.bg-danger`, `.position-absolute`, `.top-10`, `.start-40` nu există în `public/css/legacy/**` (verificat cu grep). Se transcriu VALORILE, agățate de clasele pe care portul le are deja — toate prezente în `public/css/legacy/**`: .search-wrapper .search-input .search-button .search-icon header.css:428-495 .cart-comparison-button .header-cart-comparison header.css:836-855 .products-menu-toggle .hamburger-icon mega-menu.css:2-28 Singura clasă NOUĂ e `.cart-count-badge` (plus `.badge`, care e cârligul așteptat de `updateCartHeader` din `js/shop-add-to-cart.js:76`); `grep '\.badge'` peste tot `public/css/**` nu găsește nicio altă regulă, deci nu se ciocnește de nimic. ========================================================================== */ @media (max-width: 767px) { /* ══════════════════════════════════════════════════════════════════════ 1. CÂMPUL DE CĂUTARE — butonul roșu iese DE PESTE câmp ══════════════════════════════════════════════════════════════════════ DEFECT: `.search-button` e `position: absolute; right: 0; height: 100%; padding: 0 20px` cu fundal roșu (`legacy/header.css:463-478`) — deci un dreptunghi de 60×38 SUPRAPUS peste ultimii 60px ai câmpului. Câmpul are doar 40px de `padding-right`, deci butonul mânca 20px din zona de text. Măsurat la 375px: lățime utilă 229px pentru un placeholder de 256.5px ⇒ 32 din 37 caractere, „Caută produsul perfect pentru ti". Producția NU are un buton-bloc pe mobil: are glifa (`fas fa-search`, 18px, #dc3545) ÎN INTERIORUL câmpului, la `right: 15px`, pe fundalul câmpului (#f8f8f8; #fff la focus). Zero lățime furată. ⚠️ `.search-button` rămâne `position: absolute` și rămâne ancorat tot în `.header-search` (`legacy/header.css:703-708`, `position: relative`, regulă FĂRĂ media query). Nu se atinge nici poziționarea lui `.search-wrapper` (`position: relative` e COMENTAT în producție), nici `#search-suggestions`, panoul legacy gol cu `display:none`. Sugestiile instant își randează propriul panou în ``, `position: fixed`, calculat din `getBoundingClientRect()` al lui `.search-wrapper` (`js/shop-search-suggest.js:132,618-643`) — ancora aceea NU se mișcă și nu-și schimbă nici poziționarea, doar lățimea (306 → 345), pe care panoul o urmărește singur. */ #header .header-search .search-button { right: 15px; top: 50%; left: auto; bottom: auto; transform: translateY(-50%); width: auto; height: auto; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; /* Stinge ȘI `background: #e31837`, ȘI imaginea `cart-button-background.png` din `legacy/header.css:463,476`. */ background: none; line-height: 0; } #header .header-search .search-button:hover, #header .header-search .search-button:focus { background: none; } /* `legacy/header.css:487` dă `fill: #ffffff` (invizibil fără blocul roșu). Producția: #dc3545, 18px. Atributele `width`/`height` din markup (20) sunt suprascrise de CSS. */ #header .header-search .search-button .search-icon { display: block; width: 18px; height: 18px; fill: #dc3545; } #header .header-search .search-button:hover .search-icon { fill: #c82333; /* `.search-button:hover` al producției */ transform: none; /* fără `scale(1.1)`: pe telefon hover-ul e lipicios */ } /* ── Lățimea rândului de căutare ────────────────────────────────────── Chiar fără suprapunere, 306px de câmp lasă 249px de text pentru un placeholder de 256.5px — o tăiere de ~1 caracter. Cauza: blocul 9 din `shop-responsive.css` rezervă `padding-right: 54px` pe `.header-container` pentru iconița de cont, care e ABSOLUTĂ. Rezervarea e necesară pe rândul 1; pe rândul 2 (căutarea) e spațiu mort. O margine negativă exact cât surplusul (54 − 15 = 39) redă rândului gutiere simetrice de 15px, ca ale logo-ului și ale butonului ☰: 15 → 360 din 375. Lățime utilă 288px > 256.5px ⇒ placeholder întreg. Producția: 365px de câmp, 308px utili, gutiere de 5px. */ #header .header-search { margin-right: -39px; } /* Iconița de cont e ancorată în `#header` cu `height: 74px` (`shop-responsive.css:525-543`), adică 19 → 93px, în timp ce rândul de căutare începe la 88.31px. Câtă vreme căutarea se oprea la x=321 și iconița stă la x=333, cei 4.7px de suprapunere pe verticală nu se vedeau. După lărgirea de mai sus câmpul ajunge la x=360, deci cutia iconiței (z-index: 20) ar acoperi colțul din dreapta-sus al câmpului și i-ar fura atingerea. Înălțimea se strânge la exact rândul 1 (28 + 4 + 48.31 logo = 80.31, minus `top` la 19 ⇒ 61px), deci nu mai poate atinge rândul 2. Centrarea rămâne `align-items: center`, ca acolo. */ #header .loginbar { height: 61px; } /* Colțurile: producția are `border-radius: 8px` pe câmp, fără umbră. Portul avea `4px 0 0 4px` pe câmp (colțurile din dreapta erau ale butonului-bloc) + `overflow: hidden` pe wrapper. Cu butonul devenit glifă, dreapta trebuie rotunjită la fel ca stânga. */ #header .header-search .search-wrapper { border-radius: 8px; box-shadow: none; } #header .header-search .search-input { border-radius: 8px; } /* ══════════════════════════════════════════════════════════════════════ 2. COȘUL — pătrat roșu plin ⇒ contur, cu bulină de contor ══════════════════════════════════════════════════════════════════════ DEFECT: `shop-responsive.css:506-522` face din „VEZI COSUL" un pătrat PLIN `#D91E18` de 34×34, cu o iconiță albă de coș PLIN. Măsurat: 34×34 (nu 54×54 — v. raport). Pe un antet alb, alături de două iconițe subțiri #333 (telefon, cont), pata roșie e singurul element „greu" din rând. Producția: fundal TRANSPARENT, SVG 30×30 în CONTUR (fa-cart-shopping, varianta cu mânerul deschis), culoare moștenită din `nav-link` ⇒ #333, zonă de atingere 38×46 (`padding: 8px 4px`), iar contorul e o bulină roșie în colț. Se păstrează exact aceeași cale SVG ca a producției (viewBox 0 0 576 512 din `Themed/Mobile/Elements/header.ctp:58`), doar cu `fill` explicit #333 — la fel ca iconițele de telefon și de cont ale portului, care folosesc deja `fill='%23333'`. */ #header .cart-comparison-button { display: block; position: relative; /* ancora bulinei */ width: 38px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 0; /* `overflow: hidden` din shop-responsive ar TĂIA bulina. */ overflow: visible; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23333333'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") center / 30px 30px no-repeat; } /* `.header-cart-comparison` e `display: flex` (`legacy/header.css:789`); fără asta ancora s-ar întinde pe toată înălțimea rândului. */ #header .header-cart-comparison { align-items: center; } /* Bulina de contor. Pe DESKTOP rămâne ascunsă (regula de bază, în afara oricărui media query, e la finalul fișierului): acolo contorul se vede deja ca text, „N PRODUSE", în `.cart-comparison-count`. */ #header .cart-comparison-button .cart-count-badge { display: block; position: absolute; top: 2px; right: -2px; min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; /* pastilă, ca `.rounded-pill` */ background: #dc3545; /* `.bg-danger` al producției */ color: #fff; /* `.cart-comparison-button` are `font-size: 0` și `color: transparent` din `shop-responsive.css:513-515`; ambele trebuie redeclarate aici. */ font-size: 11px; font-weight: 700; line-height: 17px; letter-spacing: 0; text-align: center; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════ 3. BUTONUL ☰ — glifă albă pe fundal aproape alb ══════════════════════════════════════════════════════════════════════ DEFECT: `mega-menu.css:6` dă `.products-menu-toggle { color: #fff !important }` — corect cât timp butonul era bara roșie „PRODUSE". Blocul 11.2 din `shop-responsive.css` îl transformă pe telefon în pătratul de iconiță al producției (44×44, `background: #f5f5f5`), dar culoarea albă rămâne moștenită de `.hamburger-icon`. Rezultat măsurat: #fff pe #f5f5f5 ⇒ CONTRAST 1.09:1, pe singurul control care duce la navigație de când rândul de linkuri e ascuns (`shop-responsive.css:1000`, `#header .links { display: none }`). Producția: `stroke: rgb(51,51,51)` pe `background: #f5f5f5` ⇒ 11.59:1. Se transcrie exact culoarea aceea. `!important` e obligatoriu: îl bate pe cel din foaia producției, care e copiată byte-cu-byte și nu se atinge. Cutia rămâne 44px LATĂ (nu 51 ca producția): 44 e deja peste pragul de atingere, iar creșterea ar împinge rândul. Glifa urcă de la 22 la 24px, ca greutatea optică să se apropie de SVG-ul de 35px al producției. ── 3b. FORMA CUTIEI (raportat de owner 2026-08-31: „iconița `products-menu-toggle` arată urât și nealiniată") ──────────────── MĂSURAT (Chrome 152 headless, UA de iPhone, 360/375/390/414 — valorile sunt IDENTICE la toate patru, cutia nu depinde de lățime): | element | dev (înainte) | producţie (tema Mobile) | |--------------------------|--------------------|-------------------------| | cutia ☰ | 44×44, radius 3px | 51×55,3, radius 0 | | logo-ul de lângă ea | 104×48,3 | 119×55,3 | | ☰ vs logo, sus / jos | 34,2 / 78,2 vs 32 / 80,3 ⇒ INSET cu 2,2px sus și 2,1px jos | 13 / 68,3 vs 13 / 68,3 ⇒ IDENTIC | | centrul vertical (cy) | 56,2 — egal cu logo, telefon, coș | 40,6 — egal cu tot rândul | Deci centrul ERA deja aliniat; ce se vede e altceva, și se citeşte direct din tabel: cutia gri e cu ~4,3px mai SCURTĂ decât logo-ul de lângă ea și are colțuri rotunjite, deci nu se aliniază nici sus, nici jos, cu nimic — plutește ca o pastilă gri într-un rând de iconițe fără fundal. La producție blocul gri are EXACT înălțimea logo-ului (55,3 = 55,3) și colțuri drepte, deci citește ca un segment al barei, nu ca un obiect lipit peste ea. Reparaţia transcrie exact cele două proprietăţi care diferă, nimic mai mult: colţuri drepte și înălţimea liniei flex (`align-self: stretch`, care în `.header-container` — `display:flex; flex-wrap:wrap; align-items:center` — dă cross-size-ul liniei 1, adică fix înălţimea logo-ului). `height: auto` e obligatoriu: fără el `height: 44px` din `shop-responsive.css:987` ar bate `stretch`. Lăţimea (44 vs 51) și glifa (24px text vs SVG 35px) NU se ating: sunt decizii documentate mai sus, iar owner-ul a reclamat o casetă prea mare, nu una prea mică. */ #header .header-container > .products-menu-toggle { color: #333 !important; background: #f5f5f5; border-radius: 0; height: auto; align-self: stretch; /* GAP ZERO — altfel glifa nu e centrata in buton. `legacy/mega-menu.css:6` da `gap: 8px`, si acolo e CORECT: pe desktop butonul are doi copii vizibili, glifa ☰ si eticheta „PRODUSE" (13px), iar cei 8px sunt spatiul dintre ele. Pe mobil ascundem eticheta cu `font-size: 0`, dar nodul de text ramane copil flex: gap-ul se rezerva in continuare intre glifa si un element de latime 0. Cutia de continut devine 22 + 8 + 0 = 30px, centrata in 44, deci glifa ocupa doar primii 22px si centrul ei cade cu 4px la STANGA centrului butonului. Masurat la 375px: buton centru 37, glifa centru 33. Raportat de owner, cu diagnostic corect. */ gap: 0; } #header .header-container > .products-menu-toggle .hamburger-icon { color: #333; font-size: 24px; } /* STAREA DESCHISĂ, găsită căutând defectul 3: `shop-mega-menu.js:96` pune `.active` pe declanșator când mega-meniul se deschide, iar `mega-menu.css:18-24` dă atunci `background: #a50014`. Cu glifa mutată pe #333, meniul DESCHIS ar avea 1.86:1 — adică defectul s-ar muta din starea închisă în cea deschisă. Pe telefon `:hover` e și el lipicios după atingere. Ambele stări primesc un gri mai închis, care păstrează contrastul (#333 pe #e0e0e0 ⇒ 9.7:1) și arată apăsat. */ #header .header-container > .products-menu-toggle:hover, #header .header-container > .products-menu-toggle:focus, #header .header-container > .products-menu-toggle.active { color: #333 !important; background: #e0e0e0; } /* ══════════════════════════════════════════════════════════════════════ 4. FAVORITE — butonul roșu „VEZI FAVORITE" ⇒ inimă în contur ══════════════════════════════════════════════════════════════════════ Blocul de markup e nou (`shop/partials/header.blade.php`), cu clasele DESKTOP ale producției, deci pe desktop stilul vine gata din `legacy/header.css:971-1075` (buton roșu + bulină albă cu contur roșu). Aici se face traducerea către tema `Mobile`. ── CE S-A MĂSURAT PE PRODUCȚIE (2026-08-30, Chrome 152 headless, 375px, UA de iPhone 17.5, `https://www.4love.ro/`) ────────────────────── Toate cele patru intrări din bara mobilă (`a.nav-link`: căutare, telefon, coș, cont) au EXACT aceeași cutie, iar cea de favorite e a cincea, cu markup identic (`Themed/Mobile/Elements/header.ctp:64-75` e o copie a blocului de coș de la `:57-62`, cu alt SVG și alt href): a.nav-link 38×46, padding 8px 4px, background rgba(0,0,0,0) = TRANSPARENT, color rgb(51,51,51), position: relative pe cele care poartă bulină svg din interior 30×30 span.badge.rounded-pill.bg-danger background rgb(220,53,69), color #fff, font-size 10.5px, font-weight 700, line-height 10.5px, border-radius pastilă Iconița de favorite NU se poate măsura direct: producția o randează doar pentru un membru AUTENTIFICAT (`if(AuthComponent::user())`), iar în sesiunile de măsurare nu ne autentificăm pe producție. Transferul e însă exact, nu presupus: aceleași clase, aceeași structură, același `viewBox` și același `path` ca inima de pe desktop (verificat prin comparație de șiruri între `Elements/header.ctp:106-108` și `Themed/Mobile/Elements/header.ctp:66-68`). ⚠️ NICIUN nume de clasă al temei `Mobile` nu se copiază (v. avertismentul din antetul fișierului): valorile se agață de clasele pe care portul le are deja. ── SVG-UL INLINE SE PĂSTREAZĂ, NU SE ÎNLOCUIEȘTE CU UN `data:` URI ──── Spre deosebire de coș (unde butonul n-are SVG în markup și iconița vine ca fundal), aici markup-ul desktop al producției CONȚINE deja inima, cu `fill="none" stroke="currentColor"` — adică exact conturul temei mobile. Deci se redimensionează 20 → 30px și se dă culoarea prin `color`. Zero octeți în plus, zero a doua copie a path-ului de întreținut. */ /* Producția pune favoritele DUPĂ coș pe telefon (☎ 🛒 ❤ 👤) și ÎNAINTEA lui pe desktop (❤ 🛒). Markup-ul păstrează ordinea desktop a originalului; inversarea de pe telefon se face din `order`, ca desktopul să nu se atingă deloc. */ #header .wishlist-wrapper { flex: 0 0 auto; order: 1; margin-right: 0; /* `legacy/header.css:972` are 15px, `:1053` 10px */ } /* Chenarul cutiei albe dispare, ca la coș (`.header-cart-comparison`). */ #header .header-wishlist-comparison { align-items: center; padding: 0; border: 0; background: none; } #header .header-wishlist-comparison:hover { border-color: transparent; box-shadow: none; } #header .wishlist-comparison-button, #header .wishlist-comparison-button:hover, #header .wishlist-comparison-button:focus { display: flex; align-items: center; justify-content: center; position: relative; /* ancora bulinei */ width: 38px; height: 46px; padding: 0; margin: 0; border: 0; border-radius: 0; /* Bulina iese din cutie; `overflow` nu trebuie să o taie. */ overflow: visible; /* Stinge ȘI `#D91E18`, ȘI `cart-button-background.png` (`legacy/header.css:1014-1026`). */ background: none; box-shadow: none; /* `color: white !important` (`:1017`, `:1031`) ar face inima albă pe alb — `stroke="currentColor"`. `!important` e obligatoriu ca să-l bată, la fel ca la butonul ☰ de mai jos. */ color: #333 !important; /* Stinge textul „VEZI FAVORITE" fără să atingă markup-ul; bulina își redeclară propriul `font-size`. */ font-size: 0; line-height: 0; text-decoration: none; } #header .wishlist-comparison-button svg { display: block; width: 30px; height: 30px; /* `legacy/header.css:1071` are `margin-right: 0 !important` la ≤991px; `style="margin-right:5px"` din markup e inline, deci tot `!important` trebuie. Verticala: `vertical-align` e inutil într-un flex. */ margin: 0 !important; } /* Bulina de contor. ACELEAȘI VALORI ca `.cart-count-badge` (secțiunea 2 de mai sus) — sursa lor e aceeași măsurătoare de producție, iar consecvența dintre cele două buline din același rând contează mai mult decât economia de linii. Rula coșului rămâne NEATINSĂ. De resetat explicit, pentru că `.wishlist-button-badge` are pe desktop cu totul alt aspect (`legacy/header.css:1034-1050`: cerc ALB de 22px cu contur roșu, `top/right: -8px`): lățime, înălțime, bordură, rază, fundal, culoare și ancorare. */ #header .wishlist-comparison-button .wishlist-button-badge { display: flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: -2px; left: auto; bottom: auto; min-width: 17px; width: auto; height: 17px; padding: 0 5px; box-sizing: border-box; border: 0; border-radius: 9px; /* pastilă, ca `.rounded-pill` */ background: #dc3545; /* `.bg-danger` al producției */ color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; letter-spacing: 0; text-align: center; white-space: nowrap; } /* Pe TELEFON lista goală păstrează iconița, ca producția (`if(AuthComponent::user())`, nu `if($wishlist_count > 0)`). Regula globală de la finalul fișierului o ascunde pe desktop; aici o repunem. Specificitatea cu `#header` câștigă indiferent de ordinea în fișier. */ #header .wishlist-wrapper.wishlist-empty { display: block; } /* ══════════════════════════════════════════════════════════════════════ 6. ICONIȚA DE CONT — 6,7px MAI SUS DECÂT TOT RÂNDUL ══════════════════════════════════════════════════════════════════════ Găsit în timp ce se măsura defectul 3b (butonul ☰), din aceeași captură a owner-ului: „nu e aliniat pe verticală cu logo-ul și cu iconițele din dreapta". Nu butonul ☰ era nealiniat — el are cy=56,2, ca logo-ul, telefonul și coșul —, ci iconița de CONT. MĂSURAT (Chrome 152 headless, UA de iPhone; cifrele sunt IDENTICE la 360, 375, 390 și 414 — decalajul nu depinde de lățime): | element | y | înălţime | centru (cy) | |--------------------------|-------:|---------:|------------:| | `.products-menu-toggle` | 34,2 | 44 | 56,2 | | `h2.header-logo` | 32 | 48,3 | 56,2 | | `.header-contact` (☎) | 41,2 | 30 | 56,2 | | `.cart-comparison-button`| 33,2 | 46 | 56,2 | | `.loginbar` (cont) | 19 | 61 | **49,5** | Cauza e aritmetică, nu de cascadă. `.loginbar` e SCOASĂ din flux (`shop-responsive.css:554-556`: `position: absolute; top: 0`), deci nu primeşte centrarea flex a rândului; se centrează singură în propria cutie. `#header` începe la y=19, `top: 0` ⇒ cutia porneşte de la 19, iar §1 din fişierul ăsta i-a strâns înălţimea la 61px (ca să nu mai atingă rândul de căutare, care începe la 88,3) ⇒ centru 19 + 30,5 = 49,5. Rândul 1 de iconițe, în schimb, e 32 → 80,3 (`.header-container` începe la 28 + `padding-top: 4px`; cross-size-ul liniei = logo-ul, 48,3), adică centrul 56,15. Diferenţa: 6,65px. Se vede: în captură omuleţul stă vizibil mai sus decât telefonul şi coşul. Producţia n-are decalajul — toate cele cinci piese ale antetului mobil (☰, logo, ☎, coş, cont) au cy=40,6, fiindcă acolo sunt fraţi într-un singur `ul.navbar-nav-icons` cu `align-items: center`, nimic absolut. Reparaţia: cutia absolută se aşază PESTE rândul 1, în loc să pornească din colţul lui `#header`. `top: 13px` = 32 − 19 (începutul liniei 1 relativ la `#header`), `height: 48px` ≈ înălţimea liniei (48,3) ⇒ centru 32 + 24 = 56. Nu se atinge `align-items: center`, deci iconiţa rămâne centrată în cutie. ⚠️ Garda de la §1 se PĂSTREAZĂ, ba chiar creşte: marginea de jos a cutiei trece de la 80 la 80 (13+48+19 = 80), iar rândul de căutare începe la 88,3 ⇒ 8,3px liberi, faţă de 8,3 înainte. Iconiţa de cont (`z-index: 20`) tot nu poate fura atingerea câmpului de căutare. Nu se modifică regula din §1, ca naraţiunea ei (lăţimea căutării) să rămână citibilă; specificitatea e egală, iar regula asta e mai jos în fişier, deci câştigă prin ordine. */ #header .loginbar { top: 13px; height: 48px; } } /* ========================================================================== BULINA DE CONTOR — implicit ASCUNSĂ, la ORICE lățime ========================================================================== Regulă în afara media query-ului, deliberat: pe desktop `.cart-comparison-info` e vizibilă și afișează „N PRODUSE" ca text, deci bulina ar fi o a doua redare a aceleiași cifre. Blocul de mai sus o repune pe `display: block` doar sub 768px. ⚠️ Nu se folosește `[hidden]` și nici o clasă de stare: `updateCartHeader()` (`js/shop-add-to-cart.js:75-88`) comută EXCLUSIV `badge.style.display` între `'none'` și `''`. Șirul gol înseamnă „cade înapoi pe foaia de stil", deci după un adăugat în coș prin AJAX bulina reapare pe telefon și rămâne ascunsă pe desktop, fără nicio linie de JS. De aceea Blade randează `style="display:none"` INLINE când coșul e gol: e singura formă pe care JS-ul o poate anula. */ .cart-count-badge { display: none; } /* ========================================================================== FAVORITE, LISTĂ GOALĂ — ascuns pe DESKTOP, iconiță pe TELEFON ========================================================================== A doua regulă din afara media query-ului, din același motiv ca prima: e o diferență ÎNTRE cele două teme ale producției, nu o corecție de telefon. • `Elements/header.ctp:99` (desktop) — `if($wishlist_count > 0)`: la 0 favorite blocul „VEZI FAVORITE" NU EXISTĂ deloc; • `Themed/Mobile/Elements/header.ctp:64` — `if(AuthComponent::user())`: la 0 favorite iconița de inimă RĂMÂNE, dispare doar bulina. Portul are un singur markup pentru ambele lățimi, deci diferența se face aici: regula globală reproduce desktopul, iar cea cu `#header` din blocul ≤767px (secțiunea 4) reproduce telefonul. ⚠️ De ce o CLASĂ și nu `style="display:none"` inline, spre deosebire de bulina coșului: `applyCount()` (`js/shop-wishlist.js:146-150`) comută el însuși `wrapper.style.display`, calculat din numărul BRUT — deci ar arăta blocul unui membru al cărui contor filtrat e 0. Un stil inline pus de noi ar fi suprascris de al lui; o clasă nu. `js/shop-header-wishlist.js` golește inline-ul lui și comută clasa asta, adică redă decizia foii de stil. Consecință dorită, care în producție NU se întâmplă (R-4): butonul APARE la primul favorit al sesiunii și DISPARE la ștergerea ultimului, fără reîncărcare. */ .wishlist-wrapper.wishlist-empty { display: none; } /* ========================================================================== 5. Iconița de cont pentru un membru AUTENTIFICAT ========================================================================== Regula care transformă bara „Bine ai venit!" într-o iconiță de 30×30 (`shop-responsive.css`, blocul de la ~591) țintește `#header .loginbar > div > span > a:first-of-type`. Se potrivește DOAR pe ramura anonimă, unde linkul chiar stă într-un ``. Ramura autentificată are altă structură — wrapper-ul stă TOT într-un ``, dar linkul e nestat un nivel mai adânc: `span > div.account-dropdown-wrapper > a.account-link`. Deci `> span > a` nu-l prinde (primul copil al span-ului e un `div`, nu un `a`), iar linkul rămânea nestilizat. Rezultat măsurat la 375px: vizitatorul vedea iconița normală, iar un membru LOGAT avea în locul ei o cutie de **20×10**, practic invizibilă, plus spațiul rezervat gol. Adică exact utilizatorii care au nevoie de meniul de cont nu aveau cum să ajungă la el de pe telefon. Găsit 2026-08-30, ca observație colaterală, de agentul care adăuga iconița de favorite — nu-l căuta nimeni. Defect al portului, nu al producției. SVG-ul e același cu cel al ramurii anonime (Font Awesome „user", fill #333), ca cele patru iconițe din antet să arate la fel. ========================================================================== */ @media (max-width: 767px) { #header .loginbar > div > span > .account-dropdown-wrapper { font-size: 0; line-height: 0; color: transparent; position: relative; } #header .loginbar > div > span > .account-dropdown-wrapper > .account-link { display: block; width: 30px; height: 30px; padding: 0; font-size: 0; line-height: 0; color: transparent; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23333'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z'/%3E%3C/svg%3E") center / 21px 21px no-repeat; } /* Panoul „Contul meu" de sub iconiţă (`#shop-account-drawer`) îşi pune singur textul la loc — `font-size`, `line-height`, `color` sunt declarate pe el în `shop-account-drawer.css` §1, fiindcă acolo trebuie să bată şi moştenirile de pe desktop, nu doar `font-size: 0` de aici. Până pe 2026-09-02 aici era o regulă pentru `.account-dropdown`, dropdown-ul vechi de desktop; nodul ăla nu mai există în markup. */ }