@charset "UTF-8";

:root {
	--shop-bg: #090b10;
	--shop-surface: rgba(16, 18, 25, 0.86);
	--shop-surface-2: rgba(24, 27, 36, 0.9);
	--shop-surface-3: rgba(32, 35, 46, 0.88);
	--shop-border: rgba(255, 255, 255, 0.1);
	--shop-border-strong: rgba(242, 204, 115, 0.34);
	--shop-gold: #f2cc73;
	--shop-amber: #f2962e;
	--shop-red: #a3352e;
	--shop-blue: #7bb7ff;
	--shop-green: #72dfb4;
	--shop-text: #f7efe2;
	--shop-soft: #cfc3b2;
	--shop-muted: #8f98aa;
	--shop-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
	--shop-radius: 8px;
}

html,
body.website,
body.ingame {
	min-height: 100%;
	background:
		linear-gradient(180deg, rgba(8, 10, 15, 0.74), #090b10 52%, #050609 100%),
		radial-gradient(circle at 12% 8%, rgba(242, 204, 115, 0.16), transparent 26%),
		radial-gradient(circle at 88% 18%, rgba(123, 183, 255, 0.12), transparent 24%),
		url("../images/f2-bg.jpg") center top / cover fixed no-repeat #090b10 !important;
	color: var(--shop-text);
	font-family: Arial, Helvetica, sans-serif;
}

body {
	letter-spacing: 0;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: auto, 44px 44px, 44px 44px;
	mask-image: linear-gradient(180deg, black, transparent 78%);
}

a,
.text-link,
.card h4 a,
.breadcrumb li a,
.category-link a {
	color: var(--shop-gold);
	text-decoration: none;
}

a:hover,
.text-link:hover,
.card h4 a:hover,
.breadcrumb li a:hover,
.category-link a:hover {
	color: #fff3c7;
	text-decoration: none;
}

body.website #page,
body.ingame #page,
#page {
	width: min(1220px, calc(100% - 32px));
	min-height: 720px;
	margin: 28px auto;
	background:
		linear-gradient(180deg, rgba(16, 18, 25, 0.82), rgba(8, 10, 15, 0.94)),
		rgba(10, 12, 18, 0.86);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: var(--shop-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	overflow: hidden;
	backdrop-filter: blur(18px) saturate(120%);
}

#page::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--shop-blue), var(--shop-gold), var(--shop-amber), var(--shop-red));
	opacity: 0.9;
}

.header {
	min-height: 104px;
	padding: 20px 26px 18px;
	border-bottom: 1px solid var(--shop-border);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 35%, rgba(242, 204, 115, 0.06)),
		rgba(10, 12, 18, 0.78);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.header h1 {
	width: 238px;
	height: 66px;
	margin: 0 0 8px;
	background: url("../images/f2-logo.png") left center / contain no-repeat;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.44));
}

.header h1 a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
}

.header .welcome {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: var(--shop-soft);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.header>.payment-block {
	padding-top: 14px;
	text-align: right;
}

.header ul.currency_status {
	display: inline-flex;
	gap: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.header ul.currency_status li {
	min-width: 86px;
	height: 38px;
	margin: 0;
	padding: 7px 11px;
	background: rgba(255, 255, 255, 0.065);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.header ul.currency_status li .block-price,
.end-price {
	color: var(--shop-text);
	font-weight: 900;
}

#navigation {
	margin: 0;
	padding: 14px 24px;
	background: rgba(8, 10, 15, 0.56);
	border-bottom: 1px solid var(--shop-border);
}

#navigation .container {
	width: 100%;
	max-width: none;
}

#navigation .nav-tabs {
	border: 0;
	margin: 0;
}

#navigation .nav-tabs li {
	margin: 0 8px 8px 0;
}

#navigation .nav-tabs li a.btn-navitem,
.btn-navitem {
	min-height: 38px;
	padding: 10px 15px;
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	background: rgba(255, 255, 255, 0.055);
	color: #d8deea;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	box-shadow: none;
	transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}

#navigation .nav-tabs li a.btn-navitem:hover,
#navigation .nav-tabs li a.btn-navitem-active,
#navigation .nav-tabs li a.btn-navitem-active:hover,
.btn-navitem:hover {
	background: linear-gradient(135deg, rgba(242, 204, 115, 0.18), rgba(123, 183, 255, 0.12));
	border-color: var(--shop-border-strong);
	color: var(--shop-text);
	transform: translateY(-1px);
}

