/* === L4 — a régi (Journal) oldal közelítése a gyári témán + saját modulokon, tulaj-elv 2026-10-03:
   „ahol lehet, CSALUNK: a saját modulok és a téma maradnak, csak alakítjuk, hogy jobban hasonlítson a régire;
   ahol nincs lehetőség, ott a régit másoljuk.”
   Helye: catalog/view/theme/hb/stylesheet/hb-l4.css — a header.twig-ben a hb-product.css UTÁN töltődik.
   Szakaszok: 0 közös elemek (címsáv, gombok, morzsa, űrlap, értesítő, lapozó) · 1 kategória-lista + keresés · 2 termékoldal ·
   3 kosár + pénztár · 4 fiók + infó-oldalak · 5 mobil. Mért régi értékek: HB/theme/referencia/tokenek-mert.json + 0x-*.md.
   Színek: csak --hb-* tokenek. A hb.stylesheet.css (bőr) szabályait nem írja felül, csak kiegészíti. */

/* ================================================================ 00-kozos.css ================================================================ */
/* hb-l4 · 0. szakasz: KÖZÖS ELEMEK (címsáv, legend-sáv, gombok, morzsa, űrlapmezők, kosárba-értesítő, rövid lapok, szövegközi linkek, info-lapok betűi)
   Mérés: régi hangszerbolt.hu (Journal 3) ↔ new.hangszerbolt.hu, 1440 + 400 px; a számok a régi oldal mért értékei.
   Betöltés: gyári stylesheet → hb.stylesheet (skin) → hb-l2 → hb-header → hb-product → EZ. Színek csak --hb-* tokennel.
   A Caveat betű (E03) a header.twig Google Fonts css2-<link>-jéből jön (10-05; az @import kivéve).
   Javítás-kör (10-03): input-group gombok kivéve + 38 px; értesítő csak ×-gombos (JS-beszúrt) sávra; morzsa felső vonal + a .container széléig;
   .btn-info is; legend-sáv általánosan; info-lapok 15 px törzs; szövegközi link fehér + aláhúzás (E86, skin-felülírás). */

/* --- 0.1. címsáv: h1 és a lap-cím h2 · régi: h1.title.page-title 25 px/300 Montserrat, lh 30, fehér, háttér #3f5765,
       padding 5px 10px, margin 0 0 10px, mag. 40; belépés h2.title + keresés h2.title ugyanez; 400 px: 22 px, lh 26,4 · E04
       A terméklap h1-je a jobb oszlopban áll (gyári product.twig) — itt csak a kinézet, a hely a terméklap-szakaszé (régi: a kép+adatok FÖLÖTT).
       Összefésülés (10-07): a lista a többi szakasz azonos címsávjait is viszi — kereső „Keresési feltételek” címke (1.13; a <label> blokk-volta
       az 1.13-ban), pénztár 1. lépés címei (volt 3.6), gyártó-oldal id nélküli cím-h2-je (/akai; a betű-h2-k a 4.9-éi), belépés „Fiók” ::before (4.1). --- */
#content h1,
#product-category #content > h2,
#product-search #content > h2,
#product-search #content > label.control-label,
#product-manufacturer #content > h2:not([id]),
#collapse-checkout-option h2,
#account-login .well > h2,
#account-login #content::before {
  font-family: var(--hb-font-head);
  font-size: 25px;
  font-weight: 300;
  line-height: 30px;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 5px 10px;
  margin: 0 0 10px;
  border: 0;
}
@media (max-width: 767px) {
  #content h1,
  #product-category #content > h2,
  #product-search #content > h2,
  #product-search #content > label.control-label,
  #product-manufacturer #content > h2:not([id]),
  #collapse-checkout-option h2,
  #account-login .well > h2,
  #account-login #content::before {
    font-size: 22px;
    line-height: 1.2;
  }
}
/* --- 0.1b. legend-sáv (regisztráció „Személyes adatok / Jelszó / Hírlevél", kapcsolat-űrlap, cím-űrlapok, pénztár) · régi legend (regisztráció-lapon mérve,
       1440 + 400 ugyanaz): Montserrat 17 px/300, lh 25,5, fehér, háttér #3f5765, padding 0, margin 10px 0, keret 0, a tartalom teljes szélessége · E04
       Gyári: 18 px, padding 7px 0, bootstrap 1 px alsó vonal + margin-bottom 20. A kapcsolat-lap régi „Írj nekünk!" sávja (h3 22/700) a kapcsolat-szakaszé. --- */
#content legend {
  font-family: var(--hb-font-head);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 0;
  margin: 10px 0;
  border: 0;
}

/* --- 0.2. gombok a tartalomban · régi .btn-primary: 13 px/400, lh 13, padding 15px 20px, keret 0, sugár 0, NAGYBETŰ, árnyék nincs,
       mag. 43; hover: háttér #3f5765 + árnyék 0 10px 30px rgba(0,0,0,.1); aktív: belső 0 0 5px rgba(0,0,0,.1) · E05
       A token-doksi szerint a .btn-info is ugyanez (kapcsolat-lap „Megnézem Google Térképen"). Kivéve: fejléc/lábléc (nem #content), .btn-link,
       .btn-lg (#button-cart — terméklap-szakasz), .btn-group (nézetváltó, terméklapi kívánságlista/összehasonlítás, kívánságlista-lap ikon-gombjai), .input-group-btn (kosár mennyiség frissít/töröl, kupon „Beváltás":
       a 38 px-es mezőhöz igazodnak, lásd lejjebb). --- */
#content .btn-primary:not(.btn-lg):not(.btn-group > .btn):not(.input-group-btn > .btn),
#content .btn-default:not(.btn-group > .btn):not(.input-group-btn > .btn),
#content .btn-danger:not(.btn-group > .btn):not(.input-group-btn > .btn),
#content .btn-info:not(.btn-group > .btn):not(.input-group-btn > .btn) {
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  padding: 15px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: uppercase;
}
#content .btn-primary:not(.btn-lg):not(.btn-group > .btn):not(.input-group-btn > .btn):hover,
#content .btn-default:not(.btn-group > .btn):not(.input-group-btn > .btn):hover,
#content .btn-danger:not(.btn-group > .btn):not(.input-group-btn > .btn):hover,
#content .btn-info:not(.btn-group > .btn):not(.input-group-btn > .btn):hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);   /* árnyék, nem szín (régi mért) */
}
#content .btn-primary:not(.btn-lg):not(.btn-group > .btn):not(.input-group-btn > .btn):active,
#content .btn-default:not(.btn-group > .btn):not(.input-group-btn > .btn):active,
#content .btn-danger:not(.btn-group > .btn):not(.input-group-btn > .btn):active,
#content .btn-info:not(.btn-group > .btn):not(.input-group-btn > .btn):active {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
/* ikon a gombban (kapcsolat „Megnézem Google Térképen" fa-map-marker): a Font Awesome 14px/1 sorköze 45 px-re nyújtotta a 43 px-es gombot */
#content .btn-primary:not(.btn-lg):not(.btn-group > .btn):not(.input-group-btn > .btn) > .fa,
#content .btn-default:not(.btn-group > .btn):not(.input-group-btn > .btn) > .fa,
#content .btn-danger:not(.btn-group > .btn):not(.input-group-btn > .btn) > .fa,
#content .btn-info:not(.btn-group > .btn):not(.input-group-btn > .btn) > .fa { font-size: inherit; line-height: inherit; vertical-align: top; }
/* mező melletti gombok (kosár mennyiség-frissít/-töröl, kupon/utalvány „Beváltás"): a 0.4 szerinti 38 px-es mezővel egy magasságban, szögletes;
   betű/szín a skinből marad (a régi kosár tétellel nem mérhető) */
#content .input-group-btn > .btn {
  height: 38px;
  padding: 0 12px;
  line-height: 38px; /* 36-tal az ikon 1 px-szel a közép fölött (a kosár-javító mérése, 10-04) */
  border-radius: 0;
  box-shadow: none;
}
/* üres kosár / 404 „TOVÁBB": régi teljes szélességű zöld sáv (1240 / 360 px); a .pull-right float !important-ja marad, csak kitöltjük */
#error-not-found .buttons .pull-right { width: 100%; }
#error-not-found .buttons .btn { display: block; width: 100%; }

/* --- 0.3. morzsa · régi: ul 15 px, háttér #505050, keret nincs, 1 px fehér vonal FELÜL és ALUL, sugár 0, padding 10px 20px, mag. 45,
       a doboz teljes szélességében (a .container-en kívül: 1440-en 1280, 400-on 400 px); li padding 0; link #e6e6e6, utolsó #fff, aláhúzás nincs;
       elválasztó „→" 25 px széles, padding 0 5px, #e6e6e6; ház-ikon 20 px; 400 px: link 12 px/lh 18, ikon 16 px, sortörés engedett · E17
       Itt a gyári .container > ul.breadcrumb a container 15 px-es belső térközét -15 px margóval semlegesíti → a doboz széléig ér. --- */
.breadcrumb {
  font-size: 15px;
  border: 0;
  border-top: 1px solid var(--hb-text);
  border-bottom: 1px solid var(--hb-text);
  border-radius: 0;
  padding: 10px 20px;
  margin: 0 -15px 20px;
}
.breadcrumb > li {
  padding: 0;
  white-space: normal;
}
.breadcrumb > li:after { content: none; }                     /* gyári 26×26 forgatott nyíl helyett → */
.breadcrumb > li + li:before {
  content: "\2192";
  display: inline-block;
  width: 25px;
  padding: 0 5px;
  text-align: center;
  color: var(--hb-text-muted);
}
.breadcrumb > li > a { color: var(--hb-text-muted); text-decoration: none; }
.breadcrumb > li:last-child > a { color: var(--hb-text); }
.breadcrumb > li > a > i { font-size: 20px; vertical-align: -1px; }
@media (max-width: 767px) {
  .breadcrumb > li { display: inline; overflow-wrap: anywhere; }
  .breadcrumb > li > a { font-size: 12px; line-height: 18px; }
  .breadcrumb > li > a > i { font-size: 16px; }
}

/* --- 0.4. űrlapmezők a tartalomban · régi .form-control: 13 px, mag. 38, sugár 0, belső árnyék nincs, padding 6px 12px, textarea auto;
       400 px: 16 px (iOS-nagyítás ellen), a régin 32 px magas — itt SZÁNDÉKOSAN marad 38 (érintő-célméret; tulaj-döntés, lásd jelentés) · E72
       Kivéve: .hb-search (fejléc), .input-sm és a lista rendezés/darabszám sora (.input-group-sm > select, 30 px — a nézetváltó gombokkal
       egy magasságban marad; lista-szakasz). ≤767-en a 16 px-es betű erre is vonatkozik (iOS-nagyítás), a magasságát ott az 5.2 adja (40 px) --- */
#content .form-control:not(.input-sm):not(.input-group-sm > .form-control) {
  font-size: 13px;
  border-radius: 0;
}
#content .form-control:not(.input-sm):not(.input-group-sm > .form-control):not(:focus) { box-shadow: none; }   /* a skin fókusz-gyűrűje marad */
#content input.form-control:not(.input-sm):not(.input-group-sm > .form-control),
#content select.form-control:not(.input-sm):not(.input-group-sm > .form-control) { height: 38px; }
@media (max-width: 767px) {
  #content .form-control:not(.input-sm):not(.input-group-sm > .form-control),
  #content .input-group-sm > .form-control { font-size: 16px; }   /* a lista rendezés/darabszám választója is (mobilon 40 px-es, 5.2) */
}

/* --- 0.5. kosárba/kívánságlista-értesítő → rögzített buborék jobb fent · régi: Journal felugró értesítő (max 400, sugár 5 — token-doksi;
       élőben nem mérhető, a régi boltba nem teszünk kosárba) · E67 · A gyári JS a .container-be szúrja (.alert-success.alert-dismissible + × gomb);
       a :has(> .close) a × NÉLKÜLI, szerver-renderelt sikerüzeneteket (login.twig / account.twig) a lapon hagyja (azok statikus sávok maradnak);
       a lapon maradó hiba-üzenetek (.alert-danger) nem érintettek. Fejléc teljes mag. 165 px (1440), 90 px (≤1024) → alatta.
       Az 5 mp-es eltűnés + a görgetés-felugrás leállítása JS (hb.js) — másolás-tétel. --- */
body > .container > .alert-success.alert-dismissible:has(> .close) {
  position: fixed;
  top: 185px;
  right: 20px;
  z-index: 1040;                    /* a ragadós fejléc 1030 fölött */
  max-width: 360px;
  margin: 0;
  padding: 14px 44px 14px 16px;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
body > .container > .alert-success.alert-dismissible:has(> .close) > .close {
  position: absolute;
  top: 12px;
  right: 14px;
  float: none;
  line-height: 1;
}
@media (max-width: 1024px) {
  body > .container > .alert-success.alert-dismissible:has(> .close) { top: 110px; }
}
@media (max-width: 767px) {
  body > .container > .alert-success.alert-dismissible:has(> .close) { left: 10px; right: 10px; max-width: none; }
}

/* --- 0.6. rövid lapok üres helye a lábléc előtt · régi: #content min-height 1 px, lábléc rögtön a tartalom után (rés 0);
       új: gyári #content min-height 600 (üres kosár: 600 px magas, tartalom ~250) · E71 --- */
#content { min-height: 0; }

/* --- 0.7. szövegközi linkek · régi (szállítás-lapon mérve, 1440 + 400): „Üzletben", „Általános Szerződési Feltételeknek" FEHÉR, 15 px, aláhúzás nincs,
       hover #588f27 (01-doksi: body a); a gyártó-tárgymutató betűi is fehérek · E86
       SKIN-FELÜLÍRÁS (hb.stylesheet.css 183–186 aranya, fiok-info-7: „a #e6e6e6 nem látszott linknek"): a 11-elteres-lista E86 javaslata szerint vissza
       a szöveg színére + aláhúzás, hogy linknek látsszon — tulaj-döntés, lásd a jelentés risks-ét. Azonos fajsúly, később jön → nyer.
       A terméklap (#tab-description, .list-unstyled), a modal és az adatvédelmi link (.buttons a.agree) a saját szakaszáé. --- */
#content p a:not(.btn),
#information-information #content a:not(.btn) {
  color: var(--hb-text);
  text-decoration: underline;
}
#content p a:not(.btn):hover,
#information-information #content a:not(.btn):hover {
  color: var(--hb-accent);
}
/* a gyártó-tárgymutató betűsora (A B C …, product/manufacturer): fehér, de aláhúzás nélkül — a régin sem volt, betűsorként így olvasható */
#product-manufacturer #content > p > a:not(.btn) { text-decoration: none; }

/* --- 0.8. info-lapok törzsszövege · régi: 15 px / lh 22,5 (a body-é), a linkek is 15 px; gyári stylesheet.css 316: „#product-category #content,
       #product-product #tab-description, #information-information #content { font-size: 13px }" → itt csak az info-lap; a kategória- és a
       termékleírás-lap a saját szakaszáé · E03 --- */
#information-information #content {
  font-size: 15px;
  line-height: 1.5;
}

/* --- 0.9. info-lapok h5 kézírás-betű · régi: Caveat 25 px/400, normál (nem dőlt), lh 27,5, #e6e6e6, margin 0 0 15px (400 px ugyanez) · E03 --- */
#information-information #content h5 {
  font-family: 'Caveat', cursive;
  font-size: 25px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  color: var(--hb-text-muted);
  margin: 0 0 15px;
}

