* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent } body { font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--w); min-height: 100vh; margin: 0; padding: 0; overflow-x: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::-webkit-scrollbar { width: 2px } ::-webkit-scrollbar-thumb { background: var(--o); border-radius: 4px } .page { position: absolute; inset: 0; display: none; overflow: hidden; width: 100%; height: 100%; } .page.active { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; } button { font-family: 'Outfit', sans-serif; cursor: pointer; border: none } img { display: block; max-width: 100% } /* ── LOADER ── */ #ldr { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .5s } .lring { width: 52px; height: 52px; border: 3px solid var(--s3); border-top-color: var(--o); border-radius: 50%; animation: spin .8s linear infinite } @keyframes spin { to { transform: rotate(360deg) } } .llogo { font-size: 1.7rem; font-weight: 900; letter-spacing: 5px } .llogo b { color: var(--o) } /* ══════════════════════════════════════════ AUTH SCREEN (shows FIRST before store) ══════════════════════════════════════════ */ #auth-screen { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; z-index: 8000; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(40px + env(safe-area-inset-top, 0px)) 20px 40px; font-family: 'Outfit', 'Inter', sans-serif; perspective: 1200px; overflow-x: hidden; } /* ── BRAND 3D PROFILE (Replaces Model Viewer) ── */ #brand-3d-container { width: 100vw; height: 45vh; position: relative; display: flex; align-items: center; justify-content: center; perspective: 1000px; z-index: 5; margin-top: 20px; } .brand-3d-logo { width: 220px; height: 220px; position: relative; transform-style: preserve-3d; animation: rotateBrand 12s linear infinite; } @keyframes rotateBrand { from { transform: rotateY(0deg) rotateX(10deg); } to { transform: rotateY(360deg) rotateX(10deg); } } .brand-pane { position: absolute; inset: 0; background: rgba(0, 219, 255, 0.05); border: 2px solid rgba(0, 219, 255, 0.3); backdrop-filter: blur(10px); border-radius: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(0, 219, 255, 0.2); } .brand-pane.front { transform: translateZ(40px); } .brand-pane.back { transform: translateZ(-40px) rotateY(180deg); } .brand-3d-text { font-size: 2.2rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; background: linear-gradient(to bottom, #fff, #00dbff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px rgba(0, 219, 255, 0.5)); text-align: center; } .brand-3d-sub { font-size: 0.6rem; font-weight: 800; color: #00dbff; margin-top: 5px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; } .brand-glow { position: absolute; width: 280px; height: 280px; background: radial-gradient(circle, rgba(0, 219, 255, 0.15) 0%, transparent 70%); transform: translateZ(-60px); border-radius: 50%; } /* ── AUTH BACKGROUND — full-screen cover, no black cutoff ── */ .auth-bg { position: absolute; inset: 0; background-image: url('rk_bazaar_login_bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; filter: brightness(1.16) contrast(1.1) saturate(1.15); } /* Dark overlay for text readability */ .auth-bg::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 2; pointer-events: none; } /* Smooth gradient fade at the bottom — blends into body bg */ .auth-bg::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient( to bottom, transparent 0%, rgba(8, 8, 8, 0.35) 60%, #080808 100% ); z-index: 3; pointer-events: none; } .auth-logo { z-index: 10; position: relative; font-size: 2.2rem; font-weight: 900; letter-spacing: 6px; margin-bottom: 8px; text-align: center; text-transform: uppercase; background: linear-gradient(to right, #fff, #00dbff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(0, 219, 255, 0.3)); } .auth-tagline { z-index: 20; position: relative; font-size: .8rem; color: var(--g); text-align: center; margin-bottom: 35px; letter-spacing: 2px; opacity: 0.8; } .auth-tabs { z-index: 20; position: relative; display: flex; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(24px); border-radius: 16px; padding: 5px; margin-bottom: 25px; width: 90%; max-width: 380px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .auth-tab { flex: 1; padding: 12px; border-radius: 12px; font-size: .85rem; font-weight: 700; background: transparent; color: var(--g); transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: none; cursor: pointer; } .auth-tab.active { background: #00dbff; color: #000; box-shadow: 0 4px 15px rgba(0, 219, 255, 0.4); transform: translateY(-2px); } .auth-panel { display: none; } .auth-panel.active { display: block; } .auth-box { width: 90%; max-width: 380px; background: linear-gradient(135deg, rgba(20, 20, 20, 0.8), rgba(10, 10, 10, 0.95)); backdrop-filter: blur(30px); border-radius: 28px; padding: 32px 28px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 100px rgba(255, 255, 255, 0.05); transform: rotateX(5deg); transform-style: preserve-3d; transition: transform 0.5s ease; z-index: 10; position: relative; } .auth-box:hover { transform: rotateX(0deg) translateY(-5px); } .auth-box .fg label { display: block; font-size: .65rem; font-weight: 800; color: #00dbff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; } .auth-box h2, .auth-box h3, .auth-box p { text-align: center; width: 100%; margin-bottom: 10px; } .auth-box .fg input { width: 100%; padding: 15px 18px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; font-family: inherit; font-size: .9rem; color: #fff; outline: none; background: rgba(255, 255, 255, 0.03); transition: all .3s; text-align: center; } .auth-box .fg input:focus { background: rgba(255, 255, 255, 0.07); border-color: #00dbff; box-shadow: 0 0 20px rgba(0, 219, 255, 0.15); } .auth-btn { width: 100%; background: linear-gradient(135deg, #00dbff, #0055ff); color: #fff; border: none; border-radius: 16px; padding: 16px; font-size: 1rem; font-weight: 900; margin-top: 10px; cursor: pointer; box-shadow: 0 8px 25px rgba(0, 219, 255, 0.3); transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .auth-btn:hover { transform: scale(1.02); box-shadow: 0 12px 30px rgba(0, 219, 255, 0.5); } .auth-guest { margin-top: 25px; text-align: center; color: var(--g); font-size: .85rem; font-weight: 600; cursor: pointer; transition: color .3s; } .auth-guest:hover { color: #fff; } .auth-guest a { color: var(--o); font-weight: 800; cursor: pointer; text-decoration: underline } #auth-main-panel { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; position: relative; } /* OTP panel inside auth screen */ #auth-otp-panel { display: none } .otp-info-box { background: rgba(255, 69, 0, .08); border: 1px solid rgba(255, 69, 0, .2); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 10px } .otp-info-box i { color: var(--o); font-size: 1rem; flex-shrink: 0 } .otp-info-box p { font-size: .73rem; color: var(--g); line-height: 1.5 } .otp-info-box p b { color: var(--w) } .otp-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px } .otp-box { width: 46px; height: 54px; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; text-align: center; font-size: 1.4rem; font-weight: 900; color: var(--w); outline: none; font-family: 'Inter', sans-serif; transition: all .2s; backdrop-filter: blur(10px) } .otp-box:focus { border-color: var(--o); background: rgba(255, 69, 0, .06) } .resend-row { text-align: center; margin-top: 12px; font-size: .72rem; color: var(--g) } .resend-row a { color: var(--o); font-weight: 800; cursor: pointer } /* ── AUTH SCREEN RESPONSIVE ── */ @media (max-width: 480px) { #auth-screen { justify-content: flex-start; padding-top: calc(24px + env(safe-area-inset-top, 0px)); } .auth-box { width: 95%; padding: 24px 18px; border-radius: 20px; } .brand-3d-logo { width: 160px; height: 160px; } #brand-3d-container { height: 36vh; } } @media (min-width: 768px) { .auth-box { max-width: 420px; } } @media (min-width: 1024px) { #auth-screen { justify-content: center; } .auth-box { max-width: 440px; } } /* ── STORE (hidden until logged in) ── */ #store-screen { display: none } /* ── TOPBAR ── */ .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--header-h); padding-top: var(--status-bar); background: rgba(8, 8, 8, 0.98); backdrop-filter: blur(25px); border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; } .tlogo { font-weight: 900; font-size: 1.15rem; letter-spacing: 1.5px; flex-shrink: 0; color: var(--w); display: flex; align-items: center; gap: 6px; } .tlogo b { color: var(--o); } .tloc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.05); padding: 6px 10px; border-radius: 20px; max-width: 180px; } .tloc i { color: var(--o); font-size: .6rem; flex-shrink: 0; } .tloc span { font-size: .6rem; color: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .tacts { display: flex; gap: 6px; flex-shrink: 0; } .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--s2); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--g); transition: all .2s; } .ic:hover { background: var(--o); color: #fff; border-color: var(--o); } .snav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav); background: rgba(8, 8, 8, .96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--bdr); z-index: 1000; display: flex; align-items: center; padding: 0 16px; } .bk { width: 44px; height: 44px; border-radius: 14px; background: var(--s1); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--w); transition: all 0.2s } .bk:active { transform: scale(0.92); background: var(--o); } .snav h2 { font-size: 1rem; font-weight: 700; text-align: center; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; left: 0; right: 0; padding: 0 60px; z-index: 1; pointer-events: none; } .snr { display: flex; gap: 7px; flex-shrink: 0 } .botnav { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bot); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(8, 8, 8, 0.96); backdrop-filter: blur(25px); display: flex; border-top: 1px solid var(--bdr); z-index: 1000; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); } .bn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; transition: all .2s } .bn i { font-size: 1.1rem; color: var(--g); transition: all .25s } .bn span { font-size: .5rem; font-weight: 700; color: var(--g); text-transform: uppercase; letter-spacing: .8px } .bn.active i, .bn.active span { color: var(--o) } .bn.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 2px; background: var(--o); border-radius: 0 0 4px 4px } .cpill { position: fixed; bottom: calc(var(--bot) + 10px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; background: linear-gradient(135deg, var(--o), var(--o2)); border-radius: 16px; padding: 12px 16px; display: none; align-items: center; justify-content: space-between; z-index: 200; box-shadow: var(--glow); animation: slideup .3s ease } @keyframes slideup { from { transform: translateY(30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } .cpill.show { display: flex } .cpl span { font-size: .6rem; color: rgba(255, 255, 255, .75); font-weight: 600; text-transform: uppercase; letter-spacing: .5px } .cpl h3 { font-size: 1.05rem; font-weight: 800; color: #fff } .cpbtn { background: #fff; color: var(--o); border: none; border-radius: 10px; padding: 9px 18px; font-size: .78rem; font-weight: 800; font-family: 'Outfit', sans-serif } .pw { padding: 0 16px; padding-top: 80px; padding-bottom: 30px; min-height: calc(100vh - 120px); display: flex; flex-direction: column; align-items: stretch; overflow-x: hidden; width: 100%; } .policy-wrap { margin-top: 30px; } .sbar { margin: 20px 0 24px; display: flex; align-items: center; height: 52px; background: #111; border-radius: 12px; padding: 0 18px; border: 1px solid var(--bdr); cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; box-sizing: border-box; overflow: visible; } .sbar:active { transform: scale(0.98); border-color: var(--o); } .sbar svg { color: var(--o); flex-shrink: 0; margin-right: 12px; } .sbar input { flex: 1; border: none; outline: none; font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: var(--w); background: transparent; height: 100%; } .sbar input::placeholder { color: #666; } .hero { margin: 0 14px 18px; border-radius: 20px; overflow: hidden; position: relative; height: 148px; cursor: pointer } .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #c73200, #ff6b00 60%, #ff8c00) } .hero-carousel { width: 100%; height: 180px; margin-top: 14px; position: relative; overflow: hidden; border-radius: 20px; background: linear-gradient(135deg, #c73200, #ff6b00); box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3); } .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; padding: 0; transform: scale(1.03); } .hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); } /* ── BANNER IMAGE SLIDE ── */ .hero-slide-banner { position: absolute; inset: 0; } .hero-slide-banner img.banner-bg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; } .hero-slide.active .hero-slide-banner img.banner-bg { transform: scale(1.06); } /* Glassmorphic overlay */ .hero-glass-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.08) 100%); backdrop-filter: blur(0px); z-index: 1; } .hero-glass-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 18px; } .carousel-indicators { position: absolute; bottom: 12px; left: 20px; display: flex; gap: 6px; z-index: 10; } .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: all 0.3s; cursor: pointer; } .dot.active { width: 20px; border-radius: 10px; background: #fff; } .hero-bg-accent { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); top: -100px; right: -100px; border-radius: 50%; } .hero-body { position: relative; z-index: 2; padding: 18px; height: 100%; display: flex; flex-direction: column; justify-content: center; width: 65%; } .hero-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; padding: 3px 10px; font-size: .58rem; font-weight: 800; color: #fff; margin-bottom: 8px; width: fit-content } .hero-body h1 { font-size: 1.4rem; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 5px } .hero-body h1 span { font-size: 1.9rem; display: block; margin-top: 2px } .hero-body p { font-size: .68rem; color: rgba(255, 255, 255, .85) } .hero-badge { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; width: 70px; height: 70px; background: rgba(0, 0, 0, .25); backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center } .hero-badge span { font-size: .54rem; font-weight: 900; line-height: 1.4 } .hero-badge i { font-size: .95rem; margin-top: 2px } /* ── AMZ-STYLE ORDER CARDS ── */ .ow { display: flex; flex-direction: column; gap: 16px; padding: 16px; } .ocard { background: var(--s1); border: 1px solid var(--bdr); border-radius: 12px; overflow: hidden; } .oh { padding: 12px; border-bottom: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; } .onum { font-size: .65rem; color: var(--g); text-transform: uppercase; letter-spacing: 1px; } .onum b { color: var(--w); } .otot { padding: 12px; background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--bdr); display: flex; justify-content: space-between; } .ot-l { display: flex; flex-direction: column; } .ot-l span { font-size: .55rem; color: var(--g); text-transform: uppercase; margin-bottom: 2px; } .ot-l b { font-size: .88rem; color: var(--o); } .items-list { list-style: none; padding: 0; } .item-row { padding: 12px; border-bottom: 1px solid var(--bdr); display: flex; gap: 12px; align-items: center; } .item-row:last-child { border-bottom: none; } .item-img { width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--bdr); object-fit: cover; background: var(--bg); } .item-info { flex: 1; } .item-name { font-size: .78rem; font-weight: 700; color: var(--w); -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } .item-meta { font-size: .65rem; color: var(--g); display: flex; align-items: center; gap: 8px; } .iofr { padding: 12px; display: flex; gap: 10px; flex-wrap: wrap; } .obtn { flex: 1; padding: 10px; border-radius: 8px; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; } .obtn-c { background: rgba(255, 61, 61, .1); color: var(--red); border: 1px solid rgba(255, 61, 61, .25); } .obtn-d { background: var(--s2); color: var(--w); border: 1px solid var(--bdr); } .sp { padding: 4px 10px; border-radius: 6px; font-size: .6rem; font-weight: 800; text-transform: uppercase; } .sp.pending { background: rgba(255, 193, 7, .1); color: #FFC107; } .sp.confirmed { background: rgba(33, 150, 243, .1); color: #2196F3; } .sp.shipped { background: rgba(156, 39, 176, .1); color: #9C27B0; } .sp.delivered { background: rgba(0, 230, 118, .1); color: var(--green); } .sp.cancelled { background: rgba(255, 61, 61, .1); color: var(--red); } .sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; margin-top: 24px; } .sh h2 { font-size: clamp(1rem, 4.5vw, 1.25rem); font-weight: 700; color: var(--w); letter-spacing: -0.2px; } .sh a { font-size: 0.8rem; color: var(--o); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; background: rgba(255, 69, 0, 0.1); padding: 8px 16px; border-radius: 20px; } .cstrip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin-bottom: 28px; -webkit-overflow-scrolling: touch; } .cstrip::-webkit-scrollbar { display: none } .csi { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; width: 76px; } .csi-img { width: 68px; height: 68px; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--bdr); background: #111; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; padding: 14px; } .csi:active .csi-img { border-color: var(--o); transform: scale(0.9); background: rgba(255, 69, 0, 0.05); } .csi-img img { width: 100%; height: 100%; object-fit: contain; } .csi span { font-size: 0.7rem; font-weight: 500; color: #bbb; text-transform: capitalize; text-align: center; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .flash-bar { margin: 0 16px 18px; background: var(--s1); border: 1px solid var(--bdr); border-radius: var(--r); padding: 14px; display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden } .flash-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--o), var(--o2), #FF8C00) } .flash-bar .fi { width: 42px; height: 42px; background: rgba(255, 69, 0, .12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0 } .flash-bar .ft h3 { font-size: .82rem; font-weight: 800 } .flash-bar .ft p { font-size: .65rem; color: var(--g); margin-top: 2px } .flash-bar .fclock { margin-left: auto; background: var(--o); border-radius: 10px; padding: 6px 10px; text-align: center; flex-shrink: 0 } .flash-bar .fclock span { font-size: .58rem; font-weight: 800; color: #fff; display: block } .flash-bar .fclock .ft2 { font-size: .92rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums } .ps { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none } .ps::-webkit-scrollbar { display: none } .pcs { flex-shrink: 0; width: clamp(145px, 44vw, 175px); background: #111; border-radius: 20px; border: 1px solid var(--bdr); overflow: hidden; position: relative; margin-bottom: 12px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .pcs:active { transform: scale(0.96); background: #151515; } .pcs:last-child { margin-right: 0; } .pcs-img { height: 132px; background: var(--s2); display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; overflow: hidden } .pcs-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s } .pcs:hover .pcs-img img { transform: scale(1.1) } .wlb { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); border-radius: 8px; border: none; display: flex; align-items: center; justify-content: center; font-size: .68rem; color: var(--g); transition: all .2s; z-index: 2 } .wlb.on { color: var(--o) } .dtag { position: absolute; top: 7px; left: 7px; background: var(--o); color: #fff; font-size: .5rem; font-weight: 800; padding: 2px 6px; border-radius: 5px } .addbtn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: var(--o); border-radius: 8px; border: none; display: flex; align-items: center; justify-content: center; font-size: .82rem; color: #fff; z-index: 10; transition: all .2s; box-shadow: 0 4px 12px rgba(255, 69, 0, .45) } .addbtn:hover { transform: scale(1.15) } .pcs-body { padding: 18px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pcs-body h4 { font-size: .68rem; font-weight: 600; line-height: 1.35; color: var(--w); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; width: 100%; } .pcs-p { font-size: .82rem; font-weight: 800 } .pcs-m { font-size: .6rem; color: var(--g); text-decoration: line-through; margin-left: 4px } .pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; width: 100%; box-sizing: border-box; } @media(min-width: 480px) { .pgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px; } } @media(min-width:600px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 16px } } /* ── MOBILE FIXES ── */ @media(max-width:400px) { .fr { grid-template-columns: 1fr; } .otp-inputs { gap: 6px; } .otp-box { width: 40px; height: 48px; font-size: 1.2rem; } .popt { padding: 10px; gap: 8px; } .poi2 { width: 34px; height: 34px; } .co-wrap { padding: 10px; } .sc { padding: 12px; } .pbtn { font-size: .82rem; padding: 13px; } .auth-box { padding: 18px 14px; } .hero-body h1 { font-size: 1.2rem; } .hero-body h1 span { font-size: 1.6rem; } } @media(min-width:900px) { .pgrid { grid-template-columns: repeat(4, 1fr); gap: 20px } } @media(min-width:1200px) { .pgrid { grid-template-columns: repeat(5, 1fr); gap: 24px } } .pgc { background: #111; border-radius: 12px; border: 1px solid var(--bdr); overflow: hidden; cursor: pointer; transition: all .2s; position: relative; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); width: 100%; } .pgc:hover { border-color: var(--o); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); } .pgc-img { width: 100%; aspect-ratio: 1 / 1; background: var(--s2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .pgc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .pgc:hover .pgc-img img { transform: scale(1.08) } .pgc-body { padding: 16px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pgc-body h4 { font-size: .72rem; font-weight: 600; line-height: 1.35; color: var(--w); margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: capitalize; text-align: center; width: 100%; } .pgc-stars { color: #FFB300; font-size: .58rem; margin-bottom: 4px } .pgc-p { font-size: .88rem; font-weight: 800 } .pgc-m { font-size: .63rem; color: var(--g); text-decoration: line-through; margin-left: 4px } .pgc-save { font-size: .6rem; color: var(--green); font-weight: 700; display: block; margin-top: 2px } .chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 20px; } .chips::-webkit-scrollbar { display: none } .chip { flex-shrink: 0; padding: 7px 14px; border-radius: 30px; font-size: .67rem; font-weight: 700; border: 1px solid var(--bdr); background: var(--s2); color: var(--g); cursor: pointer; transition: all .2s; font-family: 'Outfit', sans-serif; text-transform: capitalize; } .chip.on { background: var(--o); color: #fff; border-color: var(--o) } .cart-wrap { padding: 14px } .ci { background: var(--s1); border-radius: 13px; padding: 12px; display: flex; gap: 10px; margin-bottom: 10px; border: 1px solid var(--bdr); position: relative } .ci-img { width: 68px; height: 68px; background: var(--s2); border-radius: 10px; border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; padding: 6px; flex-shrink: 0; overflow: hidden } .ci-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .ci-body h4 { font-size: .73rem; font-weight: 600; line-height: 1.3; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ci-price { font-size: .9rem; font-weight: 800; color: var(--o); margin-bottom: 8px } .qc { display: flex; align-items: center; gap: 8px } .qb { width: 28px; height: 28px; background: var(--s2); border: 1px solid var(--bdr); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800; color: var(--w); transition: all .2s } .qb:hover { background: var(--o); border-color: var(--o) } .qn { font-size: .88rem; font-weight: 800; min-width: 18px; text-align: center } .ci-rm { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: rgba(255, 61, 61, .1); border: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .62rem; color: var(--red) } .sumbox { background: var(--s1); border-radius: 13px; padding: 16px; border: 1px solid var(--bdr); margin-bottom: 14px } .sumbox h3 { font-size: .86rem; font-weight: 800; margin-bottom: 14px } .sr { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: .77rem } .sr span { color: var(--g) } .sr strong { font-weight: 700 } .sdiv { border: none; border-top: 1px solid var(--bdr); margin: 10px 0 } .stot { display: flex; justify-content: space-between; align-items: center } .stot span { font-size: .84rem; font-weight: 800 } .stot strong { font-size: 1.2rem; font-weight: 900; color: var(--o) } .cobtn { width: 100%; background: linear-gradient(135deg, var(--o), var(--o2)); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: .9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 24px rgba(255, 69, 0, .32) } .co-wrap { padding: 14px } .sc { background: var(--s1); border-radius: 13px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--bdr) } .sc h3 { font-size: .82rem; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 8px } .sc h3 i { color: var(--o) } .fg { margin-bottom: 12px } .fg label { display: block; font-size: .6rem; font-weight: 800; color: var(--g); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px } .fg input, .fg select, .fg textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--bdr); border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: .83rem; color: var(--w); outline: none; transition: border .2s; background: var(--s2); resize: none } .fg input:focus, .fg select:focus { border-color: var(--o) } .fg select option { background: var(--s1) } .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .po { display: flex; flex-direction: column; gap: 8px } .popt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--bdr); border-radius: 12px; cursor: pointer; transition: all .2s; background: var(--s2) } .popt.on { border-color: var(--o); background: rgba(255, 69, 0, .06) } .poi2 { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0 } .poi2.r { background: rgba(51, 149, 255, .12); color: #3395FF } .poi2.s { background: rgba(99, 91, 255, .12); color: #635bff } .poi2.c { background: rgba(0, 230, 118, .12); color: var(--green) } .pi h4 { font-size: .78rem; font-weight: 800 } .pi p { font-size: .63rem; color: var(--g) } .rd { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bdr); margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center } .rd.on { border-color: var(--o) } .rd.on::after { content: ''; width: 8px; height: 8px; background: var(--o); border-radius: 50% } .pbtn { width: 100%; background: linear-gradient(135deg, var(--o), var(--o2)); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: .93rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 24px rgba(255, 69, 0, .32) } .succ-pg { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; text-align: center } .succ-ic { width: 80px; height: 80px; background: rgba(0, 230, 118, .1); border: 2px solid rgba(0, 230, 118, .25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--green); margin-bottom: 20px } .succ-pg h2 { font-size: 1.55rem; font-weight: 900; margin-bottom: 8px } .succ-pg>p { font-size: .8rem; color: var(--g); margin-bottom: 20px } .succ-pill { background: var(--s2); border: 1px solid var(--bdr); border-radius: 12px; padding: 10px 22px; font-size: .78rem; margin-bottom: 24px } .succ-pill b { color: var(--o) } .succ-btn { background: var(--o); color: #fff; border: none; border-radius: 12px; padding: 13px 32px; font-size: .88rem; font-weight: 800; box-shadow: 0 6px 18px rgba(255, 69, 0, .28) } .ac-wrap { padding: 14px } .pcard { background: linear-gradient(135deg, var(--s1), var(--s2)); border: 1px solid var(--bdr); border-radius: 18px; padding: 18px 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; overflow: hidden; /* Added overflow hidden for safety */ } .pav { width: 52px; height: 52px; background: linear-gradient(135deg, var(--o), var(--o2)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; color: #fff; flex-shrink: 0 } .pinfo { flex: 1; /* Force take up remaining space */ min-width: 0; /* Allow truncation/wrapping */ } .pinfo h3 { font-size: 1rem; font-weight: 800; color: var(--w) !important; /* Force white color for visibility */ margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pinfo p { font-size: .72rem; color: var(--g); line-height: 1.2; } .qg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px } .qa { background: var(--s1); border: 1px solid var(--bdr); border-radius: 13px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all .2s } .qa:hover { border-color: var(--o) } .qa i { font-size: 1.15rem; color: var(--g) } .qa span { font-size: .57rem; font-weight: 800; color: var(--g); text-transform: uppercase; letter-spacing: .4px } .mb { background: var(--s1); border-radius: 13px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--bdr) } .ms { padding: 9px 16px 4px; font-size: .58rem; font-weight: 800; color: var(--o); text-transform: uppercase; letter-spacing: 1px } .mr { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bdr); cursor: pointer; transition: background .15s } .mr:last-child { border: none } .mr:hover { background: var(--s2) } .mi { width: 32px; height: 32px; background: var(--s2); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--g); flex-shrink: 0 } .ml { flex: 1; font-size: .82rem; font-weight: 600 } .ma { color: var(--g); font-size: .68rem } .ct-wrap { padding: 14px } .ct-hero { background: linear-gradient(135deg, var(--o), var(--o2)); border-radius: 18px; padding: 22px 18px; text-align: center; margin-bottom: 16px; position: relative; overflow: hidden } .ct-hero::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 80px; height: 80px; background: rgba(255, 255, 255, .08); border-radius: 50% } .ct-hero i { font-size: 2.1rem; margin-bottom: 8px; display: block } .ct-hero h2 { font-size: 1.2rem; font-weight: 900; margin-bottom: 4px } .ct-hero p { font-size: .7rem; opacity: .85 } .cmlist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px } .cmi { background: var(--s1); border: 1px solid var(--bdr); border-radius: 13px; padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all .2s } .cmi:hover { border-color: var(--o); transform: translateX(4px) } .cmi-ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.08rem; flex-shrink: 0 } .cmi-ic.p { background: rgba(255, 69, 0, .12); color: var(--o) } .cmi-ic.w { background: rgba(37, 211, 102, .12); color: #25D366 } .cmi-ic.e { background: rgba(25, 118, 210, .12); color: #1976D2 } .cmi-info h4 { font-size: .8rem; font-weight: 800 } .cmi-info p { font-size: .67rem; color: var(--g) } .ctf { background: var(--s1); border: 1px solid var(--bdr); border-radius: 13px; padding: 18px } .ctf h3 { font-size: .86rem; font-weight: 800; margin-bottom: 14px } .ctfbtn { width: 100%; background: var(--o); color: #fff; border: none; border-radius: 11px; padding: 13px; font-size: .86rem; font-weight: 800; box-shadow: 0 4px 14px rgba(255, 69, 0, .28) } .ab { background: var(--s1); border: 1px solid var(--bdr); border-radius: 13px; overflow: hidden; margin-top: 16px } .ab-top { background: linear-gradient(135deg, var(--s2), var(--s3)); padding: 22px; text-align: center; border-bottom: 1px solid var(--bdr) } .ab-logo { font-size: 1.75rem; font-weight: 900; letter-spacing: 3px } .ab-logo b { color: var(--o) } .ab-body { padding: 18px } .ab-body p { font-size: .77rem; color: var(--g); line-height: 1.7; margin-bottom: 12px } .sg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px } .sb { background: var(--s2); border: 1px solid var(--bdr); border-radius: 12px; padding: 14px 8px; text-align: center } .sb h3 { font-size: 1.2rem; font-weight: 900; color: var(--o) } .sb p { font-size: .57rem; color: var(--g); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px } .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -40%); background: rgba(18, 18, 18, 0.9); backdrop-filter: blur(12px); color: var(--w); padding: 14px 28px; border-radius: 16px; font-size: .82rem; font-weight: 700; opacity: 0; pointer-events: none; transition: all .35s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10001; white-space: normal; width: auto; max-width: 80%; text-align: center; border: 1px solid var(--o); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6); } .toast.show { opacity: 1; transform: translate(-50%, -50%) } .toast-auth { bottom: 24px } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; height: 60vh; } .empty i { font-size: 3.2rem; color: var(--s3); margin-bottom: 16px } .empty h3 { font-size: .92rem; font-weight: 800; margin-bottom: 6px } .empty p { font-size: .73rem; color: var(--g); margin-bottom: 18px } .eb { background: var(--o); color: #fff; border: none; border-radius: 10px; padding: 11px 24px; font-size: .8rem; font-weight: 800; box-shadow: 0 4px 14px rgba(255, 69, 0, .28) } /* ── PRODUCT DETAIL — CAROUSEL ── */ .pd-carousel { position: relative; background: var(--s2); overflow: hidden; border-bottom: 1px solid var(--bdr) } .pd-slides { display: flex; transition: transform .32s cubic-bezier(.4, 0, .2, 1); will-change: transform } .pd-slide { min-width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; padding: 18px; flex-shrink: 0 } .pd-slide img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 12px; transition: transform .3s } .pd-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; z-index: 4; transition: background .2s } .pd-carousel-btn:hover { background: var(--o) } .pd-carousel-btn.prev { left: 10px } .pd-carousel-btn.next { right: 10px } .pd-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 4 } .pd-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: all .25s } .pd-dot.on { width: 18px; border-radius: 4px; background: var(--o) } .pd-badge-sale { position: absolute; top: 12px; left: 12px; background: var(--o); color: #fff; font-size: .52rem; font-weight: 900; padding: 4px 9px; border-radius: 8px; z-index: 4; letter-spacing: .5px } .pd-wl-float { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--g); z-index: 4; transition: all .2s } .pd-wl-float.on { background: rgba(255, 69, 0, .15); border-color: var(--o); color: var(--o) } .pd-share-float { position: absolute; top: 12px; right: 54px; width: 34px; height: 34px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--w); z-index: 4; transition: all .2s } .pd-share-float:active { transform: scale(0.9); background: var(--o); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── SHARE SHEET ── */ #share-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 9000; display: none; align-items: flex-end; justify-content: center; animation: fadeIn .3s ease; } #share-sheet { width: 100%; max-width: 500px; background: var(--s1); border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--bdr); border-bottom: none; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #share-sheet-overlay.active { display: flex; } #share-sheet-overlay.active #share-sheet { transform: translateY(0); } .ss-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .ss-header h3 { font-size: 1.1rem; font-weight: 800; } .ss-close { background: var(--s2); border: none; width: 32px; height: 32px; border-radius: 50%; color: var(--g); display: flex; align-items: center; justify-content: center; } .ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ss-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: none; color: var(--w); cursor: pointer; } .ss-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--s2); border: 1px solid var(--bdr); transition: all 0.2s; } .ss-opt:active .ss-icon { transform: scale(0.9); background: var(--o); border-color: var(--o); } .ss-opt span { font-size: 0.7rem; font-weight: 600; color: var(--g); } .pd-thumbs { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; background: var(--s2); scrollbar-width: none; border-bottom: 1px solid var(--bdr) } .pd-thumbs::-webkit-scrollbar { display: none } .pd-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; border: 2px solid transparent; background: var(--s3); overflow: hidden; cursor: pointer; transition: border-color .2s } .pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px } .pd-thumb.on { border-color: var(--o) } /* ── INFO ── */ .pd-info { padding: 16px 14px; border-bottom: 1px solid var(--bdr) } .pd-brand { font-size: .58rem; font-weight: 800; color: var(--o); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px } .pd-name { font-size: 1.05rem; font-weight: 800; line-height: 1.35; margin-bottom: 10px } .pd-sr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px } .pd-sr .s { color: #FFB300; font-size: .63rem } .pd-sr span { font-size: .7rem; color: var(--g) } .pd-pr { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px } .pd-pr .p { font-size: 1.45rem; font-weight: 900 } .pd-pr .m { font-size: .8rem; color: var(--g); text-decoration: line-through } .pd-pr .d { background: rgba(0, 230, 118, .1); color: var(--green); border: 1px solid rgba(0, 230, 118, .2); font-size: .67rem; font-weight: 800; padding: 3px 8px; border-radius: 6px } .pd-save { font-size: .7rem; color: var(--green); font-weight: 700; margin-bottom: 10px } .pd-st { font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; margin-bottom: 12px } .pd-st.y { color: var(--green); background: rgba(0, 230, 118, .08); border: 1px solid rgba(0, 230, 118, .15) } .pd-st.n { color: var(--red); background: rgba(255, 61, 61, .08); border: 1px solid rgba(255, 61, 61, .15) } .pd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px } .pd-tag { background: var(--s3); border: 1px solid var(--bdr); border-radius: 6px; font-size: .6rem; font-weight: 700; padding: 4px 9px; color: var(--g) } /* ── QTY ── */ .pd-qty-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--bdr) } .pd-qty-label { font-size: .7rem; font-weight: 800; color: var(--g); text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0 } .pd-qc { display: flex; align-items: center; gap: 0; background: var(--s2); border: 1px solid var(--bdr); border-radius: 10px; overflow: hidden } .pd-qb { width: 36px; height: 36px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--w); transition: background .15s } .pd-qb:hover { background: var(--s3) } .pd-qn { min-width: 32px; text-align: center; font-size: .9rem; font-weight: 800; border: none; background: transparent; color: var(--w) } /* ── TABS ── */ .pd-tabs { display: flex; border-bottom: 1px solid var(--bdr); background: var(--s1) } .pd-tab { flex: 1; padding: 12px 0; font-size: .72rem; font-weight: 800; color: var(--g); text-align: center; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; text-transform: uppercase; letter-spacing: .5px } .pd-tab.on { color: var(--o); border-color: var(--o) } .pd-tabcontent { display: none; padding: 14px; animation: fadeUp .25s ease both } .pd-tabcontent.on { display: block } .pd-desc { font-size: .8rem; color: var(--g); line-height: 1.8 } .pd-desc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px } .pd-desc-list li { font-size: .8rem; color: var(--g); line-height: 1.7; padding: 8px 12px; background: var(--s2); border: 1px solid var(--bdr); border-radius: 8px; display: flex; align-items: flex-start; gap: 8px } .pd-desc-list li::before { content: '\2022'; color: var(--o); font-size: 1.1rem; font-weight: 900; flex-shrink: 0; line-height: 1.5 } /* ── SPECS TABLE ── */ .pd-specs { width: 100%; border-collapse: collapse } .pd-specs tr:nth-child(even) td { background: var(--s2) } .pd-specs td { padding: 9px 10px; font-size: .75rem; border-bottom: 1px solid var(--bdr) } .pd-specs td:first-child { color: var(--g); font-weight: 700; width: 42% } .pd-specs td:last-child { color: var(--w); font-weight: 600 } /* ── REVIEWS ── */ .pd-rev { display: flex; flex-direction: column; gap: 10px } .pd-rcard { background: var(--s2); border: 1px solid var(--bdr); border-radius: 12px; padding: 12px } .pd-rhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px } .pd-rname { font-size: .75rem; font-weight: 800 } .pd-rdate { font-size: .6rem; color: var(--g) } .pd-rstars { color: #FFB300; font-size: .6rem; margin-bottom: 5px } .pd-rtext { font-size: .76rem; color: var(--g); line-height: 1.6 } .pd-no-rev { text-align: center; padding: 24px 0; color: var(--g); font-size: .78rem } /* ── ACTIONS (sticky) ── */ .pd-acts { display: flex; gap: 8px; position: fixed; bottom: var(--bot); left: 0; right: 0; background: var(--s1); padding: 12px 14px; border-top: 1px solid var(--bdr); z-index: 200; box-shadow: 0 -8px 24px rgba(0, 0, 0, .6) } .pd-ac { flex: 1; height: 48px; border-radius: 12px; border: 2px solid var(--o); background: transparent; color: var(--o); font-size: .85rem; font-weight: 800; font-family: 'Outfit', sans-serif; transition: all .2s } .pd-ac:hover { background: rgba(255, 69, 0, .08) } .pd-by { flex: 1; height: 48px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--o), var(--o2)); color: #fff; font-size: .85rem; font-weight: 800; font-family: 'Outfit', sans-serif; box-shadow: 0 4px 14px rgba(255, 69, 0, .35) } .pd-by:active { transform: scale(.97) } .ow { padding: 14px } .ocard { background: var(--s1); border: 1px solid var(--bdr); border-radius: 13px; padding: 14px; margin-bottom: 12px } .oh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px } .onum { font-size: .73rem; font-weight: 800 } .sp { font-size: .6rem; font-weight: 800; padding: 4px 10px; border-radius: 20px; text-transform: capitalize } .sp.pending { background: rgba(255, 152, 0, .12); color: #FF9800 } .sp.confirmed { background: rgba(33, 150, 243, .12); color: #2196F3 } .sp.shipped { background: rgba(156, 39, 176, .12); color: #9C27B0 } .sp.delivered { background: rgba(0, 230, 118, .12); color: var(--green) } .sp.cancelled { background: rgba(255, 61, 61, .12); color: var(--red) } /* ── DESKTOP HEADER ── */ .desktop-header { display: none; align-items: center; justify-content: space-between; padding: 0 30px; height: 76px; background: rgba(8, 8, 8, .95); backdrop-filter: blur(24px); border-bottom: 1px solid var(--bdr); position: fixed; top: 0; left: 0; right: 0; z-index: 2000 } .dh-logo { font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; cursor: pointer } .dh-logo b { color: var(--o) } .dh-search { flex: 1; max-width: 640px; margin: 0 40px; height: 44px; display: flex; align-items: center; background: var(--s2); border-radius: 12px; border: 1px solid var(--bdr); overflow: hidden; transition: border .2s } .dh-search:focus-within { border-color: var(--o) } .dh-search input { flex: 1; border: none; background: transparent; padding: 0 18px; font-family: 'Outfit', sans-serif; font-size: .95rem; color: var(--w); outline: none; height: 100% } .dh-search button { background: var(--o); border: none; width: 56px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; cursor: pointer; transition: background .2s; height: 100% } .dh-search button:hover { background: var(--o2) } .dh-acts { display: flex; align-items: center; gap: 24px } .dh-act { background: transparent; border: none; color: var(--w); font-size: .85rem; font-weight: 800; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: color .2s; font-family: 'Outfit', sans-serif } .dh-act:hover { color: var(--o) } .dh-act i { font-size: 1.25rem } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } } .page.active .pw>*, .page.active .ac-wrap>*, .page.active .ct-wrap>* { animation: fadeUp .3s ease both } /* ── MOBILE FIXES ── */ @media(max-width:400px) { .fr { grid-template-columns: 1fr; } .otp-inputs { gap: 6px; } .otp-box { width: 40px; height: 48px; font-size: 1.2rem; } .popt { padding: 10px; gap: 8px; } .poi2 { width: 34px; height: 34px; } .co-wrap { padding: 10px; } .sc { padding: 12px; } .pbtn { font-size: .82rem; padding: 13px; } .auth-box { padding: 18px 14px; } .hero-body h1 { font-size: 1.2rem; } .hero-body h1 span { font-size: 1.6rem; } } @media(min-width:900px) { body { background: #000; } .topbar, .snav, .botnav, .cpill, .sbar { display: none !important; } .desktop-header { display: flex !important; } .page { max-width: 1400px; margin: 0 auto; border-left: 1px solid var(--bdr); border-right: 1px solid var(--bdr); background: var(--bg); box-shadow: 0 0 50px rgba(0, 0, 0, .6); } .page.active { display: block; padding-top: 76px; } .pw { padding-top: 24px !important; padding-bottom: 40px !important; } #page-search .pw>div:first-child { top: 76px !important; } .pd-desktop-grid { display: grid; grid-template-columns: 40% 1fr 340px; gap: 30px; align-items: start; padding: 24px } .pd-col-img { position: sticky; top: calc(var(--nav) + 20px); padding: 0; background: var(--s1); border-radius: 20px; border: 1px solid var(--bdr); overflow: hidden } .pd-col-buy { position: sticky; top: calc(var(--nav) + 20px); border: 1px solid var(--bdr); border-radius: 16px; padding: 24px; background: var(--s2) } .pd-acts { position: relative !important; bottom: auto !important; left: auto; right: auto; padding: 0 !important; border: none !important; box-shadow: none !important; flex-direction: column; background: transparent !important } .pd-qty-row { border: none; padding: 0 0 20px 0 } .pd-info { padding: 0 0 20px; border-bottom: none } .pd-tabs { background: transparent; padding-top: 20px } } /* -- MOBILE NUCLEAR HARDENING 2.0 -- */ @media(max-width:900px) { .desktop-header { display: none !important; } } @media(max-width:500px) { /* Unify all headers to solid black and kill Ghost Bar */ .topbar, .snav { height: calc(62px + env(safe-area-inset-top, 0px)) !important; padding-top: env(safe-area-inset-top, 0px) !important; background: #000 !important; border-bottom: 2px solid var(--bdr) !important; backdrop-filter: none !important; top: 0 !important; display: flex !important; align-items: center !important; } /* Force-kill all remnants of orange location/flash bars */ .header-top, .tloc, .dh-search, .dh-acts, .flash-bar, .flash-bar::before { display: none !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* Home Page Cleanup: Hide redundant profile icon */ .topbar .tacts .ic:nth-child(3) { display: none !important; } .topbar .tacts { gap: 12px !important; } /* Fix padding for all pages */ .pw { padding-top: 84px !important; padding-bottom: 110px !important; /* Extra bottom padding for all pages */ } /* Checkout Button Fix: Sit above bottom nav */ .pbtn { position: sticky !important; bottom: 80px !important; /* Lies exactly above bottom nav (64px) */ z-index: 1000 !important; width: calc(100% - 28px) !important; margin: 14px !important; } /* Input Fluidity */ input, textarea, select { font-size: 16px !important; /* Prevents auto-zoom in iOS */ padding: 14px !important; } /* 2-Column Product Grid Fix */ .ps, .pgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 14px !important; } .mc { padding: 10px !important; } .mc h4 { font-size: .75rem !important; height: 34px !important; } .mc-pr .p { font-size: .9rem !important; } .hero-body h1 { font-size: 1.1rem !important; } .hero-body h1 span { font-size: 1.55rem !important; } .pd-acts { bottom: 0 !important; padding: 10px !important; background: #000 !important; border-top: 1px solid var(--bdr); } .auth-box { padding: 20px 15px !important; } } /* ── PRIVACY POLICY ── */ .policy-wrap { padding: 14px; line-height: 1.7; color: var(--g); } .policy-section { background: var(--s1); border: 1px solid var(--bdr); border-radius: 16px; padding: 20px; margin-bottom: 20px; animation: fadeUp 0.4s ease both; } .policy-section h2 { font-size: 1.1rem; font-weight: 800; color: var(--o); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .policy-section h2 i { font-size: 1rem; opacity: 0.8; } .policy-section p { font-size: 0.82rem; margin-bottom: 12px; } .policy-section ul { padding-left: 18px; margin-bottom: 12px; } .policy-section li { font-size: 0.8rem; margin-bottom: 6px; list-style-type: disc; } .policy-header { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, var(--s1), var(--s2)); border-radius: 20px; margin-bottom: 20px; border: 1px solid var(--bdr); } .policy-header h1 { font-size: 1.6rem; font-weight: 900; color: var(--w); margin-bottom: 8px; } .policy-header p { font-size: 0.75rem; color: var(--o); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
3D FUTURE SHOPPING EXPERIENCE
Forgot Password?
0 items

