/* ======================================================================
   ReGadget — foaie de stil unică
   Paletă portocalie · colțuri 16px · butoane pill · font Roboto
   ====================================================================== */

/* ===== VARIABILE ===== */
:root {
    --primary: #16a34a;
    --primary-d: #15803d;
    --primary-l: #dcfce7;
    --ink: #0f172a;
    --slate: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #f8fafc;
    --white: #ffffff;
    /* accente folosite de badge-uri, stări comandă, alerte */
    --green: #16a34a;
    --green-d: #15803d;
    --green-l: #dcfce7;
    --amber: #f59e0b;
    --red: #ef4444;
    --red-d: #991b1b;
    --blue: #2563eb;
    --radius: 16px;
    --radius-sm: 10px;
    --pill: 60px;
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-h: 0 12px 32px rgba(15, 23, 42, 0.12);
    --wrap: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.main { min-height: 50vh; }
.muted { color: var(--muted); }

/* ===== BANDA DE ANUNȚ (sus, deasupra header-ului) ===== */
.topbar { background: var(--primary); color: #fff; font-size: 13.5px; }
.topbar-in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; position: relative; }
.topbar a { color: #fff; text-align: center; }
.topbar a:hover { text-decoration: underline; }
.topbar b { font-weight: 800; letter-spacing: 0.3px; }
.topbar-x {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: #fff; opacity: 0.75;
    font-size: 14px; line-height: 1; padding: 6px 8px; cursor: pointer;
}
.topbar-x:hover { opacity: 1; }
body.topbar-off .topbar { display: none; }

/* ===== BANNER DE PAGINĂ (catalog) ===== */
.page-banner {
    background: linear-gradient(115deg, #0f172a 0%, #14352a 55%, #16a34a 130%);
    color: #fff;
    border-radius: var(--radius);
    padding: 34px 38px;
    margin: 4px 0 26px;
}
.pb-copy h2 { font-size: 34px; font-weight: 800; line-height: 1.12; letter-spacing: -0.8px; margin: 0; }
.pb-copy h2 em { font-style: normal; color: var(--primary); }
.pb-usps { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 22px; }
.pb-usps > div { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #e2e8f0; }
.pb-usps svg {
    width: 21px; height: 21px; flex: none; fill: none;
    stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ===== HEADER / BARA DE SUS ===== */
.site-header {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.92);
}
.header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.logo {
    font-family: 'Roboto Condensed', 'Arial Narrow', Roboto, Arial, sans-serif;
    font-size: 27px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.6px;
    line-height: 1;
    text-shadow: 1.5px 1.5px 0 rgba(147, 197, 253, 0.55);   /* umbra albăstruie din desen */
}
.logo span { color: var(--primary); }
.logo-foot { text-shadow: none; }
.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}
/* bara de căutare din meniu */
.nav-search {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 3px 3px 3px 14px;
    transition: border-color 0.15s;
}
.nav-search:focus-within { border-color: var(--primary); background: #fff; }
.nav-search input {
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 14px;
    width: 140px;
    padding: 6px 6px 6px 0;
}
.nav-search button {
    border: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.nav-search button:hover { background: var(--primary-d); }
.nav-search svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.nav-links a {
    text-decoration: none;
    color: var(--slate);
    font-weight: 500;
    font-size: 15px;
    transition: 0.15s;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a.active { color: var(--primary); font-weight: 700; }
.nav-links .btn-small {
    background: var(--primary);
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 9px;
    font-weight: 600;
    position: relative;
}
.nav-links .btn-small:hover { background: var(--primary-d); }
/* linkuri cu pictogramă (Favorite, Cont) */
.nav-links .hact { display: inline-flex; align-items: center; gap: 5px; }
/* linkuri cu pictogramă conturată (Reduceri, Despre Noi, Magazine, Franciza) */
.nav-item { display: inline-flex; align-items: center; gap: 8px; }
/* „Reduceri" iese în evidență: verde peste tot, inclusiv în meniul de telefon
   (care folosește tot .nav-links). !important pentru că .nav-links a.active o repictează. */
.nav-links a.nav-reduceri {
    color: var(--primary) !important;
    font-weight: 600;
}
.nav-links a.nav-reduceri:hover { color: var(--primary-d) !important; }
.nav-ico {
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;   /* preia culoarea linkului: gri, portocaliu la activ/hover */
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== MENIU "CATEGORII" (mega-meniu cu poze + subcategorii) ===== */
.has-drop { position: relative; }
.drop-btn { cursor: pointer; white-space: nowrap; }
.drop {
    position: absolute;
    top: calc(100% + 14px);
    left: -14px;
    width: 660px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-h);
    padding: 16px;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 18px;
    z-index: 200;
    max-height: min(72vh, 640px);
    overflow-y: auto;
}
/* punte invizibilă, ca meniul să nu se închidă când muți mouse-ul spre el */
.has-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.has-drop:hover .drop,
.has-drop:focus-within .drop { display: grid; }
.drop-cat { break-inside: avoid; }
.drop-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    color: var(--ink);
}
.drop-cat-row:hover { background: var(--primary-l); }
.drop-cat-row b { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.drop-thumb {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bg);
    display: grid;
    place-items: center;
    font-size: 20px;
}
.drop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sub-caret { display: none; }               /* pe desktop subcategoriile sunt mereu vizibile */
.drop-subs { display: flex; flex-direction: column; padding: 0 0 8px 52px; }
.drop-subs a { padding: 3px 0; font-size: 12.5px; color: var(--muted); }
.drop-subs a:hover { color: var(--primary); }
.drop-sub-all { color: var(--primary) !important; font-weight: 600; margin-top: 2px; }
.drop-all {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding: 12px 8px 2px;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}
/* Coșul din bara de sus + linkul mic de franciză (doar pe mobil) */
.franchise-mini { display: none; }

/* pastilă cu număr (favorite) */
.n-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: var(--pill);
    background: var(--primary-l);
    color: var(--primary-d);
    font-size: 11px;
    font-weight: 800;
}
/* pastila cu numărul de produse din coș */
.cart-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, 0.28);
    font-size: 12px;
    font-weight: 800;
}
/* buton hamburger — apare doar pe telefon */
.nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--ink);
    border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--bg); }

/* ===== MESAJE (flash) ===== */
.flash {
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    margin: 18px 0;
    font-weight: 600;
    font-size: 15px;
}
.flash-ok { background: var(--green-l); color: var(--green-d); border: 1px solid #86efac; }
.flash-err { background: #fee2e2; color: var(--red-d); border: 1px solid #fca5a5; }
.flash-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ===== BUTOANE ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    /* raza moderată, nu pastilă: la 60px butoanele arătau umflate, mai ales pe ecrane mici */
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: 0.2s;
    cursor: pointer;
    font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.25); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #1e293b; border-color: #1e293b; }
.btn-amber { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn-amber:hover { filter: brightness(.94); }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-sm { padding: 8px 15px; font-size: 14px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== HERO (deschis: crem -> portocaliu, cu colaj de produse) ===== */
.hero {
    background:
        radial-gradient(820px 460px at 82% 24%, rgba(22, 163, 74, 0.22), transparent 62%),
        linear-gradient(115deg, #fbfffc 0%, #e6f7ec 46%, #a7e8bd 100%);
    color: var(--ink);
    padding: 72px 0 110px;  /* spațiu în plus jos: bara de avantaje urcă peste el */
    position: relative;
    overflow: hidden;
}
.hero-in {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero h1 {
    font-size: 60px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -2px;
    margin: 0 0 18px;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero-desc { font-size: 19px; color: var(--slate); max-width: 460px; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* link "Vezi locațiile noastre" cu pin */
.hero-loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
}
.hero-loc:hover { text-decoration: underline; }
.hero-loc svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* colaj de produse "plutitoare" (decupaje fără fundal) */
.hero-collage { position: relative; height: 470px; }
.hero-collage img {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 22px 26px rgba(6, 78, 40, 0.26));
    transform: rotate(var(--r, 0deg));
    animation: heroFloat 7s ease-in-out infinite;
}
.hero-collage img:nth-child(2n) { animation-delay: -2.4s; }
.hero-collage img:nth-child(3n) { animation-delay: -4.6s; }
@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-collage img { animation: none; }
}

/* ===== BARA DE AVANTAJE (bandă închisă, peste marginea hero-ului) ===== */
.usp-strip {
    position: relative;
    z-index: 5;
    margin-top: -52px;      /* urcă bara peste hero */
}
.usp-bar {
    display: flex;
    background: #1c1c1e;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}
.usp {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 24px;
    position: relative;
    color: #fff;
    min-width: 0;
}
/* linia despărțitoare dintre elemente */
.usp + .usp::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}
.usp svg {
    width: 23px;
    height: 23px;
    flex: none;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.usp b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.usp span {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    color: #a1a1aa;
    margin-top: 2px;
}
/* segmentul portocaliu de la capăt */
.usp-hl { background: var(--primary); }
.usp-hl svg { stroke: #fff; }
.usp-hl span { color: #ffe4cc; }
.usp-hl::before { background: rgba(255, 255, 255, 0.32) !important; }

/* ===== BANDA "VERIFICAT ȘI GARANTAT" (gradient portocaliu deschis) ===== */
.trust-band {
    background: linear-gradient(115deg, #f2fbf5 0%, #a9e8c0 55%, #6fd396 100%);
    padding: 72px 0;
}
.trust-in {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
}
.trust-copy h2 {
    font-size: 38px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}
.trust-copy h2 em { font-style: normal; color: #fff; }
.trust-copy p {
    font-size: 17px;
    color: var(--slate);
    margin: 0 0 28px;
    max-width: 420px;
}
.trust-cards { display: grid; gap: 16px; }
.trust-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    padding: 18px 24px;
}
.tc-ico {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
}
.tc-ico svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.trust-card b { display: block; font-size: 16px; color: var(--ink); }
.trust-card span:not(.tc-ico) { display: block; font-size: 13.5px; color: #40624e; margin-top: 2px; }

/* ===== AVANTAJE, varianta carduri (Despre noi, Întrebări, Oferte) ===== */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--white);
    padding: 20px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.feature .fi { font-size: 28px; flex-shrink: 0; }
.feature b { display: block; font-size: 16px; margin-bottom: 2px; }
.feature span { color: var(--muted); font-size: 14px; }

/* ===== SECȚIUNI ===== */
.section { padding: 48px 0; }
.section-alt {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.section-head h2 { font-size: 26px; margin: 0; }
/* titlu de secțiune cu miniatura categoriei în stânga */
.sec-title { display: flex; align-items: center; gap: 12px; }
/* Același tratament ca miniaturile din meniul de categorii (.drop-thumb): fără ramă, colț rotunjit
   în aceeași proporție, fundal identic. Rama de 1px era singura diferență, dar lângă un titlu de
   26px o făcea să arate ca o poză băgată într-un cadru, nu ca o iconiță.
   Fișierele din assets/img/categories/ sunt deja pătrate (320×320), deci `cover` nu taie nimic —
   albul din jurul obiectului e în imagine. De aceea decuparea se face aici, cu o mărire mică:
   `--sec-zoom` e singurul număr de schimbat dacă vrei obiectul mai mare sau mai mic în cutie. */
.sec-thumb {
    --sec-zoom: 1.14;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    display: grid;
    place-items: center;
    font-size: 20px;
}
.sec-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--sec-zoom)); }
.sec-thumb.sec-thumb-ico { --sec-zoom: 1; }   /* emoji-ul de rezervă nu se mărește */
.section-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.link { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 15px; }
.link:hover { text-decoration: underline; }

/* ===== CATEGORII: bandă compactă cu miniaturi (prima pagină) ===== */
.cat-section { padding: 34px 0 6px; }
.cat-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;           /* pe ecrane înguste banda se derulează lateral */
    padding: 4px 2px 14px;
    scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 18px 10px 10px;
    min-width: 150px;
    box-shadow: var(--shadow);
    transition: 0.2s;
}
.cat-chip:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-h);
}
.cat-chip-img {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    display: grid;
    place-items: center;
}
.cat-chip-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-chip-ico { font-size: 24px; }
.cat-chip b { font-size: 13.5px; font-weight: 700; line-height: 1.25; max-width: 120px; }

/* ===== CATEGORII, varianta grilă (păstrată pt. alte pagini) ===== */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-tile {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    transition: 0.2s;
    box-shadow: var(--shadow);
}
.cat-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-h);
    border-color: var(--primary);
}
.cat-ico {
    font-size: 36px;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: var(--primary-l);
    display: grid;
    place-items: center;
}
.cat-tile b { display: block; font-size: 16px; }
.cat-tile span { font-size: 13px; color: var(--muted); }

/* ===== PRODUSE ===== */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prod-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.prod-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.25s;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--ink);
    position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-h); }
.card-imgwrap {
    position: relative;
    background: var(--white);
    aspect-ratio: 4/3;
    overflow: hidden;
    padding: 14px;
}
.card-imgwrap img { width: 100%; height: 100%; object-fit: contain; transition: 0.3s; }
.card:hover .card-imgwrap img { transform: scale(1.04); }
.card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 40px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.grade-a { background: #dcfce7; color: #15803d; }
.grade-b { background: #dbeafe; color: #1e40af; }
.grade-c { background: #fef3c7; color: #92400e; }
.badge-off { background: var(--red); color: #fff; }

.card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    /* ESENȚIAL: fără asta moștenește 1.6 de pe body și fiecare rând crește cu ~5px,
       iar chenarul cardului iese mult mai alungit decât în referință. */
    line-height: 1.35;
    border-top: 1px solid var(--line);
}
.card-cat {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    margin: 0;
}
.card-title:hover { color: var(--primary); }
/* starea produsului: bulină colorată + text */
.card-cond {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
}
.cond-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cond-a { color: var(--green); }
.cond-b { color: var(--amber); }
.cond-c { color: var(--blue); }
/* rândurile cu garanție / livrare */
.card-rows { display: grid; gap: 6px; }
.card-rows > div {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 12px, ca în referință: la 205px lățime de card „Livrare 1-2 zile lucrătoare"
       trebuie să încapă pe UN rând, altfel chenarul crește cu ~18px */
    font-size: 12px;
    color: var(--slate);
}
.card-rows svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card-price { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.price-now { font-size: 22px; font-weight: 800; color: var(--ink); }
.price-old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
/* rata lunară orientativă */
.card-rate { font-size: 13px; font-weight: 700; color: var(--primary); margin-top: -2px; }
/* magazinul unde se află produsul */
.card-store {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
}
.card-store svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}
.card-cta { margin-top: auto; padding: 11px 16px; font-size: 14.5px; }
.card-foot { display: flex; gap: 8px; margin-top: 10px; }
.card-foot .btn { flex: 1; padding: 10px 14px; font-size: 14px; }
.stock-warn { color: var(--amber) !important; font-weight: 600; }
.stock-warn.out { color: var(--red) !important; }   /* produs vândut */

/* ===== BUTON FAVORITE (inimă pe card / pagina produs) ===== */
.fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: var(--muted);
    transition: 0.18s;
}
.fav-btn:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.08); }
.fav-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* varianta lată, pe pagina de produs */
.fav-btn.wide {
    position: static;
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    color: var(--ink);
    border: 2px solid var(--line);
}
.fav-btn.wide:hover { transform: none; }

/* ===== BANNER PROMO (prima pagină) ===== */
.promo-banner {
    background: linear-gradient(120deg, #0f172a, #16a34a);
    color: #fff;
    border-radius: var(--radius);
    padding: 44px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.promo-banner h2 { font-size: 28px; margin: 0 0 8px; }
.promo-banner p { color: #fde68a; margin: 0; max-width: 560px; }

/* ===== LOCAȚII ===== */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loc-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: 0.2s;
}
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); border-color: var(--primary); }
.loc-city { font-size: 20px; font-weight: 800; margin-bottom: 2px; }
.loc-name { font-size: 13px; color: var(--primary); font-weight: 600; margin-bottom: 14px; }
.loc-rows { display: grid; gap: 9px; font-size: 14px; color: var(--slate); margin-bottom: 18px; }
.loc-rows div { display: flex; gap: 10px; align-items: flex-start; }
.loc-rows i { font-style: normal; width: 20px; flex: none; text-align: center; }
.loc-card .btn { margin-top: auto; }

