/* =========================================================================
   arculat2026.css — uj arculat a Gyerekjatekbolt/Hracky shopokhoz
   Verzio:      1.71.1  (a retegek sajat verziojelolest is viselnek)
   Keszitette:  Claude Opus 5 (claude-opus-5) — 2026-09-03
   Fajl:        hrackypredeti.sk/default/css/arculat2026.css
   Betoltve:    pages/base/base.page.php — UTOLSOKENT, hogy felulirja a tobbit

   Szinrendszer a gyerekjatekbolt.hu-rol:
     #003B6F  mely kek   — szoveg, cimsor, ar, hero
     #FF7D2F  narancs    — MINDEN cselekves (gomb, kosar, aktiv elem)
     #E3F8FC  jeges kek  — az oldal alapja
     #D31010  piros      — akcio, kedvezmeny
     #10AE20  zold       — keszlet
     #16ADCA  turkiz     — ujdonsag
   A meglevo Bootstrap 3-as szerkezetre epul: sablont nem cserelunk,
   csak felulirjuk a megjelenest. Visszaallitas: a betolto sor kikommentelese.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --gjb-kek:      #003B6F;
  --gjb-kek-sot:  #002B51;
  --gjb-narancs:  #FF7D2F;
  --gjb-nar-sot:  #D9631B;
  --gjb-jeges:    #E3F8FC;
  --gjb-jeges-vl: #F4FBFD;
  --gjb-piros:    #D31010;
  --gjb-zold:     #10AE20;
  --gjb-turkiz:   #16ADCA;
  --gjb-arany:    #AE8B10;
  --gjb-halvany:  #7E96AB;
  --gjb-keret:    #B8E4EF;
  --gjb-szoveg:   #1B2036;
}

/* ---------- ALAP ---------- */
body {
  font-family: 'Nunito', 'Trebuchet MS', sans-serif !important;
  background: var(--gjb-jeges) !important;
  color: var(--gjb-szoveg);
}
h1, h2, h3, h4, .h1, .h2, .h3 { font-family: 'Nunito', 'Trebuchet MS', sans-serif; font-weight: 900; color: var(--gjb-kek); }
a { color: var(--gjb-narancs); }
a:hover, a:focus { color: var(--gjb-nar-sot); }

/* ---------- FEJLEC ---------- */
.navbar-top-info { background: var(--gjb-kek) !important; border: none !important; color: #FFFFFF; }
.navbar-top-info a, .navbar-top-info span { color: #D6E9F5 !important; }

.navbar-top { background: #FFFFFF !important; border: none !important; box-shadow: none !important; margin-bottom: 0 !important; }
.navbar-top .navbar-brand { padding: 10px 15px; height: auto; }
.navbar-top .navbar-brand img { max-height: 52px; width: auto; }

/* kereso: kerek pill */
.navbar-top .search-wrapper, .search-wrapper {
  background: var(--gjb-jeges) !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: none !important;
}
.search-wrapper input[type="text"], .search-wrapper .form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 46px;
  font-size: 16px;
  color: var(--gjb-kek);
}
.search-wrapper .form-control::placeholder { color: var(--gjb-halvany); }
.search-wrapper .btn, .search-wrapper button[type="submit"] {
  background: var(--gjb-narancs) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  height: 40px;
  min-width: 46px;
  margin: 3px 4px 3px 0;
}

/* felso ikonsor */
.menu-blue > a { color: var(--gjb-kek) !important; font-weight: 700; }
.menu-blue > a:hover { color: var(--gjb-narancs) !important; }
.cart-span { position: relative; display: inline-block; }
.cart-badge, .badge.cart-badge {
  background: var(--gjb-piros) !important;
  border: 2px solid #FFFFFF;
  color: #FFFFFF !important;
  font-weight: 900;
  border-radius: 999px;
}

/* ---------- KATEGORIA-MENU ---------- */
.navbar-top-menu, .cat-menu { background: transparent !important; border: none !important; }
.cat-menu .dropdown-toggle, .navbar-top-menu .dropdown-toggle {
  font-weight: 700 !important;
  color: var(--gjb-kek) !important;
  border-radius: 999px;
  padding: 12px 18px !important;
  min-height: 44px;
}
.cat-menu .dropdown-toggle:hover, .cat-menu .open > .dropdown-toggle {
  background: var(--gjb-jeges) !important;
  color: var(--gjb-narancs) !important;
}
.dropdown-menu {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 40px rgba(0, 59, 111, 0.18) !important;
  padding: 12px !important;
}
.dropdown-menu > li > a, .dropdown-menu li a {
  border-radius: 12px;
  padding: 10px 14px !important;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  font-weight: 600;
  color: var(--gjb-kek) !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu li a:hover {
  background: var(--gjb-jeges) !important;
  color: var(--gjb-narancs) !important;
}

/* ---------- TERMEKKARTYA ---------- */
.product {
  background: #FFFFFF;
  border: none !important;
  border-radius: 26px;
  padding: 16px;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 59, 111, 0.12); }

.product .product-image {
  background: var(--gjb-jeges-vl);
  border-radius: 18px;
  overflow: hidden;
  border: none !important;
}
.product .product-image img { mix-blend-mode: multiply; }

.product .product-label { position: absolute; z-index: 3; top: 10px; left: 10px; }
.product .product-label .discount, .product .discount {
  background: var(--gjb-piros) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: none !important;
}
.product .product-label .new, .product .new {
  background: var(--gjb-turkiz) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
}

.product .product-name, .product h2.product-name {
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 700;
  margin: 10px 0 8px 0;
  min-height: 62px;
}
.product .product-name a { color: var(--gjb-szoveg) !important; }
.product .product-name a:hover { color: var(--gjb-narancs) !important; }

.product .price-box { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.product .price, .price-box .price {
  font-weight: 900 !important;
  font-size: 23px !important;
  color: var(--gjb-kek) !important;
}
.product .old-price, .price-box .old-price {
  font-size: 15px !important;
  color: var(--gjb-halvany) !important;
  text-decoration: line-through;
  font-weight: 600;
}
/* akcios ar pirosan, ha van athuzott regi ar */
.price-box:has(.old-price) .price { color: var(--gjb-piros) !important; }

/* ---------- GOMBOK ---------- */
.btn, .btn-primary, .btn-default, input[type="submit"], button[type="submit"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  border: none !important;
  min-height: 44px;
  padding: 11px 24px;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-primary, .btn.btn-primary, input[type="submit"].btn-primary {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--gjb-nar-sot) !important;
  color: #FFFFFF !important;
}
.btn-default {
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
  border: 2px solid var(--gjb-keret) !important;
}
.btn-default:hover { background: var(--gjb-jeges) !important; color: var(--gjb-narancs) !important; }
.btn-blue, .btn-success {
  background: var(--gjb-kek) !important;
  color: #FFFFFF !important;
}

/* ---------- DOBOZOK, SAVOK ---------- */
.box-container, .panel, .well, .inner_container {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}
.inner_container_title, .home_products_box_title, .box-title {
  font-weight: 900 !important;
  font-size: 26px !important;
  color: var(--gjb-kek) !important;
  border: none !important;
  padding-bottom: 8px;
}
.breadcrumb { background: transparent !important; padding-left: 0 !important; }
.breadcrumb a { color: var(--gjb-halvany) !important; }
.breadcrumb .active, .breadcrumb > .active { color: var(--gjb-kek) !important; font-weight: 700; }

/* ---------- KESZLET-JELZES ---------- */
.stock, .in-stock, .availability, .raktaron {
  color: var(--gjb-zold) !important;
  font-weight: 800;
}

/* ---------- LABLEC ---------- */
footer, .footer, .footer-menu {
  background: var(--gjb-kek) !important;
  color: #A9C7DD !important;
  border: none !important;
}
footer a, .footer a, .footer-menu a { color: #A9C7DD !important; }
footer a:hover, .footer a:hover, .footer-menu a:hover { color: var(--gjb-narancs) !important; }

/* ---------- MOBIL ---------- */
@media (max-width: 767px) {
  .navbar-top .navbar-brand img { max-height: 40px; }
  .product { padding: 12px; border-radius: 20px; }
  .product .product-name { font-size: 14px; min-height: 54px; }
  .product .price, .price-box .price { font-size: 19px !important; }
  /* koppinthato elemek: legalabb 44px */
  .mobile-menu > li > a, .menu-blue > a { min-height: 44px; display: flex; align-items: center; }
  .btn, input[type="submit"], button[type="submit"] { min-height: 48px; }
}

/* =========================================================================
   2. RETEG — KATEGORIAFA (spielmarkt.de mintaja)
   v1.1.0 — 2026-09-03, Claude Opus 5
   A meglevo HTML-fara epul: #mainNav > li.level-1 > ul.dropdown-menu.level-2
   Bal oszlop = fokategoriak, jobb panel = a kivalasztott ag alkategoriai.
   PHP-t NEM modositunk.
   ========================================================================= */

/* --- a fat nyito gomb --- */
.cat-menu .floating-menu .dropbtn,
.cat-menu .floating-menu .btn-red2 {
  background: var(--gjb-kek) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 800 !important;
  min-height: 46px;
  padding: 12px 22px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.cat-menu .floating-menu .dropbtn:hover,
.cat-menu .floating-menu .btn-red2:hover { background: #00294E !important; color: #FFFFFF !important; }
.cat-menu .floating-menu .dropbtn span,
.cat-menu .floating-menu .btn-red2 span { padding-bottom: 0 !important; }

/* --- BAL OSZLOP: a fokategoriak --- */
#mainNav.dropdown-menu {
  width: 320px;
  min-width: 320px;
  padding: 14px 12px !important;
  border-radius: 24px !important;
  border: none !important;
  box-shadow: 0 18px 46px rgba(0, 59, 111, 0.22) !important;
  overflow: visible;   /* a jobb panel kilĂłghat */
}
#mainNav > li { position: static; }
#mainNav > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 16px !important;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--gjb-kek) !important;
  white-space: normal;
}
#mainNav > li > a:hover,
#mainNav > li:hover > a {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
}
/* nyil azoknal, amiknek van alkategoriajuk */
#mainNav > li.dropdown-submenu > a::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2.5px solid #B0C6D6;
  border-bottom: 2.5px solid #B0C6D6;
  transform: rotate(-45deg);
  flex-shrink: 0;
}
#mainNav > li.dropdown-submenu:hover > a::after { border-color: #FFFFFF; }

/* kiemelt belepok: Ujdonsagok es Akcios jatekok (a shop sajat kategoria-id-i) */
#mainNav > li.cat-584 > a { background: #FFF0E6; color: var(--gjb-narancs) !important; font-weight: 800; }
#mainNav > li.cat-585 > a { background: #FDEAEA; color: var(--gjb-piros) !important; font-weight: 800; }
#mainNav > li.cat-584:hover > a { background: var(--gjb-narancs); color: #FFFFFF !important; }
#mainNav > li.cat-585:hover > a { background: var(--gjb-piros); color: #FFFFFF !important; }
#mainNav > li.cat-585 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--gjb-jeges); }

/* --- JOBB PANEL: a kivalasztott ag alkategoriai --- */
#mainNav > li > ul.dropdown-menu.level-2 {
  display: none;
  position: absolute !important;
  left: 320px !important;
  top: 0 !important;
  width: 620px !important;
  min-height: 100%;
  max-height: 560px;
  overflow-y: auto;
  background: var(--gjb-jeges-vl) !important;
  border: none !important;
  border-left: 2px solid var(--gjb-jeges) !important;
  border-radius: 0 24px 24px 0 !important;
  box-shadow: none !important;
  padding: 18px 22px !important;
  margin: 0 !important;
  columns: 2;
  column-gap: 24px;
}
#mainNav > li:hover > ul.dropdown-menu.level-2 { display: block !important; }

#mainNav ul.level-2 > li {
  break-inside: avoid;
  display: block;
  width: 100%;
}
#mainNav ul.level-2 > li > a {
  display: flex !important;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px !important;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gjb-szoveg) !important;
  line-height: 1.3;
  white-space: normal;
}
#mainNav ul.level-2 > li > a:hover {
  background: #FFFFFF !important;
  color: var(--gjb-narancs) !important;
}

/* a meglevo mega-menu oszlop-osztalyokat semlegesitjuk, a columns intezi */
#mainNav ul.level-2 > li.column1,
#mainNav ul.level-2 > li.column2,
#mainNav ul.level-2 > li.column3 { float: none !important; width: 100% !important; }

/* --- mobil: a fa egy oszlopban, teljes szelessegben --- */
@media (max-width: 991px) {
  #mainNav.dropdown-menu { width: 100%; min-width: 0; }
  #mainNav > li > ul.dropdown-menu.level-2 {
    position: static !important;
    width: 100% !important;
    max-height: none;
    columns: 1;
    border-left: none !important;
    border-radius: 14px !important;
    margin: 4px 0 10px 0 !important;
  }
  #mainNav > li.dropdown-submenu > a::after { transform: rotate(45deg); }
}

/* =========================================================================
   2b. JAVITAS — a jobb panel ne tunjon el atkozben (v1.2.0, 2026-09-03)
   HIBA VOLT: a bal oszlop belso margoja (12px) miatt res maradt a lista es a
   panel kozott. Amig az eger a resben jart, sem a <li>, sem a panel nem volt
   alatta, ezert a :hover megszunt es a panel eltunt.
   JAVITAS: (1) a panel 2px-et RAFED a bal oszlopra, igy nincs res;
            (2) display helyett visibility+opacity, 0.3s turelmi idovel —
                igy atlos egermozgasnal sem esik ki azonnal.
   ========================================================================= */

#mainNav > li > ul.dropdown-menu.level-2 {
  display: block !important;          /* mindig a DOM-ban, de rejtve */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  left: 306px !important;             /* 2px atfedes a bal oszloppal: nincs res */
  transition: opacity .14s ease, visibility 0s linear .30s;
}

/* nyitva: a kategoria FOLOTT es magan a PANELEN allva is */
#mainNav > li:hover > ul.dropdown-menu.level-2,
#mainNav > li > ul.dropdown-menu.level-2:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .14s ease, visibility 0s linear 0s;
}

/* a kategoria maradjon kiemelve, amig a panelen dolgozunk */
#mainNav > li.dropdown-submenu:hover > a { background: var(--gjb-narancs) !important; color: #FFFFFF !important; }

@media (max-width: 991px) {
  /* mobilon nincs hover: maradjon a lenyilo viselkedes */
  #mainNav > li > ul.dropdown-menu.level-2 {
    left: 0 !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    display: none !important;
  }
  #mainNav > li.open > ul.dropdown-menu.level-2,
  #mainNav > li:hover > ul.dropdown-menu.level-2 { display: block !important; }
}

/* =========================================================================
   3. RETEG — TERMEKOLDAL (v1.3.0, 2026-09-03)
   Osztalyok a valodi oldalrol: h1.product-name, .product-image, .badget-wrapper,
   .product-thumbnails, .price/.old-price, .product-button, #cart_qty, .rating_bar
   ========================================================================= */

/* --- termeknev --- */
h1.product-name {
  font-weight: 900 !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  color: var(--gjb-kek) !important;
  margin: 0 0 14px 0 !important;
  text-wrap: pretty;
}

/* --- galeria --- */
.col-md-7 > .product-image,
.product-image:not(.img-responsive) {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 18px;
  position: relative;
}
.product-thumbnails { margin-top: 12px !important; }
.product-thumbnails .owl-item img {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 6px;
  border: 3px solid transparent;
}
.product-thumbnails .owl-item.current img,
.product-thumbnails .owl-item:hover img { border-color: var(--gjb-narancs); }

.badget-wrapper { position: absolute; z-index: 4; top: 16px; left: 16px; }
.badget-wrapper .discount {
  background: var(--gjb-piros) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 6px 15px !important;
  font-weight: 800;
  font-size: 14px;
}

/* --- vasarlo doboz (jobb hasab) --- */
.col-md-5[itemprop="offers"] {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 26px 28px !important;
}
.col-md-5[itemprop="offers"] .price {
  display: inline-block;
  font-weight: 900 !important;
  font-size: 38px !important;
  color: var(--gjb-kek) !important;
  line-height: 1.1;
}
.col-md-5[itemprop="offers"] .old-price {
  font-size: 17px !important;
  color: var(--gjb-halvany) !important;
  text-decoration: line-through;
  font-weight: 600;
  margin-left: 10px;
}

