/* === HB — hangszerbolt.hu BŐR-RÉTEG a gyári default témára ===
   Helye: catalog/view/theme/hb/stylesheet/ (theme_default_directory = hb). A gyári stylesheet.css UTÁN töltődik.
   ELV (tulaj, 2026-09-19): a cél nagyjából a régi oldal; a SZÍNVILÁG jön a Journalból, a FELÉPÍTÉS — ahol lehet kompromisszumot kötni —
   EGYELŐRE a gyári, hogy a modulok ráhúzhatók legyenek. Amit az ügyfél „nagyon kell"-nek mond a régiből, azt külön, pontosan megcsináljuk.
   → Ez a fájl csak színt, hátteret, keretszínt, árnyékot és betűcsaládot ír felül. Szélességet, rácsot, display-t, float-ot,
     sorrendet, térközt, betűméretet NEM. A fejléc (szerkezet + méret + szín) külön fájlban él: hb-header.css (hb-378).
   Tokenek: HB/tema/referencia/01-design-tokenek.md + tokenek-mert.json. Lelet-id-k: referencia/09-meres-nyers.json, 10-v1-proba-nyers.json. */

:root{
  --hb-accent:#588f27;        /* zöld: gomb, aktív elem (a Journal zöldje; fehér felirattal 3,9:1) */
  --dide:#588f27;             /* a bolt azonosító-színe a moduloknak (ocex_filter, banner-pöttyök) */
  --hb-primary:#3f5765;       /* acélkék: menüsáv, táblafej, hover */
  --hb-sale:#a41733;          /* bordó: fülek, törlés-gomb */
  --hb-danger:#eb5858;        /* hibás mező kerete */
  --hb-danger-text:#ffb3b3;   /* hibaszöveg sötéten (4,7:1 a --hb-bg-n, 5,8:1 a --hb-surface-en) */
  --hb-gold:#fdc22d;          /* csillag, hover, szövegközi link */
  --hb-bg:#505050;            /* tartalomdoboz, felső sáv, fejléc */
  --hb-surface:#444349;       /* kártya, panel, lenyíló, modal */
  --hb-footer-bg:#223344;
  --hb-page-bg:url("/image/catalog/background/g4.jpg");
  --hb-text:#ffffff;
  --hb-text-muted:#e6e6e6;
  --hb-text-inverse:#444349;  /* fehér mezőn */
  --hb-border-dark:#5e5e64;   /* vonal sötét felületek közt */
  --hb-star-empty:#b4b4b8;    /* üres csillag, szomszéd hónap napjai (3,9:1 a --hb-bg-n) */
  --hb-price-old:#ffb3b3;     /* régi ár: 4,7:1 a termékoldalon (--hb-bg), 5,8:1 a kártyán */
  --hb-font:'Nunito Sans',Helvetica,Arial,sans-serif;
  --hb-font-head:'Montserrat',Helvetica,Arial,sans-serif;
}

/* === alap === */
html { background: var(--hb-footer-bg) var(--hb-page-bg) center top / 1200px auto no-repeat fixed; }
body { background: transparent; color: var(--hb-text); font-family: var(--hb-font); }

/* === betűméret-skála: a régi oldalé (mérve: body 15/22,5 · menüpont 14/700 · lábléc-link 14 · lábléc-cím 17).
   Csak az alap nő; a gyári kis méretek (gomb 12 px, űrlapmező 13 px) már egyeznek a régivel. Tulaj 09-21. */
body { font-size: 15px; line-height: 1.5; }
footer a, footer p, footer li { font-size: 14px; }
footer h5 { font-size: 17px; font-weight: 300; }
/* a gyári kártya explicit méretet ír elő, ezért külön kell (régi: leírás/ár 15, régi ár 13).
   Az űrlapmező marad a gyári 12 px-en: a régi 13 px-hez a gyári attribútum-szelektort kellene lemásolni — 1 px-ért nem éri meg. */
.product-thumb .caption p, .product-thumb .price { font-size: 15px; }
.product-thumb .price-old { font-size: 13px; }
h1, h2, h3, h4, h5, h6, legend { color: var(--hb-text); font-family: var(--hb-font-head); }
a { color: var(--hb-text-muted); }
a:hover, a:focus { color: var(--hb-text); }
body > .container { background: var(--hb-bg); }
/* fejlec-fooldal-6: a tört képpont-határokon (a logó aránya miatt a fejléc 104,38 px) átütő háttérfotó-hajszálvonalak ellen */
body > .container { box-shadow: 0 -1px 0 var(--hb-bg), 0 1px 0 var(--hb-bg); }
hr { border-top-color: var(--hb-border-dark); }