/* ===== FIR ARIADNA ===== */
.crumb { font-size: 13px; color: var(--muted); padding: 18px 0; }
.crumb a:hover { color: var(--primary); }

/* ===== CATALOG (listă produse + filtre) ===== */
.catalog {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    padding: 8px 0 56px;
}
/* Bara de filtre are derulare PROPRIE, independentă de produse: rămâne fixată sub antet
   (sticky top 90px) și, când filtrele sunt mai înalte decât ecranul, se derulează pe ea însăși
   în loc să tragă toată pagina. Astfel produsele stau pe loc cât umbli prin filtre, și invers.
   Butonul „Arată" (sticky bottom) rămâne lipit jos în panou cât derulezi filtrele. */
.sidebar {
    align-self: start;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 90px - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;            /* derularea la capăt nu trece la pagină */
    padding-right: 6px;                       /* loc pentru bara de derulare, să nu taie textul */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
/* ---- filtre: fiecare grup e propriul card ---- */
.filters-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.filters-top b { font-size: 16px; flex: 1; }
.filters-top .link { font-size: 13px; }
.filters-close {
    display: none;
    border: 0; background: transparent; font-size: 18px; line-height: 1;
    padding: 4px 6px; cursor: pointer; color: var(--muted);
}
.fgroup {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.fgroup-head {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    background: transparent; border: 0;
    padding: 12px 14px;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
    cursor: pointer;
}
.fgroup-head:hover { color: var(--primary); }
.fgroup-head .caret { font-size: 13px; color: var(--muted); transition: transform 0.2s; }
.fgroup:not(.open) .fgroup-head .caret { transform: rotate(180deg); }
.fgroup-body { display: none; padding: 0 8px 10px; }
.fgroup.open .fgroup-body { display: block; }
/* grupurile lungi se derulează, cu bară vizibilă (ca în referință) */
.fgroup-search {
    width: 100%;
    box-sizing: border-box;
    margin: 2px 0 8px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13.5px;
    outline: none;
}
.fgroup-search:focus { border-color: var(--primary); }
.fscroll { max-height: 216px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.fscroll::-webkit-scrollbar { width: 8px; }
.fscroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.fscroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }

/* opțiune de filtru — acum <label> cu un radio invizibil (bifezi mai multe, aplici odată) */
.fopt {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px; border-radius: 8px;
    font-size: 13.5px; color: var(--slate);
    position: relative; cursor: pointer;
}
/* radio-ul e ascuns vizual, dar rămâne focusabil pentru tastatură/cititoare de ecran */
.fopt input[type=radio] {
    position: absolute; width: 1px; height: 1px; margin: 0;
    opacity: 0; pointer-events: none;
}
.fopt:hover { background: var(--bg); }
.fopt.is-empty { opacity: 0.45; cursor: default; }
.fopt.is-empty:hover { background: transparent; }
/* focus vizibil pe opțiune când radio-ul e navigat din tastatură */
.fopt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.fbox {
    width: 16px; height: 16px; flex: none;
    border: 1.5px solid #cbd5e1; border-radius: 4px; position: relative;
}
/* starea „selectat" vine din radio-ul bifat, ca bifarea live (JS) să mute evidențierea singură */
.fopt:has(input:checked) { color: var(--primary-d); font-weight: 700; }
.fopt:has(input:checked) .fbox { background: var(--primary); border-color: var(--primary); }
.fopt:has(input:checked) .fbox::after {
    content: ''; position: absolute; left: 4.5px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* miniatura categoriei */
.fthumb {
    width: 26px; height: 26px; flex: none;
    border-radius: 6px; overflow: hidden; background: var(--bg);
}
.fthumb img { width: 100%; height: 100%; object-fit: cover; }
.flabel { flex: 1; min-width: 0; }
.fcount { font-size: 12px; color: var(--muted); }
.fopt:has(input:checked) .fcount { color: var(--primary); }

/* Rezervă fără :has(): pe browsere fără :has() (și fără JS) bifarea unui radio n-ar da
   NICIUN semn vizual. Cum <input> precede toți frații din <label>, combinatorul „~"
   (suportat peste tot) reproduce evidențierea pe casetă, etichetă și număr. Doar culoarea
   label-ului în sine rămâne pe seama regulilor :has() de mai sus, în browserele care-l au. */
.fopt input:checked ~ .fbox { background: var(--primary); border-color: var(--primary); }
.fopt input:checked ~ .fbox::after {
    content: ''; position: absolute; left: 4.5px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fopt input:checked ~ .flabel { color: var(--primary-d); font-weight: 700; }
.fopt input:checked ~ .fcount { color: var(--primary); }

/* ---- filtrul de preț: câmpuri + slider dublu ---- */
.price-form { padding: 4px 6px 2px; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input {
    width: 100%; min-width: 0;
    padding: 8px 10px; font: inherit; font-size: 13.5px;
    border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.price-inputs input:focus { border-color: var(--primary); }
.price-inputs span { color: var(--muted); }
.price-slider { position: relative; height: 30px; margin: 12px 4px 0; }
.ps-track {
    position: absolute; left: 0; right: 0; top: 13px; height: 4px;
    background: var(--line); border-radius: 2px;
}
.ps-fill { position: absolute; height: 100%; background: var(--primary); border-radius: 2px; }
.price-slider input[type=range] {
    position: absolute; left: 0; width: 100%; top: 0; height: 30px;
    margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.price-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3); cursor: pointer;
}
.price-slider input[type=range]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3); cursor: pointer;
}
.price-hint { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.price-go { padding: 8px 14px; font-size: 13px; }

/* butonul „Arată N produse": aplică toate filtrele bifate odată. Lipicios jos, ca să fie mereu
   la îndemână — pe desktop stă în josul ecranului cât derulezi sidebar-ul, pe mobil în josul
   sertarului de filtre. Fundal + linie sus ca să nu se lipească de conținutul de deasupra. */
.filtre-apply {
    position: sticky; bottom: 0; z-index: 5;
    margin-top: 14px;
    padding-top: 15px; padding-bottom: 15px;
    box-shadow: 0 -10px 14px -8px rgba(15, 23, 42, 0.18);
}
/* semn discret cât se numără produsele, nedeblocant */
.filtre-apply.se-incarca { opacity: 0.7; }
/* Pe desktop cu JS, filtrele se aplică instant → butonul „Arată" e redundant, îl ascundem.
   Fără JS (fără .rg-js) rămâne vizibil, ca singura cale de aplicare. În modul sertar
   (≤1024px) e readus mai jos, în media query. */
.rg-js .filtre-apply { display: none; }

/* pastilele cu filtrele active, deasupra rezultatelor */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--primary-l);
    color: var(--primary-d);
    border-radius: var(--pill);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
}
.fchip span { font-size: 12px; opacity: 0.75; }
.fchip:hover { background: var(--primary); color: #fff; }

/* unelte deasupra rezultatelor */
.catalog-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 26px; }
.catalog-count { font-size: 14px; font-weight: 400; color: var(--muted); }
.catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters-open { display: none; align-items: center; gap: 7px; }
.filters-open svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round;
}
.filters-backdrop { display: none; }

.catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.catalog-head h1 { font-size: 26px; margin: 0; }
.sortbar { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.sortbar select {
    /* Fără appearance:none, iOS desenează selectul cu textul și săgeata albastre, de sistem —
       pe telefon ieșea complet altfel decât restul barei. Săgeata o punem noi, ca fundal. */
    -webkit-appearance: none;
    appearance: none;
    padding: 9px 34px 9px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px;
    cursor: pointer;
    max-width: 100%;
}
.sortbar select:focus { outline: none; border-color: var(--primary); }

/* ===== PAGINARE ===== */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.pager a, .pager span {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-weight: 600;
    font-size: 14px;
    color: var(--slate);
}
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager .cur { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager .gap { border-color: transparent; background: transparent; color: var(--muted); }
.pager .off { color: #cbd5e1; background: var(--white); }
.pager-count { text-align: center; color: var(--muted); font-size: 14px; margin: 12px 0 0; }

/* secțiunea "Produse similare căutării tale" */
.similar-section { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.similar-section .section-head { margin-bottom: 20px; }
.similar-section .section-head h2 { font-size: 22px; }

/* ===== PAGINĂ PRODUS ===== */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 8px 0 56px; }
/* La second-hand clientul cumpără EXEMPLARUL din poză, nu modelul. „cover" umplea cadrul
   tăind marginile, deci nu se vedea tot aparatul și se ascundeau exact urmele de folosire
   pentru care omul se uită la poze. „contain" arată poza întreagă, cu spațiu alb în jur. */
.gallery-main {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow);
    padding: 14px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
/* Banda de miniaturi trebuie să DERULEZE, nu să curgă în afara coloanei. Un produs cu 16 poze
   cere 16 × 88px ≈ 1400px, într-o coloană de ~630px: fără regulile de mai jos, restul benzii
   trecea peste textul din coloana de alături. Lupa avea deja tratamentul ăsta (.lupa-thumbs);
   galeria din pagină îl pierduse. Bara de derulare rămâne VIZIBILĂ aici, spre deosebire de
   lupă: acolo se trage cu degetul, aici, pe desktop, e singurul semn că mai sunt poze. */
.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* derularea la capăt nu mai trage pagina înapoi */
    padding-bottom: 8px;              /* loc pentru bară, ca să nu taie rama miniaturilor */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.gallery-thumbs::-webkit-scrollbar { height: 8px; }
.gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.gallery-thumbs::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.gallery-thumbs img {
    width: 78px;
    height: 78px;
    /* Fără asta, flex-ul ar încerca să le înghesuie pe toate în lățimea disponibilă. */
    flex: 0 0 auto;
    object-fit: contain;
    background: var(--white);
    padding: 4px;
    border: 2px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: .15s;
}
.gallery-thumbs img:hover { border-color: var(--primary-l); }
.gallery-thumbs img.active { border-color: var(--primary); }
.pdp-info h1 { font-size: 28px; }
.pdp-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; }
.pdp-price .now { font-size: 34px; font-weight: 800; }
.pdp-price .old { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.pdp-price .save {
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--pill);
}
.pdp-buy { display: flex; gap: 12px; align-items: center; margin: 22px 0; flex-wrap: wrap; }
.qty { display: flex; border: 2px solid var(--line); border-radius: var(--pill); overflow: hidden; }
.qty button { border: 0; background: #fff; width: 44px; font-size: 18px; cursor: pointer; font-family: inherit; }
.qty button:hover { background: var(--primary-l); color: var(--primary-d); }
.qty input {
    width: 54px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
}
.pdp-usp {
    list-style: none;
    padding: 18px;
    margin: 20px 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 10px;
}
.pdp-usp li { display: flex; gap: 10px; font-size: 14px; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-table td:first-child { color: var(--muted); width: 45%; }
.prose { font-size: 15px; color: var(--slate); }
.tabs { margin-top: 44px; }
.tab-head { display: flex; gap: 6px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tab-head button {
    border: 0;
    background: transparent;
    padding: 13px 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    color: var(--muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
}
.tab-head button.active { color: var(--primary); border-color: var(--primary); }
.tab-panel { padding: 24px 0; display: none; }

/* Pe telefon, „Descriere / Specificații / Garanție & Retur" se rupeau în două rânduri, iar
   linia de sub fila activă ajungea deasupra celei de-a treia file — arăta ca două meniuri
   diferite. Rămân pe UN rând: se strâng padding-ul și corpul literei, iar dacă tot nu încap
   (ecran foarte îngust sau literă mărită din setările telefonului) rândul derulează cu degetul
   în loc să se rupă. Bara de derulare e ascunsă doar aici, unde oricum se trage cu degetul. */
@media (max-width: 640px) {
    .tab-head {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .tab-head::-webkit-scrollbar { display: none; }
    .tab-head button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 11px;
        font-size: 14px;
    }
}
@media (max-width: 380px) {
    .tab-head button { padding: 12px 8px; font-size: 13.5px; }
}
.tab-panel.active { display: block; }

/* ===== COȘ ===== */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    padding: 8px 0 56px;
    align-items: start;
}
.cart-row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 18px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.cart-row img { width: 100px; height: 78px; object-fit: contain; background: var(--white); border-radius: 12px; }
.cart-row .rm { color: var(--red); font-size: 13px; font-weight: 600; }
.cart-row .rm:hover { text-decoration: underline; }
.summary {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 90px;
    box-shadow: var(--shadow);
}
.summary h3 { font-size: 18px; }
.sum-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 15px; }
.sum-row.total {
    border-top: 2px solid var(--line);
    margin-top: 8px;
    padding-top: 14px;
    font-size: 20px;
    font-weight: 800;
}
.empty { text-align: center; padding: 70px 20px; }
.empty .big { font-size: 56px; }

/* ===== CHECKOUT PE PAȘI =====
   Bara de progres e un <ol> semantic (vezi includes/checkout/bara.php): pașii încheiați sunt
   linkuri, cel curent poartă aria-current="step", cei viitori sunt <span>. Zero JavaScript.
   Nicio regulă de mai jos nu modifică ceva existent — parțialele refolosesc .form-card, .field,
   .grid-2, .pay-opt, .summary exact cum sunt, ca pașii să arate ca restul site-ului. */
.pasi {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-wrap: wrap;
}
.pas {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
}
.pas a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.pas a:hover .pas-eticheta { text-decoration: underline; }
.pas-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex: none;
    border: 2px solid var(--line);
    background: var(--white);
    color: var(--muted);
}
.pas.gata  { color: var(--green-d); }
.pas.gata .pas-nr { border-color: var(--green); background: var(--green-l); color: var(--green-d); }
.pas.acum  { color: var(--ink); }
.pas.acum .pas-nr { border-color: var(--primary); background: var(--primary); color: var(--white); }
.pas.viitor { color: var(--muted); font-weight: 500; }
/* liniuța dintre pași — pe <li>-urile care urmează altuia, nu pe primul */
.pas + .pas::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--line);
    margin: 0 2px;
    flex: none;
}
.pas.gata + .pas::before { background: var(--green); }

/* Rezumatul din pasul de confirmare: titlu + „Modifică" pe același rând. */
.rezumat-cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.rezumat-cap h3 { margin: 0; }

/* Bara lipită de jos, doar pe telefon: totalul și butonul rămân la vedere oricât derulează omul.
   Pragul e ACELAȘI 1024px la care .cart-layout devine o coloană — sub el, sumarul din aside
   ajunge sub formular și totalul ar dispărea din ochi. */
.sumar-bara { display: none; }
@media (max-width: 1024px) {
    .doar-lat { display: none; }   /* butonul din aside — îl preia bara lipită */
    .sumar-bara {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: var(--white);
        border-top: 1px solid var(--line);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
    }
    .sumar-bara-total b { font-size: 17px; margin-left: 6px; }
    /* loc sub pagină, ca bara să nu acopere ultimul câmp sau butonul de plasare.
       DOAR pe layout-ul cu bară (.cu-bara) — coșul folosește același .cart-layout și n-are bară,
       deci nu are de ce să primească 68px de spațiu mort la capăt. */
    .cart-layout.cu-bara { padding-bottom: 68px; }
}
@media (max-width: 560px) {
    /* pe ecrane înguste, etichetele pașilor neactivi dispar — rămân bulinele; cel curent își
       păstrează numele, ca omul să știe mereu unde e */
    .pas:not(.acum) .pas-eticheta { display: none; }
    .pas + .pas::before { width: 14px; }
}
@media (max-width: 1024px) {
    /* Sub 16px, iOS mărește TOATĂ pagina când atingi un câmp — iar omul care completează nouă
       câmpuri cu adresa e mărit și micșorat de nouă ori. Stilul global al site-ului e 15px;
       aici, pe drumul prin care intră banii, câmpurile trec la 16px doar pe telefon, unde
       diferența de un pixel nu se vede dar săritura de zoom da. */
    #checkout-form input,
    #checkout-form select,
    #checkout-form textarea { font-size: 16px; }
}

/* ===== FORMULARE ===== */
.form-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.auth-wrap { max-width: 460px; margin: 44px auto; }

/* Criteriile de parolă, bifate live de JS (clasa .ok). Fără JS rămân o listă de cerințe. */
.pw-reguli { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.pw-reguli li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted); transition: color .15s;
}
.pw-reguli li::before {
    content: '○'; font-size: 13px; line-height: 1; color: var(--line);
    flex: none; transition: color .15s, content .15s;
}
.pw-reguli li.ok { color: var(--primary-d); }
.pw-reguli li.ok::before { content: '✓'; color: var(--primary); font-weight: 700; }
.pay-opts { display: flex; flex-direction: column; gap: 10px; }
.pay-opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 15px;
    cursor: pointer;
    transition: .15s;
}
.pay-opt.sel, .pay-opt:hover { border-color: var(--primary); background: var(--primary-l); }
.pay-opt input { margin-top: 3px; }
.pay-opt b { display: block; }
.pay-opt span { font-size: 13px; color: var(--muted); }

