/* ==========================================================================
   Bestlab Fast — mega menu, the cascading design (v3)
   Loaded only while this design is selected in Bestlab Suite → Options → Menü;
   the alternatives are mega-menu.css (v2) and mega-menu-classic.css. All three
   reuse the same class names, so exactly one of these files is ever on the page
   and none of them has to undo another. Depends on main.css for the header,
   container and drawer shell.

   The panel is four columns wide and each one narrows the last:

     rail (categories) │ groups │ links │ preview card

   Only the rail is shared between categories; columns 2–4 are rendered for
   every category and every group up front and swapped with `is-active`, which
   is why nothing here animates between states — a cascade that fades is a
   cascade you have to wait for. See template-parts/header/mega-nav-v3.php for
   the markup and assets/js/mega-menu-v3.js for the two bits of state.

   The grid is `.container`-wide and centred, so every column lines up with the
   header above it. The two tinted outer columns still have to reach the
   viewport edge, and they do it with a flat 100vw box-shadow rather than a
   full-bleed grid: a shadow paints outside the element without moving its
   content, so the rail's text stays on the logo's left edge however wide the
   screen gets. `.blf-mega` clips the overflow those shadows create — without
   that, the right-hand one would push out a horizontal scrollbar.

   v3 also owns the header's first row (inline search, Ajánlatkérés,
   Gyorsrendelés cikkszámmal) — the last section of this file, gated in
   header.php by blf_menu_has_toolbar().
   ========================================================================== */

/* The nav is a plain block: .blf-nav__row does the horizontal layout, and
   .blf-nav__extra only appears inside the mobile drawer. */
.blf-nav{display:block}

/* ---- The nav row ------------------------------------------------------ */

.blf-header__nav{position:relative;border-top:1px solid var(--bl-line)}
.blf-nav__row{display:flex;align-items:stretch;justify-content:space-between;gap:24px;min-height:50px}
.blf-menu--main{display:flex;align-items:stretch;gap:0;margin-left:-14px}
.blf-menu--util{display:flex;align-items:center;gap:2px;margin-right:-10px}

.blf-menu__item{position:relative;display:flex;align-items:center}
/* Must beat the earlier `.blf-menu > li{position:relative}` (higher specificity)
   so the panel anchors to the full-width nav row, not the narrow menu item. */
.blf-menu > li.blf-has-mega{position:static}
/* `.blf-menu > li > a` in main.css is (0,1,2); plain `.blf-menu__top` would
   lose to it, so every rule that changes the row's metrics is qualified. */
.blf-menu > li > .blf-menu__top{display:flex;align-items:center;gap:.4em;padding:13px 14px;font-weight:600;color:var(--bl-navy);font-size:.95rem;white-space:nowrap}
.blf-menu > li > .blf-menu__top:hover{color:var(--bl-blue);text-decoration:none}

/* The open category is marked with an underline rather than a filled pill: the
   panel below it is already a very large highlight, and two of them shout. The
   rule is an inset shadow because .blf-has-mega has to stay `position: static`
   for the panel to anchor — an ::after could not be placed against it. */
.blf-has-mega{transition:box-shadow .16s ease}
.blf-has-mega .blf-menu__caret{display:flex;align-items:center;padding:13px 12px 13px 2px;margin-left:-8px;border:0;background:none;color:var(--bl-navy)}
.blf-has-mega .blf-menu__caret svg{opacity:.55;transition:transform .2s ease}
.blf-has-mega:hover .blf-menu__caret{color:var(--bl-blue)}
.blf-has-mega.is-active{box-shadow:inset 0 -3px 0 var(--bl-navy)}
.blf-has-mega.is-active .blf-menu__caret svg{opacity:1;transform:rotate(180deg)}

/* Utility links carry the design's three small icons; they are chrome, so they
   sit at 70% opacity and only Akciók is allowed any colour. */
.blf-menu--util > li > .blf-menu__top{gap:7px;padding:11px 10px;border-radius:8px;color:var(--bl-navy);font-size:.9rem;font-weight:600;white-space:nowrap}
.blf-menu--util > li > .blf-menu__top:hover{color:var(--bl-navy);background:var(--bl-soft);text-decoration:none}
.blf-menu--util > li > .blf-menu__top--accent{color:var(--bl-orange)}
.blf-menu--util > li > .blf-menu__top--accent:hover{color:var(--bl-orange-d)}
.blf-menu__utilico{flex:none;opacity:.65}
.blf-menu__top--accent .blf-menu__utilico{opacity:1}