/* --- 0.10. info-lapok tartalmi h3 · régi: 24 px/300, lh 26,4, #e6e6e6, margin 0 0 15px; új: gyári 21 px/500 fehér, margin 20 0 10 · uj-1 --- */
#information-information #content h3 {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--hb-text-muted);
  margin: 0 0 15px;
}

/* --- 0.11. lapozó + találat-felirat mobilon (minden lista: kategória, keresés, gyártó, akciós, fiók-listák, értékelések) · régi: nincs
       lapozó (végtelen görgetés, E40); gyári: 34×33-as gombok egy sorban, sok oldalnál tördelve, a „Tételek: …" felirat jobbra zárva →
       40×40-es érintési célok középre zárva, a felirat középen · E101 (a mobil-szakasz 5.3-ából, 10-07). A gyári lapozó-sor minden .twig-ben:
       .col-sm-6.text-left (lapozó) + .col-sm-6.text-right (találat). --- */
@media (max-width: 767px) {
  #content .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 10px 0;
  }
  #content .pagination > li > a,
  #content .pagination > li > span {
    float: none;
    display: block;
    min-width: 40px;
    min-height: 40px;
    padding: 9px 10px;
    margin: 0;
    text-align: center;
    border-radius: 0;
  }
  #content .col-sm-6.text-left + .col-sm-6.text-right { text-align: center; }
}

/* ================================================================ 01-kategoria.css ================================================================ */
/* hb-l4 · 1. szakasz: KATEGÓRIA-LISTA + KERESÉS (≥768 px) — oldalsáv, oldalsávi modulok, alkategória-csempék, eszköztár, kártya-rács, kártya,
   jelvények, lista-nézet, keresőűrlap, gyártó-oldal. Mérés: régi hangszerbolt.hu (Journal 3, csak GET) ↔ new.hangszerbolt.hu, 1440 + 400 px;
   a számok a régi oldal mért értékei (2026-10-03). Oldalak: #product-category (fő- és alkategória), #product-search (keresés ÉS az akciós lap —
   a gyári special.twig gyökér-id-je is product-search), #product-manufacturer (a gyártó termék-listája; a gyártó-LISTA lap a 4.9-é) — mind a gyári lista-markup.
   Elrendezés és kártya-tipográfia csak @media (min-width: 768px)-ban — a ≤767 px-es kártya-rács, csempe-rács és a „Keresés finomítása" lista a mobil-szakaszé.
   Minden szélességen: oldalsáv-modulok (az oldalsáv xs-en gyári hidden-xs), kategóriakép-rejtés, jelvények, loadmore-gomb, kártya-ikon-cserék
   (a 5.1 mobil-kártya táska-ikonja ezekre épül).
   Kaszkád: az ocex_filter inline <style>-ja, a categoryrefine inline <style>-ja és az xdstickers <head>-beli stílusa UTÁNUNK jön →
   minden szabály id-vel kezdődik (erősebb), important-jelölő nincs. Színek --hb-* tokennel; egyetlen literál a select fehér háttere (1.7., kommentben:
   a skinnek sincs mező-háttér tokenje).
   Javítás-kör (10-04): #product-special törölve (nem létezik); 1.9 tipográfia + 1.5 a ≥768 blokkba; „Kategóriák" fejléc a Kategória-modul fölé (::before);
   ikon-cserék a lista-kártyára szűkítve + a 22 px szív/csere az <i>-n is; eszköztár-címke 26 px + compare keret 0 (sáv 49); 1.14 gyártó-oldal védelme a 4.9 rácsa ellen.
   Hűség-kör: csoport-fej 34 px; oldalsáv-kártya átlátszó + feliratos Kosárba; Listázás-választó 12 px; kép-fátyol + :focus-visible; szalag 40/39-re, árnyék nélkül;
   keresőűrlap jelölő→gomb 29 px. */

/* --- 1.1. jobb oldalsáv szélessége · régi: aside#column-right 240 px (belső 220), #content 1040 az 1280-as keretben;
       új: Bootstrap col-sm-3 = 25 % (341,5 px), col-sm-9 = 75 % (1024,5) · E25
       768–991 px: marad a gyári 25/75 (a 250 px ott a lap harmada volna). Mely elrendezésen legyen oldalsáv: beállítás-tétel. --- */
