/* =========================================================================
   YURGA Fullscreen Menu
   Header bar  : burger · language | logo | search · account · cart
   Overlay     : root list → sub panel (list left, hover-swap image right)
   ========================================================================= */

:root {
	--yfsm-accent: #ff0000;
	--yfsm-ink: #3c3c3c;
	--yfsm-muted: #9a9a9a;
	--yfsm-bg: #ffffff;
	--yfsm-font: "Montserrat", Arial, sans-serif;
	--yfsm-weight: 300; /* Montserrat Book 300 */
	--yfsm-tracking: 4px;

	--yfsm-header-h: 72px;
	--yfsm-gutter: clamp(16px, 4vw, 76px);
	--yfsm-gap: clamp(18px, 9.4vw, 180px);
	--yfsm-icon: calc(var(--yfsm-burger) * .95); /* glyph ink ≈ .77em → same visual width as the burger */
	--yfsm-side-gap: clamp(16px, 5vw, 96px); /* space between the two icons on each side */
	--yfsm-burger: 44px;
	--yfsm-flag: 58px;
	--yfsm-logo-w: clamp(150px, 11.3vw, 220px);

	--yfsm-mask-sprite: url("/wp-content/uploads/2026/01/urban-sprite-optimized-scaled-1.webp");
	--yfsm-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- shared resets (beat theme button styles) ---------- */

.yfsm-header button,
.yfsm-overlay button {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0;
	margin: 0;
	padding: 0;
	min-height: 0;
	width: auto;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: 1;
	cursor: pointer;
}

.yfsm-header a,
.yfsm-overlay a {
	text-decoration: none !important;
	color: inherit;
}

.yfsm-header :focus-visible,
.yfsm-overlay :focus-visible {
	outline: 1px dashed var(--yfsm-accent);
	outline-offset: 4px;
}

.yfsm-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ===================================================================
   HEADER BAR
   =================================================================== */

.yfsm-header {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	width: 100%;
	height: var(--yfsm-header-h);
	padding: 0;
	background: var(--yfsm-bg);
	color: var(--yfsm-ink);
	font-family: var(--yfsm-font);
	position: relative;
	z-index: 5;
}

.yfsm-header__side {
	/* Items share the space of their half equally: edge · item · item · logo. */
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	min-width: 0;
	height: 100%;
}

/* Two icons per side, mirrored around the logo:
   burger · search  |  YURGA  |  account · cart                    */
.yfsm-header__side--left,
.yfsm-topbar__side:first-child {
	justify-content: flex-start;
	gap: var(--yfsm-side-gap);
	padding-left: var(--yfsm-gutter);
}

.yfsm-header__side--right {
	justify-content: flex-end;
	gap: var(--yfsm-side-gap);
	padding-right: var(--yfsm-gutter);
}

.yfsm-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--yfsm-burger);
	height: var(--yfsm-burger);
	color: var(--yfsm-ink);
	transition: color .2s ease;
}

.yfsm-header .yfsm-iconbtn,
.yfsm-overlay .yfsm-iconbtn {
	width: var(--yfsm-burger); /* beat the button reset so every icon gets the same box */
	flex: 0 0 auto;
	overflow: visible;
}

.yfsm-iconbtn:hover {
	color: var(--yfsm-accent);
}

