:root {
  --clr-primary: #0f172a;
  --clr-secondary: #3b82f6;
  --clr-accent: #14b8a6;
  --clr-light: #f1f5f9;
  --clr-dark: #1e293b;
  --radius: 0.75rem;
  --transition: 0.3s;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background: var(--clr-primary); font-family:'Inter',sans-serif; color:var(--clr-light); line-height:1.6; overflow-x: hidden; }
.container { max-width:1200px; width:90%; margin:0 auto; }
.site-header { position:sticky; top:0; background:var(--clr-primary); padding:1rem 0; z-index:100; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.logo { color:white; font-size:1.75rem; font-weight:700; }
.logo-link { text-decoration: none; color: inherit; }
.nav { display:flex; gap:1.5rem; align-items:center; }
.nav a { color:white; text-decoration:none; font-weight:600; position:relative; padding:0.5rem; transition: color var(--transition); }
.nav a i { margin-right:0.5rem; }
.nav a:hover { color: var(--clr-secondary); }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index: 101;}
.burger span { width:25px; height:3px; background:white; border-radius:var(--radius); transition: all var(--transition);}
.nav.nav-open + .burger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav.nav-open + .burger span:nth-child(2) { opacity: 0; }
.nav.nav-open + .burger span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
.hero {
  position: relative;
  /* JAVÍTÁS: Gyökér-relatív elérési utat használunk, ami biztosabb a localhoston */
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)),
    url('images/hero.png');
  background-size: cover;
  background-position: center 60%;
  background-attachment: fixed;
  color: white;
  text-align: center;
  padding: 8rem 0;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.product-main-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    display: block;
    border: 1px solid #1e293b;
}
.products, .contact { padding:4rem 0; background: var(--clr-dark); }
#product-detail { background: #0b1120; }
.contact { background: var(--clr-primary); }
h2 { text-align:center; font-size:2rem; margin-bottom:2.5rem; position:relative; }
h2::after { content:''; width:60px; height:4px; background:var(--clr-accent); display:block; margin:0.5rem auto 0; border-radius:2px; }
.contact-form { max-width:600px; margin:0 auto; display:grid; gap:1rem; }
.form-group input, .form-group textarea { width:100%; padding:0.75rem; border:1px solid #334155; border-radius:var(--radius); font-size:1rem; background: #1e293b; color: white;}
.btn { padding:0.75rem 2rem; background:var(--clr-accent); color:white; border:none; border-radius:var(--radius); font-size:1rem; cursor:pointer; transition: background var(--transition); }
.btn:hover { background: #0f766e; }
.success, .error { text-align:center; margin: 1rem auto; padding: 1rem; border-radius: var(--radius); max-width: 600px; }
.success { color:#a7f3d0; background: #042f2e; border: 1px solid #059669;}
.error { color:#fecaca; background: #450a0a; border: 1px solid #dc2626;}
.address { text-align:center; margin-top:2rem; font-size:0.9rem; color: var(--clr-light); }
.map { width:100%; height:300px; margin-top:1.5rem; border-radius:var(--radius); overflow:hidden; }
.map iframe { width:100%; height:100%; border:0; filter: invert(90%) hue-rotate(180deg); }
.site-footer { background-color: var(--clr-primary); color: #64748b; text-align:center; padding:2rem 0; margin-top: -1px; border-top: 1px solid #1e293b;}
.nav .dropdown { position: relative; }
.nav .dropdown-toggle { background: transparent; border: none; color: white; cursor: pointer; padding: 0.5rem; font-size: 0.8em; }
.nav .dropdown-content { display: none; position: absolute; top: 100%; right: 0; background: var(--clr-primary); min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); border-radius: var(--radius); margin-top: 0.5rem; z-index: 200; padding: 0.5rem 0; border: 1px solid #1e293b;}
.nav .dropdown-content li { list-style: none; margin:0; }
.nav .dropdown-content a { display: block; padding: 0.5rem 1rem; color: white; text-decoration: none; width: 100%; text-align: left; }
.nav .dropdown-content a:hover { background: #1e293b; color: var(--clr-secondary); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card { background: var(--clr-primary); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all var(--transition); display: flex; flex-direction: column; height: 100%; border: 1px solid #1e293b;}
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); border-color: var(--clr-secondary); }
.card-img { height: 200px; background-size: cover; background-position: center; }
.card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-content h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--clr-light); }
.card-content p { margin-top: auto; color: var(--clr-secondary); font-weight: 600; }

/* === BEILLESZTETT TARTALOM EGYSÉGES STÍLUSAI === */
.back-link { display: inline-block; margin-bottom: 2rem; font-weight: 600; text-decoration: none; color: var(--clr-light); background: var(--clr-primary); padding: 0.5rem 1rem; border-radius: var(--radius); border: 1px solid #1e293b; transition: all var(--transition);}
.back-link:hover { background: #1e293b; color: #fff; }
.product-content-wrapper { background: var(--clr-primary); padding: 2.5rem; border-radius: var(--radius); line-height: 1.7; border: 1px solid #1e293b;}
.product-content-wrapper * { max-width: 100%; }
.product-content-wrapper .row { display: flex; flex-wrap: wrap; margin: 0 -15px 2rem; }
.product-content-wrapper [class*="col-"] { padding: 0 15px; margin-bottom: 1rem; }
@media (min-width: 768px) { .product-content-wrapper .col-sm-6 { flex: 0 0 50%; max-width: 50%; } }
@media (min-width: 992px) { .product-content-wrapper .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } }
.product-content-wrapper h1, .product-content-wrapper h2, .product-content-wrapper h3 { margin: 2rem 0 1rem; color: var(--clr-light); border-bottom: 2px solid var(--clr-accent); padding-bottom: 0.5rem;}
.product-content-wrapper .page-header h1 { border-bottom: none; }
.product-content-wrapper p { margin-bottom: 1rem; color: #94a3b8; } .product-content-wrapper p strong { color: var(--clr-light); }
.product-content-wrapper a:not(.btn) { color: var(--clr-secondary); }
.product-content-wrapper img { height: auto !important; border-radius: var(--radius); }
.product-content-wrapper .table { display: table; width: 100%; border: 1px solid #1e293b; border-radius: var(--radius); overflow: hidden; margin: 2rem 0; }
.product-content-wrapper .tr { display: table-row; } .product-content-wrapper .tr:nth-of-type(odd) { background-color: #0b1120; }
.product-content-wrapper .td { display: table-cell; padding: 12px 15px; border-bottom: 1px solid #1e293b; }
.product-content-wrapper .tr:last-child .td { border-bottom: 0; } .product-content-wrapper .td:first-child { font-weight: 600; color: var(--clr-light);}
.product-content-wrapper .article-list .item { background: #0b1120; border-color: #334155; }
.product-content-wrapper .item .entry-header a { color: var(--clr-light); }
.product-content-wrapper .item > p:not(.readmore) { color: #94a3b8; }
.product-content-wrapper .item .readmore .btn { background: var(--clr-secondary); color: white !important; }

@media(max-width:768px) {
  .nav { position:fixed; top:0; right:-100%; height:100vh; width:250px; background:var(--clr-primary); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0.5rem; transition:right var(--transition); padding: 5rem 2rem; }
  .nav > * { width: 100%; }
  .nav.nav-open { right:0; box-shadow: -10px 0 30px rgba(0,0,0,0.2); }
  .burger { display:flex; }
  .hero { padding: 5rem 0; } .hero h2 { font-size: 2rem; }
  .product-content-wrapper { padding: 1.5rem; }
  .product-content-wrapper .col-6, .product-content-wrapper .col-sm-6, .product-content-wrapper .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
}
/* ======================================================= */
/* === VÉGSŐ JAVÍTÁS: Színminta Rács Formázása === */
/* ======================================================= */

/* A teljes színminta-rács konténere */
.product-content-wrapper .row.szinminta {
    display: grid;
    /* Asztali nézetben 6 oszlop, ahogy az eredetin */
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem; /* Térköz a minták között */
    align-items: start;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

/* Az egyes színminta dobozok */
.product-content-wrapper .szinminta > div[class*="col-"] {
    width: auto; /* Felülírjuk a Bootstrap-szerű szélességet */
    padding: 0;  /* Eltávolítjuk a felesleges belső paddingot */
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

/* A kép, ami a linken belül van */
.product-content-wrapper .szinminta a img {
    border: 1px solid #ddd;
    border-radius: var(--radius);
    transition: transform var(--transition);
    margin-bottom: 0.5rem; /* Térköz a kép és a RAL kód között */
}

/* Hover effektus a képre */
.product-content-wrapper .szinminta a:hover img {
    transform: scale(1.1);
    border-color: var(--clr-secondary);
}

/* Reszponzív beállítások a rácshoz, hogy mobilon is jól nézzen ki */
/* Tableten 4 oszlop */
@media (max-width: 992px) {
    .product-content-wrapper .row.szinminta {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobilon 3 oszlop */
@media (max-width: 576px) {
    .product-content-wrapper .row.szinminta {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}
/* ======================================================= */
/* === VÉGSŐ JAVÍTÁS: Kiegészítő Termékek Rács Formázása === */
/* ======================================================= */

/* A konténer, ami a kiegészítők sorait tartalmazza */
.product-content-wrapper .kiegterm {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e2e8f0;
}

/* A sorokat alakítjuk ráccsá */
.product-content-wrapper .kiegterm .row {
    display: grid;
    /* Asztali nézetben 4 oszlop */
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; /* Térköz a cellák között */
    margin-bottom: 1.5rem; /* Térköz a sorok között */
}

/* Az egyes kiegészítő dobozok */
.product-content-wrapper .kiegterm div[class*="col-"] {
    background: var(--clr-light);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    transition: all var(--transition);
}

.product-content-wrapper .kiegterm div[class*="col-"]:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

/* A kiegészítő képe */
.product-content-wrapper .kiegterm img {
    max-height: 100px; /* Megakadályozzuk, hogy túl nagyok legyenek */
    width: auto;
    margin-bottom: 1rem;
    box-shadow: none; /* Itt nem kell a nagy árnyék */
}

/* A kiegészítő neve */
.product-content-wrapper .kiegterm strong {
    font-size: 0.9rem;
    color: var(--clr-dark);
    flex-grow: 1; /* Hogy a szöveg is kitöltse a helyet */
}

/* Reszponzív beállítások a rácshoz */
@media (max-width: 992px) {
    .product-content-wrapper .kiegterm .row {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .product-content-wrapper .kiegterm .row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .product-content-wrapper .kiegterm .row {
        grid-template-columns: 1fr; /* Mobilon egymás alá kerülnek */
    }
}