/* ========================================================================= adcolor.ro v2 — CONTUL MEU (/contul-meu/) · DIRECȚIA D2 „Var & salvie" MACHETĂ DE DESIGN — NU site live. Imagini TEMPORARE (placeholder din img-temp/). GLOBALE (header/footer/share/sprite/tokeni/CSS de bază/motion/JS) = REUTILIZATE VERBATIM din cos-v1.html (la rândul lor din pdp-v5.html). PM: „header și footer sunt globale" + regula de consecvență 2026-06-26 („păstrează principiile și linia din template-urile de până acum"). NU re-proiectate, NU compactate. STRUCTURA CONTUL MEU (page-section-standard.md §3.8 (b), în ordine): Breadcrumb (Acasă / Contul meu) 1. Antet „Contul meu" + salut 2. Navigare cont = TAB-uri pe desktop / ACORDEON single-open pe mobil: Panou · Comenzile mele · Adrese · Date cont · Favorite (link) · Delogare 3. Conținut per secțiune (stări CHEIE randate, NU goale): - Panou: salut + scurtături (ultima comandă / adrese / favorite) - Comenzile mele: tabel comenzi (nr/dată/status/total/acțiuni) → carduri stivuite pe mobil - Adrese: facturare + livrare (carduri editabile) - Date cont: formular (nume, email, parolă) cu label/focus (c) OPȚIONAL: „Recomandări din comenzi anterioare" (card produs „favourite", grilă reflow) 4. STARE ALTERNATIVĂ — NEAUTENTIFICAT (formular login + înregistrare), randată JOS, etichetată SHARE (global) → FOOTER (global) → motion (global) PÂLNIE / CONT: pe CONTUL MEU NU există SEO / EEAT / GEO / CITE / FAQ / Newsletter / Blog (page-section §4 matrice). DOAR „Recomandări din comenzi anterioare" ca auxiliar opțional. Header/share/footer/motion = globale. FEZABILITATE (read-only, free-first, Woo stăpân pe cont): - checkout-account-feasibility-woo.md §3: TOATE endpoint-urile §3.8(b) = NATIVE Woo My Account (login/register, orders + view-order + re-order, edit-address, edit-account, customer-logout). Singurul custom = stil/RO/responsive (tab↔acordeon). Nuanța-variație se propagă NATIV pe comandă. „Favorite" = LINK către /lista-de-dorinte/; mecanismul Wishlist NU e nativ Woo → free-plugin vs custom (RULE 10), [NEEDS-PM] — NU blochează designul. „Recomandări din comenzi anterioare" = re-order nativ + related/cross-sell + (opțional fază 2) custom-free, [NEEDS-PM]. - checkout-account-feasibility-elementor.md (logica respectată): randare prin șablon Woo child-theme sau widget Elementor Pro „My Account"; endpoint-urile rămân funcționale. Stare livrabil: CONSTRUIT, NEconfirmat vizual (RULE 8 — fără render real). NU atinge alte machete. ========================================================================= */ :root{ --fs-display: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem); --fs-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem); --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-stat: clamp(2.5rem, 1.6rem + 3.5vw, 3.75rem); --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-tight: 1.1; --lh-heading: 1.25; --lh-body: 1.65; --ls-eyebrow: 0.12em; --ls-heading: -0.01em; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --radius-sm:4px; --radius-md:10px; --radius-lg:18px; --radius-swatch:6px; --radius-pill:999px; --container-max:1280px; --container-max-wide:1480px; --container-pad: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --touch-min:44px; --border-w:1px; --transition:180ms ease; --tr-flood:240ms ease; --tr-slide:320ms cubic-bezier(.4,0,.2,1); --tr-zoom:320ms cubic-bezier(.4,0,.2,1); --header-h:72px; --card-curve-w:150%; --card-curve-h:100%; --card-curve: radial-gradient(var(--card-curve-w) var(--card-curve-h) at 50% 0%, #000 99.5%, transparent 100%); --z-sticky:200; --z-overlay:300; --z-mega:250; --z-totop:400; --tr-motion:560ms cubic-bezier(.4,0,.2,1); /* easing premium pentru stratul de mișcare */ --font-display:"Marcellus", serif; --font-body:"Mulish", sans-serif; --color-background:#F4F2EC; --color-surface:#FFFFFF; --color-surface-alt:#E7E6DC; --color-text-primary:#33382F; --color-text-secondary:#5E6357; --color-primary:#5E7355; --color-primary-hover:#4A5D44; --color-primary-active:#3C4D38; --color-secondary:#8A7E6A; --color-accent:#B8A66F; --color-success:#4F7A4E; --color-warning:#A87E2C; --color-danger:#9C463A; --color-danger-hover:#86392F; --color-danger-active:#6F2F26; --color-border:#D8D6C9; --color-on-primary:#F6F8F2; --color-info:#3E6A77; --color-success-soft:#E6EEE2; --color-warning-soft:#F3EAD3; --color-danger-soft:#F2E1DD; --color-info-soft:#E0EBEE; --color-selected-ring:#5E7355; --color-overlay:rgba(51,56,47,0.55); --color-tint:#ECEEE3; /* tentă D2 deschisă pentru variația de fundal */ --shadow-sm:0 1px 2px rgba(60,64,52,.08); --shadow-card:0 4px 14px rgba(60,64,52,.10); --shadow-card-hover:0 10px 28px rgba(60,64,52,.16); --shadow-swatch:0 2px 8px rgba(60,64,52,.14); --cat-sage:#CFE0B4; --cat-lime:#E0E8B2; --cat-mustard:#EDDA9C; --cat-clay:#F3D4BC; --cat-stone:#CDDCDF; --cat-forest:#CCDFC6; --cat-sand:#EEDAAE; } *{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--color-text-primary); background:var(--color-background); } img{ max-width:100%; } a{ color:var(--color-primary); } .wrap{ width:min(100% - 2*var(--container-pad), var(--container-max)); margin:0 auto; } @media (min-width:1440px){ .wrap{ width:min(100% - 2*var(--container-pad), var(--container-max-wide)); } } .skip{ position:absolute; left:-9999px; } .skip:focus{ left:var(--space-3); top:var(--space-3); z-index:999; background:var(--color-surface); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } /* ---- Banner notă (machetă) — DEZACTIVAT (display:none defensiv + comentat în HTML), ca pe cos-v1. ---- */ .comp-banner{ display:none !important; } /* ---- ICOANE SVG ---- */ .icon{ width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.15em; flex:0 0 auto; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; } /* ---- BUTOANE (VERBATIM din cos-v1) ---- */ .btn{ font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:var(--fs-body); border-radius:var(--radius-md); padding:var(--space-3) var(--space-5); min-height:var(--touch-min); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); cursor:pointer; text-decoration:none; border:1px solid transparent; transition:background var(--transition), box-shadow var(--transition), transform var(--transition); } .btn-primary{ background:var(--color-primary); color:var(--color-on-primary); } .btn-primary:hover{ background:var(--color-primary-hover); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .btn-primary:active{ background:var(--color-primary-active); transform:translateY(0); box-shadow:none; } .btn-secondary{ background:transparent; border-color:var(--color-primary); color:var(--color-primary); } .btn-secondary:hover{ background:var(--color-surface-alt); } .btn-ghost{ background:transparent; color:var(--color-primary); } .btn-ghost:hover{ background:var(--color-surface-alt); text-decoration:underline; } .btn-danger-outline{ background:transparent; border-color:var(--color-danger); color:var(--color-danger); } .btn-danger-outline:hover{ background:var(--color-danger-soft); } .btn-danger-outline:focus-visible{ outline:2px solid var(--color-danger); outline-offset:2px; } .btn:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; } .btn-lg{ font-size:var(--fs-lead); padding:var(--space-4) var(--space-6); min-height:52px; } .btn-sm{ font-size:var(--fs-small); padding:var(--space-2) var(--space-4); min-height:36px; } .btn-full{ width:100%; } .btn .ic{ width:1.1em; height:1.1em; } .link-arrow{ display:inline-flex; align-items:center; gap:var(--space-1); font-weight:600; color:var(--color-primary); text-decoration:none; } .link-arrow:hover{ text-decoration:underline; } .link-arrow .icon{ transition:transform var(--transition); } .link-arrow:hover .icon{ transform:translateX(2px); } @media (prefers-reduced-motion: reduce){ .btn-primary:hover{ transform:none; } .link-arrow:hover .icon{ transform:none; } } /* ---- BADGE (VERBATIM din cos-v1) ---- */ .badge{ font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-radius:var(--radius-pill); padding:3px var(--space-3); display:inline-flex; } .pbadge{ position:absolute; top:var(--space-3); left:var(--space-3); z-index:2; font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.04em; border-radius:var(--radius-pill); padding:3px var(--space-3); display:inline-flex; align-items:center; gap:4px; } .pbadge-new{ background:var(--color-primary); color:var(--color-on-primary); } .pbadge-best{ background:var(--color-text-primary); color:var(--color-on-primary); } .pbadge-sale{ background:var(--color-danger); color:var(--color-on-primary); } .pbadge-oos{ background:var(--color-surface-alt); color:var(--color-text-secondary); border:1px solid var(--color-border); } .pbadge-ask{ background:var(--color-info-soft); color:var(--color-info); border:1px solid var(--color-info); } /* ---- SECȚIUNI ---- */ .section{ padding:var(--space-8) 0; } .section--tint{ background:var(--color-tint); } .section--alt{ background:var(--color-surface-alt); } .section--surface{ background:var(--color-surface); } .section-head{ max-width:none; margin:0 0 var(--space-6); } .eyebrow{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-eyebrow); font-size:var(--fs-eyebrow); font-weight:700; color:var(--color-primary); margin:0 0 var(--space-2); } h2.sec-title{ font-family:var(--font-display); font-size:var(--fs-h2); line-height:var(--lh-heading); font-weight:var(--fw-regular); letter-spacing:var(--ls-heading); margin:0 0 var(--space-3); } .sec-sub{ color:var(--color-text-secondary); font-size:var(--fs-lead); margin:0; } /* ---- SCROLL REVEAL (VERBATIM din cos-v1) ---- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); } .reveal.is-in{ opacity:1; transform:none; } .reveal--left{ transform:translateX(-34px); } .reveal--right{ transform:translateX(34px); } .reveal--left.is-in, .reveal--right.is-in{ transform:none; } @media (prefers-reduced-motion: reduce){ .reveal, .reveal--left, .reveal--right{ opacity:1 !important; transform:none !important; transition:none; } } /* ============ STRATUL DE MIȘCARE (motion layer — VERBATIM din cos-v1) ============ */ .stagger-group > .stg-child{ opacity:0; transition:opacity var(--tr-motion), transform var(--tr-motion); } .stg-child.from-up{ transform:translateY(34px); } .stg-child.from-down{ transform:translateY(-26px); } .stg-child.from-left{ transform:translateX(-38px); } .stg-child.from-right{ transform:translateX(38px); } .stagger-group.is-in > .stg-child{ opacity:1; transform:none; } /* ---- Buton „înapoi sus" cu inel de progres de scroll (VERBATIM din cos-v1) ---- */ .to-top{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:var(--z-totop); width:56px; height:56px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-primary); box-shadow:var(--shadow-card-hover); cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(12px) scale(.85); pointer-events:none; transition:opacity var(--transition), transform var(--tr-slide), box-shadow var(--transition); } .to-top.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .to-top:hover{ box-shadow:var(--shadow-card-hover), 0 0 0 3px var(--color-tint); } .to-top:focus-visible{ outline:3px solid var(--color-primary); outline-offset:3px; } .to-top .tt-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; } .to-top .tt-track{ fill:none; stroke:var(--color-border); stroke-width:3; } .to-top .tt-bar{ fill:none; stroke:var(--color-primary); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 90ms linear; } .to-top:hover .tt-bar{ stroke:var(--color-accent); } .to-top .tt-face{ position:relative; display:grid; place-items:center; line-height:1; } .to-top .tt-pct{ font-family:var(--font-body); font-weight:var(--fw-bold); font-size:.82rem; color:var(--color-text-primary); letter-spacing:.01em; transition:opacity var(--transition), transform var(--transition); } .to-top .tt-arrow{ position:absolute; inset:0; display:grid; place-items:center; color:var(--color-primary); opacity:0; transform:translateY(3px); transition:opacity var(--transition), transform var(--transition); } .to-top .tt-arrow .icon{ width:1.5em; height:1.5em; } .to-top:hover .tt-pct, .to-top:focus-visible .tt-pct{ opacity:0; transform:translateY(-3px); } .to-top:hover .tt-arrow, .to-top:focus-visible .tt-arrow{ opacity:1; transform:translateY(0); } /* ---- „Blob" decorativ pe carduri (subset: product-card) — VERBATIM din cos-v1 ---- */ .product-card{ position:relative; } .product-card::before{ content:""; position:absolute; z-index:0; top:-18%; right:-14%; width:46%; aspect-ratio:1/1; pointer-events:none; background:radial-gradient(circle at 35% 35%, rgba(94,115,85,.18), rgba(94,115,85,0) 70%); border-radius:46% 54% 58% 42% / 52% 44% 56% 48%; opacity:.7; transition:transform 1.4s cubic-bezier(.4,0,.2,1), border-radius 1.4s cubic-bezier(.4,0,.2,1), opacity var(--transition); } .product-card:hover::before{ transform:scale(1.18) rotate(8deg); border-radius:58% 42% 48% 52% / 44% 56% 48% 52%; opacity:.9; } .product-card > *{ position:relative; z-index:1; } @media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity .01ms; transform:none; } .to-top.is-visible{ transform:none; } .to-top .tt-bar{ transition:none; } .stagger-group > .stg-child{ opacity:1 !important; transform:none !important; transition:none; } .product-card::before{ transition:none; } .product-card:hover::before{ transform:none; border-radius:46% 54% 58% 42% / 52% 44% 56% 48%; } } /* ============ HEADER STICKY (GLOBAL — VERBATIM din cos-v1.html) ============ */ .site-header{ position:sticky; top:0; z-index:var(--z-sticky); background:var(--color-text-primary); border-bottom:1px solid rgba(255,255,255,.14); } .header-inner{ display:flex; align-items:center; gap:var(--space-4); min-height:var(--header-h); padding-top:var(--space-2); padding-bottom:var(--space-2); } .header-search{ position:relative; flex:1 1 auto; max-width:360px; } .header-search .icon{ position:absolute; left:var(--space-4); top:50%; transform:translateY(-50%); color:var(--color-text-secondary); width:1.1em; height:1.1em; } .header-search input{ width:100%; min-height:var(--touch-min); border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-background); font-family:var(--font-body); font-size:var(--fs-body); padding:0 var(--space-4) 0 calc(var(--space-4)*2 + 8px); color:var(--color-text-primary); } .header-search input:focus{ outline:2px solid var(--color-primary); outline-offset:1px; border-color:var(--color-primary); } .header-actions{ display:flex; align-items:center; gap:var(--space-1); margin-left:auto; flex:0 0 auto; } .icon-btn{ position:relative; width:var(--touch-min); height:var(--touch-min); display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--color-text-primary); border-radius:var(--radius-md); cursor:pointer; text-decoration:none; } .icon-btn:hover{ background:var(--color-surface-alt); } .icon-btn:focus-visible{ outline:2px solid var(--color-primary); outline-offset:-2px; } .icon-btn .icon{ width:1.4em; height:1.4em; } .cart-count{ position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px; background:var(--color-primary); color:var(--color-on-primary); border-radius:var(--radius-pill); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); } .burger{ display:none; } /* utilitarul „Contul meu" marcat ca activ (pagina curentă) */ .icon-btn.is-current{ background:rgba(255,255,255,.16); } .site-header .icon-btn.is-current{ color:var(--color-accent); } /* Inversiune controale pe fundalul header-ului închis (VERBATIM din cos-v1). */ .site-header .tmd-mm__logo .logo-mark{ color:var(--color-accent); } .site-header .tmd-mm__logo .logo-mark b{ color:var(--color-accent); } .site-header .tmd-mm__navlink, .site-header .tmd-mm__trigger{ color:var(--color-on-primary); } .site-header .tmd-mm__navlink:hover, .site-header .tmd-mm__trigger:hover{ color:#fff; } .site-header .tmd-mm__navlink.is-current{ color:var(--color-accent); } .site-header .tmd-mm__trigger::after{ background:var(--color-accent); } .site-header .tmd-mm__trigger-underline{ background:var(--color-accent); } .site-header .tmd-mm__indicator{ color:var(--color-on-primary); } .site-header .tmd-mm__navlink:focus-visible, .site-header .tmd-mm__trigger:focus-visible, .site-header .tmd-mm__toggle:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; } .site-header .tmd-mm__toggle{ color:var(--color-on-primary); } .site-header .header-search .icon{ color:rgba(246,248,242,.85); } .site-header .header-search input{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); color:#fff; } .site-header .header-search input::placeholder{ color:rgba(246,248,242,.78); } .site-header .header-search input:focus{ outline:2px solid var(--color-accent); outline-offset:1px; border-color:var(--color-accent); background:rgba(255,255,255,.18); } .site-header .icon-btn{ color:var(--color-on-primary); } .site-header .icon-btn:hover{ background:rgba(255,255,255,.14); color:#fff; } .site-header .icon-btn:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; } .site-header .cart-count{ background:var(--color-accent); color:#2B2F27; } /* ---- TMD MEGA MENU (VERBATIM din cos-v1.html) ---- */ .tmd-mm{ --mm-accent:var(--color-primary); --mm-accent-ink:var(--color-on-primary); --mm-eyebrow-accent:var(--color-accent); --mm-bar-bg:var(--color-surface); --mm-bar-ink:var(--color-text-primary); --mm-panel-bg:var(--color-surface); --mm-panel-ink:var(--color-text-primary); --mm-muted:var(--color-text-secondary); --mm-card-bg:var(--color-surface); --mm-card-bg-hover:var(--color-tint); --mm-border:var(--color-border); --mm-font-heading:var(--font-display); --mm-font-body:var(--font-body); --mm-font-label:var(--font-body); --mm-weight-heading:var(--fw-regular); --mm-weight-label:var(--fw-semibold); --mm-tracking-label:0.06em; --mm-fz-nav:var(--fs-small); --mm-fz-eyebrow:var(--fs-eyebrow); --mm-fz-title:var(--fs-h3); --mm-fz-card-title:1.05rem; --mm-fz-desc:var(--fs-small); --mm-fz-feature:var(--fs-h3); --mm-maxw:var(--container-max); --mm-bar-h:calc(var(--header-h) - 16px); --mm-bar-pad-x:0px; --mm-panel-pad-y:var(--space-6); --mm-panel-pad-x:var(--space-6); --mm-gap:var(--space-4); --mm-radius:var(--radius-lg); --mm-radius-card:var(--radius-md); --mm-cols:4; --mm-ease:cubic-bezier(.4,0,.2,1); --mm-dur:240ms; position:relative; flex:1 1 auto; min-width:0; font-family:var(--mm-font-body); color:var(--mm-panel-ink); } .tmd-mm *,.tmd-mm *::before,.tmd-mm *::after{ box-sizing:border-box; } .tmd-mm a{ text-decoration:none; color:inherit; } .tmd-mm__bar{ background:transparent; } .tmd-mm__bar-inner{ max-width:none; margin:0; padding:0; height:var(--mm-bar-h); display:flex; align-items:center; gap:var(--space-5); } .tmd-mm__logo{ display:flex; align-items:center; height:40px; color:var(--mm-bar-ink); flex:0 0 auto; } .tmd-mm__logo a{ display:flex; align-items:center; } .tmd-mm__logo img{ height:100%; width:auto; display:block; } .tmd-mm__logo .logo-mark{ font-family:var(--font-display); font-size:1.5rem; color:var(--color-text-primary); letter-spacing:.02em; line-height:1; } .tmd-mm__logo .logo-mark b{ color:var(--color-primary); font-weight:var(--fw-regular); } .tmd-mm__nav{ display:flex; align-items:center; gap:var(--space-4); flex:1 1 auto; min-width:0; flex-wrap:var(--mm-nav-wrap, wrap); overflow-x:var(--mm-nav-overflow, visible); } .tmd-mm__navlink,.tmd-mm__trigger{ font-family:var(--mm-font-label); font-size:var(--mm-fz-nav); font-weight:var(--mm-weight-label); letter-spacing:var(--mm-tracking-label); color:var(--mm-bar-ink); background:none; border:0; padding:0; cursor:pointer; line-height:1; min-height:var(--touch-min); display:inline-flex; align-items:center; } .tmd-mm__navlink{ color:var(--color-text-primary); padding:0 var(--space-2); border-radius:var(--radius-md); } .tmd-mm__navlink:hover{ color:var(--color-primary); } .tmd-mm__navlink:focus-visible,.tmd-mm__trigger:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-md); } .tmd-mm__navlink.is-current{ color:var(--mm-accent); } .tmd-mm__triggerwrap{ position:relative; order:-1; } .tmd-mm__trigger{ position:relative; gap:7px; padding:0 var(--space-2); } .tmd-mm__trigger::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mm-accent); opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .2s ease; } .tmd-mm.is-open .tmd-mm__trigger::after{ opacity:1; transform:scale(1); } .tmd-mm__trigger-underline{ position:absolute; left:var(--space-2); right:var(--space-4); bottom:6px; height:2px; background:var(--mm-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--mm-dur) var(--mm-ease); } .tmd-mm.is-open .tmd-mm__trigger-underline,.tmd-mm__trigger:hover .tmd-mm__trigger-underline{ transform:scaleX(1); } .tmd-mm__indicator{ display:inline-flex; align-items:center; line-height:0; transition:transform var(--mm-dur) var(--mm-ease); } .tmd-mm__indicator .icon{ width:1em; height:1em; } .tmd-mm__indicator-open{ display:none; } .tmd-mm.is-open .tmd-mm__indicator-closed{ display:none; } .tmd-mm.is-open .tmd-mm__indicator-open{ display:inline-flex; } .tmd-mm__panel{ position:absolute; left:0; right:0; transform:translateY(-8px); top:100%; width:auto; background:var(--mm-panel-bg); border-top:1px solid var(--mm-border); border-bottom:1px solid var(--mm-border); box-shadow:var(--shadow-card-hover); opacity:0; visibility:hidden; z-index:var(--z-mega); transition:opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease), visibility 0s linear var(--mm-dur); } .tmd-mm.is-open .tmd-mm__panel{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease); } .tmd-mm__panel-inner{ max-width:var(--mm-maxw); margin:0 auto; padding:var(--mm-panel-pad-y) var(--container-pad); } .tmd-mm__eyebrow,.tmd-mm__intro-eyebrow{ font-family:var(--mm-font-label); font-size:var(--mm-fz-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; font-weight:var(--fw-bold); color:var(--color-primary); } .tmd-mm__intro-title{ font-family:var(--mm-font-heading); font-weight:var(--mm-weight-heading); font-size:var(--mm-fz-title); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:var(--space-2) 0 0; color:var(--color-text-primary); } .tmd-mm--images .tmd-mm__panel-inner{ display:grid; grid-template-columns:200px 1fr; gap:var(--space-6); align-items:start; } .tmd-mm__grid{ display:grid; grid-template-columns:repeat(var(--mm-cols), 1fr); gap:var(--mm-gap); } .tmd-mm__card{ position:relative; display:block; border:1px solid var(--mm-border); border-radius:var(--mm-radius-card); overflow:hidden; background:var(--mm-card-bg); box-shadow:var(--shadow-card); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .tmd-mm__card:hover{ border-color:var(--mm-accent); transform:translateY(-3px); box-shadow:var(--shadow-card-hover); } .tmd-mm__card:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; } .tmd-mm__thumb{ --card-curve-h:135%; position:relative; aspect-ratio:16/10; background:var(--mm-card-bg-hover); overflow:hidden; -webkit-mask:var(--card-curve); mask:var(--card-curve); } .tmd-mm__thumb img{ position:relative; z-index:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transform-origin:center; will-change:transform; transition:transform var(--tr-zoom); } .tmd-mm__card:hover .tmd-mm__thumb img, .tmd-mm__card:focus-visible .tmd-mm__thumb img{ transform:scale(1.06); } .tmd-mm__thumb::before{ content:""; position:absolute; left:0; right:0; top:0; height:55%; z-index:1; pointer-events:none; background:linear-gradient(to bottom, var(--mm-accent) 0%, rgba(94,115,85,0) 100%); opacity:0; transform:translateY(-100%); transition:transform var(--tr-slide), opacity var(--tr-flood); } .tmd-mm__card:hover .tmd-mm__thumb::before, .tmd-mm__card:focus-visible .tmd-mm__thumb::before{ opacity:.55; transform:translateY(0); } .tmd-mm__card-body{ padding:var(--space-3) var(--space-4) var(--space-4); } .tmd-mm__card-title{ font-family:var(--mm-font-heading); font-weight:var(--mm-weight-heading); font-size:var(--mm-fz-card-title); line-height:1.25; color:var(--color-text-primary); transition:color .2s ease; } .tmd-mm__card:hover .tmd-mm__card-title{ color:var(--mm-accent); } .tmd-mm__card-desc{ font-family:var(--mm-font-body); font-size:var(--mm-fz-desc); line-height:1.45; color:var(--mm-muted); margin-top:4px; } .tmd-mm__feature{ display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-3); background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%); color:var(--color-on-primary); border-radius:var(--mm-radius); padding:var(--space-5); } .tmd-mm__feature--compact{ grid-column:auto; } .tmd-mm__feature-eyebrow{ font-family:var(--mm-font-label); font-size:var(--mm-fz-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; font-weight:var(--fw-bold); color:var(--mm-eyebrow-accent); } .tmd-mm__feature-title{ font-family:var(--mm-font-heading); font-weight:var(--mm-weight-heading); font-size:var(--mm-fz-feature); line-height:var(--lh-heading); color:#fff; } .tmd-mm__feature-text{ font-family:var(--mm-font-body); font-size:var(--fs-small); line-height:1.5; color:#ECEFE6; margin:0; } .tmd-mm__feature-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:var(--touch-min); font-family:var(--mm-font-body); font-weight:var(--fw-semibold); font-size:var(--fs-small); background:var(--color-on-primary); border:1px solid transparent; padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); transition:background var(--transition); } .tmd-mm a.tmd-mm__feature-btn{ color:var(--color-primary); } .tmd-mm__feature-btn .icon{ color:var(--color-primary); flex:0 0 auto; } .tmd-mm a.tmd-mm__feature-btn:hover{ background:#fff; color:var(--color-primary-hover); } .tmd-mm__feature-btn:hover .icon{ color:var(--color-primary-hover); } .tmd-mm a.tmd-mm__feature-btn:focus-visible{ outline:2px solid var(--color-on-primary); outline-offset:2px; color:var(--color-primary); } .tmd-mm__intro{ display:flex; flex-direction:column; gap:var(--space-4); } .tmd-mm__viewall{ font-family:var(--mm-font-label); font-size:var(--mm-fz-nav); font-weight:var(--fw-semibold); letter-spacing:var(--mm-tracking-label); color:var(--color-primary); align-self:flex-start; min-height:var(--touch-min); display:inline-flex; align-items:center; gap:6px; } .tmd-mm__viewall:hover{ text-decoration:underline; } .tmd-mm__viewall:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion: reduce){ .tmd-mm__card{ transition:border-color .01ms, box-shadow .01ms; } .tmd-mm__card:hover{ transform:none; } .tmd-mm__thumb img{ transition:none; } .tmd-mm__card:hover .tmd-mm__thumb img, .tmd-mm__card:focus-visible .tmd-mm__thumb img{ transform:none; } .tmd-mm__thumb::before{ transition:none; } .tmd-mm__card:hover .tmd-mm__thumb::before, .tmd-mm__card:focus-visible .tmd-mm__thumb::before{ opacity:0; transform:translateY(-100%); } } @media (min-width:1025px){ .tmd-mm__toggle{ display:none; } .tmd-mm{ position:static; } } @media (max-width:1024px){ .header-inner{ flex-wrap:wrap; row-gap:0; align-items:flex-start; position:relative; } .header-search{ display:none; } .tmd-mm{ flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; min-width:0; } .tmd-mm__bar{ flex:1 1 auto; min-width:0; order:0; } .tmd-mm__bar-inner{ height:auto; min-height:var(--mm-bar-h); gap:var(--space-3); flex-wrap:wrap; row-gap:0; padding-right:calc(3 * 40px + var(--space-2)); } .header-actions{ position:absolute; top:0; right:0; height:var(--mm-bar-h); display:flex; align-items:center; gap:0; margin-left:0; flex:0 0 auto; z-index:calc(var(--z-sticky) + 1); } .header-actions .icon-btn{ width:40px; } .tmd-mm.is-open ~ .header-actions, .site-header .header-actions{ position:absolute; top:0; right:0; height:var(--mm-bar-h); display:flex; align-items:center; gap:0; margin-left:0; z-index:calc(var(--z-sticky) + 1); } .tmd-mm__logo{ order:0; flex:0 0 auto; } .tmd-mm__nav{ order:2; flex:1 1 100%; display:none; flex-direction:column; align-items:stretch; gap:var(--space-2); width:100%; padding:var(--space-3) 0; } .tmd-mm--mobile-accordion .tmd-mm__panel{ order:3; flex:1 1 100%; } .tmd-mm.is-open .tmd-mm__nav{ display:flex; flex-direction:column; align-items:stretch; width:100%; flex:1 1 100%; order:2; } .tmd-mm.is-open .tmd-mm__nav .tmd-mm__triggerwrap{ width:100%; } .tmd-mm.is-open .tmd-mm__nav .tmd-mm__navlink, .tmd-mm.is-open .tmd-mm__nav .tmd-mm__trigger{ width:100%; min-height:var(--touch-min); display:flex; align-items:center; } .tmd-mm__toggle{ display:inline-flex; align-items:center; justify-content:center; margin-left:0; width:var(--touch-min); height:var(--touch-min); background:transparent; border:0; cursor:pointer; color:var(--color-text-primary); border-radius:var(--radius-md); flex:0 0 auto; order:1; } .tmd-mm__toggle:hover{ background:var(--color-surface-alt); } .tmd-mm__toggle:focus-visible{ outline:2px solid var(--color-primary); outline-offset:-2px; } .tmd-mm__toggle .icon{ width:1.5em; height:1.5em; } .tmd-mm__toggle-close{ display:none; } .tmd-mm.is-open .tmd-mm__toggle-open{ display:none; } .tmd-mm.is-open .tmd-mm__toggle-close{ display:inline-flex; } .tmd-mm__navlink{ min-height:var(--touch-min); padding:0 var(--space-3); } .tmd-mm--mobile-accordion .tmd-mm__panel, .tmd-mm--mobile-accordion.is-open .tmd-mm__panel{ position:static; left:auto; right:auto; top:auto; transform:none; width:100%; max-width:100%; margin:0; box-shadow:none; border:0; border-top:1px solid var(--mm-border); opacity:1; visibility:visible; } .tmd-mm--mobile-accordion .tmd-mm__panel{ display:none; } .tmd-mm--mobile-accordion.is-open .tmd-mm__panel{ display:block; } .tmd-mm__panel-inner{ max-width:100%; width:100%; margin:0; padding:var(--space-4) 0; } .tmd-mm--images .tmd-mm__panel-inner{ grid-template-columns:1fr; gap:var(--space-4); } .tmd-mm__grid{ grid-template-columns:1fr; width:100%; margin:0; } } /* ============================================================================ CORP CONTUL MEU — componente specifice (pe tokeni D2). Globalele (breadcrumb, product-card, share, footer, motion) sunt reutilizate VERBATIM; NOU pentru cont = antetul de cont + salut, navigarea cont (tab desktop / acordeon single-open mobil), panourile per secțiune (panou/comenzi/adrese/date cont), tabelul de comenzi (→ carduri stivuite pe mobil), carduri de adresă, formularul de date cont, formularele login/înregistrare (stare alternativă neautentificat). ============================================================================ */ /* ---- BREADCRUMB (VERBATIM din cos-v1) ---- */ .breadcrumb{ padding:var(--space-5) 0 0; } .breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); padding:0; margin:0; font-family:var(--font-body); font-size:var(--fs-small); } .breadcrumb a{ color:var(--color-primary); text-decoration:none; } .breadcrumb a:hover{ text-decoration:underline; } .breadcrumb .sep{ color:var(--color-text-secondary); } .breadcrumb [aria-current="page"]{ color:var(--color-text-secondary); } /* ---- ANTET CONT + SALUT ---- */ .acct-head{ padding:var(--space-6) 0 0; } .acct-head .eyebrow{ margin-bottom:var(--space-2); } .acct-head h1{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h2); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0 0 var(--space-2); color:var(--color-text-primary); } .acct-head .acct-sub{ color:var(--color-text-secondary); font-size:var(--fs-lead); margin:0; max-width:60ch; } /* ---- LAYOUT CONT — 2 coloane (nav | conținut) pe desktop; 1 coloană pe mobil ---- */ .acct-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start; } @media (min-width:1024px){ .acct-grid{ grid-template-columns:264px 1fr; gap:var(--space-7); } } /* ========================================================================= NAVIGARE CONT — design dual: DESKTOP (≥768px): TAB-uri verticale (role=tablist), un singur panou vizibil. MOBIL (<768px): ACORDEON single-open — fiecare „tab" devine antet de acordeon, deschiderea unuia îl închide pe celălalt (design-system §6.bis.6/10). La build = navigarea My Account nativă Woo (endpoint-uri) stilizată; logica = Woo. ========================================================================= */ .acct-nav{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; } .acct-nav__user{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5); border-bottom:1px solid var(--color-border); background:var(--color-tint); } .acct-nav__avatar{ width:44px; height:44px; flex:0 0 auto; border-radius:var(--radius-pill); background:var(--color-primary); color:var(--color-on-primary); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.15rem; } .acct-nav__who{ min-width:0; } .acct-nav__who .nw-hi{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-secondary); margin:0; } .acct-nav__who .nw-name{ font-family:var(--font-display); font-size:1.05rem; font-weight:var(--fw-regular); color:var(--color-text-primary); margin:2px 0 0; overflow-wrap:anywhere; } /* lista de tab-uri (desktop) / antete de acordeon (mobil) */ .acct-tablist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } /* „Acțiuni cont" (Favorite/Delogare) = listă de LINKURI, sub tablist; aspect identic cu tab-urile */ .acct-actionlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } /* tablist-ul nu mai ascunde border-bottom pe ultimul tab (urmează lista de acțiuni dedesubt) */ .acct-actionlist li:last-child .acct-tab{ border-bottom:0; } .acct-tab{ width:100%; display:flex; align-items:center; gap:var(--space-3); min-height:var(--touch-min); padding:var(--space-3) var(--space-5); background:transparent; border:0; cursor:pointer; text-align:left; font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--color-text-primary); text-decoration:none; border-left:3px solid transparent; border-bottom:1px solid var(--color-border); transition:background var(--transition), color var(--transition), border-color var(--transition); } .acct-tab .icon{ width:1.25em; height:1.25em; color:var(--color-text-secondary); flex:0 0 auto; transition:color var(--transition); } .acct-tab:hover{ background:var(--color-tint); } .acct-tab[aria-selected="true"]{ color:var(--color-primary-hover); border-left-color:var(--color-primary); background:var(--color-tint); } .acct-tab[aria-selected="true"] .icon{ color:var(--color-primary); } .acct-tab:focus-visible{ outline:2px solid var(--color-primary); outline-offset:-2px; } /* chevron de acordeon — ascuns pe desktop, vizibil pe mobil */ .acct-tab .acct-chev{ margin-left:auto; color:var(--color-text-secondary); transition:transform var(--transition); display:none; } .acct-tab .acct-chev .icon{ width:1.1em; height:1.1em; } /* link „Delogare" = ton danger discret (acțiune distinctă) */ .acct-tab.acct-tab--logout{ color:var(--color-danger); } .acct-tab.acct-tab--logout .icon{ color:var(--color-danger); } .acct-tab.acct-tab--logout:hover{ background:var(--color-danger-soft); } /* „Favorite" poartă un mic sufix de link extern (link spre /lista-de-dorinte/) */ .acct-tab .tab-extlink{ margin-left:auto; color:var(--color-text-secondary); } .acct-tab .tab-extlink .icon{ width:1em; height:1em; } /* ---- PANOURI DE CONȚINUT (tabpanel) ---- */ .acct-panels{ min-width:0; } .acct-panel{ display:none; } .acct-panel.is-active{ display:block; } .panel-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:var(--space-6); } .panel-card + .panel-card{ margin-top:var(--space-5); } .panel-title{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h3); line-height:var(--lh-heading); margin:0 0 var(--space-2); color:var(--color-text-primary); } .panel-lead{ color:var(--color-text-secondary); margin:0 0 var(--space-5); } .panel-head-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5); } .panel-head-row .panel-title, .panel-head-row .panel-lead{ margin:0; } /* ---- PANOU (dashboard) — salut + scurtături ---- */ .dash-hello{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%); color:var(--color-on-primary); border-radius:var(--radius-lg); } .dash-hello .dh-icon{ width:48px; height:48px; flex:0 0 auto; border-radius:var(--radius-pill); background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; } .dash-hello .dh-icon .icon{ width:1.5em; height:1.5em; color:#fff; } .dash-hello h3{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h3); margin:0; color:#fff; } .dash-hello p{ margin:2px 0 0; font-size:var(--fs-small); color:#ECEFE6; } /* grilă de scurtături */ .dash-shortcuts{ display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-top:var(--space-5); } @media (min-width:560px){ .dash-shortcuts{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1240px){ .dash-shortcuts{ grid-template-columns:repeat(3,1fr); } } .shortcut{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); text-decoration:none; color:var(--color-text-primary); transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .shortcut:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-3px); border-color:var(--color-primary); } .shortcut:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; } .shortcut .sc-icon{ width:40px; height:40px; border-radius:var(--radius-md); background:var(--color-tint); display:inline-flex; align-items:center; justify-content:center; } .shortcut .sc-icon .icon{ width:1.4em; height:1.4em; color:var(--color-primary); } .shortcut h3{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:1.1rem; margin:0; color:var(--color-text-primary); } .shortcut p{ margin:0; font-size:var(--fs-small); color:var(--color-text-secondary); } .shortcut .sc-go{ margin-top:auto; display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--color-primary); } .shortcut .sc-go .icon{ width:1em; height:1em; transition:transform var(--transition); } .shortcut:hover .sc-go .icon{ transform:translateX(2px); } @media (prefers-reduced-motion: reduce){ .shortcut:hover{ transform:none; } .shortcut:hover .sc-go .icon{ transform:none; } } /* ---- BADGE STATUS COMANDĂ ---- */ .ostatus{ display:inline-flex; align-items:center; gap:var(--space-1); font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:var(--radius-pill); padding:3px var(--space-3); } .ostatus .icon{ width:1em; height:1em; } .ostatus--done{ background:var(--color-success-soft); color:#3F6A3E; border:1px solid var(--color-success); } .ostatus--progress{ background:var(--color-info-soft); color:var(--color-info); border:1px solid var(--color-info); } .ostatus--pending{ background:var(--color-warning-soft); color:#8A6420; border:1px solid var(--color-warning); } .ostatus--cancelled{ background:var(--color-surface-alt); color:var(--color-text-secondary); border:1px solid var(--color-border); } /* ---- TABELUL DE COMENZI (desktop) → CARDURI STIVUITE (mobil) ---- La build = tabelul nativ Woo de comenzi din endpoint `orders`, stilizat. Aici machetăm structura. */ .orders-table{ width:100%; } /* fiecare comandă = un rând. Mobil: grilă bloc-card stivuit; desktop ≥768px: rând tabelar. */ .order-row{ display:grid; gap:var(--space-2) var(--space-4); padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); grid-template-columns:1fr auto; grid-template-areas: "num status" "date date" "total total" "acts acts"; align-items:center; } .order-row + .order-row{ margin-top:var(--space-4); } .or-num{ grid-area:num; font-family:var(--font-display); font-size:1.1rem; font-weight:var(--fw-regular); color:var(--color-text-primary); margin:0; } .or-num a{ color:inherit; text-decoration:none; } .or-num a:hover{ text-decoration:underline; color:var(--color-primary); } .or-status{ grid-area:status; justify-self:end; } .or-date{ grid-area:date; font-size:var(--fs-small); color:var(--color-text-secondary); margin:0; display:inline-flex; align-items:center; gap:var(--space-2); } .or-date .icon{ width:1em; height:1em; color:var(--color-text-secondary); } .or-total{ grid-area:total; font-family:var(--font-body); margin:0; } .or-total .ot-label{ font-size:var(--fs-small); color:var(--color-text-secondary); } .or-total .ot-amount{ font-size:1.05rem; font-weight:var(--fw-bold); color:var(--color-text-primary); } .or-total .ot-count{ font-size:var(--fs-small); color:var(--color-text-secondary); } .or-acts{ grid-area:acts; display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); } /* antet de coloane (doar desktop) + rând tabelar */ .orders-cols{ display:none; } @media (min-width:768px){ .orders-cols{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1.1fr 1.4fr; gap:var(--space-4); padding:var(--space-3) var(--space-5); background:var(--color-tint); border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:var(--space-3); font-family:var(--font-body); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:var(--fw-bold); color:var(--color-text-secondary); } .order-row{ grid-template-columns:1.1fr 1fr 1fr 1.1fr 1.4fr; grid-template-areas:"num date status total acts"; align-items:center; } .or-status{ justify-self:start; } .or-acts{ margin-top:0; justify-content:flex-end; } } /* ---- CARD ADRESĂ (facturare / livrare) ---- */ .addr-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); } @media (min-width:680px){ .addr-grid{ grid-template-columns:repeat(2,1fr); } } /* Fix S24 DEFECT-1: pe endpoint-ul edit-address, copiii .woocommerce-Address (.u-column1 col-1 / .u-column2 col-2) mostenesc float:left/right + width:~48% din regula de baza WooCommerce `.woocommerce .col2-set .col-1{float:left;width:48%}` (specificitate 0,3,0), ceea ce suprascrie plasarea in grid (carduri esalonate diagonal). Tintim exact `.col-1`/`.col-2` sub `.woocommerce .addr-grid >` (egal 0,3,0) + !important pe float/width, ca sa batem regula Woo indiferent de ordinea foilor de stil. Scope strict sub `.addr-grid` — nu afecteaza niciun alt col2-set Woo. Copiii devin width:auto si umplu cele doua track-uri (2 col >=680px, stivuit pe mobil). */ .woocommerce .addr-grid > .col-1, .woocommerce .addr-grid > .col-2{ float:none !important; width:auto !important; margin:0; clear:none; } /* Fix S25(c): pe empty-state (fara adrese salvate) containerul .addr-grid pastreaza clasa native Woo .col2-set, ale carei pseudo-elemente de clearfix (.woocommerce .col2-set::before/::after{content:" ";display:table}, specificitate 0,2,1) devin ITEMI-FANTOMA cand parintele e display:grid: ocupa celula 1 si celula 4, impingand cardul de facturare in celula 2 si pe cel de livrare in celula 3 (diagonala). Le neutralizam la ACEEASI specificitate ca Woo (.woocommerce .addr-grid, 0,2,1) + !important, ca sa batem regula Woo indiferent de ordinea foilor / de combinarea CSS LiteSpeed. Clearfix inutil pe un container grid, deci eliminarea e sigura: populat = cele 2 carduri reale umplu celulele 1+2 (side-by-side >=680px); mobil <680px = 1fr, stivuire normala. Niciun stil nu depinde de aceste pseudo-elemente. */ .woocommerce .addr-grid::before, .woocommerce .addr-grid::after{ content:none !important; } .addr-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); } .addr-card__head{ display:flex; align-items:center; gap:var(--space-2); } .addr-card__head .icon{ width:1.2em; height:1.2em; color:var(--color-primary); } .addr-card__head h3{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:1.15rem; margin:0; color:var(--color-text-primary); } .addr-lines{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; color:var(--color-text-primary); font-size:var(--fs-body); } .addr-lines .al-name{ font-weight:var(--fw-semibold); } .addr-lines li{ color:var(--color-text-secondary); overflow-wrap:anywhere; } .addr-lines li.al-name{ color:var(--color-text-primary); } .addr-card__foot{ margin-top:auto; } .addr-empty{ color:var(--color-text-secondary); font-size:var(--fs-small); } /* ---- FORMULARE (Date cont + Login + Înregistrare) — design-system §6.bis.4 ---- */ .form-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); } @media (min-width:680px){ .form-grid--2{ grid-template-columns:repeat(2,1fr); } } .field{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; } .field--full{ grid-column:1 / -1; } .field label{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--color-text-primary); } .field .req{ color:var(--color-danger); } .field input{ width:100%; min-height:var(--touch-min); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); font-family:var(--font-body); font-size:var(--fs-body); padding:var(--space-3) var(--space-4); color:var(--color-text-primary); transition:border-color var(--transition); } .field input:focus{ outline:2px solid var(--color-primary); outline-offset:1px; border-color:var(--color-primary); } .field .field-hint{ font-size:var(--fs-eyebrow); color:var(--color-text-secondary); } /* stare EROARE — demonstrată static (machetă) */ .field--error input{ border-color:var(--color-danger); } .field--error input:focus{ outline-color:var(--color-danger); } .field-error{ display:inline-flex; align-items:flex-start; gap:var(--space-1); font-size:var(--fs-small); color:var(--color-danger); } .field-error .icon{ width:1em; height:1em; color:var(--color-danger); flex:0 0 auto; margin-top:2px; } /* câmp parolă cu buton „arată/ascunde" (demonstrativ) */ .field-pass{ position:relative; } .field-pass input{ padding-right:calc(var(--touch-min) + var(--space-2)); } .pass-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:var(--touch-min); height:var(--touch-min); border:0; background:transparent; cursor:pointer; color:var(--color-text-secondary); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); } .pass-toggle:hover{ color:var(--color-primary); } .pass-toggle:focus-visible{ outline:2px solid var(--color-primary); outline-offset:-2px; } .pass-toggle .icon{ width:1.25em; height:1.25em; } /* checkbox „ține-mă minte" */ .check-row{ display:flex; align-items:center; gap:var(--space-3); min-height:var(--touch-min); } .check-row input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--color-primary); flex:0 0 auto; } .check-row label{ font-size:var(--fs-body); color:var(--color-text-primary); font-weight:var(--fw-regular); } .form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-5); } .form-link{ font-size:var(--fs-small); color:var(--color-primary); text-decoration:none; } .form-link:hover{ text-decoration:underline; } /* fieldset neutru (grupare câmpuri parolă) */ .field-fieldset{ border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); margin:0; } .field-fieldset legend{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--color-text-secondary); padding:0 var(--space-2); } /* ========================================================================= MOBIL <768px — NAV CONT devine ACORDEON single-open. Antetele de „tab" devin antete de acordeon; panoul activ apare SUB antetul lui. Pe desktop ≥768px panourile sunt randate într-o coloană separată (tab clasic). ========================================================================= */ @media (max-width:767px){ /* pe mobil, panourile sunt re-poziționate logic SUB nav (vizual: nav + panou activ stivuite) */ .acct-grid{ grid-template-columns:1fr; } /* arată chevron-ul de acordeon pe fiecare antet de tab */ .acct-tab .acct-chev{ display:inline-flex; } .acct-tab[aria-expanded="true"] .acct-chev{ transform:rotate(180deg); } /* pe mobil, când un tab e „expandat", panoul lui apare imediat sub el (mutat prin order/JS). Structural păstrăm tablist + panels separate; JS sincronizează vizibilitatea. Aici stilizăm panoul activ ca un bloc atașat sub nav. */ .acct-panels{ margin-top:var(--space-5); } .acct-tab[aria-selected="true"]{ border-left-color:var(--color-primary); } } /* ---- GRILĂ RECOMANDĂRI (card produs „favourite" — VERBATIM din cos-v1) ---- */ .cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--space-5); } @media (min-width:1140px){ .cards{ grid-template-columns:repeat(4,1fr); } } /* CARD PRODUS „favourite" (VERBATIM din cos-v1.html) */ .product-card{ background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); display:flex; flex-direction:column; border:1px solid var(--color-border); overflow:hidden; transition:box-shadow var(--transition), transform var(--transition); } .product-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-4px); } .product-card .pmedia{ --card-curve-h:135%; aspect-ratio:5/4; position:relative; display:flex; align-items:flex-end; padding:var(--space-3); } .product-card .pmedia .pmedia-frame{ position:absolute; inset:0; z-index:0; overflow:hidden; -webkit-mask:var(--card-curve); mask:var(--card-curve); } .product-card .pmedia .pmedia-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transform-origin:center; will-change:transform; transition:transform var(--tr-zoom); } .product-card:hover .pmedia-bg, .product-card:focus-within .pmedia-bg{ transform:scale(1.06); } .product-card.oos .pmedia-bg{ opacity:.72; } .fav-btn{ position:absolute; top:var(--space-3); right:var(--space-3); z-index:3; width:44px; height:44px; border:0; border-radius:var(--radius-pill); background:rgba(255,255,255,.9); color:var(--color-text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:background var(--transition), color var(--transition), transform var(--transition); } .fav-btn .icon{ width:1.1em; height:1.1em; } .fav-btn:hover{ background:#fff; color:var(--color-danger); transform:scale(1.08); } .fav-btn:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; } .fav-btn[aria-pressed="true"]{ color:var(--color-danger); } .fav-btn[aria-pressed="true"] .icon{ fill:var(--color-danger); stroke:var(--color-danger); } @media (prefers-reduced-motion: reduce){ .fav-btn:hover{ transform:none; } } .product-card .pbody{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; flex:1; text-align:center; align-items:center; } .product-card .eyebrow{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-secondary); margin-top:0; } .product-card .pname{ font-family:var(--font-display); font-size:1.12rem; font-weight:var(--fw-regular); line-height:1.3; margin:var(--space-1) 0 0; color:var(--color-text-primary); overflow-wrap:anywhere; } .pswatches{ display:inline-flex; align-items:center; gap:var(--space-1); margin:var(--space-2) 0 0; flex-wrap:wrap; justify-content:center; } .pswatches .ps-sw{ width:16px; height:16px; border-radius:var(--radius-swatch); box-shadow:var(--shadow-swatch); border:1px solid var(--color-border); } .pswatches .ps-more{ font-family:var(--font-body); font-size:.72rem; color:var(--color-text-secondary); font-weight:var(--fw-semibold); } .product-card .price{ font-family:var(--font-body); margin:var(--space-3) 0; display:flex; align-items:baseline; gap:var(--space-1) var(--space-2); flex-wrap:wrap; justify-content:center; } .product-card .price .from{ font-size:var(--fs-small); font-weight:var(--fw-regular); color:var(--color-text-secondary); } .product-card .price .now{ font-size:1.15rem; font-weight:var(--fw-bold); color:var(--color-text-primary); } .product-card .price .unit{ font-size:var(--fs-small); color:var(--color-text-secondary); } .product-card .price .old{ font-size:var(--fs-small); color:var(--color-text-secondary); text-decoration:line-through; } .product-card .cart-cta{ margin-top:auto; width:100%; } /* eticheta „stare alternativă" (numai în machetă — separator vizual de demonstrație; VERBATIM din cos-v1) */ .alt-state-label{ display:flex; align-items:center; gap:var(--space-3); margin:var(--space-8) 0 0; } .alt-state-label::before, .alt-state-label::after{ content:""; flex:1 1 auto; height:1px; background:var(--color-border); } .alt-state-label span{ font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.1em; background:var(--color-warning-soft); border:1px solid var(--color-warning); color:var(--color-warning); padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); } /* ---- LOGIN / ÎNREGISTRARE (stare neautentificat) — 2 carduri side-by-side pe desktop ---- */ .auth-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start; } @media (min-width:920px){ .auth-grid{ grid-template-columns:1fr 1fr; gap:var(--space-7); } } .auth-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:var(--space-7); } .auth-card--register{ background:var(--color-tint); } .auth-card h2{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h3); margin:0 0 var(--space-2); color:var(--color-text-primary); } .auth-card .auth-lead{ color:var(--color-text-secondary); margin:0 0 var(--space-5); font-size:var(--fs-small); } .auth-benefits{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); } .auth-benefits li{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--fs-small); color:var(--color-text-secondary); } .auth-benefits .icon{ width:1.1em; height:1.1em; color:var(--color-primary); flex:0 0 auto; margin-top:3px; } /* ==== FOOTER GLOBAL (din al doilea bloc