@media (min-width: 992px) {
  :is(#product-category, #product-search, #product-manufacturer) #column-right.col-sm-3 { width: 250px; }   /* 15 + 220 + 15 */
  :is(#product-category, #product-search, #product-manufacturer) #content.col-sm-9 { width: calc(100% - 250px); }
}

/* --- 1.2. oldalsávi modul-cím és a gyári Kategória-modul (.list-group) · régi: modul-cím h3 22 px/700 Montserrat, fehér, háttér #3f5765,
       padding 10, margin 0 0 10 (mag. 46); csoport-fej 13 px/700 Nunito Sans NAGYBETŰ, lh 14,3, fehér, háttér #3f5765, padding 10, mag. 34;
       az alkategória-linkek sima 14 px/300 Montserrat lh 21, háttér nélkül; aktív/nyitott zöld · E26, E28
       A gyári Kategória-modul (extension/module/category.twig) NEM ad h3-at, csak .list-group-ot → a régi „Kategóriák" panel-fej ::before-ral
       (a 4.x fiók-menü mintája); a h3-szabály a gyári Akciós / Legújabb modul címére való. A modul markupjában a fő- és az alszint csak „- ” előtagban
       különbözik (a gyereknek nincs osztálya) → minden elem fej-sáv, az aktív zöld; a sima gyerek-link kinézete = copy E26. --- */
:is(#product-category, #product-search, #product-manufacturer) #column-right > h3,
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group::before {
  display: block;
  font-family: var(--hb-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 10px;
  margin: 0 0 10px;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group::before { content: "Kategóriák"; }
html:lang(en) :is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group::before { content: "Categories"; }
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group { margin-bottom: 20px; }
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group > .list-group-item {
  font-family: var(--hb-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 14.3px;                                /* 10 + 14,3 + 10 = 34 (régi csoport-fej) */
  text-transform: uppercase;
  color: var(--hb-text);
  background: var(--hb-primary);
  border: 0;
  border-radius: 0;
  padding: 10px;
  margin-bottom: 5px;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group > .list-group-item:hover,
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group > .list-group-item:focus,
:is(#product-category, #product-search, #product-manufacturer) #column-right > .list-group > .list-group-item.active {
  background: var(--hb-accent);
  color: var(--hb-text);
}

/* --- 1.3. oldalsávi termékkártya (gyári Akciós / Legújabb modul: h3 + .row > .product-layout.col-lg-3 > .product-thumb) · régi „Akciós Termékek":
       kártya 235 széles, padding 5, keret 1 px #505050 (= háttér), kép 223 (teljes szélesség); név 14 px/400 lh 18,2 balra, padding 8 0 5 8;
       ár 15 px balra, padding 0 8 8; rövid leírás + nettó NINCS; gombsor flex, padding 8 8 5: kis „Kosárba" 12 px, padding 4 6, háttér #3f5765,
       mag. 20 + összehasonlítás-ikon 20×20 (a kívánságlista rejtve) · E28
       A gyári col-lg-3 oszlop-osztály az oldalsávban 25 % lenne → teljes szélesség. --- */
:is(#product-category, #product-search, #product-manufacturer) #column-right > .row { margin: 0; }
:is(#product-category, #product-search, #product-manufacturer) #column-right > .row > .product-layout { width: 100%; padding: 0; float: none; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb {
  border: 1px solid var(--hb-bg);                     /* régi: 1 px #505050 keret a #505050 háttéren, a kártya átlátszó */
  background: transparent;
  padding: 5px;
  margin-bottom: 20px;
  overflow: visible;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .image { position: relative; overflow: hidden; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .image img { width: 100%; height: auto; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .caption { padding: 0; min-height: 0; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb h4 {
  font-family: var(--hb-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  margin: 0;
  padding: 8px 0 5px 8px;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb h4 a { font-weight: 400; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .caption > p:not(.price),
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .price-tax,
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button:nth-child(2) { display: none; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .price { margin: 0; padding: 0 8px 8px; font-size: 15px; }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 5px;
  border-top: 0;
  background: transparent;
  overflow: visible;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button {
  float: none;
  width: auto;
  height: 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  text-transform: none;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button:first-child { background: var(--hb-primary); }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button:first-child:hover { background: var(--hb-accent); }
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button + button {
  width: 20px;
  padding: 0;
  font-size: 14px;
  background: transparent;
  color: var(--hb-text);
}
:is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button + button:hover { background: transparent; color: var(--hb-danger); }
/* a gyári modul-kártyán a „Kosárba" felirat 992–1199 px-en gyári hidden-md (important-os utility) → ott ikon-gomb; a felirat csak important-jelölővel hozható vissza — nem tesszük (done E28).
   ≥1200: a régi kis gomb csak feliratos (56 px) → a kocsi-ikon rejtve; 992–1199-en marad, különben üres a gomb */
@media (min-width: 1200px) {
  :is(#product-category, #product-search, #product-manufacturer) #column-right .product-thumb .button-group button:first-child > i { display: none; }
}

/* --- 1.4. oldalsávi banner (gyári Banner modul: .swiper-viewport > .swiper-container) · régi: 220×400 kép, keret/árnyék/sugár nélkül, alatta 20 px · E29 --- */
:is(#product-category, #product-search, #product-manufacturer) #column-right .swiper-viewport {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 20px;
}
:is(#product-category, #product-search, #product-manufacturer) #column-right .swiper-viewport img { width: 100%; height: auto; }

/* --- 1.5. alkategória-csempék · régi: .category-grid flex, soronként 6, .category-layout 167 széles padding 10, kép 147×147 (1:1, árnyék
       0 5px 20px -5px rgba(0,0,0,.1)), alatta név Montserrat 12 px/700 lh 18 NAGYBETŰ padding 5, cím nélkül; a rács alatt 20 px;
       új: „Keresés finomítása" h3 (21 px) + 4 oszlopos pöttyös linklista + <br> · E30
       a) gyári linklista csempésebbé (kép nincs a gyári adatban): a h3 és a <br> rejtve, az oszlopok + ul „contents", a linkek 6/sor csempe-gombok;
       b) a categoryrefine kánon-modul (.cat-refine > .ocex-cr-card, saját inline stílussal) ugyanerre a kinézetre — a telepítés beállítás-tétel.
       ≤767 px: a gyári h3 + pöttyös lista marad (a mobil-szakasz dönt), a categoryrefine mobil-nézete (2 oszlop, 84 px-es kép ≤480) a modulé. --- */
@media (min-width: 768px) {
  #product-category #content > h3:has(+ .row > .col-sm-3 > ul),
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul) + br { display: none; }
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
  }
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul)::before,
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul)::after { content: none; }
  #product-category #content > h3 + .row > .col-sm-3:has(> ul),
  #product-category #content > h3 + .row > .col-sm-3 > ul { display: contents; }
  #product-category #content > h3 + .row > .col-sm-3 > ul > li {
    list-style: none;
    flex: 0 0 calc((100% - 50px) / 6);
    display: flex;
  }
  #product-category #content > h3 + .row > .col-sm-3 > ul > li > a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 10px;
    font-family: var(--hb-font-head);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--hb-text);
    background: var(--hb-surface);
  }
  #product-category #content > h3 + .row > .col-sm-3 > ul > li > a:hover,
  #product-category #content > h3 + .row > .col-sm-3 > ul > li > a:focus { background: var(--hb-primary); color: var(--hb-text); }
  #product-category #content .cat-refine { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; }
  #product-category #content .cat-refine .ocex-cr-card {
    gap: 0;
    padding: 0;
    align-items: stretch;
    text-align: left;
    color: var(--hb-text);
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  #product-category #content .cat-refine .ocex-cr-card:hover,
  #product-category #content .cat-refine .ocex-cr-card:focus { box-shadow: none; transform: none; color: var(--hb-text); }
  #product-category #content .cat-refine .ocex-cr-img { height: auto; aspect-ratio: 1 / 1; box-shadow: 0 5px 20px -5px rgba(0, 0, 0, .1); }   /* árnyék, nem szín (régi mért) */
  #product-category #content .cat-refine .ocex-cr-img img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
  #product-category #content .cat-refine .ocex-cr-name {
    font-family: var(--hb-font-head);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    padding: 5px;
    margin: 0;
  }
  #product-category #content .cat-refine .ocex-cr-card:hover .ocex-cr-name { color: var(--hb-gold); }
  #product-category #content .cat-refine .ocex-cr-count { display: none; }   /* a régi csempén darabszám nem volt */
}

/* --- 1.6. kategóriakép és elválasztó a cím alatt · régi: nem volt (a sávos cím után rögtön a csempék); új: 80×80 keretes kép (.col-sm-2 > img.img-thumbnail)
       + <hr> (20 px margók) · E31 · a leírás-oszlop (ha egyszer lesz) marad, teljes szélességen --- */
#product-category #content > .row > .col-sm-2:has(> img.img-thumbnail) { display: none; }
#product-category #content > .row > .col-sm-2:has(> img.img-thumbnail) + .col-sm-10 { width: 100%; }
#product-category #content > .row:has(> .col-sm-2 > img.img-thumbnail) + hr { display: none; }

/* --- 1.7. lista-eszköztár · régi .products-filter: 1 px #eee vonal felül-alul, padding 10, margin 0 0 25, flex, mag. 49; nézetváltó 25×25 ikon-gomb,
       háttér/keret nélkül; „Termék összehasonlítás" 15 px #e6e6e6, ikon 18 px előtte, padding-left 15; Rendezés/Listázás címke 12 px #555 háttér #eee
       mag. 26 padding 5 10; select 13 px fehér, szöveg #444349, keret #c5ccd0, mag. 26: Rendezés 162 px, Listázás 46 px, jobbra zárva, köztük 10 px
       · E32 (a piros számláló-kör és a 12/oldal: beállítás + másolás) · új: gyári sáv, 30 px-es gombok és mezők, acélkék címke --- */
@media (min-width: 768px) {
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 25px;
    padding: 10px;
    border-top: 1px solid var(--hb-text-muted);
    border-bottom: 1px solid var(--hb-text-muted);
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group)::before,
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group)::after { content: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) > .col-md-4 { margin-left: auto; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) .form-group { margin-bottom: 0; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) .btn-group > .btn {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--hb-text);
    font-size: 16px;
    line-height: 25px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) .btn-group > .btn.active,
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) .btn-group > .btn:hover { background: transparent; color: var(--hb-accent); }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) #compare-total {
    font-size: 15px;
    line-height: 27px;
    border: 0;                                          /* a .btn 1 px átlátszó kerete 29-re nyújtotta → a sáv 51 volt; így 27 → 49 */
    padding: 0 0 0 5px;
    color: var(--hb-text-muted);
    text-decoration: none;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) #compare-total:hover { color: var(--hb-text); }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) #compare-total::before {
    content: "\f0ec";                                   /* FontAwesome exchange — a régi icomoon összehasonlítás-ikon helyett */
    font-family: FontAwesome;
    font-size: 18px;
    margin-right: 8px;
    vertical-align: -1px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) .input-group-addon {
    font-size: 12px;
    line-height: 16px;
    height: 26px;
    padding: 4px 10px;                                  /* table-cell: a height csak minimum → 16 + 2×4 + 2 px keret = 26 (5-tel 28 volt) */
    border-radius: 0;
    color: var(--hb-text-inverse);
    background: var(--hb-text-muted);
    border-color: var(--hb-text-muted);
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) .input-group-sm > .form-control {
    height: 26px;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 20px;
    border-radius: 0;
    box-shadow: none;
    color: var(--hb-text-inverse);
    background: #fff;                                   /* literál: fehér mező — a skinnek sincs mező-háttér tokenje (a .product-thumb .image is #fff ott) */
    border-color: var(--hb-star-empty);
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) #input-sort { width: 162px; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> div > .btn-group) #input-limit { width: 46px; padding: 2px 0 2px 4px; font-size: 12px; }   /* régi 46×26, padding 0, 12 px; padding 6-tal a „20" „2("-nek látszott */
}

/* --- 1.8. kártya-rács: soronként 5 az oldalsáv mellett, 6 nélküle; egyforma kártyamagasság · régi: >1300 px 5 (6), ≤1300 4 (6), ≤980 3 (4);
       .product-layout 200 széles, padding 10 → kártya 180; egy sor minden kártyája azonos magas (392), a gombsor egy vonalban (1148) · E33, E36
       új: a gyári common.js oldalsávval col-lg-4 (3/sor), nélküle col-lg-3 (4/sor) osztályt ír → a sor CSS Grid, az oszlop-osztály nem számít;
       lista-nézetben (.product-list, a :has nem illik) a sor marad gyári blokk. Az ocex_filter AJAX-listája ugyanerre a sorra (#ocex-filter-results) kerül,
       utána a modul a #grid-view kattintást váltja ki → ugyanez a rács. --- */
@media (min-width: 768px) {
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout.product-grid) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -10px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout.product-grid)::before,
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout.product-grid)::after { content: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid {
    display: flex;
    float: none;
    width: auto;
    min-width: 0;
    padding: 0 10px;
  }
}
@media (min-width: 992px) {
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout.product-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout.product-grid) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  :is(#product-category, #product-search, #product-manufacturer) #content.col-sm-12 > .row:has(> .product-layout.product-grid) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- 1.9. rács-kártya · régi .product-thumb: 180 széles, keret nélkül, flex oszlop; kép 180×180 (kártya-szélesség, 1:1); caption padding 0;
       név Montserrat 15 px/700, lh 19,5, középre, margin-top 7, padding 5; rövid leírás és nettó ár NINCS; ár 15 px középre, margin 5 0 7;
       gombsor (73 mag., padding 5, középre): KOSÁRBA 109×35, 13 px/400 NAGYBETŰ, lh 13, padding 10, sugár 5, táska-ikon 17 px; alatta szív
       (zöld körvonal, 22 px) és összehasonlítás (fehér, 22 px) 35×28, háttér nélkül, hover #eb5858 · E34, E35, E36
       új: 312 széles kártya, 228-as kép, 180 px-es caption balra zárva, leírás + „Nettó:" sor, 40 px-es háromgombos sáv (60/20/20 %)
       (a +/− mennyiségléptető: másolás-tétel; a 42-es ocex_filter példány card_desc/card_tax kapcsolója: beállítás-tétel) --- */
@media (min-width: 768px) {
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid > .product-thumb {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    overflow: visible;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid > .product-thumb > div:not(.image) {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .caption { flex: 1 0 auto; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    margin-top: auto;
    padding: 5px;
    border-top: 0;
    background: transparent;
    overflow: visible;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button {
    float: none;
    width: auto;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button:first-child {
    grid-column: 1 / -1;
    justify-self: center;
    height: 35px;
    padding: 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button:first-child i { font-size: 17px; vertical-align: -2px; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button + button {
    width: 35px;
    height: 28px;
    padding: 3px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 22px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button + button:hover,
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button + button:focus-visible {
    background: transparent;
    color: var(--hb-danger);
  }
  /* az <i> ikon a gyári stylesheet.css `.fa { font-size: 14px }`-étől 14 px marad (a gomb 22-ese nem öröklődik) → az ikonra is */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .button-group button + button i {
    font-size: 22px;
    line-height: 22px;
  }
  /* kép-fátyol rámutatáskor · régi: rgba(80,80,80,.15) fedés a képen (= --hb-bg 15 %) — a jelvény-burkoló (z 3) fölötte marad;
     color-mix nélküli böngészőben a hover-deklaráció kiesik → nincs fátyol, nem törik */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    transition: background .2s;
    pointer-events: none;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .image:hover::after { background: color-mix(in srgb, var(--hb-bg) 15%, transparent); }
  /* kártya-tipográfia csak ≥768: a 400-as kártyát (14 px-es ár, padding 0) a 5.1 írja, ennek gyengébb szelektorai ezeket nem bírnák el */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .caption {
    padding: 0 5px;
    min-height: 0;
    text-align: center;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .caption h4 {
    font-family: var(--hb-font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 19.5px;
    margin: 7px 0 0;
    padding: 0 5px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .caption > p:not(.price),
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .price-tax { display: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .price {
    font-size: 15px;
    line-height: 22.5px;
    margin: 5px 0 7px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .price-old { font-size: 14px; margin-left: 6px; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-grid .rating { padding-bottom: 5px; }
}
/* minden szélességen: a kép a jelvény-burkoló (1.10, abszolút) horgonya és vágója — a gyári .image nincs pozicionálva */
:is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .product-thumb .image { position: relative; overflow: hidden; }
/* ikonok (minden szélességen — a 5.1 mobil-kártya táska-ikonja is erre épül): táska a kocsi helyett, körvonalas zöld szív (FontAwesome 4.7 kódok);
   az összehasonlítás fehér. Csak a lista-kártyán (#content > .row > .product-layout); a content_top/bottom modul-kártyák (ocex_prodtabs) ikonja a 0. szakasz döntése. */
:is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .product-thumb .button-group button:first-child .fa-shopping-cart::before { content: "\f290"; }
:is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .product-thumb .button-group button + button .fa-heart::before { content: "\f08a"; }
:is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .product-thumb .button-group button:nth-child(2) { color: var(--hb-accent); }
:is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .product-thumb .button-group button:nth-child(3) { color: var(--hb-text); }

/* --- 1.10. jelvények és készletszalag (xdstickers kánon-modul markupja: .image > .xdstickers_wrapper.position_upright > .xdstickers.xdsticker_<típus>)
       · régi: jelvény jobb felül (5 px-re), egymás alatt 5 px réssel, 12 px/700 NAGYBETŰ fehér, lh 12, padding 6 (mag. 24), bordó (akció −N %),
       piros (Újdonság), arany (Népszerű); készlet-szalag: átlós (−45°) bordó szalag a bal felső sarokban, 300 széles, 11 px/700 NAGYBETŰ, padding 6, árnyék nélkül,
       a kép (overflow hidden) vágja · E37, E38
       A modul <head>-beli alapstílusa (.xdstickers_wrapper.position_upright {top:5px; right:15px}, 0,2,0) UTÁNUNK jön → id-s szelektor;
       a burkoló a képet fedi (inset 0), oszlop-flex jobbra zárva, a szalag abszolút. A sale/novelty/bestseller admin-színét is ez írja felül
       (token-színek) — a modul „Styles" mezője maradjon üres (beállítás-tétel). --- */
:is(#product-category, #product-search, #product-manufacturer) .product-thumb .image .xdstickers_wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 5px;
  overflow: hidden;
  pointer-events: none;
}
:is(#product-category, #product-search, #product-manufacturer) .product-thumb .image .xdstickers {
  position: static;
  font-family: var(--hb-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  color: var(--hb-text);
  background: var(--hb-sale);
  padding: 6px;
  margin: 0;
}
:is(#product-category, #product-search, #product-manufacturer) .product-thumb .image .xdstickers.xdsticker_novelty { background: var(--hb-danger); color: var(--hb-text); }
:is(#product-category, #product-search, #product-manufacturer) .product-thumb .image .xdstickers.xdsticker_bestseller { background: var(--hb-gold); color: var(--hb-text-inverse); }
:is(#product-category, #product-search, #product-manufacturer) .product-thumb .image .xdstickers[class*="xdsticker_stock_"] {
  position: absolute;
  top: 27px;                                          /* a szalag közepe (left+150, top+11,5) = (40, 38,5) a kép sarkától — régi mért 40/39 */
  left: -110px;
  width: 300px;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  background: var(--hb-sale);
  color: var(--hb-text);
  transform: rotate(-45deg);                          /* árnyék nincs (régi mért: none) */
}

/* --- 1.11. lista-nézet · régi: név 22 px/300, ár 22 px/700, alul 1 px #eee elválasztó (a rövid leírás és a nettó ár itt látszik) · E41 --- */
@media (min-width: 768px) {
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-list .product-thumb {
    border: 0;
    border-bottom: 1px solid var(--hb-text-muted);
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-list .product-thumb h4 a {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout.product-list .product-thumb .price {
    font-size: 22px;
    font-weight: 700;
  }
}

/* --- 1.12. szűrés utáni „További termékek" gomb (ocex_filter, a lista alá szúrja: #content > .btn.ocex-filter-loadmore) · régi ias-gomb:
       zöld .btn „További termékek betöltése" · E40 (a végtelen görgetés maga: másolás-tétel) · a modul inline stílusa fehér hátteret +
       --ocex-accent színt ad (0,2,0) → id-s szelektor --- */
:is(#product-category, #product-search, #product-manufacturer) #content .btn.ocex-filter-loadmore {
  color: var(--hb-text);
  background: var(--hb-accent);
  border-color: var(--hb-accent);
  margin: 0 0 20px;
}
:is(#product-category, #product-search, #product-manufacturer) #content .btn.ocex-filter-loadmore:hover,
:is(#product-category, #product-search, #product-manufacturer) #content .btn.ocex-filter-loadmore:focus {
  color: var(--hb-text);
  background: var(--hb-primary);
  border-color: var(--hb-primary);
}

/* --- 1.13. keresőoldal űrlapja · régi: „Keresési feltételek" h2-sáv (25 px/300, lh 30, #3f5765, padding 5 10, margin 0 0 10 — a 0.1. címsáv kinézete,
       itt a gyári label.control-label-re); kulcsszómező 580 (58 %) + kategóriaválasztó egy sorban, 38 mag. (0.4. mező-szabály); a két jelölőnégyzet
       egymás mellett (15 px, lh 23), felettük 10 px; KERESÉS gomb külön sorban (0.2. gomb-szabály), alatta 15 px · E43
       új: kis címke, 425-ös mező, az 1. jelölő a választó mellett, a 2. a mező alatt, kis gomb · a markup gyári: a 2. jelölő a .row utáni <p>-ben
       → a .row clearfix-e ki, a jelölő-oszlop új sorba (clear), a <p> mellé úszik, a gomb mindkettő alá
       Összefésülve (10-07): a címke címsáv-kinézete a 0.1-ben (asztali + 400-as ág); itt csak a blokk-volta (a gyári label inline-block) --- */
#product-search #content > label.control-label { display: block; }
@media (min-width: 768px) {
  #product-search #content > .row:has(> .col-sm-4 > #input-search)::after { content: none; }
  #product-search #content > .row:has(> .col-sm-4 > #input-search) > .col-sm-4 { width: 58%; }
  #product-search #content > .row:has(> .col-sm-4 > #input-search) > .col-sm-3:has(> select) { width: 42%; }
  #product-search #content > .row:has(> .col-sm-4 > #input-search) > .col-sm-3:has(> .checkbox-inline) {
    width: auto;
    clear: left;
    padding: 10px 20px 29px 15px;                     /* alsó 29 = jelölő alja → gomb teteje (régi mért); a clear-elt gomb margin-topját a clearance elnyelné */
  }
  #product-search #content > .row:has(> .col-sm-4 > #input-search) + p {
    float: left;
    padding: 10px 0 29px;
    margin: 0;
  }
  #product-search #content > .row:has(> .col-sm-4 > #input-search) + p + #button-search {
    clear: both;
    display: block;
    margin: 0 0 15px;
  }
  #product-search #content .checkbox-inline { font-size: 15px; line-height: 23px; padding-left: 22px; }
}
/* a gomb alatti 15 px minden szélességen (a 0.1. címsáv margin-top 0 miatt 400-on a gomb ráfeküdt a h2-sávra) */
#product-search #content > #button-search { margin-bottom: 15px; }

/* (1.14. törölve 10-07: a gyártó-oldal (/akai) rács-védelme fölösleges, mert a 4.9. már csak a gyártó-LISTÁRA hat — `:has(> h2[id])`;
   a gyártó-oldal id nélküli cím-h2-je a 0.1. címsávé) */

/* ================================================================ 02-termek.css ================================================================ */
/* hb-l4 · 2. szakasz: TERMÉKOLDAL (#product-product) — rács (terméknév felül, kép | adatok, alattuk a fülek), mobil sorrend, bélyegkép-rács,
   adatblokk, ár, opció-gombok, kosár-sor, fülek, leírás-csukás (horog), kapcsolódó-cím, kép nélküli kártya, src nélküli TMD-bélyeg, előny-blokk (horog).
   Mérés: régi hangszerbolt.hu (Journal 3) ↔ new.hangszerbolt.hu, 1440 + 400 px, 4 terméklap (t1 Ibanez AS93FM, t2 AAD51CE custom2 + készlethiány,
   t3 Sandberg TT5 akció + radio + videó, t4 Ernie Ball heveder TMD-képek); a számok a régi oldal mért értékei. Színek csak --hb-* tokennel.
   Épít a hb-product.css 1. szakaszára (grid, bal oszlop display:contents) és a 0. szakaszra (h1-sáv, gombok, űrlapmezők); ahol felülír, azonos
   szelektorral és kommentben jelezve. A gyári product.twig és a rá ülő OCMOD-ok (TMD opció-kép, Video Tab, Quick Edit) jelölése érintetlen.
   Javító-kör (jav-termek, 10-07): 5 fül egy sorban, mennyiség-mező a 0.4 szerint (mobilon 16 px, 38 magas), képes opció 60 px / 78-as osztás,
   pill 92×19, fókusz-jelzés, leírás 15 px + fehér link, mobil fül-pirulák, kapcsolódó-cím szűkítve, adatblokk-sorrend, értékelés középen,
   csillag a címke után, „Mennyiség" felirat rejtve, kívánságlista-gombsor (keskeny oszlopban tördel, ≤767 csak ikon), ≤470 mező 100 px ikon nélkül.
   Szín-kivétel: a két #fff = képalap (a skin .thumbnail / .product-thumb .image fehérje), nem felület-szín. */

/* --- 2.1. rács: terméknév legfelül, teljes szélességben, alatta kép | adatok · régi: h1 [100,242,1000,40] a két oszlop FÖLÖTT, product-left 500 /
       product-right 500; új: h1 a jobb oszlopban (33 px, a szív/összehasonlítás alatt) · E46
       A hb-product.css rácsa bővítve: a JOBB oszlop is display:contents (felülírja a hb-product „jobb oszlop = rácselem, grid-row 1” szabályát, azonos
       szelektor), a gyerekei a 2. rácsoszlopba kerülnek, a h1 az 1. sorba mindkét oszlop fölé; a képlista a 2. sortól 40 sort fog át (az üres implicit
       sorok 0 magasak, row-gap nincs), így a jobb oszlop elemei a kép mellé, a fülek + fül-tartalom (order 10–11) a kép alá, teljes szélességben esnek.
       Kép nélküli terméknél (nincs ul.thumbnails) marad a gyári elrendezés — mint a hb-product.css-ben. --- */
@media (min-width: 768px) {
  #product-product #content > .row:has(> div > ul.thumbnails) > div:not(:has(> ul.thumbnails)) { display: contents; }
  #product-product #content > .row:has(> div > ul.thumbnails) > div:not(:has(> ul.thumbnails)) > * { grid-column: 2; min-width: 0; }
  #product-product #content > .row:has(> div > ul.thumbnails) > div:not(:has(> ul.thumbnails)) > h1 { grid-column: 1 / -1; grid-row: 1; }
  #product-product #content > .row > div:has(> ul.thumbnails) > ul.thumbnails { grid-row: 2 / span 40; align-self: start; }
}

/* --- 2.2. sorrend (asztalon a rács-elhelyezés sorrendje, mobilon a tényleges sorrend) · régi 400 px: név 155 → kép 227 → adatok 690 → ár 751 →
       opciók 824 → mennyiség + KOSÁRBA 977 → kívánságlista 1077 → értékelés 1127 → fülek 1175 → tartalom 1290; új 400 px: kép 152 → fülek 640 →
       leírás 698 → szív 1128 → név 1182 → adatok 1265 → ár 1352 → opciók 1434 → Kosárba 1688 · E47
       Ismeretlen elem (pl. kedvezmény-tábla, későbbi modul) az 5-ös alapértékkel az ár és az opciók közé esik. --- */
#product-product #content > .row:where(:has(> div > ul.thumbnails)) > div > * { order: 5; }   /* csak a termék-sor; :where → nem erősebb a lenti egyedi sorrendeknél */
#product-product #content > .row > div > h1 { order: 0; }
#product-product #content > .row > div > ul.thumbnails { order: 1; }
#product-product #content > .row > div > ul.list-unstyled:nth-of-type(1) { order: 2; }
#product-product #content > .row > div > ul.list-unstyled:nth-of-type(2) { order: 3; }
#product-product #content > .row > div > #product { order: 6; }
#product-product #content > .row > div > .btn-group { order: 7; }
#product-product #content > .row > div > .rating { order: 8; }
#product-product #content > .row > div > ul.nav-tabs { order: 10; }
#product-product #content > .row > div > .tab-content { order: 11; }
@media (max-width: 767px) {
  #product-product #content > .row:has(> div > ul.thumbnails) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;                 /* a gyári -15 px sor-margó + 15 px oszlop-padding helyett: az oszlopok szétnyílnak */
    margin-right: 0;
  }
  #product-product #content > .row:has(> div > ul.thumbnails)::before,
  #product-product #content > .row:has(> div > ul.thumbnails)::after { content: none; }
  #product-product #content > .row:has(> div > ul.thumbnails) > div { display: contents; }
  #product-product #content > .row:has(> div > ul.thumbnails) > div > * { min-width: 0; }
}

/* --- 2.3. bélyegképek rácsban a fő kép alatt · régi: egy sor, cella 83 (5 px padding), kép 73×73, keret 1 px, sor-margó 10 px 0; 500 px-es oszlopban
       6/sor (mobilon 4); új: 78 px-es úszó cellák, 20 px-es köz, alul 20 px, 2–4 sorban · E49 (a lapozó csúszka = másolás-tétel; a cellák ~78 px-es
       auto-fill rácsban: 600 px-es oszlopban 7, 370-en 4 — sűrűség a régié, minden kép látszik, a TMD opció-képcsere és a nagyító-galéria jelölése marad)
       · hb-452 2. kör (tulaj 10-07: „a további képek keretét is vágd le”): a bélyeg keret és párna nélkül → a köz 10 px (sor és oszlop is),
       a cella-minimum 70 px (a sűrűség marad: 7 / 4), a képek bal széle a fő képével egy vonalban --- */
#product-product ul.thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  column-gap: 10px;
  margin: 0;
  overflow: visible;
}
#product-product ul.thumbnails > li { margin: 0; }
#product-product ul.thumbnails > li:not(.image-additional) { grid-column: 1 / -1; }
/* fő kép keret nélkül · hb-452 (tulaj 10-07: „vastagabb, mint a régin”) · régi: a főkép láncán 0 keret, 0 párna; új: a .thumbnail 1 px + 4 px párna + sugár 4 */
#product-product ul.thumbnails > li:not(.image-additional) > .thumbnail { margin-bottom: 0; padding: 0; border: 0; border-radius: 0; }
#product-product ul.thumbnails > li.image-additional { float: none; max-width: none; margin-top: 10px; }
#product-product ul.thumbnails > li.image-additional > a { margin: 0; padding: 0; border: 0; border-radius: 0; }
#product-product ul.thumbnails > li.image-additional img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
/* src nélküli TMD opció-bélyeg (kép nélküli opció-érték) rejtve · E66 (élőben: product_id 3135, az utolsó li) */
#product-product ul.thumbnails > li.image-additional:has(> a > img[src=""]) { display: none; }

/* --- 2.4. adatblokk · régi: 13 px-es sorok (Elérhetőség / Gyártó / Modell), lh 19,5; a KÉSZLETEN / ELŐRENDELÉS színes-félkövér span-ja és a
       „Megtekintések” a gyári jelölésben NINCS (csupasz szöveg) → esemény, másolás-tétel · E51
       Sorrend: a régin az Elérhetőség áll elöl; a gyári product.twig-ben a készlet-li MINDIG az utolsó (Gyártó? → Cikkszám → Pont? → Elérhetőség)
       → oszlop-flex + order -1 (ha egy esemény később új li-t tesz a végére, ezt a sort is nézni kell). --- */
#product-product #content > .row > div > ul.list-unstyled:nth-of-type(1) { display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
#product-product #content > .row > div > ul.list-unstyled:nth-of-type(1) > li:last-child { order: -1; }

/* --- 2.5. ár · régi: 25 px/700 Nunito, lh 25, csoport padding 10px 0; akciós: a RÉGI ár felül, 26 px/700 áthúzva, fehér, háttér #a41733, padding 3,
       margin-bottom 7; Nettó 15 px; új: h2 27 px/500 Montserrat, mt 20 mb 10, régi ár 15 px rózsaszín · E51 --- */
#product-product #content > .row > div > ul.list-unstyled:nth-of-type(2) { padding: 10px 0; margin: 0; }
#product-product #content > .row > div > ul.list-unstyled:nth-of-type(2) h2 {
  font-family: var(--hb-font);
  font-size: 25px;
  font-weight: 700;
  line-height: 25px;
  margin: 0;
}
#product-product #content > .row > div > ul.list-unstyled > li > span[style*="line-through"] {   /* erősebb a skin #product-product .list-unstyled… szabályánál */
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  line-height: 26px;
  color: var(--hb-text);
  background: var(--hb-sale);
  padding: 3px;
  margin-bottom: 7px;
}

/* --- 2.6. opciók · régi: cím h3 „Elérhető Változatok” 17 px/300 Montserrat, fehér, háttér #3f5765, padding 5px 10px; csoport-címke 15 px, padding 7px 0 5px;
       radio = nyomógomb (span): 92×19, 14 px / lh 16,8, padding 0 7px, fehér, háttér + 1 px keret #588f27, min-width 80, sugár 15, margó 0 8 8 0,
       kijelölt/hover: #a41733 + fehér keret; képes opció: 60×60 (a kerettel együtt) KEREK kép, keret 2 px #588f27, margó 0 8 8 0, a .radio-k között
       10 px → 78 px-es osztás (1440 t4 mért, a referencia 06 „50×50”-e téves); a név csak tooltip; kötelező-csillag a címke UTÁN („Szín *”);
       új: gyári h3 21 px + hr, TMD .tmdoptionbox (inline: flex, gap 10, wrap) > .radio-inline > label.optionimage (rádió + kép 60 px .img-thumbnail + név)
       · E53 — a TMD jelölés marad (a kép-csere JS-e erre épül), csak a kinézet; checkbox/textarea gyári. A rejtett rádió billentyűzet-fókusza
       arany gyűrűt kap (a régin a rádió display:none volt, ott nem volt fókusz sem — itt szándékosan jobb). --- */
#product-product #product > hr { display: none; }
/* a custom2 (Option Products Switcher) opció a default témán nem renderel (t2) → a cím üresen állna a kosár-sor fölött: ilyenkor rejtve
   (a váltó maga másolás-tétel; ha egyszer bármilyen opció a cím és a kosár-sor közé kerül, a cím magától visszajön) */
#product-product #product > h3:has(+ .form-group > #button-cart) { display: none; }
#product-product #product > h3 {
  font-family: var(--hb-font-head);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 5px 10px;
  margin: 4px 0 0;
}
#product-product #product .form-group { margin-bottom: 8px; }
#product-product #product .form-group > label.control-label { display: block; font-size: 15px; padding: 7px 0 5px; margin: 0; }
#product-product #product .tmdoptionbox > .radio-inline {   /* a TMD inline <style>-ja: width 24 %, text-align center — erősebb szelektorral, !important nélkül */
  display: flex;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  margin: 0;
  text-align: left;
}
#product-product #product .tmdoptionbox > .radio-inline + .radio-inline { margin-left: 0; }   /* a 10 px-es közt a TMD inline gap-je adja */
#product-product #product label.optionimage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: 0;
  padding: 0 7px;
  margin: 0 8px 8px 0;             /* + a TMD 10 px-es gap-je = a régi 8 + 10 */
  font-size: 14px;
  line-height: 1.2;
  color: var(--hb-text);
  background: var(--hb-accent);
  border: 1px solid var(--hb-accent);
  border-radius: 15px;
  cursor: pointer;
}
#product-product #product label.optionimage > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
#product-product #product label.optionimage:not(:has(> img)):hover,
#product-product #product label.optionimage:not(:has(> img)):has(> input:checked) { background: var(--hb-sale); border-color: var(--hb-text); }
#product-product #product label.optionimage:has(> img) { min-width: 0; padding: 0; font-size: 0; background: none; border: 0; }
#product-product #product label.optionimage > img {
  width: 60px;
  height: 60px;
  padding: 0;
  background: #fff;                /* kép-háttér, mint a skin .thumbnail szabályában (nem szín-token, hanem a képek fehér alapja) */
  border: 2px solid var(--hb-accent);
  border-radius: 50%;
  object-fit: cover;
}
#product-product #product label.optionimage:hover > img,
#product-product #product label.optionimage:has(> input:checked) > img { border-color: var(--hb-text); box-shadow: 0 0 0 2px var(--hb-sale); }
/* billentyűzet-fókusz (a rádió opacity 0): pill → arany körvonal, képes opció → arany gyűrű a képen (a kijelölt bordó glóriája helyett, amíg fókuszban) */
#product-product #product label.optionimage:not(:has(> img)):has(> input:focus-visible) { outline: 2px solid var(--hb-gold); outline-offset: 2px; }
#product-product #product label.optionimage:has(> input:focus-visible) > img { box-shadow: 0 0 0 3px var(--hb-gold); }
/* kötelező-csillag a címke után, mint a régin („Szín *”); a szín a skin csillag-színe (div.required .control-label:before) */
#product-product #product .form-group.required > .control-label::before { content: none; }
#product-product #product .form-group.required > .control-label::after { content: " *"; font-weight: 700; color: var(--hb-danger-text); }

/* --- 2.7. kosár-sor + kívánságlista / összehasonlítás · régi: mennyiség 58×38 (13 px, fehér, sugár 15) + KOSÁRBA egy sorban (228×40, 13 px nagybetű,
       háttér #588f27, sugár 15, kosár-ikon 30 px, köz 10), alatta két egyforma gomb 238×40 „KÍVÁNSÁGLISTÁRA TESZEM” / „ÖSSZEHASONLÍTOM” (12 px nagybetű,
       háttér #444349, köz 4), legalul az értékelés-sor; új: „Mennyiség” + teljes szélességű mező (34) + Kosárba (42, sugár 4), a szív/összehasonlítás két
       ikon-gomb a név FÖLÖTT · E55 (a +/− léptető = másolás-tétel; a feliratot a gomb title / data-original-title attribútuma adja — a Bootstrap-tooltip
       a title-t data-original-title-ba teszi át, ezért mindkettő)
       A „Mennyiség” felirat a régin nem látszik (qtyLabel 0×0) → vizuálisan rejtve (sr-only minta), a felolvasó megkapja.
       A mező magassága és betűje a 0.4 (közös, E72) szabályáé: 38 px, asztalon 13 px, ≤767 16 px (iOS-nagyítás ellen; a régin is 16 px 400-on) —
       itt NINCS felülírva; a 15 px-es sugár (régi: 0 15 15 0, a léptető jobb széle) a 0.4 „sugár 0”-jának tudatos felülírása (E55).
       ≤470 (régi mért, 400 px): léptető-hely 100 px, KOSÁRBA ikon nélkül (a Journal ≤470-en elrejtette). --- */
#product-product #product .form-group:has(> #button-cart) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
#product-product #product .form-group:has(> #button-cart) > label.control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#product-product #product .form-group:has(> #button-cart) > br { display: none; }
#product-product #product #input-quantity {
  flex: 0 0 60px;
  width: 60px;
  padding: 2px 6px;
  text-align: center;
  border: 1px solid var(--hb-text);
  border-radius: 15px;              /* 0.4 felülírás (sugár 0 → 15), E55 */
}
#product-product #product #button-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: auto;
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  border: 0;
  border-radius: 15px;
  box-shadow: none;
}
#product-product #product #button-cart::before { content: "\f07a"; font-family: FontAwesome; font-size: 20px; line-height: 1; margin-right: 10px; }
/* ≤470 (régi mért, 400 px): léptető-hely 100 px, KOSÁRBA ikon nélkül — az alapszabályok UTÁN áll (azonos erősség, a későbbi nyer) */
@media (max-width: 470px) {
  #product-product #product #input-quantity { flex-basis: 100px; width: 100px; }
  #product-product #product #button-cart::before { content: none; }
}
/* léptető + „Kérdezz a termékről!” · hb-453 (tulaj 10-07: „ezt a teljes szekciót ugyanúgy, mint a régi oldalon”) — a jelölést a hb.js 6. teszi be,
   JS nélkül a fenti sor marad. Régi mért (1440): .stepper 60×40, 1 px #eee keret; mező 58×38, padding 0 25 0 2, sugár 0 15 15 0, fehér; a ▲▼ jobbra,
   25 széles sötét oszlop; KOSÁRBA 228 + 5 px + KÉRDEZZ 177 (12 px nagybetű, háttér #444349, sugár 0, ? ikon) = a teljes sor, mint alatta a két gomb
   (itt arányosan: 228 : 177). 400 px: léptető 100, KOSÁRBA a sor többi része, a KÉRDEZZ új sorban, balra 5 px-re, 177 széles. */
#product-product #product .hb-stepper {
  position: relative;
  display: flex;
  flex: 0 0 60px;
  width: 60px;
  height: 40px;
  border: 1px solid var(--hb-head-line);
}
#product-product #product .hb-stepper > #input-quantity {
  flex: 1 1 auto;
  width: 100%;
  height: 38px;
  padding: 0 25px 0 2px;
  border: 0;
  border-radius: 0 15px 15px 0;
}
#product-product #product .hb-stepper-btns { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 25px; }
#product-product #product .hb-stepper-btns > button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--hb-text);
  background: var(--hb-bg);
  border: 0;
  border-left: 1px solid var(--hb-head-line);
}
#product-product #product .hb-stepper-btns > button + button { border-top: 1px solid var(--hb-head-line); }
#product-product #product .hb-stepper-btns > button:hover,
#product-product #product .hb-stepper-btns > button:focus-visible { background: var(--hb-accent); }
#product-product #product .form-group:has(> .hb-ask) > #button-cart { flex: 228 1 0; min-width: 0; }
#product-product #product .hb-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 177 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  margin-left: -5px;               /* a sor 10 px-es közéből 5 marad, mint a régin */
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--hb-text);
  background: var(--hb-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#product-product #product .hb-ask:hover,
#product-product #product .hb-ask:focus { color: var(--hb-text); background: var(--hb-accent); text-decoration: none; }
#product-product #product .hb-ask > .fa { margin-right: 6px; font-size: 14px; }
@media (max-width: 470px) {
  #product-product #product .hb-stepper { flex-basis: 100px; width: 100px; }
  #product-product #product .form-group:has(> .hb-ask) > #button-cart { flex: 1 1 calc(100% - 110px); }
  #product-product #product .hb-ask { flex: 0 0 177px; margin-left: 5px; }
}
#product-product #content > .row > div > .btn-group { display: flex; gap: 4px; width: 100%; margin: 0 0 10px; }
#product-product #content > .row > div > .btn-group > .btn {
  display: inline-flex;            /* + white-space normal: keskeny oszlopban (768 px-en a jobb oszlop 330 széles) a felirat a gombon belül */
  align-items: center;             /*   tördel, nem lóg ki (előtte 188 + 4 + 147 > 330); 1440 / 1024-en egy sorban marad */
  justify-content: center;
  flex: 1 1 0;
  float: none;
  height: 40px;
  padding: 0 5px;
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
  white-space: normal;
  text-transform: uppercase;
  color: var(--hb-text);
  background: var(--hb-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#product-product #content > .row > div > .btn-group > .btn:hover,
#product-product #content > .row > div > .btn-group > .btn:focus { background: var(--hb-accent); color: var(--hb-text); }
#product-product #content > .row > div > .btn-group > .btn::after { content: attr(title) attr(data-original-title); margin-left: 6px; }
/* ≤767 · régi 400 px: két egyforma, CSAK IKONOS gomb (178×40; a .btn-text display:none) → a felirat el; 360 / 320 px-en sem lóg ki
   (előtte 360-on a jobb margóba, 320-on túlcsordulásba lógott: 188 + 4 + 147 > 290) */
@media (max-width: 767px) {
  #product-product #content > .row > div > .btn-group > .btn::after { content: none; }
}
/* értékelés-sor · régi: középre zárt flex-sor (csillagok 90×15 + „0 értékelés alapján. - Értékeld” 14 px), a linkek aláhúzás nélkül.
   A 0.7 (E86) szövegközi-link aláhúzását itt TUDATOSAN visszavesszük: ez navigációs sor, nem folyószöveg (mint a 0.7 gyártó-betűsora). */
#product-product #content > .row > div > .rating { padding-top: 5px; }
#product-product #content > .row > div > .rating > p { text-align: center; }
#product-product #content > .row > div > .rating > p > a { text-decoration: none; }

/* --- 2.8. termékfülek · régi: ul flex, mb 1; li 20 % széles, mr 1; a: 13 px/300 Montserrat NAGYBETŰ, padding 10px 15px, lh 16,25, középre, háttér #588f27,
       aktív/hover #a41733, első/utolsó sarok 10 px; tartalom: háttér #444349, sugár 15, padding 16px 8px, margin 20 0 10; 400 px: li 100 %, egymás alatt,
       2 px köz; új: gyári kis fülek (15 px, sugár 4 4 0 0, aktív ZÖLD, többi BORDÓ), tartalom doboz nélkül · E58 (a skin .nav-tabs színei itt
       megfordítva, csak a termékoldal fülein — a kapcsolódó ocex_prodtabs füleit nem érinti)
       Asztalon a régi szerint NOWRAP, az utolsó fül jobb margója 0, a fülek 20 %-ról zsugorodhatnak: 5 fül (pl. Delano-fül, E57) is egy sorban marad
       (előtte 5 × 20 % + 5 px → az 5. fül új sorba tört). A nem aktív fülön belső árnyék (régi: inset 0 -5px 10px -5px rgba(0,0,0,.5)).
       Tartalom: #tab-description 15 px / 22,5 (régi .expand-content; a gyári stylesheet.css 13 px-e felülírva — a 0.8 ide hagyta), a leírás linkje
       fehér + aláhúzott, hover zöld: a 0.7 (E86) szövegközi-link döntése (a skin arany #tab-description a-ja helyett; a régin fehér, aláhúzás nélkül). --- */
#product-product #content > .row > div > ul.nav-tabs { display: flex; flex-wrap: wrap; border: 0; margin: 20px 0 1px; }
#product-product #content > .row > div > ul.nav-tabs > li { float: none; width: 20%; margin: 0 1px 0 0; }
@media (min-width: 768px) {
  #product-product #content > .row > div > ul.nav-tabs { flex-wrap: nowrap; }
  #product-product #content > .row > div > ul.nav-tabs > li { flex: 0 1 20%; width: auto; }
  #product-product #content > .row > div > ul.nav-tabs > li:last-child { margin-right: 0; }
}
#product-product #content > .row > div > ul.nav-tabs > li > a {
  display: block;
  margin: 0;
  padding: 10px 15px;
  font-family: var(--hb-font-head);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--hb-text);
  background: var(--hb-accent);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -5px 10px -5px rgba(0, 0, 0, .5);   /* árnyék, nem szín (régi mért) */
}
#product-product #content > .row > div > ul.nav-tabs > li:first-child > a { border-radius: 10px 0 0 10px; }
#product-product #content > .row > div > ul.nav-tabs > li:last-child > a { border-radius: 0 10px 10px 0; }
#product-product #content > .row > div > ul.nav-tabs > li.active > a,
#product-product #content > .row > div > ul.nav-tabs > li.active > a:hover,
#product-product #content > .row > div > ul.nav-tabs > li.active > a:focus,
#product-product #content > .row > div > ul.nav-tabs > li > a:hover,
#product-product #content > .row > div > ul.nav-tabs > li > a:focus { background: var(--hb-sale); border: 0; color: var(--hb-text); box-shadow: none; }
#product-product #content > .row > div > .tab-content { padding: 16px 8px; margin: 0 0 10px; background: var(--hb-surface); border-radius: 15px; }
#product-product #tab-description { font-size: 15px; line-height: 1.5; }
#product-product #tab-description a:not(.btn) { color: var(--hb-text); text-decoration: underline; }
#product-product #tab-description a:not(.btn):hover { color: var(--hb-accent); }
/* ≤767 · régi 400 px: minden fül külön pirula, mind a 4 sarka 10 px, 38 magas, egymás alatt (2 px köz) */
@media (max-width: 767px) {
  #product-product #content > .row > div > ul.nav-tabs > li { width: 100%; margin: 0 0 2px; }
  #product-product #content > .row > div > ul.nav-tabs > li > a,
  #product-product #content > .row > div > ul.nav-tabs > li:first-child > a,
  #product-product #content > .row > div > ul.nav-tabs > li:last-child > a { padding: 11px 15px; border-radius: 10px; }
}

/* --- 2.9. hosszú leírás összecsukva · régi: .expand-content max-height 200, alul 40 px-es elhalványulás, „Mutass többet” gomb (12 px, háttér #3f5765,
       padding 4px 6px, középen); új: a teljes leírás nyitva · E60 — CSAK a .hb-collapsed osztállyal él: az osztályt és a .hb-expand gombot a hb.js
       adja (másolás-tétel); JS nélkül a leírás nyitva marad, tartalom nem vész el. --- */
#product-product #tab-description.hb-collapsed { position: relative; max-height: 200px; overflow: hidden; }
#product-product #tab-description.hb-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--hb-surface));
}
#product-product .tab-content .hb-expand {
  display: block;
  margin: 8px auto 0;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--hb-text);
  background: var(--hb-primary);
  border: 0;
  cursor: pointer;
}

/* --- 2.10. kapcsolódó-cím zöld sávként · régi: a termék-körhinta „KAPCSOLÓDÓ TERMÉKEK” füle 499×38 (50 %), 14 px/300 Montserrat NAGYBETŰ, padding 10px 15px,
       háttér #588f27, mb 10; új: gyári h3 „Kapcsolódó termékek” 21 px/500 · E62 (a második, „Különleges ajánlatok” fül: ocex_prodtabs-példány — beállítás;
       annak egyfüles h3-ja ugyanezt a sávot kapja). Szelektor: CSAK a termék-sor UTÁNI h3 (a gyári product.twig-ben a kapcsolódó-cím közvetlenül
       a termék-sor után áll) — a content_top / content_bottom modulok h3-ja (E28/E29/E61/E63 beállítás-tételek) nem kapja meg a sávot --- */
#product-product #content > .row:has(> div > #product) + h3,
#product-product .ocex-prodtabs > h3 {
  display: block;
  width: 50%;
  padding: 10px 15px;
  margin: 20px 0 10px;
  font-family: var(--hb-font-head);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--hb-text);
  background: var(--hb-accent);
}
@media (max-width: 767px) {
  #product-product #content > .row:has(> div > #product) + h3,
  #product-product .ocex-prodtabs > h3 { width: 100%; }
}

