/* =====================================================================
 *  ONERGO THEME for OpenCart 3.0.4.1 default template
 *  ---------------------------------------------------------------------
 *  Ez a stilus felulirja a default OpenCart kinezet kulcs reszeit.
 *  A HTML strukturat lehetoseg szerint nem modositjuk, csak ahol
 *  feltetlenul szukseges (header.twig, menu.twig, footer.twig).
 * ===================================================================== */

:root{
    --onergo-bg:           #ffffff;
    --onergo-ink:          #0f172a;
    --onergo-ink-2:        #1e293b;
    --onergo-muted:        #64748b;
    --onergo-muted-2:      #94a3b8;
    --onergo-c1:           #0ea5e9;   /* cyan */
    --onergo-c2:           #10b981;   /* green */
    --onergo-c3:           #7c3aed;   /* purple */
    --onergo-pos:          #10b981;
    --onergo-neg:          #ef4444;
    --onergo-warn:         #f59e0b;

    --onergo-card:         rgba(255,255,255,.78);
    --onergo-card-strong:  rgba(255,255,255,.92);
    --onergo-border:       rgba(15,23,42,.10);
    --onergo-border-soft:  rgba(15,23,42,.06);
    --onergo-shadow:       0 18px 50px rgba(2,6,23,.08);
    --onergo-shadow-sm:    0 8px 22px rgba(2,6,23,.06);

    /* Antracit - tibber-szeru sotet menubar */
    --onergo-dark:         #0f172a;
    --onergo-dark-2:       #1e293b;
    --onergo-dark-3:       #334155;
    --onergo-dark-text:    #f8fafc;
    --onergo-dark-muted:   #cbd5e1;
    --onergo-dark-border:  rgba(255,255,255,.10);
}

/* =====================================================================
 *   GLOBAL TYPOGRAPHY
 * ===================================================================== */
body {
    font-family: 'Montserrat', 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    color: var(--onergo-ink);
    background: var(--onergo-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--onergo-ink);
}

/* =====================================================================
 *   AMBIENT - finom hatter elemek (csak fooldal)
 * ===================================================================== */
body.common-home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 15% 20%, rgba(14,165,233,.08), transparent 65%),
        radial-gradient(900px 600px at 85% 75%, rgba(16,185,129,.08), transparent 65%),
        radial-gradient(800px 500px at 65% 15%, rgba(124,58,237,.06), transparent 65%);
}

/* =====================================================================
 *   REGI FELSO SZURKE SAV ELTUNTETESE
 * ===================================================================== */
nav#top {
    display: none !important;
}

/* A regi <header> ami a logo+search+cart-ot tartalmazta - elnyomjuk. */
body > header {
    display: none !important;
}

/* =====================================================================
 *   ONERGO TOPBAR (A sav - sotet antracit, sticky)
 * ===================================================================== */
.onergo-topbar-wrap {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--onergo-dark);
    color: var(--onergo-dark-text);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.onergo-topbar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(12px, 2vw, 24px);
}

.onergo-topbar-inner {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 24px);
    height: 64px;
}

/* Logo (fekete-feher invertalva, hogy kontrasztosan latszodjon) */
.onergo-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.onergo-logo img {
    max-height: 38px;
    width: auto;
    /* Invert szuro KIVEVE - az eredeti szines logo lattszodik */
    transition: opacity .15s ease;
    /* Feher hatter a logo mogott, hogy lattszodjon a sotet menubaron */
    /*! background: #ffffff; */
    padding: 4px 8px;
    border-radius: 6px;
}
.onergo-logo:hover img {
    opacity: .85;
}

/* Mobil hamburger gomb */
.onergo-mobile-toggle {
    display: none;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--onergo-dark-border);
    color: var(--onergo-dark-text);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: background .15s ease;
}
.onergo-mobile-toggle:hover {
    background: var(--onergo-dark-2);
}

/* A kategoriak menuje (kozep) */
.onergo-menu-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;     /* fontos a flex shrink miatt */
}

.onergo-nav {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    overflow: visible;
}
.onergo-nav > li {
    position: relative;
    list-style: none;
}
.onergo-nav > li > a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    color: var(--onergo-dark-muted) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
    background: transparent !important;
}
.onergo-nav > li > a:hover,
.onergo-nav > li > a:focus,
.onergo-nav > li.open > a,
.onergo-nav > li:hover > a {
    color: var(--onergo-dark-text) !important;
    background: var(--onergo-dark-2) !important;
    text-decoration: none !important;
}

