/* ============================================================================= Pagina de produs — incoplus.ro ----------------------------------------------------------------------------- Namespace: .inco-pdp* (PDP = Product Detail Page). Zero coliziuni cu tema, cu Elementor și cu .inco-product-card. 🔑 SCALARE: clamp() pe 360 → 1440px, conform 00-instructiuni-lucru.md §Scalare. Toate valorile care scalează sunt DECLARATE O SINGURĂ DATĂ, ca variabile pe .inco-pdp, cu perechea (min → max) scrisă în comentariu. Așa se pot verifica la 360 și la 1440 fără să citești tot fișierul. Formula, pentru min la 360px și max la 1440px: slope = (max − min) / 1080 × 100 [vw] intercept = min − slope × 3.6 [px] 🔑 CULORI: doar var(--token), niciodată hex — 02-design-system.md. Fallback-urile sunt valorile reale din Kit-ul Elementor #8. 🔑 MEDIA QUERIES: unul singur, la 900px, și DOAR pentru lucruri care chiar se schimbă (o coloană vs. două, unde stau butoanele). Nicio proprietate nu e și clamp-uită, și rescrisă în media query — regula 4 din instrucțiuni. ========================================================================== */ .inco-pdp { /* --- spațieri ---------------------------------------------------------- */ --pdp-gap-xs: clamp(0.5rem, 0.4167rem + 0.3704vw, 0.75rem); /* 8 → 12 */ --pdp-gap-sm: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem); /* 12 → 16 */ --pdp-gap-md: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem); /* 16 → 24 */ --pdp-gap-lg: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem); /* 24 → 40 */ --pdp-gap-section: clamp(2rem, 1.3333rem + 2.963vw, 4rem); /* 32 → 64 */ --pdp-pad-box: clamp(0.75rem, 0.5833rem + 0.7407vw, 1.25rem); /* 12 → 20 */ /* --- tipografie (aceleași trepte ca global classes din Elementor) ------- */ --pdp-fs-title: clamp(1.25rem, 1rem + 1.1111vw, 2rem); /* 20 → 32 */ --pdp-fs-section: clamp(1.125rem, 0.6667rem + 2.037vw, 2.5rem); /* 18 → 40 */ --pdp-fs-price: clamp(1.25rem, 1rem + 1.1111vw, 2rem); /* 20 → 32 */ --pdp-fs-body: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem); /* 14 → 16 */ --pdp-fs-small: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem); /* 12 → 14 */ --pdp-fs-tiny: clamp(0.625rem, 0.5833rem + 0.1852vw, 0.75rem); /* 10 → 12 */ /* --- forme ------------------------------------------------------------- */ --pdp-radius: clamp(0.5rem, 0.4167rem + 0.3704vw, 0.75rem); /* 8 → 12 */ --pdp-option: clamp(2.25rem, 2.1667rem + 0.3704vw, 2.5rem); /* 36 → 40 */ --pdp-thumb: clamp(4rem, 3.6667rem + 1.4815vw, 5rem); /* 64 → 80 */ --pdp-border: var(--light-gray, #C4D2D7); --pdp-ink: var(--darker-cyan, #0A435C); --pdp-muted: var(--dark-gray, #648696); --pdp-accent: var(--cyan, #056E9B); --pdp-tranzitie: .25s ease; /* Verdele WhatsApp. ⚠️ Nu e din design system-ul nostru și nici n-are ce căuta acolo: e culoarea unei mărci străine. Scris ca token local ca să nu ajungă `#0C7414` copiat în patru reguli. */ --pdp-whatsapp: #0C7414; /* glifa si aprinderea */ --pdp-whatsapp-text: #14631F; /* eticheta in repaus */ --pdp-whatsapp-fundal: #EDF7EE; /* fundalul in repaus */ --pdp-whatsapp-chenar: #CBE4CF; /* chenarul in repaus */ --pdp-whatsapp-aprins: #DDEEDF; /* fundalul la aprindere */ /* Containerul. Lățimea și padding-ul sunt rescrise la finalul fișierului, în secțiunea §Lățimea containerului — acolo e regula în trepte cerută. */ box-sizing: border-box; width: 100%; margin-inline: auto; color: var(--pdp-ink); font-size: var(--pdp-fs-body); } .inco-pdp *, .inco-pdp *::before, .inco-pdp *::after { box-sizing: border-box; } /* `hidden` pus de JS trebuie să bată orice `display` declarat mai jos. */ .inco-pdp [hidden] { display: none !important; } /* ---------------------------------------------------------------- breadcrumb */ .inco-pdp__breadcrumb { margin-block: var(--pdp-gap-sm) var(--pdp-gap-md); } .inco-pdp__breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pdp-gap-xs); margin: 0; padding: 0; list-style: none; font-size: var(--pdp-fs-small); } .inco-pdp__breadcrumb li { display: flex; align-items: center; gap: var(--pdp-gap-xs); } .inco-pdp__breadcrumb li + li::before { content: "›"; color: var(--pdp-muted); } .inco-pdp__breadcrumb a { color: var(--pdp-muted); text-decoration: none; } .inco-pdp__breadcrumb a:hover, .inco-pdp__breadcrumb a:focus-visible { color: var(--pdp-accent); text-decoration: underline; } .inco-pdp__breadcrumb [aria-current] { color: var(--pdp-ink); font-weight: 600; } /* --------------------------------------------------------------------- grilă */ .inco-pdp__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pdp-gap-lg); align-items: start; } .inco-pdp__col { min-width: 0; } /* ------------------------------------------------------------------- galerie */ .inco-pdp-gallery__stage { position: relative; border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); overflow: hidden; } /* * Banda de imagini: derulare ORIZONTALĂ nativă, cu oprire pe imagine. * * Cerut de Seba pe 14 august — pe telefon imaginea se schimba doar din * miniaturi. Același tipar ca la caruselul de produse: `scroll-snap`, nu * `transform` mutat din JS. Aici e și singurul fel în care degetul poate TRAGE * imaginea, nu doar să o schimbe după gest. * * ⚠️ `touch-action: pan-y pinch-zoom` lipsește intenționat: implicit browserul * decide singur direcția gestului, iar o restrângere aici ar fi luat pagina * dreptul de a derula vertical dintr-un deget pornit peste imagine. */ .inco-pdp-gallery__figure { margin: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* Fără asta, ultimul swipe „scapă" în derularea paginii de dedesubt. */ overscroll-behavior-x: contain; /* Bara de derulare ar tăia o dungă din imagine și ar strica raportul 1/1. */ scrollbar-width: none; } .inco-pdp-gallery__figure::-webkit-scrollbar { display: none; } .inco-pdp-gallery__image { display: block; width: 100%; height: auto; /* `flex: 0 0 100%` — o imagine pe ecran, exact cât banda. `width` singur n-ar fi ajuns: într-un flex, elementele se strâng ca să încapă toate. */ flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--pdp-pad-box); } .inco-pdp-gallery__flags { position: absolute; inset-block-start: var(--pdp-gap-sm); inset-inline-end: var(--pdp-gap-sm); z-index: 2; } /* * 🔑 Butoanele de peste imagine sunt componenta din grilă, cu clasa ei — * `product-card.css` le dă formă, culori, hover și ×-ul de scoatere. * * Aici rămâne un singur lucru: variabila din care se nasc mărimile lor. * Sunt `clamp(24px, calc(24px + var(--inco-pc-t) * 4), 28px)`, iar `--inco-pc-t` * se naște din container query-ul cardului, care aici nu există. Nedeclarată, * **toată** declarația e invalidă — nu doar bucata ei — deci butoanele ar * rămâne fără lățime, fără niciun semn că ceva e greșit. * * `1px` le duce la capătul de sus: 28px, cu iconița 20. * * 🔴 Aici scria `1`, fără unitate — și asta strica exact ce apăra comentariul. * Pe card variabila e `calc((100cqi - 156px) / 87.2)`, adică o LUNGIME; un * număr gol face `calc(24px + 1 * 4)` să însemne „24px + 4", care e invalid, * deci declarația cade la fel de tăcut ca dacă variabila lipsea. * **Verificarea „e declarată?" nu e aceeași cu „e de tipul potrivit?".** * Măsurat pe 14 august: butoanele erau 20×20, fără fundal și fără rază. */ .inco-pdp__main .inco-product-card__tools { --inco-pc-t: 1px; } .inco-pdp-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--pdp-gap-xs); margin: var(--pdp-gap-sm) 0 0; padding: 0; list-style: none; } .inco-pdp-gallery__thumb { display: block; padding: 4px; cursor: pointer; inline-size: var(--pdp-thumb); block-size: var(--pdp-thumb); border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); transition: border-color var(--pdp-tranzitie); } .inco-pdp-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; } .inco-pdp-gallery__thumb:hover { border-color: var(--pdp-accent); } .inco-pdp-gallery__thumb.is-active { border-color: var(--pdp-accent); border-width: 2px; padding: 3px; } .inco-pdp-gallery__thumb:focus-visible { outline: 2px solid var(--pdp-accent); outline-offset: 2px; } /* ------------------------------------------------------------------- sumarul */ .inco-pdp-summary { display: flex; flex-direction: column; gap: var(--pdp-gap-md); } .inco-pdp-summary__badges { display: flex; flex-wrap: wrap; gap: var(--pdp-gap-xs); } .inco-pdp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px var(--pdp-gap-xs); border-radius: 999px; font-size: var(--pdp-fs-tiny); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; } .inco-pdp-badge--bestseller { background: #FDF1E7; color: #B4620E; } .inco-pdp-badge--favourite { background: #FDECEF; color: var(--red, #DB4F4F); } .inco-pdp-badge--stock { background: #E7F5F0; color: var(--green, #239278); } .inco-pdp-badge--nostock { background: #F2F5F6; color: var(--pdp-muted); } .inco-pdp-summary__title { margin: 0; font-size: var(--pdp-fs-title); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--pdp-ink); } .inco-pdp-summary__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pdp-gap-sm); } .inco-pdp-rating { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; } .inco-pdp-rating__stars { position: relative; display: inline-block; font-size: var(--pdp-fs-body); line-height: 1; letter-spacing: .1em; color: var(--light-gray, #C4D2D7); } .inco-pdp-rating__stars::before { content: "★★★★★"; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--inco-pdp-stars, 0%); overflow: hidden; white-space: nowrap; color: #F5A623; } .inco-pdp-rating__value { font-weight: 600; font-size: var(--pdp-fs-small); } .inco-pdp-rating__count, .inco-pdp-panel__count { padding: 1px 6px; border-radius: 999px; background: var(--light-cyan, #EAF9FF); color: var(--pdp-muted); font-size: var(--pdp-fs-tiny); font-weight: 600; } .inco-pdp-sold { color: #B4620E; font-size: var(--pdp-fs-small); font-weight: 600; } .inco-pdp-summary__excerpt { color: var(--pdp-muted); line-height: 1.55; } .inco-pdp-summary__excerpt p { margin: 0 0 .5em; } .inco-pdp-summary__excerpt p:last-child { margin-bottom: 0; } /* ----------------------------------------------------- selector + preț + spec */ .inco-pdp-picker { display: flex; flex-direction: column; gap: var(--pdp-gap-sm); padding: var(--pdp-pad-box); border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); } .inco-pdp-picker__label { margin: 0; font-size: var(--pdp-fs-small); color: var(--pdp-muted); } .inco-pdp-picker__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pdp-gap-md); } .inco-pdp-picker__axes { display: flex; flex-direction: column; gap: var(--pdp-gap-xs); } .inco-pdp-picker__axis { display: flex; flex-wrap: wrap; gap: var(--pdp-gap-xs); } .inco-pdp-option { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--pdp-option); block-size: var(--pdp-option); padding-inline: var(--pdp-gap-xs); border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); color: var(--pdp-ink); font-size: var(--pdp-fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color var(--pdp-tranzitie), background-color var(--pdp-tranzitie), color var(--pdp-tranzitie); } a.inco-pdp-option:hover, a.inco-pdp-option:focus-visible { border-color: var(--pdp-accent); color: var(--pdp-accent); } .inco-pdp-option.is-active { background: var(--pdp-accent); border-color: var(--pdp-accent); color: var(--pure-white, #fff); } /* * Fără stoc: tăiat, dar tot clicabil — clientul are voie să vadă produsul și * să-l pună la favorite. Doar butonul de cumpărare e cel care se oprește. */ .inco-pdp-option.is-out { color: var(--pdp-muted); text-decoration: line-through; opacity: .65; } .inco-pdp-option.is-out.is-active { background: var(--pdp-muted); border-color: var(--pdp-muted); color: var(--pure-white, #fff); opacity: 1; } .inco-pdp-picker__price { display: flex; flex-direction: column; gap: 2px; margin-inline-start: auto; } .inco-pdp-picker__price .inco-product-price__current, .inco-pdp-picker__price .price ins, .inco-pdp-picker__price .price > .amount { font-size: var(--pdp-fs-price); font-weight: 600; color: var(--pdp-ink); } .inco-pdp-price__unit { margin: 0; font-size: var(--pdp-fs-small); color: var(--pdp-muted); } /* * Omnibus — sub casetă, pe rândul lui. * `--pdp-fs-small` (12 → 14), nu `--pdp-fs-tiny`: la 360px `tiny` cobora la * 10px, iar ăsta e text cerut de lege, care trebuie citit. Culoarea e cea a * liniei „lei / bucată", ca să nu fie două griuri în aceeași casetă. */ /* Fără margine proprie: `.inco-pdp-picker` are deja `gap: 8px`, exact cât e și între etichetă și casetă — deci mesajul stă simetric față de casetă, lipit de prețul pe care îl explică, nu la egală distanță de butonul de cumpărare. */ .inco-pdp-picker__legal .inco-pret-minim { margin: 0; font-size: var(--pdp-fs-small); line-height: 1.4; color: var(--pk-stins, #53798A); } .inco-pdp-specs { display: flex; flex-direction: column; gap: var(--pdp-gap-xs); margin: 0; padding: 0; list-style: none; } .inco-pdp-spec { display: flex; align-items: center; gap: 6px; font-size: var(--pdp-fs-small); } .inco-pdp-spec__icon { display: inline-flex; color: var(--pdp-muted); flex: 0 0 auto; } .inco-pdp-spec__label { color: var(--pdp-muted); } .inco-pdp-spec__value { font-weight: 600; } /* ------------------------------------------------------------- cumpărare ----*/ .inco-pdp-summary__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pdp-gap-xs); } .inco-pdp-summary__buy .inco-product-quantity { flex: 0 0 auto; } .inco-pdp-summary__buy .inco-add-to-cart, .inco-pdp-summary__buy .button { flex: 1 1 12rem; justify-content: center; } .inco-pdp-summary__actions { display: flex; flex-wrap: wrap; gap: var(--pdp-gap-xs); } .inco-pdp-summary__actions > * { flex: 1 1 10rem; } .inco-pdp-summary__actions .inco-wishlist-button, .inco-pdp-summary__actions .inco-compare-button--wide { display: inline-flex; align-items: center; justify-content: center; gap: var(--pdp-gap-xs); inline-size: 100%; min-block-size: 44px; margin: 0; padding-inline: var(--pdp-gap-sm); border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); color: var(--pdp-ink); font-size: var(--pdp-fs-small); font-weight: 600; cursor: pointer; transition: border-color var(--pdp-tranzitie), color var(--pdp-tranzitie); } .inco-pdp-summary__actions .inco-wishlist-button:hover, .inco-pdp-summary__actions .inco-compare-button--wide:hover, .inco-pdp-summary__actions .inco-wishlist-button:focus-visible, .inco-pdp-summary__actions .inco-compare-button--wide:focus-visible { border-color: var(--pdp-accent); color: var(--pdp-accent); } .inco-pdp-summary__actions .inco-wishlist-button__label { display: inline; } /* * Aceeași corecție ca pe card: `Summary.php` învelește iconița într-un `` * inline, iar SVG-ul se așază pe linia de bază, deci desenul urcă cu ~3px față * de text. Aici se vede mai puțin decât în cerc, dar cauza e identică. * → `product-card.css`, §iconița de comparare */ .inco-pdp-summary__actions .inco-compare-button__icon { display: inline-flex; align-items: center; line-height: 0; } .inco-pdp-summary__actions .inco-compare-button__icon svg { display: block; } /* X-ul de scoatere, ca pe card — tot din opacitate, ca să se anime. */ .inco-pdp-summary__actions :is(.inco-compare-button__icon, .inco-wishlist-button__icon) { position: relative; } .inco-pdp-summary__actions :is(.inco-compare-button, .inco-wishlist-button) svg { transition: opacity var(--pdp-tranzitie, .3s ease); } .inco-pdp-summary__actions :is(.inco-compare-button, .inco-wishlist-button) .inco-icon-x { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, -50%); opacity: 0; } .inco-pdp-summary__actions :is(.inco-compare-button, .inco-wishlist-button).is-active:hover .inco-icon-x, .inco-pdp-summary__actions :is(.inco-compare-button, .inco-wishlist-button).is-active:focus-visible .inco-icon-x { opacity: 1; } .inco-pdp-summary__actions :is(.inco-compare-button, .inco-wishlist-button).is-active:hover svg:not(.inco-icon-x), .inco-pdp-summary__actions :is(.inco-compare-button, .inco-wishlist-button).is-active:focus-visible svg:not(.inco-icon-x) { opacity: 0; } .inco-pdp-summary__meta { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--pdp-fs-small); color: var(--pdp-muted); } .inco-pdp-summary__meta > div { display: flex; gap: 6px; } .inco-pdp-summary__meta dt { margin: 0; } .inco-pdp-summary__meta dd { margin: 0; font-weight: 600; color: var(--pdp-ink); } .inco-pdp-summary__meta a { color: inherit; } .inco-pdp-contact { padding: var(--pdp-pad-box); border-radius: var(--pdp-radius); background: var(--light-cyan, #EAF9FF); font-size: var(--pdp-fs-small); } .inco-pdp-contact p { margin: 0 0 4px; } .inco-pdp-contact p:last-child { margin-bottom: 0; } .inco-pdp-contact__title { font-weight: 600; font-size: var(--pdp-fs-body); color: var(--pdp-ink); } .inco-pdp-contact__hours { color: var(--pdp-muted); } .inco-pdp-contact a { color: var(--pdp-accent); font-weight: 600; } /* Iconița de WhatsApp din casetă. 🔑 Nu-și declară nicio culoare: e desenată cu `currentColor`, iar link-ul de deasupra o are deja pe `--pdp-accent`. Scrisă a doua oară aici, ar fi rămas albastră în ziua în care se schimbă accentul. */ .inco-pdp-contact__whatsapp a { display: inline-flex; align-items: center; gap: 6px; } .inco-pdp-contact__whatsapp-icon { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; } .inco-pdp-contact__whatsapp-icon svg { display: block; } /* -------------------------------------------------------------------- panouri */ .inco-pdp-panel { margin-block-start: var(--pdp-gap-lg); border-block-end: 1px solid var(--pdp-border); } .inco-pdp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pdp-gap-sm); padding-block: var(--pdp-gap-sm); } .inco-pdp-panel__tabs { display: flex; flex-wrap: wrap; gap: var(--pdp-gap-md); } .inco-pdp-panel__tab { padding: 0 0 4px; border: 0; border-block-end: 2px solid transparent; background: none; cursor: pointer; color: var(--pdp-muted); font-size: var(--pdp-fs-body); font-weight: 600; font-family: inherit; transition: color var(--pdp-tranzitie), border-color var(--pdp-tranzitie); } .inco-pdp-panel__tab.is-active { color: var(--pdp-ink); border-block-end-color: var(--pdp-accent); } .inco-pdp-panel__tab:hover { color: var(--pdp-ink); } .inco-pdp-panel__tab:focus-visible { outline: 2px solid var(--pdp-accent); outline-offset: 2px; } .inco-pdp-panel__title { display: flex; align-items: center; gap: var(--pdp-gap-xs); margin: 0; font-size: var(--pdp-fs-body); font-weight: 600; } .inco-pdp-panel__score { display: inline-flex; align-items: center; gap: 2px; color: #F5A623; } .inco-pdp-panel__star { display: inline-flex; } .inco-pdp-panel__toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--pdp-muted); transition: transform var(--pdp-tranzitie), color var(--pdp-tranzitie); } .inco-pdp-panel__toggle:hover { color: var(--pdp-accent); } .inco-pdp-panel__toggle:focus-visible { outline: 2px solid var(--pdp-accent); outline-offset: 2px; } .inco-pdp-panel__toggle[aria-expanded="true"] { transform: rotate(180deg); } .inco-pdp-panel__body { display: none; padding-block-end: var(--pdp-gap-md); } .inco-pdp-panel.is-open > .inco-pdp-panel__body { display: block; } .inco-pdp-panel__pane { display: none; } .inco-pdp-panel__pane.is-active { display: block; } .inco-pdp-prose { line-height: 1.6; color: var(--pdp-muted); } .inco-pdp-prose h2, .inco-pdp-prose h3, .inco-pdp-prose h4 { color: var(--pdp-ink); font-size: var(--pdp-fs-body); margin-block: 1em .4em; } .inco-pdp-prose ul, .inco-pdp-prose ol { padding-inline-start: 1.25em; margin-block: .5em; } .inco-pdp-prose table { inline-size: 100%; border-collapse: collapse; } .inco-pdp-prose th, .inco-pdp-prose td { padding: var(--pdp-gap-xs) 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--pdp-border); font-size: var(--pdp-fs-small); } .inco-pdp-prose th { color: var(--pdp-muted); font-weight: 500; inline-size: 45%; } .inco-pdp-prose td { color: var(--pdp-ink); font-weight: 600; } /* * „Citește mai mult". Textul e ÎNTREG în pagină — se limitează doar vizual, * ca să nu pierdem nimic din SEO și ca extinderea să fie instantanee. */ .inco-pdp-prose.is-clamped { display: -webkit-box; -webkit-line-clamp: var(--inco-pdp-lines, 8); -webkit-box-orient: vertical; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); } .inco-pdp-more { display: inline-flex; align-items: center; gap: 4px; margin-block-start: var(--pdp-gap-xs); padding: 0; border: 0; background: none; cursor: pointer; color: var(--pdp-accent); font-family: inherit; font-size: var(--pdp-fs-small); font-weight: 600; } .inco-pdp-more:focus-visible { outline: 2px solid var(--pdp-accent); outline-offset: 2px; } .inco-pdp-more[aria-expanded="true"] svg { transform: rotate(180deg); } .inco-pdp-more svg { transition: transform var(--pdp-tranzitie); } /* Fără JS butonul n-are ce comuta, deci nu-l arătăm. */ .inco-pdp-more { display: none; } .inco-pdp.is-js .inco-pdp-more { display: inline-flex; } .inco-pdp:not(.is-js) .inco-pdp-prose.is-clamped { -webkit-line-clamp: unset; display: block; -webkit-mask-image: none; mask-image: none; } /* ------------------------------------------------------- similare + secțiuni */ .inco-pdp__related { margin-block-start: var(--pdp-gap-section); } /* * Secțiunea de newsletter, adusă de pe pagina de start. * * 🔑 Aceeași distanță ca „Alții au mai cumpărat" — ritmul e al paginii ăsteia, * deci se scrie aici, nu în foaia de unde vine secțiunea. */ .inco-pdp .inco-home--incastrat { margin-block-start: var(--pdp-gap-section); } .inco-pdp__section-title { margin: 0 0 var(--pdp-gap-md); font-size: var(--pdp-fs-section); font-weight: 600; letter-spacing: -.02em; color: var(--pdp-ink); } /* ============================================================ ≥ 900px: 2 col */ @media (min-width: 900px) { .inco-pdp__main { grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr); } /* Pe desktop favoritele și compararea sunt butoane late sub „Adaugă în coș". ⚠️ Prefixat cu containerul: componenta își declară `display: flex` la (0,1,0) în `product-card.css`, iar la egalitate câștigă fișierul de jos. */ .inco-pdp__main .inco-product-card__tools { display: none; } /* Chip-urile de specificații: doar iconiță + valoare, ca în design. */ .inco-pdp-spec__label { display: none; } .inco-pdp-specs { gap: 6px; } } /* * 🔴 Aici era `.inco-pdp-summary__actions { display: none }` pe mobil, cu * motivul „sunt deja peste imagine". * * Scos la cererea lui Seba, 14 august: butoanele late se văd la orice lățime. * Cele de peste imagine rămân — sunt o scurtătură, nu un înlocuitor, iar * eticheta scrisă spune ce fac. * * ⚠️ Regula era scrisă în DOUĂ locuri, aici la (0,1,0) și mai jos, în blocul * de mobil, la (0,2,0). Scoasă doar una, cealaltă ascundea mai departe — * exact ce se întâmplă când același lucru e hotărât de două ori. */ @media (prefers-reduced-motion: reduce) { .inco-pdp *, .inco-pdp *::before, .inco-pdp *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================================================================= 🔴 TEMA ȘI WOOCOMMERCE PESTE NOI — măsurat în browser, 4 august 2026 ----------------------------------------------------------------------------- Aceeași familie de bug ca pe 31 iulie la card, dar pe pagina de produs, unde remediile de atunci nu ajung: ele sunt scoped sub `.inco-product-card`. Ce am măsurat efectiv pe pagină, nu ghicit din captură: .inco-qty__btn 54×44, border 1px #cc3366, radius 3px, padding 8/16 .inco-qty__input border 1px #666, radius 3px, padding 8/16 .inco-pdp-panel__tab font 16/400, border 1px #cc3366, radius 3px .inco-pdp-panel__toggle 58×40 în loc de 40×40, border #cc3366 .inco-pdp-more border 1px #cc3366, radius 3px, color #cc3366 .inco-add-to-cart fundal PLAT #0D9488 în loc de gradientul oficial 🔑 De ce pierdeam: regulile mele sunt de o clasă (0,1,0), iar tema și WooCommerce folosesc `.woocommerce button`, `.woocommerce input` (0,2,1). Ordinea fișierelor nu ajută — CSS-ul temei se încarcă DUPĂ al nostru. 🔑 Regula învățată pe 31 iulie, aplicată aici: se declară TOATE proprietățile stării, nu doar cea vizibilă în captură. Altfel repari culoarea și rămâne chenarul, repari chenarul și rămâne raza. ========================================================================== */ /* Reset complet pentru orice control din pagină. `.inco-pdp` + element = (0,1,1), iar cu clasa proprie a controlului ajungem la (0,2,1) — cât WooCommerce. 🔴 Cu o EXCEPȚIE: pastilele de peste imagine. Ele nu sunt controale ale paginii ăsteia, sunt componenta din grilă, adusă aici cu clasa ei — iar `product-card.css` o îmbracă întreagă. Resetul o dezbrăca: `.inco-pdp__main [type="button"]` e (0,2,0) *(atributul valorează cât o clasă — §4g)*, exact cât `.inco-product-card__tools .inco-wishlist-button`, iar la egalitate câștigă fișierul încărcat mai târziu, adică ăsta. Rezultatul, măsurat: 20px lățime, fundal transparent, rază 0. 🔑 Se EXCLUDE, nu se re-îmbracă. A doua variantă ar fi însemnat aceleași cinci valori scrise a doua oară, într-un fișier care nu le e stăpân — adică exact duplicarea scoasă pe 10 august, când divul a primit clasa cardului. */ .inco-pdp__main button:not(.inco-product-card__tools > *), .inco-pdp__main input[type="number"], .inco-pdp__main input[type="text"], .inco-pdp__main [type="button"]:not(.inco-product-card__tools > *) { appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; padding: 0; margin: 0; background: none; background-color: transparent; color: inherit; font: inherit; line-height: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; width: auto; } /* Stările pe care `reset.css` din Hello le colorează în #cc3366. Aceeași excepție ca mai sus: pastilele își au stările în `product-card.css`, inclusiv ×-ul de scoatere. Fără excludere, hover-ul le stingea fundalul. */ .inco-pdp__main button:not(.inco-product-card__tools > *):hover, .inco-pdp__main button:not(.inco-product-card__tools > *):focus, .inco-pdp__main button:not(.inco-product-card__tools > *):active, .inco-pdp__main [type="button"]:not(.inco-product-card__tools > *):hover, .inco-pdp__main [type="button"]:not(.inco-product-card__tools > *):focus, .inco-pdp__main [type="button"]:not(.inco-product-card__tools > *):active { background: none; background-color: transparent; border-color: transparent; color: inherit; box-shadow: none; } /* --- taburi, chevron, „citește mai mult" ---------------------------------- */ .inco-pdp__main .inco-pdp-panel__tab, .inco-pdp__main .inco-pdp-panel__tab:hover, .inco-pdp__main .inco-pdp-panel__tab:focus { inline-size: auto; block-size: auto; padding: 0 0 6px; border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: none; color: var(--pdp-muted); font-size: var(--pdp-fs-body); font-weight: 600; cursor: pointer; } .inco-pdp__main .inco-pdp-panel__tab.is-active { color: var(--pdp-ink); border-block-end-color: var(--pdp-accent); } .inco-pdp__main .inco-pdp-panel__tab:hover { color: var(--pdp-ink); } .inco-pdp__main .inco-pdp-panel__toggle, .inco-pdp__main .inco-pdp-panel__toggle:hover, .inco-pdp__main .inco-pdp-panel__toggle:focus { inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--pdp-muted); cursor: pointer; } .inco-pdp__main .inco-pdp-panel__toggle:hover { color: var(--pdp-accent); } .inco-pdp__main .inco-pdp-more, .inco-pdp__main .inco-pdp-more:hover, .inco-pdp__main .inco-pdp-more:focus { inline-size: auto; block-size: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--pdp-accent); font-size: var(--pdp-fs-small); font-weight: 600; cursor: pointer; } /* --- favorite / comparare: butoane late, nu pastile de temă --------------- */ /* ⚠️ `:hover` și `:focus` NU mai stau în lista asta. Erau aici din v1.9.1, ca „plasă" împotriva temei, dar declară și `border-radius` și `font-size`. Cu valorile noi din nodul Figma (8px / 16px) scrise mai jos, pe hover regula veche câștiga și butonul sărea la 12px rază și 14px font. Starea de hover își are propriile reguli, la finalul fișierului. */ .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide { inline-size: 100%; min-block-size: 44px; padding-inline: var(--pdp-gap-sm); border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); color: var(--pdp-ink); font-size: var(--pdp-fs-small); font-weight: 600; cursor: pointer; } .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button:hover, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide:hover { border-color: var(--pdp-accent); color: var(--pdp-accent); } .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button.is-active { color: var(--red, #DB4F4F); border-color: var(--red, #DB4F4F); } /* --- 🔴 lățimea paginii --------------------------------------------------- Hello Elementor pune `main.site-main { max-width: 1140px }`. Containerul nostru de 1344 nu are cum să crească peste părinte, deci pagina ieșea cu 200px mai îngustă decât designul. Deschidem părintele DOAR pe pagina de produs, ca să nu atingem restul site-ului. */ body.single-product .site-main { max-width: none; width: 100%; } /* ============================================================================= Stepper + „Adaugă în coș" — IDENTICE cu cele din loop grid ----------------------------------------------------------------------------- Cerință Seba, 4 aug: „stepperul si butonul de add to cart trebuie sa fie ca pe loop grid". Valorile de mai jos sunt copiate din `product-card.css`, nu reinventate — 42px înălțime, radius 8, buton de 36, pastila albă lipită de marginea din dreapta. Trei diferențe FAȚĂ de card, cerute explicit: 1. eticheta rămâne vizibilă și pe mobil (pe card dispare la carduri înguste) 2. fundalul e VERDE mereu, nu gradient 3. pe hover verdele se închide puțin ========================================================================== */ .inco-pdp__main .inco-product-quantity { display: flex; align-items: center; flex: 0 0 auto; block-size: 42px; overflow: hidden; border: 1px solid var(--pdp-border); border-radius: 8px; background: var(--white, #FBFCFF); } .inco-pdp__main .inco-product-quantity .inco-qty__btn, .inco-pdp__main .inco-product-quantity .inco-qty__btn:hover, .inco-pdp__main .inco-product-quantity .inco-qty__btn:focus { display: flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--pdp-ink); cursor: pointer; } .inco-pdp__main .inco-qty__btn svg { inline-size: 14px; block-size: 14px; } .inco-pdp__main .inco-qty__btn:hover:not([disabled]) { color: var(--pdp-accent); } .inco-pdp__main .inco-qty__btn[disabled], .inco-pdp__main .inco-qty__btn[disabled]:hover { color: var(--pdp-border); cursor: default; opacity: 1; } .inco-pdp__main .inco-qty__btn:focus-visible { outline: 2px solid var(--pdp-accent); outline-offset: -2px; } .inco-pdp__main .inco-product-quantity .inco-qty__input, .inco-pdp__main .inco-product-quantity .inco-qty__input:focus { inline-size: 40px; block-size: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--pdp-ink); font-size: var(--pdp-fs-body); font-weight: 600; line-height: 1; text-align: center; box-shadow: none; -moz-appearance: textfield; } .inco-pdp__main .btn-primary.inco-add-to-cart, .inco-pdp__main .btn-primary.inco-add-to-cart:focus { position: relative; isolation: isolate; display: flex; align-items: center; /* * 🔴 `gap: 0` — altfel moștenește 10px din regula veche `.btn-primary * .inco-add-to-cart`, iar gap-ul e VOPSIT în zona colorată fără să facă parte * din cutia etichetei: textul se centra într-o cutie cu 10px mai scurtă decât * ce vede ochiul și ieșea împins la stânga cu 5px. Aceeași cauză ca pe card. */ gap: 0; flex: 1 1 12rem; min-inline-size: 0; block-size: 42px; /* `btn-primary` din temă impune min-height 44 și dezaliniază stepper-ul de 42 de lângă. Aceeași corecție ca pe card. */ min-block-size: 0; /* 1px în dreapta: fundalul se vede ca o ramă subțire în jurul pastilei albe. Sus și jos vine singur, din 42 − 40. 🔴 În stânga NU mai e nimic. Cu 12px acolo, cutia etichetei începea mai la dreapta decât zona colorată, deci textul ieșea centrat în cutia LUI, dar împins cu 6px față de zona pe care o vede ochiul. Fără padding, cutia etichetei ESTE zona colorată, iar centrarea din ea e și centrarea văzută. */ padding: 0 1px 0 0; border: 0; border-radius: 8px; /* 🔑 Verde plat, nu gradient — cerință Seba. Aceeași valoare care pe card era doar starea de hover. */ background: #0b8669; color: var(--pure-white, #fff); font-size: var(--pdp-fs-body); font-weight: 600; letter-spacing: -.01em; text-decoration: none; cursor: pointer; overflow: hidden; transition: background-color .3s ease-in-out; } /* Verdele se închide puțin la hover. Fiind culoare plată, se poate anima direct — n-avem nevoie de stratul cu `opacity` de pe card, care exista doar pentru că acolo dedesubt era un gradient, iar gradientele nu se animă. */ /* * 🔴 `color` se declară AICI, deși nu se schimbă. Semnalat de Seba, 14 august: * la trecerea mouse-ului, „Adaugă în coș" își pierdea albul și textul se topea * în verde. * * Vinovat e resetul nostru de butoane de mai sus *(§tema peste noi)*, care pune * `color: inherit` pe `:hover` ca să scape de rozul temei. Moștenit de la * `.inco-pdp`, `inherit` înseamnă `--pdp-ink` — bleumarin pe verde. * * ⚠️ **De ce a stat nevăzut: `:focus` era deja reparat**, la §butonul de * cumpărare, unde regula îl are în selector. Cine l-a scris a văzut jumătate * din problemă. → **O stare reparată nu spune nimic despre surorile ei; se * verifică toate patru.** *(§4n)* * * Specificitatea: resetul cântărește (0,3,1) — `:not()` ia specificitatea * argumentului, iar `:hover` valorează cât o clasă. Regula asta e (0,4,0), deci * câștigă. O clasă mai puțin și n-ar fi făcut nimic. */ .inco-pdp__main .btn-primary.inco-add-to-cart:hover, .inco-pdp__main .btn-primary.inco-add-to-cart:active, .inco-pdp__main .btn-primary.inco-add-to-cart:focus-visible { background: #096b54; color: var(--pure-white, #fff); } /* Eticheta ocupă tot spațiul rămas și e centrată în el; pastila e împinsă în dreapta de tot. Așa textul stă centrat optic, iar iconița e mereu la margine. */ .inco-pdp__main .btn-primary.inco-add-to-cart .inco-add-to-cart__label { flex: 1 1 auto; min-inline-size: 0; text-align: center; line-height: 1; } .inco-pdp__main .btn-primary.inco-add-to-cart .inco-add-to-cart__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-inline-start: auto; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: 7px; background: var(--pure-white, #fff); color: var(--pdp-ink); } .inco-pdp__main .btn-primary.inco-add-to-cart:disabled, .inco-pdp__main .btn-primary.inco-add-to-cart[disabled] { opacity: .5; cursor: not-allowed; } /* Opțiunile de mărime: text centrat pe ambele axe. Fără `line-height: 1` textul moștenea 1.55 din container, iar cutia de linie ieșea mai înaltă decât litera — de aici senzația că nu e centrat pe verticală. */ .inco-pdp__main .inco-pdp-option { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--pdp-option); block-size: var(--pdp-option); padding-block: 0; padding-inline: var(--pdp-gap-sm); line-height: 1; text-align: center; } /* ============================================================================= Liniile despărțitoare și rama casetei de contact ----------------------------------------------------------------------------- Cerință Seba, 4 aug. În design, blocul SKU/Brand e delimitat sus și jos de câte o linie subțire, iar caseta „Îți răspundem cu drag" are chenar propriu, nu doar fundal. ========================================================================== */ .inco-pdp .inco-pdp-summary__meta { padding-block: var(--pdp-gap-sm); border-block: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-contact { border: 1px solid var(--pdp-border); } /* ============================================================================= Titlul și ritmul din sumar — cerință Seba, 4 aug ----------------------------------------------------------------------------- „title line height 1 desktop 1.2 mobile" · „summary gap 16px desktop 8px mobile" 🔑 Line-height-ul e scris ca LUNGIME, nu ca factor. Factorul se înmulțește cu font-size-ul, care e el însuși scalat 20 → 32px. Un `clamp()` pe factor ar da 1.2 × 20 = 24 la mobil și 1 × 32 = 32 la desktop — dar numai la capete; între ele cele două scalări s-ar bate cap în cap. Scris ca lungime, 24 → 32px, rezultatul e exact cel cerut la ambele capete ȘI liniar între ele. ========================================================================== */ .inco-pdp { --pdp-lh-title: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem); /* 24 → 32 = 1.2×20 → 1×32 */ --pdp-gap-summary: clamp(0.5rem, 0.3333rem + 0.7407vw, 1rem); /* 8 → 16 */ } .inco-pdp .inco-pdp-summary { gap: var(--pdp-gap-summary); } .inco-pdp .inco-pdp-summary__title { line-height: var(--pdp-lh-title); } /* ============================================================================= Lățimea containerului, padding-ul de secțiune și fundalul paginii ----------------------------------------------------------------------------- Cerință Seba, 4 aug: „PADDINGUL LA ORICE SECȚIUNE E 0 DESKTOP, 20 TABLETĂ, 16PX TELEFON" „fundalul întregii pagini trebuie să fie #FAFCFF" 🔑 Aici NU se folosește clamp(), intenționat. Regula e în TREPTE, nu fluidă — trei valori fixe pe trei clase de ecran. Un `clamp()` ar da 12px la 900px lățime, adică nici 20, nici 16. Regula 4 din `00-instructiuni-lucru.md` spune să alegi una dintre cele două mecanici, nu să le amesteci; aici alegerea corectă e media query. Pragurile sunt cele din Elementor, ca să nu avem două seturi în site: telefon ≤ 767 tabletă 768–1024 desktop ≥ 1025 ========================================================================== */ .inco-pdp { /* 1344px = `padding-default` din Kit-ul Elementor, aceeași lățime ca mega menu-ul. Pe desktop containerul nu mai are padding, deci max-width-ul e chiar lățimea conținutului. */ max-width: 1344px; padding-inline: 0; } @media (max-width: 1024.98px) { .inco-pdp { padding-inline: 20px; } } @media (max-width: 767.98px) { .inco-pdp { padding-inline: 16px; } } /* 🔑 Fundalul paginii NU se pune aici. Stă în Elementor → Site Settings → Custom CSS (Kit #8), ca `:root` + `body`, pentru că trebuie să acopere tot site-ul, nu doar paginile pe care se încarcă acest fișier. Scris acolo pe 4 aug: :root { --inco-page-bg: #FAFCFF; } body { background-color: var(--inco-page-bg); } Dacă vreodată dispare, acolo se caută — nu în plugin. */ /* ============================================================================= Corecții după a doua privire pe pagina reală — 4 august 2026 ========================================================================== */ /* 🔴 Lățimea. `body.single-product .site-main` din v1.9.1 NU câștiga. Hello Elementor folosește în `theme.css` selectorul grupat: body:not([class*=elementor-page-]) .site-main { max-width: … } `:not()` primește specificitatea argumentului, deci selectorul lui e (0,2,1) — exact cât al meu. La egalitate câștigă cine se încarcă ultimul, iar CSS-ul temei vine după al pluginului. Adăugând `main` la `.site-main` ajung la (0,2,2) și câștig curat, fără `!important`. Zerorizez și padding-ul de 10px pe care tema îl pune pe aceeași regulă — al nostru stă pe `.inco-pdp`. */ body.single-product main.site-main { max-width: none; width: 100%; padding-inline: 0; } /* Miniaturile: contur de 1px la amândouă stările, ca în Figma. Activa — `green-fill-primary-default` (#056E9B); restul — `grey-border-fill`. Aveam 2px pe cea activă, ceea ce o făcea să „sară" față de celelalte. */ .inco-pdp__main .inco-pdp-gallery__thumb, .inco-pdp__main .inco-pdp-gallery__thumb:hover, .inco-pdp__main .inco-pdp-gallery__thumb:focus { padding: 4px; border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--pure-white, #fff); cursor: pointer; } .inco-pdp__main .inco-pdp-gallery__thumb:hover { border-color: var(--pdp-accent); } .inco-pdp__main .inco-pdp-gallery__thumb.is-active, .inco-pdp__main .inco-pdp-gallery__thumb.is-active:hover { padding: 4px; border: 1px solid var(--pdp-accent); } /* Caseta „Îți răspundem cu drag la întrebări" — chenar propriu, ca în design, și titlu fără subliniere (tema subliniază orice text tare din conținut). */ .inco-pdp__main .inco-pdp-contact { border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); background: var(--light-cyan, #EAF9FF); } .inco-pdp__main .inco-pdp-contact__title { text-decoration: none; border: 0; } /* ============================================================================= 🔴 Reset-ul de butoane intra peste cardurile din carusel — reparat ----------------------------------------------------------------------------- „Alții au mai cumpărat" e tot în `.inco-pdp`, deci `.inco-pdp button { … }` ateriza și pe butoanele cardurilor: eticheta „Adaugă" se strângea la „A", iar săgețile caruselului își pierdeau cutia. Vinovat: eu. Un reset scris pe rădăcina paginii atinge tot ce e sub ea, inclusiv componente care își au deja stilurile lor. Corecția: toate regulile de control sunt acum sub `.inco-pdp__main` — galerie, sumar și panouri, adică exact ce desenez eu. Caruselul stă în `.inco-pdp__related`, deci rămâne pe `product-card.css`, unde îi e locul. 👉 Regulă de reținut: un reset se scrie pe bucata pe care o desenezi, niciodată pe containerul care găzduiește și componente străine. ========================================================================== */ /* 🔴 Aici era o „plasă de siguranță" care punea `flex: 0 1 auto` pe eticheta cardului. Efect: eticheta nu mai umplea butonul, spațiul liber se aduna în DREAPTA pastilei albe, iar iconița nu mai stătea la 1px de margine. Scoasă. Scoping-ul pe `.inco-pdp__main` e suficient — o plasă care strică ce protejează e mai rea decât lipsa ei. */ /* ============================================================================= Caseta de selecție: lățime după conținut + linie între preț și specificații ----------------------------------------------------------------------------- Cerință Seba, 4 aug. Fără axă, caseta se strânge singură în jurul prețului — nu mai rămâne o ramă lată și goală pe jumătate. ========================================================================== */ .inco-pdp__main .inco-pdp-picker { inline-size: fit-content; max-inline-size: 100%; } /* Linia dintre grupul de preț și chip-urile de specificații. Doar de la 900px în sus: mai jos cele două se așază una sub alta, iar o linie verticală între rânduri suprapuse n-ar despărți nimic. */ @media (min-width: 900px) { .inco-pdp__main .inco-pdp-specs { padding-inline-start: var(--pdp-gap-md); border-inline-start: 1px solid var(--pdp-border); align-self: stretch; justify-content: center; } } /* „Citește mai mult" — centrat sub text, ca în design. `inline-flex` + `margin-inline: auto` nu centrează (elementul rămâne în fluxul de linie), deci trecem pe `flex` cu lățime după conținut. */ .inco-pdp.is-js .inco-pdp__main .inco-pdp-more { display: flex; inline-size: fit-content; margin-inline: auto; } /* Imaginea principală: raportul din Figma. Fundal alb și pe cutie, și pe imagine, ca să pară o singură suprafață. 🔑 DOUĂ rapoarte, câte unul per lățime, amândouă din machetă: desktop 777 / 480 (1,619) telefon 328 / 208 (1,577) 🔴 Era declarat DOAR `777/480`, global, din `v1.12.0`. Foarte aproape de raportul de telefon, deci nu sărea în ochi — dar nu era cel din machetă. 🔴 Și corectura mea din `v1.15.7` a fost greșită în cealaltă direcție: am scos raportul de pe telefon crezând că rama trebuie pătrată. Fără `aspect-ratio`, înălțimea vine din imagine, iar lățimea ramei ajunge să depindă de mărimea fișierului — de aia un produs arăta bine și altul nu. **Un raport declarat face rama independentă de poză; unul lipsă o leagă de ea.** Valoarea a dat-o Seba din Figma. */ .inco-pdp__main .inco-pdp-gallery__stage, .inco-pdp__main .inco-pdp-gallery__figure { background: var(--pure-white, #fff); } .inco-pdp__main .inco-pdp-gallery__image { inline-size: 100%; block-size: auto; aspect-ratio: 328 / 208; object-fit: contain; background: var(--pure-white, #fff); } @media (min-width: 900px) { .inco-pdp__main .inco-pdp-gallery__image { aspect-ratio: 777 / 480; } } /* ============================================================================= Tabelul de specificații — „Informații suplimentare" ----------------------------------------------------------------------------- Vine din `wc_display_product_attributes()`, deci poartă stilurile WooCommerce: rânduri zebrate gri, valori în italic, chenar de tabel. Nimic din astea nu e în limbajul site-ului. Ce am schimbat și de ce: · fără zebră și fără chenar — tabelul e o listă de perechi, nu o foaie de calcul; o linie subțire între rânduri e destul ca să se citească · fără italic — valorile sunt date, nu citate · eticheta stinsă, valoarea în culoarea textului și 600 — ochiul caută valoarea, nu numele câmpului · ultimul rând fără linie, ca să nu se lipească de marginea panoului · pe telefon fiecare rând devine bloc: la 360px două coloane înghesuie „Nivel incontinență" pe trei rânduri Specificitatea urcă până la clasa proprie a tabelului, altfel `.woocommerce table.shop_attributes td` (0,2,2) câștigă. ========================================================================== */ .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes, .inco-pdp__main .inco-pdp-prose table.shop_attributes { inline-size: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; } .inco-pdp__main .inco-pdp-prose table.shop_attributes tr, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr { background: none; } .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.shop_attributes td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td { padding: var(--pdp-gap-sm) 0; border: 0; border-block-end: 1px solid var(--pdp-border); background: none; font-size: var(--pdp-fs-small); font-style: normal; line-height: 1.4; text-align: start; vertical-align: top; } .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th { inline-size: 40%; padding-inline-end: var(--pdp-gap-md); color: var(--pdp-muted); font-weight: 500; } .inco-pdp__main .inco-pdp-prose table.shop_attributes td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td { color: var(--pdp-ink); font-weight: 600; } .inco-pdp__main .inco-pdp-prose table.shop_attributes td p, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td p { margin: 0; font-style: normal; } /* Ultimul rând fără linie — panoul are deja una dedesubt. */ .inco-pdp__main .inco-pdp-prose table.shop_attributes tr:last-child th, .inco-pdp__main .inco-pdp-prose table.shop_attributes tr:last-child td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr:last-child th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr:last-child td { border-block-end: 0; } @media (max-width: 599.98px) { .inco-pdp__main .inco-pdp-prose table.shop_attributes tr, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr { display: block; padding-block: var(--pdp-gap-xs); border-block-end: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.shop_attributes td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td { display: block; inline-size: 100%; padding: 0; border: 0; } .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th { margin-block-end: 2px; font-size: var(--pdp-fs-tiny); } .inco-pdp__main .inco-pdp-prose table.shop_attributes tr:last-child, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr:last-child { border-block-end: 0; } } /* ============================================================================= Panourile Descriere / Informații / Recenzii — ritm și linii ----------------------------------------------------------------------------- Cerință Seba, 4 aug: 16px între panouri, fără liniile în plus, iar linia dintre conținut și „Recenzii" apare DOAR când textul e desfăcut. Logica din spate: cât timp textul e tăiat, estomparea îi marchează deja sfârșitul — o linie peste ea ar fi a doua graniță pentru același lucru. Când textul e întreg, estomparea dispare și linia devine necesară. ========================================================================== */ .inco-pdp__main .inco-pdp-panel { margin-block-start: 1rem; /* 16px, fix — e ritm între blocuri, nu scalare */ border-block-end: 0; } .inco-pdp__main .inco-pdp-panel__head { padding-block: 0 var(--pdp-gap-xs); } .inco-pdp__main .inco-pdp-panel__body { padding-block-end: 0; } /* Linia de sub rândul de taburi rămâne — desparte comanda de conținut. */ .inco-pdp__main .inco-pdp-panel--tabs > .inco-pdp-panel__head, .inco-pdp__main .inco-pdp-panel--reviews > .inco-pdp-panel__head { border-block-end: 1px solid var(--pdp-border); } /* Linia de închidere a panoului de descriere, doar cu textul desfăcut ȘI doar cu panoul deschis. 🔴 Fără a doua condiție rămânea orfană: cu panoul închis, textul din corp e tot „nedecupat" — doar că nu se vede — deci linia continua să se deseneze la 17px sub cea de antet. Se citeau trei linii unde erau două secțiuni. O linie de închidere n-are ce închide când nu e nimic deschis. */ .inco-pdp__main .inco-pdp-panel--tabs.is-open:has(.inco-pdp-prose:not(.is-clamped)) { border-block-end: 1px solid var(--pdp-border); padding-block-end: var(--pdp-gap-sm); } /* Linia de sub rândul de taburi — scoasă. O adăugasem în v1.9.11, dar în design nu există: sub „Descriere" e doar sublinierea tabului activ, iar linia de închidere vine abia deasupra „Recenzii". */ .inco-pdp__main .inco-pdp-panel--tabs > .inco-pdp-panel__head { border-block-end: 0; } /* Tabelul de specificații: rânduri mai strânse și text retras de la margine. Fără retragere, valorile păreau că ies din coloana de text de deasupra. */ .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.shop_attributes td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td { padding-block: 4px; padding-inline-start: var(--pdp-gap-sm); } .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th { padding-inline-end: var(--pdp-gap-md); } @media (max-width: 599.98px) { .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.shop_attributes td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td { padding-inline: var(--pdp-gap-sm) 0; } } /* ============================================================================= Selectorul de mărime — 1:1 cu Figma, nod 18255:9284 ----------------------------------------------------------------------------- Valorile de mai jos sunt CITITE din nod, nu aproximate. Perechea min→max e scrisă în comentariu la fiecare, ca să se poată verifica la 360 și 1440. Tokens noi față de Kit: #53798a (inputs-placeholder), #e8f8ff (blue-card-fill), #f0f5f7 (fundal opțiune indisponibilă), #d73b3b (red-label-fill-surface). ========================================================================== */ .inco-pdp__main .inco-pdp-picker { --pk-pad: clamp(0.75rem, 0.6458rem + 0.463vw, 1.0625rem); /* 12 → 17 */ --pk-radius: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem); /* 12 → 16 */ --pk-gap: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem); /* 12 → 16 */ --pk-optiune:clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem); /* 16 → 20 */ --pk-pret: clamp(1.5rem, 1.4167rem + 0.3704vw, 1.75rem); /* 24 → 28 */ --pk-vechi: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem); /* 16 → 20 */ --pk-badge: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */ --pk-unit: clamp(0.875rem,0.8333rem + 0.1852vw, 1rem); /* 14 → 16 */ --pk-spec: 0.875rem; /* 14, fix pe ambele */ --pk-stins: #53798a; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pk-gap); padding: var(--pk-pad); border: 1px solid var(--pdp-border); border-radius: var(--pk-radius); background: var(--pure-white, #fff); } /* Eticheta iese din cutie: în Figma stă deasupra, la 8px. */ .inco-pdp__main .inco-pdp-picker__label { flex: 1 0 100%; order: -1; margin: 0 0 8px; font-size: 1rem; font-weight: 400; line-height: 1; color: var(--pdp-ink); } .inco-pdp__main .inco-pdp-picker__body { display: contents; /* cele trei secțiuni devin frați direct în cutie */ } .inco-pdp__main .inco-pdp-picker__axes { display: flex; flex-direction: column; gap: 8px; } .inco-pdp__main .inco-pdp-picker__axis { display: flex; flex-wrap: wrap; gap: 8px; } /* Opțiunile: cercuri de 40px, fără contur. */ .inco-pdp__main .inco-pdp-option { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; inline-size: 40px; block-size: 40px; min-inline-size: 0; padding: 0; border: 0; border-radius: 999px; background: var(--blue-card-fill-default, #e8f8ff); color: var(--pdp-ink); font-size: var(--pk-optiune); font-weight: 700; line-height: 1; letter-spacing: -0.03em; /* -0.6px la 20px */ text-transform: uppercase; text-decoration: none; } .inco-pdp__main .inco-pdp-option.is-active { background: var(--cyan, #056e9b); color: var(--white-bg, #fafcff); } /* Fără stoc: fundal stins, text stins și o tăietură la 45°, nu line-through. */ .inco-pdp__main .inco-pdp-option.is-out { background: #f0f5f7; color: var(--pk-stins); text-decoration: none; opacity: 1; } .inco-pdp__main .inco-pdp-option.is-out::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 1px; block-size: 40px; background: var(--pdp-border); transform: translate(-50%, -50%) rotate(-45deg); } /* * Combinația nu EXISTĂ — altceva decât „nu e pe stoc". * * 🔑 Tăietură pe text, nu linia la 45° de la „fără stoc". Diagonala e desenată * pentru cercul de 40px; pe pastilele lungi *(„10 buc", „90x170 cm")* ar tăia o * felie dintr-un dreptunghi lat și n-ar mai semăna cu nimic. Tăietura pe text * merge la fel pe amândouă formele. * * ⚠️ Cele două stări arată apropiat, și e voit: pentru cumpărător concluzia e * aceeași — nu poate lua asta. Care din două se află din text, la hover. */ .inco-pdp__main .inco-pdp-option.is-imposibil { background: #f0f5f7; color: var(--pk-stins); text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; } /* Cele două linii verticale: axă │ prețuri │ specificații. */ .inco-pdp__main .inco-pdp-picker__price::before, .inco-pdp__main .inco-pdp-specs::before { content: ""; flex: 0 0 auto; align-self: stretch; inline-size: 1px; margin-inline-end: var(--pk-gap); border-radius: 99px; background: var(--pdp-border); } .inco-pdp__main .inco-pdp-picker__price { display: flex; align-items: stretch; margin: 0; } .inco-pdp__main .inco-pdp-picker__price > .inco-product-price, .inco-pdp__main .inco-pdp-picker__price > .inco-pdp-price__unit { order: 1; } .inco-pdp__main .inco-pdp-picker__price .inco-product-price { display: flex; flex-direction: column; gap: 4px; } .inco-pdp__main .inco-pdp-picker__price .inco-product-price__top { display: flex; align-items: center; gap: 8px; } .inco-pdp__main .inco-pdp-picker__price .inco-product-price__regular { font-size: var(--pk-vechi); font-weight: 600; line-height: 1; color: var(--pk-stins); text-decoration: line-through; } .inco-pdp__main .inco-pdp-picker__price .inco-product-price__discount { padding: 2px 4px; border-radius: 4px; background: #d73b3b; color: var(--white-bg, #fafcff); font-size: var(--pk-badge); font-weight: 600; line-height: 1; } .inco-pdp__main .inco-pdp-picker__price .inco-product-price__current, .inco-pdp__main .inco-pdp-picker__price .inco-product-price__current .amount { font-size: var(--pk-pret); font-weight: 600; line-height: 1; color: var(--cyan, #056e9b); /* ← prețul e ALBASTRU, nu bleumarin */ } .inco-pdp__main .inco-pdp-price__unit { margin: 4px 0 0; font-size: var(--pk-unit); font-weight: 600; line-height: 1; color: var(--pk-stins); } .inco-pdp__main .inco-pdp-specs { display: flex; flex: 1 1 auto; flex-direction: row; gap: 0; padding: 0; border: 0; margin: 0; list-style: none; } .inco-pdp__main .inco-pdp-specs::before { order: -1; } .inco-pdp__main .inco-pdp-specs > li { order: 1; } .inco-pdp__main .inco-pdp-specs { flex-wrap: wrap; align-content: flex-start; row-gap: 8px; } .inco-pdp__main .inco-pdp-spec { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; font-size: var(--pk-spec); font-weight: 600; line-height: 1; color: var(--pdp-ink); } .inco-pdp__main .inco-pdp-spec__icon { inline-size: 20px; block-size: 20px; color: inherit; } .inco-pdp__main .inco-pdp-spec__icon svg { inline-size: 20px; block-size: 20px; } /* eticheta specificației: vizibilă pe mobil, ascunsă pe desktop — vezi mai jos */ /* ── Selectorul pe mobil (nod Figma 18255:9531) ───────────────────────────── Structura chiar se schimbă, nu doar dimensiunile: pe mobil cutia e coloană, linia dintre preț și specificații devine ORIZONTALĂ și pe toată lățimea, iar specificațiile își arată eticheta („Circumferința taliei: 130-170 cm"). De aceea aici e media query, nu clamp — clamp-ul scalează valori, nu rearanjează. */ @media (max-width: 899.98px) { .inco-pdp__main .inco-pdp-picker { flex-direction: column; gap: 8px; } .inco-pdp__main .inco-pdp-picker__label { font-size: 0.875rem; font-weight: 500; } /* Rândul 1: opțiuni │ preț — rămâne orizontal, cu linie verticală. */ .inco-pdp__main .inco-pdp-picker__axes { flex: 0 0 auto; } .inco-pdp__main .inco-pdp-picker__price { align-self: stretch; } /* Specificațiile trec dedesubt, cu linie orizontală deasupra. */ .inco-pdp__main .inco-pdp-specs { flex: 1 0 100%; flex-direction: column; gap: 8px; padding-block-start: 8px; border-block-start: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-specs::before { display: none; } .inco-pdp__main .inco-pdp-spec { flex: 0 0 auto; } .inco-pdp__main .inco-pdp-spec__label { display: inline; font-weight: 400; } } @media (min-width: 900px) { /* Pe desktop apare doar valoarea, lângă iconiță. */ .inco-pdp__main .inco-pdp-spec__label { display: none; } } /* Breadcrumb-ul WooCommerce, îmbrăcat în limbajul nostru. Nu-l înlocuim cu unul propriu: pe acțiunea `woocommerce_breadcrumb` stă și `WC_Structured_Data::generate_breadcrumb_data()`, deci înlocuindu-l am pierde `BreadcrumbList` din rezultatele Google. Îl stilizăm, atât. */ body.single-product .woocommerce-breadcrumb { inline-size: 100%; max-inline-size: 1344px; /* * 🔴 MARGINEA DE SUS TRĂGEA BANDA DE FAGURI DUPĂ EA — 20 august. * * Firimiturile sunt primul copil al lui `
`, iar `
` n-are nici * padding, nici bordură, nici context de formatare — deci o margine de sus * pusă aici **nu rămâne înăuntru: colapsează prin `
` și mută `
` * însuși**. Banda de faguri e `main::after` cu `inset: 0`, deci pornea de * unde pornea `
` — cu 12px mai jos decât se termină antetul. * * Măsurat la 1440: antetul se termină la 146, `
` începea la **158**. * Pe arhivă decalajul e **0**, fiindcă acolo primul copil are marginea 0 — * de aia se vedea numai pe paginile de produs. * * 🔑 Aceiași 12px, mutați din afara cutiei înăuntru: firimiturile rămân * vizual exact unde erau *(146 + 12 = 158)*, dar `
` nu mai e împins. * Măsurat după reparație: `.inco-pdp` și marginea de jos a lui `
` * **neatinse** — singura valoare schimbată e unde începe banda. * * ⚠️ `margin-block-start`, nu shorthand-ul întreg: `auto` de pe orizontală e * cel care centrează firimiturile la 1344px *(cei 48px măsurați la 1440)*. * * ⚠️ Se schimbă în AMÂNDOUĂ regulile care ating firimiturile — asta și * `.inco-pdp-crumbs` de mai jos au aceeași specificitate (0,2,0) și cad pe * același element. Reparată una singură, cealaltă rămâne gata s-o învie. */ margin: 0 auto var(--pdp-gap-md, 16px); padding-block-start: var(--pdp-gap-sm, 12px); padding-inline: 0; color: var(--dark-gray, #648696); font-size: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem); line-height: 1.4; } body.single-product .woocommerce-breadcrumb a { color: var(--dark-gray, #648696); text-decoration: none; } body.single-product .woocommerce-breadcrumb a:hover { color: var(--cyan, #056E9B); text-decoration: underline; } @media (max-width: 1024.98px) { body.single-product .woocommerce-breadcrumb { padding-inline: 20px; } } @media (max-width: 767.98px) { body.single-product .woocommerce-breadcrumb { padding-inline: 16px; } } /* ============================================================================= Structura casetei de selecție — corectată ----------------------------------------------------------------------------- Două greșeli ale mele, amândouă vizibile abia pe pagină: 1. `fit-content` peste `flex-wrap: wrap` = fiecare secțiune pe rândul ei. Cutia se strângea la cel mai îngust element posibil. 2. Eticheta „Alege mărimea:" stătea ÎN cutie. În Figma e deasupra ei, la 8px — cutia cu chenar începe abia de la opțiuni. ========================================================================== */ .inco-pdp__main .inco-pdp-picker { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; inline-size: fit-content; max-inline-size: 100%; padding: 0; border: 0; border-radius: 0; background: none; } .inco-pdp__main .inco-pdp-picker__label { flex: 0 0 auto; order: 0; margin: 0; } /* Cutia cu chenar e `__body`, nu rădăcina. */ .inco-pdp__main .inco-pdp-picker__body { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: var(--pk-gap); inline-size: fit-content; max-inline-size: 100%; padding: var(--pk-pad); border: 1px solid var(--pdp-border); border-radius: var(--pk-radius); background: var(--pure-white, #fff); } @media (max-width: 899.98px) { .inco-pdp__main .inco-pdp-picker { inline-size: 100%; } .inco-pdp__main .inco-pdp-picker__body { flex-wrap: wrap; inline-size: 100%; gap: 8px; } .inco-pdp__main .inco-pdp-picker__axes, .inco-pdp__main .inco-pdp-picker__price { flex: 0 0 auto; } .inco-pdp__main .inco-pdp-specs { flex: 1 0 100%; } } /* Firimiturile — nod Figma 18091:6726, pe markup-ul WooCommerce (ca să nu pierdem `BreadcrumbList` din datele structurate). gap 8 · 16px · linkurile Regular #53798A · pagina curentă Medium #056E9B separator: chevronul de 16 din nod, nu un glyph — glyph-ul are alt desen în fiecare font, deci nu se putea potrivi. 🔑 Pagina curentă e singura bucată care NU e link, iar WooCommerce o scrie ca text simplu, fără element propriu. De aceea culoarea ei stă pe container, iar linkurile o suprascriu — n-avem nevoie de niciun selector în plus. 🔴 Aveam `> :last-child` pentru ea, dar ultimul COPIL e separatorul, nu textul: se colora săgeata, nu numele produsului. */ body.single-product .inco-pdp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; inline-size: 100%; max-inline-size: 1344px; /* Cei 12px de sus stau în `padding`, nu în `margin` — altfel colapsează prin `
` și trag banda de faguri cu ei. Motivul întreg, la regula `.woocommerce-breadcrumb` de mai sus. */ margin: 0 auto var(--pdp-gap-md, 16px); padding-block-start: var(--pdp-gap-sm, 12px); color: var(--cyan, #056E9B); font-size: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem); /* 14 → 16 */ font-weight: 500; line-height: 1; } body.single-product .inco-pdp-crumbs a, body.single-product .inco-pdp-crumbs a:visited { color: #53798A; font-weight: 400; text-decoration: none; } body.single-product .inco-pdp-crumbs a:hover, body.single-product .inco-pdp-crumbs a:focus-visible { color: var(--cyan, #056E9B); text-decoration: none; } body.single-product .inco-pdp-crumbs__sep { display: inline-flex; align-items: center; color: #53798A; } body.single-product .inco-pdp-crumbs__sep svg { display: block; } @media (max-width: 1024.98px) { body.single-product .inco-pdp-crumbs { padding-inline: 20px; } } @media (max-width: 767.98px) { body.single-product .inco-pdp-crumbs { padding-inline: 16px; } } /* ============================================================================= Opțiunile de mărime: grilă, nu rând care se rupe unde apucă ----------------------------------------------------------------------------- Cu `flex-wrap` și cutia pe `fit-content`, coloana de opțiuni se strângea la minim și trei mărimi se rupeau 2 + 1. Cu multe mărimi ar fi ieșit și mai rău. Grila rezolvă amândouă cazurile dintr-o dată: coloane fixe de 40px, deci cercurile stau unul sub altul perfect aliniate, oricâte ar fi. Plafonul de 5 pe rând ține blocul îngust cât să încapă prețul lângă el pe desktop. ========================================================================== */ .inco-pdp__main .inco-pdp-picker__axis { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 8px; justify-content: start; /* 5 cercuri de 40 + 4 spații de 8 = 232px */ inline-size: min(100%, 232px); } .inco-pdp__main .inco-pdp-picker__axes { flex: 0 0 auto; inline-size: max-content; max-inline-size: 232px; } /* Cu una singură pe rând grila ar lăsa gol; `min-content` o strânge la fix. */ .inco-pdp__main .inco-pdp-picker__axis:only-child { inline-size: max-content; max-inline-size: 232px; } @media (max-width: 899.98px) { /* Pe telefon prețul stă oricum alături, deci lăsăm 4 pe rând ca să rămână loc. */ .inco-pdp__main .inco-pdp-picker__axis, .inco-pdp__main .inco-pdp-picker__axes { max-inline-size: 184px; } } /* ============================================================================= 🔴 Dividerele din casetă nu se vedeau — cauza reală ----------------------------------------------------------------------------- Le făcusem ca `::before` cu `align-self: stretch` în interiorul lui `.inco-pdp-picker__price`. Dar acel bloc are `flex-direction: column` dintr-o regulă mai veche, pe care rescrierea ulterioară n-a resetat-o. Într-o coloană, un element de 1px lățime cu `stretch` devine o linie ORIZONTALĂ de 1px înălțime, lipită sus — practic invizibilă. Corecția nu e să repar pseudo-elementul, ci să scap de el: o bordură pe marginea blocului face același lucru și nu depinde deloc de direcția flex. Regula generală: nu construi un separator dintr-un element care trebuie să se întindă, dacă nu controlezi axa pe care se întinde. ========================================================================== */ .inco-pdp__main .inco-pdp-picker__price::before, .inco-pdp__main .inco-pdp-specs::before { content: none; } .inco-pdp__main .inco-pdp-picker__price { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: 0; padding-inline-start: var(--pk-gap); border-inline-start: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-specs { display: flex; flex-direction: column; gap: 8px; align-content: flex-start; flex: 1 1 auto; margin: 0; padding: 0 0 0 var(--pk-gap); border-inline-start: 1px solid var(--pdp-border); list-style: none; } .inco-pdp__main .inco-pdp-spec { flex: 0 0 auto; } @media (max-width: 899.98px) { /* Pe mobil linia dintre preț și specificații devine orizontală, pe toată lățimea — cea verticală rămâne doar între mărimi și preț. */ .inco-pdp__main .inco-pdp-specs { flex: 1 0 100%; padding: 8px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--pdp-border); } } /* ============================================================================= Caseta de selecție și cele două butoane — valori MĂSURATE în pagină ----------------------------------------------------------------------------- Tot ce urmează a fost injectat live în browser și verificat cu `getBoundingClientRect()` înainte de a fi scris aici. Nu e reparat din capturi — asta a fost problema toată ziua. ========================================================================== */ /* Cutia se întinde cât are nevoie, nu la minimul absolut. `fit-content` o strângea și rupea textul specificațiilor pe două rânduri. */ .inco-pdp__main .inco-pdp-picker__body { inline-size: auto; flex-wrap: nowrap; align-items: flex-start; /* mărimi, preț și specificații pornesc de la același y */ } /* Grila de mărimi: lățime după conținut, coloanele vin din PHP. Măsurat: 3 → 136px · 4 → 88 · 6 → 136 · 9 → 136 · 12 → 184. Niciodată peste 184. */ .inco-pdp__main .inco-pdp-picker__axis { display: grid; grid-template-columns: repeat(var(--inco-pdp-cols, 3), 40px); gap: 8px; justify-content: start; inline-size: max-content; max-inline-size: none; } .inco-pdp__main .inco-pdp-picker__axes { flex: 0 0 auto; inline-size: max-content; max-inline-size: none; } /* ------------------------------------ doar preț, fără casetă (`--doar-pret`) ----*/ /* * Când nu e nimic de ales ȘI nu e nimic de arătat, caseta n-are ce încadra: * rămâne o singură linie de preț, iar un chenar în jurul ei o face să pară un * câmp de formular. Fără el, prețul se aliniază cu titlul, cu descrierea și cu * butonul de cumpărare — la aceeași verticală ca tot restul coloanei. * Măsurat: prețul era retras cu 18px, cât paddingul casetei. * * Clasa vine din PHP, unde știm și axele, și chip-urile. Cu specificații, * chenarul rămâne — acolo chiar sunt două lucruri despărțite de o linie. */ .inco-pdp__main .inco-pdp-picker--doar-pret .inco-pdp-picker__body { padding: 0; border: 0; border-radius: 0; background: transparent; } /* * Linia dintre preț și specificații ține TOT rândul, nu doar cât textul ei. * * 🔴 Pe 5 august am scris regula asta doar sub `--multi`, fiindcă acolo mi-o * ceruse Seba. Dar linia se desenează pe bordura cutiei de specificații, iar * cutia e înaltă cât conținutul: pe produsele fără familie ieșea un ciot de * 20px lângă un bloc de preț de 78px. Am scris-o unde am avut nevoie de ea în * ziua aia, nu unde era adevărată. */ .inco-pdp__main .inco-pdp-specs { align-self: stretch; } /* ------------------------------- familii cu MAI MULTE axe (`--multi`) ----*/ /* * Cu două axe („90x170 cm" ȘI „30 buc") pastilele citeau ca o singură listă: * nimic nu spunea unde se termină o alegere și începe cealaltă. Fiecare axă își * primește numele deasupra, iar linia despărțitoare se întoarce cu 90°, fiindcă * prețul nu mai stă pe același rând cu pastilele — o linie verticală ar fi * despărțit lucruri care oricum sunt pe rânduri diferite. * * Gata gardul: totul e sub `--multi`, deci familiile cu O SINGURĂ axă rămân * exact cum sunt în design. */ .inco-pdp__main .inco-pdp-picker--multi .inco-pdp-picker__axes { flex: 1 0 100%; flex-direction: column; gap: var(--pdp-gap-sm, 16px); /* * 🔴 Aici erau `padding-block-end` și `border-block-end` — linia orizontală * de sub opțiuni, desenată pe MARGINEA AXELOR. * * Erau corecte pe vremea lor, dar acum linia o desenează prețul, în ambele * stări (`border-block-start` când stă dedesubt). Lăsate amândouă, ieșeau * **două linii la 8px una de alta** — semnalat de Seba pe „seni active * classic". → **O linie se desenează într-un singur loc.** */ /* * 🔴 Obligatoriu împreună cu `flex-wrap` de mai jos. Regula generală pune * `inline-size: max-content` pe blocul de axe — adică „fii cât conținutul * tău nerupt". Cu asta, `flex-wrap` n-are de ce să rupă nimic: la 360px * cele 7 pastile de cantitate cereau 577px, caseta se făcea 603 și pagina * ieșea cu 259px de scroll orizontal. * → `flex-wrap` nu poate lucra dacă părintele își cere lățimea conținutului. */ inline-size: auto; min-inline-size: 0; } /* * Cu mai multe axe, opțiunile stau pe UN rând, nu într-o grilă de 2×2. * * Grila cu număr fix de coloane era gândită pentru cazul în care selectorul era * un singur bloc: 4 mărimi pe două rânduri țineau blocul îngust, ca prețul să * încapă lângă el. Cu `--multi` axele iau oricum toată lățimea, deci constrângerea * n-are ce apăra — iar un 2×2 lângă un rând de 2 pastile arată dezechilibrat. * * `flex-wrap`, nu un număr de coloane: cea mai lungă axă din catalog are **7** * opțiuni *(„82 buc", „78 buc", … la familia `scutece pentu copii happy`)*, care * n-au cum să încapă pe un rând. Așa stau pe unul singur când se poate și se rup * singure când nu — fără să numărăm nimic. */ .inco-pdp__main .inco-pdp-picker--multi .inco-pdp-picker__axis { display: flex; flex-wrap: wrap; gap: 8px; inline-size: auto; max-inline-size: 100%; } .inco-pdp__main .inco-pdp-picker--multi .inco-pdp-picker__group { display: flex; flex-direction: column; gap: 8px; } .inco-pdp__main .inco-pdp-picker--multi .inco-pdp-picker__axis-label { margin: 0; font-size: var(--pdp-fs-small); font-weight: 500; line-height: 1.2; color: var(--pk-stins, #53798A); } /* * Prețul deschide rândul nou, deci n-are ce despărți în stânga lui. * * 🔴 `:not(:first-child)` în selectorul general de mai jos — `:not()` preia * specificitatea argumentului, deci acela cântărește 3 (două clase + o * pseudo-clasă), exact cât cântărea regula asta cu trei clase. Egalitate → * câștiga cel scris mai târziu în fișier, adică al lui. De-aia linia rămânea. * Repet `:not(:first-child)` ca să fim la 4 și să nu depindem de ordine. */ /* * 🔴 Regula care ștergea linia la două axe A FOST SCOASĂ. (17 aug) * * Scria `border-inline-start: 0`, iar comentariul ei explica de ce: „prețul nu * mai stă pe același rând cu pastilele". **Măsurat: stătea** — la 1440, axele * și prețul porneau amândouă de la y=382,7. Premisa murise, regula rămăsese, * iar rezultatul era un preț de 56px plutind în dreapta unei coloane de 162px, * fără nimic care să le despartă. Exact ce a semnalat Seba. * * Acum nu mai există niciun caz special pentru `--multi`: intră în cele două * stări de mai jos, ca toată lumea. */ /* `align-self: stretch` pe specificații e acum general, mai sus — nu doar aici. */ /* * Axa cu etichete lungi — „90x170 cm", „30 buc". * Cercul fix de 40px e făcut pentru „M / L / XL"; pe restul tăia textul cu * `overflow: hidden`, deci se vedea „X60" în loc de „60x60 cm". * Aici pastila se lungește după conținut, iar grila devine flexibilă: cu lățimi * variabile, un număr fix de coloane ar fi făcut toate pastilele cât cea mai * lată. Clasa vine din PHP, deci se aplică din prima randare, nu după JS. */ .inco-pdp__main .inco-pdp-picker__axis.is-lung { display: flex; flex-wrap: wrap; inline-size: auto; max-inline-size: 100%; } .inco-pdp__main .inco-pdp-picker__axis.is-lung .inco-pdp-option { inline-size: auto; min-inline-size: 40px; padding-inline: 14px; font-size: 15px; overflow: visible; /* Majusculele forțate sunt pentru „xl"; „90X170 CM" se citește ca un strigăt. */ text-transform: none; } /* * 🔴 …dar `flex-wrap: wrap` de mai sus NU se declanșa niciodată. * * `__axes` are `inline-size: max-content`, iar `max-content` înseamnă exact * „lat cât ar fi conținutul dacă nu s-ar înfășura nicicând". Deci axa primea * oricâtă lățime cerea, n-avea de ce să rupă rândul, iar `max-inline-size: 100%` * de pe ea se calcula față de acel `max-content`, nu față de casetă. * * 🔑 **Wrap-ul nu depinde de elementul care se înfășoară, ci de lățimea pe care * i-o dă părintele.** Regula era scrisă corect și n-avea niciun efect. * * Nu s-a văzut până acum fiindcă premisa ei era adevărată: măsurătoarea de mai * sus („3 → 136 · 6 → 136 · 12 → 184, niciodată peste 184") e făcută pe cercuri * de 40px. Cu 10 etichete de tipul „Slim Micro Plus" axa cere 1062px într-o * casetă de 526 — măsurat pe Seni Lady: pagina se trăgea lateral cu 514px pe * desktop și 730px pe telefon, cu 7 pastile în afara ecranului. * * ⚠️ `flex: 0 1 auto`, nu `1 1 auto`: are voie să se STRÂNGĂ, nu să crească. * Cu `1 1 auto` axa ar fi umplut rândul și ar fi împins prețul dedesubt și la * familiile cu 2-3 etichete lungi, unde încape alături. Măsurat pe „pansament * din spumă ABENA LITE" (3 pastile): zero diferențe. */ .inco-pdp__main .inco-pdp-picker__axes:has(.inco-pdp-picker__axis.is-lung) { inline-size: auto; max-inline-size: 100%; min-inline-size: 0; flex: 0 1 auto; } /* * 🔴 …și tot n-ajungea: `flex: 0 1 auto` dă voie axei să se strângă, dar între * 900 și 1200px ea NU se strângea — se rupea rândul, prețul cobora sub pastile * și rămânea cu linia VERTICALĂ în stânga lui, lipită de nimic. * * 🔑 **Flexbox rupe rândul ÎNAINTE să strângă.** Rândurile se împart după * mărimea „ipotetică" a fiecărui element — pentru `flex-basis: auto` aceea e * `max-content` — iar strângerea se aplică abia după, în interiorul rândului * format. Deci o axă care AR ÎNCĂPEA strânsă nu apucă niciodată: pleacă din * calcul cu lățimea ei nestrânsă și ori intră așa, ori cade pe rândul următor. * Măsurat pe „aleză traversă" la 1000px: casetă 335,6 · axă 202,3 + gol 14,4 + * preț 120,1 = 336,8. Lipsesc 1,2px — iar axa s-ar fi putut strânge la 98,1. * * ✅ Leacul e să pornească din calculul de rânduri cu mărimea ei MINIMĂ, și să * crească înapoi din spațiul rămas, fără să treacă vreodată de lățimea ei * naturală. Așa rândul nu se mai rupe niciodată singur, iar unde e loc arată * exact ca înainte. * * ⚠️ `max-inline-size: max-content` nu poate produce depășire: `flex-grow` doar * împarte spațiul LIBER, deci fără spațiu liber axa rămâne la minim. * ⚠️ Restrâns la `:not(--stivuit)` și la desktop: peste prag și pe telefon * așezarea e hotărâtă anume, iar regula asta ar fi bătut-o (specificitate egală, * scrisă mai jos). * * Măsurat pe 11 pagini × 6 lățimi, în Chromium și WebKit: cele 14 celule * greșite (900–1200px) devin corecte, iar 1300/1440, telefonul, familiile * stivuite și cele cu cercuri rămân identice, valoare cu valoare. */ @media (min-width: 900px) { .inco-pdp__main .inco-pdp-picker:not(.inco-pdp-picker--stivuit) .inco-pdp-picker__axes:has(.inco-pdp-picker__axis.is-lung) { flex: 1 1 min-content; max-inline-size: max-content; } } /* ============================================================================= Opțiuni prea late ca să stea lângă preț (`--stivuit`) ----------------------------------------------------------------------------- Axa ia tot rândul, prețul coboară sub ea, aliniat la stânga — iar linia despărțitoare se întoarce din verticală în ORIZONTALĂ, deasupra prețului. 🔑 **De ce clasa vine din PHP și nu lăsăm flexbox-ul să se descurce singur.** Flexbox mută prețul dedesubt de la sine când nu mai încape — dar CSS-ul nu are cum să AFLE că s-a întâmplat. Nu există selector pentru „rândul s-a rupt". Deci `border-inline-start` ar fi rămas și acolo unde prețul e sub pastile: o liniuță verticală scurtă, lipită în stânga prețului, care nu mai desparte nimic de nimic. Cu hotărârea luată în PHP, așezarea și linia spun același lucru. → FamilySelector::stivuit() Pragul e măsurat, nu presupus: familiile cu etichete lungi cer 202 · 273 · 278 · 300px (încap) și 413 · 1062px (nu încap). Între ele nu e nimic. ========================================================================== */ /* --------------------------------------------------------------------------- STAREA 1 — prețul stă ALĂTURI: linie verticală, pe toată înălțimea. `align-self: stretch` nu e cosmetică: fără el prețul e înalt cât conținutul lui, deci linia ieșea un ciot. Măsurat la două axe: bloc 162,6px, preț 56 — **linia acoperea 34%**. Cu `stretch`, 100%. --------------------------------------------------------------------------- */ .inco-pdp__main .inco-pdp-picker__price:not(:first-child) { align-self: stretch; } /* --------------------------------------------------------------------------- STAREA 2 — prețul stă DEDESUBT: linie orizontală deasupra, pe toată lățimea. 🔑 **Cine hotărăște care stare e activă.** Pe desktop, PHP: `--stivuit` se pune când opțiunile nu încap lângă preț. Pe telefon, lățimea disponibilă scade la ~317px, iar prețul cere ~124 — deci orice axă peste ~184px coboară oricum. Măsurat acolo: pastilele lungi (278px) și cele două axe (317px) trec dedesubt, cercurile (136px) rămân alături. Cazurile astea se pot numi în CSS, deci se numesc. ⚠️ **De ce nu lăsăm flexbox-ul să decidă singur, cum făcea până acum:** el mută prețul corect, dar CSS-ul nu are cum să AFLE că a mutat. Nu există selector pentru „rândul s-a rupt". Așa au apărut cele trei celule greșite din matricea măsurată pe 17 aug: preț dedesubt cu linie verticală (telefon, o axă lungă), preț alături fără nicio linie (desktop, două axe), preț dedesubt fără nicio linie (telefon, două axe). → **Trei reguli scriau linia, fiecare presupunând altă așezare.** Acum sunt două stări, iar starea o hotărăște cineva anume. --------------------------------------------------------------------------- */ .inco-pdp__main .inco-pdp-picker--stivuit.inco-pdp-picker--stivuit .inco-pdp-picker__axes { inline-size: 100%; max-inline-size: 100%; flex: 1 1 100%; } /* `:not(:first-child)` repetat: `:not()` preia specificitatea argumentului, iar fără dublare regula generală a prețului cântărea la fel și câștiga cea scrisă mai târziu în fișier. */ .inco-pdp__main .inco-pdp-picker--stivuit .inco-pdp-picker__price:not(:first-child):not(:first-child) { inline-size: 100%; align-self: auto; border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--pdp-border); padding-block-start: var(--pk-gap); } @media (max-width: 899.98px) { .inco-pdp__main .inco-pdp-picker:has(.inco-pdp-picker__axis.is-lung) .inco-pdp-picker__axes { inline-size: 100%; max-inline-size: 100%; flex: 1 1 100%; } .inco-pdp__main .inco-pdp-picker:has(.inco-pdp-picker__axis.is-lung) .inco-pdp-picker__price:not(:first-child):not(:first-child) { inline-size: 100%; align-self: auto; border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--pdp-border); padding-block-start: var(--pk-gap); } } .inco-pdp__main .inco-pdp-picker__axis.is-lung { min-inline-size: 0; } /* Specificațiile: lipite de marginea de sus, pe un singur rând fiecare. */ .inco-pdp__main .inco-pdp-specs { flex: 0 0 auto; flex-wrap: nowrap; align-self: flex-start; justify-content: flex-start; } .inco-pdp__main .inco-pdp-spec { white-space: nowrap; } /* Cele două butoane — nod Figma 18094:7219. Măsurat: 255×46 fiecare, gap 16, padding 9/16, text 16/500, iconiță 24. */ .inco-pdp__main .inco-pdp-summary__actions { display: flex; gap: 16px; align-items: stretch; } .inco-pdp__main .inco-pdp-summary__actions > * { flex: 1 0 0; min-inline-size: 0; } .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide, .inco-pdp__main .inco-pdp-summary__whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 0; padding: 9px 16px; margin: 0; border: 1px solid var(--pdp-border); border-radius: 8px; background: var(--pure-white, #fff); color: var(--pdp-ink); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; cursor: pointer; } .inco-pdp__main .inco-pdp-summary__actions svg, .inco-pdp__main .inco-pdp-summary__whatsapp svg { inline-size: 24px; block-size: 24px; } /* ============================================ „Discută cu noi pe WhatsApp" === Cerut de Seba, 14 august: bandă lată, pe toată lățimea, sub Favorite și Comparare, verde permanent, cu iconița din `whatsapp.svg`. 🔴 **AICI, nu lângă declarația de la §cumpărare — și asta a ieșit dintr-o măsurătoare, nu din citit.** Adăugasem butonul în blocul de sus, cel care ARATĂ ca definiția componentei *(`.inco-pdp-summary__actions .inco-wishlist-button`, la (0,2,0))*. Măsurat pe pagina reală, vecinii lui nu ascultă de acolo: forma adevărată e scrisă aici, în scutul de specificitate de deasupra, la (0,3,0) — rază **8** nu 12, text **16/500** nu 14/600. Butonul meu ar fi stat imediat sub ele, cu altă rază și alt text. → **Un bloc care poartă numele componentei nu e neapărat cel care o desenează. Se măsoară VECINUL, nu se citește regula.** 🔑 De aia intră în ACELAȘI selector, nu într-o copie a lui: mâine, când se schimbă înălțimea sau raza celor două, se schimbă și a lui. ⚠️ Verdele vine DUPĂ, ca să bată `background: var(--pure-white)` de mai sus la specificitate egală. -------------------------------------------------------------------------- */ /* * 🔵 **REPAUS: fundal verde foarte deschis.** Se vede că e un buton de WhatsApp, * fără să fie un bloc de culoare. Ales de Seba din trei variante puse alături. * * Prima variantă era verde plin `#0C7414`. Seba, măsurându-l cu ochiul mai bine * decât o făcusem eu cu regula: *„este prea puternic comparativ cu celelalte * culori, iese mai mult în evidență decât adaugă în coș."* Avea dreptate, și se * poate demonstra: contrastul lui față de pagina albă e **5,98 : 1**, al * butonului „Adaugă în coș" e **4,59 : 1**. **Un buton de suport cântărea mai * mult decât butonul care vinde.** * * 🔑 Iar leacul nu putea fi „alt verde plin": ca să fie mai ușor decât CTA-ul, * fundalul trebuie mai deschis de `L = 0,179`; ca textul alb să rămână lizibil * *(4,5 : 1)*, trebuie mai închis de `L = 0,183`. **Fereastra dintre ele e * practic zero** — deci orice verde plin ori strigă mai tare decât „Adaugă în * coș", ori are textul prea palid. Contur, nu altă nuanță. * * 🔴 Stările sunt scrise TOATE, chiar și cele care nu schimbă nimic: e un ``, * iar ce nu declarăm noi declară `reset.css` din Hello. Măsurat cu un link * martor, nestilat, pus în chiar acest loc: iese **`#CC3366`**. → §4n */ .inco-pdp__main .inco-pdp-summary__whatsapp, .inco-pdp__main .inco-pdp-summary__whatsapp:link, .inco-pdp__main .inco-pdp-summary__whatsapp:visited { background: var(--pdp-whatsapp-fundal); border-color: var(--pdp-whatsapp-chenar); color: var(--pdp-whatsapp-text); text-decoration: none; transition: border-color var(--pdp-tranzitie), color var(--pdp-tranzitie), background-color var(--pdp-tranzitie); } /* * 🔑 **Aprinderea folosește gramatica vecinilor, nu una nouă.** Favorite și * Comparare trec la hover pe `border-color` + `color` = accentul paginii. Ăsta * face exact la fel — doar că accentul lui e verdele WhatsApp, nu albastrul. * Zero reguli inventate: butonul se poartă ca familia din care face parte, dar * spune cine e. * * ⚠️ **`:hover` e închis în `@media (hover: hover)`**, iar starea vizibilă la * tastatură e `:focus-visible`, nu `:focus`. Pe telefon amândouă rămân lipite * după atingere, iar la întoarcerea din WhatsApp butonul ar fi rămas aprins * fără motiv. → §4bf */ @media (hover: hover) { .inco-pdp__main .inco-pdp-summary__whatsapp:hover { background: var(--pdp-whatsapp-aprins); border-color: var(--pdp-whatsapp); color: var(--pdp-whatsapp); text-decoration: none; } } .inco-pdp__main .inco-pdp-summary__whatsapp:focus-visible, .inco-pdp__main .inco-pdp-summary__whatsapp:active { background: var(--pdp-whatsapp-aprins); border-color: var(--pdp-whatsapp); color: var(--pdp-whatsapp); text-decoration: none; } .inco-pdp__main .inco-pdp-summary__whatsapp:focus-visible { outline: 2px solid var(--pdp-whatsapp); outline-offset: 2px; } /* * 🔑 Glifa își declară culoarea, deci NU mai urmează textul aici. * Verdele e tot ce a mai rămas din identitatea de marcă după ce fundalul a * dispărut — și e verde în amândouă stările, deci o singură declarație. * ⚠️ În caseta de suport iconița rămâne pe `currentColor` și ia albastrul de * acolo: aceeași funcție `Icons::get('whatsapp')`, două comportamente, hotărâte * de CSS-ul locului unde ajunge. */ .inco-pdp__main .inco-pdp-summary__whatsapp-icon { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; color: var(--pdp-whatsapp); } .inco-pdp__main .inco-pdp-summary__whatsapp-icon svg { display: block; } /* Dividerul apare DOAR dacă are ce despărți. Blocul de mărimi lipsește pe produsele fără familie, deci prețul devine primul copil al cutiei — și n-are de ce să poarte o linie în stânga. `:not(:first-child)` rezolvă toate combinațiile fără să numărăm nimic: preț singur · mărimi+preț · preț+specificații · toate trei. */ .inco-pdp__main .inco-pdp-picker__price, .inco-pdp__main .inco-pdp-specs { border-inline-start: 0; padding-inline-start: 0; } .inco-pdp__main .inco-pdp-picker__price:not(:first-child), .inco-pdp__main .inco-pdp-specs:not(:first-child) { padding-inline-start: var(--pk-gap); border-inline-start: 1px solid var(--pdp-border); } @media (max-width: 899.98px) { /* Pe mobil specificațiile trec dedesubt: linia devine orizontală, și tot numai dacă au ceva deasupra. */ .inco-pdp__main .inco-pdp-specs:not(:first-child) { padding: 8px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--pdp-border); } } /* ============================================================================= Hover pe butoanele de favorite / comparare — DOAR culoare ----------------------------------------------------------------------------- Cerință Seba, 4 aug: la hover se schimbă exclusiv culoarea conturului și a textului. Nimic altceva. 🔑 De ce se strica: reguli mai vechi aveau `:hover` în aceeași listă cu starea normală și declarau acolo `border-radius` și `font-size`. Orice proprietate scrisă într-un selector cu `:hover` devine o SCHIMBARE la hover, chiar dacă intenția era doar să reziste temei. 👉 Regula: într-un selector cu `:hover` se scriu doar proprietățile care chiar trebuie să se schimbe. Restul stau în starea normală. `transition` e limitat explicit la cele două proprietăți — fără `all`, care ar anima și ce n-am cerut. ========================================================================== */ .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide { transition: border-color var(--pdp-tranzitie), color var(--pdp-tranzitie); } /* * 🔴 Chenarul NU dispare la apăsare. * * Semnalat de Seba pe 14 august: „fix după ce apeși pe buton dispare borderul". * Resetul de stări de mai sus *(`.inco-pdp__main [type="button"]:focus`)* pune * `border-color: transparent` — scris ca să scoată rozul temei, dar el prinde și * butoanele astea, care își desenează chiar ele un chenar. * * 🔑 Pe telefon `:focus` RĂMÂNE după atingere, deci nu e o clipire: butonul stă * fără chenar până atingi altceva. Pe desktop se vedea doar cât ții apăsat, de * aia n-a ieșit până acum. → §4bf, aceeași familie * * `:not(.is-active)` — starea „e în listă" își are propriile culori și n-are * voie să fie readusă la chenarul de repaus. */ .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button:not(.is-active):focus, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide:not(.is-active):focus { border-color: var(--pdp-border); color: var(--pdp-ink); } /* * Iar când E în listă, chenarul rămâne al stării. Favoritele își iau roșul din * `wishlist.css`, care e (0,2,0) și pierdea în fața resetului de `:focus`. */ .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button.is-active:focus { border-color: var(--red, #DB4F4F); color: var(--red, #DB4F4F); } .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button:hover, .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button:focus-visible, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide:hover, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button--wide:focus-visible { border-color: var(--pdp-accent); color: var(--pdp-accent); /* explicit, ca nicio regulă mai veche să nu le mai poată schimba */ border-width: 1px; border-radius: 8px; font-size: 1rem; font-weight: 500; padding: 9px 16px; background: var(--pure-white, #fff); } /* Iconița de favorite trece DUPĂ text, ca la „Compară produs". Markup-ul butonului vine din modulul Wishlist, unde iconița e primul copil — îl refolosim ca atare, deci ordinea se schimbă din CSS, nu din PHP. Altfel ar trebui un al doilea shortcode, cu aceeași funcție, de reparat în două locuri. */ .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button__label { order: 1; } .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button__icon { order: 2; } /* ============================================================================= TELEFON — ordinea secțiunilor și caseta de selecție ----------------------------------------------------------------------------- Măsurat la 394px, pe produs real. Două lucruri erau rupte: 1. ORDINEA. Coloana de media conține galeria ȘI panourile, deci pe mobil ieșea: galerie → descriere → recenzii → titlu/preț/cumpărare. Sumarul ajungea la 1009px de la vârful paginii, adică sub tot. Corecția: coloanele devin `display: contents` la mobil, deci copiii lor urcă la nivelul grilei și pot fi ordonați direct. Fără asta, panourile rămân lipite de galerie oriunde ai muta coloana. 2. `flex-wrap: nowrap`. Regula de wrap pentru mobil era scrisă corect, dar o corectură ulterioară de desktop punea `nowrap` FĂRĂ media query și o anula. Caseta se strângea la 228px și tăia specificațiile. Verificat după: galerie 320 → sumar 628 → panouri 1062. Caseta 347px, încape. Scroll-ul orizontal rămas vine din bara de admin și din carusel (care iese din ecran prin construcție, e scroll-snap) — nu din pagina de produs. ========================================================================== */ @media (max-width: 899.98px) { .inco-pdp__main { display: flex; flex-direction: column; gap: var(--pdp-gap-md); } .inco-pdp__col { display: contents; } .inco-pdp-gallery { order: 1; } .inco-pdp-summary { order: 2; } .inco-pdp-panel { order: 3; } .inco-pdp__main .inco-pdp-picker, .inco-pdp__main .inco-pdp-picker__body { inline-size: 100%; max-inline-size: 100%; } .inco-pdp__main .inco-pdp-picker__body { flex-wrap: wrap; gap: 8px; } .inco-pdp__main .inco-pdp-picker__axes, .inco-pdp__main .inco-pdp-picker__axis { flex: 0 0 auto; inline-size: max-content; max-inline-size: 100%; } .inco-pdp__main .inco-pdp-picker__price { flex: 1 1 auto; min-inline-size: 0; } /* Specificațiile trec dedesubt, cu linie orizontală și cu etichetă. */ .inco-pdp__main .inco-pdp-specs, .inco-pdp__main .inco-pdp-specs:not(:first-child) { flex: 1 0 100%; flex-direction: column; flex-wrap: wrap; padding: 8px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-spec { flex: 0 0 auto; white-space: normal; } .inco-pdp__main .inco-pdp-spec__label { display: inline; font-weight: 400; } /* Favorite și comparare apar în DOUĂ locuri pe mobil: pastilele de peste imagine *(scurtătura, ca pe card)* și butoanele late de sub „Adaugă în coș" *(cu eticheta scrisă)*. Cerut de Seba pe 14 august. */ .inco-pdp__main .inco-product-card__tools { display: flex; } /* * Eticheta lor cât cea de pe „Adaugă în coș" — cerut de Seba. * * 🔑 Nu 14px scris de mână, ci CHIAR tokenul din care iese și cealaltă * (`.inco-add-to-cart` are `font-size: var(--pdp-fs-body)`, iar eticheta lui * îl moștenește). O cifră copiată s-ar fi depărtat de ea la prima ajustare a * scării tipografice, iar cele două butoane stau unul sub altul, deci * diferența s-ar fi văzut imediat. * * Pe desktop rămân 16px, valoarea din nodul Figma. */ .inco-pdp__main .inco-pdp-summary__actions .inco-wishlist-button__label, .inco-pdp__main .inco-pdp-summary__actions .inco-compare-button__text { font-size: var(--pdp-fs-body); } } /* Panourile ocupă toată lățimea, indiferent cum ajung în layout. Măsurat: panoul de taburi ieșea 332px, cel de recenzii 109 — adică exact lățimea textului „Recenzii ⌄". De aici linia lui scurtă. Cauza: coloanele sunt `display: contents`, deci panourile devin copii direcți ai grilei și se dimensionează după conținut, nu după coloană. `inline-size` explicit e imun la felul în care se schimbă părintele — nu depinde nici de `align-items`, nici de numărul de coloane. */ .inco-pdp__main .inco-pdp-panel { inline-size: 100%; min-inline-size: 0; } .inco-pdp__main .inco-pdp-panel__head { inline-size: 100%; } @media (max-width: 899.98px) { .inco-pdp__main .inco-pdp-panel { grid-column: 1 / -1; } } /* ============================================================================= Badge-urile de stare — 1:1 cu nodul Figma 18255:8876 ----------------------------------------------------------------------------- Aveam culori inventate și zero iconițe. Valorile reale: fundal = culoarea textului la 12% opacitate (nu un pastel separat) text = #d73b3b · #883dff · #0b8669 padding 4/10 · gap 6 · radius 999 · font 12/600 · ls 0.48px · lh 1.1 iconiță 13×13, înaintea textului backdrop-filter: blur(8px) — badge-urile stau și peste imagini 🔑 Fundalul din `color-mix` cu `currentColor`: o singură regulă pentru toate trei, iar iconița moștenește culoarea textului. Fallback-urile explicite sunt pentru browserele fără `color-mix`. ========================================================================== */ .inco-pdp__main .inco-pdp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.1; letter-spacing: 0.04em; /* 0.48px la 12px */ text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, currentColor 12%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .inco-pdp__main .inco-pdp-badge__icon { display: inline-flex; inline-size: 13px; block-size: 13px; flex: 0 0 auto; color: inherit; } .inco-pdp__main .inco-pdp-badge__icon svg { inline-size: 13px; block-size: 13px; } .inco-pdp__main .inco-pdp-badge--bestseller { color: #d73b3b; background: rgba( 215, 59, 59, .12 ); } .inco-pdp__main .inco-pdp-badge--favourite { color: #883dff; background: rgba( 136, 61, 255, .12 ); } .inco-pdp__main .inco-pdp-badge--stock { color: #0b8669; background: rgba( 11, 134, 105, .12 ); } .inco-pdp__main .inco-pdp-badge--nostock { color: var(--pdp-muted); background: rgba( 100, 134, 150, .12 ); } @supports (background: color-mix(in srgb, red 12%, transparent)) { .inco-pdp__main .inco-pdp-badge { background: color-mix(in srgb, currentColor 12%, transparent); } } /* ============================================================================= Etichetele de peste imagine — „NOU" și procentul de reducere ----------------------------------------------------------------------------- Nod Figma 18092:6944: fundal plin, padding 2/6, radius 4, font 18/600, uppercase, text #fafcff. Aveam pilulă rotunjită complet și alte dimensiuni. Aceeași formă pentru amândouă, diferă doar culoarea — cerință Seba: NOU → #883dff (blue-fill-primary-default) reducere → #d73b3b (red-label-fill-surface), aceeași cu badge-ul din preț ⚠️ Scoped pe `.inco-pdp__main`. Clasele `.inco-badge*` vin din ProductCard și apar și pe cardurile din carusel — o regulă nescopată le-ar rescrie și acolo. E exact greșeala de dimineață, când reset-ul de butoane a rupt caruselul. Font 16 → 18: nodul e varianta de desktop; pe mobil eticheta trebuie să încapă peste o imagine mult mai îngustă. ========================================================================== */ .inco-pdp__main .inco-pdp-gallery__flags .inco-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 4px; font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */ font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: uppercase; white-space: nowrap; color: var(--white-bg, #fafcff); } .inco-pdp__main .inco-pdp-gallery__flags .inco-badge--new { background: #883dff; } .inco-pdp__main .inco-pdp-gallery__flags .inco-badge--sale { background: #d73b3b; } .inco-pdp__main .inco-pdp-gallery__flags .inco-badge--out-of-stock { background: var(--pdp-muted); } .inco-pdp__main .inco-pdp-gallery__flags .inco-product-badges { display: flex; gap: 6px; align-items: flex-start; } /* Ordinea vizuală, după ce am inversat DOM-ul pentru SEO. În HTML sumarul e primul (ca `

` să vină înaintea `

`-urilor din panouri); pe ecran rămâne galeria în stânga. */ @media (min-width: 900px) { .inco-pdp__main .inco-pdp__col--media { order: 1; } .inco-pdp__main .inco-pdp__col--summary { order: 2; } } /* ============================================================================= Caseta de selecție ocupă toată lățimea secțiunii ----------------------------------------------------------------------------- Cerință Seba. Până acum se strângea pe conținut și rămânea vizibil mai îngustă decât butonul „Adaugă în coș" de sub ea. 🔑 NU folosesc `justify-content: space-between`. Dividerele sunt borduri pe marginea blocurilor, nu elemente separate — cu `space-between` ar rămâne lipite de blocul lor, iar spațiul gol ar apărea ÎNTRE bordură și conținutul de dinainte. Ar arăta ca niște linii rătăcite. În schimb: mărimile și prețul rămân dimensionate de conținut, iar specificațiile iau tot ce rămâne. Așa dividerele stau exact între grupuri, iar cutia atinge marginea. 👉 Dacă apar atribute noi în chip-uri, NU se adaugă coloane: `.inco-pdp-specs` e o coloană unică, iar fiecare chip nou o face mai ÎNALTĂ, nu mai lată. Layout-ul nu se schimbă indiferent câte specificații ai. ========================================================================== */ .inco-pdp__main .inco-pdp-picker, .inco-pdp__main .inco-pdp-picker__body { inline-size: 100%; max-inline-size: 100%; } /* * 🔴 Reparație de la 1024: cele trei coloane se țineau pe un rând ORICÂT de * îngustă era caseta. Coloana de specificații ajungea la 38px, iar textul din * ea are `white-space: nowrap` — deci ieșea din ecran cu 49px, cu tot cu * pagina. Regula de rupere exista, dar doar sub 900px, iar la 1024 sumarul e * deja de 377px, adică mai îngust decât la 900. * 🔑 Wrap la ORICE lățime: se rupe când nu încape, nu când zice un breakpoint. * La 1440 rămâne pe un rând, pentru că acolo încape — verificat. */ .inco-pdp__main .inco-pdp-picker__body { flex-wrap: wrap; } .inco-pdp__main .inco-pdp-picker__axes, .inco-pdp__main .inco-pdp-picker__price { flex: 0 0 auto; } .inco-pdp__main .inco-pdp-specs { flex: 1 1 auto; min-inline-size: 0; } @media (max-width: 899.98px) { /* Pe mobil specificațiile trec dedesubt, deci prețul preia restul rândului. */ .inco-pdp__main .inco-pdp-picker__price { flex: 1 1 auto; min-inline-size: 0; } .inco-pdp__main .inco-pdp-specs { flex: 1 0 100%; } } /* ============================================================================= Două linii rătăcite — scoase ----------------------------------------------------------------------------- 1. Sub „Recenzii". În v1.9.11 pusesem `border-block-end` pe head-ul ambelor panouri, iar în v1.9.12 am scos-o doar de pe taburi. Recenziile au rămas cu ea. În design linia stă DEASUPRA lui „Recenzii" — închide descrierea — nu sub el. 2. Sub titlurile din descriere. Tema pune bordură pe `h2`–`h4` din conținut; înăuntrul textului de produs n-are ce căuta. ⚠️ Dacă linia rămâne, atunci e un `
` scris chiar în descrierea produsului — acolo e conținut, nu stil, și se scoate din editor. ========================================================================== */ .inco-pdp__main .inco-pdp-panel--reviews > .inco-pdp-panel__head { border-block-end: 0; } /* Linia care închide descrierea, deasupra lui „Recenzii". */ .inco-pdp__main .inco-pdp-panel--reviews { border-block-start: 1px solid var(--pdp-border); padding-block-start: var(--pdp-gap-sm); } .inco-pdp__main .inco-pdp-prose h1, .inco-pdp__main .inco-pdp-prose h2, .inco-pdp__main .inco-pdp-prose h3, .inco-pdp__main .inco-pdp-prose h4, .inco-pdp__main .inco-pdp-prose h5, .inco-pdp__main .inco-pdp-prose h6 { border: 0; padding-block-end: 0; } /* Dividerul de sub „Recenzii" rămâne — dar centrat optic. Cerință Seba: spațiul dintre titlu și linie trebuie să fie egal cu cel dintre linie și conținut. Altfel linia pare lipită de titlu și ruptă de restul. O singură variabilă pentru amândouă, ca să nu se poată desincroniza. */ .inco-pdp__main .inco-pdp-panel--reviews { --pdp-rev-gap: var(--pdp-gap-sm); /* 12 → 16px */ border-block-start: 1px solid var(--pdp-border); padding-block-start: var(--pdp-gap-sm); } .inco-pdp__main .inco-pdp-panel--reviews > .inco-pdp-panel__head { padding-block: 0 var(--pdp-rev-gap); border-block-end: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-panel--reviews > .inco-pdp-panel__body { padding-block-start: var(--pdp-rev-gap); } /* Linia de DEASUPRA lui „Recenzii" — scoasă. O adăugasem în v1.9.28 din proprie inițiativă, ca să „închidă" descrierea. Nu se ceruse. Singura linie din panoul de recenzii e cea de SUB header, între titlu și conținut, cu spațiu egal de-o parte și de alta. */ .inco-pdp__main .inco-pdp-panel--reviews { border-block-start: 0; padding-block-start: 0; } /* Tot antetul panoului e clicabil, deci arată clicabil. Taburile își păstrează cursorul lor — ele fac altceva decât comutarea. */ /* ============================================================================= 🔴 Fără JS, panourile trebuie să fie DESCHISE ----------------------------------------------------------------------------- Comentariul din capul lui `single-product.js` promitea deja asta — „panourile sunt deschise" — dar regula n-a fost scrisă niciodată. Consecința, găsită la testul fără JS: panoul de recenzii se randa ÎNCHIS, iar butonul care l-ar fi deschis avea nevoie de exact JS-ul care lipsea. Cele 3000 de recenzii, bara de sortare, paginarea și butonul „Aplică" *(pus special pentru cazul fără JS)* erau toate în pagină și **niciunul nu se putea atinge**. La fel pane-ul „Informații suplimentare", cu tot tabelul de specificații. 🔑 Un conținut ascuns în spatele unei comenzi care nu funcționează e conținut inexistent. Fallback-ul se scrie o dată cu comanda, nu după. ========================================================================== */ .inco-pdp:not(.is-js) .inco-pdp-panel__body, .inco-pdp:not(.is-js) .inco-pdp-panel__pane { display: block; } /* * Comenzile rămase fără efect dispar — regula lui Seba din 31 iulie: ce pare * inert TREBUIE să fie inert, iar ce nu poate face nimic nu stă în pagină. * Taburile se duc odată cu ele: cu ambele pane-uri vizibile n-au ce comuta. */ .inco-pdp:not(.is-js) .inco-pdp-panel__toggle, .inco-pdp:not(.is-js) .inco-pdp-panel__tabs, .inco-pdp:not(.is-js) .inco-rev__add { display: none; } /* * Butonul „Adaugă recenzia ta" a dispărut, deci formularul se arată direct. * * 🔴 `!important` aici nu e o scurtătură: e excepția la propria mea regulă * `.inco-pdp [hidden] { display: none !important }`, pusă pe 5 august după * bug-ul cu popup-ul din Prețuri. Regula aia e corectă — `hidden` trebuie să * bată orice `display` scris de mine — dar exact aici vreau invers, fiindcă * `hidden` e pus pentru JS, iar JS-ul lipsește. Fiind tot `!important` și mai * specifică (0,4,0 față de 0,2,0), câștigă pe specificitate, nu pe ordine. */ .inco-pdp:not(.is-js) .inco-rev__form[hidden] { display: block !important; } .inco-pdp.is-js .inco-pdp__main .inco-pdp-panel__head { cursor: pointer; } .inco-pdp.is-js .inco-pdp__main .inco-pdp-panel__tabs { cursor: auto; } .inco-pdp.is-js .inco-pdp__main .inco-pdp-panel__tab { cursor: pointer; } /* Selecția de text la dublu-clic pe titlu arată ca o greșeală când tot rândul e un comutator. */ .inco-pdp.is-js .inco-pdp__main .inco-pdp-panel__title { user-select: none; } /* ============================================================================= Tabelul de specificații — ramă proprie ----------------------------------------------------------------------------- 🔑 `border-radius` nu funcționează pe un tabel cu `border-collapse: collapse`. Colțurile celulelor rămân drepte și ies peste rază, iar rama pare tăiată. Cu `separate` + `border-spacing: 0` arată identic, dar raza se aplică. `overflow: hidden` taie colțurile primului și ultimului rând. Zebra vine din WooCommerce (`.shop_attributes tr:nth-child(even)`), cu doi selectori — de aceea o regulă de-o clasă n-o oprea. Aici o scoatem cu specificitate suficientă: rândurile alternate se bat cu liniile despărțitoare și fac tabelul să pară mai zgomotos decât e. ========================================================================== */ .inco-pdp__main .inco-pdp-prose table.shop_attributes, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes { border: 1px solid var(--pdp-border); border-radius: var(--pdp-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--pure-white, #fff); } .inco-pdp__main .inco-pdp-prose table.shop_attributes tr, .inco-pdp__main .inco-pdp-prose table.shop_attributes tr:nth-child(even), .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr:nth-child(even) { background: transparent; } .inco-pdp__main .inco-pdp-prose table.shop_attributes th, .inco-pdp__main .inco-pdp-prose table.shop_attributes td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td { padding-block: 8px; padding-inline: var(--pdp-gap-sm); vertical-align: middle; /* * 🔴 Fix la 360px: mărimea era pe `--pdp-fs-small`, care scade la 12px, iar * `th` ajungea la 10 — de la o regulă a temei pe care o moștenea. Sub 12px * nu se mai citește nimic. Aici mărimea nu scalează: 14px peste tot, cât e * și la desktop. */ font-size: 0.875rem; } /* * Zebra din WooCommerce, scoasă și de pe CELULE. * O scosesem doar de pe `tr` — dar `.woocommerce table.shop_attributes * tr:nth-child(even) th` pune fundalul direct pe celulă, deci pe mobil, unde * rândurile devin blocuri, dungile reapăreau. */ .inco-pdp__main .inco-pdp-prose table.shop_attributes tr:nth-child(even) th, .inco-pdp__main .inco-pdp-prose table.shop_attributes tr:nth-child(even) td, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr:nth-child(even) th, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes tr:nth-child(even) td { background: transparent; } /* * 🔑 De aici venea decalajul dintre etichetă și valoare, nu din `vertical-align`. * WooCommerce pune `padding: 8px 0` pe `

`-ul din interiorul valorii * (`table.shop_attributes td p`), deci textul stătea cu 8px mai jos și rândul * ieșea de 41px în loc de 25. Centrarea singură n-ar fi reparat nimic: * cutia era centrată corect, dar textul din ea nu. */ .inco-pdp__main .inco-pdp-prose table.shop_attributes th p, .inco-pdp__main .inco-pdp-prose table.shop_attributes td p, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes th p, .inco-pdp__main .inco-pdp-prose table.woocommerce-product-attributes td p { margin: 0; padding: 0; } /* ============================================================================= Rândul de dovadă socială — nod Figma 18255:8984 ----------------------------------------------------------------------------- Aveam altceva aproape peste tot. Valorile reale: stele 16px, gap 4 · nota 14px BOLD #0a435c · gap 6 în grup eticheta cu numărul: fundal #d5f2ff, text #056e9b 12px, radius 99, padding 4px 6px 3px (da, asimetric — așa e în nod) linie verticală 1px #c4d2d7 între grupuri „20+" bold #0a435c + restul Medium #53798a, iconiță foc 16px ========================================================================== */ .inco-pdp__main .inco-pdp-summary__proof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .inco-pdp__main .inco-pdp-rating { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } /* * ⚠️ Cele trei mărimi de mai jos sunt cu 2px peste machetă — cerut de Seba pe * 12 august, uitându-se la pagina construită: 16/14/12 → **18/16/14**. * Nu e o abatere scăpată din vedere, e o corectură pe ecran. * * 🔑 Aici NU scalează nimic cu lățimea: blocul `.inco-pdp__main` scrie cifre * fixe și bate tokenii `--pdp-fs-*` de mai sus, care ar fi scăzut pe telefon. * Măsurat la 360 și la 1440 înainte de schimbare: **exact aceleași valori**. * Deci „+2px" înseamnă același lucru pe amândouă, dintr-o singură atingere. */ .inco-pdp__main .inco-pdp-rating__stars { font-size: 18px; letter-spacing: 4px; /* gap 4 între stele, neschimbat: e un gol, nu o mărime */ /* `letter-spacing` pune spațiu ȘI după ultima stea, deci grupul ar ieși cu 4px mai lat decât cele 5×18 + 4×4. Îl scoatem înapoi. */ margin-inline-end: -4px; color: var(--light-gray, #C4D2D7); } .inco-pdp__main .inco-pdp-rating__stars::before { color: #F5A623; } .inco-pdp__main .inco-pdp-rating__value { font-size: 16px; font-weight: 700; line-height: 1; color: var(--darker-cyan, #0A435C); } /* * Eticheta cu numărul de recenzii. * * ⚠️ Regula e împărțită cu cea de lângă titlul „Recenzii" — **tot ce ține de * formă rămâne comun, doar mărimea se desparte.** Seba a cerut mai mare doar * grupul de sus; cea din panou stă lângă un titlu de 24px și n-a cerut-o * nimeni. Dacă se dorește și acolo, se șterge regula de dedesubt. */ .inco-pdp__main .inco-pdp-rating__count, .inco-pdp__main .inco-pdp-panel__count { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px 3px; border-radius: 99px; background: #d5f2ff; color: var(--cyan, #056E9B); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; /* 0.24px la 12px */ } .inco-pdp__main .inco-pdp-rating__count { font-size: 14px; } /* * Linia verticală e acum un element propriu (`__proof-sep`), pus din PHP doar * când are ce despărți — vezi mai jos. Ca bordură pe „vândute", apărea și când * produsul n-avea recenzii, adică o linie care despărțea de nimic. * 🔴 Iar iconița de foc era emoji în `::before`: cu SVG-ul din nod adăugat, * se desenau DOUĂ flăcări. Emoji-ul iese. */ .inco-pdp__main .inco-pdp-sold { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 1; color: #53798a; } /* Numărul din față e bold și în culoarea textului principal. */ .inco-pdp__main .inco-pdp-sold b, .inco-pdp__main .inco-pdp-sold strong { font-weight: 700; color: var(--darker-cyan, #0A435C); } /* ============================================================================= Antetul panourilor — nod Figma 18257:10770 ----------------------------------------------------------------------------- Taburile sunt de 24px, nu 16. Activul e semibold și închis la culoare; inactivul e Medium și stins (#53798a). În design NU are subliniere — o scot, pentru că textul mai gros și mai închis face deja diferența, iar sublinierea pe un titlu de 24px arată ca un link. Gap între taburi: 24px. Titlul „Recenzii" tot 24px, cu grupul de notă la 16. ========================================================================== */ .inco-pdp__main .inco-pdp-panel__tabs { gap: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem); } .inco-pdp__main .inco-pdp-panel__tab, .inco-pdp__main .inco-pdp-panel__tab:hover, .inco-pdp__main .inco-pdp-panel__tab:focus { padding: 0; border: 0; font-size: clamp(1.125rem, 1rem + 0.5556vw, 1.5rem); /* 18 → 24 */ font-weight: 500; line-height: 1.1; color: #53798a; } .inco-pdp__main .inco-pdp-panel__tab.is-active { font-weight: 600; letter-spacing: -0.02em; color: var(--darker-cyan, #0A435C); } .inco-pdp__main .inco-pdp-panel__title { gap: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem); font-size: clamp(1.125rem, 1rem + 0.5556vw, 1.5rem); /* 18 → 24 */ font-weight: 600; line-height: 1.1; color: var(--darker-cyan, #0A435C); } .inco-pdp__main .inco-pdp-panel__score { display: inline-flex; align-items: center; gap: clamp(0.25rem, 0.2083rem + 0.1852vw, 0.375rem); /* 4 → 6 */ font-size: 16px; font-weight: 700; color: var(--darker-cyan, #0A435C); } .inco-pdp__main .inco-pdp-panel__star { color: #F5A623; } .inco-pdp__main .inco-pdp-panel__star svg { inline-size: 14px; block-size: 14px; } .inco-pdp__main .inco-pdp-panel__toggle svg { inline-size: 24px; block-size: 24px; } /* „Citește mai mult" — 14px Medium, iconiță 16, peste o estompare de 137px. */ .inco-pdp.is-js .inco-pdp__main .inco-pdp-more { gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--darker-cyan, #0A435C); } .inco-pdp__main .inco-pdp-more svg { inline-size: 16px; block-size: 16px; } /* ============================================================================= Flicker la schimbarea tabului — rezolvat prin rezervarea lățimii ----------------------------------------------------------------------------- Tabul activ e 600, cel inactiv 500. La comutare, textul își schimbă grosimea, deci și LĂȚIMEA — iar cele două taburi se împing reciproc. Nu e o animație ratată, e o resetare de layout; de aceea nu se rezolvă cu `transition`. Soluția: fiecare tab rezervă din start lățimea variantei îngroșate. Un `::after` invizibil conține același text, la 600, dar cu înălțime 0 — deci lățimea butonului e mereu cea maximă, indiferent de stare. `data-eticheta` vine din PHP: `content: attr()` nu poate citi textul propriu-zis al elementului. ========================================================================== */ .inco-pdp__main .inco-pdp-panel__tab { display: inline-flex; flex-direction: column; align-items: center; transition: color .2s ease; } .inco-pdp__main .inco-pdp-panel__tab::after { content: attr(data-eticheta); display: block; block-size: 0; overflow: hidden; visibility: hidden; pointer-events: none; font-weight: 600; letter-spacing: -0.02em; } /* Linia de sub „Descriere / Informații suplimentare" — ca la „Recenzii". O scosesem în v1.9.12; e în design (nod 18257:10770), sub antetul de taburi. Aceeași variabilă de spațiu ca la recenzii, ca linia să pară centrată între titlu și conținut în ambele panouri — și ca o schimbare de ritm să le miște pe amândouă deodată. */ .inco-pdp__main .inco-pdp-panel--tabs { --pdp-rev-gap: var(--pdp-gap-sm); /* 12 → 16px */ } .inco-pdp__main .inco-pdp-panel--tabs > .inco-pdp-panel__head { padding-block: 0 var(--pdp-rev-gap); border-block-end: 1px solid var(--pdp-border); } .inco-pdp__main .inco-pdp-panel--tabs > .inco-pdp-panel__body { padding-block-start: var(--pdp-rev-gap); } /* Fără tranziție pe taburi. Adăugasem `transition: color .2s` în v1.11.3. Dar `font-weight` nu se poate anima la un font non-variabil: sare instantaneu. Rezultatul erau două schimbări desincronizate pe același element — grosimea imediat, culoarea pe parcurs. Asta se citește ca pâlpâire, nu ca animație. Regula: ori animi toate proprietățile care se schimbă, ori niciuna. Aici „niciuna" e și mai corect — comutarea unui tab trebuie să fie imediată, ca să nu pară că pagina se încarcă. */ .inco-pdp__main .inco-pdp-panel__tab, .inco-pdp__main .inco-pdp-panel__tab:hover, .inco-pdp__main .inco-pdp-panel__tab:focus, .inco-pdp__main .inco-pdp-panel__tab.is-active { transition: none; } /* -------------------------------------------- dovada socială: grupul „vândute" */ /* Linia verticală dintre grupuri: 1px, întinsă pe înălțimea rândului. */ .inco-pdp__main .inco-pdp-summary__proof-sep { align-self: stretch; inline-size: 1px; border-radius: 99px; background: var(--pdp-border, #C4D2D7); } .inco-pdp__main .inco-pdp-sold { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.14px; color: #53798A; } /* * Sub 768px cele două grupuri ajung pe rânduri diferite, iar linia verticală ar * rămâne agățată la capătul primului — aceeași linie orfană ca la panouri. * Ce desparte pe orizontală n-are ce despărți pe verticală. */ @media (max-width: 767.98px) { .inco-pdp__main .inco-pdp-summary__proof-sep { display: none; } } .inco-pdp__main .inco-pdp-sold__icon { display: inline-flex; } .inco-pdp__main .inco-pdp-sold__icon svg { display: block; } .inco-pdp__main .inco-pdp-sold strong { font-weight: 700; color: var(--darker-cyan, #0A435C); } /* ---------------------------------------------------- rândul de cumpărare, fără stoc */ /* * Ce nu se poate apăsa trebuie să și arate așa — și chiar să nu se apese. * Butonul e `disabled`, nu doar palid; stepper-ul primește `pointer-events: none` * ca să nu se poată alege o cantitate care oricum n-ar avea unde să ajungă. */ .inco-pdp__main .inco-pdp-summary__buy.is-unavailable .inco-product-quantity { opacity: .5; pointer-events: none; } .inco-pdp__main .inco-pdp-summary__buy .inco-add-to-cart--out, .inco-pdp__main .inco-pdp-summary__buy .inco-add-to-cart--out:hover, .inco-pdp__main .inco-pdp-summary__buy .inco-add-to-cart--out:focus { background-color: var(--light-gray, #C4D2D7); background-image: none; color: var(--pdp-muted, #648696); cursor: not-allowed; } /* ============================================================================= TIPOGRAFIA — greutăți, interlinie și spațiere din machetă ----------------------------------------------------------------------------- 🔴 Adăugat pe 8 august 2026, după ce Seba a întrebat de fonturi. Măsurat atunci: **766 din 766 de elemente** ale paginii rulau pe `-apple-system`, fiindcă în tot pluginul nu exista NICIO declarație de font. Fontul de bază *(Inter)* vine acum din `assets/css/typography.css`, deci aici NU se mai repetă `font-family` — se scrie doar unde macheta cere altceva. Există un singur asemenea loc în tot designul: numărul de recenzii. ⚠️ `font-size` NU se atinge nicăieri mai jos. Valorile din Figma sunt cele de desktop, iar mărimile noastre sunt deja scalate cu `clamp()`, verificate la 360 și 1440. Cerut explicit de Seba. ============================================================================= */ /* Firimituri — Medium, interlinie 1. */ body.single-product .inco-pdp-crumbs { font-weight: 500; line-height: 1; letter-spacing: 0; } /* Eticheta de stare — Semi Bold, majuscule, spațiere 4%. */ .inco-pdp-badge__text { font-weight: 600; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; } /* Titlul produsului — Semi Bold, spațiere negativă: la 40px, literele se apropie ca să nu pară rărite. */ .inco-pdp-summary__title { font-weight: 600; line-height: 1; letter-spacing: -.02em; } /* Nota — Bold. */ .inco-pdp-rating__value { font-weight: 700; line-height: 1; letter-spacing: 0; } /* * 🔑 SINGURUL loc din tot designul care nu e Inter: numărul de recenzii e * Roboto Semi Bold. Fontul se încarcă din `src/Typography.php`, cu o singură * greutate — pentru un număr de 12px n-are rost mai mult. */ .inco-pdp-rating__count { font-family: Roboto, Inter, -apple-system, sans-serif; font-weight: 600; line-height: 1; letter-spacing: .02em; } /* Rezumatul — Medium, interlinie 1.3: e singurul text de aici care curge pe mai multe rânduri, deci are nevoie de aer între ele. */ .inco-pdp-summary__excerpt { font-weight: 500; line-height: 1.3; letter-spacing: 0; } /* Eticheta selectorului — Regular. */ .inco-pdp-picker__label { font-weight: 400; line-height: 1; letter-spacing: 0; } /* Opțiunile de mărime — Bold, majuscule, foarte strânse. */ .inco-pdp-option { font-weight: 700; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; text-align: center; } /* Prețul — Semi Bold. `.inco-pdp__main` în față, fiindcă marcajul de preț e al WooCommerce și e stilizat și de el. */ .inco-pdp__main .woocommerce-Price-amount { font-weight: 600; line-height: 1; letter-spacing: 0; } /* Valorile din specificații — Semi Bold. */ .inco-pdp-spec__value { font-weight: 600; line-height: 1; letter-spacing: 0; } /* Eticheta butonului de adăugare — Medium. */ .inco-add-to-cart__label { font-weight: 500; line-height: 1; letter-spacing: -.01em; text-align: center; }