@charset "UTF-8";

	/* ============================================================
	   1. HEADER HEIGHT/PADDING CONFLICT FIX (mobile + tablet, <=1024px)
	   ============================================================ */
	@media screen and (max-width: 1024px) {
		/* v1.2 (2026-10-17) BUG FIX: style.css sets a FIXED, non-!important
		   `.site-header-main{height:75px}` at max-width:768px. .site-header-main
		   is `display:flex; flex-wrap:wrap; align-items:center`. padding/min-height
		   alone never override `height` -- the box stayed locked at 75px. When the
		   flex row (logo + notice-board holder + nav + mega-menu toggle/menu) didn't
		   fit on one line at this width, the wrapped items overflowed PAST the fixed
		   75px box into the row below instead of growing it, visually reading as the
		   logo/hamburger "moving down" into the next section. Confirmed live via a
		   user screenshot. Fixed by explicitly setting height:auto so the flex
		   container always sizes to its real (now-compacted) content, no overflow. */
		.site-header-main {
			height: auto !important;
			padding-top: 6px !important;
			padding-bottom: 6px !important;
			min-height: 0 !important;
		}
	}

	/* ============================================================
	   2. SITE-BRANDING (logo). v1.3 (2026-10-17): organico-toc-only.php's
	      translateY transforms on .site-branding/.mega-menu-toggle were removed
	      (measured live: they duplicated clearance the now-height:auto header no
	      longer needs, and pushed the logo/hamburger out of line with the
	      absolutely-positioned cart/WhatsApp/search icons -- see that file's
	      changelog). That exposed a SEPARATE, older leftover: style.css's own
	      `@media(max-width:480px){.site-branding{margin-top:25px!important}}`
	      (a second, independent clearance mechanism from a different past fix).
	      With the row now aligned via height:auto, this 25px is pure dead space
	      between the header and the nav strip below it -- confirmed live via a
	      user screenshot and a getBoundingClientRect measurement (host height
	      98px vs. content actually only needing ~72px). Reduced to a small
	      breathing-room value, re-measured after shipping (not reasoned blind).
	   ============================================================ */
	@media screen and (max-width: 767px) {
		.custom-logo {
			max-height: 36px !important;
			width: auto !important;
		}
		/* v1.4 (2026-10-17) CORRECTION: v1.3 set margin-top:4px here, which measured out
		   to logo top:10 -- 16px INTO the .notice-board's own 0-26 range (near-overlap,
		   caught via re-measurement before the user had to report it). margin-top:25px
		   turned out to be load-bearing for correct vertical alignment too (center 49,
		   matching the absolutely-positioned icons' 50/55/56) -- removed the override
		   entirely so style.css's own margin-top:25px!important applies unmodified.
		   margin-top is untouched.
		   v1.5 (2026-10-17): re-measured .site-branding's own children directly --
		   `.site-title` is an EMPTY <p> (no text, used only for the invisible SEO site
		   name) with height:0 but a real margin-bottom:12px (a generic paragraph rule,
		   separate from the margin-top:0.608695652em already zeroed below), which was
		   still inflating .site-branding's own box 12px past the logo's real 36px --
		   that was the remaining "excess gap" after v1.4's partial fix. Hidden outright
		   (it has no visible content to lose) instead of chasing its margin further. */
		.site-branding {
			margin-bottom: 2px !important;
		}
		.wp-custom-logo .site-title {
			display: none !important;
		}
		/* v1.5 ALSO tried host padding-top/bottom:4px (from section 1's 6px) in the same
		   pass -- reverted immediately: measured AND screenshotted live, it pushed
		   .mega-menu-toggle's top to 17px, 9px INTO .notice-board's 0-26px range, and the
		   hamburger icon was fully clipped/hidden behind the black bar (confirmed via
		   screenshot -- not just a bounding-box number). Host padding stays at section 1's
		   6px; only .site-branding's internal dead space was trimmed here.
		   v1.6 (2026-10-17): even with host padding reverted, shrinking .site-branding
		   (the flex line's height-driver) ALSO pulled the flex-centered .mega-menu-toggle
		   up with it -- re-measured at top:19, still 7px into .notice-board, same clipped
		   hamburger. .mega-menu-toggle's own position was never decoupled from the
		   container's cross-size, unlike the absolutely-positioned cart/WhatsApp/search
		   icons which sit at fixed offsets immune to this. Giving it its own explicit
		   margin-top, independent of container height, verified live (not guessed) --
		   see measurement before/after in the deploy history for the exact px value.
		   v1.7 (2026-10-17): that margin-top:10px had ZERO effect -- re-measured, toggle
		   still at top:19, identical to before. style.css has
		   `#mega-menu-wrap-main-menu .mega-menu-toggle{margin-top:0!important}` (specificity
		   1,1,0) at max-width:480px; a plain `.mega-menu-toggle` rule (0,1,0) can never beat
		   it, !important or not -- load order only breaks EQUAL-specificity ties. (The
		   retired organico-header-mobile-fix.php had already diagnosed this exact trap.)
		   Matched the specificity -- and the result was WORSE: margin is real layout space,
		   and .mega-menu-toggle sits inside #mega-menu-wrap-main-menu, a flex child of
		   .site-header-main whose own height had been collapsing to 0. Giving the toggle
		   margin made IT the new tallest flex line item, which grew the whole container
		   (measured 76px -> 116px) and re-centered everything inside that bigger box --
		   toggle ended up at top:79, a +60px swing from a +10px input. Margin participates
		   in auto-height; it was never going to be a clean, isolated nudge here.
		   v1.8 (2026-10-17): switched to `transform`, which paints an offset WITHOUT
		   affecting layout or auto-height at all (the same mechanism organico-toc-only.php
		   originally used, before it was removed in v1.4 for being miscalibrated against the
		   OLD, taller 98px header). Re-measured the toggle's natural (zero-offset) position
		   first (top:19) and picked the smallest translateY that clears
		   .notice-board's bottom (26px) with a small safety margin -- verified live, not
		   guessed, same as every other number in this file. */
		.mega-menu-toggle {
			transform: translateY(12px) !important;
		}
	}

	/* ============================================================
	   3. MAIN MOBILE HEADER total height target ~64-76px: with the
	      padding-top/bottom fix above (6+6=12px) plus a compact ~40px
	      logo and minimal icon spacing, the header settles well inside
	      that band without a hard-coded height (a fixed height risks
	      clipping real content; compacting the padding/children that
	      actually drive the height is the safer fix per the brief).
	      Icon row (whatsapp/search/cart) gets a touch tighter spacing:
	   ============================================================ */
	@media screen and (max-width: 767px) {
		.site-header-main .socials ul,
		.site-header-main .search-right,
		.site-header-main .organi-mini-cart {
			margin-top: 0 !important;
			margin-bottom: 0 !important;
		}
	}

	/* ============================================================
	   4. PROMO BAR (.notice-board): target ~26px, single line where
	      reasonably possible, vertically centered, text unchanged.
	   ============================================================ */
	@media screen and (max-width: 1024px) {
		/* v1.1 (2026-10-16) BUG FIX: a pre-existing legacy rule elsewhere in style.css sets
		   `.notice-board{height:20px}` (a fixed height, not touched/overridden here before).
		   Combined with the font-size/line-height change below, the Hebrew message now wraps
		   to two lines on common phone widths -- and since neither .notice-board nor its
		   child had overflow:hidden, the wrapped second line (in practice just the trailing
		   emoji) rendered OUTSIDE the black background, appearing as a stray floating icon
		   above the logo. Confirmed live via a user screenshot. Fixed by (a) neutralizing the
		   legacy fixed height so the box sizes to its own (now guaranteed single-line)
		   content, and (b) forcing white-space:nowrap + overflow:hidden + ellipsis
		   UNCONDITIONALLY on mobile/tablet, not only on the narrowest phones as the first cut
		   of this file had it. Text itself is still never changed -- only how it's clipped. */
		.notice-board {
			padding: 0 !important;
			min-height: 0 !important;
			height: auto !important;
			overflow: hidden !important;
		}
		.notice-board .column,
		.notice-board .column.notice-board-1 {
			padding: 5px 10px !important;
			margin: 0 !important;
			overflow: hidden !important;
		}
		.notice-board p {
			margin: 0 !important;
			padding: 0 !important;
			font-size: 12.5px !important;
			line-height: 1.3 !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			white-space: nowrap !important;
			display: block;
		}
	}

	/* ============================================================
	   5. MAIN NAVIGATION ROW (Max Mega Menu top-level items): target
	      ~44-52px total. Overrides the plugin's own default padding;
	      44px min-height keeps the touch target compliant.
	   ============================================================ */
	@media screen and (max-width: 1024px) {
		#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
			padding-top: 11px !important;
			padding-bottom: 11px !important;
			line-height: 1.2 !important;
			min-height: 44px;
			box-sizing: border-box;
		}
	}

	/* ============================================================
	   6. BREADCRUMBS: already compacted by organico-toc-only.php
	      (~2px margins, 12px font, single line via its own CSS).
	      Light additional tightening only -- kept here, not duplicated
	      into that file, so there is one place for global spacing.
	   ============================================================ */
	@media screen and (max-width: 767px) {
		#breadcrumbs {
			margin-top: 4px !important;
			margin-bottom: 4px !important;
			overflow-x: auto;
			white-space: nowrap;
			-ms-overflow-style: none;
			scrollbar-width: none;
		}
		#breadcrumbs::-webkit-scrollbar { display: none; }
	}

	/* ============================================================
	   7. H1 GLOBAL COMPACTION (mobile only; desktop untouched).
	      No existing rule in the theme sets an explicit h1 font-size,
	      so this is the first bound ever applied -- text, wording and
	      semantic H1 placement are completely unchanged.
	   ============================================================ */
	@media screen and (max-width: 767px) {
		h1,
		#grow h1,
		.entry-content h1,
		.page-title,
		h1.entry-title {
			font-size: 34px !important;
			line-height: 1.1 !important;
			margin-top: 10px !important;
			margin-bottom: 12px !important;
		}
	}

	/* ============================================================
	   8. TOC (.og-toc, from organico-toc-only.php): collapsed box was already
	      inside the 48-56px target (measured 51px: 1px border + 10px padding +
	      29px title/toggle row + 10px padding + 1px border), but the user asked
	      for it tighter still. Trimmed padding and the surrounding margins (which
	      sit OUTSIDE the 51px box and add to its visual footprint on the page).
	      Internal list spacing when OPEN is left exactly as organico-toc-only.php
	      already set it (already comfortable/readable) -- only collapsed-state
	      spacing touched.
	   ============================================================ */
	@media screen and (max-width: 767px) {
		.og-toc {
			padding: 7px 14px !important;
			margin-top: 5px !important;
			margin-bottom: 8px !important;
		}
	}

	/* ============================================================
	   9. FIRST CONTENT BLOCK: tighten the gap between the H1/TOC area
	      and the first real content (image/paragraph/product block),
	      targeting ~12-20px rather than whatever large default margin
	      stack currently exists on #grow/.main-photo-first/.single-main-content.
	   ============================================================ */
	@media screen and (max-width: 767px) {
		#grow {
			margin-bottom: 4px !important;
		}
		.main-photo-first {
			margin-top: 10px !important;
		}
		.single-main-content > *:first-child {
			margin-top: 0 !important;
		}
	}

	/* ============================================================
	   10. DESKTOP (>1024px): conservative whitespace trim only, no
	       aggressive compaction. Mobile is the priority per the brief.
	   ============================================================ */
	@media screen and (min-width: 1025px) {
		.site-header-main {
			padding-top: 14px !important;
			padding-bottom: 14px !important;
		}
	}