@charset "utf-8";

/*home cover*/
#home_cover{position:relative;overflow:hidden;
	&>.inner{width:100%;max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing);}
}

/* slide_show */
#home_slider{position:relative;overflow:hidden;touch-action:pan-y;border-radius:1em;transform:translate3d(0,0,0);filter:drop-shadow(0 0 var(--spacing) rgba(0 0 0 / 10%));
	.list{display:flex;
		.slide{flex:none;width:100%;max-width:1000px;padding-inline:calc(var(--spacing) / 2);transition:filter 1000ms,opacity 1000ms;
			&:not(.active){opacity:.25;filter:grayscale(1);pointer-events:none;}
			.img{display:block;width:100%;max-width:1000px;overflow:hidden;background-color:var(--body-background-color);border-radius:1em;aspect-ratio:1000/360;
				& img{display:block;width:100%;height:100%;object-fit:cover;}
			}
		}
	}
	.pagination{display:flex;align-items:end;justify-content:center;gap:.5em;position:absolute;inset-inline:0;inset-block-end:1.5em;z-index:1;height:0;margin-inline:auto;width:calc(100% - 6em);max-width:20em;box-sizing:border-box;
		.bullet{flex:1;display:block;height:.5em;min-width:1em;border-radius:1em;background:rgba(255 255 255/25%);backdrop-filter:blur(1em);cursor:pointer;transition:flex 300ms,color 300ms;
			&.active{flex:3;background:var(--SiteTHM);}
		}
	}
	.navigation{position:absolute;inset:0;z-index:1;display:flex;gap:2em;pointer-events:none;
		&::after{content:'';display:block;flex:none;width:100%;max-width:1000px;}
		.nav{flex:auto;pointer-events:initial;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;
			&::before{content:attr(icon);display:block;font-size:3em;width:1em;height:1em;line-height:1;overflow:hidden;opacity:0;transition:opacity 300ms;color:#fff;}
			&:hover::before{opacity:1;}
			&.prev{order:-1}
			&.next{order:1;}
		}
	}
	@media only screen and (max-width:1000px){
		.navigation{display:none;}
	}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1 + 1em);
		.list .slide .img{aspect-ratio:3/2;}
		.pagination{display:none;}
	}
}
#home_slider_bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
	&::after{content:'';display:block;position:absolute;inset:0;z-index:0;width:min(1920px,100%);margin-inline:auto;background:url('../images/art/page_bg-b92fada734.svg') no-repeat top center/cover;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));}
	.list{width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));
		.bg{position:absolute;inset:0;z-index:1;background-color:var(--background-color);background-image:linear-gradient(135deg,hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));background-size:cover;transition:opacity 1000ms;
			&:not(.show){z-index:0;opacity:0;transition-delay:1000ms;}
		}
	}
}

/*special deals*/
#special_deals{position:relative;touch-action:pan-y;display:flex;flex-direction:column;gap:var(--spacing);
	.title{display:grid;grid-template-columns:1fr auto;gap:1em;align-items:center;
		& h3{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		& p{max-width:60em;color:var(--body-text-color-a50);margin:unset;}
		.more{--icon-order:9;}
	}
	.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(19em,1fr));gap:1.75em 1em;
		.specialdeals{display:block;background-color:var(--background-color-L3);color:inherit;border-radius:1em;
			.ItemLink{padding:1em;border-radius:1em;color:var(--color);background-color:var(--background-color);background-image:url('../images/art/gradient_bg-c876d8c53b.svg'),linear-gradient(calc(var(--angle-reverse,1) * 135deg),hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));background-repeat:repeat-x;background-position:-90% 0,center;background-size:225% auto,cover;
				.img{margin-block-start:-1.75em;}
				.T{
					.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
					.tags>span{color:hsl(0 0% var(--lightness-trend) / 75%);}
				}
			}
			.Mark{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:center;padding:.75em 1em;
				.discount{min-width:5em;text-align:center;text-transform:none;}
				.condition,.price{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
				.condition{font-size:var(--SiteFS-S);}
				.price{font-weight:var(--SiteFW-B);text-align:end;}
			}
		}
		@media only screen and (min-width:1001px) and (max-width:1280px){
			.specialdeals:nth-of-type(8)~.specialdeals{display:none;}
		}
		@media only screen and (min-width:1001px){transform:none !important;}
		@media only screen and (max-width:1000px){display:flex;flex-direction:column;flex-wrap:wrap;gap:1em 0;max-height:20em;margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);
			.specialdeals{flex:none;width:min(22.5em,calc(var(--VWidth) - 6em));}
		}
	}
	@media only screen and (max-width:480px){
		.title{align-items:start;
			& p{font-size:var(--SiteFS-S);}
			.more{padding:calc((var(--CPT-US) - var(--icon-size)) / 2);
				&>span{display:block;width:var(--icon-size);height:var(--icon-size);padding:unset;overflow:hidden;}
			}
		}
		.list{margin-block-start:.5em;}
	}
}

/*new coupon*/
#new_coupons{position:relative;touch-action:pan-y;display:flex;flex-direction:column;gap:var(--spacing);
	.title{display:grid;grid-template-columns:1fr auto;gap:1em;align-items:center;
		& h3{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		& p{max-width:60em;color:var(--body-text-color-a50);margin:unset;}
		.more{--icon-order:9;}
	}
	.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(19em,1fr));gap:1em;
		.Coupon{--coupon-border-radius:1em;}
		@media only screen and (min-width:1001px) and (max-width:1280px){
			.Coupon:nth-of-type(8)~.Coupon{display:none;}
		}
		@media only screen and (min-width:1001px){transform:none !important}
		@media only screen and (max-width:1000px){display:flex;gap:unset;margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);
			.Coupon{flex:none;width:min(22.5em,calc(var(--VWidth) - 6em));}
		}
	}
	@media only screen and (max-width:480px){
		.title{align-items:start;
			& p{font-size:var(--SiteFS-S);}
			.more{padding:calc((var(--CPT-US) - var(--icon-size)) / 2);
				&>span{display:block;width:var(--icon-size);height:var(--icon-size);padding:unset;overflow:hidden;}
			}
		}
	}
}