#searchBar {
	float: right;
	margin-top: 0;
}

#navigation .input-append {
	height: 40px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#navigation .input-append .icon-search {
	top: 12px;
	color: var(--shop-gold);
}

#navigation .input-append .search-input {
	height: 38px;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--shop-text);
}

#navigation .input-append .search-input::placeholder {
	color: var(--shop-muted);
}

.content {
	padding: 24px;
	background: transparent;
	color: var(--shop-text);
}

.content h2,
#page #landing h2,
.heading-cat {
	margin: 22px 0 16px;
	color: var(--shop-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
}

.content span.item_count {
	color: var(--shop-muted);
}

.breadcrumb {
	padding: 13px 16px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.contrast-box,
.card,
#page div.card,
#page #landing .card,
.content #category .scrollable_container .no-selected-currency {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
		var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	color: var(--shop-text);
}

#promo-area #prmoSlider,
#promo-area .call-to-action,
#promo-area .call-to-action img {
	border-radius: var(--shop-radius);
}

#promo-area #prmoSlider,
#promo-area .call-to-action {
	border: 1px solid var(--shop-border);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
	overflow: hidden;
}

.slider_banner {
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 22px;
	background: linear-gradient(180deg, transparent, rgba(8, 10, 15, 0.92));
}

.slider_banner>h3,
.slider_banner>p {
	color: var(--shop-text);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.slider_banner>h3 {
	color: var(--shop-gold);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
}

#subnavi.nav-tabs {
	border: 0;
}

ul#subnavi.nav-tabs>li>a.btn-catitem,
.btn-catitem,
.btn-subcatitem {
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: #d8deea;
	box-shadow: none;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}

ul#subnavi.nav-tabs>li>a.btn-catitem:hover,
ul#subnavi.nav-tabs>li>a.btn-catitem-active,
.btn-catitem-active,
.btn-subcatitem:hover {
	background: linear-gradient(135deg, rgba(242, 204, 115, 0.17), rgba(123, 183, 255, 0.1));
	border-color: var(--shop-border-strong);
	color: var(--shop-text);
}

.card .list-item,
.content #category .list-item {
	background: transparent;
}

.card .list-item .item-box,
.item-box {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
		var(--shop-surface-2);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.card .list-item.hover .item-box,
.card .list-item:hover .item-box {
	transform: translateY(-3px);
	border-color: var(--shop-border-strong);
	background:
		linear-gradient(180deg, rgba(242, 204, 115, 0.09), rgba(255, 255, 255, 0.04)),
		var(--shop-surface-3);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.card h4,
.card h4 a {
	color: var(--shop-text);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 900;
}

.card .item-description .item-shortdesc,
.card .category-link,
.card .item-description .item-shortdesc .item-text,
.card .item-description .item-shortdesc p {
	color: var(--shop-soft);
}

.card .item-description .item-shortdesc img.item-thumb,
img.item-thumb {
	padding: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
}

.card .list-item .price,
.card .list-item .price:hover {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: var(--shop-gold);
	box-shadow: none;
	font-family: Arial, Helvetica, sans-serif;
}

.card .list-item .price .price-label {
	color: var(--shop-muted);
}

.card .list-item .item-status>i,
.card .list-item .item-status>span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--shop-red), var(--shop-amber));
	color: #fff;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.btn-default,
.btn-price,
.btn-buy,
.btn-disabled,
.btn-discount,
.btn-switch,
.btn-switch-active,
.card .list-item .price {
	border-radius: var(--shop-radius);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	box-shadow: none;
}

.btn-default,
.btn-price,
.btn-buy,
.btn-discount,
.btn-switch-active {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(242, 204, 115, 0.42);
	background: linear-gradient(135deg, #f5d67d, #f2962e);
	color: #17110a !important;
	text-shadow: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn-default:hover,
.btn-price:hover,
.btn-buy:hover,
.btn-discount:hover,
.btn-switch-active:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 238, 180, 0.76);
	box-shadow: 0 14px 28px rgba(242, 150, 46, 0.22);
	color: #17110a !important;
}

.btn-price.premium {
	min-width: 168px;
}

.btn-disabled {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #7f8796 !important;
}

