: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: 62px;--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);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-color:var(--bg-app);-webkit-overflow-scrolling:touch}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none;z-index:0;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%);transform:translateZ(0);will-change:transform}#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:11.5px;font-weight:600;height:var(--topbar-height);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;position:relative;z-index:45;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (min-width: 640px){.top-announcement-bar{font-size:12px;gap:16px;padding:0 1rem}}.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;transform:translateZ(0);will-change:transform}@media (max-width: 640px){.app-header{height:60px;--glass-blur: 10px}}.mobile-bottom-nav{display:none}@media (max-width: 768px){.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;min-height:var(--bottom-nav-height);background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--glass-border);display:flex;justify-content:space-around;align-items:center;z-index:50;padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px #0000000d;transform:translateZ(0);will-change:transform;box-sizing:border-box}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--text-muted);padding:2px 4px;border-radius:var(--radius-sm);transition:color var(--transition-fast);position:relative;cursor:pointer;min-width:54px;flex:1;text-align:center}.mobile-nav-item.active{color:var(--primary)}.nav-icon-wrapper{display:flex;align-items:center;justify-content:center;width:34px;height:28px;border-radius:var(--radius-full);transition:background var(--transition-fast),color var(--transition-fast);position:relative}.mobile-nav-item.active .nav-icon-wrapper{background:var(--primary-light);color:var(--primary);box-shadow:0 2px 8px var(--primary-glow)}.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:10px}@media (min-width: 480px){.products-grid{gap:14px}}@media (min-width: 640px){.products-grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media (min-width: 1024px){.products-grid{grid-template-columns:repeat(4,1fr);gap:20px}}.trust-badges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}@media (min-width: 640px){.trust-badges-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}}.storage-guide-grid{display:grid;grid-template-columns:1fr;gap:10px}@media (min-width: 768px){.storage-guide-grid{grid-template-columns:repeat(3,1fr);gap:14px}}.price-mode-card{padding:12px 14px;display:flex;flex-direction:column;gap:12px;border-radius:var(--radius-lg);margin-bottom:14px}@media (min-width: 768px){.price-mode-card{flex-direction:row;align-items:center;justify-content:space-between;padding:16px 20px;margin-bottom:22px}}.price-mode-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}@media (min-width: 768px){.price-mode-controls{width:auto}}.price-segmented-pill{display:flex;background:var(--bg-surface);padding:3px;border-radius:var(--radius-full);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs);width:100%}@media (min-width: 480px){.price-segmented-pill{width:auto}}.price-segmented-pill button{flex:1;text-align:center;padding:7px 12px;font-size:12.5px;font-weight:700;border-radius:var(--radius-full);border:none;cursor:pointer;transition:all .2s;white-space:nowrap}.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;contain:content}.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:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);overflow:hidden;contain:content;content-visibility:auto;contain-intrinsic-size:1px 360px}.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:11px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;flex-shrink:0}.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-sections-container{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}@media (min-width: 640px){.storefront-sections-container{gap:28px;margin-bottom:32px}}.storefront-section{position:relative;margin-bottom:0}.section-header-box{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}@media (min-width: 640px){.section-header-box{flex-direction:row;justify-content:space-between;align-items:center;gap:14px}}.section-header-left{display:flex;align-items:flex-start;gap:10px;width:100%}@media (min-width: 640px){.section-header-left{width:auto;flex:1;min-width:0}}.section-header-icon{width:38px;height:38px;min-width:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-top:1px}@media (min-width: 640px){.section-header-icon{width:42px;height:42px;min-width:42px}}.section-header-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.section-header-title-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}.section-header-title-wrap h2{font-size:16px;font-weight:800;line-height:1.25;color:var(--text-main);margin:0}@media (min-width: 640px){.section-header-title-wrap h2{font-size:18px}}.section-header-subtitle{font-size:12px;color:var(--text-muted);margin:0;line-height:1.45}body.modal-open{overflow:hidden!important;touch-action:none!important;overscroll-behavior:none!important}.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;overscroll-behavior:contain;touch-action:none}@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;overscroll-behavior:contain;touch-action:pan-y}@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}}.product-detail-sheet{animation:modalScaleIn .25s cubic-bezier(.16,1,.3,1)}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 640px){.product-detail-sheet{position:fixed!important;bottom:0!important;left:0!important;right:0!important;max-height:90vh!important;border-radius:22px 22px 0 0!important;margin:0!important;animation:slideUp .28s cubic-bezier(.16,1,.3,1)!important}.product-detail-sheet .mobile-pull-handle{display:flex!important}.hide-on-mobile-xs{display:none}}.admin-layout-container{display:flex;gap:24px;width:100%;max-width:1380px;margin:0 auto;padding:20px 16px 60px;min-height:calc(100vh - 80px)}.admin-desktop-sidebar{width:260px;flex-shrink:0;position:sticky;top:76px;height:calc(100vh - 96px);max-height:820px;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 14px;box-shadow:var(--shadow-sm);overflow-y:auto}.admin-main-area{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}.admin-nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;transition:all var(--transition-fast);position:relative}.admin-nav-item:hover{background:var(--bg-subtle);color:var(--text-main);transform:translate(2px)}.admin-nav-item.active{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff!important;box-shadow:0 4px 14px var(--primary-glow);font-weight:700}.admin-nav-item.active .admin-nav-badge{background:#ffffff40;color:#fff;border-color:#fff6}.admin-nav-badge{margin-left:auto;font-size:10.5px;padding:2px 7px;border-radius:var(--radius-full);font-weight:700;flex-shrink:0;border:1px solid transparent}.admin-mobile-topbar{display:none;position:sticky;top:56px;z-index:85;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;padding:6px 10px;background:var(--bg-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:0 4px 14px #0000000f}.admin-mobile-topbar-actions{display:flex;align-items:center;gap:6px;min-width:0}.admin-mobile-menu-trigger{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 10px;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;border:none;border-radius:var(--radius-xs);font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px var(--primary-glow);transition:transform var(--transition-fast);white-space:nowrap;flex-shrink:0;line-height:1}.admin-mobile-menu-trigger svg{flex-shrink:0}.admin-mobile-menu-trigger:active{transform:scale(.97)}.admin-mobile-order-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 10px;background:var(--bg-subtle);color:var(--text-main);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;line-height:1;transition:all var(--transition-fast)}.admin-mobile-order-pill svg{flex-shrink:0}.admin-mobile-order-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700;box-shadow:0 2px 8px var(--primary-glow)}.admin-mobile-order-pill .pill-badge{font-size:9.5px;padding:1px 5px;background:#dc2626;color:#fff;border-radius:10px;font-weight:800;line-height:1.1;margin-left:2px;flex-shrink:0}.admin-mobile-order-pill.active .pill-badge{background:#ffffff4d}.admin-back-store-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 9px;border-radius:var(--radius-xs);font-size:11.5px;font-weight:600;background:var(--bg-subtle);color:var(--text-muted);border:1px solid var(--border-subtle);cursor:pointer;white-space:nowrap;flex-shrink:0;line-height:1;transition:background var(--transition-fast)}.admin-back-store-btn svg{flex-shrink:0}.admin-mobile-quicktabs{display:none;gap:6px;overflow-x:auto;padding:2px 2px 6px;margin-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.admin-mobile-quicktabs::-webkit-scrollbar{display:none}.admin-quicktab-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;white-space:nowrap;background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-subtle);cursor:pointer;flex-shrink:0;line-height:1;transition:all var(--transition-fast)}.admin-quicktab-btn svg{flex-shrink:0}.admin-quicktab-btn.active{background:var(--primary);color:#fff!important;border-color:var(--primary);font-weight:700;box-shadow:0 2px 8px var(--primary-glow)}.admin-mobile-drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s ease}.admin-mobile-drawer-backdrop.open{opacity:1;pointer-events:auto}.admin-mobile-drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:var(--bg-surface);z-index:9999;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);transform:translate(-100%);transition:transform .28s cubic-bezier(.16,1,.3,1);padding:18px 16px;overflow-y:auto}.admin-mobile-drawer.open{transform:translate(0)}.revenue-hero-card{background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-subtle) 100%);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.revenue-hero-card:before{content:"";position:absolute;top:-50px;right:-50px;width:140px;height:140px;background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%);pointer-events:none}@media (max-width: 899px){.admin-desktop-sidebar{display:none!important}.admin-mobile-topbar,.admin-mobile-quicktabs{display:flex!important}.admin-layout-container{padding:8px 12px 90px!important;gap:0}.revenue-hero-card,.modern-card{padding:14px!important}}@media (max-width: 480px){.admin-filter-stack-mobile{flex-direction:column!important;align-items:stretch!important}.admin-filter-stack-mobile>*{width:100%!important}.admin-order-card-mobile{padding:12px!important}}