* { 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; }
3-5 Business Days · Free on orders ₹500+
3 Days · Priority Processing
UPI · Cards · Net Banking · Wallets
Pay when your order arrives
Thank you for shopping at RK BAZAAR.
We'll confirm and dispatch your order soon!
Tap ♥ on products to save them here
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.
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.
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.
You must create an account to make purchases. You are responsible for:
We strive to provide accurate product descriptions and images. However, RK BAZAAR does not warrant that:
We reserve the right to correct any errors or inaccuracies at any time without prior notice.
You agree NOT to engage in any of the following:
RK BAZAAR shall not be liable for any indirect, incidental, special, or consequential damages arising from:
Our total liability shall not exceed the amount you paid for the specific product or service that gave rise to the claim.
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.
If you have questions about these Terms, please contact us at:
rkgadgets02@gmail.com
+91 82207 48235
© 2026 RK BAZAAR. All rights reserved.
Transparent · Hassle-free · Fair
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.
The following items cannot be returned:
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.
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.
RK BAZAAR maintains full compliance with all applicable tax regulations and statutory requirements. We:
Our commitment to quality extends beyond products to our packaging and handling processes:
RK BAZAAR is proud to contribute to local economic development and employment:
Our operations generate significant economic value across multiple sectors:
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.
We respond within 1 hour · Mon–Sat 9AM–7PM
+91 82207 48235
Chat with us instantly
rkgadgets02@gmail.com
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.
Products
Customers
Rating