/*home featured items*/
#home_items{overflow:hidden;
	&>.inner{width:100%;max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
	#featured_items{position:relative;touch-action:pan-y;
		.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(39em,1fr));gap:1em;
			.category{background:var(--background-color-L1);padding:var(--spacing);border-radius:1em;display:flex;flex-direction:column;gap:var(--spacing);
				.title{display:grid;grid-template-columns:1fr auto;gap:var(--spacing);align-items:center;min-height:2em;
					& h3{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
					.more{color:var(--body-text-color-a50);--font-weight:var(--SiteFW);--padding-block:0;--icon-order:9;}
				}
				.ItemList{--itemlist-column-size:15em;}
			}
			@media only screen and (min-width:1001px){transform:none!important}
			@media only screen and (max-width:1280px){gap:1em;}
			@media only screen and (max-width:1000px){display:flex;gap:unset;margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);
				.category{flex:none;width:min(46em,calc(var(--VWidth) - 6em));box-sizing:border-box;}
			}
			@media only screen and (max-width:640px){
				.category{width:min(22.5em,calc(var(--VWidth) - 6em));}
				.title .more>span{display:block;width:var(--icon-size);height:var(--icon-size);margin:.25em;--padding-inline:0;}
			}
		}
	}
}

/*news*/
#home_news{overflow:hidden;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
	#news_promotion{position:relative;touch-action:pan-y;display:flex;flex-direction:column;gap:var(--spacing);
		.title{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--spacing);
			& h3{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
			a{display:inline-block;vertical-align:top;font-weight:var(--SiteFW-EB);margin-inline-start:.5em;
				&>span[icon]{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;
					&::before{content:attr(icon);display:block;font-size:1.5em;order:9;}
				}
			}
		}
		@media only screen and (min-width:1001px) and (max-width:1280px){
			.NewsList .news:nth-of-type(6)~.news{display:none;}
		}
		@media only screen and (min-width:1001px){
			.NewsList{transform:none !important}
		}
		@media only screen and (max-width:1000px){
			.title{grid-template-columns:1fr;}
			.NewsList{display:flex;gap:unset;margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);
				.news{flex:none;width:min(22.5em,calc(var(--VWidth) - 6em));}
			}
		}
	}
}

/*card hot*/
#home_card_hot{overflow:hidden;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
	#card_hot{position:relative;touch-action:pan-y;display:flex;flex-direction:column;gap:var(--spacing);
		.title{
			& h3{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		}
		.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(39em,1fr));gap:1em;
			.category{display:grid;grid-template-columns:1fr 3fr;gap:var(--spacing);align-items:center;background:var(--background-color-L1);padding:var(--spacing);border-radius:1em;color:inherit;transition:color 300ms;
				&:hover{color:var(--SiteTHM);}
				.art{aspect-ratio:1/1;width:100%;max-width:10em;margin-inline:auto;
					& img{display:block;width:100%;height:100%;object-fit:cover;}
				}
				.headline{display:flex;flex-direction:column;gap:.5em;
					& h3{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-B);}
					& div{font-size:1em;color:var(--body-text-color-a50);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;}
				}
			}
			@media only screen and (min-width:1001px){transform:none !important}
			@media only screen and (max-width:1280px){gap:1em;}
			@media only screen and (max-width:1000px){display:flex;margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);gap:unset;
				.category{flex:none;width:min(22.5em,calc(var(--VWidth) - 6em));box-sizing:border-box;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:1em;
					.headline{
						& h3{font-size:var(--SiteFS);}
						& div{font-size:var(--SiteFS-S);}
					}
				}
			}
		}
	}
}

/* user reviews */
#home_user_reviews{overflow:hidden;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
	#user_reviews{position:relative;touch-action:pan-y;display:flex;flex-direction:column;gap:var(--spacing);
		.title{
			& h3{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		}
		.review_list{display:grid;grid-template-columns:repeat(auto-fit,minmax(24em,1fr));gap:1em;
			.review{display:grid;grid:"avatar name name" auto "avatar rate time" auto "comment comment comment" 1fr/auto auto 1fr;grid-template-rows:auto auto 1fr;align-items:center;column-gap:1.5em;padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
				.avatar{grid-area:avatar;width:3em;height:3em;border-radius:100%;overflow:hidden;background:var(--body-text-color-a5);box-shadow:var(--body-text-color-a5) 0 0 0 1px;
					&>img{display:block;width:100%;height:100%;object-fit:cover;}
				}
				.name{grid-area:name;font-weight:var(--SiteFW-B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
				.rate{grid-area:rate;--RateStarSize:1em;}
				.time{grid-area:time;font-size:var(--SiteFS-S);color:var(--body-text-color-a50);line-height:1;}
				.comment{grid-area:comment;margin-block-start:1.5em;align-self:start;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;}
			}
			@media only screen and (min-width:1001px){transform:none !important}
			@media only screen and (max-width:1000px){display:flex;margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);gap:unset;
				.review{flex:none;width:min(22.5em,calc(var(--VWidth) - 6em));column-gap:1em;box-sizing:border-box;
					.comment{-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;max-height:6em;}
				}
			}
		}
	}
}