/* Dropdown menu (kategorian belul kategoriak) */
.onergo-nav .dropdown-menu {
    background: #ffffff;
    border: 1px solid var(--onergo-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(2,6,23,.16);
    padding: 14px;
    margin-top: 6px;
}
.onergo-nav .dropdown-menu .dropdown-inner {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.onergo-nav .dropdown-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 180px;
}
.onergo-nav .dropdown-menu ul li a {
    display: block;
    padding: 7px 10px;
    color: var(--onergo-ink-2) !important;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none !important;
}
.onergo-nav .dropdown-menu ul li a:hover {
    background: rgba(14,165,233,.08);
    color: var(--onergo-c1) !important;
}
.onergo-nav .dropdown-menu .see-all {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--onergo-border-soft);
    color: var(--onergo-c1) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
}
.onergo-nav .dropdown-menu .see-all:hover {
    color: var(--onergo-c2) !important;
}

/* Akciok a jobb oldalon (nyelv + fiok ikon + kosar ikon) */
.onergo-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Nyelvvalaszto (button group form) - kompakt + sotet temahoz */
.onergo-actions form#form-language { margin: 0; }
.onergo-actions form#form-language .btn-group { display: flex; align-items: center; }
.onergo-actions form#form-language .btn-link {
    color: var(--onergo-dark-muted) !important;
    background: transparent !important;
    border: 1px solid var(--onergo-dark-border) !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.onergo-actions form#form-language .btn-link:hover {
    background: var(--onergo-dark-2) !important;
    color: var(--onergo-dark-text) !important;
}
.onergo-actions form#form-language .dropdown-menu {
    background: #fff;
    border: 1px solid var(--onergo-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(2,6,23,.16);
    margin-top: 4px;
}
.onergo-actions form#form-language .dropdown-menu li button {
    color: var(--onergo-ink-2) !important;
}

/* Currency form is kapja meg ugyanezt - opcionalis */
.onergo-actions form#form-currency { margin: 0; display: none; }   /* alapból elrejtve, ha kell visszahozzuk */

/* Action ikon (fiok, kosar) */
.onergo-action-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--onergo-dark-muted) !important;
    background: transparent;
    text-decoration: none !important;
    font-size: 16px;
    border: 1px solid var(--onergo-dark-border);
    transition: background .15s ease, color .15s ease;
    position: relative;
}
.onergo-action-icon:hover,
.onergo-action-icon:focus {
    background: var(--onergo-dark-2);
    color: var(--onergo-dark-text) !important;
    text-decoration: none !important;
}

/* =====================================================================
 *   B SAV - vilagos sav a menu alatt: kereso + kosar
 *   Ezt eltakarhatja a lenyilo menu (z-index alacsonyabb).
 * ===================================================================== */
.onergo-search-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--onergo-border-soft);
    padding: 14px 0;
    position: relative;
    z-index: 1;
}

.onergo-search-bar .container {
    /* Teljes szelesseg, nincs margo - kereso a bal szelig megy */
    max-width: none !important;
    width: 100%;
    /*! margin: 0; */
    padding: 0 clamp(12px, 2vw, 24px);
}

.onergo-search-bar .row {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 24px);
    margin: 0;
}

.onergo-search-bar .onergo-search-cell {
    flex: 1 1 auto;
    min-width: 0;
}

.onergo-search-bar .onergo-cart-cell {
    flex: 0 0 auto;
}

/* Kereso input - onergo szerueen nagy, kerekitett */
.onergo-search-bar #search {
    margin: 0;
    padding: 0;
    width: 100%;
}
.onergo-search-bar #search.input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}
.onergo-search-bar #search input.form-control {
    height: 46px;
    border: 1px solid var(--onergo-border);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    padding: 0 16px;
    font-size: 14px;
    box-shadow: none;
    background: #fff;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 40%;
    margin-left: -30px;
}
.onergo-search-bar #search input.form-control:focus {
    border-color: var(--onergo-c1);
    box-shadow: 0 0 0 3px rgba(14,165,233,.18);
    outline: none;
    z-index: 2;
}
.onergo-search-bar #search .input-group-btn {
    display: flex;
    flex: 0 0 auto;
    width: auto !important;
    font-size: 0;
}
.onergo-search-bar #search button,
.onergo-search-bar #search .input-group-btn button.btn-default,
.onergo-search-bar #search .input-group-btn button.btn-lg {
    height: 46px !important;
    width: 56px !important;
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
    border: 0 !important;
    border-radius: 0 12px 12px 0 !important;
    color: #fff !important;
    cursor: pointer;
    transition: filter .15s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.onergo-search-bar #search button:hover,
