/* =====================================================================
   a4e-blog / base.css  (tokens + componente)
   Pornit de la output/P02/tokens-baza.css + componente-baza.css (P02, 2026-10-29).
   Directia M1 + M9 + M10. Contrastele AA sunt documentate in tokens-baza.css;
   --a4e-muted = #5B6870. Handle WordPress: a4e-blog-base.
   Se incarca doar pe articolele cu sablonul nou si pe arhivele de blog (P15).
   ===================================================================== */
/* FONTURI: Barlow 400/600 (text) + Barlow Condensed 700 (titluri), gazduite local, font-display:swap.
   Doua familii, decizia lui Ioan 2026-10-29. Fara @import Google. */

/* Optiunea A - Barlow + Barlow Condensed (look-ul din galerie). Nu e variabil. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Barlow-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/BarlowCondensed-700.woff2") format("woff2")}

:root{
  /* ------------------------------------------------------------------
     CULORI - brut (paleta)
     ------------------------------------------------------------------ */
  --a4e-cyan:        #00CCFF;   /* brand. Doar fill/linie/accent pe inchis. Niciodata text pe alb. */
  --a4e-cyan-ink:    #00718F;   /* cyan pentru text si linkuri pe fundal deschis */
  --a4e-cyan-wash:   #E7F4FA;   /* fundal pal pentru raspuns, tip, nota accent */
  --a4e-cyan-line:   #BFE2F1;   /* bordura pe cyan-wash */
  --a4e-cyan-glow:   rgba(0,204,255,.28);

  --a4e-ground:      #0A0C0E;   /* banda inchisa Volt (hero, antet tabel, verdict) */
  --a4e-surface-d:   #13181C;   /* card pe inchis */
  --a4e-surface-d2:  #1A2126;
  --a4e-line-d:      #242D33;

  --a4e-ink:         #0B0F12;   /* titluri */
  --a4e-ink-2:       #39464D;   /* text de corp */
  --a4e-muted:       #5B6870;   /* captions, meta (AA si pe surface-soft) */
  --a4e-paper:       #FFFFFF;
  --a4e-surface-soft:#F0F3F5;   /* randuri alternate, cuprins mobil */
  --a4e-line:        #DCE2E5;   /* borduri decorative */
  --a4e-line-strong: #7C8A91;   /* borduri de control (input, buton outline) - 3.56:1 */

  --a4e-on-dark:     #EDF1F2;
  --a4e-on-dark-2:   #BAC6CB;
  --a4e-on-dark-muted:#9AA7AD;

  --a4e-ok:          #157A55;   /* "In stock" */
  --a4e-ok-wash:     #E6F4EE;
  --a4e-warn-ink:    #7A4300;
  --a4e-warn-bg:     #FFF6DD;
  --a4e-warn-line:   #E8C766;
  --a4e-bad:         #B33A0B;   /* "Out of stock", pret redus */
  --a4e-bad-wash:    #FBEDE6;

  /* ------------------------------------------------------------------
     CULORI - semantice (componentele folosesc DOAR acestea)
     ------------------------------------------------------------------ */
  --a4e-bg-page:        var(--a4e-paper);
  --a4e-bg-band:        var(--a4e-ground);
  --a4e-bg-band-glow:   radial-gradient(60% 120% at 12% 0%, var(--a4e-cyan-glow), transparent 60%), var(--a4e-ground);
  --a4e-text:           var(--a4e-ink-2);
  --a4e-text-strong:    var(--a4e-ink);
  --a4e-text-muted:     var(--a4e-muted);
  --a4e-link:           var(--a4e-cyan-ink);
  --a4e-link-hover:     var(--a4e-ink);
  --a4e-accent:         var(--a4e-cyan);
  --a4e-border:         var(--a4e-line);
  --a4e-focus:          var(--a4e-cyan-ink);        /* pe deschis */
  --a4e-focus-on-dark:  var(--a4e-cyan);
  --a4e-btn-bg:         var(--a4e-cyan);            /* primar */
  --a4e-btn-text:       #00222D;
  --a4e-btn2-bg:        var(--a4e-ink);             /* secundar */
  --a4e-btn2-text:      #FFFFFF;
  --a4e-note-bg:        var(--a4e-surface-soft);
  --a4e-tip-bg:         var(--a4e-cyan-wash);
  --a4e-answer-bg:      var(--a4e-cyan-wash);
  --a4e-table-head-bg:  var(--a4e-ground);
  --a4e-table-head-text:#FFFFFF;
  --a4e-table-row-alt:  var(--a4e-surface-soft);

  /* ------------------------------------------------------------------
     SPATIERE (baza 4px)
     ------------------------------------------------------------------ */
  --a4e-s-1: 4px;  --a4e-s-2: 8px;  --a4e-s-3: 12px; --a4e-s-4: 16px;
  --a4e-s-5: 20px; --a4e-s-6: 24px; --a4e-s-7: 32px; --a4e-s-8: 40px;
  --a4e-s-9: 56px; --a4e-s-10: 72px;
  --a4e-gutter: 16px;                    /* 360 */
  --a4e-gutter-md: 24px;                 /* >=768 */
  --a4e-gutter-lg: 40px;                 /* >=1024 */
  --a4e-prose-max: 68ch;                 /* latimea coloanei de text */
  --a4e-container: 1240px;               /* latimea maxima a articolului */
  --a4e-col-toc: 220px;
  --a4e-col-rail: 280px;
  --a4e-header-h: 131px;                 /* inaltimea header-ului Elementor 9339 fix (P01: ~131 mobil, ~163 desktop); 0.1.1 */
  --a4e-sticky-top: var(--a4e-header-h); /* sub header-ul lipicios; single.js o inlocuieste cu inaltimea masurata */
  --a4e-chat-clear: 84px;                /* spatiu liber pentru bulina de chat/WhatsApp (dreapta jos); pozitia exacta de confirmat in P01 */

  /* ------------------------------------------------------------------
     TIPOGRAFIE (scala de referinta, mobil -> desktop cu clamp)
     Familiile se schimba doar prin data-a4e-font (mai jos).
     ------------------------------------------------------------------ */
  --a4e-font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --a4e-font-display: "Barlow Condensed", "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --a4e-display-weight: 700;
  --a4e-display-tracking: .005em;
  --a4e-display-transform: none;
  --a4e-display-lh: 1.05;
  --a4e-body-weight-strong: 600;

  --a4e-fs-xs:   12.5px;   /* meta, captions, badge */
  --a4e-fs-sm:   14px;     /* tabele, carduri, UI */
  --a4e-fs-base: 17px;     /* corp (>=768: 18px) */
  --a4e-fs-lead: clamp(18px, 1.2vw + 14px, 21px);
  --a4e-fs-h3:   clamp(20px, 1vw + 16px, 24px);
  --a4e-fs-h2:   clamp(26px, 1.6vw + 20px, 34px);
  --a4e-fs-h1:   clamp(32px, 3vw + 18px, 54px);
  --a4e-lh-body: 1.65;
  --a4e-lh-tight: 1.15;

  /* ------------------------------------------------------------------
     RAZE, UMBRE, MOTION
     Carduri egale, o singura umbra de "ridicare" (pentru elementul
     memorabil: imaginea hero) si una pentru bara jos. Restul = bordura.
     ------------------------------------------------------------------ */
  --a4e-r-sm: 6px;      /* butoane mici, tabele, carduri (M1) */
  --a4e-r-md: 10px;     /* note, raspuns, FAQ */
  --a4e-r-lg: 14px;     /* produs, bara jos */
  --a4e-r-pill: 999px;
  --a4e-shadow-lift: 0 20px 40px -20px rgba(0,0,0,.5);
  --a4e-shadow-bar:  0 8px 24px rgba(0,0,0,.3);
  --a4e-ring: 0 0 0 3px rgba(0,113,143,.35);           /* focus ring pe deschis */
  --a4e-ring-on-dark: 0 0 0 3px rgba(0,204,255,.45);
  --a4e-glow-active: -6px 0 14px -6px rgba(0,204,255,.9); /* sectiunea curenta din cuprins */

  --a4e-ease: cubic-bezier(.2,.7,.2,1);
  --a4e-t-fast: .15s;
  --a4e-t-base: .25s;

  /* ------------------------------------------------------------------
     BREAKPOINT-URI
     Variabilele CSS nu merg in @media; valorile de mai jos sunt
     documentare, @media foloseste numerele direct.
       360   latimea minima de proiectare (test si la 320 si 412, zoom 1.3)
       768   doua coloane: text + coloana dreapta (decizia: 760-1179)
       1024  grila de carduri pe 3 coloane, hero lat
       1180  trei coloane: cuprins 220 | text | rail 280 (din decizia P13)
       1440  latimea maxima a containerului, nu se mai largeste
     Diferenta fata de decizie: "760" din decizie devine 768 (valoare
     standard); 1180 ramane prag special pentru layout-ul cu 3 coloane.
     ------------------------------------------------------------------ */
  --a4e-bp-sm: 360px;
  --a4e-bp-md: 768px;
  --a4e-bp-lg: 1024px;
  --a4e-bp-rail: 1180px;
  --a4e-bp-xl: 1440px;
}