.yfsm-glyph {
	font-family: "yurga-general-icons" !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: var(--yfsm-icon);
	line-height: 1;
	text-transform: none;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* burger: lines drift apart a little on hover */
.yfsm-burger .yfsm-svg path {
	transition: transform .35s var(--yfsm-ease);
}

.yfsm-burger:hover .l1 { transform: translate(2px, -1.5px); }
.yfsm-burger:hover .l2 { transform: translateX(-3px); }
.yfsm-burger:hover .l3 { transform: translate(2px, 1.5px); }

/* cart badge */
.yfsm-cart-count {
	position: absolute;
	top: 2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 9px;
	background: var(--yfsm-accent);
	color: #fff;
	font: 600 10px/17px var(--yfsm-font);
	text-align: center;
}

.yfsm-cart-count[hidden] {
	display: none;
}

/* logo */
.yfsm-logo {
	display: block;
	line-height: 0;
}

.yfsm-logo__img {
	display: block;
	width: var(--yfsm-logo-w) !important;
	height: auto !important;
	aspect-ratio: 200 / 54;
	object-fit: cover;
	object-position: center;
	max-width: none;
}

.yfsm-logo__text {
	font: 400 40px/1 var(--yfsm-font);
	letter-spacing: .25em;
	color: #c10030;
}

/* ===================================================================
   OVERLAY
   =================================================================== */

html.yfsm-lock,
html.yfsm-lock body {
	overflow: hidden !important;
}

.yfsm-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001; /* above the WP admin bar and Avada sticky header */
	display: flex;
	flex-direction: column;
	background: var(--yfsm-bg);
	color: var(--yfsm-ink);
	font-family: var(--yfsm-font);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity .35s var(--yfsm-ease), transform .35s var(--yfsm-ease);
}

.yfsm-overlay[hidden] {
	display: none;
}

.yfsm-overlay.is-open {
	opacity: 1;
	transform: none;
}

@media (min-width: 601px) {
	body.admin-bar .yfsm-overlay {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .yfsm-overlay {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* top bar mirrors the header */
.yfsm-topbar {
	flex: 0 0 auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: var(--yfsm-header-h);
	padding: 0;
	position: relative;
	z-index: 2;
}

.yfsm-topbar__side {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	height: 100%;
}

.yfsm-topbar__ghost {
	display: block;
	width: var(--yfsm-burger);
}

/* ---------- language flags at the bottom of the fullscreen menu ---------- */

.yfsm-langs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, 1.6vw, 24px);
	margin-top: clamp(28px, 7vh, 72px);
}

.yfsm-langs__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .45;
	transition: opacity .2s ease, transform .2s ease;
}

.yfsm-langs a.yfsm-langs__item:hover,
.yfsm-langs a.yfsm-langs__item:focus-visible {
	opacity: 1;
	transform: scale(1.08);
}

.yfsm-langs__item.is-current {
	opacity: 1;
	cursor: default;
}

.yfsm-langs__item.is-current::after {
	content: "";
	position: absolute;
	left: 28%;
	right: 28%;
	bottom: 14%;
	height: 2px;
	border-radius: 2px;
	background: var(--yfsm-accent);
}

.yfsm-langs__flag {
	display: block;
	width: var(--yfsm-flag) !important;
	height: var(--yfsm-flag) !important;
	max-width: none;
	object-fit: contain;
}

.yfsm-langs__flag + .yfsm-langs__code {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.yfsm-langs__code {
	font-size: 14px;
	font-weight: var(--yfsm-weight);
	letter-spacing: var(--yfsm-tracking);
	text-transform: uppercase;
}

.yfsm-close .yfsm-svg {
	width: 42px;
	height: 41.5px;
}

.yfsm-close {
	left: var(--yfsm-close-dx, 0px);
	top: var(--yfsm-close-dy, 0px);
	transition: transform .35s var(--yfsm-ease), color .2s ease;
}

.yfsm-close:hover {
	transform: rotate(90deg);
}

/* back: inside the stage, just under the top bar and aligned with the X */
.yfsm-back {
	position: absolute;
	top: clamp(12px, 2.2vh, 20px);
	left: var(--yfsm-gutter);
	z-index: 6;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	height: 44px;
	padding: 0 6px !important;
	font-size: 14px !important;
	font-weight: var(--yfsm-weight) !important;
	letter-spacing: var(--yfsm-tracking) !important;
	text-transform: uppercase !important;
	color: var(--yfsm-ink);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .3s ease .1s, transform .3s var(--yfsm-ease) .1s, color .2s ease;
}

.yfsm-back[hidden] {
	display: none !important;
}

.yfsm-back.is-visible {
	opacity: 1;
	transform: none;
}

.yfsm-back .yfsm-svg {
	width: 34px;
	height: 34px;
	transition: transform .3s var(--yfsm-ease);
}

.yfsm-back:hover {
	color: var(--yfsm-accent);
}

.yfsm-back:hover .yfsm-svg {
	transform: translateX(-4px);
}

/* ---------- stage & panels ---------- */

.yfsm-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.yfsm-panel {
	--yfsm-dir: 1;
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	padding: clamp(16px, 5vh, 56px) var(--yfsm-gutter);
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(var(--yfsm-dir) * 28px));
	transition: opacity .35s var(--yfsm-ease), transform .45s var(--yfsm-ease), visibility 0s linear .45s;
}