₹0

Virudhunagar, TN · Tirumangalam, Madurai

📦 Categories

See All

Flash Sale Today!

Up to 70% off on premium products

Ends in
08:45:00

🔥 Trending Now

All

Top Picks For You

Delivery Address

Delivery Speed

Standard Delivery

3-5 Business Days · Free on orders ₹500+

Express Delivery (+₹50)

3 Days · Priority Processing

Payment Method

Online Pay

UPI · Cards · Net Banking · Wallets

Cash on Delivery

Pay when your order arrives

Have a Coupon?

Order Placed! 🎉

Thank you for shopping at RK BAZAAR.
We'll confirm and dispatch your order soon!

Order # BLT000001

Nothing Saved Yet

Tap ♥ on products to save them here

Privacy Policy

Reliable · Secure · Trusted

At RK BAZAAR, we are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, and safeguard your data.

Information We Collect

  • Personal information (name, email, phone number, address)
  • Payment information (processed securely through payment gateways)
  • Order history and shopping preferences
  • Device and browser information for analytics

How We Use Your Information

  • Process and fulfill your orders
  • Communicate order updates and shipping information
  • Improve our services and user experience
  • Send promotional offers (with your consent)

Data Security

We implement industry-standard security measures to protect your personal information. All payment transactions are encrypted using SSL technology. We never store complete credit card information on our servers.