/* --- mennyiseg + kosarba --- */
.product-button { display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
#cart_qty {
  width: 74px !important;
  height: 56px !important;
  text-align: center;
  font-weight: 900;
  font-size: 19px;
  color: var(--gjb-kek);
  background: var(--gjb-jeges-vl) !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.product-button .btn-primary, #cart_btn {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  min-height: 56px;
  padding: 0 32px !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
.product-button .btn-primary:hover, #cart_btn:hover { background: var(--gjb-nar-sot) !important; }
/* kivansaglista: korre */
.product-button .btn-red {
  background: var(--gjb-jeges-vl) !important;
  color: var(--gjb-kek) !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 999px !important;
  min-height: 56px;
  width: 56px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.product-button .btn-red:hover { background: #FFE9DB !important; color: var(--gjb-narancs) !important; border-color: var(--gjb-narancs) !important; }
.product-button .btn-red span:not(.fa) { display: none; }   /* csak a sziv-ikon marad */

/* --- ertekeles --- */
.rating_bar { background: #DCE6EC !important; border-radius: 999px; height: 12px; overflow: hidden; }
.rating_bar .rating { background: #FFB020 !important; height: 12px; }
.text-orange { color: var(--gjb-narancs) !important; font-weight: 700; }

/* --- lapok / fulek a leiras alatt --- */
.nav-tabs { border-bottom: 2px solid var(--gjb-jeges) !important; gap: 6px; }
.nav-tabs > li > a {
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800;
  color: var(--gjb-halvany) !important;
  min-height: 44px;
  padding: 11px 22px !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
  background: var(--gjb-kek) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.tab-content { background: #FFFFFF; border-radius: 24px; padding: 26px 30px; margin-top: 16px; }
.tab-content p, .tab-content li { font-size: 16px; line-height: 1.7; max-width: 720px; }

/* --- jellemzo-tablazat --- */
.table > tbody > tr > td, .table > tbody > tr > th {
  border-color: #F0F7FA !important;
  padding: 13px 12px !important;
  font-size: 15.5px;
}
.table > tbody > tr > th, .table td:first-child { color: var(--gjb-halvany); font-weight: 600; }
.table td:last-child { color: var(--gjb-kek); font-weight: 800; text-align: right; }

@media (max-width: 767px) {
  h1.product-name { font-size: 22px !important; }
  .col-md-5[itemprop="offers"] .price { font-size: 30px !important; }
  .col-md-5[itemprop="offers"] { padding: 20px !important; }
  .product-button .btn-primary, #cart_btn { flex-grow: 1; justify-content: center; }
}

/* =========================================================================
   4. RETEG — KOSAR ES PENZTAR (v1.4.0, 2026-09-03)
   Osztalyok a valodi oldalrol: table.cart-table, td.product-image-td,
   td.product-name-td, div.quantity (.minus/.qty/.plus), a.btn-remove2,
   .btn-cart; checkout: #CheckoutModel, .shipping-address-form,
   #cb_country_id (a 09-02-an elesitett orszag-valaszto), #country_warning
   ========================================================================= */

/* --- kosar tabla --- */
.cart-page { background: transparent; }
table.cart-table {
  background: #FFFFFF;
  border-radius: 26px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
table.cart-table thead th {
  background: var(--gjb-jeges-vl);
  color: var(--gjb-halvany) !important;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none !important;
  padding: 16px 14px !important;
}
table.cart-table td {
  border: none !important;
  border-top: 2px solid #F0F7FA !important;
  padding: 16px 14px !important;
  vertical-align: middle !important;
}
table.cart-table td.product-image-td img {
  background: var(--gjb-jeges-vl);
  border-radius: 18px;
  padding: 8px;
  max-width: 96px;
}
table.cart-table td.product-name-td a {
  font-weight: 700;
  font-size: 16px;
  color: var(--gjb-szoveg) !important;
  line-height: 1.35;
}
table.cart-table td.product-name-td a:hover { color: var(--gjb-narancs) !important; }
table.cart-table .price { font-weight: 900 !important; font-size: 20px !important; color: var(--gjb-kek) !important; }

/* mennyiseg-lepteto: kerek pill */
.quantity {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  background: var(--gjb-jeges-vl);
  border: 2px solid var(--gjb-keret);
  border-radius: 999px;
  padding: 4px;
}
.quantity .minus, .quantity .plus {
  width: 38px; height: 38px;
  border: none !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  padding: 0 !important;
  min-height: 0 !important;
}
.quantity .minus:hover, .quantity .plus:hover { background: var(--gjb-narancs) !important; color: #FFFFFF !important; }
.quantity .qty, .quantity input.text {
  width: 44px !important;
  height: 38px;
  text-align: center;
  border: none !important;
  background: transparent !important;
  font-weight: 900;
  font-size: 17px;
  color: var(--gjb-kek);
  box-shadow: none !important;
}
.btn-remove2, .btn-remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--gjb-jeges-vl);
  color: var(--gjb-halvany) !important;
}
.btn-remove2:hover, .btn-remove:hover { background: #FDEAEA; color: var(--gjb-piros) !important; }

/* tovabb a penztarhoz */
.btn-cart, .btn.btn-primary.btn-cart {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  min-height: 56px;
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 0 34px !important;
}

/* --- PENZTAR --- */
#CheckoutModel .box-container,
.shipping-address-form, .billing-address-form {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 24px 28px;
}
#CheckoutModel .form-group { margin-bottom: 16px; }
#CheckoutModel label, .shipping-address-form label {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--gjb-kek);
  margin-bottom: 6px;
}
#CheckoutModel .form-control, .shipping-address-form .form-control {
  height: 52px;
  border-radius: 16px !important;
  border: 2px solid var(--gjb-keret) !important;
  background: var(--gjb-jeges-vl) !important;
  box-shadow: none !important;
  font-size: 16px;
  color: var(--gjb-szoveg);
  padding: 0 16px;
}
#CheckoutModel .form-control:focus, .shipping-address-form .form-control:focus {
  border-color: var(--gjb-narancs) !important;
  background: #FFFFFF !important;
}

/* az orszag-valaszto (2026-09-02 ota eles) — hangsulyos, mert ezen mulik a szallitas */
select#cb_country_id {
  height: 52px;
  border-radius: 16px !important;
  border: 2px solid var(--gjb-narancs) !important;
  background: #FFFFFF !important;
  font-weight: 800;
  font-size: 16px;
  color: var(--gjb-kek) !important;
}
select#cb_country_id[wrong="wrong"] { border-color: var(--gjb-piros) !important; background: #FDEAEA !important; }
#country_warning {
  border-radius: 16px !important;
  background: #FDEAEA !important;
  border: none !important;
  color: #B01414 !important;
  font-weight: 800;
  padding: 13px 16px !important;
  margin-top: 6px !important;
  line-height: 1.45;
}

/* szallitasi es fizetesi mod valaszto */
#CheckoutModel .radio, #CheckoutModel .shipping-method, #CheckoutModel .payment-method {
  border: 2px solid var(--gjb-jeges);
  border-radius: 18px;
  padding: 14px 18px;
  margin-bottom: 10px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#CheckoutModel input[type="radio"]:checked + label,
#CheckoutModel .radio input[type="radio"]:checked ~ * { color: var(--gjb-kek); font-weight: 800; }

/* tovabb/megrendelem gomb */
.btn_next, button[name$="btn_next"], input[name$="btn_next"] {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  min-height: 56px;
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 0 34px !important;
}
.btn_next[disabled], button[name$="btn_next"][disabled] {
  background: #C9D6DF !important;
  cursor: not-allowed;
}
.btn_prev, button[name$="btn_prev"] {
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 999px !important;
  min-height: 52px;
}

/* hibauzenetek */
#errormessage, .alert-danger, .error {
  border-radius: 18px !important;
  border: none !important;
  background: #FDEAEA !important;
  color: #B01414 !important;
  font-weight: 700;
  padding: 14px 18px !important;
}
.alert-success { border-radius: 18px !important; border: none !important; background: #E4F5E6 !important; color: #0B7C17 !important; }

@media (max-width: 767px) {
  table.cart-table td { padding: 12px 8px !important; }
  table.cart-table td.product-image-td img { max-width: 72px; }
  .btn-cart, .btn_next, button[name$="btn_next"] { width: 100%; justify-content: center; }
  #CheckoutModel .form-control { font-size: 16px; }  /* 16px alatt a mobil ranagyit */
}

/* =========================================================================
   5. RETEG — TERMEKKARTYA FINOMITAS (v1.5.0, 2026-09-03)
   A 2026-09-03-i visszajelzes alapjan:
     - a terminev ALAHUZOTT link volt (regi bootstrap-orokseg)
     - a kosargomb ORIASI ovalis lett, mert a 4. reteg .btn-cart szabalya
       (56px, 34px padding) a kartyara is ravonatkozott
     - a rovid leiras hosszan, sorkizartan folyt szet
     - a szekcio-cim (h3.slider-title) savos hattere zavaro volt
   ========================================================================= */

/* --- terminev: nincs alahuzas, nyugodt szoveg --- */
.product .product-name a,
.product h2.product-name a {
  text-decoration: none !important;
  border-bottom: none !important;
  color: var(--gjb-szoveg) !important;
  font-weight: 700;
}
.product .product-name a:hover { text-decoration: none !important; color: var(--gjb-narancs) !important; }

/* --- ertekeles: kisebb, halvanyabb, ne vigye el a figyelmet --- */
.product .rating { margin: 6px 0 4px 0; transform: scale(.82); transform-origin: left center; opacity: .75; }

/* --- rovid leiras: legfeljebb 2 sor, balra zartan --- */
.product .short-description {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--gjb-halvany) !important;
  text-align: left !important;
  margin: 8px 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 42px;
}

/* --- keszlet-jelzes --- */
.product .stock-status.in-stock,
.stock-status.in-stock { color: var(--gjb-zold) !important; font-weight: 800; font-size: 14px; }
.stock-status.out-of-stock { color: var(--gjb-halvany) !important; font-weight: 700; }

/* --- gombsor a kartyan: KEREK, 46px — nem a kosaroldali szeles gomb! --- */
.product .action-buttons { display: flex !important; align-items: center; gap: 8px; margin-top: 10px; }
.product .action-buttons .pull-right { display: flex !important; align-items: center; gap: 8px; float: none !important; margin-left: auto; }

.product .action-buttons .btn-cart,
.product .action-buttons .btn-wishlist,
.product .btn.btn-primary.btn-cart,
.product .btn.btn-primary.btn-wishlist {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 17px !important;
}
.product .action-buttons .btn-cart, .product .btn.btn-primary.btn-cart {
  background: var(--gjb-narancs) !important; color: #FFFFFF !important;
}
.product .action-buttons .btn-cart:hover { background: var(--gjb-nar-sot) !important; }
/* kivansaglista a kartyan: halvany, nem versenyez a kosarral */
.product .action-buttons .btn-wishlist, .product .btn.btn-primary.btn-wishlist {
  background: var(--gjb-jeges-vl) !important;
  color: var(--gjb-halvany) !important;
  border: 2px solid var(--gjb-keret) !important;
}
.product .action-buttons .btn-wishlist:hover { background: #FFE9DB !important; color: var(--gjb-narancs) !important; border-color: var(--gjb-narancs) !important; }

/* --- ar a kartyan: az akcios piros, a regi athuzott halvany --- */
.product .price-box { margin: 4px 0 2px 0; }
.product .price-box .old-price { font-size: 14.5px !important; }

/* --- szekcio-cim: tiszta, sav nelkul --- */
h3.slider-title, .slider-title {
  background: transparent !important;
  border: none !important;
  padding: 0 0 4px 0 !important;
  margin: 0 0 14px 0 !important;
}
h3.slider-title span, .slider-title span {
  background: transparent !important;
  color: var(--gjb-kek) !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
}
.products.carousel-wrapper { background: transparent !important; }

@media (max-width: 767px) {
  .product .short-description { display: none; }        /* mobilon a leiras csak zavar */
  .product .action-buttons .btn-cart,
  .product .action-buttons .btn-wishlist { width: 44px !important; height: 44px !important; min-height: 44px !important; }
  h3.slider-title span, .slider-title span { font-size: 21px !important; }
}

/* =========================================================================
   5b. JAVITAS — a terminev alahuzasa (v1.5.1, 2026-09-03)
   HIBA VOLT: a template.css-ben az alahuzas a CIMSORON all
       .products .product-name { text-decoration: underline; height: 36px; }
   nem a linken. CSS-ben a szulo dekoracios vonala ATFUT a gyerekeken, es a
   gyerek <a> {text-decoration:none} NEM tudja levenni — csak a szulon lehet.
   Ezert kell a .product-name-re irni, nem a .product-name a-ra.
   Ugyanitt a fix height:36px is levagta a hosszabb neveket.
   ========================================================================= */

.products .product-name,
.products .product .product-name,
.product .product-name,
.product h2.product-name {
  text-decoration: none !important;
  height: auto !important;
  min-height: 60px;
  overflow: visible !important;
  font-size: 15.5px !important;
  line-height: 1.35 !important;
}
.products .product-name a,
.product .product-name a { text-decoration: none !important; }
.products .product-name:hover,
.product .product-name:hover { text-decoration: none !important; }

/* nulla ertekelesnel a csillagsor csak zajt visz a kartyara */
.product .rating .rating-percent:empty { display: none; }

/* =========================================================================
   6. RETEG — LABLEC (v1.6.0, 2026-09-03)
   A regi allapot: footer .footer-menu = #1781e6 vilagoskek,
   .footer-copyright = #ff7d2e narancs (harsany egy zaro savhoz).
   Az uj rendszerben a narancs a CSELEKVES szine, ezert a lablec mely kek
   lesz, a hirlevel-sav pedig narancs — az az egyetlen cselekves ott.
   ========================================================================= */

footer, .footer { background: var(--gjb-kek) !important; }
footer .footer-menu {
  background: var(--gjb-kek) !important;
  color: #A9C7DD !important;
  padding: 34px 0 26px 0;
}
footer .footer-menu a, footer .footer-menu .link {
  color: #A9C7DD !important;
  font-size: 15px;
  line-height: 1.9;
}
footer .footer-menu a:hover, footer .footer-menu .link:hover { color: var(--gjb-narancs) !important; }
footer .footer-menu .headline, footer .footer-menu h3, footer .headline-link {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  margin-bottom: 10px;
  display: inline-block;
}
footer .footer-menu .headline:hover { color: var(--gjb-narancs) !important; }
footer .footer-top-links { padding-bottom: 22px; border-bottom: 2px solid #12507F; margin-bottom: 22px; }
footer .small-links .link { font-size: 14.5px; }

/* --- hirlevel: ez az egyetlen cselekves a lablecben, tehat narancs --- */
footer .newsletter-headline, .newsletter-headline {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 21px !important;
}
footer .newsletter-content, .newsletter-content { color: #A9C7DD !important; font-size: 15px; }
.newsletter_form .form-control, footer .newsletter-content input[type="text"], footer .newsletter-content input[type="email"] {
  height: 52px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  font-size: 16px;
  color: var(--gjb-szoveg);
}
.newsletter_form .btn, footer .newsletter-content .btn, footer .newsletter-content input[type="submit"] {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  min-height: 52px;
  font-weight: 800 !important;
  padding: 0 30px !important;
  border: none !important;
}
.newsletter-icon-box, .newsletter-icon {
  background: #12507F !important;
  border-radius: 999px !important;
  border: none !important;
}

/* --- kozossegi ikonok --- */
footer .social-media-box a span, footer .social-media-box a {
  background: #12507F !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  border: none !important;
}
footer .social-media-box a:hover span, footer .social-media-box a:hover { background: var(--gjb-narancs) !important; }

/* --- zaro sav: sotetkek, nem narancs --- */
footer .footer-copyright {
  background: var(--gjb-kek-sot) !important;
  color: #8FB0C9 !important;
  height: auto !important;
  line-height: 1.6 !important;
  padding: 16px 0 !important;
  font-size: 14px !important;
}
footer .footer-copyright a { color: #8FB0C9 !important; }
footer .footer-copyright a:hover { color: var(--gjb-narancs) !important; }
footer .footer-info { min-height: 0 !important; line-height: 1.6 !important; padding: 20px 0; }

@media (max-width: 767px) {
  footer .footer-menu { padding: 24px 0 18px 0; }
  footer .footer-menu .headline { margin-top: 14px; }
  .newsletter_form .btn, footer .newsletter-content .btn { width: 100%; margin-top: 10px; }
}

/* =========================================================================
   7. RETEG — KATEGORIALISTA: szurok, rendezes, lapozo (v1.7.0, 2026-09-03)
   Osztalyok a valodi oldalrol: .panel/.panel-title/.panel-body (szuro-csoport),
   li.manufacturer-filter / .marka-filter / .mesehos-filter / .age-filter,
   .input-checkbox + label.input-label, .toolbar-top/.toolbar-bottom,
   .pagination-wrapper / .pagination-pages, .toggle_btn (".tobb" = tovabbi)
   ========================================================================= */

/* --- szuro-panelek --- */
.panel {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  margin-bottom: 14px;
  overflow: hidden;
}
.panel-title, .panel-heading, .panel .panel-title a {
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--gjb-kek) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
}
.panel-heading { padding: 16px 18px 6px 18px !important; background: transparent !important; border: none !important; }
.panel-body { padding: 6px 18px 16px 18px !important; border: none !important; }

/* --- szuro-sorok: nagyobb kattintofelulet, kerek pipa --- */
li.manufacturer-filter, li.marka-filter, li.mesehos-filter, li.age-filter {
  list-style: none;
  margin: 0 0 2px 0;
  padding: 0;
}
li.manufacturer-filter label.input-label,
li.marka-filter label.input-label,
li.mesehos-filter label.input-label,
li.age-filter label.input-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gjb-szoveg) !important;
  cursor: pointer;
  margin: 0;
}
li.manufacturer-filter label.input-label:hover,
li.marka-filter label.input-label:hover,
li.mesehos-filter label.input-label:hover,
li.age-filter label.input-label:hover { background: var(--gjb-jeges-vl); color: var(--gjb-narancs) !important; }
.input-checkbox, li.manufacturer-filter input[type="checkbox"], li.marka-filter input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--gjb-narancs);
  cursor: pointer;
  flex-shrink: 0;
}
/* "tovabbi..." nyito */
.toggle_btn, .tobb {
  color: var(--gjb-narancs) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- eszkozsav: rendezes, nezet --- */
.toolbar, .toolbar-top, .toolbar-bottom {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 12px 18px !important;
  margin-bottom: 16px;
}
.toolbar select, .toolbar-top select, .toolbar .form-control {
  height: 44px !important;
  border-radius: 999px !important;
  border: 2px solid var(--gjb-keret) !important;
  background: var(--gjb-jeges-vl) !important;
  font-weight: 700;
  color: var(--gjb-kek) !important;
  box-shadow: none !important;
  padding: 0 14px;
}

/* --- lapozo --- */
.pagination-wrapper { margin: 22px 0 8px 0; }
.pagination-pages a, .pagination-pages span, .pagination > li > a, .pagination > li > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  margin: 0 3px;
  border: none !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
  font-weight: 800;
  font-size: 16px;
}
.pagination-pages a:hover, .pagination > li > a:hover { background: var(--gjb-jeges) !important; color: var(--gjb-narancs) !important; }
.pagination-pages .active, .pagination-pages a.active, .pagination > .active > a, .pagination > .active > span {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
}

/* --- kategoria-fejlec --- */
.category-title, .page-title h1, h1.category-name {
  font-weight: 900 !important;
  font-size: 34px !important;
  color: var(--gjb-kek) !important;
}
.category-description { font-size: 16px; line-height: 1.7; color: var(--gjb-szoveg); max-width: 760px; }

@media (max-width: 767px) {
  .panel { border-radius: 18px !important; }
  .toolbar, .toolbar-top { padding: 10px 12px !important; }
  .pagination-pages a, .pagination > li > a { min-width: 44px; height: 44px; }
}

/* =========================================================================
   8. RETEG — TARTALMI OLDALAK, KERESES, BELEPES (v1.8.0, 2026-09-03)
   Osztalyok a valodi oldalakrol: .pages-content / .content (ASZF, kapcsolat),
   section.page-header, .login_form-content, .other-login-container,
   .category-page.catalog_search-page (talalati lista)
   ========================================================================= */

/* --- statikus / tartalmi oldal: olvashato sorhossz --- */
.pages-content, .page-content, .cms-content {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 30px 34px;
}
.pages-content p, .pages-content li, .page-content p, .page-content li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--gjb-szoveg);
  max-width: 720px;            /* hosszu jogi szoveghez ez az olvashato sorhossz */
}
.pages-content h1, .pages-content h2, .pages-content h3,
.page-content h1, .page-content h2, .page-content h3 {
  color: var(--gjb-kek) !important;
  font-weight: 900 !important;
  margin-top: 28px;
  margin-bottom: 12px;
}
.pages-content h1, .page-content h1 { font-size: 32px !important; margin-top: 0; }
.pages-content h2, .page-content h2 { font-size: 23px !important; }
.pages-content h3, .page-content h3 { font-size: 19px !important; }
.pages-content a, .page-content a { color: var(--gjb-narancs) !important; font-weight: 700; }
.pages-content table td, .page-content table td { padding: 12px !important; border-color: #F0F7FA !important; }
.pages-content ul li, .page-content ul li { margin-bottom: 6px; }

/* oldal-fejlec sav */
section.page-header, .page-header {
  background: transparent !important;
  border: none !important;
  padding: 22px 0 12px 0 !important;
  margin: 0 !important;
}
section.page-header h1, .page-header h1 {
  color: var(--gjb-kek) !important;
  font-weight: 900 !important;
  font-size: 34px !important;
  margin: 0;
}

/* --- belepes / regisztracio --- */
.login_form-content, .other-login-container, .registration-content {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 28px 30px;
}
.login_form-content .form-control,
.other-login-container .form-control,
.frm-input.form-control {
  height: 52px !important;
  border-radius: 16px !important;
  border: 2px solid var(--gjb-keret) !important;
  background: var(--gjb-jeges-vl) !important;
  box-shadow: none !important;
  font-size: 16px;
  padding: 0 16px;
  margin-bottom: 12px;
}
.login_form-content .form-control:focus, .other-login-container .form-control:focus {
  border-color: var(--gjb-narancs) !important;
  background: #FFFFFF !important;
}
.login_form-content .btn-primary, .other-login-container .btn-primary {
  width: 100%;
  min-height: 54px;
  font-size: 17px !important;
}
/* kotelezo mezo jelzese */
.form-control.req[wrong="wrong"], .form-control[wrong="wrong"] {
  border-color: var(--gjb-piros) !important;
  background: #FDEAEA !important;
}

/* --- talalati lista --- */
.catalog_search-page .category-title,
.catalog_search-page h1 { color: var(--gjb-kek) !important; font-weight: 900 !important; }
.catalog_search-page .searchForm .form-control { height: 52px; font-size: 16px; }

/* --- modalis ablakok (kosarba tettuk, hibauzenet) --- */
.modal-content {
  border: none !important;
  border-radius: 26px !important;
  box-shadow: 0 22px 60px rgba(0, 59, 111, 0.28) !important;
  overflow: hidden;
}
.modal-header {
  background: var(--gjb-kek) !important;
  border: none !important;
  padding: 18px 24px !important;
}
.modal-header .modal-title { color: #FFFFFF !important; font-weight: 800 !important; font-size: 19px !important; }
.modal-header .close { color: #FFFFFF !important; opacity: .8; font-size: 26px; text-shadow: none; }
.modal-body { padding: 22px 24px !important; font-size: 15.5px; }
.modal-footer { border: none !important; padding: 0 24px 22px 24px !important; }
.modal-footer .btn { min-height: 48px; }

@media (max-width: 767px) {
  .pages-content, .page-content { padding: 20px 18px; border-radius: 20px; }
  .pages-content h1, .page-content h1, section.page-header h1 { font-size: 25px !important; }
  .login_form-content, .other-login-container { padding: 20px 18px; }
  .modal-content { border-radius: 20px !important; }
}

/* =========================================================================
   9. RETEG — HERO (v1.9.0, 2026-09-03)
   A tervben szereplo hero: mely kek blokk, balra a cim es a ket gomb,
   jobbra 4 KORBE VAGOTT termekkep. A koroket JS tolti fel a fooldal sajat
   akcios korhintajabol (veletlen 4), igy mindig valodi akciot mutat.
   A regi banner-korhinta a hero ALATT marad — ha nem kell, elrejtheto:
       .slideshow-wrapper { display: none; }
   ========================================================================= */

.arculat-hero { padding: 18px 0 8px 0; }
.arculat-hero-box {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--gjb-kek);
  border-radius: 44px;
  padding: 44px 48px;
  overflow: hidden;
}
.arculat-hero-text { flex: 1 1 auto; min-width: 0; max-width: 560px; }

.arculat-hero-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gjb-narancs);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 800;
  font-size: 14.5px;
  margin-bottom: 16px;
}
.arculat-hero-title {
  font-weight: 900 !important;
  font-size: 52px !important;
  line-height: 1.05 !important;
  color: #FFFFFF !important;
  margin: 0 0 14px 0 !important;
  text-wrap: pretty;
}
.arculat-hero-lead {
  font-size: 18px;
  line-height: 1.55;
  color: #BBD8EC;
  margin: 0 0 22px 0;
  max-width: 460px;
}
.arculat-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arculat-hero-cta, .arculat-hero-cta2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none !important;
}
.arculat-hero-cta { background: var(--gjb-narancs); color: #FFFFFF !important; }
.arculat-hero-cta:hover { background: var(--gjb-nar-sot); color: #FFFFFF !important; }
.arculat-hero-cta2 { border: 2px solid #4E7EA6; color: #FFFFFF !important; }
.arculat-hero-cta2:hover { border-color: #FFFFFF; color: #FFFFFF !important; }

/* --- a 4 kor --- */
.arculat-hero-circles {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 16px;
  align-items: center;
}
.arculat-hero-circles .ahc {
  width: 168px; height: 168px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* valtakozo hattér, hogy jatekos legyen — a tervi kollazs szerint */
.arculat-hero-circles .ahc-1 { background: #FFFFFF; }
.arculat-hero-circles .ahc-2 { background: var(--gjb-narancs); margin-top: 34px; }
.arculat-hero-circles .ahc-3 { background: var(--gjb-turkiz); margin-left: 34px; }
.arculat-hero-circles .ahc-4 { background: #FFFFFF; margin-top: 34px; }
.arculat-hero-circles .ahc a { display: block; line-height: 0; }
.arculat-hero-circles .ahc img {
  width: 138px; height: 138px;
  object-fit: contain;
  border-radius: 999px;
  mix-blend-mode: multiply;
}
/* amig a JS nem toltotte fel: halvany placeholder, ne "ugorjon" a lap */
.arculat-hero-circles:not(.kesz) .ahc { opacity: .28; }

/* --- a regi banner-korhinta a hero ala kerul, szellosebben --- */
.slideshow-wrapper { padding-top: 10px; }
.slideshow-wrapper .banner img,
.slideshow-wrapper .owl-slideshow img { border-radius: 26px; }
#home-banner-left .owl-slideshow { border-radius: 26px; overflow: hidden; }

@media (max-width: 991px) {
  .arculat-hero-box { flex-direction: column; align-items: flex-start; gap: 26px; padding: 30px 26px; border-radius: 30px; }
  .arculat-hero-title { font-size: 34px !important; }
  .arculat-hero-lead { font-size: 16px; }
  .arculat-hero-circles { grid-template-columns: repeat(4, auto); gap: 10px; align-self: center; }
  .arculat-hero-circles .ahc { width: 84px; height: 84px; margin: 0 !important; }
  .arculat-hero-circles .ahc img { width: 68px; height: 68px; }
  .arculat-hero-actions { width: 100%; }
  .arculat-hero-cta, .arculat-hero-cta2 { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .arculat-hero-circles .ahc { width: 68px; height: 68px; }
  .arculat-hero-circles .ahc img { width: 54px; height: 54px; }
  .arculat-hero-title { font-size: 29px !important; }
}

/* =========================================================================
   9b. JAVITAS — a hero korei (v1.9.1, 2026-09-03)
   HIBA VOLT: a mix-blend-mode: multiply a SZINES koroknel (narancs, turkiz)
   a termekfoto feher hatteret is atszinezte, igy a jatek "beleolvadt".
   JAVITAS: a heroban sehol nincs multiply; a szines koroknel a kep egy
   FEHER korongon ul (gyuru-hatas), igy a szin megmarad kereteknt, a termek
   pedig tisztan latszik.
   ========================================================================= */

.arculat-hero-circles .ahc img { mix-blend-mode: normal !important; }

/* szines korok: feher belso korong a kep alatt */
.arculat-hero-circles .ahc-2 img,
.arculat-hero-circles .ahc-3 img {
  background: #FFFFFF;
  border-radius: 999px;
  padding: 12px;
  width: 132px;
  height: 132px;
  box-sizing: border-box;
}

/* feher korok: a kep kitolti, keret nelkul */
.arculat-hero-circles .ahc-1 img,
.arculat-hero-circles .ahc-4 img { background: transparent; }

@media (max-width: 991px) {
  .arculat-hero-circles .ahc-2 img,
  .arculat-hero-circles .ahc-3 img { width: 68px; height: 68px; padding: 7px; }
}
@media (max-width: 480px) {
  .arculat-hero-circles .ahc-2 img,
  .arculat-hero-circles .ahc-3 img { width: 56px; height: 56px; padding: 6px; }
}

/* =========================================================================
   9c. A REGI BANNER-SAV ELREJTESE (v1.9.2, 2026-09-03)
   A hero atvette a fooldal tetejenek szerepet, ezert a regi banner-korhinta
   es a hozza tartozo vilagoskek sav feleslegesse valt (2026-09-03-i dontes).
   A blokk a sablonban BENNE MARAD — ha megis kell, ez a szabaly torlendo.
   ========================================================================= */

.slideshow-wrapper { display: none !important; }
#home-banner-left { display: none !important; }

/* =========================================================================
   10. RETEG — ami a lefedettseg-meresbol kimaradt (v1.10.0, 2026-09-03)
   Kategoriaoldal: .category-left-menu (alkategoria-lista), .filter-price
   (ar-csuszka), .item-counter, .accordion-toggle
   Termekoldal: .green-box (keszlet/szallitas kiemeles), .heading-primary,
   .comments (velemenyek)
   ========================================================================= */

/* --- kategoria: bal oldali alkategoria-lista --- */
.category-left-menu {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 18px 16px;
  margin-bottom: 14px;
}
.category-left-menu h4 {
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--gjb-kek) !important;
  margin: 0 0 10px 0;
}
.category-left-menu a {
  display: flex !important;
  align-items: center;
  min-height: 42px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gjb-szoveg) !important;
  line-height: 1.3;
  text-decoration: none !important;
}
.category-left-menu a:hover { background: var(--gjb-jeges-vl); color: var(--gjb-narancs) !important; }
.category-left-menu a.active, .category-left-menu .active > a {
  background: var(--gjb-narancs); color: #FFFFFF !important; font-weight: 800;
}
.item-counter { font-size: 14px; color: var(--gjb-halvany); font-weight: 700; }

/* --- ar-csuszka --- */
.filter-price { padding: 6px 4px 2px 4px; }
#slider-range-filter, .filter-price .ui-slider {
  height: 6px !important;
  background: #DCEEF5 !important;
  border: none !important;
  border-radius: 999px !important;
  margin: 12px 6px 16px 6px;
}
.filter-price .ui-slider-range, #slider-range-filter .ui-slider-range {
  background: var(--gjb-narancs) !important;
  border-radius: 999px !important;
}
.filter-price .ui-slider-handle, #slider-range-filter .ui-slider-handle {
  width: 20px !important; height: 20px !important;
  top: -7px !important;
  background: #FFFFFF !important;
  border: 3px solid var(--gjb-narancs) !important;
  border-radius: 999px !important;
  cursor: pointer;
}
.filter-price-details { display: flex; align-items: center; gap: 8px; }
.filter-price-details .form-control {
  height: 42px !important;
  border-radius: 12px !important;
  border: 2px solid var(--gjb-keret) !important;
  background: var(--gjb-jeges-vl) !important;
  text-align: center;
  font-weight: 700;
  color: var(--gjb-kek) !important;
  box-shadow: none !important;
}

/* --- osszecsukhato szuro-fejlec --- */
.accordion-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--gjb-kek) !important;
  text-decoration: none !important;
}
.accordion-toggle:hover { color: var(--gjb-narancs) !important; }

/* --- termekoldal: kiemelt zold doboz (keszlet / szallitas) --- */
.green-box {
  background: #E4F5E6 !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  color: #0B7C17 !important;
  font-weight: 700;
  font-size: 15px;
}
.green-box a { color: #0B7C17 !important; text-decoration: underline; }
h4.heading-primary, .heading-primary {
  font-weight: 900 !important;
  font-size: 20px !important;
  color: var(--gjb-kek) !important;
  margin: 22px 0 12px 0 !important;
}

/* --- velemenyek --- */
.comments, .comment-item {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.comments .rating_bar { max-width: 120px; }

@media (max-width: 767px) {
  .category-left-menu { border-radius: 18px; padding: 14px 12px; }
  .filter-price-details .form-control { height: 44px !important; font-size: 16px; }
}

/* =========================================================================
   11. RETEG — a tervbol hianyzo ket blokk (v1.11.0, 2026-09-03)
   .arculat-kategoriak  — 6 kategoria-buborek a hero alatt
   .arculat-igeretek    — 3 bizalmi elem a lablec folott
   ========================================================================= */

/* --- kategoria-buborekok --- */
.arculat-kategoriak { padding: 30px 0 6px 0; }
.ak-sor { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ak-elem {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none !important;
  padding: 6px 4px;
  border-radius: 20px;
}
.ak-elem:hover { background: rgba(255, 255, 255, .6); }
.ak-kor {
  display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.ak-elem:hover .ak-kor { transform: translateY(-3px); }
.ak-kor-1 { background: #FFE9DB; }
.ak-kor-2 { background: #DFF3F8; }
.ak-kor-3 { background: #E4F5E6; }
.ak-kor-4 { background: #E1EAF2; }
.ak-kor-5 { background: #F7F0DC; }
.ak-kor-6 { background: #FDEAEA; }
.ak-nev {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--gjb-kek) !important;
}
.ak-elem:hover .ak-nev { color: var(--gjb-narancs) !important; }

/* --- igeret-sav --- */
.arculat-igeretek { padding: 10px 0 34px 0; }
.ai-sor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ai-elem {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 20px 24px;
}
.ai-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ai-ikon-1 { background: #FFE9DB; }
.ai-ikon-2 { background: #E4F5E6; }
.ai-ikon-3 { background: #DFF3F8; }
.ai-szoveg { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ai-szoveg strong { font-weight: 800; font-size: 16.5px; color: var(--gjb-kek); }
.ai-szoveg small { font-size: 14.5px; color: var(--gjb-halvany); line-height: 1.4; }

@media (max-width: 991px) {
  .ak-sor { flex-wrap: wrap; }
  .ak-elem { flex: 0 0 30%; }
  .ak-kor { width: 84px; height: 84px; }
  .ak-kor svg { width: 36px; height: 36px; }
  .ak-nev { font-size: 14px; }
  .ai-sor { grid-template-columns: 1fr; gap: 10px; }
  .ai-elem { padding: 16px 18px; border-radius: 20px; }
}
@media (max-width: 575px) {
  .ak-elem { flex: 0 0 46%; }
  .ak-kor { width: 74px; height: 74px; }
  .ak-kor svg { width: 32px; height: 32px; }
}

/* =========================================================================
   12. RETEG — FEJLEC FINOMITAS (v1.12.0, 2026-09-03)
   A 2026-09-03-i visszajelzes: a jobb felso "Vstup" es "0,00 Eur" meg a regi
   szogletes kek dobozokban ult (.menu-blue { background:#1782e6 }), es a felso
   info-sav is nyers volt. Most: keret nelkuli, kerek ikonos belepok.
   ========================================================================= */

/* --- felso info-sav: keskenyebb, nyugodtabb --- */
.navbar-top-info {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
.navbar-top-info .navbar-nav > li > a {
  padding: 9px 12px !important;
  font-size: 14px;
  color: #C7DEEF !important;
  min-height: 0;
}
.navbar-top-info .navbar-nav > li > a:hover { color: #FFFFFF !important; background: transparent !important; }
.newsletter-icon-box > a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--gjb-narancs);
  border-radius: 999px;
  padding: 5px 14px 5px 14px !important;
  margin-right: 6px;
}
.newsletter-icon-box > a:hover { background: var(--gjb-nar-sot); }
.newsletter-icon { height: 18px; width: auto; }

/* --- jobb felso: belepes es kosar — kerek ikon, nem kek doboz --- */
.menu-blue {
  background: transparent !important;
  margin-left: 4px !important;
}
.menu-blue > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 76px;
  min-height: 66px;
  padding: 6px 8px !important;
  border-radius: 18px;
  color: var(--gjb-kek) !important;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none !important;
}
.menu-blue > a:hover { background: var(--gjb-jeges) !important; color: var(--gjb-narancs) !important; }
.menu-blue .img-box {
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--gjb-jeges);
  margin-bottom: 2px;
}
.menu-blue > a:hover .img-box { background: #FFE9DB; }
.menu-blue .img-box img { width: 21px; height: 21px; }
/* a kosar-ertek hangsulyosabb */
#mini_cart_label, .menu-blue .cart-span { font-weight: 800; color: inherit; }
.menu-blue br { display: none; }

/* a mobil ikonsor is kerek legyen */
.mobile-menu .menu-blue > a { min-width: 46px; min-height: 46px; }
.mobile-menu .menu-blue .img-box { width: 38px; height: 38px; }

/* =========================================================================
   12b. JAVITAS — fejlec (v1.12.1, 2026-09-03), sajat kepernyokep alapjan
   HIBAK VOLTAK:
     1) a kategoria-menusor eltort: a sablonban inline margin-top:-25px huzza
        fel a savot, es a magasabb fejlec miatt atfedett
     2) a "Vstup"/kosar ikonja FEHER SVG — vilagos korben lathatatlan lett
     3) a hirlevel-gomb szetesett (az ikonnak sajat kerek hattere van)
   ========================================================================= */

/* 1) a menusor ne csusszon a fejlecbe */
.container.cat-menu, .cat-menu {
  margin-top: 0 !important;
  padding-top: 6px;
  clear: both;
}
.navbar-top { margin-bottom: 0 !important; padding-bottom: 6px; }
.navbar-top .navbar-collapse { padding-bottom: 0; }

/* 2) feher ikon -> sotet kor kell alaja */
.menu-blue .img-box {
  background: var(--gjb-kek) !important;
  width: 44px; height: 44px;
}
.menu-blue > a:hover .img-box { background: var(--gjb-narancs) !important; }
.menu-blue .img-box img { width: 22px; height: 22px; filter: brightness(0) invert(1); }

/* 3) hirlevel: az ikon sajat kerek hatteret nem burkoljuk masikba */
.newsletter-icon-box > a {
  background: transparent !important;
  padding: 0 !important;
  margin-right: 10px;
  display: inline-flex !important;
  align-items: center;
}
.newsletter-icon-box > a:hover { background: transparent !important; opacity: .85; }
.newsletter-icon { height: 24px; width: auto; }

/* =========================================================================
   12c. HIRLEVEL-GOMB (v1.12.2, 2026-09-03)
   A hirlevel.svg egy REGI, grafikusan beegetett kep: kek doboz + narancs kor
   + "NEWSLETTER" felirat egyben — se atszinezni, se meretezni nem lehet szepen.
   Ezert a kepet elrejtjuk, es CSS-bol rajzolunk a helyere pirula-gombot.
   ========================================================================= */
.newsletter-icon, .newsletter-icon-box img { display: none !important; }
.newsletter-icon-box > a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin: 6px 10px 0 0 !important;
  padding: 0 14px 0 11px !important;
  background: var(--gjb-narancs) !important;
  border-radius: 999px;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .3px;
  line-height: 1;
  text-decoration: none !important;
  transition: background .15s ease;
}
.newsletter-icon-box > a::before {
  content: "";
  width: 16px; height: 16px; flex: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2.5'/%3E%3Cpath d='m2.5 7.5 9.5 6 9.5-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.newsletter-icon-box > a::after { content: "Newsletter"; }
.newsletter-icon-box > a:hover { background: var(--gjb-nar-sot) !important; opacity: 1; color: #FFFFFF !important; }

/* --- 12d. JAVITAS (v1.12.3): a regi szabalyok erosebbek voltak ---------------
   1) a kek doboz a LI-n ult (.newsletter-icon-box{background:#1782e6}), nem az A-n
   2) a "Newsletter" feliratot elnyomta a savra irt elvalaszto:
      .navbar-top-info .navbar-nav > li > a:after { content:'|' }  (0,3,3)
      az en .newsletter-icon-box > a::after szabalyom csak (0,1,2) volt
   -------------------------------------------------------------------------- */
.navbar-top-info .navbar-nav > li.newsletter-icon-box {
  background: transparent !important;
  min-width: 0 !important;
  padding-top: 0 !important;
  margin-right: 0 !important;
  position: static !important;
}
.navbar-top-info .navbar-nav > li.newsletter-icon-box > a::after {
  content: "Newsletter" !important;
  padding-left: 0 !important;
}
.navbar-top-info .navbar-nav > li.newsletter-icon-box > a {
  margin: 5px 12px 0 0 !important;
}

/* =========================================================================
   13. RETEG — MOBIL IKONSOR (v1.13.0, 2026-09-03)
   A mobil fejlec ikonjai FEHER PNG-k (images/user-icon.png, cart-icon.png),
   amiket a regi kek doboz (.menu-blue{background:#1782e6}) hattere tett
   lathatova. Amikor a dobozt levettem, a feher ikon feher hatteren eltunt.
   Itt NINCS .img-box (mint a desktopon), az <img> kozvetlenul az <a>-ban ul,
   ezert a kek kort magara a linkre rajzoljuk.
   ========================================================================= */
.mobile-menu { margin: 0 !important; padding: 0 !important; }
.mobile-menu .menu-blue {
  background: transparent !important;
  margin: 0 0 0 8px !important;
  list-style: none;
}
.mobile-menu .menu-blue > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--gjb-kek) !important;
  position: relative;
}
.mobile-menu .menu-blue > a:hover,
.mobile-menu .menu-blue > a:focus { background: var(--gjb-narancs) !important; }
.mobile-menu .menu-blue > a img {
  width: 21px !important; height: auto;
  filter: brightness(0) invert(1);   /* garantaltan feher a kek koron */
}
.mobile-menu .cart-span { display: block; line-height: 0; }
.mobile-menu .cart-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--gjb-narancs) !important;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 15px;
  color: #FFFFFF;
}
.mobile-menu .cart-badge:empty { display: none; }

/* --- 13b. mobil termekkartya: a keszlet-jelzes ne torjon ketté (v1.13.1) ---
   Merve: a .stock-status 56px magas volt, mert a "Na sklade" ket sorba tort a
   gombok mellett. A kartya ~170px, a ket gomb 100px — 12px betuvel elfer egy sorban. */
@media (max-width: 767px) {
  .product .action-buttons { flex-wrap: nowrap; align-items: center; gap: 6px; }
  .product .action-buttons .stock-status {
    font-size: 12px !important;
    white-space: nowrap;
    line-height: 1.2;
    flex: 0 1 auto;
    min-width: 0;
  }
  .product .action-buttons .btn-cart,
  .product .action-buttons .btn-wishlist { width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; }
}

/* --- 13c. JAVITAS: az ikon-kor OVALIS lett (v1.13.2, 2026-09-03) -------------
   HIBA: a 12. retegben a regi .menu-blue .img-box{height:50px} kiutesere
   "height: auto !important"-ot irtam. Az !important a KESOBBI, nem-important
   height:44px-et is felulirta, ezert a doboz magassaga a 22px-es ikonhoz
   zsugorodott: 44x22 ovalis lett, es az ikon kilogott belole.
   JAVITAS: rogzitett 44x44 !important + flex:0 0 44px, hogy ne is nyulhasson. */
.menu-blue .img-box {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  box-sizing: border-box;
  border-radius: 999px !important;
  overflow: visible;
}
.menu-blue .img-box img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px;
  object-fit: contain;
  margin: 0 !important;
}

/* --- 13d. HIRLEVEL-GOMB VEGLEGES SZIN (v1.13.3, 2026-09-03) ------------------
   Dontes: "F" valtozat. A narancs pirulan a feher felirat csak 2,6:1 kontrasztot
   adott (WCAG AA minimum 4,5:1). Most jeges kek pirula + mely kek felirat = 11,8:1.
   Igy a narancs megmarad a VALODI cselekvesnek (kosarba, penztar), a hirlevel
   pedig halkabb marad a felso savban. Ez a blokk a 12c. reteg szineit valtja ki. */
.newsletter-icon-box > a {
  background: var(--gjb-jeges) !important;
  color: var(--gjb-kek) !important;
}
.newsletter-icon-box > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003B6F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2.5'/%3E%3Cpath d='m2.5 7.5 9.5 6 9.5-6'/%3E%3C/svg%3E");
}
.newsletter-icon-box > a:hover {
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
}

/* --- 13e. JAVITAS (v1.13.4): a felirat halvany maradt -----------------------
   A sav sajat szabalya erosebb volt:
     .navbar-top-info a, .navbar-top-info span { color:#D6E9F5 !important }  (0,2,1)
   szemben az enyemmel: .newsletter-icon-box > a (0,1,1) — mindketto !important,
   ezert a specifikusabb nyert, es a "Newsletter" halvanykek lett a jeges hatteren. */
.navbar-top-info .navbar-nav > li.newsletter-icon-box > a,
.navbar-top-info .navbar-nav > li.newsletter-icon-box > a::after,
.navbar-top-info .navbar-nav > li.newsletter-icon-box > a:hover,
.navbar-top-info .navbar-nav > li.newsletter-icon-box > a:focus {
  color: var(--gjb-kek) !important;
}

/* =========================================================================
   14. RETEG — FEJLEC FUGGOLEGES IGAZITAS (v1.14.0, 2026-09-03)
   MERT ALLAPOT (1440px, a .navbar-top savon belul, kozepvonalak):
       logo (.navbar-brand) ...... 74 px
       ikonok (.img-box) ......... 76 px
       kereso (.search-wrapper) .. 101 px   <-- 25 px-el lejjebb
   Az eltolast a regi .search-wrapper { margin-top: 25px } okozta. Nullazva a
   kereso kozepe 76 px lesz, azaz egy vonalba kerul a logoval es az ikonokkal.
   Csak desktopon (768px felett) — mobilon a kereso kulon sorban all.
   ========================================================================= */
@media (min-width: 768px) {
  .navbar-top .search-wrapper,
  .navbar-top .input-group.search-wrapper { margin-top: 0 !important; }
  /* a logo 2px-el feljebb ul, mint az ikonok — kiegyenlitve */
  .navbar-top .navbar-brand { padding-top: 12px; padding-bottom: 8px; }
}

/* =========================================================================
   15. RETEG — A FEHER SAV FUGGOLEGES KOZEPE (v1.15.0, 2026-09-03)
   KERES: a logo / kereso / ikonok a feher sav fuggoleges kozepen alljanak.
   MIERT NEM VOLT AZ: a sav magassagat a .menu-blue blokk adta (85 px: 44 px kor
   + ALATTA a "Vstup" felirat), a logo viszont csak 52 px — ezert a logo es a
   kereso a sav felso reszebe szorult (folotte 12, alatta 47 px).
   MEGOLDAS: a fejlec-sor valodi flex-sor lesz, align-items:center-rel, a felirat
   pedig az ikon MELLE kerul — igy mind a harom elem azonos magassagu, egy
   vonalban all ES a sav fuggoleges kozepen. Csak 768px felett; mobilon a kereso
   kulon sorban all, ott a regi elrendezes marad.
   ========================================================================= */
@media (min-width: 768px) {
  .navbar-top .container {
    display: flex !important;
    align-items: center;
    min-height: 92px;
  }
  .navbar-top .navbar-header { float: none !important; flex: 0 0 auto; }
  .navbar-top .navbar-brand {
    float: none !important;
    display: block;
    height: auto;
    padding: 0 15px !important;
    margin: 0 !important;
  }
  .navbar-top #navbar-top {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
  }
  .navbar-top #navbar-top > div[class*="col-"] {
    flex: 1 1 auto;
    float: none !important;
    padding-left: 0;
  }
  .navbar-top #navbar-top > ul.navbar-nav.navbar-right {
    flex: 0 0 auto;
    float: none !important;
    margin: 0 !important;
  }
  /* a felirat az ikon MELLE — igy a blokk is 44px magas lesz, mint a tobbi */
  .menu-blue > a {
    flex-direction: row !important;
    gap: 9px;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 5px 12px 5px 5px !important;
    border-radius: 999px;
  }
  .menu-blue .img-box { margin-bottom: 0 !important; }
  .navbar-top .search-wrapper { margin: 0 !important; }
}

/* --- 15b. a kosarnal egy plusz burkolo van (v1.15.1) ------------------------
   A belepes: <a><div.img-box><br>Vstup</a>
   A kosar:   <a><span.cart-span><div.img-box><br><span#mini_cart_label></span></a>
   Az <a>-t sorba forditottam, de a .cart-span burkolo miatt a kosar felirata
   tovabbra is az ikon ALA kerult. A burkolot is sorba kell forditani. */
@media (min-width: 768px) {
  .menu-blue .cart-span {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    line-height: 1;
  }
}

/* --- 15c. a logo baseline-ja (v1.15.2) --------------------------------------
   A logo 10px-el a sor kozepe folott ult: a .navbar-brand belsejeben az <img>
   egy <span>-ben van, es a span sormagassaga (line-height) alatta helyet hagy,
   ezert a KEP kozepe nem esik egybe a doboz kozepevel. Flex + line-height:0
   megszunteti a baseline-alapu igazitast. */
@media (min-width: 768px) {
  .navbar-top .navbar-brand { display: flex !important; align-items: center; line-height: 0; }
  .navbar-top .navbar-brand > span { display: flex; align-items: center; line-height: 0; }
  .navbar-top .navbar-brand img { display: block; }
}

/* --- 15d. a logo VALODI oka (v1.15.3) ---------------------------------------
   Merve: .navbar-header h=72, de a benne levo .navbar-brand csak h=52 — alatta
   20px "semmi". Ezt a sablon HTML-jeben levo ures szoveg-csomopontok (ujsorok,
   tabulatorok) sormagassaga adta: blokk-kornyezetben azok is sort nyitnak.
   Flex-kornyezetben a bongeszo a csak-szokozbol allo csomopontokat ELDOBJA,
   igy a header pontosan olyan magas lesz, mint a logo, es kozepre kerul. */
@media (min-width: 768px) {
  .navbar-top .navbar-header { display: flex !important; align-items: center; }
}

/* --- 15e. a feher sav also 6px-e (v1.15.4) ----------------------------------
   A tartalom kozepe 84, a save 87 volt: a 12b. retegben adott
   .navbar-top{padding-bottom:6px} miatt. Az akkor a menusor atfedese ellen kellett,
   de a .cat-menu margin-top-ja azota nullazva van, igy elhagyhato. Nullazva a sav
   kozepe is 84 lesz — a tartalom pontosan a feher sav fuggoleges kozepen ul. */
.navbar-top { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --- 15f. levego a logo es a kereso kozott (v1.15.5) --- */
@media (min-width: 768px) {
  .navbar-top #navbar-top > div[class*="col-"] { padding-left: 24px; padding-right: 24px; }
}

/* =========================================================================
   16. RETEG — A KATEGORIA-GOMBSOR A JEGES SAV KOZEPEN (v1.16.0, 2026-09-03)
   MERT ALLAPOT (1440px):
     feher sav alja ................ 130
     kategoria-gombok .............. 136..182  (kozep 159)
     hero LATHATO doboza innen ..... 210   (az .arculat-hero 18px felso paddingja miatt)
     tehat a lathato jeges sav 130..210 = 80 px, a kozepe 170 — a gombok 11 px-el
     feljebb ultek.
   A gomb 46 px, igy 17 px kell fole es 17 px ala:
     cat-menu padding-top 6 -> 17,  a gomb alatt: floating-menu pb 10 + hero pt 7 = 17.
   A .floating-menu also 10 px-ehez NEM nyulok: az a kategoriafa hover-hidja
   (a gomb es a lenyilo panel kozott), enelkul atkozben eltunne a menu.
   ========================================================================= */
.container.cat-menu, .cat-menu { padding-top: 17px !important; }
.arculat-hero { padding-top: 7px !important; }

/* =========================================================================
   17. RETEG — UJ LOGO (v1.17.0, 2026-09-03)
   A valasztott "D" irany: tiszta szotipo, jel nelkul, az "i" pontja turkiz labda.
   MIERT CSS-BOL: a shop a logot a media/site/logo.svg-bol tolti, DE a dev
   masolatban a media konyvtar SYMLINK az elesre — oda irni annyi lenne, mint
   azonnal atallitani az eles shopot. Ezert a dev SAJAT images/ mappajaba
   kerult a fajl, es a kepet CSS-bol csereljuk (content: url()).
   Elesitesnel a media/site/logo.svg cserelendo (mentessel), es ez a reteg torolheto.
   ========================================================================= */
.navbar-top .navbar-brand img {
  content: url("../images/logo2026.svg?v=13");
  height: 56px;
  width: auto;
  max-width: none;
}
@media (max-width: 767px) {
  .navbar-top .navbar-brand img { height: 40px; }
}
/* lablecben (ha oda is kerul logo): a negativ valtozat */
footer .navbar-brand img, .footer-logo img { content: url("../images/logo2026-negativ.svg?v=13"); }

/* =========================================================================
   18. RETEG — A KATEGORIA-BUBOREKOK A JEGES SAV KOZEPEN (v1.18.0, 2026-09-03)
   MERT ALLAPOT (1440px):
     hero LATHATO doboza alja ...... 718
     buborek-sor (.ak-sor) ......... 756..908  (magassag 152, kozep 832)
     a feher "Akciove produkty" .... 914-tol
     A lathato jeges hely tehat 718..914 = 196 px, a kozepe 816 — a sor 16 px-el
     lejjebb ult: folotte 38 px volt, alatta mindossze 6 px.
   A 152 px-es sorhoz (196-152)/2 = 22 px kell fole is, ala is:
     a konteener 726-nal kezdodik (a hero 8px-es also paddingja utan), ezert
     padding-top 30 -> 14, padding-bottom 6 -> 22. A konteener alja marad 914,
     igy az alatta levo blokk NEM mozdul el.
   Csak 768px felett — mobilon a buborekok ket oszlopban allnak, ott mas a rend.
   ========================================================================= */
@media (min-width: 768px) {
  .arculat-kategoriak { padding-top: 14px !important; padding-bottom: 22px !important; }
}

/* =========================================================================
   19. RETEG — TERMEKKARTYAK A TERV SZERINT (v1.19.0, 2026-09-03)
   A tervlapon a kartya: FEHER doboz jeges hatteren, arnyekkal; benne a kep
   jeges dobozban, alatta pipas keszlet-jelzes, a termeknev, majd legalul az ar
   es jobbra a narancs kosar-kor. Nincs csillagsor, nincs leiras, nincs szivecske.
   A DOM-sorrend mas (kep, csillagok, nev, ar, leiras, [keszlet+gombok]), ezert:
     - a .product belso wrappere flex-oszlop, es order-rel rakjuk sorba;
     - az .action-buttons "display: contents" — a doboz eltunik, a gyerekei
       (keszlet-jelzes es gombok) igy kaphatnak kulon helyet a sorrendben;
     - a kosargomb abszolut a kartya jobb also sarkaban, igy az ar mellett all.
   A fooldalon az .inner_container feher hattere eltunik, hogy a lap jeges kekje
   latsszon a kartyak mogott; a fooldalt a hero letezese azonositja (:has).
   A termekkepek mix-blend-mode: multiply-ja MARAD — a 3. retegben van.
   ========================================================================= */

body:has(.arculat-hero) .inner_container,
body:has(.arculat-hero) .box-container {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* korhinta: res a kartyak kozott, azonos magassag */
.owl-products .owl-item { display: flex; padding: 8px 7px 16px; }
.owl-products .owl-item > div,
.owl-products .owl-item .product { width: 100%; }

.product {
  position: relative;
  background: #FFFFFF !important;
  border-radius: 24px;
  padding: 14px 14px 16px !important;
  box-shadow: 0 6px 20px rgba(0, 59, 111, 0.08) !important;
  height: 100%;
}
.product:hover { box-shadow: 0 12px 30px rgba(0, 59, 111, 0.15) !important; }

/* a kartya belso sorrendje = a terv */
.product > div { display: flex; flex-direction: column; height: 100%; }
.product .action-buttons { display: contents; }
.product .product-image { order: 1; }
.product .stock-status  { order: 2; }
.product .product-name  { order: 3; }
.product .price-box     { order: 4; margin-top: auto; }

/* a tervben ezek nincsenek a kartyan */
.product .rating,
.product .short-description,
.product .btn-wishlist { display: none !important; }

/* keszlet-jelzes pipaval, a nev FOLOTT */
.product .stock-status {
  font-size: 13px !important;
  font-weight: 800;
  color: var(--gjb-zold) !important;
  margin: 12px 0 7px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  float: none !important;
}
.product .stock-status::before { content: "\2713"; font-weight: 900; font-size: 14px; }
.product .stock-status.out-of-stock { color: #93A9BA !important; }
.product .stock-status.out-of-stock::before { content: "\2022"; }

/* nev */
.product .product-name {
  font-size: 15px !important;
  min-height: 60px;
  margin: 0 0 10px !important;
}

/* ar: alapbol mely kek, akcios termeknel piros (a .discount cimke alapjan) */
.product .price-box { padding-right: 58px; margin: 0 !important; }
.product .price {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  line-height: 1.2;
}
.product:has(.discount) .price { color: var(--gjb-piros) !important; }
.product .old-price {
  font-size: 14px !important;
  color: #93A9BA !important;
  text-decoration: line-through;
  margin-left: 8px;
}
.product .old-price:empty { display: none; }

/* a kosargomb a kartya jobb also sarkaban */
.product .action-buttons .pull-right,
.product .pull-right {
  position: absolute;
  right: 14px;
  bottom: 15px;
  float: none !important;
  display: block;
}

/* --- 19b. JAVITAS (v1.19.1) — merve, ket ok volt -----------------------------
   1) az .action-buttons display-e "flex" MARADT, mert a 843. sorban sajat
      korabbi szabalyom !important-tal irja elo; igy a doboz flex-elem maradt
      order:0-val, ezert a keszlet-jelzes a KEP FOLE kerult. Kell az !important.
   2) a feher hatteret nem az .inner_container adja (az nincs is a fooldalon),
      hanem a termekblokkokat tarto .container. Csak azokat vesszuk le, amelyek
      termek-korhintat tartalmaznak, es csak a fooldalon (:has(.arculat-hero)).  */
.product .action-buttons { display: contents !important; }

body:has(.arculat-hero) .container:has(.products.carousel-wrapper) {
  background: transparent !important;
  box-shadow: none !important;
}
/* a blokk cime igy kozvetlenul a jeges hatteren all */
body:has(.arculat-hero) .products.carousel-wrapper > .slider-title { margin-left: 4px; }

/* --- 19c. JAVITAS (v1.19.2): a szivecske nem tunt el ------------------------
   A 846-859. blokkban sajat korabbi szabalyom a ".product .btn.btn-primary
   .btn-wishlist" (0,4,1) szelektorral ad "display: inline-flex !important"-ot,
   az en ".product .btn-wishlist" (0,2,1) tiltasom pedig gyengebb volt.
   Azonos erossegu szelektorral (es kesobbi helyen) mar ervenyre jut. */
.product .action-buttons .btn-wishlist,
.product .btn.btn-primary.btn-wishlist,
.product .pull-right .btn-wishlist { display: none !important; }

/* --- 19d. egyforma magas kartyak, max 3 soros nev (v1.19.3) -----------------
   A korhinta elemei kulon-kulon magassaguak voltak, ezert a hosszabb nevu
   kartyaknal az ar lejjebb csuszott. A stage flex-sorra allitva minden elem
   egyforma magas lesz, a nev pedig legfeljebb 3 sor. */
.owl-products .owl-stage { display: flex; align-items: stretch; }
.owl-products .owl-item { float: none !important; }
.product .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 60px;
}

/* --- 19e. JAVITAS (v1.19.4): a nev 4. sora atlogott az arra ------------------
   A 911-921. blokkban a ".products .product .product-name" (0,3,0) szelektorom
   "overflow: visible !important"-ot ad, ami erosebb volt a 19d-beli
   ".product .product-name" (0,2,0) tiltasnal — ezert a negyedik sor kilogott.
   Itt azonos erossegu szelektorral irjuk felul. */
.products .product .product-name,
.products .product h2.product-name,
.product h2.product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 60px;
  max-height: 62px;
}

/* --- 19f. MOBIL finomitas a kartyakon (v1.19.5) ------------------------------
   Merve a 390px-es nezetben: (1) az ar melle irt padding-right miatt a "Eur"
   atcsuszott a kovetkezo sorba es levagodott; (2) a nev 4 sorban maradt.  */
@media (max-width: 767px) {
  .product { padding: 12px 12px 14px !important; border-radius: 20px; }
  .product .price-box { padding-right: 48px; }
  .product .price { font-size: 18px !important; white-space: nowrap; }
  .product .old-price { font-size: 12px !important; margin-left: 5px; white-space: nowrap; }
  .products .product .product-name,
  .products .product h2.product-name,
  .product h2.product-name {
    -webkit-line-clamp: 3;
    font-size: 13.5px !important;
    min-height: 54px;
    max-height: 56px;
  }
  .product .stock-status { font-size: 12px !important; margin: 9px 0 6px !important; }
  .product .action-buttons .pull-right,
  .product .pull-right { right: 11px; bottom: 12px; }
  .product .action-buttons .btn-cart,
  .product .btn.btn-primary.btn-cart { width: 40px !important; height: 40px !important; min-height: 40px !important; }
}

/* --- 19g. az ar es a kosargomb EGY VONALBAN (v1.19.6) ------------------------
   A gomb abszolut all a kartya jobb also sarkaban, az ar pedig a szoveg-folyam
   vegen — igy a ketto kozepe nem esett egybe. Megoldas: az arsav pontosan olyan
   magas, mint a gomb, es a gomb also szele a kartya belso margojahoz igazodik. */
.product .price-box {
  min-height: 46px;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}
.product .action-buttons .pull-right,
.product .pull-right { bottom: 16px; }

@media (max-width: 767px) {
  .product .price-box { min-height: 40px; }
  .product .action-buttons .pull-right,
  .product .pull-right { bottom: 14px; }
}

/* --- 19h. JAVITAS (v1.19.7): az athuzott regi ar kitort a sorbol -------------
   A 19g-ben adott "flex-wrap: wrap" miatt a regi ar a kovetkezo sorba ugrott,
   es a kartya alja levagta. Egy sorban marad, es a szoveg nem torik. */
.product .price-box { flex-wrap: nowrap !important; gap: 8px; }
.product .price, .product .old-price { white-space: nowrap; }
.product .old-price { margin-left: 0 !important; }

/* --- 19i. a gomb PONTOSAN az arsav kozepen (v1.19.8) -------------------------
   Merve (1440px): a kartya alja 1386, az arsav kozepe 1319 — vagyis az arsav
   kozepe 67 px-re van a kartya aljatol. A 46 px-es gomb kozepe akkor esik ide,
   ha a gomb also szele 67-23 = 44 px. (A korabbi 16 px-nel a gomb 28 px-el
   lejjebb ult.) A maradek hezagot a belso wrapper 10px-es also paddingja adja,
   azt nem bantjuk, mert a keszlet-jelzes tavolsagat is az szabja meg. */
.product .action-buttons .pull-right,
.product .pull-right { bottom: 44px; }

@media (max-width: 767px) {
  .product .action-buttons .pull-right,
  .product .pull-right { bottom: 36px; }
}

/* --- 19j. LAGYABB ARNYEK a kartyakon (v1.19.9) -------------------------------
   A korabbi "0 6px 20px rgba(0,59,111,.08)" egyetlen, lefele tolt reteg volt:
   a kartya oldalanal szinte semmi arnyek nem maradt, ezert a szel vagottnak
   hatott. Harom retegre bontva (kozeli-kicsi + kozepes + tavoli-nagy) az
   atmenet folyamatos, es a kartya "lebeg" a jeges hatteren. */
.product {
  box-shadow:
    0 1px 2px rgba(0, 59, 111, 0.04),
    0 4px 10px rgba(0, 59, 111, 0.05),
    0 14px 34px rgba(0, 59, 111, 0.07) !important;
}
.product:hover {
  box-shadow:
    0 2px 4px rgba(0, 59, 111, 0.05),
    0 8px 20px rgba(0, 59, 111, 0.08),
    0 22px 48px rgba(0, 59, 111, 0.12) !important;
}
/* ugyanez a lagyitas a fooldal also elonyos-savjan es a hasonlo dobozokon */
.arculat-elonyok .ae-elem, .ae-elem {
  box-shadow:
    0 1px 2px rgba(0, 59, 111, 0.04),
    0 4px 10px rgba(0, 59, 111, 0.05),
    0 14px 34px rgba(0, 59, 111, 0.06) !important;
}

/* --- 19k. AZ ELES FUGGOLEGES VONAL VALODI OKA (v1.19.10) ---------------------
   Nem az arnyek lagysaga volt a baj: az .owl-stage-outer overflow:hidden-nel
   vagja a tartalmat a korhinta szelenel, es EBBE vagott bele a kartyak arnyeka
   — innen az eles fuggoleges el a szelso kartya mellett.
   MEGOLDAS: negativ spread (a harmadik ertek utani -Xpx) osszehuzza az arnyekot,
   igy oldalra alig lep ki (a 30px blur felebol 12px-et visszaveszunk => ~3px),
   lefele viszont eros marad. Az owl-item also margojat is noveljuk, hogy az
   also arnyek se utkozzon a vagoelbe.  */
.product {
  box-shadow:
    0 1px 2px -1px rgba(0, 59, 111, 0.06),
    0 5px 12px -6px rgba(0, 59, 111, 0.10),
    0 14px 30px -12px rgba(0, 59, 111, 0.16) !important;
}
.product:hover {
  box-shadow:
    0 2px 4px -1px rgba(0, 59, 111, 0.08),
    0 10px 20px -8px rgba(0, 59, 111, 0.14),
    0 22px 44px -16px rgba(0, 59, 111, 0.22) !important;
}
.owl-products .owl-item { padding: 8px 8px 26px !important; }
.arculat-elonyok .ae-elem, .ae-elem {
  box-shadow:
    0 1px 2px -1px rgba(0, 59, 111, 0.06),
    0 5px 12px -6px rgba(0, 59, 111, 0.09),
    0 14px 30px -12px rgba(0, 59, 111, 0.13) !important;
}

/* --- 19l. a vagoel KIJJEBB tolasa (v1.19.11) ---------------------------------
   Merve: a korhinta vagoele x=1283-nal van (a .container jobb szele), a szelso
   kartya pedig 1275-ig tart — az arnyeknek maradt 8 px-nyi helye, es ott vagott.
   A padding + azonos ertekű NEGATIV margo par kitagitja a stage-outer DOBOZAT
   (igy a vagoel kijjebb kerul), de a tartalmat a helyen hagyja. A padding csak
   8 px oldalt: pont annyi, amennyi az arnyeknak kell, de meg nem annyi, hogy a
   kovetkezo kartya bekukucskaljon (koztuk 8+8 px a res).  */
.owl-products .owl-stage-outer {
  padding: 6px 8px 24px;
  margin: -6px -8px -24px;
}
.owl-products .owl-item { padding: 8px 8px 8px !important; }
.product {
  box-shadow:
    0 1px 2px -1px rgba(0, 59, 111, 0.07),
    0 5px 12px -5px rgba(0, 59, 111, 0.10),
    0 14px 30px -8px rgba(0, 59, 111, 0.13) !important;
}
.product:hover {
  box-shadow:
    0 2px 4px -1px rgba(0, 59, 111, 0.09),
    0 10px 20px -7px rgba(0, 59, 111, 0.14),
    0 20px 40px -10px rgba(0, 59, 111, 0.20) !important;
}

/* --- 19m. a vagoel PONTOS helye (v1.19.12) -----------------------------------
   Merve: az utolso lathato kartya jobb szele 1273, a stage-outer vagoele a 8px-es
   paddinggal 1291 lett — a KOVETKEZO (mar nem lathato) kartya viszont 1289-nel
   kezdodik, igy 2 px-e bekukucskalt: ez adta az eles feher vonalat.
   Uj ertekek: az owl-item oldalso margoja 10 px (a kovetkezo kartya igy 1291-nel
   kezdodik), a stage-outer paddingja 6 px (a vagoel 1289) — a kartya tehat
   2 px-el a vagoel MOGE kerul, az arnyeknak (7 px) pedig bosegesen marad helye. */
.owl-products .owl-stage-outer {
  padding: 6px 6px 24px;
  margin: -6px -6px -24px;
}
.owl-products .owl-item { padding: 8px 10px 8px !important; }

/* --- 19n. VEGLEGES ertekek pixelmeressel (v1.19.13) --------------------------
   A kepbol kiolvasott pixelek szerint az arnyek a kartya szeletol 18 px-re nyulik
   (nem 7-re, ahogy a blur/spread kepletbol adodna — a Gauss-farok tovabb er).
   A ket feltetel:
     vagoel > kartya jobb szele + 18      (kulonben az arnyek vagodik)
     vagoel < a kovetkezo kartya bal szele (kulonben az bekukucskal)
   owl-item oldalso padding 16 px, stage-outer padding 12 px:
     kartya jobb szele 1265 · arnyek vege 1283 · vagoel 1295 · kovetkezo kartya 1297
   — 12 px tartalek az arnyeknak, 2 px a kovetkezo kartyanak. */
.owl-products .owl-stage-outer {
  padding: 6px 12px 24px;
  margin: -6px -12px -24px;
}
.owl-products .owl-item { padding: 8px 16px 8px !important; }

/* --- 19o. VEGSO MEGOLDAS: oldalt nincs arnyek (v1.19.14) ---------------------
   A pixelmeres szerint az arnyek 28 px-re nyulik oldalra, es barmennyi helyet
   adunk, a korhinta overflow:hidden doboza elobb-utobb elvagja (kulonben a
   kovetkezo kartya kukucskal be). Ezert az arnyek OLDALRA nem lep ki (eros
   negativ spread), csak lefele — ott a stage-outer 24px-es also paddingja
   boven eleg. A kartya szelet nem az arnyek, hanem egy nagyon halvany keret
   lagyitja, az pedig nem tud vagodni.  */
.owl-products .owl-stage-outer {
  padding: 6px 6px 26px;
  margin: -6px -6px -26px;
}
.owl-products .owl-item { padding: 8px 10px 8px !important; }
.product {
  border: 1px solid rgba(0, 59, 111, 0.055) !important;
  box-shadow:
    0 2px 4px -3px rgba(0, 59, 111, 0.10),
    0 6px 12px -8px rgba(0, 59, 111, 0.16),
    0 14px 26px -16px rgba(0, 59, 111, 0.26) !important;
}
.product:hover {
  border-color: rgba(0, 59, 111, 0.09) !important;
  box-shadow:
    0 3px 6px -3px rgba(0, 59, 111, 0.12),
    0 10px 18px -10px rgba(0, 59, 111, 0.20),
    0 20px 36px -20px rgba(0, 59, 111, 0.32) !important;
}

/* --- 19p. az arnyek CSAK lefele (v1.19.15) -----------------------------------
   A pixelmeres szerint meg mindig maradt 4 egysegnyi (1,6%) lepcso a vagoelnel.
   Most a negativ spread minden retegnel NAGYOBB, mint a blur fele, ezert az
   arnyek vizszintesen egyaltalan nem lep ki a kartya alol — igy nincs mit
   elvagni. A melyseget a lefele iranyulo eltolas adja, a szelet a halvany keret. */
.product {
  box-shadow:
    0 2px 3px -2px rgba(0, 59, 111, 0.12),
    0 8px 12px -8px rgba(0, 59, 111, 0.20),
    0 18px 26px -20px rgba(0, 59, 111, 0.34) !important;
}
.product:hover {
  box-shadow:
    0 3px 5px -2px rgba(0, 59, 111, 0.14),
    0 12px 18px -10px rgba(0, 59, 111, 0.24),
    0 26px 38px -24px rgba(0, 59, 111, 0.40) !important;
}

/* --- 19q. a vagoel a KET arnyek koze (v1.19.16) ------------------------------
   Pixelmeres (1440px, negy magassagban azonos):
     1278-1286  az utolso lathato kartya arnyeka (244->247)
     1287-1290  tiszta hatter (248)
     1291-1295  a KOVETKEZO, mar nem lathato kartya arnyekanak farka (247/246)
     1296       a stage-outer vagoele -> itt ugrott vissza 248-ra = az eles vonal
   Vagyis nem a sajat arnyekunk vagodott, hanem a soron kovetkezo kartyae latszott
   bele. A megoldas: a stage-outer oldalso paddingja 0, igy a vagoel 1290-re kerul —
   pont a ket arnyek KOZE: az elozo mar elfogyott (1287), a kovetkezo meg nem
   kezdodott el (1291). Fuggolegesen marad a hely az also arnyeknak.  */
.owl-products .owl-stage-outer {
  padding: 6px 0 26px;
  margin: -6px 0 -26px;
}

/* =========================================================================
   20. RETEG — A KEPDOBOZ A KARTYAN (v1.20.0, 2026-09-03)
   MERT ALLAPOT: a kepdoboz KORUL mindenhol 26 px van, tehat az szimmetrikus.
   A gond az volt, hogy a doboz FEHER lett, ezert a feher kartyan nem latszott,
   es a szem a KEPET merte — annak az aranya viszont oldalt nagyobb hezagot hagy,
   mint felul. A feher hattert a termekoldalra irt szabaly adta:
       .product-image:not(.img-responsive) { background:#FFF; padding:18px }
   ez a fooldali kartya kepdobozara is ral illik, mert az is .product-image.
   JAVITAS: a fooldali doboz visszakapja a lathato jeges kek hatteret, es fix
   magassagu flex-doboz lesz — igy a kep MINDIG kozepen ul, barmilyen az aranya,
   es a dobozok egymassal is egy vonalban vannak.
   ========================================================================= */
.product > div > .product-image {
  background: var(--gjb-jeges) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  height: 190px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product > div > .product-image > center {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.product a.product-image.img-responsive {
  background: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible !important;
}
.product .product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  mix-blend-mode: multiply;   /* marad — a feher hatteru termekkepek igy olvadnak bele */
}
@media (max-width: 767px) {
  .product > div > .product-image { height: 150px; padding: 10px !important; }
}

/* --- 20b. a kedvezmeny-cimke a dobozon BELUL (v1.20.1) -----------------------
   Merve: a cimke bal szele pontosan a kepdoboz bal szelen ult (x azonos), pedig
   a 146. sor left:10px-et ir elo — a doboz flex-konteneerre valtasa utan az ertek
   nem ervenyesult. Eros ertekekkel a cimke a terv szerint 12px-re beljebb kerul. */
.product > div > .product-image > .product-label,
.product .product-label {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5;
  margin: 0 !important;
}

/* =========================================================================
   21. RETEG — LABLEC RENDRAKAS (v1.21.0, 2026-09-03)
   A regi allapot bajai:
     - a jobb felso sarokban egy FEHER savu kep (images/footer-logo.png), amiben
       a REGI logo, az e-mail cim es a kozossegi ikonok egyben vannak — raadasul
       az egesz egyetlen ures <a href="">, tehat az ikonok nem is kattinthatok;
     - a "VIETE, ŽE?" doboz harsany zold (#70c46e), az "INFORMÁCIE" harsany
       narancs (#ff7d2f) — mindketto INLINE styleban, ezert !important kell;
     - az oszlopcimek narancs hatteru, szogletes teglalapok.
   Most: a feher sav helyen az UJ logo negativ valtozata, a ket szines doboz
   egyseges halvany uveg-dobozza valik, a cimek tiszta feher feliratok.
   ========================================================================= */

/* --- a feher logosav helyett az uj logo --- */
footer .footer-top-links img[src*="footer-logo"] {
  content: url("../images/logo2026-negativ.svg?v=13");
  max-width: 250px;
  width: 250px;
  height: auto;
  display: block;
  margin-left: auto;
}
footer .footer-top-links .text-right::after {
  content: "info@hrackypredeti.sk";
  display: block;
  margin-top: 12px;
  color: #A9C7DD;
  font-size: 15px;
  font-weight: 700;
}

/* --- felso linksor --- */
footer .footer-top-links {
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-bottom: 28px;
}
footer .footer-top-links .headline { font-size: 15.5px !important; line-height: 1.5; }

/* --- oszlopcimek: narancs teglalap helyett tiszta felirat --- */
footer .headline-link {
  background: transparent !important;
  color: #FFFFFF !important;
  padding: 0 0 9px 0 !important;
  margin: 0 0 10px 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  display: block !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0 !important;
}

/* --- a ket szines doboz -> egyseges halvany doboz --- */
footer .small-links div[style*="70c46e"],
footer .small-links div[style*="ff7d2f"] {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  min-height: 0 !important;
  color: #C7DEEF !important;
  position: relative !important;
}
footer .small-links div[style*="70c46e"] b,
footer .small-links div[style*="ff7d2f"] b {
  display: block;
  color: #FFFFFF !important;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 9px;
}
footer .small-links div[style*="ff7d2f"] b { color: var(--gjb-narancs) !important; }
footer .small-links div[style*="70c46e"] p { color: #C7DEEF !important; font-size: 14px; line-height: 1.6; margin: 0; }
/* a doboz sarkaba beallitott "i" kep tobbet artott, mint hasznalt */
footer img[src*="tudnivalok"] { display: none !important; }

/* --- listak a lablecben --- */
footer .small-links ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
footer .small-links li { margin-bottom: 2px; }
footer .small-links p { margin-bottom: 0; }

/* --- zaro sav --- */
footer .footer-copyright {
  background: #002B52 !important;
  padding: 15px 0 !important;
  margin-top: 30px;
}
footer .footer-copyright p, footer .footer-copyright span {
  margin: 0 !important;
  color: #7FA7C4 !important;
  font-size: 13.5px !important;
}

@media (max-width: 991px) {
  footer .footer-top-links img[src*="footer-logo"] { margin: 16px 0 0 0; }
  footer .footer-top-links .text-right { text-align: left !important; }
  footer .small-links > div { margin-bottom: 22px; }
}

/* --- 21b. lablec: felesleges ures hely es a dobozok tordelese (v1.21.1) ------
   A linkoszlopok alatt ~130 px ures hely maradt (a .footer-menu also paddingja,
   a sablonban levo <br> es a zarosav margoja osszeadodott), a ket doboz szovege
   pedig az 1/5-os oszlopszelessegben tobb sorba tort. */
footer .footer-menu { padding-bottom: 10px !important; }
footer .footer-menu .container > br,
footer .small-links + br { display: none !important; }
footer .footer-copyright { margin-top: 0 !important; }

/* a ket doboz: azonos magassag, kisebb betu, hogy ne torjon annyit */
footer .small-links div[style*="70c46e"],
footer .small-links div[style*="ff7d2f"] {
  padding: 16px 16px !important;
  font-size: 13.5px !important;
  height: 100%;
}
footer .small-links div[style*="70c46e"] p { font-size: 13.5px !important; line-height: 1.55; }
footer .small-links div[style*="ff7d2f"] a { font-size: 13.5px !important; line-height: 1.55 !important; }
footer .small-links div[style*="ff7d2f"] ul + ul { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(255,255,255,.12); }

/* a hosszu oszlopok es a dobozok egy vonalban alul */
footer .small-links > div[class*="col-"] { display: flex; }
footer .small-links > div[class*="col-"] > .block-content { width: 100%; }

/* --- 21c. az e-mail a logo szlogenjevel egy vonalban (v1.21.2) ---------------
   Merve: a lablec-logo 250 px szeles, a viewBox 463 -> a skala 0,54. A szlogen
   az SVG-ben 23px, tehat a kepernyon 23*0,54 = 12,4 px, es x=1-nel kezdodik,
   vagyis gyakorlatilag a logo bal szelenel (1033). Az e-mail ugyanezt kapja:
   250 px szeles doboz jobbra tolva (mint a logo), a szoveg benne BALRA. */
footer .footer-top-links .text-right::after {
  content: "info@hrackypredeti.sk";
  display: block;
  width: 250px;
  margin: 7px 0 0 auto;
  text-align: left;
  font-size: 12.4px;
  font-weight: 700;
  color: #9FC4DD;
  letter-spacing: 0.2px;
}

/* --- 20c. a kepdoboz haltere HALVANYABB (v1.20.2) ----------------------------
   A terven a kep mogotti doboz alig kekes, majdnem feher — a lap hatterszine
   (#E3F8FC) tul eros volt hozza a feher kartyan. A vilagosabb jeges tonusra
   valtunk, igy a kep kerul elotеrbe, a doboz csak finoman keretezi. */
.product > div > .product-image { background: var(--gjb-jeges-vl) !important; }

/* =========================================================================
   22. RETEG — A MASODLAGOS KATEGORIA-GOMBOK (v1.22.0, 2026-09-03)
   A tervlapon a "Kategoriak" teli mely kek pirula, a tobbi (Markak, Mesehosok,
   Gyartok) viszont TISZTA SZOVEGES LINK — igy a fo gomb kap minden hangsulyt.
   A shopban mind az ot elem azonos "btn btn-red2" pirula volt, ezert a negy
   masodlagos elvitte a fokuszt a kategoriafarol.
   Az ikonjaik (akciok.svg, ujdonsagok.svg, mesehosok.svg, markak.svg) FEHER
   rajzok, a kek gombhoz keszultek — atlatszo hatteren lathatatlanna valnanak,
   ezert a terv szerint elmaradnak. Az "Akciove hracky" narancs marad: az az
   egyetlen ajanlat-jellegu elem a sorban.
   ========================================================================= */
.cat-menu #dLabel2, .cat-menu #dLabel3,
.cat-menu #dLabel4, .cat-menu #dLabel5 {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--gjb-kek) !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}
.cat-menu #dLabel2 img, .cat-menu #dLabel3 img,
.cat-menu #dLabel4 img, .cat-menu #dLabel5 img { display: none !important; }

.cat-menu #dLabel2 { color: var(--gjb-narancs) !important; }
.cat-menu #dLabel2:hover, .cat-menu #dLabel2:focus { color: var(--gjb-nar-sot) !important; background: #FFF1E7 !important; }
.cat-menu #dLabel3:hover, .cat-menu #dLabel4:hover, .cat-menu #dLabel5:hover,
.cat-menu #dLabel3:focus, .cat-menu #dLabel4:focus, .cat-menu #dLabel5:focus {
  color: var(--gjb-narancs) !important;
  background: #FFFFFF !important;
}
/* a fo gomb kap egy kis extra sulyt, hogy egyertelmuen o legyen az elso */
.cat-menu #dLabel { padding-left: 24px !important; padding-right: 26px !important; }

/* =========================================================================
   23. RETEG — KATEGORIAOLDAL (v1.23.0, 2026-09-03)
   HIBA VOLT: a hero es a kategoria-buborekok a base sablonba kerultek, ezert
   MINDEN oldalon megjelentek — a kategoriaoldal tetejen is ott ult a fooldali
   hero. A sablon szerencsere megkulonbozteti az oldalakat a body osztalyaval:
     fooldal        -> body.home-page
     kategoriaoldal -> body.category-page categorypath-...
   Igy CSS-bol tisztan elvalaszthato, sablont nem kell bantani.
   ========================================================================= */
body:not(.home-page) .arculat-hero,
body:not(.home-page) .arculat-kategoriak { display: none !important; }

/* --- 23b. a kosargomb helye OLDALFUGGETLENUL (v1.23.1) -----------------------
   A gomb eddig abszolut allt, a kartya aljahoz merve (bottom:44px). Ez a fooldali
   korhintara volt hangolva; a kategoriaoldalon viszont mas a kartya szerkezete
   (ott a .product egy float-os <li>), ezert a gomb 17 px-el a nev fole csuszott.
   UJ MEGOLDAS: a gomb visszakerul a szoveg-folyamba (position: static), az arsor
   UTAN, es egy negativ felso margoval (= az arsor magassaga) pontosan annak a
   soraba emelkedik, jobbra igazitva. Igy semmi nem fugg a kartya magassagatol. */
.product .action-buttons .pull-right,
.product .pull-right {
  position: static !important;
  order: 5;
  align-self: flex-end;
  margin: -46px 0 0 0 !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 2;
}
@media (max-width: 767px) {
  .product .action-buttons .pull-right,
  .product .pull-right { margin-top: -40px !important; }
}

/* --- 23c. rendezes-gombok a kategoriaoldalon (v1.23.2) -----------------------
   A sablon az aktiv rendezest "btn-danger" (piros), a tobbit "btn-grey" (szurke)
   osztallyal adja — egyik sem az arculat szine, es a csupa nagybetu is hangosabb
   a kelletenel. Most: aktiv = mely kek pirula, a tobbi feher, kek kerettel. */
.category-filters .btn {
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.2px;
  padding: 10px 18px !important;
  margin: 0 8px 8px 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  border: 1.5px solid var(--gjb-keret) !important;
  transition: background .15s ease, border-color .15s ease;
}
.category-filters .btn-grey {
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
}
.category-filters .btn-grey:hover, .category-filters .btn-grey:focus {
  background: var(--gjb-jeges) !important;
  border-color: var(--gjb-turkiz) !important;
  color: var(--gjb-kek) !important;
}
.category-filters .btn-danger {
  background: var(--gjb-kek) !important;
  border-color: var(--gjb-kek) !important;
  color: #FFFFFF !important;
}
.category-filters .btn-danger:hover { background: #002B52 !important; border-color: #002B52 !important; }
.category-filters .glyphicon, .category-filters .fa { margin-left: 6px; font-size: 11px; }

/* a mobil "Filter" / "Usporiadanie" gombok */
#show-filters, #show-sorting {
  border-radius: 999px !important;
  border: 1.5px solid var(--gjb-keret) !important;
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
  font-weight: 800 !important;
  min-height: 46px;
}

/* --- 23d. az arsor beferjen a gomb melle (v1.23.3) ---------------------------
   A gomb mar a szoveg-folyamban all, jobbra igazitva — de a kartya belso
   szelessege (a korhintaban 191, a kategoriaoldalon 182 px) szuk volt az
   "ar + athuzott regi ar + 46px gomb" harmashoz, ezert a regi ar a gomb ala
   csuszott. Kisebb betuk es szukebb koz: igy mindket oldalon elfer. */
.product .price { font-size: 20px !important; }
.product .old-price { font-size: 12.5px !important; }
.product .price-box { gap: 6px; padding-right: 52px; }
.product .action-buttons .btn-cart,
.product .btn.btn-primary.btn-cart {
  width: 44px !important; height: 44px !important; min-height: 44px !important;
}
.product .action-buttons .pull-right,
.product .pull-right { margin-top: -44px !important; }

@media (max-width: 767px) {
  .product .price { font-size: 17px !important; }
  .product .old-price { font-size: 11.5px !important; }
  .product .price-box { padding-right: 46px; gap: 4px; }
  .product .action-buttons .btn-cart,
  .product .btn.btn-primary.btn-cart { width: 40px !important; height: 40px !important; min-height: 40px !important; }
  .product .action-buttons .pull-right,
  .product .pull-right { margin-top: -40px !important; }
}

/* --- 23e. a zold hover-keret eltuntetese (v1.23.4) ---------------------------
   A template.css a kartya belso dobozara tesz zold keretet ravitelkor:
     .category-products .products .product:hover > div { border: 1px solid #70c46e }
     .owl-carousel .product:hover > div               { border: 1px solid #70c46e }
   Az uj arculatban a raviteli visszajelzest a kartya emelkedo arnyeka adja,
   a zold keret csak zavaro (es nem is az arculat szine). */
.category-products .products .product:hover > div,
.owl-carousel .product:hover > div,
.products .product:hover > div,
.product:hover > div {
  border: none !important;
  border-color: transparent !important;
}

/* =========================================================================
   24. RETEG — BELEPES/REGISZTRACIO: DOBOZ A DOBOZBAN (v1.24.0, 2026-09-03)
   Chrome-os vegigellenorzeskor derult ki: a belepes-oldalon ket sajat szabalyom
   rajzol egymasba agyazott feher dobozt —
     .tab-content        (571. sor)  feher, 24px sugar, 26/30 padding
     .login_form-content (1194. sor) feher, 26px sugar, 28/30 padding
   a sablon szerkezete pedig .tab-content > .tab-pane > .login_form-content,
   igy a ketto egymasba kerult. A KULSO doboz marad, a belso attetszo lesz.
   (Ugyanez a parosĂ­tas all fenn az .other-login-container es a
   .registration-content eseten is.)
   ========================================================================= */
.tab-content .login_form-content,
.tab-content .other-login-container,
.tab-content .registration-content {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================================
   25. RETEG — HERO-KOROK A TERV SZERINT (v1.25.0, 2026-09-03)
   A tervlappal osszevetve harom elteres volt:
     1) a termekkep NEM toltotte ki a kort: "object-fit: contain" arányosan
        BELEFERT a korbe, igy a kep korul feher hely maradt. A terven a kep a
        kor szeleig er (korbevagva) -> "cover".
     2) a korok kisebbek voltak a tervinel (168 px vs ~190 px aranyosan),
        es tavolabb alltak egymastol.
     3) a cimkebol ("Zo skladu - zajtra u teba") hianyzott a terven levo
        pulzus-ikon.
   ========================================================================= */
.arculat-hero-circles { gap: 13px; }
.arculat-hero-circles .ahc { width: 190px; height: 190px; }
.arculat-hero-circles .ahc-2 { margin-top: 30px; }
.arculat-hero-circles .ahc-3 { margin-left: 30px; }
.arculat-hero-circles .ahc-4 { margin-top: 30px; }

/* feher korok: a kep kitolti a teljes kort */
.arculat-hero-circles .ahc img {
  width: 190px !important;
  height: 190px !important;
  object-fit: cover !important;
  border-radius: 999px;
  padding: 0 !important;
}
/* szines korok: a kep a gyurun belul tolti ki a feher korongot */
.arculat-hero-circles .ahc-2 img,
.arculat-hero-circles .ahc-3 img {
  width: 152px !important;
  height: 152px !important;
  padding: 0 !important;
  background: #FFFFFF;
}

/* a cimke pulzus-ikonja */
.arculat-hero-badge::before {
  content: "";
  width: 17px; height: 17px;
  flex: 0 0 17px;
  margin-right: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4l3-9 4 18 3-9h6'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 991px) {
  .arculat-hero-circles .ahc { width: 92px; height: 92px; }
  .arculat-hero-circles .ahc img { width: 92px !important; height: 92px !important; }
  .arculat-hero-circles .ahc-2 img,
  .arculat-hero-circles .ahc-3 img { width: 74px !important; height: 74px !important; }
}
@media (max-width: 480px) {
  .arculat-hero-circles .ahc { width: 74px; height: 74px; }
  .arculat-hero-circles .ahc img { width: 74px !important; height: 74px !important; }
  .arculat-hero-circles .ahc-2 img,
  .arculat-hero-circles .ahc-3 img { width: 60px !important; height: 60px !important; }
}

/* =========================================================================
   26. RETEG — A KATEGORIAFA KIEMELT ELEMEI (v1.26.0, 2026-09-03)
   A tervlapon az "Ujdonsagok" es az "Akcios jatekok" sor IKONT is kap
   (csillag, illetve arcimke). A sablon szerencsere minden menupont elejen
   hagy egy ures <span>-t, abba tudjuk rajzolni az ikont — sablon-modositas
   nelkul. A szinek (halvany narancs / halvany piros hatter) mar korabban
   a helyukre kerultek.
   ========================================================================= */
#mainNav > li.cat-584 > a > span:first-child,
#mainNav > li.cat-585 > a > span:first-child {
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* Najnovsie hracky — csillag */
#mainNav > li.cat-584 > a > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7D2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6l2.9 6 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.5l6.5-.9z'/%3E%3C/svg%3E");
}
/* Akciove hracky — arcimke */
#mainNav > li.cat-585 > a > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D31010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V4h9z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E");
}

/* =========================================================================
   27. RETEG — A KATEGORIAFA PANELJEI FEHEREK (v1.27.0, 2026-09-03)
   A tervlapon mindket panel (a bal foklategoria-lista es a jobb alkategoria-
   panel) FEHER, es a szinek csak a kiemelt sorokon jelennek meg: halvany
   narancs az Ujdonsagoknal, halvany piros az Akciosnal, teli narancs az aktiv
   kategorian. A devben a jobb panel a jeges kek tonust kapta
   (--gjb-jeges-vl), es a bal is kekesnek hatott — ettol lett "idegen" a lap
   tobbi reszehez kepest.
   ========================================================================= */
#mainNav.dropdown-menu {
  background: #FFFFFF !important;
}
#mainNav > li > ul.dropdown-menu.level-2 {
  background: #FFFFFF !important;
  border-left: 2px solid #EEF6F9 !important;
}
/* a jobb panel elemei: feher alap, ravitelre halvany jeges kiemeles */
#mainNav ul.level-2 > li > a {
  background: transparent !important;
}
#mainNav ul.level-2 > li > a:hover {
  background: var(--gjb-jeges-vl) !important;
  color: var(--gjb-narancs) !important;
}

