/* ==========================================================================
   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.

   What you see is a card, not a band: it hangs from the container's left edge
   and is exactly as wide as its own columns, so it never paints an empty tinted
   strip to the left or right of the content. (What you *hover* is still a band
   — `.blf-mega` stays full width and transparent so the pointer can travel to
   the card from anywhere in the nav row; see the panel section below.)

   That is why nothing here bleeds to the viewport edge, and why the two link
   columns are sized with `fit-content()` — each one takes the width of its
   widest row (badge chip included) and stops, capped only so one long category
   name cannot push the panel past the container. The rail and the preview card keep fixed widths: their content is
   a wrapped paragraph and an image grid, which have no natural width to take.

   Every number in that paragraph is editable in Megjelenés → Mega menü v4,
   which writes them as `--blf-mm-*` custom properties into a <style> block
   right after this file (inc/mega-menu-v4-layout.php). Hence the `var(…, x)`
   fallbacks below: the fallback IS the default, so this stylesheet stands on
   its own if the option was never saved — and because the overrides are
   properties rather than rules, the media queries at the bottom of this file
   still win where they have to. Change a default here and change it there.

   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 -------------------------------------------------------- */

/* The panel is two boxes, and the diagonal is why. `.blf-mega` is a transparent
   full-width band that paints nothing; the visible card is `.blf-mega__inner`
   inside it. Because the cascade opens one column at a time, an open panel is
   usually far narrower than the nav row above it — the trip from "Asztalok" on
   the right down into a rail-only panel on the left crosses page, not panel,
   and it is the pointer leaving `.blf-mega` that closes the menu. The band is
   that missing floor: invisible, but hovered.

   It also makes a click in the empty part a click *outside* the panel, which is
   what a visitor means by it — so mega-menu-v3.js tests `.blf-mega__inner`, not
   `.blf-mega`, when it decides whether a click dismissed the menu. */
.blf-mega{position:absolute;top:100%;left:0;right:0;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}
/* The card. Everything the admin page (Megjelenés → Mega menü v4) can move
   lives here: where the box starts, how wide it may get, how round it is. The
   alignment arrives as margins rather than offsets because the box is in flow
   inside the band — `auto` on both sides is what centres it. */