@media (min-width: 768px){
  :root{ --a4e-fs-base: 18px; }
}
@media (prefers-reduced-motion: reduce){
  :root{ --a4e-t-fast: 0s; --a4e-t-base: 0s; }
}

/* =====================================================================
   all4ebikes.co.uk blog redesign - componente-baza.css       (P02)
   Implementare de REFERINTA pentru CONTRACT-MARKUP.md. Depinde de
   tokens-baza.css. Nu contine culori sau marimi in clar, doar --a4e-*.
   P14 o preia in assets/a4e-blog.css si o poate rafina; contractul de
   markup (nume de clase, structura) ramane stabil.
   Reguli: fara eyebrow majuscule, fara numerotare decorativa, fara
   sageti pe butoane, umbra doar pe hero image si pe bara jos.
   ===================================================================== */

.a4e-article, .a4e-article *, .a4e-article *::before, .a4e-article *::after{box-sizing:border-box}
.a4e-article{
  font-family:var(--a4e-font-body);
  font-size:var(--a4e-fs-base);
  line-height:var(--a4e-lh-body);
  color:var(--a4e-text);
  background:var(--a4e-bg-page);
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}
.a4e-article :focus-visible{outline:2px solid var(--a4e-focus);outline-offset:2px;box-shadow:var(--a4e-ring);border-radius:2px}
.a4e-hero :focus-visible, .a4e-verdict :focus-visible, .a4e-mbar :focus-visible, .a4e-table thead :focus-visible{outline-color:var(--a4e-focus-on-dark);box-shadow:var(--a4e-ring-on-dark)}
.a4e-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------
   HERO (template) - banda inchisa Volt, scurta; imaginea urca peste margine
   --------------------------------------------------------------------- */
