html {
  overflow-y: scroll;
}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

footer{
  flex-shrink:0;
}



:root{ --bg:#0f1218; --panel:#161a22; --text:#eaeef6; --muted:#a7b0c2; --brand:#5b8cff; --ok:#34d399; --warn:#f59e0b; --err:#ef4444; --card:#1b2030; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Noto Sans', 'Helvetica Neue', Arial; }
a{ color:var(--brand); text-decoration:none; }
.header{ display:flex; gap:.75rem; align-items:center; padding:.8rem 1rem; border-bottom:1px solid #23293a; }
.header .logo{ width:46px; height:30px; background:#243049; border-radius:.5rem; display:grid; place-items:center; font-weight:800; letter-spacing:.5px; }
.header .brand{ font-weight:800; font-size:1.05rem; }
.container{ max-width:1210px; margin:0 auto; padding:1rem; }
.panel{ background:var(--panel); border:1px solid #252c3f; border-radius:14px; padding:1rem 1.25rem; }
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.card{ background:var(--card); border:1px solid #23293a; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#ffffff; display:grid; place-items:center; }
.thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.card .body{ padding:.9rem; display:flex; flex-direction:column; gap:.4rem; }
.card h3{ margin:0; font-size:1rem; line-height:1.25; }
.card .meta{ color:var(--muted); font-size:.85rem; }
.row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.input{ width:100%; padding:.7rem .9rem; background:#0f1423; border:1px solid #263049; color:var(--text); border-radius:12px; outline:none; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .9rem; background:var(--brand); color:white; border:0; border-radius:12px; cursor:pointer; font-weight:600; text-align:center; }

.btn-filter-aux{
  font-size:.8rem;
  padding:.4rem .9rem;
  background:#0f1423;
  border:1px solid #263049;
  color:#fff;
  border-radius:999px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}



html:not([data-theme="light"]) .btn-filter-aux{
  background:#0f1423;
  border-color:#263049;
  color:#fff;
}
html[data-theme="light"] .btn-filter-aux{
  background:#f9fafb;
  border-color:#111827;
  color:#111827;
}


.btn-filter-aux:hover,
.btn-filter-aux:focus-visible{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
#btn-view-favorites-top:hover,
#btn-view-favorites-top:focus-visible{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}


.btn.ghost{ background:transparent; border:1px solid #2a334b; color:var(--text); }
.tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tag{ background:#0f1423; color:#c9d2e6; border:1px solid #263049; border-radius:999px; padding:.2rem .5rem; font-size:.75rem; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid #23293a; padding:.5rem .25rem; vertical-align:top; }
.dim{ color:var(--muted); }
.gallery{ display:flex; gap:.6rem; flex-wrap:wrap; }
.gallery img{ width:100%; max-width:500px; object-fit:contain; background:#0e1320; border-radius:10px; }
.footer{ margin:2rem 0; color:var(--muted); font-size:.85rem; position:relative; display:flex; justify-content:center; align-items:center; }
.status.ok{ color:var(--ok); }
.status.warn{ color:var(--warn); }
.status.err{ color:var(--err); }

.header .logo img{height:48px;width:auto;display:block;}


/* Navigation + homepage layout */
.header .nav{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; font-size:.85rem; }
.header .nav a{ color:var(--muted); padding:.18rem .7rem; border-radius:999px; border:1px solid transparent; }
.header .nav a:hover{ border-color:var(--brand); color:var(--text); background:rgba(255,255,255,.06); }

.page{ max-width:1100px; margin:0 auto; padding:1.3rem 1rem 2.4rem; }

.page.home .hero{ background:var(--panel); border:1px solid #252c3f; border-radius:18px; padding:1.5rem 1.75rem; margin-bottom:1.25rem; }
.page.home .hero h1{ margin:0 0 .75rem; font-size:1.6rem; }
.hero-subhead{ margin:0 0 1rem; font-size:.98rem; color:var(--muted); max-width:44rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.55rem 1.25rem; border-radius:999px; font-weight:600; border:1px solid transparent; cursor:pointer; font-size:.92rem; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-secondary{ background:transparent; color:var(--brand); border-color:var(--brand); }

.benefit-bar{ background:#101522; border-radius:999px; padding:.7rem 1.1rem; margin-bottom:1.25rem; font-size:.86rem; color:var(--muted); }
.benefit-bar .microcopy{ margin-top:.25rem; font-size:.78rem; opacity:.9; }

.why-short, .range-highlight{ background:var(--panel); border:1px solid #252c3f; border-radius:18px; padding:1.25rem 1.6rem; margin-bottom:1.25rem; }
.why-short h2, .range-highlight h2{ margin-top:0; font-size:0.96rem; }
.why-short ul{ padding-left:1.1rem; margin:0; font-size:.95rem; }
.why-short li+li{ margin-top:.35rem; }

.range-highlight .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.range-highlight .card{ background:var(--card); border-radius:14px; padding:1rem 1.1rem 1.2rem; border:1px solid #252c3f; }
.range-highlight .card h3{ margin:.1rem 0 .4rem; font-size:1.02rem; }
.range-highlight .card p{ margin:0 0 .6rem; font-size:.9rem; color:var(--muted); }
.range-highlight .card-link{ font-size:.85rem; color:var(--brand); }


/* === USV v2.1 overrides === */

/* Card text hierarchy in catalog & grids */
.card-title{
  font-size:0.96rem;
  font-weight:700;
  line-height:1.25;
  color:#1e3a8a;
  text-align:center;
}
.card-code{
  font-size:0.768rem;
  font-weight:400;
  color:#1e3a8a;
}
.card-price{
  font-size:1.38rem;
  font-weight:700;
  color:#f59e0b;
  margin-top:.55rem;
}
.price-suffix{font-weight:400;font-size:0.8em;}

.card-internal{
  font-size:0.88rem; /* ~10% mai mare decât 0.8rem */
  color:#6b7280;    /* gri puțin mai intens (aprox. +30% ca percepție) */
  margin-top:.9rem;
}

/* Header layout & nav buttons */
.header{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.8rem 1rem;
  border-bottom:1px solid #23293a;
  background:rgba(5,8,15,.94);
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(12px);
}
.header .logo-wrap{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:#e5e7eb;
}
.header .logo{
  width:80px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#020617;
}
.header .brand{
  font-weight:800;
  font-size:1.38rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nav-main{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
}
.nav-main .nav-btn{
  min-height:44px;
}

.nav-btn{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-width:82px;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size:.7rem;
  line-height:1.1;
  cursor:pointer;
  transition:background .15s ease-out, transform .08s ease-out, box-shadow .15s ease-out, border-color .15s ease-out, opacity .15s ease-out;
}
.nav-btn .nav-text-line{
  white-space:nowrap;
}

.nav-btn.nav-theme .nav-text-line{
  white-space:pre-line;
  text-align:center;
}

.nav-btn.nav-lang .nav-text-line{
  transform:translateY(-0.1rem);
}

.nav-btn .nav-flag{
  display:block;
  width:21px;
  height:auto;
  margin-top:.05rem;
}
.nav-btn:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
}
.nav-btn.is-active{
  background:rgba(15,23,42,.92);
  border-color:rgba(55,65,81,.8);
  opacity:.75;
  box-shadow:none;
  cursor:default;
}
.nav-btn.nav-home.is-active{
  background:var(--bg);
}

.nav-btn.is-active:hover{
  transform:none;
  box-shadow:none;
}

html[data-theme="light"] .nav-btn.nav-home.is-active:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
  opacity:1;
}


/* Home hero & panels as distinct "cartușe" */
.home-hero{
  text-align:center;
  padding:1.25rem 0 1rem;
}
.home-hero-logo{
  display:grid;
  place-items:center;
  margin-bottom:.6rem;
}
.home-hero-logo img{
  width:240px;
  height:auto;
}
.home-hero-brand{
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.3rem;
}
.home-hero-tagline{
  font-size:1.1rem;
  font-weight:700;
}
.home-block{
  margin-top:1.4rem;
}
.home-block h2{
  text-align:left;
}
.home-advantages-summary{
  margin-top:1.2rem;
  text-align:center;
}
.home-advantages-summary p{
  display:inline-block;
  padding:.35rem .9rem;
  border-radius:.75rem;
  border:2px solid rgba(148,163,184,.7);
  background:var(--bg);
  margin:0;
  color:#800000;
 text-align:center;}
.home-advantages-summary .home-adv-line{display:block;text-align:center;}


.home-cta-wrap{
  margin:1.6rem 0;
  display:flex;
  justify-content:center;
}
.home-cta-buttons{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:72rem; /* aliniere cu panoul "Gama noastră de aparate" */
  padding:0 3.5rem; /* aproximativ o înălțime de buton la stânga și la dreapta */
  gap:2rem;
}

.home-cta-buttons.home-cta-single{
  justify-content:center;
}


.home-cta-buttons .btn.hero{
  --usv-cta-h: 3.2rem;
  height:var(--usv-cta-h);
  width:calc(6 * var(--usv-cta-h));
  flex:0 0 auto;
  min-width:0;
  font-weight:400; /* fără bold pentru textele din cele trei butoane */
  font-size:1rem;
  padding:0 1.6rem;
  transform:none;

  border:2px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}

.home-cta-buttons .btn.hero{
  transition:background-color .15s ease,color .15s ease;
}
.home-cta-buttons .btn.hero:hover,
.home-cta-buttons .btn.hero:focus-visible{
  background:#fff;
  color:var(--brand);

  border-color:var(--brand);
}



/* "Gama noastră de aparate" larger & centered */
.home-gama-title{
  text-align:center;
  font-size:1.5rem;
  margin-top:0;
  margin-bottom:1.5rem;
  text-transform:uppercase;
}

/* Category cards as separate blocks */
.category-block{
  border-radius:18px;
  border:1px solid #1f2937;
  background:#020617;
  padding:1rem 1.1rem 1.1rem;
  margin-bottom:1rem;
}

html:not([data-theme="light"]) .home-gama .category-block{
  background:var(--bg);
}

/* Bottom "ACASĂ" btn */
.home-back-top{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
}

/* Footer: simpler, fără text demo */
.footer{
  margin-top:2.1rem;
  padding:1.1rem 1rem 1.6rem;
  font-size:.8rem;
  color:#9ca3af;
  text-align:center;
  border-top:1px solid #111827;
  background:#020617;
}

/* Contact form */
.contact-form{
  max-width:620px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.contact-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.contact-row .field{
  flex:1 1 200px;
}
.field label{
  display:block;
  font-size:.82rem;
  color:#9ca3af;
  margin-bottom:.15rem;
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:.5rem .7rem;
  border-radius:10px;
  border:1px solid #374151;
  background:#020617;
  color:#e5e7eb;
  font-size:.9rem;
}
.field textarea{
  min-height:120px;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{
  color:#6b7280;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.35);
}
.contact-actions{
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
}

/* ACASĂ button */
.btn.back-home{
  min-width:120px;
}

/* Responsive nav tweaks */
@media (max-width: 960px){
  .header{
    flex-wrap:wrap;
    gap:.5rem;
  }
  .nav-main{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}



/* === Catalog cards: refined layout === */
.card{
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
}
.card-body{
  padding:.9rem;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:.6rem;
}
.card-main-text{
  display:flex;
  flex-direction:column;
  flex:1;
  justify-content:space-between; /* împinge blocul cu prețul și codul intern spre partea de jos a casetei */
}
.card-names{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.2rem;
  min-height:7rem; /* rezervă spațiu pentru până la ~3 rânduri de titlu și 3 rânduri de cod */
}
.card-title{
  font-size:1rem;
  line-height:1.25;
  font-weight:700;
  text-align:center;
}
.card-code{
  font-size:.95rem;
  font-weight:600;
  text-align:center;
}
.card-meta{
  margin-top:.5rem;
  text-align:center;
}
.card-price{
  font-size:1.14rem;
  font-weight:700;
}
.card-internal{
  font-size:.72rem;
}
.card-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  padding-bottom:.35rem; /* aproximativ o treime din înălțimea butonului */
}
/* Thumb: vertical window, images aligned to bottom */
.thumb{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  background:#020617;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.thumb img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  align-self:flex-end;
}

/* Disabled buttons */
.btn.disabled,
.btn.ghost.disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}
.btn.ghost.disabled{
  color:#9ca3af;
}

/* === Product page layout === */
.product-panel{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.product-head-main{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.product-code{
  font-weight:600;
}
.product-price{
  font-weight:700;
}
.product-internal{
  font-size:.9rem;
}

.product-main{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr);
  gap:1.5rem;
  align-items:flex-start;
}
@media (max-width: 900px){
  .product-main{
    grid-template-columns:1fr;
  }
}

.product-gallery{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.product-main-left{
  display:flex;
  flex-direction:column;
}

.product-actions-main{
  margin-top:2.8rem;
  display:flex;
  justify-content:space-between;
  gap:.75rem;
}

.product-actions-main .btn,
.btn-back{
  border-radius:14px;
  border-width:1px;
  border-style:solid;
  border-color:#1f2937;  /* la fel ca rama pozei și a tabelului */
}

/* Fișă producător – text cu bold suplimentar */
#btn-spec{
  font-weight:700;
}

/* În tema întunecată, butoanele secundare de pe pagina de produs au fundal alb ca rama pozei */
html:not([data-theme="light"]) .product-actions-main .btn.ghost,
html:not([data-theme="light"]) .btn-back{
  background:#ffffff;
  color:#111827;
}

.btn-back:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
  color:#e5e7eb;
}

.product-actions-main #btn-spec:not(.disabled):hover,
.product-actions-main #btn-video:not(.disabled):hover,
.product-actions-main #btn-offer:not(.disabled):hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
  color:#e5e7eb;
}

.product-actions-main .btn{
  flex:1 1 0;
  justify-content:center;
}

@media (max-width: 900px){
  .product-actions-main{
    margin-top:1.8rem;
  }
}
.product-main-image{
  border-radius:14px;
  border:1px solid #1f2937;
  background:#ffffff;
  padding:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.product-main-image img{
  max-width:100%;
  max-height:480px;
  object-fit:contain;
}
.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.28);
  cursor:pointer;
  opacity:0.8;
  transition:opacity .15s ease, background-color .15s ease;
}
.gallery-arrow:hover{
  opacity:1;
  background:rgba(15,23,42,0.45);
}
.gallery-arrow:focus-visible{
  outline:2px solid #e5e7eb;
  outline-offset:2px;
}
.gallery-arrow-left{
  left:.5rem;
}
.gallery-arrow-left::before{
  content:'';
  display:block;
  border-style:solid;
  border-width:.55rem .75rem .55rem 0;
  border-color:transparent #e5e7eb transparent transparent;
}
.gallery-arrow-right{
  right:.5rem;
}
.gallery-arrow-right::before{
  content:'';
  display:block;
  border-style:solid;
  border-width:.55rem 0 .55rem .75rem;
  border-color:transparent transparent transparent #e5e7eb;
}

.product-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.product-thumbs .thumb{
  width:76px;
  aspect-ratio:3/4;
  border-radius:10px;
  overflow:hidden;
}

.product-specs{
  border-radius:14px;
  border:1px solid #1f2937;   /* la fel ca rama pozei principale */
  background:#ffffff;          /* interior alb */
  padding:.75rem 1rem;
}
.product-specs-actions{
  margin:0 0 calc(2*0.6rem + 1em) 0; /* spațiu vertical ≈ înălțimea butonului */
  display:flex;
  justify-content:space-between;
  gap:.75rem;
}

.product-specs-actions.product-specs-only-main-favorite{
  justify-content:flex-end;
}


.product-specs-actions .product-specs-btn{
  /* înălțimea rezultă din stilul de bază .btn (aceeași ca la „Înapoi la catalog”) */
  width:calc(4.5 * (2*0.6rem + 1em)); /* raport 1:4,5 (H:L) aproximat după înălțime */
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem .9rem; /* identic cu .btn pentru a păstra aceeași înălțime */
}

.product-specs-actions .favorites-global-btn{
  font-size:.9rem;
  background:#fff;
  color:var(--brand);
  border:2px solid var(--brand);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;

  font-weight:400;
  line-height:1.15;
  min-height:calc(2 * 1.15em + 2*0.6rem);
}

.product-specs-actions .favorites-global-btn:hover,
.product-specs-actions .favorites-global-btn:focus-visible{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}


.spec-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.spec-table th{
  text-align:left;
  vertical-align:top;
  width:40%;
  padding:.2rem .6rem .2rem 0;
  color:#111827;               /* text mai închis pentru contrast (~30% mai închis) */
  font-weight:600;
}
.spec-table td{
  padding:.2rem 0;
  color:#111827;               /* același ton ca în stânga tabelului */
}
.spec-table tr{
  position:relative;
}
.spec-table tr::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(55,65,81,.75); /* linie mai închisă (~30% mai închisă) */
}
.spec-table tr:last-child::after{
  content:none;
}


.product-actions{
  margin-top:1.5rem;
  display:flex;
  justify-content:flex-end;
}
.product-actions .btn-back{
  margin-left:0;
}

/* === USV HEADER & NAV – OVERRIDE FINAL v3 === */
.header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  align-items:center;
  column-gap:1rem;
  padding:.6rem 1.4rem;
  border-bottom:1px solid #23293a;
}

.header .logo{
  width:auto;
  height:auto;
  background:transparent;
  border-radius:0;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header .brand{
  font-weight:800;
  font-size:1.24rem;
}

/* CONTAINER MENIU */
.nav-main{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  flex-wrap:nowrap;
}

/* BUTOANE – TOATE EGAL CA LĂȚIME ȘI ÎNĂLȚIME */
.nav-btn{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  /* toate butoanele aceeași lățime (pentru 6 butoane în 2/3 din header) */
  flex:0 0 100px;

  /* aceeași înălțime, apropiată de logo */
  min-height:42px;

  padding:.45rem 0;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;

  font-size:.68rem;

  line-height:1.1;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease-out,
             border-color .15s ease-out,
             opacity .15s ease-out;
}

.nav-btn .nav-text-line{
  white-space:nowrap;
  display:block;
  width:100%;
  text-align:center;
}

/* Pe ecrane mai înguste, lăsăm meniu să se rupă pe două rânduri */
@media (max-width: 1100px){
  .nav-main{
    flex-wrap:wrap;
    gap:.4rem;
  }
}

/* Justify text inside home panels */
.panel.home-block p,
.panel.home-block li{
  text-align:justify;
}
/* Home panels lighter and with stronger borders */
.panel.home-hero,
.panel.home-block,
.panel.home-gama{
  background:#232938;       /* ~30% mai deschis decât var(--panel) */
  border-color:#3b4254;
  border-width:1px;
}

/* Category blocks inside "Gama noastră de aparate" */

/* Category titles and subchips inside "Gama noastră de aparate" (dark theme focus) */
.home-gama .category-block h3{
  display:inline-block;
  padding:.35rem .9rem;
  border-radius:.75rem;
  border:2px solid rgba(148,163,184,.7);
  background:rgba(148,163,184,.25);      /* gri ~25% */
}

.home-gama .subchips{
  margin-top:.8rem;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}

.home-gama .subchips .chip{
  border-radius:999px;
  border:1px solid #374151;
  background:rgba(148,163,184,.25);   /* gri ~25% */
  color:#111827;
  padding:.22rem .7rem;
  font-size:.78rem;
  cursor:pointer;
  transition:background .15s ease-out, transform .08s ease-out, box-shadow .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}

html:not([data-theme="light"]) .home-gama .subchips .chip{
  background:var(--bg);
  color:var(--text);
}

html:not([data-theme="light"]) .home-gama .subchips .chip:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
}

html[data-theme="light"] .home-gama .subchips .chip:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(148,163,184,.55);
  transform:translateY(-1px);
  color:#e5e7eb;
}

.home-gama .category-block{
  background:transparent;   /* lăsăm să se vadă fundalul general al panoului */
  border-color:#374151;    /* puțin mai închis */
  border-width:3px;        /* contur mai gros */
}

/* Reduce vertical padding around "Gama noastră de aparate" title */
.panel.home-gama{
  padding-top:.75rem;
  padding-bottom:.75rem;
}

/* Highlight the final essence paragraph */
.home-essence{
  margin-top:1.25rem;
  font-weight:700;
  font-size:1.1em; /* ~10% larger */
  text-align:center;
  color:#c2410c; /* dark brick red */
}


.home-gama .category-block h3{
  display:inline-block;
  padding:.35rem .9rem;
  border-radius:.9rem;
  border:2px solid #374151;
  background:#374151;      /* aceeași culoare ca și conturul */
  color:#f9fafb;
}


/* Ensure white background only behind catalog card images */
.card .thumb{
  background:#ffffff;
}

.product-head{
  margin:1.3rem 0;
  text-align:left;
}
.product-head-main{
  align-items:flex-start;
}
.product-head-main h1#p-title{
  font-size:1.56rem;
  font-weight:700;
  color:#1e3a8a;
}
.product-head .product-code{
  font-size:1.25rem;
  font-weight:400;
  color:#1e3a8a;
}
.product-head .product-price{
  font-size:1.8rem;
  font-weight:700;
  color:#f59e0b;
  margin-top:.5rem;
}
.product-head .product-internal{
  font-size:1rem;
  color:#9ca3af;
  margin-top:.9rem;
}


/* Pill-style highlight for product names and codes in catalog and product pages */
.card-title,
.card-code{
  display:inline-block;
  padding:0.25rem 0.85rem;
  border-radius:9999px;
  background:#ffffff; /* gri-albăstrui mai deschis decât fundalul cardului */
  box-shadow:0 0 0 1px rgba(148,163,184,0.45);
}

.card-title{
  margin-bottom:.25rem;
}

.product-head-main h1#p-title,
.product-head .product-code{
  display:inline-block;
  padding:0.3rem 1rem;
  border-radius:9999px;
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(148,163,184,0.45);
}

.product-head .product-code{
  margin-top:.4rem;
}

.home-back-top .btn.back-home{
  background:var(--bg);
  border-color:#2a334b;
}



html[data-theme="light"] .nav-btn.nav-home.is-active{
  background:rgba(15,23,42,.9);
  border-color:rgba(148,163,184,.7);
  opacity:1;
}

html[data-theme="light"] .header .brand{
  color:#0f172a;
}

/* === Light theme (USV v3.11) === */
html[data-theme="light"]{
  --bg:#f3f4fb;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#4b5563;
  --brand:#2563eb;
}

html[data-theme="light"] body{
  background:var(--bg);
  color:var(--text);
}

html[data-theme="light"] .header{
  border-bottom:1px solid #e5e7eb;
  background:rgba(249,250,251,.96);
}

html[data-theme="light"] .panel{
  background:var(--panel);
  border-color:#e5e7eb;
}

html[data-theme="light"] .card{
  background:var(--card);
  border-color:#e5e7eb;
}

html[data-theme="light"] .thumb{
  background:#ffffff;
}

html[data-theme="light"] .card-body{
  background:#e5e7eb;
}

html[data-theme="light"] .input{
  background:#f9fafb;
  border-color:#d1d5db;
  color:var(--text);
}

html[data-theme="light"] .btn.ghost{
  border-color:#cbd5f5;
}

.product-actions-main .btn.ghost,
.btn-back{
  border-color:#1f2937;
}


html[data-theme="light"] .tag{
  background:#e5e7eb;
  color:#111827;
  border-color:#cbd5f5;
}

html[data-theme="light"] .gallery img{
  background:#f9fafb;
}

html[data-theme="light"] .footer{
  color:#6b7280;
}

main .panel p[data-i18n="about.body"]{
  text-align:justify;
}


/* Make first category title in 'Gama noastră de aparate' behave like a link (similar to chips) */
.category-block h3.gama-cat-link{
  cursor:pointer;
  display:inline-block;
  padding:.25rem .8rem;
  border-radius:1rem;
  transition:background .15s ease-out, color .15s ease-out, box-shadow .08s ease-out, transform .08s ease-out;
}

.category-block h3.gama-cat-link:hover{
  background:rgba(30,64,175,.95);
  color:#f9fafb;
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
}

/* Butoane multiple VIDEO pe pagina de produs (2–4 clipuri) */
.product-actions-videos{
  margin-top:3.2rem;          /* distanță clară față de rândul de sus, aprox o înălțime de buton */
  display:flex;
  width:100%;
  justify-content:space-evenly;
  gap:1.5rem;
}

.product-actions-videos .btn{
  min-width:8.5rem;
  padding:.55rem 1.2rem;
  background:#ffffff;
  color:#111827;
  border:1px solid #2a334b;
}

/* În tema întunecată păstrăm același fundal alb și text închis pentru butoanele VIDEO */
html:not([data-theme="light"]) .product-actions-videos .btn{
  background:#ffffff;
  color:#111827;
}

.product-actions-videos .btn:hover{
  background:var(--brand);
  color:#ffffff;
  border-color:var(--brand);
}

/* Butonul ACASĂ de jos din pagina Home – efect albastru la hover */
.home-back-top .back-home:hover{
  background:var(--brand);
  color:#ffffff;
  border-color:var(--brand);
}



/* === USV v4.03 – Fix hover în schema întunecată pentru butoanele "Înapoi la catalog" === */
html:not([data-theme="light"]) .btn-back:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
  color:#e5e7eb;
}


/* === USV v4.04 – Stil hover pentru butoanele VIDEO multiple (VIDEO 1…4) === */
/* În tema întunecată, la hover devin albastre exact ca butoanele principale de acțiune. */
html:not([data-theme="light"]) .product-actions-videos .btn:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
  color:#e5e7eb;
}

/* În tema luminoasă păstrăm același efect de accent la hover pe butoanele VIDEO multiple. */
html[data-theme="light"] .product-actions-videos .btn:hover{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
  color:#e5e7eb;
}


/* === USV v4.05 – Hover inversat pentru butonul "Detalii" din catalog === */
/* Butonul rămâne albastru la bază (stil .btn), dar la hover fundalul devine alb iar textul și conturul devin albastre. */
.card-actions .btn{
  /* ne bazăm pe stilul global .btn pentru background/culoare de bază */
}

.card-actions .btn:hover{
  background:#ffffff;
  color:var(--brand);
  border-color:var(--brand);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  transform:translateY(-1px);
}

/* Stil pentru butonul de favorite când este activ (selectat) */
.btn-favorite{
  font-size:.9rem; /* aliniat cu .spec-table (ex. „Nume produs”) */
  font-weight:400; /* normal în starea „Adaugă la favorite” */
  background:#fff;
  color:var(--brand);
  border:2px solid var(--brand);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}


.btn-favorite.is-favorite{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  color:#e5e7eb;

  font-weight:700;
}

html[data-theme="dark"] .btn-favorite.is-favorite,
html:not([data-theme="light"]) .btn-favorite.is-favorite{
  background:rgba(30,64,175,.95);
  border-color:rgba(129,140,248,1);
  box-shadow:0 10px 24px rgba(15,23,42,.7);
  color:#e5e7eb;
}

.footer-copy{ display:inline-block; }

.footer-version{ position:absolute; right:0.75rem; bottom:0.75rem; }


/* === Layout header pentru mobil (max-width: 768px) === */
@media (max-width: 768px){

  html, body{
    overflow-x:hidden;
  }

  .header{
    display:grid;
    grid-template-rows:auto auto;
    grid-template-columns:1fr;
    align-items:start;
    padding:.6rem .75rem .4rem;
    transition:transform .22s ease-out;
  }

  .header .logo-wrap{
    display:flex;
    align-items:center;
    gap:.5rem;
  }

  .header .logo{
    width:40px;
    height:26px;
  }

  .header .brand{
    font-size:.9rem;
    line-height:1.05;
  }

  .header .brand .brand-line{
    display:block;
    line-height:1.02;
  }

  /* Nav principal: 3 butoane sus, 2 jos, in romb */
  .nav-main{
    grid-row:2;
    margin-left:0;
    /* spatiu mai mare sub zona cu logo + LANGUAGE/FUNDAL */
    margin-top:3.2rem;
    padding-top:.45rem;
    padding-bottom:.45rem;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    column-gap:.35rem;
    row-gap:.3rem;
    justify-items:center;
    font-size:.7rem;
    position:static;
    border-top:1px solid rgba(148,163,184,.35);
    border-bottom:1px solid rgba(148,163,184,.35);
    margin-bottom:.45rem;
  }

  .nav-main .nav-btn{
    min-height:40px;
    min-width:0;
    padding:.35rem .8rem;
  }

  .nav-main .nav-home{ grid-column:1; grid-row:1; }
  .nav-main .nav-about{ grid-column:3; grid-row:1; }
  .nav-main .nav-contact{ grid-column:5; grid-row:1; }
  .nav-main .nav-catalog{ grid-column:2; grid-row:2; }
  .nav-main .nav-gama{ grid-column:4; grid-row:2; }

  /* LANGUAGE / FUNDAL: butoane mici in dreapta sus, deasupra nav-ului */
  .nav-lang,
  .nav-theme{
    position:absolute;
    right:.75rem;
    width:auto;
    min-width:0;
    padding:.04rem .45rem;
    font-size:.5rem;
    min-height:18px;
  }

  .nav-lang{
    top:.8rem;
  }

  .nav-theme{
    top:2.4rem;
  }

  /* Spatiu sub header pentru continut */
  main.container{
    padding-top:3.9rem;
  }

  /* Ascundere header la scroll (folosit de JS) */
  .header.header-hidden{
    transform:translateY(-115%);
  }
}