.onergo-search-bar #search .input-group-btn button.btn-default:hover {
    filter: brightness(1.08);
    color: #fff !important;
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
}
.onergo-search-bar #search button i,
.onergo-search-bar #search .input-group-btn button i {
    color: #fff !important;
    font-size: 16px !important;
}

/* Kosar dropdown a B savban - B opcio: ikon + osszeg */
.onergo-search-bar #cart {
    width: auto;
    min-width: 200px;
}
.onergo-search-bar #cart > .btn {
    height: 46px;
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    text-shadow: none !important;
    transition: filter .15s ease !important;
    box-shadow: 0 4px 14px rgba(14,165,233,.30) !important;
}
.onergo-search-bar #cart > .btn:hover,
.onergo-search-bar #cart > .btn:focus,
.onergo-search-bar #cart > .btn.dropdown-toggle:focus {
    filter: brightness(1.08);
    color: #fff !important;
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
}
.onergo-search-bar #cart .dropdown-menu {
    background: #fff;
    border: 1px solid var(--onergo-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(2,6,23,.16);
    padding: 12px;
    margin-top: 6px;
    min-width: 320px;
}
.onergo-search-bar #cart .dropdown-menu table {
    margin: 0;
}
.onergo-search-bar #cart .dropdown-menu .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(248,250,252,.7);
}

/* =====================================================================
 *   TMDHEADER MENU STILIZALAS - az onergo sotet savjaba illeszkedik
 *   (a tmdheader.twig <nav id="menu"> elemet rajzol, amit beleteszunk
 *    az .onergo-menu-wrap-be a header.twig-ben)
 * ===================================================================== */
.onergo-menu-wrap > .container {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
}
.onergo-menu-wrap nav#menu,
.onergo-menu-wrap nav#menu.navbar {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
}
.onergo-menu-wrap nav#menu .navbar-header {
    display: none !important;   /* nem kell a saját mobil hamburger - mienk van */
}
.onergo-menu-wrap nav#menu .navbar-collapse {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    display: block !important;   /* mindig latszodjon desktopon */
}

/* A menu itemei */
.onergo-menu-wrap nav#menu .nav.navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 2px;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li {
    list-style: none;
    background: transparent !important;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li > a {
    display: inline-flex !important;
    align-items: center;
    height: 40px !important;
    padding: 0 14px !important;
    color: var(--onergo-dark-muted) !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    border-radius: 8px !important;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
    text-shadow: none !important;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li > a:hover,
.onergo-menu-wrap nav#menu .nav.navbar-nav > li > a:focus,
.onergo-menu-wrap nav#menu .nav.navbar-nav > li.open > a,
.onergo-menu-wrap nav#menu .nav.navbar-nav > li:hover > a {
    color: var(--onergo-dark-text) !important;
    background: var(--onergo-dark-2) !important;
}

