.ssg4-header,
.ssg4-header *{box-sizing:border-box}

.ssg4-header{
	--ssg4-night:#0e1a2b;
	--ssg4-night-2:#0e1a2b;
	--ssg4-surface:rgba(8,22,35,.94);
	--ssg4-surface-soft:rgba(255,255,255,.045);
	--ssg4-surface-hover:rgba(255,255,255,.075);
	--ssg4-gold:#d7b95f;
	--ssg4-gold-light:#f1d889;
	--ssg4-text:#f7f4ed;
	--ssg4-muted:rgba(247,244,237,.58);
	--ssg4-line:rgba(239,216,137,.20);
	--ssg4-line-soft:rgba(255,255,255,.095);
	--ssg4-green:#6bd7a8;
	direction:rtl;
	position:fixed;
	z-index:99990;
	top:var(--ssg4-runtime-top,10px);
	right:0;
	left:0;
	font-family:inherit;
	pointer-events:none;
}

.admin-bar .ssg4-header{top:var(--ssg4-runtime-top,42px)}

/* VIRA 7.70.53 — viewport-root contract. The shortcode may live inside a
   transformed Elementor/theme wrapper; JS hoists it to body before interaction.
   This rule prevents generic theme header transforms/margins from reintroducing
   a non-viewport fixed containing block after the move. */
body > .ssg4-header[data-ssg4-viewport-root]{
	position:fixed!important;
	right:0!important;
	left:0!important;
	width:auto!important;
	max-width:none!important;
	margin:0!important;
	transform:none!important;
}
.ssg4-header a{text-decoration:none!important}
.ssg4-topline,.ssg4-shell,.ssg4-drawer{pointer-events:auto}

/* Legacy secondary utility row retired in VIRA 7.63.7.
 * Keep a defensive CSS kill-switch so stale/cached legacy markup cannot peek behind the main header. */
.ssg4-topline{display:none!important}


/*
 * Desktop layout uses two equal flexible side columns around an auto-sized nav.
 * This keeps the navigation mathematically centered regardless of logo/account width.
 */
.ssg4-shell{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
	align-items:center;
	gap:20px;
	width:min(1440px,calc(100% - 40px));
	min-height:66px;
	margin:auto;
	padding:8px 11px;
	border:1px solid var(--ssg4-line);
	border-radius:20px;
	background:
		linear-gradient(180deg,rgba(255,255,255,.025),transparent 48%),
		linear-gradient(108deg,rgba(6,17,28,.97),rgba(10,29,46,.94));
	box-shadow:0 18px 54px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07);
	backdrop-filter:blur(18px) saturate(125%);
	-webkit-backdrop-filter:blur(18px) saturate(125%);
}

.ssg4-shell::before{
	content:"";
	position:absolute;
	top:-1px;
	right:26px;
	left:26px;
	height:1px;
	background:linear-gradient(90deg,transparent,rgba(241,216,137,.26),transparent);
	pointer-events:none;
}

.ssg4-logo{
	display:grid;
	justify-self:start;
	gap:5px;
	min-width:0;
	padding:6px 9px;
	line-height:1;
	color:var(--ssg4-text)!important;
	white-space:nowrap;
	transition:opacity .18s ease;
}
.ssg4-logo:hover,.ssg4-logo:focus-visible{opacity:.84}
.ssg4-logo b{font-size:18px;font-weight:950;letter-spacing:3.1px}
.ssg4-logo small{color:var(--ssg4-gold-light);font-size:6.5px;font-weight:900;letter-spacing:2.25px}

