/* OCEX Menu 1.0 — saját névtér (.ocex-menu), idegen szelektor és !important nélkül.
   A bolt színei a SAJÁT stíluslapjában, a változók felülírásával állíthatók. */
.ocex-menu {
	--ocex-menu-bar-bg: var(--dgre, #333); /* = a lábléc háttere (világosban; sötétben lent #2f323d, mint a lábléc) */
	--ocex-menu-bar-fg: #fff;
	--ocex-menu-hover-bg: #262626;
	--ocex-menu-line: var(--dide, #ed1e24);
	--ocex-menu-panel-bg: #fff;
	--ocex-menu-panel-fg: #222;
	--ocex-menu-panel-hover: #f1f4f4;
	--ocex-menu-accent: var(--ahov, #0d5c98); /* a bolt link-hover kékje (tulaj, 10-13) */
	--ocex-menu-muted: #6b7280;
	--ocex-menu-sep: #eceef0;
	--ocex-menu-box-bg: #f1f4f4;
	--ocex-menu-h: 48px;
	--ocex-menu-icon: 24px;
	--ocex-menu-t: .15s;
	position: relative;
	z-index: 900;
	background: var(--ocex-menu-bar-bg);
	border-bottom: 3px solid var(--ocex-menu-line);
	font-size: 14px;
	line-height: 1.3;
}
.ocex-menu ul { list-style: none; margin: 0; padding: 0; }
.ocex-menu a, .ocex-menu a:hover, .ocex-menu a:focus { text-decoration: none; }
.ocex-menu :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ocex-menu .fa { line-height: 1; }
.ocex-menu__mbar, .ocex-menu__head, .ocex-menu__label { display: none; }
.ocex-menu__veil { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .35); z-index: 1; opacity: 0; pointer-events: none; transition: opacity var(--ocex-menu-t); }
.ocex-menu__veil.is-on { opacity: 1; }

/* ================= ASZTALI ================= */
@media (min-width: 768px) {
	.ocex-menu__bar { display: flex; align-items: stretch; height: var(--ocex-menu-h); }
	.ocex-menu__item { position: relative; display: flex; align-items: stretch; }
	.ocex-menu__item--end { order: 99; }
	.ocex-menu__item--end:not(.ocex-menu__item--end ~ .ocex-menu__item--end) { margin-left: auto; }
	.ocex-menu__link {
		display: flex; align-items: center; gap: 8px; height: 100%; box-sizing: border-box;
		padding: 0 16px; color: var(--ocex-menu-bar-fg); white-space: nowrap; transition: background var(--ocex-menu-t);
	}
	.ocex-menu__link:hover, .ocex-menu__link:focus, .ocex-menu__item.is-open > .ocex-menu__link { color: var(--ocex-menu-bar-fg); background: var(--ocex-menu-hover-bg); }
	.ocex-menu__item--link[style] > .ocex-menu__link { color: var(--ocex-menu-item-color); font-weight: 600; }
	.ocex-menu__item--button > .ocex-menu__link { font-weight: 600; text-transform: uppercase; letter-spacing: .3px; padding: 0 20px; }
	.ocex-menu__item--button[style] > .ocex-menu__link { background: var(--ocex-menu-item-color); }
	.ocex-menu__item--button[style] > .ocex-menu__link:hover,
	.ocex-menu__item--button[style].is-open > .ocex-menu__link { background: var(--ocex-menu-item-color); filter: brightness(.9); }
	.ocex-menu__item--grouped > .ocex-menu__link .fa-bars { font-size: 15px; }
	.ocex-menu__caret { font-size: 13px; opacity: .8; }
	/* a linkes felső pont nyitógombja: a nyíl a link mellett */
	.ocex-menu__item > .ocex-menu__toggle { color: var(--ocex-menu-bar-fg); padding: 0 12px 0 0; margin-left: -10px; display: flex; align-items: center; }
	.ocex-menu__item--button > .ocex-menu__toggle { background: var(--ocex-menu-item-color, transparent); margin-left: 0; }

	/* lenyíló (2. szint) */
	.ocex-menu__sub {
		position: absolute; z-index: 2; top: calc(100% + 3px); left: 0; min-width: 280px; padding: 8px 0;
		background: var(--ocex-menu-panel-bg); color: var(--ocex-menu-panel-fg);
		border-radius: 0 0 8px 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
		visibility: hidden; opacity: 0; transform: translateY(4px);
		transition: opacity var(--ocex-menu-t), transform var(--ocex-menu-t), visibility 0s linear var(--ocex-menu-t);
	}
	/* láthatatlan híd a piros csík fölött: lefelé húzott egérrel se szakadjon meg a rámutatás */
	.ocex-menu__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
	.ocex-menu__item--end .ocex-menu__sub { left: auto; right: 0; }
	.ocex-menu__item.is-open > .ocex-menu__sub,
	.ocex-menu__item:focus-within > .ocex-menu__sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.ocex-menu__sitem { position: relative; display: flex; align-items: center; }
	.ocex-menu__slink { flex: 1; display: flex; align-items: center; gap: 12px; padding: 9px 20px; color: var(--ocex-menu-panel-fg); }
	.ocex-menu__slink img { width: var(--ocex-menu-icon); height: var(--ocex-menu-icon); object-fit: contain; flex: none; }
	.ocex-menu__slink:hover, .ocex-menu__slink:focus, .ocex-menu__sitem.is-open > .ocex-menu__slink,
	.ocex-menu__slink[data-on] { background: var(--ocex-menu-panel-hover); color: var(--ocex-menu-accent); }
	.ocex-menu__sitem > .ocex-menu__toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; color: #999; pointer-events: none; }
	.ocex-menu__item--end .ocex-menu__sitem > .ocex-menu__toggle .fa-angle-right:before { content: "\f104"; }
	.ocex-menu__sitem--has-sub > .ocex-menu__slink { padding-right: 44px; }

	/* oldalra nyíló (3. szint): jobbra, a jobbra igazított csoportban balra */
	.ocex-menu__fly {
		position: absolute; top: -8px; left: 100%; width: 280px; min-height: calc(100% + 16px); padding: 8px 0;
		background: var(--ocex-menu-panel-bg); border-radius: 0 8px 8px 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
		visibility: hidden; opacity: 0; transition: opacity var(--ocex-menu-t), visibility 0s linear var(--ocex-menu-t);
	}
	.ocex-menu__item--end .ocex-menu__fly { left: auto; right: 100%; border-radius: 8px 0 0 8px; }
	.ocex-menu__sitem.is-open > .ocex-menu__fly,
	.ocex-menu__sitem:focus-within > .ocex-menu__fly { visibility: visible; opacity: 1; transition-delay: 0s; }
	.ocex-menu__fly .ocex-menu__label { display: block; padding: 6px 20px 8px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ocex-menu-muted); }
	.ocex-menu__fly .ocex-menu__slink img { width: 22px; height: 22px; }

	/* egér: nyitás rámutatásra, zárás-türelemmel (JS nélkül is működik) */
	@media (hover: hover) {
		.ocex-menu__item:hover > .ocex-menu__sub,
		.ocex-menu__sitem:hover > .ocex-menu__fly { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
		.ocex-menu__item:hover > .ocex-menu__link { background: var(--ocex-menu-hover-bg); }
		.ocex-menu__item--button[style]:hover > .ocex-menu__link { background: var(--ocex-menu-item-color); filter: brightness(.9); }
		.ocex-menu__sitem:hover > .ocex-menu__slink { background: var(--ocex-menu-panel-hover); color: var(--ocex-menu-accent); }
	}
}

/* ================= MOBIL: balról becsúszó fiók ================= */
@media (max-width: 767px) {
	.ocex-menu { border-bottom-width: 0; background: transparent; }
	.ocex-menu__mbar { display: block; background: var(--ocex-menu-bar-bg); border-bottom: 3px solid var(--ocex-menu-line); }
	.ocex-menu__open { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; color: var(--ocex-menu-bar-fg); font-weight: 600; }
	.ocex-menu__open .fa { font-size: 20px; }
	.ocex-menu__drawer {
		position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 360px; z-index: 1002;
		background: var(--ocex-menu-panel-bg); color: var(--ocex-menu-panel-fg); overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(-102%); transition: transform .25s ease; visibility: hidden;
	}
	.ocex-menu.is-drawer-open .ocex-menu__drawer { transform: none; visibility: visible; }
	.ocex-menu__drawer .container { padding: 0; width: auto; }
	.ocex-menu__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ocex-menu-sep); font-weight: 600; }
	.ocex-menu__head a { color: var(--ocex-menu-panel-fg); display: flex; align-items: center; gap: 10px; }
	.ocex-menu__head .ocex-menu__hwish { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--ocex-menu-sep); gap: 8px; }
	.ocex-menu__hcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--dide, #ed1e24); color: #fff; font-size: 11px; line-height: 20px; text-align: center; box-sizing: border-box; }
	.ocex-menu__hcount[hidden] { display: none; }
	.ocex-menu__close { margin-left: auto; width: 40px; height: 40px; font-size: 20px; color: #555; }
	.ocex-menu__bar { display: flex; flex-direction: column; padding-bottom: 16px; }

	/* sor: ikon · felirat · kerek nyíl jobbra (lenyitva lefordul) */
	.ocex-menu__item, .ocex-menu__sitem { position: relative; }
	.ocex-menu__link, .ocex-menu__slink { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 60px 6px 16px; color: var(--ocex-menu-panel-fg); font-size: 15px; text-align: left; width: 100%; box-sizing: border-box; border-bottom: 1px solid #f3f4f6; }
	.ocex-menu__slink img { width: 28px; height: 28px; object-fit: contain; flex: none; }
	.ocex-menu__item > .ocex-menu__link .fa, .ocex-menu__slink .fa { width: 28px; text-align: center; font-size: 17px; }
	.ocex-menu__item--link[style] > .ocex-menu__link, .ocex-menu__item--button[style] > .ocex-menu__link { color: var(--ocex-menu-item-color); font-weight: 600; }
	.ocex-menu__toggle {
		position: absolute; right: 14px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
		border: 1px solid var(--ocex-menu-sep); color: #666; display: flex; align-items: center; justify-content: center; transition: transform .2s;
	}
	.ocex-menu__toggle .fa-angle-down:before { content: "\f105"; }
	.ocex-menu__item.is-open > .ocex-menu__toggle, .ocex-menu__sitem.is-open > .ocex-menu__toggle { transform: rotate(90deg); color: var(--ocex-menu-accent); border-color: var(--ocex-menu-accent); }
	.ocex-menu__item.is-open > .ocex-menu__link, .ocex-menu__sitem.is-open > .ocex-menu__slink { color: var(--ocex-menu-accent); font-weight: 600; }
	.ocex-menu__caret { display: none; }
	.ocex-menu__toggle--label { padding-right: 60px; }
	.ocex-menu__item:not(.ocex-menu__item--grouped) > .ocex-menu__toggle--label:after {
		content: "\f105"; font-family: FontAwesome; position: absolute; right: 14px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
		border: 1px solid var(--ocex-menu-sep); color: #666; display: flex; align-items: center; justify-content: center; transition: transform .2s;
	}
	.ocex-menu__item.is-open > .ocex-menu__toggle--label:after { transform: rotate(90deg); color: var(--ocex-menu-accent); border-color: var(--ocex-menu-accent); }
	.ocex-menu__sub, .ocex-menu__fly { display: none; background: #fafafa; }
	.ocex-menu__item.is-open > .ocex-menu__sub, .ocex-menu__sitem.is-open > .ocex-menu__fly { display: block; }
	.ocex-menu__sub .ocex-menu__slink { font-size: 14px; }
	.ocex-menu__fly .ocex-menu__slink { padding-left: 58px; font-size: 14px; color: #444; }
	.ocex-menu__fly .ocex-menu__label { display: none; }

	/* a csoport („Kategóriák”) mobilon mindig nyitva: szürke fejléc + a gyökér-kategóriák sorai */
	.ocex-menu__item--grouped > .ocex-menu__link { display: none; }
	.ocex-menu__item--grouped > .ocex-menu__sub { display: block; background: transparent; }
	.ocex-menu__item--grouped > .ocex-menu__sub > .ocex-menu__label { display: block; padding: 14px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ocex-menu-muted); }
	.ocex-menu__item--grouped > .ocex-menu__sub > .ocex-menu__sitem > .ocex-menu__slink { font-size: 15px; }
	.ocex-menu__item--grouped .ocex-menu__fly .ocex-menu__slink { padding-left: 58px; }

	/* mobil-doboz: lekerekített, más hátterű blokk a lista alján; al-pontjai kibontva */
	.ocex-menu__item--box { background: var(--ocex-menu-box-bg); margin: 0 16px; }
	.ocex-menu__item:not(.ocex-menu__item--box) + .ocex-menu__item--box { margin-top: 16px; border-radius: 12px 12px 0 0; padding-top: 6px; }
	.ocex-menu__item--box:last-child { border-radius: 0 0 12px 12px; padding-bottom: 6px; }
	.ocex-menu__item:not(.ocex-menu__item--box) + .ocex-menu__item--box:last-child { border-radius: 12px; }
	.ocex-menu__item--box + .ocex-menu__item--box { border-top: 1px solid #dfe3e3; }
	.ocex-menu__item--box > .ocex-menu__link, .ocex-menu__item--box .ocex-menu__slink { border-bottom: 0; font-size: 14px; min-height: 42px; padding: 4px 18px; background: transparent; }
	.ocex-menu__item--box.ocex-menu__item--has-sub > .ocex-menu__link, .ocex-menu__item--box > .ocex-menu__toggle { display: none; }
	.ocex-menu__item--box > .ocex-menu__sub { display: block; background: transparent; }
	/* al-menü nélküli doboz-pont (Partnerek) sima sor az Akciók alatt; a doboz az utána jövő al-menüs ponttal indul */
	.ocex-menu__bar > .ocex-menu__item--box:not(.ocex-menu__item--has-sub) { background: transparent; margin: 0; border-radius: 0; padding: 0; }
	.ocex-menu__bar > .ocex-menu__item--box:not(.ocex-menu__item--has-sub) > .ocex-menu__link { border-bottom: 1px solid #f3f4f6; font-size: 15px; min-height: 48px; padding: 6px 60px 6px 16px; }
	.ocex-menu__bar > .ocex-menu__item--box:not(.ocex-menu__item--has-sub) + .ocex-menu__item--box { margin-top: 16px; border-top: 0; border-radius: 12px 12px 0 0; padding-top: 6px; }
	.ocex-menu__bar > .ocex-menu__item--box:not(.ocex-menu__item--has-sub) + .ocex-menu__item--box:last-child { border-radius: 12px; }
	[data-ocex-theme="dark"] .ocex-menu__bar > .ocex-menu__item--box:not(.ocex-menu__item--has-sub) > .ocex-menu__link { border-bottom-color: #2a2e37; }

	/* menü-fej: a szív felirat nélkül (a felirat a képernyőolvasónak marad), mellette a hold */
	.ocex-menu__hwtxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ocex-menu__htheme { display: flex; margin-left: auto; }
	.ocex-menu__htheme + .ocex-menu__close { margin-left: 0; }
	.ocex-menu__htheme #ocex-theme-toggle { float: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--ocex-menu-panel-fg); font-size: 20px; }
	.ocex-menu__htheme #ocex-theme-toggle .fa { font-size: 20px; color: inherit; }

	.ocex-menu .ocex-menu__veil { top: 0; z-index: 1001; }
	body.ocex-menu-lock { overflow: hidden; }
}

/* ================= SÖTÉT MÓD (ocex_theme) ================= */
[data-ocex-theme="dark"] .ocex-menu {
	--ocex-menu-bar-bg: #2f323d;
	--ocex-menu-hover-bg: #262933;
	--ocex-menu-panel-bg: #23262e;
	--ocex-menu-panel-fg: #e6e7ea;
	--ocex-menu-panel-hover: #2c3039;
	--ocex-menu-muted: #9aa0aa;
	--ocex-menu-sep: #343843;
	--ocex-menu-box-bg: #2c3039;
	--ocex-menu-accent: var(--ahov, #5fa8e0);
}
[data-ocex-theme="dark"] .ocex-menu__sub .ocex-menu__fly, [data-ocex-theme="dark"] .ocex-menu .ocex-menu__sub { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
@media (max-width: 767px) {
	[data-ocex-theme="dark"] .ocex-menu__sub, [data-ocex-theme="dark"] .ocex-menu__fly { background: #1d2027; }
	[data-ocex-theme="dark"] .ocex-menu__link, [data-ocex-theme="dark"] .ocex-menu__slink { border-bottom-color: #2a2e37; }
}
@media (prefers-reduced-motion: reduce) {
	.ocex-menu *, .ocex-menu__drawer, .ocex-hdr__in, .ocex-hdr__search { transition: none; }
}

/* ================= FEJLÉC (tr-519) — csak ha a .ocex-hdr kint van =================
   A gyári #search / #cart / #wishlist-total elemeket CSAK a .ocex-hdr alatt formázzuk. */
.ocex-hdr {
	--ocex-hdr-bg: #fff;
	--ocex-hdr-fg: #222;
	--ocex-hdr-muted: #5b6170;
	--ocex-hdr-field: #eef0f2;
	--ocex-hdr-cart-bg: #2f323d;
	--ocex-hdr-badge: var(--dide, #ed1e24);
	--ocex-hdr-m-bg: var(--dgre, #333); /* mobil sötét fej = a lábléc háttere */
	background: var(--ocex-hdr-bg);
	position: relative;
	z-index: 950;
	font-size: 14px;
}
.ocex-hdr a, .ocex-hdr a:hover, .ocex-hdr a:focus { text-decoration: none; }
.ocex-hdr :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ocex-hdr__in { display: flex; align-items: center; gap: 28px; height: 76px; }
.ocex-hdr__in:before, .ocex-hdr__in:after { display: none; }
.ocex-hdr__bars { display: none; }
.ocex-hdr__logo { margin: 0; flex: none; }
.ocex-hdr__logo img { display: block; height: 38px; width: auto; max-width: none; }
.ocex-hdr__logo .ocex-hdr__logo-w { display: none; }
.ocex-hdr__name { font-size: 20px; font-weight: 600; color: var(--ocex-hdr-fg); }
.ocex-hdr__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ocex-hdr__search { flex: 1; max-width: 640px; margin: 0 auto; }
.ocex-hdr #search { display: block; position: relative; width: 100%; margin: 0; }
.ocex-hdr #search .form-control { float: none; width: 100%; height: 44px; border: 0; border-radius: 22px; background: var(--ocex-hdr-field); padding: 0 52px 0 22px; font-size: 15px; color: var(--ocex-hdr-fg); box-shadow: none; }
.ocex-hdr #search .input-group-btn { position: absolute; right: 4px; top: 0; bottom: 0; width: auto; display: flex; align-items: center; z-index: 3; }
.ocex-hdr #search .input-group-btn .btn { height: 40px; width: 44px; padding: 0; border: 0; border-radius: 20px; background: transparent; color: #444; font-size: 17px; box-shadow: none; }

.ocex-hdr__icons { display: flex; align-items: center; gap: 18px; flex: none; }
.ocex-hdr__ico { position: relative; display: flex; align-items: center; gap: 8px; color: var(--ocex-hdr-fg); white-space: nowrap; font-weight: 500; }
.ocex-hdr__ico:hover, .ocex-hdr__ico:focus { color: var(--ocex-hdr-fg); opacity: .8; }
.ocex-hdr__acc .fa { font-size: 19px; }
.ocex-hdr__wish { width: 36px; height: 36px; justify-content: center; }
.ocex-hdr__wish .fa { font-size: 21px; }
.ocex-hdr__badge { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ocex-hdr-badge); color: #fff; border: 2px solid var(--ocex-hdr-bg); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; }
.ocex-hdr__badge[hidden] { display: none; }
/* buborék a szív alatt (asztalin, egérrel) */
@media (hover: hover) and (min-width: 768px) {
	.ocex-hdr__wish[data-ocex-tip]:after { content: attr(data-ocex-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); padding: 5px 10px; border-radius: 6px; background: #2f323d; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 5; }
	.ocex-hdr__wish[data-ocex-tip]:hover:after, .ocex-hdr__wish[data-ocex-tip]:focus-visible:after { opacity: 1; transform: translate(-50%, 0); }
}

.ocex-hdr #cart { width: auto; margin: 0; }
.ocex-hdr #cart > .btn { position: relative; display: flex; align-items: center; gap: 7px; width: auto; height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--ocex-hdr-cart-bg); background-image: none; color: #fff; font-size: 0; line-height: 1; text-shadow: none; box-shadow: none; }
.ocex-hdr #cart > .btn .fa { font-size: 18px; }
.ocex-hdr #cart > .btn:after { content: attr(data-ocex-label); font-size: 14px; font-weight: 600; }
.ocex-hdr #cart > .btn[data-ocex-count]:not([data-ocex-count="0"]):before { content: attr(data-ocex-count); position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #fff; color: #222; border: 2px solid var(--ocex-hdr-cart-bg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.ocex-hdr #cart > .btn:hover, .ocex-hdr #cart.open > .btn { filter: brightness(1.15); }
/* kosár-lenyíló sbk-mintára (tr-519): a gyári common/cart sablon marad (a common.js „ul li”-t tölt újra),
   a táblázatot itt rendezzük kártyasorrá — kép · név / db / ár · kuka; alatta csak a végösszeg, link + gomb */
.ocex-hdr #cart .dropdown-menu { --ocex-cart-line: #e3e5e9; width: 400px; min-width: 0; margin-top: 10px; padding: 20px 22px 18px; border: 0; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); font-size: 14px; color: var(--ocex-hdr-fg); }
.ocex-hdr #cart .dropdown-menu:before { content: attr(data-ocex-title); display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ocex-hdr #cart .dropdown-menu:after { content: "\00d7"; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 1px solid var(--ocex-cart-line); border-radius: 4px; color: var(--ocex-hdr-muted); font-size: 18px; line-height: 25px; text-align: center; cursor: pointer; }
.ocex-hdr #cart .dropdown-menu > li:first-child:not(:only-child) { max-height: 55vh; overflow-y: auto; }
.ocex-hdr #cart .dropdown-menu .table-striped, .ocex-hdr #cart .dropdown-menu .table-striped > tbody { display: block; margin: 0; background: none; }
.ocex-hdr #cart .dropdown-menu .table-striped tr { display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; grid-template-areas: "img name del" "img qty del" "img price del"; grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ocex-cart-line); background: none; }
.ocex-hdr #cart .dropdown-menu .table-striped td { display: block; padding: 0; border: 0; text-align: left; background: none; }
.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(1) { grid-area: img; }
.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(2) { grid-area: name; font-weight: 600; line-height: 1.3; }
.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(3) { grid-area: qty; margin-top: 4px; font-size: 13px; color: var(--ocex-hdr-muted); }
.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(4) { grid-area: price; margin-top: 2px; font-size: 16px; font-weight: 700; }
.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(5) { grid-area: del; }
.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(2) a { color: var(--ocex-hdr-fg); }
.ocex-hdr #cart .dropdown-menu .img-thumbnail { display: block; width: 72px; height: 72px; padding: 4px; object-fit: contain; border: 1px solid var(--ocex-cart-line); border-radius: 6px; background: #fff; }
.ocex-hdr #cart .dropdown-menu .btn-danger { padding: 2px 4px; border: 0; background: none; color: var(--ocex-hdr-muted); box-shadow: none; }
.ocex-hdr #cart .dropdown-menu .btn-danger:hover, .ocex-hdr #cart .dropdown-menu .btn-danger:focus { color: var(--dide, #ed1e24); }
.ocex-hdr #cart .dropdown-menu .btn-danger .fa { font-size: 17px; }
.ocex-hdr #cart .dropdown-menu .btn-danger .fa:before { content: "\f014"; } /* fa-trash-o */
.ocex-hdr #cart .dropdown-menu li > div { min-width: 0; padding: 0; }
.ocex-hdr #cart .dropdown-menu .table-bordered { display: block; margin: 16px 0 0; border: 0; }
.ocex-hdr #cart .dropdown-menu .table-bordered > tbody { display: block; }
.ocex-hdr #cart .dropdown-menu .table-bordered tr { display: none; }
.ocex-hdr #cart .dropdown-menu .table-bordered tr:last-child { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; }
.ocex-hdr #cart .dropdown-menu .table-bordered td { padding: 0; border: 0; }
.ocex-hdr #cart .dropdown-menu .table-bordered td:first-child strong { font-size: 13px; font-weight: 600; }
.ocex-hdr #cart .dropdown-menu .table-bordered td:last-child { font-size: 18px; font-weight: 700; }
.ocex-hdr #cart .dropdown-menu li p.text-right { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 0; }
.ocex-hdr #cart .dropdown-menu li p.text-right a { white-space: nowrap; font-size: 13px; color: var(--ocex-hdr-fg); }
.ocex-hdr #cart .dropdown-menu li p.text-right a .fa { display: none; }
.ocex-hdr #cart .dropdown-menu li p.text-right a:first-child strong:after { content: " \203a"; }
.ocex-hdr #cart .dropdown-menu li p.text-right a:last-child { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border-radius: 6px; background: var(--ocex-hdr-cart-bg); color: #fff; font-size: 14px; }
.ocex-hdr #cart .dropdown-menu li p.text-right a:last-child strong:after { content: " \2192"; }
.ocex-hdr #cart .dropdown-menu li p.text-right a:last-child:hover { filter: brightness(1.2); }
.ocex-hdr #cart .dropdown-menu li > p.text-center { margin: 10px 0 4px; color: var(--ocex-hdr-muted); }

.ocex-hdr__theme { display: flex; align-items: center; }
.ocex-hdr__theme #ocex-theme-toggle { float: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ocex-hdr-muted); font-size: 20px; }
.ocex-hdr__theme #ocex-theme-toggle .fa { font-size: 20px; color: inherit; }

/* a fejléc mellett a menüsor ragad (asztalin); mobilon a menü saját „Menü” sora helyett a ☰ nyit */
@media (min-width: 768px) {
	.ocex-hdr ~ .ocex-menu { position: sticky; top: 0; z-index: 1000; }
	.ocex-hdr { z-index: 1001; } /* a kereső- és kosár-lenyíló a ragadós menüsor ELÉ essen */
}
@media (max-width: 767px) {
	.ocex-hdr ~ .ocex-menu { border-bottom: 0; }
	.ocex-hdr ~ .ocex-menu .ocex-menu__mbar { display: none; }
	.ocex-menu.is-drawer-open { z-index: 1100; }
	/* mobilon a fej rögzített (helyét a body felső párnája tartja: --ocex-hdr-h, a JS méri); lefelé görgetve a kereső-sor
	   becsúszik (.is-compact), felfelé visszajön — a tartalom nem ugrik, mert a fej nincs a folyamban */
	.ocex-hdr { position: fixed; top: 0; left: 0; right: 0; background: var(--ocex-hdr-m-bg); border-bottom: 3px solid var(--dide, #ed1e24); }
	html:has(#ocex-hdr) body { padding-top: var(--ocex-hdr-h, 115px); }
	.ocex-hdr__search { max-height: 60px; transition: max-height .2s ease, opacity .2s ease; }
	.ocex-hdr__in { transition: row-gap .2s ease, padding-bottom .2s ease; }
	.ocex-hdr.is-compact .ocex-hdr__in { row-gap: 0; padding-bottom: 6px; }
	.ocex-hdr.is-compact .ocex-hdr__search { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
	html:has(#ocex-hdr) { scroll-padding-top: 125px; } /* horgonyra ugráskor a cím ne bújjon a ragadós fej alá */
	.ocex-hdr__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "bars logo icons" "search search search"; gap: 8px 10px; height: auto; padding-top: 8px; padding-bottom: 12px; }
	.ocex-hdr__bars { grid-area: bars; display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; color: #fff; font-size: 22px; }
	.ocex-hdr__logo { grid-area: logo; }
	.ocex-hdr__logo { min-width: 0; }
	.ocex-hdr__logo img { height: auto; max-height: 28px; max-width: 100%; }
	.ocex-hdr__logo .ocex-hdr__logo-l { display: none; }
	.ocex-hdr__logo .ocex-hdr__logo-w { display: block; }
	.ocex-hdr__logo .ocex-hdr__logo-l:only-child { display: block; }
	.ocex-hdr__name { color: #fff; }
	.ocex-hdr__search { grid-area: search; max-width: none; width: 100%; }
	.ocex-hdr #search .form-control { height: 40px; border-radius: 20px; background: #fff; font-size: 14px; }
	.ocex-hdr__icons { grid-area: icons; justify-self: end; gap: 2px; }
	.ocex-hdr__ico, .ocex-hdr__ico:hover, .ocex-hdr__ico:focus { color: #fff; width: 38px; height: 40px; justify-content: center; }
	.ocex-hdr__acc span { display: none; }
	.ocex-hdr__acc .fa, .ocex-hdr__wish .fa { font-size: 20px; }
	.ocex-hdr__badge { top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 10px; line-height: 14px; border-color: var(--ocex-hdr-m-bg); }
	.ocex-hdr #cart > .btn { width: 38px; height: 40px; padding: 0; justify-content: center; background: transparent; }
	.ocex-hdr #cart > .btn .fa { font-size: 20px; }
	.ocex-hdr #cart > .btn:after { content: none; }
	.ocex-hdr #cart > .btn[data-ocex-count]:not([data-ocex-count="0"]):before { top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 10px; line-height: 14px; background: var(--ocex-hdr-badge); color: #fff; border-color: var(--ocex-hdr-m-bg); }
	.ocex-hdr #cart .dropdown-menu { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
	.ocex-hdr #cart .dropdown-menu li p.text-right a:last-child { padding: 0 18px; }
	/* tulaj 10-13: a lenyitott kosár soha ne görgessen vízszintesen — ami nem fér, sort tör (a hosszabb panel függőlegesen görget) */
	.ocex-hdr #cart .dropdown-menu { box-sizing: border-box; padding: 18px 16px 16px; overflow-x: hidden; }
	.ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(2) { overflow-wrap: anywhere; }
	.ocex-hdr #cart .dropdown-menu .table-bordered tr:last-child { flex-wrap: wrap; }
	.ocex-hdr #cart .dropdown-menu li p.text-right { flex-wrap: wrap; row-gap: 10px; }
	.ocex-hdr #cart .dropdown-menu li p.text-right a:last-child { flex: 1 1 auto; justify-content: center; max-width: 100%; }
	.ocex-hdr__theme #ocex-theme-toggle, .ocex-hdr__theme #ocex-theme-toggle:hover { color: #fff; width: 34px; }
	/* tr-519 (tulaj 10-13): mobilon a fejben csak fiók + kosár; a szív és a hold a lenyíló menü fejében */
	.ocex-hdr__wish, .ocex-hdr__theme { display: none; }
}
[data-ocex-theme="dark"] .ocex-hdr { --ocex-hdr-bg: #1f2229; --ocex-hdr-fg: #e6e7ea; --ocex-hdr-muted: #c9ccd3; --ocex-hdr-field: #2b2e39; --ocex-hdr-cart-bg: #3a3e4b; --ocex-hdr-m-bg: #2f323d; }
[data-ocex-theme="dark"] .ocex-hdr #search .input-group-btn .btn { color: #c9ccd3; }
[data-ocex-theme="dark"] .ocex-hdr #cart .dropdown-menu { --ocex-cart-line: #424757; }
[data-ocex-theme="dark"] .ocex-hdr #cart .dropdown-menu .table-striped td:nth-child(2) a, [data-ocex-theme="dark"] .ocex-hdr #cart .dropdown-menu li p.text-right a:first-child { color: var(--ocex-hdr-fg); }
[data-ocex-theme="dark"] .ocex-hdr__logo .ocex-hdr__logo-l { display: none; }
[data-ocex-theme="dark"] .ocex-hdr__logo .ocex-hdr__logo-w { display: block; }
[data-ocex-theme="dark"] .ocex-hdr__logo .ocex-hdr__logo-l:only-child { display: block; }
/* sötét mód: a téma „[data-ocex-theme=dark] a { kék }” szabálya (0,1,1) erősebb az osztályainknál — a linkeket itt visszaállítjuk */
[data-ocex-theme="dark"] .ocex-menu a.ocex-menu__slink, [data-ocex-theme="dark"] .ocex-menu__head a { color: var(--ocex-menu-panel-fg); }
[data-ocex-theme="dark"] .ocex-menu a.ocex-menu__slink[data-on] { color: var(--ocex-menu-accent); }
[data-ocex-theme="dark"] .ocex-hdr a.ocex-hdr__ico, [data-ocex-theme="dark"] .ocex-hdr__theme #ocex-theme-toggle { color: var(--ocex-hdr-fg); }
@media (min-width: 768px) {
	[data-ocex-theme="dark"] .ocex-menu a.ocex-menu__link { color: var(--ocex-menu-bar-fg); }
	[data-ocex-theme="dark"] .ocex-menu .ocex-menu__item--link[style] > a.ocex-menu__link { color: var(--ocex-menu-item-color); }
	[data-ocex-theme="dark"] .ocex-menu .ocex-menu__sitem:hover > a.ocex-menu__slink { color: var(--ocex-menu-accent); }
}
@media (max-width: 767px) {
	[data-ocex-theme="dark"] .ocex-menu a.ocex-menu__link { color: var(--ocex-menu-panel-fg); }
	[data-ocex-theme="dark"] .ocex-menu .ocex-menu__item[style] > a.ocex-menu__link { color: var(--ocex-menu-item-color); }
	[data-ocex-theme="dark"] .ocex-menu .ocex-menu__item.is-open > a.ocex-menu__link, [data-ocex-theme="dark"] .ocex-menu .ocex-menu__sitem.is-open > a.ocex-menu__slink { color: var(--ocex-menu-accent); }
	[data-ocex-theme="dark"] .ocex-hdr a.ocex-hdr__ico, [data-ocex-theme="dark"] .ocex-hdr__theme #ocex-theme-toggle { color: #fff; }
}