/* ===== PAGINI INFO / FAQ ===== */
.page { padding: 32px 0 56px; max-width: 860px; }
.page h1 { font-size: 32px; }
.page h2 { font-size: 22px; margin-top: 30px; }
.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.faq-item b { font-size: 16px; }

/* ===== CARUSEL PRODUSE: săgeți + cardul final (doar pe mobil) ===== */
.row-nav { display: none; gap: 8px; flex: none; }
.card-more { display: none; }

/* ===== BANDA "PLATĂ ÎN RATE" (fundal negru cu caroiaj) ===== */
.rate-band {
    background:
        radial-gradient(700px 420px at 78% 45%, rgba(22, 163, 74, 0.16), transparent 65%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
        #0b0b0d;
    color: #fff;
    padding: 72px 0;
    overflow: hidden;
}
.rate-in {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}
.rate-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(22, 163, 74, 0.65);
    border-radius: var(--pill);
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 22px;
}
.rate-tag svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}
.rate-band h2 {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 16px;
}
.rate-band h2 em { font-style: normal; color: var(--primary); }
.rate-desc { font-size: 17px; color: #cbd5e1; max-width: 560px; margin: 0 0 24px; }
/* chip-urile albe cu finanțatorii principali */
.rate-logos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rate-logos span {
    background: #fff;
    color: #0b0b0d;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 8px;
}
/* pastilele cu băncile */
.rate-banks { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.rate-banks span {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--pill);
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #e2e8f0;
}
/* cele 3 statistici */
.rate-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.rate-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 16px 26px;
    text-align: center;
    min-width: 128px;
}
.rate-stat small {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.rate-stat b { display: block; font-size: 24px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.rate-stat span { display: block; font-size: 12px; color: #94a3b8; margin-top: 4px; }
.rate-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rate-more { color: #e2e8f0; font-weight: 600; font-size: 15px; }
.rate-more:hover { color: var(--primary); }

/* evantaiul de carduri bancare (desenate CSS, generice) */
.rate-cards { position: relative; height: 340px; }
.rcard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 138px;
    border-radius: 16px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
    transform-origin: 50% 130%;
    transform: translate(-50%, -50%) rotate(var(--a));
}
/* cip-ul + undele contactless pe fiecare card */
.rcard::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 34px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #fde68a, #d3a94e);
    opacity: 0.95;
}
.rcard::after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 20px;
    right: 20px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.28);
}
.rc1 { --a: -24deg; background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.rc2 { --a: -12deg; background: linear-gradient(135deg, #14532d, #22c55e); }
.rc3 { --a: 0deg;   background: linear-gradient(135deg, #14532d, #16a34a); }
.rc4 { --a: 12deg;  background: linear-gradient(135deg, #1c1917, #57534e); }
.rc5 { --a: 24deg;  background: linear-gradient(135deg, #7f1d1d, #ef4444); }

/* ===== RECENZII ===== */
.reviews-band {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 56px 0;
}
/* varianta de pe pagina produsului: aceeași bandă, dar cu răsuflare față de secțiunile vecine */
.reviews-band.rev-produs { margin-top: 40px; }

/* ===== ÎNTREBĂRI FRECVENTE (pagina produsului) =====
   <details> native, doar îmbrăcate: cardul, săgeata care se rotește la deschidere și
   despărțitorul dintre întrebare și răspuns. Fără JavaScript. */
.faq-sectiune { padding-bottom: 8px; }
.faq-lista { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 18px;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 15.5px;
    padding: 15px 26px 15px 0;
    position: relative;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '▾';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    transition: transform .15s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); color: var(--primary); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item p { margin: 0; padding: 13px 0 16px; color: var(--slate); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 640px) {
    .faq-item summary { font-size: 14.5px; }
}
.rev-in {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: center;
}
.rev-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.rev-score {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.rev-stars { color: var(--primary); font-size: 19px; letter-spacing: 2px; }
.rev-summary p { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 240px; }

.rev-side { min-width: 0; }
.rev-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 2px 12px;
    scrollbar-width: none;
    /* Când recenziile nu umplu banda (un magazin cu 2-3), stăteau lipite la stânga cu un gol
       mare în dreapta. „safe center" le centrează CÂND ÎNCAP și revine la aliniere la stânga
       când sunt multe și banda derulează — altfel primele carduri ar deveni de neatins. */
    justify-content: safe center;
}
.rev-strip::-webkit-scrollbar { display: none; }
.rev-card {
    flex: 0 0 262px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
}
.rev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rev-avatar {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--primary-l);
    color: var(--primary-d);
    font-weight: 800;
    font-size: 17px;
    display: grid;
    place-items: center;
}
.rev-head b { display: block; font-size: 14.5px; line-height: 1.2; }
.rev-head small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rev-card .rev-stars { font-size: 15px; margin-bottom: 8px; display: block; }
.rev-txt {
    font-size: 14px;
    color: var(--slate);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rev-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.rev-nav button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    font-size: 20px;
    line-height: 1;
    color: var(--slate);
    cursor: pointer;
    transition: 0.15s;
}
.rev-nav button:hover { border-color: var(--primary); color: var(--primary); }

/* ======================================================================
   RECENZII PE PAGINA DE PRODUS (includes/recenzii.php)
   Prefix „rec-", ca să nu se lovească de „rev-" de mai sus, care e banda de
   testimoniale de pe prima pagină — alt lucru, alt markup.
   Secțiunea se randează din <div class="wrap"> al paginii de produs, lângă
   „Produse similare", deci ia aceleași margini ca .similar-section.
   ====================================================================== */
.rec-sectiune {
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    /* antetul e sticky (70px) — fără asta, ancora #recenzii pică sub el */
    scroll-margin-top: 90px;
}
.rec-sectiune .section-head { margin-bottom: 20px; }
.rec-sectiune .section-head h2 { font-size: 22px; }

/* ---- stelele ---- */
/* Fără lățime fixă: sunt caractere (★/☆), deci se scalează cu font-size.
   „nowrap" ține cele 5 simboluri pe un rând și la 360px; textul de lângă
   („4,5 din 5 stele") are voie să treacă pe rândul următor. */
.rec-stele {
    display: inline-block;
    color: var(--amber);
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
}
.rec-nota-text { font-size: 13px; }

/* ---- rezumatul: media mare în stânga, distribuția în dreapta ---- */
.rec-rezumat {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 26px;
    margin-bottom: 24px;
}
.rec-nota-mare { text-align: center; min-width: 0; }
.rec-nota-mare b {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}
.rec-nota-mare > span { font-size: 14px; margin-left: 4px; }
.rec-nota-mare > div { margin-top: 8px; font-size: 13px; }
.rec-nota-mare .rec-stele { font-size: 19px; }

/* Barele de distribuție. Rândurile sunt `display: contents`, ca cele trei
   coloane să se alinieze între ele fără să le dau lățimi în px: lățimea
   etichetei și a numărătorii se ia din conținut („auto"), bara primește tot
   restul („1fr"). Umplerea barei vine ca `style="width:NN%"` din PHP. */
.rec-dist {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px 10px;
}
.rec-dist-rand { display: contents; }
.rec-dist-eticheta {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate);
    white-space: nowrap;
}
.rec-bara {
    display: block;
    height: 9px;
    min-width: 0;
    border-radius: var(--pill);
    background: var(--line);
    overflow: hidden;
}
.rec-bara-plin {
    display: block;
    height: 100%;
    width: 0;                      /* procentul real vine inline, din PHP */
    border-radius: inherit;
    background: var(--amber);
    transition: width .35s ease;
}
.rec-dist-rand .muted {
    font-size: 12.5px;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- lista de recenzii ---- */
.rec-lista { display: grid; gap: 16px; margin-bottom: 26px; }
.rec-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.rec-item-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    margin-bottom: 8px;
    font-size: 14.5px;
}
.rec-item-cap .muted { font-size: 12.5px; }
/* pastila o dă deja `.st .st-ok`; aici doar o ținem întreagă pe un rând */
.rec-verificat { white-space: nowrap; }
.rec-titlu { font-size: 16.5px; font-weight: 700; margin: 10px 0 6px; }
.rec-item .prose { margin: 0; }

/* răspunsul magazinului, sub recenzie */
.rec-raspuns {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--primary-l);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 14px;
}
.rec-raspuns b { color: var(--primary-d); }
.rec-raspuns p { margin: 4px 0 0; color: var(--slate); }

/* ---- formularul de recenzie ---- */
.rec-form { scroll-margin-top: 90px; }
.rec-form h3 { font-size: 19px; margin: 0 0 10px; }
.rec-note { font-size: 14px; margin: 0 0 18px; }
/* „hint" e stilizat doar în `.field .hint`; astea două stau direct în <form> */
.rec-form form > .hint { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.rec-eroare { font-weight: 600; }

/* Alegerea notei e un <fieldset class="field rec-nota-alegere">, deci moștenește
   regulile de la `.field` — care sunt gândite pentru input-uri late de 100%.
   Aici le anulăm punctual: butoanele radio nu se întind, iar eticheta fiecărei
   opțiuni nu e un titlu de câmp, ci text normal. */
.rec-nota-alegere {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 16px 10px;
    margin: 0 0 18px;
}
.rec-nota-alegere legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.rec-nota-alegere label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 400;
    cursor: pointer;
}
.rec-nota-alegere label:hover { background: var(--bg); }
.rec-nota-alegere input[type="radio"] {
    flex: none;
    width: auto;
    padding: 0;
    border: 0;
    accent-color: var(--primary);
}
/* Capcana pentru roboți e ascunsă din markup, cu stil inline, ca să rămână
   ascunsă și dacă foaia asta nu se încarcă. NU o ascundem și de aici: un
   `display: none` pus în CSS e exact ce caută roboții ca să sară peste câmp. */

/* ======================================================================
   ÎNTREBĂRI DESPRE PRODUS (includes/intrebari.php)
   ====================================================================== */
.intreb {
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 90px;
}
.intreb .section-head { margin-bottom: 20px; }
.intreb .section-head h2 { font-size: 22px; }
.intreb-gol { font-size: 14.5px; margin: 0 0 22px; max-width: 760px; }

.intreb-lista { display: grid; gap: 14px; margin-bottom: 26px; }
.intreb-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 22px;
}
.intreb-cap { margin: 0 0 6px; font-size: 14.5px; }
.intreb-cap .muted { font-size: 12.5px; }
.intreb-text { font-size: 15px; line-height: 1.6; color: var(--slate); }

.intreb-raspuns {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--primary-l);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.intreb-raspuns .intreb-text { font-size: 14.5px; color: var(--ink); }
.intreb-raspuns-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 6px;
}
.intreb-raspuns-cap .muted { font-size: 12.5px; }
.intreb-insigna {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 3px 11px;
    border-radius: var(--pill);
}
.intreb-astept { margin: 12px 0 0; font-size: 13.5px; font-style: italic; }

/* ---- formularul de întrebare ---- */
.intreb-form { scroll-margin-top: 90px; }
.intreb-form-titlu { font-size: 19px; margin: 0 0 8px; }
.intreb-form-note { font-size: 14px; margin: 0 0 18px; max-width: 780px; }
.intreb-erori { margin: 0 0 18px; }
.intreb-erori ul { margin: 0; padding-left: 20px; font-weight: 500; }
.intreb-ca { font-size: 14px; margin: 0 0 16px; }
.intreb-form form > .hint { font-size: 12px; color: var(--muted); margin: 12px 0 0; }

/* ===== MAGAZINELE NOASTRE (hartă + listă) ===== */
.stores-title { display: flex; align-items: center; gap: 10px; }
.stores-title svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stores-in {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: start;
}
.stores-map {
    background: linear-gradient(150deg, #ffffff, #f7f9fc);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}
.stores-map img { width: 100%; height: auto; }
.stores-list { display: grid; gap: 22px; }
.st-city h3 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;
    margin: 0 0 8px;
}
.st-row {
    display: block;
    position: relative;
    padding: 6px 0 6px 30px;
    font-size: 15px;
    color: var(--slate);
    transition: 0.15s;
}
/* mica "ramură" din stânga fiecărei adrese, ca în referință */
.st-row::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: var(--line);
}
.st-row::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--line);
}
.st-row:hover { color: var(--primary); }
.st-row:hover::before, .st-row:hover::after { background: var(--primary); }

/* ===== BANNER FRANCIZĂ (bară neagră) ===== */
.franchise-bar {
    background: #000;
    color: #fff;
    border-radius: 24px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    text-align: center;
}
.franchise-bar svg {
    width: 30px;
    height: 30px;
    flex: none;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.franchise-bar b { font-size: 17.5px; font-weight: 700; }
.franchise-bar .btn { padding: 12px 26px; }

/* ===== ANTET DE PAGINĂ (Oferte, Locații, Favorite) ===== */
.page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #16a34a 100%);
    color: #fff;
    padding: 44px 0;
}
.page-hero h1 { font-size: 34px; margin: 0 0 8px; }
.page-hero p { color: #cbd5e1; margin: 0; max-width: 620px; font-size: 17px; }

/* ===== TABELE + STĂRI COMENZI ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.table th, .table td {
    padding: 13px 15px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.table th {
    background: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
}
.table tr:last-child td { border-bottom: 0; }
.st {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--pill);
    display: inline-block;
}
.st-new { background: #fef3c7; color: #92400e; }
.st-ok { background: #dbeafe; color: #1e40af; }
.st-ship { background: #e0e7ff; color: #3730a3; }
.st-done { background: var(--green-l); color: var(--green-d); }
.st-cancel { background: #fee2e2; color: var(--red-d); }

/* ===== ADMIN ===== */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-side { background: var(--ink); color: #cbd5e1; padding: 22px 0; }
.admin-side .brand {
    padding: 0 22px 18px;
    font-weight: 800;
    color: #fff;
    font-size: 18px;
    border-bottom: 1px solid #1e293b;
    margin-bottom: 12px;
}
.admin-side .brand span { color: var(--primary); }
.admin-side a { display: block; padding: 12px 22px; color: #cbd5e1; font-size: 14px; font-weight: 600; }
.admin-side a:hover,
.admin-side a.active { background: #1e293b; color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
.admin-main { padding: 28px 32px; background: var(--bg); }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.stat {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
}
.stat .v { font-size: 30px; font-weight: 800; }
.stat .l { font-size: 13px; color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

/* ===== FOOTER ===== */
.site-footer { background: var(--ink); color: #cbd5e1; padding: 48px 0 0; margin-top: 24px; font-size: 14px; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: var(--primary); }
.footer-grid {
    display: grid;
    /* 5 blocuri: marcă, Categorii, Despre noi, Util, Legal. „Util" e cea mai lungă listă,
       de-aia primește o coloană puțin mai lată. */
    grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1fr;
    gap: 40px 30px;
    padding-bottom: 36px;
}
.footer-grid h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.logo-foot { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; display: inline-block; margin-bottom: 10px; }
.logo-foot span { color: var(--primary); }
.trust-list { display: grid; gap: 9px; margin-top: 14px; }
.footer-bottom { border-top: 1px solid #1e293b; padding: 18px 0; }
.footer-bottom-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted);
}
.footer-bottom-in .pay { color: #94a3b8; }

/* ===== DIVERSE ===== */
.tag {
    display: inline-block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 5px 14px;
    font-size: 13px;
    margin: 2px;
}
.center { text-align: center; }
.mt { margin-top: 20px; }
.mb { margin-bottom: 20px; }

/* ===== RESPONSIVE ===== */
/* ======================================================================
   RESPONSIVE — praguri în trepte, ca la usedproducts.ro (Tailwind):
   1280 (xl) · 1024 (lg) · 768 (md) · 640 (sm) · 480. Titlurile scad
   progresiv, grilele pierd câte o coloană, decorativele dispar sub lg.
   ====================================================================== */

/* ---------- ≤1280px (xl) ---------- */
/* ===== PAGINA DE PRODUS v2 (după usedproducts.ro: 45% galerie / 25% detalii / 30% panou) ===== */
.pdp-usps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
}
.pdp-usps span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate);
}
.pdp-usps svg { width: 16px; height: 16px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pdp3 { display: flex; align-items: flex-start; gap: 28px; padding: 4px 0 40px; }
.pdp-gallery { width: 45%; min-width: 0; }
.pdp-det     { width: 25%; min-width: 0; }
.pdp-panel   { width: 30%; min-width: 0; }

/* galerie: săgeți peste imaginea mare */
.pdp-gallery .gallery-main { position: relative; }
.gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .92);
    color: var(--slate);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: .15s;
}
.gal-nav.prev { left: 10px; }
.gal-nav.next { right: 10px; }
.gal-nav:hover { border-color: var(--primary); color: var(--primary); }

/* coloana de detalii */
.pdp-det h1 { font-size: 21px; line-height: 1.3; margin: 0 0 6px; }
.pdp-code   { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.pdp-aspect { font-size: 14px; margin: 0 0 8px; }
.pdp-hint   { font-size: 12.5px; margin: 8px 0 0; }
.pdp-h2     { font-size: 16px; margin: 18px 0 8px; }

/* scara de stare N / A / B / C */
.grade-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grade-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    text-align: center;
}
.grade-box b     { font-size: 15px; font-weight: 800; line-height: 1; }
.grade-box small { font-size: 10px; line-height: 1.15; }
.grade-box.on {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary) inset;
    color: var(--primary-d);
}
.grade-box.off { color: var(--muted); background: var(--bg); }
.grade-tick {
    position: absolute;
    top: -6px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    display: grid;
    place-items: center;
}

/* caseta cu explicația stării */
.cond-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--primary-l);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    background: var(--primary-l);
}
.cond-note p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.cond-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cond-chips span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-d);
    background: var(--white);
    border: 1px solid var(--primary);
    border-radius: var(--pill);
    padding: 3px 9px;
}