/* =========================================================================
   28. RETEG — A TERMEKKARTYA A TERVLAP PONTOS ERTEKEIVEL (v1.28.0, 2026-09-03)
   A tervlap (design/Main.dc.html) forrasabol kiolvasott ertekek — nem becsles:
     kartya      : border-radius 28px, padding 18px, gap 12px
     kepdoboz    : height 196px, border-radius 20px, background #F4FBFD
     kep         : 168x168, object-fit CONTAIN  (a kartyan contain, nem cover!)
     cimke       : top/left 12px, padding 5px 13px, font-size 13px, w800
     keszlet     : 14px, w700, #10AE20, 7px koz
     nev         : 16px, line-height 1.35, w700, min-height 66px
     ar          : 25px, w900, #003B6F
     gomb        : 46x46px
   Az ar volt a legnagyobb elteres (20 vs 25 px). Az athuzott regi ar melle is
   befer: 105 + 55 + 46 + kozok = 222 px a 229 px-es belso szelessegben.
   ========================================================================= */
.product {
  border-radius: 28px;
  padding: 18px !important;
}
.product > div { gap: 12px; }

.product > div > .product-image {
  height: 196px;
  border-radius: 20px !important;
  padding: 14px !important;
}
.product .product-image img {
  width: 168px !important;
  height: 168px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;   /* a kartyan CONTAIN — a hero koroknel volt cover */
}

