/* ============================================================================= * cmv3 — PAGINA DE PRODUS (macheta v2 „Produs.dc.html") * Perechea PHP: wp-content/mu-plugins/cmv3-produs.php * Fișier izolat: nu se scrie în style.css. * ========================================================================== */ /* ---------- 1. GALERIA: foto mare + miniaturi dedesubt ------------------- */ .single-product .woocommerce-product-gallery .flexy-view[data-flexy-view="boxed"] { border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 16px; overflow: hidden; background: #fff; } /* Blocksy pune inline `aspect-ratio:3/4` pe imagini; pozele de produs sunt pătrate, deci le încadrăm 4/3 „contain" ca în machetă (foto centrată, fără tăiere). */ .single-product .woocommerce-product-gallery .flexy-items .ct-media-container img, .single-product .woocommerce-product-gallery .flexy-items .ct-media-container picture img { aspect-ratio: 4 / 3 !important; object-fit: contain !important; width: 100%; height: auto; max-height: 520px; background: #fff; } /* miniaturi: 88×70, colț 9px, cea activă cu chenar albastru (ca în machetă) */ .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] { margin-top: 12px; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol { --thumbs-width: 88px; --pills-wrap: wrap; gap: 12px; margin: 0; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li { width: 88px; height: 70px; flex: 0 0 auto; border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 9px; overflow: hidden; background: #fff; padding: 3px; transition: border-color .15s ease; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li:hover { border-color: var(--cmv-blue, #2A5FB7); } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li.active { border: 2px solid var(--cmv-blue, #2A5FB7); padding: 2px; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li .ct-media-container, .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li img { width: 100%; height: 100%; display: block; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li img { aspect-ratio: auto !important; object-fit: contain !important; border-radius: 6px; } /* ---------- 2. COLOANA DREAPTĂ: titlu, meta, buy-box -------------------- */ /* Cardul se mută de pe toată coloana pe buy-box, exact ca în machetă. `:has()` = doar acolo unde învelișul chiar a fost generat de mu-plugin. */ .single-product div.product .entry-summary:has(.cmv-buybox), .single-product .product-entry-wrapper > .entry-summary:has(.cmv-buybox) { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .single-product .entry-summary .product_title { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; color: var(--cmv-navy, #16233D); margin: 0 0 10px; } /* rândul „stele · cod produs · categorii" */ .single-product .entry-summary .cmv-metaline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; } .single-product .entry-summary .cmv-metaline:empty { display: none; } .single-product .entry-summary .cmv-metaline .product_meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 13px; color: var(--cmv-text-faint, #8B97A8); } .single-product .entry-summary .cmv-metaline .product_meta > span { display: inline-flex; align-items: center; gap: 5px; position: relative; } .single-product .entry-summary .cmv-metaline .product_meta > span + span::before { content: ""; width: 1px; height: 12px; background: #D5DCE7; margin-right: 12px; } /* categoriile și etichetele sunt deja în firul Ariadnei; în machetă rândul are doar cod + marcă, iar lista lungă de categorii ieșea din coloană. */ .single-product .entry-summary .cmv-metaline .product_meta .posted_in, .single-product .entry-summary .cmv-metaline .product_meta .tagged_as { display: none; } .single-product .entry-summary .cmv-metaline .cmv-marca { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cmv-text-soft, #4A5568); } .single-product .entry-summary .cmv-metaline .cmv-marca::before { content: ""; width: 1px; height: 12px; background: #D5DCE7; } .single-product .entry-summary .cmv-metaline .cmv-marca:first-child::before { display: none; } .single-product .entry-summary .cmv-metaline .cmv-marca a { font-weight: 700; color: var(--cmv-blue, #2A5FB7); text-decoration: none; } .single-product .entry-summary .cmv-metaline .product_meta .sku { font-family: 'Space Grotesk', sans-serif; color: var(--cmv-text-soft, #4A5568); } .single-product .entry-summary .cmv-metaline .product_meta a { color: var(--cmv-text-soft, #4A5568); font-weight: 600; text-decoration: none; } .single-product .entry-summary .cmv-metaline .product_meta a:hover { color: var(--cmv-blue, #2A5FB7); } .single-product .entry-summary .cmv-metaline .woocommerce-product-rating { margin: 0; font-size: 13.5px; } /* descrierea scurtă = argumentele de deasupra cardului */ .single-product .entry-summary .woocommerce-product-details__short-description { font-size: 14.5px; line-height: 1.6; color: var(--cmv-text-soft, #4A5568); margin: 0 0 4px; } .single-product .entry-summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } .single-product .entry-summary .woocommerce-product-details__short-description ul { margin: 0; padding: 0; list-style: none; } .single-product .entry-summary .woocommerce-product-details__short-description li { position: relative; padding-left: 22px; margin-bottom: 8px; } .single-product .entry-summary .woocommerce-product-details__short-description li::before { content: "\2713"; position: absolute; left: 0; color: var(--cmv-blue, #2A5FB7); font-weight: 800; } /* CARDUL de cumpărare */ .single-product .entry-summary .cmv-buybox { margin-top: 18px; padding: 24px; background: #fff; border: 1px solid #DBE4F2; border-radius: 16px; box-shadow: 0 14px 34px rgba(22, 35, 61, .07); } .single-product .entry-summary .cmv-buybox > .price { margin: 0 0 2px; line-height: 1.15; } .single-product .entry-summary .cmv-buybox .cmv-fara-tva { margin: 0 0 14px; } .single-product .entry-summary .cmv-buybox .ct-product-add-to-cart { margin: 0; } /* starea de stoc: bulină colorată + text, ca în machetă */ .single-product .entry-summary .cmv-buybox .stock { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: 0 0 14px; } .single-product .entry-summary .cmv-buybox .stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .single-product .entry-summary .cmv-buybox .stock.in-stock { color: #2F7A52; } .single-product .entry-summary .cmv-buybox .stock.available-on-backorder, .single-product .entry-summary .cmv-buybox .stock.out-of-stock { color: var(--cmv-amber, #E8A13A); } .single-product .entry-summary .cmv-buybox form.cart { margin: 0; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp { margin-top: 18px; padding-top: 16px; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp li { position: relative; } /* variații: eticheta și selectorul aerisit în card */ .single-product .entry-summary .cmv-buybox table.variations { margin: 0 0 12px; } .single-product .entry-summary .cmv-buybox .woocommerce-variation-price .price { font-size: 26px; font-weight: 800; color: var(--cmv-navy, #16233D); } /* ---------- 3. TABURI: bara + panourile --------------------------------- */ /* 3.0 STRUCTURA — zona de file și „Produse similare" pe toată lățimea. MĂSURAT 21.09.2026: `div.product` e o grilă Blocksy de două coloane (`grid-template-columns: 756px 420px` = galerie | caseta de cumpărare), iar `.product-entry-wrapper` din ea e `display:contents` ⇒ ORICE copil al lui `div.product` cade într-o coloană. Zona de file ajungea în coloana 1 (756 px din 1216 disponibili), iar `#cm-similar`, pe care JS-ul din `carmedic-product.php` îl mută după file, ajungea în coloana 2 (420 px, cu carduri de 120 px lățime). ⚠️ `max-width: none` de pe panou (rândul de mai jos, scris în 19.08 pentru „toată lățimea") nu putea ajuta niciodată: constrângerea era COLOANA, nu lățimea maximă — o reparație care arăta aplicată. Probat în pagina livrată: cu regula asta, 756 → 1216 px, iar cardurile blocului „Produse similare" trec de la 120 la 292 px. */ .single-product div.product > .woocommerce-tabs, .single-product div.product > .cm-similar, .single-product div.product > #cm-similar { grid-column: 1 / -1; } /* 3.1 Bara de file, după `Produs Desktop Tab-uri CarMedic.dc.html`. Blocksy o desenează ca pastile (rază 999 px, fundal verde pe cea activă) și îi lasă linkului culoarea de temă — MĂSURAT: text `rgb(21,89,237)` (albastru) pe pastilă verde `#25803a`, contrast ~1,5:1, adică ilizibil. Macheta cere file cu linie dedesubt. ⛔ Fără `overflow:hidden` pe înveliș: bara e lipicioasă (JS-ul îi pune `top`), iar un ancestor cu overflow ascuns omoară `position:sticky`. */ /* ⚠️ Prefixul `body` nu e de decor: `carmedic-product.php` tipărește la `wp_footer` un `body.single-product .woocommerce-tabs .tabs.wc-tabs{…!important}` — aceeași specificitate ca un selector fără `body`, dar mai TÂRZIU în document, deci câștiga el. Măsurat: bara rămânea cu `padding:8px 0` și linie de 2 px, deși regula de aici avea `!important`. ⛔ Nu se repară acolo: fișierul ăla merge și pe carmedic.ro de PRODUCȚIE (încă XStore), iar `produs.css` se încarcă numai cu tema cmv3. */ body.single-product .woocommerce-tabs ul.tabs.wc-tabs { justify-content: flex-start !important; text-align: left; font-family: var(--cmv-font); gap: 0 !important; padding: 0 12px !important; margin: 0 0 6px !important; border-bottom: 1px solid var(--cmv-border, #E6E9ED) !important; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li, .single-product .woocommerce-tabs .tabs.wc-tabs .et-woocommerce-tab { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; border-bottom: 3px solid transparent !important; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li > a, .single-product .woocommerce-tabs .tabs.wc-tabs .et-woocommerce-tab > a { font-family: var(--cmv-font); font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.2; padding: 15px 16px !important; color: var(--cmv-text-faint, #5f6a78) !important; white-space: nowrap; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li.active, .single-product .woocommerce-tabs .tabs.wc-tabs .et-woocommerce-tab.cm-active { border-bottom-color: var(--cmv-green, #25803a) !important; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li.active > a, .single-product .woocommerce-tabs .tabs.wc-tabs .et-woocommerce-tab.cm-active > a { color: var(--cmv-navy, #1B2430) !important; } .single-product .woocommerce-tabs ul.tabs.wc-tabs li:hover > a, .single-product .woocommerce-tabs .tabs.wc-tabs .et-woocommerce-tab:hover > a { color: var(--cmv-navy, #1B2430) !important; } /* Titlul secțiunii „Specificații" trebuie să rămână VIZIBIL: panoul `--additional_information` e MUTAT de `carmedic-spec-move.php` în interiorul descrierii (înainte de „Ce conține pachetul"), așa că regula „ascunde titlul Descrierii" din `carmedic-product-desc.php:153` îl prindea și pe el, ca descendent. Măsurat pe pagina livrată: `display:none`, deși secțiunea are 780 px de conținut și filă proprie în bară — o filă care duce la o secțiune fără titlu e o secțiune pierdută. ⛔ Nu se repară în mu-plugin: acela merge și pe carmedic.ro de PRODUCȚIE, unde ar face să APARĂ un titlu pe care nimeni nu l-a cerut. `produs.css` se încarcă doar cu tema cmv3. */ body.single-product .woocommerce-Tabs-panel--additional_information .cm-sec-title { display: block !important; } /* PE TELEFON bara rămâne UN rând care se trage cu degetul, nu un teanc. MĂSURAT la 390 px: Blocksy lasă `flex-wrap:wrap` pe `ul.tabs` și întinde fiecare `li` pe toată lățimea ⇒ cele cinci file se așezau pe cinci rânduri, iar bara LIPICIOASĂ ajungea 234 px, adică 28 % din ecranul telefonului, permanent. `overflow-x:auto` și `white-space:nowrap` existau deja în `carmedic-product.php`, dar nu foloseau la nimic cât timp rândul se putea rupe. ⚠️ Cauza REALĂ, găsită abia la a doua măsurătoare: sub un anumit prag Blocksy pune `flex-direction: column` pe bară. Cu `flex-wrap:nowrap` singur, filele rămâneau stivuite — o reparație care trecea drept aplicată. Se citește proprietatea calculată, nu se presupune. */ body.single-product .woocommerce-tabs ul.tabs.wc-tabs { flex-direction: row !important; flex-wrap: nowrap !important; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs > li { flex: 0 0 auto !important; width: auto !important; } /* Blocksy pune pseudo-elemente de decor pe pastile — nu mai au ce căuta pe file cu linie. */ .single-product .woocommerce-tabs ul.tabs.wc-tabs li::before, .single-product .woocommerce-tabs ul.tabs.wc-tabs li::after { display: none !important; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel { max-width: none; /* 19.08: pe toată lățimea paginii, cerere Marius */ margin-inline: 0; font-size: 14.5px; line-height: 1.7; color: var(--cmv-text-soft, #4A5568); } .single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--cmv-navy, #16233D); margin: 0 0 12px; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel h3 { font-size: 17px; font-weight: 800; color: var(--cmv-navy, #16233D); margin: 24px 0 10px; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel h4 { font-size: 15px; font-weight: 700; color: var(--cmv-navy, #16233D); margin: 0 0 6px; } /* tabelul de specificații — chenar rotunjit, etichete pe 240px, rânduri alternate */ .single-product .woocommerce-tabs table.shop_attributes, .single-product .woocommerce-tabs table.cm-pd-specs { width: 100%; border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 0 0 18px; } .single-product .woocommerce-tabs table.shop_attributes th, .single-product .woocommerce-tabs table.cm-pd-specs th { width: 240px; text-align: left; font-size: 13.5px; font-weight: 700; color: #5A6675; background: transparent; padding: 12px 20px; border: 0; border-bottom: 1px solid #EDF1F7; } .single-product .woocommerce-tabs table.shop_attributes td, .single-product .woocommerce-tabs table.cm-pd-specs td { font-size: 13.5px; color: var(--cmv-navy, #16233D); padding: 12px 20px; border: 0; border-bottom: 1px solid #EDF1F7; font-style: normal; } .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(even) th, .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(even) td, .single-product .woocommerce-tabs table.cm-pd-specs tr:nth-child(even) th, .single-product .woocommerce-tabs table.cm-pd-specs tr:nth-child(even) td { background: var(--cmv-bg-softer, #FBFCFE); } .single-product .woocommerce-tabs table.shop_attributes tr:last-child th, .single-product .woocommerce-tabs table.shop_attributes tr:last-child td, .single-product .woocommerce-tabs table.cm-pd-specs tr:last-child th, .single-product .woocommerce-tabs table.cm-pd-specs tr:last-child td { border-bottom: 0; } .single-product .woocommerce-tabs table.shop_attributes td p { margin: 0; } .single-product .woocommerce-tabs table.shop_attributes td a, .single-product .woocommerce-tabs table.cm-pd-specs td a { color: var(--cmv-blue, #2A5FB7); } /* ---------- 4. TAB „COMPATIBILITATE" ------------------------------------ */ .cmv-compat-intro { margin: 0 0 14px; font-size: 14px; color: var(--cmv-text-soft, #4A5568); } .cmv-compat-list { display: flex; flex-wrap: wrap; gap: 8px; } .cmv-compat-pill { display: inline-flex; align-items: center; border: 1px solid #CDD6E4; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #33415C; background: var(--cmv-bg-softer, #FBFCFE); text-decoration: none; transition: border-color .15s ease, color .15s ease; } a.cmv-compat-pill:hover { border-color: var(--cmv-blue, #2A5FB7); color: var(--cmv-blue, #2A5FB7); } .cmv-compat-note { margin: 14px 0 0; font-size: 13px; color: var(--cmv-text-faint, #8B97A8); } /* ---------- 5. TAB „VIDEO" ---------------------------------------------- */ .cmv-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--cmv-border, #E3E8F0); background: #0F1622; } .cmv-video-embed iframe, .cmv-video-embed video, .cmv-video-embed > * { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } /* ---------- 6. DESCRIEREA (blocurile .cm-pd din conținut) ---------------- */ .single-product .woocommerce-tabs .cm-pd-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cmv-blue, #2A5FB7); display: block; margin: 0 0 8px; } .single-product .woocommerce-tabs .cm-pd-lead { font-size: 15.5px; line-height: 1.7; color: var(--cmv-text-soft, #4A5568); } .single-product .woocommerce-tabs .cm-pd-note { border: 1px solid var(--cmv-border, #E3E8F0); border-left: 3px solid var(--cmv-blue, #2A5FB7); background: var(--cmv-bg-tint, #EEF3FB); border-radius: 10px; padding: 14px 18px; margin: 16px 0; } .single-product .woocommerce-tabs .cm-pd-note p { margin: 0; font-size: 14px; } .single-product .woocommerce-tabs .cm-pd-note--warn { border-left-color: var(--cmv-amber, #E8A13A); background: #FDF6EA; } .single-product .woocommerce-tabs .cm-pd-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 8px; } .single-product .woocommerce-tabs .cm-pd-feat { border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 12px; padding: 16px 18px; background: #fff; } .single-product .woocommerce-tabs .cm-pd-feat h4 { margin: 0 0 6px; } .single-product .woocommerce-tabs .cm-pd-feat p { margin: 0; font-size: 14px; line-height: 1.6; } .single-product .woocommerce-tabs .cm-pd-check, .single-product .woocommerce-tabs .cm-pd-pack { list-style: none; margin: 0 0 12px; padding: 0; } .single-product .woocommerce-tabs .cm-pd-check li, .single-product .woocommerce-tabs .cm-pd-pack li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.55; } .single-product .woocommerce-tabs .cm-pd-check li::before, .single-product .woocommerce-tabs .cm-pd-pack li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cmv-blue, #2A5FB7); font-weight: 800; } /* 01.10.2026 (D4, Discord 23.09): bifa din „Ce contine pachetul” sta pe MIJLOCUL primului rand. Regula de mai sus pune top:0, dar li-ul are padding-top din carmedic-product-desc.php (5px la pack, 6px la check) => bifa iesea ~8px mai sus decat textul. .775em = jumatate din line-height 1.55. */ .single-product .woocommerce-tabs .cm-pd-pack li::before, .single-product .woocommerce-tabs .cm-pd-check li::before { top: calc(5px + .775em); transform: translateY(-50%); box-sizing: border-box; display: flex; align-items: center; justify-content: center; line-height: 1; } .single-product .woocommerce-tabs .cm-pd-check li::before { top: calc(6px + .775em); color: #fff; } /* ✓ alb in cercul verde (verde pe verde nu se vedea) */ .single-product .woocommerce-tabs .cm-pd-check li::after { display: none; } .single-product .woocommerce-tabs .cm-pd-faq-q, .single-product .woocommerce-tabs .cm-pd-faq summary { font-weight: 700; color: var(--cmv-navy, #16233D); cursor: pointer; } .single-product .woocommerce-tabs .cm-pd-faq > * { border-bottom: 1px solid #EDF1F7; padding: 12px 0; } .single-product .woocommerce-tabs .cm-pd-faq-a p { margin: 6px 0 0; font-size: 14px; } .single-product .woocommerce-tabs .cm-pd-cta { margin-top: 22px; background: var(--cmv-bg-tint, #EEF3FB); border: 1px solid #DBE4F2; border-radius: 14px; padding: 20px 24px; } .single-product .woocommerce-tabs .cm-pd-cta-t { font-weight: 800; color: var(--cmv-navy, #16233D); display: block; margin-bottom: 6px; } /* ---------- 7. MOBIL ----------------------------------------------------- */ @media (max-width: 999px) { .single-product .entry-summary .cmv-buybox { padding: 20px 18px; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li { width: 72px; height: 58px; } .single-product .woocommerce-tabs .cm-pd-features { grid-template-columns: 1fr; } .single-product .woocommerce-tabs table.shop_attributes th, .single-product .woocommerce-tabs table.cm-pd-specs th { width: 40%; padding: 10px 14px; } .single-product .woocommerce-tabs table.shop_attributes td, .single-product .woocommerce-tabs table.cm-pd-specs td { padding: 10px 14px; } } /* ============================================================================= REPARAȚII 18.08 (seara) — bugul de layout + butonul de coș din machetă ============================================================================= */ /* ⛔ BUG: Blocksy randează taburile (și secțiunile de după) ÎN AFARA wrapperului `.product-entry-wrapper.is-width-constrained`, direct pe containerul full-width ⇒ tot corpul produsului începea lipit de marginea din stânga a ecranului, tăiat. Le dăm containerul machetei. (Pe desktop treaba asta o preia grila din secțiunea v4 de la finalul fișierului.) */ .single-product div.product > *:not(.product-entry-wrapper) { max-width: 1280px; margin-inline: auto; padding-inline: 32px; width: 100%; box-sizing: border-box; } /* wrapperul de sus e 1280 fără padding ⇒ conținutul ieșea la x=80, nu la 112 ca în machetă */ .single-product div.product > .product-entry-wrapper.is-width-constrained { padding-inline: 32px; } /* panourile de tab se aliniază la stânga în interiorul containerului, nu se centrează */ .single-product .woocommerce-tabs .woocommerce-Tabs-panel { margin-inline: 0; } /* ---- Butonul „Adaugă în coș": exact ca în machetă, pe toată lățimea -------- */ /* Macheta NU are selector de cantitate în buy-box, iar Marius a confirmat: 99,99% din comenzi sunt pentru 1 bucată, cantitatea se schimbă în coș. */ .single-product .entry-summary .cmv-buybox form.cart .quantity, .single-product .entry-summary .cmv-buybox form.cart .qty, .single-product .entry-summary .cmv-buybox form.cart .cmv-cant { display: none !important; } .single-product .entry-summary .cmv-buybox form.cart { margin: 0; display: block; } .single-product .entry-summary .cmv-buybox form.cart button.single_add_to_cart_button, .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button { display: block; width: 100%; float: none; margin: 0; /* ⭐ 21.09.2026 — macheta v3 NOUĂ: buton verde de 52px, colț de 12px. Valorile stau aici, în regula veche, nu într-una nouă adăugată la sfârșit: aceea avea specificitate mai mică (`.single_add_to_cart_button` vs `button.single_add_to_cart_button`) și pierdea în tăcere. */ display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 18px; border: none; border-radius: 12px; background: #25803a; color: #FFFFFF; font-family: inherit; font-size: 15.5px; font-weight: 800; line-height: normal; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; box-shadow: 0 8px 20px rgba(47, 158, 68, .22); } .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button:hover { background: #25803A; box-shadow: 0 10px 26px rgba(47, 158, 68, .30); } .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(47, 158, 68, .22); } .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button:disabled { background: #cdd6e4; color: #6b7a90; box-shadow: none; cursor: not-allowed; } /* ---- Butonul de WhatsApp: aceeași greutate vizuală, discret (cerere Marius) --- */ .single-product .summary .cmv-wa-buy { box-shadow: 0 2px 6px rgba(22, 35, 61, .06); transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .single-product .summary .cmv-wa-buy:hover { box-shadow: 0 8px 20px rgba(22, 35, 61, .12); transform: translateY(-1px); } .single-product .summary .cmv-wa-buy:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(22, 35, 61, .10); } /* ============================================================================= V4 — 18.08.2026 · macheta „design/v4/Produs2.dc.html", 1:1 la 1440px Perechea PHP: mu-plugins/cmv3-produs.php, secțiunea 4. Valorile de mai jos sunt MĂSURATE din machetă (getComputedStyle), nu ochite. Culorile oklch din machetă, traduse: albastru 0.5/260 = #2A5FB7 (--cmv-blue), 0.45/260 = #1C50A7, verde 0.55/150 = #298646, pastilă 0.95/25 = #FFE7E4 pe 0.45 0.16 25 = #9B1E22, placă aleasă 0.97/258 = #EFF6FF. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. GRILA PAGINII — coloane 756 / 40 / 420, ca în machetă (live era 588/40/588) Trucul: `display:contents` pe wrapperul Blocksy și pe cutia taburilor. Boxele lor dispar, copiii devin celule în grila lui `div.product`, dar DOM-ul rămâne NEATINS — deci JS-ul de taburi al WooCommerce (care caută `closest()`) merge mai departe. Fără asta ar fi trebuit mutate noduri cu JS și s-ar fi rupt schimbarea panourilor. -------------------------------------------------------------------------- */ @media (min-width: 1000px) { .single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 40px; row-gap: 22px; /* Rândul 1 = exact cât ține galeria (`min-content`), rândul 2 „elastic" (1fr) înghite tot surplusul de înălțime al buy-box-ului. Cu `auto auto`, browserul împarte surplusul în mod egal între rânduri și bara de taburi cobora cu ~320px sub galerie (măsurat: taburi la y=1167 în loc de 866). */ grid-template-rows: min-content 1fr auto auto; max-width: 1280px; margin-inline: auto; padding-inline: 32px; width: 100%; box-sizing: border-box; align-items: start; } .single-product div.product > .product-entry-wrapper { display: contents; } /* Blocksy dă galeriei `width:var(--product-gallery-width,50%)` și rezumatului `calc(100% - …)` dintr-un selector cu `:has()` — care cântărește 4 clase. În grilă lățimea o dă coloana, deci le punem pe „auto"; ca să batem regula temei, selectorul nostru trebuie să treacă tot prin `.product-entry-wrapper` (5 clase). Fără asta ieșeau 378/210px în loc de 756/420. */ .single-product div.product .product-entry-wrapper .woocommerce-product-gallery, .single-product div.product .product-entry-wrapper .entry-summary { width: auto; max-width: none; min-width: 0; flex: none; margin-inline: 0; /* Blocksy punea un margin de 40px pe rezumat → 380px, nu 420 */ } .single-product div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; } .single-product div.product .entry-summary { grid-column: 2; grid-row: 1 / 3; } .single-product div.product .cmv-desc-switch { grid-column: 1 / -1; grid-row: 3; } /* ⛔ REPARAT 19.08 — bara de ancore și secțiunile stau ÎMPREUNĂ, în ultimul rând, pe toată lățimea. Înainte bara era singură în coloana stângă (rândul 2) iar panourile aici, în rândul 4: între ele rămânea exact cât depășea buy-box-ul galeria (măsurat 559px fără recenzii / 696px cu recenzii). Rândul 2 rămâne gol și `1fr` — el înghite surplusul buy-box-ului. */ .single-product div.product > .cmv-sections { grid-column: 1 / -1; grid-row: 4; display: block; } /* în grilă padding-ul stă pe `div.product`, nu pe fiecare copil */ .single-product div.product > *:not(.product-entry-wrapper), .single-product div.product > .product-entry-wrapper.is-width-constrained { max-width: none; padding-inline: 0; margin-inline: 0; } } /* ----------------------------------------------------------------------------- 2. GALERIA — foto 756×480 (raport 63/40), miniaturi 88×70 -------------------------------------------------------------------------- */ .single-product .woocommerce-product-gallery .flexy-items .ct-media-container img, .single-product .woocommerce-product-gallery .flexy-items .ct-media-container picture img { aspect-ratio: 63 / 40 !important; max-height: none; } /* Produs cu O SINGURA poza (fara `.flexy-items`): regula de mobil de la §14 nu se aplica pe desktop si ramanea inline-ul Blocksy `aspect-ratio:3/4` = caseta de 1008px pe o poza patrata (09.10.2026). Acelasi raport ca galeria cu slider. */ .single-product .woocommerce-product-gallery > .ct-product-gallery-container > .ct-media-container img { aspect-ratio: 63 / 40 !important; object-fit: contain !important; width: 100%; height: auto; background: #fff; } /* ----------------------------------------------------------------------------- 3. COLOANA DREAPTĂ — titlu, rândul de meta, cardul -------------------------------------------------------------------------- */ .single-product div.product .entry-summary { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .single-product div.product .entry-summary > * { margin: 0; } .single-product .entry-summary .product_title { margin: 0; } /* rândul „★★★★★ 4,8 (23 recenzii) │ Cod: … │ Marcă: …" ⚠️ Stelele apar DOAR dacă produsul are recenzii reale. Pe 18.08 s-au șters de pe site ratingurile fantomă (stele fără nicio recenzie) — nu le readucem prin CSS. Când nu există rating, Blocksy nu randează nimic și rândul se strânge. */ .single-product .entry-summary .cmv-metaline { gap: 6px 12px; } .single-product .entry-summary .cmv-metaline > * + *::before { content: ""; flex: 0 0 1px; width: 1px; height: 12px; background: #D5DCE7; } .single-product .entry-summary .cmv-metaline .woocommerce-product-rating { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; line-height: 1; } .single-product .entry-summary .cmv-metaline .star-rating { color: var(--cmv-amber, #E8A13A); } .single-product .entry-summary .cmv-metaline .woocommerce-review-link { color: var(--cmv-text-faint, #8B97A8); font-weight: 600; text-decoration: none; } .single-product .entry-summary .cmv-metaline .product_meta, .single-product .entry-summary .cmv-metaline .sku_wrapper { font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--cmv-text-faint, #8B97A8); text-transform: none; /* tema scria „COD:"; macheta are „Cod:" */ letter-spacing: 0; } .single-product .entry-summary .cmv-metaline .product_meta .sku { color: var(--cmv-text-faint, #8B97A8); } .single-product .entry-summary .cmv-metaline .cmv-marca { font-family: 'Archivo', sans-serif; font-size: 13px; gap: 12px; /* spațiul dintre linia separatoare și text, ca în machetă */ } /* descrierea scurtă nu e în macheta v4, dar e conținut real — o lăsăm, cu aceeași spațiere ca restul coloanei */ .single-product .entry-summary .woocommerce-product-details__short-description { margin: 0; } /* ----------------------------------------------------------------------------- 4. CARDUL DE CUMPĂRARE — o singură coloană cu pas de 14px, ca în machetă Nivelurile intermediare pe care le bagă Blocksy/Woo (`.ct-product-add-to-cart`, `form.cart`, `.single_variation_wrap`, `.woocommerce-variation-add-to-cart`) sunt „aplatizate", ca distanțele să fie cele din machetă și nu suma unor margini moștenite. -------------------------------------------------------------------------- */ .single-product .entry-summary .cmv-buybox { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px; background: #fff; border: 1px solid #DBE4F2; border-radius: 16px; box-shadow: 0 14px 34px rgba(22, 35, 61, .07); } .single-product .entry-summary .cmv-buybox > * { margin: 0; } .single-product .entry-summary .cmv-buybox .ct-product-add-to-cart, .single-product .entry-summary .cmv-buybox form.cart, .single-product .entry-summary .cmv-buybox .ct-cart-actions { display: flex; flex-direction: column; min-width: 0; /* lanțul de flex-uri: fără min-width:0 conținutul lung lățea cardul */ gap: 14px; margin: 0; } .single-product .entry-summary .cmv-buybox .single_variation_wrap, .single-product .entry-summary .cmv-buybox .woocommerce-variation-add-to-cart, .single-product .entry-summary .cmv-buybox .woocommerce-variation.single_variation { display: contents; } /* --- preț: curent · vechi tăiat · pastila roșie ------------------------------ Ordinea din HTML-ul WooCommerce e apoi ; macheta cere invers, deci inversăm cu `order` în loc să rescriem markupul. */ .single-product .entry-summary .cmv-buybox > .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-size: 34px !important; /* tema impune 30px cu un selector mai greu */ font-weight: 800; line-height: 1.1; color: var(--cmv-navy, #16233D); } .single-product .entry-summary .cmv-buybox > .price ins { order: 1; background: none; text-decoration: none; font-size: 34px; font-weight: 800; color: var(--cmv-navy, #16233D); } .single-product .entry-summary .cmv-buybox > .price del { order: 2; opacity: 1; font-size: 16px; font-weight: 400; color: #66727F; text-decoration: line-through; } .single-product .entry-summary .cmv-buybox > .price .pro-from-label { order: 0; font-size: 16px; font-weight: 600; color: #66727F; } .cmv-reducere { order: 3; display: inline-block; padding: 4px 10px; border-radius: 999px; background: #FFE7E4; color: #9B1E22; font-size: 12.5px; font-weight: 700; line-height: normal; white-space: nowrap; } /* prețul fără TVA: în machetă stă lipit sub preț (4px, nu 14px) */ .single-product .entry-summary .cmv-buybox .cmv-fara-tva { margin: -10px 0 0; font-size: 13px; color: #5A6675; } /* --- starea de stoc ------------------------------------------------------- */ .single-product .entry-summary .cmv-buybox .stock { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.1; } .single-product .entry-summary .cmv-buybox .stock.in-stock { color: #298646; } .single-product .entry-summary .cmv-buybox .cmv-stoc-nota { font-size: 13px; font-weight: 400; color: var(--cmv-text-faint, #8B97A8); } /* --- „Actualizări soft" (doar la produsele care chiar au licența în catalog) - */ .cmv-upd { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #EDF1F7; padding-top: 14px; } .cmv-upd-titlu { font-size: 13px; font-weight: 800; color: var(--cmv-navy, #16233D); } .cmv-upd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cmv-upd-placa { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border: 1.5px solid #CDD6E4; border-radius: 11px; background: #fff; font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .cmv-upd-placa:hover { border-color: var(--cmv-blue, #2A5FB7); } .cmv-upd-placa.is-ales { border-color: var(--cmv-blue, #2A5FB7); background: #EFF6FF; } .cmv-upd-nume { font-size: 13px; font-weight: 800; color: var(--cmv-navy, #16233D); line-height: 1.25; } .cmv-upd-placa.is-ales .cmv-upd-nume { color: var(--cmv-blue, #2A5FB7); } .cmv-upd-desc { font-size: 11.5px; color: #5A6675; line-height: 1.4; } .cmv-upd-pret { margin-top: 3px; font-size: 12.5px; font-weight: 800; color: var(--cmv-navy, #16233D); } /* selectorul nativ de variații se ascunde DOAR unde plăcile îl înlocuiesc; pe restul produselor variabile (tabletă, lungime cablu, pachet) rămâne */ .cmv-buybox--upd table.variations, .cmv-buybox--upd .reset_variations_alert, .cmv-buybox--upd .woocommerce-variation-price, .cmv-buybox--upd .woocommerce-variation-description, .cmv-buybox--upd .woocommerce-variation-availability { display: none !important; } /* --- „Personalizează pachetul" --------------------------------------------- Configuratorul rămâne neatins; aici doar îi dăm forma din machetă: un singur grup de plăci cu buton rotund „+", titlu și subtitlu (numele grupului). */ .cmv-cfg-cap { font-size: 13px; font-weight: 800; color: var(--cmv-navy, #16233D); } .cmv-cfg-cap span { font-weight: 500; color: var(--cmv-text-faint, #8B97A8); } #proCfg.pro-cfg { display: flex; flex-direction: column; min-width: 0; gap: 8px; margin: 0; } /* grupurile devin „transparente" ca să iasă o singură listă, ca în machetă */ #proCfg .pro-cfg-g, #proCfg .pro-cfg-opts { display: contents; } #proCfg .pro-cfg-title, #proCfg .pro-cfg-note { display: none; } #proCfg .pro-cfg-opt { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1.5px solid #CDD6E4; border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; } #proCfg .pro-cfg-opt:hover { border-color: var(--cmv-blue, #2A5FB7); } #proCfg .pro-cfg-opt:has(input:checked) { border-color: var(--cmv-blue, #2A5FB7); background: #EFF6FF; } /* butonul rotund din machetă. Bifa nativă rămâne în pagină (invizibilă) ca să nu pierdem tastatura și ca scriptul configuratorului să-și găsească inputul. */ #proCfg .pro-cfg-opt::before { content: "+"; flex: 0 0 26px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--cmv-blue, #2A5FB7); border-radius: 50%; background: #fff; color: var(--cmv-blue, #2A5FB7); font-size: 14px; font-weight: 800; line-height: 1; } #proCfg .pro-cfg-opt:has(input:checked)::before { content: "\2713"; background: var(--cmv-blue, #2A5FB7); color: #fff; } #proCfg .pro-cfg-opt:has(input:focus-visible)::before { outline: 2px solid var(--cmv-blue, #2A5FB7); outline-offset: 2px; } #proCfg .pro-cfg-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } /* macheta n-are plăcuța „Fără": butonul rotund e comutator (vezi JS-ul din cmv3-produs.php, care revine pe „Fără" la al doilea clic) */ #proCfg .pro-cfg-opt:has(input[value="-1"]) { display: none; } .cmv-cfg-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } #proCfg .pro-cfg-l { font-size: 13px; font-weight: 700; color: var(--cmv-navy, #16233D); line-height: 1.35; } .cmv-cfg-cat, .cmv-cfg-nota { font-size: 11.5px; color: var(--cmv-text-faint, #8B97A8); line-height: 1.4; } #proCfg .pro-cfg-p { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--cmv-navy, #16233D); white-space: nowrap; } #proCfg .pro-cfg-p.is-zero { color: var(--cmv-text-faint, #8B97A8); } /* --- „Total configurat": cardul albastru deschis din machetă (live era o bandă neagră cu cifre verzi — moștenire din motor) ------------- */ #proCfg .pro-cfg-total { display: flex; flex-direction: column; align-items: stretch; /* configuratorul avea `align-items:center` (bandă orizontală); fără asta liniile se strângeau pe conținut și ieșeau din card */ min-width: 0; gap: 6px; margin-top: 6px; /* 8 (pasul listei) + 6 = 14, ca în machetă */ padding: 14px 16px; background: var(--cmv-bg-tint, #EEF3FB); border: 1px solid #DBE4F2; border-radius: 11px; color: inherit; font-size: inherit; font-weight: 400; } .cmv-cfg-baza { display: flex; justify-content: space-between; width: 100%; min-width: 0; gap: 10px; font-size: 12.5px; color: var(--cmv-text-soft, #4A5568); } .cmv-cfg-baza-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmv-cfg-baza-p { font-weight: 700; color: var(--cmv-navy, #16233D); white-space: nowrap; } .cmv-cfg-rand { display: flex; justify-content: space-between; align-items: baseline; width: 100%; min-width: 0; gap: 10px; margin-top: 2px; padding-top: 8px; border-top: 1px solid #CDD9EC; } .cmv-cfg-rand > span { font-size: 13.5px; font-weight: 800; color: var(--cmv-navy, #16233D); } #proCfg .pro-cfg-total .pro-cfg-sum { font-size: 22px; font-weight: 800; color: #1C50A7; } /* --- butoanele ------------------------------------------------------------- */ /* macheta n-are umbră pe butonul de coș; o scoatem ca să fie 1:1 */ .single-product .entry-summary .cmv-buybox form.cart button.single_add_to_cart_button, .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button { box-shadow: none; line-height: 1.15; } .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button:hover { box-shadow: none; } .single-product .entry-summary .cmv-buybox .cmv-wa-buy { display: block; width: 100%; box-sizing: border-box; padding: 12px 0; border: 1.5px solid #B9C7DE; border-radius: 11px; background: transparent; color: var(--cmv-navy, #16233D); font-size: 14px; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; box-shadow: none; } .single-product .entry-summary .cmv-buybox .cmv-wa-buy:hover { border-color: var(--cmv-blue, #2A5FB7); color: var(--cmv-blue, #2A5FB7); box-shadow: none; transform: none; } /* --- garanțiile + linia de plată ------------------------------------------- */ .single-product .entry-summary .cmv-buybox .cmv-buy-usp { display: flex; flex-direction: column; gap: 14px; margin: 0; padding-top: 14px; border-top: 1px solid #EDF1F7; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp li { margin: 0; padding: 0; font-size: 13px; line-height: 1.15; color: var(--cmv-text-soft, #4A5568); } .single-product .entry-summary .cmv-buybox .cmv-buy-usp .cmv-pay-note { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; color: var(--cmv-text-faint, #8B97A8); } /* --- înălțimile de rând: macheta folosește `line-height: normal` pe textele mici, tema are 1.6 global ⇒ fiecare rând ieșea cu 6-7px mai înalt și cardul se lungea. Le aducem la ritmul machetei. ---------------------------------------------- */ .single-product .entry-summary .cmv-buybox .cmv-fara-tva, .single-product .entry-summary .cmv-buybox .cmv-pay-note, .cmv-cfg-cap, .cmv-upd-titlu, .cmv-upd-pret, #proCfg .pro-cfg-p, .cmv-cfg-baza, .cmv-cfg-baza-n, .cmv-cfg-baza-p, .cmv-cfg-rand > span, #proCfg .pro-cfg-total .pro-cfg-sum, .single-product .entry-summary .cmv-metaline .sku_wrapper, .single-product .entry-summary .cmv-metaline .cmv-marca { line-height: normal; } /* ----------------------------------------------------------------------------- 5. BARA DE ANCORE + SECȚIUNILE — macheta „Produs2.dc.html" Macheta desenează bara ca `` … și secțiunile deschise, una sub alta (`
`). Aici bara e `nav.cmv-secnav` lipită sus, iar secțiunile `section.cmv-sec`. ⚠️ Numele de clase EVITĂ `ul.tabs` / `wc-tabs`: pe lângă JS-ul WooCommerce (vezi mu-plugin), și `themes/cmv3/style.css` (fișier care NU e al meu) desenează `ul.tabs li a` ca pastile rotunde. Cu alt nume de clasă scăpăm de toate `!important`-urile de care era nevoie înainte. -------------------------------------------------------------------------- */ /* Blocksy pune pe `.woocommerce-tabs` un `padding-top` de 60px (măsurat) — în grilă distanța o dă `row-gap`, deci îl anulăm; altfel bara pleca cu 60px sub blocul de produs. */ .single-product .cmv-sections { padding: 0; margin: 0; } .single-product .cmv-secnav { position: sticky; top: 0; z-index: 20; /* 19.08 (cerere Marius): bara ține toată lățimea paginii (1216px = de la marginea galeriei până la marginea buy-box-ului), nu 860px ca în machetă. */ max-width: none; /* fundal opac obligatoriu: altfel conținutul care trece pe dedesubt se vede prin bară cât timp e lipită */ background: #fff; } /* bara de administrare a WordPress-ului stă fix, peste bara noastră */ .single-product.admin-bar .cmv-secnav { top: var(--wp-admin-bar-height, 32px); } /* Cât timp e lipită, textul trece pe sub ea și părea „tăiat" din senin. O umbră foarte scurtă spune ochiului că e un strat deasupra. La rest (bara în poziția ei firească) NU există umbră — macheta are doar linia de 2px. Clasa o pune JS-ul din mu-plugin. */ .single-product .cmv-secnav.is-lipit { box-shadow: 0 10px 14px -12px rgba(22, 35, 61, .55); } .single-product .cmv-secnav-list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--cmv-border, #E3E8F0); } .single-product .cmv-secnav-list li { margin: 0; padding: 0; list-style: none; } .single-product .cmv-secnav-list li::before, .single-product .cmv-secnav-list li::after { content: none; } .single-product .cmv-secnav-list a { display: block; margin-bottom: -2px; /* pastila „mușcă" linia de 2px, ca în machetă */ padding: 13px 20px; border-radius: 10px 10px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.15; letter-spacing: 0; text-transform: none; text-decoration: none; color: #33415C; background: transparent; white-space: nowrap; transition: background .15s ease, color .15s ease; } .single-product .cmv-secnav-list a:hover { color: var(--cmv-blue, #2A5FB7); background: var(--cmv-bg-tint, #EEF3FB); } .single-product .cmv-secnav-list a.is-activ, .single-product .cmv-secnav-list a.is-activ:hover { background: var(--cmv-blue, #2A5FB7); color: #fff; font-weight: 800; } /* fără JS nu există `.is-activ`; prima ancoră arată totuși ca punct de plecare */ .single-product .cmv-secnav-list:not(:has(a.is-activ)) li:first-child a { background: var(--cmv-blue, #2A5FB7); color: #fff; font-weight: 800; } /* ---- secțiunile ---------------------------------------------------------- */ /* macheta: `
`, titlu 22px/800. Prima secțiune stă lipită de bară (22px), ca golul dintre bară și conținut să fie ZERO. ⭐ 19.08: macheta cerea `max-width:860px` pentru conținut; Marius a cerut EXPLICIT lățimea întreagă a paginii ⇒ `none`. Nu se pune la loc fără cererea lui. */ .single-product .cmv-sec { max-width: none; margin-inline: 0; padding-top: 44px; /* ca titlul să nu ajungă sub bara lipită când se sare pe ancoră. Valoarea reală o pune JS-ul din `--cmv-secnav-h`; asta e rezerva. */ scroll-margin-top: calc(var(--cmv-secnav-h, 45px) + 16px); } .single-product .cmv-sec:first-child { padding-top: 22px; } .single-product .cmv-sec-t { margin: 0 0 14px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; color: var(--cmv-navy, #16233D); } /* ancorele din interiorul secțiunilor (#reviews, #respond, #comment-…) au și ele nevoie de spațiu sub bară */ .single-product .cmv-sec #reviews, .single-product .cmv-sec #respond, .single-product .cmv-sec .commentlist > li { scroll-margin-top: calc(var(--cmv-secnav-h, 45px) + 16px); } /* ----------------------------------------------------------------------------- 6. MOBIL (390px) — o coloană, fără derulare laterală -------------------------------------------------------------------------- */ @media (max-width: 999px) { .cmv-upd-grid { grid-template-columns: 1fr; } .single-product .entry-summary .cmv-buybox { gap: 12px; } .single-product .entry-summary .cmv-buybox > .price, .single-product .entry-summary .cmv-buybox > .price ins { font-size: 28px; } /* bara lipită se derulează lateral pe mobil; `overflow-x` trebuie pe NAV, nu pe listă — un ancestor cu overflow ar anula `position:sticky`. */ .single-product .cmv-secnav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .single-product .cmv-secnav::-webkit-scrollbar { display: none; } .single-product .cmv-secnav-list { flex-wrap: nowrap; width: max-content; min-width: 100%; } .single-product .cmv-secnav-list a { padding: 12px 16px; font-size: 13.5px; } .single-product .cmv-sec { padding-top: 32px; } .single-product .cmv-sec-t { font-size: 19px; } .cmv-cfg-baza-n { white-space: normal; } } /* ============================================================================= V4 · COMPLETĂRI 18.08 (cerere Marius) ============================================================================= */ /* ----------------------------------------------------------------------------- 7. UN SINGUR LIMBAJ PENTRU CONTROALE Marius: „select-ul, checkbox-urile și radio-urile să arate la fel". Referința lui era select-ul temei (40px, chenar 1px #E3E8F0, colț 3px), dar macheta v4 desenează TOATE câmpurile din buy-box la fel: chenar 1.5px #CDD6E4, colț 11px, fundal alb; starea aleasă = chenar albastru pe fundal #EFF6FF. Macheta câștigă, deci aliniem select-ul la ea, nu invers. -------------------------------------------------------------------------- */ .single-product .entry-summary .cmv-buybox table.variations, .single-product .entry-summary .cmv-buybox table.variations tbody, .single-product .entry-summary .cmv-buybox table.variations tr, .single-product .entry-summary .cmv-buybox table.variations th, .single-product .entry-summary .cmv-buybox table.variations td { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; } .single-product .entry-summary .cmv-buybox table.variations tr + tr { margin-top: 10px; } .single-product .entry-summary .cmv-buybox table.variations th.label { margin-bottom: 8px; } .single-product .entry-summary .cmv-buybox table.variations th.label label { font-size: 13px; font-weight: 800; line-height: normal; color: var(--cmv-navy, #16233D); text-transform: none; letter-spacing: 0; } /* Câmpurile: aceeași „rețetă" ca plăcile de opțiuni. */ .single-product .entry-summary .cmv-buybox select, .single-product .entry-summary .cmv-buybox input[type="text"], .single-product .entry-summary .cmv-buybox input[type="email"], .single-product .entry-summary .cmv-buybox input[type="number"], .single-product .entry-summary .cmv-buybox textarea { width: 100%; min-height: 44px; margin: 0; padding: 10px 13px; border: 1.5px solid #CDD6E4; border-radius: 11px; background-color: #fff; box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--cmv-navy, #16233D); transition: border-color .15s ease, box-shadow .15s ease; } /* săgeata proprie — cea nativă nu se poate colora și nu se potrivea cu machetă */ .single-product .entry-summary .cmv-buybox select { padding-right: 38px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%232A5FB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px; } .single-product .entry-summary .cmv-buybox select:hover, .single-product .entry-summary .cmv-buybox input:hover, .single-product .entry-summary .cmv-buybox textarea:hover { border-color: var(--cmv-blue, #2A5FB7); } .single-product .entry-summary .cmv-buybox select:focus, .single-product .entry-summary .cmv-buybox input:focus, .single-product .entry-summary .cmv-buybox textarea:focus { outline: none; border-color: var(--cmv-blue, #2A5FB7); box-shadow: 0 0 0 3px rgba(42, 95, 183, .12); } /* selectul cu o variantă aleasă = aceeași stare „aleasă" ca plăcile */ .single-product .entry-summary .cmv-buybox select:valid:not([value=""]) { background-color: #fff; } .single-product .entry-summary .cmv-buybox .reset_variations { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--cmv-text-faint, #8B97A8); text-decoration: none; } .single-product .entry-summary .cmv-buybox .reset_variations:hover { color: var(--cmv-blue, #2A5FB7); } /* capcana anti-spam a pluginului de formulare n-are ce căuta în card */ .single-product .entry-summary .cmv-buybox .altEmail_container, .single-product .entry-summary .cmv-buybox .wpa_hidden_field { display: none !important; } /* ----------------------------------------------------------------------------- 8. TABUL „RECENZII" — după machetă -------------------------------------------------------------------------- */ /* „3 recenzii pentru " nu e în machetă, iar tabul spune deja „Recenzii (3)" */ .single-product .woocommerce-tabs .woocommerce-Reviews-title { display: none; } .cmv-rec-sumar { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; padding: 18px 22px; border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 14px; } .cmv-rec-nota { font-size: 38px; font-weight: 800; line-height: 1; color: var(--cmv-navy, #16233D); } .cmv-rec-info { display: flex; flex-direction: column; gap: 2px; } .cmv-rec-info .star-rating { color: var(--cmv-amber, #E8A13A); font-size: 16px; margin: 0; } .cmv-rec-nr { font-size: 13px; line-height: normal; color: var(--cmv-text-faint, #8B97A8); } .cmv-rec-btn { margin-left: auto; padding: 11px 20px; border: 1.5px solid #B9C7DE; border-radius: 10px; background: transparent; font-size: 13.5px; font-weight: 700; line-height: normal; color: var(--cmv-navy, #16233D); text-decoration: none; white-space: nowrap; } .cmv-rec-btn:hover { border-color: var(--cmv-blue, #2A5FB7); color: var(--cmv-blue, #2A5FB7); } .single-product #reviews ol.commentlist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .single-product #reviews ol.commentlist li { margin: 0; padding: 0; border: 0; background: none; list-style: none; } .single-product #reviews ol.commentlist .comment_container { display: block; padding: 18px 22px; border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 14px; background: #fff; } /* macheta n-are avatare */ .single-product #reviews ol.commentlist .comment_container > img.avatar { display: none; } /* numele + data în stânga, stelele în dreapta, textul dedesubt — fără să mutăm noduri: o grilă peste cele trei elemente ale WooCommerce. */ .single-product #reviews ol.commentlist .comment-text { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0; padding: 0; border: 0; } .single-product #reviews ol.commentlist .comment-text > .star-rating { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; font-size: 13.5px; color: var(--cmv-amber, #E8A13A); } .single-product #reviews ol.commentlist .comment-text > .meta { grid-column: 1; grid-row: 1; align-self: baseline; margin: 0; font-size: 12.5px; line-height: normal; color: var(--cmv-text-faint, #8B97A8); } .single-product #reviews ol.commentlist .comment-text > .meta .woocommerce-review__author { font-size: 14.5px; font-weight: 800; color: var(--cmv-navy, #16233D); } .single-product #reviews ol.commentlist .comment-text > .description { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.6; color: var(--cmv-text-soft, #4A5568); } .single-product #reviews ol.commentlist .comment-text > .description p { margin: 0; } /* formularul de recenzie: aceleași câmpuri ca în buy-box */ .single-product #review_form_wrapper { margin-top: 22px; } .single-product #review_form_wrapper .comment-form input[type="text"], .single-product #review_form_wrapper .comment-form input[type="email"], .single-product #review_form_wrapper .comment-form textarea { width: 100%; padding: 10px 13px; border: 1.5px solid #CDD6E4; border-radius: 11px; background: #fff; font-family: inherit; font-size: 14px; color: var(--cmv-navy, #16233D); } .single-product #review_form_wrapper .comment-form input:focus, .single-product #review_form_wrapper .comment-form textarea:focus { outline: none; border-color: var(--cmv-blue, #2A5FB7); box-shadow: 0 0 0 3px rgba(42, 95, 183, .12); } @media (max-width: 999px) { .cmv-rec-sumar { flex-wrap: wrap; gap: 12px; } .cmv-rec-btn { margin-left: 0; width: 100%; text-align: center; } } /* ----------------------------------------------------------------------------- 9. RECENZII — corecții după recenziile de probă (18.08) -------------------------------------------------------------------------- */ /* Blocksy pune lista și formularul pe două coloane de ~408px; le vrem una sub alta, pe lățimea secțiunii (19.08: toată lățimea paginii). */ .single-product #reviews.woocommerce-Reviews { display: block; max-width: none; } /* rândul de stele din antet: „★★★★★ 4,8 (3 recenzii)" */ .single-product .entry-summary .cmv-metaline .cmv-rating-nota { font-size: 13.5px; font-weight: 700; line-height: normal; color: var(--cmv-navy, #16233D); } /* fără recenzii Blocksy nu randează nimic aici — rândul se strânge singur. Plasa de siguranță: dacă ajunge totuși un bloc gol, nu lăsăm stele goale. */ .single-product .entry-summary .cmv-metaline .woocommerce-product-rating:empty { display: none; } /* selectorul de stele din formular, în ambra machetei (nu portocaliul temei) */ .single-product #reviews .stars a, .single-product #reviews .stars a::before, .single-product #reviews p.stars a { color: var(--cmv-amber, #E8A13A); } .single-product #reviews .star-rating, .single-product #reviews .star-rating::before { color: var(--cmv-amber, #E8A13A); } /* titlul formularului + etichetele, în tipografia paginii */ .single-product #reviews .comment-reply-title { display: block; margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--cmv-navy, #16233D); } .single-product #reviews .comment-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--cmv-navy, #16233D); } .single-product #reviews .comment-form .comment-form-cookies-consent label { display: inline; font-weight: 400; font-size: 13px; color: var(--cmv-text-soft, #4A5568); } .single-product #reviews .comment-notes { font-size: 12.5px; color: var(--cmv-text-faint, #8B97A8); } .single-product #reviews .comment-form > p { margin: 0 0 14px; } .single-product #reviews .form-submit button.submit { padding: 13px 26px; border: none; border-radius: 11px; background: var(--cmv-blue, #2A5FB7); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; } .single-product #reviews .form-submit button.submit:hover { background: #154AA0; } /* capcanele anti-spam nu se văd nici aici */ .single-product #reviews .altEmail_container, .single-product #reviews .wpa_hidden_field { display: none !important; } /* „(achiziție verificată)" venea cu majuscule și italic de la temă; în machetă linia de sub nume e un text mic, discret, în aceeași familie cu data. */ .single-product #reviews .woocommerce-review__verified { font-style: normal; font-weight: 400; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--cmv-text-faint, #8B97A8); } .single-product #reviews .comment-form label, .single-product #reviews #comment-form-rating-label { text-transform: none; letter-spacing: 0; } .single-product #reviews .comment-form-rating { display: flex; align-items: center; gap: 10px; } .single-product #reviews .comment-form-rating label { margin: 0; } .single-product #reviews .comment-form-rating p.stars { margin: 0; } /* ----------------------------------------------------------------------------- 10. RECENZII — starea GOALĂ (19.08) Cu secțiunile deschise, produsele fără recenzii își arată tot timpul mesajul „Nu există recenzii până acum" și formularul. Veneau nestilizate (font implicit, lipite de marginea stângă) fiindcă până acum erau ascunse într-un tab pe care nu-l deschidea nimeni. -------------------------------------------------------------------------- */ .single-product .woocommerce-noreviews { margin: 0; padding: 18px 22px; border: 1px dashed #CDD6E4; border-radius: 14px; background: #FBFCFE; font-size: 14px; line-height: 1.6; color: var(--cmv-text-soft, #4A5568); } /* fără recenzii, WooCommerce lasă `#comments` fără listă: îi dăm aceeași distanță ca între cardul de sumar și listă (14px), nu golul implicit al temei */ .single-product #reviews #comments { margin: 0 0 22px; } /* „Fii primul care scrii o recenzie…" e un ``, nu un titlu real — de asta cădea pe fontul implicit. */ .single-product #reviews #reply-title, .single-product #reviews .comment-reply-title { display: block; margin: 0 0 14px; font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -0.2px; text-transform: none; color: var(--cmv-navy, #16233D); } .single-product #reviews #reply-title .ct-cancel-reply, .single-product #reviews .comment-reply-title small { font-size: 13px; font-weight: 600; } /* formularul stă într-un card, ca restul paginii — nu aruncat pe lățime */ .single-product #review_form_wrapper { max-width: none; padding: 22px 24px; border: 1px solid var(--cmv-border, #E3E8F0); border-radius: 14px; background: #fff; } /* ----------------------------------------------------------------------------- 11. ÎNTREBĂRI (Q&A) — pluginul își aduce propriul CSS; îl aducem doar în lățimea și tipografia secțiunilor, fără să-i atingem structura. -------------------------------------------------------------------------- */ .single-product .woocommerce-Tabs-panel--ask { max-width: none; } /* ----------------------------------------------------------------------------- 12. „PRODUSE SIMILARE" — pe aceeași linie cu restul paginii (19.08) --------------------------------------------------------------------------- Măsurat: pe TOT site-ul conținutul stă între x=112 și x=1328 (titlurile de pe prima pagină, h1-ul de categorie, galeria și buy-box-ul de aici, banda de consultanță). Singurul bloc care ieșea cu 32px în fiecare parte era `section.related.products`: e copil direct al containerului de 1280px, pe când `div.product` are 32px padding. De aici impresia că banda „Nu știi ce tester…" e mai îngustă — de fapt cardurile de deasupra erau mai late. -------------------------------------------------------------------------- */ .single-product section.related.products, .single-product section.upsells.products { padding-inline: 32px; } @media (max-width: 999px) { .single-product section.related.products, .single-product section.upsells.products { padding-inline: 0; } } /* ----------------------------------------------------------------------------- 13. BREADCRUMB — pe linia de conținut, cu banda strânsă (19.08) --------------------------------------------------------------------------- Două lucruri reclamate de Marius, amândouă măsurate: 1. „Navigarea iese din weight" — breadcrumb-ul stătea la x=80 (marginea containerului), în timp ce TOT restul paginii stă la 112 (logo, galerie, buy-box, secțiuni, banda de consultanță). `.hero-section` e copil direct al containerului, deci nu prindea padding-ul de 32px al lui `div.product`. 2. „Se pierde spațiu inutil" — pentru un rând de 21px se consumau 121px: 60px deasupra (`padding-top` implicit Blocksy pe `.ct-container-full`, din `data-vertical-spacing`) + 40px dedesubt (`margin-bottom` pe `.hero-section`). Celelalte tipuri de pagină își anulau deja padding-ul ăsta (vezi cont.css, cos.css, home.css, pagini.css) — produsul nu. -------------------------------------------------------------------------- */ .single-product #main > .ct-container-full { padding-top: 22px; } .single-product .hero-section.is-width-constrained { padding-inline: 32px; /* aduce breadcrumb-ul de la 80 la 112, pe linia paginii */ margin-bottom: 18px; } @media (max-width: 999px) { .single-product #main > .ct-container-full { padding-top: 16px; } .single-product .hero-section.is-width-constrained { padding-inline: 0; margin-bottom: 14px; } } /* ============================================================================= 14. MOBIL (≤767px) — macheta „design/mobil/Mobil Produs.dc.html" --------------------------------------------------------------------------- Perechea PHP: mu-plugins/cmv3-produs.php §8. Toate valorile sunt MĂSURATE în machetă la 390px (getBoundingClientRect + getComputedStyle), nu ochite. Reper: conținutul stă la x=16, w=358 — adică marginea paginii e 16px, nu 32 ca pe desktop. ⛔ Nimic din secțiunea asta nu iese din `@media (max-width: 767px)`: desktopul la 1440/1280 trebuie să rămână pixel cu pixel cel de ieri. ============================================================================= */ @media (max-width: 767px) { /* --- 14.1 MARGINEA PAGINII: 32px → 16px ------------------------------------ Pe desktop `div.product` are 32px padding, moștenit și pe telefon. Macheta cere 16px, iar cei 32px în plus costă de două ori: o dată în lățime și încă o dată în înălțime — textul descrierii se rupe pe mai multe rânduri. */ .single-product div.product > *:not(.product-entry-wrapper), .single-product div.product > .product-entry-wrapper.is-width-constrained, .single-product .hero-section.is-width-constrained, .single-product section.related.products, .single-product section.upsells.products { padding-inline: 16px; } /* --- 14.2 BREADCRUMB ------------------------------------------------------- Macheta îl înlocuiește cu antetul compact („← · categorie · coș"), care e al altui agent. Până atunci rămâne singura cale de întoarcere, deci nu-l ascund; îl strâng doar la ritmul telefonului. */ .single-product #main > .ct-container-full { padding-top: 12px; padding-bottom: 24px; } .single-product .hero-section.is-width-constrained { margin-bottom: 10px; } .single-product nav.ct-breadcrumbs { font-size: 11.5px; } /* Antetul compact al machetei scrie deja categoria și are săgeata de întoarcere, deci breadcrumb-ul de dedesubt repetă exact aceeași informație (39px pe două rânduri). Dispare — DAR numai dacă antetul chiar e în pagină: dacă agentul de antet nu l-a livrat, breadcrumb-ul rămâne singura cale înapoi. */ body:has(.cmva-antet) .single-product .hero-section.is-width-constrained, .single-product:has(.cmva-antet) .hero-section.is-width-constrained { display: none; } /* --- 14.3 GALERIA ---------------------------------------------------------- Machetă: foto 358×290 (rază 14), sub ea un rând de miniaturi 56×44 cu pas 8, contor „1 / 5" în colțul din dreapta-jos. Galeria rămâne a lui Blocksy. */ .single-product .woocommerce-product-gallery .flexy-view[data-flexy-view="boxed"] { position: relative; border-radius: 14px; } .single-product .woocommerce-product-gallery .flexy-items .ct-media-container img, .single-product .woocommerce-product-gallery .flexy-items .ct-media-container picture img { aspect-ratio: 179 / 145 !important; /* 358×290 din machetă */ max-height: none; } /* contorul: fundal translucid navy, ca în machetă */ .single-product .woocommerce-product-gallery .cmv-gal-contor { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 5px 10px; border-radius: 7px; background: rgba(22, 35, 61, 0.75); color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; line-height: 1; pointer-events: none; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] { margin-top: 10px; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol { display: flex; flex-wrap: wrap; gap: 8px; --thumbs-width: 56px; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li { position: relative; /* pentru „+N" */ width: 56px; height: 44px; border-radius: 8px; padding: 2px; } .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li.active { border-width: 2px; padding: 1px; } /* peste patru miniaturi rândul s-ar rupe pe două linii — restul se ascund sub „+N" (macheta: 4 sloturi, ultimul acoperit). `.cmv-gal-tot` le desface. */ .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol:not(.cmv-gal-tot) li:nth-child(n+5) { display: none; } .single-product .woocommerce-product-gallery .cmv-gal-mai { position: absolute; inset: -2px; /* acoperă și padding-ul miniaturii ⇒ zona de atins = 56×44 */ z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: rgba(22, 35, 61, 0.62); color: #FFFFFF; font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; } /* --- 14.4 ORDINEA DIN MACHETĂ: marcă+cod deasupra titlului ----------------- Macheta pune „LAUNCH · COD: X431-VP-40" ÎNAINTEA titlului, iar stelele după. În DOM rândul de meta e un singur element (`.cmv-metaline`) așezat sub titlu, cu stele + cod + marcă la un loc. `display:contents` îi desface cutia, iar grila așază fiecare bucată unde o vrea macheta — fără să mutăm noduri cu JS și fără să atingem desktopul. ⚠️ Pas (`gap`) ZERO intenționat: la produsele fără marcă / fără recenzii rândul lipsește, iar un `gap` ar lăsa un gol fantomă. Distanțele le dau marginile de mai jos. */ .single-product div.product .entry-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; gap: 0; } .single-product .entry-summary .cmv-metaline { display: contents; } .single-product .entry-summary .cmv-metaline .cmv-marca { grid-area: 1 / 1 / 2 / 2; } .single-product .entry-summary .cmv-metaline .product_meta { grid-area: 1 / 2 / 2 / 3; } .single-product .entry-summary .product_title { grid-area: 2 / 1 / 3 / 3; margin: 6px 0 0; } .single-product .entry-summary .cmv-metaline .woocommerce-product-rating { grid-area: 3 / 1 / 4 / 3; margin: 8px 0 0; } .single-product .entry-summary .woocommerce-product-details__short-description { grid-area: 4 / 1 / 5 / 3; margin: 10px 0 0; } .single-product .entry-summary .cmv-buybox { grid-area: 5 / 1 / 6 / 3; margin: 12px 0 0; } /* rândul „LAUNCH · COD: …" — machetă: Space Grotesk 10.5px, spațiere 1.5px */ .single-product .entry-summary .cmv-metaline .cmv-marca, .single-product .entry-summary .cmv-metaline .product_meta, .single-product .entry-summary .cmv-metaline .sku_wrapper { font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #8B97A8; } .single-product .entry-summary .cmv-metaline .cmv-marca a { color: #8B97A8; } .single-product .entry-summary .cmv-metaline .cmv-marca-et { display: none; } /* machetă: doar numele mărcii */ /* Separatorul: pe desktop e o liniuță „│" între frați. În grila de pe telefon bucățile nu mai sunt frați vizuali (marca stă în coloana 1, codul în 2), iar ⛔ regula de adiacență dădea greș exact acolo unde conta: la produsele FĂRĂ recenzii `.product_meta` e primul copil, deci n-o prindea și ieșea „HUMZORCOD: 1N2" (prins la 430px, nu în fișier). Punctul se leagă acum de coloana a doua și apare doar când marca chiar există. */ .single-product .entry-summary .cmv-metaline > * + *::before { content: none; } /* ⚠️ marca are și o regulă PROPRIE pentru liniuță (§2, patru clase) — o regulă cu selector generic n-o bate, oricât de jos ar sta. Măsurat: rămânea o bară gri de 1px lipită de marginea ecranului. */ .single-product .entry-summary .cmv-metaline .cmv-marca::before { content: none; } .single-product .entry-summary .cmv-metaline:has(.cmv-marca) .product_meta::before { content: "·"; flex: 0 0 auto; width: auto; height: auto; margin: 0 5px; background: none; color: #8B97A8; } .single-product .entry-summary .cmv-metaline .product_meta { gap: 0; } .single-product .entry-summary .product_title { font-size: 22px; line-height: 1.25; letter-spacing: -0.4px; } .single-product .entry-summary .woocommerce-product-details__short-description { font-size: 13.5px; line-height: 1.55; } .single-product .entry-summary .woocommerce-product-details__short-description p { margin: 0 0 8px; } .single-product .entry-summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } /* --- 14.5 BUY-BOX: fără card, ca în machetă -------------------------------- Pe telefon macheta NU desenează chenar în jurul prețului: prețul, „fără TVA" și starea de stoc stau direct pe alb, iar singurul card e cel al garanțiilor. Cardul costa 2×18px lățime + 40px înălțime degeaba. */ .single-product .entry-summary .cmv-buybox { padding: 0; border: 0; border-radius: 0; box-shadow: none; gap: 12px; } /* starea de stoc urcă lângă titlu, ca în machetă („● În stoc — livrare mâine" deasupra prețului). `display:contents` scoate cutia intermediară a temei ca `order` să aibă ce reordona. */ .single-product .entry-summary .cmv-buybox .ct-product-add-to-cart { display: contents; } .single-product .entry-summary .cmv-buybox .stock { order: -1; margin: 0; } .single-product .entry-summary .cmv-buybox > .price { font-size: 33px !important; gap: 10px; line-height: 1; } .single-product .entry-summary .cmv-buybox > .price ins { font-size: 33px; } .single-product .entry-summary .cmv-buybox > .price del { font-size: 14px; color: #98A3B3; } .single-product .entry-summary .cmv-buybox .cmv-fara-tva { margin: -8px 0 0; font-size: 12px; } .cmv-reducere { font-size: 11.5px; } /* garanțiile: cardul din machetă (chenar 1px #E3E8F0, rază 12, rânduri de 11/14 despărțite cu linie fină) */ .single-product .entry-summary .cmv-buybox .cmv-buy-usp { gap: 0; padding: 0; border: 1px solid #E3E8F0; border-radius: 12px; overflow: hidden; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp ul { gap: 0; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp li { padding: 11px 14px; border-bottom: 1px solid #EDF1F7; font-size: 12.5px; line-height: 1.4; color: #33415C; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp li:last-child { border-bottom: 0; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp .cmv-pay-note { padding: 10px 14px; border-top: 1px solid #EDF1F7; background: #FBFCFE; } /* butonul din buy-box rămâne (bara de jos nu-l înlocuiește, îl comandă) */ .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button { padding: 14px 0; border-radius: 10px; font-size: 15px; } /* --- 14.6 BARA DE ACȚIUNE LIPITĂ JOS --------------------------------------- Machetă: pad 10/16, pas 10; preț 17px/800 cu vechiul 10.5px tăiat dedesubt; butonul umple restul, 15px/800, rază 10, pad 14/0. */ .cmvm-bara.cmv-bara .cmvm-bara-pret { line-height: 1.1; } .cmvm-bara.cmv-bara .cmv-bara-acum { display: block; font-size: 17px; font-weight: 800; color: var(--cmv-navy, #16233D); line-height: 1; } .cmvm-bara.cmv-bara .cmv-bara-vechi { display: block; margin-top: 2px; font-size: 10.5px; color: #8B97A8; text-decoration: line-through; } .cmvm-bara.cmv-bara .cmv-bara-vechi[hidden] { display: none; } .cmvm-bara.cmv-bara .cmv-bara-btn { width: 100%; min-height: 48px; padding: 14px 0; border: 0; border-radius: 10px; background: var(--cmv-blue, #2A5FB7); color: #FFFFFF; font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1; text-align: center; cursor: pointer; } /* „Alege o versiune" nu e o eroare, e o instrucțiune: butonul rămâne apăsabil și duce la selectorul de versiune, doar că arată că nu comandă încă. */ .cmvm-bara.cmv-bara .cmv-bara-btn.is-blocat { background: #CDD6E4; color: #46536B; } /* --- 14.7 CONFIGURATORUL „Personalizează pachetul" -------------------------- */ #proCfg .pro-cfg-opt { padding: 9px 11px; gap: 10px; } #proCfg .pro-cfg-opt::before { flex-basis: 24px; width: 24px; height: 24px; } #proCfg .pro-cfg-l { font-size: 12.5px; } .cmv-cfg-cat, .cmv-cfg-nota { font-size: 11px; } #proCfg .pro-cfg-total { padding: 12px 14px; } /* --- 14.8 „Cumpărate împreună" --------------------------------------------- Cardul nu e în macheta de telefon (macheta n-are deloc cross-sell pe produs). Îl păstrăm — are date reale pe 172 din 233 de produse — dar cu marginea paginii de 16px, ca restul. Restul stilului stă în css/fbt.css. */ .single-product div.product > .cmvfbt-zona { padding-inline: 16px; } /* --- 14.9 BARA DE ANCORE + SECȚIUNILE -------------------------------------- */ /* ⚠️ Antetul compact al machetei e lipit sus și îl face alt agent. Ca barele să nu se calce, ancorele pornesc de sub el: agentul ANTET n-are decât să scrie `--cmvm-antet-h` pe `:root` și bara coboară singură. */ .single-product .cmv-secnav { top: var(--cmvm-antet-h, 0px); } .single-product .cmv-sec { padding-top: 26px; scroll-margin-top: calc(var(--cmvm-antet-h, 0px) + var(--cmv-secnav-h, 45px) + 12px); } .single-product .cmv-sec:first-child { padding-top: 18px; } /* ⚠️ specificitate, nu bun-simț: `.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2` (§3, trei clase + element) bate `.single-product .cmv-sec-t` (două clase), oricât de jos ar sta în fișier. Măsurat în browser: titlul rămânea 22px. De aceea selectorul de mai jos trece tot prin panou. */ .single-product .woocommerce-tabs .woocommerce-Tabs-panel h2.cmv-sec-t, .single-product .cmv-sec-t { font-size: 18px; letter-spacing: -0.3px; margin: 0 0 10px; } /* ritmul machetei și în panourile care n-au șablon propriu (compatibilitate, întrebări): 14px/1,65, nu 14,5/1,7 ca pe desktop */ .single-product .woocommerce-tabs .woocommerce-Tabs-panel { font-size: 14px; line-height: 1.65; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel h3 { font-size: 16px; margin: 20px 0 8px; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel h4 { font-size: 14px; } /* zona de atins ≥44px (regula din brief); pe desktop rămâne cea din machetă */ .single-product .cmv-secnav-list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 13px; } /* --- 14.10 SPECIFICAȚII: tabelul compact din machetă ----------------------- Machetă: card cu chenar 1px #E3E8F0 și rază 12, rânduri de 11/14, cheia 12.5px/700 #8B97A8 la stânga, valoarea 12.5px/700 #16233D la dreapta, rânduri alternate #FFF / #FBFCFE. ⭐ Rândurile 7+ se strâng sub „Vezi toate specificațiile (N)". Comutatorul e o bifă ascunsă + etichetă: merge FĂRĂ JavaScript, iar rândurile rămân în DOM (nu dispar din indexare, doar din ecran). */ .single-product .woocommerce-tabs table.shop_attributes { display: table; width: 100%; margin: 0; border: 1px solid #E3E8F0; border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 12.5px; } .single-product .woocommerce-tabs table.shop_attributes tr { background: #FFFFFF; } .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(even) { background: #FBFCFE; } .single-product .woocommerce-tabs table.shop_attributes th, .single-product .woocommerce-tabs table.shop_attributes td { padding: 11px 14px; border: 0; border-bottom: 1px solid #EDF1F7; font-size: 12.5px; font-weight: 700; line-height: 1.35; vertical-align: top; } .single-product .woocommerce-tabs table.shop_attributes th { width: 42%; color: #8B97A8; text-align: left; text-transform: none; background: none; } .single-product .woocommerce-tabs table.shop_attributes td { color: #16233D; text-align: right; } .single-product .woocommerce-tabs table.shop_attributes tr:last-child th, .single-product .woocommerce-tabs table.shop_attributes tr:last-child td { border-bottom: 0; } .single-product .woocommerce-tabs table.shop_attributes td p { margin: 0; } .cmv-spec .cmv-spec-cb { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cmv-spec .cmv-spec-mai { display: flex; align-items: center; min-height: 44px; /* zona de atins din brief; macheta desena 27px */ margin-top: 4px; padding: 6px 0; color: var(--cmv-blue, #2A5FB7); font-size: 13px; font-weight: 700; line-height: 1.4; cursor: pointer; } .cmv-spec .cmv-spec-mai::after { content: " ▾"; } .cmv-spec .cmv-spec-cb:focus-visible + .cmv-spec-mai { outline: 2px solid var(--cmv-blue, #2A5FB7); outline-offset: 3px; } .cmv-spec .cmv-spec-mai-i { display: none; } .cmv-spec:has(.cmv-spec-cb:not(:checked)) table.shop_attributes tr:nth-child(n+7) { display: none; } .cmv-spec:has(.cmv-spec-cb:checked) .cmv-spec-mai-d { display: none; } .cmv-spec:has(.cmv-spec-cb:checked) .cmv-spec-mai-i { display: inline; } .cmv-spec:has(.cmv-spec-cb:checked) .cmv-spec-mai::after { content: " ▴"; } /* --- 14.11 RECENZII -------------------------------------------------------- Macheta arată doar cardurile de recenzie (fără formular). Formularul rămâne în pagină, dar strâns: se deschide din „Scrie o recenzie" (ancoră `:target`, deci merge și fără JS). ⛔ Se strânge NUMAI la produsele care au deja recenzii — altfel primul client n-ar mai avea de unde scrie una. */ .single-product #tab-reviews:has(.cmv-rec-sumar) #review_form_wrapper { display: none; } .single-product #tab-reviews:has(.cmv-rec-sumar) #review_form_wrapper:target, .single-product #tab-reviews:has(.cmv-rec-sumar) #review_form_wrapper.is-deschis { display: block; } .single-product .cmv-rec-sumar { padding: 14px; } .single-product .cmv-rec-nota { font-size: 32px; } .single-product .woocommerce-Reviews .commentlist li .comment_container { padding: 14px; } .single-product .woocommerce-Reviews .commentlist .description p { font-size: 13px; line-height: 1.55; } /* --- 14.12 „PRODUSE SIMILARE" — rând derulabil orizontal -------------------- ⚠️ Blocksy ascunde blocul sub 1000px prin `ct-hidden-sm` / `ct-hidden-md` (valoarea IMPLICITĂ a temei: `mobile => false`, nimeni n-a bifat-o). Macheta îl cere pe telefon, deci îl aducem înapoi din CSS — nu din baza de date. Machetă: carduri 170px, pas 11, chenar 1px #E3E8F0, rază 12, pad 10. */ .single-product section.related.products.ct-hidden-sm, .single-product section.related.products.ct-hidden-md { display: block !important; } .single-product section.related.products > h2, .single-product section.related.products .ct-module-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--cmv-navy, #16233D); } .single-product section.related.products ul.products { display: flex; flex-wrap: nowrap; gap: 11px; margin: 0; padding: 0 16px 4px; /* iese din marginea paginii ca primul card să înceapă la 16px și ultimul să se termine tot la 16px — aceeași rețetă ca `.cmvm-scroller` din fundație */ margin-inline: -16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; /* ⚠️ fără `scroll-padding`, snap-ul aliniază primul card la marginea scrollportului (adică la 0), nu la marginea de conținut — măsurat: primul card ieșea lipit de rama telefonului. */ scroll-padding-inline: 16px; scrollbar-width: none; list-style: none; grid-template-columns: none; } .single-product section.related.products { margin-top: 22px; } .single-product section.related.products ul.products::-webkit-scrollbar { display: none; } .single-product section.related.products ul.products > li.product { flex: 0 0 170px; width: 170px; max-width: 170px; margin: 0; padding: 10px; border: 1px solid #E3E8F0; border-radius: 12px; background: #FFFFFF; scroll-snap-align: start; } .single-product section.related.products ul.products > li.product .woocommerce-loop-product__title, .single-product section.related.products ul.products > li.product h2, .single-product section.related.products ul.products > li.product h3 { font-size: 12px; font-weight: 700; line-height: 1.3; } .single-product section.related.products ul.products > li.product .price { font-size: 15px; font-weight: 800; } /* cardul din machetă are 170×175 (poză 88 + titlu + preț); live ieșea 339px, din marginile de desktop dintre bucăți. Le strângem — fără să scoatem nimic: starea de stoc și butonul „Vezi detalii" sunt informație reală, nu ornament. */ .single-product section.related.products ul.products > li.product figure { margin-bottom: 8px; } .single-product section.related.products ul.products > li.product .woocommerce-loop-product__title { margin-bottom: 6px; } .single-product section.related.products ul.products > li.product .cmv-stock { margin: 0 0 6px; font-size: 11.5px; line-height: 1.4; } .single-product section.related.products ul.products > li.product .price { margin-bottom: 8px; } .single-product section.related.products ul.products > li.product .ct-woo-card-actions { margin-top: 0; } .single-product section.related.products ul.products > li.product .ct-woo-card-actions .button { min-height: 44px; padding: 8px 10px; font-size: 12.5px; } .single-product .entry-summary .cmv-buybox .cmv-wa-buy { min-height: 44px; padding: 13px 0; } .single-product section.related.products ul.products > li.product .onsale { font-size: 11px; padding: 2px 7px; } /* --- 14.13 CARDUL DE AJUTOR / VIDEO ---------------------------------------- */ .single-product .cmv-video-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } .single-product .cmv-compat-list { gap: 6px; } .single-product .cmv-compat-pill { font-size: 12px; } } /* ============================================================================= 15. MOBIL — DESCRIEREA `.cm-pd` (230 din 233 de produse o folosesc) --------------------------------------------------------------------------- Descoperit la măsurare, nu presupus: motorul nou de descrieri (`.cmv-pl`) e încă doar pe 3 produse. Restul catalogului stă pe șablonul `.cm-pd`, moștenit din motor — și el e blocul care ține 55-60% din înălțimea paginii pe telefon. Aceleași valori ca la `.cmv-pl`: proză 14px/1,65, ca în machetă. ============================================================================= */ @media (max-width: 767px) { .single-product .woocommerce-tabs .cm-pd { font-size: 14px; line-height: 1.65; } .single-product .woocommerce-tabs .cm-pd p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; } .single-product .woocommerce-tabs .cm-pd-eyebrow { margin-bottom: 6px; font-size: 11px; } .single-product .woocommerce-tabs .cm-pd-lead { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel .cm-pd h3, .single-product .woocommerce-tabs .cm-pd h3 { margin: 20px 0 8px; font-size: 16px; line-height: 1.3; } .single-product .woocommerce-tabs .cm-pd h4 { font-size: 14px; } .single-product .woocommerce-tabs .cm-pd-note { margin: 12px 0; padding: 12px 14px; border-radius: 10px; } .single-product .woocommerce-tabs .cm-pd-note p { font-size: 13px; line-height: 1.55; } .single-product .woocommerce-tabs .cm-pd-features { gap: 10px; margin: 12px 0 6px; } .single-product .woocommerce-tabs .cm-pd-feat { padding: 12px 14px; border-radius: 10px; } .single-product .woocommerce-tabs .cm-pd-feat h4 { margin-bottom: 4px; } .single-product .woocommerce-tabs .cm-pd-feat p { font-size: 13px; line-height: 1.5; } .single-product .woocommerce-tabs .cm-pd-check li, .single-product .woocommerce-tabs .cm-pd-pack li { margin-bottom: 5px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; } .single-product .woocommerce-tabs .cm-pd-faq > * { padding: 10px 0; } .single-product .woocommerce-tabs .cm-pd-faq-q, .single-product .woocommerce-tabs .cm-pd-faq summary { font-size: 13.5px; line-height: 1.4; } .single-product .woocommerce-tabs .cm-pd-faq-a p { font-size: 13px; line-height: 1.55; } .single-product .woocommerce-tabs .cm-pd-cta { margin-top: 18px; padding: 16px 18px; border-radius: 12px; } .single-product .woocommerce-tabs .cm-pd-cta p { font-size: 13.5px; line-height: 1.55; } /* --- tabelul editorial din descriere: aceeași formă cu cel din „Specificații" (machetă: card cu chenar, rânduri de 11/14, cheia gri la stânga, valoarea închisă la dreapta). Textele de aici sunt lungi, deci valoarea rămâne aliniată la stânga — la dreapta ar ieși un zid zimțat. */ .single-product .woocommerce-tabs table.cm-pd-specs { margin: 0; border: 1px solid #E3E8F0; border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 12.5px; } .single-product .woocommerce-tabs table.cm-pd-specs tr { background: #FFFFFF; } .single-product .woocommerce-tabs table.cm-pd-specs tr:nth-child(even) { background: #FBFCFE; } .single-product .woocommerce-tabs table.cm-pd-specs th, .single-product .woocommerce-tabs table.cm-pd-specs td { padding: 10px 13px; border: 0; border-bottom: 1px solid #EDF1F7; font-size: 12.5px; line-height: 1.45; vertical-align: top; background: none; } .single-product .woocommerce-tabs table.cm-pd-specs th { width: 38%; color: #8B97A8; font-weight: 700; text-align: left; } .single-product .woocommerce-tabs table.cm-pd-specs td { color: #16233D; font-weight: 500; } .single-product .woocommerce-tabs table.cm-pd-specs tr:last-child th, .single-product .woocommerce-tabs table.cm-pd-specs tr:last-child td { border-bottom: 0; } .cmv-spec.cmv-spec-desc { margin-bottom: 18px; } .cmv-spec.cmv-spec-desc:has(.cmv-spec-cb:not(:checked)) table.cm-pd-specs tr:nth-child(n+7) { display: none; } /* --- galeria produselor cu O SINGURĂ poză (n-au `.flexy-items`, deci nu prindeau regula din §14.3 și rămâneau la 3/4 = 477px în loc de 290) -------- */ .single-product .woocommerce-product-gallery > .ct-product-gallery-container > .ct-media-container img { aspect-ratio: 179 / 145 !important; object-fit: contain !important; width: 100%; height: auto; background: #fff; } /* --- formularul de recenzie se strânge la TOATE produsele; la cele fără recenzii butonul „Scrie prima recenzie" (mu-plugin §5) e singura cale spre el, deci trebuie să rămână vizibil. ------------------------------------------- */ .single-product #tab-reviews #review_form_wrapper { display: none; } .single-product #tab-reviews #review_form_wrapper:target, .single-product #tab-reviews #review_form_wrapper.is-deschis { display: block; } .single-product .cmv-rec-gol-cta { margin: 12px 0 0; } .single-product .cmv-rec-gol-cta .cmv-rec-btn { display: block; min-height: 44px; padding: 13px 0; border: 1.5px solid #B9C7DE; border-radius: 10px; color: var(--cmv-navy, #16233D); font-size: 13.5px; font-weight: 700; text-align: center; text-decoration: none; } } /* ⛔ Pe DESKTOP nu se schimbă nimic: comutatorul de specificații și butonul „Scrie prima recenzie" există în HTML (le pune mu-plugin-ul o singură dată, pentru ambele lățimi), dar se văd DOAR pe telefon. Prima măsurătoare de regresie i-a prins: eticheta „Vezi toate specificațiile (10)" adăuga 25-44px pe fiecare pagină de produs la 1440 și 1280. */ @media (min-width: 768px) { .single-product .cmv-rec-gol-cta, .cmv-spec .cmv-spec-cb, .cmv-spec .cmv-spec-mai { display: none; } } /* --------------------------------------------------------------------------- ZONA DE ATINS la întrebările din descrierea produsului (recepție 20.08.2026) Spațierea stătea pe
, dar elementul apăsabil e ⇒ rândul avea 19px, iar cele 12px de sus/jos erau spațiu mort în jurul lui. O mutăm pe summary: același aspect, dar tot rândul devine apăsabil (≈45px). ⚠️ Se ia la țintă DOAR `> details`; rândurile `.cm-pd-faq-q` (varianta fără details) își păstrează spațierea de pe cutie. --------------------------------------------------------------------------- */ .single-product .woocommerce-tabs .cm-pd-faq > details, .single-product .cmv-pd-faq > details { padding-top: 0; padding-bottom: 0; } .single-product .woocommerce-tabs .cm-pd-faq summary { padding: 13px 0; min-height: 44px; display: flex; align-items: center; } /* --- „PRODUSE SIMILARE" pe TABLETĂ ------------------------------------------ ⛔ REPARAT 04.09.2026. Blocksy ascunde blocul sub 1000px (`ct-hidden-sm` / `ct-hidden-md`). Exista deja un fix care îl aducea înapoi — dar era scris ÎNĂUNTRUL lui `@media (max-width: 767px)`, deci salva DOAR telefonul. Între 768 și 999px secțiunea dispărea complet: la 390px avea 334px înălțime și 4 produse, la 1440px 501px și 4 produse, iar la 768px `display:none`, cu produsele tot în pagină. ⇒ un magazin pierdea toată vânzarea încrucișată exact pe tablete. Regula stă la NIVEL DE BAZĂ, nu într-un media query — altfel se repetă greșeala. (Stilul de carusel pentru telefon rămâne unde era, sub 767px.) */ .single-product section.related.products.ct-hidden-sm, .single-product section.related.products.ct-hidden-md { display: block !important; } /* ============================================================================= CASETA DE CUMPĂRARE — arhiva NOUĂ de machete (21.09.2026) „Produs Desktop CarMedic.dc.html”, valorile citite din machetă, la 1440 px. Marcajul: mu-plugins/cmv3-produs.php + themes-cmv3/functions.php. ============================================================================= */ .single-product .entry-summary .cmv-buybox h1.product_title { font-size: 21px; font-weight: 800; line-height: 1.32; margin: 0 0 6px; } /* rândul „Cod produs: … · Brand: …”. ⚠️ Clasa e `.cm-sku`, nu `.cmv-meta`: rândul e adăugat de un JS din `carmedic-product.php`, după titlu. Verificat în pagina livrată — a doua opinie (Codex, 21.09) semnalase exact regula moartă. */ .single-product .entry-summary .cmv-buybox .cm-sku { font-size: 12.5px; color: #5f6a78; margin-bottom: 12px; } /* --- prețul: sumă mare, preț vechi tăiat și insigna roșie, pe ACELAȘI rând --- */ .single-product .entry-summary .cmv-buybox .cm-price-row p.price, .single-product .entry-summary .cmv-buybox > p.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0; } .single-product .entry-summary .cmv-buybox .cm-price-row p.price ins, .single-product .entry-summary .cmv-buybox .cm-price-row p.price > .woocommerce-Price-amount, .single-product .entry-summary .cmv-buybox > p.price ins, .single-product .entry-summary .cmv-buybox > p.price > .woocommerce-Price-amount { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; } .single-product .entry-summary .cmv-buybox .cm-price-row p.price del, .single-product .entry-summary .cmv-buybox .cm-price-row p.price del .woocommerce-Price-amount, .single-product .entry-summary .cmv-buybox > p.price del, .single-product .entry-summary .cmv-buybox > p.price del .woocommerce-Price-amount { font-size: 16px; font-weight: 600; color: #98A2B0; text-decoration: line-through; } /* la produsele variabile prețul apare în `.woocommerce-variation-price`, rescris prin JS; fără rândul ăsta ar rămâne la mărimea temei (semnalat de a doua opinie, verificat în sursă) */ .single-product .entry-summary .cmv-buybox .woocommerce-variation-price .price .woocommerce-Price-amount { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; } .single-product .entry-summary .cmv-buybox .cmv-econ { background: #FDECEC; color: #C92A2A; font-size: 12px; font-weight: 800; line-height: 1.5; padding: 3px 10px; border-radius: 999px; white-space: nowrap; align-self: center; } /* --- rândul de sub preț: stoc + livrare (fără sume pe lună — vezi cmv3-produs.php) --- */ .single-product .entry-summary .cmv-buybox .cmv-stoc-rand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; font-size: 12.5px; } .single-product .entry-summary .cmv-buybox p.stock, .single-product .entry-summary .cmv-buybox .cmv-stoc-rand p.stock { margin: 0; font-size: 12.5px; font-weight: 700; color: #25803A; } /* prețul fără TVA nu e în machetă, dar e cerut de cumpărătorii pe firmă: rămâne, discret */ .single-product .entry-summary .cmv-buybox .cmv-fara-tva { margin: -8px 0 14px; font-size: 12px; color: #5f6a78; } /* --- butoanele: coșul pe toată lățimea, apoi telefon + WhatsApp pe două coloane --- */ /* ⚠️ Blocksy grupează butonul de coș, cantitatea și ce adăugăm noi în `.ct-cart-actions`, NU direct în `form.cart` (măsurat în pagina livrată). Rândul de două butoane se face acolo. */ .single-product .entry-summary .cmv-buybox form.cart .ct-cart-actions { display: flex; /* ⚠️ `flex-direction: row` EXPLICIT. O regulă mai sus din acest fișier pune `column` pe `.ct-product-add-to-cart, .ct-cart-antions`-ul de deasupra; pe coloană, `flex-basis: 100%` nu mai e lățime, ci ÎNĂLȚIME, iar `flex-shrink` implicit strivea butoanele: măsurat 40px în loc de 52 la „Adaugă în coș" și 17,5px în loc de 46 la WhatsApp. Radius-ul și fontul se aplicaseră, deci totul „arăta aplicat" — se vedea doar la înălțime. */ flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: stretch; } .single-product .entry-summary .cmv-buybox form.cart .ct-cart-actions > *:not(.cmv-buy-tel):not(.cmv-wa-buy) { flex: 0 0 100%; min-width: 0; } .single-product .entry-summary .cmv-buybox .cmv-buy-tel, .single-product .entry-summary .cmv-buybox .cmv-wa-buy { flex: 0 1 calc(50% - 5px); min-width: 0; margin: 0; } /* ⚠️ `a.cmv-wa-buy` (cu numele elementului) — regula veche a butonului de WhatsApp are aceeași formă și, la specificitate egală, câștiga ea: `height` nu se aplica, iar butonul rămânea la 41,5px în loc de 46. Măsurat în browser, nu presupus. */ .single-product .entry-summary .cmv-buybox .cmv-buy-tel a, .single-product .entry-summary .cmv-buybox a.cmv-wa-buy, .single-product .entry-summary .cmv-buybox .cmv-wa-buy { padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; font-size: 13.5px; font-weight: 700; text-decoration: none; box-sizing: border-box; } .single-product .entry-summary .cmv-buybox .cmv-buy-tel a { border: 1.5px solid #1B2430; color: #1B2430; background: transparent; } /* ⚠️ Culoarea textului vine cu `!important` din `themes-cmv3/style.css:577` (`.summary .cmv-wa-buy { color: var(--cmv-navy) !important }`) — fișier COMUN, nu-l ating. Macheta cere verde `#168040`; pe pagina livrată textul ieșea bleumarin `#1B2430`. Contracarăm aici, cu aceeași armă, pe pagina de produs. ⏳ D1 a șters regula din `style.css` (commit `0a77eed`), dar pe server ea era încă acolo când am scris rândul ăsta (verificat: 2 apariții). Când urcă el, `!important` de aici poate cădea — restul valorilor rămân, sunt cele din machetă. */ .single-product .entry-summary .cmv-buybox a.cmv-wa-buy, .single-product .entry-summary .cmv-buybox .cmv-wa-buy { border: 1.5px solid #25D366; color: #168040 !important; background: transparent; } .single-product .entry-summary .cmv-buybox .cmv-buy-tel a:hover { background: #1B2430; color: #fff; } .single-product .entry-summary .cmv-buybox .cmv-wa-buy:hover { background: #168040; color: #fff; } .single-product .entry-summary .cmv-buybox .cmv-buy-nota { /* lățimea plină o primește din regula copiilor formularului, mai sus */ margin: 8px 0 0; text-align: center; font-size: 12px; color: #5f6a78; } /* butoanele de telefon arata numarul: pe un singur rand (09.10.2026) */ .single-product .cmv-buy-tel a, .single-product .cmv-qa-tel a { white-space: nowrap; } /* --- cele patru avantaje: două coloane, deasupra o linie fină (machetă) --- */ .single-product .entry-summary .cmv-buybox .cmv-buy-usp ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; border-top: 1px solid #EEF0F2; margin: 14px 0 0; padding: 14px 0 0; list-style: none; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp li { font-size: 12.5px; line-height: 1.4; color: #3C4757; padding: 0; } /* --- mobil (macheta „Produs Mobil CarMedic”): o singură coloană de butoane --- */ /* macheta „Produs Mobil CarMedic.dc.html", 390 px — citită valoare cu valoare */ @media (max-width: 767px) { .single-product .entry-summary .cmv-buybox h1.product_title { font-size: 17px; line-height: 1.35; margin: 14px 0 6px; } .single-product .entry-summary .cmv-buybox .cm-price-row p.price ins, .single-product .entry-summary .cmv-buybox .cm-price-row p.price > .woocommerce-Price-amount, .single-product .entry-summary .cmv-buybox > p.price ins, .single-product .entry-summary .cmv-buybox > p.price > .woocommerce-Price-amount { font-size: 26px; } .single-product .entry-summary .cmv-buybox .cm-sku { font-size: 11.5px; margin-bottom: 10px; } .single-product .entry-summary .cmv-buybox .cmv-buy-tel, .single-product .entry-summary .cmv-buybox .cmv-wa-buy { flex: 0 1 calc(50% - 5px); } /* ⚠️ bifele rămân pe DOUĂ coloane și pe telefon (machetă: grid 1fr 1fr, gap 7px 12px, 12px). Prima variantă le pusese pe una singură — presupunere, nu măsurătoare. */ .single-product .entry-summary .cmv-buybox .cmv-buy-usp ul { grid-template-columns: 1fr 1fr; gap: 7px 12px; } .single-product .entry-summary .cmv-buybox .cmv-buy-usp li { font-size: 12px; } } /* --- bara lipită de jos, pe telefon (macheta „Pagina Produs”, ecranul 3b) --- Telefon 52×48 contur #1B2430 · WhatsApp 52×48 contur #25D366 · „Adaugă în coș · preț” verde, tot restul; înălțime 48, rază 12, gap 9, padding 10/12/14, 14,5/800. Perechea PHP: `inc/produs.php`. ⚠️ Id-ul `cm-mobile-buybar` e al barei vechi din `carmedic-product.php`, care îi tipărește un stil propriu în subsol (după acesta) ⇒ selectorii poartă `body` în față, ca să-l bată. */ body #cm-mobile-buybar.cmv-bp { display: none; } @media (max-width: 999.98px) { body #cm-mobile-buybar.cmv-bp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: stretch; gap: 9px; padding: 10px 12px 14px; background: #fff; border-top: 1px solid #E6E9ED; box-shadow: 0 -8px 24px rgba(16, 24, 40, .08); } body #cm-mobile-buybar .cmv-bp-tel, body #cm-mobile-buybar .cmv-bp-wa { flex: 0 0 52px; height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; text-decoration: none; background: #fff; font-size: 13.5px; font-weight: 800; } body #cm-mobile-buybar .cmv-bp-tel { border: 1.5px solid #1B2430; color: #1B2430 !important; } body #cm-mobile-buybar .cmv-bp-wa { border: 1.5px solid #25D366; color: #168040 !important; } body #cm-mobile-buybar .cmv-bp-tel svg { fill: currentColor; stroke: none; } /* textul stă în pagină pentru cititoarele de ecran, dar nu se vede — ca în machetă */ body #cm-mobile-buybar .cmv-bp-et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body #cm-mobile-buybar .cmv-bp-cos { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0 10px; display: flex; align-items: center; justify-content: center; background: #25803a; color: #fff; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; } body #cm-mobile-buybar .cmv-bp-cos:active { background: #25803A; } body #cm-mobile-buybar .cmv-bp-pret { white-space: nowrap; } /* 04.10.2026: dupa prima atingere bara arata ca lucreaza (trimiterea normala a formularului, apoi cosul); ASCII, text nou */ body #cm-mobile-buybar .cmv-bp-cos[aria-busy="true"] { font-size: 0; opacity: .85; cursor: default; } body #cm-mobile-buybar .cmv-bp-cos[aria-busy="true"] .cmv-bp-pret { display: none; } body #cm-mobile-buybar .cmv-bp-cos[aria-busy="true"]::after { content: "Se adauga in cos..."; font-size: 14.5px; } /* produs fără coș (epuizat): cele două butoane se întind și își arată textul */ body #cm-mobile-buybar.cmv-bp--fara-cos .cmv-bp-tel, body #cm-mobile-buybar.cmv-bp--fara-cos .cmv-bp-wa { flex: 1 1 0; } body #cm-mobile-buybar.cmv-bp--fara-cos .cmv-bp-et { position: static; width: auto; height: auto; clip: auto; } /* loc pentru bară (10 + 48 + 14 + 1), ca să nu acopere ultimul rând al paginii */ body.cmv-are-bp { padding-bottom: 73px; } /* ⛔ un singur buton de WhatsApp pe ecran: bara îi ia locul celui plutitor */ body.cmv-are-bp #cm-wa { display: none !important; } } /* ecrane înguste (320–359): prețul mare nu mai încape lângă cele două butoane */ @media (max-width: 359.98px) { body #cm-mobile-buybar .cmv-bp-cos { font-size: 13px; padding: 0 6px; } } /* === PR1 (22.09.2026): caseta și filele după machetă, pe TOATE produsele =================== Măsurat pe un produs SIMPLU (Vgate vLinker FS) ȘI pe unul cu configurator (CRP919X BT): butonul fără iconiță și fără preț, telefon/WhatsApp fără iconițe, fără rândul favorite + SEAP, „Plată: card…” și categoriile/etichetele în casetă, filele cu MAJUSCULE. Prețul de pe buton și mutarea favoritelor le face scriptul `cmv3-caseta-pr1` (mu-plugins/cmv3-produs.php). */ .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button { display: flex !important; align-items: center; justify-content: center; gap: 0 !important; white-space: nowrap; } /* ⚠️ iconița de coș e un pus de script, NU `::before`: Blocksy ține `::before` al butonului pentru animația de încărcare (display:none, opacity:0) — măsurat, iconița ieșea invizibilă. */ .single-product .entry-summary .cmv-buybox form.cart .single_add_to_cart_button .cmv-btn-ic { flex: none; width: 19px; height: 19px; margin-right: 10px; } .single-product .entry-summary .cmv-buybox .cmv-buy-tel a::before, .single-product .entry-summary .cmv-buybox .cmv-wa-buy::before { content: ""; flex: none; background: currentColor; -webkit-mask: var(--cmv-ic) center / contain no-repeat; mask: var(--cmv-ic) center / contain no-repeat; } /* telefon și WhatsApp, 16 px, pline (macheta) */ .single-product .entry-summary .cmv-buybox .cmv-buy-tel a::before, .single-product .entry-summary .cmv-buybox .cmv-wa-buy::before { width: 16px; height: 16px; } .single-product .entry-summary .cmv-buybox .cmv-buy-tel a::before { --cmv-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.8 21 3 13.2 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); } .single-product .entry-summary .cmv-buybox .cmv-wa-buy::before { --cmv-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.3L2 22l4.9-1.4A10 10 0 1 0 12 2zm5 13.6c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-3.1-1-5.4-3.8-6.3-5.5-.4-.7-.7-1.6-.2-2.4.3-.4.7-.6 1-.6h.6c.2 0 .4 0 .6.5l.8 1.9c.1.2 0 .4-.1.6l-.4.5c-.2.2-.3.4-.1.7.6 1 1.7 2 3 2.6.3.2.5.1.7-.1l.6-.7c.2-.3.4-.3.7-.2l1.8.9c.3.1.5.2.6.4v.3z'/%3E%3C/svg%3E"); } /* rândul „Adaugă la favorite” + „Cere ofertă pentru firmă / SEAP →” (macheta: centrat, gap 22, 12,5 px) */ .single-product .entry-summary .cmv-buybox .cmv-buy-extra { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; margin: 11px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; } .single-product .entry-summary .cmv-buybox .cmv-buy-extra .ct-product-additional-actions { margin: 0; padding: 0; border: 0; } .single-product .entry-summary .cmv-buybox .cmv-buy-extra .ct-wishlist-button-single { display: flex; align-items: center; gap: 6px; padding: 0; min-height: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: #55606E; } .single-product .entry-summary .cmv-buybox .cmv-buy-extra .ct-wishlist-button-single .ct-label { display: inline !important; } .single-product .entry-summary .cmv-buybox .cmv-buy-extra .ct-wishlist-button-single .ct-tooltip { display: none !important; } .single-product .entry-summary .cmv-buybox .cmv-buy-extra .ct-wishlist-button-single svg { width: 15px; height: 15px; } .single-product .entry-summary .cmv-buybox .cmv-buy-extra .ct-wishlist-button-single:hover, .single-product .entry-summary .cmv-buybox .cmv-buy-seap:hover { color: #25803A; } .single-product .entry-summary .cmv-buybox .cmv-buy-seap { color: #55606E; text-decoration: none; } /* ce macheta NU are în casetă: nota de plată și categoriile/etichetele (categoriile rămân în firimituri și în fila „Link-uri utile”). ⚠️ Nota o tipărește tema (functions.php, închidere anonimă, nu se poate scoate din alt fișier) — se stinge aici. */ .single-product .entry-summary .cmv-buybox .cmv-pay-note, .single-product .entry-summary .cmv-buybox > .product_meta, .single-product .entry-summary .cmv-buybox > .product_meta + .ct-product-divider, .single-product .entry-summary .cmv-buybox > .ct-product-divider:last-child { display: none !important; } /* o singură linie deasupra avantajelor (macheta): o aveau și caseta, și lista ⇒ două linii */ .single-product .entry-summary .cmv-buybox .cmv-buy-usp { border-top: 0 !important; padding-top: 0 !important; } .single-product .entry-summary .cmv-buybox .cmv-buy-nota .cmv-program { white-space: nowrap; } /* telefon: prețul ÎNAINTEA stocului (machetele „Produs Mobil” și 3b). Regula `.stock{order:-1}` de mai sus e dinaintea rândului `.cm-price-row`; în rând, stocul trecea în STÂNGA prețului. */ .single-product .entry-summary .cmv-buybox .cm-price-row .stock { order: 0; } /* filele: fără majuscule, ca în machetă (13,5 / 700, subliniere verde de 3 px pe cea activă) */ .single-product .woocommerce-tabs ul.tabs.wc-tabs li > a { text-transform: none !important; letter-spacing: normal !important; } /* fila „Întrebări și răspunsuri” */ .single-product .cmv-qa { padding: 4px 0 8px; } .single-product .cmv-qa .cmv-qa-titlu { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #1B2430; } .single-product .cmv-qa .cmv-qa-text { margin: 0 0 14px; font-size: 14px; color: #55606E; } .single-product .cmv-qa .cmv-qa-butoane { display: flex; flex-wrap: wrap; gap: 10px; } .single-product .cmv-qa .cmv-qa-wa, .single-product .cmv-qa .cmv-qa-tel a { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 12px; box-sizing: border-box; font-size: 13.5px; font-weight: 700; text-decoration: none; } .single-product .cmv-qa .cmv-qa-wa { background: #25803a; color: #fff; } .single-product .cmv-qa .cmv-qa-wa:hover { background: #1E6B32; color: #fff; } .single-product .cmv-qa .cmv-qa-tel a { border: 1.5px solid #1B2430; color: #1B2430; } /* 12.10.2026 (accesibilitate, target-size): linkurile din breadcrumb pe telefon ating 24 px inaltime fara sa mute randul (padding compensat cu margin negativ). 15.10.2026: zona de atingere >= 40 px. Banda se trage pe orizontala (overflow-x:auto), deci taie tot ce iese din ea si pe verticala: ramanea 19 px oricat padding aveau linkurile. Primeste si ea 11 px sus/jos, compensati cu margin negativ. */ @media (max-width: 767px) { .single-product nav.ct-breadcrumbs { padding-block: 11px; margin-block: -11px; } .single-product nav.ct-breadcrumbs a { display: inline-block; padding-block: 11px; margin-block: -11px; } /* casa are inaltime fixa (24 px, produs2.css): cu border-box padding-ul i-ar manca din ea; 24 + 22 = 46, margin -14 => tot 18 px in rand, ca inainte */ .single-product nav.ct-breadcrumbs .first-item > a { box-sizing: content-box; margin-block: -14px; } }