/* lista de specificații din coloana de detalii */
.pdp-specs { list-style: none; margin: 0; padding: 0; }
.pdp-specs li {
    position: relative;
    padding-left: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate);
}
.pdp-specs li::before { content: "·"; position: absolute; left: 2px; font-weight: 800; }
.pdp-specs li b { color: var(--ink); font-weight: 600; }
.pdp-spec-extra { display: none; }
.pdp-specs.open .pdp-spec-extra { display: list-item; }
.pdp-more {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pdp-more:hover { text-decoration: underline; }

/* ===== panoul de cumpărare ===== */
.panel-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    padding: 16px;
    box-shadow: var(--shadow);
}
.stock-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--pill);
    padding: 3px 10px;
    margin-bottom: 10px;
}
.stock-badge.low { color: #b91c1c; background: #fee2e2; }
.stock-badge.ok  { color: var(--primary-d); background: var(--primary-l); }
.stock-badge.out { color: var(--muted); background: var(--bg); }

.panel-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pp-now { font-size: 27px; font-weight: 800; color: var(--primary); line-height: 1.15; }
.pp-old { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.pp-off { font-size: 12px; font-weight: 700; color: #fff; background: #dc2626; border-radius: var(--pill); padding: 2px 8px; }
.panel-rate { font-size: 13px; color: var(--slate); margin: 4px 0 14px; }

.panel-store {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    margin-bottom: 12px;
}
.panel-store svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--primary); stroke-width: 1.8; }

.panel-buy { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.panel-buy .btn { flex: 1; }
.panel-qty { flex: none; }
.panel-fav { margin-bottom: 14px; }
.panel-fav .fav-btn.wide { width: 100%; }

.panel-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--slate);
    margin: 0 0 10px;
}
.panel-line svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.panel-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.panel-2col > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
}
.panel-2col svg { width: 15px; height: 15px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; }
.panel-2col b     { font-size: 12.5px; }
.panel-2col small { font-size: 11.5px; color: var(--muted); }

.panel-fin {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--ink);
    transition: .15s;
}
.panel-fin:hover { border-color: var(--primary); background: var(--primary-l); }
.pf-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--primary); stroke-width: 1.6; }
.pf-txt { flex: 1; display: flex; flex-direction: column; }
.pf-txt b     { font-size: 12.5px; }
.pf-txt small { font-size: 11.5px; color: var(--muted); }
.pf-arrow { color: var(--muted); font-size: 18px; }

.panel-seller {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.panel-seller p { margin: 0 0 6px; font-size: 12.5px; }
.ps-head { display: flex; align-items: center; gap: 8px; }
.ps-head svg   { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--primary); stroke-width: 1.8; }
.ps-head small { color: var(--muted); font-size: 11px; }
.panel-seller .btn { margin-top: 8px; font-size: 13px; padding: 9px 12px; }

/* Bara de cumpărare există în markup pe orice ecran, dar se arată doar pe cele mici;
   pe desktop panoul din dreapta e mereu la vedere și n-are rost. */
.pdp-bar { display: none; }

/* ---------- pagina de produs pe ecrane mici ---------- */
@media (max-width: 1024px) {
    .pdp3 { flex-wrap: wrap; gap: 22px; }
    /* ca în referință: pe mobil galeria, apoi panoul de cumpărare, apoi detaliile */
    .pdp-gallery { width: 100%; order: 0; }
    .pdp-panel   { width: 100%; order: 1; }
    .pdp-det     { width: 100%; order: 2; }
    .grade-scale { max-width: 420px; }
    .pdp-det h1  { font-size: 24px; }

    /* ===== BARA FIXĂ DE CUMPĂRARE (telefon) ===== */
    .pdp-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* 350: peste header (100) și peste sertarul de filtre (300), dar SUB toast-uri (400) —
           altfel bara ar acoperi exact confirmarea „Adăugat în coș" pe care o declanșează. */
        z-index: 350;
        background: var(--white);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .10);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .pdp-bar-in {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 1240px;
        margin: 0 auto;
    }
    .pdp-bar-pret { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
    .pb-now {
        font-size: 20px;
        font-weight: 800;
        color: var(--primary);   /* aceeași culoare ca prețul din panou, să pară o prelungire a lui */
        white-space: nowrap;
    }
    .pb-old {
        font-size: 13px;
        color: var(--muted);
        text-decoration: line-through;
        white-space: nowrap;
    }
    .pdp-bar form { margin: 0; flex: none; }
    .pdp-bar .btn { white-space: nowrap; }

    /* loc pentru bară: altfel acoperă coada paginii și toast-urile */
    body.cu-bara-jos            { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    body.cu-bara-jos #rg-toasts { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
    /* cu meniul deschis bara ar pluti peste ultimele opțiuni */
    body.nav-open .pdp-bar      { display: none; }
}
@media (max-width: 640px) {
    .pdp-usps span { padding: 7px 12px; font-size: 12px; }
    .pp-now { font-size: 25px; }
    .pb-now { font-size: 18.5px; }
}

/* baterie, defecte, cutie — pagina de produs */
.bat-block { margin: 14px 0 0; }
.bat-head  { font-size: 13px; margin: 0 0 5px; color: var(--slate); }
.bat-head b { color: var(--ink); }
.bat-bar   { height: 7px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.bat-bar span { display: block; height: 100%; border-radius: 99px; }
.bat-bar span.ok  { background: var(--primary); }
.bat-bar span.mid { background: var(--amber); }
.bat-bar span.low { background: #dc2626; }
.bat-note  { font-size: 11.5px; color: var(--muted); margin: 5px 0 0; }

.def-block {
    margin: 14px 0 0;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
}
.def-head { font-size: 12.5px; font-weight: 700; margin: 0 0 6px; }
.def-block ul { margin: 0; padding-left: 16px; }
.def-block li { font-size: 12.5px; line-height: 1.5; color: var(--slate); }
.def-note { font-size: 11px; color: var(--muted); margin: 7px 0 0; }

.box-list { list-style: none; margin: 0; padding: 0; }
.box-list li { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.7; color: var(--slate); }
.box-list svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* buton care arată ca un link (Deconectarea trebuie să fie POST, nu link) */
.as-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.as-link:hover { text-decoration: underline; }

/* ===== Mesaje scurte („toast") — confirmarea adăugării în coș ===== */
#rg-toasts {
    position: fixed;
    z-index: 400;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.rg-toast {
    max-width: 340px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .28);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s, transform .22s;
}
.rg-toast.on { opacity: 1; transform: none; }
.rg-toast.ok   { background: var(--primary-d); }
.rg-toast.warn { background: var(--amber); color: var(--ink); }
.rg-toast.err  { background: #b91c1c; }

/* coșul din bară „tresare" scurt când primește un produs */
.nav-cart.pulse { animation: cartPulse .45s ease; }
@keyframes cartPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (max-width: 640px) {
    #rg-toasts { right: 12px; left: 12px; bottom: 12px; }
    .rg-toast { max-width: none; }
}

/* ===== CONTUL MEU (după modelul usedproducts.ro: bară laterală + panou) ===== */
.acc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 0 20px;
}
.acc-head h1 { font-size: 26px; margin: 0 0 4px; }
.acc-head p  { margin: 0; font-size: 13.5px; }
.acc-head .btn { display: inline-flex; align-items: center; gap: 8px; }

.acc-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; padding-bottom: 48px; }

.acc-nav {
    align-self: start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 90px;
}
.acc-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate);
    transition: .15s;
}
.acc-nav-item:hover { background: var(--bg); color: var(--ink); }
.acc-nav-item.on { background: var(--primary-l); color: var(--primary-d); }
.acc-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.acc-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow);
}
.acc-card + .acc-card { margin-top: 16px; }
.acc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.acc-card-head h2 { font-size: 17px; margin: 0; }
.acc-card-head .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 8px 14px; }

/* câmpurile citite: etichetă mică majusculă + valoare îngroșată, pe două coloane */
.acc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.acc-field label,
.acc-field .lbl {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.acc-field b, .acc-field .val { font-size: 14.5px; font-weight: 700; word-break: break-word; }
.acc-field .val.gol { font-weight: 400; color: var(--muted); }

.acc-sep { height: 1px; background: var(--line); margin: 22px 0 18px; }

/* starea „nu ai nimic aici" */
.acc-empty {
    background: var(--bg);
    border-radius: 10px;
    padding: 22px;
    text-align: center;
}
.acc-empty p { margin: 0; font-size: 13.5px; }
.acc-empty p + p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* rânduri de listă (adrese, retururi) */
.acc-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px 15px;
}
.acc-row + .acc-row { margin-top: 10px; }
.acc-row.dft { border-color: var(--primary); background: var(--primary-l); }
.acc-row-actiuni { display: flex; gap: 8px; flex: none; }
.acc-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary-d);
    background: var(--white);
    border: 1px solid var(--primary);
    border-radius: var(--pill);
    padding: 2px 8px;
}

/* pe desktop declanșatorul nu există, lista e mereu deschisă */
.acc-nav-buton, .acc-nav-iesire { display: none; }

@media (max-width: 900px) {
    .acc-layout { grid-template-columns: minmax(0, 1fr); }
    .acc-nav { position: static; padding: 0; background: none; border: 0; box-shadow: none; }

    /* cardul care arată secțiunea curentă și desface lista */
    .acc-nav-buton {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 16px 18px;
        margin-bottom: 12px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        font: inherit;
        font-size: 17px;
        font-weight: 700;
        color: var(--ink);
        cursor: pointer;
        text-align: left;
    }
    .acc-nav-buton .acc-ico { width: 20px; height: 20px; color: var(--primary); }
    .acc-nav-buton > span { flex: 1; }
    .acc-caret {
        width: 20px; height: 20px; flex: none;
        fill: none; stroke: var(--muted); stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
        transition: transform .18s;
        transform: rotate(-90deg);          /* închis: săgeata arată spre dreapta */
    }
    .acc-nav-buton[aria-expanded="true"] .acc-caret { transform: none; }

    .acc-nav-lista {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        margin-bottom: 16px;
    }
    /* fără JS lista rămâne deschisă; JS-ul o pliază adăugând clasa */
    .acc-nav.inchis .acc-nav-lista { display: none; }

    .acc-nav-item {
        border-radius: 0;
        padding: 15px 18px;
        font-size: 16px;
        font-weight: 500;
    }
    .acc-nav-item + .acc-nav-item { border-top: 1px solid var(--line); }
    .acc-nav-item .acc-ico { width: 20px; height: 20px; }
    .acc-nav-item.on { background: var(--primary-l); color: var(--primary-d); font-weight: 600; }

    /* deconectarea, ultima, despărțită și roșie */
    .acc-nav-iesire { display: block; border-top: 1px solid var(--line); }
    .acc-iesire {
        width: 100%;
        background: none;
        border: 0;
        font: inherit;
        font-size: 16px;
        color: var(--red);
        cursor: pointer;
        text-align: left;
    }
    .acc-iesire .acc-ico { color: var(--red); }
    /* sus rămâne doar salutul — deconectarea e acum în listă */
    .acc-head > form { display: none; }

    .acc-fields { grid-template-columns: 1fr; }
    .acc-card { padding: 18px; }
    .acc-row { flex-direction: column; }
    .acc-row-actiuni { width: 100%; }
}

/* panoul contului cât se aduce secțiunea nouă */
.acc-main.se-incarca { opacity: .45; transition: opacity .12s; pointer-events: none; }

/* cutiile cu drepturile GDPR din pagina de confidențialitate */
.gdpr-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 16px 0;
    background: var(--white);
}
.gdpr-box h3 { font-size: 16px; margin: 0 0 6px; }
.gdpr-box p.muted { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.gdpr-box.danger { border-color: #fca5a5; background: #fef2f2; }
.gdpr-box.danger h3 { color: var(--red-d); }

/* ===== BARA COMPACTĂ: hamburger | logo | 4 iconițe =====
   A fost la început doar pentru telefon. Acum e bara de pe TOATE ecranele — cerută explicit
   și pe desktop. Blocul rămâne în @media (fără prag) ca să bată regulile de bază de mai sus
   fără să fie nevoie de !important peste tot. */
.m-icons { display: none; }

@media all {
    .m-icons {
        display: flex;
        align-items: center;
        gap: 4px;                     /* la ei: ținte de 36px la 40px una de alta */
        margin-left: auto;
        order: 2;                     /* hamburgerul are order 3, deci iconițele stau înaintea lui */
    }
    .m-ico {
        position: relative;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--ink);
        transition: background .15s;
    }
    .m-ico:hover, .m-ico:active { background: var(--bg); }
    .m-ico svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    /* bulinele stau peste colțul iconiței, ca în referință */
    .m-ico .cart-badge,
    .m-ico .n-badge {
        position: absolute;
        top: -1px;
        right: -2px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--primary);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        border: 2px solid var(--white);
        box-sizing: content-box;
    }
    /* bara: hamburger stânga, logo lângă el, iconițele împinse la dreapta.
       Specificitate mai mare decât regula .nav-toggle { order: 3 } din blocul de navigație. */
    .header-in { flex-wrap: wrap; }
    .header-in .nav-toggle { order: 0; margin-right: 6px; }
    .header-in .logo { order: 1; }
    /* coșul din sertar devine redundant — e acum în bară */
    .nav-links .nav-cart { display: none; }
}

@media (max-width: 400px) {
    .m-icons { gap: 0; }
    .m-ico { width: 34px; height: 34px; }
    .m-ico svg { width: 20px; height: 20px; }
}

/* ===== LUPĂ: pozele produsului pe tot ecranul ===== */
.gallery-main img { cursor: zoom-in; }

.lupa {
    position: fixed;
    inset: 0;
    /* peste tot: antet 100, sertar filtre 300, bara de jos 350, toast-uri 400 */
    z-index: 500;
    background: rgba(9, 12, 20, .93);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 68px 12px 12px;
    animation: lupaIntra .16s ease;
}
.lupa.pe { display: flex; }
@keyframes lupaIntra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lupa { animation: none; } }

.lupa-scena {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.lupa-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    user-select: none;
    -webkit-user-drag: none;
}