.product > div > .product-image > .product-label,
.product .product-label { top: 12px !important; left: 12px !important; }
.product .product-label .discount, .product .discount,
.product .product-label .new, .product .new {
  padding: 5px 13px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.product .stock-status {
  font-size: 14px !important;
  font-weight: 700;
  gap: 7px;
  margin: 0 !important;
}

.products .product .product-name,
.products .product h2.product-name,
.product h2.product-name {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  min-height: 66px;
  max-height: 68px;
  margin: 0 !important;
}

.product .price-box { min-height: 46px; gap: 8px; padding-right: 56px; }
.product .price { font-size: 25px !important; font-weight: 900 !important; }
.product .old-price { font-size: 13px !important; }

.product .action-buttons .btn-cart,
.product .btn.btn-primary.btn-cart {
  width: 46px !important; height: 46px !important; min-height: 46px !important;
}
.product .action-buttons .pull-right,
.product .pull-right { margin-top: -46px !important; }

@media (max-width: 767px) {
  .product { padding: 13px !important; border-radius: 22px; }
  .product > div > .product-image { height: 150px; padding: 10px !important; }
  .product .product-image img { width: 128px !important; height: 128px !important; }
  .products .product .product-name,
  .product h2.product-name { font-size: 14px !important; min-height: 56px; max-height: 58px; }
  .product .price { font-size: 19px !important; }
  .product .old-price { font-size: 11.5px !important; }
  .product .price-box { min-height: 40px; padding-right: 46px; }
  .product .action-buttons .btn-cart,
  .product .btn.btn-primary.btn-cart { width: 40px !important; height: 40px !important; min-height: 40px !important; }
  .product .action-buttons .pull-right,
  .product .pull-right { margin-top: -40px !important; }
}

/* --- 28b. az arsor: a szlovak arak hosszabbak a tervlapinal (v1.28.1) --------
   A terv magyar arakkal szamol ("649 Ft" + "849 Ft"), ott az ar 25px es az
   athuzott 16px kenyelmesen elfer a 46px-es gomb mellett. A szlovak "12,00 Eur"
   + "14,71 Eur" viszont ~253 px-t kerne a 229 px-es belso szelessegbol.
   Ezert: ha NINCS akcio, marad a tervi 25px; ha VAN athuzott ar, kisebb betu.
   Az athuzott ar szine a terv szerint semleges szurke. */
.product .price-box { align-items: baseline; gap: 9px; }
.product .old-price { color: #999999 !important; text-decoration: line-through; }

.product:has(.discount) .price { font-size: 21px !important; }
.product:has(.discount) .old-price { font-size: 13px !important; }
.product:has(.discount) .price-box { gap: 7px; }

@media (max-width: 767px) {
  .product:has(.discount) .price { font-size: 17px !important; }
  .product:has(.discount) .old-price { font-size: 11px !important; }
}

/* --- 28c. JAVITAS: a gomb lecsuszott az ar ala (v1.28.2) --------------------
   A 28b-ben atvett tervi "align-items: baseline" a mi szerkezetunkben nem jo:
   a tervlapon az ar-blokk es a gomb TESTVEREK egy space-between soron, nalunk
   viszont a gomb a szoveg-folyamban all es negativ felso margoval emelkedik az
   arsor magassagaba — ahhoz a sor tartalmanak KOZEPEN kell allnia. */
.product .price-box { align-items: center !important; }
.product .old-price { position: relative; top: 1px; }

/* --- 28d. a gomb pontos helye: a flex-gap is beleszamit (v1.28.3) -----------
   Merve: az arsor kozepe 1382, a gombe 1394 — 12 px elteres. Az ok a
   ".product > div { gap: 12px }": a negativ felso margonak nem csak a gomb
   magassagat (46), hanem a kozte levo rest is vissza kell hoznia. 46+12 = 58. */
.product .action-buttons .pull-right,
.product .pull-right { margin-top: -58px !important; }

@media (max-width: 767px) {
  .product .action-buttons .pull-right,
  .product .pull-right { margin-top: -52px !important; }
}

/* =========================================================================
   29. RETEG — A FELESLEGES URES KOZOK A KARTYAN (v1.29.0, 2026-09-03)
   A terven a termeknev KOZVETLENUL az ar folott all. A devben ket helyen
   gyult ossze felesleges hely:
     1) a nev es az ar kozott — mert az arsort "margin-top: auto" tolta a
        kartya aljara, es MINDEN maradek hely oda kerult;
     2) az ar alatt — a belso wrapper 10px-es also paddingja + a kartya sajat
        18px-e adodott ossze.
   A "margin-top: auto"-ra nincs is szukseg: a nev maga fix magassagu (max 3
   sor, min-height 66px), ezert a kartyak igy is azonos magasak lesznek, es az
   arak egy vonalba kerulnek — csak eppen szoros koveteessel, ahogy a terven.
   ========================================================================= */
.product .price-box { margin-top: 0 !important; }
.product > div { padding-bottom: 0 !important; padding-top: 0 !important; }

/* --- 29b. a nev doboza ne tartson fenn ures sort (v1.29.1) -------------------
   A nev "min-height: 66px"-je harom sornyi helyet foglalt le akkor is, ha a nev
   csak ket soros — ez adta a nev alatti ures kozt. A magassag most a tartalomhoz
   igazodik (legfeljebb 3 sor marad a felso hatar), igy a rovid nev utan rogton
   jon az ar. A kartyak azonos magassagat a korhinta flex-sora tartja. */
.products .product .product-name,
.products .product h2.product-name,
.product h2.product-name {
  min-height: 0 !important;
  max-height: 68px;
  margin: 0 !important;
}
.product > div { gap: 11px; }

/* --- 29c. VEGLEGES: fenntartott nevmagassag, de extra hely nelkul (v1.29.2) --
   A 29b-ben levett "min-height" utan az arak elcsusztak egymashoz kepest.
   A tervlapon viszont VAN fenntartott hely a nevnek (min-height: 66px = harom
   sor), es az arak epp ezert allnak egy vonalban. A felesleges kozt nem ez
   okozta, hanem a "margin-top: auto" (29. reteg) — az mar nincs.
   Igy: a nev doboza harom sornyi, az arak egy vonalban, extra hely nelkul. */
.products .product .product-name,
.products .product h2.product-name,
.product h2.product-name {
  min-height: 66px !important;
  max-height: 68px;
}

/* --- 29d. a kepdoboz korul EGYENLO legyen a koz (v1.29.3) --------------------
   Merve: a kartya szeletol a kepdobozig OLDALT 30 px, FELUL viszont 20 px volt.
   A kulonbseget a belso wrapper 11 px-es oldalso paddingja adta (a fuggolegeset
   a 29. retegben mar nullaztam, az oldalsot nem). Nullazva mindenhol 19 px lesz
   (18 px kartya-padding + 1 px keret), ahogy a tervlapon. */
.product > div { padding-left: 0 !important; padding-right: 0 !important; }

/* --- 29e. az arsor alatti felesleg (v1.29.4) ---------------------------------
   Merve: az arsor aljatol a kartya aljaig 34 px volt, a terven 18 px. A tobblet
   onnan jott, hogy a gomb a szoveg-folyamban all: a flex-gap (11 px) es a gomb
   maradek helye a price-box UTAN is helyet foglalt.
   MEGOLDAS: a gomb kikerul a folyambol, de NEM a kartyahoz kotve (az korabban a
   kategoriaoldalon a nevre csuszott), hanem a TARTALOM-DOBOZHOZ — annak a jobb
   also sarkahoz. Az arsor 46 px magas, tehat a gomb pont annak a soraba esik,
   es a doboz alja = az arsor alja, igy alul csak a kartya 18 px-e marad. */
.product > div { position: relative; }
.product .action-buttons .pull-right,
.product .pull-right {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  height: 46px;
  display: flex !important;
  align-items: center;
}

@media (max-width: 767px) {
  .product .action-buttons .pull-right,
  .product .pull-right { height: 40px; }
}

/* --- 29f. a kartya ne nyuljon a tartalmanal magasabbra (v1.29.5) -------------
   Merve: az arsor alja 1392, a tartalom-doboz alja viszont 1407 — 15 px-el
   lejjebb, mert a korhinta flex-sora EGYFORMA magasra huzza a kartyakat
   (align-items: stretch), a doboz pedig "height: 100%"-kal koveti.
   Erre nincs szukseg: a kartyak tartalma amugy is azonos magassagu (fix 196px
   kepdoboz, 66px nevhely, 46px arsor), tehat magatol egyforma lesz mindegyik.
   Igy a doboz alja = az arsor alja, es alatta pontosan a kartya 18 px-e marad. */
.owl-products .owl-stage { align-items: flex-start !important; }
.product { height: auto !important; }
.product > div { height: auto !important; }

/* =========================================================================
   30. RETEG — A TERMEKOLDAL (v1.30.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css

   A tervlap: design/Termek.dc.html. Amit atveszunk belole:
     - jeges kek lapalap, a blokkok FEHER KARTYAK (most az egesz lap feher,
       ezert a "kartyak" nem latszanak: a #main-wrapper > .container feher)
     - a cim a JOBB oldali vasarlo-kartya tetejen all, nem a lap tetejen
     - parameter-tabla: cimke balra szurken, ertek jobbra melykeken, vonallal
     - a keszlet/szallitas sor kiemelt pirula
   Amit NEM lehet CSS-bol (sablon kellene, kesobbre marad):
     - a gyarto neve kiskapitalissal a cim FOLE, es a cikkszam a cim melle
     - a galeria belyegei a kep BAL oldalan fuggoleges oszlopban
     - a harom bizalmi elem (szallitas / atvetel / csere) kulon savban
   ========================================================================= */

/* --- 30a. a lap alapja legyen a jeges kek, ne a feher --------------------
   A feheret a template.css 348. sora adja: "#main-wrapper > .container
   { background: #fff }". A fooldalon ezt mar levettuk a termek-korhintakrol;
   a termekoldalon a TELJES tartalom kartyakra bomlik, ezert itt az egesz
   konteneren levesszuk. */
body.product-page #main-wrapper > .container {
  background: transparent !important;
  padding-bottom: 26px;
}

/* --- 30b. a felso blokk ket kartyaja ------------------------------------- */
body.product-page .product-main .col-md-7 > .product-image,
body.product-page .product-main .col-sm-7 > .product-image {
  background: #FFFFFF !important;
  border-radius: 26px !important;
  padding: 22px !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  margin: 0 !important;
}

body.product-page .product-main .col-md-5 {
  background: #FFFFFF !important;
  border-radius: 26px !important;
  padding: 24px 26px !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
}

/* --- 30c. a cim a vasarlo-kartya tetejere (>= 992px) ---------------------
   A sablonban a h1 es a ket oszlopot tarto .row TESTVEREK egy nevtelen div-ben.
   A div-et raccsa tesszuk, a .row-t "display: contents"-szel atlatszova, igy a
   ket oszlop a racs kozvetlen eleme lesz, es a h1 a jobb oszlop FOLE kerul.
   A h1 es a .col-md-5 egyutt ad ki egy kartyat: a cim doboza felul kerek,
   alul egyenes, a vasarlo-doboz pedig forditva. */
@media (min-width: 992px) {
  body.product-page .product-main .col-md-12 > div:has(> h1.product-name) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }
  body.product-page .product-main .col-md-12 > div > h1.product-name {
    grid-column: 2; grid-row: 1;
    background: #FFFFFF;
    border-radius: 26px 26px 0 0;
    padding: 24px 26px 8px 26px;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.28 !important;
    box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  }
  body.product-page .product-main .col-md-12 > div > .row { display: contents !important; }
  body.product-page .product-main .col-md-7 {
    grid-column: 1; grid-row: 1 / span 2;
    width: auto !important; float: none !important; padding: 0 !important;
  }
  body.product-page .product-main .col-md-5 {
    grid-column: 2; grid-row: 2;
    width: auto !important; float: none !important;
    border-radius: 0 0 26px 26px !important;
    padding-top: 14px !important;
  }
}

/* --- 30d. ar, mennyiseg, gombok ------------------------------------------ */
body.product-page .product-main .price {
  font-size: 34px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  margin: 4px 0 14px 0 !important;
  line-height: 1.1;
}
body.product-page .product-button { display: flex; align-items: center; gap: 10px; margin-bottom: 16px !important; }
body.product-page .product-button b { color: var(--gjb-halvany); font-weight: 700; font-size: 14px; }

/* --- 30e. ertekeles-sor --------------------------------------------------- */
body.product-page .rating_bar { height: 10px !important; max-width: 132px; }
body.product-page .rating_bar .rating { height: 10px !important; }
body.product-page .col-md-5 .text-muted_ {
  font-size: 15px !important;
  color: var(--gjb-halvany) !important;
  border-left: 1px solid var(--gjb-keret) !important;
}
body.product-page #scroll-to-review { color: var(--gjb-narancs) !important; font-weight: 700; }
body.product-page #scroll-to-review u { text-decoration: none !important; }

/* --- 30f. keszlet / szallitas sor ---------------------------------------- */
body.product-page .col-md-5 .row .col-xs-2 img { max-width: 44px; height: auto; opacity: .8; }
body.product-page .col-md-5 .in-stock_ { color: var(--gjb-zold) !important; font-weight: 800; }

/* a "Doprava nad ... ZADARMO!" sor kiemelt pirula */
body.product-page .col-md-5 > .text-bold {
  display: inline-block;
  background: #FFF2E8;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--gjb-kek) !important;
  margin-bottom: 6px;
}

/* --- 30g. parameter-tabla a terv szerint ---------------------------------
   Az eredeti (template.css 740-750.) ket lebego oszlopot hasznal 25/75%-kal.
   A terven cimke balra szurken, ertek jobbra melykeken, koztuk vekony vonal. */
body.product-page .product-main .product-attributes {
  border-top: 1px solid var(--gjb-keret) !important;
  padding-top: 8px !important;
  margin-top: 14px !important;
  font-size: 14.5px !important;
}
body.product-page .product-main .product-attributes .product-attributes-header-group {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--gjb-keret);
}
body.product-page .product-main .product-attributes .product-attributes-header-group:last-child {
  border-bottom: none;
}
body.product-page .product-main .product-attributes .attr {
  float: none !important;
  width: auto !important;
  color: var(--gjb-halvany) !important;
  font-weight: 600 !important;
  padding: 0 !important;
}
body.product-page .product-main .product-attributes .value {
  float: none !important;
  width: auto !important;
  text-align: right;
  color: var(--gjb-kek) !important;
  font-weight: 800 !important;
  padding: 0 !important;
}
body.product-page .product-attributes-header-group a { color: var(--gjb-narancs) !important; }

/* --- 30h. a zold doboz olvashatosaga ------------------------------------
   A template.css 1637. sora a felkover reszeket ELENK SARGARA (#feff01) festi;
   ez az eredeti sotetzold hatteren mukodott, a mi halvanyzold dobozunkon
   viszont olvashatatlan. */
body.product-page .green-box b,
body.product-page .green-box strong { color: #0A6E14 !important; }
body.product-page .green-box ul { margin: 0; padding-left: 18px; }
body.product-page .green-box li { margin-bottom: 5px; line-height: 1.45; }
body.product-page .green-box img { max-width: 58px; height: auto; opacity: .85; }

/* --- 30i. a leiras kartyaja ---------------------------------------------- */
body.product-page .product-details {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 26px 30px;
  margin-top: 22px;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
}
body.product-page .product-details .description {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gjb-szoveg);
  max-width: 950px;
}
body.product-page .product-details > h4 {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  margin: 26px 0 14px 0 !important;
}

/* --- 30j. velemeny-urlap ------------------------------------------------- */
body.product-page #review-container input[type="text"],
body.product-page #review-container textarea,
body.product-page #review-container select {
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  background: var(--gjb-jeges-vl) !important;
  font-size: 15px;
  box-shadow: none !important;
  max-width: 620px;
  width: 100%;
}
body.product-page #review-container select { max-width: 110px; }
body.product-page #review-container input[type="text"]:focus,
body.product-page #review-container textarea:focus {
  border-color: var(--gjb-turkiz) !important;
  outline: none !important;
}

/* --- 30k. "vissza az elozo oldalra" gomb --------------------------------- */
body.product-page .btn.btn-default,
body.product-page a.btn-default {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

@media (max-width: 991px) {
  body.product-page .product-main .col-md-5 { margin-top: 16px; }
  body.product-page .product-main .col-md-12 > div > h1.product-name { font-size: 22px !important; }
  body.product-page .product-details { padding: 20px 18px; border-radius: 20px; }
}

/* --- 30l. a galeria belyegsora (v1.30.1) --------------------------------
   Merve: az .owl-thumbs doboza 186x19 px, a benne ulo belyegek viszont 80x80 —
   vagyis KILOGNAK belole. Az ok a template.css 1282. sora: az .owl-thumbs
   "display: inline" es "width: 80px", igy a sor magassaga a szoveg-sormagassag
   marad. Flex-sorra valtjuk, es a belyegeket a terv szerinti kartyakra tesszuk. */
body.product-page .owl-thumbs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  width: auto !important;
  text-align: left !important;
  margin-top: 16px;
}
body.product-page .owl-thumbs button {
  margin: 0 !important;
  padding: 5px !important;
  width: 74px;
  height: 74px;
  background: #FFFFFF !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease;
}
body.product-page .owl-thumbs button img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
body.product-page .owl-thumbs button:hover { border-color: var(--gjb-turkiz) !important; }
body.product-page .owl-thumbs button.active { border-color: var(--gjb-narancs) !important; }

/* --- 30m. "Spat do kategorie" link (v1.30.1) ----------------------------
   A sablon INLINE stilust ad ra (style="color: #fff"), ami a jeges kek
   hatteren lathatatlan. Inline stilust csak !important ir felul. */
body.product-page a[onclick*="history.go"] {
  color: var(--gjb-narancs) !important;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 800;
  display: inline-block;
  text-decoration: none !important;
  box-shadow: 0 6px 16px -12px rgba(0, 59, 111, .5);
}
body.product-page a[onclick*="history.go"]:hover { color: var(--gjb-nar-sot) !important; }

/* --- 30n. a zold dobozbeli ikon (v1.30.1) -------------------------------
   A "tudta.png" FEHER vonalas rajz: az eredeti sotetzold dobozon jol latszott,
   a mi halvanyzold hatterunkon viszont szinte lathatatlan folt marad. Ezert
   elrejtjuk; ha kell, ez a harom sor torlendo. */
body.product-page .green-box img { display: none; }
body.product-page .green-box td[align="right"] { display: none; }
body.product-page .green-box td:first-child { width: 100%; }

/* --- 30o. a vasarlo-kartya sarkai (v1.30.1) -----------------------------
   Desktopon a cim doboza a kartya TETEJE, ezert a .col-md-5 felul egyenes;
   991 px alatt viszont onallo kartya, tehat korben kerek. */
@media (max-width: 991px) {
  body.product-page .product-main .col-md-5 { border-radius: 26px !important; }
}

/* --- 30p. a kapcsolodo termekek kartyai (v1.30.2) -----------------------
   A termekoldal "Odporucany produkt" korhintajaban a kartya egy ".rating2"
   blokkot is tartalmaz (ures szurke csillagsor). Ez a 19. reteg sorrendjebol
   kimaradt (nem kapott "order"-t), ezert order:0-val a KEP FOLE kerult.
   A fooldalon es a kategoriaoldalon ez a blokk NINCS a kartyaban (megmerve:
   0 elofordulas), es a tervlap kartyajan sincs ertekeles — ezert elrejtjuk,
   igy a harom helyen egyforma a kartya. */
.product .rating2 { display: none !important; }

/* --- 30q. a kep-kartya a vasarlo-kartya aljaig er (v1.30.2) -------------
   A tervlapon a ket felso kartya alja egy vonalban van. A racsban a bal
   oszlop "align-items: start" miatt csak a tartalmaig er, alatta jeges kek
   folt maradt. Nyujtjuk, es a galeriat fuggolegesen kozepre tesszuk. */