.a4e-hero{background:var(--a4e-bg-band-glow);color:var(--a4e-on-dark);padding:var(--a4e-s-6) 0 88px}
.a4e-hero__in{padding:0 var(--a4e-gutter)}
.a4e-hero__in, .a4e-layout, .a4e-hero__img{max-width:var(--a4e-container);margin-left:auto;margin-right:auto}
.a4e-crumb{font-size:var(--a4e-fs-xs);color:var(--a4e-on-dark-muted);margin:0}
.a4e-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.a4e-crumb li+li::before{content:"/";margin-right:8px;color:var(--a4e-line-d)}
.a4e-crumb a{color:var(--a4e-on-dark-2);text-decoration:none}
.a4e-crumb a:hover{color:#fff;text-decoration:underline}
.a4e-hero h1{font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:var(--a4e-fs-h1);line-height:var(--a4e-display-lh);letter-spacing:var(--a4e-display-tracking);text-transform:var(--a4e-display-transform);color:#fff;margin:var(--a4e-s-3) 0 var(--a4e-s-4);max-width:24ch;text-wrap:balance}
.a4e-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--a4e-fs-sm);color:var(--a4e-on-dark-2);margin:0;padding:0;list-style:none}
.a4e-meta b, .a4e-meta strong{color:#fff;font-weight:var(--a4e-body-weight-strong)}
.a4e-hero__img{margin-top:-70px;margin-bottom:0;padding:0 var(--a4e-gutter);position:relative}
.a4e-hero__img img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:var(--a4e-r-sm);box-shadow:var(--a4e-shadow-lift);background:var(--a4e-surface-d)}
@media (min-width:768px){
  .a4e-hero{padding:var(--a4e-s-7) 0 110px}
  .a4e-hero__in{padding:0 var(--a4e-gutter-md)}
  .a4e-hero__img{margin-top:-90px;padding:0 var(--a4e-gutter-md)}
}
@media (min-width:1024px){
  .a4e-hero{padding:var(--a4e-s-7) 0 120px}
  .a4e-hero__in{padding:0 var(--a4e-gutter-lg)}
  .a4e-hero__img{margin-top:-96px;padding:0 var(--a4e-gutter-lg)}
}

@media (min-width:1024px){ :root{--a4e-header-h:163px} }

/* ---------------------------------------------------------------------
   LAYOUT: <768 o coloana | 768-1179 text + coloana dreapta | >=1180 3 coloane
   --------------------------------------------------------------------- */
.a4e-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a4e-s-6);padding:var(--a4e-s-6) var(--a4e-gutter) var(--a4e-s-9)}
.a4e-side{display:contents}
.a4e-main{min-width:0}
@media (min-width:768px){
  .a4e-layout{grid-template-columns:minmax(0,1fr) 260px;gap:var(--a4e-s-8);padding:var(--a4e-s-7) var(--a4e-gutter-md) var(--a4e-s-9)}
  .a4e-main{grid-column:1;grid-row:1}
  .a4e-side{display:flex;flex-direction:column;gap:var(--a4e-s-5);grid-column:2;grid-row:1;position:sticky;top:var(--a4e-sticky-top);align-self:start;max-height:calc(100vh - var(--a4e-sticky-top) - var(--a4e-s-4));overflow:auto}
  .a4e-rail{order:1}
  .a4e-toc{order:2}
}
@media (min-width:1180px){
  .a4e-layout{grid-template-columns:var(--a4e-col-toc) minmax(0,1fr) var(--a4e-col-rail);gap:var(--a4e-s-8) 48px;padding:var(--a4e-s-8) var(--a4e-gutter-lg) var(--a4e-s-10)}
  .a4e-side{display:contents}
  .a4e-toc{grid-column:1;grid-row:1;position:sticky;top:var(--a4e-sticky-top);align-self:start}
  .a4e-main{grid-column:2}
  .a4e-rail{grid-column:3;grid-row:1;position:sticky;top:var(--a4e-sticky-top);align-self:start}
}
/* fara rail (articol fara produse): doua coloane, textul ramane centrat */
.a4e-layout--no-rail .a4e-rail{display:none}
@media (min-width:1180px){ .a4e-layout--no-rail{grid-template-columns:var(--a4e-col-toc) minmax(0,1fr)} }

