/* * shop-responsive.css — STRATUL nostru de adaptare, peste `shop-legacy.css`. * INT-1, punctul 8 (addendum). * * REGULA: `shop-legacy.css` (copia foii combinate a producției) rămâne BAZA și * NU se rescrie. Aici se adaugă doar ce lipsește, în ordinea de încărcare de * după ea. Motivul e decizia de proiect: portul e O SINGURĂ TEMĂ RESPONSIVĂ, * care înlocuiește tema desktop fixă (`viewport width=1024`) plus tema `Mobile` * parțială a producției. Deci NU „restaurăm comportamentul producției", ci * „păstrăm look-ul producției și îl facem să se adapteze". * * NU e o redesenare: zero culori noi, zero fonturi noi, zero componente noi. * * Ținte: * - fără scroll orizontal la 360px / 768px / 1280px; * - meniul principal rămâne utilizabil pe mobil; * - grila de produse cade la 3, apoi la 2 coloane; * - coloanele (conținut + bară laterală) se stivuiesc sub 1024px. * * ATENȚIE la ordinea de încărcare: fișierul TREBUIE inclus după * `shop-legacy.css`; multe reguli de aici au aceeași specificitate ca ale ei și * câștigă doar prin poziție. */ /* ========================================================================== 0. Cârlig de harness — titlul cardului de produs ========================================================================== `App\Services\Parity\CategoryExtractor::fromDev()` citește numele produsului din `.//h3`, iar harness-ul e poarta de calitate și nu se modifică. Producția emite `
`. Ca randarea să rămână identică, oglindim aici regula `.product-grid > div > h5` a producției (copiată declarație cu declarație) pentru `h3`, plus resetul de titlu implicit al browserului (h3 e altfel 1.17em/bold). Vezi `resources/views/shop/partials/product-grid.blade.php`. Se ȘTERGE în momentul în care selectorul dev al harness-ului acceptă `h5`. ========================================================================== */ .product-grid > div > h3 { text-align: center; font-size: 13px; font-weight: normal; color: #404040; height: 32px; padding: 2px 8px; vertical-align: text-bottom; margin: 0; } .product-list > div > h3 { font-size: 21px; font-weight: normal; margin: 0; } /* ========================================================================== 1. Cutii care nu au voie să depășească viewport-ul ========================================================================== Foaia producției NU declară nicăieri `box-sizing: border-box` global, dar are containere de tipul `width: 100%` + `padding: 0 15px` (`.wrapper-full`) — în `content-box` asta înseamnă 30px de depășire pe ORICE lățime. Nu se vede pe producție doar fiindcă `viewport` e fixat la 1024. Aplicăm `border-box` ȚINTIT, pe containerele implicate, nu global: un `*{}` ar schimba zeci de componente legacy care se bazează pe content-box. ========================================================================== */ .page, .wrapper-full, .main-container, .main, .col-main, .col2-left-layout .col-left, .header-container, .box, .box-content, .filters-sidebar, .product-grid > div { box-sizing: border-box; } /* Media care altfel forțează lățimea părintelui. `.st img` (0,1,1) și celelalte reguli cu clasă rămân mai specifice, deci plăcile de magazin nu se schimbă. ⚠️ RESTRÂNS la mobil, 2026-08-30, împreună cu regula de tabele de mai jos și din același motiv. `max-width: 100%` pe o imagine dintr-o celulă de tabel îi anulează contribuția la lățimea MINIMĂ a celulei: layoutul de tabel poate atunci strânge celula la aproape zero, iar imaginea o urmează. Măsurat pe pagina de coș, desktop: `td.cos-product-image` = 11px, imaginea 0×0, deși fișierul se încărca corect la 160×160. Poza produsului lipsea pur și simplu. Producția nu are regula asta pe desktop — e o adăugire a portului, făcută ca să prevină scroll orizontal pe telefon. Acolo rămâne. */ @media (max-width: 767px) { img, video, iframe { max-width: 100%; } } /* Blocurile inerent late își fac propriul scroll, nu îl dau paginii. ⚠️ `display: block` a fost RESTRÂNS la mobil, 2026-08-30. Global, pe TOATE tabelele, desființa layoutul de tabel și pe desktop: celulele nu mai participă, `td` se strânge la lățimea conținutului, iar o imagine cu `max-width: 100%` dintr-un bloc de lățime zero se randează **0×0**. Efecte măsurate, ambele pe desktop: • imaginea produsului din coș dispărea complet (td 11px, img 0×0, deși fișierul se încărca la 160×160). Semnalat de owner. • tabelul din detaliul comenzii a avut nevoie de un `display: table` local, scris de alt modul ca să scape de regula asta — adică plătea deja prețul. Scopul real al regulii — tabele late care produc scroll orizontal pe telefon — se atinge la fel de bine doar sub 768px, unde e și aplicată acum. Pe desktop rămân `max-width` și `overflow-x`, care nu strică layoutul. */ table, pre { max-width: 100%; overflow-x: auto; } @media (max-width: 767px) { table, pre { display: block; } } /* ========================================================================== 1b. PESTE 1024px, `.wrapper-full` revine la `content-box` — ca producția ========================================================================== DECIZIE DE PROIECT (owner + coordonator, 2026-08-30): pe desktop **paritatea bate îmbunătățirea**. Motivul e cel din `docs/parity/08`: dacă site-ul reconstruit nu arată ca cel actual, colegii nu îl adoptă. O coloană de produse care lipsește se vede imediat; 20px de scroll orizontal la exact o lățime de fereastră nu se vede, și producția îi are dintotdeauna. ── ARITMETICA (de ce 30px, și de unde) ────────────────────────────────── `.wrapper-full { width: 100%; padding: 0 15px; max-width: 1024/1270/1520 }` (`stylesheet.css:1732-1765`). `max-width` se aplică pe cutia de CONȚINUT în `content-box` și pe cutia EXTERIOARĂ în `border-box`: producție (content-box) max-width 1270 ⇒ conținut 1270, total 1300 portul (border-box) max-width 1270 ⇒ total 1270, conținut 1240 Aceiași 30px de padding: adăugați la producție, absorbiți la noi. Toată diferența măsurată în aval vine de aici — `.col-main` 1008 vs 988, iar de acolo 4 carduri pe rând vs 3, iar de acolo ~240px de înălțime × 15-20 de rânduri. ── DE CE NU „mărim max-width 1270→1300 și 1520→1550" ──────────────────── Pentru că `width: 100%` limitează oricum cutia la lățimea părintelui: în `border-box`, lățimea finală e `min(100% din părinte, max-width)`. La un viewport de 1280, `min(1280, 1300) = 1280` ⇒ conținut 1250 ⇒ `.col-main` 998 ⇒ `4 × 250 = 1000 > 998` ⇒ TOT 3 carduri pe rând. Varianta cu `max-width` mărit repară 1600, dar NU repară banda 1270-1299 — exact fereastra de la care a pornit discuția. Singurul mod de a obține conținut de 1270px într-un viewport de 1280px este să DEPĂȘEȘTI viewport-ul cu 20px, adică exact ce face `content-box`. ── SFERA: doar ≥1024px ────────────────────────────────────────────────── Sub 1024px rămâne `border-box` din blocul 1. Acolo depășirea ar fi de 30px pe un ecran de 375px — adică ~8% din lățime, un defect real de utilizare, pe lățimile unde tema noastră unică e singura care există (producția servește acolo tema `Mobile`, cu alt markup). Peste 1024px depășirea e de 0-30px pe o fereastră de desktop, e comportamentul actual al producției, și dispare complet de la 1300px în sus. ── REZULTATUL AȘTEPTAT (carduri pe rând) ──────────────────────────────── card ≤1259px = 19.5em = 234px · ≥1260px = 20em = 240px · ≥1530px = 19.2em = 230.4px (`products.css:183,229,234`), toate `border-box` la noi (deci cu 2px mai înguste decât la producție, care le adaugă bordura), + 10px margine: viewport noi: conținut/col-main/rând producție: conținut/col-main/rând 1024 1024 / 772 / 3 1024 / 770 / 3 1280 1270 / 1018 / 4 1270 / 1008 / 4 1600 1520 / 1218 / 5 1520 / 1218 / 5 `.header-container` intră în aceeași regulă: poartă ambele clase (`class="header-container wrapper-full"`) și are și el `padding: 0 15px` (`header.css:684`), deci trebuie să rămână aliniat cu coloanele de dedesubt. ========================================================================== */ @media (min-width: 1024px) { .wrapper-full, .header-container { box-sizing: content-box; } } /* ========================================================================== 2. 1024–1529px: plasă de siguranță pentru coloana de conținut ========================================================================== ISTORIC, ca să nu se reintroducă niciuna dintre variantele greșite: (v1, moștenit) `@media (max-width: 1339px) { .col-main { width: auto } }`. Un float cu `width: auto` face shrink-to-fit, iar „preferred width"-ul unui container de carduri flotante e mult peste o linie ⇒ `.col-main` lua TOATĂ lățimea, `.col-left` (float: left) nu mai încăpea și CĂDEA SUB conținut. Aspectul pe două coloane dispărea între 1024 și 1339px. Măsurat: ecart de înălțime la 1280 egal cu înălțimea barei laterale a fiecărei pagini (magazine 1317 cu 2 widget-uri … categorie 3832 cu 5). (v2, al meu) `width: calc(100% - 252px) !important`. A reparat aspectul pe două coloane (home 6772 → 3797 vs 3759 la producție), dar rula pe un container cu 30px prea îngust (vezi blocul 1b) ⇒ `.col-main` 988 în loc de 1008 ⇒ 3 carduri pe rând în loc de 4 pe paginile de grilă. (v3, acum) Blocul 1b redă containerului lățimea producției, deci lățimile FIXE ale producției încap din nou, exact ca la ea: 1024-1269: 770 + 236 + 10 = 1016 ≤ 1024 1270-1529: 1008 + 236 + 10 = 1254 ≤ 1270 ≥1530: 1218 + 280 + 10 = 1508 ≤ 1520 (regula producției, neatinsă) Nu mai suprascriem `width`: lăsăm `columns.css` să conducă, deci coloana are EXACT lățimea producției, nu una „aproape". Ce rămâne e doar o PLASĂ DE SIGURANȚĂ, cu `max-width`, nu cu `width`: `max-width` nu poate lărgi nimic, doar împiedică depășirea. Când totul e în regulă, `min(1008, 1018) = 1008` ⇒ zero efect. Dacă vreodată containerul redevine mai îngust (cineva reintroduce `border-box` pe `.wrapper-full`, sau se schimbă padding-ul), coloana se strânge în loc să arunce bara laterală sub conținut — adică defectul v1 nu se mai poate întoarce tăcut. ========================================================================== */ @media (min-width: 1024px) and (max-width: 1529px) { .col2-left-layout .col-main { max-width: calc(100% - 252px); } } /* ========================================================================== 3. Sub 1024px: coloanele se stivuiesc (conținut întâi, bară laterală după) ========================================================================== Float-urile nu pot fi reordonate, deci `.main` devine coloană flex și ordinea e explicită — bara laterală trebuie să rămână SUB conținut, ca pe mobil produsele să fie primul lucru vizibil. ========================================================================== */ @media (max-width: 1023px) { .main.clearfix { display: flex; flex-direction: column; } /* Regula de bază a producției e `.col-main { width: 640px }` — depășește viewport-ul sub 640px pe ORICE layout, inclusiv `fullwidth` (care n-are clasa `col2-left-layout`). De aceea se neutralizează pe container, nu doar pe layout-ul cu două coloane. */ .main-container .col-main, .col2-left-layout .col-main { float: none !important; width: 100% !important; margin: 0 !important; order: 1; } .col2-left-layout .col-left, .col2-left-layout .col-left.sidebar { float: none !important; width: 100% !important; margin: 16px 0 0 0 !important; order: 2; } /* `width: 250px; margin-right: 20px` — fix, gândit pentru o coloană îngustă. */ .filters-sidebar { width: auto; margin-right: 0; } } /* ========================================================================== 4. Grila de produse: 4 → 3 → 2 coloane ========================================================================== Cardul producției e `width: 19.5em; float: left; margin: 6px 5px 8px 5px` (deci 10px de margine orizontală). Păstrăm float-ul și marginile — schimbăm doar lățimea, în procente, ca să nu atingem restul regulilor cardului. `min-height` fix (26.4em) rămâne pe desktop; pe mobil îl relaxăm. ========================================================================== */ @media (max-width: 1023px) { .product-grid > div { width: calc(33.333% - 10px); } } @media (max-width: 767px) { .product-grid > div { width: calc(50% - 10px); min-height: 0; } .product-grid .image img { width: 100%; height: auto; } } /* ========================================================================== 5. Header: logo + căutare + acțiuni se rearanjează ========================================================================== `.header-container` e deja flex cu `space-between`; îi permitem să treacă pe mai multe rânduri, iar căutarea (care are `flex: 1; max-width: 500px`) ocupă un rând propriu sub logo și acțiuni. ========================================================================== */ @media (max-width: 1023px) { .header-container { flex-wrap: wrap; gap: 10px; } .header-search { flex: 1 1 100%; max-width: none; margin: 0; order: 3; } .header-actions { flex-wrap: wrap; gap: 10px; } #header .loginbar { padding-right: 15px; } } @media (max-width: 767px) { .header-logo { flex: 0 0 120px; margin: 2px 8px 2px 0; } .cart-comparison-wrapper { flex: 1 1 auto; } } /* ========================================================================== 6. Bara de meniu: bandă cu scroll orizontal propriu ========================================================================== `#header .links` are `height: 37px` fix, iar `#header .links .menu a` e `float: left; padding: 13px 16px` — cele 7 intrări depășesc 700px, deci la 360px ar împinge toată pagina. Le punem într-o bandă care derulează pe orizontală: aspectul rămâne cel al producției (aceleași padding-uri, aceeași ordine), doar că surplusul nu mai iese din pagină. ========================================================================== */ @media (max-width: 1023px) { #header .links { height: auto; } #header .links .menu { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #header .links .menu a { float: none; flex: 0 0 auto; white-space: nowrap; } #header .links .social-media-icons { float: none; display: flex; justify-content: center; line-height: 1; padding: 8px 0; } #header .links .social-media-icons a { float: none; margin: 0 5px; } } /* ========================================================================== 7. Mega-meniul pe ecrane mici ========================================================================== `.mega-menu-layout` e `display: flex; min-height: 400px` — pe mobil devine bloc, ca panoul de subcategorii să curgă sub lista de categorii. Foaia producției are deja reguli pentru `.mega-menu-primary` sub 768px; aici doar deschidem containerul și limităm înălțimea. ========================================================================== */ @media (max-width: 1023px) { .mega-menu-layout { display: block; min-height: 0; } .products-mega-menu { max-height: 75vh; } .mega-menu-secondary-panel { position: relative; top: auto; left: auto; right: auto; } } /* ========================================================================== 8. Antetul de categorie și blocurile de conținut ========================================================================== */ @media (max-width: 767px) { .box .home-content > div > .col-wide { width: 100% !important; } .category-heading .breadcrumb { align-items: flex-start; } .category-heading .sort-options select { max-width: 100%; min-width: 0; } /* Paginatorul legacy e un rând de linkuri; îl lăsăm să treacă pe mai multe. */ .pagination center { display: block; line-height: 2.2; } } /* ========================================================================== 9. MOBIL (≤767px): header-ul devine compact, ca tema Mobile a producției ========================================================================== MĂSURAT ÎN BROWSER (2026-08-30, headless Chrome la 375px, UA de iPhone): pagina portului era de 2–4× mai înaltă decât a producției — home 11869 px vs. 2751 px, categorie 17012 vs. 9442, produs 9993 vs. 3324. Cauza NU e CSS-ul per pagină (aceea e rezolvată separat): cu UA de mobil producția servește o A DOUA TEMĂ, cu markup complet diferit (`
`, navbar Bootstrap cu iconițe SVG, `.search-box`, `#menu-content` cu acordeon). Noi randăm header-ul DESKTOP, stivuit pe verticală: bara „Bine ai venit!", logo, „Telefon: …" ca text, cutia „COS CUMPARATURI / VEZI COSUL", căutarea, rândul de tab-uri, rândul de iconițe sociale — abia apoi conținutul. Decizia de proiect e O SINGURĂ TEMĂ RESPONSIVĂ: nu portăm a doua temă. Deci forma compactă trebuie CÂȘTIGATĂ din markup-ul nostru, din CSS. Ținta e silueta pe care colegii o știu deja de pe telefon: [logo] ☎ 🛒 👤 ← un singur rând [ căutare, lățime completă ................. ] [ ☰ PRODUSE — bară roșie, lățime completă ... ] [ Articole · Magazine · Produse noi · … ] ← bandă compactă conținut Ce se schimbă e DOAR aranjarea: zero culori noi (roșul e `#D91E18` / `#CD0018` din foaia producției), zero fonturi noi, zero componente noi. Iconițele sunt exact cele din tema Mobile a producției (Font Awesome 6 Free, aceleași path-uri), inline ca `data:` URI — deci ZERO cereri de rețea în plus și nimic de copiat în `public/img/`. Markup-ul NU se atinge (`shop/partials/header.blade.php` nu e al meu): totul de mai jos e ascundere, redimensionare și repoziționare. ========================================================================== */ @media (max-width: 767px) { /* ── Rândul 1: logo + iconițe ───────────────────────────────────────── `#header` are deja `position: relative` în foaia producției (`mega-menu.css:30`), deci bara de cont se poate ancora în el fără nicio regulă nouă de poziționare pe părinte. */ /* Padding-ul rândului e fixat aici ca ancorarea iconiței de cont (absolută, mai jos) să aibă o înălțime cunoscută: 1px bordură + 8px + 56px + 8px + 1px bordură = 74px. */ #header #container.header-row { padding: 8px 0; } #header .header-container { min-height: 56px; padding: 4px 15px; /* Loc rezervat pentru iconița de cont, care e absolută (vezi mai jos): altfel s-ar suprapune peste iconița de coș. */ padding-right: 54px; gap: 8px; row-gap: 8px; } /* Logo-ul: 165px fix pe desktop ⇒ prea lat lângă trei iconițe. Producția servește exact `width:119px` pe mobil. */ #header .header-logo { flex: 0 0 116px; margin: 0; } #header .header-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 10px; margin-left: auto; } /* ── „Telefon: 0332.413.401" → iconiță de telefon ───────────────────── Eticheta „Telefon:" dispare, numărul rămâne apelabil (`tel:`), dar ca suprafață de atins de 30px, nu ca text pe un rând întreg. */ #header .header-contact { font-size: 0; line-height: 0; white-space: nowrap; margin: 0; } #header .header-contact > span { display: none; } #header .header-contact a { display: block; width: 30px; height: 30px; margin: 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 512 512' fill='%23333'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center / 22px 22px no-repeat; } /* ── Cutia „COS CUMPARATURI / VEZI COSUL" → iconiță de coș ──────────── Cutia are chenar, etichetă, stare („Coșul este gol") și un buton roșu lat — pe 375px ocupă singură aproape un rând. Rămâne butonul, ca pătrat roșu de 34px cu iconița de coș; linkul e neschimbat (`/cart`). */ #header .cart-comparison-wrapper { flex: 0 0 auto; } #header .header-cart-comparison { padding: 0; border: 0; background: none; } #header .cart-comparison-info { display: none; } #header .cart-comparison-button { display: block; width: 34px; height: 34px; padding: 0; margin: 0; font-size: 0; line-height: 0; color: transparent; overflow: hidden; border-radius: 3px; background: #D91E18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23fff'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32H560c26.5 0 46.1 24.7 40 50.5l-40 168C555.6 267.5 541.5 280 525 280H170.7l6.4 32H500c26.5 0 48 21.5 48 48s-21.5 48-48 48H150.6C126 408 105 390.4 100.2 366.3L46.2 96H24C10.7 96 0 85.3 0 72V24zM128 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 / 19px 19px no-repeat; } /* ── Bara „Bine ai venit! Autentifica-te sau creeaza un cont." ──────── Pe 375px se rupe pe două rânduri și consumă ~66px înainte de orice. Devine a treia iconiță din rând (cont), ancorată în `#header`. Linkul păstrat e „Autentifica-te"; „creeaza un cont" rămâne accesibil din pagina de login, ca în tema Mobile a producției. */ #header .loginbar { position: absolute; top: 0; right: 12px; /* Exact înălțimea primului rând (vezi `#container.header-row` de mai sus). Centrarea e făcută cu flex, nu cu un `top` calculat, ca o abatere de câțiva pixeli să nu strice alinierea celor trei iconițe. */ height: 74px; display: flex; align-items: center; z-index: 20; width: auto; margin: 0; padding: 0; border: 0; line-height: 0; background: none; background-image: none; } #header .loginbar > div { width: auto; padding: 0; margin: 0; text-align: right; background: none; } /* `font-size: 0` stinge nodurile de text („Bine ai venit!", „sau", „un cont.") fără să atingă markup-ul. */ #header .loginbar > div > span { font-size: 0; line-height: 0; color: transparent; } #header .loginbar > div > span > a { display: none; } #header .loginbar > div > span > a:first-of-type { 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; } /* ── Rândul 2: căutarea, lățime completă ───────────────────────────── (`order: 3` vine deja din blocul 5; aici doar strângem spațiile.) */ #header .header-search { order: 3; flex: 1 1 100%; max-width: none; margin: 0; } /* ── Rândul 3: „PRODUSE" ca bară roșie pe toată lățimea ────────────── Exact rolul antetului roșu al acordeonului din tema Mobile. Clasa e deja roșie în foaia producției (`mega-menu.css:2-16`); aici doar o lățim. */ #header .links { height: auto; } /* `flow-root`, nu `block`: bara roșie e pe un rând, iar celelalte intrări rămân flotante (ca în producție) — containerul trebuie să le cuprindă, altfel `.links` se prăbușește la înălțime 0 și meniul intră peste conținut. `overflow: hidden` ar fi mers și el, dar `flow-root` nu taie nimic. (Blocul 6, la ≤1023px, face `.menu` un flex cu scroll orizontal; aici îl anulăm — pe telefon vrem bara roșie pe toată lățimea.) */ #header .links .menu { display: flow-root; overflow: visible; } #header .links .menu a.products-menu-toggle { display: flex; justify-content: center; width: 100%; box-sizing: border-box; float: none; padding: 12px 15px; margin: 0 0 1px 0; } /* ── Rândul 4: celelalte intrări, bandă compactă cu scroll ─────────── NU se ascund: „Produse noi", „Producatori" și „Newsletter" nu există nicăieri în subsol, deci ascunderea rândului le-ar face inaccesibile pe telefon. Rămân, dar la 11px și cu padding strâns — un singur rând de ~30px, nu unul de 37px cu litere spațiate care iese din ecran. */ #header .links .menu a:not(.products-menu-toggle) { float: left; padding: 9px 10px; font-size: 11px; letter-spacing: 0; line-height: 1; } /* Iconițele sociale: pur decorative, iar tema Mobile a producției nu le are deloc în header. Rămân în subsol. */ #header .links .social-media-icons { display: none; } /* Slotul de notificări e gol în Faza 1; pe mobil îi luăm și înălțimea. */ #header #notification { display: none; } /* ── Meniul de categorii: listă verticală, nu mega-meniu reflowat ──── Foaia producției transformă `.mega-menu-primary-list` într-o bandă cu scroll ORIZONTAL sub 991px (`mega-menu.css:268-279`) — pe telefon ies categoriile pe lângă ecran și panoul de subcategorii se deschide sub ele, lung cât pagina. Îl aducem la forma pe care o are acordeonul producției: o listă verticală de categorii, pe toată lățimea, sub bara roșie. Panourile de subcategorii se ascund: deschiderea lor la atingere ar cere JS (`public/js/shop-mega-menu.js` / `shop.js`), pe care nu-l dețin — vezi „Rămas de făcut" din raport. Fiecare categorie de nivel 1 rămâne un LINK funcțional către pagina ei, deci nimic nu devine inaccesibil. */ .products-mega-menu { max-height: 70vh; } .mega-menu-primary { width: 100%; max-height: none; border-right: none; box-shadow: none; } .mega-menu-primary-list { display: block; overflow: visible; } .mega-menu-primary-item { display: block; white-space: normal; border-right: none; border-bottom: 1px solid #e0e0e0; } .mega-menu-primary-link { padding: 13px 16px; font-size: 13px; } .mega-menu-secondary { display: none; } /* ── Intrările secundare, mutate ÎN SERTAR ─────────────────────────── „Articole · Magazine · Produse noi · Producatori · Newsletter · Contact" se împachetau pe DOUĂ rânduri în header (măsurat la 375px: y=206 și y=235) și mâncau ~60px pe fiecare pagină. `shop.js` (`initMobileDrawerNav`) le mută, pe mobil, ca ultimi copii ai lui `.mega-menu-content` — adică sub categorii, exact unde le ține sertarul producției (`Modules/categories.ctp:86-102`: Magazine, Articole, Contact, după cele 7 antete de categorie). Selectorul cere `> a` DIRECT sub `.mega-menu-content`: singurele `` aflate acolo sunt cele mutate de noi. Categoriile stau mai adânc, în `.mega-menu-layout`, deci nu se ating. Metricile sunt ale lui `.mega-menu-primary-link` de mai sus (13px / 13px 16px), ca sertarul să se citească drept O SINGURĂ listă, nu două componente lipite. Producția face la fel: acolo TOATE intrările din sertar — categorii și linkuri deopotrivă — poartă același antet roșu, deci tratament uniform. Zero culori noi: `#333` și `#e0e0e0` sunt deja în blocul de mai sus. */ #products-mega-menu .mega-menu-content > a { display: block; float: none; padding: 13px 16px; font-size: 13px; line-height: 1.2; letter-spacing: 0; color: #333; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid #e0e0e0; } /* Prima intrare mutată marchează granița „categorii ↑ / restul site-ului ↓". O linie mai groasă, în roșul care e deja pe `border-top` al sertarului (`mega-menu.css:47`, `#CD0018`) — nicio culoare nouă. */ #products-mega-menu .mega-menu-content > .mega-menu-layout + a { border-top: 2px solid #CD0018; } } /* ========================================================================== 10. VARIANTA C DE MOBIL — categoriile deasupra produselor, colapsate ========================================================================== TOT blocul e activ DOAR când `div.page` poartă `mobile-variant-c` (`shop_mobile_variant()` ⇒ `config('shop.mobile_variant')` sau `?mobile=c`) ȘI DOAR sub 768px. Varianta A (implicit) nu se atinge de nimic din ce urmează — nici măcar nu se potrivește vreun selector. DESKTOPUL E NEATINS PRIN CONSTRUCȚIE: nu există nicio regulă cu `mobile-variant-c` în afara acestui `@media (max-width: 767px)`. La 1280 `.mobile-variant-c` e un token de clasă mort. ── CE AM MĂSURAT PE PRODUCȚIE (2026-08-30, Chrome headless 375px, UA iPhone) Tema `Mobile` a producției, cele patru pagini cerute: | pagină | înălțime | acordeon în flux | „Cele Mai | logo-uri | | | @375 | | Vândute" | producători | |-------------------|---------:|-----------------------------|-------------|--------------| | `/` | 2751 | DA — 294→2457 px (2163 px) | **absent** | **absent** | | `/category/body` | 9445 | nu (doar în sertarul ☰) | **absent** | **absent** | | `/product/` | 3323 | nu (doar în sertarul ☰) | **absent** | **absent** | | `/offers` | 2859 | nu (doar în sertarul ☰) | **absent** | **absent** | Trei fapte care CORECTEAZĂ premisa din raportul `css-perpagina` §G: 1. `#menu-content { display: none; }` — antetul acordeonului din header e un SERTAR, deschis de ☰ (`menu_click()` din `mobile/js/main.js:174-181`). Pe categorie/produs/oferte nu se vede deloc. 2. Acordeonul pe care îl vede vizitatorul pe homepage e o A DOUA randare a aceluiași modul, inline, în `Home/index.ctp:199` — DUPĂ carusel. De aceea aici banner-ul rămâne primul (vezi C.2). 3. Acordeonul acela NU e închis: `data-toggle="collapse"` e sintaxă Bootstrap 3, iar bundle-ul mobil e Bootstrap **5.1.3** (`data-bs-toggle`) ⇒ handler-ul e mort, `.panel-collapse` n-are nicio regulă în foaie, deci nivelul 1 e PERMANENT DESCHIS (2163 px din cei 2751 ai paginii). Doar nivelul 2 (`.subcategory-container`, `style="display:none"` inline) se deschide la atingere. Varianta C de aici randează COLAPSAT — cum a fost definită opțiunea C și cum e singura formă care nu e un regres de înălțime. E o ABATERE DELIBERATĂ de la producție, în favoarea utilizatorului. „Cele Mai Vândute" și producătorii se ascund pe mobil pentru că producția nu îi randează NICIODATĂ pe mobil — nu e o preferință, e măsurătoarea. ── ZERO CULORI, ZERO ASSET-URI, ZERO CLASE NOI DE MARKUP ──────────────── Antetul roșu nu se construiește: `stylesheet.css:560-569` (foaia DESKTOP a producției, copiată byte-cu-byte) dă deja lui `.box-category > ul > li > span` exact stilul antetului temei Mobile — `#fff`, 18px, 600, `line-height: 46px`, `url('/img/header-background-red.png') repeat-x`, `background-color: #CD0018`. Aceleași valori, în ambele teme ale producției. Aici doar se descoperă. ========================================================================== */ @media (max-width: 767px) { /* ── C.1 Bara laterală își pierde cutia, ca piesele ei să se poată ordona individual. `display: contents` scoate DOAR cutia `.col-left.sidebar`; copiii ei devin elemente flex ale lui `.main.clearfix` (care e deja `display:flex; flex-direction:column` din blocul 3), deci pot primi `order` fiecare separat. Fără asta, „categoriile sus, filtrele jos" ar fi imposibil: ambele sunt în ACEEAȘI cutie. `!important` NU e neglijență: foaia PRODUCȚIEI declară, la o lățime mai mare decât a noastră, mega-menu.css @media (max-width: 991px) .col2-left-layout .col-left.sidebar { display: block !important } (verificat în browser cu `CSSRule.selectorText` — v. raportul). Fiindcă `public/css/legacy/**` e copia byte-cu-byte a producției și nu se atinge, singura cale e să răspundem în aceeași monedă, în interiorul unui media query mai îngust. */ .mobile-variant-c .col2-left-layout .col-left.sidebar { display: contents !important; } /* ── C.2 Homepage: banner-ul rămâne PRIMUL, ca în producție. Acordeonul producției e randat după carusel (`Home/index.ctp:199`), nu înaintea lui. `.slider-container` e emis exclusiv de modulul `banner` (layout 1 ⇒ doar homepage), deci `:has()` limitează `display: contents` la singura pagină care are nevoie de el; pe restul paginilor `.col-main` rămâne o cutie obișnuită și blocul 3 îl conduce nestingherit. Pe un browser fără `:has()` regula pică în întregime și singura urmare e că pe homepage acordeonul apare ÎNAINTEA banner-ului — degradare vizuală, nu funcțională. */ .mobile-variant-c .col2-left-layout .col-main:has(> .slider-container) { display: contents; } .mobile-variant-c .col-main:has(> .slider-container) > * { order: 2; } .mobile-variant-c .col-main > .slider-container { order: -1; margin-bottom: 12px; } /* ── C.3 Modulul de categorii urcă și devine vizibil. E singurul `.box` din bara laterală cu stil INLINE: producția îl randează `