:root{
  --bg:#102245; --bg-2:#0e1220; --card:#121829; --text:#e7ecff; --muted:#a6b0cf; --brand:#4ea2ff; --brand-2:#00d2ff; --ok:#27d980; --warn:#ffb020;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--text)}
a{color:var(--brand); text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:24px}
.topbar{position:sticky; top:0; backdrop-filter:saturate(120%) blur(6px); background:#0e1b4d; border-bottom:1px solid rgba(255,255,255,.07); z-index:20}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.4px}
.brand img{height:34px; width:auto; border-radius:8px}
.main-nav a{margin-right:14px}
.foot-nav {    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}
.lang-switch button,.user-btn{background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}
.lang-switch button.active{border-color:var(--brand); box-shadow:0 0 0 2px rgba(78,162,255,.25) inset}
.user-dd{position:relative}
.user-menu{position:absolute; right:0; top:110%; background:rgba(18,24,41,.98); border:1px solid rgba(255,255,255,.1); border-radius:12px; min-width:180px; display:none; box-shadow:var(--shadow)}
.user-menu a{display:block; padding:10px 12px; color:var(--text)}
.user-dd.open .user-menu{display:block}
.input{padding:10px 12px; border-radius:10px; background:#29303d; border:1px solid rgba(255,255,255,.12); color:var(--text); outline:none}
.select { background:#29303d; border:1px solid rgba(255,255,255,.12); color:var(--text); outline:none}
.btn{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#00122b; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18)}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:#d9e4ff; font-size:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin:10px 0}
.notice{padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(255,255,255,.08); padding:20px 10px; text-align:left}
.products{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.product{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; color:inherit}
.product img{width:100%; height:170px; object-fit:cover}
.product .meta{display:flex; justify-content:space-between; align-items:center; padding:12px 14px}
.footer{padding:24px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:14px;background: #102245;}
/* Product page */
.product-page{display:grid; grid-template-columns:1fr; gap:18px}
.gallery{position:relative}
.gallery-main{width:100%; height:380px; border-radius:14px; border:1px solid rgba(255,255,255,.1); object-fit:cover}
.gallery-thumbs{display:flex; gap:8px; overflow:auto; padding:8px 0}
.gallery-thumbs img{width:80px; height:80px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.12); cursor:pointer}
.gallery-nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.gallery-nav button{pointer-events:auto; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#fff; padding:8px 10px; border-radius:10px; cursor:pointer}
/* Search suggest */
.suggest-list{position:absolute; top:100%; left:0; right:0; background:rgba(18,24,41,.98); border:1px solid rgba(255,255,255,.12); border-radius:12px; margin-top:6px; display:none; z-index:999}
.suggest-list a{display:block; padding:8px 10px}
.suggest-list a:hover{background:rgba(255,255,255,.06)}
@media (max-width: 980px){
  .products{grid-template-columns:1fr 1fr}
  .gallery-main{height:260px}
  .main-nav{display:none}
}
@media (max-width: 640px){
  .products{grid-template-columns:1fr}
}
.order-summary{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 900px){ .order-summary{grid-template-columns:1fr} }

/* Product detail responsive */
.product-page{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px}
@media (max-width: 1024px){ .product-page{grid-template-columns:1fr} }
.gallery-main{width:100%; height:auto; aspect-ratio: 4 / 3; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.1)}
.gallery-thumbs{display:flex; gap:8px; overflow:auto; padding:8px 0}
.gallery-thumbs img{width:80px; height:80px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.12); flex:0 0 auto}



/*Admin   */
.admin-topbar{position:sticky; top:0; background:rgba(11,14,20,.85); border-bottom:1px solid rgba(255,255,255,.08); z-index:40}
.admin-nav a{margin-right:10px}
.admin-burger{background:transparent; border:1px solid rgba(255,255,255,.18); color:#e7ecff; padding:8px 10px; border-radius:10px; cursor:pointer; display:none}
@media (max-width: 980px){
  .admin-nav{display:none}
  .admin-nav.open{display:block; position:absolute; left:0; right:0; top:60px; background:rgba(18,24,41,.98); padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.12)}
  .admin-burger{display:block}
}
@media (max-width: 740px){
  table.table{display:block; overflow:auto; 
  /*white-space:nowrap*/}
}
details > summary { list-style:none; cursor:pointer }
details > summary::-webkit-details-marker { display:none }




/* Mobile nav toggle hook */
@media (max-width:980px){ .main-nav{display:none} .main-nav.open{display:block; position:absolute; left:0; right:0; top:60px; background:rgba(18,24,41,.98); padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.12)} }


/* ====== Catalog grid & product cards ====== */
.catalog-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1180px){ .catalog-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){  .catalog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .catalog-grid{ grid-template-columns: 1fr; } }

.prod-card{
  display:flex; flex-direction:column; gap:10px;
  padding:10px; border-radius:14px; text-decoration:none;
  background:rgb(83 93 127 / 65%); border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color:#E6ECFF;
}
.prod-card:hover{
  transform: translateY(-2px);
  border-color: rgba(122,179,255,.35);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

.prod-media{
  width:100%;
  aspect-ratio: 4 / 3;               /* păstrează raportul; schimbă la 1/1 dacă vrei pătrat */
  /*
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1220;                /* fundal neutru */
  */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.prod-media img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit: contain;               /* NU taie imaginea */
  display:block;
}

.prod-meta{ display:grid; gap:4px; }
.prod-title{ font-weight:700; line-height:1.25; }
.prod-sub{ font-size:.9rem; }
.prod-price{
  margin-top:4px; font-weight:700;
  background: rgba(122,179,255,.10);
  border:1px solid rgba(122,179,255,.25);
  border-radius:10px; padding:6px 8px; width:max-content;
}

/* opțional, dacă nu există deja în tema ta */
.muted{ color:rgba(230,236,255,.75); }

/* ====== Produs: tabel 2 coloane desktop, mobile stacked ====== */
.prod-table{ width:100%; border-collapse:separate; border-spacing:0 0; }
.prod-left, .prod-right{ vertical-align:top; padding:0 0 0 0; }
@media (min-width:1025px){
  .prod-left{ width:90%; /*padding-right:16px;*/ }
  .prod-right{ width:90%; padding-left:16px; }
}
@media (max-width:1024px){
  .prod-left, .prod-right{ display:block; width:auto; padding:0; }
  .prod-right{ margin-top:16px; }
}

/* ===== Product card layout (un singur card) ===== */
.prod-wrap{
  display:grid;
  grid-template-areas:
    "left right"
    "desc desc";
  grid-template-columns: var(--prod-left, 420px) 1fr; /* col stânga fixă */
  gap:24px;
}

/* zone */
.prod-left{ grid-area:left; }
.prod-right{ grid-area:right; }
.prod-desc{ grid-area:desc; }
.description {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 10px 10px;
}

/* galerie (stânga fixă) */
.gal-main{
  width:100%;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.gal-main img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
}
.gal-thumbs{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; margin-top:10px;
}
.gal-thumbs .thumb{
  width:100%; height:auto; object-fit:cover;
  border-radius:10px; border:2px solid transparent; cursor:pointer; /*background:#0b1220;*/
}
.gal-thumbs .thumb.active{ border-color: var(--brand); }
@media (max-width: 980px){
  .gal-thumbs{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
  .gal-thumbs{ grid-template-columns: repeat(3, 1fr); }
}

/* dreapta (info + pret + cos + fisiere) */
.prod-title{ margin:0 0 6px 0; }
.prod-meta{ margin-bottom:12px; }

.buy-block{ display:grid; gap:12px; }
.price-block{ display:grid; gap:6px; }
.price-row{ display:flex; align-items:center; justify-content:space-between; }
.price-row .label{ color:var(--muted); }
.price-original{ text-decoration:line-through; color:var(--muted); }
.price-current{ font-size:1.6rem; font-weight:800; color:var(--brand); }
.price-row.highlight{
  background: rgba(78,162,255,.10);
  border:1px solid rgba(78,162,255,.22);
  border-radius:12px; padding:8px 10px;
}
.qty-row{ display:flex; align-items:center; gap:10px; }
.btn-big{ padding:14px 20px; width:100%; }

/* tabel tehnic + fișiere în dreapta */
.tech-table{ width:100%; border-collapse:collapse; margin:14px 0 0; }
.tech-table th,.tech-table td{ padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.tech-table th{ width:160px; color:var(--muted); font-weight:600; }

.file-block{ margin-top:16px; }
.file-title{ margin:0 0 8px 0; }
.file-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.file-list a{ color:var(--brand); font-weight:500; }

/* descriere (full-width sub ambele) */
.prod-desc h2{ margin-top:0; }

/* responsive: pe ecrane mici ordinea: imagini -> buy -> tehnice/fișiere -> descriere */
@media (max-width: 1024px){
  .prod-wrap{
    grid-template-areas:
      "left"
      "right"
      "desc";
    grid-template-columns: 1fr;
  }
}

/* ====== Order detail (responsive) ====== */
.order-info{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.order-info .panel h3{
  margin:0 0 10px;
}

.kv{
  width:100%;
  border-collapse:collapse;
}
.kv th, .kv td{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}
.kv th{
  width:220px;
  color:#bcd2ff;
  font-weight:600;
}

/* tabelul cu produse rulabil pe mobil */
.table-wrap{
  overflow:auto;
}

/* Breakpoints */
@media (max-width: 980px){
  .order-info{ grid-template-columns:1fr; }
  .kv th{ width:160px; }
}
@media (max-width: 640px){
  .kv th{ width:130px; }
}


/* ===== Catalog toolbar (opțional) ===== */
.catalog-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.catalog-toolbar .toolbar-left{ font-size:14px }
.catalog-toolbar .toolbar-right{ display:flex; gap:8px; align-items:center }

/* ===== Card media (no-crop) & badges în colț ===== */
.prod-media{
  position:relative;
}
.prod-media img{
  max-width:100%; max-height:100%;
  width:100%; height:auto;
  object-fit: contain;     /* NU taie imaginea */
  display:block;
  aspect-ratio: 4 / 3;     /* păstrăm un raport plăcut în grid */
 /* background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;*/
}

/* badge-uri peste imagine (ex: “Nou”, “-20%”) */
.prod-badges{
  position:absolute; left:8px; top:8px; display:flex; gap:6px; flex-wrap:wrap;
}
.prod-badges .badge{
  background: rgba(122,179,255,.15);
  border:1px solid rgba(122,179,255,.35);
  color:#dfe9ff; padding:3px 6px; border-radius:999px; font-size:12px;
}

/* excerpt scurt (trunchiat după 2 linii, dacă e lung) */
.prod-excerpt{
  margin-top:6px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* prețuri: list (tăiat) + final + badge % */
.price-wrap{
  display:flex; align-items:center; gap:8px; margin-top:6px;
}
.price-old{
  text-decoration:line-through; opacity:.7;
}
.price-current{
  font-weight:800;
  background: rgba(122,179,255,.10);
  border:1px solid rgba(122,179,255,.25);
  border-radius:10px; padding:4px 8px;
}
.price-badge{
  font-size:12px; font-weight:700;
  border:1px dashed rgba(122,179,255,.35);
  border-radius:8px; padding:2px 6px; opacity:.9;
}

/* stock & tag-uri */
.stock{ margin-top:6px }
.prod-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.tag{
  font-size:12px; padding:4px 6px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color:#d3defa;
}

/* responsive tweaks dacă e nevoie (grid-ul tău deja e responsive) */
@media (max-width: 900px){
  .prod-media img{ aspect-ratio: 4 / 3; }
}