:root {
  --green: #00723f;
  --green-soft: #eaf6ee;
  --text: #111827;
  --muted: #6b7280;
  --line: #d7e3d8;
  --sidebar: #fbfcfb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: #ffffff;
}

button { font-family: inherit; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 245px 1fr;
}

/* SIDEBAR */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid #edf1ed;
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.brand {
  min-height: 50px;
  display: flex;
  align-items: flex-start;
}

.brand img {
  width: 152px;
  height: auto;
  display: block;
  object-fit: contain;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.nav-item {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
  cursor: default;
}

.nav-item span {
  width: 18px;
  text-align: center;
  font-size: 16px;
  color: #0f172a;
}

.nav-item strong { font-weight: 500; }

.nav-item.active {
  background: var(--green-soft);
  color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}

.sidebar-card {
  margin-top: auto;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #edf1ed;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-card span {
  color: var(--green);
  font-size: 20px;
}

.sidebar-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.profile {
  padding-top: 18px;
  border-top: 1px solid #edf1ed;
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 500;
}

.profile strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.profile small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* MAIN */
.content {
  padding: 28px 54px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topbar {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.system-title {
  grid-column: 2;
  color: var(--green);
  font-weight: 500;
  font-size: 18px;
}

.status {
  justify-self: end;
  border: 1px solid #e4ece5;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #0c6b3e;
  display: flex;
  align-items: center;
  gap: 10px;
}

.status span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #25c05a;
}

.hero-title {
  margin-top: 28px;
  text-align: center;
}

.hero-title h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.title-line {
  width: 54px;
  height: 2px;
  background: var(--green);
  margin: 16px auto 0;
}

/* BADGES */
.badge-button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.badge-button:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 14px 18px rgba(17, 24, 39, 0.10));
}

.badge-button img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: auto;
}

.hero-product {
  margin-top: 34px;
  min-height: 162px;
  display: grid;
  place-items: center;
}

.hero-badge {
  width: 170px; /* 20%-kal kisebb */
}

.accessories-section {
  width: 100%;
  max-width: 980px;
  margin-top: 28px;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 34px;
  margin-bottom: 28px;
}

.section-heading div {
  height: 1px;
  background: var(--line);
}

.section-heading h2 {
  margin: 0;
  color: var(--green);
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  justify-content: center;
  gap: 42px 58px; /* szellős marad */
}

.accessory-badge {
  width: 120px; /* 20%-kal kisebb */
}

.quote-button {
  margin-top: 42px;
  min-width: 350px;
  height: 54px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #0a8b50, #057240);
  color: white;
  font-size: 18px;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 28px rgba(0, 114, 63, 0.18);
  cursor: pointer;
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 210px 1fr; }
  .brand img { width: 132px; }
  .content { padding-left: 28px; padding-right: 28px; }
  .badge-grid {
    grid-template-columns: repeat(4, 106px);
    gap: 32px 38px;
  }
  .accessory-badge { width: 106px; }
  .hero-badge { width: 152px; }
}