/* --- 2.11. kép nélküli kártya a kapcsolódó sorban · új: img src="" (hiányzó képfájl: Cort Gold A6), csak az alt-szöveg látszik, a kártya képe
       összeesik; régi: nem volt ilyen · E65 — fehér, négyzetes doboz a kártyakép helyén, az alt-szöveg rejtve (az adat-javítás a tulajé) --- */
#product-product .product-thumb .image img[src=""] {
  display: block;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  color: transparent;
  font-size: 0;
  background: #fff;                /* a kártyakép fehér alapja, mint a skin .thumbnail-je */
}

/* --- 2.12. „Miért válassz minket?” előny-blokk horgai · régi: oldalsáv-cím 18 px/300 Montserrat, háttér #3f5765, padding 10, mb 10; elem padding 5,
       belső flex padding 4, sugár 5; ikon 45 px-es kör (#eb5858 / arany / zöld), 25 px; cím NAGYBETŰ, szöveg 13 px · E63 — a tartalom gyári HTML-modul
       (beállítás-tétel), ez csak a .hb-why jelölés kinézete; más oldalsáv-modult nem érint --- */
.hb-why > h3 {
  font-family: var(--hb-font-head);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 10px;
  margin: 0 0 10px;
}
.hb-why-item { display: flex; align-items: center; gap: 10px; padding: 9px; font-size: 13px; line-height: 1.5; border-radius: 5px; }
.hb-why-item > .fa {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  font-size: 25px;
  line-height: 45px;
  text-align: center;
  color: var(--hb-text);
  background: var(--hb-danger);
  border-radius: 50%;
}
.hb-why-item:nth-child(3) > .fa { background: var(--hb-gold); }
.hb-why-item:nth-child(4) > .fa { background: var(--hb-accent); }
.hb-why-item > div > b { display: block; text-transform: uppercase; }