/* ---------------------------------------------------------------------
   CUPRINS (template; generat din H2). <details open>; JS il inchide pe mobil.
   --------------------------------------------------------------------- */
.a4e-toc{font-size:var(--a4e-fs-sm);border:1px solid var(--a4e-border);border-radius:var(--a4e-r-sm);background:var(--a4e-surface-soft);padding:var(--a4e-s-3) var(--a4e-s-4)}
.a4e-toc summary{font-weight:var(--a4e-body-weight-strong);color:var(--a4e-text-strong);cursor:pointer;min-height:24px}
.a4e-toc ol{margin:var(--a4e-s-2) 0 0;padding-left:20px}
.a4e-toc li{margin:0 0 4px}
.a4e-toc a{color:var(--a4e-text);text-decoration:none}
.a4e-toc a:hover{color:var(--a4e-link);text-decoration:underline}
.a4e-toc a[aria-current="true"]{color:var(--a4e-text-strong);font-weight:var(--a4e-body-weight-strong)}
@media (min-width:768px){
  .a4e-toc{background:none;border:0;padding:0}
  .a4e-toc summary{cursor:default;pointer-events:none;list-style:none;margin-bottom:var(--a4e-s-2)}
  .a4e-toc summary::-webkit-details-marker{display:none}
  .a4e-toc ol{list-style:none;margin:0;padding:0}
  .a4e-toc li{margin:0}
  .a4e-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--a4e-border);line-height:1.3;transition:color var(--a4e-t-base),border-color var(--a4e-t-base),box-shadow var(--a4e-t-base)}
  .a4e-toc a[aria-current="true"]{border-left-color:var(--a4e-cyan);box-shadow:var(--a4e-glow-active)}
}

/* ---------------------------------------------------------------------
   ANSWER (template, din post meta _a4e_short_answer)
   --------------------------------------------------------------------- */
.a4e-answer{background:var(--a4e-answer-bg);border:1px solid var(--a4e-cyan-line);border-radius:var(--a4e-r-md);padding:var(--a4e-s-4) var(--a4e-s-5);margin:0 0 var(--a4e-s-6)}
.a4e-answer__label{margin:0 0 4px;font-weight:700;font-size:var(--a4e-fs-sm);color:var(--a4e-link)}
.a4e-answer__text{margin:0;color:var(--a4e-text-strong);font-size:var(--a4e-fs-lead);line-height:1.5;max-width:none}

/* ---------------------------------------------------------------------
   PROSE (post_content)
   --------------------------------------------------------------------- */