© 2024 RK BAZAAR. All rights reserved.

Terms of Service

Last updated: January 1, 2026

By accessing and using RK BAZAAR, you agree to be bound by these Terms of Service. Please read them carefully before using our platform or making any purchases.

Account Registration

You must create an account to make purchases. You are responsible for:

  • Maintaining the confidentiality of your account credentials
  • All activities that occur under your account
  • Providing accurate and up-to-date personal information
  • Notifying us immediately of any unauthorized use of your account

Product Information

We strive to provide accurate product descriptions and images. However, RK BAZAAR does not warrant that:

  • Product descriptions are accurate, complete, or error-free
  • Product images exactly match the physical item
  • All products displayed are available in stock

We reserve the right to correct any errors or inaccuracies at any time without prior notice.

Pricing & Availability

  • All prices are listed in Indian Rupees (₹)
  • Prices are subject to change without prior notice
  • We reserve the right to limit product quantities
  • We may discontinue any product at any time
  • Promotional offers are valid for limited periods only

Prohibited Activities

You agree NOT to engage in any of the following:

  • Using the platform for any illegal or unauthorized purpose
  • Attempting to gain unauthorized access to our systems or data
  • Interfering with the proper functioning of the platform
  • Misusing referral codes or promotional offers
  • Posting false, misleading, or fraudulent reviews
  • Violating any applicable local, national, or international laws

