/* ############################################################ CUPRINS CSS 01. Design tokens (copiate din app.css live — light + dark) 02. Bază & utilitare 03. Topbar + subnav sticky 04. Breadcrumb 05. Schelet secțiuni + titluri 06. Butoane & badge-uri comune 07. Hero: galerie 08. Hero: buy box + configurator variante 10. Highlights 12. Specificații (carduri + căutare) 13. Comparație variante 16. Pachet (cutie) 18. Carusele (accesorii / similare / recente) 19. Servicii 20. FAQ 21. Review-uri 22. Întrebări & răspunsuri (Q&A) 24. Disponibilitate 25. Footer 26. Sticky buy bar 27. Lightbox galerie fullscreen 28. Animații reveal + reduced motion 29. Responsive ############################################################ */ /* ==================== 01. DESIGN TOKENS (PDP-only) ==================== Every --si-* token (light + dark) already lives in app.css, which is a superset — so we do NOT redefine them here. Redefining them from a page-scoped stylesheet that loads after app.css would override the whole site. Only the PDP-specific --pd-* tokens are declared; theme selectors match the site ([data-bs-theme]). */ :root { --pd-maxw: 1720px; --pd-gutter: clamp(1rem, 3vw, 2.5rem); --pd-section-gap: clamp(3rem, 6vw, 5.5rem); } [data-bs-theme="light"] { --pd-photo-bg: #ffffff; --pd-photo-border: #e9ebf1; --pd-hero-glow: radial-gradient(60% 55% at 50% 40%, rgba(140,25,19,.045), transparent 70%); } [data-bs-theme="dark"] { /* Official photos keep a white tile intentionally, with a subtle border so it reads as deliberate, not accidental. */ --pd-photo-bg: #ffffff; --pd-photo-border: rgba(255,255,255,.09); --pd-hero-glow: radial-gradient(60% 55% at 50% 40%, rgba(224,119,112,.05), transparent 70%); } /* ==================== 02. BAZĂ & UTILITARE ==================== The standalone mockup's global element resets are scoped to .pd-page so they can't leak onto the rest of the site (catalog, admin). box-sizing + reduced-motion stay global (harmless, match Bootstrap). The rule is dropped — app.css already sets the same font/bg/color/line-height. No global scroll-behavior:smooth (Chrome would animate the initial #fragment jump); smooth scroll is done in JS, honoring prefers-reduced-motion. */ *, *::before, *::after { box-sizing: border-box; } .pd-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--si-accent-text); outline-offset: 2px; border-radius: var(--si-radius-xs); } .pd-page ::selection { background: var(--si-accent-soft-hover); } .pd-page img { max-width: 100%; height: auto; } /* Premium fade-in on the incoming product when swapped in via SPA (added by swapTo, never on SSR/first load). Opacity only. */ @media (prefers-reduced-motion: no-preference) { .pd-enter { animation: pdEnter .22s ease-out; } @keyframes pdEnter { from { opacity: 0; } to { opacity: 1; } } } .pd-container { width: 100%; max-width: var(--pd-maxw); margin-inline: auto; padding-inline: var(--pd-gutter); } .pd-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Link "sari la conținut" pentru screen readers / tastatură. */ .pd-skip-link { position: fixed; top: -100px; left: 1rem; z-index: 2000; background: var(--si-surface); color: var(--si-text); padding: .6rem 1rem; border-radius: var(--si-radius); box-shadow: var(--si-shadow-lg); font-weight: 600; font-size: .85rem; text-decoration: none; transition: top var(--si-transition); } .pd-skip-link:focus-visible { top: 1rem; } /* ==================== 03. TOPBAR + SUBNAV ==================== */ .pd-topbar { background: var(--si-topbar-bg); border-bottom: 1px solid var(--si-topbar-border); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); position: sticky; top: 0; z-index: 1040; } .pd-topbar-row { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); padding-block: .6rem; } .pd-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .pd-logo img { height: 34px; width: auto; display: block; } /* Logo-ul live e gândit pentru fundal deschis — pe dark îl așezăm pe o pastilă discretă ca să rămână lizibil. */ [data-bs-theme="dark"] .pd-logo img { background: #f0f1f5; border-radius: var(--si-radius); padding: .2rem .45rem; } /* Căutare — pastilă statică, doar vizuală (mockup). */ .pd-search { flex: 1 1 auto; max-width: 560px; display: flex; align-items: center; gap: .6rem; background: var(--si-bg); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-pill); padding: .5rem 1rem; color: var(--si-text-muted); font-size: .875rem; cursor: text; transition: border-color var(--si-transition), box-shadow var(--si-transition); } .pd-search:hover { border-color: var(--si-border); } .pd-search:focus-within { border-color: var(--si-accent-rail); box-shadow: 0 0 0 4px var(--si-accent-soft); } .pd-search input { flex: 1; border: 0; background: transparent; color: var(--si-text); font-size: .875rem; outline: none; } .pd-search input::placeholder { color: var(--si-text-muted); } .pd-search kbd { font-size: .68rem; color: var(--si-text-muted); background: var(--si-badge-bg); border: 1px solid var(--si-border-subtle); border-radius: .3rem; padding: .1rem .4rem; } .pd-topbar-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; } .pd-topbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 40px; min-width: 40px; padding-inline: .6rem; border: 0; background: transparent; border-radius: var(--si-radius); color: var(--si-text-secondary); font-size: 1.05rem; position: relative; cursor: pointer; transition: background var(--si-transition), color var(--si-transition); text-decoration: none; } .pd-topbar-btn:hover { background: var(--si-accent-soft); color: var(--si-accent-text); } .pd-topbar-btn .pd-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: var(--si-radius-pill); background: var(--si-accent); color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; padding-inline: 3px; } [data-bs-theme="dark"] .pd-topbar-btn .pd-count { background: #c2554d; } /* Toggle temă — pastilă cu două segmente, ca pe site-ul live. */ .pd-theme-toggle { display: inline-flex; align-items: center; background: var(--si-bg); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-pill); padding: 3px; gap: 2px; } .pd-theme-toggle button { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: var(--si-text-muted); font-size: .78rem; font-weight: 600; padding: .32rem .7rem; border-radius: var(--si-radius-pill); cursor: pointer; transition: background var(--si-transition), color var(--si-transition), box-shadow var(--si-transition); } .pd-theme-toggle button.is-active { background: var(--si-surface); color: var(--si-text); box-shadow: var(--si-shadow-sm); } .pd-theme-toggle i { font-size: .85rem; } /* Notice B2B — linie discretă sub topbar, ca pe live. */ .pd-b2b-notice { text-align: center; font-size: .74rem; letter-spacing: .02em; color: var(--si-text-muted); padding: .3rem var(--pd-gutter); border-bottom: 1px solid var(--si-border-subtle); background: var(--si-surface); } .pd-b2b-notice i { color: var(--si-accent-text); margin-right: .35rem; } /* Subnav — ancore către secțiunile paginii. Fixată sub topbar, dar ascunsă la începutul paginii: JS-ul (scrollspy) îi dă .is-shown exact când activul trece de pe Prezentare pe Specificații. */ .pd-subnav { position: fixed; /* Flush under the shared site header. Its sticky topbar is 62px tall (the B2B notice scrolls away, so it doesn't count). */ top: 62px; left: 0; right: 0; z-index: 1030; background: var(--si-topbar-bg); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--si-topbar-border); opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none; transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), visibility 0s .25s; } .pd-subnav.is-shown { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1); } .pd-subnav-track { display: flex; align-items: center; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-block: .45rem; } .pd-subnav-track::-webkit-scrollbar { display: none; } .pd-subnav a { flex-shrink: 0; font-size: .82rem; font-weight: 600; color: var(--si-text-secondary); text-decoration: none; padding: .38rem .85rem; border-radius: var(--si-radius-pill); transition: background var(--si-transition), color var(--si-transition); } .pd-subnav a:hover { background: var(--si-accent-soft); color: var(--si-accent-text); } .pd-subnav a.is-active { background: var(--si-accent); color: #fff; } [data-bs-theme="dark"] .pd-subnav a.is-active { background: #a1352e; } /* ==================== 04. BREADCRUMB ==================== */ .pd-breadcrumb { padding-block: 1rem .25rem; font-size: .82rem; } .pd-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; } .pd-breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; color: var(--si-breadcrumb-color); } .pd-breadcrumb li + li::before { content: "\f285"; /* bi-chevron-right */ font-family: "bootstrap-icons"; font-size: .6rem; color: var(--si-breadcrumb-color); opacity: .7; } .pd-breadcrumb a { color: var(--si-breadcrumb-color); text-decoration: none; transition: color var(--si-transition); } .pd-breadcrumb a:hover { color: var(--si-accent-text); } .pd-breadcrumb [aria-current="page"] { color: var(--si-text-secondary); font-weight: 500; max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ==================== 05. SCHELET SECȚIUNI ==================== */ .pd-main { display: block; } .pd-section { margin-block: var(--pd-section-gap); } .pd-section-head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .pd-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--si-accent-text); margin-bottom: .55rem; } .pd-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--si-accent-rail); } .pd-section-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; } .pd-section-head p { color: var(--si-text-secondary); font-size: .95rem; margin: 0; } /* ==================== 06. BUTOANE & BADGE-URI ==================== */ .pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: inherit; font-size: .92rem; font-weight: 700; border-radius: var(--si-radius-lg); border: 1px solid transparent; padding: .78rem 1.5rem; cursor: pointer; text-decoration: none; transition: background var(--si-transition), border-color var(--si-transition), color var(--si-transition), box-shadow var(--si-transition), transform var(--si-transition); } .pd-btn:active { transform: scale(.985); } .pd-btn-primary { background: var(--si-accent); color: #fff; } .pd-btn-primary:hover { background: var(--si-accent-hover); box-shadow: 0 8px 20px rgba(140,25,19,.28); color: #fff; } [data-bs-theme="dark"] .pd-btn-primary:hover { box-shadow: 0 8px 20px rgba(224,119,112,.25); } .pd-btn-outline { background: var(--si-surface); border-color: var(--si-border); color: var(--si-text); } .pd-btn-outline:hover { border-color: var(--si-accent-rail); background: var(--si-accent-soft); color: var(--si-accent-text); } .pd-btn-ghost { background: transparent; color: var(--si-text-secondary); } .pd-btn-ghost:hover { background: var(--si-accent-soft); color: var(--si-accent-text); } .pd-btn-icon { width: 46px; height: 46px; padding: 0; flex-shrink: 0; font-size: 1.1rem; border-radius: var(--si-radius-lg); background: var(--si-surface); border: 1px solid var(--si-border); color: var(--si-text-secondary); } .pd-btn-icon:hover { border-color: var(--si-accent-rail); color: var(--si-accent-text); background: var(--si-accent-soft); } .pd-btn-icon.is-active { color: var(--si-accent-text); border-color: var(--si-accent-rail); background: var(--si-accent-soft); } .pd-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; border-radius: var(--si-radius); padding: .28rem .6rem; line-height: 1; } .pd-badge-discount { background: var(--si-accent); color: #fff; } [data-bs-theme="dark"] .pd-badge-discount { background: #c2554d; } .pd-badge-soft { background: var(--si-badge-bg); color: var(--si-text-secondary); } .pd-badge-success { background: var(--si-success-soft); color: var(--si-success); } .pd-badge-warning { background: var(--si-warning-soft); color: var(--si-warning); } /* ==================== 07. HERO: GALERIE ==================== */ /* Zona de cumpărare: conținutul (hero, puncte forte, specificații) pe coloana stângă + cardul de cumpărare sticky pe dreapta, pe toată zona. */ .pd-shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); column-gap: clamp(1.25rem, 2.2vw, 2.5rem); row-gap: var(--pd-section-gap); align-items: start; margin-top: 2rem; } /* Secțiunile din zonă stau pe coloana 1; distanța dintre ele o dă row-gap (marginile proprii ar dubla spațiile — în grid nu colapsează). */ .pd-shop-layout > .pd-section { grid-column: 1; margin-block: 0; } /* Hero pe 2 coloane: galerie compactă | informații */ .pd-hero { display: grid; grid-template-columns: minmax(320px, 540px) minmax(0, 1fr); gap: clamp(1.25rem, 2.2vw, 2.5rem); align-items: start; } /* La lățimea plină (container 1720px, viewport >= 1800px) imaginea principală crește ca baza ei să se alinieze cu baza cardului de preț: stage pătrat 538px + rail thumbs 62px + gap 12px = 612px. Coloana din mijloc absoarbe diferența (avea spațiu liber). */ @media (min-width: 1800px) { .pd-hero { grid-template-columns: minmax(320px, 612px) minmax(0, 1fr); } } /* Galeria rămâne lipită la scroll cât timp buy box-ul e mai lung. */ .pd-gallery { position: sticky; top: 150px; /* sub topbar + subnav */ display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .75rem; } .pd-stage { position: relative; aspect-ratio: 1 / 1; background: var(--pd-photo-bg); border: 1px solid var(--pd-photo-border); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-sm); overflow: hidden; cursor: zoom-in; } .pd-stage::before { content: ""; position: absolute; inset: 0; background: var(--pd-hero-glow); pointer-events: none; } .pd-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: clamp(1rem, 3vw, 2.25rem); transition: transform .35s cubic-bezier(.2,.6,.2,1), opacity .18s ease; will-change: transform; } /* Zoom la hover — imaginea se scalează urmărind cursorul (JS setează transform-origin). Dezactivat pe touch. */ @media (hover: hover) and (pointer: fine) { .pd-stage.is-zooming .pd-stage-img { transform: scale(1.9); } } /* Clona pentru crossfade-ul dintre imagini (hover/click pe thumbs): vechea imagine rămâne deasupra și se estompează peste cea nouă. */ .pd-stage-img-ghost { z-index: 2; pointer-events: none; transition: opacity .32s ease; } .pd-stage-badges { position: absolute; top: .9rem; left: .9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; z-index: 3; } .pd-stage-tools { position: absolute; top: .75rem; right: .75rem; display: flex; flex-direction: column; gap: .45rem; z-index: 3; } .pd-stage-tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-lg); background: color-mix(in srgb, var(--si-surface) 88%, transparent); backdrop-filter: blur(8px); color: var(--si-text-secondary); font-size: 1rem; cursor: pointer; transition: color var(--si-transition), border-color var(--si-transition), background var(--si-transition); } .pd-stage-tool:hover { color: var(--si-accent-text); border-color: var(--si-accent-rail); } .pd-stage-counter { position: absolute; bottom: .8rem; right: .8rem; z-index: 3; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--si-text-secondary); background: color-mix(in srgb, var(--si-surface) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-pill); padding: .3rem .7rem; font-variant-numeric: tabular-nums; } /* Hint zoom — apare discret jos-centru la hover. */ .pd-stage-hint { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%) translateY(4px); z-index: 3; font-size: .72rem; font-weight: 600; color: var(--si-text-muted); background: color-mix(in srgb, var(--si-surface) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-pill); padding: .3rem .75rem; opacity: 0; pointer-events: none; transition: opacity var(--si-transition), transform var(--si-transition); } @media (hover: hover) { .pd-stage:hover .pd-stage-hint { opacity: 1; transform: translateX(-50%) translateY(0); } .pd-stage.is-zooming .pd-stage-hint { opacity: 0; } } .pd-thumbs { position: relative; display: flex; flex-direction: column; gap: .55rem; /* Rail-ul de thumbs se limitează la înălțimea imaginii principale (height:0 + min-height:100% în grid) și derulează intern. */ height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: none; padding: 2px; } .pd-thumbs::-webkit-scrollbar { display: none; } .pd-thumb { position: relative; width: 56px; height: 56px; flex-shrink: 0; border: 1px solid var(--pd-photo-border); border-radius: var(--si-radius-lg); background: var(--pd-photo-bg); padding: 5px; cursor: pointer; transition: border-color var(--si-transition), box-shadow var(--si-transition), transform var(--si-transition); } .pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .pd-thumb:hover { border-color: var(--si-accent-rail); transform: translateY(-1px); } .pd-thumb.is-active { border-color: var(--si-accent-text); box-shadow: 0 0 0 3px var(--si-accent-soft-hover); } /* ============ 08. HERO: BUY BOX + CONFIGURATOR ============ */ .pd-buybox { min-width: 0; } .pd-brand-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; } .pd-brand-mark { font-size: .95rem; font-weight: 900; letter-spacing: .16em; color: var(--si-text); } .pd-sku-chip { font-size: .72rem; font-weight: 600; color: var(--si-text-muted); background: var(--si-badge-bg); border-radius: var(--si-radius); padding: .3rem .6rem; white-space: nowrap; } /* Titlul H1 — pe toată lățimea, sub breadcrumb, deasupra coloanelor. */ .pd-title { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.018em; line-height: 1.3; /* .25rem padding-bottom pe breadcrumb + 1.75rem aici = 2rem, identic cu spațiul dintre h1 și coloane (margin-top pe hero). */ margin: 1.75rem 0 0; /* NU `balance`: pe titluri de 2 rânduri egalizează rândurile la ~jumătate din lățime; `pretty` umple lățimea și evită orfanul. */ text-wrap: pretty; } .pd-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; font-size: .84rem; color: var(--si-text-secondary); margin-bottom: 1.1rem; } .pd-stars { display: inline-flex; align-items: center; gap: .14rem; color: #e8a33d; font-size: .88rem; } .pd-meta-row a { color: var(--si-text-secondary); text-decoration: none; border-bottom: 1px dashed var(--si-border); transition: color var(--si-transition), border-color var(--si-transition); } .pd-meta-row a:hover { color: var(--si-accent-text); border-color: var(--si-accent-rail); } .pd-meta-dot { color: var(--si-text-muted); opacity: .6; } .pd-avail-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.15rem; font-size: .84rem; color: var(--si-text-secondary); } .pd-avail-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--si-success); background: var(--si-success-soft); border-radius: var(--si-radius-pill); padding: .38rem .85rem; } .pd-avail-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .pd-avail-badge.is-low { color: var(--si-warning); background: var(--si-warning-soft); } .pd-avail-badge.is-out { color: var(--si-text-muted); background: var(--si-badge-bg); } /* Panou preț */ /* Panoul de preț trăiește acum în cardul de cumpărare — fără chrome propriu (card în card ar fi greoi), doar separator spre cantitate. */ .pd-price-panel { padding-bottom: .95rem; border-bottom: 1px dashed var(--si-border-subtle); } .pd-price-old-row { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--si-text-muted); margin-bottom: .15rem; } .pd-price-old { text-decoration: line-through; font-variant-numeric: tabular-nums; } .pd-price-current { display: flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; } .pd-price-value { font-size: clamp(1.85rem, 3vw, 2.3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; color: var(--si-text); } .pd-price-currency { font-size: 1rem; font-weight: 700; color: var(--si-text-secondary); } /* Prețul fără TVA — evidențiat, esențial pentru clienții B2B. */ .pd-price-vat { display: inline-flex; align-items: baseline; gap: .45rem; margin-top: .55rem; padding: .4rem .8rem; background: var(--si-accent-soft); border-radius: var(--si-radius); font-size: .82rem; font-weight: 600; color: var(--si-text-secondary); } .pd-price-vat strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--si-accent-text); font-variant-numeric: tabular-nums; } /* Linia de economie — mereu pe rând propriu, sub chip-ul „Fără TVA”. */ .pd-price-save { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--si-success); margin-top: .55rem; } /* Configurator variante — grupuri de opțiuni vizuale, fără dropdown-uri. */ .pd-config-group { margin-bottom: 1.15rem; } .pd-config-label { display: flex; align-items: baseline; gap: .5rem; font-size: .82rem; font-weight: 700; margin-bottom: .55rem; } .pd-config-label .pd-config-value { font-weight: 600; color: var(--si-text-secondary); } /* "Alege:" prefix — muted so the facet name keeps the visual weight. */ .pd-config-label .pd-config-prefix { font-weight: 600; color: var(--si-text-secondary); } .pd-opts { display: flex; flex-wrap: wrap; gap: .55rem; } .pd-opt { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; border: 1px solid var(--si-border); border-radius: var(--si-radius-lg); background: var(--si-surface); color: var(--si-text); font-family: inherit; font-size: .84rem; font-weight: 600; padding: .55rem .9rem; cursor: pointer; transition: border-color var(--si-transition), background var(--si-transition), box-shadow var(--si-transition), color var(--si-transition); } .pd-opt:hover:not(:disabled) { border-color: var(--si-accent-rail); background: var(--si-accent-soft); } .pd-opt.is-selected { border-color: var(--si-accent-text); box-shadow: 0 0 0 3px var(--si-accent-soft-hover); background: var(--si-accent-soft); } .pd-opt.is-selected::after { content: "\f26a"; /* bi-check-circle-fill */ font-family: "bootstrap-icons"; position: absolute; top: -7px; right: -7px; font-size: .95rem; color: var(--si-accent-text); background: var(--si-surface); border-radius: 50%; line-height: 1; } .pd-opt:disabled { cursor: not-allowed; border-style: dashed; color: var(--si-text-muted); background: transparent; opacity: .62; } .pd-opt-note { font-size: .7rem; font-weight: 600; color: var(--si-text-muted); font-variant-numeric: tabular-nums; } .pd-opt.is-selected .pd-opt-note { color: var(--si-accent-text); } /* Varianta cu swatch de culoare */ .pd-opt-color { flex-direction: row; align-items: center; gap: .55rem; padding-left: .7rem; } .pd-opt-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 0 0 2px var(--si-surface); flex-shrink: 0; } /* Culoare cu poza produsului: thumb + numele culorii dedesubt. */ .pd-opt-photo { flex-direction: column; align-items: center; gap: .35rem; padding: .5rem .7rem .45rem; min-width: 84px; text-decoration: none; } .pd-opt-photo img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--si-radius); background: #fff; } .pd-opt-photo .pd-opt-photo-label { font-size: .74rem; font-weight: 600; color: var(--si-text-secondary); text-align: center; white-space: nowrap; } .pd-opt-photo.is-selected .pd-opt-photo-label { color: var(--si-accent-text); } /* Cantitate */ .pd-qty { display: inline-flex; align-items: center; border: 1px solid var(--si-border); border-radius: var(--si-radius-lg); background: var(--si-surface); overflow: hidden; flex-shrink: 0; } .pd-qty button { width: 42px; align-self: stretch; border: 0; background: transparent; color: var(--si-text-secondary); font-size: 1rem; cursor: pointer; transition: background var(--si-transition), color var(--si-transition); } .pd-qty button:hover { background: var(--si-accent-soft); color: var(--si-accent-text); } .pd-qty input { width: 44px; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: .95rem; color: var(--si-text); -moz-appearance: textfield; appearance: textfield; outline: none; } .pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Cardul de cumpărare — coloana dreaptă a zonei, sticky de la hero până la finalul specificațiilor. */ .pd-buycard { grid-column: 2; grid-row: 1 / span 3; /* hero + puncte forte + specificații */ position: sticky; top: 150px; display: flex; flex-direction: column; gap: .85rem; background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: calc(var(--si-radius-xl) + 4px); box-shadow: var(--si-shadow-sm); /* Padding generos — conținutul respiră, cardul pare mai zvelt. */ padding: 1.4rem 1.5rem; } .pd-buycard-qty { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .pd-buycard-label { font-size: .8rem; font-weight: 700; color: var(--si-text-secondary); } .pd-buycard .pd-cta-cart { width: 100%; font-size: .98rem; padding-block: .85rem; } .pd-buycard-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; } .pd-action-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .25rem .55rem; background: var(--si-surface); border: 1px solid var(--si-border); border-radius: var(--si-radius-lg); color: var(--si-text-secondary); font-family: inherit; font-size: .68rem; font-weight: 600; cursor: pointer; transition: color var(--si-transition), border-color var(--si-transition), background var(--si-transition); } .pd-action-tile i { font-size: 1rem; } .pd-action-tile:hover, .pd-action-tile.is-active { color: var(--si-accent-text); border-color: var(--si-accent-rail); background: var(--si-accent-soft); } .pd-buycard-shipping, .pd-buycard-delivery { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .8rem; color: var(--si-text-secondary); line-height: 1.5; } /* Prima linie de logistică poartă separatorul față de butoane. */ .pd-buycard-shipping { padding-top: .85rem; border-top: 1px dashed var(--si-border-subtle); } .pd-buycard-shipping i, .pd-buycard-delivery i { color: var(--si-accent-text); font-size: .95rem; flex-shrink: 0; margin-top: .1rem; } .pd-buycard-shipping strong, .pd-buycard-delivery strong { color: var(--si-text); } /* Buton secundar SICAP — portocaliu plin, identic pe ambele teme (coralul părea „disabled” pe light lângă burgundul CTA-ului). Text: alb pur pe light, negru pur pe dark. */ .pd-buycard-sicap { align-self: center; background: #ea580c; color: #ffffff; font-size: .82rem; padding: .55rem 1.15rem; } .pd-buycard-sicap:hover { background: #c2410c; color: #ffffff; box-shadow: 0 6px 16px rgba(234, 88, 12, .35); } [data-bs-theme="dark"] .pd-buycard-sicap, [data-bs-theme="dark"] .pd-buycard-sicap:hover { color: #000000; } /* ==================== 10. HIGHLIGHTS ==================== */ .pd-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; } .pd-highlight { position: relative; background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); padding: 1.2rem 1.25rem 1.1rem; box-shadow: var(--si-shadow-xs); overflow: hidden; transition: transform var(--si-transition), box-shadow var(--si-transition), border-color var(--si-transition); } .pd-highlight:hover { transform: translateY(-2px); box-shadow: var(--si-shadow); border-color: var(--si-border); } .pd-highlight i { font-size: 1.25rem; color: var(--si-accent-text); display: block; margin-bottom: .65rem; } .pd-highlight strong { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: .15rem; } .pd-highlight span { font-size: .78rem; color: var(--si-text-muted); } /* ============ 12. SPECIFICAȚII (carduri + căutare) ============ */ .pd-specs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.1rem; } .pd-specs-search { flex: 1 1 260px; max-width: 380px; display: flex; align-items: center; gap: .55rem; background: var(--si-surface); border: 1px solid var(--si-border); border-radius: var(--si-radius-pill); padding: .52rem 1rem; color: var(--si-text-muted); transition: border-color var(--si-transition), box-shadow var(--si-transition); } .pd-specs-search:focus-within { border-color: var(--si-accent-rail); box-shadow: 0 0 0 4px var(--si-accent-soft); } .pd-specs-search input { flex: 1; border: 0; background: transparent; font-size: .85rem; color: var(--si-text); outline: none; min-width: 0; } /* Carduri mereu extinse, așezate pe coloane CSS (tip masonry): când un card se termină, următorul începe imediat sub el, fără aliniere pe rânduri. */ .pd-specs-list { columns: 2; column-gap: .8rem; } .pd-spec-group { background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); overflow: hidden; break-inside: avoid; /* cardul nu se rupe între coloane */ margin-bottom: .8rem; } .pd-spec-head { display: flex; align-items: center; gap: .8rem; margin: 0; padding: 1rem 1.2rem; font-weight: 700; font-size: .92rem; } .pd-spec-head i.pd-spec-ico { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--si-radius-lg); background: var(--si-accent-soft); color: var(--si-accent-text); font-size: .95rem; flex-shrink: 0; } .pd-spec-chevron { color: var(--si-text-muted); font-size: .8rem; transition: transform var(--si-transition-slow); } .pd-faq[open] .pd-spec-chevron { transform: rotate(180deg); } .pd-spec-body { padding: 0 1.2rem 1.05rem; } .pd-spec-rows { margin: 0; } .pd-spec-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1rem; padding: .55rem 0; font-size: .84rem; border-top: 1px solid var(--si-border-subtle); } .pd-spec-row:first-child { border-top: 0; } .pd-spec-row dt { font-weight: 500; color: var(--si-text-muted); margin: 0; } .pd-spec-row dd { font-weight: 600; color: var(--si-text); margin: 0; } .pd-spec-row.is-hidden { display: none; } .pd-spec-row mark { background: var(--si-warning-soft); color: inherit; border-radius: 3px; padding: 0 2px; } .pd-specs-empty { display: none; text-align: center; color: var(--si-text-muted); font-size: .88rem; padding: 2rem 1rem; } .pd-specs-list.is-empty + .pd-specs-empty { display: block; } /* ============ 13. COMPARAȚIE VARIANTE ============ */ .pd-vcompare-wrap { overflow-x: auto; border-radius: calc(var(--si-radius-xl) + 4px); border: 1px solid var(--si-border-subtle); background: var(--si-surface); box-shadow: var(--si-shadow-xs); } .pd-vcompare { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .86rem; } .pd-vcompare th, .pd-vcompare td { padding: .85rem 1.2rem; text-align: left; border-bottom: 1px solid var(--si-border-subtle); vertical-align: middle; } .pd-vcompare thead th { vertical-align: top; padding-top: 1.4rem; border-bottom: 1px solid var(--si-border); } .pd-vcompare tbody tr:last-child th, .pd-vcompare tbody tr:last-child td { border-bottom: 0; } .pd-vcompare tbody th { font-weight: 500; color: var(--si-text-muted); white-space: nowrap; width: 190px; } /* Coloana produsului curent — evidențiată cu accent discret. */ .pd-vcompare .is-current { background: var(--si-accent-soft); border-inline: 1px solid var(--si-accent-rail); } .pd-vcompare thead .is-current { border-top: 2px solid var(--si-accent-text); } .pd-vc-head { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; } .pd-vc-head img { width: 96px; height: 96px; object-fit: contain; background: var(--pd-photo-bg); border: 1px solid var(--pd-photo-border); border-radius: var(--si-radius-lg); padding: 6px; } .pd-vc-name { font-weight: 700; font-size: .84rem; line-height: 1.35; } .pd-vc-price { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; } .pd-vc-tag { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--si-accent-text); } /* Diferențele față de produsul curent sunt marcate. */ .pd-vc-diff { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--si-accent-text); } .pd-vc-diff::before { content: "\f287"; /* bi-arrow-up-right? actually chevron; folosim dot */ display: none; } .pd-vc-diff-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--si-accent-text); flex-shrink: 0; } .pd-vc-same { color: var(--si-text-secondary); } .pd-vc-link { font-size: .78rem; font-weight: 700; color: var(--si-accent-text); text-decoration: none; } .pd-vc-link:hover { text-decoration: underline; } /* ==================== 16. PACHET (cutie) ==================== */ .pd-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; } .pd-box-item { display: flex; align-items: center; gap: .9rem; background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); padding: 1rem 1.15rem; } .pd-box-item i { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--si-radius-lg); background: var(--si-accent-soft); color: var(--si-accent-text); font-size: 1.15rem; flex-shrink: 0; } .pd-box-item strong { display: block; font-size: .87rem; font-weight: 700; } .pd-box-item span { display: block; font-size: .76rem; color: var(--si-text-muted); } /* ============ 18. CARUSELE (accesorii/similare/recente) ============ */ .pd-carousel { position: relative; } .pd-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(215px, 22vw, 265px); gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 14px; scroll-padding-inline: 4px; } .pd-carousel-track::-webkit-scrollbar { display: none; } .pd-carousel-track > * { scroll-snap-align: start; } .pd-carousel-nav { position: absolute; top: 50%; transform: translateY(-60%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--si-border); background: var(--si-surface); box-shadow: var(--si-shadow); color: var(--si-text-secondary); font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: color var(--si-transition), border-color var(--si-transition), opacity var(--si-transition); } .pd-carousel-nav:hover { color: var(--si-accent-text); border-color: var(--si-accent-rail); } .pd-carousel-nav[disabled] { opacity: 0; pointer-events: none; } .pd-carousel-nav-prev { left: -8px; } .pd-carousel-nav-next { right: -8px; } /* Card produs (similare / recente) — aliniat cu stilul cardurilor din categorie. */ .pd-prod-card { display: flex; flex-direction: column; background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--si-transition), box-shadow var(--si-transition), border-color var(--si-transition); } .pd-prod-card:hover { transform: translateY(-3px); box-shadow: var(--si-shadow-lg); border-color: var(--si-border); color: inherit; } .pd-prod-img { aspect-ratio: 4 / 3; background: var(--pd-photo-bg); border-bottom: 1px solid var(--pd-photo-border); display: flex; align-items: center; justify-content: center; padding: 1rem; } .pd-prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--si-transition-slow); } .pd-prod-card:hover .pd-prod-img img { transform: scale(1.05); } .pd-prod-body { display: flex; flex-direction: column; gap: .5rem; padding: .95rem 1.05rem 1.1rem; flex: 1; } .pd-prod-title { font-size: .8rem; font-weight: 600; line-height: 1.45; color: var(--si-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.45em); margin: 0; } .pd-prod-price { margin-top: auto; font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .pd-prod-avail { font-size: .72rem; font-weight: 600; color: var(--si-success); } .pd-prod-avail.is-out { color: var(--si-text-muted); } /* ==================== 19. SERVICII ==================== */ .pd-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; } .pd-service { position: relative; background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); padding: 1.25rem 1.3rem; transition: transform var(--si-transition), box-shadow var(--si-transition), border-color var(--si-transition); } .pd-service:hover { transform: translateY(-2px); box-shadow: var(--si-shadow); border-color: var(--si-border); } .pd-service-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; } .pd-service-head i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--si-radius-lg); background: var(--si-accent-soft); color: var(--si-accent-text); font-size: 1rem; flex-shrink: 0; } .pd-service-head strong { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; } .pd-service p { font-size: .8rem; color: var(--si-text-secondary); line-height: 1.55; margin: 0 0 .85rem; } .pd-service-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .pd-service-price { font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pd-service-price small { font-size: .72rem; font-weight: 600; color: var(--si-text-muted); } .pd-service-add { border: 1px solid var(--si-border); background: var(--si-surface); color: var(--si-text-secondary); font-size: .76rem; font-weight: 700; border-radius: var(--si-radius-pill); padding: .4rem .9rem; cursor: pointer; transition: all var(--si-transition); } .pd-service-add:hover { border-color: var(--si-accent-rail); color: var(--si-accent-text); background: var(--si-accent-soft); } .pd-service-add.is-added { border-color: var(--si-success); color: var(--si-success); background: var(--si-success-soft); } /* ==================== 20. FAQ ==================== */ .pd-faq-list { max-width: 880px; display: flex; flex-direction: column; gap: .65rem; } .pd-faq { background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); overflow: hidden; transition: border-color var(--si-transition); } .pd-faq[open] { border-color: var(--si-border); } .pd-faq summary { display: flex; align-items: center; gap: .85rem; list-style: none; padding: 1.05rem 1.25rem; font-size: .92rem; font-weight: 700; cursor: pointer; user-select: none; transition: background var(--si-transition); } .pd-faq summary::-webkit-details-marker { display: none; } .pd-faq summary:hover { background: var(--si-accent-soft); } .pd-faq-q-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--si-accent-soft); color: var(--si-accent-text); font-size: .8rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pd-faq .pd-spec-chevron { margin-left: auto; } .pd-faq-a { padding: .1rem 1.25rem 1.15rem 3.4rem; font-size: .87rem; color: var(--si-text-secondary); line-height: 1.65; } .pd-faq-a strong { color: var(--si-text); } /* ==================== 21. REVIEW-URI ==================== */ .pd-reviews-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .pd-reviews-summary { position: sticky; top: 150px; background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); padding: 1.5rem; } .pd-rev-score { display: flex; align-items: baseline; gap: .35rem; } .pd-rev-score strong { font-size: 3rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; } .pd-rev-score span { font-size: 1rem; color: var(--si-text-muted); font-weight: 600; } .pd-rev-stars-row { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .2rem; } .pd-rev-count { font-size: .82rem; color: var(--si-text-muted); } .pd-rev-bars { display: flex; flex-direction: column; gap: .45rem; margin: 1.25rem 0 1.4rem; } .pd-rev-bar { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: .65rem; font-size: .76rem; font-weight: 600; color: var(--si-text-secondary); border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; } .pd-rev-bar:hover .pd-rev-bar-track { background: var(--si-accent-soft-hover); } .pd-rev-bar-track { height: 7px; border-radius: 4px; background: var(--si-badge-bg); overflow: hidden; transition: background var(--si-transition); } .pd-rev-bar-fill { height: 100%; border-radius: 4px; background: #e8a33d; } .pd-rev-write { width: 100%; justify-content: center; } .pd-rev-summary-note { font-size: .74rem; color: var(--si-text-muted); text-align: center; margin-top: .8rem; } .pd-reviews-main { min-width: 0; } .pd-rev-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.15rem; } .pd-chip { border: 1px solid var(--si-border); background: var(--si-surface); color: var(--si-text-secondary); font-size: .78rem; font-weight: 600; border-radius: var(--si-radius-pill); padding: .42rem .95rem; cursor: pointer; font-family: inherit; transition: all var(--si-transition); } .pd-chip:hover { border-color: var(--si-accent-rail); color: var(--si-accent-text); background: var(--si-accent-soft); } .pd-chip.is-active { background: var(--si-accent); border-color: var(--si-accent); color: #fff; } [data-bs-theme="dark"] .pd-chip.is-active { background: #a1352e; border-color: #a1352e; } .pd-rev-sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--si-text-muted); } .pd-rev-sort select { border: 1px solid var(--si-border); background: var(--si-surface); color: var(--si-text); font-size: .8rem; font-weight: 600; border-radius: var(--si-radius); padding: .4rem 2rem .4rem .7rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2382889f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; } .pd-review-list { display: flex; flex-direction: column; gap: .85rem; } .pd-review { background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); padding: 1.3rem 1.4rem; } .pd-review-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; } .pd-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--si-accent-soft); color: var(--si-accent-text); font-size: .88rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pd-review-who strong { display: block; font-size: .88rem; font-weight: 700; } .pd-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .74rem; color: var(--si-text-muted); } .pd-verified { display: inline-flex; align-items: center; gap: .3rem; color: var(--si-success); font-weight: 700; } .pd-review-head .pd-stars { margin-left: auto; font-size: .8rem; } .pd-review h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .45rem; } .pd-review-text { font-size: .86rem; color: var(--si-text-secondary); line-height: 1.65; margin: 0 0 .9rem; } .pd-review-pros { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem 1.5rem; margin-bottom: 1rem; } .pd-review-pros ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .pd-review-pros li { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: var(--si-text-secondary); } .pd-review-pros li i { font-size: .8rem; margin-top: .15rem; flex-shrink: 0; } .pd-review-pros .is-pro i { color: var(--si-success); } .pd-review-pros .is-con i { color: var(--si-danger); } .pd-review-photos { display: flex; gap: .55rem; margin-bottom: 1rem; } .pd-review-photos button { width: 64px; height: 64px; border: 1px solid var(--pd-photo-border); border-radius: var(--si-radius-lg); background: var(--pd-photo-bg); padding: 5px; cursor: zoom-in; transition: border-color var(--si-transition), transform var(--si-transition); } .pd-review-photos button:hover { border-color: var(--si-accent-rail); transform: translateY(-1px); } .pd-review-photos img { width: 100%; height: 100%; object-fit: contain; } .pd-review-foot { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--si-border-subtle); padding-top: .85rem; } .pd-review-foot span { font-size: .76rem; color: var(--si-text-muted); margin-right: .25rem; } .pd-vote { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--si-border); background: var(--si-surface); color: var(--si-text-secondary); font-size: .76rem; font-weight: 600; border-radius: var(--si-radius-pill); padding: .35rem .85rem; cursor: pointer; font-family: inherit; transition: all var(--si-transition); } .pd-vote:hover { border-color: var(--si-accent-rail); color: var(--si-accent-text); } .pd-vote.is-voted { border-color: var(--si-success); color: var(--si-success); background: var(--si-success-soft); } .pd-rev-more { margin-top: 1.15rem; width: 100%; justify-content: center; } /* ============ 22. ÎNTREBĂRI & RĂSPUNSURI (Q&A) ============ */ .pd-qa-wrap { max-width: 880px; } .pd-qa-ask { display: flex; gap: .65rem; margin-bottom: 1.5rem; } .pd-qa-ask input { flex: 1; border: 1px solid var(--si-border); background: var(--si-surface); border-radius: var(--si-radius-lg); padding: .75rem 1.1rem; font-size: .88rem; color: var(--si-text); font-family: inherit; outline: none; transition: border-color var(--si-transition), box-shadow var(--si-transition); } .pd-qa-ask input:focus { border-color: var(--si-accent-rail); box-shadow: 0 0 0 4px var(--si-accent-soft); } .pd-qa-list { display: flex; flex-direction: column; gap: .85rem; } .pd-qa-item { background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); padding: 1.2rem 1.35rem; } .pd-qa-q { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .85rem; } .pd-qa-q .pd-faq-q-ico { margin-top: .1rem; } .pd-qa-q strong { font-size: .9rem; font-weight: 700; display: block; } .pd-qa-q small { font-size: .74rem; color: var(--si-text-muted); } .pd-qa-a { display: flex; align-items: flex-start; gap: .75rem; background: var(--si-accent-soft); border-left: 3px solid var(--si-accent-rail); border-radius: var(--si-radius-lg); padding: .9rem 1.05rem; margin-left: 2.55rem; } .pd-qa-a-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; color: var(--si-accent-text); white-space: nowrap; margin-top: .1rem; } .pd-qa-a p { font-size: .84rem; color: var(--si-text-secondary); line-height: 1.6; margin: 0; } /* ==================== 24. DISPONIBILITATE ==================== */ .pd-avail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; } .pd-avail-card { background: var(--si-surface); border: 1px solid var(--si-border-subtle); border-radius: var(--si-radius-xl); box-shadow: var(--si-shadow-xs); padding: 1.25rem 1.3rem; } .pd-avail-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; } .pd-avail-card-head i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--si-radius-lg); background: var(--si-accent-soft); color: var(--si-accent-text); font-size: 1rem; } .pd-avail-card-head strong { font-size: .9rem; font-weight: 700; } .pd-avail-rows { display: flex; flex-direction: column; gap: .5rem; } .pd-avail-row-line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .82rem; color: var(--si-text-secondary); } .pd-avail-row-line .pd-badge { flex-shrink: 0; } /* ==================== 25. FOOTER ==================== */ .pd-footer { border-top: 1px solid var(--si-border-subtle); background: var(--si-surface); margin-top: var(--pd-section-gap); padding-block: 2rem; } .pd-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; font-size: .8rem; color: var(--si-text-muted); } .pd-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; } .pd-footer a { color: var(--si-text-secondary); text-decoration: none; transition: color var(--si-transition); } .pd-footer a:hover { color: var(--si-accent-text); } /* ==================== 26. STICKY BUY BAR ==================== */ .pd-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: var(--si-topbar-bg); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-top: 1px solid var(--si-topbar-border); box-shadow: 0 -8px 30px rgba(15,23,42,.08); transform: translateY(110%); transition: transform .32s cubic-bezier(.4,0,.2,1); } [data-bs-theme="dark"] .pd-sticky { box-shadow: 0 -8px 30px rgba(0,0,0,.35); } .pd-sticky.is-visible { transform: translateY(0); } .pd-sticky-row { display: flex; align-items: center; gap: 1rem; padding-block: .65rem; } .pd-sticky-thumb { width: 52px; height: 52px; border-radius: var(--si-radius-lg); background: var(--pd-photo-bg); border: 1px solid var(--pd-photo-border); padding: 4px; flex-shrink: 0; } .pd-sticky-thumb img { width: 100%; height: 100%; object-fit: contain; } .pd-sticky-info { min-width: 0; } .pd-sticky-name { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; } .pd-sticky-sub { display: flex; align-items: center; gap: .7rem; font-size: .74rem; color: var(--si-text-muted); } .pd-sticky-sub .pd-avail-badge { font-size: .7rem; padding: .22rem .6rem; } .pd-sticky-price { margin-left: auto; text-align: right; flex-shrink: 0; } .pd-sticky-price .pd-price-old { font-size: .74rem; display: block; } .pd-sticky-price strong { font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .pd-sticky .pd-btn { flex-shrink: 0; } /* ============ 27. LIGHTBOX GALERIE FULLSCREEN ============ */ .pd-lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: transparent; } .pd-lightbox::backdrop { background: rgba(8, 9, 14, .92); backdrop-filter: blur(10px); } .pd-lightbox-inner { width: 100%; height: 100%; display: flex; flex-direction: column; color: #e7e9f0; } .pd-lightbox-top { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; } .pd-lightbox-title { font-size: .88rem; font-weight: 600; opacity: .85; } .pd-lightbox-counter { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .7; } .pd-lightbox-close { margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--si-transition); } .pd-lightbox-close:hover { background: rgba(255,255,255,.14); } .pd-lightbox-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 4.5rem; /* Zoomed image is clipped to the stage viewport; custom pinch/pan needs the browser gestures off inside the fullscreen dialog. */ overflow: hidden; touch-action: none; } .pd-lightbox-stage img { max-width: min(88vw, 900px); max-height: 100%; object-fit: contain; border-radius: var(--si-radius-xl); background: #fff; padding: clamp(1rem, 3vw, 2.5rem); user-select: none; -webkit-user-drag: none; cursor: zoom-in; transition: transform .3s cubic-bezier(.2,.6,.2,1); will-change: transform; } /* "+" cât timp mai e loc de mărit; "−" abia la nivelul maxim (4×). */ .pd-lightbox-stage.is-zoomed img { cursor: zoom-in; } .pd-lightbox-stage.is-max img { cursor: zoom-out; } .pd-lightbox-stage.is-gesturing img { transition: none; } @media (prefers-reduced-motion: reduce) { .pd-lightbox-stage img { transition: none; } } /* Zoom level chip (top-right of stage) + interaction hint (bottom). */ .pd-lb-zoom-badge { position: absolute; top: .9rem; right: 5.25rem; z-index: 3; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 2rem; padding: .3rem .7rem; pointer-events: none; } .pd-lb-hint { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3; font-size: .74rem; color: rgba(255,255,255,.75); background: rgba(8,9,14,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 2rem; padding: .3rem .75rem; pointer-events: none; transition: opacity .25s ease; white-space: nowrap; } .pd-lightbox-stage.is-zoomed .pd-lb-hint { opacity: 0; } .pd-lightbox-nav { z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 1.2rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--si-transition); } .pd-lightbox-nav:hover { background: rgba(255,255,255,.14); } .pd-lightbox-nav-prev { left: 1.25rem; } .pd-lightbox-nav-next { right: 1.25rem; } .pd-lightbox-thumbs { display: flex; justify-content: center; gap: .55rem; padding: 1rem 1.5rem 1.35rem; overflow-x: auto; scrollbar-width: none; } .pd-lightbox-thumbs::-webkit-scrollbar { display: none; } .pd-lightbox-thumbs .pd-thumb { width: 58px; height: 58px; background: #fff; border-color: rgba(255,255,255,.14); } .pd-lightbox-thumbs .pd-thumb.is-active { border-color: #d97870; box-shadow: 0 0 0 3px rgba(224,119,112,.3); } /* ============ 28. ANIMAȚII REVEAL + REDUCED MOTION ============ */ .pd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1); } .pd-reveal.is-inview { opacity: 1; transform: none; } /* Stagger discret pentru grile — copiii primesc delay incremental. */ .pd-reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1); } .pd-reveal-stagger.is-inview > * { opacity: 1; transform: none; } .pd-reveal-stagger.is-inview > :nth-child(2) { transition-delay: .06s; } .pd-reveal-stagger.is-inview > :nth-child(3) { transition-delay: .12s; } .pd-reveal-stagger.is-inview > :nth-child(4) { transition-delay: .18s; } .pd-reveal-stagger.is-inview > :nth-child(5) { transition-delay: .24s; } .pd-reveal-stagger.is-inview > :nth-child(6) { transition-delay: .3s; } .pd-reveal-stagger.is-inview > :nth-child(7) { transition-delay: .36s; } .pd-reveal-stagger.is-inview > :nth-child(8) { transition-delay: .42s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .pd-reveal, .pd-reveal-stagger > * { opacity: 1 !important; transform: none !important; } } /* ============ 28b. TOAST + DETALII GLOBALE ============ */ .pd-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(12px); z-index: 1060; display: inline-flex; align-items: center; gap: .55rem; background: var(--si-text); color: var(--si-bg); font-size: .84rem; font-weight: 600; border-radius: var(--si-radius-pill); padding: .65rem 1.15rem; box-shadow: var(--si-shadow-xl); opacity: 0; pointer-events: none; transition: opacity var(--si-transition-slow), transform var(--si-transition-slow); max-width: min(92vw, 480px); } .pd-toast i { color: var(--si-success); font-size: .95rem; flex-shrink: 0; } .pd-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Blocăm scroll-ul paginii cât timp galeria fullscreen e deschisă. Only fires when a