/* === fejléc, kereső, mini-kosár, főmenü: hb-header.css (hb-378, 09-30 — a régi Journal-fejléc másolata) === */
/* a mini-kosár sötét lenyílója marad itt: a gyári "#cart .dropdown-menu { background:#eee }" (1,1,0) erősebb az általános .dropdown-menu-nél */
#cart .dropdown-menu { background: var(--hb-surface); }
#cart .dropdown-menu table, #cart .dropdown-menu a { color: var(--hb-text); }

/* === morzsa === */
.breadcrumb { background: var(--hb-bg); border-color: var(--hb-border-dark); }
.breadcrumb > li { text-shadow: none; }
.breadcrumb > li:after { border-color: var(--hb-border-dark); }

/* === termékkártya === */
.product-thumb { background: var(--hb-surface); border-color: var(--hb-border-dark); }
.product-thumb .image { background: #fff; }
/* lista-nézetben a fehér képdoboz a névhez ért (a gyári lebegtetett .image 15 px-es belső tere is fehér lett) */
@media (min-width: 767px) { .product-list .product-thumb .image { background: transparent; } }
.product-thumb h4 a, .product-thumb .price { color: var(--hb-text); }
.product-thumb h4 a:hover, .product-thumb h4 a:focus { color: var(--hb-gold); }
/* lista-11: régi ár — a gyári #999 (2,8:1) helyett */
.product-thumb .price-old { color: var(--hb-price-old); }
.product-thumb .price-tax { color: var(--hb-text-muted); }
.product-thumb .button-group { background: var(--hb-surface); border-top-color: var(--hb-border-dark); }
.product-list .product-thumb .button-group { border-left-color: var(--hb-border-dark); }
.product-thumb .button-group button { background: transparent; color: var(--hb-text-muted); }
.product-thumb .button-group button + button { border-left-color: var(--hb-border-dark); }
.product-thumb .button-group button:first-child { background: var(--hb-accent); color: #fff; }
.product-thumb .button-group button:hover { background: var(--hb-primary); color: #fff; }
/* értékelés-csillagok: egy arany (a gyári #FC0 / #E69500 és az értékelés-fül arany helyett); az üres csillag #999 (2,8:1) helyett */
.rating .fa-star, .rating .fa-star + .fa-star-o, #review .fa-star, #review .fa-star-o { color: var(--hb-gold); }
.rating .fa-star-o { color: var(--hb-star-empty); }

/* === gombok === */
.btn { text-shadow: none; }
/* a lenyomott állapot (:active:hover / :active:focus) is kell: a Bootstrap (0,3,0) szabályai különben gyári színnel villannak */
.btn-primary, .btn-primary:focus { background: var(--hb-accent); border-color: var(--hb-accent); color: #fff; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.active:hover, .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary.active:focus { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }
/* penztar-6: letiltott / töltés alatti gomb — a gyári kék helyett (az áttetszőséget a Bootstrap adja) */
.btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary[disabled]:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus { background: var(--hb-accent); border-color: var(--hb-accent); }
.btn-default, .btn-default:focus { background: var(--hb-surface); border-color: var(--hb-border-dark); color: var(--hb-text); }
.btn-default:hover { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }
/* lista-9: aktív nézetváltó (rács / lista) és lenyomott gomb */
.btn-default.active, .btn-default:active, .btn-default.active:hover, .btn-default.active:focus, .btn-default:active:hover, .btn-default:active:focus { background: var(--hb-accent); border-color: var(--hb-accent); color: #fff; box-shadow: none; }
/* lista-6, fiok-info-17: "Termék összehasonlítás (n)" és minden .btn-link — a gyári kék (2,7:1) és hover (1,0:1) helyett */
.btn-link, .btn-link:focus, .btn-link:active { color: var(--hb-text-muted); }
.btn-link:hover, .btn-link:active:hover { color: var(--hb-text); }
/* penztar-11: törlés-gomb — a HB bordó */
.btn-danger, .btn-danger:focus { background: var(--hb-sale); border-color: var(--hb-sale); color: #fff; }
.btn-danger:hover, .btn-danger:active, .btn-danger:active:hover, .btn-danger:active:focus { background: var(--hb-danger); border-color: var(--hb-danger); color: #fff; box-shadow: none; }
/* fiok-info-17: "Megnézem Google Térképen" — a gyári narancs helyett */
.btn-info, .btn-info:focus { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }
.btn-info:hover, .btn-info:active, .btn-info:active:hover, .btn-info:active:focus { background: var(--hb-accent); border-color: var(--hb-accent); color: #fff; }

/* === űrlapok === */
.form-control:focus { border-color: var(--hb-accent); box-shadow: 0 0 0 2px rgba(88, 143, 39, .35); }
label, .control-label { color: var(--hb-text); }
/* a natív rádiógomb / jelölőnégyzet a böngésző kékje helyett zöld */
input[type="radio"], input[type="checkbox"] { accent-color: var(--hb-accent); }
/* penztar-2, fiok-info-1: szakaszcím — a Bootstrap #333 (1,3–1,6:1) helyett */
legend { border-bottom-color: var(--hb-border-dark); }
/* termek-1, penztar-1, fiok-info-2: hibaszöveg, hibás mező címkéje, kötelező-csillag — a Bootstrap #a94442 (1,4–1,7:1) helyett */
.text-danger, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline,
div.required .control-label:before { color: var(--hb-danger-text); }
.has-error .form-control, .has-error .form-control:focus { border-color: var(--hb-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 2px rgba(235, 88, 88, .45); }
.help-block { color: var(--hb-text-muted); }
/* lista-9: a Rendezés / Listázás címke — a világos #eee helyett */
.input-group-addon { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }

/* === gyári világos dobozok sötétre === */
.well, .panel, .panel-default > .panel-heading, .list-group-item, .thumbnail, .img-thumbnail, .dropdown-menu, .modal-content {
  background: var(--hb-surface); color: var(--hb-text); border-color: var(--hb-border-dark); }
.list-group a, .dropdown-menu > li > a, .panel-title > a { color: var(--hb-text-muted); text-shadow: none; }
.panel-title > a:hover, .panel-title > a:focus { color: var(--hb-text); }
/* fiok-info-15: a gyári ".list-group a" #ddd vonalai helyett */
.list-group a { border-color: var(--hb-border-dark); }
/* hover, aktív és billentyűzet-fókusz egyformán (a Bootstrap :focus háttere #f5f5f5, a gyári text-shadow fehér — mindkettő ellen) */
.list-group a.active, .list-group a.active:hover, .list-group a:hover, .list-group a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, #top-links .dropdown-menu a:focus { background: var(--hb-accent); color: #fff; border-color: var(--hb-accent); text-shadow: none; }
/* penztar-12: nyitott pénztár-panel és görgethető táblakeret — a világos (#ddd) vonal helyett */
.panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--hb-border-dark); }
.table-responsive { border-color: var(--hb-border-dark); }
/* penztar-12, fiok-info-8: modal vonalai */
.modal-header { border-bottom-color: var(--hb-border-dark); }
.modal-footer { border-top-color: var(--hb-border-dark); }

/* === táblázat === */
.table, .table > thead > tr > td, .table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td,
.table-bordered, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--hb-border-dark); color: var(--hb-text); }
/* összehasonlítás: a csoportok közti 2 px-es #ddd vonal */
.table > tbody + tbody { border-top-color: var(--hb-border-dark); }
.table > thead > tr > td, .table > thead > tr > th { background: var(--hb-primary); }
.table-hover > tbody > tr:hover, .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, .05); }

/* === fülek (a betűcsalád a törzsé: a Montserrat mobilon két sorba törte volna a 4 fület) === */
.nav-tabs { border-bottom-color: var(--hb-border-dark); }
.nav-tabs > li > a { background: var(--hb-sale); border-color: var(--hb-sale); color: #fff; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus { background: var(--hb-accent); border-color: var(--hb-accent); color: #fff; }

/* === üzenetsávok és a bezáró × === */
/* fejlec-fooldal-2, lista-1, termek-2, penztar-3, fiok-info-3: a gyári pasztell dobozok helyett sötét felület, színes kerettel */
.alert { background: var(--hb-surface); color: var(--hb-text); border-color: var(--hb-border-dark); }
.alert-success { border-color: var(--hb-accent); }
.alert-danger { border-color: var(--hb-danger); }
.alert-warning { border-color: var(--hb-gold); }
.alert-info { border-color: var(--hb-text-muted); }
/* penztar-3: panelen / modalban az alert ne olvadjon bele az ugyanolyan színű felületbe */
.panel .alert, .well .alert, .modal-content .alert, .tab-content .alert { background: var(--hb-bg); }
/* ugyanaz a csoport: az üzenet linkjei (terméknév, "bevásárló kosaradhoz") — 1,05:1 helyett fehér, aláhúzva */
.alert a, .alert .alert-link, .alert a:hover, .alert a:focus { color: var(--hb-text); text-decoration: underline; }
/* penztar-4, fiok-info-8: bezáró × — fekete / .2 helyett fehér */
.close, .alert .close { color: var(--hb-text); opacity: .75; text-shadow: none; }
.close:hover, .close:focus { color: var(--hb-text); opacity: 1; }

/* === lapozó (az aktív és a fókuszált állapot is: a Bootstrap (0,3,1) kékje ellen) === */
.pagination > li > a, .pagination > li > span, .pagination > .disabled > a, .pagination > .disabled > span { background: var(--hb-surface); border-color: var(--hb-border-dark); color: var(--hb-text-muted); }
.pagination > .active > a, .pagination > .active > span, .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:focus,
.pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span:hover, .pagination > .active > span:focus { background: var(--hb-accent); border-color: var(--hb-accent); color: #fff; }

/* === termékoldal === */
#product-product .thumbnails .thumbnail, #product-product .image-additional a { background: #fff; border-color: var(--hb-border-dark); }
/* termek-10: a régi ár (inline áthúzott <span>) különüljön el */
#product-product .list-unstyled > li > span[style*="line-through"] { color: var(--hb-price-old); }
/* termek-7: a leírásba beégetett sötét betűszín (pl. 5981: 1,1:1) és betűcsalád (Arial / be nem töltött "Nunito") — inline stílus, ezért !important */
#tab-description [style*="color"], #tab-description font[color] { color: inherit !important; background-color: transparent !important; }
#tab-description [style*="font-family"], #tab-description font[face] { font-family: inherit !important; }

/* === pénztár === */
/* penztar-7: X-Shipping mód-leírás — a modul inline #999-e (3,4:1) helyett; inline stílus, ezért !important */
.x-shipping-desc { color: var(--hb-text-muted) !important; }

/* === szövegközi linkek === */
/* fiok-info-7, penztar-7, termek-7: a folyószöveg linkje arany (a #e6e6e6 a fehér szövegben nem látszott linknek); a navigációs listák maradnak.
   + az értékelés-fül "Lépj be / regisztrálj" linkje, az adatvédelmi elfogadás linkje (a.agree) és a termékoldali gyártó-link */
#content p a:not(.btn), #information-information #content a:not(.btn), #tab-description a:not(.btn), .modal-body a:not(.btn), .shipping-description a,
#form-review a:not(.btn), .buttons a.agree, #product-product #content .list-unstyled a { color: var(--hb-gold); }
#content p a:not(.btn):hover, #information-information #content a:not(.btn):hover, #tab-description a:not(.btn):hover, .modal-body a:not(.btn):hover, .shipping-description a:hover,
#form-review a:not(.btn):hover, .buttons a.agree:hover, .buttons a.agree:focus, #product-product #content .list-unstyled a:hover { color: #fff; }

/* === dátumválasztó (a modul CSS-e a hb lap UTÁN töltődik → "body" előtag) === */
/* fiok-info-5: hover — #eee háttér + fehér szöveg helyett acélkék */
body .bootstrap-datetimepicker-widget td.day:hover, body .bootstrap-datetimepicker-widget td.hour:hover, body .bootstrap-datetimepicker-widget td.minute:hover, body .bootstrap-datetimepicker-widget td.second:hover, body .bootstrap-datetimepicker-widget td span:hover, body .bootstrap-datetimepicker-widget thead tr:first-child th:hover { background: var(--hb-primary); color: #fff; }
body .bootstrap-datetimepicker-widget td.active, body .bootstrap-datetimepicker-widget td.active:hover, body .bootstrap-datetimepicker-widget td span.active { background-color: var(--hb-accent); color: #fff; text-shadow: none; }
body .bootstrap-datetimepicker-widget td.today:before { border-bottom-color: var(--hb-gold); }
/* szomszéd hónap napjai: #777 (2,2:1) helyett */
body .bootstrap-datetimepicker-widget td.old, body .bootstrap-datetimepicker-widget td.new { color: var(--hb-star-empty); }

/* === lábléc === */
footer { background: var(--hb-footer-bg); border-top-color: var(--hb-border-dark); color: var(--hb-text); }
/* mobilon a tartalom teljes szélességű: a gyári 30 px-es rés (footer margin-top) ne mutasson fotócsíkot */
@media (max-width: 767px) { footer { box-shadow: 0 -30px 0 var(--hb-bg); } }
footer h5 { color: #fff; font-family: var(--hb-font-head); }
footer a, footer p { color: var(--hb-text-muted); }
footer a:hover { color: #fff; }
footer hr { border-bottom-color: rgba(255, 255, 255, .12); }