Limitation of Liability

RK BAZAAR shall not be liable for any indirect, incidental, special, or consequential damages arising from:

  • Your use of or inability to use the platform
  • Purchase or use of any products obtained through the platform
  • Unauthorized access to or alteration of your data
  • Any other matter relating to the platform

Our total liability shall not exceed the amount you paid for the specific product or service that gave rise to the claim.

Governing Law

These Terms of Service shall be governed by and construed in accordance with the laws of India. Any disputes shall be subject to the exclusive jurisdiction of the courts in Tamil Nadu, India.

Contact Us

If you have questions about these Terms, please contact us at:

rkgadgets02@gmail.com

+91 82207 48235

© 2026 RK BAZAAR. All rights reserved.

🔄

Return & Refund Policy

Transparent · Hassle-free · Fair

Return Window

You can return most items within 7 days of delivery for a full refund. Items must be unused, in original packaging, and with all tags attached.

Non-Returnable Items

The following items cannot be returned:

  • Personal care and hygiene products
  • Perishable goods
  • Customized or personalized items
  • Sale or clearance items (unless defective)

Return Process

  1. Log in to your account and go to Orders
  2. Select the order and click "Request Return"
  3. Choose the reason for return and submit
  4. Pack the item securely and ship using provided label

Refund Timeline

