:root {
	/* System greys */
	--gpSystemLightestGrey: #DCDEDF;
	--gpSystemLighterGrey: #B8BCBF;
	--gpSystemLightGrey: #8B929A;
	--gpSystemGrey: #67707B;
	--gpSystemDarkGrey: #3D4450;
	--gpSystemDarkerGrey: #23262E;
	--gpSystemDarkestGrey: #0E141B;

	/* Store blue greys */
	--gpStoreLightestGrey: #CCD8E3;
	--gpStoreLighterGrey: #A7BACC;
	--gpStoreLightGrey: #7C8EA3;
	--gpStoreGrey: #4e697d;
	--gpStoreDarkGrey: #2A475E;
	--gpStoreDarkerGrey: #1B2838;
	--gpStoreDarkestGrey: #000F18;

	/* Gradients */
	--gpGradient-StoreBackground: linear-gradient(180deg, var(--gpStoreDarkGrey) 0%, var(--gpStoreDarkerGrey) 80%);
	--gpGradient-LibraryBackground: radial-gradient(farthest-corner at 40px 40px,#3D4450 0%, #23262E 80%);

	/* Colours */
	--gpColor-Blue: #1A9FFF;
	--gpColor-BlueHi: #00BBFF;
	--gpColor-Green: #5ba32b;
	--gpColor-GreenHi: #59BF40;
	--gpColor-Orange: #E35E1C;
	--gpColor-Red: #D94126;
	--gpColor-RedHi: #EE563B;
	--gpColor-DustyBlue: #417a9b;
	--gpColor-LightBlue: #B3DFFF;
	--gpColor-Yellow: #FFC82C;
	--gpColor-ChalkyBlue: #66C0F4;

	/* Backgrounds */
	--gpBackground-LightSofter: #6998bb24;
	--gpBackground-LightSoft: #3b5a7280;
	--gpBackground-LightMedium: #678BA670;
	--gpBackground-LightHard: #93B8D480;
	--gpBackground-LightHarder: #aacce6a6;

	--gpBackground-DarkSofter: #0e141b33;
	--gpBackground-DarkSoft: #0e141b66;
	--gpBackground-DarkMedium: #0e141b99;
	--gpBackground-DarkHard: #0e141bcc;

	--gpBackground-Neutral-LightSofter: rgba(235, 246, 255, 0.10);
	--gpBackground-Neutral-LightSoft: rgba(235, 246, 255, 0.20);
	--gpBackground-Neutral-LightMedium: rgba(235, 246, 255, 0.30);
	--gpBackground-Neutral-LightHard: rgba(235, 246, 255, 0.40);
	--gpBackground-Neutral-LightHarder: rgba(235, 246, 255, 0.50);


	/* Corners */
	--gpCorner-Small: 1px;
	--gpCorner-Medium: 2px;
	--gpCorner-Large: 3px;

	/* Spacing */
	--gpSpace-Gutter: 24px;
	--gpSpace-Gap: 12px;

	/* Fixed widths */
	--gpNavWidth: 240px;
	--gpPaymentsNavWidth: 340px;
	--gpDselectWidth: 340px;
	--gpSidePanelWidth: 340px;
	--gpGiftingPanelWidth: 280px;
	--gpCommunityRightPanelWidth: 320px;
	--gpVerticalResponsivePadding-Small: calc( (100vw - 854px) / 60 );
	--gpVerticalResponsivePadding-Medium: calc( (100vw - 854px) / 20 );
	--gpVerticalResponsivePadding-Large: calc( (100vw - 854px) / 12 );

	/* Game capsule widths */
	--screen-width: 100vw;
	--gpWidth-6colcap: calc((var(--screen-width) - (5 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 6);
	--gpWidth-5colcap: calc((var(--screen-width) - (4 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 5);
	--gpWidth-4colcap: calc((var(--screen-width) - (3 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 4);
	--gpWidth-3colcap: calc((var(--screen-width) - (2 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 3);
	--gpWidth-2colcap: calc((var(--screen-width) - (1 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 2);
	--gpWidth-1colcap: calc((var(--screen-width) - (2 * var(--gpSpace-Gutter))));

    /* Fixed heights */
    --gpStoreMenuHeight: 58px;

	/* Surfaces */
	--gpShadow-Small: 0px 2px 2px 0px #0000003D;
	--gpShadow-Medium: 0px 3px 6px 0px #0000003D;
	--gpShadow-Large: 0px 12px 16px 0px #0000003D;
	--gpShadow-XLarge: 0px 24px 32px 0px #0000003D;

	/* Type styles */
	--gpText-HeadingLarge: normal 700 26px/1.4 "Motiva Sans", Arial, Sans-serif;
	--gpText-HeadingMedium: normal 700 22px/1.4 "Motiva Sans", Arial, Sans-serif;
	--gpText-HeadingSmall: normal 700 18px/1.4 "Motiva Sans", Arial, Sans-serif;
	--gpText-BodyLarge: normal 400 16px/1.4 "Motiva Sans", Arial, Sans-serif;
	--gpText-BodyMedium: normal 400 14px/1.4 "Motiva Sans", Arial, Sans-serif;
	--gpText-BodySmall: normal 400 12px/1.4 "Motiva Sans", Arial, Sans-serif;
}

@media screen and (min-width:  1280px) {
	:root {
		--gpSpace-Gutter: calc(24px + 2vw);
	}
}


/* Remove background */
html.tablet .page_header_ctn {
	background: unset;
	padding-bottom: 0px;
	margin-bottom: 12px;
}


/* Remove breadcrumbs */
html.tablet .breadcrumbs {
	display: none;
}


/* Cart items */
html.tablet .cart_item {
	position: unset;
	min-height: unset;
	line-height: unset;
	padding: 8px 16px 8px 8px;
	font: var(--gpText-BodyLarge);
	color: white;
	background-color: var(--gpBackground-LightSoft);
	display: flex;
	align-items: center;
	margin-top: 4px;
	transition: var(--gpTransition-Short);
}

html.tablet .cart_item:focus-within {
	background-color: var(--gpBackground-LightMedium);
	transition: var(--gpTransition-Short);
}

html.tablet .cart_item_price_container {
	order: 1;
	flex-grow: 1;
}

html.tablet .cart_row {
	background: unset;
	margin: unset;
}

html.tablet .cart_item_img img {
	width: 100%;
	height: auto;
}

html.tablet .cart_item_img {
	width: 140px;
	height: auto;
	margin-top: unset;
	margin-right: 12px;
}

@media screen and (min-width:  1280px ) {
	html.tablet .cart_item_img {
		width: calc(140px + 2vw);
	}
}

html.tablet .cart_item_img a {
	display: flex;
	box-shadow: var(--gpShadow-Medium);
}

html.tablet .cart_item_desc {
	padding: unset;
	font-weight: 400;
	display: flex;
	flex-direction: column-reverse;
}

html.tablet .cart_item_desc br {
	display: none;
}

html.tablet .cart_item_price {
	padding: unset;
}

html.tablet .cart_item .cart_item_desc a {
	color: white;
	font: var(--gpText-HeadingSmall);
	font-weight: 500;
}

html.tablet .cart_item_price {
	display: flex;
	align-items: center;
	font: var(--gpText-BodyMedium);
}

html.tablet .cart_item_price .price {
	font: var(--gpText-BodyLarge);
	color: white;
	font-weight: 700;
	height: auto;
}

html.tablet .cart_item_price .price:nth-last-child(2) {
	border-right: 1px solid var(--gpBackground-LightMedium);
	padding-right: 16px;
}

html.tablet .remove_link {
	font: var(--gpText-BodyLarge);
	color: unset;
}


/* Remove link */
html.tablet .cart_item_price .remove_link {
	font: var(--gpText-BodyLarge);
	color: var(--gpStoreLightestGrey);
	margin-left: 8px;
	border-radius: var(--gpCorner-Medium);
	padding: 8px 40px 8px 12px;
	text-decoration: none;
	background-image: url('/public/shared/images/glyphs/shared_button_x.svg');
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position-x: calc(100% - 8px);
	background-position-y: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

html.tablet .cart_item_price .remove_link:hover {
	background-color: var(--gpBackground-LightMedium);
	color: white;
}

html.tablet .cart_item .platform_img {
	display: none;
}

html.tablet .remove_link {
	color: var(--gpStoreLighterGrey);
}

html.tablet .cart_item_price .original_price {
	margin-right: 4px;
	color: var(--gpStoreLighterGrey);
	font-weight: 400;
}



/* Available soon items */
html.tablet .cart_item_desc_ext {
	font: var(--gpText-BodyMedium);
}




/* Package contents */
html.tablet .cart_item_list .package_contents {
	padding: 0px var(--gpSpace-Gap) var(--gpSpace-Gap) var(--gpSpace-Gap);
	font: var(--gpText-BodyMedium);
	color: var(--gpStoreLighterGrey);
	margin-top: unset;
	background-color: var(--gpBackground-LightSoft);
}

html.tablet .cart_item_list .package_contents a {
	color: var(--gpStoreLighterGrey);
}







/* Platform icons */
html.tablet .cart_item_desc .cart_item_platform {
	float: unset;
	display: flex;
	margin-top: 2px;
}

html.tablet .cart_item_desc .cart_item_platform .platform_img {
	margin-right: 4px;
}



/* Messages */
html.tablet .cart_status_message_ctn {
	height: unset;
	float: unset;
	margin-bottom: 0px;
	position: fixed;
	bottom: var(--gpSpace-Gutter);
	left: 50%;
	transform: translateX(-50%);
	box-shadow: var(--gpShadow-Large);
	opacity: 0;
	bottom: -40px;
}

html.tablet .cart_status_message_ctn {
	animation: slideOut 2.8s ease 0.4s;
}

@keyframes slideOut {
	0% { bottom: -40px;  }
	12% { bottom: 24px; opacity: 0.94; }
	92% { bottom: 24px; animation-timing-function: ease-in; opacity: 1; }
	100% { bottom: -40px; }
}

html.tablet .cart_status_message_ctn .cart_status_message {
	margin: unset;
	padding: 10px 24px;
	font: var(--gpText-Large);
	border-radius: var(--gpCorner-Large);
}

html.tablet .checkout_error {
	padding: 8px 12px;
	margin: unset;
	font: var(--gpText-BodyMedium);
	color: var(--gpSystemDarkestGrey);
}

html.tablet .cart_pricechanged_tag {
	color: var(--gpSystemDarkestGrey);
	font: var(--gpText-BodyMedium);
}

html.tablet .cart_status_message_area,
html.tablet .checkout_error {
	height: unset;
	margin-bottom: 4px;
}

/* hide arrow */
html.tablet .cart_status_message_arrow_holder {
	display: none;
}




/* Warnings and errors */
html.tablet .checkout_error {
	background: var(--gpColor-Yellow);
}
html.tablet .checkout_error.steam_deck_compat_unsupported {
	background: var(--gpColor-Yellow);
}
html.tablet .checkout_error.steam_deck_compat_unknown {
	background: var(--gpColor-Yellow);
}
html.tablet .checkout_error.steam_deck_compat_playable {
	background: var(--gpColor-Yellow);
}




/* Hide information about gifting */
html.tablet .cart_purchase_action_section .cart_bodycopy {
	display: none;
}




/* Total price and messaging */
html.tablet .checkout_content_box .checkout_content {
	background: unset;
}

html.tablet .checkout_content_box .checkout_content.cart {
	margin-top: 12px;
}

html.tablet .cart_total_row#cart_estimated_total_text {
	margin-top: 0px;
}

html.tablet .cart_total_row#cart_estimated_total_text,
html.tablet .cart_total_row,
html.tablet .cart_total_row#cart_price_total_text,
html.tablet .cart_total_row#cart_price_total_text,
html.tablet .cart_total_row#cart_price_shipping_text,
html.tablet .price,
html.tablet .cart_totals_area .price {
	font-size: unset;
}

html.tablet .cart_totals_area .price {
	padding-top: 0px;
}

html.tablet .estimated_total_box {
	padding: 0px;
	font: var(--gpText-HeadingSmall);
	font-weight: 500;
}

html.tablet .cart_total_row#cart_estimated_total_text,
html.tablet .cart_totals_area .price {
	color: white;
}

html.tablet .cart_total_row#cart_estimated_total_text {
	font-weight: 500;
}

html.tablet .cart_totals_area .price {
	font-weight: 500;
}




/* Checkout buttons */
html.tablet .cart_checkout_buttons {
	padding: 12px 0px;
}

.button_row .continue, .button_row .working, .cart_checkout_buttons .continue {
	float: unset;
	margin-right: unset;
}

html.tablet .cart_checkout_buttons .btn_medium {
	margin-bottom: unset;
}

html.tablet .cart_checkout_buttons {
	display: flex;
	/* grid-template-columns: 1fr 1fr; */
	gap: var(--gpSpace-Gap);
}

html.tablet .cart_checkout_buttons_clearer {
	display: none;
}

html.tablet .cart_checkout_buttons a,
html.tablet .cart_checkout_buttons div,
html.tablet .cart_checkout_buttons span {
	width: 100%;
}




/* Continue shopping */
html.tablet .checkout_notes_and_continue_shopping_ctn {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-bottom: 24px;
}

html.tablet .leftcol br {
	display: none;
}

html.tablet .continue_shopping_ctn {
	margin-bottom: unset;
}

/* Cart notice */
html.tablet .cart_notice_section {
	background: unset;
	padding: unset;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gpBackground-LightSoft);
}

html.tablet .checkout_content .cart_bodycopy {
	padding: unset;
}

html.tablet .checkout_notes {
	padding-right: unset;
}

html.tablet .checkout_content .cart_bodycopy.highlight {
	color: var(--gpStoreLighterGrey);
}




/* Right column */
html.tablet .rightcol.cart_rightcol {
	width: unset;
}

html.tablet .dailydeal_ctn,
html.tablet .spotlight_block,
html.tablet .spotlight_title {
	display: none;
}



/* Recommended grid */
html.tablet .recommended_grid {
	display: flex;

}

html.tablet .recommended_grid .special {
	width: 100%;
	margin-right: var(--gpSpace-Gap);
	min-height: unset;
	padding: 0px;
	float: unset;
	background: unset;
	position: relative;
}

html.tablet .recommended_grid .special .ds_steam_deck_compat {
	background-color: var(--gpBackground-DarkMedium);
	backdrop-filter: blur(24px);
	bottom: 28px;
}

html.tablet .recommended_grid .special:nth-last-child(2) {
	margin-right: 0px;
}

html.tablet .recommended_grid .special img {
	width: 100%;
	height: auto;
	box-shadow: var(--gpShadow-Medium);
}

html.tablet .discount_block_collapsable {
	width: unset;
	max-width: unset;
}

html.tablet .recommended_grid .special .discount_block_collapsable .discount_collapse_final_price {
	background: unset;
}





/* Digital notice */
html.tablet .cart_digital_notice_ctn h2 {
	display: none;
}

html.tablet .cart_digital_notice_ctn h2,
html.tablet .cart_recommendations_ctn h2 {
	text-transform: uppercase;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 700;
	padding-left: 0px !important;
	letter-spacing: 0.5px;
}

html.tablet .cart_recommendations_ctn p {
	font:var(--gpText-BodyMedium);
	color: var(--gpStoreLighterGrey);
	margin-top: -8px;
}

html.tablet .cart_recommendations_ctn {
	margin-bottom: 12px;
}

html.tablet .cart_digital_notice {
	background: unset;
	padding: unset;
	margin-bottom: 32px;
}

html.tablet .cart_digital_notice_content h4 {
	color: var(--gpStoreLightestGrey);
}

html.tablet .cart_digital_notice_content p {
	font:var(--gpText-BodyMedium);
	color: var(--gpStoreLighterGrey);
}



/* Recommendations */
html.tablet .rightcol.cart_rightcol {
	background: var(--gpStoreDarkestGrey);
	padding: 24px 24px 48px 24px;
	margin-left: -24px;
	margin-right: -24px;
}



/* RESPONSIVE */

:root {
	/* Used to set width of content to browser width when inside parent container*/
	--fullScreenContentInsideContainerMargin: calc(0px - ( (100vw -  1120px) / 2 ));
	--fullScreenContentInsideContainerPadding: calc( (100vw -  1120px) / 2 );
}

html.tablet body.v6 .page_background {
	height: 100vh;
}

html.tablet body.v6 .page_content {
	height: -webkit-fill-available;
}

html.tablet .rightcol.cart_rightcol {
	height: -webkit-fill-available;

	margin-left: var(--fullScreenContentInsideContainerMargin);
	margin-right: var(--fullScreenContentInsideContainerMargin);
	padding-left: var(--fullScreenContentInsideContainerPadding);
	padding-right: var(--fullScreenContentInsideContainerPadding);

	margin-top: calc( 24px + var(--gpVerticalResponsivePadding-Large) );
}

@media screen and (max-width: 1120px ) {
	html.tablet .rightcol.cart_rightcol {
		margin-left: calc(0px - var(--gpSpace-Gutter));
		margin-right: calc(0px - var(--gpSpace-Gutter));
		padding-left: var(--gpSpace-Gutter);
		padding-right: var(--gpSpace-Gutter);

		margin-top: 0px;
	}
}