:root{--primary:#ff1178;--primary-dark:#cc005e;--primary-light:#ff4da0;--primary-glow:#ff117826;--base:#111;--bg:#f5f5f5;--surface:#fff;--surface-2:#fafafa;--border:#e8e8e8;--support:#444;--support-light:#eaeaea;--text-primary:#111;--text-secondary:#555;--text-muted:#888;--font-sans:"Inter", "General Sans", system-ui, sans-serif;--radius-sm:6px;--radius:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--shadow-sm:0 1px 4px #0000000f;--shadow:0 4px 16px #00000014;--shadow-lg:0 8px 32px #0000001f;--shadow-primary:0 4px 24px #ff117840;--transition:.2s cubic-bezier(.4, 0, .2, 1);--transition-slow:.35s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg:#0d0d0d;--surface:#1a1a1a;--surface-2:#222;--border:#2a2a2a;--support:#aaa;--support-light:#2a2a2a;--text-primary:#f0f0f0;--text-secondary:#aaa;--text-muted:#666;--shadow-sm:0 1px 4px #0000004d;--shadow:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--text-primary);transition:background-color var(--transition-slow), color var(--transition-slow);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit}.h1{letter-spacing:-.03em;font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.15}.h2{letter-spacing:-.02em;font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;line-height:1.2}.h3{letter-spacing:-.015em;font-size:clamp(1.2rem,2.5vw,1.5rem);font-weight:600;line-height:1.3}.h4{font-size:1.125rem;font-weight:600;line-height:1.4}.body-lg{font-size:1.0625rem;line-height:1.7}.body{font-size:.9375rem;line-height:1.6}.body-sm{font-size:.875rem;line-height:1.5}.caption{letter-spacing:.02em;font-size:.75rem;line-height:1.4}.label{letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:600}.btn{border-radius:var(--radius-full);transition:all var(--transition);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:.9375rem;font-weight:600;line-height:1;display:inline-flex;position:relative;overflow:hidden}.btn:disabled{opacity:.5;pointer-events:none}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-primary)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 28px #ff117866}.btn-primary:active{transform:translateY(0)}.btn-outline{color:var(--text-primary);border:1.5px solid var(--border);background:0 0}.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-glow)}.btn-ghost{color:var(--text-secondary);background:0 0;padding:8px 16px}.btn-ghost:hover{background:var(--support-light);color:var(--text-primary)}.btn-sm{padding:8px 16px;font-size:.875rem}.btn-lg{padding:16px 32px;font-size:1rem}.btn-icon{border-radius:var(--radius);aspect-ratio:1;padding:10px}.card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition), transform var(--transition)}.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.card-flat{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border)}.input{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);outline:none;padding:12px 16px;font-size:.9375rem}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.input::placeholder{color:var(--text-muted)}.input-error{border-color:#ef4444}.badge{border-radius:var(--radius-full);align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-primary{background:var(--primary-glow);color:var(--primary)}.badge-success{color:#16a34a;background:#dcfce7}.badge-warning{color:#ca8a04;background:#fef9c3}.badge-danger{color:#dc2626;background:#fee2e2}.badge-neutral{background:var(--support-light);color:var(--support)}[data-theme=dark] .badge-success{color:#4ade80;background:#16a34a26}[data-theme=dark] .badge-warning{color:#facc15;background:#ca8a0426}[data-theme=dark] .badge-danger{color:#f87171;background:#dc262626}.container{max-width:1280px;margin:0 auto;padding:0 20px}@media (min-width:768px){.container{padding:0 32px}}@media (min-width:1280px){.container{padding:0 40px}}.section{padding:64px 0}@media (max-width:768px){.section{padding:40px 0}}.grid-products{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;display:grid}@media (max-width:640px){.grid-products{grid-template-columns:repeat(1,1fr);gap:12px}}.grid-categories{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;display:grid}@media (max-width:640px){.grid-categories{grid-template-columns:repeat(2,1fr);gap:10px}}.product-card-title{text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;font-size:.95rem;font-weight:600;overflow:hidden}@media (max-width:640px){.product-card-title{font-size:.85rem}}.skeleton{background:linear-gradient(90deg, var(--support-light) 25%, var(--border) 50%, var(--support-light) 75%);border-radius:var(--radius);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.divider{background:var(--border);height:1px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--support-light);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--support)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fade-in{animation:.3s forwards fadeIn}.animate-slide-right{animation:.3s forwards slideInRight}.animate-scale-in{animation:.2s forwards scaleIn}.gradient-primary{background:linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%)}.text-gradient{background:linear-gradient(135deg, var(--primary), #7c3aed);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.stars{color:#f59e0b;gap:2px;display:flex}.aspect-product{aspect-ratio:4/3}.aspect-square{aspect-ratio:1}.aspect-banner{aspect-ratio:16/6}.toast-container{z-index:9999!important}.sidebar-link{border-radius:var(--radius);color:var(--text-secondary);transition:all var(--transition);align-items:center;gap:12px;padding:10px 14px;font-weight:500;display:flex}.sidebar-link:hover,.sidebar-link.active{background:var(--primary-glow);color:var(--primary)}.sidebar-link.active{font-weight:600}.status-pending,.status-processing,.status-dispatched,.status-delivered,.status-cancelled{border-radius:var(--radius-full);align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.status-pending{color:#ca8a04;background:#fef9c3}.status-processing{background:var(--primary-glow);color:var(--primary)}.status-dispatched{color:#2563eb;background:#eff6ff}.status-delivered{color:#16a34a;background:#dcfce7}.status-cancelled{color:#dc2626;background:#fee2e2}[data-theme=dark] .status-pending{color:#facc15;background:#ca8a0426}[data-theme=dark] .status-dispatched{color:#60a5fa;background:#2563eb26}[data-theme=dark] .status-delivered{color:#4ade80;background:#16a34a26}[data-theme=dark] .status-cancelled{color:#f87171;background:#dc262626}.nav-desktop{align-items:center;gap:4px;display:flex}.nav-mobile-btn{display:none}@media (max-width:767px){.nav-desktop{display:none}.nav-mobile-btn{display:flex!important}.nav-icon-hide-mobile{display:none!important}}.checkout-grid{grid-template-columns:1fr 340px;align-items:start;gap:32px;display:grid}.checkout-card{padding:28px}.summary-card{padding:24px}@media (max-width:576px){.checkout-card,.summary-card{padding:16px}}.checkout-address-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (max-width:1024px){.checkout-grid{grid-template-columns:1fr;gap:24px}}@media (max-width:767px){.checkout-address-grid{grid-template-columns:1fr;gap:12px}.checkout-address-grid>div[style*=span\ 2]{grid-column:span 1}}.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:48px;display:grid}@media (max-width:767px){.contact-grid{grid-template-columns:1fr;gap:32px}}.form-grid-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (max-width:480px){.form-grid-2{grid-template-columns:1fr}}.cart-layout{grid-template-columns:1fr 340px;align-items:start;gap:32px;display:grid}@media (max-width:1024px){.cart-layout{grid-template-columns:1fr;gap:24px}}.admin-sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:220px;height:100vh;padding:24px 12px;display:flex;overflow-y:auto}.admin-sidebar-desktop{position:sticky;top:0}.admin-sidebar-mobile{width:100%;height:100%}.admin-topbar{display:none}@media (max-width:767px){.admin-sidebar-desktop{display:none}.admin-topbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:50;align-items:center;gap:12px;padding:12px 16px;display:flex;position:sticky;top:0}}@keyframes spin{to{transform:rotate(360deg)}}.profile-address-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (max-width:480px){.profile-address-grid{grid-template-columns:1fr}}.contact-action-group{gap:12px;display:flex}@media (max-width:480px){.contact-action-group{flex-direction:column}}@keyframes brandScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.hero-banner{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;min-height:260px;padding:32px 40px 32px 0}@media (max-width:1024px){.hero-banner{min-height:240px;padding:24px 24px 24px 0}}@media (max-width:767px){.hero-banner{margin-top:0;padding:0;min-height:200px!important}}