.price_desc {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#slideMenu {
	background:
		linear-gradient(180deg, rgba(22, 24, 32, 0.97), rgba(8, 10, 15, 0.97)),
		var(--shop-bg);
	border-left: 1px solid var(--shop-border);
	box-shadow: -22px 0 48px rgba(0, 0, 0, 0.42);
	color: var(--shop-text);
}

#slideMenu h2 {
	color: var(--shop-gold);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
}

#slideMenu li a.btn-sideitem,
#slideMenu .nav-tabs.nav-stacked>li>a.btn-sideitem {
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: #d8deea;
}

#slideMenu li a.btn-sideitem:hover,
#slideMenu li a.btn-sideitem.btn-sideitem-active {
	background: rgba(242, 204, 115, 0.12);
	border-color: var(--shop-border-strong);
	color: var(--shop-text);
}

#showRightPush {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: var(--shop-gold);
	box-shadow: none;
}

#showRightPush:hover,
#showRightPush.active {
	background: rgba(242, 204, 115, 0.13);
	border-color: var(--shop-border-strong);
	color: #fff3c7;
}

.dropdown-menu,
.zs-dropdown .dropdown-menu {
	background: rgba(13, 15, 22, 0.97);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.dropdown-option,
.dropdown-menu>li>a {
	color: #d8deea;
}

.dropdown-option:hover,
.dropdown-menu>li>a:hover {
	background: rgba(242, 204, 115, 0.12);
	color: var(--shop-text);
}

input,
select,
textarea,
.search-input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: var(--shop-text);
}

table,
.table {
	color: var(--shop-text);
}

@media (max-width: 800px) {
	body.website #page,
	body.ingame #page,
	#page {
		width: 100%;
		margin: 0;
		min-height: 100vh;
		border-radius: 0;
	}

	.header {
		padding: 16px;
	}

	.header h1 {
		width: 206px;
		height: 58px;
	}

	.header>.payment-block {
		text-align: left;
	}

	.header ul.currency_status {
		margin: 8px 0;
	}

	#navigation {
		padding: 12px;
	}

	#searchBar {
		float: none;
		clear: both;
		margin-top: 8px;
	}

	.content {
		padding: 14px;
	}
}

#navigation .nav-tabs li a.btn-navitem,
#navigation .nav-tabs li.special-category a.btn-navitem,
ul#subnavi.nav-tabs>li>a.btn-catitem,
#slideMenu li a.btn-sideitem,
#slideMenu .nav-tabs.nav-stacked>li>a.btn-sideitem {
	background: rgba(255, 255, 255, 0.06) !important;
	background-image: none !important;
	border: 1px solid var(--shop-border) !important;
	border-radius: var(--shop-radius) !important;
	color: #d8deea !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
	text-shadow: none !important;
}

#navigation .nav-tabs li a.btn-navitem:hover,
#navigation .nav-tabs li a.btn-navitem-active,
#navigation .nav-tabs li a.btn-navitem-active:hover,
#navigation .nav-tabs li.special-category a.btn-navitem:hover,
#navigation .nav-tabs li.special-category a.btn-navitem-active,
ul#subnavi.nav-tabs>li>a.btn-catitem:hover,
ul#subnavi.nav-tabs>li>a.btn-catitem-active,
#slideMenu li a.btn-sideitem:hover,
#slideMenu li a.btn-sideitem.btn-sideitem-active {
	background: linear-gradient(135deg, rgba(242, 204, 115, 0.2), rgba(123, 183, 255, 0.14)) !important;
	border-color: var(--shop-border-strong) !important;
	color: var(--shop-text) !important;
}

#navigation .nav-tabs li a.btn-navitem.icon-home,
#navigation .nav-tabs li a.btn-navitem.icon-home:hover,
#navigation .nav-tabs li a.btn-navitem.icon-home.btn-navitem-active {
	background: linear-gradient(135deg, #f5d67d, #f2962e) !important;
	color: #17110a !important;
}

#showRightPush,
#showRightPush.active,
#showRightPush:hover {
	width: 50px !important;
	height: 50px !important;
	background: rgba(255, 255, 255, 0.075) !important;
	background-image: none !important;
	border: 1px solid var(--shop-border-strong) !important;
	border-radius: var(--shop-radius) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
	color: var(--shop-gold) !important;
}