/* ================================================================ 03-kosar.css ================================================================ */
/* hb-l4 · 3. szakasz: KOSÁR + PÉNZTÁR (checkout/cart, checkout/checkout, ÁSZF-modál; a mini-kosár E11 a hb-header.css-ben már kész)
   Mérés: régi hangszerbolt.hu (üres kosár, csak GET; a tételes régi kosár és a régi pénztár nem mérhető → 07-penztar-fiok-info.md 6–7. fej.,
   01-design-tokenek.md, a 0. szakasz régi belépés-lap mérése) ↔ new.hangszerbolt.hu (egy tétellel, saját elszigetelt kosár), 1440 + 400 px.
   A számok a régi mért / dokumentált értékei. Közös elemek (címsáv, legend-sáv, .btn kinézet, input-group gombok, morzsa, .form-control,
   kosárba-értesítő, rövid lap) a 0. szakaszé — itt csak hivatkozunk rájuk. Új token nincs; színek csak --hb-* tokennel.
   !important egyetlen helyen: az X-Shipping Pro INLINE style-ja ellen (3.4.).
   Javítás-kör (10-04, kaszkád- + hűség-cáfolat): 3.5 legend TÖRÖLVE (a 0.1b adja a régi értékeket), 3.1 input-group gomb TÖRÖLVE (a 0.2
   38 px-es szabálya az egyetlen), kétoszlopos kosár töréspontja 1025 → 1200 (1025–1199 között a tábla 573 px-e nem fért a bal oszlopba),
   kupon/utalvány címke a 400 px-es sávban a mező FÖLÉ, `#checkout-checkout label` → `#content`-re szűkítve. */

/* --- 3.1. kosár-tábla · régi: táblafej 12 px/700 NAGYBETŰ (token-doksi „Táblázat”; a keret színe a skiné marad: --hb-border-dark),
       kép-keret sugár 0 (Journal alap-sugár 0); új: fej 15 px/400, kép sugár 4 · E68 kieg.
       A mennyiség-frissít/-töröl és a kupon/utalvány „Beváltás” gomb 38 px-es magassága a 0. szakasz 0.2 szabályáé (#content .input-group-btn > .btn)
       — itt NEM duplikáljuk. (Mért: a 0.2 lh 36-ja az ikont 1 px-szel feljebb teszi, mint a 38 — ha kell, a 00-kozos.css-ben javítandó.) --- */
#checkout-cart .table > thead > tr > td {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
#checkout-cart .table .img-thumbnail { border-radius: 0; }
#checkout-cart .table > tbody > tr > td.text-right { white-space: nowrap; }   /* egységár / összesen („349 900Ft”) ne törjön két sorba a keskenyebb táblában */

/* --- 3.2. kosár-oldal elrendezése · régi (Journal skin cartPageBottomPosition=side): tábla balra, a panelek + összesítő + gombok
       jobbra, legfeljebb 400 px; a panel-csoport címe („Mi legyen a következő lépés?”) + súgó-sora rejtve; a két gomb egy sorban,
       a sávot kitöltik, mindkettő zöld (#588f27), hover acélkék (#3f5765); ≤1199 px a gyári egymás alatti sorrend marad (a Journal
       tabletje 1024-nél vált, de a tábla legkisebb szélessége 573 px — kép 40 + név 124 + cikkszám 91 + mennyiség 141 + 2×88 nowrap ár —
       1025-ön a 970-es containerből csak 510 px jutna a bal oszlopnak → levágás; 1200-on 1126 − 430 = 696 px, kifér).
       Új (1440): tábla 1336 széles, összesítő col-sm-4 offset-8 (455 px), gombok 142 / 96 px a két szélen, „Folytatom a vásárlást”
       szürke (#444349) · E68
       Megjegyzés: a két oszlop float, nem grid — a jobb oszlop három külön gyerek (#accordion, .row, .buttons), gridben a magas tábla
       szétnyújtaná a sorokat. A kupon/utalvány panel gyári col-sm-2 címkéje a 400 px-es sávban 61 px-re szűkülne (4–5 sor) → a mező FÖLÉ,
       egy sorban (a 0.4 mező + a 0.2 input-group gomb alatta teljes szélességben). --- */