.lupa-contor {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 40px;
    font-variant-numeric: tabular-nums;
}

.lupa-inchide,
.lupa-nav {
    position: absolute;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: grid;
    place-items: center;
    line-height: 1;
    transition: background .15s;
}
.lupa-inchide:hover,
.lupa-nav:hover { background: rgba(255, 255, 255, .3); }
.lupa-inchide:focus-visible,
.lupa-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lupa-inchide { top: 12px; right: 12px; width: 54px; height: 54px; font-size: 30px; }
.lupa-nav     { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 30px; }
.lupa-prev { left: 4px; }
.lupa-next { right: 4px; }

.lupa-thumbs {
    display: flex;
    gap: 10px;
    padding: 12px;
    margin-top: 12px;
    background: rgba(255, 255, 255, .1);
    border-radius: 14px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex: none;
}
.lupa-thumbs::-webkit-scrollbar { display: none; }
.lupa-thumbs img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    padding: 3px;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    opacity: .55;
    border: 2px solid transparent;
    transition: opacity .15s;
    flex: none;
}
.lupa-thumbs img:hover { opacity: .85; }
.lupa-thumbs img.pe { opacity: 1; border-color: #fff; }

/* cât e lupa deschisă, pagina de dedesubt nu se mai derulează */
body.lupa-deschisa { overflow: hidden; }

@media (max-width: 640px) {
    .lupa { padding: 62px 6px 6px; }
    .lupa-contor { font-size: 15px; padding: 6px 14px; top: 12px; left: 12px; }
    .lupa-inchide { width: 46px; height: 46px; font-size: 26px; }
    .lupa-nav { width: 42px; height: 42px; font-size: 26px; }
    .lupa-thumbs img { width: 58px; height: 58px; }
}

@media (max-width: 1280px) {
    .hero h1 { font-size: 52px; }
    .hero-collage { height: 420px; }
    .rate-band h2 { font-size: 38px; }
    .trust-copy h2 { font-size: 34px; }
}

/* ---------- ≤1024px (lg): o coloană la layouturi, decorativele dispar ---------- */
@media (max-width: 1024px) {
    .hero { padding: 36px 0 96px; }
    .hero-in { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .hero h1 { font-size: 48px; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }
    /* ca în referință pe mobil: colajul apare DEASUPRA titlului, lat cât ecranul */
    .hero-collage {
        order: -1;
        width: min(100%, 540px);
        height: auto;
        aspect-ratio: 629 / 470;
        margin: 0 auto;
    }

    .usp-bar { flex-wrap: wrap; }
    .usp { flex: 1 1 50%; }
    .usp:nth-child(3)::before { display: none; }
    .usp:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.15); }
    .usp-hl { border-top-color: rgba(255, 255, 255, 0.32); }

    .prod-grid { grid-template-columns: repeat(3, 1fr); }
    .prod-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .features { grid-template-columns: repeat(2, 1fr); }

    .pdp, .cart-layout, .catalog, .admin-shell { grid-template-columns: minmax(0, 1fr); }
    /* filtrele devin sertar lateral, deschis din butonul "Filtre" */
    .filters-open { display: inline-flex; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(330px, 88vw);
        z-index: 300;
        transform: translateX(-102%);
        transition: transform 0.25s ease;
        max-height: none;            /* sertar pe tot ecranul: anulează plafonul de pe desktop */
        overflow-y: auto;
        padding: 14px;
        background: var(--bg);
    }
    body.filters-on .sidebar { transform: none; }
    /* În modul sertar butonul „Arată N produse" e din nou vizibil (aplicarea nu e instant aici). */
    .rg-js .filtre-apply { display: block; }
    .filters-close { display: block; }
    .filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 299;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    body.filters-on .filters-backdrop { opacity: 1; pointer-events: auto; }
    body.filters-on { overflow: hidden; }
    .fgroup-body { max-height: none; }
    .admin-side { display: none; }

    .rate-in { grid-template-columns: 1fr; }
    .rate-band h2 { font-size: 34px; }
    .rate-cards { height: 240px; margin-top: 4px; }
    .trust-in { grid-template-columns: 1fr; gap: 36px; }
    .trust-copy { text-align: center; }
    .trust-copy p { margin-left: auto; margin-right: auto; }
    .trust-copy h2 { font-size: 31px; }
    .rev-in { grid-template-columns: 1fr; gap: 24px; }
    .rev-summary p { max-width: none; }
    .stores-in { grid-template-columns: 1fr; gap: 28px; }
    .loc-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

/* ---------- Bara de sus stă pe hamburger la ORICE lățime ----------
   Înainte era doar sub 1024px; s-a cerut aceeași bară și pe desktop. Meniul cu text și
   mega-meniul de categorii trăiesc de acum exclusiv în sertar, la orice lățime. */
@media all {
    .header-in { gap: 10px; }
    .nav-toggle { display: block; order: 3; }
    /* meniul se ascunde și se deschide cu hamburgerul; derulabil dacă e lung */
    .nav-links {
        display: none;
        order: 4;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 14px;
        border-top: 1px solid var(--line);
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    body.nav-open .nav-links { display: flex; }
    .nav-links a {
        padding: 13px 6px;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid #f1f5f9;
    }
    .nav-links .btn-small {
        margin-top: 12px;
        text-align: center;
        justify-content: center;
        border-bottom: 0;
        padding: 13px 20px;
    }
    /* elementele doar-desktop dispar; Coșul devine buton centrat; franciza mică jos */
    .d-only { display: none !important; }
    .nav-links .nav-search {
        width: 100%;
        margin: 10px 0 8px;
        padding: 4px 4px 4px 16px;
        background: #fff;
    }
    .nav-links .nav-search input { flex: 1; width: auto; font-size: 15px; padding: 8px 6px 8px 0; }
    .nav-links .nav-search button { width: 36px; height: 36px; }
    .nav-links .nav-cart {
        margin: 14px auto 0;
        width: min(280px, 90%);
        border-bottom: 0 !important;
    }
    .nav-links .nav-item { gap: 12px; }
    .nav-links .nav-ico { width: 21px; height: 21px; }
    .franchise-mini {
        display: block;
        text-align: center;
        font-size: 13.5px !important;
        font-weight: 600;
        color: var(--muted) !important;
        border-bottom: 0 !important;
        padding: 12px 0 2px !important;
    }
    .franchise-mini:hover { color: var(--primary) !important; }

    /* "Categorii": acordeon pe 2 niveluri, cu poze */
    .has-drop { width: 100%; }
    .drop-btn {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    .caret { transition: transform 0.2s; font-size: 13px; color: var(--muted); }
    .has-drop.open > .drop-btn .caret { transform: rotate(180deg); color: var(--primary); }
    .drop {
        position: static;
        display: none;
        width: 100%;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 2px 0 6px;
        min-width: 0;
        background: #fafbfc;
        grid-template-columns: 1fr;
        gap: 0;
        max-height: none;
        overflow: visible;
    }
    /* pe mobil hover/focus NU deschid meniul — doar clasa .open (acordeonul din JS) */
    .has-drop:hover .drop, .has-drop:focus-within .drop { display: none; }
    .has-drop.open .drop { display: block !important; }

    .drop-cat { border-bottom: 1px solid #f1f5f9; }
    .drop-cat-row { padding: 9px 8px; border-radius: 0; }
    .drop-cat-row b { font-size: 15px; font-weight: 600; flex: 1; }
    .drop-thumb { width: 32px; height: 32px; border-radius: 8px; }
    .sub-caret { display: inline; margin-left: auto; }
    .drop-cat.open .sub-caret { transform: rotate(180deg); color: var(--primary); }
    /* subcategoriile pliate — se desfac la atingerea categoriei */
    .drop-subs { display: none; padding: 0 0 8px 48px; }
    .drop-cat.open .drop-subs { display: flex; }
    .drop-subs a { padding: 7px 0; font-size: 14px; border-bottom: 0; }
    .drop-all { border-top: 0; margin-top: 0; padding: 12px 8px !important; font-size: 15px; }
}

/* ---------- Sertarul pe ecrane mari: panou, nu meniu de telefon întins ----------
   Singurul min-width din fișier. Pe telefon sertarul curge în pagină și e bine așa; pe
   desktop, întins pe 1200px și în flux, ar împinge tot conținutul cu 800px în jos. Aici
   devine un panou care plutește sub hamburger. Ancorarea merge fiindcă .site-header e
   `position: sticky`, deci e deja bloc de referință pentru copiii absoluți. */
@media (min-width: 1025px) {
    .header-in { position: relative; }
    body.nav-open .nav-links {
        position: absolute;
        top: calc(100% + 13px);      /* 13px = padding-ul de jos al barei */
        left: 0;
        width: min(420px, 92vw);
        flex-basis: auto;
        padding: 8px 18px 16px;
        background: var(--white);
        border: 1px solid var(--line);
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow-h);
        max-height: calc(100dvh - 120px);
    }
    /* Voalul NU are voie să fie un ::after al lui .header-in: .site-header are
       `backdrop-filter`, care îl face bloc conținător pentru descendenții `position: fixed`.
       Un `inset: 0` s-ar raporta atunci la antet (64px înălțime), nu la fereastră, iar cu
       `top: 64px` ar ieși înălțime zero — adică nimic vizibil. Măsurat: 1424×0 px.
       Îl punem pe <body>, care nu are ancestor cu backdrop-filter. */
    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 65px 0 0;              /* sub antet */
        background: rgba(15, 23, 42, .28);
        z-index: 90;                  /* sub antet (100), peste conținut */
        animation: voalIntra .18s ease;
    }
}

@keyframes voalIntra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    body.nav-open::before { animation: none; }
}

/* ---------- ≤1024px: rândurile de produse devin caruseluri pe UN SINGUR rând ---------- */
@media (max-width: 1024px) {
    /* săgețile din capul secțiunii înlocuiesc linkul "Vezi toate" */
    .section-head.has-row-nav .link { display: none; }
    /* titlul și săgețile rămân pe același rând — săgețile mereu la dreapta */
    .section-head.has-row-nav {
        flex-wrap: nowrap;
        align-items: flex-start;   /* săgețile se aliniază cu prima linie a titlului */
        gap: 12px;
    }
    .section-head.has-row-nav > :first-child { min-width: 0; }
    .row-nav { display: flex; margin-left: auto; flex: none; }
    .row-nav button {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--white);
        color: var(--slate);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        transition: 0.15s;
    }
    .row-nav button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
    .row-nav button:disabled { opacity: 0.3; cursor: default; }
    /* cardul de la capătul caruselului */
    .card-more {
        display: flex;
        flex: 0 0 150px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--white);
        border: 1px dashed #cbd5e1;
        border-radius: var(--radius);
        color: var(--primary);
        text-align: center;
        padding: 16px;
        scroll-snap-align: start;
    }
    .card-more:hover { border-color: var(--primary); background: var(--primary-l); }
    .card-more .cm-arrow {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--primary-l);
        display: grid;
        place-items: center;
        font-size: 20px;
        font-weight: 700;
    }
    .card-more b { font-size: 14px; font-weight: 700; }

    /* secțiunile de pe prima pagină devin caruseluri orizontale (ca în referință) */
    .prod-grid.prod-row {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* iese până la marginile ecranului, ca ultimul card să nu pară tăiat */
        margin: 0 -24px;
        padding: 4px 24px 10px;
    }
    .prod-grid.prod-row::-webkit-scrollbar { display: none; }
    .prod-grid.prod-row > .card {
        flex: 0 0 240px;
        max-width: 240px;
        scroll-snap-align: start;
    }
}

/* ---------- ≤768px (md): grile pe 2 coloane ---------- */
@media (max-width: 768px) {
    .hero { padding: 28px 0 88px; }
    .section { padding: 38px 0; }
    .section-head h2 { font-size: 23px; }


    .prod-grid:not(.prod-row), .prod-grid.cols-3:not(.prod-row), .prod-grid.cols-5:not(.prod-row) { grid-template-columns: 1fr 1fr; }
    .cat-grid { grid-template-columns: 1fr 1fr; }

    .trust-band { padding: 44px 0; }
    .trust-copy h2 { font-size: 28px; }
    .page-banner { padding: 24px 22px; margin-bottom: 20px; }
    .pb-copy h2 { font-size: 25px; }
    .pb-usps { gap: 10px 20px; margin-top: 16px; }
    .pb-usps > div { font-size: 13px; }
    .rate-band { padding: 44px 0; }
    .rate-band h2 { font-size: 29px; }
    .rate-stat { flex: 1; padding: 14px 16px; min-width: 100px; }
    /* evantaiul decorativ de carduri dispare, ca decorativele lor sub md */
    .rate-cards { display: none; }

    .promo-banner { flex-direction: column; text-align: center; padding: 32px 24px; }
    .loc-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 80px 1fr; }
    .cart-row img { width: 80px; height: 64px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

    /* ---- recenzii + întrebări pe pagina de produs ---- */
    /* Sub 768px, media mare lângă distribuție lasă barelor sub 200px și
       procentele nu se mai citesc. Se pun una peste alta. */
    .rec-sectiune, .intreb { margin-top: 34px; padding-top: 24px; }
    .rec-rezumat { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 20px; }
    .rec-item, .intreb-item { padding: 16px 18px; }
}