.btn-default,
.btn-price,
.btn-buy,
.btn-discount,
.card .quickbuy .btn-buy,
.card .quickbuy .btn-price,
#navigation .input-append .btn-default {
	background: linear-gradient(135deg, #f5d67d, #f2962e) !important;
	background-image: linear-gradient(135deg, #f5d67d, #f2962e) !important;
	border-color: rgba(242, 204, 115, 0.48) !important;
	color: #17110a !important;
	text-shadow: none !important;
}

.card .list-item .item-box,
.item-box {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)) !important;
}

.card .list-item .price {
	background: rgba(255, 255, 255, 0.065) !important;
	background-image: none !important;
	color: var(--shop-gold) !important;
}

/* Forgotten2 final layout pass */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	min-width: 0 !important;
	overflow-x: hidden;
}

body.website,
body.ingame {
	min-width: 0 !important;
	margin: 0;
	overflow-x: hidden;
}

body.website #page,
body.ingame #page,
#page {
	width: min(1220px, calc(100vw - 32px)) !important;
	height: auto !important;
	min-height: calc(100vh - 56px) !important;
	max-width: 1220px;
	margin: 28px auto !important;
	overflow: hidden !important;
}

#contentContainer {
	position: relative;
	min-height: 0;
	padding: 0 !important;
}

body.website .content,
body.ingame .content,
.content {
	height: auto !important;
	min-height: 0 !important;
	padding: 24px !important;
	overflow: visible !important;
}

body.website .content .scrollable_container,
body.ingame .content .scrollable_container,
body.website #page #landing,
body.ingame #page #landing,
#landing,
.scrollable_container {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

.header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	height: auto !important;
	min-height: 116px;
}

.header::after,
.header::before {
	content: none !important;
}

.header > .logo-block,
.header > .payment-block,
.header > .span5,
.header > .span6,
.header > .span7 {
	float: none !important;
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
}

.header > .logo-block {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	flex: 1 1 auto;
}

.header h1 {
	float: none !important;
	flex: 0 0 auto;
	width: 210px !important;
	height: 74px !important;
	margin: 0 !important;
	background: none !important;
}

.header h1 a {
	background: url("../images/f2-logo.png") left center / contain no-repeat !important;
	width: 100% !important;
	height: 100% !important;
}

.header .welcome {
	max-width: 320px;
	white-space: normal !important;
	overflow: visible !important;
	line-height: 1.3;
}

.header > .payment-block {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 0 !important;
}

.header > .payment-block > button,
.header ul.currency_status,
.header ul.currency_status li {
	float: none !important;
}

.header ul.currency_status {
	order: 1;
	align-items: stretch;
	margin: 0 !important;
}

.header .btn-price.premium,
.header ._premiumBtn,
.header > .payment-block > .btn-default {
	order: 2;
	min-height: 42px;
	margin: 0 !important;
}

#showRightPush {
	order: 3;
	flex: 0 0 auto;
}

#navigation {
	min-height: 84px;
}

#navigation .container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	min-height: 0;
}

#navigation .nav.search {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	min-width: 0;
}

#navigation .nav-tabs li {
	float: none !important;
	margin: 0 !important;
}

#searchBar {
	flex: 0 0 232px;
	float: none !important;
	margin: 0 !important;
}

#searchBar form {
	display: flex;
	align-items: center;
	margin: 0;
}

#navigation .input-append .search-input {
	width: 150px !important;
	min-width: 0;
	padding-left: 28px;
}

#navigation .input-append .btn-search {
	height: 34px;
	margin: 2px;
	padding: 0 13px;
}

#slideMenu {
	top: 0 !important;
	right: 0;
	width: 320px !important;
	max-width: calc(100vw - 32px);
	height: 100% !important;
	min-height: 100%;
	padding: 14px 10px !important;
	overflow-y: auto !important;
	z-index: 30;
}

#slideMenu h2 {
	margin: 0 0 10px !important;
	padding: 0 8px;
	line-height: 1.4;
}

#slideMenu .zs-dropdown,
#slideMenu .nav {
	margin-bottom: 12px;
}

#slideMenu .items-left {
	left: 24px;
	top: 7px;
	z-index: 2;
}

#promo-area {
	display: grid !important;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
	gap: 20px;
	margin: 0 0 26px !important;
}

