/* yal-home-critical.css — yal-cls1 2026-11-02
   Moved verbatim from the inline <style> in common/home.tpl (was ~100 KB into the HTML,
   after the modules, so on slow networks the header painted in flow and then the hero
   jumped up when `.common-home .header{position:absolute}` arrived).
   Loaded in <head> on home only (common/header.tpl), as the last theme stylesheet.
   Only change vs the inline block: --ht-h fallback 30px -> 26px (rendered .header-top height). */
	div#slideshow0 {
		display: flex !important;
	}
	@media (max-width: 500px) {
		nav#menu {
			display: flex;
			align-items: center;
		}
		.search__item-mob {
			display: block!important;
		}
		li.cabinet__item.search__item {
			display: none;
		}
	}
	@media (max-width: 575px) {
		.view_d {
			display: none !important;
		}
		.view_m {
			display: block !important;
		}
		.common-home .header {
			background-color: #0000009e;
			position: absolute;
			width: 100%;
			z-index: 11;
		}
		.logo {
			background-color: transparent!important;
		}
		svg.img-search {
			height: 26px!important;
		}
		svg.img-search path {
			fill: #fff;
		}
		svg.img-search circle, svg.c_user-icon path, svg.c_user-icon circle {
			stroke: #fff;
		}
		svg.c_user-icon {
			height: 27px !important;
		}
		svg.c_heart-icon {
			min-height: 25px !important;
		}
		.c_heart-icon path {
			stroke: #fff;
		}
		.menu_btn_circle {
			background: #fff!important;
		}
		#wishlist-total #wishlist-count, #cart #cart-count {
			color: #fff!important;
		}
		#cart svg path {
			fill: #fff;
		}
	}
	/* yal-home-hero (2026-05-07): desktop home — overlay header on slideshow video.
	   Transparency 60% (Paul: "потім підкорегуєм"). Mobile (≤575) keeps existing absolute rules above. */
	@media (min-width: 768px) {
		/* yal-home-hero-tweak3 (2026-05-07): both header pieces glassy; logo bumped to 0.85 + 28px blur so it pops as a distinct brand block against the rest */
		/* yal-home-hero-tweak6q: header-top fixed, stays during scroll */
		/* yal-home-hero-tweak6ad (2026-05-10): drop explicit height 32px + padding 0; revert to main.css default `padding: 6px 0` so home matches non-home pages. */
		body.common-home .header-top {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 51;
			padding: 6px 0;
			display: flex;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.8);
			-webkit-backdrop-filter: blur(16px) saturate(120%);
			backdrop-filter: blur(16px) saturate(120%);
		}
		/* yal-home-hero-tweak4 (2026-05-07): pull header blur into ::before so .header doesn't create a stacking context — lets .logo's own backdrop-filter sample raw video pixels, not pre-blurred parent */
		/* yal-home-hero-tweak6q: header fixed, stays during scroll */
		body.common-home .header {
			position: fixed;
			/* yal-home-hero-tweak6ae (2026-05-10): top is JS-measured .header-top height (set on :root as --ht-h) so .header sits flush against .header-top regardless of font metrics. Fallback 30px if JS off. */
			top: var(--ht-h, 26px);
			left: 0;
			right: 0;
			z-index: 50;
			background: transparent;
		}
		/* yal-home-hero-tweak6o: header glass tuned 0.8→0.7, blur 10→6 */
		body.common-home .header::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background-color: rgba(255, 255, 255, 0.7);
			-webkit-backdrop-filter: blur(6px) saturate(120%);
			backdrop-filter: blur(6px) saturate(120%);
		}
		/* yal-home-hero-logo (2026-05-07): logo glassy block — restores visual prominence over transparent header */
		/* yal-home-hero-tweak6o: logo glass tuned 0.7→0.6, blur 8→6 */
		body.common-home .logo {
			background-color: rgba(255, 255, 255, 0.6) !important;
			-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
			backdrop-filter: blur(6px) saturate(140%) !important;
		}
		/* yal-home-hero-tweak5 / tweak6af / tweak6ag (2026-05-10): block removed; redundant with header.tpl site-wide 400 rule, and its body.common-home prefix was raising specificity above CLEARANCE 500. */
		/* Slideshow video starts at very top of viewport (under transparent header) */
		body.common-home #content {
			padding-top: 0;
		}
	}

	/* yal-home-hero-tweak6l (2026-05-07): sticky-overlay concept — hero stays at viewport top (sticky 100vh, object-fit cover so edges crop on mobile), categories+below overlay over it on scroll, normal scroll resumes once they fully cover hero. Solid white bg on category wrapper. NO scroll-driven transforms. */
	/* yal-home-hero-tweak6n (2026-05-07): switch html/body overflow-x from hidden→clip on common-home — overflow:hidden ancestor breaks position:sticky on .slideshow_video. Clip preserves no-h-scrollbar behavior without creating a scroll container. */
	html, body.common-home {
		overflow-x: clip !important;
	}

	/* yal-home-hero-tweak6ac (2026-05-10): wrap entire sticky-overlay block in min-width:576 so mobile is untouched. Paul: "розміри 575 і менше мають виглядати і працювати як і виглядали". */
	@media (min-width: 576px) {
		/* yal-home-hero-tweak6m: !important on position/top/height to override Bootstrap .position-relative utility */
		body.common-home .slideshow_video {
			position: -webkit-sticky !important;
			position: sticky !important;
			top: 0 !important;
			height: 100vh !important;
			width: 100%;
			overflow: hidden;
			z-index: 1;
		}
		/* yal-home-hero-tweak6p: anchor video to top so bottom crops, not top */
		body.common-home .slideshow_video video {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
			object-position: center top !important;
			aspect-ratio: auto !important;
			display: block;
		}
		/* yal-home-hero-tweak6s (2026-05-10): expanded curtain + content z-index above header so content covers header on scroll. Curtain z=60 above header (50/51). Content z=70 above curtain. */
		body.common-home {
			position: relative;
			background-color: #fff;
		}
		body.common-home::after {
			content: "";
			position: absolute;
			top: 100vh;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			z-index: 60;
			pointer-events: none;
		}
		/* yal-home-hero-tweak6u (2026-05-10): added .main__desc (body-level wrapper around $content_footer brand description) to z=70 selector — was hidden under curtain (z=60). */
		body.common-home > .html_module,
		body.common-home > .slider,
		body.common-home > .main__desc,
		body.common-home > footer.footer {
			position: relative;
			z-index: 70;
		}
	}

	/* yal-home-hero-tweak6d (2026-05-07): JS-driven pulse via rAF (no @keyframes) + parallax on hero */
	.yal-hero-cue {
		position: fixed;
		right: 28px;
		bottom: 32px;
		z-index: 9999;
		display: none;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		color: rgba(255, 255, 255, 0.95);
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		opacity: 0;
		pointer-events: none;
		transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	}
	body.common-home.yal-hero-cue-show .yal-hero-cue {
		display: flex;
		opacity: 1;
		pointer-events: auto;
	}
	/* yal-home-hero-tweak6d: animation removed from CSS — driven by rAF in JS for guaranteed playback */
	.yal-hero-cue__circle {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.4);
		-webkit-backdrop-filter: blur(12px) saturate(140%);
		        backdrop-filter: blur(12px) saturate(140%);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		opacity: 0.7;
	}
	.yal-hero-cue:hover .yal-hero-cue__circle,
	.yal-hero-cue:focus-visible .yal-hero-cue__circle {
		animation-play-state: paused;
		background-color: rgba(255, 255, 255, 0.6);
	}
	.yal-hero-cue:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.8);
		outline-offset: 6px;
		border-radius: 24px;
	}
	@media (prefers-reduced-motion: reduce) {
		.yal-hero-cue { transition: none; }
	}