.yfsm-panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .35s var(--yfsm-ease) .08s, transform .45s var(--yfsm-ease) .08s, visibility 0s;
}

.yfsm-panel--root {
	--yfsm-dir: -1;
}

/* list column: centred around ~16vw like the mock-up */
.yfsm-col--list {
	justify-self: start;
	box-sizing: border-box;
	width: clamp(220px, 23.5vw, 460px);
	text-align: center;
}

.yfsm-panel--wide .yfsm-col--list {
	width: clamp(320px, 36vw, 720px);
}

/* visual column: ~600px square, ~9.4vw from the right edge on desktop */
.yfsm-col--visual {
	justify-self: end;
	margin-right: max(0px, calc(9.4vw - var(--yfsm-gutter)));
	width: min(31.25vw, 640px, calc(100vh - var(--yfsm-header-h) - 12vh));
	min-width: 220px;
}

/* ---------- lists ---------- */

.yfsm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yfsm-list li {
	margin: 0;
	padding: 0;
}

.yfsm-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 4.6vh, 54px);
	font-size: clamp(16px, 1.15vw, 23px);
	font-weight: var(--yfsm-weight);
	letter-spacing: var(--yfsm-tracking);
	text-transform: uppercase;
	line-height: 1.25;
}

.yfsm-list--root {
	font-size: clamp(18px, 1.45vw, 28px);
	gap: clamp(14px, 5.2vh, 60px);
}

/* long lists → two columns */
.yfsm-list--cols {
	display: block;
	columns: 2;
	column-gap: clamp(24px, 4vw, 80px);
}

.yfsm-list--cols > li {
	break-inside: avoid;
	margin-bottom: clamp(10px, 3.6vh, 42px);
}

/* ---------- link + red wipe hover (same feel as .neu-button-*) ---------- */

.yfsm-link {
	position: relative;
	display: inline-block;
	color: var(--yfsm-ink) !important;
	white-space: nowrap;
	cursor: pointer;
}

.yfsm-link > span {
	position: relative;
	z-index: 1;
}

.yfsm-link::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--yfsm-accent);
	-webkit-text-stroke: 1px var(--yfsm-accent);
	pointer-events: none;
	transition: width .5s ease;
}

.yfsm-link:hover::after,
.yfsm-link:focus-visible::after,
.yfsm-link.is-current::after {
	width: 100%;
}

.yfsm-link.is-disabled {
	color: #c4c4c4 !important;
	cursor: default;
}

.yfsm-link.is-disabled::after {
	content: none;
}

/* ---------- visuals ----------
   Sub panel  : product image (1) < section frame (2) < scribble (3)
   Root panel : one layer per section = frame + scribble, cross-faded on hover
   The scribble sits in .yfsm-visual__clip, masked to the empty area inside the
   frame (mask generated in JS from the frame PNG itself).                      */