@media (min-width: 992px) {
  body.product-page .product-main .col-md-7 { align-self: stretch; }
  body.product-page .product-main .col-md-7 > .product-image {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- 30r. a belyegsor a kep-kartya aljara (v1.30.3) ---------------------
   A kartya most a vasarlo-kartya aljaig er, de a galeria a doboz tetejen ult,
   alatta ~180 px ures feher maradt. A korhintat oszlop-iranyu flex-doboznak
   vesszuk, es a belyegsort "margin-top: auto"-val a doboz aljara kotjuk.
   Az owl belso szerkezetet (owl-stage) nem bantjuk. */
@media (min-width: 992px) {
  body.product-page .product-image > .owl-carousel {
    display: flex !important;
    flex-direction: column;
    height: 100%;
  }
  body.product-page .product-image > .owl-carousel > .owl-stage-outer {
    flex: 0 0 auto;
  }
  body.product-page .product-image .owl-thumbs {
    margin-top: auto !important;
    margin-bottom: 4px;
  }
}

/* --- 30s. MOBIL: a galeria ures also savja (v1.30.4) --------------------
   Merve 390 px-en: a kep-kartya 556 px magas, a benne levo kep viszont csak
   266 — 234 px ures feher marad alatta. Az ok a template.css 796. sora:
   "#productGalleryThumbs { min-height: 500px }". Ez az azonosito-szelektor
   (1,0,0) eleg eros ahhoz, hogy minden osztaly-szabalyt vigyen; desktopon
   helyes (ott a kep tenyleg ~500 px), mobilon viszont ures savot csinal. */
@media (max-width: 991px) {
  body.product-page #productGalleryThumbs { min-height: 0 !important; }
  body.product-page .product-main .col-md-7 > .product-image { padding: 16px !important; }
}

/* --- 30t. MOBIL: a kosar-sor egy sorba nem fer (v1.30.4) ----------------
   Merve: a sor 316 px-t kap, a tartalma (mennyiseg 74 + "ks" + gomb 230 +
   sziv 56) ennel szelesebb, ezert a sziv MAGABAN esett a masodik sorba.
   Rendezett elrendezes: felul a mennyiseg es — jobbra tolva — a sziv,
   alatta teljes szelessegben a kosargomb. */
@media (max-width: 767px) {
  body.product-page .product-button {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  body.product-page .product-button #wishlist_btn {
    order: 2;
    margin-left: auto !important;
  }
  body.product-page .product-button #cart_btn {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- 30u. a kedvezmeny-cimke a kepen (v1.30.5) --------------------------
   Akcios termeknel a ".product-image > .badget-wrapper > .discount" a kartya
   TELJES szelessegeben huzodo piros sav lett a kep folott. A tervlapon (es a
   termekkartyakon) ez egy kis pirula a kepdoboz BAL FELSO sarkaban.
   A wrapper-t kiemeljuk a folyambol, es a benne levo cimket pirulava tesszuk.
   Barmilyen cimke lehet benne (akcio, ujdonsag), ezert a wrapper OSSZES
   gyereket kezeljuk. */
body.product-page .product-main .product-image { position: relative; }
body.product-page .product-main .product-image > .badget-wrapper {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  width: auto;
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
body.product-page .product-main .product-image > .badget-wrapper > * {
  display: inline-block;
  width: auto !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  padding: 6px 15px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center;
  margin: 0 !important;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .45);
}
body.product-page .product-main .product-image > .badget-wrapper > .discount {
  background: var(--gjb-piros) !important;
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  body.product-page .product-main .product-image > .badget-wrapper { top: 10px; left: 10px; }
  body.product-page .product-main .product-image > .badget-wrapper > * {
    padding: 5px 12px !important;
    font-size: 14px !important;
  }
}

/* --- 30v. akcios ar a termekoldalon (v1.30.6) ---------------------------
   A termekkartyakon az akcios ar PIROS (".product:has(.discount) .price"),
   a termekoldalon viszont melykek maradt — ez kovetkezetlenseg. Ha a
   vasarlo-kartyaban van athuzott regi ar, az uj ar is piros legyen.
   A ".price" itt <span> (a nem akcios lapon <div>), ezert inline-block kell,
   kulonben a fuggoleges margoi nem ervenyesulnek. */
body.product-page .product-main .price { display: inline-block; }
body.product-page .col-md-5[itemprop="offers"]:has(.old-price) .price {
  color: var(--gjb-piros) !important;
}
/* "Akcia trva do vycerpania zasob" — halkabb kiseroszoveg */
body.product-page .col-md-5[itemprop="offers"] > p {
  font-size: 14px;
  color: var(--gjb-halvany);
  margin: 0 0 4px 0;
  font-weight: 600;
}


/* =========================================================================
   31. RETEG — A KESZLET/SZALLITAS TAJEKOZTATO SAV (v1.31.1, 2026-09-04)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css

   A ".green-box" a sablonban athelyezve a vasarlo-kartya belsejebol a KET
   KARTYA ALA (view.tmp.html, 2026-09-04). Itt teljes szelessegben all, ezert
   a harom pont EGYMAS MELLETT fer el — pontosan ugy, ahogy a tervlap harom
   bizalmi eleme (szallitas / eredetiseg / csere).

   A doboz feher kartya lesz, mint a lap tobbi blokkja; a "zold doboz" nevet a
   sablon adja, a szinet nem oroklik tovabb. A pontok ele Font Awesome ikon
   kerul szines korben (a shop amugy is tolti a font-awesome.css-t).

   FONTOS (v1.31.1): a <li> NEM lehet flex-doboz. A szoveg ugyanis szabad
   szoveg-csomopontok es <b> elemek keveréke; flex-ben mindegyikbol KULON
   flex-elem lesz, es a mondat darabokra esik szet ("Produkt | je na sklade |
   , moze byt..."). Ezert a <li> blokk marad, az ikon pedig abszolut ul a bal
   szelen — igy a mondat egyben, normal szovegfolyamban tordelodik.
   ========================================================================= */

body.product-page .green-box {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 26px !important;
  padding: 22px 26px !important;
  margin: 22px 0 0 0 !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  font-size: 15px;
  color: var(--gjb-szoveg) !important;
  font-weight: 600;
}
body.product-page .green-box table,
body.product-page .green-box tbody,
body.product-page .green-box tr,
body.product-page .green-box td { display: block; width: 100% !important; }

body.product-page .green-box ul {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.product-page .green-box li {
  flex: 1 1 0;
  min-width: 0;
  display: block;                      /* lasd a fenti FONTOS megjegyzest */
  position: relative;
  margin: 0 !important;
  padding: 8px 22px 8px 86px;
  min-height: 46px;
  line-height: 1.5;
  border-left: 1px solid var(--gjb-keret);
}
body.product-page .green-box li:first-child { border-left: none; padding-left: 62px; }
body.product-page .green-box li:last-child { padding-right: 2px; }

/* a kor-ikon: a sorszam donti el a jelet es a szint */
body.product-page .green-box li::before {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  font-size: 19px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}
body.product-page .green-box li:first-child::before { left: 0; }
body.product-page .green-box li:nth-child(1)::before {
  content: "\f058";                    /* pipa a korben — raktaron */
  background: #E4F5E6;
  color: #0A8F1A;
}
body.product-page .green-box li:nth-child(2)::before {
  content: "\f0d1";                    /* teherauto — ingyenes szallitas */
  background: #FFF0E4;
  color: var(--gjb-narancs);
}
body.product-page .green-box li:nth-child(3)::before {
  content: "\f017";                    /* ora — 16:00-ig */
  background: #E4F6FA;
  color: var(--gjb-turkiz);
}

/* a felkover reszek a szoveg kiemelesei — a melykek illik a lap tobbi reszehez */
body.product-page .green-box b,
body.product-page .green-box strong {
  color: var(--gjb-kek) !important;
  font-weight: 900;
}

/* 991 px alatt harom hasab helyett egymas ala, elvalaszto vonallal */
@media (max-width: 991px) {
  body.product-page .green-box { padding: 16px 18px !important; border-radius: 20px !important; }
  body.product-page .green-box ul { flex-direction: column; gap: 0; }
  body.product-page .green-box li {
    border-left: none;
    border-top: 1px solid var(--gjb-keret);
    padding: 14px 0 14px 56px;
  }
  body.product-page .green-box li:first-child { border-top: none; padding-top: 2px; padding-left: 56px; }
  body.product-page .green-box li:last-child { padding-bottom: 2px; }
  body.product-page .green-box li::before,
  body.product-page .green-box li:first-child::before {
    left: 0;
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
}

/* =========================================================================
   32. RETEG — AZ ERTEKELO URLAP (v1.32.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css

   A "Napiste svoj nazor" urlap a regi sablon-kinezetet orokolte: apro fekete
   cimkek, kulonbozo szelessegu mezok, szogletes reCAPTCHA, kicsi gomb, es az
   egesz balra tapadva lĂłg a leiras-kartyaban.

   Amit teszunk: az urlap kap egy sajat, jeges kek belso dobozt (igy elvalik a
   termekleirastol), a mezok EGYSEGES szelesseget es magassagot kapnak feher
   hatterrel, a cimkek az arculat betuit, a gomb pedig rendes meretet.

   A 30j. reteg mezo-szabalyait ez valtja fel (ott a mezo hattere meg jeges
   kek volt — most a DOBOZ jeges kek, tehat a mezo feher kell legyen).

   Megjegyzes: a sablonban ket egymasba agyazott <form> van (#ReviewModel es
   #submitReview). A bongeszo a belsot eldobja, ezert a szelektorok egyikre
   sem tamaszkodnak — a mezok azonositoit hasznaljuk.
   ========================================================================= */

/* a vekony elvalaszto a velemenyek folott — halkabb */
body.product-page #review-container hr.tall,
body.product-page .product-details hr.tall {
  border: none;
  border-top: 1px solid var(--gjb-keret);
  margin: 22px 0 18px 0;
}

/* a blokk fejlece */
body.product-page #review-container h4.heading-primary {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  margin: 0 0 14px 0 !important;
}

/* --- az urlap doboza --------------------------------------------------- */
body.product-page #ReviewModel {
  background: var(--gjb-jeges-vl);
  border: 1px solid var(--gjb-keret);
  border-radius: 20px;
  padding: 22px 24px 24px 24px;
  max-width: 680px;
}
/* a Bootstrap sor-negativ margoi a dobozban feleslegesek */
body.product-page #ReviewModel .row { margin-left: 0; margin-right: 0; }
body.product-page #ReviewModel .col-md-12 { padding-left: 0; padding-right: 0; }
body.product-page #ReviewModel .form-group { margin-bottom: 14px; }

/* --- cimkek ------------------------------------------------------------- */
body.product-page #ReviewModel label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--gjb-kek);
  margin: 0 0 6px 0;
}

/* --- mezok (a 30j. reteget valtja fel) ---------------------------------- */
body.product-page #review-container input[type="text"],
body.product-page #review-container textarea,
body.product-page #review-container select {
  background: #FFFFFF !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  padding: 11px 16px !important;
  font-size: 15px !important;
  color: var(--gjb-szoveg) !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
body.product-page #review-container input[type="text"] { min-height: 48px; }
body.product-page #review-container textarea { min-height: 120px; resize: vertical; }
body.product-page #review-container select {
  width: auto !important;
  min-width: 96px;
  min-height: 48px;
  cursor: pointer;
}
body.product-page #review-container input[type="text"]:focus,
body.product-page #review-container textarea:focus,
body.product-page #review-container select:focus {
  border-color: var(--gjb-turkiz) !important;
  outline: none !important;
}

/* --- reCAPTCHA ---------------------------------------------------------- */
body.product-page #ReviewModel .g-recaptcha {
  margin: 4px 0 6px 0;
  border-radius: 12px;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
}

/* --- kuldes gomb -------------------------------------------------------- */
body.product-page #btn_send {
  padding: 13px 30px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  min-height: 50px;
  margin-top: 4px;
}

@media (max-width: 767px) {
  body.product-page #ReviewModel { padding: 18px 16px 20px 16px; border-radius: 18px; }
  body.product-page #btn_send { width: 100%; }
}


/* =========================================================================
   33. RETEG — GOMB-IGAZITASOK (v1.33.1, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   ========================================================================= */

/* --- 33a. a velemeny-kuldes gomb kozepre --------------------------------
   Merve: a gomb 199 px szeles, a szuloje (.col-md-12) 630 — es a szulo
   "text-align: start", ezert a gomb a bal szelhez tapad. */
body.product-page #ReviewModel .col-md-12:has(#btn_send) { text-align: center !important; }

/* --- 33b. a gombok szovege fuggolegesen kozepre -------------------------
   Merve a "SPAT NA PREDCHADZAJUCU STRANU" gombon: a szoveg doboza folott 6 px,
   alatta 19 px — vagyis 13 px-rel FELJEBB ul a gomb kozepenel.
   Az ok: a gomb "inline-block", a 2. reteg "min-height: 44px"-et ir elo, a
   tartalom viszont csak ~33 px (14 px padding + 18.7 px sormagassag). Egy
   inline-block a tartalmat FELULRE teszi, a maradek 11 px mind alulra kerul.
   Megoldas: inline-flex + fuggoleges kozepre igazitas. A "gap" azert kell,
   mert a flex-doboz eldobja a csak-szokozbol allo csomopontokat, es az ikon
   (pl. a bal nyil vagy a kosar) kulonben nekiutkozne a szonak.

   A ".btn-block" KIVETEL: az a Bootstrap teljes szelessegu gombja (a
   kategoria-lista sablonjaiban hasznaljak), azt az inline-flex a tartalma
   merretere zsugoritana. */
.btn:not(.btn-block),
.btn-primary:not(.btn-block),
.btn-default:not(.btn-block),
.btn-orange:not(.btn-block),
input[type="submit"]:not(.btn-block),
button[type="submit"]:not(.btn-block) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* a mobil kosargomb teljes szelessegu marad (30t. reteg), csak a tartalma
   kozepre igazodik — a flex-elem szelesseget a "flex: 1 1 100%" adja */
@media (max-width: 767px) {
  body.product-page .product-button #cart_btn { display: flex !important; }
}

/* --- 33c. a kuldes gomb FUGGOLEGESEN is kozepre (v1.33.2) ---------------
   Merve: a szovegdoboz alja 2542, a gomb teteje 2546 (res: 4 px), a gomb alja
   2596, a doboz also kerete 2621 (res: 25 px = 24 px belso ter + 1 px keret).
   A gomb tehat a szovegdobozhoz tapadt. A 32. reteg "margin-top: 4px"-et adott;
   ezt 25 px-re allitjuk, igy a folotte es alatta levo res PONTOSAN egyenlo. */
body.product-page #btn_send { margin-top: 25px !important; }

/* =========================================================================
   34. RETEG — A KOSAR JAVITASAI (v1.34.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css

   A 4. reteg (2026-09-03) a kosarat meg valodi kosar-tartalom nelkul kapta meg
   a stilusait, ezert ket mukodesi hiba maradt benne. Mindketto a shop sajat
   "checkout.css"-evel valo utkozesbol ered:

   1) A MENNYISEG-MEZO ELTUNT. A checkout.css igy epiti a leptetot:
        .cart-page .quantity     { width:105px !important; position:relative; }
        .cart-page .quantity .qty{ width:105px; text-align:center; }
        .cart-page .quantity .minus,.plus { position:absolute; }
      Vagyis az input a TELJES doboz szelessegeben all, a "-" es "+" pedig
      RAUSZIK a ket szelere. A 4. retegem viszont flex-dobozza tette a
      ".quantity"-t: a gombok az abszolut pozicio miatt kikerultek a flex
      folyamabol, az input pedig a doboz BAL szelere kerult 44 px-en — ott a
      "-" gomb pontosan RAULT a szamra. A szam vegig ott volt, csak takarva.
      Megoldas: visszaterunk az eredeti (abszolut) elrendezeshez, csak szepen.

   2) A MOBIL "x" TOROLGOMB DESKTOPON IS LATSZOTT. A sablonban az <a> osztalyai:
      "btn-remove2 hidden-sm hidden-md hidden-lg" — vagyis 768 px felett a
      Bootstrap "display:none !important"-tal elrejti. A 4. retegem viszont
      "display:inline-flex !important"-et adott ra AZONOS erossegu szelektorral
      (0,1,0), es mivel az arculat2026.css toltodik kesobb, az enyem nyert.
      Ezert latszott ket torlogomb (egy "x" es egy kuka) minden soron.
      Megoldas: a rejtett valtozatot kizarjuk a szabalybol.
   ========================================================================= */

/* --- 34a. a mennyiseg-lepteto: az eredeti abszolut elrendezes, kerekitve --- */
.cart-page .quantity {
  display: block !important;
  position: relative;
  width: 124px !important;
  height: 46px;
  background: var(--gjb-jeges-vl);
  border: 2px solid var(--gjb-keret);
  border-radius: 999px;
  overflow: hidden;
  padding: 0 !important;
}
.cart-page .quantity .qty,
.cart-page .quantity input.text {
  width: 100% !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 38px !important;      /* a ket gomb helye */
  text-align: center;
  border: none !important;
  background: transparent !important;
  font-weight: 900;
  font-size: 17px;
  color: var(--gjb-kek) !important;
  box-shadow: none !important;
}
.cart-page .quantity .minus,
.cart-page .quantity .plus {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--gjb-kek) !important;
  font-weight: 900;
  font-size: 18px;
  line-height: 1 !important;
  padding: 0 !important;
  min-height: 0 !important;
  z-index: 2;
  cursor: pointer;
}
.cart-page .quantity .minus { left: 4px !important; }
.cart-page .quantity .plus  { right: 4px !important; }
.cart-page .quantity .minus:hover,
.cart-page .quantity .plus:hover { background: var(--gjb-narancs) !important; color: #FFFFFF !important; }

/* --- 34b. a mobil "x" gomb ne latsszon desktopon ------------------------- */
.btn-remove2.hidden-lg,
.btn-remove2.hidden-md,
.btn-remove2.hidden-sm { display: none !important; }
@media (max-width: 767px) {
  .btn-remove2.hidden-lg,
  .btn-remove2.hidden-md,
  .btn-remove2.hidden-sm {
    display: inline-flex !important;
    position: absolute;
  }
}

/* =========================================================================
   35. RETEG — A KOSAR ARCULATA (v1.35.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Tervlap: design/Kosar.dc.html

   A valodi szerkezet (kosar-tartalommal megmerve):
     .row > .col-md-8 > .bordered.table-responsive > h4 + table.cart-table
          > .col-md-4 > .bordered > h4 + .box-content
   Amit a tervbol atveszunk: jeges kek lapalap feher kartyakkal, szeles
   termeknev-oszlop, melykek vegosszeg, es NARANCS fo cselekves.
   Amit nem lehet CSS-bol (sablon kellene): a lepes-jelzo (Kosar - Szallitas -
   Attekintes), az ingyenes-szallitas savja, a markanev es a "Raktaron" jelzes
   a sorokban.
   ========================================================================= */

/* --- 35a. a lap alapja jeges kek, a blokkok feher kartyak ---------------- */
body.cart-page #main-wrapper > .container {
  background: transparent !important;
  padding-bottom: 26px;
}
body.cart-page .bordered {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 26px !important;
  padding: 22px 24px 24px 24px !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  margin-bottom: 20px;
}
body.cart-page .bordered > h4 {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  margin: 0 0 16px 0 !important;
}

/* --- 35b. a kosar-tabla: a kartya adja a hatteret ------------------------ */
body.cart-page table.cart-table {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
body.cart-page table.cart-table thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--gjb-keret) !important;
  padding: 0 10px 10px 10px !important;
  font-size: 12.5px;
}
body.cart-page table.cart-table td {
  border-top: 1px solid var(--gjb-keret) !important;
  padding: 18px 10px !important;
}
body.cart-page table.cart-table tbody tr:first-child td { border-top: none !important; }

/* oszlopszelessegek: a termeknev kapja a helyet (merve: csak 119 px volt) */
body.cart-page table.cart-table td.product-image-td,
body.cart-page table.cart-table th:first-child { width: 116px; }
body.cart-page table.cart-table td.product-name-td { width: auto; min-width: 240px; }
body.cart-page table.cart-table td.product-quantity { width: 150px; }
body.cart-page table.cart-table td.price { width: 116px; white-space: nowrap; }
body.cart-page table.cart-table td.product-action-td { width: 64px; }

body.cart-page table.cart-table td.product-name-td a {
  font-size: 15.5px;
  font-weight: 700;
}

/* --- 35c. az osszesito ---------------------------------------------------- */
body.cart-page .box-content table { margin-top: 8px !important; }
body.cart-page .box-content td { padding: 6px 0; font-size: 15px; }
body.cart-page .box-content hr {
  border: none;
  border-top: 1px solid var(--gjb-keret);
  margin: 10px 0;
}
body.cart-page .box-content label { font-weight: 800 !important; color: var(--gjb-kek); margin: 0; }
/* a vegosszeget a sablon INLINE stilussal festi pirosra (color:#eb3e3e) —
   a tervlapon melykek, es inline stilust csak !important ir felul */
body.cart-page .box-content .price {
  color: var(--gjb-kek) !important;
  font-weight: 900 !important;
  font-size: 30px !important;
}

/* --- 35d. a fo cselekves NARANCS, a masodlagos halkabb ------------------
   A sablonban a "Tovabb a penztarhoz" gomb ".btn-blue" (sotetkek), a
   kupon-bevalto pedig ".btn-primary" (narancs) — vagyis pont forditva, mint
   ahogy a tervlapon van. A kettot megcsereljuk. */
body.cart-page .box-content a.btn-blue {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
  width: 100%;
  min-height: 56px;
  font-size: 17px !important;
  margin: 14px 0 4px 0;
}
body.cart-page .box-content a.btn-blue:hover { background: var(--gjb-nar-sot) !important; }
body.cart-page .btn-coupon,
body.cart-page .validate-btn {
  background: var(--gjb-kek) !important;
  color: #FFFFFF !important;
  width: 100%;
  min-height: 46px;
  font-size: 14.5px !important;
}
body.cart-page .btn-coupon:hover,
body.cart-page .validate-btn:hover { background: var(--gjb-kek-sot) !important; }
body.cart-page .coupon .form-control {
  height: 46px !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  background: var(--gjb-jeges-vl) !important;
  box-shadow: none !important;
}

/* --- 35e. "vissza a boltba" — a terven halkabb, masodlagos --------------- */
body.cart-page .cart-table + a.btn,
body.cart-page .bordered > a.btn.btn-primary {
  background: #FFFFFF !important;
  color: var(--gjb-narancs) !important;
  border: 2px solid var(--gjb-keret) !important;
}

@media (max-width: 767px) {
  body.cart-page .bordered { padding: 18px 16px 20px 16px !important; border-radius: 20px !important; }
  body.cart-page table.cart-table td { padding: 12px 6px !important; }
}

/* --- 35f. a kosar-tabla ne logjon ki a kartyabol (v1.35.1) --------------
   Merve: a kartya belso szelessege ~700 px, a fix pixeles oszlopok viszont
   ~800-at kertek (116 kep + 240 nev + 150 mennyiseg + 2x116 ar + 64 akcio,
   plusz cellankent 20 px belso ter), ezert a torlogomb oszlopa lecsuszott a
   kartya szelen tul. Szazalekos oszlopokra valtunk, igy barmilyen szelessegen
   arányos marad. */
body.cart-page table.cart-table { table-layout: fixed; width: 100% !important; }
body.cart-page table.cart-table td,
body.cart-page table.cart-table th { padding: 16px 6px !important; }

body.cart-page table.cart-table td.product-image-td,
body.cart-page table.cart-table th:first-child { width: 13% !important; }
body.cart-page table.cart-table td.product-name-td { width: 33% !important; min-width: 0 !important; }
body.cart-page table.cart-table td.product-quantity { width: 20% !important; }
body.cart-page table.cart-table td.price { width: 13% !important; }
body.cart-page table.cart-table td.product-action-td { width: 8% !important; text-align: center; }

body.cart-page table.cart-table td.product-image-td img { max-width: 82px; padding: 6px; }
body.cart-page table.cart-table .price { font-size: 17px !important; }
body.cart-page table.cart-table td.product-name-td a { word-break: break-word; }

/* --- 35g. oszlop-aranyok finomitasa (v1.35.2) ---------------------------
   A 33%-os nevoszlop a ~700 px-es kartyaban 231 px volt, amiben a hosszu
   szlovak termeknevek 6-7 sorba tortek. A tobbi oszlopbol veszunk el annyit,
   amennyi meg biztonsagos: a lepteto 124 px szeles, tehat a mennyiseg-oszlop
   nem mehet 18% ala; az arak 17 px-es betuvel ~80 px-t kernek. */
body.cart-page table.cart-table td.product-image-td,
body.cart-page table.cart-table th:first-child { width: 11% !important; }
body.cart-page table.cart-table td.product-name-td { width: 40% !important; }
body.cart-page table.cart-table td.product-quantity { width: 18% !important; }
body.cart-page table.cart-table td.price { width: 12% !important; }
body.cart-page table.cart-table td.product-action-td { width: 7% !important; }
body.cart-page table.cart-table td.product-image-td img { max-width: 72px; }

/* --- 35h. a szelessegek a FEJLECRE valok (v1.35.3) ----------------------
   A "table-layout: fixed" eseten a bongeszo AZ ELSO SOR (itt a thead) cellai
   szerint osztja fel a helyet — az adatcellakra tett szazalekok nem hatnak.
   Ezert a nevoszlop tovabbra is ~130 px maradt. A hat fejleccella sorrendje:
   kep | nev | mennyiseg | egysegar | ar | torles. */
body.cart-page table.cart-table th:nth-child(1) { width: 11% !important; }
body.cart-page table.cart-table th:nth-child(2) { width: 40% !important; }
body.cart-page table.cart-table th:nth-child(3) { width: 18% !important; }
body.cart-page table.cart-table th:nth-child(4) { width: 12% !important; }
body.cart-page table.cart-table th:nth-child(5) { width: 12% !important; }
body.cart-page table.cart-table th:nth-child(6) { width: 7%  !important; }

/* --- 35i. a ket ar-oszlop ne erjen ossze (v1.35.4) ----------------------
   12% a ~700 px-es kartyaban 84 px, az "21,58 Eur" viszont 17 px-es betuvel
   ~78 px + 12 px belso ter = 90 px — ezert csusztak egymasba. A kep- es a
   nevoszlopbol veszunk el egy-egy szazalekot. */
body.cart-page table.cart-table th:nth-child(1) { width: 10% !important; }
body.cart-page table.cart-table th:nth-child(2) { width: 38% !important; }
body.cart-page table.cart-table th:nth-child(4),
body.cart-page table.cart-table th:nth-child(5) { width: 13% !important; }
body.cart-page table.cart-table th:nth-child(6) { width: 8% !important; }
body.cart-page table.cart-table td.product-image-td img { max-width: 64px; }
body.cart-page table.cart-table td.price { text-align: right; }
body.cart-page table.cart-table th:nth-child(4),
body.cart-page table.cart-table th:nth-child(5) { text-align: right; }

/* --- 35j. MOBIL: automatikus oszlopszelesseg (v1.35.5) -----------------
   767 px alatt a sablon MAS cellakat mutat: a nev sajat teljes szelessegu
   sorba kerul, az egysegar/ar oszlopok elrejtoznek (hidden-xs), az arak pedig
   a mennyiseg-cellaban jelennek meg ("x 21,58 Eur / Spolu: ..."). Az asztali
   szazalekok (10/38/18/13/13/8) ilyenkor ertelmuket vesztik: a mennyiseg-cella
   18%-a nem eleg a lepteto ES az arak szamara, ezert azok rácsusztak a kepre.
   Mobilon ezert a bongeszo ossza fel a helyet. */
@media (max-width: 767px) {
  body.cart-page table.cart-table { table-layout: auto !important; }
  body.cart-page table.cart-table th,
  body.cart-page table.cart-table td { width: auto !important; }
  body.cart-page table.cart-table td.product-image-td { width: 88px !important; }
  body.cart-page table.cart-table td.product-image-td img { max-width: 72px; }
  body.cart-page table.cart-table td.product-quantity { padding-left: 12px !important; }
  /* a mobil ar-blokk a lepteto ALATT, ne mellette */
  body.cart-page table.cart-table td.product-quantity .price { display: block; margin-top: 10px; }
}

/* =========================================================================
   36. RETEG — A PENZTAR 1. LEPESE (v1.36.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Tervlap: design/Penztar.dc.html

   A valodi szerkezet (megmerve az eles lapon, vendeg-kosarral):
     ul.navigation-container > li.navigation-item[.active]   — a lepes-jelzo
     .box-container-start > .col-* > .box > .box-title + .box-content
   Harom doboz all egymas mellett: Prihlasenie / Registracia / Bez registracie.

   A tervlapon a lepes-jelzo szamozott pirulakbol all (1 Kosar - 2 Szallitas -
   3 Attekintes); itt negy lepes van, es a sablon szoveget ad, nem szamot —
   a sorszamot ezert CSS-szamlalo (counter) teszi ele, sablon-modositas nelkul.
   ========================================================================= */

/* --- 36a. a lap alapja jeges kek --------------------------------------- */
body.checkout-page #main-wrapper > .container {
  background: transparent !important;
  padding-bottom: 26px;
}

/* --- 36b. lepes-jelzo: szamozott pirulak -------------------------------- */
body.checkout-page ul.navigation-container {
  counter-reset: lepes;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.checkout-page li.navigation-item {
  counter-increment: lepes;
  flex: 1 1 0;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF !important;
  color: var(--gjb-halvany) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  float: none !important;
  width: auto !important;
}
body.checkout-page li.navigation-item::before {
  content: counter(lepes);
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--gjb-jeges);
  color: var(--gjb-kek);
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.checkout-page li.navigation-item.active {
  background: var(--gjb-narancs) !important;
  color: #FFFFFF !important;
}
body.checkout-page li.navigation-item.active::before {
  background: #FFFFFF;
  color: var(--gjb-narancs);
}
/* a sablon sajat ikonjai helyett a szamot hasznaljuk */
body.checkout-page li.navigation-item > span.icon { display: none !important; }

/* --- 36c. a harom doboz feher kartya ------------------------------------ */
body.checkout-page .box-container .box,
body.checkout-page #login-box.box {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 26px !important;
  padding: 0 0 22px 0 !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  height: 100%;
  overflow: hidden;
}
body.checkout-page .box-container > [class*="col-"] { margin-bottom: 20px; }
body.checkout-page .box .box-title {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  text-align: center;
  padding: 20px 18px 8px 18px !important;
  background: transparent !important;
  border: none !important;
  text-transform: none !important;
}
body.checkout-page .box .box-content { padding: 0 20px !important; }
body.checkout-page .box .box-content p { font-size: 14.5px; color: var(--gjb-halvany); }

/* --- 36d. az URES hibauzenet-doboz ne foglaljon helyet ------------------
   A sablon minden urlap ele kiir egy <div class="error"></div>-et; ha nincs
   hiba, akkor is latszik a halvany piros savja. */
body.checkout-page .error:empty,
body.cart-page .error:empty { display: none !important; }

/* --- 36e. mezok es gombok ----------------------------------------------- */
body.checkout-page .box .form-control {
  height: 48px !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  background: var(--gjb-jeges-vl) !important;
  box-shadow: none !important;
  font-size: 15px;
}
body.checkout-page .box .form-control:focus { border-color: var(--gjb-turkiz) !important; }
/* a hosszu feliratu gombok (pl. "Prihlasenie sa ako hostuci") kilogtak a
   dobozbol: engedjuk tordelni, es igazodjon a doboz szelessegehez */
body.checkout-page .box .btn {
  white-space: normal !important;
  max-width: 100%;
  height: auto !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  line-height: 1.3;
}

@media (max-width: 991px) {
  body.checkout-page ul.navigation-container { gap: 8px; }
  body.checkout-page li.navigation-item { flex: 1 1 44%; font-size: 12.5px; padding: 10px 12px !important; }
}

/* --- 36f. a lepes-jelzo tenyleg vizszintes legyen (v1.36.1) -------------
   A checkout.css ezt irja elo:
     .checkout-page .navigation-container      { display: table !important; }
     .checkout-page .navigation-container li.cols-4 { width: 25% !important; }
   Az en szabalyaim erosebb szelektorral, de !important NELKUL alltak, ezert
   alulmaradtak — a lepesek egymas ala kerultek. Most !important-tal, es a
   li-re legalabb olyan eros szelektorral (0,3,1), de kesobb allva. */
body.checkout-page .navigation-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}
body.checkout-page .navigation-container li.navigation-item,
body.checkout-page .navigation-container li.cols-4,
body.checkout-page .navigation-container li.cols-3,
body.checkout-page .navigation-container li.cols-5,
body.checkout-page .navigation-container li.cols-6 {
  width: auto !important;
  flex: 1 1 0 !important;
  display: flex !important;
  float: none !important;
}

/* --- 36g. az URES hibauzenet-sav (v1.36.1) ------------------------------
   A ":empty" nem fogott, mert a sablon egy SORTORREST tesz a div-be
   (<div class="error">\n</div>) — az mar tartalom. Ezert nem elrejtjuk,
   hanem levesszuk rola a sajat hatteret: ha van hibauzenet, piros betuvel
   latszik, ha nincs, nem marad utana ures sav. */
body.checkout-page .error,
body.cart-page .error {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--gjb-piros) !important;
  font-weight: 700;
}

/* --- 36h. a harom doboz egyforma magas legyen --------------------------- */
body.checkout-page .box-container-start {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
body.checkout-page .box-container-start > [class*="col-"] { display: flex; float: none !important; }
body.checkout-page .box-container-start > [class*="col-"] > .box { width: 100%; }

/* --- 36i. az aktiv lepes sorszama a helyere (v1.36.2) -------------------
   A checkout.css 2009. sora ugyanezt a pszeudo-elemet hasznalja egy nyil-kephez:
     .checkout-page .navig li.active::before { content:''; position:absolute;
       top:-30px; background:url(../images/active.png) ... }
   Az en "content: counter(lepes)"-em erosebb szelektorral nyert, a POZICIO
   viszont az ovebol maradt — ezert lebegett a sorszam korocskeje a pirula
   FOLOTT, uresen. Visszatesszuk a normal folyamba. */
body.checkout-page li.navigation-item.active::before,
body.checkout-page li.navigation-item::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  background-image: none !important;
}

/* --- 36j. a lepesek mogotti nagy feher lap (v1.36.2) --------------------
   A tervlapon a harom doboz kozvetlenul a jeges kek hatteren all. */
body.checkout-page .checkout-container,
body.checkout-page .start-form,
body.checkout-page .checkout-content,
body.checkout-page .box-container-start {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 36k. az AKTIV lepes sorszama (v1.36.3) -----------------------------
   A checkout.css ".checkout-page .navig li.active::before { content:'' }"
   szabalya (0,3,1) erosebb volt, mint az en (0,2,2)-es szamlalom, ezert az
   aktiv lepes korebol hianyzott a szam. Azonos szintre emeljuk. */
body.checkout-page li.navigation-item.active::before { content: counter(lepes) !important; }

/* =========================================================================
   37. RETEG — A PENZTAR 2. LEPESE (v1.37.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Tervlap: design/Penztar.dc.html

   A valodi szerkezet (megmerve, vendeg-kosarral, order_details lepesben):
     .content > .review-cart            — bal oszlop: kosar-osszegzo + kupon
             > .checkout-content        — jobb oszlop: a harom lepes-doboz
     .details_step > .details_step_title + .details_step_content
       (szallitasi mod / szallitasi cim / szamlazasi adatok / fizetesi mod)
   A tervlapon ezek feher kartyak kerek sarokkal, a lap jeges kek hatteren.
   ========================================================================= */

/* --- 37a. a lepes-dobozok feher kartyak --------------------------------- */
body.checkout-page .details_step {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 26px !important;
  padding: 20px 24px 24px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
}
body.checkout-page .details_step_title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0 14px 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}
body.checkout-page .details_step_content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* --- 37b. a bal oszlop (kosar-osszegzo) kartyai ------------------------- */
body.checkout-page .review-cart .boxed,
body.checkout-page .review-cart > div,
body.checkout-page .review-cart .box {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
}
body.checkout-page .review-cart .cart-title,
body.checkout-page .review-cart h3,
body.checkout-page .review-cart h4 {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  text-transform: none !important;
  text-align: left !important;
}
/* a vegosszeg a tervlapon MELYKEK (a sablon narancsra festi) */
body.checkout-page .review-cart .price,
body.checkout-page .review-cart .total-price,
body.checkout-page .checkout-container .price {
  color: var(--gjb-kek) !important;
}

/* --- 37c. a valaszthato dobozok (szallitas / fizetes) -------------------
   A sablon a kivalasztott elemet narancs kerettel jeloli — ezt megtartjuk,
   csak lekerekitjuk es halvany narancs hatteret adunk neki. */