.a4e-prose{min-width:0}
.a4e-prose>*{max-width:var(--a4e-prose-max)}
.a4e-prose>.a4e-table, .a4e-prose>.a4e-grid, .a4e-prose>.a4e-fig, .a4e-prose>.a4e-stats, .a4e-prose>.a4e-verdict, .a4e-prose>.a4e-cta, .a4e-prose>.a4e-product, .a4e-prose>.a4e-products{max-width:none}
.a4e-prose p{margin:0 0 var(--a4e-s-4)}
.a4e-prose a{color:var(--a4e-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.a4e-prose a:hover{color:var(--a4e-link-hover);text-decoration-thickness:2px}
.a4e-prose strong{color:var(--a4e-text-strong);font-weight:var(--a4e-body-weight-strong)}
.a4e-prose h2, .a4e-prose h3{font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);letter-spacing:var(--a4e-display-tracking);text-transform:var(--a4e-display-transform);color:var(--a4e-text-strong);line-height:var(--a4e-lh-tight);text-wrap:balance;position:relative}
.a4e-prose h2{font-size:var(--a4e-fs-h2);margin:var(--a4e-s-8) 0 var(--a4e-s-3);scroll-margin-top:calc(var(--a4e-sticky-top) + var(--a4e-s-3));padding-right:36px}
.a4e-prose h3{font-size:var(--a4e-fs-h3);margin:var(--a4e-s-6) 0 var(--a4e-s-2);scroll-margin-top:calc(var(--a4e-sticky-top) + var(--a4e-s-3))}
.a4e-prose>h2:first-child{margin-top:0}
.a4e-prose ul, .a4e-prose ol{margin:0 0 var(--a4e-s-4);padding-left:1.3em}
.a4e-prose li{margin-bottom:6px}
.a4e-prose li::marker{color:var(--a4e-cyan-ink)}
.a4e-anchor{position:absolute;right:0;top:50%;transform:translateY(-50%);min-width:32px;min-height:32px;border:1px solid var(--a4e-border);background:var(--a4e-paper);border-radius:var(--a4e-r-sm);font:600 14px/1 var(--a4e-font-body);color:var(--a4e-text-muted);cursor:pointer;opacity:.8}
.a4e-anchor:hover, .a4e-anchor:focus-visible{opacity:1;color:var(--a4e-link)}
.a4e-anchor[data-copied="true"]{color:var(--a4e-ok);border-color:var(--a4e-ok)}
@media (min-width:1024px){ .a4e-prose h2{padding-right:0} .a4e-anchor{right:auto;left:-40px} }
@media (min-width:1180px){ .a4e-anchor{opacity:0} .a4e-prose h2:hover .a4e-anchor, .a4e-anchor:focus-visible{opacity:1} }

/* a4e-lead: paragraf de deschidere */
.a4e-lead{font-size:var(--a4e-fs-lead);line-height:1.55;color:var(--a4e-text-strong)}

/* a4e-note / a4e-tip / a4e-warn */
.a4e-note, .a4e-tip, .a4e-warn{border-radius:var(--a4e-r-md);padding:var(--a4e-s-3) var(--a4e-s-4);margin:var(--a4e-s-4) 0 var(--a4e-s-5);font-size:var(--a4e-fs-sm);line-height:1.65}
.a4e-note>:last-child, .a4e-tip>:last-child, .a4e-warn>:last-child{margin-bottom:0}
.a4e-note{background:var(--a4e-note-bg);border:1px solid var(--a4e-border)}
.a4e-note--accent, .a4e-tip{background:var(--a4e-tip-bg);border:1px solid var(--a4e-cyan-line);border-left:3px solid var(--a4e-cyan)}
.a4e-note--accent strong, .a4e-tip strong{color:var(--a4e-text-strong)}
.a4e-warn{background:var(--a4e-warn-bg);border:1px solid var(--a4e-warn-line);border-left:3px solid var(--a4e-warn-ink);color:var(--a4e-text)}
.a4e-warn strong{color:var(--a4e-warn-ink)}

/* a4e-steps */
.a4e-steps{list-style:none;counter-reset:a4e-step;margin:var(--a4e-s-4) 0 var(--a4e-s-5);padding:0;display:grid;gap:var(--a4e-s-3)}
.a4e-steps>li{counter-increment:a4e-step;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--a4e-s-4);align-items:start;margin:0;padding:var(--a4e-s-4);border:1px solid var(--a4e-border);border-radius:var(--a4e-r-md);background:var(--a4e-paper)}
.a4e-steps>li::before{content:counter(a4e-step);width:32px;height:32px;border-radius:50%;background:var(--a4e-ground);color:var(--a4e-cyan);font:700 15px/32px var(--a4e-font-body);text-align:center;margin-top:1px}
.a4e-steps__title{margin:0 0 2px;font-weight:var(--a4e-body-weight-strong);color:var(--a4e-text-strong)}
.a4e-steps>li p{margin:0 0 6px;font-size:var(--a4e-fs-sm)}
.a4e-steps>li>div>:last-child{margin-bottom:0}

/* a4e-checklist */
.a4e-checklist{border:1px solid var(--a4e-border);border-radius:var(--a4e-r-md);padding:var(--a4e-s-4);margin:var(--a4e-s-4) 0 var(--a4e-s-5);background:var(--a4e-paper)}
.a4e-checklist__title{margin:0 0 var(--a4e-s-2);font-weight:700;color:var(--a4e-text-strong);font-size:var(--a4e-fs-sm)}
.a4e-checklist ul{list-style:none;margin:0;padding:0}
.a4e-checklist li{position:relative;margin:0;padding:8px 0 8px 26px;border-bottom:1px solid var(--a4e-border);font-size:var(--a4e-fs-sm)}
.a4e-checklist li:last-child{border-bottom:0}
.a4e-checklist li::before{content:"";position:absolute;left:2px;top:13px;width:11px;height:6px;border-left:2px solid var(--a4e-cyan-ink);border-bottom:2px solid var(--a4e-cyan-ink);transform:rotate(-45deg)}

/* a4e-table / a4e-compare */
.a4e-table{margin:var(--a4e-s-4) 0 var(--a4e-s-6);overflow-x:auto;border:1px solid var(--a4e-border);border-radius:var(--a4e-r-sm);-webkit-overflow-scrolling:touch}
.a4e-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--a4e-fs-sm);line-height:1.5}
.a4e-table th{background:var(--a4e-table-head-bg);color:var(--a4e-table-head-text);text-align:left;font-weight:var(--a4e-body-weight-strong);padding:10px 12px;white-space:nowrap}
.a4e-table td, .a4e-table tbody th{padding:10px 12px;border-bottom:1px solid var(--a4e-border);vertical-align:top;text-align:left;background:none;color:var(--a4e-text);font-weight:400;white-space:normal}
.a4e-table tbody tr:nth-child(even) td, .a4e-table tbody tr:nth-child(even) th{background:var(--a4e-table-row-alt)}
.a4e-table td:first-child, .a4e-table tbody th{font-weight:var(--a4e-body-weight-strong);color:var(--a4e-text-strong)}
.a4e-table tr.is-hl td, .a4e-table tr.is-hl th{background:var(--a4e-cyan-wash);color:var(--a4e-text-strong)}
.a4e-table--compare td:first-child, .a4e-table--compare th:first-child{position:sticky;left:0;z-index:1;background:var(--a4e-paper);box-shadow:1px 0 0 var(--a4e-border)}
.a4e-table--compare thead th:first-child{background:var(--a4e-table-head-bg)}
.a4e-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--a4e-r-pill);background:var(--a4e-cyan);color:var(--a4e-btn-text);font-size:var(--a4e-fs-xs);font-weight:700;vertical-align:middle;white-space:nowrap}

