@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";.sidebar{width:280px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);height:calc(100vh - 80px);position:fixed;left:0;top:80px;padding:24px 16px;box-sizing:border-box;overflow-y:auto;z-index:999;transition:var(--transition-smooth)}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#4c707333;border-radius:10px}.sidebar-item{margin-bottom:8px}.sidebar-title{display:flex;align-items:center;padding:12px 16px;font-size:15px;font-weight:600;color:var(--text-main);cursor:pointer;border-radius:var(--radius-md);transition:var(--transition-smooth)}.sidebar-title:hover{background:#4c70730d;color:var(--primary-color)}.sidebar-title .arrow{margin-left:auto;font-size:10px;opacity:.5;transition:var(--transition-smooth)}.sidebar-title .arrow.open{transform:rotate(180deg)}.sidebar-submenu{margin-top:4px;padding-left:12px;display:flex;flex-direction:column;gap:4px}.sidebar-submenu .sidebar-item{margin-bottom:0}.sidebar-submenu .sidebar-title{padding:8px 16px;font-size:14px;font-weight:400;color:var(--text-muted)}.sidebar-submenu .sidebar-title:hover{background:#4c707314;color:var(--primary-color)}@media (max-width: 768px){.sidebar{width:100%;max-width:300px;box-shadow:20px 0 60px #0003}}.banner-left{display:flex;align-items:center}.banner-center{position:absolute;left:50%;transform:translate(-50%);cursor:pointer;text-align:center}.banner-right{display:flex;align-items:center;gap:16px}.home-button{background:none;border:none;color:var(--primary-color);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:var(--transition-smooth)}.home-button:hover{background:#4c70730d;transform:scale(1.1)}@media (min-width: 769px){.menu-button{display:none}}@media (max-width: 768px){.banner{padding:0 16px}.banner-center h1{font-size:18px;letter-spacing:1px}.banner-center p{display:none}}.main-page{max-width:1200px;width:100%;margin:0 auto}.hero-section{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:48px;box-shadow:var(--glass-shadow)}.slider{position:relative;width:100%;height:480px;background-color:#eee}.slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);cursor:pointer}.slide.active{opacity:1}.slide-overlay{position:absolute;bottom:0;left:0;width:100%;padding:60px 40px;background:linear-gradient(transparent,#000000b3);color:#fff;box-sizing:border-box;text-align:left}.slide-tag{display:inline-block;padding:4px 12px;background:var(--accent-color);color:#000;font-weight:700;font-size:12px;border-radius:4px;margin-bottom:12px;text-transform:uppercase}.slide h3{margin:0 0 12px;font-size:32px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.slide-action{font-size:14px;opacity:.8;display:flex;align-items:center;gap:8px}.slide-action:after{content:"→";transition:var(--transition-smooth)}.slide:hover .slide-action:after{transform:translate(8px)}.info-section{padding:0 0 60px}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:32px}.section-header .icon-wrapper{background:var(--primary-color);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}.section-header h2{margin:0;font-size:24px;color:var(--primary-color)}.precaution-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:48px}.precaution-card{padding:24px;border-radius:var(--radius-md);display:flex;align-items:flex-start;gap:16px;transition:var(--transition-smooth);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}.precaution-card:hover{transform:translateY(-4px);background:#ffffffe6}.p-icon{color:var(--primary-color);background:#4c70731a;padding:10px;border-radius:12px;flex-shrink:0}.precaution-card p{margin:0;font-size:15px;line-height:1.6;color:var(--text-main);font-weight:500}.share-section{text-align:center;padding:40px;background:var(--primary-color);border-radius:var(--radius-lg);color:#fff}.share-section p{margin:0 0 24px;font-size:18px;font-weight:600}.social-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.social-btn{display:flex;align-items:center;gap:12px;padding:12px 24px;border-radius:100px;text-decoration:none;font-weight:600;transition:var(--transition-smooth)}.social-btn.line{background:#00b900;color:#fff}.social-btn.facebook{background:#1877f2;color:#fff}.social-btn:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0003;filter:brightness(1.1)}@media (max-width: 768px){.slider{height:300px}.slide h3{font-size:24px}.slide-overlay{padding:30px 20px}.hero-section{margin-bottom:32px}.precaution-grid{grid-template-columns:1fr}.social-btn{width:100%;justify-content:center}}@font-face{font-family:OpenHuninn;src:url(https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@master/font/jf-openhuninn-1.1.ttf) format("truetype");font-weight:400;font-style:normal}:root{--primary-color: #4C7073;--primary-light: #6d9396;--accent-color: #ffd700;--text-main: #1a1c1d;--text-muted: #5f6368;--bg-app: #f8fafb;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .4);--glass-blur: blur(12px);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .07);--radius-lg: 20px;--radius-md: 12px;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1)}body{margin:0;padding:0;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased}.app{display:flex;background:url(../background.png) no-repeat center center/cover fixed;min-height:100vh;padding-top:80px}.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.banner{position:fixed;top:0;left:0;width:100%;height:80px;background:#fffc;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 12px #0000000d;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:0 32px;box-sizing:border-box}.banner-left .menu-button{background:var(--primary-color);color:#fff;border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 12px #4c707333}.banner-left .menu-button:hover{transform:scale(1.05);background:var(--primary-light)}.banner-center{text-align:center}.banner-center h1{margin:0;font-size:24px;font-weight:700;letter-spacing:2px;color:var(--primary-color);text-transform:uppercase}.banner-center p{margin:0;font-size:11px;color:var(--text-muted);font-weight:400}.main-content{flex:1;padding:40px 40px 40px 0;margin-left:320px;width:100%;box-sizing:border-box}@media (max-width: 1024px){.main-content{margin-left:200px;padding-right:20px}}@media (max-width: 768px){.main-content{margin:0;padding:20px}}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;width:100%}@media (max-width: 768px){.product-grid{grid-template-columns:repeat(2,1fr);gap:16px}}.card{display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);padding:16px;border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);transition:var(--transition-smooth);cursor:pointer;overflow:hidden}.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #1f26871f;border-color:#fff9}.product-container{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background:#f0f2f5}.foreground-image{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .3s ease,filter .3s ease;filter:saturate(60%);opacity:0}.foreground-image.loaded{opacity:1}.foreground-image.loading{opacity:0}.skeleton-image{position:absolute;top:0;left:0;width:100%;height:100%;background:#eef1f3;z-index:1}.shimmer{position:relative;overflow:hidden}.shimmer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer 2s infinite}@keyframes shimmer{to{transform:translate(100%)}}.card:hover .foreground-image.loaded{filter:saturate(100%);transform:scale(1.05)}.foreground-image.selected{filter:saturate(100%)}.card-info{margin-top:16px;padding:0 4px}.card-info h4{margin:0 0 8px;font-family:OpenHuninn,sans-serif;font-size:16px;font-weight:600;color:var(--text-main);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.card-info p{margin:4px 0;font-size:13px;color:var(--text-muted)}.card-info .weight-tag{display:inline-block;padding:4px 10px;background:#4c70731a;color:var(--primary-color);border-radius:20px;font-weight:600;font-size:12px;margin-top:8px}@media (max-width: 768px){.card{padding:12px;border-radius:var(--radius-md)}.card-info h4{font-size:14px}}.spinner{width:40px;height:40px;border:3px solid rgba(76,112,115,.1);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin .8s cubic-bezier(.5,.1,.5,.9) infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40vh}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.staggered-item{animation:fadeInUp .6s cubic-bezier(.2,.8,.2,1) forwards;opacity:0}.skeleton-text{background:#e0e0e0;border-radius:4px}.skeleton-title{height:20px;width:70%;margin-bottom:12px}.skeleton-weight{height:24px;width:50px;border-radius:20px;margin-bottom:8px}.skeleton-desc{height:14px;width:90%}