#promo-area > [class*="span"],
#zs-prmo-slider,
#zs-prmo-ad {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#promo-area #prmoSlider,
#promo-area .call-to-action,
#promo-area .call-to-action > a,
#promo-area .call-to-action .hh-content,
#promo-area .rsOverflow,
#promo-area .rsContent,
#promo-area .bContainer {
	width: 100% !important;
	height: 270px !important;
	min-height: 270px;
}

#promo-area img,
#promo-area .call-to-action img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.slider_banner {
	box-sizing: border-box;
}

.heading-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 0;
	height: auto !important;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--shop-border-strong);
}

.heading-cat a {
	margin-left: auto;
	font-size: 12px;
}

.card,
#page div.card,
#page #landing .card,
.item-list.card {
	width: 100%;
	padding: 14px !important;
	overflow: visible !important;
}

ul.item-list,
.item-list.card {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 0 !important;
	list-style: none;
}

.card .list-item,
.content #category .list-item,
#page #landing .carousell .list-item,
#confirmation .carousell .list-item {
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.card .list-item .item-box,
.item-box {
	height: auto !important;
	min-height: 188px;
	max-height: none !important;
	padding: 14px !important;
}

.card .list-item .item-description,
.card .list-item .item-shortdesc {
	min-height: 0 !important;
	height: auto !important;
}

.card .item-description .item-shortdesc {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px 12px;
	padding: 12px !important;
	background-color: rgba(255, 255, 255, 0.045) !important;
	border-radius: var(--shop-radius);
}

.card .item-description .item-shortdesc a.item-thumb {
	grid-row: span 2;
}

.card .item-description .item-shortdesc img.item-thumb,
img.item-thumb {
	width: 64px !important;
	height: 64px !important;
	object-fit: contain;
}

.card .item-description .item-shortdesc .category-link,
.card .item-description .item-shortdesc p {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

.card .item-description .item-shortdesc p {
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.card h4,
.card h4 a {
	display: block;
	max-width: 100%;
	margin: 0 0 10px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.price_desc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
}

.card .list-item .price_desc .btn-default,
.card .list-item .price_desc .btn-buy,
.card .list-item .price_desc .btn-disabled {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	max-width: none !important;
	min-height: 34px;
	padding: 0 12px;
	white-space: nowrap;
}

.card .list-item .price {
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	float: none !important;
	min-width: 96px;
	margin: 0 !important;
	padding: 7px 9px;
	white-space: nowrap;
}

.card .list-item.hover .price {
	display: inline-flex !important;
}

.content #category h2 {
	height: auto !important;
	margin: 0 0 16px;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 0 !important;
	margin: 0 !important;
}

#subnavi.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px !important;
}

#subnavi.nav-tabs > li {
	float: none !important;
	margin: 0 !important;
}

body.login-page #page {
	width: min(860px, calc(100vw - 32px)) !important;
	min-height: auto !important;
	margin-top: clamp(18px, 6vh, 70px) !important;
}

body.login-page .header {
	min-height: 104px;
	justify-content: center;
}

body.login-page .header > .logo-block {
	flex: 0 0 auto;
	justify-content: center;
}

body.login-page .content {
	padding: 34px !important;
}

body.login-page #error {
	max-width: 520px;
	margin: 0 auto !important;
}

body.login-page .dark-grey-box {
	padding: 28px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
		var(--shop-surface) !important;
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	color: var(--shop-text);
}

body.login-page .dark-grey-box h2 {
	margin-top: 0;
	color: var(--shop-gold);
}

body.login-page form {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

body.login-page form label {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--shop-soft);
	text-align: left;
}

body.login-page input[type="text"],
body.login-page input[type="password"] {
	width: 100% !important;
	height: 40px;
	margin: 0 !important;
	padding: 0 12px;
}

body.login-page input[type="submit"] {
	width: fit-content;
	min-width: 148px;
	height: 40px;
	margin-top: 4px;
}

body.login-page br {
	display: none;
}

