:root{--primary-h: 158;--primary-s: 75%;--primary-l: 38%;--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));--primary-hover: hsl(var(--primary-h), var(--primary-s), 30%);--primary-light: hsla(var(--primary-h), var(--primary-s), 45%, .08);--primary-border: hsla(var(--primary-h), var(--primary-s), 45%, .2);--primary-glow: hsla(var(--primary-h), var(--primary-s), 45%, .28);--primary-gradient: linear-gradient(135deg, hsl(var(--primary-h), var(--primary-s), var(--primary-l)) 0%, hsl(var(--primary-h), 85%, 26%) 100%);--accent-h: 38;--accent-s: 94%;--accent-l: 50%;--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));--accent-light: hsla(var(--accent-h), var(--accent-s), 50%, .1);--accent-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--danger: #ef4444;--danger-light: #fef2f2;--danger-border: rgba(239, 68, 68, .2);--warning: #f59e0b;--warning-light: #fffbeb;--warning-border: rgba(245, 158, 11, .25);--success: #10b981;--success-light: #ecfdf5;--info: #0ea5e9;--info-light: #f0f9ff;--bg-app: #f6f8fb;--bg-surface: #ffffff;--bg-elevated: #ffffff;--bg-subtle: #f1f5f9;--text-main: #0f172a;--text-muted: #5a6a85;--text-subtle: #8e9bb0;--border-subtle: #e5eaf2;--border-hover: #cbd5e1;--border-focus: var(--primary);--glass-bg: rgba(255, 255, 255, .82);--glass-border: rgba(226, 232, 240, .7);--glass-blur: 20px;--font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-heading: "Lexend", "Be Vietnam Pro", sans-serif;--radius-xs: 6px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 26px;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, .04);--shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, .06), 0 1px 4px -1px rgba(15, 23, 42, .04);--shadow-md: 0 8px 24px -4px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .04);--shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, .1), 0 6px 16px -4px rgba(15, 23, 42, .06);--shadow-glow: 0 0 24px var(--primary-glow);--shadow-card-hover: 0 14px 30px -4px rgba(15, 23, 42, .12), 0 4px 10px -2px rgba(15, 23, 42, .06);--topbar-height: 36px;--header-height: 68px;--bottom-nav-height: 68px;--sidebar-width: 260px;--max-content-width: 1280px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .35s cubic-bezier(.34, 1.56, .64, 1)}[data-theme=dark]{--bg-app: #080c16;--bg-surface: #101626;--bg-elevated: #182035;--bg-subtle: #141c2e;--text-main: #f8fafc;--text-muted: #9baac4;--text-subtle: #62728d;--border-subtle: #1e293b;--border-hover: #334155;--primary-light: hsla(var(--primary-h), var(--primary-s), 50%, .15);--primary-border: hsla(var(--primary-h), var(--primary-s), 50%, .3);--accent-light: hsla(var(--accent-h), var(--accent-s), 50%, .15);--danger-light: rgba(239, 68, 68, .18);--warning-light: rgba(245, 158, 11, .18);--success-light: rgba(16, 185, 129, .18);--glass-bg: rgba(16, 22, 38, .85);--glass-border: rgba(30, 41, 59, .7);--shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px -4px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 40px -6px rgba(0, 0, 0, .65);--shadow-card-hover: 0 16px 36px -4px rgba(0, 0, 0, .6), 0 0 20px var(--primary-glow)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{font-family:var(--font-sans);color:var(--text-main);background-color:var(--bg-app);scroll-behavior:smooth;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column;position:relative;background-image:radial-gradient(circle at 10% 5%,var(--primary-light) 0%,transparent 40%),radial-gradient(circle at 90% 20%,var(--accent-light) 0%,transparent 35%);background-attachment:fixed}#root{display:flex;flex-direction:column;min-height:100vh;width:100%;position:relative;z-index:1}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;letter-spacing:-.01em;color:var(--text-main);text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none}.container{width:100%;max-width:var(--max-content-width);margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width: 640px){.container{padding-left:1.5rem;padding-right:1.5rem}}.top-announcement-bar{background:linear-gradient(90deg,#065f46,#047857,#0f766e);color:#fff;font-size:12px;font-weight:600;height:var(--topbar-height);display:flex;align-items:center;justify-content:center;gap:16px;padding:0 1rem;position:relative;z-index:45;letter-spacing:.01em}.app-header{position:sticky;top:0;z-index:40;height:var(--header-height);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);display:flex;align-items:center;transition:all var(--transition-normal);box-shadow:0 4px 20px #00000005}.mobile-bottom-nav{display:none}@media (max-width: 768px){.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-height);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);display:flex;justify-content:space-around;align-items:center;z-index:50;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -8px 24px #0000000f}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-muted);padding:6px 12px;border-radius:var(--radius-sm);transition:all var(--transition-fast);position:relative;cursor:pointer;min-width:60px}.mobile-nav-item.active{color:var(--primary)}.mobile-nav-item.active .nav-icon-wrapper{background:var(--primary-light);color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 10px var(--primary-glow)}.nav-icon-wrapper{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);transition:all var(--transition-bounce)}.page-content-wrapper{padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px) + 24px)!important}}.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}@media (min-width: 640px){.products-grid{grid-template-columns:repeat(3,1fr);gap:18px}}@media (min-width: 960px){.products-grid{grid-template-columns:repeat(4,1fr);gap:22px}}@media (min-width: 1200px){.products-grid{grid-template-columns:repeat(4,1fr);gap:24px}}.modern-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);overflow:hidden;position:relative}.modern-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--border-hover)}.product-card-elevated{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;position:relative;transition:all var(--transition-normal);overflow:hidden}.product-card-elevated:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--primary-border)}.chips-scroll-container{display:flex;gap:10px;overflow-x:auto;padding:6px 2px;scrollbar-width:none;-ms-overflow-style:none}.chips-scroll-container::-webkit-scrollbar{display:none}.chip-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-full);background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-main);font-weight:600;font-size:13.5px;white-space:nowrap;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-xs)}.chip-btn:hover{background:var(--bg-subtle);border-color:var(--border-hover);transform:translateY(-1px)}.chip-btn.active{background:var(--primary-gradient);border-color:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:var(--radius-sm);padding:10px 20px;cursor:pointer;transition:all var(--transition-fast);font-size:14px;line-height:1.2;-webkit-user-select:none;user-select:none}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:0 4px 14px var(--primary-glow);border:1px solid transparent}.btn-primary:hover{transform:translateY(-1.5px);box-shadow:0 6px 18px var(--primary-glow);filter:brightness(1.06)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs)}.btn-secondary:hover{background:var(--bg-subtle);border-color:var(--border-hover)}.btn-accent{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 14px #f59e0b4d}.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}.btn-outline:hover{background:var(--primary-light)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-full);font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.01em}.badge-danger{background:var(--danger-light);color:var(--danger);border:1px solid var(--danger-border)}.badge-warning{background:var(--warning-light);color:var(--warning);border:1px solid var(--warning-border)}.badge-success{background:var(--success-light);color:var(--success);border:1px solid rgba(16,185,129,.2)}.badge-info{background:var(--info-light);color:var(--info);border:1px solid rgba(14,165,233,.2)}.badge-expiry-urgent{background:#fef2f2;color:#dc2626;border:1px solid rgba(239,68,68,.3);box-shadow:0 0 10px #ef444433;animation:pulse-danger 2s infinite}@keyframes pulse-danger{0%{box-shadow:0 0 #ef444459}70%{box-shadow:0 0 0 7px #ef444400}to{box-shadow:0 0 #ef444400}}.pulse-dot{width:7px;height:7px;border-radius:50%;background-color:currentColor;animation:pulse-dot-anim 1.5s infinite}@keyframes pulse-dot-anim{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}.storefront-section{position:relative;margin-bottom:36px}.section-header-box{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172aa6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer-content{position:fixed;z-index:105;background:var(--bg-surface);box-shadow:var(--shadow-lg);display:flex;flex-direction:column}@media (max-width: 768px){.drawer-content{inset-inline:0;bottom:0;max-height:88vh;border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);animation:slideUp .32s cubic-bezier(.16,1,.3,1)}}@media (min-width: 769px){.drawer-content{top:0;right:0;bottom:0;width:460px;animation:slideLeft .32s cubic-bezier(.16,1,.3,1)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideLeft{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{body *{visibility:hidden}.printable-area,.printable-area *{visibility:visible}.printable-area{position:absolute;left:0;top:0;width:100%}.no-print{display:none!important}}