/* a4e-grid */
.a4e-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a4e-s-3);margin:var(--a4e-s-4) 0 var(--a4e-s-5)}
.a4e-grid>*{margin:0}
@media (min-width:600px){ .a4e-grid--2, .a4e-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .a4e-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* a4e-specs (dl) */
.a4e-specs{margin:var(--a4e-s-2) 0 0;padding:0}
.a4e-specs>div{display:flex;justify-content:space-between;gap:var(--a4e-s-4);padding:8px 0;border-bottom:1px solid var(--a4e-border);font-size:var(--a4e-fs-sm)}
.a4e-specs>div:last-child{border-bottom:0}
.a4e-specs dt{color:var(--a4e-text-muted)}
.a4e-specs dd{margin:0;font-weight:700;color:var(--a4e-text-strong);text-align:right}

/* a4e-pick / a4e-scenario (carduri editoriale) */
.a4e-pick, .a4e-scenario{border:1px solid var(--a4e-border);border-top:3px solid var(--a4e-cyan);border-radius:var(--a4e-r-sm);padding:var(--a4e-s-4);margin:var(--a4e-s-4) 0;background:var(--a4e-paper)}
.a4e-pick__title, .a4e-scenario__title{margin:0;font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:var(--a4e-fs-h3);letter-spacing:var(--a4e-display-tracking);text-transform:var(--a4e-display-transform);color:var(--a4e-text-strong);line-height:var(--a4e-lh-tight)}
.a4e-pick__tag, .a4e-scenario__sub{margin:2px 0 var(--a4e-s-2);font-size:var(--a4e-fs-sm);color:var(--a4e-link);font-weight:var(--a4e-body-weight-strong)}
.a4e-scenario__sub{color:var(--a4e-text-muted);font-weight:400}
.a4e-pick__price{display:inline-block;margin:0 0 var(--a4e-s-3);padding:3px 12px;border-radius:var(--a4e-r-pill);background:var(--a4e-cyan-wash);border:1px solid var(--a4e-cyan-line);color:var(--a4e-text-strong);font-weight:700;font-size:var(--a4e-fs-sm);font-variant-numeric:tabular-nums}
.a4e-scenario__result{margin:var(--a4e-s-3) 0 0;font-size:var(--a4e-fs-sm);color:var(--a4e-text-muted)}
.a4e-scenario__result strong{display:block;font-family:var(--a4e-font-display);font-size:var(--a4e-fs-h3);font-weight:var(--a4e-display-weight);color:var(--a4e-link);line-height:1.1}

/* a4e-stats (banda inchisa de cifre) */
.a4e-stats{list-style:none;margin:var(--a4e-s-6) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:var(--a4e-ground);border-radius:var(--a4e-r-sm);overflow:hidden}
@media (min-width:600px){.a4e-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.a4e-stats li{margin:0;padding:var(--a4e-s-4);text-align:center;border:1px solid var(--a4e-line-d);margin:-.5px}
.a4e-stats strong{display:block;font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:var(--a4e-fs-h3);color:var(--a4e-cyan);line-height:1.1}
.a4e-stats span{display:block;margin-top:4px;font-size:var(--a4e-fs-xs);color:var(--a4e-on-dark-2)}

/* a4e-verdict */
.a4e-verdict{background:var(--a4e-ground);color:var(--a4e-on-dark-2);border-radius:var(--a4e-r-sm);border-top:3px solid var(--a4e-cyan);padding:var(--a4e-s-6) var(--a4e-s-5);margin:var(--a4e-s-7) 0}
.a4e-verdict__label{margin:0 0 6px;font-size:var(--a4e-fs-sm);font-weight:700;color:var(--a4e-cyan)}
.a4e-verdict__title{margin:0 0 var(--a4e-s-3);font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:var(--a4e-fs-h3);letter-spacing:var(--a4e-display-tracking);text-transform:var(--a4e-display-transform);color:#fff;line-height:var(--a4e-lh-tight)}
.a4e-verdict p.a4e-verdict__title{font-size:var(--a4e-fs-h3);color:#fff}
.a4e-verdict p{color:var(--a4e-on-dark-2);font-size:var(--a4e-fs-sm)}
.a4e-verdict strong{color:#fff}
.a4e-verdict ul{list-style:none;margin:var(--a4e-s-3) 0 0;padding:0}
.a4e-verdict li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid var(--a4e-line-d);font-size:var(--a4e-fs-sm);margin:0}
.a4e-verdict li:last-child{border-bottom:0}
.a4e-verdict li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--a4e-cyan)}
.a4e-verdict a{color:var(--a4e-cyan)}

/* butoane + a4e-cta */
.a4e-actions{display:flex;flex-wrap:wrap;gap:var(--a4e-s-3);margin:var(--a4e-s-5) 0}
.a4e-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;border-radius:7px;background:var(--a4e-btn-bg);color:var(--a4e-btn-text)!important;font:700 15px/1.2 var(--a4e-font-body);text-decoration:none!important;border:1.5px solid var(--a4e-btn-bg);text-align:center;transition:box-shadow var(--a4e-t-fast),background var(--a4e-t-fast)}
.a4e-btn:hover{box-shadow:0 10px 24px -12px rgba(0,204,255,.8)}
.a4e-btn--secondary{background:var(--a4e-paper);color:var(--a4e-text-strong)!important;border-color:var(--a4e-line-strong)}
.a4e-btn--secondary:hover{background:var(--a4e-surface-soft);box-shadow:none}
.a4e-btn--ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.a4e-btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
.a4e-cta{background:var(--a4e-bg-band-glow);color:var(--a4e-on-dark-2);border-radius:var(--a4e-r-sm);padding:var(--a4e-s-7) var(--a4e-s-5);margin:var(--a4e-s-8) 0 var(--a4e-s-6);text-align:center}
.a4e-cta__title{margin:0 0 var(--a4e-s-2);font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:var(--a4e-fs-h3);letter-spacing:var(--a4e-display-tracking);text-transform:var(--a4e-display-transform);color:#fff;line-height:var(--a4e-lh-tight)}
.a4e-cta p.a4e-cta__title{font-size:var(--a4e-fs-h3);color:#fff;max-width:none}
.a4e-cta p{max-width:52ch;margin-left:auto;margin-right:auto;font-size:var(--a4e-fs-sm)}
.a4e-cta .a4e-actions{justify-content:center}

/* a4e-fig */
.a4e-fig{margin:var(--a4e-s-6) 0}
.a4e-fig img{display:block;width:100%;height:auto;border-radius:var(--a4e-r-sm)}
.a4e-fig figcaption{margin-top:var(--a4e-s-2);font-size:var(--a4e-fs-xs);line-height:1.5;color:var(--a4e-text-muted);max-width:var(--a4e-prose-max)}

/* a4e-faq (M10: raspunsul primul, ancora pe fiecare intrebare) */
.a4e-faq{background:var(--a4e-surface-soft);border-radius:var(--a4e-r-lg);padding:var(--a4e-s-2) var(--a4e-s-4) var(--a4e-s-4);margin:var(--a4e-s-8) 0 var(--a4e-s-6)}
.a4e-faq>h2{margin-top:var(--a4e-s-4)}
.a4e-faq__item{border-bottom:1px solid var(--a4e-border);scroll-margin-top:calc(var(--a4e-sticky-top) + var(--a4e-s-3))}
.a4e-faq__item:last-child{border-bottom:0}
.a4e-faq__item summary{display:flex;justify-content:space-between;gap:var(--a4e-s-4);align-items:center;list-style:none;cursor:pointer;padding:14px 2px;min-height:44px;font-weight:700;color:var(--a4e-text-strong);font-size:var(--a4e-fs-base)}
.a4e-faq__item summary::-webkit-details-marker{display:none}
.a4e-faq__item summary::after{content:"+";flex:none;font:400 24px/1 var(--a4e-font-body);color:var(--a4e-link)}
.a4e-faq__item[open] summary::after{content:"\2212"}
.a4e-faq__item:target{background:var(--a4e-cyan-wash);border-radius:var(--a4e-r-sm)}
.a4e-faq__a{padding:0 2px 16px;font-size:var(--a4e-fs-base);max-width:var(--a4e-prose-max)}
.a4e-faq__a>:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------
   M9 - produse: cardul din shortcode (inline pe mobil, in rail pe desktop)
   --------------------------------------------------------------------- */
.a4e-product{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--a4e-s-3);align-items:center;border:1px solid var(--a4e-border);border-radius:var(--a4e-r-lg);padding:var(--a4e-s-3);background:var(--a4e-paper);margin:0}
.a4e-product__media{display:block}
.a4e-product__media img{display:block;width:76px;height:76px;object-fit:contain;border-radius:var(--a4e-r-sm);background:var(--a4e-paper)}
.a4e-product__name{margin:0;font-weight:700;font-size:15px;line-height:1.3;color:var(--a4e-text-strong)}
.a4e-product__name a{color:inherit;text-decoration:none}
.a4e-product__name a:hover{text-decoration:underline}
.a4e-product__why{margin:2px 0 0;font-size:var(--a4e-fs-xs);line-height:1.4;color:var(--a4e-text-muted)}
.a4e-product__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:4px 0 0;font-size:var(--a4e-fs-sm)}
.a4e-product__price{font-weight:800;color:var(--a4e-text-strong);font-variant-numeric:tabular-nums}
.a4e-product__price del{font-weight:400;color:var(--a4e-text-muted);margin-right:6px}
.a4e-product__price ins{text-decoration:none;color:var(--a4e-bad)}
.a4e-stock{font-size:var(--a4e-fs-xs);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.a4e-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.a4e-stock--in{color:var(--a4e-ok)}
.a4e-stock--back{color:var(--a4e-warn-ink)}
.a4e-stock--out{color:var(--a4e-bad)}
.a4e-product .a4e-btn{grid-column:1 / -1;min-height:40px;padding:8px 14px;font-size:14px;justify-self:start;margin-top:2px}
.a4e-product--oos .a4e-product__media img{opacity:.55}
.a4e-product--inline{margin:var(--a4e-s-5) 0}
.a4e-product--inline::before{content:attr(data-label);grid-column:1/-1;font-size:var(--a4e-fs-xs);color:var(--a4e-text-muted)}
.a4e-products{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a4e-s-3);margin:var(--a4e-s-5) 0}
@media (min-width:600px){ .a4e-products{grid-template-columns:repeat(2,minmax(0,1fr))} }

.a4e-rail{display:none}
.a4e-rail__title{margin:0 0 var(--a4e-s-3);font-weight:700;font-size:var(--a4e-fs-sm);color:var(--a4e-text-strong)}
.a4e-rail__group{display:grid;gap:var(--a4e-s-3);margin-bottom:var(--a4e-s-4)}
.a4e-js .a4e-rail__group{display:none}
.a4e-js .a4e-rail__group.is-active{display:grid}
@media (min-width:768px){
  .a4e-rail{display:block}
  .a4e-product--inline{display:none}
}

/* bara jos pe mobil: in stanga bulinei de chat */
.a4e-mbar{position:fixed;left:12px;right:var(--a4e-chat-clear);bottom:12px;z-index:20;display:flex;align-items:center;gap:10px;background:var(--a4e-ink);color:#fff;border-radius:var(--a4e-r-lg);padding:10px 12px;box-shadow:var(--a4e-shadow-bar);font-size:13px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--a4e-t-base),transform var(--a4e-t-base);visibility:hidden}
.a4e-mbar.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.a4e-mbar img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:var(--a4e-r-sm);flex:none}
.a4e-mbar__name{display:block;font-weight:700;line-height:1.2;color:#fff;text-decoration:none;min-width:0}
.a4e-mbar__price{margin-left:auto;font-weight:800;color:var(--a4e-cyan);white-space:nowrap}
.a4e-mbar__close{flex:none;min-width:32px;min-height:32px;background:none;border:0;color:var(--a4e-on-dark-muted);font-size:20px;line-height:1;cursor:pointer}
@media (min-width:768px){ .a4e-mbar{display:none} }

/* ---------------------------------------------------------------------
   Autor + citeste mai departe (template)
   --------------------------------------------------------------------- */
.a4e-author{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--a4e-s-4);align-items:center;background:var(--a4e-ground);color:var(--a4e-on-dark-2);border-radius:var(--a4e-r-sm);padding:var(--a4e-s-5);margin-top:var(--a4e-s-8)}
.a4e-author__avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--a4e-cyan),#00566E);display:grid;place-items:center;color:#fff;font:700 20px/1 var(--a4e-font-display);font-style:normal}
.a4e-author__name{display:block;color:#fff;font-weight:700}
.a4e-author p{margin:2px 0 0;font-size:var(--a4e-fs-sm)}
.a4e-related{margin-top:var(--a4e-s-8)}
.a4e-related__title{margin:0 0 var(--a4e-s-4);font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:var(--a4e-fs-h3);color:var(--a4e-text-strong);text-transform:var(--a4e-display-transform)}
.a4e-related__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a4e-s-4)}
@media (min-width:768px){ .a4e-related__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.a4e-card{display:grid;grid-template-rows:auto 1fr;background:var(--a4e-paper);border:1px solid var(--a4e-border);border-radius:var(--a4e-r-sm);overflow:hidden;text-decoration:none;color:inherit}
.a4e-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.a4e-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.a4e-card__cat{font-size:var(--a4e-fs-xs);font-weight:600;color:var(--a4e-link)}
.a4e-card__title{margin:0;font-family:var(--a4e-font-display);font-weight:var(--a4e-display-weight);font-size:20px;line-height:1.15;color:var(--a4e-text-strong);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a4e-card__meta{margin-top:auto;font-size:var(--a4e-fs-xs);color:var(--a4e-text-muted)}
.a4e-card:hover .a4e-card__title{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .a4e-article *{transition:none!important;scroll-behavior:auto!important}
}