/* ---------- ≤640px (sm) ---------- */
@media (max-width: 640px) {
    /* Bannerul mânca jumătate de ecran și împingea primul produs sub linia de plutire.
       În referință e o fâșie scundă, deci: titlu mai mic, avantajele în două coloane. */
    .page-banner { padding: 16px 18px; margin: 0 0 16px; }
    .pb-copy h2 { font-size: 19px; letter-spacing: -0.4px; }
    .pb-usps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 10px;
        margin-top: 12px;
    }
    .pb-usps > div { font-size: 11.5px; gap: 6px; }
    .pb-usps svg { width: 15px; height: 15px; }

    /* ===== PRODUSELE DEVIN LISTĂ ORIZONTALĂ (caruselele rămân neatinse) ===== */
    .prod-grid:not(.prod-row) { grid-template-columns: 1fr !important; gap: 12px; }
    .prod-grid:not(.prod-row) > .card {
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        padding: 12px;
        gap: 12px;
    }
    .prod-grid:not(.prod-row) > .card:hover { transform: none; }
    /* poza mică, pătrată, în stânga */
    .prod-grid:not(.prod-row) .card-imgwrap {
        position: static;          /* inima se ancorează de card, nu de poză */
        /* ~30% din card, ca în referință, dar plafonat: la 640px lățime, 30% ar da
           177px și ar umfla cardul. */
        width: 30%;
        min-width: 88px;
        max-width: 116px;
        height: auto;
        aspect-ratio: 1 / 1;       /* bate 4/3 din regula de bază */
        align-self: flex-start;
        flex: none;
        padding: 0;
        border-radius: 10px;
        background: var(--white);
    }
    .prod-grid:not(.prod-row) .card:hover .card-imgwrap img { transform: none; }
    /* Insigna de reducere rămâne vizibilă și pe telefon: pe pagina Reduceri e chiar
       informația principală. Se ancorează de card (care e position:relative), deci ajunge
       sus-stânga, peste poză — ca în referință. Inima stă sus-dreapta, nu se ciocnesc. */
    .prod-grid:not(.prod-row) .card-badges { top: 8px; left: 8px; }
    .prod-grid:not(.prod-row) .card-badges .badge {
        font-size: 11.5px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 7px;        /* dreptunghi rotunjit, nu pastilă */
        letter-spacing: 0;
    }
    /* gradul de stare se citește din textul colorat de sub titlu, nu mai are rost și ca insignă */
    .prod-grid:not(.prod-row) .card-badges .badge:not(.badge-off) { display: none; }
    /* detaliile în dreapta */
    .prod-grid:not(.prod-row) .card-body {
        padding: 0;
        border-top: 0;
        gap: 4px;
        line-height: 1.3;          /* fără asta rândurile moștenesc 1.6 și umflă cardul */
        justify-content: flex-start;
    }
    /* ordinea din referință: titlu, stare, garanție/livrare, magazin, preț */
    .prod-grid:not(.prod-row) .card-title { order: 1; padding-right: 38px; }  /* loc pentru inimă */
    .prod-grid:not(.prod-row) .card-cond  { order: 2; }
    .prod-grid:not(.prod-row) .card-rows  { order: 3; }
    .prod-grid:not(.prod-row) .card-store { order: 4; }
    .prod-grid:not(.prod-row) .card-price {
        order: 5;
        margin-top: 2px;
        padding-right: 48px;       /* loc pentru săgeata din colț */
        align-items: baseline;
    }
    .prod-grid:not(.prod-row) .price-now { line-height: 1.15; }
    .prod-grid:not(.prod-row) .card-title {
        min-height: 0;
        -webkit-line-clamp: 2;
        font-size: 14.5px;
        margin: 0;
    }
    .prod-grid:not(.prod-row) .card-cond { font-size: 12.5px; }
    .prod-grid:not(.prod-row) .card-rows { gap: 3px; }
    .prod-grid:not(.prod-row) .card-rows > div,
    .prod-grid:not(.prod-row) .card-store { font-size: 11.5px; }
    .prod-grid:not(.prod-row) .card-rows svg { width: 14px; height: 14px; }
    /* rândul cu locația să arate ca celelalte două rânduri cu iconițe, nu ca o notă de subsol */
    .prod-grid:not(.prod-row) .card-store { color: var(--slate); }
    .prod-grid:not(.prod-row) .card-store svg { width: 14px; height: 14px; stroke: var(--primary); }
    /* rata orientativă: în referință apare sub preț. ATENȚIE la `order` — fără el ar avea
       implicit 0 și ar sări înaintea titlului. */
    .prod-grid:not(.prod-row) .card-rate {
        display: block;
        order: 6;
        padding-right: 48px;       /* aceeași rezervă ca prețul: săgeata din colț e absolută */
    }
    .prod-grid:not(.prod-row) .card-price { margin-top: 4px; }
    .prod-grid:not(.prod-row) .price-now { font-size: 19px; }
    /* inima sus-dreapta, săgeata portocalie jos-dreapta */
    .prod-grid:not(.prod-row) .fav-btn {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 15px;
        box-shadow: none;
    }
    .prod-grid:not(.prod-row) .card-cta {
        position: absolute;
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 40px;
        min-width: 0;
        padding: 0;
        border-radius: 10px;
        font-size: 20px;
        line-height: 1;
        margin: 0;
    }
    .prod-grid:not(.prod-row) .cta-text { display: none; }

    .features { grid-template-columns: 1fr; }
    /* bara de avantaje: o singură linie compactă, ca în referință pe telefon */
    .usp-strip { margin-top: -34px; }
    .usp-bar { flex-wrap: nowrap; border-radius: 16px; }
    .usp {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 12px 6px;
    }
    .usp::before { display: none !important; }
    .usp:nth-child(n+3) { border-top: 0; }
    .usp + .usp { border-left: 1px solid rgba(255, 255, 255, 0.15); }
    .usp svg { width: 18px; height: 18px; margin: 0 auto; }
    .usp b { font-size: 11.5px; line-height: 1.25; letter-spacing: 0; }
    .usp span { display: none; }   /* subtextul dispare pe telefon, ca la ei */
    /* Footer mai înghesuit pe telefon: rămâne pe 2 coloane (nu se întinde pe verticală cât
       tot ecranul), cu spații, padding și corp de literă mai strânse. Blocul cu marca/contact
       trece pe toată lățimea, deasupra listelor. */
    .site-footer { padding-top: 30px; font-size: 13px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 18px; padding-bottom: 22px; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
    .footer-grid h4 { font-size: 13.5px; margin-bottom: 8px; }
    .footer-grid ul { gap: 6px; }
    .logo-foot { font-size: 20px; margin-bottom: 6px; }
    .footer-bottom { padding: 14px 0; }
    .footer-bottom-in { gap: 4px 14px; font-size: 12px; }
    .rev-card { flex-basis: 236px; }
    .franchise-bar { padding: 24px 20px; }

    /* ---- recenzii + întrebări pe pagina de produs ---- */
    .rec-sectiune .section-head h2, .intreb .section-head h2 { font-size: 20px; }
    .rec-nota-mare b { font-size: 38px; }
    .rec-nota-mare .rec-stele { font-size: 17px; }
    .rec-dist { gap: 8px; }
    .rec-dist-eticheta, .rec-dist-rand .muted { font-size: 12px; }
    .rec-bara { height: 8px; }
    .rec-stele { font-size: 15px; letter-spacing: 1.5px; }
    .rec-item, .intreb-item { padding: 15px 16px; border-radius: var(--radius-sm); }
    .rec-form, .intreb-form { padding: 20px 18px; }
    .rec-raspuns, .intreb-raspuns { padding: 11px 13px; }
    .rec-form h3, .intreb-form-titlu { font-size: 17.5px; }
    .intreb-text { font-size: 14.5px; }
}

/* ---------- ≤480px ---------- */
/* Butoanele pe ecrane mici: mai scunde și mai puțin rotunde — la 60px rază și
   14/28 padding ocupau prea mult din ecran (cerință explicită). */
@media (max-width: 640px) {
    .btn        { padding: 11px 18px; font-size: 14.5px; border-radius: 9px; }
    .btn-lg     { padding: 12px 20px; font-size: 15.5px; }
    .btn-sm     { padding: 7px 13px;  font-size: 13.5px; }
    .card-cta   { padding: 10px 14px; font-size: 14px; }
    .fav-btn.wide { padding: 10px 16px; font-size: 14px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 40px; }
    /* niciodată un singur produs pe rând — rămân 2 coloane, ca în referință */
    .prod-grid.prod-row > .card { flex-basis: 218px; max-width: 218px; }
    .cat-grid { grid-template-columns: 1fr; }
    /* carduri înguste: text puțin mai mic, ca să încapă curat */
    .card-body { padding: 13px 13px 15px; gap: 7px; }
    .card-title { font-size: 14px; }
    .price-now { font-size: 19px; }
    .card-rows > div, .card-store { font-size: 12px; }
    .card-cta { padding: 11px 12px; font-size: 14px; }
    .pdp-price .now { font-size: 28px; }
    .stat-grid { grid-template-columns: 1fr; }

    /* ---- recenzii + întrebări: verificat la 360px lățime ---- */
    /* La 360px rămân 312px în .wrap și 280px în card. Stelele scrise cu 14px și
       1px spațiere ocupă ~75px, deci încap pe un rând lângă notă; rândul de
       distribuție lasă barei ~180px, destul cât să se vadă diferența. */
    .rec-stele { font-size: 14px; letter-spacing: 1px; }
    .rec-nota-text { font-size: 12.5px; }
    .rec-nota-mare b { font-size: 34px; }
    .rec-rezumat { padding: 16px; }
    .rec-item-cap { gap: 6px 8px; font-size: 14px; }
    .rec-nota-alegere { padding: 10px 12px 8px; }
    .rec-nota-alegere label { padding: 7px 6px; font-size: 14px; gap: 8px; }
    .rec-titlu { font-size: 15.5px; }
    .intreb-insigna { font-size: 11px; padding: 3px 9px; }
}

/* ======================================================================
   CRM ADMIN — Board de comenzi (Kanban), bară de etape, fișă client
   ----------------------------------------------------------------------
   Toată zona de admin trăiește pe tema deschisă a site-ului (nu există
   temă întunecată nicăieri în proiect) — o păstrăm așa deliberat: e o
   unealtă internă care se potrivește cu restul panoului.

   comenzi-board.php, orders.php și client.php au deja stiluri „inline"
   de bază pentru structură. Aici NU rescriem nimic: adăugăm STRATUL de
   CRM (antete colorate pe etapă, carduri cu umbră și feedback la tragere,
   segmente de progres). Unde trebuie să depășim un stil inline al lor,
   folosim un selector cu specificitate mai mare (`.kanban …`,
   `[data-status]`) — nu `!important`.

   Culoarea fiecărei etape = aceeași familie ca pastilele `.st-*`:
   nou/plata → chihlimbar, confirmată → albastru, expediată → indigo,
   livrată → verde (accentul casei), anulată → roșu. O punem o singură
   dată, ca variabilă `--etapa` pe coloană, și o citesc și antetul, și
   rama cardului.
   ====================================================================== */

/* --- Culoarea etapei, pusă pe coloană și moștenită de carduri --- */
.kanban-col[data-status="nou"]        { --etapa: var(--amber); }
.kanban-col[data-status="plata"]      { --etapa: var(--amber); }
.kanban-col[data-status="confirmata"] { --etapa: var(--blue); }
.kanban-col[data-status="expediata"]  { --etapa: #6366f1; }
.kanban-col[data-status="livrata"]    { --etapa: var(--green); }
.kanban-col[data-status="anulata"]    { --etapa: var(--red); }

/* --- Lane-ul: fâșie colorată sus + antet ca „cap de pipeline" --- */
.kanban { scrollbar-gutter: stable; }
.kanban-col[data-status] {
    /* fâșia de etapă în capul coloanei; laturile rămân pe --line din inline */
    border-top: 3px solid var(--etapa);
    border-radius: 12px 12px 12px 12px;
    box-shadow: var(--shadow);
}
.kanban .kanban-col-head {
    padding: 2px 2px 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2px;
}
.kanban .kanban-col-head h3 { display: flex; align-items: center; }
/* Contorul „N · sumă" ca insignă discretă, cifre aliniate. */
.kanban .kanban-col-sum {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--slate);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 2px 9px;
}

/* Derulare pe verticală ÎN coloană (capul rămâne pe loc), cu bară subțire.
   Board-ul întreg derulează pe orizontală — asta o dă deja inline-ul lor. */
.kanban .kanban-col-body {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 2px;
}
.kanban .kanban-col-body::-webkit-scrollbar { width: 8px; }
.kanban .kanban-col-body::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 8px;
}
.kanban .kanban-col-body { scrollbar-width: thin; }

