/* Desktop/Mobile Homepage Banner */
.MobileHomePageBanner .Banner-Wide .AspectRatio:before {
	padding-top: 100%;
}

@media screen and (max-width: 420px) {
	.MobileHomePageBanner .Banner-Wide .AspectRatio:before {
		padding-top: 125%;
	}
}

@media screen and (max-width: 350px) {
	.MobileHomePageBanner .BannerDesktopContent {
		margin: 0;
	}
}


/* If mobilebanner found, hide desktopbanner */
.MobileHomePageBanner {
	display: none;
}

@media screen and (max-width: 600px) {
	.MobileHomePageBanner {
		display: block;
	}

	.MobileHomePageBanner + .DesktopHomePageBanner {
		display: none;
	}
}

.FooterNewsletterSubscribe > h2 {
	font-size: 20px;
}

/* Coming Soon Product */

.ComingSoonProduct {
    background-color: var(--color-dark);
	color: var(--color-light);
	font-size: var(--font-size-small);
    width: max-content;
    padding: 5px 15px;
    margin-bottom: 1rem;
	text-transform: uppercase;
}

.ProductDescription .AttributeSet.coming-soon {
	display: none;
}

.ListProduct .ComingSoonProduct {
    display: inline-block;
    left: 0;
	margin: 0;
    max-width: none;
	position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

/* Shipping Bag Product */

.ShippingBagProduct {
	padding-top: 6rem;
}

.ShippingBagProduct h2,
.ShippingBagProduct h3 {
	line-height: 1.6;
}

.ShippingBagProduct .ProductFullDesc {
	padding-block: 2rem;
}

.ShippingBagProduct .ProductFullDesc p {
	align-items: center;
	display: flex;
}

.ShippingBagProduct .ProductFullDesc strong {
	align-items: center;
	background-color: var(--brand-pink);
	border-radius: 50%;
	color: var(--color-dark);
	display: inline-flex;
	font-family: var(--font-family-headings);
	flex-shrink: 0;
	font-size: 2rem;
	height: 5rem;
	justify-content: center;
	margin-right: 2rem;
	padding: 0 0 1px 2px;
	width: 5rem;
}

.ShippingBagProduct .BuyFormVariationSelect label {
	display: none;
}

.ShippingBagProduct .BuyFormVariationSelect select {
	width: 100%;
}

.ShippingBagProduct .BuyForm .CheckWrap {
	padding-top: 1rem;
}

.ShippingBagProduct .BuyForm .CheckWrap .label {
	font-family: var(--font-family-headings);
	font-size: calc(var(--font-size)*1.25);
	font-weight: 500;
	letter-spacing: 2px;
	margin: 0 0 2rem;
	line-height: 1.6;
}

.ShippingBagProduct .BuyForm .CheckWrap .FormHelp {
	font-size: var(--font-size);
	margin: 0 0 2rem;
}

.ShippingBagProduct .BuyForm .CheckWrap .Checks {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr 1fr;
}

.ShippingBagProduct .BuyForm .CheckWrap .Checks label {
	align-items: center;
	border: 1px solid var(--color-input-border);
	border-radius: var(--border-radius);
	display: flex;
	flex-flow: column;
	gap: 1rem;
	justify-content: space-between;
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
}

.ShippingBagProduct .BuyForm .CheckWrap .Checks label input {
}

.ShippingBagProduct .ProductChoicePrice {
	white-space: nowrap;
}

@media screen and (max-width: 1024px) {
	.ShippingBagProduct .ProductFullDesc strong {
		margin-right: 1.5rem;
	}
}

@media screen and (max-width: 702px) {
	.ShippingBagProduct .BuyForm .CheckWrap .Checks {
		grid-template-columns: 1fr;
	}
}

/* Fix Navi Centering */

/* li.InfoPageID-31 {
	min-width: 75px;
}

@media screen and (max-width: 1580px) {
	.NavigationBar .LogoSection {
		margin: 0;
	}
}

@media screen and (max-width: 1524px) {
	.NavBarSection {
		min-width: 75px;
		padding: 0;
	}
}

@media screen and (max-width: 1462px) {
	.NavigationBar {
		--container-page-margin: var(--grid-gutter);
	}
}

@media (max-width: 1376px) and (min-width: 1024px) {
	.NavigationBar .LogoSection {
		margin: 0 auto;
		padding: 0;
	}
	.NavigationBar .LogoSection img {
		max-width: 100px;
	}
	.NavBarSection {
		min-width: 45px;
	}
	.IconButton {
		padding: 0.5rem 0.75rem;
	}
	.IconButton>.fa {
		font-size: 1.7rem;
	}
}

@media screen and (max-width: 1270px) {
	.NavigationBar .FlexSpacer {
		padding: 0;
	}
}

@media screen and (max-width: 1174px) {
	li.InfoPageID-31 {
		min-width: 45px;
	}
	.NavigationBar .LogoSection {
		margin-inline: -1.5rem;
	}
}

@media screen and (max-width: 1113px) {
	li.InfoPageID-31 {
		min-width: 10px;
	}
} */

/* Cake Shop Mods */

.NavWrapper {
	justify-content: space-between;
}

.NavBarSection {
	width: 180px;
}

.NavBarSection:last-child {
	justify-content: flex-end;
}

.LeftLogo {
	margin-bottom: 4px;
}

.LeftLogo .LogoLink {
	align-items: center;
	display: flex;
	height: 100%;
}

.MainNavigation .InfoPageID-9,
.MainNavigation .InfoPageID-10 {
	margin: 0;
}

.NavBarSection .IconButton:last-of-type {
	padding-right: 0;
}

.MobileSpace {
	min-width: 113px;
}

.MobileSpace .NavigationBarToggle-Right {
	padding-right: 0;
	margin-right: 0;
}

.MobileSpace .NavigationBarToggle-Right .fa {
	margin-right: 0;
}

@media screen and (max-width: 1524px) {
	.NavBarSection {
		min-width: 0;
	}
}

@media screen and (max-width: 1465px) {
	.NavBarSection {
		width: 130px;
	}
	.IconButton {
		padding: 0.5rem 0.75rem;
	}
	.IconButton>.fa {
		font-size: 1.7rem;
	}
}

@media screen and (max-width: 1225px) {
	.NavBarSection {
		width: 115px;
	}
	.MainNavigation>ul>li {
		margin: 0 .75rem;
	}
	.MainNavigation .HasSubCategories>a:after, .MainNavigation .HasSubPages>a:after {
		margin-left: 0.25em;
	}
}

@media screen and (max-width: 1135px) {
	.NavBarSection {
		width: 100px;
	}
	.NavBarSection .IconButton + .IconButton {
		margin-left: 0;
	}
}

@media screen and (max-width: 1262px) {
  .MainNavigation > ul > li > a {
    font-size: calc(var(--font-size-small) *.8);
  }
}

/* End Cake Shop */

/* Front Page Sell Your Clothes */

.FrontPageSellYourClothes {
	background-color: var(--color-base-3);
}

.FrontPageProcessSteps {
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 3rem;
}

.ProcessStepBanner {
	background-color: var(--color-base-3);
	flex: 1;
	min-width: 160px;
	padding: 2rem;
	text-align: center;
}

.ProcessCTA {
	text-align: center;
}

/* Sales Banner */

.SalesBanner {
	background-color: var(--color-base-3);
}

/*------------------------------------------------------------------------------*/
/* Some Buttons
/*------------------------------------------------------------------------------*/

.SomeButtons {
	--color-link: var(--color-text);
	display: flex;
	flex-wrap: wrap;
	font-size: 3.5rem;
	gap: 1.2rem;
	margin-bottom: 4rem;
}

.SomeButton {
	align-items: center;
	background-color: transparent;
	background-size: cover;
	display: inline-flex;
	justify-content: center;
	margin: 0;
	/* height: 40px;
	padding: 1.1rem; */
	position: relative;
	text-decoration: none;
	transition-duration: var(--transition-fast);
	/* width: 40px; */
}

/* .SomeButton:hover {
	background-color: var(--color-accent-2);
	z-index: 1;
}

.SomeButton:hover img {
	filter: invert(.05);
} */

.SomeButton .fa:before {
	font-size: var(--icon-button-size);
}

.SomeButtons img {
	filter: invert(.8);
}

.SomeButton:first-child {
	margin-left: 0;
}

/*------------------------------------------------------------------------------*/
/* Footer Newsletter
/*------------------------------------------------------------------------------*/

.FooterNewsletterSubscribe button,
.FooterNewsletterSubscribe input {
	background-color: var(--color-light);
	border: 1px solid var(--color-light);
	border-radius: 0;
}

.FooterNewsletterSubscribe button:hover {
	background-color: var(--color-accent-2);
	border: 1px solid var(--color-accent-2);
	color: var(--color-light);
}

.FooterNewsletterSubscribe input {
	width: 100%;
}

.FooterNewsletterSubscribe .FormItem {
	display: flex;
	gap: 5px;
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* Payment Shipping
/*------------------------------------------------------------------------------*/

.PaymentShippingBanners {
	gap: 1rem;
	justify-content: flex-start;
	margin: 3rem 0 0;
}

.PaymentShippingBanner {
    align-items: center;
    background: transparent;
	height: 40px;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
	width: 65px;
}

@media screen and (max-width: 1150px) {

	.PaymentShippingBanners,
	.SomeButtons {
		align-items: center;
		justify-content: center;
	}

	/* Center Recaptcha in footer */

	#NewsletterCaptchaBadge .grecaptcha-badge {
		margin: 0 auto;
	}
}

/*------------------------------------------------------------------------------*/
/* Seller Info / Info Page
/*------------------------------------------------------------------------------*/

/* Process Steps */

.SellerInfo {
	--page-margin: var(--container-page-margin);
	margin: 0 auto;
	padding: var(--margin) var(--page-margin) var(--xlarge-margin);
}

.SellerInfoPoint {
	display: flex;
	margin-bottom: 2rem;
}

.SellerInfoPointNumber {
	align-items: center;
	background-color: var(--brand-pink);
	border-radius: 50%;
	color: var(--color-dark);
	display: inline-flex;
	font-family: var(--font-family-headings);
	flex-shrink: 0;
	font-size: 2rem;
	font-style: normal;
	font-weight: 500;
	height: 5rem;
	justify-content: center;
	margin-right: 2rem;
	padding: 0 0 1px 2px;
	width: 5rem;
}

.SellerInfoPointText > * {
	margin: 0;
}

@media screen and (max-width: 1024px) {
	.SellerInfoPointNumber {
		margin-right: 1.5rem;
	}
}

/* Accordion FAQ */

.SellerInfoAccordions {
	margin-bottom: 5rem;
}

.SellerInfoAccordions h2 {
	font-size: calc(var(--font-size) * 1.25);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.6;
}

.SellerInfoAccordions .AccordionWrap {
	margin-bottom: 1rem !important;
}

/* Bottom Banner */

.SellerInfo-50-50 {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
}

.SellerInfo-50-50-Text {
	margin-block: auto;
}

.SellerInfo-50-50-Image {
	display: flex;
}

.SellerInfo-50-50-Image .AspectRatio::before {
	padding-top: 100%;
}

.SellerInfo-50-50-Image img {
	height: 100%;
	object-fit: cover;
}

/*------------------------------------------------------------------------------*/
/* Relove Café
/*------------------------------------------------------------------------------*/

.ProductCafe,
.ProductCake,
.ListProductCafe,
.ListProductCake {
	--list-item-image-ratio: 1;
}

.MenuButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	padding-top: 2rem;
}