Refunds are processed within 5–7 business days after we receive and inspect the returned item. The amount will be credited to your original payment method.

© 2026 RK BAZAAR. All rights reserved.

🏬

RK BAZAAR

Last updated: January 28, 2026

RK BAZAAR is committed to excellence in quality, sustainability, and community impact. Our operations are built on principles of transparency, fair business practices, and social responsibility.

Tax Settlement & Compliance

RK BAZAAR maintains full compliance with all applicable tax regulations and statutory requirements. We:

  • Maintain transparent financial records and timely tax filings
  • Settle applicable taxes and comply with local regulations
  • Provide accurate tax documentation to customers and authorities
  • Support government initiatives for digital economy and financial inclusion

Human-Based Repacking & Quality Assurance

Our commitment to quality extends beyond products to our packaging and handling processes:

  • Skilled professionals carefully inspect every product before repacking
  • Strict quality checks ensure only the best products reach our customers
  • Eco-conscious packaging materials used wherever possible
  • Zero-tolerance policy on damaged or counterfeit goods

Employment Generation & Community Impact

RK BAZAAR is proud to contribute to local economic development and employment:

  • Direct employment for warehouse, logistics, and customer service teams
  • Skill development programs for employees in quality control and operations
  • Fair wages and benefits aligned with industry standards
  • Support for local suppliers and small businesses in our supply chain
  • Partnerships with local communities for sustainable growth