/* Dropdown (kategorian beluli kategoriak / cikkek) */
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--onergo-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px rgba(2,6,23,.16) !important;
    padding: 14px !important;
    margin-top: 6px !important;
    min-width: 220px;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu .dropdown-inner {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 180px;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul li {
    list-style: none;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul li a {
    display: block !important;
    padding: 7px 10px !important;
    color: var(--onergo-ink-2) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul li a:hover {
    background: rgba(14,165,233,.08) !important;
    color: var(--onergo-c1) !important;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu .see-all {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--onergo-border-soft);
    color: var(--onergo-c1) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
}
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu .see-all:hover {
    color: var(--onergo-c2) !important;
}

/* Beagyazott (masodik szintu) ul - ami a tmdheader-ben kulon van */
.onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul ul {
    margin-top: 6px;
    padding-left: 12px;
    border-left: 2px solid var(--onergo-border-soft);
}

/* =====================================================================
 *   REGI .container > #menu RESZ ELNYOMASA
 *   (csak akkor, ha nem az .onergo-menu-wrap-ben van - ez paranoia,
 *    egyebkent nem szabadna ugyancsak megjelennie)
 * ===================================================================== */
body > .container > nav#menu:not(.onergo-menu-wrap nav#menu) {
    display: none !important;
}

/* =====================================================================
 *   FOOTER ATALAKITAS - vilagos / glass stilus
 * ===================================================================== */
footer {
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    color: var(--onergo-ink-2) !important;
    border-top: 1px solid var(--onergo-border-soft);
    padding: clamp(28px, 4vw, 48px) 0 18px !important;
    margin-top: clamp(24px, 4vw, 40px);
    position: relative;
}

footer .container {
    max-width: 1280px;
    margin: 0 auto;
}

footer h5 {
    color: var(--onergo-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px !important;
    border-bottom: 0;
    padding-bottom: 0;
}

footer ul.list-unstyled li a {
    color: var(--onergo-muted) !important;
    font-size: 13.5px;
    line-height: 2;
    transition: color .15s ease;
    text-decoration: none !important;
}
footer ul.list-unstyled li a:hover {
    color: var(--onergo-c1) !important;
}

footer hr {
    border-color: var(--onergo-border-soft);
    margin: 22px 0 12px;
}

footer p {
    color: var(--onergo-muted);
    font-size: 12px;
    margin: 0;
}
footer p a {
    color: var(--onergo-muted);
}

/* =====================================================================
 *   GOMBOK - btn-primary, btn-default, btn-inverse
 * ===================================================================== */
.btn {
    border-radius: 10px !important;
    font-weight: 600;
    transition: all .15s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    filter: brightness(1.08);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(14,165,233,.35);
}

.btn-default {
    background: #fff !important;
    border: 1px solid var(--onergo-border) !important;
    color: var(--onergo-ink-2) !important;
}
.btn-default:hover {
    background: #f8fafc !important;
    border-color: var(--onergo-c1) !important;
    color: var(--onergo-c1) !important;
}

.btn-info {
    background: var(--onergo-c1) !important;
    border-color: var(--onergo-c1) !important;
}

.btn-success {
    background: var(--onergo-c2) !important;
    border-color: var(--onergo-c2) !important;
}

.btn-danger {
    background: var(--onergo-neg) !important;
    border-color: var(--onergo-neg) !important;
}

/* =====================================================================
 *   TERMEK KARTYAK ATALAKITAS
 * ===================================================================== */
.product-thumb {
    background: #fff;
    border: 1px solid var(--onergo-border-soft) !important;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    margin-bottom: 20px;
}
.product-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(2,6,23,.10);
    border-color: var(--onergo-c1) !important;
}
.product-thumb .image {
    background: #fff;
    padding: 6px;
    text-align: center;
}
.product-thumb .image img {
    border-radius: 12px;
}
.product-thumb .caption {
    padding: 14px 16px 4px;
}
.product-thumb h4 {
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.3;
    min-height: 40px;
    margin: 0 0 8px !important;
}
.product-thumb h4 a {
    color: var(--onergo-ink) !important;
    text-decoration: none !important;
}
.product-thumb h4 a:hover {
    color: var(--onergo-c1) !important;
}
.product-thumb .description {
    font-size: 13px;
    color: var(--onergo-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}
.product-thumb .price {
    font-size: 16px !important;
    font-weight: 800;
    color: var(--onergo-ink);
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(14,165,233,.05), rgba(16,185,129,.05));
    border-top: 1px solid var(--onergo-border-soft);
    border-bottom: 1px solid var(--onergo-border-soft);
}
.product-thumb .price-old {
    color: var(--onergo-muted-2);
    text-decoration: line-through;
    margin-right: 6px;
    font-size: 14px;
}
.product-thumb .price-new {
    color: var(--onergo-neg);
}
.product-thumb .price-tax {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--onergo-muted);
    margin-top: 4px;
}
.product-thumb .button-group {
    border-top: 0;
    background: transparent;
    display: flex;
    gap: 6px;
    padding: 10px;
}
.product-thumb .button-group button {
    flex: 1;
    background: #fff !important;
    border: 1px solid var(--onergo-border) !important;
    color: var(--onergo-ink-2) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 600;
    transition: all .15s ease;
}
.product-thumb .button-group button:first-child {
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.product-thumb .button-group button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(2,6,23,.10);
}
.product-thumb .rating {
    padding: 0 16px 8px;
}
.product-thumb .rating .fa-stack {
    font-size: 9px;
}

/* =====================================================================
 *   KATEGORIA / KAT. NEZET
 * ===================================================================== */
#column-left .list-group, #column-right .list-group {
    border: 1px solid var(--onergo-border-soft);
    border-radius: 14px;
    overflow: hidden;
}
#column-left .list-group-item, #column-right .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--onergo-border-soft);
    color: var(--onergo-ink-2);
    background: #fff;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 500;
}
#column-left .list-group-item:last-child, #column-right .list-group-item:last-child {
    border-bottom: 0;
}
#column-left .list-group-item:hover, #column-right .list-group-item:hover {
    background: rgba(14,165,233,.05);
    color: var(--onergo-c1);
}

