:root {
  /* Arculati színek */
  --kg-ink: #17211B;        /* címsorok, sötét felületek */
  --kg-body: #2E3A33;       /* folyószöveg */
  --kg-muted: #46524B;      /* másodlagos szöveg */
  --kg-ground: #F2F4EF;     /* oldalháttér */
  --kg-line: #D3D9D1;       /* keretek, elválasztók */
  --kg-red: #C8201F;        /* gép-piros: elsődleges gomb, kiemelés */
  --kg-red-dark: #A31A19;   /* linkek, hover */
  --kg-graphite: #26343B;   /* CTA sáv, másodlagos gomb */
  --kg-photo: #DDE3DC;      /* képek háttere betöltésig */

  /* Bootstrap változók felülírása */
  --bs-body-font-family: "Barlow", "Segoe UI", system-ui, sans-serif; /* $font-family-sans-serif */
  --bs-body-font-size: 1.0625rem;                                      /* $font-size-base */
  --bs-body-line-height: 1.6;                                          /* $line-height-base */
  --bs-body-color: var(--kg-body);                                     /* $body-color */
  --bs-body-bg: var(--kg-ground);                                      /* $body-bg */
  --bs-heading-color: var(--kg-ink);                                   /* $headings-color */
  --bs-border-color: var(--kg-line);                                   /* $border-color */
  --bs-link-color: var(--kg-red-dark);                                 /* $link-color */
  --bs-link-color-rgb: 163, 26, 25;
  --bs-link-hover-color: #7D1212;
  --bs-link-hover-color-rgb: 125, 18, 18;
  --bs-primary: var(--kg-red);                                         /* $primary */
  --bs-primary-rgb: 200, 32, 31;
  --bs-focus-ring-color: rgba(200, 32, 31, .35);
}

/* Tipográfia -------------------------------------------------------------- */

h1, h2, h3, .h1, .h2, .h3, .kg-display {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  line-height: 1.1;
}

.kg-h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.02; }
.kg-h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.kg-h3 { font-size: 2.125rem; line-height: 1.15; }
.kg-lead { font-size: 1.1875rem; }
.kg-text-muted { color: var(--kg-muted); }
.kg-measure { max-width: 34rem; }

/* Gombok ------------------------------------------------------------------ */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .8125rem;
  --bs-btn-border-radius: .375rem;
}

.btn-primary {
  --bs-btn-bg: var(--kg-red);
  --bs-btn-border-color: var(--kg-red);
  --bs-btn-hover-bg: var(--kg-red-dark);
  --bs-btn-hover-border-color: var(--kg-red-dark);
  --bs-btn-active-bg: #8E1716;
  --bs-btn-active-border-color: #8E1716;
  --bs-btn-disabled-bg: var(--kg-red);
  --bs-btn-disabled-border-color: var(--kg-red);
  --bs-btn-focus-shadow-rgb: 200, 32, 31;
}

.btn-dark {
  --bs-btn-bg: var(--kg-graphite);
  --bs-btn-border-color: var(--kg-graphite);
  --bs-btn-hover-bg: var(--kg-ink);
  --bs-btn-hover-border-color: var(--kg-ink);
  --bs-btn-active-bg: var(--kg-ink);
  --bs-btn-active-border-color: var(--kg-ink);
}

.btn-outline-dark {
  --bs-btn-color: var(--kg-ink);
  --bs-btn-border-color: var(--kg-ink);
  --bs-btn-hover-bg: var(--kg-ink);
  --bs-btn-hover-border-color: var(--kg-ink);
  --bs-btn-active-bg: var(--kg-ink);
  --bs-btn-active-border-color: var(--kg-ink);
}

.btn-sm {
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-padding-y: .5625rem;
  --bs-btn-font-size: 1rem;
}

.btn svg { flex-shrink: 0; }

/* Fejléc ------------------------------------------------------------------ */