.CafeCatDesc {
	padding-block: 0;
	margin: var(--top-margin) var(--page-margin);
}

.CafeInfoText {
	background-color: var(--color-base-3);
	padding-top: 6rem;
	margin: var(--top-margin) var(--page-margin);
}

.CafeFront .AddToCartSlider .SeeProduct {
	background-color: var(--color-accent-2);
}

.CafeFront .AddToCartSlider .SeeProduct a {
	color: var(--color-light);
}

/* Single Banner */

.CafeFrontSingleBanner {
	padding-top: 0 !important;
}

.CafeFront-60-40 {
	display: grid;
	gap: 2rem;
	grid-template-columns: .6fr .4fr;
}

.CafeFront-60-40-Text {
	margin-block: auto;
	padding: calc(var(--large-margin)*1.5);
	text-align: center;
}

.CafeFront-60-40-Image {
	display: flex;
}

.CafeFront-60-40-Image .AspectRatio::before {
	padding-top: 80%;
}

.CafeFront-60-40-Image img {
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1024px) {
	.CafeFront-60-40 {
		grid-template-columns: 1fr;
	}
}

/* 50-50 Banners */

.SiteContent.CafeFront .ContainerSection:last-child {
	margin-bottom: inherit;
}

.CafeFront-50-50-Banners {
	padding-top: 5rem;
}