.yfsm-visual {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.yfsm-visual img,
.yfsm-visual__layer,
.yfsm-visual__clip {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain;
}

.yfsm-visual__border {
	z-index: 2;
	pointer-events: none;
}

.yfsm-visual__clip {
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.yfsm-visual__clip.is-clipped {
	opacity: 1;
}

/* product image: erased / repainted with the same sprite wipe */
.yfsm-visual__img {
	z-index: 1;
	opacity: 0;
	-webkit-mask-image: var(--yfsm-mask-sprite);
	mask-image: var(--yfsm-mask-sprite);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 3000% 100%;
	mask-size: 3000% 100%;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.yfsm-visual__img.is-on {
	opacity: 1;
}

.yfsm-visual__img.is-erasing {
	-webkit-animation: yfsmMaskHide var(--yfsm-swap-ms, 150ms) steps(29, end) forwards;
	animation: yfsmMaskHide var(--yfsm-swap-ms, 150ms) steps(29, end) forwards;
}

.yfsm-visual__img.is-painting {
	-webkit-animation: yfsmMaskShow var(--yfsm-swap-ms, 150ms) steps(29, end) forwards;
	animation: yfsmMaskShow var(--yfsm-swap-ms, 150ms) steps(29, end) forwards;
}

.yfsm-visual__layer {
	opacity: 0;
	transition: opacity .35s ease;
}

.yfsm-visual__layer.is-on {
	opacity: 1;
}

/* scribble overlay, wiped away with the 30-frame sprite mask */
.yfsm-visual__scribble {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-image: var(--yfsm-mask-sprite);
	mask-image: var(--yfsm-mask-sprite);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 3000% 100%;
	mask-size: 3000% 100%;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.yfsm-visual__scribble.is-wiped {
	-webkit-animation: yfsmMaskHide .7s steps(29, end) forwards;
	animation: yfsmMaskHide .7s steps(29, end) forwards;
}

.yfsm-visual__scribble.is-restored {
	-webkit-animation: yfsmMaskShow .25s steps(29, end) forwards;
	animation: yfsmMaskShow .25s steps(29, end) forwards;
}

@-webkit-keyframes yfsmMaskHide { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes yfsmMaskHide { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@-webkit-keyframes yfsmMaskShow { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes yfsmMaskShow { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* ===================================================================
   TABLET / MOBILE
   =================================================================== */

@media (max-width: 1024px) {
	:root {
		--yfsm-gap: clamp(10px, 3.2vw, 32px);
	}
}

@media (max-width: 800px) {
	:root {
		--yfsm-header-h: 60px;
		--yfsm-burger: 34px;
		--yfsm-gap: clamp(4px, 2.2vw, 18px);
		--yfsm-gutter: 14px;
		--yfsm-logo-w: clamp(96px, 27vw, 140px);
	}

	:root {
		--yfsm-flag: 40px;
	}

	.yfsm-close .yfsm-svg {
		width: 30px;
		height: 30px;
	}

	.yfsm-panel {
		display: block;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scrollbar-width: none;
		padding: 6vh var(--yfsm-gutter) 10vh;
	}

	.yfsm-panel::-webkit-scrollbar {
		display: none;
	}

	.yfsm-panel--sub {
		padding-top: 76px;
	}

	.yfsm-back {
		top: 10px;
	}

	.yfsm-col--visual {
		display: none;
	}

	.yfsm-col--list,
	.yfsm-panel--wide .yfsm-col--list {
		width: 100%;
	}

	.yfsm-list,
	.yfsm-list--root {
		font-size: 19px;
		gap: 26px;
	}

	.yfsm-list--root {
		font-size: 22px;
		gap: 30px;
		padding-top: 4vh;
	}

	.yfsm-list--cols {
		columns: 1;
	}

	.yfsm-list--cols > li {
		margin-bottom: 26px;
	}



	.yfsm-link {
		white-space: normal;
	}
}

@media (max-width: 380px) {
	:root {
		--yfsm-flag: 36px;
		--yfsm-burger: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yfsm-overlay,
	.yfsm-panel,
	.yfsm-panel.is-active,
	.yfsm-visual__layer,
	.yfsm-visual__clip,
	.yfsm-link::after,
	.yfsm-back {
		transition: none !important;
	}

	.yfsm-visual__scribble.is-wiped,
	.yfsm-visual__scribble.is-restored,
	.yfsm-visual__img.is-erasing,
	.yfsm-visual__img.is-painting {
		-webkit-animation-duration: .01s;
		animation-duration: .01s;
	}
}