.kg-navbar {
  --bs-navbar-padding-y: .75rem;
  --bs-navbar-color: var(--kg-ink);
  --bs-navbar-hover-color: var(--kg-red-dark);
  --bs-navbar-active-color: var(--kg-ink);
  --bs-navbar-nav-link-padding-x: .875rem;
  background: #fff;
  border-bottom: 1px solid var(--kg-line);
}

.kg-brand {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--kg-ink);
}
.kg-brand:hover, .kg-brand:focus { color: var(--kg-ink); }
.kg-brand span { color: var(--kg-red); }

.kg-navbar .nav-link { font-weight: 500; font-size: 1rem; }
.kg-navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--kg-red); }

.kg-lang {
  display: inline-flex;
  border: 1px solid var(--kg-line);
  border-radius: .375rem;
  overflow: hidden;
  font-weight: 600;
  font-size: .9375rem;
}
.kg-lang a {
  padding: .5625rem .875rem;
  color: var(--kg-ink);
  text-decoration: none;
}
.kg-lang a[aria-current="true"] { background: var(--kg-ink); color: #fff; }

.kg-navbar .navbar-toggler {
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: var(--kg-line);
  color: var(--kg-ink);
}

/* Nyitókép és adattábla --------------------------------------------------- */

.kg-hero { background: #fff; padding: 3.5rem 0 4.5rem; }

.kg-hero-media { position: relative; padding-bottom: 2.5rem; }

.kg-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--kg-photo);
  border-radius: .5rem;
}
.kg-hero-media .kg-photo { height: clamp(260px, 38vw, 480px); }