Economic Impact & Growth

Our operations generate significant economic value across multiple sectors:

  • Contribution to local and national GDP through retail commerce
  • Tax contributions supporting public services and infrastructure
  • Stimulation of logistics, packaging, and technology sectors
  • Consumer spending boost through competitive pricing and accessibility
  • Digital economy participation and financial inclusion initiatives

RK BAZAAR by Numbers

500+
Products
10K+
Customers
4.8★
Rating

Our Commitment

RK BAZAAR is dedicated to operating with integrity, transparency, and a genuine commitment to our customers, employees, and communities. We believe that sustainable business practices and social responsibility are essential to long-term success and positive impact.

© 2026 RK BAZAAR. Building a better tomorrow, together.

How Can We Help?

We respond within 1 hour · Mon–Sat 9AM–7PM

Call Us

+91 82207 48235

WhatsApp

Chat with us instantly

Email Support

rkgadgets02@gmail.com

Send a Message

Your trusted shopping partner

RK BAZAAR is your one-stop destination for premium items and products at unbeatable prices. Based in Virudhunagar, Tamil Nadu — serving customers nationwide.

500+

Products

10K+

Customers

4.8★

Rating

const CIMG = { 'Wired Earphone': PIMG[0], 'Earbuds': PIMG[1], 'Bluetooth Neckband': PIMG[2], 'Bluetooth Headphone': PIMG[0], 'Smart Watches': PIMG[3], 'Mobile Charger': PIMG[4], 'Charging Cables': PIMG[11], 'Bluetooth Speaker': PIMG[5], 'Car Charger': PIMG[4], 'Wireless Charger': PIMG[4], 'Power Bank': PIMG[7], 'Mobile Battery': PIMG[6] }; function safeJSON(key, fallback) { try { const v = localStorage.getItem(key); return (v && v !== 'undefined' && v !== 'null') ? JSON.parse(v) : fallback; } catch (e) { localStorage.removeItem(key); return fallback; } } const S = { user: safeJSON('btU', null), token: localStorage.getItem('btT') || '', products: [], categories: [], cart: safeJSON('btC', {}), wish: new Set(safeJSON('btW', [])), filter: 'All', prev: 'home', payM: 'razorpay', curP: null, pendingEmail: '', isGuest: false, coupon: null, };