/* ========================================================= BILI LANDING PAGE - MOBILE CSS ONLY Use with: media="screen and (max-width: 768px)" ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap');:root { --orange:#f97316;--orange-soft:#fb923c;--orange-dark:#c2410c;--black-main:#030303;--black-2:#080808;--dark-ash:#111111;--dark-ash-2:#171717;--text-main:#ffffff;--text-soft:#e5e7eb;--text-muted:#a3a3a3;--text-dark:#111827;--text-dark-muted:#4b5563;--border-light:rgba(255,255,255,0.10);--border-soft:rgba(255,255,255,0.065);--border-orange:rgba(249,115,22,0.35);--shadow-card:0 16px 44px rgba(0,0,0,0.42);--shadow-strong:0 22px 70px rgba(0,0,0,0.58);--shadow-orange:0 0 24px rgba(249,115,22,0.18);--font-heading:"Sora",sans-serif;--font-body:"Inter",sans-serif;--container:calc(100% - 22px);--transition:0.25s ease }

/* ========================================================= RESET ========================================================= */

* { margin:0;padding:0;box-sizing:border-box }html { scroll-behavior:smooth;overflow-x:hidden }body { min-height:100vh;width:100%;font-family:var(--font-body);color:var(--text-main);overflow-x:hidden;background:radial-gradient(circle at 15% 5%,rgba(249,115,22,0.10),transparent 30%),radial-gradient(circle at 90% 20%,rgba(255,255,255,0.035),transparent 30%),linear-gradient(145deg,var(--black-main),var(--black-2),var(--dark-ash));line-height:1.5 }body.light-mode { color:var(--text-dark);background:radial-gradient(circle at 15% 5%,rgba(249,115,22,0.10),transparent 30%),linear-gradient(135deg,#ffffff,#f8fafc,#fff7ed) }body::before { content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent 80%) }a { text-decoration:none;color:inherit }button,input,textarea,select { font-family:var(--font-body) }button { cursor:pointer }button:disabled { cursor:not-allowed;opacity:0.55 }img { max-width:100%;display:block }.d-none { display:none !important }

/* ========================================================= LOADER ========================================================= */

.loader { position:fixed;inset:0;z-index:99999;background:radial-gradient(circle at center,rgba(249,115,22,0.13),transparent 35%),#020202;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:0.45s ease }.loader.hide { opacity:0;visibility:hidden;pointer-events:none }.loader-ring { width:64px;height:64px;border-radius:50%;border:4px solid rgba(255,255,255,0.10);border-top-color:var(--orange);border-right-color:rgba(249,115,22,0.42);animation:spin 0.8s linear infinite }.loader h3 { font-family:var(--font-heading);font-size:20px;color:var(--orange) }.loader h3 span { color:#ffffff }@keyframes spin { to { transform:rotate(360deg) } }

/* ========================================================= HEADER + HAMBURGER ========================================================= */

.site-header { width:100%;position:fixed;top:0;left:0;transform:none;z-index:1000;margin:0;padding:10px 12px;border-radius:0 0 22px 22px;border:none;border-bottom:1px solid var(--border-light);background:rgba(3,3,3,0.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 12px 34px rgba(0,0,0,0.38);display:flex;align-items:center;justify-content:space-between;gap:10px }body.light-mode .site-header { background:rgba(255,255,255,0.94);border-bottom-color:rgba(17,24,39,0.10) }.brand { display:flex;align-items:center;gap:7px;min-width:0;flex:1 }.brand-logo { width:68px;height:36px;display:flex;align-items:center;flex-shrink:0 }.brand-logo img { max-width:100%;max-height:36px;object-fit:contain }.brand h2 { display:block;font-family:var(--font-heading);font-size:17px;font-weight:900;color:#ffffff;letter-spacing:-0.8px;white-space:nowrap }.brand h2 span { color:var(--orange) }body.light-mode .brand h2 { color:#111827 }.header-actions { display:flex;align-items:center;gap:7px;flex-shrink:0 }.cart-btn,.theme-btn,.hamburger-btn { position:relative;width:38px;height:38px;border-radius:13px;border:1px solid var(--border-light);background:rgba(255,255,255,0.06);color:#ffffff;display:grid;place-items:center;transition:var(--transition) }body.light-mode .cart-btn,body.light-mode .theme-btn,body.light-mode .hamburger-btn { background:#ffffff;color:#111827;border-color:rgba(17,24,39,0.10) }.cart-btn span { position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:999px;background:var(--orange);color:#ffffff;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid #050505 }body.light-mode .cart-btn span { border-color:#ffffff }

/* Hamburger */

.hamburger-btn { display:grid;gap:4px }.hamburger-btn span { width:18px;height:2px;border-radius:99px;background:currentColor;display:block;transition:var(--transition) }.hamburger-btn.active span:nth-child(1) { transform:translateY(6px) rotate(45deg) }.hamburger-btn.active span:nth-child(2) { opacity:0 }.hamburger-btn.active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }

/* Mobile Dropdown Menu */

.nav-links { position:fixed;top:68px;left:10px;right:10px;width:auto;padding:12px;border-radius:22px;background:rgba(5,5,5,0.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--border-light);box-shadow:var(--shadow-strong);display:grid;grid-template-columns:1fr;gap:6px;opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.98);pointer-events:none;transition:var(--transition) }.nav-links.show { opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto }body.light-mode .nav-links { background:rgba(255,255,255,0.97);border-color:rgba(17,24,39,0.10) }.nav-links a { width:100%;padding:13px 15px;border-radius:16px;color:var(--text-muted);font-weight:900;font-size:14px;background:rgba(255,255,255,0.035) }body.light-mode .nav-links a { color:#4b5563;background:rgba(17,24,39,0.035) }.nav-links a:active { color:var(--orange) }

/* ========================================================= HERO ========================================================= */

.hero { width:var(--container);margin:96px auto 0;padding:34px 0 10px;display:grid;grid-template-columns:1fr;gap:30px;position:relative }.hero-bg-orb { position:absolute;border-radius:50%;filter:blur(28px);opacity:0.45;pointer-events:none;z-index:-1 }.orb-one { width:220px;height:220px;left:-120px;top:80px;background:rgba(249,115,22,0.10);animation:floatOrb 9s ease-in-out infinite }.orb-two { width:190px;height:190px;right:-110px;bottom:80px;background:rgba(255,255,255,0.05);animation:floatOrb 11s ease-in-out infinite reverse }@keyframes floatOrb { 0%,100% { transform:translateY(0) scale(1) }50% { transform:translateY(-24px) scale(1.08) } }.hero-content { animation:fadeUp 0.8s ease both }.hero-badge { width:fit-content;max-width:100%;margin-bottom:18px;padding:9px 13px;border-radius:999px;color:#fed7aa;font-size:12.5px;font-weight:900;background:rgba(255,255,255,0.055);border:1px solid rgba(249,115,22,0.25) }body.light-mode .hero-badge { color:#9a3412;background:rgba(249,115,22,0.08) }.hero-content h1 { font-family:var(--font-heading);font-size:clamp(36px,12vw,46px);line-height:1.07;letter-spacing:-1.8px;margin-bottom:18px }.hero-content h1 span { color:var(--orange) }.hero-content p { color:var(--text-muted);font-size:16.5px;line-height:1.7;font-weight:600;margin-bottom:24px }body.light-mode .hero-content p { color:#4b5563 }.hero-actions { display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px }.primary-btn,.secondary-btn,.checkout-btn,.submit-order-btn,.details-cart-btn,.details-buy-btn,.confirm-yes-btn,.confirm-no-btn,.card-buy-btn,.card-cart-btn { position:relative;isolation:isolate;overflow:hidden;border:none;border-radius:999px;padding:14px 18px;font-weight:900;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:var(--transition);min-height:48px }.primary-btn,.checkout-btn,.submit-order-btn,.details-buy-btn,.confirm-yes-btn,.card-buy-btn { background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#ffffff;box-shadow:0 14px 32px rgba(249,115,22,0.20) }.secondary-btn,.details-cart-btn,.confirm-no-btn,.card-cart-btn { background:rgba(255,255,255,0.06);color:var(--text-main);border:1px solid var(--border-light) }body.light-mode .secondary-btn,body.light-mode .details-cart-btn,body.light-mode .confirm-no-btn,body.light-mode .card-cart-btn { background:#ffffff;color:#111827;border-color:rgba(17,24,39,0.12) }.hero-stats { display:grid;grid-template-columns:1fr;gap:12px }.hero-stats div { padding:15px 17px;border-radius:20px;background:rgba(255,255,255,0.055);border:1px solid var(--border-soft) }body.light-mode .hero-stats div { background:rgba(255,255,255,0.86);border-color:rgba(17,24,39,0.08) }.hero-stats h3 { font-family:var(--font-heading);color:#ffffff;margin-bottom:3px }.hero-stats span { color:var(--text-muted);font-size:13px;font-weight:700 }body.light-mode .hero-stats h3 { color:#111827 }

/* ========================================================= MOBILE HERO VISUAL ========================================================= */

.hero-visual { min-height:500px;display:grid;place-items:center;overflow:hidden }.hero-showcase { position:relative;width:100%;max-width:360px;height:500px;display:grid;place-items:center }.showcase-glow { position:absolute;width:285px;height:285px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,0.18),transparent 62%),radial-gradient(circle,rgba(255,255,255,0.045),transparent 45%);filter:blur(10px);animation:glowPulse 4s ease-in-out infinite }@keyframes glowPulse { 0%,100% { transform:scale(0.96);opacity:0.75 }50% { transform:scale(1.07);opacity:1 } }.showcase-center { position:relative;z-index:3;width:238px;min-height:238px;border-radius:50%;padding:22px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:10px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.08),transparent 28%),linear-gradient(145deg,#181818,#070707);border:1px solid rgba(255,255,255,0.10);box-shadow:0 26px 60px rgba(0,0,0,0.48),0 0 0 10px rgba(255,255,255,0.025),0 0 45px rgba(249,115,22,0.14);overflow:hidden;animation:centerFloat 4.5s ease-in-out infinite }body.light-mode .showcase-center { background:linear-gradient(145deg,#ffffff,#f3f4f6);border-color:rgba(17,24,39,0.08) }.showcase-center::before { content:"";position:absolute;inset:15px;border-radius:50%;border:1px dashed rgba(249,115,22,0.25);animation:slowRotate 16s linear infinite }@keyframes centerFloat { 0%,100% { transform:translateY(0) }50% { transform:translateY(-12px) } }@keyframes slowRotate { to { transform:rotate(360deg) } }.showcase-icon { position:relative;z-index:2;width:66px;height:66px;margin:0 auto;border-radius:21px;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--orange-soft));color:#111111;font-size:30px;box-shadow:0 0 30px rgba(249,115,22,0.28);transform:rotate(-6deg) }.showcase-center h3 { position:relative;z-index:2;font-family:var(--font-heading);font-size:22px;color:#ffffff }body.light-mode .showcase-center h3 { color:#111827 }.showcase-center p { position:relative;z-index:2;color:var(--text-muted);font-size:13px;line-height:1.45;font-weight:700 }body.light-mode .showcase-center p { color:#4b5563 }.showcase-mini-stats { position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;justify-content:center }.showcase-mini-stats span { padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);color:#d4d4d4;font-size:11px;font-weight:800 }body.light-mode .showcase-mini-stats span { background:#ffffff;color:#374151;border-color:rgba(17,24,39,0.08) }.showcase-mini-stats i { color:var(--orange) }.orbit-card { position:absolute;z-index:4;width:94px;min-height:68px;padding:10px 9px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,0.065),rgba(255,255,255,0.025)),rgba(8,8,8,0.86);border:1px solid rgba(255,255,255,0.10);box-shadow:0 18px 35px rgba(0,0,0,0.34);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#ffffff;font-weight:900 }body.light-mode .orbit-card { background:#ffffff;color:#111827;border-color:rgba(17,24,39,0.08) }.orbit-card i { font-size:21px;color:var(--orange) }.orbit-card span { font-size:12px }.orbit-fashion { top:6px;left:50%;transform:translateX(-50%);animation:orbitFloatOne 4s ease-in-out infinite }.orbit-shoes { top:128px;left:0;animation:orbitFloatTwo 4.4s ease-in-out infinite }.orbit-bags { top:128px;right:0;animation:orbitFloatThree 4.7s ease-in-out infinite }.orbit-gadgets { bottom:58px;left:18px;animation:orbitFloatFour 4.2s ease-in-out infinite }.orbit-beauty { bottom:58px;right:18px;animation:orbitFloatFive 4.5s ease-in-out infinite }@keyframes orbitFloatOne { 0%,100% { transform:translateX(-50%) translateY(0) }50% { transform:translateX(-50%) translateY(-10px) } }@keyframes orbitFloatTwo { 0%,100% { transform:translateY(0) }50% { transform:translateY(-10px) } }@keyframes orbitFloatThree { 0%,100% { transform:translateY(0) }50% { transform:translateY(10px) } }@keyframes orbitFloatFour { 0%,100% { transform:translateY(0) }50% { transform:translateY(10px) } }@keyframes orbitFloatFive { 0%,100% { transform:translateY(0) }50% { transform:translateY(-10px) } }

/* ========================================================= SECTIONS ========================================================= */

.section,.why-section { width:var(--container);margin:48px auto 0 }.section-header { display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:22px }.section-header.center { text-align:center }.section-tag { display:inline-block;margin-bottom:8px;color:var(--orange);font-weight:900;font-size:12px;letter-spacing:1.1px;text-transform:uppercase }.section-header h2 { font-family:var(--font-heading);font-size:30px;line-height:1.16;letter-spacing:-1.4px }.section-header p { color:var(--text-muted);font-size:15.5px;line-height:1.6;font-weight:600 }body.light-mode .section-header p { color:#4b5563 }

/* ========================================================= CATEGORIES ========================================================= */

.category-bar { display:flex;gap:10px;overflow-x:auto;padding:10px 2px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch }.category-pill { flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--border-light);background:rgba(255,255,255,0.045);color:var(--text-soft);border-radius:999px;padding:11px 15px;font-weight:900;font-size:13px;display:inline-flex;align-items:center;gap:8px;transition:var(--transition) }body.light-mode .category-pill { background:#ffffff;color:#111827;border-color:rgba(17,24,39,0.09) }.category-pill.active { background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#ffffff;border-color:transparent }

/* ========================================================= PRODUCTS - MOBILE COMPACT 2 COLUMN ========================================================= */

.products-section { padding-top:4px }

/* Search */

.search-box { width:100%;height:48px;border-radius:999px;background:rgba(255,255,255,0.055);border:1px solid var(--border-light);display:flex;align-items:center;gap:10px;padding:0 14px;margin-bottom:4px }body.light-mode .search-box { background:#ffffff;border-color:rgba(17,24,39,0.10) }.search-box i { color:var(--orange);font-size:14px }.search-box input { border:none;outline:none;background:transparent;color:var(--text-main);width:100%;font-size:14px;font-weight:700 }body.light-mode .search-box input { color:#111827 }

/* 2 column grid */

.products-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px }

/* Product Card */

.product-card { position:relative;overflow:hidden;border-radius:18px;background:radial-gradient(circle at top left,rgba(249,115,22,0.075),transparent 34%),linear-gradient(160deg,rgba(255,255,255,0.065),rgba(255,255,255,0.025)),#0b0b0b;border:1px solid var(--border-soft);box-shadow:0 12px 34px rgba(0,0,0,0.34);animation:revealCard 0.55s ease forwards }body.light-mode .product-card { background:#ffffff;border-color:rgba(17,24,39,0.08);box-shadow:0 10px 28px rgba(15,23,42,0.08) }.product-click-area { cursor:pointer }

/* Image fixed box - full image no crop */

.product-image { width:100%;height:205px;position:relative;overflow:hidden;background:radial-gradient(circle at center,rgba(249,115,22,0.10),transparent 45%),linear-gradient(145deg,#171717,#050505);border-bottom:1px solid rgba(255,255,255,0.065);display:flex;align-items:center;justify-content:center;padding:8px }body.light-mode .product-image { background:radial-gradient(circle at center,rgba(249,115,22,0.08),transparent 45%),#f8fafc;border-bottom-color:rgba(17,24,39,0.08) }

/* Main fix: full image show */

.product-image img { width:100%;height:100%;object-fit:contain;object-position:center;border-radius:12px }

/* Stock Badge */

.stock-badge { position:absolute;top:8px;left:8px;max-width:calc(100% - 16px);padding:5px 8px;border-radius:999px;font-size:9.5px;line-height:1;font-weight:900;background:rgba(0,0,0,0.78);color:#ffffff;border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }.stock-badge.available { background:rgba(34,197,94,0.16);color:#000000;border-color:rgba(34,197,94,0.45) }.stock-badge.low-stock { background:rgba(249,115,22,0.15);color:#000000;border-color:rgba(249,115,22,0.45) }.stock-badge.out-stock { background:rgba(239,68,68,0.16);color:#000000;border-color:rgba(239,68,68,0.45) }

/* Body compact */

.product-body { padding:10px 10px 8px }.product-category { color:var(--orange);font-weight:900;font-size:9.5px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }.product-title { font-size:13.2px;line-height:1.25;font-weight:900;color:#ffffff;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px }body.light-mode .product-title { color:#111827 }.product-meta { color:var(--text-muted);font-size:10.5px;font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }.product-bottom { display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:9px }.product-price { font-family:var(--font-heading);color:#ffffff;font-size:14.5px;font-weight:900;white-space:nowrap }body.light-mode .product-price { color:#111827 }.view-hint { color:var(--text-muted);font-size:9px;font-weight:900;padding:4px 6px;border-radius:999px;background:rgba(255,255,255,0.055);border:1px solid var(--border-soft);white-space:nowrap }body.light-mode .view-hint { color:#4b5563;background:#f8fafc }

/* Buttons compact */

.product-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 10px 10px }.card-cart-btn,.card-buy-btn { width:100%;min-height:34px;border-radius:11px;padding:7px 6px;font-size:10.5px;font-weight:900 }.card-cart-btn i,.card-buy-btn i { font-size:10px }

/* Empty state */

.empty-state { min-height:220px;border-radius:22px;border:1px dashed rgba(249,115,22,0.35);background:rgba(255,255,255,0.035);display:grid;place-items:center;text-align:center;padding:28px 18px }.empty-state i { font-size:44px;color:var(--orange);margin-bottom:12px }.empty-state h3 { font-family:var(--font-heading) }

/* ========================================================= WHY SECTION ========================================================= */

.why-grid { display:grid;grid-template-columns:1fr;gap:18px }.why-card { position:relative;overflow:hidden;padding:26px 20px;border-radius:26px;background:radial-gradient(circle at top left,rgba(249,115,22,0.055),transparent 34%),linear-gradient(160deg,rgba(255,255,255,0.065),rgba(255,255,255,0.025)),#0b0b0b;border:1px solid var(--border-soft);box-shadow:var(--shadow-card);text-align:center }body.light-mode .why-card { background:#ffffff;border-color:rgba(17,24,39,0.08) }.why-card i { width:66px;height:66px;margin-bottom:16px;border-radius:22px;display:inline-grid;place-items:center;font-size:28px;background:#171717;border:1px solid rgba(249,115,22,0.28);color:var(--orange) }body.light-mode .why-card i { background:#fff7ed }.why-card h3 { font-family:var(--font-heading);margin-bottom:9px }.why-card p { color:var(--text-muted);font-size:15px;line-height:1.6;font-weight:600 }body.light-mode .why-card p { color:#4b5563 }

/* ========================================================= CART DRAWER ========================================================= */

.cart-overlay { position:fixed;inset:0;z-index:1900;background:rgba(0,0,0,0.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:var(--transition) }.cart-overlay.show { opacity:1;visibility:visible }.cart-drawer { position:fixed;top:0;right:-100%;z-index:2000;width:min(390px,100%);height:100vh;background:radial-gradient(circle at top right,rgba(249,115,22,0.10),transparent 32%),radial-gradient(circle at bottom left,rgba(255,255,255,0.035),transparent 32%),#070707;border-left:1px solid rgba(255,255,255,0.10);box-shadow:-22px 0 80px rgba(0,0,0,0.62);transition:0.34s ease;display:flex;flex-direction:column }.cart-drawer.show { right:0 }body.light-mode .cart-drawer { background:radial-gradient(circle at top right,rgba(249,115,22,0.08),transparent 32%),#ffffff;border-left-color:rgba(17,24,39,0.08) }.cart-header { padding:18px 18px 16px;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center }.cart-header h3 { font-family:var(--font-heading);font-size:20px;letter-spacing:-0.6px }.cart-header button { width:40px;height:40px;border-radius:14px;border:1px solid rgba(239,68,68,0.55);background:radial-gradient(circle at center,rgba(239,68,68,0.34),rgba(127,29,29,0.20)),rgba(20,20,20,0.94);color:#ffffff;box-shadow:0 0 18px rgba(239,68,68,0.42),0 8px 22px rgba(0,0,0,0.35);display:grid;place-items:center;transition:var(--transition) }.cart-header button:active { transform:scale(0.94) }body.light-mode .cart-header button { background:radial-gradient(circle at center,rgba(239,68,68,0.20),rgba(254,226,226,0.95));color:#991b1b;border-color:rgba(239,68,68,0.35) }.cart-items { flex:1;overflow-y:auto;padding:14px }.cart-item { display:grid;grid-template-columns:68px 1fr;gap:11px;padding:11px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,0.070),rgba(255,255,255,0.030));border:1px solid var(--border-soft);margin-bottom:11px;box-shadow:0 12px 28px rgba(0,0,0,0.20) }body.light-mode .cart-item { background:#f8fafc;border-color:rgba(17,24,39,0.08);box-shadow:0 10px 22px rgba(15,23,42,0.06) }.cart-item img { width:68px;height:68px;border-radius:15px;object-fit:contain;background:radial-gradient(circle at center,rgba(249,115,22,0.08),transparent 45%),#111111;padding:4px;border:1px solid rgba(255,255,255,0.06) }body.light-mode .cart-item img { background:#ffffff;border-color:rgba(17,24,39,0.08) }.cart-item h4 { font-size:14.5px;line-height:1.28;font-weight:900;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }.cart-item p { color:var(--orange);font-size:13px;font-weight:900;margin-bottom:8px }.qty-control { display:flex;align-items:center;gap:7px }.qty-control button { width:28px;height:28px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:#1f1f1f;color:#ffffff;font-weight:900;display:grid;place-items:center }.qty-control strong { min-width:18px;text-align:center;font-size:13px }.remove-item { margin-left:auto;background:rgba(239,68,68,0.18) !important;color:#fecaca !important;border-color:rgba(239,68,68,0.26) !important }.cart-footer { padding:16px 18px 18px;border-top:1px solid var(--border-soft);background:rgba(255,255,255,0.025) }body.light-mode .cart-footer { background:#ffffff;border-top-color:rgba(17,24,39,0.08) }.cart-total { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:18px;font-weight:900 }.cart-total strong { color:var(--orange);font-family:var(--font-heading) }.checkout-btn { width:100%;min-height:48px }.empty-cart { height:100%;min-height:260px;display:grid;place-items:center;text-align:center;color:var(--text-muted) }.empty-cart i { font-size:46px;color:var(--orange);margin-bottom:12px }.empty-cart h3 { font-family:var(--font-heading);color:#ffffff }body.light-mode .empty-cart h3 { color:#111827 }

/* ========================================================= MODAL OVERLAY + COMMON MODAL ========================================================= */

.modal-overlay { position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,0.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:flex-start;justify-content:center;padding:12px;padding-top:14px;opacity:0;visibility:hidden;transition:var(--transition);overflow-y:auto }.modal-overlay.show { opacity:1;visibility:visible }.checkout-modal,.product-details-modal,.order-confirm-modal { position:relative;width:100%;max-width:430px;border-radius:26px;padding:18px 15px;background:radial-gradient(circle at top right,rgba(249,115,22,0.10),transparent 34%),radial-gradient(circle at bottom left,rgba(255,255,255,0.035),transparent 34%),#070707;border:1px solid rgba(255,255,255,0.10);box-shadow:var(--shadow-strong),0 0 28px rgba(249,115,22,0.15);transform:scale(0.96) translateY(18px);transition:var(--transition) }.modal-overlay.show .checkout-modal,.modal-overlay.show .product-details-modal,.modal-overlay.show .order-confirm-modal { transform:scale(1) translateY(0) }body.light-mode .checkout-modal,body.light-mode .product-details-modal,body.light-mode .order-confirm-modal { background:radial-gradient(circle at top right,rgba(249,115,22,0.08),transparent 34%),#ffffff;border-color:rgba(17,24,39,0.08) }

/* Premium red glow close button */

.modal-close,.product-details-modal .modal-close,.checkout-modal .modal-close,.order-confirm-modal .modal-close { position:absolute;right:12px;top:12px;z-index:30;width:40px;height:40px;border-radius:15px;border:1px solid rgba(239,68,68,0.62);background:radial-gradient(circle at center,rgba(239,68,68,0.38),rgba(127,29,29,0.20)),rgba(20,20,20,0.96);color:#ffffff;box-shadow:0 0 20px rgba(239,68,68,0.48),0 8px 24px rgba(0,0,0,0.38);display:grid;place-items:center;transition:var(--transition) }.modal-close i { color:#ffffff;font-size:17px }.modal-close:active { transform:scale(0.94) }body.light-mode .modal-close { background:radial-gradient(circle at center,rgba(239,68,68,0.20),rgba(254,226,226,0.95));color:#991b1b;border-color:rgba(239,68,68,0.40) }body.light-mode .modal-close i { color:#991b1b }

/* ========================================================= MODAL OVERLAY + COMMON MODAL - MOBILE FIT SCREEN ========================================================= */

.modal-overlay { position:fixed;inset:0;z-index:3000;background:radial-gradient(circle at top,rgba(249,115,22,0.08),transparent 32%),rgba(0,0,0,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:8px;opacity:0;visibility:hidden;transition:var(--transition);overflow:hidden }.modal-overlay.show { opacity:1;visibility:visible }

/* Common modal base */

.checkout-modal,.product-details-modal,.order-confirm-modal { position:relative;width:calc(100% - 8px);max-width:430px;max-height:calc(100vh - 16px);overflow:hidden;border-radius:24px;padding:14px;background:radial-gradient(circle at top right,rgba(249,115,22,0.12),transparent 34%),radial-gradient(circle at bottom left,rgba(255,255,255,0.035),transparent 34%),linear-gradient(145deg,#0d0d0d,#050505);border:1px solid rgba(255,255,255,0.10);box-shadow:0 24px 80px rgba(0,0,0,0.72),0 0 34px rgba(249,115,22,0.16);transform:scale(0.96) translateY(16px);transition:var(--transition) }.modal-overlay.show .checkout-modal,.modal-overlay.show .product-details-modal,.modal-overlay.show .order-confirm-modal { transform:scale(1) translateY(0) }body.light-mode .checkout-modal,body.light-mode .product-details-modal,body.light-mode .order-confirm-modal { background:radial-gradient(circle at top right,rgba(249,115,22,0.08),transparent 34%),linear-gradient(145deg,#ffffff,#f8fafc);border-color:rgba(17,24,39,0.08);box-shadow:0 24px 70px rgba(15,23,42,0.16),0 0 28px rgba(249,115,22,0.08) }

/* Premium red glow close button */

.modal-close,.product-details-modal .modal-close,.checkout-modal .modal-close,.order-confirm-modal .modal-close { position:absolute;right:10px;top:10px;z-index:50;width:38px;height:38px;border-radius:14px;border:1px solid rgba(239,68,68,0.68);background:radial-gradient(circle at center,rgba(239,68,68,0.42),rgba(127,29,29,0.24)),rgba(20,20,20,0.96);color:#ffffff;box-shadow:0 0 22px rgba(239,68,68,0.55),0 8px 24px rgba(0,0,0,0.42);display:grid;place-items:center;transition:0.22s ease }.modal-close i { color:#ffffff;font-size:16px }.modal-close:active { transform:scale(0.92) }body.light-mode .modal-close { background:radial-gradient(circle at center,rgba(239,68,68,0.20),rgba(254,226,226,0.98));color:#991b1b;border-color:rgba(239,68,68,0.45) }body.light-mode .modal-close i { color:#991b1b }

/* ========================================================= PRODUCT DETAILS MODAL - FULL IMAGE + ONE PAGE FIT ========================================================= */

.product-details-modal { padding:12px }.product-details-grid { display:grid;grid-template-columns:1fr;gap:9px }

/* Full image, no crop */

.product-details-image { width:100%;height:292px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at center,rgba(249,115,22,0.11),transparent 45%),linear-gradient(145deg,#181818,#050505);border:1px solid rgba(255,255,255,0.075);display:flex;align-items:center;justify-content:center;padding:8px;box-shadow:inset 0 0 30px rgba(255,255,255,0.025),0 14px 32px rgba(0,0,0,0.25) }body.light-mode .product-details-image { background:radial-gradient(circle at center,rgba(249,115,22,0.08),transparent 45%),#f8fafc;border-color:rgba(17,24,39,0.08);box-shadow:0 12px 28px rgba(15,23,42,0.06) }.product-details-image img { width:100%;height:100%;object-fit:contain;object-position:center;border-radius:15px }.product-details-content { padding:0 }.details-category { display:inline-flex;margin-bottom:4px;color:var(--orange);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:0.8px }.product-details-content h2 { font-family:var(--font-heading);font-size:18px;line-height:1.15;letter-spacing:-0.5px;margin-bottom:5px;padding-right:46px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }.details-price { color:#ffffff;font-family:var(--font-heading);font-size:20px;font-weight:900;margin-bottom:7px }body.light-mode .details-price { color:#111827 }.details-info-list { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px }.details-info-list div { display:flex;align-items:center;gap:5px;min-width:0;padding:7px;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,0.065),rgba(255,255,255,0.030));border:1px solid var(--border-soft) }body.light-mode .details-info-list div { background:#f8fafc;border-color:rgba(17,24,39,0.08) }.details-info-list i { color:var(--orange);font-size:10.5px;flex-shrink:0 }.details-info-list span { color:var(--text-muted);font-size:9.8px;font-weight:700;flex-shrink:0 }.details-info-list strong { color:#ffffff;font-size:9.8px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }body.light-mode .details-info-list strong { color:#111827 }.details-description { padding:8px;border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,0.055),rgba(255,255,255,0.025));border:1px solid var(--border-soft);margin-bottom:8px }body.light-mode .details-description { background:#f8fafc;border-color:rgba(17,24,39,0.08) }.details-description h4 { font-family:var(--font-heading);font-size:12px;margin-bottom:3px }.details-description p { color:var(--text-muted);font-size:11.5px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }body.light-mode .details-description p { color:#4b5563 }.details-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px }.details-cart-btn,.details-buy-btn { min-height:40px;border-radius:14px;padding:8px 9px;font-size:11.8px;font-weight:900 }

/* ========================================================= CHECKOUT / BUY NOW MODAL - PREMIUM UNIQUE FORM ========================================================= */

.checkout-modal { padding:13px;background:radial-gradient(circle at 12% 0%,rgba(249,115,22,0.18),transparent 28%),radial-gradient(circle at 100% 18%,rgba(255,255,255,0.055),transparent 28%),linear-gradient(145deg,rgba(18,18,18,0.98),rgba(3,3,3,0.98));border:1px solid rgba(249,115,22,0.16);box-shadow:0 28px 90px rgba(0,0,0,0.78),0 0 38px rgba(249,115,22,0.18),inset 0 1px 0 rgba(255,255,255,0.08) }body.light-mode .checkout-modal { background:radial-gradient(circle at 12% 0%,rgba(249,115,22,0.12),transparent 28%),linear-gradient(145deg,#ffffff,#f8fafc);border-color:rgba(249,115,22,0.16) }.checkout-top { display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:start;margin-bottom:10px;padding-right:44px }.checkout-badge { width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:var(--orange);background:radial-gradient(circle at center,rgba(249,115,22,0.22),transparent 62%),rgba(249,115,22,0.08);border:1px solid rgba(249,115,22,0.34);box-shadow:0 0 24px rgba(249,115,22,0.18),inset 0 1px 0 rgba(255,255,255,0.10) }.checkout-badge i { font-size:20px }.checkout-modal h2 { font-family:var(--font-heading);font-size:20px;line-height:1.1;letter-spacing:-0.7px;margin-bottom:4px }.checkout-modal p { color:var(--text-muted);font-size:11.8px;line-height:1.35;font-weight:650 }body.light-mode .checkout-modal p { color:#4b5563 }#checkoutForm { display:grid;gap:6px }.form-row { display:grid;grid-template-columns:1fr 1fr;gap:7px }.address-mini-row { grid-template-columns:1fr 1fr }.form-group { position:relative;margin-bottom:0 }.form-group label { display:flex;align-items:center;gap:5px;margin-bottom:4px;color:#e5e7eb;font-size:11.4px;font-weight:900 }.form-group label i { color:var(--orange);font-size:10.5px }body.light-mode .form-group label { color:#111827 }

/* Premium field shell */

.field-shell { position:relative;border-radius:14px;padding:1px;background:linear-gradient(135deg,rgba(249,115,22,0.34),rgba(255,255,255,0.08),rgba(249,115,22,0.10));transition:0.22s ease }.field-shell::before { content:"";position:absolute;inset:1px;border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,0.070),rgba(255,255,255,0.025)),#090909;z-index:0 }body.light-mode .field-shell::before { background:#f8fafc }.field-shell input,.field-shell textarea,.field-shell select { position:relative;z-index:1;width:100%;border:none;outline:none;border-radius:13px;padding:9px 10px;background:transparent;color:#ffffff;font-size:12.8px;font-weight:800;transition:0.22s ease }body.light-mode .field-shell input,body.light-mode .field-shell textarea,body.light-mode .field-shell select { color:#111827 }.field-shell input::placeholder,.field-shell textarea::placeholder { color:rgba(255,255,255,0.36) }body.light-mode .field-shell input::placeholder,body.light-mode .field-shell textarea::placeholder { color:#9ca3af }.field-shell textarea { min-height:42px;max-height:46px;resize:none }#customerAddress { min-height:45px;max-height:50px }#orderNote { min-height:36px;max-height:40px }

/* Select arrow */

.field-shell select { appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat }body.light-mode .field-shell select { background-image:linear-gradient(45deg,transparent 50%,#f97316 50%),linear-gradient(135deg,#f97316 50%,transparent 50%) }.field-shell select:disabled { opacity:0.95;cursor:not-allowed }.field-shell select option { color:#111827;background:#ffffff }

/* Focus */

.form-group:focus-within .field-shell { background:linear-gradient(135deg,rgba(249,115,22,0.78),rgba(249,115,22,0.18));box-shadow:0 0 0 3px rgba(249,115,22,0.10),0 0 22px rgba(249,115,22,0.16);transform:translateY(-1px) }

/* Validation */

.form-group.is-valid .field-shell { background:linear-gradient(135deg,rgba(34,197,94,0.65),rgba(34,197,94,0.12));box-shadow:0 0 0 3px rgba(34,197,94,0.08) }.form-group.is-invalid .field-shell { background:linear-gradient(135deg,rgba(239,68,68,0.72),rgba(239,68,68,0.14));box-shadow:0 0 0 3px rgba(239,68,68,0.10) }.form-group small { display:block;color:#f87171;font-size:9.4px;font-weight:850;margin-top:1px;min-height:9px }

/* Checkout Summary */

.checkout-summary-box { margin:2px 0 3px;padding:9px 10px;border-radius:17px;background:radial-gradient(circle at top right,rgba(249,115,22,0.12),transparent 40%),linear-gradient(145deg,rgba(255,255,255,0.060),rgba(255,255,255,0.025));border:1px solid rgba(249,115,22,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,0.055) }body.light-mode .checkout-summary-box { background:#f8fafc;border-color:rgba(249,115,22,0.16) }.checkout-summary-box div { display:flex;justify-content:space-between;gap:12px;padding:2px 0;color:var(--text-muted);font-size:11.5px;font-weight:850 }.checkout-summary-box strong { color:#ffffff;text-align:right }body.light-mode .checkout-summary-box strong { color:#111827 }.checkout-summary-box .grand-total { border-top:1px solid var(--border-soft);margin-top:4px;padding-top:7px;color:#ffffff;font-size:13.5px }body.light-mode .checkout-summary-box .grand-total { color:#111827 }.checkout-summary-box .grand-total strong { color:var(--orange);font-size:15px }

/* Animated Review Button */

.animated-confirm-btn,.submit-order-btn { position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:43px;border-radius:16px;margin-top:3px;font-size:13.5px;font-weight:950;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;color:#ffffff;background:linear-gradient(135deg,var(--orange),var(--orange-dark));box-shadow:0 14px 34px rgba(249,115,22,0.24),0 0 18px rgba(249,115,22,0.14);transition:0.24s ease }.animated-confirm-btn::before,.submit-order-btn::before { content:"";position:absolute;inset:-2px;z-index:-2;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,0.55),transparent,rgba(249,115,22,0.75),transparent);animation:btnSpinGlow 2.4s linear infinite }.animated-confirm-btn::after,.submit-order-btn::after { content:"";position:absolute;inset:2px;z-index:-1;border-radius:14px;background:linear-gradient(135deg,var(--orange),var(--orange-dark)) }.animated-confirm-btn:active,.submit-order-btn:active { transform:scale(0.98) }.animated-confirm-btn i,.submit-order-btn i { transition:0.22s ease }.animated-confirm-btn:hover i,.submit-order-btn:hover i { transform:translateX(4px) }@keyframes btnSpinGlow { to { transform:rotate(360deg) } }

/* ========================================================= ORDER CONFIRMATION MODAL - PREMIUM COMPACT ========================================================= */

.order-confirm-modal { padding:13px;background:radial-gradient(circle at 10% 0%,rgba(249,115,22,0.18),transparent 30%),radial-gradient(circle at 100% 16%,rgba(255,255,255,0.055),transparent 28%),linear-gradient(145deg,rgba(18,18,18,0.98),rgba(3,3,3,0.98));border:1px solid rgba(249,115,22,0.16);box-shadow:0 28px 90px rgba(0,0,0,0.78),0 0 38px rgba(249,115,22,0.18),inset 0 1px 0 rgba(255,255,255,0.08) }body.light-mode .order-confirm-modal { background:radial-gradient(circle at 10% 0%,rgba(249,115,22,0.12),transparent 30%),linear-gradient(145deg,#ffffff,#f8fafc);border-color:rgba(249,115,22,0.16) }.confirm-head { display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:start;margin-bottom:10px;padding-right:44px }.confirm-icon { width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:var(--orange);background:radial-gradient(circle at center,rgba(249,115,22,0.22),transparent 62%),rgba(249,115,22,0.08);border:1px solid rgba(249,115,22,0.34);box-shadow:0 0 24px rgba(249,115,22,0.18),inset 0 1px 0 rgba(255,255,255,0.10) }.confirm-icon i { font-size:20px }.order-confirm-modal h2 { font-family:var(--font-heading);font-size:20px;line-height:1.1;letter-spacing:-0.7px;margin-bottom:4px }.order-confirm-modal p { color:var(--text-muted);font-size:11.8px;line-height:1.35;font-weight:650 }body.light-mode .order-confirm-modal p { color:#4b5563 }.confirm-content { display:grid;gap:7px }.confirm-section { margin:0;padding:9px 10px;border-radius:17px;background:radial-gradient(circle at top right,rgba(249,115,22,0.09),transparent 40%),linear-gradient(145deg,rgba(255,255,255,0.060),rgba(255,255,255,0.025));border:1px solid rgba(249,115,22,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.055) }body.light-mode .confirm-section { background:#f8fafc;border-color:rgba(249,115,22,0.15) }.confirm-section h4 { display:flex;align-items:center;gap:6px;font-family:var(--font-heading);font-size:13px;margin-bottom:7px;color:#ffffff }body.light-mode .confirm-section h4 { color:#111827 }.confirm-section h4 i { color:var(--orange);font-size:12px }.confirm-items { display:grid;gap:7px;max-height:112px;overflow:hidden }.confirm-item { display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:8px;padding:8px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,0.060),rgba(255,255,255,0.025));border:1px solid rgba(255,255,255,0.07) }body.light-mode .confirm-item { background:#ffffff;border-color:rgba(17,24,39,0.08) }.confirm-item img { width:46px;height:46px;border-radius:12px;object-fit:contain;background:radial-gradient(circle at center,rgba(249,115,22,0.08),transparent 45%),#111111;padding:3px }body.light-mode .confirm-item img { background:#f8fafc }.confirm-item h5 { font-size:12.4px;line-height:1.25;margin-bottom:3px;color:#ffffff;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden }body.light-mode .confirm-item h5 { color:#111827 }.confirm-item span { color:var(--text-muted);font-size:10.8px;font-weight:700 }.confirm-item strong { color:var(--orange);font-size:12px;font-weight:900 }.confirm-info { display:grid;gap:4px }.confirm-info div,.confirm-total-row { display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--text-muted);font-size:11.5px;font-weight:850 }.confirm-info strong,.confirm-total-row strong { color:#ffffff;text-align:right;max-width:62%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden }body.light-mode .confirm-info strong,body.light-mode .confirm-total-row strong { color:#111827 }.confirm-address-row { display:grid !important;grid-template-columns:1fr;gap:4px !important }.confirm-address-row strong { max-width:100%;text-align:left !important;line-height:1.35;-webkit-line-clamp:2 !important }.confirm-total-row.grand { border-top:1px solid var(--border-soft);margin-top:4px;padding-top:7px;color:#ffffff;font-size:13.5px }body.light-mode .confirm-total-row.grand { color:#111827 }.confirm-total-row.grand strong { color:var(--orange);font-size:15px }.payment-summary-card { border-color:rgba(249,115,22,0.20) }.confirm-actions { display:grid;grid-template-columns:0.78fr 1.22fr;gap:8px;margin-top:9px }.confirm-no-btn,.confirm-yes-btn { min-height:42px;border-radius:16px;padding:9px 10px;font-size:12.3px;font-weight:950;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:0.24s ease }.confirm-no-btn { border:1px solid rgba(255,255,255,0.10);background:linear-gradient(145deg,rgba(255,255,255,0.065),rgba(255,255,255,0.025));color:#ffffff }body.light-mode .confirm-no-btn { background:#f8fafc;color:#111827;border-color:rgba(17,24,39,0.10) }.confirm-yes-btn { position:relative;isolation:isolate;overflow:hidden;border:none;color:#ffffff;background:linear-gradient(135deg,var(--orange),var(--orange-dark));box-shadow:0 14px 34px rgba(249,115,22,0.24),0 0 18px rgba(249,115,22,0.14) }.confirm-yes-btn::before { content:"";position:absolute;inset:-2px;z-index:-2;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,0.55),transparent,rgba(249,115,22,0.75),transparent);animation:btnSpinGlow 2.4s linear infinite }.confirm-yes-btn::after { content:"";position:absolute;inset:2px;z-index:-1;border-radius:14px;background:linear-gradient(135deg,var(--orange),var(--orange-dark)) }.confirm-yes-btn:active,.confirm-no-btn:active { transform:scale(0.98) }.confirm-yes-btn:hover i { transform:translateX(3px) }.confirm-yes-btn i { transition:0.22s ease }

/* ========================================================= CHECKOUT + CONFIRM SMALL PHONE ========================================================= */

@media (max-width:390px) { .checkout-modal,.order-confirm-modal { padding:10px }.checkout-top,.confirm-head { grid-template-columns:40px 1fr;gap:8px;margin-bottom:7px;padding-right:40px }.checkout-badge,.confirm-icon { width:40px;height:40px;border-radius:14px }.checkout-modal h2,.order-confirm-modal h2 { font-size:18px }.checkout-modal p,.order-confirm-modal p { font-size:10.8px }#checkoutForm { gap:4px }.form-row { gap:5px }.form-group label { font-size:10.3px;margin-bottom:2px }.field-shell input,.field-shell textarea,.field-shell select { padding:8px 8px;font-size:11.8px;border-radius:12px }.field-shell textarea { min-height:36px;max-height:40px }#customerAddress { min-height:38px;max-height:42px }#orderNote { min-height:32px;max-height:36px }.form-group small { font-size:8.8px;min-height:8px }.checkout-summary-box,.confirm-section { padding:7px 8px }.checkout-summary-box div,.confirm-info div,.confirm-total-row { font-size:10.8px }.submit-order-btn { min-height:40px;font-size:12.5px }.confirm-content { gap:5px }.confirm-section h4 { font-size:12px;margin-bottom:5px }.confirm-items { max-height:95px }.confirm-item { grid-template-columns:40px 1fr auto;gap:6px;padding:6px }.confirm-item img { width:40px;height:40px;border-radius:10px }.confirm-item h5 { font-size:11.5px }.confirm-item span { font-size:9.8px }.confirm-item strong { font-size:11px }.confirm-actions { gap:6px;margin-top:7px }.confirm-no-btn,.confirm-yes-btn { min-height:39px;border-radius:14px;font-size:11.2px;padding:8px 8px } }

/* Auto generated readonly full address */

.readonly-address-shell { background:linear-gradient(135deg,rgba(249,115,22,0.40),rgba(255,255,255,0.08),rgba(249,115,22,0.12)) }.readonly-address-shell::before { background:radial-gradient(circle at top right,rgba(249,115,22,0.10),transparent 40%),linear-gradient(145deg,rgba(255,255,255,0.075),rgba(255,255,255,0.028)),#090909 }body.light-mode .readonly-address-shell::before { background:radial-gradient(circle at top right,rgba(249,115,22,0.08),transparent 40%),#f3f4f6 }#customerAddress[readonly] { cursor:not-allowed;color:#fed7aa }body.light-mode #customerAddress[readonly] { color:#9a3412 }#customerAddress { min-height:42px;max-height:46px }

/* ========================================================= SEARCHABLE DISTRICT COMBO - FIXED CLEAN VERSION ========================================================= */

.form-group { position:relative }.form-group:has(.searchable-district-shell) { z-index:20 }.form-group:has(.searchable-district-shell.open) { z-index:9999;margin-bottom:178px }.searchable-district-shell { position:relative;z-index:5;overflow:visible !important }.searchable-district-shell input[type="text"] { position:relative;z-index:3;padding-right:44px;cursor:pointer }.searchable-district-shell::after { content:"";position:absolute;right:17px;top:50%;z-index:4;width:9px;height:9px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:translateY(-65%) rotate(45deg);pointer-events:none;transition:0.22s ease }.searchable-district-shell.open::after { transform:translateY(-35%) rotate(-135deg) }.district-clear-btn { position:absolute;right:34px;top:50%;z-index:6;width:22px;height:22px;border:none;border-radius:999px;transform:translateY(-50%);background:rgba(239,68,68,0.22);color:#fecaca;display:none;place-items:center;font-size:10px;box-shadow:0 0 12px rgba(239,68,68,0.28) }.searchable-district-shell.has-value .district-clear-btn { display:grid }.searchable-district-shell.locked .district-clear-btn { display:none }.searchable-district-shell.locked input[type="text"] { cursor:not-allowed;color:#fed7aa }body.light-mode .searchable-district-shell.locked input[type="text"] { color:#9a3412 }.district-dropdown { position:absolute;left:0;right:0;top:calc(100%+8px);z-index:99999;max-height:170px;overflow-y:auto;padding:8px;border-radius:16px;background:radial-gradient(circle at top right,rgba(249,115,22,0.12),transparent 42%),linear-gradient(145deg,#15110e,#070707);border:1px solid rgba(249,115,22,0.26);box-shadow:0 20px 45px rgba(0,0,0,0.72),0 0 26px rgba(249,115,22,0.16);display:none }.searchable-district-shell.open .district-dropdown { display:grid;gap:6px }body.light-mode .district-dropdown { background:radial-gradient(circle at top right,rgba(249,115,22,0.10),transparent 42%),#ffffff;border-color:rgba(249,115,22,0.22);box-shadow:0 18px 38px rgba(15,23,42,0.18),0 0 20px rgba(249,115,22,0.08) }.district-option { width:100%;border:none;border-radius:12px;padding:10px 11px;text-align:left;background:rgba(255,255,255,0.065);color:#ffffff;font-size:12.6px;line-height:1.2;font-weight:850;transition:0.18s ease }.district-option:hover,.district-option.active { background:rgba(249,115,22,0.18);color:#fed7aa;transform:translateX(2px) }body.light-mode .district-option { background:#f8fafc;color:#111827 }body.light-mode .district-option:hover,body.light-mode .district-option.active { background:rgba(249,115,22,0.13);color:#9a3412 }.district-empty { padding:12px 10px;color:var(--text-muted);font-size:12px;font-weight:800;text-align:center }.district-dropdown::-webkit-scrollbar { width:5px }.district-dropdown::-webkit-scrollbar-track { background:transparent }.district-dropdown::-webkit-scrollbar-thumb { background:rgba(249,115,22,0.45);border-radius:999px }.checkout-modal { overflow:visible !important }.modal-overlay { overflow-y:auto }@media (max-width:390px) { .district-dropdown { max-height:150px;padding:7px;border-radius:14px }.district-option { padding:9px 10px;font-size:11.8px }.form-group:has(.searchable-district-shell.open) { margin-bottom:158px } }

/* ========================================================= SMALL PHONE FIX ========================================================= */

@media (max-width:390px) { .modal-overlay { padding:5px }.checkout-modal,.product-details-modal,.order-confirm-modal { width:calc(100% - 4px);max-height:calc(100vh - 10px);border-radius:22px;padding:11px }.modal-close,.product-details-modal .modal-close,.checkout-modal .modal-close,.order-confirm-modal .modal-close { width:35px;height:35px;border-radius:13px;right:9px;top:9px }.product-details-image { height:260px;padding:7px }.product-details-content h2 { font-size:17px }.details-price { font-size:19px }.details-info-list { gap:5px }.details-info-list div { padding:6px }.details-description p { -webkit-line-clamp:1 }.details-cart-btn,.details-buy-btn { min-height:38px;font-size:11px }.checkout-modal h2,.order-confirm-modal h2 { font-size:19px }.checkout-modal>p,.order-confirm-modal>p { font-size:11.5px;margin-bottom:8px }#checkoutForm { gap:5px }.form-row { gap:5px }.form-group label { font-size:11px;margin-bottom:3px }.form-group input,.form-group textarea,.form-group select { padding:9px 9px;border-radius:12px;font-size:12.5px }.form-group textarea { min-height:45px;max-height:48px }#orderNote { min-height:36px;max-height:40px }.form-group small { font-size:9.8px;min-height:10px }.checkout-summary-box { padding:8px 9px }.checkout-summary-box div { font-size:11.5px;padding:2px 0 }.submit-order-btn { min-height:41px;font-size:13px }.confirm-icon { width:48px;height:48px;font-size:21px;margin-bottom:8px }.confirm-section { padding:8px }.confirm-items { max-height:104px }.confirm-item { grid-template-columns:42px 1fr auto;padding:7px;gap:7px }.confirm-item img { width:42px;height:42px }.confirm-actions { gap:7px;margin-top:8px }.confirm-no-btn,.confirm-yes-btn { min-height:39px;font-size:11.8px } }

/* ========================================================= TOAST + FOOTER ========================================================= */

.toast { position:fixed;right:12px;left:12px;bottom:16px;z-index:5000;padding:14px 16px;border-radius:17px;background:#111111;border:1px solid rgba(249,115,22,0.30);color:#ffffff;box-shadow:var(--shadow-strong);font-size:14px;font-weight:900;transform:translateY(20px);opacity:0;visibility:hidden;transition:var(--transition) }.toast.show { transform:translateY(0);opacity:1;visibility:visible }.toast.success { border-color:rgba(34,197,94,0.55) }.toast.error { border-color:rgba(239,68,68,0.65) }.footer { width:var(--container);margin:54px auto 22px;padding:26px 18px;border-radius:28px;text-align:center;background:radial-gradient(circle at top,rgba(249,115,22,0.055),transparent 34%),rgba(255,255,255,0.045);border:1px solid var(--border-soft);box-shadow:var(--shadow-card) }body.light-mode .footer { background:#ffffff;border-color:rgba(17,24,39,0.08) }.footer h2 { font-family:var(--font-heading);font-size:22px;color:#ffffff }.footer h2 span { color:var(--orange) }body.light-mode .footer h2 { color:#111827 }.footer p { color:var(--text-muted);font-size:14.5px;line-height:1.6;font-weight:600;margin-top:8px }body.light-mode .footer p { color:#4b5563 }.social-links { margin-top:18px;display:flex;justify-content:center;align-items:center;gap:12px }.social-link { width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#ffffff;border:1px solid rgba(255,122,0,0.35);background:rgba(255,255,255,0.08) }.social-link.whatsapp { color:#25d366 }.social-link.facebook { color:#1877f2 }.social-link.instagram { color:#dd2a7b }body.light-mode .social-link { background:#ffffff;border-color:rgba(17,24,39,0.12) }

/* ========================================================= ANIMATIONS + JS EXTRAS ========================================================= */

@keyframes fadeUp { from { opacity:0;transform:translateY(24px) }to { opacity:1;transform:translateY(0) } }@keyframes revealCard { from { opacity:0;transform:translateY(18px) }to { opacity:1;transform:translateY(0) } }.cart-pop { animation:cartPop 0.3s ease }@keyframes cartPop { 0% { transform:scale(1) }50% { transform:scale(1.16) rotate(8deg) }100% { transform:scale(1) } }.reveal { opacity:0;transform:translateY(24px);transition:0.6s ease }.reveal.show { opacity:1;transform:translateY(0) }.btn-ripple { position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);animation:btnRipple 0.55s ease-out;background:rgba(255,255,255,0.32) }@keyframes btnRipple { to { transform:scale(2.4);opacity:0 } }

/* ========================================================= VERY SMALL DEVICE FIX ========================================================= */

@media (max-width:390px) { .brand-logo { width:64px }.brand h2 { display:block;font-size:15px }.cart-btn,.theme-btn,.hamburger-btn { width:37px;height:37px }.hero-content h1 { font-size:34px }.hero-showcase { max-width:330px }.showcase-center { width:220px;min-height:220px }.orbit-card { width:86px;min-height:64px }.orbit-shoes { left:2px }.orbit-bags { right:2px }.orbit-gadgets { left:10px }.orbit-beauty { right:10px }.product-image { height:220px } }

/* ========================================================= THANK YOU MODAL ========================================================= */

.thank-you-modal { position:relative;width:min(460px,100%);border-radius:30px;padding:34px 28px;text-align:center;background:radial-gradient(circle at top,rgba(249,115,22,0.10),transparent 36%),#080808;border:1px solid rgba(255,255,255,0.10);box-shadow:var(--shadow-strong),var(--shadow-orange);transform:scale(0.92) translateY(20px);transition:var(--transition) }.modal-overlay.show .thank-you-modal { transform:scale(1) translateY(0) }body.light-mode .thank-you-modal { background:radial-gradient(circle at top,rgba(249,115,22,0.08),transparent 36%),#ffffff;border-color:rgba(17,24,39,0.08) }.thank-you-icon { width:82px;height:82px;border-radius:28px;margin:0 auto 18px;display:grid;place-items:center;background:rgba(34,197,94,0.13);border:1px solid rgba(34,197,94,0.35);color:#22c55e;font-size:42px }.thank-you-modal h2 { font-family:var(--font-heading);font-size:30px;letter-spacing:-1px;margin-bottom:10px }.thank-you-modal p { color:var(--text-muted);font-weight:600;line-height:1.65;margin-bottom:18px }body.light-mode .thank-you-modal p { color:#4b5563 }.thank-you-code { padding:14px;border-radius:18px;background:rgba(255,255,255,0.055);border:1px solid var(--border-soft);margin-bottom:18px;display:grid;gap:4px }body.light-mode .thank-you-code { background:#f8fafc;border-color:rgba(17,24,39,0.08) }.thank-you-code span { color:var(--text-muted);font-size:13px;font-weight:800 }.thank-you-code strong { color:var(--orange);font-family:var(--font-heading);font-size:18px }.thank-you-btn { width:100%;border:none;border-radius:999px;padding:14px 20px;background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#ffffff;font-weight:900;font-size:15px;box-shadow:0 15px 36px rgba(249,115,22,0.20);transition:var(--transition) }.thank-you-btn:hover { transform:translateY(-3px);box-shadow:0 22px 52px rgba(249,115,22,0.26) }