* {
	 padding: 0 0 0 0;
	 margin: 0 0 0 0;
	 box-sizing: border-box;
	 font-family: sans-serif;
	 border: none;
	 outline: none;
	 transition: all 0.3s ease;
}
/* ===================================== Root Variables ===================================== */
 :root {
	/* Colors */
	 --white: #fff;
	 --black: #000;
	 --gray-light: #f3f3f3;
	 --gray-dark: #2f2f2f;
	 --gray-medium: #b5b5b5;
	 --primary: #0ba2ff;
	 --text-light: #848484;
	 --green-light: rgba(0, 113, 50, 0.73);
	 --shadow: 0 0 5px rgba(0, 0, 0, 0.14);
	 --semi-black: rgba(0, 0, 0, 0.4);
	 --semi-white: rgba(255, 255, 255, 0.4);
	/* Typography */
	 --font-base: 16px;
	/* Spacing */
	 --space-xs: 0.5rem;
	 --space-sm: 1rem;
	 --space-md: 2rem;
	 --space-lg: 4rem;
	/* Radius */
	 --radius-sm: 10px;
	 --radius-lg: 20px;
	 --radius-pill: 100px;
}
 i {
	 font-size: 20px;
}
 img {
	 max-inline-size: 100%;
	 transition: opacity 0.3s;
}
 body, html {
	 background: var(--gray-light);
	/* background: linear-gradient( 0deg, rgba(120, 120, 120, 0.1) 70%, rgba(0, 128, 255, 0.13) 100% );
	 */
	 background-repeat: no-repeat;
	/* max-inline-size: 700px;
	 */
	 margin: auto;
	 padding-block-end: 0rem;
}
 #searchPlaceHolder {
	 overflow: hidden;
	 white-space: nowrap;
	 text-overflow: ellipsis;
	 display: block;
	 width: 200px;
}
 header.scrolled {
	 background: var(--white);
	 box-shadow: 0 0 5px rgba(0, 0, 0, 0.37);
	 background: rgba(255, 255, 255, 0.4);
	/* semi-transparent black */
	 backdrop-filter: blur(8px);
	/* blur the background behind */
	 -webkit-backdrop-filter: blur(8px);
	/* Safari support */
}
 header.scrolled .input-box {
	 border: 1px solid gray;
}
 header.header_black, nav.header_black {
	 background: #313131;
	 background: rgba(0, 0, 0, 0.4);
	/* semi-transparent black */
	 backdrop-filter: blur(8px);
	/* blur the background behind */
	 -webkit-backdrop-filter: blur(8px);
	/* Safari support */
}
 nav.header_black {
	 background: rgba(0, 0, 0, 0.4);
	/* semi-transparent black */
	 backdrop-filter: blur(8px);
	/* blur the background behind */
	 -webkit-backdrop-filter: blur(8px);
	/* Safari support */
	 color: var(--white);
}
 header {
	 position: sticky;
	 inset-block-start: -10px;
	 z-index: 2;
	 padding: 2rem;
}
 header .search-wrap {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 max-inline-size: 100%;
	 gap: 1rem;
}
 header .search-wrap .input-box {
	 display: flex;
	 align-items: center;
	 gap: 1rem;
	 color: #8a8a8a;
	 background: var(--white);
	 border-radius: 100px;
	 padding: 1rem;
	 inline-size: 100%;
}
 header .search-wrap i.cart {
	 border-radius: 100px;
	 background: var(--white);
	 min-block-size: 50px;
	 min-inline-size: 50px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 color: #393939;
}
 main {
	 padding: 0 !important;
	 min-height: 100vh;
}
 section {
	 padding: 2rem;
}
 main {
	 padding: 2rem;
}
 main .slide-image-card {
	 block-size: 200px;
	 inline-size: 100%;
	 background: #3da6e6;
	 background: var(--white);
	 border-radius: 20px;
	 padding: 0 2rem;
}
 main .slide-image-card {
	 overflow: hidden;
	 margin-bottom: 2rem;
	 padding: 2rem;
	 min-inline-size: 100%;
	 min-block-size: 300px;
}
 main .slide-image-card img {
	 inline-size: 100%;
	 object-fit: cover;
	 max-block-size: 100%;
	 border-radius: 20px;
	 block-size: 100%;
}
 main section {
	 margin-block-start: 2rem;
}
 main section .list-view {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 1.4rem;
	 margin-block-start: 1rem;
	 flex-wrap: wrap;
}
 main section .list-view .item {
	 background: var(--white);
	 border-radius: 10px;
	 text-align: center;
	 inline-size: 100px;
	 block-size: 100px;
	 max-block-size: min-content;
	 padding: 0.8rem 0.4rem;
	 text-wrap: nowrap;
	 overflow: hidden;
	 text-align: start;
	 overflow: hidden;
}
 main section .list-view .item img {
	 max-block-size: 100%;
	 block-size: 100%;
	 inline-size: 100%;
	 object-fit: contain;
}
 main section .list-view .item p {
	 margin-block-start: 0.5rem;
	 font-weight: 400;
	 color: var(--gray-medium);
	 font-size: 14px;
}
 main section.deals .list-view {
	 display: flex;
	 flex-flow: row wrap;
	 gap: clamp(1rem, 2vw, 3rem);
	 gap: 1rem;
}
 main section.deals .list-view .item {
	 inline-size: 45%;
	 max-inline-size: 170px;
	 min-inline-size: 130px;
	 min-block-size: 200px;
	 position: relative;
	 flex: 1;
	 display: flex;
	 align-items: center;
	 justify-content: space-around;
	 flex-flow: column;
}
 main section.deals .list-view .heart {
	 position: absolute;
	 inset-block-start: 1rem;
	 inset-inline-end: 1rem;
}
 main section.deals .list-view img {
	 block-size: calc(100% - 5rem);
}
 main section.deals .list-view p {
	 text-wrap: wrap;
	 color: var(--black);
	 font-weight: 500;
	 display: -webkit-box;
	 -webkit-line-clamp: 2;
	 -webkit-box-orient: vertical;
	 overflow: hidden;
}
 nav {
	 position: fixed;
	 inset-block-end: 0;
	 background: var(--white);
	 inline-size: 100%;
	 max-inline-size: 700px;
	 inset-inline-start: 50%;
	 transform: translateX(-50%);
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 padding: 1rem 2rem;
	 z-index: 90;
}
 .loader {
	 position: fixed;
	 inline-size: 100%;
	 inset-inline-start: 50%;
	 transform: translateX(-50%);
	 background: var(--white);
	 text-align: center;
	 block-size: 100vh;
	 padding: 4rem;
	 color: #b2b2b2;
	 color: #464646;
	 inset-block-start: 0;
	 z-index: 1000;
	 backdrop-filter: blur(5px);
	 background: rgba(255, 255, 255, .3);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	/* Remove after Test */
}
/*---------- category ----------*/
 section.category .item {
	 box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
}
 .item {
	 box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
}
/* Section lineup */
 .lineup {
	 margin-block-start: 2rem;
	 padding: 2rem 0;
}
 .lineup h3 {
	 font-size: 23px;
	 margin-inline-start: 2rem;
}
 .lineup .flex {
	/* background: #fff;
	 */
	 margin-block-start: 2rem;
	 display: flex;
	 overflow-x: auto;
	 scroll-snap-type: x mandatory;
	 padding: 1rem 0.1rem;
}
 .lineup .flex .item {
	 display: flex;
	 flex-flow: column;
	 text-align: start !important;
	 padding: 2rem;
	 flex: none;
	 scroll-snap-align: center;
	/* text-align: center;
	 */
	/* min-inline-size: 100%;
	 */
	 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
	 background: var(--white);
	 margin-inline: 1rem !important;
	 border-radius: 15px;
	 max-inline-size: 295px;
}
 .lineup .flex .item h3 {
	 padding: 0 0 0 0;
	 margin: 0 0 0 0;
}
 .lineup .flex .item img {
	 margin-top: 2rem;
	 inline-size: 100% !important;
	 block-size: auto !important;
	 border-radius: 10px;
	 object-fit: cover;
	 object-position: center;
}
 .lineup .flex .item .detail {
	 margin-top: 2rem;
	 color: #303030;
	 font-size: 13px;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
}
 .lineup .flex .item .detail span {
	 background: #095fff;
	 padding: 0.3rem 0.7rem;
	 color: var(--white);
	 border-radius: 15px;
}
 .lineup .flex .item .btn-wrap {
	 margin-block-start: 2rem;
	 display: flex;
	 align-items: center;
	 gap: 2rem;
}
 .lineup .flex .item .btn-wrap a {
	 background: #0228a5;
	 color: var(--white);
	 border-radius: 100px;
	 padding: 0.5rem 1rem;
	 text-decoration: none;
	 font-weight: 300;
	/* inline-size: max-content;
	 */
	 text-wrap: nowrap;
}
 .lineup .flex .item .btn-wrap p {
	 color: #0228a5;
	 margin: unset;
	 font-weight: 600;
}
 video {
	 max-width: 100%;
}
 section.video {
	 padding: 2rem 0.5rem;
	 background: var(--black);
	 border-radius: 20px;
	 color: var(--white);
}
 section.video .box {
	 padding: 0.8rem;
	 border-radius: 20px;
	 padding-block-end: 3.5rem;
}
 section.video video {
	 border-radius: 10px;
}
 section.video h3 {
	 margin-block: 1rem;
}
 section.video p {
	 margin-block-start: 1rem;
	 font-size: 14px;
	 color: #e8e8e8;
	 line-height: 1.3rem;
	 letter-spacing: 1px;
}
 section.video .box.gray {
	 margin-block-start: 2rem;
	 background: #282828;
}
 section.video .box.gray video {
	 border-radius: 20px;
}
 section.video.white {
	 background: var(--white);
}
 section.video.white .box.white {
	 background: var(--white);
	 color: var(--black);
}
 section.video.white .box.white p {
	 color: var(--black);
}
 section.video.white .box.orange {
	 background: #f17600;
}
 footer {
	 background: var(--black);
	 color: var(--white);
	 padding: 2rem;
	 height: 100vh;
}
 footer img {
	 width: 80px;
	 border-radius: 10px;
	 overflow: hidden;
}
 footer .content {
	 margin-top: 2rem;
	 display: flex;
	 align-items: start;
	 gap: clamp(1rem, 3rem, 4rem);
}
 footer .content li.title {
	 font-weight: 700;
	 margin-bottom: 1rem;
}
 footer .content li {
	 list-style: none;
	 line-height: 2rem;
	 width: max-content;
}
 footer .social {
	 margin-top: 2rem;
}
 footer .social p.title {
	 font-weight: 700;
}
 footer .social .icons {
	 margin-top: 2rem;
	 display: flex;
	 gap: clamp(1rem, 2vw, 3rem);
}
 footer .social .icons a {
	 width: 50px;
	 height: 50px;
	 overflow: hidden;
}
 .layer {
	 animation: zoomed 0.4s;
}
 @keyframes zoomed {
	 from {
		 transform: scale(0.7);
	}
}
 main.zoomout {
	 animation: zoomout 0.4s;
}
 @keyframes zoomout {
	 from {
		 transform: scale(1.5);
	}
}
 .layer.product_list .list {
	 margin-top: 0;
}
 .layer.product_list .list .item {
	 box-shadow: none;
	 display: flex;
	 gap: 2rem;
	 position: relative;
	 margin-top: 2rem;
	 background: var(--white);
	 padding: 2rem 1rem;
}
 .layer.product_list .list .item i {
	 position: absolute;
	 right: 1rem;
	 top: 1rem;
	 color: #b7b7b7;
	 display: none;
	/* Heart removed from list*/
}
 .layer.product_list .list .item img {
	 width: 100px;
	 height: 100%;
	 object-fit: cover;
	 mix-blend-mode: multiply;
}
 .layer.product_list .list .item p {
	 line-height: 1.5rem;
}
 .layer.product_list .list .item .product_name {
	 font-weight: 400;
}
 .layer.product_list .list .item .price {
	 font-weight: 600;
	 font-size: 18px;
}
 .layer.product_list .list .item .delivery {
	 font-size: 13px;
	 color: rgba(0, 113, 50, 0.73);
}
 .layer.search {
	 height: 100vh;
}
 .layer.search .nav {
	 padding: 1rem 1rem;
	 display: flex;
	 align-items: center;
	 gap: 2rem;
	 border-bottom: 1px solid #d6d6d6;
}
 .layer.search .nav input {
	 background: transparent;
	 font-size: 18px;
	 width: 100%;
}
 .layer.search .history-wrap .item {
	 display: flex;
	 align-items: center;
	 gap: 1rem;
	 padding: 1rem;
	 box-shadow: none;
}
 .suggestions {
	 background: var(--white);
	 border: 1px solid #ddd;
	 border-top: none;
	 position: absolute;
	 width: 100%;
	 z-index: 10;
}
 .suggestion {
	 padding: 8px 12px;
	 cursor: pointer;
	 display: flex;
	 gap: 10px;
	 align-items: center;
}
 .suggestion:hover {
	 background-color: #f0f0f0;
}
 .notifier {
	 position: fixed;
	 bottom: 2rem;
	 left: 50%;
	 transform: translateX(-50%);
	 padding: 0.75rem 1.5rem;
	 background-color: #0ba2ff;
	 color: white;
	 font-size: 0.9rem;
	 font-weight: 500;
	 border-radius: 1000px;
	 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	 max-width: 90vw;
	 width: max-content;
	 max-width: 300px;
	 display: flex;
	 align-items: center;
	 gap: 0.5rem;
	 animation: slideUpFade 0.4s ease-out;
	 z-index: 1000;
}
/* Simple fade and slide-up */
 @keyframes slideUpFade {
	 from {
		 opacity: 0;
		 transform: translateX(-50%) translateY(30px);
	}
	 to {
		 opacity: 1;
		 transform: translateX(-50%) translateY(0);
	}
}
 .hidden {
	 display: none !important;
}
 .item:active {
	 scale: 0.9;
}
 .empty {
	 text-align: center;
	 inline-size: 100%;
	 font-weight: 600;
	 color: var(--text-light);
}
 .active {
	 transition: 0.3s;
	 background: black;
	 color: #fff;
	 border-radius: 100px;
	 padding: 0.5rem;
}