@media (max-width: 980px) {
	.header {
		align-items: flex-start;
		flex-direction: column;
	}

	.header > .payment-block {
		justify-content: flex-start;
		width: 100% !important;
	}

	#navigation .container {
		display: block;
	}

	#navigation .nav.search {
		margin-bottom: 12px !important;
	}

	#searchBar {
		width: 100%;
	}

	#navigation .input-append,
	#searchBar form {
		width: 100%;
	}

	#navigation .input-append .search-input {
		flex: 1 1 auto;
		width: auto !important;
	}

	#promo-area {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 800px) {
	body.website #page,
	body.ingame #page,
	#page {
		width: 100% !important;
		min-height: 100vh !important;
		margin: 0 !important;
	}

	.header h1 {
		width: 176px !important;
		height: 62px !important;
	}

	.header .welcome {
		max-width: 100%;
	}

	.content,
	body.login-page .content {
		padding: 16px !important;
	}

	ul.item-list,
	.item-list.card {
		grid-template-columns: 1fr;
	}

	.price_desc {
		align-items: stretch;
		flex-direction: column;
	}

	.card .list-item .price {
		justify-content: flex-start;
		width: 100%;
	}
}

/* v2.1 hard overrides: no Metin2 logo, stable button sizing */
.header h1,
.header > .logo-block h1,
body.website .header h1,
body.ingame .header h1 {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 278px !important;
	height: 74px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7));
	overflow: visible !important;
}

.header h1 a,
.header > .logo-block h1 a,
body.website .header h1 a,
body.ingame .header h1 a {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	text-indent: 0 !important;
	overflow: visible !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.header h1 a::before,
.header > .logo-block h1 a::before,
body.website .header h1 a::before,
body.ingame .header h1 a::before {
	content: "Forgotten2";
	display: block;
	color: #ffd65f;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	text-shadow:
		0 2px 0 #3b1a05,
		0 0 10px rgba(242, 150, 46, 0.55),
		0 8px 20px rgba(0, 0, 0, 0.78);
}

.header h1 a::after,
.header > .logo-block h1 a::after,
body.website .header h1 a::after,
body.ingame .header h1 a::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 24px;
	bottom: 9px;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 214, 95, 0.8), transparent);
}

.btn-default,
.btn-price,
.btn-buy,
.btn-disabled,
.btn-discount,
.btn-switch,
.btn-switch-active,
button,
input[type="submit"] {
	box-sizing: border-box !important;
	max-width: 100% !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	white-space: nowrap !important;
	text-overflow: clip !important;
}

.header .btn-price,
.header .btn-price.premium,
.header ._premiumBtn,
.header > .payment-block > button:not(#showRightPush) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	min-width: 174px !important;
	max-width: 220px !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 13px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	overflow: hidden !important;
}

.header .btn-price img,
.header ._premiumBtn img,
.header > .payment-block > button:not(#showRightPush) img {
	position: static !important;
	display: inline-block !important;
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

.header .btn-price * {
	max-width: 100%;
}

.header ul.currency_status {
	display: inline-flex !important;
	gap: 8px !important;
	max-width: 100% !important;
}

.header ul.currency_status li {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 110px !important;
	min-width: 110px !important;
	max-width: 110px !important;
	height: 54px !important;
	padding: 0 10px !important;
	overflow: hidden !important;
}

.header ul.currency_status li .block-price,
.header .block-price {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	min-width: 0 !important;
	max-width: 100% !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

.header ul.currency_status li img,
.header .block-price img {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

.header ul.currency_status li .end-price,
.header .end-price {
	display: inline-block !important;
	min-width: 0 !important;
	max-width: 72px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

#showRightPush,
#showRightPush.active,
#showRightPush:hover {
	flex: 0 0 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
	padding: 0 !important;
	overflow: hidden !important;
}

#navigation .input-append .btn-search,
#searchBar .btn-search {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 76px !important;
	max-width: 86px !important;
	height: 34px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	overflow: hidden !important;
}

#slideMenu .btn-sideitem,
#slideMenu li a.btn-sideitem,
#slideMenu .nav-tabs.nav-stacked > li > a.btn-sideitem {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	min-height: 38px !important;
	height: auto !important;
	padding: 9px 11px !important;
	line-height: 1.2 !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

#slideMenu .btn-sideitem i,
#slideMenu li a.btn-sideitem i {
	flex: 0 0 auto !important;
}

@media (max-width: 800px) {
	.header h1,
	.header > .logo-block h1,
	body.website .header h1,
	body.ingame .header h1 {
		width: 230px !important;
		height: 62px !important;
	}

	.header h1 a::before,
	.header > .logo-block h1 a::before,
	body.website .header h1 a::before,
	body.ingame .header h1 a::before {
		font-size: 34px;
	}

	.header ul.currency_status {
		flex-wrap: wrap;
	}

	.header .btn-price,
	.header .btn-price.premium,
	.header ._premiumBtn,
	.header > .payment-block > button:not(#showRightPush) {
		min-width: 164px !important;
	}
}

/* Forgotten2 v2.2: final drawer and header alignment */
html,
body {
	overflow-x: hidden !important;
}

#page,
body.website #page,
body.ingame #page {
	width: min(1180px, calc(100vw - 32px)) !important;
	max-width: calc(100vw - 32px) !important;
	margin: 18px auto 0 !important;
	overflow: visible !important;
}