.blf-mega__inner{display:grid;grid-template-columns:var(--blf-mm-rail,240px) minmax(0,auto);align-items:stretch;width:var(--blf-mm-w,max-content);max-width:var(--blf-mm-maxw,min(100%,var(--bl-container)));margin-left:var(--blf-mm-ml,max(0px,(100% - var(--bl-container))/2));margin-right:var(--blf-mm-mr,0);overflow:hidden;background:#fff;border:1px solid var(--bl-line);border-top:0;border-radius:0 0 var(--blf-mm-radius,14px) var(--blf-mm-radius,14px);box-shadow:var(--bl-shadow-lg)}
.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 16px 20px;background:#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 -------------------------------- */

/* The body is a one-cell grid and the panel sits in that cell, so the panel is
   as tall as the panel box however short its own columns are — and its columns,
   being grid items, stretch with it. Without this the rail (which carries the
   advisory card and the configurators) sets the height and columns 2-4 stop
   partway down, leaving their dividers and tint hanging in mid-air. */
.blf-mega__body{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.blf-mega__panel{display:grid;grid-row:1;grid-column:1;grid-template-columns:var(--blf-mm-cols,fit-content(300px) fit-content(340px) minmax(0,430px));min-width:0}
.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}

/* The IA v5 emphasis chip ("Fő szakterületünk", "Kiemelt"). It rides straight
   after the group name — `margin-right:auto` eats the free space so the row's
   space-between still parks the chevron on the right edge. Navy on a tint
   rather than orange: orange means "buy this" everywhere else in the header,
   and this is navigation. */
.blf-mega__l2badge{flex:0 0 auto;margin-right:auto;padding:2px 7px;border-radius:999px;background:#E6EEF9;color:var(--bl-navy);font-size:.62rem;font-weight:800;font-style:normal;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.blf-mega__l2item.is-badged .blf-mega__l2link{font-weight:600}
.blf-mega__l2item.is-active .blf-mega__l2badge{background:#fff}
.blf-mega__coltitle .blf-mega__l2badge{margin-right:0;margin-left:6px;vertical-align:1px}

/* Column 3 — the selected group's links. Every group of the open category is
   stacked into the same grid cell and the inactive ones are hidden with
   `visibility` rather than `display`, so the column is sized by the widest
   group in the category instead of resizing under the pointer as you move down
   column 2. Hidden-by-visibility is still out of the tab order and out of the
   accessibility tree, so the `hidden` attribute mega-menu-v3.js sets still
   means what it says. */
.blf-mega__l3col{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0;padding:18px 14px 22px;border-right:1px solid var(--bl-line)}
.blf-mega__l3{grid-column:1;grid-row:2}
.blf-mega__l3[hidden]{display:block;visibility:hidden}
.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. A fixed width
   rather than a content-sized one: a three-across tile grid has no natural
   width, and letting it take one would turn the card into a page. It is the
   only column allowed to give ground if the two link columns ever want more
   than the container has — hence `minmax(0, …)` on its track. */
.blf-mega__previewcol{min-width:0;padding:18px 22px 22px;background:#F7F9FC}
/* Only bites in the two stretching alignments, where the column has no width of
   its own: a tile grid that keeps growing with the screen stops looking like a
   card and starts looking like a page. In the shrink-to-fit alignments the
   column's own width is the cap, and this is `none`. */
.blf-mega__preview{max-width:var(--blf-mm-preview-cap,none)}
.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}

/* ---- The cascade ------------------------------------------------------
   One column at a time, and only forwards: the resting panel is the rail on its
   own (no category selected means no `.blf-mega__panel` is shown, so column 2
   is simply absent), and columns 3 and 4 arrive together the moment a group in
   column 2 is hovered — `is-grp`, set by mega-menu-v3.js. Column 4 answers to
   column 2, not to column 3: hovering a link only swaps which card is in it.

   Hiding the two columns is not enough on its own — their grid tracks would
   still be reserved, and a `minmax(0, 430px)` track holds its width with
   nothing in it. So the panel drops to a single track as well. The rule is
   deliberately more specific than the two narrow-screen queries below, which
   only ever describe the fully open panel. */
@media(min-width:901px){
	.blf-mega:not(.is-grp) .blf-mega__panel{grid-template-columns:var(--blf-mm-c2,fit-content(300px))}
	.blf-mega:not(.is-grp) .blf-mega__l3col,
	.blf-mega:not(.is-grp) .blf-mega__previewcol{display:none}
	/* Last column standing: its divider would double up with the panel's border. */
	.blf-mega:not(.is-grp) .blf-mega__l2col{border-right:0}
}

/* 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 preview card narrows and its tiles go two-across
   before they get too small to read, then the whole column goes before the link
   columns get cramped. The link columns keep their own width throughout — they
   are what the panel is for. */
@media(max-width:1320px){
	.blf-mega__panel{grid-template-columns:var(--blf-mm-cols-narrow,fit-content(300px) fit-content(340px) minmax(0,340px))}
	.blf-mega__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1120px){
	.blf-mega__previewcol{display:none}
	/* Nothing left for a column-3 row to open, so it is only a link now. */
	.blf-mega__links .blf-mega__chev{display:none}
	.blf-mega__panel{grid-template-columns:var(--blf-mm-cols-flat,fit-content(300px) fit-content(340px))}
	.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;left:auto;right:auto;opacity:1;visibility:visible;transform:none;z-index:auto;transition:none}
	.blf-mega__inner{display:block;width:auto;max-width:none;margin:0;padding:0;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none}

	.blf-mega__railcol{display:block;width:auto;padding:0;background: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}
	/* The drawer shows one group at a time, so the stacked cell from the desktop
	   rules would leave the whole category's worth of blank space under it. */
	.blf-mega__l3[hidden]{display:none}
	.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}
}