/* * shop-catalog-mobile.css — PAGINILE DE CATALOG ȘI DE PRODUS PE TELEFON * ============================================================================ * * Al doilea strat propriu al portului (primul e `shop-product-card-mobile.css`, * care se ocupă STRICT de zona de imagine a cardului). Se încarcă peste * `public/css/legacy/*` (copiile byte-cu-byte ale foilor producției), peste * `shop-responsive.css` și — pe pagina de categorie — peste `shop-filters.css`. * * TOT fișierul e într-un singur `@media (max-width: 767px)`. La 768px, 1024px * și 1280px nu se potrivește NIMIC de aici; desktopul e neatins prin * construcție, nu prin verificare. * * Se împinge din view-urile de pagină (`@push('head')`), nu din layout: * layout-ul e fișier de shell, contestat, iar defectele reparate aici sunt ale * paginilor de listă și de produs. View-urile care îl împing: `catalog/category`, * `product/show`, `search/index`, `search/offers`, `search/tags`, * `products/latest`. * * ── CE REPARĂ, ÎN ORDINEA DIN AUDIT ───────────────────────────────────────── * 1. firimiturile de pe categorie erau tăiate cu „…" de o gardă de 15px; * 3. prețul cardului se rupea cu „Lei" singur pe al doilea rând; * 4. contorul „(N recenzii)" de pe pagina de produs se rupea pe două rânduri; * 5. selectorul de sortare de pe `/offers` (nod nou, DOAR mobil, ca butonul * „Filtrează" de pe categorie — pe desktop rămâne `display: none`); * 6. paginarea nu distingea pagina curentă și n-avea casete pe săgeți; * 8. contorul „Găsite: N produse" era strivit pe trei rânduri, iar panoul * „Rafinează căutarea" avea câmpuri de lățimi diferite; * 9. rândul de comenzi de pe categorie ocupa trei rânduri în loc de unul. * * Defectele 2 (miniatura pătrată) și 7 (`alt`) NU sunt aici: se rezolvă în * markup/PHP (`partials/product-grid.blade.php`, `CatalogService`). * * ── CE NU ATINGE, DELIBERAT ───────────────────────────────────────────────── * - zona de imagine a cardului (`shop-product-card-mobile.css`); * - `H5` și înălțimea benzii gri de preț — cardul rămâne la 314,3px; * - regulile de firimituri din `shop-responsive.css` (bara roșie, culorile, * `display: contents` de peste 768px de pe pagina de produs); * - sertarul de filtre, în afara UNEI declarații documentate la §9; * - bara fixă „Adaugă în coș", inima de favorite, galeria cu `scroll-snap`. */ /* ========================================================================== 0. PE DESKTOP NODUL NOU DE PE `/offers` NU EXISTĂ VIZUAL ========================================================================== Singura regulă din fișier care se aplică peste 767px, și singura care POATE atinge desktopul: `display: none` pe un nod pe care tema desktop a producției nu-l are deloc — adică zero diferență de geometrie (verificat la 1280, 1024 și 768). Stă ÎNAINTEA blocului `@media`, ca §5 (cu aceeași specificitate) să câștige pe telefon prin ordine — exact tiparul din `shop-filters.css:73-78`. */ .offers-sort { display: none; } @media (max-width: 767px) { /* ========================================================================== 1. FIRIMITURILE DE PE ANTETUL DE CATEGORIE / CĂUTARE — DIN MARGINE ÎN MARGINE ========================================================================== MĂSURAT (Chrome headless, 375×812, UA de iPhone, ambele părți): | pagină | text | container | rezultat | |------------------------------------------|------:|----------:|----------| | dev `…/lenjerie-pentru-ea/body` | 374px | 345px | TĂIAT | | prod acelaşi | 346px | 375px | întreg | | dev `…/pentru-ea/creme-si-geluri` | 415px | 345px | TĂIAT −70| | prod acelaşi | 415px | 375px | trece pe 2 rânduri, al doilea iese din bară | DOUĂ cauze, amândouă reale: (a) GARDA DE 15px. Bara producției (`.page-header`) stă direct în `body`, 0 → 375. La noi `.breadcrumb` e în `.box.category-heading` → `.col-main` → … → `.wrapper-full`, iar `.wrapper-full` are `padding: 0 15px` (`legacy/stylesheet.css`). Cei 15px de fiecare parte sunt corecți pentru conținut, dar bara roșie e un element „din margine în margine" — exact ca antetul. Se scot cu margini negative EGALE cu padding-ul, deci fără depășire orizontală (verificat: `documentElement.scrollWidth` rămâne 375). Rândul de comenzi de dedesubt îşi primeşte cei 15px înapoi (§9), fiindcă ACOLO garda e corectă — şi la producţie toolbar-ul stă în `.container-fluid`, nu la marginea ecranului. (b) FONTUL. Ambele părți scriu la 16px, dar producția randează „Helvetica Neue, Helvetica, Arial", iar portul „IBM Plex Sans", care e cu ~8% mai lat: ACELAȘI text („Stimulente Sexuale / Pentru ea / Creme si Pilule") măsoară 415px pe amândouă, dar al nostru pornește de la 345 de spațiu, nu de la 375. 30px recuperați din (a) nu ajung. 14px pe bară aduce cele două cazuri măsurate la 327px și 363px, adică sub cei 369px utili (375 − 2×3px de padding al barei). Nu schimbăm familia de fonturi — ar fi o decizie de shell, nu de catalog. `text-overflow: ellipsis` din `shop-responsive.css` RĂMÂNE plasa de siguranță pentru un lanț şi mai lung; scopul de aici e ca ea să nu se mai declanșeze pe lanțurile reale. NU repetăm nicio declarație de acolo (culori, fundal, `max-height`, `white-space`) — doar cele două care lipsesc. */ .category-heading > .breadcrumb { margin-left: -15px; margin-right: -15px; } .category-heading > .breadcrumb > span { font-size: 14px; } /* ========================================================================== 10. BANDA GRI CU TITLUL CATEGORIEI — TOT DIN MARGINE ÎN MARGINE ========================================================================== RAPORTAT de owner dintr-o captură de telefon (categoria „Bile anale"): „bara gri cu titlul pare tăiată în dreapta". MĂSURAT (Chrome 152 headless, UA de iPhone, 360/375/390/414, dev): | lăţime | h1.box-heading | .category-heading > .breadcrumb | |-------:|----------------|----------------------------------| | 360 | x=15 → r=345 | x=0 → r=360 | | 375 | x=15 → r=360 | x=0 → r=375 | | 390 | x=15 → r=375 | x=0 → r=390 | | 414 | x=15 → r=399 | x=0 → r=414 | NU e tăiat nimic: `overflow` e `visible`, `text-overflow` e `clip`, textul („Bile anale", 117,1px) încape lejer, iar `documentElement.scrollWidth` e egal cu `innerWidth` la toate cele patru lăţimi — ZERO depăşire orizontală. Ce vede owner-ul e o INCONSECVENŢĂ ÎNTRE CELE DOUĂ JUMĂTĂŢI ale aceluiaşi antet: §1 a scos bara roşie a firimiturilor din margine în margine (0→375), dar banda gri de deasupra ei, care e exact acelaşi fel de element — dungă solidă, colorată, cu text alb —, a rămas în gutierele de 15px ale lui `.wrapper-full`. Două dungi lipite, una cu 30px mai scurtă decât cealaltă: ochiul o citeşte pe cea scurtă ca „tăiată". ── PARITATE: CE ARE PRODUCŢIA ──────────────────────────────────────────── Tema mobilă a producţiei NU are banda deloc. `Themed/Mobile/Categories/ view.ctp:24` emite `

`, în `.container-fluid` (gutiere de 10px), iar `public_html/mobile/css/**` n-are nicio regulă `.box .box-heading` (grep) ⇒ text închis pe alb, fără fundal, fără majuscule. Măsurat pe producţie la 375px: x=10 → r=365, h=33,6, `background-color: rgba(0,0,0,0)`. Banda gri #AFAFAF de 46px vine din `legacy/common.css:41-52`, adică din tema DESKTOP, pe care portul o serveşte şi pe telefon (o singură temă responsivă). E o decizie de adopţie a portului, nu o divergenţă. ── DE CE FULL-BLEED ŞI NU „ca producţia" ──────────────────────────────── Reparaţia minimă pentru simptomul raportat e alinierea celor două dungi, nu ştergerea uneia: `background: transparent` + text închis ar schimba identitatea vizuală a paginii pe telefon (şi ar diverge de restul portului, unde `h*.box-heading` e banda gri pe TOATE paginile — cont, coş, articole, producători), pentru un defect care e strict de lăţime. Marginile negative sunt EGALE cu padding-ul lui `.wrapper-full`, deci nu introduc depăşire — acelaşi raţionament şi aceleaşi valori ca la §1, verificat: `scrollWidth` rămâne egal cu `innerWidth` la toate cele patru lăţimi. ⚠️ Selectorul e ancorat în `.category-heading`, deci atinge NUMAI antetul de categorie şi de căutare (`search/index.blade.php` foloseşte acelaşi bloc). `h2.box-heading` de pe cont, coş, articole sau `/manufacturers` nu se clinteşte — acolo banda e o casetă în conţinut, nu o dungă de antet. */ .category-heading > .box-heading { margin-left: -15px; margin-right: -15px; } /* ========================================================================== 9. RÂNDUL DE COMENZI (contor + sortare + „Filtrează") — UN SINGUR RÂND ========================================================================== MĂSURAT la 375px: la noi 113px pe TREI rânduri (contor y=234, sortare y=268, buton y=311); la producție 31px pe UNUL (`Themed/Mobile/Categories/view.ctp:37-59` — `.inner-content`, `display:flex; justify-content:space-between`, un `select` de 169px şi butonul de 149px). Diferența nu e de stil, e de CONȚINUT: bara producției are DOUĂ piese, a noastră TREI, fiindcă portul afișează şi contorul „Afișare: 60 din 420 produse" (181px) şi eticheta „Sortare:" (55px), pe care tema mobilă a producției nu le are deloc. Deci: pe telefon rândul arată ca al producției — sortare la stânga, buton la dreapta. Contorul NU dispare din DOM, doar din pagină: `` rămâne emis, iar `CategoryExtractor::devTotal()` îl citește din HTML, nu din randare — `parity:compare` nu se clintește. `#product-sort` are `min-width: 200px` INLINE (e în sursa producției, `Categories/view.ctp:66`), iar `shop-filters.css:130` a refuzat deliberat să-l strâmteze „ca să nu ceară `!important` pe un control care nu ține de sertar". Aici `!important` e singura cale şi e limitat la ≤767px: fără el selectorul nu poate coborî sub 200px + eticheta, iar rândul rămâne rupt. Tot aici se anulează `flex-wrap: wrap` din `shop-filters.css:133-137`. ⚠️ REGRESIE REPARATĂ 2026-08-31 — DE CE SELECTORII AU O CLASĂ ÎN PLUS Textul de mai sus spunea „foaia asta se împinge DUPĂ ea în `catalog/category.blade.php`", iar anularea se baza EXCLUSIV pe ordinea de încărcare: cele două reguli (a noastră şi `shop-filters.css:133`) erau ambele (0,3,1), deci decidea ultima din document. Între timp foaia a fost mutată în `layout.blade.php:198`, adică ÎNAINTEA lui `@stack('head')` — exact locul din care `category.blade.php:51` împinge `shop-filters.css`. Ordinea s-a inversat tăcut (verificat în HTML-ul servit: foaia 31 e `shop-catalog-mobile.css`, foaia 32 e `shop-filters.css`) şi `flex-wrap: wrap` a câştigat din nou. MĂSURAT ÎNAINTE (Chrome 152 headless, UA de iPhone, `/category/ jucarii-sexuale/bile-si-oua/bile-anale`): `.listing-toolbar` avea `flex-wrap: wrap` calculat şi h=79px pe DOUĂ rânduri la 360 şi 375 (`select` 15→360 pe rândul 1, butonul 217→360 pe rândul 2); la 390 şi 414 încăpea pe unul (h=36). Producţia, tema mobilă: h=30, un rând, la toate patru lăţimile. Reparaţia NU mai atinge ordinea foilor (ar muta o decizie de layout pentru un defect de catalog): se adaugă `.listing-toolbar` în selector ⇒ (0,4,1) faţă de (0,3,1) al lui `shop-filters.css`. Ordinea iese din ecuaţie, exact tiparul folosit deja la §8b („tipul în plus ne dă (0,1,1) şi scoate ordinea din ecuaţie"). Clasa există din `catalog/_listing-toolbar.blade.php:59` şi e emisă DOAR pe pagina de categorie, adică fix acolo unde regula trebuie. Rezultat calculat pe 375px: 345 utili − 143 (butonul) − 10 (gap) = 192px pentru `select`, adică peste cei 169px ai producției. */ .category-heading > .breadcrumb > div.listing-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; /* OBLIGATORIU cu padding-ul de mai jos: `shop-filters.css:136` pune `width: 100%` pe acelasi element, iar `100%` + `2 x 15px` de padding pe `content-box` ar da 405px de continut intr-un ecran de 375 — masurat, `documentElement.scrollWidth` sarea la 406. */ box-sizing: border-box; /* Garda scoasă la §1 se pune înapoi AICI: bara roșie e full-bleed, comenzile nu. */ padding-left: 15px; padding-right: 15px; } /* Contorul: ascuns doar unde bara are şi butonul de filtre (categorie), fiindcă doar acolo nu încap amândouă. Clasa vine din `catalog/_listing-toolbar.blade.php`. Pe `/search` şi `/products/latest` contorul RĂMÂNE (vezi §8). */ .listing-toolbar > span:first-child { display: none; } .category-heading .sort-options { flex: 1 1 auto; min-width: 0; } /* „Sortare:" — tema mobilă a producției n-are etichetă, doar `select`-ul. */ .category-heading .sort-options label { display: none; } .category-heading .sort-options select { flex: 1 1 auto; width: 100%; min-width: 0 !important; max-width: 100%; } .category-heading .shop-filters-toggle { flex: 0 0 auto; } /* Anulează `flex-wrap: wrap` pus în `shop-filters.css` cât timp bara avea trei piese. `.listing-toolbar` în plus faţă de selectorul lui identic (`.category-heading .breadcrumb > div:last-child`) ridică specificitatea de la (0,3,1) la (0,4,1), deci regula câştigă indiferent care dintre cele două foi se încarcă prima — v. nota de regresie de la începutul §9. */ .category-heading .breadcrumb > div.listing-toolbar:last-child { flex-wrap: nowrap; } /* ========================================================================== 8a. `/search` — CONTORUL „Găsite: N produse" PE UN RÂND ========================================================================== MĂSURAT: `` de 61,9px, text pe TREI benzi (y = 236,3 / 255,3 / 274,3): „Găsite:" / „60" / „produse". Cauza e aceeași ca la §9 — e un flex item fără `flex-shrink: 0`, iar `#product-sort` cu `min-width: 200px` îi ia tot spațiul şi îl strânge la lățimea celui mai lung cuvânt. Aici contorul NU se ascunde: pe `/search` şi `/products/latest` nu există buton de filtre, deci încap amândouă. 345 − 115 (contorul, o linie) − 10 = 220px pentru `select`. */ .category-heading > .breadcrumb > div > span { flex: 0 0 auto; white-space: nowrap; } /* ========================================================================== 3. PREȚUL CARDULUI — „Lei" NU MAI RĂMÂNE SINGUR PE RÂNDUL DOI ========================================================================== MĂSURAT la 375px, prin `top`-ul lui `.price-currency` faţă de `.price-integer` din ACELAȘI ``: | pagină | carduri | cu prețul rupt | |------------|--------:|---------------:| | categorie | 60 | 17 | | oferte | 20 | 18 | | căutare | 60 | 5 | Cauza: `.price` e `display: flex` (`legacy/products.css:278-287`) cu două `inline-block` care se strâng (flex-shrink implicit 1). Perechea „306,00 Lei" (12px) + „222,00 Lei" (16px) cere ~154px într-o cutie de 144,5, deci AMBELE se strâng sub lățimea lor naturală şi rup textul în interior — exact între preț şi monedă, unde `modules/_price.blade.php` are un spaţiu real între `` şi ``. Reparaţia păstrează forma producției şi n-o forţează: - `white-space: nowrap` pe fiecare `` de preț ⇒ un preț nu se mai poate rupe NICIODATĂ în interior; - `flex-wrap: wrap` pe `.price` ⇒ când amândouă nu încap pe un rând, prețul vechi rămâne întreg pe primul şi cel nou întreg pe al doilea, în loc să depăşească cutia. Banda gri are 44px, iar două linii de 12+16px încap. Corecție la brief: „se rupe şi când nu există reducere" NU se confirmă. Măsurat pe 145 de carduri fără reducere (categorie, oferte, căutare, la 375px ŞI la 320px): 0 rupte. Fără preț tăiat există un singur ``, care primeşte toată lăţimea (86,8px din 144,5) şi încape. Regulile de mai jos îl protejează oricum. NU se atinge: `height`, `background`, `padding` vertical, `font-size` — cardul rămâne la 314,3px, iar banda gri arată exact ca ieri. */ .product-grid > div > .price { flex-wrap: wrap; column-gap: 4px; row-gap: 0; /* `legacy/products.css:279` are `padding: 4px 8px` — valoare de card lat, de desktop. Tema mobila a productiei nu are banda deloc, deci n-are nici padding de replicat; 2px lateral duc latimea utila de la 144,5 la 156,5px, adica exact atat cat trebuie ca perechea „pret vechi + pret nou" sa incapa pe un rand (masurat: 153,6px). Padding-ul VERTICAL si `height` raman neatinse: banda gri si inaltimea cardului (314,3px) sunt bit cu bit ce erau. */ padding-left: 2px; padding-right: 2px; } .product-grid > div > .price > span { white-space: nowrap; /* Tema mobila a productiei scrie preturile de card la 14px (`.price-info`, masurat: 14px pentru pretul nou, 12px pentru cel vechi), nu la cei 16px ai temei desktop (`legacy/products.css:288-296`). Cu 16px perechea are nevoie de ~165px intr-o cutie de 156,5 si se stivuieste pe doua randuri; cu 14px cere 153,6 si sta pe unul, ca la productie. Inaltimea benzii (2em, fixata) nu se schimba. */ font-size: 14px; } /* `old-price` ramane cu cei 12px ai ei — identici pe ambele parti. `margin-right` insa PLEACA: `legacy/products.css:311-322` ii pune 5px, iar de cand `.price` e flex cu `column-gap`, cei 5px se ADUNA peste gol. Masurat: 66,86 + 5 + 4 + 82,77 = 158,6px intr-o cutie de 156,5 — perechea se stivuia la 2px de a incapea. Fara marginea dubla: 153,6px, deci un rand. */ .product-grid > div > .price > span.old-price { font-size: 12px; margin-right: 0; } /* ========================================================================== 4. PAGINA DE PRODUS — „(N recenzii)" PE UN SINGUR RÂND ========================================================================== MĂSURAT pe `/product/bile-lelo-luna-classic`, 375px: `.rating-row` de 169,7px cu stele 72,8 + gap 8 + valoare 29,6 + gap 8 + contor 51,3 = fix 169,7, iar ancora „(8 recenzii)" se rupe în două benzi (y = 611,3 şi 630,3) şi urcă rândul la 38px. Lățimea coloanei vine din `_mobile.blade.php` §D: `.product-price-section` e `grid-template-columns: 1fr auto`, iar coloana `auto` (prețul) ia 167,3px. Producția are acolo 224px (`.product-info-header`) şi gap de 6px, nu 8 — cu ele contorul ei stă pe un rând (măsurat: 1 dreptunghi, rând de 26px). Deci: gap-ul producției (6px) + `nowrap` pe contor. 72,8 + 6 + 29,6 + 6 + 56 = 170,4px, adică 0,7px peste cei 169,7 disponibili — pe care coloana `1fr` îi ia din coloana prețului (167,3 → 166,6). Prețul e `flex-wrap: wrap` cu `justify-content: flex-end`, deci se re-aliniază fără să se rupă altfel; verificat în browser. */ .product .product-price-section > .product-rating .rating-row { gap: 6px; } .product .product-price-section > .product-rating .rating-count { white-space: nowrap; } /* ========================================================================== 6. PAGINAREA — PAGINA CURENTĂ SE VEDE, SĂGEȚILE AU CASETĂ ========================================================================== MĂSURAT pe `/category/…/body`, 375px: | element | dev (înainte) | producţie (tema Mobile) | |-------------------|--------------------------|---------------------------| | pagina curentă | 26×26, fundal alb, chenar gri, doar `font-weight` + subliniere | 32×36, fundal #cb0108, text alb, bold | | vecin | 26×26, chenar gri | 32×36, chenar #ddd, radius 6px | | săgeată `‹ › « »` | 24×24, FĂRĂ chenar, FĂRĂ fundal | casetă identică cu a numerelor | Valorile de mai jos sunt copiate din `public_html/mobile/css/pagination.css` (`min-width: 32px; height: 36px; padding: 0 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px`), inclusiv roşul paginii curente. Markup-ul NU se schimbă: paginatorul legacy (`partials/pagination.blade.php`) rămâne `