/* --- Cardul: rama stângă = etapa (starea se citește dintr-o privire) --- */
.kanban .kb-card {
    border-left: 3px solid var(--etapa);
    border-radius: 8px 10px 10px 8px;
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
.kanban .kb-card:hover {
    box-shadow: var(--shadow-h);
    transform: translateY(-2px);
    border-color: var(--line);
}
/* Cardul „prins" în timpul tragerii: îl ridicăm, îl înclinăm ușor, umbră mare. */
.kanban .kb-card.dragging {
    opacity: .55;
    transform: scale(.97) rotate(-1.2deg);
    box-shadow: var(--shadow-h);
    cursor: grabbing;
}
.kanban .kb-card-top b a:focus-visible,
.kanban .kb-move :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- Coloana-țintă activă în timpul tragerii (main.js pune „.drop-hi") --- */
.kanban .kanban-col.drop-hi {
    border-color: var(--etapa);
    /* fallback solid, apoi tenta din culoarea etapei pentru browsere moderne */
    background: var(--bg);
    background: color-mix(in srgb, var(--etapa) 12%, var(--white));
    box-shadow: 0 0 0 2px var(--etapa) inset;
}
.kanban .kanban-col.drop-hi .kanban-col-body { outline: none; }

/* Butonul „Mută" ca acțiune, nu ca simplu chenar. */
.kanban .kb-move button {
    background: var(--white);
    color: var(--slate);
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kanban .kb-move button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Bara de etape din lista de comenzi (orders.php). Structura și culorile
   umpluturii vin inline de la ei; aici doar dăm segmentelor un aspect mai
   „pipeline": colț rotunjit moale, tranziție și o umbră internă subtilă pe
   segmentele parcurse, ca să se distingă de fundalul gri.
   --------------------------------------------------------------------- */
.stbar i {
    transition: background .15s ease;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .06);
}
.stbar[aria-hidden] i[style] {           /* segmentele umplute (au style inline) */
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .14);
}

/* ---------------------------------------------------------------------
   Fișa client (client.php) — autorul a folosit stiluri inline peste
   componentele comune (.form-card, .st, .tag, .link, .cart-layout, .muted),
   fără clase noi de hook. Deci nu „stilizăm" caseta de metrici ori
   timeline-ul din exterior (n-am putea fără selectoare fragile pe structură),
   ci ne asigurăm că plăcile pe care se sprijină respiră ca într-un CRM:
   umbră consecventă și un mic salt la hover pe cardurile din fișă.
   --------------------------------------------------------------------- */
.cart-layout .form-card {
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease;
}

/* ---------- Board pe ecrane mici: lane-uri mai înguste, tot cu scroll ---------- */
@media (max-width: 900px) {
    .kanban-col { flex-basis: 248px; }
    .kanban .kanban-col-body { max-height: calc(100vh - 200px); }
}
@media (max-width: 640px) {
    /* pe telefon lane-ul ocupă aproape tot ecranul; board-ul rămâne derulabil orizontal */
    .kanban-col { flex-basis: 82vw; }
    .kanban .kanban-col-body { max-height: none; overflow-y: visible; }
}

/* ===== PAGINA UNUI MAGAZIN (/magazin/iasi/) ===== */
.mag-hero { background: var(--white); border-bottom: 1px solid var(--line); padding: 34px 0 30px; }
.mag-hero-in { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; }
.mag-eticheta {
    display: inline-block; background: var(--primary-l); color: var(--primary-d);
    font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: var(--pill);
}
.mag-hero-text h1 { font-size: 30px; margin: 10px 0 8px; }
.mag-intro { color: var(--slate); font-size: 15px; line-height: 1.65; margin: 0 0 18px; max-width: 62ch; }
.mag-date { display: grid; gap: 9px; margin-bottom: 20px; }
.mag-date > div { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.mag-date svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none;
    stroke: var(--primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mag-date a { color: var(--ink); text-decoration: none; }
.mag-date a:hover { color: var(--primary); }
.mag-actiuni { display: flex; gap: 10px; flex-wrap: wrap; }
.mag-hero-usp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mag-hero-usp > div {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; text-align: center;
}
.mag-hero-usp b { display: block; font-size: 20px; color: var(--primary-d); line-height: 1.15; }
.mag-hero-usp span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.mag-alte { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mag-alt-card {
    display: block; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink);
    transition: .15s;
}
.mag-alt-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.mag-alt-card b { display: block; font-size: 16px; margin-bottom: 5px; }
.mag-alt-card span { display: block; font-size: 12.5px; color: var(--slate); line-height: 1.45; }
.mag-alt-card .muted { margin-top: 4px; }

@media (max-width: 900px) {
    .mag-hero-in { grid-template-columns: 1fr; gap: 22px; }
    .mag-hero-text h1 { font-size: 25px; }
}
@media (max-width: 480px) {
    .mag-hero { padding: 24px 0 22px; }
    .mag-hero-usp { grid-template-columns: 1fr 1fr; gap: 9px; }
    .mag-hero-usp > div { padding: 11px 10px; }
    .mag-hero-usp b { font-size: 17px; }
}
/* orașul curent, în lista de magazine de pe pagina lui */
.st-city-activ h3 { color: var(--primary-d); }
.st-aici {
    display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
    background: var(--primary-l); color: var(--primary-d);
    padding: 2px 8px; border-radius: var(--pill); vertical-align: middle;
    text-transform: none; letter-spacing: 0;
}

/* ============================================================================
   ADMINISTRARE — DOUĂ ASPECTE: ecran mare și telefon
   ============================================================================
   Până acum exista unul singur, gândit pentru monitor: bară laterală fixă de
   240px lângă conținut. Pe telefon regula era `.admin-side { display: none }`,
   adică bara dispărea — și odată cu ea TOT meniul. Se putea ajunge la Produse
   sau la Comenzi doar scriind adresa de mână.

   Acum sunt două aspecte separate:

   A. ECRAN MARE (peste 1024px) — neschimbat: meniul vertical în stânga, tot ce
      era înainte. Regulile de bază de mai sus rămân aspectul de desktop.

   B. TELEFON ȘI TABLETĂ (până în 1024px) — meniul devine o bară orizontală
      lipită sus, prin care se trage cu degetul; tabelele se rup în cartonașe,
      unul pe rând, fiindcă un tabel de șapte coloane pe un ecran de șase
      centimetri nu se citește oricât l-ai micșora; formularele și butoanele
      ocupă toată lățimea.
   ============================================================================ */

@media (max-width: 1024px) {

    /* `.admin-shell` are `min-height: 100vh`. Pe o coloană rămân două rânduri (meniul și
       conținutul), amândouă cu înălțime automată — iar o grilă împarte spațiul rămas în mod
       egal între rândurile automate. Pe paginile cu puțin conținut (board-ul de comenzi,
       retururile goale) asta umfla bara de meniu de la 47px la 200px. „auto 1fr" spune
       limpede: meniul cât îi trebuie, restul paginii ia tot ce rămâne. */
    .admin-shell { grid-template-rows: auto 1fr; }

    /* ---------- Meniul: din coloană verticală în bară orizontală ---------- */
    /* Anulează `display:none` de mai sus. Rămâne lipit sus la derulare, ca să
       poți sări între secțiuni fără să urci înapoi în capul paginii. */
    .admin-side {
        display: flex;
        align-items: stretch;
        gap: 0;
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 60;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 1px solid #1e293b;
        /* bara de derulare ar mânca din înălțime și ar arăta a greșeală */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .admin-side::-webkit-scrollbar { display: none; }

    /* Sigla rămâne lipită în stânga cât timp tragi de meniu: e reperul care
       spune că ești în administrare, nu în magazin. */
    .admin-side .brand {
        position: sticky;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        background: var(--ink);
        border-bottom: 0;
        border-right: 1px solid #1e293b;
        margin: 0;
        padding: 0 14px;
        font-size: 15px;
        white-space: nowrap;
    }
    /* „Administrare" pe rândul al doilea n-are unde încăpea într-o bară de 46px */
    .admin-side .brand br,
    .admin-side .brand small { display: none; }

    .admin-side a {
        display: flex;
        align-items: center;
        padding: 0 14px;
        white-space: nowrap;
        font-size: 13.5px;
        min-height: 46px;          /* țintă de deget: 46px, nu 30 */
    }
    /* Pe desktop pagina curentă e marcată cu o dungă în stânga; aici, orizontal,
       dunga trebuie să fie dedesubt, altfel ar arăta ca o bară ruptă. */
    .admin-side a.active {
        background: #1e293b;
        box-shadow: inset 0 -3px 0 var(--primary);
    }
    .admin-side hr { display: none; }
    .admin-side form { display: flex; }
    .admin-side .as-link {
        display: flex;
        align-items: center;
        padding: 0 14px;
        white-space: nowrap;
        font-size: 13.5px;
        color: #cbd5e1;
        min-height: 46px;
    }

    /* ---------- Conținutul ---------- */
    .admin-main { padding: 16px 14px 40px; }
    .admin-top  { margin-bottom: 16px; gap: 6px; }
    .admin-top h1 { font-size: 19px; }
    .form-card { padding: 18px 16px; }

    /* ---------- Tabelele devin cartonașe ---------- */
    /* Fiecare rând e un cartonaș; fiecare celulă, o linie „etichetă — valoare".
       Eticheta vine din atributul data-eticheta pus în HTML. Celulele care nu-l
       au (butoane, bifă de selecție) rămân fără etichetă, nu cu una goală —
       de-aia regula `:not([data-eticheta])`. Așa aspectul merge pe TOATE
       tabelele din admin, chiar și pe cele unde încă n-am pus etichete. */
    .admin-main .table {
        border: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    .admin-main .table thead { display: none; }
    .admin-main .table tbody,
    .admin-main .table tr,
    .admin-main .table td { display: block; width: auto; }
    .admin-main .table tr {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow);
        margin-bottom: 10px;
        padding: 4px 14px;
        overflow: hidden;
    }
    .admin-main .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        text-align: right;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        white-space: normal;
    }
    .admin-main .table tr td:last-child { border-bottom: 0; }
    .admin-main .table td::before {
        content: attr(data-eticheta);
        flex: 0 0 auto;
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted);
    }
    .admin-main .table td:not([data-eticheta])::before { content: none; }

    /* DE CE min-width ȘI overflow-wrap: într-un rând flex, elementele au implicit
       „min-width: auto”, adică nu se strâng sub lățimea propriului conținut. O celulă cu un
       text lung (numele unui aparat, un IMEI, o adresă de email) refuza să se îngusteze și
       împingea tot tabelul în afara ecranului — măsurat pe pagina de detaliu a unei cereri de
       evaluare: document de 463px pe un ecran de 375. Eticheta primește și ea o limită, ca o
       etichetă lungă să nu strivească valoarea în două litere pe rând. */
    .admin-main .table td { min-width: 0; overflow-wrap: anywhere; }
    .admin-main .table td::before { max-width: 42%; overflow-wrap: normal; }
    .admin-main .table tr { max-width: 100%; }
    /* Celula marcată drept capul cartonașului: numele produsului sau numărul
       comenzii, scris mare, pe tot rândul, fără etichetă. */
    .admin-main .table td.cell-titlu {
        display: block;
        text-align: left;
        font-size: 15px;
        font-weight: 700;
        padding-top: 12px;
    }
    .admin-main .table td.cell-titlu::before { content: none; }
    /* Pozele din listă rămân mici; fără asta, o miniatură ar împinge rândul. */
    .admin-main .table td img { max-width: 54px; height: auto; border-radius: 8px; }

    /* ---------- Formulare și butoane: lățime plină, ținte mari ---------- */
    .admin-main .btn { min-height: 44px; }
    .admin-main .field input[type="text"],
    .admin-main .field input[type="email"],
    .admin-main .field input[type="number"],
    .admin-main .field input[type="password"],
    .admin-main .field input[type="search"],
    .admin-main .field select,
    .admin-main .field textarea { width: 100%; }
    /* iOS mărește singur pagina când atingi un câmp cu text sub 16px. */
    .admin-main input,
    .admin-main select,
    .admin-main textarea { font-size: 16px; }

    /* Filtrele de sus (tab-urile de status) se trag cu degetul, nu se înghesuie. */
    .admin-main .tags,
    .admin-main .filtre-rand {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .admin-main .tags::-webkit-scrollbar,
    .admin-main .filtre-rand::-webkit-scrollbar { display: none; }
    .admin-main .tag { white-space: nowrap; }
}

/* Pe telefoanele mici, două statistici pe rând citesc mai bine decât una uriașă. */
@media (max-width: 480px) {
    .admin-main .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .admin-main .stat { padding: 14px; }
    .admin-main .stat .v { font-size: 20px; }
    .admin-main .stat .l { font-size: 11.5px; }
}

/* ===== Pagina de AWB (admin/awb.php) ===== */
.awb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
    margin-top: 12px;
}
.awb-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.awb-trei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
.awb-actiuni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn-danger { color: var(--red-d); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; border-color: var(--red); }

@media (max-width: 1024px) {
    /* Coloana din dreapta (serviciu, colet, bani, emitere) coboară sub datele
       comenzii, în ordinea în care se completează. */
    .awb-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
    .awb-doua { grid-template-columns: 1fr; }
    .awb-actiuni .btn { width: 100%; }
}

/* ===== Admin: cele două coloane și câmpul de căutare =====
   Erau scrise în atributul style= al fiecărei pagini. Un stil inline NU poate fi anulat
   dintr-un fișier CSS, așa că pe telefon coloana din dreapta rămânea de 340px lipită lângă
   conținut, iar pagina de detaliu a unei comenzi ieșea din ecran cu peste 200px. Acum sunt
   clase, deci regula de telefon le poate strânge.

   „minmax(0, 1fr)" în loc de „1fr": într-un grid, 1fr are lățime minimă cât conținutul, deci
   un tabel sau un cuvânt lung împinge coloana peste ecran în loc s-o strângă. */
.cart-layout.col-320 { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.cart-layout.col-340 { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.cart-layout.col-360 { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }

.camp-cauta {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    width: 280px;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .cart-layout.col-320,
    .cart-layout.col-340,
    .cart-layout.col-360 { grid-template-columns: minmax(0, 1fr); }
    .camp-cauta { width: 100%; }
    /* Formularele de filtrare din capul listelor: pe un rând pe monitor, unul sub altul pe
       telefon. Fără asta, „câmp + buton" pe un rând depășea ecranul cu câțiva pixeli — destul
       cât pagina să se poată trage lateral, ceea ce pe telefon se simte ca o defecțiune. */
    .admin-main form { max-width: 100%; }
    .admin-main .admin-filtre { flex-wrap: wrap; }
}

/* ============================================================================
   PANOUL DE CONTROL (admin/index.php)
   ============================================================================
   Panoul vechi era trei rânduri de casete identice. Problema nu era estetică, ci
   de citire: când zece elemente au aceeași mărime, aceeași culoare și aceeași
   greutate, ochiul nu are unde să se ducă întâi și le citește pe toate — adică
   pe niciuna. Aici ierarhia e explicită:

     un singur număr mare pe pagină   → încasările perioadei;
     trei stări subordonate lui       → în lucru / pe drum / pierdut;
     o listă de lucru cu cifre mici   → fiecare rând e o acțiune, nu o statistică;
     restul, text mărunt              → context, nu titluri.

   Toate clasele au prefix .pnl- ca să nu se ciocnească cu nimic existent.
   Zero biblioteci: graficul e un SVG scris de mână, barele sunt div-uri.
   ============================================================================ */

/* ---------- Antetul ---------- */
.pnl-antet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pnl-salut { font-size: 20px; font-weight: 700; color: var(--ink); }
.pnl-sub   { font-size: 13px; color: var(--muted); }
.pnl-cauta { display: flex; gap: 8px; }
.pnl-filtre { display: flex; gap: 6px; }

/* ---------- Banda de alertă: una singură, sau niciuna ---------- */
.pnl-alerta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 14.5px;
    line-height: 1.5;
}
.pnl-alerta > div { flex: 1; }
.pnl-alerta > span { font-size: 18px; line-height: 1; }
.pnl-alerta .btn { white-space: nowrap; background: var(--white); }
.pnl-alerta-rea     { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
.pnl-alerta-atentie { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }

/* ---------- Cardul de bază ---------- */
.pnl-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 16px;
}
.pnl-titlu {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.pnl-link-mic {
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary);
}

/* ---------- Banii ---------- */
.pnl-bani-cap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
/* SINGURUL număr mare din pagină. Dacă mai apare unul, ierarhia dispare. */
.pnl-mare {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.pnl-delta { font-size: 13px; font-weight: 600; margin-top: 4px; }
.pnl-sus  { color: var(--green); }
.pnl-jos  { color: var(--red); }
.pnl-egal, .pnl-prea-putin { color: var(--muted); }

.pnl-spark-wrap { flex: 0 0 220px; max-width: 100%; }
.pnl-spark { width: 100%; height: 54px; display: block; }

/* Cele trei stări subordonate: aceeași mărime între ele, mai mici decât numărul mare. */
.pnl-stari {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.pnl-stare {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    transition: background .15s;
}
.pnl-stare:hover { background: var(--bg); }
.pnl-stare small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.pnl-stare b     { display: block; font-size: 19px; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.pnl-stare span  { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ---------- Bara fizic / online ---------- */
.pnl-canal { margin-top: 16px; }
.pnl-sina {
    display: block;
    height: 9px;
    background: var(--line);
    border-radius: var(--pill);
    overflow: hidden;
    flex: 1;
}
.pnl-sina > i, .pnl-umplut {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: var(--pill);
}
.pnl-canal-legenda {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--muted);
}
.pnl-canal-legenda i {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 5px;
}
.pnl-pastila-tejghea { background: var(--primary); }
.pnl-pastila-online  { background: var(--line); }

/* ---------- Grila principală ---------- */
.pnl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}
.pnl-col { min-width: 0; }

/* ---------- Listele de rânduri ---------- */
.pnl-lista { display: flex; flex-direction: column; }
.pnl-rand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--line);
}
.pnl-lista .pnl-rand:last-child { border-bottom: 0; }
a.pnl-rand:hover { background: var(--bg); }
/* Cifra e mică dinadins: e o cantitate de muncă, nu o performanță. */
.pnl-cifra {
    flex: 0 0 auto;
    min-width: 32px;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.pnl-u-rosu  { color: var(--red); }
.pnl-u-amber { color: var(--amber); }
.pnl-u-info  { color: var(--blue); }
.pnl-rand-text { flex: 1; min-width: 0; }
.pnl-rand-text b     { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.pnl-rand-text small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.pnl-sageata { color: var(--muted); font-size: 18px; flex: 0 0 auto; }
.pnl-lista-mica .pnl-rand-text b { font-size: 13.5px; font-weight: 500; }

/* Punctul colorat din „ultimele mișcări” — spune tipul evenimentului fără cuvinte. */
.pnl-punct { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; }
.pnl-punct-tejghea { background: var(--primary); }
.pnl-punct-online  { background: var(--blue); }
.pnl-punct-jurnal  { background: var(--line); }

/* ---------- Cifre mici, în perechi ---------- */
.pnl-cifre { display: flex; gap: 20px; flex-wrap: wrap; }
.pnl-cifre small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.pnl-cifre b     { display: block; font-size: 20px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Barele de vechime ---------- */
.pnl-bare { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.pnl-bara { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.pnl-bara-et { flex: 0 0 108px; color: var(--muted); }
.pnl-bara b  { flex: 0 0 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Text mărunt ---------- */
.pnl-nota { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
.pnl-gol  { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.pnl-subsol {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 8px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* ---------- Clasamentul magazinelor ---------- */
.pnl-mag-bara {
    display: block;
    height: 4px;
    background: var(--line);
    border-radius: var(--pill);
    margin-top: 5px;
    overflow: hidden;
}
.pnl-mag-bara > i { display: block; height: 100%; background: var(--primary); border-radius: var(--pill); }

/* ============================================================================
   TELEFON — panoul are aceleași două aspecte ca restul adminului
   ============================================================================ */
@media (max-width: 1024px) {
    /* Coloana din dreapta (tejghea, raft, cozi) coboară sub lista de lucru, în
       ordinea în care e nevoie de ea. */
    .pnl-grid { grid-template-columns: minmax(0, 1fr); }

    .pnl-antet { gap: 10px; }
    .pnl-cauta { width: 100%; }
    .pnl-card  { padding: 16px 14px; }

    /* Numărul mare rămâne mare, dar nu cât să rupă rândul pe un ecran de 375px. */
    .pnl-mare { font-size: 32px; }

    /* Trei stări una lângă alta pe un ecran îngust ar da coloane de 90px, în care
       „1.366,97 lei” se rupe în trei rânduri. Una sub alta se citesc. */
    .pnl-stari { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pnl-stare { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
    .pnl-stari .pnl-stare:last-child { border-bottom: 0; }
    .pnl-stare small { flex: 0 0 auto; }
    .pnl-stare b { margin: 0; font-size: 17px; }
    .pnl-stare span { flex-basis: 100%; text-align: left; }

    .pnl-spark-wrap { flex: 1 1 100%; }
    .pnl-bara-et { flex: 0 0 96px; }

    /* Tabelul magazinelor devine cartonaș, ca toate tabelele din admin. Bara de
       proporție n-are sens într-un cartonaș îngust — se ascunde, cifra rămâne. */
    .admin-main .pnl-mag .pnl-mag-bara { display: none; }
}

@media (max-width: 560px) {
    .pnl-antet > div:first-child { flex: 1 1 100%; }
    .pnl-filtre { width: 100%; }
    .pnl-cifre { gap: 14px; }
    .pnl-cifre b { font-size: 18px; }
}

/* ============================================================================
   COȘUL PE TELEFON
   ============================================================================
   Ce era greșit, măsurat în pagină, nu bănuit:

   Un rând de coș are TREI copii — poza, datele produsului și totalul pe linie —
   dar sub 768px grila era declarată cu DOUĂ coloane (`80px 1fr`). Al treilea
   copil cădea automat pe rândul următor, în prima coloană, adică în fâșia de
   80px de sub poză. Acolo ajungea suma: „2.999,00 lei” rupt pe două rânduri,
   într-o coloană de lățimea unei miniaturi, sub imagine, unde nimeni nu caută
   prețul. Verificat: al treilea copil ieșea la x=41, lățime 80px.

   Rezolvarea nu e o coloană în plus (ar strânge datele produsului la nimic pe un
   ecran de 375px), ci așezarea explicită: poza în stânga, datele în dreapta, iar
   totalul pe un rând al lui, sub ele, aliniat la dreapta și despărțit cu o linie
   — cum arată un bon.
   ============================================================================ */

.cart-actiuni {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .cart-row {
        /* Rândurile se declară explicit: altfel al treilea copil se plasa singur,
           și se plasa prost. */
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 12px 14px;
        align-items: start;
    }
    /* Poza rămâne sus-stânga și NU se întinde pe două rânduri: dacă s-ar întinde,
       ar trage după ea o miniatură de 130px înălțime, degeaba. */
    .cart-row > a:first-child { grid-column: 1; grid-row: 1; }
    .cart-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }

    /* Totalul pe linie: rând propriu, toată lățimea, aliniat la dreapta.
       Linia punctată de deasupra îl desparte de datele produsului, ca pe un bon —
       fără ea, sub 400px suma pare încă un rând de text din descriere. */
    .cart-row > div:last-child {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 10px;
        border-top: 1px dashed var(--line);
        font-size: 17px;
    }

    /* Ținte de deget: pașii de cantitate erau deja 44px, dar câmpul se strângea. */
    .cart-row .qty input { width: 46px; }

}

@media (max-width: 560px) {
    /* „Continuă cumpărăturile” și „Actualizează coșul” stăteau unul lângă altul,
       ocupând 327 din 375px — încăpeau, dar la limită, iar textul lung al primului
       le făcea inegale. Unul sub altul, ambele pe toată lățimea, se apasă sigur.
       Pragul e 560px, nu 768: pe o tabletă e loc destul, iar două butoane întinse
       pe 720px arată a greșeală, nu a decizie. */
    .cart-actiuni { flex-direction: column; }
    .cart-actiuni .btn { width: 100%; }
}

@media (max-width: 400px) {
    /* Sub 400px, o miniatură de 80px lasă datelor produsului sub 200px. */
    .cart-row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 14px; }
    .cart-row img { width: 64px; height: 52px; }
}

/* ---------- Controlul de cantitate: ținte de deget ---------- */
/* Măsurat în pagină: butoanele „−” și „+” erau 44×24px, iar tot controlul 28px
   înălțime — și în coș, și pe pagina produsului. Lățimea era în regulă, înălțimea
   venea din câmpul de text, care n-avea niciun padding. Pe un ecran tactil asta
   înseamnă că nimerești greșit sau apeși de două ori. 44px e pragul obișnuit
   pentru o țintă apăsată cu degetul; sub el, greșeala devine regulă.
   Nu se schimbă nimic pe desktop: acolo se apasă cu mausul, iar controlul zvelt
   se potrivește mai bine în rândul de produs. */
@media (max-width: 768px) {
    .qty button,
    .qty input {
        min-height: 44px;
        /* iOS mărește pagina când atingi un câmp cu text sub 16px */
        font-size: 16px;
    }
    .qty button { font-size: 20px; line-height: 1; }
}

/* ---------- Coșul: titlul și firimiturile ---------- */
@media (max-width: 640px) {
    /* 32px pe un ecran de 375 mânca două rânduri din prima ecranare, iar sub el
       urma imediat primul produs — titlul lua locul mărfii. */
    .wrap > h1 { font-size: 24px; }
    /* 18px sus și jos pentru un rând de 13px: 57px înălțime pentru „Acasă › Coș”. */
    .crumb { padding: 12px 0 8px; }
}

/* ---------- Adminul pe ecran mare: tabelele late nu mai împing pagina ---------- */
/* Măsurat: pe un ecran de 1280px, admin/products.php ieșea la 1382 și admin/clienti.php la
   1375. Cauza nu era tabelul, ci grila: `.admin-shell` avea coloanele „240px 1fr”, iar într-o
   grilă `1fr` are lățime minimă cât conținutul (min-width: auto). Tabelul de produse are
   unsprezece coloane, deci împingea coloana de conținut, deci împingea pagina — apărea o bară
   de derulare orizontală pe TOT ecranul, care mișca și meniul din stânga.

   `minmax(0, 1fr)` spune limpede că se poate strânge. Iar derularea, când chiar e nevoie de ea,
   se face ÎN interiorul zonei de conținut: tabelul se trage lateral, meniul și antetul rămân pe
   loc. Sub 1024px nu se aplică nimic din toate astea — acolo tabelele sunt deja cartonașe. */
@media (min-width: 1025px) {
    .admin-shell { grid-template-columns: 240px minmax(0, 1fr); }
    .admin-main  { min-width: 0; overflow-x: auto; }
}

/* ===== PAGINILE COMENZII (urmărire, succes, întoarcere de la card, detaliu) =====
   Adăugiri, nu modificări. Paginile astea erau cusute din style= inline: nu semănau cu restul
   site-ului, iar pe telefon stilurile inline băteau media query-urile și pagina se rupea.
   Regulile de aici dau nume pieselor care lipseau și refolosesc limbajul existent — carduri,
   pastile de stare, bara de pași din checkout. */

/* Albastrul deschis era hardcodat (#eff6ff) direct în pagini; la un rebranding s-ar fi pierdut.
   Perechea --blue / --blue-l e acum simetrică cu --green / --green-l. */
:root { --blue-l: #eff6ff; }

/* .page rescrie padding-ul lui .wrap la „32px 0 56px", deci pe orice <div class="wrap page">
   textul stătea LIPIT de marginea ecranului sub ~900px — pe toate paginile de tip text, nu doar
   la comenzi. Regula de aici e mai specifică (două clase), stă mai jos în fișier și pune
   padding-ul orizontal înapoi. Nu modifică nimic pe desktop, unde marginile auto fac treaba. */
.wrap.page { padding: 32px 24px 56px; }

/* Emoji-ul mare al unei stări exista doar închis în .empty (.empty .big). Paginile de rezultat
   îl folosesc și în afara ei — acum are regulă proprie, identică. */
.big { font-size: 56px; line-height: 1; }

/* MOMENTUL unei pagini de rezultat: emoji mare + titlu + o frază, centrate. Doar momentul e
   centrat — cardurile de sub el rămân aliniate normal, ca peste tot pe site. Înainte, întreaga
   pagină era centrată cu text-align inline și fiecare card trebuia „de-centrat" înapoi. */
.moment { text-align: center; padding: 26px 0 6px; }
.moment .big { display: block; margin-bottom: 12px; }
.moment h1 { font-size: 32px; margin: 0 0 8px; }
.moment > p { max-width: 540px; margin: 0 auto; }
.moment .st { font-size: 13px; margin-top: 10px; }

/* Carduri cu rol, în locul chenarelor colorate scrise de mână:
     .accent = AICI E ACȚIUNEA — banii de plătit, decizia de luat. Verde, ca tot ce e activ.
     .info   = iată o informație bună de știut — AWB-ul, factura. Albastru, neutru.
   Aceeași anatomie ca .form-card, deci se pot schimba între ele fără să sară nimic. */
.form-card.accent { border: 2px solid var(--primary); background: var(--primary-l); }
.form-card.info   { border: 1px solid var(--blue); background: var(--blue-l); }

/* Antetul unui .form-card: titlu la stânga, pastilă de stare sau acțiune la dreapta.
   Fratele lui .acc-card-head, dar pentru h3 (cardurile publice au h3, nu h2). */
.card-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-cap h3 { margin: 0; font-size: 17px; }

/* Valoare tehnică pe care omul o copiază: IBAN, AWB, număr de comandă. user-select: all —
   o atingere o selectează întreagă, fără scris de mână greșit. */
.val-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .5px; user-select: all; -webkit-user-select: all; word-break: break-all; }

/* Mesajul de eroare de sub un câmp. Exista doar culoarea scrisă inline, de nouă ori. */
.field .hint.rau { color: var(--red); }

/* Bifa de accept (GDPR) — checkbox-ul NU ia lățimea 100% pe care .field o dă input-urilor. */
.bifa { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.bifa input { width: auto; flex: 0 0 auto; margin-top: 3px; accent-color: var(--primary); }

/* Rândurile cheie–valoare suportă valori lungi: fără astea, un IBAN sau un email lung împingea
   rândul afară din card pe telefon. Se aplică peste .sum-row existent fără să-l modifice. */
.sum-row > span:first-child, .sum-row > b:first-child { flex: 0 1 auto; }
.sum-row > *:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* Pe telefon, TOATE câmpurile de formular publice trec la 16px — sub pragul ăsta iOS mărește
   pagina la fiecare atingere. Regula veche era legată de id-ul #checkout-form și lăsa afară
   urmărirea comenzii și restul formularelor. */
@media (max-width: 1024px) {
    .field input, .field select, .field textarea { font-size: 16px; }
}

/* Îndemnul „mai adaugă X pentru transport gratuit" era scris cu cinci declarații inline,
   identic, în două locuri (coș și sumarul din checkout). O dată, aici. */
.sum-gratuit { font-size: 13px; color: var(--green-d); background: var(--green-l); padding: 8px 10px; border-radius: 8px; }

/* Linia de despărțire dintre liniile comenzii și subtotal — același desen ca peste tot. */
.sum-desp { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }

/* Nume de produs tăiat cu „…" din CSS, nu din PHP: pe desktop aside-ul are 380px și taie,
   pe telefon are tot ecranul și NU mai taie — mb_strimwidth(26) tăia orbește peste tot. */
.sum-row .taiat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }

/* Rând de butoane la finalul unei pagini de rezultat, centrat; pe telefon unul sub altul. */
.actiuni { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 560px) {
    .actiuni { flex-direction: column; }
    .actiuni .btn { width: 100%; }
}

/* Rândul de produs FĂRĂ acțiuni (pagini de comandă: ce ai comandat, nu ce poți schimba).
   Aceeași anatomie ca .cart-row — poză, nume, total — dar cu poza mai mică și fără umbră
   proprie când stă în interiorul unui card. */
.linie-produs { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; }
.linie-produs + .linie-produs { border-top: 1px solid var(--line); }
.linie-produs img { width: 64px; height: 52px; object-fit: contain; background: var(--bg); border-radius: 8px; }
.linie-produs .lp-tot { font-weight: 800; font-size: 15px; white-space: nowrap; }

/* .hint era stilizat doar înăuntrul lui .field — folosit în afara lui (nota „datele vin din
   contul tău" de la factură) cădea pe stilul brut al browserului. Regula de bază e identică;
   cea din .field rămâne și câștigă unde e cazul. */
.hint { font-size: 12px; color: var(--muted); }

/* ======================================================================
   PAGINILE COMENZII — partea a doua
   Fiecare regulă de aici scoate un atribut style= dintr-o pagină; spre
   deosebire de el, poate fi schimbată dintr-un @media, iar la o livrare
   nouă a site-ului se găsește într-un singur loc.
   ====================================================================== */

/* Lățimile paginilor de rezultat. .page e 860px; fiecare pagină de comandă își
   scria altă lățime în HTML — nemodificabilă din @media, invizibilă la rebranding. */
.page.ingusta { max-width: 760px; }
.page.lata    { max-width: 960px; }

/* Nota măruntă de sub un titlu sau de la coada unui card. Scara site-ului e
   15 corp / 13.5 secundar / 12 mărunt; 13 e treapta de notă, scrisă o dată. */
.nota          { font-size: 13px; line-height: 1.55; margin: 10px 0 0; }
.nota.sub-cap  { margin: 4px 0 14px; }
.nota.zero     { margin: 0; }

/* Antetul cu h1 (pagina comenzii din cont): .card-cap h3 exista, h1 păstra 32px
   dar nu și margin:0 — de-aia purta style= inline. */
.card-cap h1 { margin: 0; }

/* Despărțitor strâns în interiorul unui card — .acc-sep are 22px, prea mult
   între două blocuri ale aceluiași card. */
.acc-sep.mic { margin: 12px 0; }

/* Completările lui .hint: bloc, respirație, varianta „sub element", eroarea apăsată. */
.hint { display: block; margin-top: 4px; }
.hint.rau { font-weight: 600; }
.hint.jos { margin-top: 0; margin-bottom: 10px; }

/* Câmp îngust (cod poștal). */
.field.ingust { max-width: 220px; }

/* Bandă de mesaj în interiorul unui bloc — .flash are margin 18px 0, prea mult
   înaintea unui grup de câmpuri. */
.flash.strans { margin: 0 0 12px; }

/* Opțiunea de plată indisponibilă. Fără clasa asta, .pay-opt:hover se aplica ȘI
   pe cardul mort, iar pe touch :hover rămâne lipit după atingere — opțiunea
   indisponibilă se aprindea verde ca și cum ar fi fost aleasă. */
.pay-opt.off,
.pay-opt.off:hover { border-color: var(--line); background: var(--white); opacity: .5; cursor: not-allowed; }
.pay-opt > div { min-width: 0; }
.pay-opt input { flex: none; }
/* Iconița metodei de plată — aceeași semnătură ca SVG-urile din .pdp-usps. */
.pay-opt svg { width: 18px; height: 18px; flex: none; vertical-align: -3px; margin-right: 7px;
               fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* <details> îmbrăcat ca .form-card: card pliabil care arată EXACT ca celelalte
   carduri din pagină. .faq-item există, dar e un card fără umbră cu alt padding —
   într-o coloană de .form-card-uri ar arăta străin. list-style:none NU ascunde
   triunghiul în Safari, de-aia și ::-webkit-details-marker. */
details.form-card > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 16px;
    padding-right: 26px;
    position: relative;
    user-select: none;
}
details.form-card > summary::-webkit-details-marker { display: none; }
details.form-card > summary::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    transition: transform .15s;
}
details.form-card[open] > summary::after { transform: translateY(-50%) rotate(180deg); color: var(--primary); }
details.form-card[open] > summary { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; }
details.form-card > summary .muted { font-weight: 400; font-size: 13.5px; }

/* Ritmul paragrafelor din blocurile de rezumat (pasul de confirmare). Clasa era
   în HTML de la început și n-a avut niciodată o regulă — de-aia purtau
   paragrafele zece style="margin:4px 0". */
.rezumat-bloc p { margin: 4px 0; }
.rezumat-bloc p.muted { font-size: 13.5px; }

/* Linkul „← Înapoi" de sub coloana de formular și titlul paginii de checkout. */
.inapoi { margin: 4px 0 0; }
.cap-checkout { padding: 10px 0 14px; margin: 0; }

/* Bifa: ținta de deget. width:auto (regula de bază) înseamnă ~13px — pe ULTIMA
   acțiune dinaintea plății. Standardul site-ului pentru ținte e 44px; o bifă de
   20–24px cu eticheta ei clicabilă îl atinge. */
.bifa input { width: 20px; height: 20px; margin-top: 1px; }
@media (max-width: 768px) { .bifa input { width: 24px; height: 24px; } }
.bifa.sus { margin-top: 16px; }
.bifa.jos { margin-bottom: 12px; }

/* Coloana din mijloc a rândului de produs. */
.linie-produs .lp-date { min-width: 0; }
.linie-produs .lp-nume { font-weight: 700; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.linie-produs .lp-nume a { color: inherit; }
.linie-produs .lp-nume a:hover { color: var(--primary); }
.linie-produs .lp-sub  { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.linie-produs .lp-sub .badge { font-size: 10px; vertical-align: 1px; }
@media (max-width: 400px) {
    .linie-produs { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
    .linie-produs img { width: 48px; height: 40px; }
}

/* Sub 1024px coloana s-a prăbușit: sumarul e deja sub formular, deci sticky nu
   mai are sens — iar bara fixă de jos are nevoie de reguli ca să nu se rupă pe
   pasul de confirmare, unde textul de lângă total e lung. */
@media (max-width: 1024px) {
    .summary { position: static; }
    .sumar-bara-total { flex: none; white-space: nowrap; }
    .sumar-bara-nota  { min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
    .sumar-bara .btn  { flex: none; white-space: nowrap; min-height: 44px; }
}

/* Sub 640px: sumarul se strânge ca .form-card, butoanele cresc cât degetul. */
@media (max-width: 640px) {
    .summary { padding: 18px 16px; }
    .cart-layout .btn { min-height: 44px; }
}

/* Anularea comenzii: text roșu, nu buton — ca „Elimină" din coș. Un buton întreg pentru cea mai
   rară acțiune din pagină îi dădea greutatea unui îndemn. În plus, .btn-danger nu-și definea
   fundalul, deci pe <button> rămânea culoarea implicită a browserului — de-aia arăta străin. */
.btn-danger { background: var(--white); }
.anuleaza-text {
    background: none;
    border: 0;
    padding: 0;
    color: var(--red);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.anuleaza-text:hover { color: var(--red-d); text-decoration: underline; }