/* ---- The panel -------------------------------------------------------- */

.blf-mega{position:absolute;left:0;right:0;top:100%;overflow:hidden;border-top:1px solid var(--bl-line);border-bottom:1px solid var(--bl-line);box-shadow:var(--bl-shadow-lg);z-index:90;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1),visibility .2s}
.blf-mega.is-open{opacity:1;visibility:visible;transform:none}

/* Dim the page behind an open panel. It lives on <body> because the header is
   the one thing it must not cover, and .blf-header is a stacking context at
   z-index 9000 — so a scrim at 80 darkens everything below the header while the
   panel inside it stays lit. Always present at opacity 0 rather than switched
   on with the class, so it fades out as well as in. */
body::before{content:"";position:fixed;inset:0;z-index:80;background:rgba(11,44,90,.38);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}
body.blf-mega-open::before{opacity:1;visibility:visible}
.blf-mega__inner{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);align-items:stretch;width:100%;max-width:var(--bl-container);margin-inline:auto}
.blf-mega__chev{flex:none;opacity:.4}

/* ---- Column 1: the category rail --------------------------------------
   Tinted, because it is the only column that does not change as you move
   through the menu — it is the frame, not the content. The advisory card and
   the configurator links are pushed to its foot by `margin-top:auto`. */

.blf-mega__railcol{display:flex;flex-direction:column;gap:12px;padding:16px 18px 20px 0;background:#F4F6F9;box-shadow:-100vw 0 0 #F4F6F9;border-right:1px solid var(--bl-line)}
.blf-mega__rail{display:flex;flex-direction:column;gap:2px}
.blf-mega__railitem{display:flex;align-items:center;border-radius:9px;transition:background .14s ease}
.blf-mega__raillink{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;min-width:0;padding:12px 14px;border-radius:9px;color:var(--bl-navy);font-size:.95rem;font-weight:600;line-height:1.3}
.blf-mega__raillink:hover{text-decoration:none}
.blf-mega__railname{min-width:0}
.blf-mega__railitem:hover{background:#E7EDF5}
.blf-mega__railitem.is-active{background:var(--bl-blue)}
.blf-mega__railitem.is-active .blf-mega__raillink{color:#fff}
.blf-mega__railitem.is-active .blf-mega__chev{opacity:.85}

/* The advisory card. A card rather than a link row because it is an offer, not
   a destination — and the only white block in a tinted column. */
.blf-mega__promo{display:block;margin-top:auto;padding:14px;border:1px solid var(--bl-line);border-radius:12px;background:#fff;color:inherit;transition:border-color .15s ease}
.blf-mega__promo:hover{border-color:#bfd0e4;text-decoration:none}
.blf-mega__promo-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.blf-mega__promo-ico{width:20px;height:20px;flex:none}
.blf-mega__promo-title{font-size:.93rem;font-weight:800;color:var(--bl-navy);line-height:1.25}
.blf-mega__promo-text{display:block;color:var(--bl-muted);font-size:.82rem;line-height:1.45}
.blf-mega__promo-cta{display:inline-block;margin-top:9px;color:var(--bl-orange);font-size:.84rem;font-weight:700}

/* The configurators, quieter than the card above them: shortcuts for people who
   already know what they want, not another offer. */
.blf-mega__tools{display:flex;flex-direction:column;gap:1px}
.blf-mega__tools a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--bl-navy);font-size:.83rem;font-weight:600;line-height:1.3}
.blf-mega__tools a:hover{background:#fff;text-decoration:none}
.blf-mega__toolico{width:18px;height:18px;flex:none;opacity:.7}

/* ---- Columns 2–4: one grid per category -------------------------------- */

.blf-mega__body{min-width:0}
.blf-mega__panel{display:grid;grid-template-columns:minmax(200px,250px) minmax(220px,290px) minmax(0,1fr);min-width:0;height:100%}
.blf-mega__panel[hidden]{display:none}

/* The blue eyebrow over columns 2 and 3 — it names what you are looking at,
   which is the only way to tell the two link columns apart at a glance. */
.blf-mega__coltitle{display:block;margin:0 0 8px;padding:0 12px;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;font-weight:800;line-height:1.3;color:var(--bl-blue)}

/* Column 2 — the category's groups. */
.blf-mega__l2col{min-width:0;padding:18px 12px 22px;border-right:1px solid var(--bl-line)}
.blf-mega__l2{display:flex;flex-direction:column;gap:1px}
.blf-mega__l2link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;color:var(--bl-ink);font-size:.92rem;font-weight:500;line-height:1.35}
.blf-mega__l2link:hover{text-decoration:none}
.blf-mega__l2item:hover .blf-mega__l2link{background:var(--bl-soft);color:var(--bl-navy)}
.blf-mega__l2item.is-active .blf-mega__l2link{background:#E6EEF9;color:var(--bl-navy);font-weight:600}
.blf-mega__l2item.is-active .blf-mega__chev{opacity:.7}

/* Column 3 — the selected group's links. */
.blf-mega__l3col{min-width:0;padding:18px 14px 22px;border-right:1px solid var(--bl-line)}
.blf-mega__l3[hidden]{display:none}
.blf-mega__links{display:flex;flex-direction:column;gap:1px}
.blf-mega__links a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;color:var(--bl-ink);font-size:.9rem;font-weight:500;line-height:1.35}
.blf-mega__links a > span{flex:1;min-width:0}
.blf-mega__links a:hover{background:var(--bl-soft);color:var(--bl-navy);text-decoration:none}

/* A starred row is the shop's own recommendation, so it is tinted warm rather
   than blue — blue is what "selected" means everywhere else in this panel. The
   gap rule fires once, on the first starred row after a plain one, which sets
   the recommendations off from the category list without a divider. */
.blf-mega__links li:not(.is-featured) + li.is-featured{margin-top:7px}
.blf-mega__links .is-featured a{background:#FBF5EC;color:var(--bl-navy);font-weight:600}
.blf-mega__links .is-featured a:hover{background:#F6EBDC}
.blf-mega__star{flex:none;color:var(--bl-orange)}

/* The row whose card is showing stays marked once the pointer moves on into
   column 4 — without it the card reads as belonging to nothing. Same weight as
   the featured rules above, so these have to stay after them. */
.blf-mega__l3item.is-active > a{background:var(--bl-soft);color:var(--bl-navy)}
.blf-mega__l3item.is-featured.is-active > a{background:#F6EBDC}

/* Column 4 — the preview card for the selected group. Tinted like the rail so
   the two link columns read as the white middle of the panel. Capped, because
   on a very wide screen a three-across tile grid that keeps growing stops
   looking like a card and starts looking like a page. */
.blf-mega__previewcol{min-width:0;padding:18px 22px 22px 22px;background:#F7F9FC;box-shadow:100vw 0 0 #F7F9FC}
.blf-mega__preview{max-width:620px}
.blf-mega__preview[hidden]{display:none}
.blf-mega__previewtitle{margin:0 0 6px;font-size:1.22rem;font-weight:800;line-height:1.2;color:var(--bl-navy)}
.blf-mega__previewtext{margin:0 0 14px;color:var(--bl-muted);font-size:.86rem;line-height:1.5}

.blf-mega__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.blf-mega__tiles a{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;padding:12px 10px 11px;border:1px solid var(--bl-line);border-radius:10px;background:#fff;color:var(--bl-navy);text-align:center;transition:border-color .14s ease,box-shadow .14s ease}
.blf-mega__tiles a:hover{border-color:#b8cae1;box-shadow:var(--bl-shadow);text-decoration:none}
.blf-mega__tilemedia{display:flex;align-items:center;justify-content:center;width:100%;height:74px}
/* Category shots are photographed on white; multiply drops the seam between the
   picture and the card without needing a cut-out. */
.blf-mega__tilemedia img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.blf-mega__tilelabel{font-size:.76rem;font-weight:600;line-height:1.3}

/* A leaf category has no children to lay out, so its card shows the category
   itself at the size the tile grid would have taken. */
.blf-mega__hero{display:flex;align-items:center;justify-content:center;height:210px;margin:0 0 14px;padding:16px;border:1px solid var(--bl-line);border-radius:12px;background:#fff;transition:border-color .14s ease,box-shadow .14s ease}
.blf-mega__hero:hover{border-color:#b8cae1;box-shadow:var(--bl-shadow);text-decoration:none}
.blf-mega__hero img{width:auto;height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply}

.blf-mega__cta{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:10px;background:var(--bl-orange);color:#fff;font-size:1rem;font-weight:700;line-height:1.2;text-align:center;transition:background .15s ease}
.blf-mega__cta:hover{background:var(--bl-orange-d);color:#fff;text-decoration:none}

/* Drill-down controls belong to the mobile drawer only. */
.blf-mega__drill,.blf-mega__back,.blf-mega__gback{display:none}

/* Keyboard focus has to stay legible on the blue rail row too, so the ring is
   drawn inside the element rather than around it. */
.blf-menu__caret:focus-visible,
.blf-menu__top:focus-visible,
.blf-mega__raillink:focus-visible,
.blf-mega__l2link:focus-visible,
.blf-mega__links a:focus-visible,
.blf-mega__tiles a:focus-visible,
.blf-mega__hero:focus-visible,
.blf-mega__cta:focus-visible,
.blf-mega__promo:focus-visible,
.blf-mega__tools a:focus-visible,
.blf-mega__drill:focus-visible,
.blf-mega__back:focus-visible,
.blf-mega__gback:focus-visible{outline:2px solid var(--bl-blue);outline-offset:-2px;border-radius:8px}
.blf-mega__railitem.is-active .blf-mega__raillink:focus-visible,
.blf-mega__cta:focus-visible{outline-color:#fff}

@media(prefers-reduced-motion:reduce){
	.blf-mega{transition:none}
	.blf-menu__caret svg{transition:none}
	body::before{transition:none}
}

/* Narrower desktops: the tiles go two-across before they get too small to read,
   then the whole preview column goes before the link columns get cramped. The
   right-hand gutter moves with it. */
@media(max-width:1320px){
	.blf-mega__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
	.blf-mega__preview{max-width:420px}
}
@media(max-width:1120px){
	.blf-mega__previewcol{display:none}
	.blf-mega__panel{grid-template-columns:minmax(190px,240px) minmax(0,1fr)}
	.blf-mega__l3col{border-right:0}
}

/* ---- Mobile drawer ----------------------------------------------------
   The panel lives inside the nav drawer and drills one level at a time:
   the rail, then that category's groups, then that group's links. The two
   flags on .blf-nav say how deep you are (see mega-menu-v3.js); the preview
   card is dropped — a picture grid in a 380px drawer is a scroll, not a
   preview. The panel stays visible even with the `hidden` attribute still on
   it, so a visitor without JS at least gets the category links. */
@media(max-width:900px){
	/* The drawer brings .blf-nav-overlay with it; two scrims would double up. */
	body.blf-mega-open::before{display:none}

	.blf-header__nav{border-top:0}
	.blf-nav__row{flex-direction:column;align-items:stretch;gap:0;min-height:0;max-width:none}
	.blf-menu--main{display:none}
	.blf-menu--util{flex-direction:column;align-items:stretch;gap:0;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--bl-line)}
	.blf-menu--util .blf-menu__top{padding:12px 10px;font-size:1rem}

	.blf-mega,.blf-mega[hidden]{display:block;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;z-index:auto;transition:none}
	.blf-mega__inner{display:block;max-width:none;padding:0}

	.blf-mega__railcol{display:block;padding:0;background:none;box-shadow:none;border-right:0}
	.blf-mega__railitem{border-radius:8px}
	.blf-mega__railitem:hover,.blf-mega__railitem.is-active{background:none}
	.blf-mega__railitem.is-active .blf-mega__raillink{color:var(--bl-navy)}
	.blf-mega__raillink{padding:13px 10px;font-size:1rem}
	/* The drill button carries the chevron here, so the row would show two. */
	.blf-mega__railitem[data-blf-cat] .blf-mega__raillink .blf-mega__chev{display:none}
	.blf-mega__drill{display:flex;align-items:center;justify-content:center;flex:none;width:44px;align-self:stretch;border:0;background:none;color:var(--bl-navy);border-radius:8px}
	.blf-mega__drill:hover{background:var(--bl-soft)}
	.blf-mega__promo{margin-top:14px}
	.blf-mega__tools{margin-top:6px}

	.blf-mega__body{display:none}
	.blf-mega__panel{display:block}
	.blf-mega__l2col,.blf-mega__l3col{padding:0;border-right:0}
	.blf-mega__previewcol{display:none}
	.blf-mega__coltitle{padding:0 10px}
	.blf-mega__l2link,.blf-mega__links a{padding:12px 10px;font-size:.98rem}
	.blf-mega__back,.blf-mega__gback{align-items:center;gap:8px;width:100%;margin-bottom:10px;padding:12px 10px;border:0;border-bottom:1px solid var(--bl-line);border-radius:0;background:none;color:var(--bl-navy);font-size:1rem;font-weight:700;text-align:left}

	/* Level 2: the category's groups replace the rail. */
	.blf-nav.is-drilled .blf-mega__rail,
	.blf-nav.is-drilled .blf-mega__promo,
	.blf-nav.is-drilled .blf-mega__tools,
	.blf-nav.is-drilled .blf-menu--util,
	.blf-nav.is-drilled .blf-nav__extra{display:none}
	.blf-nav.is-drilled .blf-mega__body{display:block}
	.blf-nav.is-drilled .blf-mega__back{display:flex}

	/* Level 3: the group's links replace the groups. */
	.blf-mega__l3col{display:none}
	.blf-nav.is-grouped .blf-mega__l2col,
	.blf-nav.is-grouped .blf-mega__back{display:none}
	.blf-nav.is-grouped .blf-mega__l3col{display:block}
	.blf-nav.is-grouped .blf-mega__gback{display:flex}
}

/* ---- Level 1: the header's first row ----------------------------------
   v3's own, and the reason it is a design rather than a skin. header.php only
   renders these when blf_menu_has_toolbar() is true, so nothing here needs an
   `undo` counterpart in the other two stylesheets.

   Order across the row: brand · search · Ajánlatkérés · Gyorsrendelés · price
   switch · account icons. The search takes the slack because it is what most
   visitors came for; everything to its right keeps its natural width. */

.blf-header__search{flex:1 1 420px;min-width:0;max-width:560px}
/* main.css centres the form and caps it at 760px for the drop-down panel; in
   the bar it is a bar item and the flex parent decides its width. */
.blf-header__search .blf-searchform{max-width:none;margin:0}
/* Quieter than the drop-down's 2px navy frame — the field lives in the header
   full time now, so it has to sit in the row rather than shout from it. */
.blf-header__search .blf-searchform__field{gap:10px;padding:4px 5px 4px 16px;border:1px solid #cbd5e1;border-radius:10px;box-shadow:none}
.blf-header__search .blf-searchform__field:focus-within{border-color:var(--bl-blue);box-shadow:0 0 0 3px rgba(24,88,168,.12)}
.blf-header__search .blf-searchform__field input[type=search]{font-size:.95rem;padding:9px 2px}
/* Orange: the one submit in the row, and the only orange in the bar. */
.blf-header__search .blf-searchform__btn{background:var(--bl-orange);border-radius:8px;padding:10px 22px;font-size:.95rem}
.blf-header__search .blf-searchform__btn:hover{background:var(--bl-orange-d)}
/* The suggestions now drop over the mega panel instead of over the page, and
   both are children of the sticky header's stacking context — so this has to
   beat .blf-mega's z-index: 90, not the header's own 9000. */
.blf-header__search .blf-suggest{z-index:200}

/* Outlined, not filled: it is the second call to action in the row, behind the
   search, and a solid orange pill next to a solid orange button reads as two
   competing submits. */
.blf-header__quote{display:inline-flex;align-items:center;flex:none;padding:9px 18px;border:1.5px solid var(--bl-orange);border-radius:999px;color:var(--bl-orange);font-size:.9rem;font-weight:700;white-space:nowrap;transition:background .15s ease,color .15s ease}
.blf-header__quote:hover{background:var(--bl-orange);color:#fff;text-decoration:none}

/* A plain link — for the people who already know the part number and do not
   need to be sold anything. */
.blf-header__quick{display:inline-flex;align-items:center;flex:none;padding:9px 8px;color:var(--bl-muted);font-size:.88rem;font-weight:500;white-space:nowrap}
.blf-header__quick:hover{color:var(--bl-navy);text-decoration:none}

.blf-header__quote:focus-visible,
.blf-header__quick:focus-visible{outline:2px solid var(--bl-blue);outline-offset:2px}

/* Six items plus a growing search field will not fit a laptop row forever.
   They drop in reverse order of how much work they do: the quick-order link
   first (it has the smallest audience), then the quote button, whose job the
   mobile drawer's own CTA already covers. */
@media(max-width:1240px){
	.blf-header__quick{display:none}
	.blf-header__search{flex-basis:320px}
}
@media(max-width:1040px){
	.blf-header__quote{display:none}
}

/* Below the nav breakpoint the search gets the row to itself, under the brand
   and the burger — full width, still the first thing on the page after the
   logo. `flex-wrap` has to be re-enabled here: main.css pins the bar to
   `nowrap`, which is right for a bar whose items are all icons. */
@media(max-width:900px){
	.blf-header__bar{flex-wrap:wrap;padding-bottom:12px}
	.blf-header__search{order:9;flex:1 0 100%;max-width:none}
	.blf-header__search .blf-searchform__btn{padding:10px 16px}
}