body.checkout-page .details_step_content > ul { list-style: none; padding: 0; margin: 0; }
body.checkout-page .details_step_content > ul > li {
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin: 0 0 12px 0 !important;
  background: #FFFFFF !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
body.checkout-page .details_step_content > ul > li:hover { border-color: var(--gjb-turkiz) !important; }
body.checkout-page .details_step_content > ul > li.active {
  border-color: var(--gjb-narancs) !important;
  background: #FFF7F2 !important;
}

/* --- 37d. a cim-urlap doboza -------------------------------------------- */
body.checkout-page .box-container-address {
  background: var(--gjb-jeges-vl) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 18px !important;
  margin-top: 14px;
}
body.checkout-page .box-container-address .form-control,
body.checkout-page .details_step .form-control {
  height: 48px !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  font-size: 15px;
}
body.checkout-page .box-container-address .form-control:focus,
body.checkout-page .details_step .form-control:focus { border-color: var(--gjb-turkiz) !important; }

@media (max-width: 991px) {
  body.checkout-page .details_step { padding: 16px 16px 18px 16px !important; border-radius: 20px !important; }
}

/* --- 37e. az arak ne torjenek ketfele (v1.37.1) -------------------------
   A bal oszlop keskeny, ezert a "21,58 Eur" ertekekbol az "Eur" atcsuszott a
   kovetkezo sorba. Az ar egy egyseg — ne toresse a bongeszo. */
body.checkout-page .review-cart .price,
body.checkout-page .review-cart td,
body.checkout-page .review-cart span { white-space: nowrap; }
body.checkout-page .review-cart .cart-title,
body.checkout-page .review-cart h3,
body.checkout-page .review-cart h4,
body.checkout-page .review-cart a { white-space: normal; }

/* --- 37f. a szallitasi mod dobozanak also szele (v1.37.2) ---------------
   A futar-logo balra lebeg (float), a leiras mellette fut; a lebego kep
   magasabb, mint a szoveg, ezert az utolso sor kicsuszott a doboz keretebol.
   Az "overflow: hidden" bezarja a lebegest, igy a doboz korulveszi mindkettot. */
body.checkout-page .details_step_content > ul > li { overflow: hidden; }

/* =========================================================================
   38. RETEG — A PENZTAR EGYSEGES SZELESSEGE (v1.38.0, 2026-09-04)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css

   A lepes-jelzo sor a MERTEK: 142 -> 1282 px (1424 px-es ablakban), belso ter
   nelkul. A tartalmi blokkok viszont beljebb alltak:

   1. lepes (belepes/regisztracio):
        .box-container-start        28 px belso ter mindket oldalt
        + az oszlopok (col-*)       15 px belso ter
        = a dobozok 185 -> 1239, vagyis 43 px-el beljebb mindket oldalon.
      Megoldas: a soron nullazzuk a belso teret, es a Bootstrap-modjara -15 px
      kulso terrel "kilogatjuk", igy az OSZLOPOK 15 px-e pontosan a helyere teszi
      a dobozokat (127+15 = 142, 1297-15 = 1282).

   2. lepes (szallitas/cim/fizetes):
        .review-cart / .checkout-content   10 px belso ter mindket oldalt
        = a kartyak 152 -> 1272, vagyis 10 px-el beljebb.
      Megoldas: csak a KULSO oldalakon vesszuk le; a ket oszlop kozotti 20 px
      res megmarad.
   ========================================================================= */

/* --- 38a. 1. lepes: a harom doboz sora a jelzo szeleig --- */
body.checkout-page .box-container-start {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* --- 38b. 2. lepes: a ket oszlop kulso szele a jelzohoz --- */
body.checkout-page .content > .review-cart { padding-left: 0 !important; }
body.checkout-page .content > .checkout-content { padding-right: 0 !important; }

/* 991 px alatt a ket oszlop egymas ala kerul — ott mindket oldalon 0 kell */
@media (max-width: 991px) {
  body.checkout-page .content > .review-cart,
  body.checkout-page .content > .checkout-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.checkout-page .box-container-start {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}

/* =========================================================================
   39. RETEG — A PENZTAR HIBAUZENETEI (v1.39.0, 2026-09-04, Claude Opus 5)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css

   A hibauzenetet JS irja a "#details_step_error_1/2/3" dobozokba, a kinezetet
   pedig a checkout.css 1809. sora adja:
     color:red; border:1px red solid; padding:5px; text-align:center;
     background:rgba(255,0,0,0.15); font-size:14px;
   Ez eles sarku, vekony piros keretes, kozepre igazitott sav — idegen a lap
   tobbi reszetol, es rosszul olvashato.

   Helyette: lekerekitett halvany piros kartya, BALRA igazitott szoveggel es
   figyelmezteto ikonnal (Font Awesome, amit a shop amugy is tolt). A "span" es
   a "li" valtozat is kell: egy hibanal span, tobbnel lista keletkezik.
   ========================================================================= */

body.checkout-page [id^="details_step_error_"] ul,
body.checkout-page [id^="details_step_error_"] ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.checkout-page [id^="details_step_error_"] span,
body.checkout-page [id^="details_step_error_"] li {
  position: relative;
  display: block !important;
  border: 1px solid #F3C7C7 !important;
  border-radius: 16px !important;
  background: #FDECEC !important;
  color: #B01212 !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.45;
  padding: 14px 18px 14px 50px !important;
  margin: 0 0 12px 0 !important;
}
body.checkout-page [id^="details_step_error_"] span::before,
body.checkout-page [id^="details_step_error_"] li::before {
  content: "\f06a";                    /* felkialtojel a korben */
  font-family: FontAwesome;
  font-weight: normal;
  position: absolute;
  left: 18px;
  top: 15px;
  font-size: 19px;
  line-height: 1;
  color: var(--gjb-piros);
}

@media (max-width: 767px) {
  body.checkout-page [id^="details_step_error_"] span,
  body.checkout-page [id^="details_step_error_"] li {
    font-size: 14px !important;
    padding: 12px 14px 12px 44px !important;
  }
  body.checkout-page [id^="details_step_error_"] span::before,
  body.checkout-page [id^="details_step_error_"] li::before { left: 14px; top: 13px; font-size: 17px; }
}

/* --- 39b. egy doboz legyen, es az ikon fuggolegesen kozepen (v1.39.1) ---
   Ket hiba latszott az eles hibauzeneten:

   1) KET egymasba agyazott doboz, KET ikonnal. A JS a hibat
      "<li><span>szoveg</span></li>" alakban irja ki, a 39. retegem pedig a
      "li"-re ES a "span"-ra is rateszi a kartyat meg az ikont. Ha a span egy
      li-ben ul, akkor csak a KULSO (li) legyen a doboz — a belsot semlegesitjuk.

   2) Az ikon fix "top: 15px"-en allt, tehat egysoros uzenetnel is felul ult,
      tobbsorosnal pedig meg feltunobb volt. Fuggolegesen kozepre tesszuk. */

body.checkout-page [id^="details_step_error_"] li span {
  display: inline !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
body.checkout-page [id^="details_step_error_"] li span::before { content: none !important; }

body.checkout-page [id^="details_step_error_"] span::before,
body.checkout-page [id^="details_step_error_"] li::before {
  top: 50% !important;
  transform: translateY(-50%);
}

/* =========================================================================
   40. RETEG — A PENZTAR 3. LEPESE: ATTEKINTES (v1.40.0, 2026-09-04)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Oldal: /checkout?action=review

   A valodi szerkezet (megmerve, vendeg-kosarral):
     .review-form            (INLINE stilus: border:1px solid #ddd)
       > h3                  (INLINE stilus: padding-left:30px)
       > .row > .step-box-container.col-lg-12
            > hr             (INLINE: border-width:2px — ez adta a kek csikokat)
            > .box.col-md-6  (Fakturacna adresa / Oznamovacie udaje / Sposob
                              dopravy / Platobne moznosti / Dodacia adresa ...)
                 > .box-title (a cim ES a "zmenit" link egy sorban)
                 > .box-content

   A dobozok "col-md-6"-ok, de a lebegtetes nem ervenyesult, ezert egymas ALATT
   alltak, es a lap jobb fele uresen maradt. Racsba tesszuk oket.
   ========================================================================= */

/* --- 40a. a fo doboz feher kartya (az inline keret helyett) -------------- */
body.checkout-page .review-form {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 26px !important;
  padding: 24px 26px 26px 26px !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
}
body.checkout-page .review-form > h3 {
  padding-left: 0 !important;
  margin: 0 0 6px 0 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
}
/* az elvalaszto vonalak: az inline "border-width:2px" helyett hajszalvonal */
body.checkout-page .review-form hr {
  border: none !important;
  border-top: 1px solid var(--gjb-keret) !important;
  margin: 16px 0 !important;
  height: 0 !important;
}

/* --- 40b. a blokkok ket oszlopban ---------------------------------------- */
body.checkout-page .review-form .step-box-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
/* a szakaszhatarolo vonalak vegigfussanak a racson */
body.checkout-page .review-form .step-box-container > hr { grid-column: 1 / -1; }
body.checkout-page .review-form .step-box-container .box {
  background: var(--gjb-jeges-vl) !important;
  border: 1px solid var(--gjb-keret) !important;
  border-radius: 18px !important;
  margin: 0 !important;
  padding: 16px 18px 18px 18px !important;
  width: auto !important;
  float: none !important;
}
/* a szeles blokkok (kosar-tartalom, megjegyzes) foglaljak el mindket oszlopot */
body.checkout-page .review-form .step-box-container .box.w100,
body.checkout-page .review-form .step-box-container > .box:only-child { grid-column: 1 / -1; }

/* --- 40c. a blokk fejlece: cim balra, "zmenit" jobbra pirulaban ---------- */
body.checkout-page .review-form .box-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 10px 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}
body.checkout-page .review-form .box-title a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF !important;
  border: 2px solid var(--gjb-keret) !important;
  color: var(--gjb-narancs) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
}
body.checkout-page .review-form .box-title a:hover {
  border-color: var(--gjb-narancs) !important;
  color: var(--gjb-nar-sot) !important;
}

/* --- 40d. a blokk tartalma ----------------------------------------------- */
body.checkout-page .review-form .box-content {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14.5px !important;
  color: var(--gjb-szoveg);
  line-height: 1.55;
  background: transparent !important;
}
/* az ures <div>-ek (a sablon minden adathoz kiir egyet) ne hagyjanak ures sort */
body.checkout-page .review-form .box-content > div:empty { display: none; }

@media (max-width: 767px) {
  body.checkout-page .review-form { padding: 18px 16px 20px 16px !important; border-radius: 20px !important; }
  body.checkout-page .review-form .step-box-container { grid-template-columns: 1fr; gap: 12px; }
  body.checkout-page .review-form .box-title { font-size: 15px !important; }
}

/* --- 40e. a megjegyzes-mezo az attekintesben (v1.40.1) ------------------
   A sablon narancs kerettel es halvany narancs hatterrel adja; az arculatban
   a beviteli mezok feher hatteruek, vilagoskek kerettel, lekerekitve. */
body.checkout-page .review-form textarea,
body.checkout-page .review-comment textarea {
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  width: 100% !important;
  min-height: 110px;
  box-shadow: none !important;
  resize: vertical;
}
body.checkout-page .review-form textarea:focus,
body.checkout-page .review-comment textarea:focus { border-color: var(--gjb-turkiz) !important; outline: none !important; }

/* --- 40f. az attekintes zaro resze: vegosszeg, elfogado jelolok, gomb (v1.40.2)
   A zaro blokk (".step-box-container.review-container") ugyanazt az osztalyt
   viseli, mint a felso adat-blokkok tartoja, ezert a 40b. reteg KET OSZLOPOS
   racsa erre is rahatott: a vegosszeg + a jeloloknegyzetek az elso, a gomb a
   masodik oszlopba esett — a szoveg csak a lap bal felet hasznalta, a gomb
   pedig jobbra lokodott. Ezt a blokkot kivesszuk a racsbol.
   Szerkezet: hr > center > h2 (vegosszeg) + table.review-comment (td.checkbox
   > input + label > small) ; .buttons > center > button.btn_next */
body.checkout-page .review-form .step-box-container.review-container {
  display: block !important;
  padding-top: 6px !important;
}

/* a vegosszeg: kozepen, melykek (a sablon inline narancsot ad az osszegre) */
body.checkout-page .review-container h2 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  text-align: center;
  margin: 12px 0 18px 0 !important;
}
body.checkout-page .review-container h2 span { color: var(--gjb-kek) !important; }

/* a jelolok tablazata teljes szelessegben */
body.checkout-page .review-container table.review-comment {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse;
}
body.checkout-page .review-container td.checkbox {
  position: relative;
  display: block;
  text-align: justify !important;
  padding: 10px 0 10px 36px !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gjb-szoveg);
}
body.checkout-page .review-container td.checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 13px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gjb-narancs);
  cursor: pointer;
}
body.checkout-page .review-container td.checkbox label {
  display: block;
  text-align: justify;
  font-weight: 500 !important;
  margin: 0;
  cursor: pointer;
}
body.checkout-page .review-container td.checkbox label small { font-size: 14px !important; }
body.checkout-page .review-container td.checkbox a { color: var(--gjb-narancs) !important; font-weight: 700; }
/* az ures tavtarto sor (<td><br></td>) ne foglaljon helyet */
body.checkout-page .review-container td:not(.checkbox):empty,
body.checkout-page .review-container tr:first-child td:not(.checkbox) { display: none; }

/* a megrendelo gomb: kozepen, a fo cselekves meretében */
body.checkout-page .review-container .buttons { text-align: center; margin-top: 22px; }
body.checkout-page .review-container .buttons .btn_next {
  min-height: 56px;
  padding: 14px 40px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

@media (max-width: 767px) {
  body.checkout-page .review-container td.checkbox { text-align: left !important; font-size: 13.5px; }
  body.checkout-page .review-container td.checkbox label { text-align: left; }
  body.checkout-page .review-container .buttons .btn_next { width: 100%; }
}

/* --- 40g. a jelolo szovegenek sorai egy vonalban (v1.40.3) --------------
   A Bootstrap ".checkbox label { padding-left: 20px }" szabalya a cimke
   sorait 20 px-el beljebb kezdte, a cimken KIVUL eso szovegresz viszont a
   cella szelen — igy a 3. sortol a szoveg visszaugrott a jelolonegyzet ala.
   A behuzast a cella adja (36 px), a cimken nem kell. */
body.checkout-page .review-container td.checkbox label {
  padding-left: 0 !important;
  min-height: 0 !important;
}

/* --- 40h. a jelolo NE folyassa korbe a szoveget (v1.40.4) ---------------
   Merve: a cimke minden szovege a <label>-ben van, megis a 3. sortol a
   szoveg visszaugrott a jelolonegyzet ala — ez a klasszikus float-korbefolyas:
   a negyzet balra lebeg, az elso ket sor mellette fut, alatta a tobbi
   visszamegy a bal szelre. A 40f. "position: absolute"-ja gyengebb szabaly
   volt a Bootstrap ".checkbox input" (0,2,1)-esenel. Ket biztositek:
   1) az input abszolut es NEM lebeg (eros szelektor + !important),
   2) a cimke sajat blokk-kontextus (overflow: hidden), igy meg lebego elem
      mellett is minden sora ugyanott kezdodik. */
body.checkout-page .review-container td.checkbox input[type="checkbox"],
body.checkout-page .review-container td.checkbox input.custom {
  position: absolute !important;
  float: none !important;
  left: 0 !important;
  top: 13px !important;
  margin: 0 !important;
}
body.checkout-page .review-container td.checkbox label {
  display: block !important;
  overflow: hidden;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* --- 40i. VEGLEGES: a jelolo es a cimke ket flex-oszlop (v1.40.5) --------
   A 40f/40h abszolut pozicios megoldasa nem bizonyult megbizhatonak: a
   tablazat-cella "position: relative"-je nem mindig lett a jelolo viszonyitasi
   pontja, es a szoveg a 3. sortol tovabbra is visszaugrott. A flex-doboz ettol
   fuggetlen: a cella ket eleme (input + label) ket oszlopban all, a cimke
   MINDEN sora ugyanott kezdodik. A cellaban levo ures szovegcsomopontokat a
   flex eldobja, tehat pontosan ket elem marad. */
body.checkout-page .review-container td.checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0 !important;
  position: static !important;
}
body.checkout-page .review-container td.checkbox input[type="checkbox"],
body.checkout-page .review-container td.checkbox input.custom {
  position: static !important;
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  margin: 3px 0 0 0 !important;
  float: none !important;
}
body.checkout-page .review-container td.checkbox label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

/* --- 40j. az egyedi jelolonegyzet: ne lebegjen, arculati rajz (v1.40.6) --
   MEGTALALVA: a template.css 892. sora a cimke ::before-javal rajzolja a
   negyzetet (hatterkep, 30x35 px, FLOAT: LEFT), a valodi <input> rejtett.
   A lebego negyzet miatt az elso ket sor beljebb futott, a 3.-tol a szoveg
   visszaugrott a bal szelre (merve: 193, 193, 163, 163).
   Megoldas: a ::before abszolut pozicioba kerul a cimke bal szelere, a cimke
   pedig 34 px belso teret kap — igy MINDEN sor ugyanott kezdodik. A rajz
   arculati: kerek sarku feher negyzet, bepipalva narancs hatter feher pipaval
   (Font Awesome). A rejtett input :checked allapota tovabbra is a "+ label"
   szelektoron at vezerli. */
body.checkout-page .review-container td.checkbox label {
  position: relative !important;
  padding-left: 34px !important;
  overflow: visible !important;
}
body.checkout-page .review-container td.checkbox input[type="checkbox"] + label::before {
  content: "" !important;
  float: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: #FFFFFF !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 6px !important;
  font-family: FontAwesome;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: #FFFFFF;
  transition: background .15s ease, border-color .15s ease;
}
body.checkout-page .review-container td.checkbox label:hover::before {
  border-color: var(--gjb-narancs) !important;
}
body.checkout-page .review-container td.checkbox input[type="checkbox"]:checked + label::before {
  content: "\f00c" !important;             /* pipa */
  background: var(--gjb-narancs) !important;
  border-color: var(--gjb-narancs) !important;
}

/* =========================================================================
   41. RETEG — A PENZTAR 4. LEPESE: SIKERES RENDELES (v1.41.0, 2026-09-07)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Oldal: /checkout?action=success — sablon: success.form.tmp.html
     .checkout-content-success > .cart-title + .success-form > p
   ========================================================================= */

/* --- 41a. a KESZ lepesek a jelzon: pipa a sorszam helyett -----------------
   A checkout.css a "complete" lepesre zold hatteret ES egy pipa-hatterkepet
   tesz 10 px-re balra (".navig li.complete { background:#10a726 url(pipa.png)
   no-repeat 10px center !important }") — pont oda, ahova a 36b. reteg
   sorszam-koroecskeje kerul, ezert a ketto egymasra csuszott. A hatterkepet
   levesszuk, es a korocske tartalma pipa lesz (a tervlapon is igy: zold pipa
   a kesz lepesnel). */
body.checkout-page .navigation-container li.navigation-item.complete {
  background: var(--gjb-zold) !important;
  color: #FFFFFF !important;
}
body.checkout-page .navigation-container li.navigation-item.complete::before {
  content: "\f00c" !important;
  font-family: FontAwesome;
  font-size: 12px;
  background: #FFFFFF !important;
  color: var(--gjb-zold) !important;
}

/* --- 41b. a sikeres rendeles kartyaja ------------------------------------ */
body.checkout-page .checkout-content-success {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 760px;
  margin: 6px auto 0 auto !important;
  padding: 36px 36px 38px 36px !important;
  background: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  text-align: center;
}
/* nagy zold pipa a cim fole */
body.checkout-page .checkout-content-success .cart-title::before {
  content: "\f00c";
  font-family: FontAwesome;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px auto;
  border-radius: 999px;
  background: #E4F5E6;
  color: var(--gjb-zold);
  font-size: 34px;
}
body.checkout-page .checkout-content-success .cart-title {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--gjb-kek) !important;
  text-transform: none !important;
  text-align: center !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
body.checkout-page .checkout-content-success .success-form p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gjb-szoveg);
  margin: 0 0 10px 0;
}

@media (max-width: 767px) {
  body.checkout-page .checkout-content-success { padding: 26px 18px 28px 18px !important; border-radius: 20px; }
  body.checkout-page .checkout-content-success .cart-title { font-size: 22px !important; }
}

/* --- 41c. a success-kartya hattere (v1.41.1) -----------------------------
   A 36j. reteg a ".checkout-content"-re "background: transparent !important"-ot
   tett (az 1. lepes nagy feher lapja miatt); a 41b. sima "background: #fff"-je
   ez ellen alulmaradt, a kartya nem latszott. Azonos erossegu, kesobbi
   szabaly !important-tal. */
body.checkout-page .checkout-content.checkout-content-success {
  background: #FFFFFF !important;
  box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40) !important;
  border-radius: 26px !important;
}

/* =========================================================================
   42. RETEG — MOBIL NEZET A TERVLAPOK SZERINT, 1. kor (v1.42.0, 2026-09-07)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Tervlapok: design/MobilTermek.dc.html, MobilPenztar.dc.html
   Csak 767 px alatt hat. Amit a tervbol CSS-bol atveszunk:
     - a fejlec menupontjai NE egymas alatt (3 sor!), hanem egy gorgetheto
       pirula-savban (a #mobil_menu lista csak xs-en latszik)
     - kompakt lepes-jelzo: a nem aktiv lepes csak a SZAMAT mutatja
     - a cim-urlap mezoi teljes szelessegben
     - a termekoldalon ROGZITETT also kosar-sav (lepteto + gomb)
   ========================================================================= */
@media (max-width: 767px) {

  /* --- 42a. fejlec: a mobil menu egy gorgetheto pirula-sav --------------- */
  #mobil_menu {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 10px 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    float: none !important;
  }
  #mobil_menu::-webkit-scrollbar { display: none; }
  #mobil_menu > li {
    flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    display: block !important;
    position: static !important;
  }
  #mobil_menu > li > a {
    display: inline-flex !important;
    align-items: center;
    height: 36px;
    padding: 0 14px !important;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--gjb-kek) !important;
    font-size: 13.5px !important;
    font-weight: 800;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
  }
  #mobil_menu > li > a:hover, #mobil_menu > li.active > a { background: var(--gjb-narancs); color: #FFFFFF !important; }
  #mobil_menu .dropdown-menu, #mobil_menu .level-2 { display: none !important; }   /* almenu a savban nem fer */

  /* --- 42b. kompakt lepes-jelzo a penztarban ----------------------------- */
  body.checkout-page .navigation-container {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center;
    margin-bottom: 16px !important;
  }
  body.checkout-page .navigation-container li.navigation-item {
    flex: 0 0 auto !important;
    min-width: 0;
    padding: 7px 10px !important;
    font-size: 0 !important;          /* a felirat eltunik, a sorszam-korocske marad */
    gap: 0 !important;
    line-height: 1 !important;
  }
  body.checkout-page .navigation-container li.navigation-item::before {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }
  body.checkout-page .navigation-container li.navigation-item.active {
    flex: 1 1 auto !important;
    font-size: 12.5px !important;
    gap: 8px !important;
    padding: 7px 14px 7px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- 42c. cim-urlap: minden mezo teljes szelessegben -------------------- */
  body.checkout-page .box-container-address { padding: 12px !important; }
  body.checkout-page .box-container-address [class*="col-"],
  body.checkout-page .shipping-address-form > [class*="col-"] {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.checkout-page .box-container-address .form-control,
  body.checkout-page .details_step .form-control { width: 100% !important; max-width: 100% !important; }

  /* --- 42d. kupon-mezo a penztarban is arculati ---------------------------- */
  body.checkout-page .coupon .form-control {
    height: 46px !important;
    border: 2px solid var(--gjb-keret) !important;
    border-radius: 14px !important;
    background: var(--gjb-jeges-vl) !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  body.checkout-page .coupon [class*="col-"] { width: 100% !important; float: none !important; padding: 0 0 8px 0 !important; }
  body.checkout-page .btn-coupon, body.checkout-page .validate-btn { width: 100%; }

  /* --- 42e. termekoldal: morzsa rejtve, rogzitett also kosar-sav --------- */
  body.product-page .breadcrumb { display: none !important; }
  body.product-page { padding-bottom: 84px; }          /* hely a rogzitett savnak */
  body.product-page .product-button {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1050;
    margin: 0 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 -8px 24px -12px rgba(0, 59, 111, .35);
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px !important;
  }
  body.product-page .product-button b { display: none; }               /* a "ks" felirat nem fer */
  body.product-page .product-button #cart_qty { order: 1; flex: 0 0 66px; width: 66px !important; height: 50px !important; }
  body.product-page .product-button #cart_btn { order: 2; flex: 1 1 auto !important; min-height: 50px; padding: 0 14px !important; font-size: 16px !important; }
  body.product-page .product-button #wishlist_btn { order: 3; flex: 0 0 50px; width: 50px !important; height: 50px !important; margin: 0 !important; }

  /* --- 42f. attekintes: a kosar-tartalom tablazata ne torjon szavankent -- */
  body.checkout-page .review-form table { table-layout: auto !important; width: 100% !important; }
  body.checkout-page .review-form table td { white-space: normal !important; padding: 6px 4px !important; font-size: 14px; }
  body.checkout-page .review-form table td:first-child { white-space: nowrap !important; width: 1%; }
}

/* --- 42g. JAVITAS: a nowrap csak a kosar-tablazat darabszam-cellajara ---
   A 42f. "td:first-child { white-space: nowrap }"-ja a jeloloneg­yzetes
   cellara is rahatott (az is az elso td a soraban), igy a GDPR-szoveg egy
   sorba kerult es a lap kiszelesedett. Szukitve a kosar-tartalom dobozara,
   a jelolo-cellak kizarva. (v1.42.1) */
@media (max-width: 767px) {
  body.checkout-page .review-form table td:first-child { white-space: normal !important; width: auto; }
  body.checkout-page .review-form .box table td:first-child:not(.checkbox) { white-space: nowrap !important; width: 1%; }
  body.checkout-page .review-form td.checkbox { white-space: normal !important; }
  body.checkout-page .review-form { overflow: hidden; }
}

/* --- 42h. a KATEGORIASAV mobilon: gorgetheto pirula-sav (v1.42.2) -------
   MERVE: a mobilon egymas ala eso "Akciove hracky / Novinky / ..." sorokat
   NEM a #mobil_menu adja (az rejtve van), hanem a desktop kategoriasav:
   .container.cat-menu > .floating-menu.dropdown > a.btn.btn-red2 — a
   .floating-menu blokk-elem, ezert 54 px-es sorokban egymas ala esik (3 sor
   = 181 px). Mobilon a sav egy sorba kerul, vizszintesen gorgethetoen. */
@media (max-width: 767px) {
  .cat-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 15px 10px 15px !important;
    height: auto !important;
    align-items: center;
  }
  .cat-menu::-webkit-scrollbar { display: none; }
  .cat-menu > .floating-menu,
  .cat-menu > .dropdown {
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    position: static !important;
  }
  .cat-menu .floating-menu > a.btn,
  .cat-menu .dropdown > a.btn {
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* az elso ("Kategorie hraciek v obchode") marad a sotetkek fogomb */
  .cat-menu .floating-menu:not(:first-child) > a.btn {
    background: #FFFFFF !important;
    color: var(--gjb-kek) !important;
  }
  /* a lenyilo kategoriafa a savban nem fer el — a hamburger-menu viszi */
  .cat-menu .dropdown-menu { display: none !important; }
}

/* --- 42i. cim-urlap mobilon: a beagyazott dobozok belso tere (v1.42.3) --
   MERVE (390 px): a mezo 224 px, mert negy egymasba agyazott doboz eszi a
   helyet: .details_step 16+16, #shipping_method_content 10+10,
   .box-container-address 12+12, es a legnagyobb: .shipping-address-form
   28+28 (+ sajat keret = a "dupla doboz"). Mobilon ezeket lenullazzuk; a
   mezok igy ~320 px szelesek lesznek. */
@media (max-width: 767px) {
  body.checkout-page .shipping_method_content,
  body.checkout-page [id^="shipping_method_content_"] { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body.checkout-page .box-container-address { padding: 10px !important; }
  body.checkout-page .shipping-address-form,
  body.checkout-page .billing-address-form,
  body.checkout-page .box-container-address > div {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body.checkout-page .box-container-address .form-group { margin-bottom: 10px; }
}

/* --- 42j. termekoldal mobilon: a "Spat do kategorie" a cim FOLE (v1.42.3)
   A gomb jobbra lebeg a cim mellett, ezert a cim 4 sorba tort. */
@media (max-width: 767px) {
  body.product-page div:has(> a[onclick*="history.go"]) {
    float: none !important;
    display: block;
    padding: 0 0 10px 0 !important;
    text-align: left;
  }
  body.product-page .product-main h1.product-name { clear: both; }
}

/* =========================================================================
   43. RETEG — MOBIL: KATEGORIAFA-PANEL ES KATEGORIAOLDAL (v1.43.0, 2026-09-07)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Tervlapok: design/MobilKategoriak.dc.html, MobilLista.dc.html

   MERVE: a "Kategorie hraciek v obchode" gomb Bootstrap-dropdown
   (id=dLabel, data-toggle=dropdown), ami a 788 elemu kategoriafat nyitja
   (.cat-menu .floating-menu.open > .dropdown-menu). A #mobil_menu egy ZART
   .collapse blokkban ul, es hamburger-gomb nincs a lapon — tehat mobilon
   EZ A DROPDOWN az egyetlen ut a kategoriakhoz. A 42h. reteg ezt
   "display:none !important"-tal elrejtette (a gorgetheto savban nem fert
   volna el) — ezt itt visszavonjuk, es a panelt a terv szerint TELJES
   KEPERNYOSRE tesszuk (a "position: fixed" kiveszi a sav overflow-jabol).
   A bezaro "x" gombot a theme.js szurja be (v1.2.0), mert a Bootstrap csak a
   panelen KIVULI kattintasra zar, teljes kepernyon pedig nincs "kivul".
   ========================================================================= */
@media (max-width: 767px) {

  /* --- 43a. a kategoriafa: teljes kepernyos panel, ha nyitva ------------- */
  .cat-menu .dropdown-menu { display: none; }                 /* a 42h !important-ja helyett */
  .cat-menu .floating-menu.open > .dropdown-menu,
  .cat-menu .dropdown.open > .dropdown-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; min-width: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 0 24px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #FFFFFF !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    z-index: 3000 !important;
    float: none !important;
  }
  /* a panel fejlece (a tervlap sotetkek savja) */
  .cat-menu .open > .dropdown-menu::before {
    content: "Kateg\00f3rie";
    display: block;
    position: sticky; top: 0; z-index: 2;
    background: var(--gjb-kek);
    color: #FFFFFF;
    font-size: 20px; font-weight: 900;
    padding: 20px 18px;
  }
  /* a JS altal beszurt bezaro gomb — a fejlec jobb szelen */
  .cat-menu .open > .dropdown-menu > li.arc-close {
    position: fixed; top: 12px; right: 14px; z-index: 3;
    display: block !important; margin: 0 !important; padding: 0 !important;
    float: none !important; width: auto !important;
  }
  .cat-menu .open > .dropdown-menu > li.arc-close > a {
    display: flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    background: rgba(255,255,255,.18); color: #FFFFFF !important;
    font-size: 20px; font-weight: 900; text-decoration: none !important;
    padding: 0 !important; margin: 0 !important; line-height: 1;
  }
  /* a sorok: level-1 kategoriak, chevronnal ha van alkategoria */
  .cat-menu .open > .dropdown-menu > li {
    display: block !important; float: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important; position: relative;
    border-bottom: 1px solid var(--gjb-keret);
  }
  .cat-menu .open > .dropdown-menu > li > a {
    display: block !important;
    padding: 15px 44px 15px 18px !important;
    font-size: 16px !important; font-weight: 800 !important;
    color: var(--gjb-kek) !important; text-decoration: none !important;
    white-space: normal !important; line-height: 1.3;
    background: transparent !important;
  }
  .cat-menu .open > .dropdown-menu > li.parent > .mmenu-toggle {
    position: absolute; right: 0; top: 0;
    width: 52px; height: 52px;
    display: flex !important; align-items: center; justify-content: center;
    cursor: pointer; z-index: 1;
  }
  .cat-menu .open > .dropdown-menu > li.parent > .mmenu-toggle::before {
    content: "\f054";                        /* chevron-right */
    font-family: FontAwesome; font-size: 13px; color: var(--gjb-halvany);
  }
  /* alkategoriak (a mmenu-toggle nyitja): behuzva, halvanyabb */
  .cat-menu .open > .dropdown-menu ul.level-2 {
    position: static !important; float: none !important; width: auto !important;
    margin: 0 !important; padding: 0 0 6px 0 !important;
    background: var(--gjb-jeges-vl) !important; border: none !important; box-shadow: none !important;
  }
  .cat-menu .open > .dropdown-menu ul.level-2 > li { display: block !important; float: none !important; width: auto !important; margin: 0 !important; }
  .cat-menu .open > .dropdown-menu ul.level-2 > li > a {
    display: block !important; padding: 11px 18px 11px 30px !important;
    font-size: 14.5px !important; font-weight: 600 !important;
    color: var(--gjb-szoveg) !important; text-decoration: none !important; white-space: normal !important;
  }
  /* a panel nyitva: a lap mogotte ne gorogjon el */
  body:has(.cat-menu .open) { overflow: hidden; }

  /* --- 43b. kategoriaoldal: cim a morzsa utolso elemebol --------------- */
  body.category-page .breadcrumb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0 6px 0 !important; }
  body.category-page .breadcrumb > li { display: block; padding: 0 !important; }
  body.category-page .breadcrumb > li::before { display: none !important; }       /* a "/" elvalaszto */
  body.category-page .breadcrumb > li:not(.active) a { font-size: 13px; color: var(--gjb-halvany) !important; font-weight: 600; }
  body.category-page .breadcrumb > li.active,
  body.category-page .breadcrumb > li.active span {
    font-size: 24px !important; font-weight: 900 !important;
    color: var(--gjb-kek) !important; line-height: 1.2;
  }

  /* --- 43c. a szuro-gomb kiemelve, a szuro-oldalsav kartyaban ----------- */
  body.category-page #show-filters {
    background: var(--gjb-kek) !important; color: #FFFFFF !important;
    border: none !important; font-weight: 900 !important;
  }
  body.category-page .shop-sidebar:not(.hidden-xs) {
    background: #FFFFFF; border-radius: 20px; padding: 16px 16px 6px 16px;
    margin: 0 0 14px 0; box-shadow: 0 12px 28px -20px rgba(0, 59, 111, .40);
  }
  body.category-page .shop-sidebar:not(.hidden-xs) .category-left-menu { box-shadow: none; padding: 0 0 8px 0; }
}

/* --- 43d. a kategoria-panel bezaro gombja a fejlec jobb szelen (v1.43.1)
   A JS altal beszurt li-re a ".dropdown-menu > li { position: relative }"
   altalanos szabaly hatott, a "fixed" alulmaradt — !important-tal. */
@media (max-width: 767px) {
  .cat-menu .open > .dropdown-menu > li.arc-close {
    position: fixed !important; top: 11px !important; right: 12px !important;
    border: none !important; background: transparent !important;
  }
}

/* --- 43e. a szuro-oldalsav mobilon: alulrol feljovo lap (v1.43.1) --------
   A "Filter" gomb a .shop-sidebar "hidden-xs" osztalyat kapcsolja. Nyitva a
   sav a cim ala folyt, es a hosszu lista ala szoritotta a gombot — bezarni
   csak gorgetes utan lehetett. A tervlap szerint ez egy alulrol feljovo lap:
   rogzitett, gorgetheto, fent "huzo" csikkal es x gombbal (theme.js v1.2.0). */
@media (max-width: 767px) {
  body.category-page .shop-sidebar:not(.hidden-xs) {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: auto !important;
    margin: 0 !important;
    padding: 34px 16px 24px 16px !important;
    background: #FFFFFF !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -12px 32px -12px rgba(0, 59, 111, .45) !important;
    z-index: 2500 !important;
    float: none !important;
  }
  body.category-page .shop-sidebar:not(.hidden-xs)::before {
    content: "";
    position: absolute; top: 10px; left: 50%;
    width: 44px; height: 5px; margin-left: -22px;
    border-radius: 999px; background: var(--gjb-keret);
  }
  body.category-page .shop-sidebar:not(.hidden-xs) > .arc-close {
    position: absolute; top: 8px; right: 12px;
    display: flex !important; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--gjb-jeges); color: var(--gjb-kek) !important;
    font-size: 18px; font-weight: 900; text-decoration: none !important; z-index: 2;
  }
  body:has(.category-page .shop-sidebar:not(.hidden-xs)) { overflow: hidden; }
  body.category-page .shop-sidebar:not(.hidden-xs) .category-left-menu { box-shadow: none; padding: 0; }
}