#checkout-cart #content > h2,
#checkout-cart #content > h2 + p,
#checkout-cart #content > br { display: none; }
#checkout-cart #content > .row + .buttons .btn-default {       /* „Folytatom a vásárlást”: régi zöld, mint a Pénztár gomb */
  background: var(--hb-accent);
  color: var(--hb-text);
}
#checkout-cart #content > .row + .buttons .btn:hover,
#checkout-cart #content > .row + .buttons .btn:focus { background: var(--hb-primary); color: var(--hb-text); }
@media (min-width: 768px) {
  #checkout-cart #content > .row + .buttons { display: flex; flex-wrap: wrap; gap: 10px; }   /* a .pull-left/.pull-right float-ja flex-tagon nem él */
  #checkout-cart #content > .row + .buttons > div { flex: 1 1 auto; }                         /* auto: a hosszabb felirat („FOLYTATOM A VÁSÁRLÁST”) nem törik */
  #checkout-cart #content > .row + .buttons .btn { display: block; width: 100%; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
  /* ^ a 0.2 gomb-paddingja (15px 20px) itt 10 px-re szűkül: 20 px-szel a két gomb 241 + 169 + 10 = 420 > 400 → a második új sorba esne;
       10 px-szel 221 + 149 + 10 = 380, egy sorban (mért, 1440) */
}
@media (min-width: 1200px) {
  #checkout-cart #content { display: flow-root; }
  #checkout-cart #content > form { float: left; width: calc(100% - 430px); }
  #checkout-cart #content > #accordion,
  #checkout-cart #content > br + .row,
  #checkout-cart #content > .row + .buttons { float: right; clear: right; width: 400px; }
  #checkout-cart #content > br + .row { margin: 0; }
  #checkout-cart #content > br + .row > [class*="col-sm-"] { width: 100%; margin-left: 0; padding: 0; }
  #checkout-cart #content > .row + .buttons { margin-top: 0; }
  #checkout-cart #content > .buttons ~ * { clear: both; }     /* content_bottom (pl. a „Mások ezt is vették” blokk, E70) a két oszlop alá */
  #checkout-cart #accordion .panel-body > .control-label {    /* kupon / utalvány címke a 400 px-es sávban: egy sor, a mező fölött */
    display: block;
    float: none;
    width: auto;
    padding: 0 0 5px;
    text-align: left;
  }
  /* utalvány: a 368 px-es sorban a helykitöltő (205 px + 24 padding) + a „Beváltom az ajándékutalványt” gomb (188 px) = 417 > 368 → a mező
     teljes szélességű, a gomb alatta (a kupon egy sorban marad: 122 + 24 + 116 = 262, kifér) */
  #checkout-cart #collapse-voucher .input-group,
  #checkout-cart #collapse-voucher .input-group > .form-control,
  #checkout-cart #collapse-voucher .input-group-btn { display: block; width: 100%; }
  #checkout-cart #collapse-voucher .input-group > .form-control { float: none; }
  #checkout-cart #collapse-voucher .input-group-btn { margin-top: 5px; }
  #checkout-cart #collapse-voucher .input-group-btn > .btn { display: block; width: 100%; margin: 0; }
}

/* --- 3.3. szállításiköltség-becslő rejtése · régi: a panel rejtve (Journal skin: .panel-shipping{display:none}); új: látszik.
       VÉGLEGES: BEÁLLÍTÁS — Extensions › Extensions › Order Totals › Shipping › Edit › „Estimator” = Disabled (total_shipping_estimator = 0);
       addig CSS (:has — Chrome 105+, Firefox 121+); a beállítás után ez a blokk törölhető · E69 --- */
#checkout-cart #accordion > .panel:has(> #collapse-shipping) { display: none; }

/* --- 3.4. pénztár: szállítási / fizetési mód neve és leírása · régi: 14 px félkövér módnév, olvasható leírás (eltérés-lista);
       új: label 12 px/400 (gyári), a leírás 11 px az X-Shipping Pro INLINE style-jából (div.x-shipping-desc) → !important indokolt
       (a színét a skin már felülírja). A többi címke (mezőcímkék, 1. lépés rádiói) 15 px/400, mint a régi belépés-lap címkéi
       (0. szakasz régi mérése: label 15 px/400); #content-re szűkítve, hogy egy később bekapcsolt oldalsáv-modul címkéit ne érje · E73, uj-2 --- */
#checkout-checkout #content label { font-size: 15px; }
#checkout-checkout #collapse-shipping-method .radio label,      /* két id: a 15 px-es #content-szabály (2,0,1) fölé (2,1,1) */
#checkout-checkout #collapse-payment-method .radio label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
#checkout-checkout #collapse-shipping-method .radio label .x-shipping-desc {
  font-size: 13px !important;           /* X-Shipping Pro inline: font-size:11px */
  font-weight: 400;
  line-height: 18px;
  margin-top: 2px;
}

/* --- 3.5. pénztár-űrlap legend (2–3. lépés: „Személyes adatok”, „Cím”) · a 0. szakasz 0.1b szabályáé (#content legend: Montserrat 17 px/300,
       lh 25,5, fehér, háttér #3f5765, padding 0, margin 10px 0 — a régi regisztráció-lapon mérve, 1440 + 400 azonos). A korábbi saját blokk
       (padding 5px 10px, lh 22, margin-bottom 15) ELTÉRT a régitől és felülírta a közös szabályt → TÖRÖLVE; mérve a pénztáron: a legend a
       #content-ben áll, a 0.1b hat rá · uj-3 --- */

/* --- 3.6. pénztár 1. lépés címei („Új ügyfél”, „Regisztrált ügyfél”) · régi belépés-lap ugyanezen címei: h2.title 25 px/300 Montserrat,
       lh 30, fehér, háttér #3f5765, padding 5px 10px (0. szakasz 0.1. mérése; a régi pénztár maga nem mérhető); új: gyári 27 px/500,
       háttér nélkül · uj-4 · Összefésülve (10-07): a `#collapse-checkout-option h2` a 0.1. címsáv listájában, a saját másolat TÖRÖLVE --- */

/* --- 3.7. ÁSZF-modál · új: a teljes ÁSZF egy törzsben (1440: 4548 px, 400: 6483 px magas), a × csak az ablak tetején;
       régi: gyári modál (képpár nincs) → a törzs legfeljebb 70vh, belül görgethető, a × mindig látszik · E74 --- */
#modal-agree .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* --- 3.8. mini-kosár (E11) · régi: lenyíló 400 px; új: a hb-header.css 177–179. sora már adja (min-width 400, sugár 0, td.text-right nowrap;
       ≤767: calc(100vw - 16px), max 400) — mérve: a sorok nem esnek szét, ÚJ SZABÁLY NEM KELL. --- */

/* ================================================================ 04-fiok.css ================================================================ */
/* hb-l4 · 4. szakasz: FIÓK + INFORMÁCIÓS OLDALAK + KAPCSOLAT + GYÁRTÓK (≥768 px; 400 px-en csak „nem törik" — a mobil-elrendezés a mobil-szakaszé)
   Mérés: régi hangszerbolt.hu (Journal 3) ↔ new.hangszerbolt.hu, 1440 + 400 px; a számok a régi oldal mért értékei (l4\04-fiok\meres\*.json,
   l4\verify-fiok-huseg\meres\old_*.json).
   Épít a 0. szakaszra (címsáv, legend-sáv, gombok, morzsa, űrlapmezők, info-h3/h5, info-törzsszöveg) — azokat nem írja felül. Színek csak --hb-* tokennel (új token nincs).
   A régi #eee keret (kártya, csempe) → --hb-text-muted (#e6e6e6, a legközelebbi token). FontAwesome 4.7 a gyári témából (font-awesome.min.css).
   Javítás-kör (10-07, jav-fiok): 4.9 csak a gyártó-LISTA lapra (a /akai gyártó-terméklistát szétszedte); gombsor-clearfix; címke −15 px;
   nyitvatartás-sortörések; fiók-legend → a 0.1b-é; belépés „Fiók" cím + well-térköz; 250 px-es oldalsáv; kapcsolat: h1 rejtve a térkép mellett,
   „Írj nekünk!" sáv, 377 px-es kártyák, „Üzletünk címe", mobil-ikon. */

/* --- 4.1. belépés: „Fiók" címsáv + két oszlop keret nélkül, a gombok alul egy vonalban · régi: h1 „Fiók" a 0.1 sávjával (25 px/300, mag. 40,
       margin 0 0 10; 400 px: 22 px, mag. 36); .well: háttér nincs, keret 0, sugár 0, padding 20 20 0 0 (400 px: 10 20 10 0), flex-oszlop,
       .buttons margin-top auto → TOVÁBB és BELÉPÉS egy vonalban (y 565, 92×43 / 95×43); a két oszlop egyforma magas (.row flex), a két h2-sáv
       között 50 px (oszlopköz 30 + well jobb 20); alcím („Fiók regisztráció" / „Lépj be a fiókodba") nem volt; címke 15 px, padding 7 0 5;
       form-group margin 0 0 8; „Elfelejtett jelszó" fehér, aláhúzás nélkül, blokk, 10 px-re a jelszómező alatt · E75
       A gyári login.twig-ben nincs h1 → a „Fiók" cím a #content ::before-ja (:lang() szerint, mint a 4.2 „Fiók menü"-je; a heading_title is „Fiók";
       valódi h1 = twig-másolás, lásd copy). A h2 acélkék sávja a 0. szakaszé. A sor-flex csak ≥768: 400 px-en a col-sm-6 szélesség nélkül
       egymás mellé csúszna. A régi 1440-es tartalomdoboz 20 px alsó belső margóját (itt a #content-nek nincs) a well alsó 20 px-e adja.
       Összefésülve (10-07): a ::before címsáv-kinézete (asztali + 400-as ág) a 0.1-ben; itt csak a szöveg és a blokk-volta. --- */
#account-login #content::before { content: "Fiók"; display: block; }
#account-login #content:lang(en)::before { content: "Account"; }
#account-login .well {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 20px 10px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#account-login .well > h2 + p { display: none; }                      /* gyári alcím (strong) — a régin nem volt */
#account-login .well > form { flex: 1 1 auto; display: flex; flex-direction: column; }
#account-login .well > .btn,
#account-login .well > form > .btn { margin-top: auto; align-self: flex-start; }
#account-login .well label { font-size: 15px; padding: 7px 0 5px; margin: 0; }
#account-login .well .form-group { margin-bottom: 8px; }
#account-login .well .form-group > a { color: var(--hb-text); text-decoration: none; }   /* skin: a { --hb-text-muted } */
#account-login .well .form-group > a:hover,
#account-login .well .form-group > a:focus { color: var(--hb-accent); }                   /* régi body a:hover #588f27 (0.7) */
@media (min-width: 768px) {
  #account-login #content > .row { display: flex; flex-wrap: wrap; }
  #account-login #content > .row > .col-sm-6 { display: flex; float: none; }
  #account-login .well { padding: 20px 20px 20px 0; }
  #account-login .well .form-group > a { display: inline-block; margin-top: 10px; }    /* 400 px-en az 5.9 padding 10-e adja */
}

/* --- 4.2. fiókmenü az oldalsávban · régi: column_right 240 (padding 20 20 20 0 → belső 220); „Fiók menü" h3 22 px/700 Montserrat, fehér,
       háttér #3f5765, padding 10, margin 0 0 10 (mag. 46); linkek 13 px/700 NAGYBETŰ, fehér, lh 19,5, padding 6 0 (mag. 31,5), keret/háttér nincs,
       előtte „›" (icomoon, 12 px, 10 széles, jobbra 5); vendégként 9 link: Belépés / Regisztráció / Elfelejtett jelszó / Fiókom NEM volt benne · E76
       (a cím CSS-tartalom :lang() szerint — a tiszta megoldás a gyári account.twig hb-másolata, lásd copy; csak a fiók-oldalakon: div[id^="account-"]).
       A „Fiókom" csak VENDÉGKÉNT rejtett (ahol a Belépés link is a listában van): a belépett menü régi tartalma nem mérhető.
       Oldalsáv-szélesség ≥992: 250 px (15 + 220 + 15), mint a kategória-szakasz 1.1-ében (768–991 között marad a gyári 25/75). --- */
div[id^="account-"] > .row > #column-right .list-group { margin: 0 0 20px; }
div[id^="account-"] > .row > #column-right .list-group::before {
  content: "Fiók menü";
  display: block;
  font-family: var(--hb-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 10px;
  margin: 0 0 10px;
}
div[id^="account-"] > .row > #column-right .list-group:lang(en)::before { content: "Account menu"; }
div[id^="account-"] > .row > #column-right .list-group a.list-group-item {
  padding: 6px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 19.5px;
  text-transform: uppercase;
  color: var(--hb-text);
}
div[id^="account-"] > .row > #column-right .list-group a.list-group-item::before {
  content: "\203A";                                                 /* › */
  display: inline-block;
  width: 10px;
  margin-right: 5px;
  text-align: center;
}
div[id^="account-"] > .row > #column-right .list-group a.list-group-item:hover,
div[id^="account-"] > .row > #column-right .list-group a.list-group-item:focus,
div[id^="account-"] > .row > #column-right .list-group a.list-group-item.active { background: transparent; color: var(--hb-gold); }
div[id^="account-"] > .row > #column-right .list-group a[href*="route=account/login"],
div[id^="account-"] > .row > #column-right .list-group a[href*="route=account/register"],
div[id^="account-"] > .row > #column-right .list-group a[href*="route=account/forgotten"],
div[id^="account-"] > .row > #column-right .list-group:has(> a[href*="route=account/login"]) > a[href*="route=account/account"] { display: none; }
@media (min-width: 992px) {
  div[id^="account-"] > .row > #column-right.col-sm-3 { width: 250px; }
  div[id^="account-"] > .row > #content.col-sm-9 { width: calc(100% - 250px); }
}

/* --- 4.3. fiók-űrlapok: címke a mező fölött, mezősorrend, csillag, rádiók · régi regisztráció: #account flex-oszlop, sorrend E-mail → Telefon →
       Vezetéknév → Keresztnév (mező y 409/490/570/651); címke 15 px, padding 7 0 5, teljes szélességű, bal széle = mező = legend (x 100); mező
       500 széles; form-group margin 0 0 8; kötelező-csillag a címke UTÁN 17 px/400 (régi #eb5858 — itt a --hb-danger-text, lásd risks);
       Hírlevél Igen/Nem 15 px / lh 22,5, padding-top 0 (400 px-en a régi is 12 px); a Hírlevél-blokk előtt 28 px (a többi legend előtt 8) · E77
       (CSS-sel, ahogy a régi Journal is: a Tab-sorrend a HTML-t követi → végleges = twig/esemény, lásd copy) + uj-2 (címke a mező fölött).
       A legend-sáv a 0. szakasz 0.1b-jéé (régi: padding 0, lh 25,5 — itt nincs rá külön szabály). A gyári .form-horizontal .form-group −15 px-es
       oldalmargóját és az oszlopok 15 px-es belső margóját nullázzuk (különben a címke 15 px-et lóg balra). Mérve: regisztráció, elfelejtett
       jelszó, kapcsolat; a belépve elérhető fiók-űrlapokra (címjegyzék, adatok, jelszó, visszaküldés) ugyanez a szabály fut, mérés nélkül. --- */
#account-register fieldset#account { display: flex; flex-direction: column; }
#account-register fieldset#account > .form-group:has(#input-email) { order: 1; }
#account-register fieldset#account > .form-group:has(#input-telephone) { order: 2; }
#account-register fieldset#account > .form-group:has(#input-lastname) { order: 3; }
#account-register fieldset#account > .form-group:has(#input-firstname) { order: 4; }
#account-register fieldset#account > .form-group:has([name^="custom_field"]) { order: 5; }
#account-register #content fieldset:has(input[name="newsletter"]) { margin-top: 20px; }
div[id^="account-"] #content .form-horizontal .control-label,
#information-contact #content .form-horizontal .control-label {
  float: none;
  width: 100%;
  padding: 7px 0 5px;
  margin: 0;
  font-size: 15px;
  text-align: left;
}
div[id^="account-"] #content .form-horizontal .form-group > [class*="col-sm-"],
#information-contact #content .form-horizontal .form-group > [class*="col-sm-"] { float: none; width: 100%; padding-left: 0; padding-right: 0; }
div[id^="account-"] #content .form-horizontal .form-group,
#information-contact #content .form-horizontal .form-group { margin: 0 0 8px; }
/* uj-5: a reCAPTCHA v3 csoportjának üres címkéje (<label class="col-sm-2 control-label"></label>, a jelvény position: fixed) a fenti
   szabállyal 12 px-es, a sorral együtt 23,5 px-es üres sáv lett az utolsó mező és a gombsor között (regisztráció, kapcsolat) → rejtve */
