*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
:root {
–p: #5B2FD4; –p-light: #7C52E8; –p-dark: #3D1FA0;
–p-bg: #F2EEFF; –p-bg2: #EAE2FF; –accent: #FF5C8A;
–gold: #F5A623; –teal: #10b981; –text: #1A0A3C; –text2: #6B5B8A; –text3: #9B8BB8;
–border: rgba(91,47,212,0.13); –white: #fff; –bg: #FAFAF8;
–radius: 16px; –radius-sm: 10px; –radius-xs: 8px;
–transition: 0.35s cubic-bezier(0.4,0,0.2,1);
–shadow-sm: 0 2px 12px rgba(91,47,212,0.10);
–shadow-md: 0 8px 32px rgba(91,47,212,0.16);
–shadow-lg: 0 20px 60px rgba(91,47,212,0.20);
}
body { font-family: ‘DM Sans’, sans-serif; background: var(–bg); color: var(–text); }
/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes navSlide { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes badgePop { 0%{transform:scale(0) rotate(-15deg)} 70%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes waPulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.5)} 50%{box-shadow:0 0 0 12px rgba(37,211,102,0)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── PROMO TICKER ── */
.promo-ticker { background: #FFD700; overflow: hidden; height: 34px; display: flex; align-items: center; }
.ticker-track { display: flex; animation: marquee 28s linear infinite; white-space: nowrap; }
.ticker-item { font-size: 11.5px; font-weight: 700; color: var(–p-dark); padding: 0 28px; display: flex; align-items: center; gap: 8px; }
.ticker-dot { width: 5px; height: 5px; background: var(–p); border-radius: 50%; flex-shrink: 0; }
/* ── NAV ── */
.nav { background: var(–p); padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 100; animation: navSlide 0.5s ease both; box-shadow: 0 4px 24px rgba(91,47,212,0.35); }
.logo { font-family: ‘Syne’, sans-serif; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 3px; white-space: nowrap; text-decoration: none; flex-shrink: 0; }
.logo span { color: #FFD700; }
.search-wrap { flex: 1; max-width: 520px; position: relative; }
.search-wrap input { width: 100%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 30px; padding: 10px 44px 10px 18px; font-size: 13px; color: #fff; font-family: ‘DM Sans’, sans-serif; transition: var(–transition); }
.search-wrap input::placeholder { color: rgba(255,255,255,0.6); }
.search-wrap input:focus { outline: none; background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
.search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.7); font-size: 15px; cursor: pointer; }
.nav-actions { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.nav-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 24px; padding: 8px 16px; font-size: 12px; font-weight: 500; cursor: pointer; transition: var(–transition); font-family: ‘DM Sans’, sans-serif; text-decoration: none; }
.nav-btn:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.badge-count { background: var(–accent); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hamburger { display: none; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 18px; cursor: pointer; line-height: 1; }
/* ── CATBAR ── */
.catbar { background: var(–white); border-bottom: 1px solid var(–border); padding: 0 28px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 64px; z-index: 90; }
.catbar::-webkit-scrollbar { display: none; }
.nav-pill { color: var(–text); font-size: 12px; font-weight: 600; padding: 14px 14px; white-space: nowrap; cursor: pointer; border-bottom: 2.5px solid transparent; transition: var(–transition); text-decoration: none; display: inline-block; }
.nav-pill:hover, .nav-pill.active { color: var(–p); border-bottom-color: var(–p); }
.cat-divider { color: var(–border); padding: 14px 4px; font-size: 18px; user-select: none; }
/* ── MOBILE DRAWER ── */
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
.mobile-overlay.open { display: block; }
.mobile-drawer { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: #fff; z-index: 201; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; padding: 24px 0 40px; }
.mobile-drawer.open { transform: translateX(0); }
.drawer-logo { font-family: ‘Syne’, sans-serif; font-size: 20px; font-weight: 800; color: var(–p); letter-spacing: 2px; padding: 0 20px 20px; border-bottom: 1px solid var(–border); display: block; margin-bottom: 8px; text-decoration: none; }
.drawer-logo span { color: #FFD700; }
.drawer-close { position: absolute; top: 20px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(–text2); }
.drawer-link { display: flex; align-items: center; gap: 10px; padding: 13px 20px; font-size: 14px; font-weight: 500; color: var(–text); text-decoration: none; transition: background 0.15s; }
.drawer-link:hover { background: var(–p-bg); color: var(–p); }
.drawer-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(–text2); padding: 16px 20px 6px; }
/* ── PAGE HEADER ── */
.page-header { background: linear-gradient(135deg, #3D1FA0 0%, #6B35D9 60%, #8B55F0 100%); padding: 32px 28px; position: relative; overflow: hidden; }
.page-header::before { content:”; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background:radial-gradient(circle,rgba(255,255,255,0.07) 0%,transparent 70%); border-radius:50%; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.65); margin-bottom: 10px; }
.breadcrumb a { color: rgba(255,255,255,0.65); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.35); }
.page-header h1 { font-family: ‘Syne’, sans-serif; font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.page-header p { font-size: 13px; color: rgba(255,255,255,0.7); }
.result-count { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; display: inline-flex; margin-top: 10px; }
/* ── LAYOUT ── */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 28px; }
/* ── SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.filter-card { background: var(–white); border: 1px solid var(–border); border-radius: var(–radius); padding: 20px; }
.filter-title { font-family: ‘Syne’, sans-serif; font-size: 14px; font-weight: 700; color: var(–text); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.filter-title .arrow { font-size: 12px; color: var(–text2); transition: var(–transition); }
.filter-title.collapsed .arrow { transform: rotate(-90deg); }
.filter-body { display: flex; flex-direction: column; gap: 8px; }
.filter-body.hidden { display: none; }
.price-range { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.price-input { flex: 1; padding: 8px 10px; border: 1px solid var(–border); border-radius: var(–radius-xs); font-size: 12px; font-family: ‘DM Sans’, sans-serif; color: var(–text); outline: none; }
.price-input:focus { border-color: var(–p); }
.price-sep { color: var(–text2); font-size: 12px; }
.range-slider { width: 100%; accent-color: var(–p); margin-bottom: 6px; cursor: pointer; }
.filter-option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.filter-option input[type=”checkbox”] { accent-color: var(–p); width: 15px; height: 15px; cursor: pointer; }
.filter-option label { font-size: 13px; color: var(–text2); cursor: pointer; transition: color 0.15s; flex: 1; }
.filter-option:hover label { color: var(–p); }
.filter-option .count { font-size: 10px; color: var(–text3); background: var(–p-bg); padding: 1px 6px; border-radius: 6px; }
.rating-option { display: flex; align-items: center; gap: 6px; padding: 4px 0; cursor: pointer; }
.r-stars { color: var(–gold); font-size: 12px; }
.r-label { font-size: 12px; color: var(–text2); }
.apply-btn { width: 100%; background: var(–p); color: #fff; border: none; padding: 11px; border-radius: var(–radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: ‘DM Sans’, sans-serif; transition: var(–transition); margin-top: 6px; }
.apply-btn:hover { background: var(–p-dark); }
.clear-btn { width: 100%; background: transparent; color: var(–text2); border: 1px solid var(–border); padding: 9px; border-radius: var(–radius-sm); font-size: 12px; font-weight: 500; cursor: pointer; font-family: ‘DM Sans’, sans-serif; transition: var(–transition); margin-top: 6px; }
.clear-btn:hover { border-color: var(–p); color: var(–p); }
/* ── WC CATEGORY FILTER ── */
.wc-cat-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.wc-cat-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.wc-cat-item input { accent-color: var(–p); width: 15px; height: 15px; cursor: pointer; }
.wc-cat-item label { font-size: 13px; color: var(–text2); cursor: pointer; flex: 1; }
.wc-cat-item .count { font-size: 10px; color: var(–text3); background: var(–p-bg); padding: 1px 6px; border-radius: 6px; }
/* ── MAIN CONTENT ── */
.main-content { min-width: 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; background: var(–white); border: 1px solid var(–border); border-radius: var(–radius); padding: 12px 16px; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.toolbar-left { display: flex; align-items: center; gap: 10px; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tag { display: flex; align-items: center; gap: 5px; background: var(–p-bg); border: 1px solid rgba(91,47,212,0.2); color: var(–p); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; }
.filter-tag button { background: none; border: none; color: var(–p); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.toolbar-right { display: flex; align-items: center; gap: 12px; }
.sort-select { padding: 8px 12px; border: 1px solid var(–border); border-radius: var(–radius-xs); font-size: 12px; font-family: ‘DM Sans’, sans-serif; color: var(–text); background: var(–white); outline: none; cursor: pointer; }
.sort-select:focus { border-color: var(–p); }
.view-btns { display: flex; gap: 4px; }
.view-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(–border); border-radius: var(–radius-xs); font-size: 14px; cursor: pointer; background: var(–white); transition: var(–transition); }
.view-btn.active { background: var(–p); border-color: var(–p); color: #fff; }
.view-btn:hover:not(.active) { border-color: var(–p); color: var(–p); }
.results-text { font-size: 12px; color: var(–text2); white-space: nowrap; }
/* ── LOADING STATE ── */
.loading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skeleton { background: var(–white); border: 1.5px solid var(–border); border-radius: var(–radius); overflow: hidden; }
.skel-img { height: 180px; background: linear-gradient(90deg, #f0ebff 25%, #e0d6ff 50%, #f0ebff 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skel-body { padding: 13px 14px; }
.skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f0ebff 25%, #e0d6ff 50%, #f0ebff 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; margin-bottom: 8px; }
.skel-line.short { width: 60%; }
.skel-line.price { width: 40%; height: 16px; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
/* ── ERROR STATE ── */
.error-state { text-align: center; padding: 60px 20px; background: var(–white); border: 1px solid var(–border); border-radius: var(–radius); }
.error-state .error-icon { font-size: 50px; margin-bottom: 16px; }
.error-state h3 { font-family: ‘Syne’, sans-serif; font-size: 18px; font-weight: 700; color: var(–text); margin-bottom: 8px; }
.error-state p { font-size: 13px; color: var(–text2); margin-bottom: 16px; line-height: 1.6; }
.error-state code { background: var(–p-bg); color: var(–p); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.retry-btn { background: var(–p); color: #fff; border: none; padding: 10px 24px; border-radius: var(–radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: ‘DM Sans’, sans-serif; transition: var(–transition); margin-top: 8px; }
.retry-btn:hover { background: var(–p-dark); }
/* ── PRODUCT GRID ── */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.products-grid.list-view { grid-template-columns: 1fr; }
/* Grid card */
.prod-card { background: var(–white); border: 1.5px solid var(–border); border-radius: var(–radius); overflow: hidden; cursor: pointer; transition: var(–transition); position: relative; text-decoration: none; display: block; animation: fadeUp 0.5s ease both; }
.prod-card:hover { transform: translateY(-5px); box-shadow: var(–shadow-md); border-color: rgba(91,47,212,0.28); }
.prod-img { background: var(–p-bg); height: 180px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: var(–transition); }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: var(–transition); }
.prod-img .prod-emoji { font-size: 62px; }
.prod-card:hover .prod-img img { transform: scale(1.05); }
.prod-card:hover .prod-img { background: var(–p-bg2); }
.prod-badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 12px; color: #fff; letter-spacing: 0.3px; animation: badgePop 0.4s ease both; z-index: 2; }
.badge-sale { background: var(–p); } .badge-hot { background: var(–accent); } .badge-new { background: var(–teal); }
.wishlist-btn { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: var(–white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); opacity: 0; transition: var(–transition); cursor: pointer; border: none; z-index: 2; }
.prod-card:hover .wishlist-btn { opacity: 1; }
.wishlist-btn:hover { transform: scale(1.15); }
.quick-view-btn { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(91,47,212,0.9); color: #fff; font-size: 11px; font-weight: 600; text-align: center; padding: 8px; opacity: 0; transform: translateY(100%); transition: var(–transition); cursor: pointer; border: none; width: 100%; font-family: ‘DM Sans’, sans-serif; backdrop-filter: blur(4px); z-index: 2; }
.prod-card:hover .quick-view-btn { opacity: 1; transform: translateY(0); }
.prod-body { padding: 13px 14px 0; }
.prod-name { font-size: 12.5px; color: var(–text); line-height: 1.5; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.prod-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.stars { color: var(–gold); font-size: 11px; }
.rating-count { font-size: 10px; color: var(–text2); }
.prod-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.prod-price { font-family: ‘Syne’, sans-serif; font-size: 16px; font-weight: 700; color: var(–p); }
.prod-old { font-size: 11px; color: #bbb; text-decoration: line-through; }
.prod-save { font-size: 10px; color: var(–teal); font-weight: 600; }
.add-btn { width: 100%; background: var(–p); color: #fff; border: none; padding: 11px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: ‘DM Sans’, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; transition: var(–transition); }
.add-btn:hover { background: var(–p-dark); }
/* List view */
.products-grid.list-view .prod-card { display: grid; grid-template-columns: 160px 1fr; }
.products-grid.list-view .prod-img { height: 100%; min-height: 140px; border-radius: 0; }
.products-grid.list-view .prod-body { padding: 16px; }
.products-grid.list-view .prod-name { -webkit-line-clamp: 3; font-size: 14px; margin-bottom: 10px; }
.products-grid.list-view .prod-price { font-size: 20px; }
.products-grid.list-view .add-btn { width: auto; padding: 10px 24px; border-radius: 30px; font-size: 12px; margin-top: 10px; }
.products-grid.list-view .quick-view-btn { display: none; }
/* ── PAGINATION ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; padding-bottom: 12px; }
.page-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(–border); border-radius: var(–radius-xs); font-size: 13px; font-weight: 500; cursor: pointer; background: var(–white); color: var(–text2); transition: var(–transition); }
.page-btn:hover { border-color: var(–p); color: var(–p); }
.page-btn.active { background: var(–p); border-color: var(–p); color: #fff; font-weight: 700; }
.page-btn.disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.page-dots { color: var(–text2); font-size: 13px; padding: 0 4px; }
/* ── QUICK VIEW MODAL ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,2,30,0.65); z-index: 500; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.qv-modal { background: #fff; border-radius: 20px; width: 92%; max-width: 700px; position: relative; animation: fadeUp 0.3s ease both; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.qv-img { background: var(–p-bg); display: flex; align-items: center; justify-content: center; font-size: 90px; min-height: 300px; position: relative; overflow: hidden; }
.qv-img img { width: 100%; height: 100%; object-fit: cover; }
.qv-img .qv-emoji { font-size: 90px; }
.qv-body { padding: 28px 28px 24px; display: flex; flex-direction: column; overflow-y: auto; max-height: 520px; }
.qv-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 12px; color: #fff; display: inline-block; margin-bottom: 10px; }
.qv-name { font-family: ‘Syne’, sans-serif; font-size: 17px; font-weight: 700; color: var(–text); margin-bottom: 8px; line-height: 1.3; }
.qv-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.qv-stars { color: var(–gold); font-size: 13px; }
.qv-count { font-size: 11px; color: var(–text2); }
.qv-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.qv-price { font-family: ‘Syne’, sans-serif; font-size: 26px; font-weight: 800; color: var(–p); }
.qv-old { font-size: 14px; color: #bbb; text-decoration: line-through; }
.qv-save { font-size: 11px; color: var(–teal); font-weight: 600; background: #e6faf4; padding: 3px 8px; border-radius: 8px; }
.qv-desc { font-size: 12.5px; color: var(–text2); line-height: 1.7; margin-bottom: 16px; }
.qv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.qv-tag { background: var(–p-bg); color: var(–p); font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.qv-qty { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.qv-qty label { font-size: 12px; font-weight: 600; color: var(–text); }
.qty-control { display: flex; align-items: center; border: 1.5px solid var(–border); border-radius: var(–radius-xs); overflow: hidden; }
.qty-btn { width: 32px; height: 32px; background: var(–p-bg); border: none; font-size: 16px; cursor: pointer; color: var(–p); transition: var(–transition); display: flex; align-items: center; justify-content: center; }
.qty-btn:hover { background: var(–p); color: #fff; }
.qty-num { width: 40px; text-align: center; font-size: 13px; font-weight: 600; color: var(–text); border: none; outline: none; font-family: ‘DM Sans’, sans-serif; }
.qv-btns { display: flex; gap: 10px; margin-top: auto; }
.qv-add { flex: 1; background: var(–p); color: #fff; border: none; padding: 13px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: ‘DM Sans’, sans-serif; transition: var(–transition); }
.qv-add:hover { background: var(–p-dark); }
.qv-wish { background: var(–p-bg); color: var(–p); border: none; padding: 13px 16px; border-radius: 10px; font-size: 16px; cursor: pointer; transition: var(–transition); }
.qv-wish:hover { background: #ffd9e6; color: var(–accent); }
.modal-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.9); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; cursor: pointer; color: var(–text2); display: flex; align-items: center; justify-content: center; transition: var(–transition); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.modal-close:hover { background: var(–p); color: #fff; }
.qv-trust { display: flex; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(–border); }
.qv-trust-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(–text2); }
/* ── TRACK MODAL ── */
.track-modal { background: #fff; border-radius: 20px; padding: 32px 28px; width: 90%; max-width: 420px; position: relative; animation: fadeUp 0.3s ease both; }
.track-modal h3 { font-family: ‘Syne’, sans-serif; font-size: 20px; font-weight: 700; color: var(–text); margin-bottom: 6px; }
.track-modal p { font-size: 13px; color: var(–text2); margin-bottom: 18px; }
.modal-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(–border); border-radius: 10px; font-size: 13px; font-family: ‘DM Sans’, sans-serif; outline: none; margin-bottom: 12px; color: var(–text); transition: var(–transition); }
.modal-input:focus { border-color: var(–p); box-shadow: 0 0 0 3px rgba(91,47,212,0.1); }
.modal-btn { width: 100%; background: var(–p); color: #fff; border: none; padding: 13px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: ‘DM Sans’, sans-serif; transition: var(–transition); }
.modal-btn:hover { background: var(–p-dark); }
.track-result { display: none; margin-top: 14px; padding: 14px 16px; background: var(–p-bg); border-radius: 10px; font-size: 13px; color: var(–p-dark); font-weight: 500; border-left: 3px solid var(–p); }
/* ── TABS ── */
.tabs-section { background: var(–white); border: 1px solid var(–border); border-radius: var(–radius); margin-top: 0; overflow: hidden; }
.tab-nav { display: flex; border-bottom: 1.5px solid var(–border); }
.tab-btn { padding: 14px 20px; font-size: 13px; font-weight: 600; color: var(–text2); cursor: pointer; border: none; background: none; font-family: ‘DM Sans’, sans-serif; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: var(–transition); white-space: nowrap; }
.tab-btn.active, .tab-btn:hover { color: var(–p); border-bottom-color: var(–p); }
.tab-content { display: none; padding: 22px 24px; font-size: 13px; color: var(–text2); line-height: 1.8; animation: fadeUp 0.3s ease both; }
.tab-content.active { display: block; }
.tab-content ul { padding-left: 18px; }
.tab-content li { margin-bottom: 6px; }
/* ── REVIEWS ── */
.reviews-summary { display: grid; grid-template-columns: auto 1fr; gap: 24px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(–border); }
.big-rating { text-align: center; }
.big-num { font-family: ‘Syne’, sans-serif; font-size: 52px; font-weight: 800; color: var(–p); line-height: 1; }
.big-stars { color: var(–gold); font-size: 20px; }
.big-count { font-size: 11px; color: var(–text2); margin-top: 4px; }
.rating-bars { display: flex; flex-direction: column; gap: 6px; }
.rating-bar-row { display: flex; align-items: center; gap: 10px; }
.rbar-label { font-size: 11px; color: var(–text2); width: 30px; text-align: right; flex-shrink: 0; }
.rbar-track { flex: 1; height: 8px; background: var(–p-bg); border-radius: 10px; overflow: hidden; }
.rbar-fill { height: 100%; background: var(–gold); border-radius: 10px; }
.rbar-count { font-size: 11px; color: var(–text2); width: 24px; flex-shrink: 0; }
.review-card { background: var(–bg); border: 1px solid var(–border); border-radius: var(–radius-sm); padding: 16px; margin-bottom: 12px; }
.reviewer { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.reviewer-info { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(–p-bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(–p); font-family: ‘Syne’, sans-serif; flex-shrink: 0; }
.reviewer-name { font-size: 13px; font-weight: 600; color: var(–text); }
.review-date { font-size: 10px; color: var(–text3); }
.review-stars { color: var(–gold); font-size: 13px; }
.review-text { font-size: 12.5px; color: var(–text2); line-height: 1.6; }
.verified { font-size: 10px; color: var(–teal); font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
/* ── RELATED ── */
.related-section { max-width: 1200px; margin: 0 auto 32px; padding: 0 28px; }
.sec-title { font-family: ‘Syne’, sans-serif; font-size: 20px; font-weight: 700; color: var(–text); margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* ── FLOATING ── */
.fab-group { position: fixed; bottom: 28px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 300; }
.wa-btn { width: 54px; height: 54px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; box-shadow: 0 4px 20px rgba(37,211,102,0.45); animation: waPulse 2.5s ease infinite; text-decoration: none; }
.wa-btn:hover { transform: scale(1.1); }
.top-btn { width: 44px; height: 44px; background: var(–p); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; box-shadow: var(–shadow-sm); transition: var(–transition); border: none; color: #fff; opacity: 0; pointer-events: none; }
.top-btn.visible { opacity: 1; pointer-events: auto; }
.top-btn:hover { background: var(–p-dark); transform: translateY(-2px); }
/* ── TOAST ── */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1A0A3C; color: #fff; padding: 12px 24px; border-radius: 30px; font-size: 13px; font-weight: 500; font-family: ‘DM Sans’, sans-serif; z-index: 9999; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 8px 32px rgba(0,0,0,0.25); white-space: nowrap; pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); }
/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ── FOOTER ── */
.footer { background: #1A0A3C; padding: 40px 28px 20px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-logo { font-family: ‘Syne’, sans-serif; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 2px; display: block; margin-bottom: 10px; text-decoration: none; }
.footer-logo span { color: #FFD700; }
.footer-desc { color: rgba(255,255,255,0.5); font-size: 12px; line-height: 1.8; margin-bottom: 18px; }
.social-row { display: flex; gap: 8px; }
.soc-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); border-radius: var(–radius-sm); padding: 8px 14px; font-size: 11px; cursor: pointer; transition: var(–transition); font-family: ‘DM Sans’, sans-serif; text-decoration: none; display: inline-block; }
.soc-btn:hover { background: var(–p); border-color: var(–p); color: #fff; }
.footer-col h4 { font-family: ‘Syne’, sans-serif; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,0.5); font-size: 12px; margin-bottom: 10px; text-decoration: none; transition: var(–transition); }
.footer-col a:hover { color: rgba(255,255,255,0.9); padding-left: 4px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { color: rgba(255,255,255,0.3); font-size: 11px; }
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-size: 10px; padding: 4px 10px; border-radius: 8px; }
/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .empty-icon { font-size: 60px; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font-family: ‘Syne’, sans-serif; font-size: 18px; font-weight: 700; color: var(–text); margin-bottom: 8px; }
.empty-state p { font-size: 13px; color: var(–text2); }
/* ── API CONFIG BANNER ── */
.config-banner { background: #FFF7E6; border: 1.5px solid #F5A623; border-radius: var(–radius-sm); padding: 14px 18px; margin-bottom: 18px; font-size: 12.5px; color: #7a5500; line-height: 1.6; display: none; }
.config-banner strong { color: #5a3d00; }
.config-banner code { background: #fdeec8; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.shop-layout { grid-template-columns: 220px 1fr; gap: 16px; padding: 20px; }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.shop-layout { grid-template-columns: 1fr; padding: 16px; }
.sidebar { display: none; }
.sidebar.mobile-open { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 400; background: var(–white); overflow-y: auto; padding: 20px; animation: fadeUp 0.3s ease; }
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
.qv-modal { grid-template-columns: 1fr; }
.qv-img { min-height: 180px; font-size: 60px; }
.qv-body { max-height: 60vh; }
.nav { padding: 0 16px; }
.nav .search-wrap { display: none; }
.hamburger { display: flex; }
.nav-btn span:not(.badge-count) { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.reviews-summary { grid-template-columns: 1fr; }
.toolbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
.page-header h1 { font-size: 22px; }
.footer-grid { grid-template-columns: 1fr; }
}

✕
🧴
Sale
Product Name
★★★★★(0 reviews)
Rs.0
In StockCOD AvailableFree Returns
Qty:
−

+
🛒 Add to Cart
♡
🚚 Free ship Rs.2000+
💵 COD Available
↩️ Easy Returns

✕

📦 Track Your Order

Enter your order ID to get live status updates.

Track Order →

K4KART
✕
Navigation
🛍️ Shop All
📂 Categories
🛒 Cart
👤 My Account
💬 Contact Us
Quick Actions
📦 Track Order
💚 WhatsApp Us
🔽 Show Filters

🚚 Free Delivery on orders over Rs.2,000
💵 Cash on Delivery Available Nationwide
⚡ Flash Sale — Up to 40% OFF Today Only!
✨ 13,000+ Products — New Arrivals Every Week
🔒 100% Secure Checkout
🚚 Free Delivery on orders over Rs.2,000
💵 Cash on Delivery Available Nationwide
⚡ Flash Sale — Up to 40% OFF Today Only!
✨ 13,000+ Products — New Arrivals Every Week
🔒 100% Secure Checkout

Home
Shop
Categories
Cart
My Account
Contact Us
|
📦 Track Order

Home›Shop All Products

All Products 🛍️

Discover quality products across every category

Loading products…

⚙️ Setup Required: Open this HTML file and replace YOUR_CONSUMER_KEY and YOUR_CONSUMER_SECRET with your WooCommerce API keys. Find them at: WordPress Admin → WooCommerce → Settings → Advanced → REST API

Loading…

Newest First
Most Popular
Price: Low to High
Price: High to Low
Highest Rated

⊞
☰




About K4KART
Shipping & Returns
Reviews ⭐
FAQ
Pakistan’s #1 Online Store

K4KART brings you thousands of quality products across every category — from home essentials and beauty to electronics and fashion. Every product is carefully sourced and quality-checked before it reaches your door.

• ✅ Thousands of products across 8+ categories
• ✅ Cash on Delivery available nationwide
• ✅ Free shipping on orders over Rs.2,000
• ✅ Easy 7-day hassle-free returns
• ✅ 24/7 WhatsApp customer support
• ✅ 100% secure checkout

Shipping Policy

• 📦 Orders dispatched within 1–2 business days
• 🚚 Standard delivery: 3–5 business days across Pakistan
• 🏙️ Express delivery in Karachi, Lahore & Islamabad
• 💵 Cash on Delivery available on all orders
• 🆓 Free shipping on orders over Rs.2,000
• 📬 Flat shipping fee of Rs.150 on orders under Rs.2,000

Returns Policy

• ↩️ Easy 7-day return window from delivery date
• ✅ Item must be unused and in original packaging
• 💬 Contact us via WhatsApp to initiate a return
• 💰 Refund processed within 3–5 business days

4.7
★★★★★
1,284 reviews
5★924
4★231
3★77
2★26
1★26
AAyesha KhanApril 28, 2026★★★★★
Ordered the moisturizing gloves and floor mop together. Both delivered in 3 days to Karachi, packaging was great. The mop is amazing, works much better than expected!
✓ Verified Purchase
UUsman RazaApril 22, 2026★★★★☆
K4KART has become my go-to for online shopping. Fast delivery, genuine products, and the COD option makes it super convenient.
✓ Verified Purchase
FFatima SiddiquiApril 15, 2026★★★★★
The jade face roller came in beautiful packaging, perfect as a gift. Quality is excellent. Delivery was on time. Will definitely order again!
✓ Verified Purchase
Frequently Asked Questions
Is Cash on Delivery available?

Yes! COD is available on all orders across Pakistan. No advance payment required.

How long does delivery take?

Standard delivery takes 3–5 business days. Express delivery is available in major cities.

What if I receive a damaged item?

Contact us on WhatsApp within 24 hours of delivery. We’ll arrange a replacement or full refund.

Can I return a product?

Yes, you have 7 days to return unused items in original packaging. Contact support to initiate.

Do you deliver to all cities?

Yes! We deliver to all cities across Pakistan including Karachi, Lahore, Islamabad, Peshawar, Quetta and more.

You Might Also Like 💜

💬
↑