/* --- 43f. a kategoria-panel bezarasa: a fejlec-sav maga a gomb (v1.43.2) -
   A JS-sel beszurt "fixed" li a fixed panelen belul nem jelent meg
   megbizhatoan. Helyette a sticky fejlec-sav (::before) jobb szelen a CSS
   rajzol egy feher x-et (beagyazott SVG), es a theme.js a sav teljes
   szelessegen (felso 80 px) kattintasra zarja a panelt — gorgetes kozben is
   fent marad, mert a sav sticky. */
@media (max-width: 767px) {
  .cat-menu .open > .dropdown-menu > li.arc-close { display: none !important; }
  .cat-menu .open > .dropdown-menu::before {
    cursor: pointer;
    padding-right: 64px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='19' fill='rgba(255,255,255,0.18)'/><path d='M13 13 L27 27 M27 13 L13 27' stroke='white' stroke-width='3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
}

/* --- 43h. attekintes mobilon: a kosar-tartalom tablazat oszlopai (v1.43.3)
   A "1 x | nev | ar" tablazatban a nev keskeny oszlopba szorult es szavankent
   tort. A darabszam es az ar kapjon annyit, amennyit ker (1% + nowrap), a nev
   a maradekot. */
@media (max-width: 767px) {
  body.checkout-page .review-form .box table { table-layout: auto !important; width: 100% !important; }
  body.checkout-page .review-form .box table td { padding: 8px 4px !important; vertical-align: top; font-size: 14px; }
  body.checkout-page .review-form .box table td:first-child:not(.checkbox) { width: 1% !important; white-space: nowrap !important; }
  body.checkout-page .review-form .box table td:last-child:not(.checkbox) { width: 1% !important; white-space: nowrap !important; text-align: right; font-weight: 800; }
  body.checkout-page .review-form .box table td:not(:first-child):not(:last-child) { width: auto !important; white-space: normal !important; word-break: normal; }
}

/* --- 43i. kategoriaoldal mobilon: az ures felso eszkoztar (v1.43.4) -----
   MERVE: a Filter/Usporiadanie gombsor (visible-xs) es a termekracs kozott a
   ".toolbar-top" (a desktop rendezes/lapozas savja) ULT 58 px magasan + 16 px
   also margoval, mobilon URESEN (a tartalma hidden-xs). Ezert volt 74 px
   ures res. Mobilon nem kell: a rendezest a mobil gombsor adja. */
@media (max-width: 767px) {
  body.category-page .toolbar-top { display: none !important; }
}

/* --- 43j. kategoriaoldal mobilon: legzet a gombsor alatt, lapozo (v1.43.5)
   A toolbar-top eltuntetese utan a gombsor es a racs osszeert; a lapozo
   szamai ket sorba tortek ("1. stranka" hosszu), a kovetkezo-oldal gomb pedig
   balra tapadt. */
@media (max-width: 767px) {
  body.category-page .mobile-category-nav { margin-bottom: 14px !important; }
  body.category-page .toolbar-bottom { text-align: center; padding: 8px 0 4px 0; }
  body.category-page .toolbar-bottom .btn { width: 100%; margin-bottom: 14px; }
  body.category-page .toolbar-bottom .pagination,
  body.category-page .toolbar-bottom ul {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px;
    margin: 0 !important; padding: 0 !important; list-style: none;
  }
  body.category-page .toolbar-bottom .pagination > li,
  body.category-page .toolbar-bottom ul > li { display: block !important; float: none !important; margin: 0 !important; }
  body.category-page .toolbar-bottom .pagination > li > a,
  body.category-page .toolbar-bottom .pagination > li > span {
    min-width: 40px; height: 40px; padding: 0 12px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 999px !important; font-size: 14px !important;
  }
}

/* --- 43k. a lapozo egy sorban (v1.43.6) ----------------------------------
   Szerkezet: .pagination-wrapper > a.btn (kovetkezo oldal) + ul.pagination-pages
   > li > a (az aktiv: a.active "1. stranka"). A flex mukodott, de a "wrap" az
   5. szamot uj sorba tette, mert az "1. stranka" felirat szeles. Egy sor,
   kisebb elemek: ~80 + 4x36 + resek = ~254 px, belefer a 300-as kartyaba. */
@media (max-width: 767px) {
  body.category-page .pagination-wrapper { padding: 0 !important; }
  body.category-page .pagination-wrapper > a.btn { width: 100%; margin: 0 0 12px 0 !important; }
  body.category-page ul.pagination-pages {
    display: flex !important; flex-wrap: nowrap !important; justify-content: center;
    gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none;
  }
  body.category-page ul.pagination-pages > li { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  body.category-page ul.pagination-pages > li > a {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 36px; height: 38px; padding: 0 10px !important;
    border-radius: 999px !important; font-size: 13.5px !important; font-weight: 800;
    white-space: nowrap; margin: 0 !important;
  }
}

/* =========================================================================
   44. RETEG — MOBIL FEJLEC: A KET IKON EGY VONALBAN (v1.44.0, 2026-09-07)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   MERVE (390 px, Chrome): a kosar-ikon jobb szele PONTOSAN 390 = a kepernyo
   szele (a tarto "ul.mobile-menu.pull-right" jobb margo nelkul lebeg jobbra),
   es 11 px-el lejjebb ul, mint a felhasznalo-ikon (20 vs 31), mert a ket
   "li" inline-block, es elterő alapvonalra esik. Szerkezet:
     ul.mobile-menu.pull-right > li.menu-blue > a  (felhasznalo, kosar)
   Flex-konteneer: egy alapvonal, 8 px koz, 12 px jobb margo.
   ========================================================================= */
@media (max-width: 767px) {
  ul.mobile-menu {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    list-style: none;
    height: auto !important;
  }
  ul.mobile-menu > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
  }
  ul.mobile-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin: 0 !important;
  }
}

/* =========================================================================
   45. RETEG — MOBIL FOOLDAL A TERVLAP SZERINT (v1.45.0, 2026-09-07)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Tervlap: design/MobilFooldal.dc.html
   A dev fooldal (hero + buborekok + korhintak) mobilon mar nagyjabol a terv
   szerint all; harom dolgot igazitunk:
     - a termekkartya kepdoboza a desktop 196 px-es magassagat orokolte a
       ~150 px szeles mobil kartyan (allo teglalap, nagy ures felso resz);
     - a hero belso sorrendje: a terven a termek-korok a cim ALATT, a gombok
       a korok alatt allnak (itt: gombok, majd korok);
     - a blokk-cimek ("Akciove produkty", "Novinky") mobil merete.
   A "Mind ->" link a blokk-cimek mellett a HTML-ben nincs — sablon kellene.
   ========================================================================= */
@media (max-width: 767px) {
  /* --- 45a. kartya kepdoboza es kepe aranyos a keskeny kartyahoz --------- */
  .product > div > .product-image { height: 150px !important; padding: 10px !important; border-radius: 16px !important; }
  .product .product-image img { width: 128px !important; height: 128px !important; }
  .product { padding: 12px !important; border-radius: 20px !important; }
  .product .product-name { font-size: 14.5px !important; min-height: 0 !important; }

  /* --- 45b. hero: korok a cim ala, gombok alulra ------------------------ */
  .arculat-hero-box { display: flex; flex-direction: column; }
  .arculat-hero-badge   { order: 1; }
  .arculat-hero-box > h1, .arculat-hero-box > h2, .arculat-hero-box > .arculat-hero-title { order: 2; }
  .arculat-hero-lead    { order: 3; }
  .arculat-hero-circles { order: 4; margin: 6px 0 16px 0 !important; }
  .arculat-hero-actions { order: 5; }

  /* --- 45c. blokk-cimek ------------------------------------------------- */
  .slider-title { font-size: 20px !important; margin: 18px 0 10px 0 !important; }
}

/* --- 45d. hero-sorrend JAVITAS: a korok a szoveg-doboz TESTVERE (v1.45.1)
   DOM: .arculat-hero-box > .arculat-hero-text (badge, h2.title, lead, actions)
                          + .arculat-hero-circles
   A 45b. order-je nem hatott, mert a gombok a szoveg-dobozon BELUL, a korok
   pedig mellette allnak. A szoveg-doboz "display: contents"-szel atlatszo lesz,
   igy a box flex-oszlopaban mind az ot elem egy szinten rendezheto:
   badge 1, cim 2, alcim 3, korok 4, gombok 5 — a tervlap sorrendje. */
@media (max-width: 767px) {
  .arculat-hero-text { display: contents !important; }
  .arculat-hero-title { order: 2; }
}


/* =========================================================================
   46. RETEG — SZURO-JELOLOK LATHATOVA TETELE (v1.46.0, 2026-09-07; v1.46.1: a
   szelektor "ul[id^=FilterModel] > li" — a keszleten-szuro li-je osztaly nelkuli)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Oldal: kategoria, bal oldali szuropanel (.category-left-menu; li.age-filter,
   li.marka-filter, li.manufacturer-filter, li.mesehos-filter, li.gender-filter).
   HIBA (meres, 2026-09-07): a sablon (template.css:934-957) a nativ jelolot
   elrejti (display:none), es a cimke ::before elemere FEHER jelolo-kepet rajzol
   (images/checkbox-unchecked_white.png, 30x25, float, atlatszo hatter) — ez a
   regi SOTET oldalsavhoz keszult. Az arculat FEHER paneljen a feher kep
   lathatatlan, csak a ramutataskor megjeleno halvany hatteren tunik elo. A
   cimke flex-elrendezeseben (10. reteg) a float-olt ::before flex-elem lett, a
   szoveg es a darabszam pedig kulon elemkent tordelodott ("0 a viac / rokov").
   A li.gender-filter ("Pre dievca a chlapca") a 10. reteg felsorolasabol
   kimaradt: inline-block, kek link-szin, 0 padding — a tobbitol elutott.
   MEGOLDAS: minden "*-filter" sor egysegesen (attributum-szelektor), a jelolo
   ugyanaz a CSS-rajzolt arculati doboz, mint a penztar 40g. retegeben (feher,
   keret, lekerekites; pipalva narancs + FontAwesome pipa), abszolut pozicioban
   a cimke bal szelen; a szoveg es a darabszam egy sorban, a szam jobbra. A
   rejtett input :checked allapota tovabbra is a "+ label" szelektoron at
   vezerel, a sablon JS-e nem valtozik.
   ========================================================================= */
.category-left-menu ul[id^="FilterModel"] > li {
  list-style: none;
  margin: 0 0 2px 0;
  padding: 0;
}
.category-left-menu ul[id^="FilterModel"] > li label.input-label {
  position: relative !important;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 6px 10px 6px 38px !important;
  border-radius: 12px;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: var(--gjb-szoveg) !important;
  cursor: pointer;
  overflow: visible !important;
}
.category-left-menu ul[id^="FilterModel"] > li label.input-label:hover {
  background: var(--gjb-jeges-vl);
  color: var(--gjb-narancs) !important;
}
.category-left-menu ul[id^="FilterModel"] > li input[type=checkbox] + label.input-label::before,
.category-left-menu ul[id^="FilterModel"] > li input[type=checkbox]:checked + label.input-label::before {
  content: "" !important;
  float: none !important;
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: #FFFFFF !important;
  border: 2px solid var(--gjb-keret) !important;
  border-radius: 6px !important;
  font-family: FontAwesome;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: #FFFFFF;
  transition: background .15s ease, border-color .15s ease;
}
.category-left-menu ul[id^="FilterModel"] > li label.input-label:hover::before {
  border-color: var(--gjb-narancs) !important;
}
.category-left-menu ul[id^="FilterModel"] > li input[type=checkbox]:checked + label.input-label::before {
  content: "\f00c" !important;             /* pipa */
  background: var(--gjb-narancs) !important;
  border-color: var(--gjb-narancs) !important;
}
/* a darabszam: jobbra, egy sorban, halvanyabb */
.category-left-menu ul[id^="FilterModel"] > li label.input-label > span {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--gjb-halvany);
}


/* =========================================================================
   47. RETEG — TERMEKRACS HEZAGGAL, KETSOROS AKCIOS AR, KESZLETEN-SZURO
   (v1.47.0, 2026-09-07; v1.47.1: a belso doboz min-height 100%, az akcios arsor 62 px; v1.47.2: a regi ar margoja 0)
   Fajl: hrackypredeti.sk/default/css/arculat2026.css
   Oldal: kategoria- es akcios lista (ul.products > li.col-md-3.product),
   bal oldali szuropanel (#FilterModel > h4 + ul#FilterModelothers…).

   MERES (2026-09-07, 1100 / 1366 / 1440 px, akcios es kategoria-oldal):
   a) A feher kartya MAGA a li (bg feher, radius 28, arnyek, padding 18), es a
      li-k HEZAG NELKUL ernek ossze (390..602, 602..814, …): a Bootstrap
      oszlop-padding (ami a rest adta volna) a kartya belso margoja lett. A
      tervlapon a kartyak kozott res van. Semmilyen korabbi szabaly nem ad rest.
   b) Az akcios arsor (.price-box: .price + .old-price, nowrap, 56 px gombhely)
      TULCSORDUL: tartalom 197-217 px, hely 134-172 px -> a regi ar a gomb ala
      lóg, a kartya szelen levagva.
   c) A keszleten-szuro ("Ostatne vlastnosti / V zasobe"): a cimsor egy
      panel nelkuli sima <h4> kozvetlenul a #FilterModel formban, amire a
      sablon (template.css:1003-1011) KEK hatteret ad (#1782e6); a li osztalya
      URES (class=""), ezert a 46. reteg "*-filter" szelektora nem fedte — a
      46. reteg szelektorai ezert "ul[id^=FilterModel] > li"-re bovultek
      (v1.46.1), ez a reteg csak a cimsort igazitja a tobbihez.
   ========================================================================= */

/* --- 47a. a racs: 4 oszlop (md+), 3 oszlop (sm), valodi hezaggal --------- */
@media (min-width: 768px) {
  .category-products ul.products,
  ul.products:not(.carousel-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .category-products ul.products > li.product,
  ul.products:not(.carousel-wrapper) > li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 14px !important;        /* 18 -> 14: a 168 px-es termekkep igy is befer */
    min-width: 0;
  }
  /* a kartya belso doboza kitolti a racscellat, igy az arsor es a gomb minden
     kartyan az aljan all (a 29f "height:auto" a fooldali korhintanak szolt) */
  .category-products ul.products > li.product > div,
  ul.products:not(.carousel-wrapper) > li.product > div {
    height: auto !important;          /* v1.47.1: fix 100% helyett MIN 100% — igy a sor a tartalommal (akcios 2 soros ar) egyutt no */
    min-height: 100% !important;
  }
}
@media (min-width: 992px) {
  .category-products ul.products,
  ul.products:not(.carousel-wrapper) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- 47b. akcios ar: a regi ar KULON SORBAN, a friss ar alatta ------------
   A DOM-sorrend .price, .old-price; a column-reverse a regi arat teszi
   felulre. A friss ar sora 46 px magas, igy a kozepe egybeesik a 46 px-es
   kosargomb kozepevel (19i. reteg). */
.product .price-box:has(.old-price) {
  min-height: 62px;                  /* v1.47.1: 16 px regi ar + 46 px friss ar */
  flex-shrink: 0;                    /* a kartya flex-oszlopa ne nyomja ossze */
  flex-direction: column-reverse !important;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 0 !important;
}
.product .price-box:has(.old-price) .price {
  display: flex;
  align-items: center;
  min-height: 46px;
}
.product .price-box:has(.old-price) .old-price {
  display: block;
  line-height: 1.2;
  margin: 0 !important;             /* v1.47.2: a -4 px also margo 4 px-szel feljebb tolta a friss arat a gombhoz kepest */
}

/* --- 47c. a keszleten-szuro cimsora ugyanaz, mint a tobbi szuro cime ------ */
.category-left-menu #FilterModel > h4,
.category-left-menu form > h4 {
  background: transparent !important;
  color: var(--gjb-kek) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 5px !important;
  margin: 0 0 10px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: left;
}


/* --- 47d. MOBIL: a ket oszlop kozott is legyen hezag (v1.47.3, 2026-09-07) ---
   Meres (500 px, akcios lista): ul.products display=block, a ket li.col-xs-6
   kartya 15..250 es 250..485 — hezag nelkul osszeernek, ugyanugy, mint
   desktopon a 47a elott. A 47a racsa csak 768 px-tol elt. Itt ugyanaz a racs
   2 oszloppal, 10 px kozzel; a mobil kartya-padding (2223. sor: 12px 12px 14px)
   es a kosargomb mobil-pozicioja (2237/2258/2279/2730) valtozatlan marad. */
@media (max-width: 767px) {
  .category-products ul.products,
  ul.products:not(.carousel-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .category-products ul.products > li.product,
  ul.products:not(.carousel-wrapper) > li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
  }
  .category-products ul.products > li.product > div,
  ul.products:not(.carousel-wrapper) > li.product > div {
    height: auto !important;
    min-height: 100% !important;
  }
}


/* =========================================================================
   48. RETEG — HAROM SHOP, EGY CSS: shop-fuggetlen lablec es menu (v1.48.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos a hrackypredeti.sk,
   igrackezadjecu.hr es jucariijucarii.ro shopon)
   A horvat dev-en derult ki (2026-09-08):
   a) a lablec e-mail cime a CSS-be volt egetve ("info@hrackypredeti.sk", 21c)
      -> a horvaton a szlovak cim jelent meg. A <html lang> nem hasznalhato
      (a SK es a HR is "hu"), a lablec-blokk a CMS adatbazisabol jon (attributum
      nem teheto ra), a lablec-logo src-je relativ. A FEJLEC-logo src-je viszont
      abszolut es shop-domaines, ezert body:has(.navbar-brand img[src*="<shop>/"])
      valasztja ki a shopot (48a); a szlovak marad az alapertelmezett (21c).
   b) a kiemelt menuelemek (Ujdonsagok / Akcios) a SZLOVAK kategoria-id-kre
      (li.cat-584 / cat-585) szoltak — a horvaton a cat-9 a "novosti", a
      szlovakon a "hracky pre chlapcov", tehat id-alapon NEM lehet kozos.
      Itt a link ALDOMAINJE dont: najnovsie-hracky / novosti / jucarii-noutati
      es akciove-hracky / igracke-na-akciji / jucarii-ieftine. Az elvalaszto a
      2. elem utan all (mindharom shopon az elso ketto a kiemelt; a romanon a
      sorrend forditott, ezert nem a tipus, hanem a hely szamit).
   c) a horvat/roman lablec "Jeste li znali / Stiati ca" dobozaban a tudta.png
      (teherauto+pipa, feher vonalas rajz) a szoveg ala csuszott — a szlovakon
      nincs ilyen kep; a user kerte: le. Mindenhol rejtve.
   ========================================================================= */

/* --- 48a. lablec e-mail: shop szerint (v1.48.1) ------------------------
   A lablec-blokk a CMS adatbazisabol jon (nem a base sablonbol), oda nem
   tehetunk attributumot; a lablec-logo src-je relativ. A FEJLEC-logo src-je
   viszont abszolut es shop-domaines (https://<shop>/media/site/logo.*), igy a
   body:has() valasztja ki a shopot. A szlovak marad az alapertelmezett (21c). */
body:has(.navbar-brand img[src*="igrackezadjecu.hr/"]) footer .footer-top-links .text-right::after { content: "info@igrackezadjecu.hr"; }
body:has(.navbar-brand img[src*="jucariijucarii.ro/"]) footer .footer-top-links .text-right::after { content: "info@jucariijucarii.ro"; }

/* --- 48b. kiemelt menuelemek a link aldomainje alapjan ----------------- */
#mainNav > li > a[href^="https://najnovsie-hracky."],
#mainNav > li > a[href^="https://novosti."],
#mainNav > li > a[href^="https://jucarii-noutati."] {
  background: #FFF0E6; color: var(--gjb-narancs) !important; font-weight: 800;
}
#mainNav > li > a[href^="https://akciove-hracky."],
#mainNav > li > a[href^="https://igracke-na-akciji."],
#mainNav > li > a[href^="https://jucarii-ieftine."] {
  background: #FDEAEA; color: var(--gjb-piros) !important; font-weight: 800;
}
#mainNav > li:hover > a[href^="https://najnovsie-hracky."],
#mainNav > li:hover > a[href^="https://novosti."],
#mainNav > li:hover > a[href^="https://jucarii-noutati."] { background: var(--gjb-narancs); color: #FFFFFF !important; }
#mainNav > li:hover > a[href^="https://akciove-hracky."],
#mainNav > li:hover > a[href^="https://igracke-na-akciji."],
#mainNav > li:hover > a[href^="https://jucarii-ieftine."] { background: var(--gjb-piros); color: #FFFFFF !important; }
/* az elvalaszto a masodik (utolso kiemelt) elem alatt */
#mainNav > li:nth-child(2) { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--gjb-jeges); }

/* az ikonok: ugyanaz a ket SVG, mint a 26. retegben (csillag / arcimke) */
#mainNav > li > a[href^="https://najnovsie-hracky."] > span:first-child,
#mainNav > li > a[href^="https://novosti."] > span:first-child,
#mainNav > li > a[href^="https://jucarii-noutati."] > span:first-child,
#mainNav > li > a[href^="https://akciove-hracky."] > span:first-child,
#mainNav > li > a[href^="https://igracke-na-akciji."] > span:first-child,
#mainNav > li > a[href^="https://jucarii-ieftine."] > span:first-child {
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#mainNav > li > a[href^="https://najnovsie-hracky."] > span:first-child,
#mainNav > li > a[href^="https://novosti."] > span:first-child,
#mainNav > li > a[href^="https://jucarii-noutati."] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7D2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
#mainNav > li > a[href^="https://akciove-hracky."] > span:first-child,
#mainNav > li > a[href^="https://igracke-na-akciji."] > span:first-child,
#mainNav > li > a[href^="https://jucarii-ieftine."] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D31010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

/* --- 48c. a "tudta" kep (teherauto + pipa) sehol ne latszodjon ----------- */
img[src*="tudta.png"] { display: none !important; }


/* =========================================================================
   49. RETEG — A PENZNEM KISEBB BETUVEL A KARTYAKON (v1.49.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A horvat dev-en: "11,43 EUR" — a haromkarakteres, nagybetus penznem a
   25 px-es arral egyutt nem fer el a kosargomb (46 px + 12 px koz) elott, es
   a gomb ala csuszik. A sablonokban a penznem eddig a szam mellett, ugyanabban
   a <span class="price">-ben allt (Digi::getLangText("Ft") -> Eur / EUR / Lei),
   ezert CSS-bol nem volt celozhato. A 4 kartya-sablonban (product_item,
   product_recommended_item, special_product_item, new_product_item) a penznem
   most <span class="currency">-be kerult; itt kap kisebb betut.
   ========================================================================= */
.product .price .currency {
  font-size: 0.58em;          /* 25 px-es arnal ~14.5 px */
  font-weight: 800;
  margin-left: 2px;           /* v1.49.1: kozelebb a szamhoz (a user kerese) */
  word-spacing: normal;
  letter-spacing: 0;
  vertical-align: baseline;
}
.product .old-price .currency {
  font-size: 0.85em;
  margin-left: 1px;
  word-spacing: normal;
}
/* a szam es a penznem egy sorban; a sablon szokoze a szam es a penznem kozott
   a word-spacing-gel szukul (v1.49.1: a ket elem kozott igy ~3 px marad) */
.product .price { white-space: nowrap; word-spacing: -0.28em; }
.product .old-price { word-spacing: -0.2em; }
@media (max-width: 767px) {
  .product .price .currency { font-size: 0.6em; }
}


/* =========================================================================
   50. RETEG — AZ ALKATEGORIA-PANEL LEVALIK A HATTERROL (v1.50.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A horvat dev-en: a jobb oldali panel (ul.level-2) feher, arnyek es keret
   nelkul all a FEHER termekkartyak es a halvany jeges hatter felett — a
   szeme osszeolvad velük (a user: "picit jobban el kene valasztani a
   hatterrol"). A theme.js v1.3.0 ota a panel nem a lista teljes
   magassagaban all, hanem onallo "kartyakent" a ramutatott kategoria
   mellett, ezert kell neki sajat arnyek es keret. A bal lista 2 px-es jeges
   elvalasztoja marad.
   ========================================================================= */
#mainNav > li > ul.dropdown-menu.level-2 {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 59, 111, 0.10) !important;
  border-left: 2px solid #EEF6F9 !important;
  border-radius: 0 24px 24px 0 !important;
  box-shadow:
    0 3px 10px rgba(0, 59, 111, 0.10),
    0 22px 48px rgba(0, 59, 111, 0.22) !important;
}
/* a panel elemei: a szoveg egy arnyalattal sotetebb, hogy a feher alapon uljon */
#mainNav ul.level-2 > li > a { color: var(--gjb-kek) !important; }
#mainNav ul.level-2 > li > a:hover { background: #FFF0E6 !important; color: var(--gjb-narancs) !important; }


/* =========================================================================
   51. RETEG — AZ ALKATEGORIA-PANEL A TERVLAP SZERINT: JEGES KEK "LIQUID GLASS"
   (v1.51.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A user a tervlap kepet mutatta: a jobb panel jeges kek alapon all, a
   ramutatott alkategoria FEHER kartya. Keres: ez legyen az alapszin, rajta
   1%-os atlatszosag, alatta "liquid" (uveg) effekt. Itt: a --gjb-jeges
   (#F4FBFD, a tervlap panel-szine; v1.51.1) 99%-os fedessel, backdrop-filter elmosassal (a mogottes kartyak
   1%-ban, elmosva derengenek at), uvegszeru vilagos szegellyel es belso
   fenycsikkal; a 50. reteg arnyeka marad. Ahol nincs backdrop-filter (regi
   bongeszo), a 99%-os szin onmagaban is elvalaszt.
   ========================================================================= */
#mainNav > li > ul.dropdown-menu.level-2 {
  background: rgba(244, 251, 253, 0.86) !important;      /* --gjb-jeges-vl (#F4FBFD), 14% atlatszo — v1.53.1: az 1% szemmel lathatatlan volt, a user kerte, hogy latsszon az uveg-effekt */
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.85) !important; /* uveg-el */
  border-left: 2px solid #D6EFF6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),                /* felso fenycsik */
    0 3px 10px rgba(0, 59, 111, 0.08),
    0 22px 48px rgba(0, 59, 111, 0.20) !important;
}
/* a terv szerint: a ramutatott alkategoria FEHER kartya, narancs felirat */
#mainNav ul.level-2 > li > a { color: var(--gjb-kek) !important; background: transparent !important; }
#mainNav ul.level-2 > li > a:hover {
  background: #FFFFFF !important;
  color: var(--gjb-narancs) !important;
  box-shadow: 0 2px 8px rgba(0, 59, 111, 0.08);
}


/* =========================================================================
   52. RETEG — AZ ALKATEGORIA-PANEL: KIS DOBOZ, CSUSZKA NELKUL (v1.52.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A user: "nem tetszik, hogy csuszka van, es nem tetszik, hogy a tetejetol az
   aljaig er, az elobb jobb volt, hogy kis boxban maradt". A 27. reteg
   max-height:560px + overflow-y:auto-ja adta a gorgetosavot; itt a panel a
   tartalom teljes magassagat veszi fel, gorgetosav nelkul. A helyzetet a
   theme.js v1.3.3 adja (a ramutatott kategoria mellett, a kepernyon tartva).
   Az arnyek (50/51. reteg) a lista jobb szelere vetult (a panel 14 px-szel a lista
   ala nyulik) — a user kerte, hogy le: box-shadow none, a jeges hatter + uveg-el
   valaszt el. Csak desktopon; mobilon (43. reteg) a teljes kepernyos panel marad.
   ========================================================================= */
@media (min-width: 992px) {
  #mainNav > li > ul.dropdown-menu.level-2 {
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    box-shadow: none !important;      /* a user: az arnyek a bal lista szelere vetult — le vele */
  }
}

/* =========================================================================
   53. RETEG — VEKONY, HALVANY KERET AZ ALKATEGORIA-PANELEN (v1.53.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   Az arnyek levetele (52. reteg) utan a jeges panel a jeges lap-hatterrel es a
   feher kartyakkal egybeolvadt; az 51. reteg uveg-ele FEHER volt, ami a vilagos
   hatteren lathatatlan. A user: "egy vekony vonalat a keretre, halvanyan" ->
   1 px halvany kek keret (a --gjb-keret #B8E4EF vilagositva), a bal oldali
   2 px-es jeges elvalaszto marad, a belso fenycsik marad.
   ========================================================================= */
@media (min-width: 992px) {
  #mainNav > li > ul.dropdown-menu.level-2 {
    border: 1px solid #CDE8F1 !important;
    border-left: 2px solid #D6EFF6 !important;
  }
}


/* =========================================================================
   54. RETEG — A KIVALASZTOTT SZUROK DOBOZA ES A LAP FEHER KARTYAJA (v1.54.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A HR elesen tunt fel (a user: "ezek direkt sarkosak?"):
   a) a szurt kategoria-lapon a ".category-filter" doboz a sablon-CSS-bol
      (template.css:362) SZURKE (#e7e7e7), sarkos, 10 px paddinggel — az
      arculatban ez az egyetlen szurke, egyenes sarku felulet a lapon. Az
      arculat feher kartyat ad neki, jeges kerettel es kerek sarkokkal; a
      torlo-gomb az arculati pirosat, a szuro-cimkek pedig pirula-format kapnak.
   b) a lap fo feher doboza (#main-wrapper > .container, template.css:348)
      minden sarka egyenes. A kartyas arculathoz a felso ket sarka lekerekitve
      (alul a lablec csatlakozik hozza) — a termek-, kosar- es penztaroldalon
      ez a doboz atlatszo (3159/3965/4170. reteg), ott nincs teendo.
   ========================================================================= */

/* --- 54a. a lap fo feher doboza: lekerekitett felso sarkok ----------------- */
#main-wrapper > .container {
  border-radius: 24px 24px 0 0;
}
@media (max-width: 767px) {
  #main-wrapper > .container { border-radius: 18px 18px 0 0; }
}

/* --- 54b. "Izabrani filteri" (kivalasztott szurok) doboz ------------------- */
.category-filter {
  background: #FFFFFF !important;
  border: 1px solid var(--gjb-keret);
  border-radius: 20px !important;
  padding: 16px 16px 14px !important;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 59, 111, 0.05);
}
.category-filter h5.heading-primary,
.category-filter h5 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gjb-kek) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* egy-egy aktiv szuro: pirula, a szoveg es az x egy sorban */
.category-filter .category-filter-item > div {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: var(--gjb-jeges-vl);
  border: 1px solid var(--gjb-keret);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 8px !important;
}
.category-filter .category-filter-item button {
  color: var(--gjb-szoveg) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: left;
  line-height: 1.3;
}
.category-filter .category-filter-item label {
  margin: 0 0 0 auto !important;
  cursor: pointer;
  color: var(--gjb-halvany) !important;
}
.category-filter .category-filter-item label:hover { color: var(--gjb-piros) !important; }