.CafeFront-50-50 {
	display: flex;
}

.CafeFront-50-50:nth-child(even) {
	flex-flow: row-reverse;
}

.CafeFront-50-50-Text {
	margin-block: auto;
	padding: calc(var(--large-margin)*1.5);
	text-align: center;
	width: 50%;
}

.CafeFront-50-50-Image {
	display: flex;
	width: 50%;
}

.CafeFront-50-50-Image .AspectRatio::before {
	padding-top: 75%;
}

.CafeFront-50-50-Image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media screen and (max-width: 1024px) {
	.CafeFront-50-50,
	.CafeFront-50-50:nth-child(even) {
		flex-flow: column-reverse;
	}
	.CafeFront-50-50-Text,
	.CafeFront-50-50-Image {
		width: 100%;
	}
}

/* Fix Issue with Trustmary Widget 22-01-2024 */
.TrustmaryBanner {
	padding: inherit;
}

/* Tiihonen 25-01-2024 */

em a, a em, i a, a i:not(.fal) {
    padding: 1rem 3rem;
    font-style: initial;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    margin-block: 0 2rem;
	background-color: var(--color-accent-2);
    border: 2px solid var(--color-accent-2);
    color: var(--color-light);
    text-transform: uppercase;
}

em a:hover, a em:hover, i a:hover, a i:not(.fal):hover {
	background-color: var(--color-base-1);
    color: var(--color-dark);
}

.DropNavigation.UtilityNavigation .LanguageNavigation a {
	display: block;
}

.PoemBanner {
	margin-bottom: 2rem !important;
}

.Stores #InfoPage {
	margin-top: 0;
}

@media screen and (max-width: 500px) {
	.FrontPageSellYourClothes {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.NavigationList.BrandsNavigation {
  max-height: 600px;
  overflow: scroll;
}

/* Job list*/
.job-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.job-item {
	background: var(--color-base-3);
    border: 1px solid var(--color-border-2);
    padding: 16px;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}

.job-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.job-link {
    padding: 1rem 3rem;
    font-style: initial;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    margin-block: 0 2rem;
    background-color: var(--color-accent-2);
    border: 2px solid var(--color-accent-2);
    color: var(--color-light);
    text-transform: uppercase;
}

.job-link:hover {
	background-color: var(--color-base-1);
    color: var(--color-dark);
}
.SiteColumns .SiteMainColumn{
    width: 100%;
}