.ssg4-menu-button{
	display:none;
	align-items:center;
	justify-content:center;
	gap:7px;
	height:42px;
	padding:0 12px;
	border:1px solid var(--ssg4-line-soft);
	border-radius:13px;
	background:var(--ssg4-surface-soft);
	color:var(--ssg4-text);
	font:inherit;
	font-size:11px;
	font-weight:900;
	cursor:pointer;
}
.ssg4-menu-button span{display:grid;place-items:center;width:22px;height:22px}
.ssg4-menu-button em{font-style:normal}
.ssg4-menu-button svg,.ssg4-icon svg,.ssg4-login svg,.ssg4-drawer svg,.ssg4-search-modal svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.ssg4-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	justify-self:center;
	gap:2px;
	min-width:0;
	padding:3px;
	border:1px solid rgba(255,255,255,.055);
	border-radius:14px;
	background:rgba(3,12,20,.24);
}
.ssg4-nav a{
	position:relative;
	isolation:isolate;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:38px;
	padding:0 11px;
	border:1px solid transparent;
	border-radius:10px;
	color:rgba(247,244,237,.87)!important;
	font-size:11.5px;
	font-weight:820;
	line-height:1;
	white-space:nowrap;
	transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ssg4-nav a::after{
	content:"";
	position:absolute;
	right:24%;
	bottom:5px;
	left:24%;
	height:1px;
	border-radius:99px;
	background:var(--ssg4-gold-light);
	opacity:0;
	transform:scaleX(.45);
	transition:opacity .18s ease,transform .18s ease;
}
.ssg4-nav a:hover,.ssg4-nav a:focus-visible{background:rgba(255,255,255,.055);color:var(--ssg4-text)!important}
.ssg4-nav a:focus-visible{outline:1px solid rgba(241,216,137,.46);outline-offset:1px}
.ssg4-nav a.is-active{
	border-color:rgba(241,216,137,.22);
	background:linear-gradient(180deg,rgba(215,185,95,.12),rgba(215,185,95,.055));
	color:var(--ssg4-gold-light)!important;
	font-weight:920;
}
.ssg4-nav a.is-active::after{opacity:.95;transform:scaleX(1)}
.ssg4-nav a.is-active:hover{border-color:rgba(241,216,137,.32);background:linear-gradient(180deg,rgba(215,185,95,.16),rgba(215,185,95,.07))}

/* Compact action cluster; isolated from every other WordPress/WooCommerce control. */
.ssg4-actions{
	display:flex;
	align-items:center;
	justify-self:end;
	gap:4px;
	min-width:0;
	padding:4px;
	border:1px solid rgba(255,255,255,.075);
	border-radius:16px;
	background:rgba(1,10,17,.22);
}
.ssg4-icon{
	position:relative;
	display:grid;
	place-items:center;
	flex:0 0 38px;
	width:38px;
	height:38px;
	padding:0;
	border:1px solid transparent;
	border-radius:11px;
	background:transparent;
	color:rgba(247,244,237,.82)!important;
	cursor:pointer;
	transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ssg4-icon:hover,.ssg4-icon:focus-visible{border-color:rgba(241,216,137,.16);background:rgba(215,185,95,.09);color:var(--ssg4-gold-light)!important}
.ssg4-icon:focus-visible{outline:1px solid rgba(241,216,137,.48);outline-offset:1px}
.ssg4-cart-count{
	position:absolute;
	top:-4px;
	left:-4px;
	display:grid;
	place-items:center;
	min-width:17px;
	height:17px;
	padding:0 4px;
	border:2px solid #0e1a2b;
	border-radius:99px;
	background:var(--ssg4-gold-light);
	color:#0e1a2b;
	font-size:8px;
	font-weight:950;
	line-height:1;
}
.ssg4-cart-count.is-zero,.ssg4-cart-count[data-count="0"]{display:none}

.ssg4-login,.ssg4-account{
	display:flex;
	align-items:center;
	gap:8px;
	min-width:0;
	min-height:38px;
	padding:3px 8px 3px 10px;
	border:1px solid transparent;
	border-radius:11px;
	background:rgba(255,255,255,.035);
	color:var(--ssg4-text)!important;
	font-size:10px;
	font-weight:900;
	transition:background .18s ease,border-color .18s ease;
}
.ssg4-login:hover,.ssg4-login:focus-visible,.ssg4-account:hover,.ssg4-account:focus-visible{border-color:rgba(241,216,137,.16);background:rgba(255,255,255,.06)}
.ssg4-login:focus-visible,.ssg4-account:focus-visible{outline:1px solid rgba(241,216,137,.44);outline-offset:1px}
.ssg4-login svg{width:17px;color:var(--ssg4-gold-light)}
.ssg4-account img{width:30px;height:30px;border:1px solid rgba(241,216,137,.55);border-radius:50%;object-fit:cover}
.ssg4-account span{display:grid;gap:2px;min-width:0}
.ssg4-account small{color:var(--ssg4-muted);font-size:7px;font-weight:750;line-height:1.2}
.ssg4-account b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25}

/* Mobile drawer */
.ssg4-backdrop{position:fixed;z-index:2;inset:0;background:rgba(1,7,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
.ssg4-drawer{position:fixed;z-index:3;top:0;right:0;width:min(430px,100vw);height:100dvh;padding:19px clamp(15px,4vw,24px);overflow:auto;overscroll-behavior:contain;background:linear-gradient(155deg,#0e1a2b 0%,#0e1a2b 74%);box-shadow:-24px 0 74px rgba(0,0,0,.5);transform:translateX(104%);transition:transform .32s cubic-bezier(.2,.82,.2,1)}
.ssg4-header.is-menu-open .ssg4-backdrop{opacity:1;visibility:visible}
.ssg4-header.is-menu-open .ssg4-drawer{transform:none}

.ssg4-drawer-head{position:sticky;z-index:2;top:-19px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:19px 0 14px;border-bottom:1px solid var(--ssg4-line);background:linear-gradient(180deg,#0e1a2b 80%,rgba(13,37,57,.94));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ssg4-drawer-title{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.ssg4-drawer-title>i{display:grid;place-items:center;width:42px;height:42px;margin:0;border:1px solid rgba(241,216,137,.27);border-radius:13px;background:rgba(215,185,95,.10);color:var(--ssg4-gold-light)}
.ssg4-drawer-title>i svg{width:20px;height:20px}
.ssg4-drawer-title>span{display:grid;gap:3px;min-width:0}
.ssg4-drawer-title small{color:var(--ssg4-gold-light);font-size:7px;font-weight:950;letter-spacing:1.7px;direction:ltr;text-align:right}
.ssg4-drawer-title b{color:var(--ssg4-text);font-size:18px;line-height:1.35}
.ssg4-drawer-title em{overflow:hidden;color:var(--ssg4-muted);font-size:8px;font-style:normal;font-weight:700;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}
.ssg4-drawer-head button,.ssg4-search-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--ssg4-line-soft);border-radius:12px;background:rgba(255,255,255,.045);color:var(--ssg4-text);cursor:pointer}

.ssg4-drawer-search{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;margin:16px 0 11px;padding:9px 10px;border:1px solid rgba(241,216,137,.20);border-radius:15px;background:rgba(215,185,95,.065);color:var(--ssg4-text);font:inherit;text-align:right;cursor:pointer}
.ssg4-drawer-search span{display:grid;gap:3px;min-width:0}
.ssg4-drawer-search b{font-size:11.5px}
.ssg4-drawer-search small{overflow:hidden;color:var(--ssg4-muted);font-size:8px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.ssg4-drawer-search i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ssg4-gold-light);color:#0e1a2b}

.ssg4-drawer-user{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(107,215,168,.17);border-radius:15px;background:rgba(107,215,168,.055);color:var(--ssg4-text)!important}
.ssg4-drawer-user>img,.ssg4-drawer-user>i{display:grid;place-items:center;width:38px;height:38px;margin:0;border-radius:50%;object-fit:cover}
.ssg4-drawer-user>img{border:1px solid rgba(241,216,137,.5)}
.ssg4-drawer-user>i{background:rgba(255,255,255,.055);color:var(--ssg4-gold-light)}
.ssg4-drawer-user span{display:grid;gap:3px;min-width:0}
.ssg4-drawer-user small{color:var(--ssg4-muted);font-size:8px}
.ssg4-drawer-user b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.5}
.ssg4-drawer-user em{display:grid;place-items:center;color:var(--ssg4-gold-light);font-style:normal}
.ssg4-drawer-user em svg{width:14px;height:14px}

.ssg4-gender-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0 3px}
.ssg4-gender-shortcuts a{display:grid;place-items:center;gap:2px;min-width:0;min-height:52px;padding:8px 6px;border:1px solid rgba(241,216,137,.17);border-radius:13px;background:linear-gradient(145deg,rgba(215,185,95,.085),rgba(255,255,255,.025));color:var(--ssg4-text)!important;text-align:center;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.ssg4-gender-shortcuts a:hover,.ssg4-gender-shortcuts a:focus-visible{border-color:rgba(241,216,137,.34);background:linear-gradient(145deg,rgba(215,185,95,.15),rgba(255,255,255,.045));outline:none}
.ssg4-gender-shortcuts span{font-size:10.8px;font-weight:950;line-height:1.45}
.ssg4-gender-shortcuts small{color:var(--ssg4-gold-light);font-size:6.6px;font-weight:900;letter-spacing:.9px;direction:ltr}

.ssg4-mobile-nav{display:grid;gap:7px;margin-top:14px}
.ssg4-mobile-nav a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:63px;padding:9px 11px;border:1px solid rgba(255,255,255,.085);border-radius:15px;background:rgba(255,255,255,.026);color:var(--ssg4-text)!important;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.ssg4-mobile-nav a:hover,.ssg4-mobile-nav a:focus-visible{border-color:rgba(241,216,137,.22);background:rgba(255,255,255,.05)}
.ssg4-mobile-nav a.is-active{border-color:rgba(241,216,137,.28);background:linear-gradient(135deg,rgba(215,185,95,.12),rgba(255,255,255,.035))}
.ssg4-mobile-nav a>i{display:grid;place-items:center;width:38px;height:38px;margin:0;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.045);color:var(--ssg4-gold-light)}
.ssg4-mobile-nav a.is-active>i{border-color:rgba(241,216,137,.28);background:rgba(215,185,95,.14)}
.ssg4-mobile-nav a>span{display:grid;gap:3px;min-width:0}
.ssg4-mobile-nav b{font-size:11.5px;line-height:1.4}
.ssg4-mobile-nav small{overflow:hidden;color:var(--ssg4-muted);font-size:8px;font-weight:700;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}
.ssg4-mobile-nav a>svg{width:14px;height:14px;color:var(--ssg4-gold-light)}

.ssg4-drawer-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:14px;padding:14px 2px 5px;border-top:1px solid var(--ssg4-line);color:var(--ssg4-muted);font-size:8.5px;font-weight:800}
.ssg4-drawer-foot>span{display:flex;align-items:center;gap:6px}
.ssg4-drawer-foot>span i{width:6px;height:6px;border-radius:50%;background:var(--ssg4-green);box-shadow:0 0 0 4px rgba(107,215,168,.10)}
.ssg4-drawer-foot>a{display:flex;align-items:center;gap:6px;color:var(--ssg4-gold-light)!important;white-space:nowrap}
.ssg4-drawer-foot strong{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:50%;background:var(--ssg4-gold-light);color:#0e1a2b;font-size:8px}
.ssg4-drawer-foot strong[data-count="0"]{display:none}
.ssg4-drawer-foot--trust-only{justify-content:center}

@media(min-width:941px){
	.ssg4-backdrop,.ssg4-drawer{display:none!important}
}

@media(max-width:1320px){
	.ssg4-shell,.ssg4-topline{width:calc(100% - 28px)}
	.ssg4-shell{gap:12px}
	.ssg4-logo b{font-size:16.5px;letter-spacing:2.6px}
	.ssg4-logo small{letter-spacing:1.9px}
	.ssg4-nav a{padding-inline:8px;font-size:10.5px}
	.ssg4-account b{max-width:72px}
}

@media(max-width:1080px) and (min-width:941px){
	.ssg4-shell{gap:8px;padding-inline:8px}
	.ssg4-logo{padding-inline:5px}
	.ssg4-logo b{font-size:15px;letter-spacing:2px}
	.ssg4-logo small{font-size:5.7px;letter-spacing:1.45px}
	.ssg4-nav{gap:0;padding:2px}
	.ssg4-nav a{min-height:36px;padding-inline:6px;font-size:9.4px}
	.ssg4-actions{gap:2px;padding:3px}
	.ssg4-icon{flex-basis:36px;width:36px;height:36px}
	.ssg4-account{padding-left:7px;padding-right:5px}
	.ssg4-account span{display:none}
}

@media(max-width:940px){
	.ssg4-topline,.ssg4-nav{display:none}
	.ssg4-header{top:var(--ssg4-runtime-top,9px)}
	.admin-bar .ssg4-header{top:var(--ssg4-runtime-top,55px)}
	.ssg4-shell{
		grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
		gap:8px;
		width:calc(100% - 20px);
		min-height:58px;
		padding:7px 8px;
		border-radius:18px;
	}
	.ssg4-shell::before{right:18px;left:18px}
	.ssg4-menu-button{display:flex;justify-self:start;grid-column:1}
	.ssg4-logo{grid-column:2;justify-self:center;padding:5px;text-align:center}
	.ssg4-actions{grid-column:3;justify-self:end;padding:0;border:0;background:transparent}
	.ssg4-actions>[data-sswdce-open-header-search],
	.ssg4-actions>.ssg4-account,
	.ssg4-actions>.ssg4-login,
	.ssg4-actions>.ssg4-cart{display:none!important}
	.ssg4-icon{width:40px;height:40px;flex-basis:40px;border:1px solid var(--ssg4-line-soft);border-radius:12px;background:var(--ssg4-surface-soft)}
}

@media(max-width:560px){
	.ssg4-header{top:var(--ssg4-runtime-top,7px)}
	.ssg4-shell{width:calc(100% - 14px);min-height:54px;padding:6px 7px;border-radius:16px;gap:6px}
	.ssg4-menu-button{width:38px;height:38px;padding:0;border-radius:11px}
	.ssg4-menu-button em{display:none}
	.ssg4-logo b{font-size:14px;letter-spacing:1.9px}
	.ssg4-logo small{font-size:5.3px;letter-spacing:1.15px}
	.ssg4-icon{width:38px;height:38px;flex-basis:38px;border-radius:11px}
	.ssg4-cart-count{top:-4px;left:-4px}
	.ssg4-drawer{padding:16px 13px 17px}
	.ssg4-drawer-head{top:-16px;padding:16px 0 13px}
	.ssg4-drawer-title>i{width:39px;height:39px;border-radius:12px}
	.ssg4-drawer-title b{font-size:16px}
	.ssg4-drawer-title em{font-size:7.5px}
	.ssg4-mobile-nav a{min-height:60px;padding:9px 10px}
	.ssg4-mobile-nav a>i{width:36px;height:36px}
	.ssg4-mobile-nav b{font-size:11px}
	.ssg4-mobile-nav small{font-size:7.5px}
	.ssg4-drawer-foot{font-size:8px}
}

@media(max-width:370px){
	.ssg4-logo b{font-size:12.8px;letter-spacing:1.45px}
	.ssg4-logo small{font-size:4.8px;letter-spacing:.9px}
	.ssg4-mobile-nav small{white-space:normal}
	.ssg4-drawer-foot>span{display:none}
	.ssg4-drawer-foot{justify-content:center}
}

@media(hover:none){
	.ssg4-nav a:hover,.ssg4-icon:hover,.ssg4-mobile-nav a:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
	.ssg4-header *,
	.ssg4-header *::before,
	.ssg4-header *::after{transition:none!important;scroll-behavior:auto!important}
}

/* VIRA 7.68.2 — mobile drawer dual-navigation tabs. */
.ssg4-drawer-tabs{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:7px;
	margin:14px 0 4px;
	padding:4px;
	border:1px solid rgba(255,255,255,.08);
	border-radius:15px;
	background:rgba(255,255,255,.028);
}
.ssg4-drawer-tabs button{
	display:grid;
	gap:2px;
	min-width:0;
	min-height:48px;
	padding:8px 10px;
	border:1px solid transparent;
	border-radius:11px;
	background:transparent;
	color:var(--ssg4-muted);
	font:inherit;
	text-align:center;
	cursor:pointer;
	transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.ssg4-drawer-tabs button span{font-size:10.5px;font-weight:950;line-height:1.4}
.ssg4-drawer-tabs button small{font-size:7.3px;font-weight:750;line-height:1.4;opacity:.82}
.ssg4-drawer-tabs button.is-active{
	border-color:rgba(241,216,137,.24);
	background:linear-gradient(135deg,rgba(215,185,95,.16),rgba(255,255,255,.045));
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
	color:var(--ssg4-text);
}
.ssg4-drawer-tabs button.is-active small{color:var(--ssg4-gold-light);opacity:1}
.ssg4-drawer-tabs button:focus-visible{outline:1px solid rgba(241,216,137,.48);outline-offset:2px}

.ssg4-drawer-panel{min-width:0}
.ssg4-drawer-panel[hidden]{display:none!important}

.ssg4-guide-intro{
	display:grid;
	gap:5px;
	margin:13px 0 10px;
	padding:13px 14px;
	border:1px solid rgba(241,216,137,.14);
	border-radius:15px;
	background:linear-gradient(145deg,rgba(215,185,95,.075),rgba(255,255,255,.026));
}
.ssg4-guide-intro small{color:var(--ssg4-gold-light);font-size:6.8px;font-weight:950;letter-spacing:1.4px;direction:ltr;text-align:right}
.ssg4-guide-intro b{color:var(--ssg4-text);font-size:13px;line-height:1.5}
.ssg4-guide-intro p{margin:0;color:var(--ssg4-muted);font-size:8.2px;font-weight:700;line-height:1.8}

.ssg4-guide-nav{display:grid;gap:8px;margin-top:10px}
.ssg4-guide-nav a{
	position:relative;
	display:grid;
	grid-template-columns:auto minmax(0,1fr) auto;
	align-items:center;
	gap:11px;
	min-height:68px;
	padding:10px 12px;
	border:1px solid rgba(255,255,255,.085);
	border-radius:16px;
	background:rgba(255,255,255,.026);
	color:var(--ssg4-text)!important;
	transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.ssg4-guide-nav a:hover,.ssg4-guide-nav a:focus-visible{border-color:rgba(241,216,137,.24);background:rgba(255,255,255,.052)}
.ssg4-guide-nav a.is-active{border-color:rgba(241,216,137,.30);background:linear-gradient(135deg,rgba(215,185,95,.12),rgba(255,255,255,.035))}
.ssg4-guide-nav a>i{
	display:grid;
	place-items:center;
	width:40px;
	height:40px;
	margin:0;
	border:1px solid rgba(241,216,137,.14);
	border-radius:12px;
	background:rgba(215,185,95,.075);
	color:var(--ssg4-gold-light);
}
.ssg4-guide-nav a>i svg{width:18px;height:18px}
.ssg4-guide-nav a>span{display:grid;gap:3px;min-width:0}
.ssg4-guide-nav b{font-size:11.5px;line-height:1.45}
.ssg4-guide-nav small{overflow:hidden;color:var(--ssg4-muted);font-size:8px;font-weight:700;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}
.ssg4-guide-nav a>svg{width:14px;height:14px;color:var(--ssg4-gold-light)}

@media(max-width:560px){
	.ssg4-drawer-tabs{margin-top:12px}
	.ssg4-drawer-tabs button{min-height:45px;padding:7px 8px}
	.ssg4-drawer-tabs button span{font-size:10px}
	.ssg4-guide-intro{padding:12px}
	.ssg4-guide-nav a{min-height:64px;padding:9px 10px}
	.ssg4-guide-nav a>i{width:37px;height:37px}
	.ssg4-guide-nav b{font-size:11px}
	.ssg4-guide-nav small{font-size:7.5px}
}

@media(max-width:370px){
	.ssg4-drawer-tabs button small{display:none}
	.ssg4-drawer-tabs button{min-height:40px}
	.ssg4-guide-nav small{white-space:normal}
}

@media(hover:none){
	.ssg4-guide-nav a:hover{transform:none}
}

/* VIRA 7.68.23 — 60% mobile navigation drawer with visible storefront context. */
@media(max-width:780px){
  .ssg4-drawer{width:60vw;max-width:none}
  .ssg4-backdrop{background:rgba(1,7,12,.34);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
}
@media(max-width:420px){
  .ssg4-drawer{padding-right:10px;padding-left:10px}
  .ssg4-drawer-title{gap:7px}
  .ssg4-drawer-title>i{width:34px;height:34px}
  .ssg4-drawer-title b{font-size:14px}
  .ssg4-drawer-title em{display:none}
  .ssg4-drawer-search{grid-template-columns:minmax(0,1fr) 32px;gap:7px;padding:7px}
  .ssg4-drawer-search i{width:32px;height:32px}
  .ssg4-drawer-search small{display:none}
  .ssg4-mobile-nav a{grid-template-columns:32px minmax(0,1fr) 12px;gap:7px;min-height:54px;padding:8px}
  .ssg4-mobile-nav a>i{width:32px;height:32px}
  .ssg4-mobile-nav small{white-space:normal}
}


/* VIRA 7.70.32 — fixed mobile header must not repaint an 18px backdrop blur on
   every scroll frame. Opaque surface keeps the same visual hierarchy with much
   lower Android GPU/compositor pressure. */
@media(max-width:767px){
  .ssg4-shell{
    background:#081725!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 10px 28px rgba(0,0,0,.26)!important;
    transform:translateZ(0);
    backface-visibility:hidden;
    contain:paint;
  }
}