/* "Sve brisati" — az arculati piros, pirula alakban */
.category-filter .clear_flts { margin-top: 4px; }
.category-filter .clear_flts .btn-red {
  background: var(--gjb-piros) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.category-filter .clear_flts .btn-red:hover,
.category-filter .clear_flts .btn-red:focus {
  background: #C51616 !important;
  color: #FFFFFF !important;
}


/* =========================================================================
   55. RETEG — A TERMEKOLDALI GOMBSOR EGY SORBAN, NYELVFUGGETLENUL (v1.55.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   MERES (2026-09-08, 1366 px, ugyanaz a .product-button 394 px-es sav):
     SK: mennyiseg 74 + "ks" 14 + kosargomb 193 + sziv 56 + 3x10 koz = 367  -> EGY sor
     HR: mennyiseg 74 + "Komad" 46 + kosargomb 196 + sziv 56 + 30      = 402  -> a sziv MASODIK sorba tort
   Vagyis nem a stilus tert el a ket shop kozott, hanem a SZOVEG hossza (a
   mertekegyseg-szo es a gomb felirata) — a roman "ADAUGA IN COS" meg hosszabb.
   Megoldas: a sav ne torjon (nowrap), a kosargomb zsugorodhasson (a felirat
   marad egy sorban), a mennyiseg-mezo es a mertekegyseg ne zsugorodjon, a gomb
   belso margoja 32 -> 22 px. Csak desktopon: mobilon a gombsav a kepernyo aljara
   rogzitett sav (42e. reteg), ott a tores a helyes viselkedes.
   ========================================================================= */
@media (min-width: 768px) {
  .product-button {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .product-button > input,
  .product-button > b { flex: 0 0 auto !important; }
  .product-button .btn-lg.btn-primary {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 0 22px !important;
    white-space: nowrap;
  }
  .product-button .btn-lg.btn-red,
  .product-button .btn-red { flex: 0 0 56px !important; }
}

/* =========================================================================
   56. RETEG — A KORHINTA LAPOZO-POTTYEI KATTINTHATOK (v1.56.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A user: "ezek a pottyok egyik shopban sem mukodnek". MERES (fooldal, 1366 px):
     .owl-stage-outer  y=1009..1497   (padding-bottom 26px + margin-bottom -26px
                                       a 23. retegbol: a kartya-arnyek levagasa ellen)
     .owl-dots         y=1478..1498
   -> a stage-outer 19 px-en AT FEDI a pottyokat, es elkapja a kattintast:
   document.elementFromPoint a pott kozepen a .owl-stage-outer-t adja. (A JS-bol
   kuldott klikk mukodott — ezert tunhetett ugy, hogy a lapozas maga jo.)
   MEGOLDAS: a pottysor sajat retegben, a doboz FOLE. A nyilak (.owl-nav) tovabbra
   is rejtve maradnak, a lapozas a pottyokkel es huzassal tortenik.
   ========================================================================= */
.owl-products .owl-dots,
.owl-carousel .owl-dots {
  position: relative;
  z-index: 5;
}
.owl-products .owl-dot,
.owl-carousel .owl-dot { cursor: pointer; }

/* =========================================================================
   57. RETEG — AZ AR-CSUSZKA FOGANTYUJA NE VAGODJON LE (v1.57.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   MERES (kategoria-lap, 1366 px): a csuszka savja 124..334, a JOBB fogantyu
   326..346 (20 px szeles, -8.4 px margoval a savon tul), a tartalmazo
   ".panel.panel-default_" doboz viszont 114..344 es "overflow: hidden"
   (a 22 px-es lekerekites miatt) -> a fogantyu jobb szelebol 2 px LEVAGODIK.
   MEGOLDAS: a sav oldalso margoja 6 -> 14 px, igy mindket fogantyu a dobozon
   belul marad (a savot ez 16 px-szel rovidebbre veszi, a lekerekites marad).
   ========================================================================= */
.filter-price #slider-range-filter,
.filter-price .ui-slider,
#slider-range-filter {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

/* =========================================================================
   58. RETEG — A KATEGORIALISTA ELEMEI KOZOTT 2 PX RES (v1.58.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A tervlapon (design/Kategoriafa.dc.html, 74. sor) a bal lista tartoja
   "gap: 2px"-szel all, azaz minden menupont kozott van egy hajszalnyi res —
   ettol kulonulnek el a kiemelt "Ujdonsagok" (halvany narancs) es "Akcios
   jatekok" (halvany piros) dobozai. A shopban a li-k margo nelkul, 0 px-re
   ertek ossze (merve: a ket kiemelt elem kozott 0 px). Itt potoljuk a 2 px-et.
   A masodik elem alatti 10 px + jeges elvalaszto (48b) valtozatlan marad.
   ========================================================================= */
#mainNav > li + li { margin-top: 2px; }

/* =========================================================================
   59. RETEG — A FO KEP ES A BELYEGKEPEK KOZOTT TOBB LEVEGO (v1.59.0, 2026-09-08)
   Fajl: <shop>/default/css/arculat2026.css (kozos)
   A user: a ket doboz (a fo kep es alatta a kivalasztott, narancs keretes
   belyegkep) osszeer. A 4. reteg 12 px-et adott (.product-thumbnails
   margin-top), ami a 3 px-es belyeg-kerettel egyutt keves: a ket lekerekitett
   sarok gyakorlatilag erintkezik. Itt 22 px-re noveljuk, es a belyegkepek koze
   is teszunk fuggoleges levegot (ha a sor tobb sorba torne).
   ========================================================================= */
.product-thumbnails { margin-top: 22px !important; }
.product-thumbnails .owl-item { padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 767px) {
  .product-thumbnails { margin-top: 16px !important; }
}

/* =========================================================================
   60. RETEG - A NAGY KEP NARANCS KERETE LE, A BELYEG-TERKOZ A JO HELYRE (v1.60.0, 2026-09-09)
   Fajl: <shop>/default/css/arculat2026.css (kozos, mind a 3 shop)
   A user: "ezt a nagykeprol szedd le az aktiv kep narancssarga keretet, mert
   nagyon csunya" - minden shop.

   AZ OK (merve, headless renderrel): a sablon a NAGYKEP-korhintara teszi a
   "product-thumbnails" osztalyt (#productGalleryThumbs), NEM a belyegsorra - a
   belyegsort az owl-thumbs plugin kulon dobozba teszi (.owl-thumbs > button.owl-thumb-item).
   Ezert a 3. reteg ".product-thumbnails .owl-item:hover img" szabalya a NAGY KEPRE
   rakta a 3 px-es narancs keretet, amint az eger rakerult. (A ".current" osztaly nem
   is letezik: az owl "active"-ot es "cloned"-ot ad.) A belyegsor aktiv jelolese
   (30l. reteg: .owl-thumbs button.active) ERINTETLEN marad - ott van ertelme, ott
   mutatja, melyik kepet nezzuk. A 3 px keret HELYE megmarad (atlatszo), igy a kep
   merete es helye nem mozdul el.

   EGYBEN JAVITJA AZ 59. RETEGET: az a "ket doboz kozotti" terkozt szinten a
   .product-thumbnails-ra tette, vagyis a NAGY KEP FOLE (a kartya tetejere), nem a
   belyegsor fole. A valodi koz a belyegsor margin-top-ja (30l. reteg: 16 px).
   ========================================================================= */

/* a) a nagy kepre semmilyen allapotban nem kerul szines keret */
#productGalleryThumbs .owl-item img,
#productGalleryThumbs .owl-item:hover img,
#productGalleryThumbs .owl-item.current img,
#productGalleryThumbs .owl-item.active img {
  border-color: transparent !important;
}

/* b) az 59. reteg terkoze vissza a nagy kep folul (ott csak hezagot csinalt) */
.product-thumbnails { margin-top: 12px !important; }
@media (max-width: 767px) {
  .product-thumbnails { margin-top: 12px !important; }
}

/* c) ... es oda, ahova valo: a nagy kep es a belyegsor koze */
body.product-page .owl-thumbs { margin-top: 22px !important; }
@media (max-width: 767px) {
  body.product-page .owl-thumbs { margin-top: 16px !important; }
}

/* =========================================================================
   61. RETEG - RAGADOS (STICKY) FEJLEC (v1.61.0, 2026-09-09)
   Fajl: <shop>/default/css/arculat2026.css (kozos, mind a 3 shop)
   A user: "ha valaki legorget az oldalon, ez a resz maradjon meg fent, hogy tudjon
   kesobb is keresni, kicsit osszebb is lehet huzni fuggolegesen, a felette levo
   informacios resz nem is kell."

   A SABLON KET KULON NAV-OT HASZNAL:
     nav.navbar-top-info  = a kek informacios sav (Newsletter, Kontakt, GYIK)
     nav.navbar-top       = a FEHER sav (logo + kereso + belepes + kosar)  <- EZ ragad
   Csak a masodikat tesszuk ragadossa: a kek sav igy normalisan kigorog, es gorgetes
   kozben csak a hasznos sav marad a kepernyon.

   MAGASSAG: ~20 px-szel alacsonyabb (logo-padding 10->5, logo 52->46, also 6->2).
   A kereso 46 px-es mezoje valtozatlan marad, az a sav meretezo eleme.

   MIERT CSAK DESKTOPON (>=992px): a mobil kategoria-menu nyitasakor az 5360. sor
   `body:has(.cat-menu .open) { overflow: hidden }` szabalya lep eletbe, ami a
   position:sticky-t kikapcsolna (a sticky ose nem lehet overflow-korlatozott).
   Mobilra kulon merest kell csinalni, ezert oda most nem tesszuk be.
   ========================================================================= */
@media (min-width: 992px) {
  nav.navbar-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
    /* az 51. reteg box-shadow:none-jat kell ulnie, ezert !important */
    box-shadow: 0 4px 14px -8px rgba(0, 59, 111, .45) !important;
  }
  .navbar-top .navbar-brand { padding: 5px 15px !important; }
  .navbar-top .navbar-brand img { max-height: 46px !important; }
  .navbar-top { padding-bottom: 2px !important; }
}

/* --- 61b. a sav TENYLEGES osszehuzasa (v1.61.1, 2026-09-09) ----------------
   Merve: a v1.61.0 utan a feher sav magassaga NEM valtozott (a menusor ugyanott
   maradt), mert a magassagot nem a logo adja — a logo SVG-je alacsonyabb, mint a
   max-height —, hanem a Bootstrap navbar sajat fuggoleges paddingjai
   (.navbar, .navbar-collapse, .navbar-header min-height). Ezeket vesszuk el
   desktopon; a kereso 46 px-es mezoje marad a sav meretezo eleme. */
@media (min-width: 992px) {
  nav.navbar-top { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
  .navbar-top > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  .navbar-top .navbar-collapse { padding-top: 0 !important; padding-bottom: 0 !important; }
  .navbar-top .navbar-header { min-height: 0 !important; }
}

/* --- 61c. A SAV MAGASSAGA: a 92 px-es min-height (v1.61.2, 2026-09-09) -----
   MERVE (headless, getBoundingClientRect): nav.navbar-top h=92, a benne levo
   .navbar-header es .navbar-collapse viszont h=56, top=56 — 18-18 px hezag, holott
   minden padding es margin 0. Elobb ures szovegcsomokra gyanakodtam
   (feedback_bootstrap_fejlec_whitespace_magassag), de a line-height:0 nem valtoztatott
   semmit: a container ugyanis MAR flex (az 1918. reteg), es a flex eleve eldobja a
   csak-szokoz csomokat. A valodi ok ugyanabban a regi retegben all:
       .navbar-top .container { display:flex; align-items:center; MIN-HEIGHT: 92px }
   A fix 92 px-et huzzuk 74-re: a tartalom 56 px, marad 9-9 px levego. A kereso 46 px-es
   mezoje es a logo helye valtozatlan. TANULSAG: merj a sajat korabbi retegeidre is —
   a "hezag" itt nem a bongeszo furcsasaga volt, hanem egy sajat fix meret. */
@media (min-width: 992px) {
  .navbar-top .container { min-height: 74px !important; }
}

/* =========================================================================
   62. RETEG - "A KATEGORIA KEDVENCE" a kategoria-panel aljan (v1.62.0, 2026-09-10)
   Fajl: <shop>/default/css/arculat2026.css (kozos, mind a 3 shop)
   A user a tervlapon latta ezt a blokkot, es kerte. A HTML-t a menu.model.php
   getKategoriaKedvenc() metodusa allitja elo a napi JSON-bol (kedvenc_general.php);
   a kivalasztas alapja a MAGYAR BOLT nepszerusege.

   Szerkezet:
     a.kat-kedvenc > span.kat-kedvenc-kep + span.kat-kedvenc-szoveg
                     (span.kat-kedvenc-cimke / -nev / -ar)
   Ha egy kategoriahoz nincs kedvenc, a blokk meg sem jelenik — ez a CSS akkor
   egyszeruen nem fog semmire.
   ========================================================================= */
.kat-kedvenc-sor { margin-top: 6px; }
.kat-kedvenc {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid var(--gjb-keret);
  border-radius: 16px;
  padding: 10px 14px;
  margin-top: 10px;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kat-kedvenc:hover,
.kat-kedvenc:focus {
  border-color: var(--gjb-narancs);
  box-shadow: 0 8px 20px -14px rgba(0, 59, 111, .55);
  text-decoration: none !important;
}
.kat-kedvenc-kep {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.kat-kedvenc-kep img { max-width: 100%; max-height: 100%; width: auto; height: auto; mix-blend-mode: multiply; }
.kat-kedvenc-szoveg { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kat-kedvenc-cimke {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--gjb-turkiz); text-transform: uppercase; line-height: 1.4;
}
.kat-kedvenc-nev {
  font-size: 14px; font-weight: 700; color: var(--gjb-kek); line-height: 1.3;
  /* hosszu nevnel ket sor utan harom pont */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kat-kedvenc-ar { font-size: 16px; font-weight: 900; color: var(--gjb-kek); line-height: 1.4; }
.kat-kedvenc-ar .currency { font-size: .62em; font-weight: 800; margin-left: 2px; }
@media (max-width: 991px) {
  .kat-kedvenc { padding: 8px 10px; gap: 10px; }
  .kat-kedvenc-kep { width: 52px; height: 52px; }
}

/* --- 62b. a blokk a panel aljan, TELJES szelessegben (v1.62.1, 2026-09-10) ----
   MERVE: a menu a getSubMenu() agat hasznalja (nem a Mega2-t), es a level-2 panel
   "columns: 2" tordelesu. A blokk ezert <li>, es column-span:all-lal fut vegig a
   panel alja alatt — kulonben az egyik hasabba szorulna be. */
#mainNav ul.level-2 > li.kat-kedvenc-li {
  column-span: all;
  -webkit-column-span: all;
  break-inside: avoid;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
  border-top: 1px solid var(--gjb-keret);
  padding-top: 12px !important;
}
#mainNav ul.level-2 > li.kat-kedvenc-li > a.kat-kedvenc { margin-top: 0; }

/* =========================================================================
   63. RETEG - A VISSZAKULDES IKONJA az igeret-savban (v1.63.0, 2026-09-10)
   Fajl: <shop>/default/css/arculat2026.css (kozos, mind a 3 shop)
   Az igeret-sav kozepso sora mar nem az ingyenes szallitasrol szol (az ertekhatar
   megszunt), hanem a 14 NAPOS VISSZAKULDESROL — a teherauto-ikon (\f0d1) ezert nem
   illik hozza. Visszaforgato nyil (\f0e2, Font Awesome "undo") kerul a helyere, es a
   szinezes turkizre valt: a narancs a boltban a CSELEKVES szine (kosargomb), egy
   tajekoztato ikonnak nem kell azzal versenyeznie.
   ========================================================================= */
body.product-page .green-box li:nth-child(2)::before {
  content: "\f0e2" !important;
  background: #E4F6FA !important;
  color: var(--gjb-turkiz) !important;
}

/* =========================================================================
   64. RETEG - SZALLITASI KOLTSEGEK TABLAZAT a CMS-oldalakon (v1.64.0, 2026-09-10)
   Fajl: <shop>/default/css/arculat2026.css (kozos, mind a 3 shop)
   A CMS-szovegbe irt {szallitasi_koltsegek} jel helyere a rendszer az AKTUALIS
   szallitasi tablazatot teszi (ndl/szallitas_tablazat.php). Igy az ASZF-ben nem kell
   kezzel atirni a dijat: mindig az jelenik meg, ami az adminban be van allitva.
   ========================================================================= */
.szallitas-tablazat-doboz { margin: 18px 0 22px; }
table.szallitas-tablazat {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
  border: 1px solid var(--gjb-keret);
  border-radius: 16px;
  overflow: hidden;
  font-size: 15px;
}
table.szallitas-tablazat thead th {
  background: var(--gjb-jeges-vl);
  color: var(--gjb-kek);
  font-weight: 800;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gjb-keret);
  white-space: nowrap;
}
table.szallitas-tablazat tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #EDF5F9;
  vertical-align: top;
  color: var(--gjb-kek);
}
table.szallitas-tablazat tbody tr:last-child td { border-bottom: none; }
table.szallitas-tablazat td.mod { font-weight: 700; white-space: nowrap; }
table.szallitas-tablazat td.leiras { color: #33648F; font-size: 14px; line-height: 1.5; }
table.szallitas-tablazat th.dij,
table.szallitas-tablazat td.dij { text-align: right; white-space: nowrap; }
table.szallitas-tablazat td.dij strong { font-size: 17px; font-weight: 900; }
p.szallitas-ingyen {
  margin: 12px 0 0;
  padding: 10px 16px;
  background: #E7F8E9;
  border-radius: 12px;
  color: #0A6E14;
  font-weight: 700;
}
@media (max-width: 640px) {
  table.szallitas-tablazat { font-size: 14px; }
  table.szallitas-tablazat thead th,
  table.szallitas-tablazat tbody td { padding: 9px 10px; }
  table.szallitas-tablazat td.leiras { display: none; }   /* mobilon a leiras elmarad, a dij a fontos */
  table.szallitas-tablazat th:nth-child(2) { display: none; }
}

/* =========================================================================
   65. RETEG - EGYFORMA FUTAR-DOBOZOK, KOZTUK RES (v1.65.0, 2026-09-11)
   Fajl: <shop>/default/css/arculat2026.css

   A masodik futar (GLS) megjelenesevel ket szallitasi doboz all egymas mellett.
   A gyari checkout.css 49%-os, balra lebego (float) dobozokat ad: a ket doboz
   OSSZEER, es a magassaguk a futar-kep meretetol fugg (a GLS-kep nagyobb, ezert
   a doboza magasabb volt). A user kerese: egyforma dobozok, kozottuk kis res.

   Megoldas: flex-sor - egyenlo szelesseg (fel sor, minusz a res fele), azonos
   magassag (stretch), 14 px res. EGY futarnal a doboz ugyanugy fel sor szeles
   marad, mint eddig (49% -> 50% - 7px), mobilon (575 px alatt) teljes szelesseg.
   Az id-szelektor erosebb a gyari ".details_step_content > ul li" !important
   szabalyanal, ezert az is felulirodik.
   ========================================================================= */
body.checkout-page #rb_shipping_methods {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin: 0 0 14px 0 !important;
}
body.checkout-page #rb_shipping_methods > li {
  float: none !important;
  display: block !important;
  flex: 0 0 calc(50% - 7px);
  width: calc(50% - 7px) !important;
  margin: 0 !important;
  box-sizing: border-box;
}
body.checkout-page #rb_shipping_methods > li > label { height: 100%; }
@media (max-width: 575px) {
  body.checkout-page #rb_shipping_methods > li { flex-basis: 100%; width: 100% !important; }
}

/* =========================================================================
   67. RETEG - BARION + KARTYALOGOK A ZAROSAVBAN (v1.67.0, 2026-09-14)
   Keszitette:  Claude Opus 5 (claude-opus-5) — 2026-09-14
   -------------------------------------------------------------------------
   Keres (user, 2026-09-14): a lablec zarosavjaban, a copyright-szoveg mellett
   a Barion logo es a fobb kartyatarsasagok logoi, SVG-ben.
   Kep: a Barion HIVATALOS, sotet hatterre valo logosava (design.barion.com,
   "Payment acceptance banner", barion-smart-banner-dark.svg) VALTOZTATAS NELKUL
   -> images/barion-kartyak-sotet.svg. A logokat atrajzolni/torzitani tilos
   (Barion-, Visa-, Mastercard-arculati szabaly), ezert nem generalt kep.
   A szoveg a KOZOS DB cms_block-jabol jon ({footer_block_copyright}), ezert a
   logosav a sablonfajlba kerult (pages/base/html/base.page.tmp.html), nem a
   blokkba — a blokk modositasa az elest is azonnal erintene.
   Az SVG 756x108-as vasznan a logok kozepen kb. 50 px magasak (fent-lent ures
   sav): 336 px szelesen a kep 48 px magas, a logok ~22 px-esek; a -12 px-es
   fuggoleges margo az ures savot nyeli el, igy a zarosav nem hizik meg.
   Asztali: egy sor — szoveg balra, logosav jobbra.
   Keskeny (<768 px): egymas alatt, kozepre igazitva.
   ========================================================================= */
footer .footer-copyright-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 32px;
}
footer .footer-copyright-szoveg { flex: 1 1 320px; min-width: 0; }
footer .footer-copyright-szoveg p { margin: 0 !important; }
footer img.footer-fizetesi-logok {
  display: block;
  flex: 0 0 auto;
  width: 336px;
  max-width: 100%;
  height: auto;
  margin: -12px 0;
}
@media (max-width: 767px) {
  footer .footer-copyright-sor { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  footer .footer-copyright-szoveg { flex: 0 0 auto; }
  footer img.footer-fizetesi-logok { margin: -8px auto -12px; }
}

/* =========================================================================
   68. RETEG - KATEGORIA-ILLUSZTRACIOK A FOOLDALI BUBOREKOKBAN (v1.68.0, 2026-09-14)
   Keszitette:  Claude Opus 5 (claude-opus-5) — 2026-09-14
   -------------------------------------------------------------------------
   Keres (user, 2026-09-14): a fooldali kategoria-ikonok (vonalas SVG, 46 px) helyett
   "hasonlo, de kulturaltabb" illusztraciok. A design-vasznon ("Kategoria-ikonsor")
   az "A) kezzel rajzolt vektoros SVG" valtozatot valasztotta ("mehet mindenhol").
   Kepek: images/kategoriak/ak-*.svg — a WEBROOT /images/ alatt, mert a sablon
   relativ "images/" utja a <base href> miatt oda mutat (nem a <bolt>/default/images/-re).
   A kor merete es szine valtozatlan (108 / 84 / 74 px); az illusztracio a kor ~78%-a.
   ========================================================================= */
.ak-kor img { display: block; width: 84px; height: 84px; }
@media (max-width: 991px) {
  .ak-kor img { width: 66px; height: 66px; }
}
@media (max-width: 575px) {
  .ak-kor img { width: 58px; height: 58px; }
}

/* =========================================================================
   69. RETEG - KOMPAKT RAGADOS FEJLEC GORGETESKOR (v1.69.0, 2026-09-14)
   Keszitette:  Claude Opus 5 (claude-opus-5) — 2026-09-14
   -------------------------------------------------------------------------
   Keres (user, 2026-09-14): lefele gorgeteskor a fent maradt feher sav legyen
   30%-kal alacsonyabb, es ehhez merten kisebb legyen a logo, a kereso es az
   ikonok ("ne foglaljon ennyi helyet, mikor csak egyedul marad fent").
   A sav a 61. reteg ota position:sticky (csak >=992px). Hogy eppen ragad-e, azt
   CSS-bol nem lehet tudni, ezert a js/fejlec_kompakt.js gorgeteskor
   body.fejlec-kompakt osztalyt tesz ki (hiszterezissel: 120 px felett be,
   40 px alatt ki — a 22 px-es osszemenes igy nem billegteti).
   MERETEK (70%): sav 74 -> 52 px, logo 46 -> 32, kereso mezo 46 -> 32
   (gomb 40 -> 28), ikon-kor 44 -> 31 (ikon 22 -> 15), felirat 13.5 -> 12.5 px.
   A korabbi retegek !important-jai miatt itt is !important kell.
   ========================================================================= */
@media (min-width: 992px) {
  .navbar-top .container,
  .navbar-top .navbar-brand img,
  .navbar-top .search-wrapper .form-control,
  .navbar-top .search-wrapper .btn,
  .navbar-top .menu-blue > a,
  .navbar-top .menu-blue .img-box,
  .navbar-top .menu-blue .img-box img {
    transition: min-height .18s ease, max-height .18s ease, height .18s ease, width .18s ease,
                min-width .18s ease, padding .18s ease, font-size .18s ease, flex-basis .18s ease;
  }
  body.fejlec-kompakt .navbar-top .container { min-height: 52px !important; }
  body.fejlec-kompakt .navbar-top .navbar-brand img { max-height: 32px !important; }
  body.fejlec-kompakt .navbar-top .search-wrapper input[type="text"],
  body.fejlec-kompakt .navbar-top .search-wrapper .form-control {
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
  }
  body.fejlec-kompakt .navbar-top .search-wrapper .btn,
  body.fejlec-kompakt .navbar-top .search-wrapper button[type="submit"] {
    height: 28px !important;
    min-height: 0 !important;   /* a 2. reteg .btn { min-height: 44px }-e kulonben 44 px-en tartja */
    min-width: 34px !important;
    margin: 2px 3px 2px 0 !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
  body.fejlec-kompakt .navbar-top .menu-blue > a {
    min-height: 0 !important;
    padding: 2px 6px !important;
    font-size: 12.5px !important;
  }
  body.fejlec-kompakt .navbar-top .menu-blue .img-box {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px !important;
  }
  body.fejlec-kompakt .navbar-top .menu-blue .img-box img {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px;
  }
}

/* =========================================================================
   70. RETEG - NAGYOBB FEJLEC-LOGO, KESKENYEBB KERESO (v1.70.1, 2026-09-14)
   v1.70.1: a kereso 88%-a CSAK >=1200 px — 992-1199 px kozott a 970 px-es kontenerben a kereso
            mar eddig is csak ~225 px volt, a 88% ~175 px-re szukitette volna (merve, SK).
   Keszitette:  Claude Opus 5 (claude-opus-5) — 2026-09-14
   -------------------------------------------------------------------------
   Keres (user, 2026-09-14): "a logo lehetne 15%-kal nagyobb, a keresosav pedig
   ennyivel lehetne kevesbe szeles, hogy elferjen a logo". Csak >=992 px (a mobil
   fejlec kulon elrendezesu, ott a logo 40 px marad).
   LOGO: normal 46 -> 53 px (max-height; a logo2026.svg 488x120-as, igy nagyobbra is
   kirajzolhato), kompakt (69. reteg) 32 -> 37 px, hogy az arany maradjon.
   KERESO: a keresooszlop rugalmasan kitolti a helyet (15. reteg: flex 1 1 auto);
   a kereso-dobozt ezen belul 88%-os szelessegre vesszuk es kozepre tesszuk — merve
   a mostani ~645 px-es doboz ~15%-kal keskenyebb lesz (a logo novekedesevel egyutt).
   ========================================================================= */
@media (min-width: 992px) {
  .navbar-top .navbar-brand img { max-height: 53px !important; }
  body.fejlec-kompakt .navbar-top .navbar-brand img { max-height: 37px !important; }
}
@media (min-width: 1200px) {
  .navbar-top #navbar-top > div[class*="col-"] .search-wrapper {
    width: 88% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================================
   71. RETEG - TERMEKKEP-DOBOZ SUGARAS HATTERE (v1.71.0, 2026-09-14)
   Keszitette:  Claude Opus 5 (claude-opus-5) — 2026-09-14
   -------------------------------------------------------------------------
   Keres (user, 2026-09-14): a termekkartya kepdoboza (.product > div > .product-image,
   20c. reteg: egyszinu #F4FBFD) legyen szinatmenet — kozeprol egy feher pontbol a
   szelekig babakekbe —, es erre jojjon a multiply-olt kep: igy a feher hatteru
   termekfotok kozepe tisztan feher marad (egyszinu kek hatteren a multiply
   bekekitette). Harom valtozat kozul a "C" lett kivalasztva (valodi kartyakon renderelve).
   Kozep 30%-ig tiszta feher, a szelen a lap hatterszine (#E3F8FC = --gjb-jeges).
   A kep multiply keverese (20. reteg) valtozatlan.
   ========================================================================= */
.product > div > .product-image {
  background: radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, #FFFFFF 30%, var(--gjb-jeges) 100%) !important;
}

/* =========================================================================
   66. RETEG - EGYFORMA FIZETESI DOBOZOK, KOZTUK RES (v1.66.4, 2026-09-11)
   Fajl: <shop>/default/css/arculat2026.css
   v1.66.4: a Barion eredmenyoldal kartyaja (nagy allapot-ikon, szines uzenetdoboz, rendelesszam, narancs gomb) —
            a .error1/.success1 uzenet formazatlan volt, a user nem vette eszre ("semmi nem tortent")
   v1.66.3: a kijelolt SZALLITASI (futar) doboz is latszik (user kerese) — ugyanugy, mint a fizetesi: a
            radiogomb rejtett, a JS "selected" osztalyt tesz ra, de azt semmi nem emelte ki. Itt is a valodi
            bejelolt allapot szerint (:has(> input:checked)).
   v1.66.2: a KIJELOLT fizetesi doboz latszik (user: "nincs visszajelzesem") — a radiogomb rejtett, a
            fizetesi <li>-re semmilyen JS nem tesz osztalyt, a stilus pedig csak li.active-ot emel ki. Most a
            valodi bejelolt allapot szerint (:has(> input:checked)): narancs keret + halvany narancs hatter
            (a bolt "aktiv elem" kiemelese) + narancs pipa a jobb felso sarokban.
   v1.66.1: a kepek 20%-kal nagyobbak (user kerese): 160x80 -> 192x96, mobilon 120x60 -> 144x72

   A Barion megjelenesevel ket fizetesi doboz all egymas mellett. A gyari
   checkout.css a dobozokat inline-block-ra es 48%-ra allitja, a kepet balra
   lebegteti (float), a leiras a kep ala folyik: a doboz magassaga a tartalomtol
   fugg, es a ket doboz osszeer. A user kerese: a ket doboz legyen EGYFORMA.

   Megoldas (a 65. reteg mintajara): flex-sor - egyenlo szelesseg (fel sor, minusz
   a res fele), azonos magassag (stretch), 14 px res; a dobozon belul racs:
   balra a kep fix 192x96-os helyen, jobbra a cim, alatta a leiras. Mobilon
   (575 px alatt) a doboz teljes szelesseg, a kep 144x72.

   FIGYELEM: a <li> megjelenitese szandekosan NEM !important - a penztar JS-e
   (payment_methods_change) a szallitasi modhoz nem valaszthato fizetesi modot
   style="display:none"-nal rejti; egy !important display ezt felulirna, es a
   tiltott fizetesi mod is latszana. (A 65. reteg futar-dobozait a JS nem rejti.)
   ========================================================================= */
body.checkout-page #rb_payment_methods {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
body.checkout-page #rb_payment_methods > li {
  display: block;
  float: none !important;
  flex: 0 0 calc(50% - 7px);
  width: calc(50% - 7px) !important;
  margin: 0 !important;
  box-sizing: border-box;
}
body.checkout-page #rb_payment_methods > li > label {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 4px 0 !important;
  display: grid !important;
  grid-template-columns: 192px minmax(0, 1fr);
  /* a cim (nevtelen szoveg-elem) a felso sor ALJARA, a leiras az also sor TETEJERE: a kep
     magassaga igy nem szakitja szet a ket sort, a szovegblokk osszezar es fuggolegesen kozepen van */
  align-items: end;
  align-content: center;
  column-gap: 14px;
  row-gap: 3px;
}
body.checkout-page #rb_payment_methods > li > label > .icon,
body.checkout-page #rb_payment_methods > li > label > img { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
body.checkout-page #rb_payment_methods > li > label > img {
  float: none !important;
  margin: 0 !important;
  width: 192px;
  height: 96px;
  object-fit: contain;
  justify-self: center;
}
body.checkout-page #rb_payment_methods > li > label > .subtext { grid-column: 2; margin: 0; align-self: start; }

/* v1.66.2 + v1.66.3: a KIJELOLT fizetesi ES szallitasi doboz — a valodi bejelolt allapot szerint
   (akkor is helyes, ha a JS szallitasvaltaskor torli a fizetesi kijelolest) */
body.checkout-page #rb_payment_methods > li,
body.checkout-page #rb_shipping_methods > li { position: relative; }
body.checkout-page #rb_payment_methods > li > label > img,
body.checkout-page #rb_shipping_methods > li > label > img { mix-blend-mode: multiply; } /* a kep feher hattere ne latsszon a tonusos hatteren */
body.checkout-page #rb_payment_methods > li:has(> input:checked),
body.checkout-page #rb_shipping_methods > li:has(> input:checked) {
  border-color: var(--gjb-narancs, #FF7D2F) !important;
  background: #FFF7F2 !important;
}
/* a pipa helye MINDIG foglalt (keskeny dobozban a cim elso sora ne fusson alá, es kijelolesnel ne ugorjon a szoveg) */
body.checkout-page #rb_payment_methods > li > label,
body.checkout-page #rb_shipping_methods > li > label { padding-right: 26px !important; }
body.checkout-page #rb_payment_methods > li:has(> input:checked)::after,
body.checkout-page #rb_shipping_methods > li:has(> input:checked)::after {
  content: '\2713';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gjb-narancs, #FF7D2F);
  color: #FFFFFF;
  font: 900 15px/24px 'Nunito', 'Trebuchet MS', sans-serif;
  text-align: center;
  pointer-events: none;
}
/* v1.66.4: a Barion EREDMENYOLDAL (checkout/barion: sikertelen / folyamatban / mar kifizetve / torolt) — az uzenetdoboz
   (.error1 / .success1) egyik stiluslapban sem volt formazva, ezert sima kis szovegkent latszott ("semmi nem tortent").
   Most a sikeroldal kartyajanak masa: nagy kerek ikon (allapot szerint), szines uzenetdoboz, rendelesszam, narancs gomb. */
.barion-eredmeny {
  max-width: 720px;
  margin: 10px auto 40px;
  padding: 36px 28px 32px;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(0, 59, 111, .08);
  text-align: center;
  box-sizing: border-box;
}
.barion-eredmeny > .content { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.barion-eredmeny::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #FDECEC;
  color: #C62828;
  font: 900 40px/1 'Nunito', 'Trebuchet MS', sans-serif;
}
.barion-eredmeny.barion-siker::before { content: '\2713'; background: #E8F7EA; color: var(--gjb-zold, #10AE20); }
.barion-eredmeny.barion-folyamatban::before { content: '\2026'; background: var(--gjb-jeges, #E3F8FC); color: var(--gjb-kek, #003B6F); }
.barion-eredmeny .error1,
.barion-eredmeny .success1 {
  display: inline-block;
  max-width: 560px;
  padding: 16px 22px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}
.barion-eredmeny .error1   { background: #FDECEC; color: #B3261E; border: 2px solid #F5C2C0; }
.barion-eredmeny .success1 { background: #E8F7EA; color: #0B7A18; border: 2px solid #BFE8C4; }
.barion-eredmeny .barion-rendeles { margin: 16px 0 0; color: var(--gjb-kek, #003B6F); font-weight: 700; }
.barion-eredmeny .barion-gombok { margin: 24px 0 0; }
.barion-eredmeny .barion-gombok .button {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--gjb-narancs, #FF7D2F);
  color: #FFFFFF !important;
  font-weight: 800;
  text-decoration: none;
}
.barion-eredmeny .barion-gombok .button:hover { background: var(--gjb-nar-sot, #D9631B); }

@media (max-width: 575px) {
  body.checkout-page #rb_payment_methods > li { flex-basis: 100%; width: 100% !important; }
  body.checkout-page #rb_payment_methods > li > label { grid-template-columns: 144px minmax(0, 1fr); }
  body.checkout-page #rb_payment_methods > li > label > img { width: 144px; height: 72px; }
}