div[id^="account-"] #content .form-horizontal .control-label:empty,
#information-contact #content .form-horizontal .control-label:empty { display: none; }
div[id^="account-"] #content .form-horizontal input.form-control,
div[id^="account-"] #content .form-horizontal select.form-control,
#information-contact #content .form-horizontal input.form-control { max-width: 500px; }
div[id^="account-"] #content div.required .control-label::before,
#information-contact #content div.required .control-label::before { content: none; }
div[id^="account-"] #content div.required .control-label::after,
#information-contact #content div.required .control-label::after {
  content: " *";
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--hb-danger-text);
}
@media (min-width: 768px) {
  div[id^="account-"] #content .form-horizontal .radio-inline { font-size: 15px; line-height: 22.5px; padding-top: 0; }
}

/* --- 4.4. fiók- és kapcsolat-gombsor · régi .buttons: flex, margin 20 0 0, a tartalomdoboz 20 px alsó belső margója, egy gomb (és a
       regisztráció adatvédelmi pipája) BALRA, két gomb (Vissza / Tovább) a két szélen; új: .buttons 0 magas (úsztatott .pull-right/.pull-left),
       a gomb jobbra, a doboz aljára tapad · E79
       A flex a .pull-right float !important-ját hatástalanítja (flex-elemen a float nem él) — !important nem kell. A gyári .buttons.clearfix
       ::before/::after-je (content " ", display table) flex-elemként a space-between-t középre tolná → content none.
       Regisztráció adatvédelmi sora (≥768): régi 12 px / lh 18, a link fehér, aláhúzás nélkül (a 0.7 kifejezetten ide hagyja az a.agree-t). --- */
div[id^="account-"] #content .buttons,
#information-contact #content .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}
div[id^="account-"] #content .buttons::before,
div[id^="account-"] #content .buttons::after,
#information-contact #content .buttons::before,
#information-contact #content .buttons::after { content: none; }
div[id^="account-"] #content .buttons .pull-right,
div[id^="account-"] #content .buttons .pull-left,
#information-contact #content .buttons .pull-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#account-register #content .buttons a.agree { color: var(--hb-text); text-decoration: none; }
@media (min-width: 768px) {
  #account-register #content .buttons .pull-right { font-size: 12px; line-height: 18px; }
}

/* --- 4.5. kapcsolat: beágyazott térkép fent + „Írj nekünk!" űrlapcím · régi: „Itt találsz minket" h3.module-title 22 px/700 Montserrat, fehér,
       háttér #3f5765, padding 10, margin 0 0 10 (mag. 46), a modul a tartalomdoboz TELJES szélességén (1280, a kártyák 25 px-szel beljebb);
       iframe 100 % × 150 (400 px-en is 150), keret 0; oldalcím (h1) NEM volt; az űrlap címe „Írj nekünk!" ugyanez a 46 px-es sáv · E80 + E83
       A tartalom = gyári HTML-modul a Contact elrendezés content_top pozíciójában (lásd settings). A gyári html.twig kimenete
       <div><h2>Heading</h2>{html}</div> → a cím lehet a modul Heading mezője (h2) VAGY a HTML-ben <h3 class="hb-mod-title">; a térkép burka
       <div class="hb-contact-map"><iframe …></iframe></div>. Ugyanez a címsáv az infó-oldalsáv „Üzletünk" moduljára (4.8).
       A kapcsolat-űrlap legendje nem a 0.1b 17 px-es sávja, hanem ez (a 0.1b kommentje szerint a kapcsolat-szakaszé); a szöveg = Language Editor.
       A gyári „Kapcsolat" h1 a térkép mellett vizuálisan rejtett (sr-only minta: SEO/felolvasó megmarad); térkép-modul nélkül a 0.1 sávja látszik. --- */
#information-contact #content .hb-mod-title,
#information-contact #content div:has(> .hb-contact-map) > h2,
#information-contact #content form legend,
#information-information #column-right .hb-mod-title,
#information-information #column-right div:has(> .hb-gallery) > h2 {
  font-family: var(--hb-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hb-text);
  background: var(--hb-primary);
  padding: 10px;
  margin: 0 0 10px;
}
#information-contact #content:has(.hb-contact-map) > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#information-contact #content .hb-contact-map { margin: 0 0 20px; background: var(--hb-surface); }
#information-contact #content .hb-contact-map iframe { display: block; width: 100%; height: 150px; border: 0; }
#information-contact #content:has(.hb-contact-map) .panel-body .btn-info { display: none; }   /* a „Megnézem Google Térképen" gomb a térkép mellett felesleges */
@media (min-width: 768px) {
  #information-contact #content > div:has(> .hb-contact-map) { margin-left: -15px; margin-right: -15px; }   /* a .container széléig, mint a 0.3 morzsa */
}

/* --- 4.6. kapcsolat: ikonos elérhetőség-kártyák + kétoszlopos elrendezés · régi kártya (.info-block): 377 széles, háttér #505050, 1 px #eee,
       sugár 5, padding 10, mag. 67 (nyitvatartás 85), köztük 10; ikon 45×45 / 30 px balra (térképtű, OKOSTELEFON, boríték, óra), a szöveg 66 px-nél
       kezdődik; cím 14 px/700 NAGYBETŰ lh 21, margin 0 0 3 („ÜZLETÜNK CÍME", „TELEFONOS ELÉRHETŐSÉGÜNK", „NYITVATARTÁS"); szöveg 13 px lh 19,5;
       kártyák 377, köz 55, űrlap 813 · E81 + E83
       A gyári contact.twig oszlopai tartalom szerint: [kép, ha van] → cím+address+gomb → telefon(+fax) → nyitvatartás(+megjegyzés); a kép-oszlop
       rejtve (a régin nem volt). Az első kártya címe a gyáriban a bolt neve (config_name, nem nyelvi kulcs) → CSS-tartalom „Üzletünk címe"
       (:lang() szerint, mint a 4.2); a többi kártyacím és a nyitvatartás szövege = beállítás (lásd settings). A 4. „Írj e-mailt!" kártya = másolás
       (a gyári vezérlő nem adja át az e-mail címet); „Elérhetőségünk" h3 a régin nem volt. Sortörések: a cím utáni, a következő cím előtti és a
       záró dupla <br> rejtett, a nyitvatartás nl2br-sorai maradnak. Rács ≥768: 1fr/2fr (768–991 px-en a 377 px-es kártya mellett 288 px-es űrlap
       maradna), ≥992: 377 px + 55 + a többi. --- */
#information-contact #content > h3:has(+ .panel) { display: none; }
#information-contact #content > .panel {
  margin: 0 0 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#information-contact #content > .panel > .panel-body { padding: 0; }
#information-contact #content > .panel > .panel-body::before,
#information-contact #content > .panel > .panel-body::after { content: none; }
#information-contact .panel-body > .row { display: flex; flex-direction: column; gap: 10px; margin: 0; }
#information-contact .panel-body > .row::before,
#information-contact .panel-body > .row::after { content: none; }
#information-contact .panel-body > .row > .col-sm-3:has(> img.img-thumbnail) { display: none; }
#information-contact .panel-body > .row > .col-sm-3 {
  position: relative;
  float: none;
  width: 100%;
  min-height: 67px;
  padding: 10px 10px 10px 66px;
  background: var(--hb-bg);
  border: 1px solid var(--hb-text-muted);
  border-radius: 5px;
  font-size: 13px;
  line-height: 19.5px;
}
#information-contact .panel-body > .row > .col-sm-3::before {
  content: "\f041";                                                 /* fa-map-marker — cím */
  position: absolute;
  left: 10px;
  top: 10px;
  width: 45px;
  height: 45px;
  font: normal 30px/45px FontAwesome;
  text-align: center;
  color: var(--hb-text);
}
#information-contact .panel-body > .row > .col-sm-3:has(> address) + .col-sm-3::before { content: "\f10b"; }                /* fa-mobile (régi: okostelefon) */
#information-contact .panel-body > .row > .col-sm-3:has(> address) + .col-sm-3 + .col-sm-3::before { content: "\f017"; }   /* fa-clock-o */
#information-contact .panel-body > .row > .col-sm-3 > strong {
  display: block;
  font-family: var(--hb-font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-transform: uppercase;
  margin: 0 0 3px;
}
#information-contact .panel-body > .row > .col-sm-3:has(> address) > strong { font-size: 0; }   /* a bolt neve helyett ↓ */
#information-contact .panel-body > .row > .col-sm-3:has(> address) > strong::after {
  content: "Üzletünk címe";
  font-size: 14px;
  vertical-align: top;                                              /* a 0 px-es betű alapvonala nélkül a sor 26 px lenne, nem 21 */
}
#information-contact .panel-body > .row > .col-sm-3:has(> address) > strong:lang(en)::after { content: "Our address"; }
#information-contact .panel-body > .row > .col-sm-3 > strong + br,
#information-contact .panel-body > .row > .col-sm-3 > br:has(+ strong),
#information-contact .panel-body > .row > .col-sm-3 > br + br:last-child { display: none; }
#information-contact .panel-body > .row > .col-sm-3 > address { margin: 0; line-height: 19.5px; }
#information-contact .panel-body > .row > .col-sm-3 > .btn-info { margin-top: 6px; }
#information-contact .panel-body > .row > .col-sm-3 > strong ~ strong { margin-top: 10px; }     /* Fax / Megjegyzés ugyanabban a kártyában */
#information-contact #content .form-horizontal textarea.form-control { height: 100px; }        /* régi Üzenet mező 813×100 */
/* hb-457/458 (tulaj 10-07) — a hb information/contact.twig jelölése: a térkép és a virtuális séta a címes kártyában („mehetnek mindketten a
   fenti dobozba, ahol az üzlet címe található”), a kártya teljes belső szélességén (az ikon-sáv alá is: −56 px), egyenként 150 px (mint a
   4.5 térképsávja); a három telefonszám külön link, soronként egy. */
#information-contact .panel-body > .row > .col-sm-3 > .hb-contact-embed { margin: 10px 0 0 -56px; }
#information-contact .hb-contact-embed iframe { display: block; width: 100%; height: 150px; border: 0; background: var(--hb-surface); }
#information-contact .hb-contact-embed-title {
  display: block;
  margin: 0 0 3px;
  font-family: var(--hb-font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-transform: uppercase;
}
#information-contact .hb-contact-tel { white-space: nowrap; }
@media (min-width: 768px) {
  #information-contact #content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 30px;
    align-content: start;
    align-items: start;
  }
  #information-contact #content > * { grid-column: 1 / -1; min-width: 0; }
  #information-contact #content > .panel { grid-column: 1; }
  #information-contact #content > form.form-horizontal { grid-column: 2; }
}
@media (min-width: 992px) {
  #information-contact #content { grid-template-columns: minmax(0, 377px) minmax(0, 1fr); column-gap: 55px; }
}

/* --- 4.7. kapcsolat: „Üzleteink" gyári bolt-lista rejtve · régi: nem volt; új: h3 + #accordion (MusicMinutes, a bolt adatai kétszer) · E82
       Végleges: System > Settings > bolt szerkesztése > Store fül > Store Location — a MusicMinutes pipája le (akkor a gyári twig nem is rendereli). --- */
#information-contact #content > h3:has(+ #accordion),
#information-contact #content > #accordion { display: none; }

/* --- 4.8. információs oldalak: „Üzletünk" fotógaléria az oldalsávban + alsó térköz · régi: column_right 240 (padding 20 20 20 0 → belső 220),
       „Üzletünk" h3 22 px/700 sáv (mag. 46), 8 bélyegkép 100×100 → 66,66 px-es 3 oszlopos rács, köz 10 (lightGallery); mobilon rejtve;
       az utolsó bekezdés alatt 35 px (p 15 + a tartalomdoboz 20) · E85 + uj-4
       Tartalom = gyári HTML-modul az Information elrendezés column_right pozíciójában (lásd settings): Heading „Üzletünk" (→ h2, a 4.5 sávja)
       + <div class="hb-gallery"><a href="…"><img src="…" alt="…"></a>×8</div>. A gyári column_right col-sm-3 hidden-xs → mobilon magától rejtett.
       Oldalsáv ≥992: 250 px (mint a 4.2 és az 1.1) → a bélyegek (220 − 2×10) / 3 = 66,7 px, mint régen. A törzsszöveg 15 px-e a 0.8-é.
       Alsó térköz: a gyári p margó 10 + 25 = 35. --- */
#information-information #content { padding-bottom: 25px; }
#information-information #column-right .hb-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 30px;
}
#information-information #column-right .hb-gallery a { display: block; }
#information-information #column-right .hb-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
@media (min-width: 992px) {
  #information-information > .row > #column-right.col-sm-3 { width: 250px; }
  #information-information > .row > #content.col-sm-9 { width: calc(100% - 250px); }
}

/* --- 4.9. gyártók LISTA-lapja: betűnkénti sötét fejlécsáv + keretes csempék · régi: h2.manufacturer-letter 30 px/400 Montserrat, fehér, háttér
       #444349, padding 7 10, margin 0 0 5 (mag. 50), a csoport után 20; csempe a.image-card 168×190: 1 px #eee, sugár 3, padding 8, flex-oszlop,
       logó 150×150 + név 15 px középen, 5 egy sorban (1000 px-es tartalom, 183-as rács, 15 jobb/alsó köz); mobilon 1 egy sorban · E87
       A gyári manufacturer_list.twig betű-h2-jének VAN id-ja (<h2 id="A">), a gyártó-oldalé (manufacturer_info, /akai — ugyanaz a
       #product-manufacturer burok, a lap címe id nélküli h2) NINCS → a sáv `h2[id]`, a rács csak ahol betű-h2 van (:has(> h2[id])).
       A lista 4-es .row-okba tördel → ≥768: .row display:contents, a cellák a #content rácsának elemei; minden más (h1, tárgymutató, betű-h2,
       modulok) teljes szélességű. Rács: auto-fill minmax(190, 1fr) → a kategória-szakasz oldalsávjával (1086 px) 5/sor, mint régen; oldalsáv
       nélkül (1336) 6/sor. 400 px-en a col-sm-3 nem úszik → természetes 1/sor (= régi mobil). Logó nincs (a gyári vezérlő nem adja át) →
       csak név a csempén; a logós változat = másolás (lásd copy). A csempe-szabályok :has() nélkül (régi böngészőben is keretes a név). --- */