#header.header,
body.website #header.header,
body.ingame #header.header {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 22px !important;
	min-height: 116px !important;
	height: auto !important;
	padding: 18px 72px 18px 28px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

#header.header > .logo-block,
#header.header > .payment-block {
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

#header.header > .logo-block {
	display: flex !important;
	align-items: center !important;
	gap: 28px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: calc(100% - 520px) !important;
}

#header.header > .payment-block {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 510px !important;
	min-width: 0 !important;
	padding: 0 !important;
}

.header h1,
.header > .logo-block h1,
body.website .header h1,
body.ingame .header h1 {
	flex: 0 0 auto !important;
	width: 250px !important;
	height: 64px !important;
	margin: 0 !important;
}

.header h1 a::before,
.header > .logo-block h1 a::before,
body.website .header h1 a::before,
body.ingame .header h1 a::before {
	font-size: 42px !important;
	line-height: 64px !important;
}

#header .welcome {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex: 0 1 190px !important;
	width: auto !important;
	min-width: 160px !important;
	max-width: 210px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

#header .welcome span,
#header .welcome a {
	max-width: 78px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

#header .currency_status {
	order: 1 !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#header .currency_status li {
	width: 110px !important;
	min-width: 110px !important;
	max-width: 110px !important;
	height: 54px !important;
	margin: 0 !important;
}

#header .btn-price,
#header .btn-price.premium,
#header ._premiumBtn,
#header > .payment-block > button:not(#showRightPush) {
	order: 2 !important;
	flex: 0 0 174px !important;
	width: 174px !important;
	min-width: 174px !important;
	max-width: 174px !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-size: 13px !important;
	white-space: nowrap !important;
}

#showRightPush,
#showRightPush.active,
#showRightPush:hover {
	position: absolute !important;
	top: 9px !important;
	right: 9px !important;
	left: auto !important;
	bottom: auto !important;
	width: 50px !important;
	height: 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
	margin: 0 !important;
	z-index: 7060 !important;
}

#contentContainer,
#contentContainer.open,
#page.slide_menu_active #contentContainer,
body.website #contentContainer,
body.ingame #contentContainer {
	position: relative !important;
	transform: none !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	overflow: visible !important;
}

#slideMenu,
body.website #slideMenu,
body.ingame #slideMenu {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	width: 320px !important;
	max-width: min(320px, calc(100vw - 24px)) !important;
	height: 100vh !important;
	min-height: 100vh !important;
	padding: 12px !important;
	box-sizing: border-box !important;
	transform: translateX(calc(100% + 18px)) !important;
	transition: transform 220ms ease, visibility 220ms ease !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: 7050 !important;
}

#page.slide_menu_active #slideMenu,
#contentContainer.open #slideMenu {
	transform: translateX(0) !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

#page:not(.slide_menu_active) #slideMenu {
	transform: translateX(calc(100% + 18px)) !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#navigation,
#navigation .container,
#category .content,
.content,
.scrollable_container {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 1100px) {
	#header.header,
	body.website #header.header,
	body.ingame #header.header {
		flex-wrap: wrap !important;
		padding-right: 72px !important;
	}

	#header.header > .logo-block {
		max-width: 100% !important;
		width: 100% !important;
	}

	#header.header > .payment-block {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: flex-start !important;
	}
}

@media (max-width: 760px) {
	#header.header,
	body.website #header.header,
	body.ingame #header.header {
		padding: 18px 68px 18px 18px !important;
	}

	#header.header > .logo-block,
	#header.header > .payment-block {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	#header .currency_status {
		flex-wrap: wrap !important;
	}

	#header .btn-price,
	#header .btn-price.premium,
	#header ._premiumBtn,
	#header > .payment-block > button:not(#showRightPush) {
		flex-basis: 174px !important;
	}
}