@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
body {font-family: 'Source Sans Pro', sans-serif; margin: 0; padding: 0; color: #000; font-size: 17px;}
a {text-decoration: none; color: #ee4d2d;}
/* Navigation Button */
.nav {display: flex; gap: 5px; background: #fff; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; right: 0; z-index: 9999; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;}
.nav a {padding: 5px 15px; font-size: inherit;}
.nav a .bi {font-size: x-large; text-align: center; margin-right: 5px; vertical-align: middle;}
.nav a span {display: inline; color: #000;}
.nav .n-a-4 {display: none;}
/* Search Box */
.search {position: absolute; top: 95px; left: 15px; right: 15px; background: #ffffff40; color: #fff; border-radius: 5px; z-index: 999; padding: 10px; vertical-align: middle; cursor: text; font-size: inherit;}
.search:after {content: '\F52A'; font-family: Bootstrap-Icons; margin: 2px 0 0; float: right; font-weight: bold;}
.search:hover {background: #ffffff73;}
/* Carousel Image */
.easyslider {overflow: hidden; position: relative; width: 100%; height: 300px; margin: 60px 0 20px; background: #ee4d2d;}
.image_reel {position: absolute; top: 0; left: 0;}
.image_reel img {float: left; width: 20%; height: 300px; overflow: hidden; object-fit: cover;}
.paging {background: none; position: absolute; bottom: 20px; right: 15px; z-index: 100; display: none;}
.paging a {margin: 2px; background: #fff; width: 10px; height: 10px; display: inline-block; border-radius: 50px;}
.paging a.active {width: 20px;}
.easytitledes {display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 99; padding: 10px 15px; background: linear-gradient(180deg,transparent 65%,rgba(238, 69, 45, .80) 95%); width: 100%; height: 100%;}
.easytitledes a {position: absolute; bottom: 20px; color: #fff; font-weight: bold; font-size: xx-large; max-width: 65%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; z-index: 999;}
/* Menu Button */
.menu {max-width: 100%; overflow-y: auto; white-space: nowrap; margin: 0 0 10px; padding: 0 12px;}
.menu .m-a {display: inline-block; padding: 10px; color: #000; margin: 0 3px; border: 1px solid #bbb; border-radius: 5px; width: 100%; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: large;}
.menu .m-a:hover {border: 1px solid #ee4d2d;}
.menu .m-a .bi {display: block; margin-right: 10px; color: #ee4d2d; font-size: 25px; vertical-align: middle;}
/* Flash Sale Box */
.fsale {background: #ee4d2d; color: #fff; margin: 20px 0 15px; padding: 10px 0 25px;}
.fsale h3 {margin: 5px 15px 10px; padding: 0; text-transform: uppercase; overflow: hidden;}
.fsale h3 .bi {vertical-align: middle;}
.fsale #date {float: right; font-size: small; font-weight: normal; text-transform: capitalize; margin: 3px 0 0;}
.fsale .fsale-page {max-width: 100%; overflow-y: auto; white-space: nowrap; display: flex; align-items: center; gap: 10px;}
.fsale-box {position: relative; display: inline-block; padding: 15px 10px 10px; background: #fff; color: #000; margin: 0; border-radius: 5px; width: 100%; max-width: 200px; min-width: 200px; overflow: hidden; cursor: pointer;}
.fsale-box:first-child {margin-left: 15px;}
.fsale-box:last-child {margin-right: 15px;}
.fsale-box .tag {position: absolute; right: 0; z-index: 99; color: #fff; background: #ee4d2d; border-radius: 50px; font-size: inherit; padding: 5px 7px; margin: -10px 5px;}
.fsale-box img {display: block; width: auto; height: 100px; border-radius: 5px;}
.fsale-box .name {padding: 0; margin: 10px 0 0; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.fsale-box .price {padding: 0; margin: 0; font-size: inherit; font-weight: bold; color: #ee4d2d; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.fsale-box .link-all {width: 100%; height: 100%; display: block; font-weight: bold; text-align: center; color: #fff;}
.fsale-box .link-all:hover {opacity: 0.7;}
.fsale-box .link-all .bi {display: block; font-size: 60px;}
/* Category Button */
.category {max-width: 100%; overflow-y: auto; white-space: nowrap; margin: 0 0 10px; padding: 0 12px;}
.category .c-a {display: inline-block; padding: 10px; color: #000; margin: 0 3px; border: 1px solid #bbb; border-radius: 5px; width: 100%; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: large;}
.category .c-a:hover {border: 1px solid #ee4d2d;}
.category .c-a .bi {display: inline; margin-right: 10px; color: #ee4d2d; font-size: 25px; font-weight: bold; vertical-align: middle;}
/* Product Box */
.title {margin: 15px; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.title .bi {vertical-align: middle;}
.title .link {float: right; text-transform: capitalize; font-weight: normal; font-size: small; margin: 3px 0 0; padding: 0 5px; border: 1px solid #ee452d; border-radius: 3px;}
.product-box {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; margin: 15px 15px 20px; padding: 0;}
.product-box .product {position: relative; background: #fff; color: #000; border: 1px solid #bbb; border-radius: 5px; padding: 15px 10px 10px; overflow: hidden;}
.product-box .product:hover {border: 1px solid #ee4d2d;}
.product .tag {position: absolute; right: 0; z-index: 99; color: #fff; background: #ee4d2d; border-radius: 50px; font-size: inherit; padding: 5px 7px; margin: -10px 5px;}
.product img {display: block; width: auto; height: 100px; border-radius: 5px;}
.product .name {padding: 0; margin: 10px 0 0; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.product .price {padding: 0; margin: 0; font-size: inherit; font-weight: bold; color: #ee4d2d; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.product .sold {padding: 0; margin: 5px 0 0; font-size: small; color: #777; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.product .sold:before {content: '\00B1'; margin-right: 3px;}
.product .sold:after {content: '\F417'; font-family: Bootstrap-Icons; margin: 0 1px 0 5px; float: right; background: #eee; padding: 3px 2px 1px; border-radius: 50px;}
/* Back to Top Button */
#myTop {display: none; position: fixed; bottom: 10px; right: 10px; z-index: 999; font-size: x-large; border: none; cursor: pointer; color: #ee4d2d; background: #fff; border-radius: 50%; padding: 5px 6px 4px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
#myTop:hover {background: #ee4d2d; color: #fff;}
/* Snackbar */
#snackbar {visibility: hidden; min-width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 15px; position: fixed; z-index: 999; left: 50%; transform: translate(-50%, -50%); bottom: 30px; font-size: inherit;}
#snackbar.show {visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s;}
@-webkit-keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}}
@keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}}
@-webkit-keyframes fadeout {from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;}}
@keyframes fadeout {from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;}}
/* Modal Information */
#button-modal {display: block; margin: 0 auto 20px; text-align: center; font-size: inherit; cursor: pointer;}
#button-modal:hover {color: #ee4d2d;}
.modal {display: none; position: fixed; z-index: 99999; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.2);}
.close-modal {background: #bbb; height: 4px; width: 50px; border-radius: 10px; margin: auto; cursor: pointer;}
.modal-content {position: absolute; bottom: 0; left: 0; right: 0; overflow: auto; text-align: left; margin: 0; padding: 15px; width: 100% auto; max-height: 200px; border-radius: 20px 20px 0 0; background: #fff; color: #000; word-break: break-all; font-size: inherit;}
.modal-content span {display: block; font-size: small;}
@media only screen and (max-width: 650px) {
body {font-size: 15px; padding: 0 0 40px;}
.nav {gap: 20px; justify-content: center; position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 9999;}
.nav a span {display: none;}
.nav a .bi {margin-right: 0;}
.nav .n-a-1, .nav .n-a-2, .nav .n-a-3 {display: none;}
.nav .n-a-4 {display: inline;}
.search {top: 20px;}
.easyslider {height: 250px; margin: 0 0 20px;}
.image_reel img {height: 250px;}
.paging {bottom: 10px; right: 15px;}
.paging a {width: 7px; height: 7px;}
.easytitledes {background: linear-gradient(180deg,transparent 65%,rgba(238, 69, 45, .80) 85%);}
.easytitledes a {font-size: medium; -webkit-line-clamp: 2; width: 50%; bottom: 15px;}
.menu .m-a {max-width: 70px; font-size: small; padding: 5px 10px; border: none; vertical-align: top; padding: 0; background: none;}
.menu .m-a:hover {border: none; opacity: 0.7;}
.menu .m-a .bi {display: block; margin-right: 0; font-size: 20px;}
.category .c-a {max-width: 70px; font-size: medium; padding: 5px 10px;}
.category .c-a .bi {display: block; margin-right: 0; font-size: 20px;}
.fsale-box {min-width: 120px;}
.product-box {grid-template-columns: repeat(2, 1fr);}
.title .link {margin: 2px 0 0;}
#myTop {bottom: 50px; font-size: large;}
}
/* ===============================
TRUST / STATS — BLENDED SECTION
================================ */
.trust-wrap {
padding: 28px 16px 18px;
}
.trust-card {
background: linear-gradient(180deg, #1c1c1c, #121212);
border-radius: 18px;
padding: 22px 18px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow:
0 12px 30px rgba(0,0,0,0.18),
inset 0 0 0 1px rgba(255,255,255,0.04);
}
/* ITEMS */
.trust-item {
text-align: center;
flex: 1;
}
.trust-item strong {
display: block;
font-size: 18px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.3px;
}
.trust-item span {
display: block;
margin-top: 4px;
font-size: 12px;
color: rgba(255,255,255,0.65);
}
/* DIVIDERS */
.trust-divider {
width: 1px;
height: 34px;
background: rgba(255,255,255,0.08);
}
/* ===============================
GENERAL MARKET — FOOTER
Matched to reference layout
================================ */
.gm-footer {
background: #3f3f3f;
padding: 48px 20px 44px;
color: #eaeaea;
}
/* LOGO GRID */
.gm-footer-logos {
max-width: 420px;
margin: 0 auto 36px;
}
.gm-logo-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
font-size: 20px;
font-weight: 600;
color: #ffffff;
opacity: 0.9;
}
/* subtle brand tone differences */
.gm-logo-row span {
letter-spacing: 0.3px;
}
/* DIVIDER */
.gm-footer-divider {
height: 1px;
background: rgba(255,255,255,0.15);
margin: 26px 0 30px;
}
/* LEGAL TEXT */
.gm-footer-legal {
max-width: 520px;
margin: 0 auto;
text-align: center;
}
.gm-footer-legal strong {
display: block;
font-size: 14px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.gm-footer-legal p {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.75);
margin-bottom: 14px;
}
/* ===============================
FOOTER BRAND LOCKUP
================================ */
.gm-footer-brand {
text-align: center;
margin-bottom: 36px;
}
.gm-brand-top {
display: block;
font-size: 26px;
font-weight: 800;
letter-spacing: 4px;
color: #ffffff;
}
.gm-brand-sub {
display: block;
font-size: 13px;
letter-spacing: 3px;
margin-top: 6px;
color: rgba(255,255,255,0.65);
text-transform: lowercase;
}
/* ===============================
LOGO GRID (SVG READY)
================================ */
.gm-logo-grid {
max-width: 420px;
margin: 0 auto 36px;
}
.gm-logo-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
}
/*
IMPORTANT:
Replace inner text with ![]()
or inline