/* Header (Theme Builder header, post 51): the row is logo, mega-menu
   (hamburger) widget 35440da, then the product-search widget b0c4a51, laid
   out with `justify-content: space-between`. With three items that spreads
   them evenly, stranding the hamburger mid-row with a gap on both sides
   instead of sitting next to the search icon on the right.

   Reordering the search widget before the hamburger and giving it
   `margin-left: auto` pushes both as a pair to the row's right edge — the
   auto margin absorbs the row's free space before `space-between` gets a
   chance to spread it, so the container rule doesn't need to change.

   Everything here — including the toggle's box styling below — stays
   inside this same breakpoint. An earlier version styled the toggle
   unscoped and included `display: inline-flex !important`, which
   overrode Elementor's own responsive rule that hides the toggle on
   desktop (where the full horizontal menu shows instead), making the
   hamburger appear at desktop widths too.

   The breakpoint is 1024px, not 767px, to match the Nav Menu widget's own
   switch to the hamburger toggle (see post-51.css's ≤1024px toggle-size
   rule) — the widget already shows the hamburger through the whole
   tablet range, so this pairing/styling fix has to cover that same range
   or tablet is left with the unstyled, stranded-in-the-middle hamburger
   this rule exists to fix. */
@media (max-width: 1024px) {
	.elementor-51 .elementor-element.elementor-element-b0c4a51 {
		order: 1 !important;
		margin-left: auto !important;
	}

	.elementor-51 .elementor-element.elementor-element-35440da {
		order: 2 !important;
	}

	/* Elementor's own ≤1024px responsive setting for this widget's
	   container still carries `margin: 30px 15px 15px 15px` plus
	   `padding: 16px` — leftovers from when this breakpoint showed a
	   compact horizontal menu bar, not a bare icon toggle. The ≤767px
	   mobile variant already zeroes this out (margin: 0, no padding),
	   which is why the toggle sits flush there. Without the same reset
	   here, the 30px top margin pushes the tablet toggle ~7-8px lower
	   than the search icon next to it (which centers in a plain 44px-tall
	   flex box with no such margin), so the two "paired" buttons render
	   at visibly different heights — crooked, not aligned. */
	.elementor-51 .elementor-element.elementor-element-35440da > .elementor-widget-container {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Fixing the container above (previous rule) shrank the header row back
	   to its real 72px height at tablet widths — same as desktop. But the
	   dropdown panel's own opening offset is a *separate* Elementor setting
	   (--n-menu-toggle-icon-distance-from-dropdown, a translateY applied to
	   .e-n-menu-wrapper) that was never coupled to that container fix: it's
	   still 31px at ≤1024px, a value calibrated for the old, taller
	   (119px) tablet header. That left the panel opening well below the
	   (now shorter) header's actual bottom edge with nothing painted in
	   between, so the hero image underneath showed through as a visible
	   strip before the dropdown "arrived".

	   (.e-n-menu-content > .e-con, the selector post-51.css uses for its
	   own desktop/mobile margin-top tuning, is a different — and on this
	   dropdown-layout toggle, empty — element from the one actually
	   holding the visible menu items, .e-n-menu-heading. It has no effect
	   here, which is why the real fix is the distance variable below.)

	   The panel must land exactly at the header's bottom edge (72px) to
	   touch flush. .e-n-menu (the toggle's own nav element) sits
	   vertically centered in the 72px row, so its bottom edge is only at
	   57px (15px top offset + 42px toggle height) — 15px short of the
	   header's actual bottom. .e-n-menu-wrapper opens at nav-bottom +
	   this distance variable, so setting it to 15px (57 + 15 = 72) lands
	   the panel flush, the same way desktop's own distance/margin combo
	   is calculated to flush *its* full horizontal menu bar (different
	   geometry, same target: touch 72px). */
	.elementor-51 .elementor-element.elementor-element-35440da {
		--n-menu-toggle-icon-distance-from-dropdown: 15px !important;
	}

	/* Flush positioning (above) only fixed *where* the panel opens, not
	   *what's painted* while it's open. .e-n-menu-wrapper itself has no
	   background — the only opaque part is .e-con, the category-grid panel,
	   which only starts ~78px into the "KATALOG" item (its own title row
	   plus .e-con's 16px margin-top). On every other page that gap sits over
	   plain white body background and is invisible, but on /katalog/ the
	   WooCommerce shop banner (catalog-banner-settings.php) begins directly
	   under the header at that same y-position, so it shows through the
	   transparent gap as a visible strip between the toggle and the grid.
	   Painting the wrapper itself white covers the whole open panel — title
	   row, margin, and grid alike — regardless of what's on the page behind
	   it. */
	.elementor-51 .elementor-element.elementor-element-35440da .e-n-menu-wrapper {
		background-color: #fff !important;
	}

	/* Match the hamburger toggle to the header search icon next to it: a
	   filled navy square at rest, flipping to a white square with a navy
	   border/icon on hover or while the menu is open — same swap applied
	   to .bokato-product-search__toggle. `display` is intentionally left
	   alone so Elementor's own show/hide-at-breakpoint logic still owns
	   whether the toggle renders at all. */
	.elementor-51 .elementor-element.elementor-element-35440da .e-n-menu-toggle {
		align-items: center !important;
		justify-content: center !important;
		width: 42px !important;
		height: 42px !important;
		padding: 0 !important;
		border: 1px solid #09244b !important;
		border-radius: 1px !important;
		background: #09244b !important;
		color: #fff !important;
		transition: background-color .18s ease, color .18s ease, border-color .18s ease;
	}

	.elementor-51 .elementor-element.elementor-element-35440da .e-n-menu-toggle:hover,
	.elementor-51 .elementor-element.elementor-element-35440da .e-n-menu-toggle[aria-expanded="true"] {
		background: #fff !important;
		border-color: rgba(9, 36, 75, .12) !important;
		color: #09244b !important;
	}

	.elementor-51 .elementor-element.elementor-element-35440da .e-n-menu-toggle-icon svg {
		width: 20px !important;
		height: 20px !important;
		fill: currentColor !important;
	}
}