/* =====================================================================
 *   TERMEK OLDAL
 * ===================================================================== */
.thumbnails {
    list-style: none;
    padding: 0;
}
.thumbnails > li img {
    border-radius: 12px;
}
#product .form-group label {
    font-weight: 600;
    color: var(--onergo-ink-2);
}
#product .price {
    font-size: 28px;
    font-weight: 800;
    color: var(--onergo-ink);
}

/* =====================================================================
 *   FORM ELEMEK
 * ===================================================================== */
.form-control {
    border: 1px solid var(--onergo-border);
    border-radius: 10px;
    height: 40px;
    padding: 0 12px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--onergo-c1);
    box-shadow: 0 0 0 3px rgba(14,165,233,.15);
    outline: none;
}
textarea.form-control {
    height: auto;
    padding: 10px 12px;
}

/* =====================================================================
 *   BREADCRUMB
 * ===================================================================== */
.breadcrumb {
    background: transparent;
    border: 0;
    padding: 14px 0;
    margin-bottom: 14px;
    font-size: 12.5px;
}
.breadcrumb > li > a {
    color: var(--onergo-muted) !important;
}
.breadcrumb > li.active, .breadcrumb > .active {
    color: var(--onergo-ink-2);
    font-weight: 600;
}

/* =====================================================================
 *   SWIPER / SLIDESHOW (a fooldali nagy bannert tobbnyire OC modul rakja)
 * ===================================================================== */
.swiper-viewport {
    border: 0 !important;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(2,6,23,.08);
}

/* =====================================================================
 *   ALERT / INFO DOBOZOK
 * ===================================================================== */
.alert {
    border-radius: 12px;
    border: 1px solid var(--onergo-border);
    padding: 12px 16px;
}
.alert-success {
    background: rgba(16,185,129,.10);
    color: #047857;
    border-color: rgba(16,185,129,.25);
}
.alert-danger {
    background: rgba(239,68,68,.08);
    color: #b91c1c;
    border-color: rgba(239,68,68,.25);
}
.alert-info {
    background: rgba(14,165,233,.08);
    color: #0369a1;
    border-color: rgba(14,165,233,.25);
}

/* =====================================================================
 *   TABLA STILUSOK (kosar, fizetes oldal, fiokom)
 * ===================================================================== */
.table {
    border-collapse: separate;
    border-spacing: 0;
}
.table > thead > tr > th {
    background: #f8fafc;
    border-bottom: 1px solid var(--onergo-border) !important;
    color: var(--onergo-ink-2);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.table-bordered, .table {
    border: 1px solid var(--onergo-border-soft);
    border-radius: 12px;
    overflow: hidden;
}

/* =====================================================================
 *   HIRDETES / BAL OLDALI BANNER MAPPA
 *   A user kepei: ADA P1 METER, PZIOT-E02, PENTASUN — keretek lazitasa.
 * ===================================================================== */
.banner img,
#column-left .banner img,
#column-left img.img-responsive {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(2,6,23,.10);
    transition: transform .15s ease;
}
.banner img:hover,
#column-left .banner img:hover {
    transform: translateY(-2px);
}

/* =====================================================================
 *   COOKIE POPUP RESTYLE - a meglevo zold dobozt vilagosabbra hozzuk
 * ===================================================================== */
#gh-cookie-popup .gh-cookie-box {
    background: #fff !important;
    color: var(--onergo-ink) !important;
    border: 1px solid var(--onergo-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(2,6,23,.18) !important;
}
#gh-cookie-popup .gh-cookie-box h4 {
    color: var(--onergo-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0;
}
#gh-cookie-popup .gh-cookie-box p {
    color: var(--onergo-ink-2) !important;
    font-size: 13px !important;
}
#gh-cookie-popup .gh-cookie-box a {
    color: var(--onergo-c1) !important;
    text-decoration: underline;
}
#gh-cookie-popup .gh-cookie-box button {
    background: linear-gradient(135deg, var(--onergo-c1), var(--onergo-c2)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: filter .15s ease;
}
#gh-cookie-popup .gh-cookie-box button:hover {
    filter: brightness(1.08);
}