/* Géptörzslap: sötét lemez négy szegeccsel */
.kg-plate {
  --rivet: radial-gradient(circle, #6F7C74 3px, transparent 3.5px);
  position: absolute;
  left: 1.5rem;
  bottom: 0;
  width: 20rem;
  max-width: calc(100% - 3rem);
  padding: 1.25rem 1.5rem;
  border-radius: .25rem;
  background-color: var(--kg-ink);
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(23, 33, 27, .28);
}
.kg-plate:hover, .kg-plate:focus { color: #fff; }
.kg-plate-model {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
}
.kg-plate-sub { font-size: .9375rem; color: #C9D1CA; }
.kg-plate dl { margin: .875rem 0 0; font-size: .9375rem; }
.kg-plate dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .5rem;
  margin-top: .5rem;
  border-top: 1px solid #3A463F;
}
.kg-plate dt { font-weight: 400; color: #C9D1CA; }
.kg-plate dd { margin: 0; font-weight: 600; }

.kg-badge-new {
  padding: .125rem .625rem;
  border-radius: .25rem;
  background: var(--kg-red);
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: .875rem;
}

/* Szakaszok --------------------------------------------------------------- */

.kg-section { padding: 4.5rem 0; }
.kg-section-white { background: #fff; border-top: 1px solid var(--kg-line); }

.kg-facts {
  padding: 2.5rem 0;
  border-top: 1px solid var(--kg-line);
  border-bottom: 1px solid var(--kg-line);
}
.kg-facts svg { flex-shrink: 0; margin-top: .125rem; color: var(--kg-red); }
.kg-facts h2 { font-size: 1.5rem; margin-bottom: .375rem; }
.kg-facts p { font-size: 1rem; margin: 0; }

/* Kártyák ----------------------------------------------------------------- */

.kg-card {
  --bs-card-border-color: var(--kg-line);
  --bs-card-border-radius: .5rem;
  --bs-card-inner-border-radius: calc(.5rem - 1px);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-bg: #fff;
  overflow: hidden;
  transition: border-color .15s ease;
}
.kg-card:hover, .kg-card:focus-within { border-color: var(--kg-ink); }
.kg-card .card-img-top {
  height: 220px;
  object-fit: cover;
  background: var(--kg-photo);
}
.kg-card-category .card-img-top { height: clamp(200px, 26vw, 340px); }
.kg-card .card-title {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.1;
  margin-bottom: .125rem;
}
.kg-card-category .card-title { font-weight: 600; font-size: 2.125rem; }
.kg-card .card-title a { color: var(--kg-ink); text-decoration: none; }
.kg-card .card-text { font-size: 1rem; color: var(--kg-muted); }
.kg-card-more {
  font-weight: 600;
  font-size: 1rem;
  color: var(--kg-red-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Kapcsolat sáv ----------------------------------------------------------- */

.kg-cta { background: var(--kg-graphite); color: #fff; padding: 4rem 0; }
.kg-cta h2 { color: #fff; font-size: 2.5rem; }
.kg-cta p { color: #E3ECEE; }

/* Lábléc ------------------------------------------------------------------ */

.kg-footer {
  background: var(--kg-ink);
  color: #C9D1CA;
  font-size: 1rem;
  padding: 4rem 0 2rem;
}
.kg-footer h2 { color: #fff; font-size: 1.375rem; margin-bottom: .75rem; }
.kg-footer a { color: #fff; }
.kg-footer a:hover { color: #C9D1CA; }
.kg-footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #3A463F;
  font-size: .9375rem;
}
.kg-footer-grant img { display: block; height: 64px; width: auto; border-radius: .25rem; background: #fff; }

/* Netzúzó: a régi oldalról változatlanul átvett partnerlink-táblázat ------- */

#npl-table { width: 100%; border-collapse: collapse; border: 0; background: #fff; }
#npl-table th,
#npl-table td { border: 1px solid var(--kg-line); padding: .875rem 1rem; vertical-align: top; }
#npl-table th {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--kg-ink);
  text-align: left;
}
#npl-table td.pic { width: 1%; }
#npl-table td.pic img { display: block; width: 111px; height: auto; }

/* A régi tartalom sorai közti üres elválasztók keret nélkül */
#npl-table td:empty { border: 0; padding: .5rem; }

/* Minimál oldalváz (forgalmazói kapcsolati oldalak) ------------------------ */

/*
  Kevés tartalomnál is az ablak aljára kerüljön a lábléc, a tartalom pedig
  a fejléctől a láblécig egybefüggő fehér felület legyen.
*/
.kg-minimal { display: flex; flex-direction: column; min-height: 100vh; }
@supports (min-height: 100dvh) {
  .kg-minimal { min-height: 100dvh; }
}
.kg-minimal main { flex: 1 0 auto; background: #fff; }

/* Mobil hívósáv ----------------------------------------------------------- */

.kg-callbar {
  background: #fff;
  border-top: 1px solid var(--kg-line);
  padding: .625rem 1rem;
  padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
}
.kg-callbar .btn { --bs-btn-padding-y: .6875rem; --bs-btn-padding-x: .5rem; }

@media (max-width: 991.98px) {
  body { padding-bottom: 4.5rem; } /* hely a rögzített hívósávnak */
  .kg-hero { padding: 2.5rem 0 3.5rem; }
  .kg-section { padding: 3.5rem 0; }
  .kg-navbar .nav-link { padding: .75rem 0; font-size: 1.125rem; }
  .kg-navbar .nav-link.active { box-shadow: inset 3px 0 0 var(--kg-red); padding-left: .875rem; }
}

/* Fókusz és mozgás -------------------------------------------------------- */

a:focus-visible, .btn:focus-visible, .navbar-toggler:focus-visible {
  outline: 3px solid var(--kg-red);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

@media (prefers-reduced-motion: reduce) {
  .kg-card { transition: none; }
}

/* ==========================================================================
   Kategória- és termékoldal
   ========================================================================== */

/* Oldalfej és morzsamenü -------------------------------------------------- */

.kg-pagehead { background: #fff; padding-bottom: 3.5rem; }

.breadcrumb {
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-divider-color: var(--kg-muted);
  --bs-breadcrumb-item-active-color: var(--kg-muted);
  --bs-breadcrumb-font-size: .9375rem;
  padding: 1.125rem 0;
  margin: 0;
}

.kg-sublead { font-size: 1.3125rem; font-weight: 500; color: var(--kg-ink); }

/* Adatsorok a termékkártyán ---------------------------------------------- */

.kg-specs { margin: .875rem 0 0; padding-top: .625rem; border-top: 1px solid #E4E8E2; font-size: .9375rem; }
.kg-specs > div { display: flex; justify-content: space-between; gap: 1rem; }
.kg-specs > div + div { margin-top: .375rem; }
.kg-specs dt { font-weight: 400; color: var(--kg-muted); }
.kg-specs dd { margin: 0; font-weight: 600; color: var(--kg-ink); text-align: right; }

.kg-card .card-title .kg-badge-new { position: relative; top: -.25rem; margin-left: .5rem; }

/* Termékfej --------------------------------------------------------------- */

.kg-gallery-main { height: clamp(260px, 38vw, 480px); }
.kg-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--kg-line);
  border-radius: .375rem;
  background: var(--kg-photo);
  overflow: hidden;
}
.kg-thumb img { display: block; width: 100%; height: 96px; object-fit: cover; }
.kg-thumb[aria-current="true"] { border: 2px solid var(--kg-ink); }
.kg-thumb:focus-visible { outline: 3px solid var(--kg-red); outline-offset: 2px; }

.kg-badge-outline {
  padding: .0625rem .75rem;
  border: 1px solid var(--kg-ink);
  border-radius: .25rem;
  color: var(--kg-ink);
  font-weight: 600;
  font-size: .9375rem;
}
.kg-product-badges .kg-badge-new { font-size: .9375rem; padding: .125rem .75rem; }

.kg-h1-product { font-size: clamp(2.375rem, 4.4vw, 3.5rem); line-height: 1.02; }

/* Adattábla a termékfejben: ugyanaz a lemez, de a szövegfolyamban */
.kg-plate--inline {
  position: relative;
  left: auto;
  width: auto;
  max-width: none;
  padding: 1.125rem 1.5rem 1.25rem;
  box-shadow: none;
}
.kg-plate--inline dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}
.kg-plate--inline dl > div { display: block; padding: 0; margin: 0; border: 0; }
.kg-plate--inline dd {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.875rem;
  line-height: 1.15;
}

/* Leírás, címkék, videó --------------------------------------------------- */

.kg-h4 { font-size: 1.625rem; line-height: 1.2; }

.kg-chip {
  display: inline-block;
  padding: .375rem .875rem;
  border: 1px solid var(--kg-line);
  border-radius: .375rem;
  background: #fff;
  font-size: 1rem;
}

.kg-video { border-radius: .5rem; overflow: hidden; background: var(--kg-graphite); }
.kg-video-facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: #fff;
  font-size: .9375rem;
  text-decoration: none;
}
.kg-video-facade:hover, .kg-video-facade:focus { color: #fff; }
.kg-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--kg-red);
}

/* Galéria-nagyító --------------------------------------------------------- */

.kg-lightbox .modal-content { border: 0; border-radius: .5rem; }
.kg-lightbox .modal-title { font-size: 1rem; color: var(--kg-muted); margin: 0; }
.kg-lightbox img {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: var(--kg-photo);
}
.kg-lightbox .modal-footer { gap: 1rem; }

/* Műszaki adatok ---------------------------------------------------------- */

.kg-table-wrap { background: #fff; border: 1px solid var(--kg-line); border-radius: .5rem; overflow: hidden; }
.kg-table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #E4E8E2;
  margin: 0;
  font-size: 1rem;
}
.kg-table th, .kg-table td { padding: .75rem 1.25rem; }
/* A többsoros cellák (pl. tartálykapacitások) sortöréssel jelennek meg. */
.kg-table td { white-space: pre-line; }
.kg-table th { font-weight: 400; color: var(--kg-muted); }
.kg-table td { font-weight: 600; color: var(--kg-ink); text-align: right; }
.kg-table tr:last-child th, .kg-table tr:last-child td { border-bottom: 0; }

/* Ajánlatkérő ------------------------------------------------------------- */

.kg-quote { background: var(--kg-graphite); color: #fff; padding: 4.5rem 0; scroll-margin-top: 5rem; }
.kg-quote h2 { color: #fff; font-size: 2.5rem; }
.kg-quote-intro { color: #E3ECEE; }
.kg-quote-contact a { color: #fff; }
.kg-quote-intro a { color: #fff; }
.kg-quote-contact { font-size: 1.125rem; }

.kg-form {
  padding: 2rem;
  border-radius: .5rem;
  background: #fff;
  color: var(--kg-body);
}
.kg-form .form-label { font-weight: 500; font-size: 1rem; color: var(--kg-ink); margin-bottom: .375rem; }
.kg-form .form-control {
  min-height: 48px;
  border-color: #7C8880;
  border-radius: .375rem;
  color: var(--kg-ink);
  font-size: 1.0625rem;
}
.kg-form .form-control:focus { border-color: var(--kg-red); box-shadow: 0 0 0 .25rem rgba(200, 32, 31, .25); }
.kg-form .form-check-input { width: 1.375rem; height: 1.375rem; margin-top: .125rem; border-color: #7C8880; }
.kg-form .form-check-input:checked { background-color: var(--kg-red); border-color: var(--kg-red); }
.kg-form .form-check-input:focus { border-color: var(--kg-red); box-shadow: 0 0 0 .25rem rgba(200, 32, 31, .25); }
.kg-form .form-check-label { padding-left: .375rem; font-size: 1rem; }

@media (max-width: 991.98px) {
  .kg-pagehead { padding-bottom: 2.5rem; }
  .kg-quote { padding: 3.5rem 0; }
  .kg-form { padding: 1.5rem; }
}

/* ==========================================================================
   Gyakori kérdések
   ========================================================================== */

.kg-jump {
  display: inline-block;
  padding: .5625rem 1rem;
  border: 1px solid var(--kg-ink);
  border-radius: .375rem;
  color: var(--kg-ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.kg-jump:hover, .kg-jump:focus { background: var(--kg-ink); color: #fff; }

.kg-faq-group { scroll-margin-top: 6rem; }
.kg-faq-group + .kg-faq-group { margin-top: 3rem; }

.kg-accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-color: var(--kg-body);
  --bs-accordion-border-color: var(--kg-line);
  --bs-accordion-border-radius: .5rem;
  --bs-accordion-inner-border-radius: calc(.5rem - 1px);
  --bs-accordion-btn-padding-x: 1.5rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--kg-ink);
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-active-color: var(--kg-ink);
  --bs-accordion-active-bg: #fff;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 1.5rem;
  --bs-accordion-body-padding-y: 0;
  /* plusz ikon, nyitva 45 fokkal elfordul */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8201F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  --bs-accordion-btn-icon-width: 1.375rem;
  --bs-accordion-btn-icon-transform: rotate(45deg);
  display: grid;
  gap: .75rem;
}
/* külön kártyák a Bootstrap összeérő listája helyett */
.kg-accordion .accordion-item,
.kg-accordion .accordion-item:not(:first-of-type) {
  border: 1px solid var(--kg-line);
  border-radius: .5rem;
  overflow: hidden;
}
.kg-accordion .accordion-header { margin: 0; }
.kg-accordion .accordion-button {
  gap: 1rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  box-shadow: none;
}
.kg-accordion .accordion-button:focus-visible { outline: 3px solid var(--kg-red); outline-offset: -3px; }
.kg-accordion .accordion-body { padding-bottom: 1.375rem; max-width: 45rem; }
.kg-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* Kapcsolati doboz: a szegecselt lemez oldalsávként */
.kg-faq-aside { padding: 1.75rem 1.75rem 1.875rem; }
.kg-faq-aside h2 { color: #fff; font-size: 1.875rem; }
.kg-faq-aside p { font-size: 1rem; color: #C9D1CA; }
.kg-faq-aside address { font-size: .9375rem; color: #C9D1CA; border-top: 1px solid #3A463F; }
.kg-faq-aside address a { color: #fff; }

@media (min-width: 992px) {
  .kg-faq-aside { position: sticky; top: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-accordion .accordion-button::after, .kg-accordion .accordion-collapse { transition: none; }
}