#product-manufacturer #content > h2[id] {
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  background: var(--hb-surface);
  padding: 7px 10px;
  margin: 20px 0 5px;
}
#product-manufacturer #content > p + h2[id] { margin-top: 0; }
#product-manufacturer #content > .row > .col-sm-3 { margin: 0 0 15px; }
#product-manufacturer #content > .row > .col-sm-3 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 8px;
  border: 1px solid var(--hb-text-muted);
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  color: var(--hb-text);
}
#product-manufacturer #content > .row > .col-sm-3 > a:hover,
#product-manufacturer #content > .row > .col-sm-3 > a:focus { border-color: var(--hb-gold); color: var(--hb-gold); }
@media (min-width: 768px) {
  #product-manufacturer #content:has(> h2[id]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    column-gap: 15px;
    align-content: start;
  }
  #product-manufacturer #content:has(> h2[id]) > :not(.row) { grid-column: 1 / -1; }
  #product-manufacturer #content:has(> h2[id]) > .row { display: contents; }
  #product-manufacturer #content:has(> h2[id]) > .row::before,
  #product-manufacturer #content:has(> h2[id]) > .row::after { content: none; }
  #product-manufacturer #content:has(> h2[id]) > .row > .col-sm-3 { float: none; width: auto; min-width: 0; padding: 0; }
}

/* ================================================================ 05-mobil.css ================================================================ */
/* hb-l4 · 5. szakasz: MOBIL (≤767 px) — minden lap a termékoldal kivételével (E100, E101, E103, E104, E105, E30 + érintési célok)
   Mérés: régi hangszerbolt.hu (Journal 3, csak GET) ↔ new.hangszerbolt.hu, 400 px (Front(mobile=True)) + 360 px ellenőrzés;
   a számok a régi oldal mért értékei. Betöltés: gyári stylesheet → hb.stylesheet → hb-l2 → hb-header → hb-product → 0.–4. szakasz → EZ.
   CSAK @media (max-width: 767px) blokk: az asztali kártya-rácsot (≥768) a kategória-szakasz írja. Színek csak --hb-* tokennel.
   Közös elemet (gomb, mező, lapozó) és modul-bőrt (ocex_filter, categoryrefine, ocex_banner, ocex_carousel, ocex_prodtabs) NEM ír felül (TEMA-08):
   a lapozó mobil-szabálya a 0. szakasz 0.11-e, a választók 16 px-e a 0.4-é; a szűrő-fiók és a kezdőlapi modulok mobil-hibái modul-tételek.
   Javítás-kör (10-07, jav-mobil): kosár-név tördel (820 px-es nézet volt); 5.7 szűrő-bőr törölve; mennyiség-mező, btn-info, lapozó → 0. szakasz;
   kártya-ikon 17 / 22 px, név-link 40 px, 170 px-es kártya; eszköztár a régi vonalaival; „Keresés finomítása" 2/sor csempe (5.10); címke 13 px. */

@media (max-width: 767px) {

  /* --- 5.1. terméklista: soronként 2 kompakt kártya · régi 400 px: #content padding 20, .product-layout 180 (padding 5) → kártya 170×323
         x 25 / 205-ön, kép 170×170 (1:1, fehér), alatta ikonsor KÖZÉPEN (táska 35×35 zöld, sugár 5, ikon 17 px; szív / összehasonlítás 35×28
         háttér nélkül, ikon 22 px), név Montserrat 15 px/700, lh 19,5, középre, margin-top 7; ár 14 px középre, margin 5 0 7;
         rövid leírás / nettó ár / gyártó NINCS · E100
         A rács a gyári .row-ra megy (:has) — az ocex_filter szűrt listája is ebbe a .row-ba (#ocex-filter-results) kerül, .product-list kártyákkal,
         ezért a szelektor nem függ a .product-grid / .product-list osztálytól. Az akciós lap gyökere is #product-search (gyári special.twig).
         Érintési cél: a 3 ikon-gomb 40×40 (régi 35 — szándékos), a név-link blokk, min. 40 px magas. --- */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 10px;                   /* 15 + 10 = 25 px a képernyő szélétől → 400 px-en 170 px-es kártya x 25 / 205-ön (régi) */
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout)::before,
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout)::after { content: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout {
    float: left;                      /* :has nélküli böngésző: úszó 50 % (lépcsőzhet, de 2/sor) */
    width: 50%;
    padding: 0 5px;
    margin: 0;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .product-layout) > .product-layout {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout > .product-thumb {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    border: 0;
    overflow: visible;
    text-align: center;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout > .product-thumb > .image {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout > .product-thumb > .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout > .product-thumb > div:not(.image) {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin: 0;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .button-group {
    order: -1;                        /* ikonsor a kép ALÁ, a név fölé (régi sorrend: kép → ikonok → név → ár) */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .button-group button {
    float: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    font-size: 22px;                  /* szív / összehasonlítás ikon (régi 22 px) */
    line-height: 40px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .button-group button:first-child {
    border-radius: 5px;
    font-size: 17px;                  /* táska-ikon (régi 17 px) */
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .button-group button > .fa { font-size: inherit; }   /* gyári stylesheet.css: .fa { font-size: 14px } */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .button-group button + button {
    background: transparent;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .caption {
    flex: 1 0 auto;
    min-height: 0;
    margin: 0;
    padding: 0 5px;
    text-align: center;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .caption h4 {
    font-family: var(--hb-font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 19.5px;
    margin: 7px 0 0;
    padding: 0;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .caption h4 > a {
    display: block;                   /* a 2 soros inline név 38,5 px magas volt → érintési cél ≥ 40 */
    min-height: 40px;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .caption > p:not(.price),
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .price-tax { display: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .price {
    font-size: 14px;
    line-height: 21px;
    margin: 5px 0 7px;
    text-align: center;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row > .product-layout .rating { padding-bottom: 5px; }

  /* --- 5.2. lista-eszköztár egy sorban · régi 400 px: 360×49 (1 + 10 + 27 + 10 + 1), felül-alul 1 px #eee vonal, alatta 25 px; rács/lista 25×25,
         összehasonlítás-ikon piros számlálóval, jobbra „Alapértelmezett" 100×26 és „12" 46×26 választó (13 px #444349 fehéren), CÍMKE NÉLKÜL;
         új: „Termék összehasonlítás (0)" sor + alatta „Rendezés:" + csonka választó és „Listázás:" (2 sor, 94 px) · E101
         A rács/lista váltó gyári hidden-xs — mobilon rejtve marad (a 2 oszlopos rács a lista-nézetet úgysem követi); a címkék rejtve,
         a választók 40 px magasak (érintés); 16 px-ük a 0. szakasz 0.4-éé (iOS-nagyítás, E72). A piros kör-számláló: E32 (beállítás). --- */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 5px 25px;               /* 15 + 5 = 20 px a szélektől → 400 px-en 360 széles sáv (régi) */
    padding: 4px 0;
    border-top: 1px solid var(--hb-text-muted);
    border-bottom: 1px solid var(--hb-text-muted);
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort)::before,
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort)::after { content: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
  }
  /* összehasonlítás-link (col-sm-6) fix, 2 sorba törve · rendezés (col-md-4) rugalmas · darabszám (col-md-3) fix — 400 és 360 px-en is EGY sor */
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) > .col-sm-6 { flex: 0 1 auto; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) > .col-md-4.col-xs-6 { flex: 1 1 100px; min-width: 100px; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) > .col-md-3.col-xs-6 { flex: 0 0 auto; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) .form-group { margin: 0; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) #compare-total {
    display: flex;
    align-items: center;
    max-width: 120px;
    min-height: 40px;
    padding: 0;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    white-space: normal;
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) .input-group { display: block; width: auto; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) .input-group-addon { display: none; }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) .input-group-sm > select.form-control {
    display: block;
    float: none;
    width: 100%;
    height: 40px;
    padding: 6px 8px;
    border-radius: 0;
    color: var(--hb-text-inverse);    /* régi #444349 fehér mezőn (gyári #555) */
  }
  :is(#product-category, #product-search, #product-manufacturer) #content > .row:has(> .col-xs-6 > .input-group > #input-sort) #input-limit { width: 72px; }   /* „100" 16 px-en + nyíl */

  /* --- 5.3. lapozó + találat-felirat: a 0. szakasz 0.11-e (közös elem, minden lista-lapon — a fiók-listákon is) · E101 --- */

  /* --- 5.4. morzsa (E103): a 0. szakasz ≤767-es szabálya (li inline, overflow-wrap anywhere, 12 px) elég — hosszú terméknévnél
         is tördel, mérve: scrollWidth = 400. Itt nincs külön szabály. --- */

  /* --- 5.5. mobil kosár: tábla → kártyás sorok · régi: mobilra igazított kosár, oldalra görgetés nélkül (üres kosáron mérve; modell-oszlop
         ≤768 rejtve — token-doksi); új: gyári 6 oszlopos tábla 736 px szélesen a 370 px-es .table-responsive-ban (belső vízszintes görgetés) · E104
         A thead rejtve, a sor rács: kép balra (60 px), jobbra név + opciók, mennyiség-léptető, végösszeg félkövéren; modell és egységár rejtve.
         A cellák tördelnek (white-space: normal): a bootstrap ≤767 td nowrap-ja + a 3. szakasz td.text-right nowrap-ja hosszú névnél
         820 px-es elrendezési nézetet adott. A mennyiség-mező és gombjai a 0. szakaszéi (38 px, E72). --- */
  #checkout-cart #content .table-responsive {
    overflow: visible;
    border: 0;
    margin-bottom: 15px;
  }
  #checkout-cart #content .table-responsive > .table {
    display: block;
    width: 100%;
    margin: 0;
  }
  #checkout-cart #content .table-responsive > .table > thead { display: none; }
  #checkout-cart #content .table-responsive > .table > tbody { display: block; }
  #checkout-cart #content .table-responsive > .table > tbody > tr {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--hb-border-dark);
  }
  #checkout-cart #content .table-responsive > .table > tbody > tr:last-child { border-bottom: 1px solid var(--hb-border-dark); }
  #checkout-cart #content .table-responsive > .table > tbody > tr > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #checkout-cart #content .table-responsive > .table > tbody > tr > td:nth-child(1) { grid-row: 1 / span 3; }
  #checkout-cart #content .table-responsive > .table > tbody > tr > td:nth-child(1) .img-thumbnail { width: 60px; height: auto; padding: 2px; border-radius: 0; }
  #checkout-cart #content .table-responsive > .table > tbody > tr > td:nth-child(3),
  #checkout-cart #content .table-responsive > .table > tbody > tr > td:nth-child(5) { display: none; }
  #checkout-cart #content .table-responsive > .table > tbody > tr > td:nth-child(6) {
    font-size: 16px;
    font-weight: 700;
  }
  #checkout-cart #content td small { font-size: 13px; }
  /* „Folytatom a vásárlást" / „Megrendelés": egymás alatt, teljes szélességben (régi: egyenlő szélességű gombpár, flex 1) */
  #checkout-cart #content .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #checkout-cart #content .buttons .pull-left,
  #checkout-cart #content .buttons .pull-right { width: 100%; }
  #checkout-cart #content .buttons .btn { display: block; width: 100%; }
  /* kupon / utalvány panel-fejek: 19 px-es link → 40 px-es érintési sáv */
  #checkout-cart #content .panel-title > a {
    display: block;
    padding: 12px 0;                  /* ~17,6 px-es sor + 24 ≈ 41,6 px (mérve: 10 px-szel 38, 11-gyel 39,6 — a <40 szűrőn fennakadt) */
  }

  /* --- 5.6. termék-összehasonlítás: oldalra görgethető tábla, ragadós első oszloppal · régi: saját Journal-tábla (nem mérhető);
         új: gyári tábla .table-responsive nélkül, 2 terméknél 112/131/129 px-es cellákba zsúfolva, 3+ terméknél kilóg · E105
         A tábla maga lesz a görgető doboz (display block + overflow-x), a tulajdonság-oszlop ragad. A termék-cellák szélességét a gombok
         („ELTÁVOLÍTÁS", a 0. szakasz gombja) min-tartalma adja: 2 terméknél ~20 px belső görgetés marad (a közös gombot nem szűkítjük). --- */
  #product-compare #content .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
  }
  #product-compare #content .table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 110px;
    max-width: 130px;
    background: var(--hb-bg);
    font-weight: 700;
  }
  #product-compare #content .table .img-thumbnail { max-width: 130px; }
  #product-compare #content .table .btn-block { white-space: normal; }

  /* --- 5.7. (törölve, 10-07) az ocex_filter mobil fiókjának bőre a modulé (TEMA-08) — a hibái modul-tételek (copy: „ocex_filter modul-javítás"),
         a feliratok Language Editor-tételek (heading_module, text_reset). --- */

  /* --- 5.8. gyártó-lista: betű-index 40×40-es érintési célok · régi: „Gyártó tárgymutató:" + ~26 px-es betűk több sorban; új: 11 px széles,
         20 px magas linkek · uj-2 — csak a LISTA-lapon (betű-h2[id] van; a /akai gyártó-oldalon nincs); a név-csempék a 4. szakasz 4.9-éi
         (400 px-en 1/sor = régi mobil) --- */
  #product-manufacturer #content:has(> h2[id]) > p > a {
    display: inline-block;
    min-width: 40px;
    line-height: 40px;
    text-align: center;
  }

  /* --- 5.9. érintési célok + betű ≥ 13 px a többi lapon · régi 400 px: belépés- és kapcsolat-címke 12 px, kereső-jelölők 13×13, címkéjük 12 px;
         új: belépés „Elfelejtett jelszó" 20 px-es sor; címke 15 px (4. szakasz: belépés (1,1,1), kapcsolat (2,2,0)) / 12 px (kereső, kosár-panelek)
         → mind 13 px (a szabály-minimum; a régi 12), a 4. szakasz asztali 15 px-énél erősebb szelektorral · uj-3 --- */
  #account-login #content .well form .form-group > a { display: inline-block; padding: 10px 0; }   /* ≥768-on a 4.1 margin-top 10-e */
  #account-login #content .well label,
  #information-contact #content .form-horizontal .form-group > .control-label,
  :is(#product-search, #checkout-cart) #content label { font-size: 13px; }
  /* keresőűrlap jelölőnégyzetei 13×13 → 20×20, a címke 40 px-es érintési sor */
  #product-search #content .checkbox-inline { min-height: 40px; padding-top: 10px; padding-left: 30px; }
  #product-search #content .checkbox-inline input { width: 20px; height: 20px; margin: 0 0 0 -30px; }

  /* --- 5.10. „Keresés finomítása" → 2/sor szöveges csempe · régi 400 px: content-top rács (360 széles) 2/sor KÉPES alkategória-csempe,
         a név-link 160 széles (x 30 / 210), Montserrat 12 px/700 NAGYBETŰ, cím nélkül; új: h3 21 px + pöttyös lista, 8 inline link 18 px magas · E30
         A kategória-szakasz 1.5 ≥768-as csempéi mobilra (a 01 a ≤767-et ide hagyta): h3 és <br> rejtve, 2 oszlop, min. 48 px magas csempe,
         13 px (szabály-minimum; régi 12). Kép a gyári adatban nincs — a képes változat a categoryrefine modulé (beállítás, E30). --- */
  #product-category #content > h3:has(+ .row > .col-sm-3 > ul),
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul) + br { display: none; }
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 5px 20px;
  }
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul)::before,
  #product-category #content > h3 + .row:has(> .col-sm-3 > ul)::after { content: none; }
  #product-category #content > h3 + .row > .col-sm-3:has(> ul),
  #product-category #content > h3 + .row > .col-sm-3 > ul { display: contents; }
  #product-category #content > h3 + .row > .col-sm-3 > ul > li { display: flex; list-style: none; }
  #product-category #content > h3 + .row > .col-sm-3 > ul > li > a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 10px;
    font-family: var(--hb-font-head);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--hb-text);
    background: var(--hb-surface);
  }

}