/* =====================================================================
 *   MOBIL KEZELES
 * ===================================================================== */
@media (max-width: 991px) {
    /* Mobil hamburger kapcsolora kapcsoljuk a menut */
    .onergo-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* A kategoria menu mobilon - alapbol elrejtve */
    .onergo-menu-wrap {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--onergo-dark);
        padding: 12px;
        border-top: 1px solid var(--onergo-dark-border);
        box-shadow: 0 8px 24px rgba(0,0,0,.30);
        z-index: 1029;
    }
    .onergo-menu-wrap.is-open {
        display: block;
    }
    .onergo-nav {
        flex-direction: column;
        gap: 4px;
    }
    .onergo-nav > li {
        width: 100%;
    }
    .onergo-nav > li > a {
        width: 100%;
        height: 44px;
    }

    /* TMDHEADER mobil specifikus stilus */
    .onergo-menu-wrap nav#menu .nav.navbar-nav {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .onergo-menu-wrap nav#menu .nav.navbar-nav > li {
        width: 100%;
    }
    .onergo-menu-wrap nav#menu .nav.navbar-nav > li > a {
        width: 100%;
        height: 44px !important;
    }
    .onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu {
        position: static !important;
        float: none !important;
        margin-top: 4px !important;
        background: var(--onergo-dark-2) !important;
        border-color: var(--onergo-dark-border) !important;
        box-shadow: none !important;
    }
    .onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul li a {
        color: var(--onergo-dark-muted) !important;
    }
    .onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu ul li a:hover {
        background: rgba(255,255,255,.05) !important;
        color: var(--onergo-dark-text) !important;
    }
    .onergo-menu-wrap nav#menu .nav.navbar-nav > li .dropdown-menu .see-all {
        color: var(--onergo-c2) !important;
        border-top-color: var(--onergo-dark-border) !important;
    }

    /* Dropdown legyen elhelyezve normalisan mobilon */
    .onergo-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        margin-top: 4px !important;
        background: var(--onergo-dark-2) !important;
        border-color: var(--onergo-dark-border) !important;
        box-shadow: none !important;
    }
    .onergo-nav .dropdown-menu ul li a {
        color: var(--onergo-dark-muted) !important;
    }
    .onergo-nav .dropdown-menu ul li a:hover {
        background: rgba(255,255,255,.05);
        color: var(--onergo-dark-text) !important;
    }
    .onergo-nav .dropdown-menu .see-all {
        color: var(--onergo-c2) !important;
        border-top-color: var(--onergo-dark-border) !important;
    }

    /* B sav: B opcio mobilra atrendezodik */
    .onergo-search-bar .row {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .onergo-search-bar .onergo-search-cell {
        flex: 1 1 auto;
        display:none;
    }
    .onergo-search-bar .onergo-cart-cell {
        flex: 0 0 auto;
    }
    .onergo-search-bar #search input.form-control {
        height: 42px;
        font-size: 14px;
    }
    .onergo-search-bar #search button {
        height: 42px;
        width: 48px;
    }
    .onergo-search-bar #cart > .btn {
        height: 42px;
        padding: 0 12px !important;
        font-size: 13px !important;
    }
    .onergo-search-bar #cart {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    /* Pici telefonon meg kompaktabb */
    .onergo-topbar-inner {
        height: 56px;
        gap: 6px;
    }
    .onergo-logo img {
        max-height: 32px;
    }
    .onergo-action-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .onergo-actions form#form-language .btn-link {
        height: 36px;
        padding: 0 8px !important;
    }
    .onergo-search-bar {
        padding: 10px 0;
    }
    .onergo-menu-wrap {
        top: 56px;
    }
    /* A "0 termek - 0 Forint" kosar gomb mobilon roviditett megjelenese */
    .onergo-search-bar #cart > .btn span#cart-total {
        font-size: 12px;
    }
}

/* =====================================================================
 *   POSITIONING fix: a regi "container" a logo+search+cart-bol mar nem kell
 * ===================================================================== */
body > #common-home,
body > .container#common-home {
    padding-top: 18px;
}

/* =====================================================================
 *   PRINT
 * ===================================================================== */
@media print {
    .onergo-topbar-wrap, .onergo-search-bar, footer, #gh-cookie-popup {
        display: none !important;
    }
}