/* 3.1 Unified Product Database labels - keeps accepted 1.4.1 visual scale */
.db-note{display:none}
.category-block{margin:0}
.category-block h3{display:none}
#categoryBlocks{display:block}
.badge-button strong,.badge-button small{display:block;text-align:center}
.badge-button strong{margin-top:8px;font-size:13px;color:#0b1b14;font-weight:800}
.badge-button small{margin-top:3px;font-size:11px;color:#607167;font-weight:700}
.hero-badge strong,.hero-badge small{display:none}


/* Executive UI Polish 1.0 – sidebar and layout lock */
:root{--v7-green:#00663b;--v7-green-2:#159447;--v7-soft:#eef4ef;--v7-border:#d7e3d8;--v7-text:#07131f;--v7-muted:#66756d;--v7-radius:16px;--v7-shadow:0 14px 34px rgba(16,70,43,.07)}
body{font-family:Urbanist,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--v7-text)}
.app-shell{grid-template-columns:300px 1fr}.sidebar{padding:42px 28px 30px;background:linear-gradient(180deg,#fbfdfb,#fff);border-right:1px solid var(--v7-border);gap:28px}.brand img{width:230px;max-height:72px;object-fit:contain}.nav{gap:14px;margin-top:36px}.nav-item{min-height:58px;padding:16px 22px;border-radius:var(--v7-radius);font-size:18px;font-weight:800;gap:18px;cursor:pointer}.nav-item span{width:22px;font-size:18px;color:#0b3624}.nav-item strong{font-weight:800}.nav-item.active,.nav-item:hover{background:var(--v7-soft);box-shadow:inset 3px 0 0 var(--v7-green);color:var(--v7-green)}.sidebar-card{border-color:var(--v7-border);box-shadow:var(--v7-shadow);border-radius:var(--v7-radius)}.profile{border-color:var(--v7-border)}.content{padding:42px 56px 44px}.topbar{max-width:1180px}.system-title{font-size:17px;font-weight:700;color:var(--v7-green)}.status{border-color:var(--v7-border);box-shadow:var(--v7-shadow);font-weight:800}.hero-title h1{font-size:36px;font-weight:700;letter-spacing:-.03em}.db-note{font-size:12px;color:var(--v7-muted);font-weight:700;margin-top:10px}.hero-product{margin-top:30px}.hero-badge{width:170px}.accessories-section{max-width:980px}.section-heading h2{font-size:17px;font-weight:800}.quote-button{height:54px;border-radius:14px;font-weight:800;background:linear-gradient(180deg,#159447,#00663b);box-shadow:0 14px 30px rgba(0,102,59,.18)}
@media(max-width:1100px){.app-shell{grid-template-columns:245px 1fr}.brand img{width:170px}.nav-item{font-size:15px}.content{padding-left:28px;padding-right:28px}}


/* Phase 1.1 Design System Lock – Commercial Center */
.nav-item strong{font-weight:500}.nav-item{font-size:16px}.sidebar{padding:38px 28px 28px}.brand img{width:230px}.content{min-height:100vh;padding:36px 54px 28px}.hero-title{margin-top:16px}.hero-title h1{font-size:32px;font-weight:500}.hero-product{margin-top:22px;min-height:146px}.hero-badge{width:160px;height:160px}.accessories-section{max-width:980px;margin-top:22px}.badge-grid{grid-template-columns:repeat(4,120px);gap:34px 58px}.accessory-badge{width:120px;height:132px;display:grid;place-items:center}.badge-button img{width:100%;height:118px;object-fit:contain}.hero-badge img{height:158px;object-fit:contain}.raklap-badge img{height:118px!important;width:120px!important;object-fit:contain!important}.quote-button{margin-top:30px;font-weight:600}.sidebar-card,.profile strong,.profile small{font-weight:400}

/* =====================================================================
   V7 MASTER Commercial Workspace Layout Refactor 1.0
   CSS-ONLY MIGRATION: business logic, IDs and JavaScript are untouched.
   Applies the locked V7 Design Foundation look to the existing workspace.
   ===================================================================== */
:root{
  --zb-green:#007A3D;
  --zb-green-soft:#EAF4EF;
  --text:#111827;
  --muted:#6B7280;
  --line:#D9E6DD;
  --page:#FBFBFA;
  --sidebar-width:218px;
  --font:Urbanist, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html,body{min-height:100%;font-family:var(--font);background:var(--page);overflow:auto;color:var(--text)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) 1fr;background:var(--page)}
.sidebar{width:var(--sidebar-width);background:rgba(251,252,251,.94);border-right:1px solid var(--line);padding:24px 13px 24px;gap:0;position:sticky;top:0;height:100vh;z-index:5}
.brand{min-height:auto;padding:0 7px 22px;align-items:flex-start}.brand img{width:154px;height:auto;object-fit:contain;display:block}.nav{gap:3px;margin-top:6px}.nav-item{height:38px;min-height:38px;display:flex;align-items:center;gap:13px;padding:0 14px;border-radius:10px;color:#263238;text-decoration:none;font-size:14px;font-weight:400;line-height:1;letter-spacing:-.01em;cursor:pointer}.nav-item span{width:18px;font-size:16px;color:#20342e}.nav-item strong{font-weight:400}.nav-item.active{background:var(--zb-green-soft);color:#0B6B3A;box-shadow:inset 3px 0 0 var(--zb-green)}.nav-item:hover{background:#F1F6F3}.sidebar-card,.profile{display:none}.sidebar::after{content:"Irodai belépés";margin-top:auto;border-top:1px solid var(--line);padding:20px 14px 4px;color:#315a49;font-size:14px;display:block}
.content{position:relative;min-height:100vh;padding:34px 54px 44px;display:flex;flex-direction:column;align-items:center;background:url('../assets/background-master.png') no-repeat right bottom / cover,#FBFBFA}.content::before{content:"";position:fixed;inset:0 0 0 var(--sidebar-width);pointer-events:none;z-index:0;background:radial-gradient(circle at 49% 45%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.54) 34%, rgba(255,255,255,.16) 63%, rgba(255,255,255,0) 100%)}.content>*{position:relative;z-index:1}
.topbar{width:100%;max-width:1180px;display:flex;justify-content:flex-end;align-items:center;min-height:40px}.system-title{display:none}.status{justify-self:auto;height:40px;padding:0 22px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.80);box-shadow:0 18px 42px rgba(0,0,0,.055);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:#0b6b3a}.status span{width:10px;height:10px;background:#129251}
.hero-title{margin-top:10px;text-align:center}.hero-title h1{font-size:24px;line-height:1.08;font-weight:500;letter-spacing:-.04em;margin:0 0 12px;color:#111827}.title-line{width:46px;height:2px;background:var(--zb-green);margin:14px auto 0}.db-note{font-size:12px;color:#6b7280;margin-top:10px;font-weight:400}.hero-product{margin-top:22px;min-height:142px}.hero-badge{width:154px}.accessories-section{max-width:880px;margin-top:18px}.section-heading{gap:22px}.section-heading h2{font-size:13px;letter-spacing:.08em;color:var(--zb-green);font-weight:600}.badge-grid{gap:20px 34px;justify-content:center}.accessory-badge{width:116px}.raklap-badge{width:116px!important}.quote-button{height:50px;min-width:320px;border-radius:13px;background:linear-gradient(180deg,#159447,#00663b);font-size:15px;font-weight:600;box-shadow:0 24px 55px rgba(17,24,39,.08)}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.content{padding:24px;background-position:right bottom}.content::before{inset:0}.badge-grid{grid-template-columns:repeat(2,120px)}}