@font-face{font-family:'Segoe UI';src:url('/assets/fonts/segoeui.woff2') format('woff2'),url('/assets/fonts/segoeui.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}:root{--brand-50:#FFF5E6;--brand-100:#FFE7CC;--brand-500:#F28C1A;--brand-600:#D97809;--gray-900:#1F1F23;--gray-700:#3D3F45;--gray-500:#6F737B;--gray-300:#C5C9CF;--gray-100:#F3F5F7;--border:#E4E7EB;--radius:8px;--transition:.18s ease;font-family:'Segoe UI',sans-serif} *{box-sizing:border-box} body{margin:0;padding-bottom:0;color:var(--gray-900);background:#fff} img{max-width:100%;display:block} .container{width:100%;max-width:1280px;margin:0 auto;padding:10px 0} .topbar{background:#111;color:#fff;font-size:13px} .topbar-inner{display:flex;justify-content:space-between;align-items:center;min-height:36px} .topbar a{color:#fff;text-decoration:none;margin-left:12px} .navbar{background:linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(255,245,230,0.85) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(228,231,235,0.6);box-shadow:0 2px 16px -4px rgba(0,0,0,0.08);position:sticky;top:0;z-index:500;transition:all .3s ease} .navbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--brand-500) 20%,var(--brand-600) 50%,var(--brand-500) 80%,transparent 100%);opacity:0.5} .nav-inner{display:flex;align-items:center;gap:24px;min-height:70px} .nav-inner .search .m-search-ico{display:none} .login-btn .login-ico{display:none} .navbar-logo{display:none;background:linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(255,245,230,0.85) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(228,231,235,0.6);box-shadow:0 2px 16px -4px rgba(0,0,0,0.08);position:sticky;top:0;z-index:500} .bottom-nav{display:none} @media (max-width:640px){.container{padding:10px 16px} .topbar{display:none !important} body{padding-bottom:68px} .navbar{background:linear-gradient(135deg,rgba(255,255,255,0.97) 0%,rgba(255,245,230,0.9) 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 12px -3px rgba(0,0,0,0.08);border:0} .nav-inner{display:grid;grid-template-columns:1fr;gap:10px;padding:12px 16px 0 12px;min-height:auto} .nav-inner .logo{justify-self:center;margin:0;display:flex} .nav-inner .logo img{height:36px} .nav-inner .search{position:relative;display:flex;align-items:center;gap:0;width:100%;height:44px;background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;padding:0 12px;box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:all .25s} .nav-inner .search:focus-within{border-color:#fb923c;box-shadow:0 0 0 3px rgba(251,146,60,0.1)} .nav-inner .search-icon-btn{color:#9ca3af;padding:4px;margin-right:4px} .nav-inner .search-icon-btn svg{width:18px;height:18px} .nav-inner .search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14px;padding:0 8px;height:100%} .nav-inner .ai-bot-toggle{padding:6px;margin-left:0} .nav-inner .ai-bot-toggle .bot-icon{width:20px;height:20px} .nav-inner .search-suggest{left:0;right:0;width:calc(100vw - 32px);margin-top:6px;border-radius:12px;max-height:70vh} .nav-inner .nav-actions{display:flex !important;visibility:hidden;pointer-events:none;position:absolute;right:0;top:0} .nav-inner .nav-actions #userMenu{visibility:visible !important;pointer-events:auto !important} .nav-inner .logo{display:none} .navbar-logo{display:block;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:static;box-shadow:none;border-bottom:0;padding-top:.6rem} .nav-inner .logo-mobile{display:block} #wishlistBtn,#notifBtn,#loginBtn{display:none !important} .navbar #userMenu{display:none !important} .nav-actions .cart-indicator,.nav-actions .compare-indicator{display:none !important} #bottomCategoryBtn{display:none !important} .navbar #userMenu .login-btn.logged-in{width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(228,231,235,0.6);box-shadow:0 2px 12px -3px rgba(0,0,0,0.12)} .navbar #userMenu .login-btn.logged-in .login-text{display:none} .navbar #userMenu .login-btn.logged-in .login-ico{display:inline;font-size:20px;line-height:1} .navbar #userMenu .user-dropdown{position:fixed !important;top:60px !important;right:16px !important;left:auto !important;min-width:200px;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(228,231,235,0.6);box-shadow:0 8px 24px -8px rgba(0,0,0,0.2);z-index:1002 !important;border-radius:12px;padding:8px 0} .navbar #userMenu .user-dropdown:not([hidden]){display:block !important;visibility:visible !important;opacity:1 !important} .navbar .container:last-child{display:flex !important;align-items:center !important;padding:4px 16px 6px !important;gap:5px;overflow:visible} .mega-cats-wrapper{position:relative;flex:1;overflow:hidden;min-height:34px;display:flex} .mega-cats-fade{position:absolute;top:0;right:0;bottom:0;width:80px;background:linear-gradient(to left,rgba(255,245,230,1) 0%,rgba(255,245,230,0.98) 15%,rgba(255,245,230,0.85) 35%,transparent 100%);pointer-events:none;z-index:5;transition:opacity 0.3s ease} .mega-cats.container{display:flex !important;gap:12px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;padding:0 !important;margin:0 !important;position:relative;z-index:1} .mega-cats.container::-webkit-scrollbar{display:none} .mega-cats a{font-size:13px;padding:6px 10px;white-space:nowrap;flex-shrink:0;position:relative} .mega-cats a.active{background:var(--brand-600);color:#fff;font-weight:600;border-radius:6px} .mm-wp{flex-shrink:0} .mm2-trigger{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--gray-100);color:var(--gray-700);text-decoration:none;border-radius:6px;font-size:13px;white-space:nowrap} .mm2-trigger .label-cat{display:none} .mega-more-btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 14px;font-size:18px;cursor:pointer} .mega-cats-more.active>.mega-more-btn{background:var(--brand-600);color:#fff;border-color:var(--brand-600)} .mega-more-dropdown{top:calc(100%+10px);right:0;min-width:85vw;max-width:90vw;border-radius:16px} .mega-more-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} .mobile-user-sheet{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;pointer-events:none} .mobile-user-sheet.active{pointer-events:auto} .mobile-user-sheet-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);opacity:0;transition:opacity .3s ease} .mobile-user-sheet.active .mobile-user-sheet-backdrop{opacity:1} .mobile-user-sheet-content{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.15);transform:translateY(100%);transition:transform .3s cubic-bezier(0.4,0.0,0.2,1);padding-bottom:calc(68px+env(safe-area-inset-bottom))} .mobile-user-sheet.active .mobile-user-sheet-content{transform:translateY(0)} .mobile-user-sheet-header{padding:16px 20px 12px;border-bottom:1px solid #e5e7eb} .mobile-user-sheet-handle{width:40px;height:4px;background:#d1d5db;border-radius:2px;margin:0 auto 16px} .mobile-user-info{display:flex;align-items:center;gap:12px} .mobile-user-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FFE7CC,#FFD9A8);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0} .mobile-user-details{flex:1;min-width:0} .mobile-user-name{font-size:16px;font-weight:600;color:#111827;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mobile-user-email{font-size:13px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mobile-user-sheet-body{padding:8px 0} .mobile-user-sheet-item{display:flex;align-items:center;gap:16px;padding:14px 20px;text-decoration:none;color:#374151;font-size:15px;transition:background .2s;border:none;background:none;width:100%;text-align:left;cursor:pointer} .mobile-user-sheet-item:active{background:#f3f4f6} .mobile-user-sheet-icon{font-size:20px;width:24px;text-align:center;flex-shrink:0} .mobile-user-sheet-label{flex:1;font-weight:500} .mobile-user-sheet-divider{height:1px;background:#e5e7eb;margin:8px 0}} .logo img{display:block} .search{flex:1;position:relative;display:flex;align-items:center;gap:0;background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;padding:0 16px;height:38px;transition:all 0.3s ease} .search:focus-within{border-color:#fb923c;box-shadow:0 0 0 3px rgba(251,146,60,0.1)} .search input{flex:1;border:none;outline:none;background:transparent;font-size:15px;padding:0 12px;height:100%;color:#1f2937} .search input::placeholder{color:#9ca3af} .search-icon-btn{background:transparent;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6b7280;transition:color 0.2s ease;flex-shrink:0} .search-icon-btn:hover{color:#fb923c} .search-suggest{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:8px 0;box-shadow:0 8px 20px rgba(0,0,0,.08);margin-top:4px;font-size:14px;max-height:260px;overflow:auto} .search-suggest div{padding:6px 12px;cursor:pointer} .search-suggest div:hover{background:var(--gray-100)} .nav-actions{display:flex;gap:10px;align-items:center} .icon-btn,.login-btn{background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(249,250,251,0.9));border:1px solid rgba(228,231,235,0.6);padding:8px 12px;border-radius:var(--radius);cursor:pointer;font-size:14px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);height:38px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.06),0 0 0 1px rgba(255,255,255,0.5) inset;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .icon-btn:hover,.login-btn:hover{background:linear-gradient(135deg,rgba(249,250,251,1),rgba(243,244,246,0.95));border-color:rgba(209,213,219,0.8);box-shadow:0 2px 8px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.6) inset;transform:translateY(-1px)} .cart-indicator,.compare-indicator{position:relative} .badge{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:999px;position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(239,68,68,0.4),0 0 0 2px #fff,0 0 12px -2px rgba(239,68,68,0.6);transition:all 0.3s ease} .icon-btn:hover .badge{transform:scale(1.08);box-shadow:0 4px 12px rgba(239,68,68,0.5),0 0 0 2px #fff,0 0 16px -2px rgba(239,68,68,0.7)} .badge.is-empty{display:none} .user-menu{position:relative} .user-dropdown{position:absolute;top:calc(100%+8px);right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.12);min-width:200px;padding:8px 0;z-index:9999} .user-dropdown:not([hidden]){display:block !important;visibility:visible !important;opacity:1 !important} @media (max-width:640px){.user-dropdown:not([hidden]){position:fixed !important;z-index:9999 !important;top:60px !important;right:16px !important}} .dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;color:var(--gray-700);font-size:14px;transition:var(--transition);border:none;background:none;width:100%;text-align:left;cursor:pointer} .dropdown-item:hover{background:var(--gray-100);color:var(--gray-900)} .dropdown-icon{font-size:16px;opacity:0.7} .dropdown-separator{height:1px;background:var(--border);margin:8px 0} .login-btn.logged-in{background:linear-gradient(135deg,rgba(255,245,230,0.8),rgba(255,231,204,0.6));border:1px solid rgba(242,140,26,0.2);color:var(--brand-700);max-width:200px;display:inline-flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(242,140,26,0.08),0 0 0 1px rgba(255,255,255,0.5) inset,0 0 12px -6px rgba(242,140,26,0.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .login-btn.logged-in::before{content:'';position:absolute;top:50%;left:0;width:32px;height:32px;background:radial-gradient(circle,rgba(242,140,26,0.15),transparent 70%);transform:translateY(-50%);opacity:0;transition:opacity 0.3s ease} .login-btn.logged-in:hover::before{opacity:1} .login-btn.logged-in .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#FFE7CC 0%,#FFD9A8 50%,#FFCC80 100%);color:#D97809;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:0.3px;position:relative;box-shadow:0 2px 8px rgba(242,140,26,0.25),0 1px 3px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.5);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .login-btn.logged-in .user-avatar::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#F28C1A,#FFD9A8,#F28C1A);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity 0.3s ease} .login-btn.logged-in:hover .user-avatar::before{opacity:1} .login-btn.logged-in:hover .user-avatar{transform:scale(1.08) rotate(-3deg);box-shadow:0 4px 12px rgba(242,140,26,0.35),0 2px 6px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.6)} .login-btn.logged-in .login-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500;font-size:14px;transition:color 0.2s ease} .login-btn.logged-in:hover .login-text{color:var(--brand-600)} .login-btn.logged-in:hover{background:linear-gradient(135deg,rgba(255,245,230,0.95),rgba(255,231,204,0.85));border-color:rgba(242,140,26,0.3);box-shadow:0 4px 16px -4px rgba(242,140,26,0.25),0 0 0 1px rgba(242,140,26,0.1) inset,0 1px 2px rgba(0,0,0,0.05);transform:translateY(-1px)} @media (min-width:761px){.mega-cats-wrapper{display:contents} .mega-cats-fade{display:none !important}} .mega-cats{display:flex;gap:5px;scrollbar-width:none;position:relative;z-index:510;overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1} .mega-cats::-webkit-scrollbar{display:none} .mega-cats a{text-decoration:none;font-size:14px;color:var(--gray-700);padding:6px 10px;border-radius:6px;white-space:nowrap;transition:var(--transition)} .mega-cats a:hover{background:var(--brand-100);color:var(--brand-600)} .mega-cats-more{position:relative;display:flex;align-items:center} .mega-cats-more.active>.mega-more-btn{background:var(--brand-600);color:#fff} .mega-more-btn{cursor:pointer;border:none;background:var(--gray-100,#f5f5f5);color:var(--gray-700,#333);padding:6px 12px;font-size:16px;line-height:1;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition)} .mega-more-btn:hover{background:var(--brand-100);color:var(--brand-600)} .mega-more-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border:1px solid var(--gray-200,#e3e6e9);border-radius:10px;padding:12px 14px 14px;min-width:400px;max-width:520px;max-height:420px;box-shadow:0 12px 32px -8px rgba(25,40,65,.25);z-index:3000} .mega-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px 10px;overflow-x:hidden;max-height:380px;overscroll-behavior:contain;scrollbar-width:thin} .mega-more-grid::-webkit-scrollbar{width:6px} .mega-more-grid::-webkit-scrollbar-thumb{background:var(--gray-300,#c7ccd1);border-radius:3px} .mega-more-grid a.active{background:var(--brand-600);color:#fff;font-weight:600} .hero{background:linear-gradient(135deg,var(--brand-50),#fff)} .hero-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center} .hero-text h1{font-size:48px;line-height:1.1;margin:0;font-weight:600;font-family:"Poppins",sans-serif} .hero-text .text-brand{color:var(--brand-500)} .lead{font-size:18px;color:var(--gray-700);margin-top:16px} .hero-cta{margin-top:28px;display:flex;gap:16px} .hero-bullets{margin-top:28px;display:flex;gap:28px;font-size:14px;color:var(--gray-600)} .hero-box{background:#fff;padding:10px;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center} .hero-box img{border-radius:10px} @media (max-width:680px){.hero-inner{gap:25px}} .usp-section{position:relative;background:linear-gradient(180deg,#FFFDFB 0%,#FFFFFF 60%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 0 10px} .usp-list{list-style:none;margin:0;padding:0;display:grid;gap:26px} .usp-list.variant-soft{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .usp-item{display:flex;gap:16px;align-items:flex-start;background:#fff;padding:18px 18px 18px 16px;border:1px solid rgba(226,226,226,0.7);border-radius:18px;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 2px 4px -1px rgba(0,0,0,.04),0 6px 18px -6px rgba(0,0,0,.08);transition:.35s cubic-bezier(.16,.8,.32,1)} .usp-item::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(242,140,26,.18),transparent 60%);opacity:.65;transition:.5s;z-index:-1} .usp-item:hover{transform:translateY(-6px);box-shadow:0 10px 26px -8px rgba(0,0,0,.15),0 3px 8px -2px rgba(0,0,0,.08);border-color:rgba(242,140,26,.35)} .usp-item:hover::before{background:radial-gradient(circle at 70% 40%,rgba(242,140,26,.22),transparent 65%)} .usp-icon{flex:0 0 56px;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FFE7CC,#FFD9A8);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 4px 10px -3px rgba(0,0,0,.15);transition:.45s} .usp-item:hover .usp-icon{transform:rotate(-4deg) scale(1.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 6px 14px -4px rgba(0,0,0,.20)} .usp-icon svg{width:28px;height:28px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))} .usp-text h3{font-size:15px;font-weight:600;margin:2px 0 6px;letter-spacing:.2px} .usp-text p{font-size:13px;line-height:1.3;margin:0;color:var(--gray-600)} @media (max-width:680px){.usp-section{padding:5px 0 5px;margin-bottom:0.75rem} .usp-item{padding:16px 14px} .usp-icon{width:50px;height:50px;border-radius:14px} .usp-text h3{font-size:14px;margin-bottom:4px} .usp-text p{font-size:12.5px} .usp-list{gap:10px}} .flash{padding:50px 0 30px;background:#fff} .flash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .flash-head h2{margin:0;font-size:24px;font-family:"Poppins"} .flash .countdown{font-family:monospace;background:#111;color:#fff;padding:8px 14px;border-radius:8px;font-size:16px;letter-spacing:1px} .flash-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none} .flash-scroll::-webkit-scrollbar{display:none} .products{padding:60px 0;background:#fff} .products-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px} .products-head h2{margin:0;font-size:24px;font-family:"Poppins"} .product-filters input{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;width:220px} .product-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .prod-card{background:#fff;border:1px solid var(--border);padding:12px;border-radius:12px;position:relative;display:flex;flex-direction:column;transition:var(--transition)} .prod-card.small{min-width:160px} .prod-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.12);transform:translateY(-3px)} .prod-card .img-box{background:var(--gray-100);border-radius:10px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden} .prod-card .img-box img{width:100%;height:100%;object-fit:contain;transition:var(--transition)} .prod-card:hover .img-box img{transform:scale(1.04)} .prod-card .name{font-size:13.5px;font-weight:500;margin:10px 0 6px;min-height:36px;line-height:1.3} .price{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .price strong{color:var(--brand-600);font-size:14px} .price .old{font-size:11px;color:var(--gray-500);text-decoration:line-through} .tag.discount{position:absolute;top:8px;left:8px;background:#E54848;color:#fff;font-size:11px;padding:4px 6px;border-radius:6px;font-weight:600} .btn{border:none;cursor:pointer;font-weight:500;font-size:14px;padding:12px 22px;border-radius:10px;background:var(--gray-900);color:#fff;transition:var(--transition);text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px} .btn:hover{background:#000} .btn-primary{background:var(--brand-500)} .btn-primary:hover{background:var(--brand-600)} .btn-outline{background:#fff;color:var(--gray-900);border:1px solid var(--border)} .btn-outline:hover{background:var(--gray-100)} .btn-sm{padding:8px 14px;font-size:13px} .btn-mini{padding:6px 10px;font-size:12px} .add-cart{margin-top:auto;background:var(--brand-500);color:#fff} .add-cart:hover{background:var(--brand-600)} .site-footer.footer-compact .ft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px 40px;align-items:start} .site-footer.footer-compact .ft-top{padding:42px 0 26px} .site-footer.footer-compact .ft-title{margin:0 0 14px;font-size:14px;letter-spacing:.8px;text-transform:uppercase;font-weight:600;color:#82b1c9} .site-footer.footer-compact .ft-desc,.site-footer.footer-compact .ft-text{margin:0 0 16px;font-size:13.5px;line-height:1.45;color:#c6d6e0;max-width:330px} .site-footer.footer-compact .ft-desc.sm-gap{margin-top:18px} .site-footer.footer-compact svg{width:20px;height:20px;flex:0 0 20px;display:inline-block} .site-footer.footer-compact .ft-social svg{width:18px;height:18px} .site-footer.footer-compact .ft-wa-btn svg{width:18px;height:18px} svg{max-width:100%} .site-footer.footer-compact svg{width:20px !important;height:20px !important} .site-footer.footer-compact .ft-links{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:4px} .site-footer.footer-compact .ft-links li{margin:0} .site-footer.footer-compact .ft-links a{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:5px 2px;text-decoration:none;color:#c6d6e0;border-radius:8px;transition:.25s} .site-footer.footer-compact .ft-links a:hover{background:rgba(255,255,255,.06);padding-left:6px;color:#fff} .site-footer.footer-compact .ico-s{width:24px;height:24px;background:#103346;color:#89b8cf;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:0 0 24px;font-size:12px;transition:.3s} .site-footer.footer-compact .ft-links a:hover .ico-s{background:#F28C1A;color:#fff;transform:rotate(-4deg)} .site-footer.footer-compact .ft-wa-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#062437;padding:8px 18px;font-size:13.5px;border-radius:22px;font-weight:500;text-decoration:none;box-shadow:0 3px 8px -3px rgba(0,0,0,.45);transition:.25s} .site-footer.footer-compact .ft-wa-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(0,0,0,.55)} .site-footer.footer-compact .ft-social{display:flex;gap:12px;margin-top:4px} .site-footer.footer-compact .ft-social a{width:34px;height:34px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;border-radius:10px;color:#c6d6e0;transition:.25s} .site-footer.footer-compact .ft-social a:hover{background:#F28C1A;color:#fff} .site-footer.footer-compact .ft-address{font-size:12.5px;line-height:1.44;color:#8fa4b1;max-width:330px;margin-top:12px} .site-footer.footer-compact .ft-address .company{margin:0 0 4px;font-weight:600;color:#e5f2f7;font-size:12.8px} .site-footer.footer-compact .ft-payments{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-width:350px} .site-footer.footer-compact .ft-payments .pay-row{display:flex;gap:8px;flex-wrap:wrap} .site-footer.footer-compact .ft-payments img{width:46px;height:32px;padding:3px 5px;background:#fff;border-radius:7px;object-fit:contain;box-shadow:0 2px 6px -3px rgba(0,0,0,.45);transition:.25s} .site-footer.footer-compact .ft-payments img:hover{transform:translateY(-3px);box-shadow:0 5px 12px -6px rgba(0,0,0,.55)} .site-footer.footer-compact .ft-bottom{border-top:1px solid rgba(255,255,255,.08);background:#041f31;padding:12px 0 16px;margin-top:4px} .site-footer.footer-compact .ft-copy{font-size:11.5px;color:#8fa7b5;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;line-height:1.3;margin:0} .site-footer.footer-compact .ft-copy span{position:relative;padding:0 10px} .site-footer.footer-compact .ft-copy span+span:before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;background:rgba(255,255,255,.14);transform:translateY(-50%)} @media (max-width:580px){.site-footer.footer-compact .ft-top{padding:34px 0 18px} .site-footer.footer-compact .ft-grid{gap:26px 20px} .site-footer.footer-compact .ft-copy span{padding:0} .site-footer.footer-compact .ft-copy span+span:before{display:none}} .copy{margin-top:40px;border-top:1px solid #222;text-align:center;padding:18px 0;font-size:12px;color:#666} @media (max-width:760px){.hero-text h1{font-size:38px} .hero{padding:0 0 30px} .topbar-inner{flex-direction:column;gap:4px;padding:6px 0} .nav-inner{flex-wrap:wrap} .mega-cats{gap:10px} .product-grid{gap:16px} .prod-card{padding:10px}} .site-footer.footer-compact{--ft-bg-0:#051722;--ft-bg-1:#072534;--ft-bg-2:#0B2F40;--ft-bg-3:#103A4E;--ft-orange:#F28C1A;--ft-orange-dark:#D97809;--ft-text:#E9F2F6;--ft-text-sec:#B8CAD3;--ft-text-muted:#8FA4B1;--ft-divider:rgba(255,255,255,0.08);--ft-glow:rgba(242,140,26,0.18);--ft-glow-fade:rgba(242,140,26,0);color:var(--ft-text)} .site-footer.footer-compact .ft-title{color:#9CC5D7} .site-footer.footer-compact .ft-links a{color:var(--ft-text-sec)} .site-footer.footer-compact .ft-links a:hover{color:#fff} .site-footer.footer-compact .ft-address{color:var(--ft-text-muted)} .site-footer.footer-compact .ft-copy{color:#9AB2BD} .site-footer.footer-compact .ico-s{background:#0F3647;color:#9FC7DA} .site-footer.footer-compact .ft-links a:hover .ico-s{background:var(--ft-orange);color:#fff} .site-footer.footer-compact .ft-wa-btn{box-shadow:0 4px 12px -5px rgba(0,0,0,.6),0 0 0 3px rgba(255,255,255,0.05)} .site-footer.footer-compact .ft-wa-btn:hover{box-shadow:0 8px 20px -8px rgba(0,0,0,.65),0 0 0 3px rgba(242,140,26,0.25)} .site-footer.footer-compact .ft-payments img{box-shadow:0 2px 6px -3px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.05)} .site-footer.footer-compact .ft-payments img:hover{box-shadow:0 6px 14px -6px rgba(0,0,0,.65),0 0 0 1px rgba(242,140,26,0.4)} .site-footer.footer-compact.variant-ember{background:radial-gradient(circle at 78% 82%,var(--ft-glow) 0%,var(--ft-glow-fade) 55%),linear-gradient(140deg,var(--ft-bg-1) 0%,var(--ft-bg-2) 55%,var(--ft-bg-0) 100%)} .site-footer.footer-compact.variant-ember .ft-bottom{background:rgba(0,0,0,0.25);backdrop-filter:blur(2px)} .site-footer.footer-compact.variant-bar{background:var(--ft-bg-1);position:relative} .site-footer.footer-compact.variant-bar::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--ft-orange-dark),var(--ft-orange));box-shadow:0 0 12px -2px var(--ft-orange)} .site-footer.footer-compact.variant-bar .ft-bottom{background:#041c28} .site-footer.footer-compact.variant-radial{background:radial-gradient(circle at 70% 90%,rgba(242,140,26,0.22) 0%,rgba(242,140,26,0.04) 38%,rgba(242,140,26,0) 65%),linear-gradient(150deg,#052131 0%,#062d3f 50%,#041924 100%)} .site-footer.footer-compact.variant-radial .ft-bottom{background:#041c29} .site-footer.footer-compact.variant-stripes{background:repeating-linear-gradient(180deg,rgba(255,255,255,0.015) 0 38px,rgba(255,255,255,0) 38px 76px),linear-gradient(130deg,#052636 0%,#062a3c 60%,#041d28 100%);position:relative} .site-footer.footer-compact.variant-stripes::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:110px;background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0));pointer-events:none} .site-footer.footer-compact.variant-stripes .ft-bottom{background:#031821} .site-footer.footer-compact.variant-stripes .ft-bottom{position:relative} .site-footer.footer-compact.variant-stripes .ft-bottom::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,rgba(242,140,26,0),rgba(242,140,26,.65),rgba(242,140,26,0))} .site-footer.footer-compact.variant-glass{background:linear-gradient(145deg,#051c29 0%,#041620 65%,#03121b 100%)} .site-footer.footer-compact.variant-glass .ft-grid{position:relative;padding:32px clamp(10px,2vw,24px);border-radius:22px;background:linear-gradient(140deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);box-shadow:0 12px 28px -12px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.04) inset;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .site-footer.footer-compact.variant-glass .ft-bottom{background:#02141d} .site-footer.footer-compact a{transition:color .25s,background .25s,box-shadow .25s} .site-footer.footer-compact .ft-links a:hover{box-shadow:0 2px 6px -3px rgba(0,0,0,.5),0 0 0 1px rgba(242,140,26,0.55)} .site-footer.footer-compact .ft-social a{background:#0E3445;color:#bcd4dd} .site-footer.footer-compact .ft-social a:hover{background:var(--ft-orange);color:#fff;box-shadow:0 0 0 3px rgba(242,140,26,0.28)} .footer-divider-top{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);width:100%;margin:0 0 4px} .ft-collapsible-content{display:contents} @media (max-width:768px){.ft-top.ft-collapsible .ft-collapsible-content{display:block;max-height:80px;overflow:hidden;position:relative;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1)} .ft-top.ft-collapsible .ft-collapsible-content::after{content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(to bottom,transparent 0%,rgba(6,43,69,0.6) 40%,#062b45 100%);pointer-events:none;opacity:1;transition:opacity 0.3s ease;z-index:1} .ft-top.ft-collapsible.expanded .ft-collapsible-content{max-height:1500px} .ft-top.ft-collapsible.expanded .ft-collapsible-content::after{opacity:0} .ft-expand-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:-8px 0 0;padding:12px 20px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);border-radius:10px;color:#e5f2f7;font-size:13.5px;font-weight:500;cursor:pointer;transition:all 0.3s ease;outline:none;position:relative;z-index:10} .ft-expand-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.35);color:#fff;transform:translateY(-2px)} .ft-expand-btn:active{transform:scale(0.98)} .ft-expand-btn svg{width:18px;height:18px;transition:transform 0.3s ease;fill:currentColor} .ft-top.ft-collapsible.expanded .ft-expand-btn{margin-top:15px} .ft-top.ft-collapsible.expanded .ft-expand-btn svg{transform:rotate(180deg)}} @media (min-width:769px){.ft-expand-btn{display:none !important}} @media (max-width:640px){.site-footer.footer-compact.variant-glass .ft-grid{padding:26px 18px}} .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#ffffff;border-top:1px solid #e5e7eb;z-index:9998;box-shadow:0 -2px 10px rgba(0,0,0,0.05);display:none} .bottom-nav-inner{display:flex;justify-content:space-around;align-items:center;padding:2px 0;max-width:640px;margin:0 auto} .bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 8px;background:none;border:none;cursor:pointer;text-decoration:none;color:#6b7280;transition:all 0.3s ease;position:relative} .bottom-nav-item:hover{color:#F28C1A} .bottom-nav-item.active{flex-direction:row;gap:8px;background:linear-gradient(135deg,#F28C1A 0%,#D97809 100%);color:white;border-radius:20px;padding:8px 16px;box-shadow:0 2px 8px rgba(242,140,26,0.3)} .bottom-nav-item-icon{width:24px;height:24px;position:relative} .bottom-nav-item-icon svg{width:100%;height:100%} .bottom-nav-item .icon-outlined{display:block} .bottom-nav-item .icon-filled{display:none} .bottom-nav-item.active .icon-outlined{display:none} .bottom-nav-item.active .icon-filled{display:block} .bottom-nav-item-label{font-size:12px;font-weight:600;line-height:1;display:none;white-space:nowrap} .bottom-nav-item.active .bottom-nav-item-label{display:block} .bottom-nav-avatar-img,.bottom-nav-avatar-initials{width:24px;height:24px;border-radius:50%;display:block} .bottom-nav-avatar-img{object-fit:cover} .bottom-nav-avatar-initials{background:linear-gradient(135deg,#F28C1A 0%,#D97809 100%);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;letter-spacing:0.5px} .bottom-nav-item-icon:has(.bottom-nav-avatar-img) .bottom-nav-svg-icon,.bottom-nav-item-icon:has(.bottom-nav-avatar-initials) .bottom-nav-svg-icon{display:none} .bottom-nav-item.active .bottom-nav-avatar-initials{background:white;color:#F28C1A;border:2px solid rgba(255,255,255,0.8);box-sizing:border-box} .bottom-nav-item.active .bottom-nav-avatar-img{border:2px solid rgba(255,255,255,0.9);box-sizing:border-box} .bottom-nav-item-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:white;border-radius:10px;padding:2px 5px;font-size:10px;font-weight:600;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;line-height:1} @media (max-width:640px){.bottom-nav{display:block} body{padding-bottom:60px}} html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%} body{min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{height:auto} button,input,select,textarea{font:inherit}:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-500,#f28c1a) 72%,white);outline-offset:3px}::selection{color:#fff;background:var(--brand-600,#d97809)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}} .mobile-user-sheet{position:fixed;bottom:0;left:0;right:0;z-index:10000;pointer-events:none} .mobile-user-sheet:not([hidden]){pointer-events:auto} .mobile-user-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;transition:opacity 0.2s ease-out} .mobile-user-sheet.active .mobile-user-sheet-backdrop{opacity:1} .mobile-user-sheet-content{position:absolute;bottom:0;left:0;right:0;background:white;border-radius:16px 16px 0 0;max-height:80vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.3s ease-out} .mobile-user-sheet.active .mobile-user-sheet-content{transform:translateY(0)} .mobile-user-sheet-handle{width:40px;height:4px;background:#d1d5db;border-radius:2px;margin:12px auto 16px} .mobile-user-sheet-header{padding:0 20px 16px;border-bottom:1px solid #e5e7eb} .mobile-user-info{display:flex;align-items:center;gap:12px} .mobile-user-avatar{width:48px;height:48px;background:linear-gradient(135deg,#FFE7CC 0%,#FFD9A8 50%,#FFCC80 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#D97809;font-weight:600} .mobile-user-details{flex:1} .mobile-user-name{font-weight:600;font-size:16px;color:#1f2937;margin-bottom:4px} .mobile-user-email{font-size:13px;color:#6b7280} .mobile-user-sheet-body{padding:8px 0} .mobile-user-sheet-item{display:flex;align-items:center;gap:12px;padding:14px 20px;background:none;border:none;width:100%;text-align:left;cursor:pointer;text-decoration:none;color:#374151;transition:background 0.2s} .mobile-user-sheet-item:hover{background:#f9fafb} .mobile-user-sheet-icon{font-size:20px;width:24px;text-align:center} .mobile-user-sheet-label{font-size:15px;font-weight:500} .mobile-user-sheet-divider{height:1px;background:#e5e7eb;margin:8px 0} @keyframes fadeIn{from{opacity:0} to{opacity:1}} @keyframes slideUp{from{transform:translateY(100%)} to{transform:translateY(0)}} @media (max-width:640px){.chat-widget{bottom:0 !important} .chat-popup{z-index:9999}} .search{position:relative} .ai-bot-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:8px;cursor:pointer;border-radius:8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);margin-left:4px;flex-shrink:0;display:none} .ai-bot-toggle .bot-icon{color:#9ca3af;transition:all 0.3s ease} .ai-bot-toggle:hover .bot-icon{color:#6b7280;transform:scale(1.1)} .ai-bot-toggle.active .bot-icon{color:#fb923c;animation:botPulse 2s ease-in-out infinite} .ai-bot-toggle.active{background:rgba(251,146,60,0.1)} .ai-bot-toggle.active:hover .bot-icon{color:#f97316} @keyframes botPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.12)}} .search-suggest{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e1e4e8;border-top:none;box-shadow:0 4px 12px rgba(0,0,0,0.08);max-height:400px;overflow-y:auto;z-index:100;padding:0;font-size:14px;border-radius:0 0 8px 8px} .suggest-item{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;transition:all 0.2s ease;border-bottom:1px solid #f1f5f9} .suggest-item:last-child{border-bottom:none} .suggest-item:hover,.suggest-item.active{background:linear-gradient(90deg,#f8fafc 0%,#f1f5f9 100%);padding-left:20px} .suggest-thumb{width:42px;height:42px;object-fit:cover;border:1px solid #ddd;border-radius:4px;background:#fafafa} .suggest-meta{flex:1;min-width:0} .suggest-name{font-weight:500;color:#222;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .suggest-price{color:#d32f2f;font-size:12px;margin-top:2px} .suggest-ai-insight{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border-bottom:1px solid #bae6fd;color:#0369a1;font-size:12px;font-weight:500;line-height:1.4} .suggest-ai-insight svg{flex-shrink:0;opacity:0.8} .suggest-ai-insight span{flex:1} .ai-progress-container{padding:20px 16px;background:linear-gradient(135deg,#fafbff 0%,#f5f7ff 100%)} .ai-progress-header{display:flex;align-items:center;gap:10px;margin-bottom:16px} .ai-progress-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;color:#fff;font-size:18px;animation:aiIconSpin 3s linear infinite} @keyframes aiIconSpin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}} .ai-progress-text{flex:1} .ai-progress-title{font-weight:600;color:#1e293b;font-size:14px;margin-bottom:2px} .ai-progress-subtitle{font-size:12px;color:#64748b} .ai-progress-steps{display:flex;flex-direction:column;gap:10px;margin-top:16px} .ai-progress-step{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-radius:8px;border:1px solid #e2e8f0;transition:all 0.3s ease} .ai-progress-step.active{border-color:#667eea;background:#f8f9ff;box-shadow:0 2px 8px rgba(102,126,234,0.1)} .ai-progress-step.completed{border-color:#10b981;background:#f0fdf4} .ai-step-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;flex-shrink:0} .ai-progress-step.active .ai-step-icon{background:#667eea;color:#fff;animation:pulse 1.5s ease-in-out infinite} .ai-progress-step.completed .ai-step-icon{background:#10b981;color:#fff} .ai-progress-step.pending .ai-step-icon{background:#e2e8f0;color:#94a3b8} .ai-step-text{flex:1;font-size:13px;color:#475569;font-weight:500} .ai-progress-step.completed .ai-step-text{color:#059669} .ai-result-banner{padding:12px 16px;background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border-bottom:1px solid #86efac;display:flex;align-items:center;gap:10px} .ai-result-icon{font-size:20px;animation:bounceIn 0.5s ease} @keyframes bounceIn{0%{transform:scale(0);opacity:0} 50%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1}} .ai-result-text{flex:1} .ai-result-title{font-weight:600;color:#065f46;font-size:13px;margin-bottom:2px} .ai-result-description{font-size:12px;color:#047857;opacity:0.9} .suggest-section-header{padding:10px 16px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-bottom:1px solid #e2e8f0} .suggest-header-main{display:flex;align-items:center;gap:6px;margin-bottom:4px} .suggest-header-icon{font-size:14px} .suggest-header-text{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.5px} .suggest-header-hint{font-size:11px;color:#94a3b8;font-weight:400;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:4px} .suggest-header-hint kbd{display:inline-block;padding:2px 6px;font-size:10px;font-weight:600;line-height:1;color:#475569;background:#fff;border:1px solid #cbd5e1;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.05);font-family:'Segoe UI',monospace} .suggest-footer-hint{display:flex;align-items:center;justify-content:center;padding:12px 16px;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-top:1px solid #fbbf24;color:#92400e;font-size:12px;font-weight:500;text-align:center;cursor:default} .suggest-footer-hint svg{color:#f59e0b;flex-shrink:0} .suggest-footer-hint kbd{display:inline-block;padding:3px 7px;margin:0 3px;font-size:11px;font-weight:600;line-height:1;color:#78350f;background:#fff;border:1px solid #f59e0b;border-radius:4px;box-shadow:0 1px 3px rgba(245,158,11,0.2);font-family:'Segoe UI',monospace} .suggest-footer-link{color:#ea580c;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;cursor:pointer;transition:all 0.2s ease} .suggest-footer-link:hover{color:#c2410c;text-decoration-thickness:2px;text-shadow:0 0 8px rgba(234,88,12,0.3)} .suggest-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 12px;color:#64748b;font-size:13px} @keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.5}} .suggest-loading{animation:pulse 1.5s ease-in-out infinite} @media (max-width:768px){.ai-bot-toggle{padding:6px;margin-left:0} .ai-bot-toggle .bot-icon{width:20px;height:20px} .search-icon-btn{margin-right:4px} .search-icon-btn svg{width:18px;height:18px} .search-suggest{max-height:350px} .suggest-header-hint{font-size:10px} .suggest-header-hint kbd{padding:1px 4px;font-size:9px} .suggest-footer-hint{padding:10px 12px;font-size:11px} .suggest-footer-hint svg{width:14px;height:14px} .suggest-footer-hint kbd{padding:2px 5px;font-size:10px} .ai-progress-container{padding:16px 12px} .ai-progress-icon{width:32px;height:32px;font-size:16px} .ai-progress-title{font-size:13px} .ai-progress-subtitle{font-size:11px} .ai-progress-step{padding:6px 10px} .ai-step-text{font-size:12px} .suggest-item{padding:8px 12px} .suggest-thumb{width:36px;height:36px} .suggest-name{font-size:13px} .suggest-price{font-size:11px}} @media (max-width:480px){.ai-bot-toggle{padding:4px} .ai-bot-toggle .bot-icon{width:18px;height:18px} .search-icon-btn svg{width:16px;height:16px} .suggest-header-hint{display:none} .suggest-footer-hint{padding:8px 10px;font-size:10px;flex-direction:column;gap:4px} .suggest-footer-hint svg{display:none} .suggest-footer-hint kbd{padding:2px 4px;font-size:9px} .ai-progress-steps{gap:8px} .ai-step-text{font-size:11px}} .ai-search-prompt{padding:24px;background:linear-gradient(135deg,#fff5f0 0%,#ffffff 100%)} .ai-prompt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px} .ai-prompt-icon{width:48px;height:48px;background:linear-gradient(135deg,#fb923c 0%,#f97316 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 12px rgba(251,146,60,0.3)} .ai-prompt-text{flex:1} .ai-prompt-title{font-size:16px;font-weight:700;color:#1f2937;margin-bottom:4px} .ai-prompt-subtitle{font-size:13px;color:#6b7280} .ai-prompt-query{background:white;border:2px solid #fb923c;border-radius:8px;padding:12px 16px;margin-bottom:16px} .ai-query-label{font-size:11px;font-weight:600;color:#fb923c;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px} .ai-query-text{font-size:15px;font-weight:600;color:#1f2937} .ai-search-trigger-btn{width:100%;padding:14px 20px;background:linear-gradient(135deg,#fb923c 0%,#f97316 100%);color:white;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(251,146,60,0.4)} .ai-search-trigger-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(251,146,60,0.5)} .ai-search-trigger-btn:active{transform:translateY(0)} .ai-btn-icon{font-size:18px;animation:sparkle 2s ease-in-out infinite} @keyframes sparkle{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.7;transform:scale(1.2)}} .ai-btn-text{font-size:15px} .ai-prompt-footer{margin-top:12px;text-align:center;font-size:12px;color:#9ca3af;font-style:italic} .search-suggest.trending-mode{border-top:3px solid #fb923c;max-width:900px;min-width:600px} .trending-container{display:flex;gap:0;padding:0 !important} .trending-column{flex:1;min-width:0;padding:0 !important} .trending-column.trending-searches{border-right:2px solid #e2e8f0;padding:0 !important} @media (max-width:768px){.search-suggest.trending-mode{min-width:auto;max-width:100%} .trending-container{flex-direction:column} .trending-column.trending-searches{border-right:none;border-bottom:2px solid #e2e8f0}} .trending-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#fb923c 0%,#f97316 100%);color:white;position:sticky;top:0;z-index:10} .trending-icon{font-size:20px;animation:trendingPulse 2s infinite} @keyframes trendingPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(251,146,60,0))} 50%{transform:scale(1.15);filter:drop-shadow(0 0 8px rgba(255,255,255,0.8))}} .trending-title{font-weight:700;font-size:14px;letter-spacing:0.3px} .trending-subtitle{font-size:11px;opacity:0.9;margin-left:auto;font-style:italic} .trending-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:all 0.2s ease;border-bottom:1px solid #f1f5f9;position:relative} .trending-item:hover{background:linear-gradient(90deg,#fff7ed 0%,#ffedd5 100%);padding-left:20px} .trending-item:hover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#fb923c 0%,#f97316 100%)} .trending-item:last-child{border-bottom:none} .trending-rank{font-size:20px;flex-shrink:0;width:32px;text-align:center} .trending-query{flex:1;font-size:14px;color:#1f2937;font-weight:500;line-height:1.4} .trending-category{font-size:11px;color:#f97316;background:#fff7ed;padding:3px 10px;border-radius:12px;white-space:nowrap;font-weight:500;border:1px solid #fed7aa} .trending-product-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:all 0.2s ease;border-bottom:1px solid #f1f5f9;position:relative} .trending-product-item:hover{background:linear-gradient(90deg,#fef3c7 0%,#fde68a 100%);padding-left:20px} .trending-product-item:hover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#fbbf24 0%,#f59e0b 100%)} .trending-product-item:last-child{border-bottom:none} .trending-product-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb;flex-shrink:0;background:white} .trending-product-info{flex:1;min-width:0} .trending-product-name{font-size:13px;font-weight:400;color:#1f2937;line-height:1.4;margin-bottom:0;padding:0 !important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .trending-product-price{font-size:12px;font-weight:700;color:#f59e0b;padding:4px 0 !important} .trending-product{padding:0} .product-single{--pd-gap:2rem;--pd-border:#e2e8f0;--pd-bg:#ffffff;--pd-muted:#64748b;--pd-dark:#0f172a;--pd-accent:#0d6efd;--pd-radius:12px;--pd-soft:#f8fafc;--pd-soft-border:#e5e7eb;--pd-danger:#dc2626;--pd-success-bg:#dcfce7;--pd-success-text:#166534;--pd-danger-bg:#fee2e2;--pd-danger-text:#b91c1c;--pd-shadow:0 6px 20px -10px rgba(0,0,0,.12);--pd-transition:.25s cubic-bezier(.4,.0,.2,1);max-width:1280px;margin-inline:auto} .pd-sticky-header{position:fixed;top:0;left:0;right:0;z-index:998;background:rgba(255,255,255,0.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,0.8);box-shadow:0 4px 16px -4px rgba(0,0,0,0.08);transform:translateY(-100%);opacity:0;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1);pointer-events:none} .pd-sticky-header.visible{transform:translateY(0);opacity:1;pointer-events:auto} .pd-sticky-header-container{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px} .pd-sticky-thumb{width:48px;height:48px;flex-shrink:0;border-radius:8px;border:1px solid #e2e8f0;overflow:hidden;background:#f8fafc} .pd-sticky-thumb img{width:100%;height:100%;object-fit:cover;display:block} .pd-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .pd-sticky-title{font-size:0.9rem;font-weight:600;color:#0f172a;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0} .pd-sticky-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pd-sticky-price{font-size:1.1rem;font-weight:700;color:#0d6efd;line-height:1} .pd-sticky-price-original{font-size:0.75rem;color:#94a3b8;text-decoration:line-through;line-height:1} .pd-sticky-discount{background:#dc2626;color:#fff;font-size:0.65rem;font-weight:600;padding:2px 6px;border-radius:4px;letter-spacing:0.3px;line-height:1} .pd-sticky-actions{display:flex;gap:8px;flex-shrink:0;align-items:center} .pd-sticky-share-btn{padding:8px 16px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .pd-sticky-share-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#0f172a;transform:translateY(-1px)} .pd-sticky-share-btn:active{transform:translateY(0)} .pd-sticky-share-btn svg{display:block;width:16px;height:16px} .pd-sticky-btn-chat svg{width:16px !important;height:16px !important;max-width:none !important;margin-right:4px;flex-shrink:0} .pd-sticky-btn{padding:8px 16px;border-radius:8px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;border:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap} .pd-sticky-btn-cart{background:#fff;color:#0d6efd;border:1px solid #0d6efd} .pd-sticky-btn-cart:hover{background:rgba(13,110,253,0.06)} .pd-sticky-btn-chat{background:#fff;color:#64748b;border:1px solid #cbd5e1;flex:0.8} .pd-sticky-btn-chat:hover{background:#f8fafc;border-color:#94a3b8;color:#475569} .pd-sticky-btn-buy{background:#0d6efd;color:#fff;border:1px solid #0d6efd;box-shadow:0 2px 8px -2px rgba(13,110,253,0.4)} .pd-sticky-btn-buy:hover{filter:brightness(0.95)} .pd-sticky-btn:disabled{opacity:0.5;cursor:not-allowed} @media (max-width:880px){.pd-sticky-header{display:none}} @media print{*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important} body{background:white !important;margin:0;padding:0} nav,header,footer,nav *,header *,footer *,.navbar,.navbar *,.nav-item,.nav-link,.pd-sticky-header,.pd-sticky-header.visible,.pd-breadcrumb,.pd-sidebar,.pd-mobile-fab,.pd-share-btn,.pd-sticky-share-btn,#pd-share-btn,.share-button,[data-share-btn],button,.btn-add-cart,.btn-buy,.pd-actions,.pd-compare-section,.pd-compare-btn,.pd-compare-info,#pd-compare-btn,.compare-note,.compare-container,.compare-dropdown,.compare-panel,.compare-wrapper,[data-compare],[id*="compare"],[class*="compare"],.pd-thumb-gallery,.pd-installment-card,.pd-installment-card2,.inst-alt-banner--compact,.qoala-banner-card,.tradein-compact-card,.pwp-deals-section,#pwp-deals-section,.pwp-trigger-badge,.pd-related-full,.pd-scroll-top,.stock-info-btn,.stock-popover,.pd-countdown-modern,.pd-share-modal-overlay,[id*="promo-"],.bottom-nav,.pd-buy-form,.pd-buy-card,.pd-extra-meta,.pd-reviews-section,#reviews,hr,.divider,.separator{display:none !important;visibility:hidden !important;opacity:0 !important;height:0 !important;max-height:0 !important;overflow:hidden !important;margin:0 !important;padding:0 !important;border:none !important} .pd-info-card *,.pd-meta-inline *,.pd-variants *{border:none !important;border-top:none !important;border-bottom:none !important} .product-single{max-width:100% !important;margin:0 !important;padding:0 !important;box-shadow:none !important} *{box-shadow:none !important} .pd-top-layout{display:grid !important;grid-template-columns:280px 1fr !important;gap:24px !important;margin:0 0 24px 0 !important;padding:0 !important;page-break-inside:avoid;align-items:start !important} .product-single::before{content:"" !important;display:block !important;width:150px !important;height:50px !important;background:url('/assets/img/logo.png') no-repeat center !important;background-size:contain !important;margin:0 auto 20px !important;visibility:visible !important;opacity:1 !important} .pd-media-card{border:none !important;padding:0 !important;margin:0 !important;text-align:center;page-break-inside:avoid} .pd-main-image{display:none !important} .pd-mobile-slider{display:block !important;overflow:visible !important} .pd-mslide{display:none !important} .pd-mslide:first-child{display:block !important;border:1px solid #e2e8f0 !important;max-width:280px !important;margin:0 auto !important;border-radius:8px !important} .pd-mslide:first-child img{max-height:280px !important;width:100% !important;height:auto !important;object-fit:contain !important} .pd-info-card{border:none !important;border-top:none !important;border-bottom:none !important;padding:0 !important;margin:0 !important;background:white !important;box-shadow:none !important} .pd-title-row{display:block !important;margin-bottom:10px !important;border:none !important;border-top:none !important;border-bottom:none !important;padding:0 !important;box-shadow:none !important;text-decoration:none !important} .pd-title-row .pd-share-btn,.pd-title-row #pd-share-btn{display:none !important} .pd-title{font-size:13pt !important;color:#000 !important;margin:0 0 10px 0 !important;page-break-after:avoid;font-weight:700 !important;line-height:1.3 !important;border:none !important;border-top:none !important;border-bottom:none !important;padding-bottom:0 !important;box-shadow:none !important;text-decoration:none !important} .pd-price-qr-container{display:flex !important;gap:16px !important;align-items:flex-start !important;margin-bottom:14px !important;box-shadow:none !important;border:none !important;text-decoration:none !important} .pd-price-block{flex:1 !important;margin:0 !important;padding-bottom:0 !important;border-bottom:none !important;box-shadow:none !important} .pd-price-row{margin-bottom:8px !important;border:none !important;border-top:none !important;border-bottom:none !important;padding:0 !important} .pd-price-row>span:empty,.pd-price-row>.sold-inline,#pd-sold-inline{display:none !important} .pd-price-current{font-size:18pt !important;color:#0d6efd !important} .pd-price-current[data-price-range]::after{content:attr(data-price-range) !important;display:block !important;font-size:11pt !important;color:#64748b !important;margin-top:4px !important;font-weight:normal !important} .pd-price-current[data-price-range]::after{content:attr(data-price-range) !important} .pd-price-original{font-size:12pt !important;color:#64748b !important} .pd-discount-badge{font-size:10pt !important;padding:2px 6px !important} .pd-qr-print{display:block !important;flex:0 0 100px !important;margin:0 !important;padding:8px !important;background:#f8fafc !important;border-radius:8px !important;text-align:center !important;page-break-inside:avoid !important;border:1px solid #cbd5e1 !important} .pd-qr-label{font-size:6.5pt !important;color:#64748b !important;margin-bottom:5px !important;line-height:1.2 !important;font-weight:600 !important} .pd-qr-image{width:80px !important;height:80px !important;display:block !important;margin:0 auto !important} .pd-meta-inline{display:flex !important;gap:12px !important;margin-bottom:0 !important;padding-bottom:14px !important;font-size:10pt !important;border:none !important;border-top:none !important;border-bottom:none !important;padding-top:0 !important;box-shadow:none !important;text-decoration:none !important;background:transparent !important} .stock-badge,.stock-info-btn{display:none !important} .sku{color:#64748b !important} .sold-inline{display:none !important} .pd-variant-combined,#pd-variant-combined,.pd-variant-summary,[data-role="sold-chip"]{display:none !important} .pd-compare-section,.pd-compare-btn,#pd-compare-btn,.pd-compare-info,.compare-note,.compare-text,.compare-remove{display:none !important;visibility:hidden !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important} .pd-variants{margin:0 !important;padding:0 !important;page-break-inside:avoid !important;border:none !important;border-top:none !important;border-bottom:none !important;box-shadow:none !important;background:transparent !important} .pd-variants::before{content:"Variant:" !important;display:block !important;font-size:11pt !important;font-weight:700 !important;color:#0f172a !important;margin-bottom:10px !important;border:none !important;padding:0 !important;border-top:none !important;border-bottom:none !important} .v-group{display:flex !important;align-items:center !important;gap:8px !important;margin-bottom:8px !important;line-height:1 !important;page-break-inside:avoid !important;border:none !important;padding:0 !important} .v-group:last-child{margin-bottom:0 !important} .v-label{font-weight:700 !important;margin:0 !important;font-size:9pt !important;color:#475569 !important;min-width:60px !important;flex-shrink:0 !important;border:none !important;padding:0 !important} .v-options{display:flex !important;gap:6px !important;flex-wrap:wrap !important;border:none !important;padding:0 !important;margin:0 !important} .v-chip{border:1px solid #cbd5e1 !important;padding:3px 10px !important;font-size:9pt !important;background:#f8fafc !important;border-radius:6px !important;display:inline-flex !important;align-items:center !important;page-break-inside:avoid !important} .v-chip.selected{background:#eff6ff !important;border-color:#2563eb !important;font-weight:600 !important} .v-chip input[type="radio"]{display:none !important} .v-chip .chip-badge{display:none !important} .pd-short-desc{display:none !important} .pd-qr-print{display:block !important;flex:0 0 100px !important;margin:0 !important;padding:8px !important;background:#f8fafc !important;border-radius:8px !important;text-align:center !important;page-break-inside:avoid !important;border:1px solid #cbd5e1 !important} .pd-qr-label{font-size:6.5pt !important;color:#64748b !important;margin-bottom:5px !important;line-height:1.2 !important;font-weight:600 !important} .pd-qr-image{width:80px !important;height:80px !important;display:block !important;margin:0 auto !important} .pd-full-description{border:none !important;padding:0 !important;margin:24px 0 0 0 !important;page-break-before:avoid;grid-column:1 / -1 !important} .pd-full-desc-title{font-size:13pt !important;font-weight:700 !important;margin:0 0 12px 0 !important;color:#000 !important;border-top:none !important;border-bottom:none !important;padding-top:16px !important} .pd-full-desc-body{font-size:10pt !important;line-height:1.6 !important;color:#334155 !important} .pd-full-desc-body img{max-height:200px !important;width:auto !important;page-break-inside:avoid;display:none !important} #deskripsi img{max-width:350px !important;height:auto !important} .pd-full-desc-body table{border-collapse:collapse !important;width:100% !important;margin:12px 0 !important;font-size:9pt !important} .pd-full-desc-body th,.pd-full-desc-body td{border:1px solid #cbd5e1 !important;padding:6px 8px !important} .product-single::after{content:"Plaza IT - plazait.co.id | Printed: " attr(data-print-date);display:block;margin-top:30px;padding-top:16px;border-top:1px solid #e2e8f0;font-size:9pt;color:#64748b;text-align:center} .pd-media-card,.pd-price-block,.pd-full-desc-title{page-break-after:avoid} .pd-full-description{page-break-before:auto}} .pd-breadcrumb{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem;font-size:.72rem;margin:.7rem 0 1.2rem .5rem;color:var(--pd-muted);overflow:hidden} .pd-breadcrumb a{color:var(--pd-accent);text-decoration:none} .pd-breadcrumb a:hover{text-decoration:underline} .pd-breadcrumb a,.pd-breadcrumb span{flex:0 0 auto} .pd-breadcrumb .current{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--pd-dark);padding-right:2px} .pd-top-layout{display:grid;gap:var(--pd-gap);grid-template-columns:minmax(260px,340px) minmax(460px,1fr) 300px;align-items:start;margin-bottom:2.4rem} .pd-media-card{background:#fff;border:1px solid var(--pd-border);border-radius:var(--pd-radius);padding:1rem 1rem 1.2rem} .pd-main-image{margin:0 0 .8rem;border:1px solid var(--pd-soft-border);border-radius:10px;overflow:hidden;background:#fff;position:relative} .pd-main-image img{width:100%;display:block;object-fit:contain;aspect-ratio:1/1} .pd-thumb-gallery{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.55rem} .pd-thumb-btn{border:1px solid var(--pd-soft-border);background:#fff;cursor:pointer;width:64px;height:64px;padding:2px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;position:relative} .pd-thumb-btn img{max-width:100%;max-height:100%;object-fit:contain;display:block} .pd-thumb-btn:hover{border-color:var(--pd-accent)} .pd-thumb-btn.active{border-color:var(--pd-accent);box-shadow:0 0 0 2px rgba(13,110,253,.25)} .pd-thumb-btn:focus-visible{outline:2px solid var(--pd-accent);outline-offset:2px} .pd-thumb-btn:active{transform:scale(.96)} .pd-info-card{background:#fff;border:1px solid var(--pd-border);border-radius:var(--pd-radius);padding:1.4rem 1.6rem 2rem} .pd-title{margin:0 0 1rem;font-size:1.2rem;line-height:1.25;font-weight:600;color:var(--pd-dark)} .pd-price-block{margin:0 0 1rem} .pd-price-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 .35rem} .pd-price-current{font-size:2rem;font-weight:700;color:var(--pd-accent)} .pd-price-original{font-size:.9rem;text-decoration:line-through;color:#94a3b8} .pd-discount-badge{background:var(--pd-danger);color:#fff;font-size:.68rem;padding:4px 8px 3px;font-weight:600;border-radius:6px;letter-spacing:.5px} .pd-meta-inline{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;font-size:.63rem;letter-spacing:.6px;text-transform:uppercase;font-weight:600} .stock-badge{padding:4px 10px;border-radius:24px;background:var(--pd-soft);color:var(--pd-muted);display:inline-block;line-height:1;vertical-align:middle} .stock-badge.in{background:var(--pd-success-bg);color:var(--pd-success-text)} .stock-badge.out{background:var(--pd-danger-bg);color:var(--pd-danger-text)} .digital-badge{padding:4px 10px;border-radius:24px;background:linear-gradient(135deg,#FF5722 0%,#764ba2 100%);color:#fff;font-size:.63rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;display:inline-block;line-height:1;vertical-align:middle;border:none} .sku{color:var(--pd-muted)} .pd-short-desc{font-size:.85rem;line-height:1.5;margin:0 0 1.2rem;color:#334155;overflow-wrap:anywhere} .pd-short-desc p{margin:0 0 .75rem} .pd-short-desc ul,.pd-short-desc ol{margin:.5rem 0 .9rem 1.1rem;font-size:.85rem;line-height:1.45} .pd-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:8px;margin-bottom:4px} .sold-inline{display:inline-block;font-size:.65rem;font-weight:600;color:#475569;background:#f1f5f9;padding:3px 8px 4px;border-radius:6px;letter-spacing:.4px;margin-left:0} .price-divider{display:inline-block;margin:0 .4rem;color:#cbd5e1;font-weight:400} .rating-inline{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 4px;background:#fff7ed;border-radius:6px;font-size:.65rem;font-weight:600;color:#ea580c;text-decoration:none;transition:all .2s ease;cursor:pointer;margin-left:.5rem;white-space:nowrap} .rating-inline:hover{background:#ffedd5;transform:translateY(-1px);box-shadow:0 2px 4px rgba(234,88,12,0.1)} .rating-inline .star-icon{font-size:.75rem;color:#f59e0b;line-height:1} .rating-inline .rating-value{color:#ea580c} .rating-inline .rating-badge-count{color:#9a3412;opacity:0.85} @media (max-width:640px){.rating-inline{font-size:.65rem;padding:3px 8px 4px} .rating-inline .star-icon{font-size:.7rem}} @keyframes highlightFlash{0%,100%{background-color:transparent} 50%{background-color:rgba(251,146,60,0.1)}} .highlight-flash{animation:highlightFlash 1.5s ease} .pd-variants{margin-top:14px} .v-group{margin-bottom:12px} .v-label{font-weight:600;margin-bottom:6px} .v-options{display:flex;flex-wrap:wrap;gap:8px} .v-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #d6d9de;border-radius:999px;cursor:pointer;background:#fff;transition:.15s ease;user-select:none} .v-chip:hover{border-color:#9aa3af;box-shadow:0 1px 0 rgba(0,0,0,.04)} .v-chip.selected{border-color:#2563eb;background:#eff6ff} .v-chip.disabled{opacity:.45;cursor:not-allowed} .v-chip.out{border-style:dashed} .v-chip input{display:none} .v-chip .dot{width:14px;height:14px;border-radius:50%;background:var(--dot,#999);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)} .v-chip .dot--neutral{background:#9aa3af} .v-chip .txt{font-size:.95rem;white-space:nowrap} .v-chip .chip-badge{margin-left:2px;font-size:.72rem;line-height:1;padding:3px 6px;border-radius:6px;background:#fee2e2;color:#991b1b;border:1px solid #fecaca} .pd-variant-summary{margin-top:8px;color:#475569;font-size:.92rem} .pd-variant-summary .vs-item{display:inline-flex;gap:4px;margin-right:10px} .pd-buy-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.4rem;margin:0} .qty-label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--pd-muted);margin-bottom:.35rem} .pd-buy-form input[type=number]{width:90px;padding:.55rem .6rem;border:1px solid var(--pd-soft-border);border-radius:6px;font-size:.85rem} .pd-actions{display:flex;gap:.8rem;flex-wrap:wrap} .btn-add-cart,.btn-buy,.btn-chat-icon{cursor:pointer;border:0;font-weight:700;border-radius:10px;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1rem;transition:var(--pd-transition)} .btn-add-cart{background:var(--brand-500);color:#fff;box-shadow:0 2px 8px -2px rgba(13,110,253,.35)} .btn-add-cart:hover{filter:brightness(.95)} .btn-buy{background:#fff;color:var(--brand-500);border:2px solid var(--brand-500)} .btn-buy:hover{background:rgba(13,110,253,.06)} .btn-chat-icon{background:#fff;color:#fb923c;border:2px solid #fb923c;padding:0;width:44px;min-width:44px} .btn-chat-icon:hover{background:rgba(251,146,60,0.06);border-color:#f97316} .btn-chat-icon svg{width:20px;height:20px;flex-shrink:0} .btn-add-cart:disabled,.btn-buy:disabled,.btn-chat-icon:disabled{opacity:.5;cursor:not-allowed} .btn-buy-voucher{cursor:pointer;border:0;font-weight:600;border-radius:10px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px 0 12px;transition:all 0.3s ease;background:linear-gradient(135deg,#7c3aed 0%,#9333ea 100%);color:#fff;box-shadow:0 3px 10px rgba(124,58,237,0.3);position:relative;overflow:hidden;flex:1 1 auto} .btn-buy-voucher:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(124,58,237,0.4)} .btn-buy-voucher:active{transform:translateY(0);box-shadow:0 2px 6px rgba(124,58,237,0.3)} .btn-buy-voucher .bv-icon{font-size:20px;line-height:1;flex-shrink:0} .btn-buy-voucher .bv-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0;font-size:14px;line-height:1.2} .btn-buy-voucher .bv-text small{font-size:10px;opacity:0.85;font-weight:500;letter-spacing:0.3px;font-family:monospace} .btn-buy-voucher .bv-save{font-size:12px;font-weight:700;background:rgba(255,255,255,0.25);padding:4px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0} .pd-extra-meta{background:var(--pd-soft);border:1px solid var(--pd-border);border-radius:10px;padding:.85rem 1rem;display:grid;gap:.45rem;font-size:.7rem;line-height:1.3} .pd-extra-meta span{font-weight:600;color:var(--pd-muted);margin-right:.3rem} .pd-extra-meta a{color:var(--pd-accent);text-decoration:none} .pd-extra-meta a:hover{text-decoration:underline} .pd-sidebar{display:flex;flex-direction:column;gap:1.2rem} .pd-side-card{background:#fff;border:1px solid var(--pd-border);border-radius:var(--pd-radius);padding:1rem 1.1rem 1.2rem} .pd-side-card h3{margin:0 0 .7rem;font-size:.8rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pd-dark)} .pd-side-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.7rem;color:#334155} .pd-side-card li{position:relative;padding-left:13px;line-height:1.25} .pd-side-card li:before{content:'';width:6px;height:6px;background:var(--pd-accent);border-radius:50%;position:absolute;left:0;top:.45rem} .pay-logos{display:flex;gap:.4rem;flex-wrap:wrap;margin:.1rem 0 .4rem} .pay-logos span{font-size:.55rem;background:var(--pd-soft);border:1px solid var(--pd-soft-border);padding:.35rem .55rem;border-radius:6px;font-weight:600;letter-spacing:.5px} .pd-buy-card{display:block} @media (max-width:880px){.pd-buy-card{display:none} .pd-title-row{padding-right:0 !important}} .pd-full-description{background:#fff;border:1px solid var(--pd-border);border-radius:var(--pd-radius);padding:1.6rem 1.9rem .6rem;margin:0 0 .8rem} .pd-full-desc-title{margin:0 0 1.1rem;font-size:1.15rem;font-weight:600;color:var(--pd-dark)} .pd-full-desc-body{font-size:.9rem;line-height:1.6;color:#334155;overflow-wrap:anywhere} .pd-full-desc-body p{margin:0 0 1rem} .pd-full-desc-body ul,.pd-full-desc-body ol{margin:.5rem 0 1rem 1.2rem} .pd-full-desc-body table{width:100%;border-collapse:collapse;margin:1rem 0 1.2rem} .pd-full-desc-body table,.pd-full-desc-body th,.pd-full-desc-body td{border-bottom:1px dotted #cbd5e1;vertical-align:top} .pd-full-desc-body th,.pd-full-desc-body td{padding:.45rem .55rem;text-align:left} .pd-full-desc-body img{max-width:100%;height:auto;display:block} .pd-related-full{background:#fff;border:1px solid var(--pd-border);border-radius:var(--pd-radius);padding:1.4rem 1.6rem 1.9rem;margin:0 0 2rem} .pd-related-title{margin:0 0 1.1rem;font-size:1.05rem;font-weight:600;color:var(--pd-dark)} .pd-related-grid,.pd-related-grid--full{display:grid !important;gap:16px !important;grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;align-items:stretch} @supports not (display:grid){.pd-related-grid,.pd-related-grid--full{display:flex !important;flex-wrap:wrap} .pd-related-grid .pd-related-card,.pd-related-grid--full .pd-related-card{flex:0 0 calc(20% - 16px);max-width:calc(20% - 16px)} @media (max-width:1100px){.pd-related-grid .pd-related-card,.pd-related-grid--full .pd-related-card{flex:0 0 calc(25% - 16px);max-width:calc(25% - 16px)}} @media (max-width:820px){.pd-related-grid .pd-related-card,.pd-related-grid--full .pd-related-card{flex:0 0 calc(33.333% - 16px);max-width:calc(33.333% - 16px)}} @media (max-width:580px){.pd-related-grid .pd-related-card,.pd-related-grid--full .pd-related-card{flex:0 0 calc(50% - 16px);max-width:calc(50% - 16px)}}} .pd-related-card{display:flex;flex-direction:column;border:1px solid var(--pd-soft-border);background:#fff;border-radius:10px;text-decoration:none;color:inherit;overflow:hidden;transition:var(--pd-transition);position:relative;min-width:0} .pd-related-card:hover{transform:translateY(-4px);box-shadow:var(--pd-shadow)} .pd-related-card .thumb{aspect-ratio:1/1;background:#f1f5f9;overflow:hidden;position:relative} .pd-related-card img{width:100%;height:100%;object-fit:cover;display:block} .mini-disc{position:absolute;top:6px;left:6px;background:#dc2626;color:#fff;font-size:.55rem;padding:3px 6px 2px;border-radius:4px;font-weight:600} .pd-related-card .info{padding:.55rem .65rem .75rem;display:flex;flex-direction:column;gap:.25rem} .pd-related-card h3{font-size:.68rem;line-height:1.25;margin:0;height:2.5em;overflow:hidden;font-weight:600;color:#334155;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .pd-related-card .price{font-size:.7rem;font-weight:600;color:var(--pd-accent)} .pd-related-card .sold{display:block;font-size:.6rem;font-weight:600;color:#475569;margin-top:2px;letter-spacing:.3px;background:#f1f5f9;padding:2px 6px 3px;border-radius:5px;width:max-content} .pd-related-card .price .final{font-size:.82rem;font-weight:700;color:#0d6efd} .pd-related-card .price .ori{font-size:.6rem;text-decoration:line-through;color:#94a3b8;font-weight:500} .pd-mobile-slider{display:none} .pd-mobile-slider img{width:100%;display:block;object-fit:contain;aspect-ratio:1/1} .pd-gallery-counter{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,0.25);color:#9E9E9E;padding:4px 10px;border-radius:10px;font-size:12px;font-weight:600;z-index:100;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;pointer-events:none;display:none;box-shadow:0 1px 4px rgba(0,0,0,.15);line-height:1;border:1px solid rgba(0,0,0,0.08)} @media (max-width:640px){.pd-media-card{border:0;padding:0 1rem 0} .pd-info-card{border:0;padding:0 1.3rem 0} .pd-side-card{flex:1 1 !important} .pd-top-layout{gap:0;margin-bottom:0} .pd-variants{margin-bottom:1.5rem} .pd-main-image{display:none} .pd-gallery-counter{display:block} .pd-mobile-slider-wrapper{position:relative;margin-bottom:.6rem} .pd-mobile-slider{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .pd-mslide{min-width:100%;flex:0 0 100%;scroll-snap-align:center;border:1px solid var(--pd-soft-border);border-radius:10px;overflow:hidden;background:#fff} .pd-thumb-gallery{display:none}} .pd-mobile-fab{position:fixed;left:0;right:0;bottom:42px;display:none;align-items:center;gap:.75rem;padding:12px 16px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(228,231,235,0.6);box-shadow:0 -4px 16px -4px rgba(0,0,0,0.12);z-index:999;transition:bottom .3s cubic-bezier(0.4,0.0,0.2,1)} body:has(.bottom-nav.hidden) .pd-mobile-fab{bottom:0} .pd-mobile-fab .mf-actions{display:flex;gap:.5rem;width:100%} .mf-btn{border-radius:10px;padding:.6rem 1rem;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:4px} .mf-buy{background:#fb923c;color:#fff;border:0;box-shadow:0 2px 8px rgba(251,146,60,0.3);flex:1;flex-direction:column;padding:.55rem 1rem;line-height:1;min-height:44px;font-family:inherit} .mf-buy .mf-buy-text{font-size:11px;font-weight:600;opacity:0.95;font-family:inherit} .mf-buy .mf-buy-price{font-size:13px;font-weight:800;letter-spacing:-0.3px;font-family:inherit;line-height:1} .mf-buy:active{transform:scale(0.97)} .mf-cart{background:#fff;color:#fb923c;border:2px solid #fb923c;width:44px;height:44px;min-height:44px;padding:0;flex-shrink:0;font-family:inherit} .mf-cart:active{transform:scale(0.95)} .mf-chat{background:#fff;color:#fb923c;border:2px solid #fb923c;width:44px;height:44px;min-height:44px;padding:0;flex-shrink:0;font-family:inherit} .mf-chat:active{transform:scale(0.95)} .mf-chat svg{width:20px;height:20px;flex-shrink:0} .mf-share{background:#fff;color:#fb923c;border:2px solid #fb923c;width:44px;height:44px;padding:0;flex-shrink:0} .mf-share:active{transform:scale(0.95)} .mf-btn:disabled{opacity:.5;cursor:not-allowed} @media (max-width:640px){.pd-mobile-fab{display:flex} .product-single{padding-bottom:0}} .pd-installment-card{border:1px solid var(--pd-border);background:#fff;border-radius:var(--pd-radius);padding:1rem 1.1rem 1.25rem;display:flex;flex-direction:column;gap:.85rem} .pd-installment-card h3{margin:0 0 .2rem;font-size:.78rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pd-dark)} .inst-tabs{display:flex;gap:.4rem} .inst-tab{flex:1 1 0;background:var(--pd-soft);border:1px solid var(--pd-soft-border);padding:.45rem .5rem;font-size:.63rem;font-weight:600;border-radius:6px;cursor:pointer;letter-spacing:.4px;transition:var(--pd-transition)} .inst-tab.active,.inst-tab:hover{background:var(--pd-accent);color:#fff;border-color:var(--pd-accent)} .inst-tab:focus{outline:2px solid var(--pd-accent);outline-offset:2px} .inst-tenors{display:flex;gap:.4rem;flex-wrap:wrap} .tenor-btn{flex:1 0 auto;background:#fff;border:1px solid var(--pd-soft-border);padding:.42rem .55rem;font-size:.6rem;font-weight:600;border-radius:20px;cursor:pointer;transition:.18s;min-width:56px} .tenor-btn.active,.tenor-btn:hover{background:#1d7df0;color:#fff;border-color:#1d7df0} .inst-result{display:flex;flex-direction:column;gap:.45rem;font-size:.63rem} .inst-line{display:flex;justify-content:space-between;align-items:center;padding:.35rem .55rem;background:var(--pd-soft);border:1px solid var(--pd-soft-border);border-radius:6px} .inst-line.highlight{background:#1d7df0;color:#fff;border-color:#1d7df0;font-weight:600} .inst-line .lbl{opacity:.8} .inst-line .val{font-weight:600;letter-spacing:.3px} .inst-footnote{font-size:.53rem;line-height:1.25;color:#64748b;margin-top:.2rem} @media (max-width:860px){.pd-installment-card{order:3} .inst-tabs .inst-tab,.inst-tenors .tenor-btn{font-size:.65rem} .btn-buy-voucher{padding:0 12px;gap:8px} .btn-buy-voucher .bv-icon{font-size:18px} .btn-buy-voucher .bv-text{font-size:13px} .btn-buy-voucher .bv-text small{font-size:9px} .btn-buy-voucher .bv-save{font-size:11px;padding:3px 6px}} .pd-installment-card2{background:linear-gradient(135deg,#ffffff 0%,#f1f7ff 65%,#e8f2ff 100%);border:1px solid var(--pd-border);border-radius:var(--pd-radius);padding:1rem 1.05rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden} .pd-installment-card2:before{content:'';position:absolute;width:140px;height:140px;background:radial-gradient(circle at center,rgba(29,125,240,.18),rgba(29,125,240,0));top:-40px;right:-40px;pointer-events:none} .pd-installment-card2 h3{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#0f2f54} .pd-installment-card2 .inst-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .inst-head-badge{background:#1d7df0;color:#fff;font-size:.55rem;font-weight:600;padding:.25rem .5rem;border-radius:20px;letter-spacing:.4px;box-shadow:0 2px 6px -2px rgba(29,125,240,.6)} .inst-bank-tabs{display:flex;gap:.45rem} .bank-tab{flex:1 1 0;background:#fff;border:1px solid var(--pd-soft-border);padding:.5rem .55rem;font-size:.63rem;font-weight:600;border-radius:7px;cursor:pointer;transition:.18s;letter-spacing:.3px} .bank-tab.active,.bank-tab:hover{background:#1d7df0;color:#fff;border-color:#1d7df0;box-shadow:0 3px 10px -4px rgba(29,125,240,.6)} .bank-tab:focus{outline:2px solid #1d7df0;outline-offset:2px} .inst-month-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .inst-month-item{display:flex;align-items:center;gap:.65rem;background:#fff;border:1px solid var(--pd-soft-border);border-radius:14px;padding:.55rem .7rem;position:relative;overflow:hidden;transition:.25s} .inst-month-item:before{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,rgba(29,125,240,.08),rgba(29,125,240,0));transition:.25s} .inst-month-item:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(0,40,120,.25)} .inst-month-item:hover:before{opacity:1} .tenor-badge{background:#1d7df0;color:#fff;font-weight:700;min-width:42px;text-align:center;padding:.38rem .4rem;font-size:.8rem;border-radius:10px;box-shadow:0 3px 10px -4px rgba(29,125,240,.6)} .amount{flex:1;font-size:.8rem;font-weight:600;color:#0f2f54;letter-spacing:.3px} .tag{font-size:.55rem;font-weight:600;padding:.28rem .55rem;border-radius:30px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap} .tag-zero{background:#16a34a;color:#fff;box-shadow:0 2px 8px -3px rgba(16,180,90,.55)} .inst-note{font-size:.6rem;font-weight:600;color:#0f2f54;background:#e0f7ed;border:1px solid #b2ebd2;padding:.4rem .6rem;border-radius:8px;letter-spacing:.3px} .inst-disclaimer{font-size:.52rem;line-height:1.25;color:#64748b;margin-top:-.2rem} @media (max-width:860px){.pd-installment-card2{order:3} .tenor-badge{min-width:38px;font-size:.75rem} .amount{font-size:.78rem}} .inst-alt-banner--compact{background:linear-gradient(142deg,#1d7df0 0%,#3c98ff 55%,#67bdff 100%);color:#fff;border:0;padding:.95rem .95rem 1.05rem;border-radius:16px;box-shadow:0 6px 18px -6px rgba(0,70,160,.45);position:relative;overflow:hidden;min-height:auto} .inst-alt-banner--compact:before,.inst-alt-banner--compact:after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.15);filter:blur(2px);pointer-events:none} .inst-alt-banner--compact:before{width:130px;height:130px;top:-50px;right:-35px} .inst-alt-banner--compact:after{width:90px;height:90px;bottom:-40px;left:-30px} .inst-alt-banner--compact .iab-top{margin:0 0 .55rem;display:flex;flex-direction:column;gap:.25rem} .inst-alt-banner--compact .iab-title{font-size:.74rem;font-weight:700;letter-spacing:.7px;line-height:1.15} .inst-alt-banner--compact .iab-sub{font-size:.55rem;font-weight:500;opacity:.95;letter-spacing:.4px} .iab-logos-compact{display:flex;gap:.55rem;align-items:center;margin:0 0 .6rem;flex-wrap:nowrap;justify-content:space-between} .iab-logos-compact .logo-fin{width:30%} .iab-logos-compact .logo{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;letter-spacing:.3px;position:relative;color:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.35);background:rgba(255,255,255,.15);backdrop-filter:blur(4px);transition:.25s;text-shadow:0 1px 2px rgba(0,0,0,.4);user-select:none} .iab-logos-compact .logo:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(255,255,255,0));mix-blend-mode:overlay;opacity:.55;pointer-events:none} .iab-logos-compact .logo:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 18px -6px rgba(0,0,0,.45)} .iab-cta--compact{display:inline-flex;padding:.45rem .85rem;font-size:.58rem;font-weight:700;background:#fff;color:#0f3c6d;border-radius:30px;text-decoration:none;letter-spacing:.55px;box-shadow:0 4px 12px -5px rgba(0,0,0,.35);transition:.25s} .iab-cta--compact:hover{transform:translateY(-2px);box-shadow:0 8px 18px -7px rgba(0,0,0,.45)} .iab-footnote--compact{margin-top:.45rem;font-size:.46rem;opacity:.85;letter-spacing:.25px} @media (max-width:860px){.inst-alt-banner--compact{order:4;margin-top:.4rem;flex:1 1} .iab-logos-compact .logo{width:46px;height:46px}} .pd-scroll-top{position:fixed;right:20px;bottom:90px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);color:#0f2f54;border:1px solid rgba(226,232,240,0.8);box-shadow:0 8px 20px -8px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1105;opacity:0;transform:translateY(12px) scale(.92);transition:all .3s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .pd-scroll-top:hover{box-shadow:0 12px 28px -10px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.15);transform:translateY(0) scale(1);background:linear-gradient(135deg,#ffffff 0%,#fefefe 100%);border-color:rgba(226,232,240,1)} .pd-scroll-top:active{transform:translateY(0) scale(.96)} .pd-scroll-top:focus-visible{outline:2px solid var(--pd-accent);outline-offset:2px} .pd-scroll-top.visible{opacity:1;transform:translateY(0) scale(1)} @media (max-width:640px){.pd-scroll-top{right:14px;bottom:var(--scroll-top-bottom,calc(68px+18px+env(safe-area-inset-bottom)))}} @media (max-width:1250px){.pd-top-layout{grid-template-columns:minmax(260px,330px) 1fr} .pd-sidebar{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:1rem} .pd-side-card{flex:1 1 250px}} @media (max-width:880px){.pd-top-layout{grid-template-columns:1fr} .pd-sidebar{flex-direction:column;padding:0 1rem} .pd-title{font-size:1.2rem} .pd-price-current{font-size:1.5rem}} @media (max-width:640px){.pd-related-full{padding:1.2rem;border:0;padding-top:.6rem;margin-bottom:.6rem} .pd-related-grid,.pd-related-grid--full{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}} @media (max-width:560px){.pd-actions{flex-direction:column} .btn-add-cart,.btn-buy,.btn-buy-voucher{width:100%} .pd-full-description{padding:1.2rem;border:0;padding-bottom:0}} @media (max-width:380px){.pd-related-full{padding:.9rem .7rem 1.1rem} .pd-related-grid,.pd-related-grid--full{gap:8px !important} .pd-related-card .info{padding:.4rem .48rem .55rem}} .pd-countdown-modern{--cd-bg1:#0ea5e9;--cd-bg2:#6366f1;--cd-text:#0b1220;--cd-contrast:#ffffff;--cd-shadow:0 8px 24px -10px rgba(0,0,0,.25);--cd-border:rgba(255,255,255,.25);--cd-box:rgba(255,255,255,.65);--cd-box-text:#0f172a;--cd-danger:#ef4444;display:flex;gap:.75rem;align-items:center;background:linear-gradient(135deg,var(--cd-bg1),var(--cd-bg2));border:1px solid var(--cd-border);color:var(--cd-contrast);border-radius:14px;padding:.6rem .8rem;box-shadow:var(--cd-shadow);position:relative;overflow:hidden;margin-bottom:1rem} .pd-countdown-modern .pd-cd-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;background:rgba(255,255,255,.22);border:1px solid var(--cd-border);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} .pd-countdown-modern .pd-cd-icon svg{width:18px;height:18px;fill:#fff;opacity:.95} .pd-countdown-modern .pd-cd-body{display:flex;flex-direction:column;gap:.35rem;min-width:0} .pd-countdown-modern .pd-cd-label{font-size:.72rem;font-weight:700;letter-spacing:.4px;opacity:.95;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.08)} .pd-countdown-modern .pd-cd-time{display:flex;align-items:end;gap:.35rem;flex-wrap:wrap;line-height:1} .pd-countdown-modern .unit{display:flex;flex-direction:column;align-items:center;gap:.18rem;min-width:58px} .pd-countdown-modern .num{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:40px;padding:0 .4rem;background:var(--cd-box);color:var(--cd-box-text);border:1px solid rgba(15,23,42,.08);border-radius:10px;font:800 1.05rem ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;letter-spacing:.5px;box-shadow:0 4px 14px -6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)} .pd-countdown-modern .unit-label{font-size:.62rem;font-weight:700;opacity:.9;text-shadow:0 1px 0 rgba(255,255,255,.15)} .pd-countdown-modern .colon{font-weight:900;font-size:1.05rem;opacity:.95;transform:translateY(-2px);animation:cdBlink 1.2s infinite steps(2,jump-none)} @keyframes cdBlink{0%{opacity:1} 50%{opacity:.25} 100%{opacity:1}} .pd-countdown-modern .pd-cd-progress{display:none;position:relative;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.28)} .pd-countdown-modern .pd-cd-progress .bar{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#a3e635);box-shadow:0 2px 8px rgba(0,0,0,.25) inset;transition:width .35s ease} .pd-countdown-modern.danger{--cd-bg1:#f97316;--cd-bg2:#ef4444} @media (max-width:640px){.pd-countdown-modern{padding:.55rem .65rem;border-radius:12px;gap:.6rem} .pd-countdown-modern .unit{min-width:52px} .pd-countdown-modern .num{min-width:52px;height:36px;font-size:.98rem}} .pd-countdown-modern{position:relative} .pd-countdown-modern::after{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,0) 35%),radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%);border-radius:inherit;pointer-events:none;mix-blend-mode:screen;animation:sheen 4.5s ease-in-out infinite} @keyframes sheen{0%{opacity:.35;transform:translateX(-10%)} 50%{opacity:.15;transform:translateX(4%)} 100%{opacity:.35;transform:translateX(-10%)}} .pd-countdown-modern[data-mode="compact"]{gap:.55rem;padding:.5rem .6rem;border-radius:12px} .pd-countdown-modern[data-mode="compact"] .unit{min-width:46px} .pd-countdown-modern[data-mode="compact"] .num{min-width:46px;height:34px;font-size:.92rem} .pd-countdown-modern[data-mode="compact"] .pd-cd-label{font-size:.66rem} .pd-countdown-modern[data-mode="compact"] .pd-cd-icon{width:24px;height:24px;border-radius:8px} .pd-countdown-modern[data-mode="compact"] .pd-cd-progress{height:5px} .product-archive{max-width:1320px;margin-inline:auto;padding:0 0 3rem} .pa-toolbar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start;margin-bottom:1.4rem} .pa-title{font-size:1.4rem;margin:0;font-weight:600;line-height:1.2;color:#0f172a} .pa-left{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} .pa-filter-badge{background:#f1f5f9;border:1px solid #e2e8f0;padding:.45rem .6rem;border-radius:8px;font-size:.7rem;display:flex;align-items:center;gap:.4rem;line-height:1;color:#475569} .pa-filter-badge strong{color:#0f172a} .pa-filter-badge .clear{display:inline-block;text-decoration:none;background:#e2e8f0;color:#475569;font-weight:600;padding:0 .35rem .05rem;border-radius:4px;transition:.2s;font-size:.75rem;line-height:1} .pa-filter-badge .clear:hover{background:#cbd5e1;color:#1e293b} .pa-right{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start} .pa-search{display:flex;gap:.5rem;align-items:center;background:#fff;border:1px solid #e2e8f0;padding:.4rem .5rem;border-radius:8px} .pa-search input[type=text]{border:0;outline:none;font-size:.8rem;padding:.35rem .4rem;min-width:200px} .pa-search button{background:#0d6efd;border:0;color:#fff;font-size:.7rem;padding:.45rem .75rem;border-radius:6px;cursor:pointer;font-weight:600;letter-spacing:.3px;transition:.25s} .pa-search button:hover{background:#0b5dc4} .pa-sort{display:flex;gap:.4rem;align-items:center;font-size:.7rem;background:#fff;border:1px solid #e2e8f0;padding:.4rem .55rem;border-radius:8px} .pa-sort select{font-size:.75rem;padding:.35rem .5rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;outline:none} .pa-empty{border:1px dashed #cbd5e1;padding:3rem 1rem;text-align:center;border-radius:12px;background:#fff} .pa-empty p{margin:0 0 1rem;font-size:.9rem;color:#475569} .btn-reset{display:inline-block;background:#0d6efd;color:#fff;font-size:.7rem;padding:.55rem 1rem;border-radius:8px;text-decoration:none;font-weight:600;letter-spacing:.4px;transition:.25s} .btn-reset:hover{background:#0a58c7} .pa-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-items:stretch} .pa-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:.28s cubic-bezier(.4,0,.2,1);min-width:0;padding:0} .pa-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px -8px rgba(0,0,0,.15);border-color:#dce2ea} .pa-card .thumb{aspect-ratio:1/1;background:#f1f5f9;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative} .pa-card img{width:100%;height:100%;object-fit:cover;display:block} .badge-disc{position:absolute;top:8px;left:8px;background:#dc2626;color:#fff;font-size:.6rem;padding:4px 6px 3px;border-radius:6px;font-weight:700;letter-spacing:.4px} .pa-card .body{padding:.65rem .7rem .8rem;display:flex;flex-direction:column;gap:.45rem;min-height:90px} .pa-card .title{font-size:.75rem;line-height:1.25;margin:0;font-weight:600;color:#1e293b;height:2.4em;overflow:hidden} .pa-card .prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem} .pa-card .prices .final{font-size:.83rem;font-weight:700;color:#0d6efd} .pa-card .prices .ori{font-size:.63rem;text-decoration:line-through;color:#94a3b8;font-weight:500} .pa-card .cat{margin-top:auto;font-size:.55rem;letter-spacing:.6px;text-transform:uppercase;background:#f1f5f9;border:1px solid #e2e8f0;padding:.28rem .45rem .25rem;border-radius:20px;font-weight:600;color:#475569;align-self:flex-start} .pa-card .meta-line{margin-top:4px;font-size:.65rem;color:#475569} .pa-card .meta-line .sold{display:inline-block;background:#f1f5f9;padding:2px 6px 3px;border-radius:4px;font-weight:600;letter-spacing:.3px;color:#334155} .pa-pagination{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;font-size:.7rem;align-items:center} .pa-pagination a,.pa-pagination span{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;font-weight:600;padding:0 .6rem;box-sizing:border-box;border:1px solid #e2e8f0;background:#fff;color:#334155;transition:.25s} .pa-pagination a:hover{background:#f1f5f9;color:#0f172a} .pa-pagination .current{background:#0d6efd;color:#fff;border-color:#0d6efd} .pa-pagination .gap{border:none;background:transparent;font-weight:400;color:#94a3b8} .pa-mobile-filterbar{display:none} @media (max-width:640px){.pa-btn-filter{display:none} .pa-mobile-filterbar{display:block;position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #e2e8f0;padding:.4rem .5rem;margin:-.4rem -1rem .6rem} .pa-mobile-filterbar .mf-scroll{display:flex;align-items:center;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .pa-mobile-filterbar .mf-scroll::-webkit-scrollbar{display:none} .mf-chip{flex:0 0 auto;background:#fff;color:#334155;text-decoration:none;border:1px solid #e2e8f0;border-radius:999px;padding:.44rem .7rem;font-size:.78rem;font-weight:600;letter-spacing:.2px;white-space:nowrap} .mf-chip:active{transform:scale(.98)} .mf-chip.active{background:#eaf2ff;border-color:#0d6efd;color:#0d6efd} .mf-filter-btn{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1.5px solid #0d6efd;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#0d6efd;cursor:pointer} .mf-filter-btn:active{transform:scale(.96)} .mf-filter-btn svg{width:18px;height:18px;display:block} .mf-filter-btn .mf-badge{position:absolute;top:0;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;box-shadow:0 2px 6px -2px rgba(239,68,68,.6)}} @media (max-width:640px){.product-archive{padding:0 1rem 3rem} .pa-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .pa-search input[type=text]{min-width:140px} .pa-toolbar{flex-direction:column;align-items:stretch;margin-bottom:0;display:none} .pa-right{display:none} .pa-sort{width:100%;justify-content:center} .pa-mobile-filterbar{display:flex !important}} .pa-mobile-filterbar{display:none;align-items:center;gap:8px;padding:8px 0 8px 12px;background:#fff;width:100vw} .pa-mobile-filterbar .mf-scroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1 1 auto} .pa-mobile-filterbar .mf-scroll::-webkit-scrollbar{display:none} .pa-mobile-filterbar .mf-chip{flex:0 0 auto;white-space:nowrap} .pa-mobile-filterbar .mf-filter-btn{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;gap:6px} @media (max-width:768px){.pa-mobile-filterbar .mf-filter-btn{padding:6px 10px}} .pa-card .spec-chips{font-size:.6rem;color:#64748b;font-weight:500;letter-spacing:.2px;margin-top:2px;margin-bottom:4px;line-height:1.2;opacity:0.9;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pa-card .spec-chips .spec-divider{color:#94a3b8;font-weight:400;margin:0 1px} .holiday-notice{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#d32f2f 0%,#f57c00 100%);border-bottom:2px solid rgba(255,255,255,0.2);box-shadow:0 2px 8px rgba(0,0,0,0.15);animation:slideDown 0.4s cubic-bezier(0.4,0,0.2,1);transform-origin:top} .holiday-notice.hidden{animation:slideUp 0.3s cubic-bezier(0.4,0,0.2,1) forwards} @keyframes slideDown{from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1}} @keyframes slideUp{from{transform:translateY(0);opacity:1} to{transform:translateY(-100%);opacity:0}} .holiday-notice-container{max-width:1400px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px} .holiday-notice-content{display:flex;align-items:center;gap:12px;flex:1} .holiday-notice-icon{font-size:20px;line-height:1;flex-shrink:0} .holiday-notice-text{color:#ffffff;font-size:14px;font-weight:500;line-height:1.5;margin:0;text-shadow:0 1px 2px rgba(0,0,0,0.2)} .holiday-notice-emoji{display:inline-block;animation:bounce 2s ease-in-out infinite} @keyframes bounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}} .holiday-notice-close{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:6px;padding:6px;cursor:pointer;color:#ffffff;transition:all 0.2s ease;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px} .holiday-notice-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.05)} .holiday-notice-close:active{transform:scale(0.95)} .holiday-notice-close:focus{outline:2px solid rgba(255,255,255,0.5);outline-offset:2px} body.has-holiday-notice{padding-top:52px} @media (max-width:1024px){.holiday-notice-container{padding:10px 16px} .holiday-notice-text{font-size:13px} .holiday-notice-icon{font-size:18px} body.has-holiday-notice{padding-top:48px}} @media (max-width:640px){.holiday-notice-container{padding:10px 12px;gap:8px} .holiday-notice-content{gap:8px} .holiday-notice-text{font-size:12px;line-height:1.4} .holiday-notice-icon{font-size:16px} .holiday-notice-close{width:28px;height:28px} .holiday-notice-close svg{width:16px;height:16px} body.has-holiday-notice{padding-top:44px}} .pd-benchmark-section{background:#fff;border-radius:12px;padding:24px;margin:32px 0;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #e5e7eb} .benchmark-header{margin-bottom:20px} .benchmark-title{font-size:22px;font-weight:700;color:#1a1a1a;margin:0 0 12px 0;display:flex;align-items:center;gap:8px} .benchmark-hint{font-size:14px;color:#6b7280;margin:0} .benchmark-preview-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .benchmark-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;box-shadow:0 2px 6px rgba(102,126,234,0.25);transition:all 0.2s ease} .benchmark-badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.35)} .benchmark-badge strong{font-weight:600;opacity:0.9} .btn-load-benchmark{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;padding:14px 24px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(102,126,234,0.3);margin:0 auto} .btn-load-benchmark:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(102,126,234,0.4)} .btn-load-benchmark:disabled{opacity:0.6;cursor:not-allowed} .btn-load-benchmark .btn-icon{font-size:20px} .btn-load-benchmark.loading .btn-icon{animation:spin 1s linear infinite} @keyframes spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} .benchmark-content{margin-top:24px;padding-top:24px;border-top:2px solid #f3f4f6} .benchmark-loading{text-align:center;padding:40px 20px;color:#6b7280} .benchmark-loading-spinner{width:48px;height:48px;margin:0 auto 16px;border:4px solid #f3f4f6;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite} .benchmark-error{text-align:center;padding:32px 20px;color:#ef4444;background:#fee2e2;border-radius:8px} .benchmark-data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px} .benchmark-card{background:linear-gradient(135deg,#667eea15 0%,#764ba215 100%);border:1px solid #e5e7eb;border-radius:10px;padding:18px;text-align:center;transition:all 0.2s ease} .benchmark-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(102,126,234,0.15)} .benchmark-card-label{font-size:13px;color:#6b7280;font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px} .benchmark-card-value{font-size:24px;font-weight:700;color:#1a1a1a;line-height:1.2} .benchmark-card-value.large{font-size:28px} .benchmark-card-subtitle{font-size:12px;color:#9ca3af;margin-top:4px} .benchmark-specs{background:#f9fafb;border-radius:10px;padding:20px;margin-top:20px} .benchmark-specs-title{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 16px 0} .benchmark-spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e5e7eb} .benchmark-spec-row:last-child{border-bottom:none} .benchmark-spec-label{font-size:14px;color:#6b7280;font-weight:500} .benchmark-spec-value{font-size:14px;color:#1a1a1a;font-weight:600;text-align:right} .benchmark-score-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;margin-top:8px} .benchmark-score-badge.excellent{background:#10b981;color:#fff} .benchmark-score-badge.good{background:#3b82f6;color:#fff} .benchmark-score-badge.average{background:#f59e0b;color:#fff} .benchmark-score-badge.poor{background:#ef4444;color:#fff} .benchmark-attribution{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid #e5e7eb;font-size:13px;color:#9ca3af} .benchmark-attribution a{color:#667eea;text-decoration:none;font-weight:500} .benchmark-attribution a:hover{text-decoration:underline} @media (max-width:768px){.pd-benchmark-section{padding:16px;margin:20px 0} .benchmark-title{font-size:18px} .benchmark-preview-badges{flex-direction:column;gap:8px} .benchmark-badge{justify-content:center} .btn-load-benchmark{font-size:14px;padding:12px 20px} .benchmark-data-grid{grid-template-columns:1fr 1fr;gap:12px} .benchmark-card{padding:14px} .benchmark-card-value{font-size:20px} .benchmark-spec-row{flex-direction:column;gap:4px} .benchmark-spec-value{text-align:left}} @media (max-width:480px){.benchmark-data-grid{grid-template-columns:1fr}}:root{--mm2-bg:#ffffff;--mm2-surface:#ffffff;--mm2-surface-elevated:rgba(255,255,255,0.98);--mm2-muted:#f8fafc;--mm2-border:#e2e8f0;--mm2-border-strong:#cbd5e1;--mm2-accent:#6366f1;--mm2-accent-hover:#4f46e5;--mm2-accent-10:rgba(99,102,241,.10);--mm2-accent-20:rgba(99,102,241,.20);--mm2-fg:#0f172a;--mm2-fg-muted:#64748b;--mm2-fg-light:#94a3b8;--mm2-shadow-sm:0 2px 8px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);--mm2-shadow-md:0 8px 24px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.06);--mm2-shadow-lg:0 20px 60px rgba(15,23,42,.14),0 8px 24px rgba(15,23,42,.08);--mm2-shadow-xl:0 32px 80px rgba(15,23,42,.18),0 12px 32px rgba(15,23,42,.10);--mm2-shadow-hover:0 16px 40px rgba(15,23,42,.16),0 6px 16px rgba(15,23,42,.08);--mm2-radius-xl:20px;--mm2-radius-lg:16px;--mm2-radius-md:12px;--mm2-radius-sm:10px;--mm2-z:60;--mm2-transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--mm2-transition-base:250ms cubic-bezier(0.4,0,0.2,1);--mm2-transition-slow:350ms cubic-bezier(0.4,0,0.2,1)} .navbar{position:relative;z-index:var(--mm2-z)} .mm2-trigger{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--mm2-radius-md);border:1.5px solid var(--mm2-border);background:var(--mm2-surface);color:var(--mm2-fg);cursor:pointer;user-select:none;transition:all var(--mm2-transition-fast);text-decoration:none;font-weight:600;box-shadow:var(--mm2-shadow-sm)} .mm2-trigger:hover{border-color:var(--mm2-accent);background:var(--mm2-muted);box-shadow:var(--mm2-shadow-md);transform:translateY(-1px)} .mm2-trigger:active{transform:translateY(0)} .mm2-trigger svg{max-width:unset !important;transition:transform var(--mm2-transition-fast)} .mm2-trigger:hover svg{transform:scale(1.05)} .mm2-backdrop{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,.40);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);opacity:0;pointer-events:none;z-index:499;transition:opacity var(--mm2-transition-base)} .mm2-open .mm2-backdrop{opacity:1;pointer-events:auto} .mm2-panel{position:fixed;left:50%;top:120px;transform:translateX(-50%) translateY(-16px);width:min(1200px,95vw);background:var(--mm2-surface-elevated);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border:1.5px solid var(--mm2-border-strong);border-radius:var(--mm2-radius-xl);box-shadow:var(--mm2-shadow-xl);display:none;overflow:hidden;opacity:0;z-index:500;transition:transform var(--mm2-transition-slow),opacity var(--mm2-transition-base)} .mm2-open .mm2-panel{display:block;opacity:1;transform:translateX(-50%) translateY(0)} .mm2-view{display:none} .mm2-open .mm2-view.is-active{display:block} .mm2-top{padding:24px;max-height:75vh;overflow:auto} .mm2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} @media (max-width:1200px){.mm2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:960px){.mm2-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}} .mm2-open .mm2-card{animation:slideInUp 0.3s cubic-bezier(0.4,0,0.2,1) backwards} .mm2-open .mm2-card:nth-child(1){animation-delay:0.02s} .mm2-open .mm2-card:nth-child(2){animation-delay:0.04s} .mm2-open .mm2-card:nth-child(3){animation-delay:0.06s} .mm2-open .mm2-card:nth-child(4){animation-delay:0.08s} .mm2-open .mm2-card:nth-child(5){animation-delay:0.10s} .mm2-open .mm2-card:nth-child(6){animation-delay:0.12s} .mm2-open .mm2-card:nth-child(7){animation-delay:0.14s} .mm2-open .mm2-card:nth-child(8){animation-delay:0.16s} .mm2-open .mm2-card:nth-child(9){animation-delay:0.18s} .mm2-open .mm2-card:nth-child(10){animation-delay:0.20s} .mm2-open .mm2-card:nth-child(11){animation-delay:0.22s} .mm2-open .mm2-card:nth-child(12){animation-delay:0.24s} .mm2-open .mm2-card:nth-child(n+13){animation-delay:0.26s} @keyframes slideInUp{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)}} .mm2-card{position:relative;display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--mm2-radius-md);background:var(--mm2-surface);border:1.5px solid var(--mm2-border);text-decoration:none;color:var(--mm2-fg);transition:all var(--mm2-transition-fast);min-height:72px;box-shadow:var(--mm2-shadow-sm)} .mm2-card:hover{border-color:var(--mm2-accent);background:linear-gradient(135deg,rgba(255,255,255,1),rgba(248,250,252,1));box-shadow:var(--mm2-shadow-hover);transform:translateY(-3px)} .mm2-card:active{transform:translateY(-1px)} .mm2-card .mm2-ico{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e0e7ff,#fff);border:1.5px solid #c7d2fe;color:#4f46e5;flex-shrink:0;transition:all var(--mm2-transition-fast);box-shadow:0 2px 8px rgba(99,102,241,0.1)} .mm2-card:hover .mm2-ico{transform:scale(1.08) rotate(2deg);box-shadow:0 4px 16px rgba(99,102,241,0.2)} .mm2-card .mm2-ico svg{transition:transform var(--mm2-transition-fast)} .mm2-card:hover .mm2-ico svg{transform:scale(1.1)} .mm2-card .mm2-title{font-weight:700;font-size:15px;letter-spacing:-0.01em;line-height:1.3} .mm2-card .mm2-sub{color:var(--mm2-fg-muted);font-size:12.5px;margin-top:3px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mm2-card .mm2-count{display:inline-flex;padding:2px 8px;border-radius:6px;background:var(--mm2-accent-10);color:var(--mm2-accent);font-weight:600;font-size:11px;margin-left:4px} .mm2-detail{position:relative;padding:16px 24px 24px;max-height:70vh;overflow:auto} .mm2-detail-header{display:flex;align-items:center;gap:14px;padding:10px 0 16px;border-bottom:2px solid var(--mm2-muted);margin-bottom:16px} .mm2-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--mm2-border);background:#fff;color:var(--mm2-fg);cursor:pointer;transition:all var(--mm2-transition-fast);box-shadow:var(--mm2-shadow-sm)} .mm2-back:hover{border-color:var(--mm2-accent);background:var(--mm2-muted);transform:translateX(-3px);box-shadow:var(--mm2-shadow-md)} .mm2-detail-title{font-weight:800;font-size:18px;letter-spacing:-0.02em} .mm2-detail-layout{display:grid;grid-template-columns:280px 1fr;gap:20px} .mm2-subnav{position:sticky;top:8px;align-self:start;max-height:calc(70vh - 56px);overflow:auto;padding-right:6px} .mm2-subnav::-webkit-scrollbar{width:8px;height:8px} .mm2-subnav::-webkit-scrollbar-track{background:transparent} .mm2-subnav::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px} .mm2-subnav::-webkit-scrollbar-thumb:hover{background:#94a3b8} .mm2-subitem{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid transparent;background:transparent;color:var(--mm2-fg);cursor:pointer;text-align:left;transition:all var(--mm2-transition-fast);margin-bottom:6px;font-weight:600;font-size:14px;position:relative} .mm2-subitem::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--mm2-accent);border-radius:0 2px 2px 0;transition:height var(--mm2-transition-fast)} .mm2-subitem:hover{background:var(--mm2-muted);color:var(--mm2-accent-hover)} .mm2-subitem.active{background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(99,102,241,0.04));border-color:var(--mm2-accent-20);color:var(--mm2-accent-hover);box-shadow:inset 0 0 0 1px rgba(99,102,241,0.1)} .mm2-subitem.active::before{height:24px} .mm2-subcontent{min-height:240px} .mm2-links{display:grid;gap:12px 14px;grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1200px){.mm2-links{grid-template-columns:repeat(2,minmax(0,1fr))}} .mm2-link{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--mm2-border);border-radius:var(--mm2-radius-md);background:var(--mm2-surface);color:var(--mm2-fg);text-decoration:none;min-height:52px;font-weight:500;font-size:14px;transition:all var(--mm2-transition-fast);box-shadow:var(--mm2-shadow-sm);position:relative;justify-content:space-between} .mm2-link:hover{background:var(--mm2-muted);border-color:var(--mm2-accent);transform:translateX(4px);box-shadow:var(--mm2-shadow-md)} .mm2-link-text{flex:1} .mm2-thumbs{display:flex;gap:6px;align-items:center;margin-left:auto;flex-shrink:0} .mm2-thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1.5px solid var(--mm2-border);box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:all var(--mm2-transition-fast);background:var(--mm2-muted)} .mm2-link:hover .mm2-thumb{border-color:var(--mm2-accent);box-shadow:0 4px 10px rgba(99,102,241,0.15);transform:scale(1.08)} .mm2-thumb-skeleton{width:36px;height:36px;border-radius:8px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border:1.5px solid var(--mm2-border)} .mm2-badge{font-size:11px;padding:3px 10px;margin-left:auto;border-radius:12px;background:var(--mm2-accent-10);color:var(--mm2-accent);font-weight:700;border:1px solid var(--mm2-accent-20)} .mm2-seeall{border:2px dashed var(--mm2-accent);background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(99,102,241,.02));font-weight:700} .mm2-seeall:hover{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(99,102,241,.06));border-style:solid;transform:translateX(6px) scale(1.02)} @media (max-width:960px){.mm2-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:88vh;transform:translateX(0) translateY(100%);border-radius:var(--mm2-radius-xl) var(--mm2-radius-xl) 0 0;border-bottom:none} .mm2-open .mm2-panel{transform:translateX(0) translateY(0);z-index:9999} .mm2-backdrop{backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2)} .mm2-mobile-close{position:absolute;top:4px;right:8px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(226,232,240,0.6);background:rgba(255,255,255,0.85);backdrop-filter:blur(12px) saturate(1.8);-webkit-backdrop-filter:blur(12px) saturate(1.8);color:var(--mm2-fg-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--mm2-transition-fast);box-shadow:0 2px 8px rgba(15,23,42,0.08);z-index:20} .mm2-mobile-close:hover{background:rgba(254,242,242,0.95);border-color:rgba(252,165,165,0.8);color:#dc2626;box-shadow:0 4px 12px rgba(220,38,38,0.15)} .mm2-mobile-close:active{transform:scale(0.92)} .mm2-top::before,.mm2-detail::before{content:'';position:sticky;top:0;left:50%;transform:translateX(-50%);width:40px;height:4px;background:var(--mm2-border-strong);border-radius:999px;margin:12px auto 20px;display:block;z-index:10;transition:background var(--mm2-transition-fast)} .mm2-panel:active .mm2-top::before,.mm2-panel:active .mm2-detail::before{background:#94a3b8} .mm2-top{padding:10px} .mm2-top,.mm2-detail{max-height:min(82vh,720px);padding-top:8px} .mm2-detail-layout{display:block} .mm2-subnav{position:static;max-height:none;overflow:visible;display:grid;gap:10px;padding:10px 4px 16px;margin-bottom:16px;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:2px solid var(--mm2-muted)} .mm2-subitem{margin:0;width:100%;text-align:center;border-radius:14px;background:#fff;border:1.5px solid var(--mm2-border);white-space:normal;line-height:1.3;min-height:48px;justify-content:center;padding:12px 10px;font-size:13.5px;box-shadow:var(--mm2-shadow-sm)} .mm2-subitem::before{display:none} .mm2-subitem:hover{transform:scale(1.02)} .mm2-subitem.active{background:linear-gradient(135deg,var(--mm2-accent),var(--mm2-accent-hover));border-color:var(--mm2-accent-hover);color:white;box-shadow:0 4px 12px rgba(99,102,241,0.3);font-weight:700} .mm2-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .mm2-thumbs{display:none} .mm2-card{min-height:80px;padding:18px 14px} .mm2-card .mm2-ico{width:50px;height:50px} .mm2-card .mm2-title{font-size:14px} .mm2-card .mm2-sub{font-size:11.5px} .mm2-link{min-height:56px;padding:16px} .mm2-back{width:44px;height:44px} .mm2-grid{gap:10px}} .pd-compare-section{margin:0.5rem 0;display:flex;align-items:center;gap:0.5rem} .pd-compare-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 0.85rem;border:1px solid #cbd5e1;border-radius:20px;background:#fff;color:#64748b;font-weight:600;font-size:0.8rem;cursor:pointer;transition:all 0.2s ease;position:relative;white-space:nowrap} .pd-compare-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#f0f9ff;transform:translateY(-1px);box-shadow:0 2px 6px rgba(59,130,246,0.15)} .pd-compare-btn.added{border-color:#16a34a;color:#16a34a;background:#f0fdf4} .pd-compare-btn .compare-remove{display:none} .pd-compare-btn.added .compare-text{display:none} .pd-compare-btn.added .compare-remove{display:flex !important;align-items:center;gap:0.25rem;font-weight:600;font-size:0.9rem;color:#dc2626 !important;opacity:1 !important;visibility:visible !important;z-index:1;position:relative} .pd-compare-btn.added .compare-remove[hidden]{display:flex !important} .pd-compare-btn.added .compare-remove{display:flex !important} [hidden].compare-remove{display:none !important} .pd-compare-btn.added [hidden].compare-remove{display:flex !important} .pd-compare-btn.added{border-color:#dc2626 !important;color:#dc2626 !important;background:#fef2f2 !important} .pd-compare-btn.added .compare-remove svg{color:#dc2626 !important} .pd-compare-btn.added:hover{border-color:#15803d;color:#15803d;background:#dcfce7;transform:translateY(-1px);box-shadow:0 2px 6px rgba(22,163,74,0.2)} .pd-compare-btn .compare-icon{width:16px;height:16px;flex-shrink:0} .pd-compare-info{display:inline-flex;align-items:center} .compare-note{color:#94a3b8;font-size:0.7rem;font-weight:500;transition:color 0.2s ease} .pd-compare-btn.added+.pd-compare-info .compare-note{color:#16a34a;font-weight:600} .compare-indicator{position:relative} .compare-indicator .badge{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;color:white;border-radius:9px;font-size:11px;.compare-floating-badge{position:fixed;right:16px;bottom:calc(20px+60px);width:auto;min-width:56px;height:56px;padding:0 16px;border-radius:28px;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 8px 24px -8px rgba(59,130,246,0.5);cursor:pointer;z-index:1104;opacity:0;transform:translateY(8px) scale(0.9);transition:opacity 0.3s ease,transform 0.3s ease,box-shadow 0.2s ease;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:0.85rem;pointer-events:none} .compare-floating-badge.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .compare-floating-badge:hover{box-shadow:0 12px 32px -10px rgba(59,130,246,0.6);transform:translateY(-2px) scale(1.02)} .compare-floating-badge:active{transform:translateY(0) scale(0.98)} .compare-floating-badge .cfb-icon{width:20px;height:20px;flex-shrink:0} .compare-floating-badge .cfb-count{font-size:0.9rem;font-weight:700;min-width:20px;text-align:center;background:rgba(255,255,255,0.25);padding:2px 8px;border-radius:12px;line-height:1;display:flex;align-items:center;justify-content:center;height:24px} .compare-floating-badge .cfb-text{display:none} @media (min-width:641px){.compare-floating-badge .cfb-text{display:block;white-space:nowrap}} @media (max-width:640px){.compare-floating-badge{right:14px;bottom:calc(var(--scroll-top-bottom,calc(68px+18px+env(safe-area-inset-bottom)))+60px);min-width:48px;height:48px;padding:0 12px;border-radius:24px} .compare-floating-badge .cfb-icon{width:18px;height:18px} .compare-floating-badge .cfb-count{font-size:0.8rem;padding:2px 6px;height:20px}} font-weight:600;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform 0.2s ease} .compare-indicator .badge.active{transform:scale(1)} .compare-sidebar{position:fixed;top:0;right:-400px;width:400px;height:100vh;background:#ffffff;box-shadow:-4px 0 20px rgba(0,0,0,0.1);z-index:9999;display:flex;flex-direction:column;transition:right 0.3s ease} .compare-sidebar.open{right:0} .compare-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9998;opacity:0;visibility:hidden;transition:all 0.3s ease} .compare-overlay.active{opacity:1;visibility:visible} .compare-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:1px solid #e2e8f0;background:#f8fafc} .compare-title{display:flex;align-items:center;gap:0.5rem;font-size:1rem;font-weight:600;color:#1e293b;margin:0} .compare-count{color:#64748b;font-weight:400} .compare-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#64748b;cursor:pointer;transition:all 0.2s ease} .compare-close:hover{background:#e2e8f0;color:#374151} .compare-content{flex:1;overflow-y:auto;padding:1rem} .compare-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:2rem 1rem} .compare-empty h5{margin:1rem 0 0.5rem;color:#374151} .compare-empty p{color:#64748b;font-size:0.875rem;line-height:1.5} .compare-list{display:flex;flex-direction:column;gap:0.75rem} .compare-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;border:1px solid #e2e8f0;border-radius:8px;background:#ffffff;transition:all 0.2s ease} .compare-item:hover{border-color:#cbd5e1;box-shadow:0 2px 8px rgba(0,0,0,0.05)} .compare-item-image{flex-shrink:0;width:48px;height:48px;border-radius:6px;overflow:hidden;border:1px solid #e2e8f0} .compare-item-image img{width:100%;height:100%;object-fit:cover} .compare-item-info{flex:1;min-width:0} .compare-item-name{font-weight:500;font-size:0.875rem;color:#1e293b;margin-bottom:0.25rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .compare-item-price{font-weight:600;font-size:0.8rem;color:#059669} .compare-item-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:4px;background:transparent;color:#dc2626;cursor:pointer;transition:all 0.2s ease} .compare-item-remove:hover{background:#fef2f2;color:#991b1b} .compare-actions{padding:1rem;border-top:1px solid #e2e8f0;display:flex;gap:0.75rem} .compare-actions .btn{flex:1;padding:0.75rem 1rem;border-radius:6px;font-weight:600;font-size:0.875rem;display:flex;align-items:center;justify-content:center;gap:0.5rem;cursor:pointer;transition:all 0.2s ease} .btn-outline-danger{border:1px solid #dc2626;background:transparent;color:#dc2626} .btn-outline-danger:hover{background:#dc2626;color:white} .btn-primary{border:1px solid #3b82f6;background:#3b82f6;color:white} .btn-primary:hover{background:#2563eb;border-color:#2563eb} .btn-primary:disabled{opacity:0.5;cursor:not-allowed} .btn-primary:disabled:hover{background:#3b82f6;border-color:#3b82f6} .ai-compare-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:none;align-items:center;justify-content:center} .ai-compare-modal.open{display:flex} .ai-compare-modal .modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)} .modal-container{position:relative;width:90%;max-width:1000px;max-height:90vh;background:#ffffff;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow:hidden} .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0;background:#f8fafc} .modal-title{display:flex;align-items:center;gap:0.75rem;font-size:1.25rem;font-weight:600;color:#1e293b;margin:0} .modal-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:8px;background:transparent;color:#64748b;cursor:pointer;transition:all 0.2s ease} .modal-close:hover{background:#e2e8f0;color:#374151} .modal-content{flex:1;overflow-y:auto;padding:2rem} .ai-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center} .loading-animation{margin-bottom:1rem} .typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:1rem} .typing-indicator span{width:8px;height:8px;background:#3b82f6;border-radius:50%;animation:typing 1.4s infinite ease-in-out} .typing-indicator span:nth-child(2){animation-delay:0.2s} .typing-indicator span:nth-child(3){animation-delay:0.4s} @keyframes typing{0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)}} .ai-loading p{font-weight:500;color:#1e293b;margin-bottom:0.5rem} .ai-loading small{color:#64748b} .ai-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center} .ai-error h4{margin:1rem 0 0.5rem;color:#dc2626} .ai-error p{color:#64748b;margin-bottom:1.5rem} .ai-results>div{margin-bottom:2rem} .ai-summary-card,.ai-comparison-table,.ai-detailed-analysis,.ai-recommendations,.ai-tips{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem} .ai-results h4{display:flex;align-items:center;gap:0.5rem;font-size:1.1rem;font-weight:600;color:#1e293b;margin-bottom:1rem} .summary-text{font-size:1rem;line-height:1.6;color:#374151;margin-bottom:1rem} .winner-badge{padding:1rem;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;border-radius:8px} .winner-badge strong{display:block;margin-bottom:0.25rem} .winner-badge small{opacity:0.9;font-size:0.875rem} .comparison-grid{display:grid;gap:1rem;margin-top:1rem} .comparison-category{background:white;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden} .category-header{background:#f1f5f9;padding:0.75rem 1rem;font-weight:600;color:#1e293b;border-bottom:1px solid #e2e8f0} .category-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:#e2e8f0} .product-score{background:white;padding:1rem;text-align:center} .score-value{display:inline-flex;align-items:center;gap:0.25rem;margin-bottom:0.5rem} .score-stars{color:#fbbf24} .score-note{font-size:0.8rem;color:#64748b;line-height:1.3} .product-name-header{margin-bottom:0.5rem} .product-name-header strong{font-size:.8rem;font-weight:600;color:#1e293b;line-height:1.3;display:block;word-break:break-word} .product-price{font-size:0.8rem;font-weight:600;color:#059669} .products-analysis{display:grid;gap:1rem;margin-top:1rem} .product-analysis{background:white;border:1px solid #e2e8f0;border-radius:8px;padding:1rem} .product-analysis h5{color:#1e293b;margin-bottom:0.75rem;font-weight:600} .analysis-section{margin-bottom:0.75rem} .analysis-section:last-child{margin-bottom:0} .analysis-section h6{font-size:0.875rem;font-weight:600;margin-bottom:0.5rem} .analysis-section h6.strengths{color:#059669} .analysis-section h6.weaknesses{color:#dc2626} .analysis-section h6.best-for{color:#7c3aed} .analysis-section ul{list-style:none;padding:0;margin:0} .analysis-section li{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:0.25rem;font-size:0.875rem;line-height:1.4} .analysis-section li:before{content:"•";color:#64748b;font-weight:bold;margin-top:0.1rem} .best-for-text{font-size:0.875rem;color:#374151;font-style:italic} .recommendations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem} .recommendation-card{background:white;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;text-align:center} .recommendation-card h5{font-size:1rem;margin-bottom:0.75rem;color:#1e293b} .recommendation-card p{font-size:0.875rem;color:#374151;line-height:1.5} .tips-list{list-style:none;padding:0;margin:1rem 0 0 0} .tips-list li{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:0.75rem;font-size:0.9rem;line-height:1.5;color:#374151} .tips-list li:before{content:"💡";font-size:1rem;margin-top:0.1rem} .modal-footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-top:1px solid #e2e8f0;background:#f8fafc} .btn-outline-secondary{border:1px solid #64748b;background:transparent;color:#64748b;padding:0.75rem 1.5rem;border-radius:6px;font-weight:600;display:flex;align-items:center;gap:0.5rem;cursor:pointer;transition:all 0.2s ease} .btn-outline-secondary:hover{background:#64748b;color:white} @media (max-width:880px){.pd-compare-section{margin:1rem 0;display:block} .pd-compare-btn{width:100%;font-size:0.85rem;padding:0.65rem 1rem;border-radius:10px;justify-content:center;min-height:44px} .pd-compare-btn .compare-icon{width:16px;height:16px} .pd-compare-info{margin-top:0.5rem;display:block;text-align:center} .compare-note{font-size:0.7rem;display:block}} @media (max-width:768px){.compare-sidebar{width:100%;right:-100%;height:100vh;height:100dvh} .compare-actions{position:sticky;bottom:0;background:white;border-top:2px solid #e2e8f0;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:10} .compare-actions .btn{min-height:48px;font-size:0.9rem;font-weight:700} .modal-container{width:95%;max-height:95vh;max-height:95dvh} .modal-header,.modal-content,.modal-footer{padding:1rem} .recommendations-grid{grid-template-columns:1fr} .category-products{grid-template-columns:1fr} .modal-footer{flex-direction:column;gap:0.75rem} .modal-footer .btn{width:100%} .pd-compare-section{display:block !important;visibility:visible !important;opacity:1 !important;margin:1rem 0;padding:0;position:relative !important;z-index:1 !important;max-width:100%;overflow:hidden} .pd-compare-btn{display:flex !important;visibility:visible !important;opacity:1 !important;width:100%;padding:0.75rem 1rem;font-size:0.9rem;min-height:48px;border:2px solid #e2e8f0 !important;background:#fff !important;position:relative !important;z-index:2 !important;box-sizing:border-box;white-space:normal !important;flex-wrap:wrap;gap:0.5rem} .pd-compare-btn .compare-text{display:inline !important;visibility:visible !important;font-weight:600;color:#475569 !important} .pd-compare-btn .compare-remove{display:none !important} .pd-compare-btn.added .compare-remove{display:flex !important;flex-wrap:wrap;align-items:center;gap:0.4rem;white-space:normal !important;word-break:break-word} .pd-compare-btn .compare-icon{display:inline-block !important;width:18px;height:18px;flex-shrink:0} .pd-compare-info{margin-top:0.5rem} .compare-note{font-size:0.85rem !important;display:block !important;visibility:visible !important;color:#64748b !important}} @media (max-width:480px){#compareBtn{width:46px;height:46px} .pd-compare-section{-webkit-transform:translateZ(0);transform:translateZ(0)} .pd-compare-btn{-webkit-appearance:none !important;appearance:none !important;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .compare-sidebar{height:100vh;height:-webkit-fill-available;min-height:100vh;min-height:-webkit-fill-available} .compare-actions{position:sticky;bottom:0;background:white;border-top:2px solid #e2e8f0;box-shadow:0 -4px 12px rgba(0,0,0,0.15);padding:1.25rem 1rem;z-index:20} .compare-actions .btn{min-height:52px;font-size:1rem;font-weight:700;border-radius:8px} .compare-content{padding-bottom:6rem}} @media (-webkit-min-device-pixel-ratio:2) and (max-width:430px){.pd-compare-section{display:block !important} .pd-compare-btn{display:flex !important;min-height:44px;font-size:16px} .compare-sidebar{height:100vh;height:100dvh;height:-webkit-fill-available;max-height:100vh;max-height:100dvh;max-height:-webkit-fill-available;overflow:hidden} .compare-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem 1rem 8rem 1rem} .compare-actions{position:fixed;bottom:0;left:0;right:0;width:100%;background:white;border-top:2px solid #e2e8f0;box-shadow:0 -4px 20px rgba(0,0,0,0.2);padding:1rem;z-index:9999;display:flex !important;gap:0.75rem} .compare-actions .btn{flex:1;min-height:30px;font-size:.8rem;font-weight:600;border-radius:12px;display:flex !important;align-items:center;justify-content:center;gap:0.5rem} #compareAnalyze{background:#3b82f6 !important;border-color:#3b82f6 !important;color:white !important;box-shadow:0 4px 12px rgba(59,130,246,0.3)} #compareAnalyze:not(:disabled){background:#2563eb !important;border-color:#2563eb !important;transform:scale(1.02)} #compareAnalyze:disabled{opacity:0.6 !important;background:#9ca3af !important;border-color:#9ca3af !important}} .ai-disclaimer{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem;background:#fef3c7;border:1px solid #fbbf24;border-radius:8px;margin:0} .disclaimer-icon{font-size:1.25rem;flex-shrink:0;margin-top:0.125rem} .disclaimer-text{font-size:0.85rem;line-height:1.4;color:#92400e} .disclaimer-text strong{color:#78350f;font-weight:600} .compare-disclaimer{margin-top:1rem;padding:1rem;background:#f0f9ff;border:1px solid #0ea5e9;border-radius:8px} .compare-disclaimer h6{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;font-weight:600;color:#0c4a6e;margin-bottom:0.5rem} .compare-disclaimer p{font-size:0.8rem;line-height:1.4;color:#075985;margin-bottom:0.5rem} .compare-disclaimer p:last-child{margin-bottom:0} .compare-disclaimer ul{list-style:none;padding:0;margin:0.5rem 0 0 0} .compare-disclaimer li{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:0.25rem;font-size:0.75rem;line-height:1.3;color:#075985} .compare-disclaimer li:before{content:"•";color:#0ea5e9;font-weight:bold;margin-top:0.1rem;flex-shrink:0} @supports (height:100dvh){@media (max-width:768px){.compare-sidebar{height:100dvh !important;max-height:100dvh !important} .modal-container{max-height:95dvh !important}}} @supports (height:-webkit-fill-available){@media (max-width:768px){.compare-sidebar{height:-webkit-fill-available !important;max-height:-webkit-fill-available !important}}} @media (max-width:768px) and (orientation:portrait){.compare-sidebar{min-height:600px;height:calc(100vh - env(keyboard-inset-height,0));height:calc(100vh - env(safe-area-inset-bottom,0))} .compare-actions{position:sticky !important;bottom:env(safe-area-inset-bottom,0) !important;margin-bottom:0 !important;padding-bottom:calc(1rem+env(safe-area-inset-bottom,0)) !important}} @media (display-mode:standalone){.compare-sidebar{height:100vh !important;height:100dvh !important}} .btn-sm{padding:0.5rem 0.75rem;font-size:0.8rem} [hidden]{display:none !important} .pulse-highlight{animation:pulse-glow 2s ease-in-out 3;box-shadow:0 0 0 0 rgba(59,130,246,0.7)} @keyframes pulse-glow{0%{box-shadow:0 0 0 0 rgba(59,130,246,0.7)} 50%{box-shadow:0 0 0 10px rgba(59,130,246,0)} 100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}} .flying-product{position:fixed;z-index:9999;pointer-events:none} .flying-product img{border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3)} .prod-card{position:relative} .prod-card-actions-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.08);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1);-webkit-tap-highlight-color:transparent} .prod-card-actions-btn:hover{background:#fff;border-color:rgba(0,0,0,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:scale(1.05)} .prod-card-actions-btn:active{transform:scale(0.95)} .prod-card-actions-btn svg{width:20px;height:20px;color:#64748b;display:block} @media (min-width:641px){.prod-card-actions-btn{opacity:0;pointer-events:none} .prod-card:hover .prod-card-actions-btn{opacity:1;pointer-events:auto}} @media (max-width:640px){.prod-card-actions-btn{width:28px;height:28px;top:6px;right:6px;opacity:95%} .prod-card-actions-btn svg{width:18px;height:18px}} .pca-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(4px);z-index:99998;opacity:0;visibility:hidden;transition:all 0.3s ease} .pca-overlay.active{opacity:1;visibility:visible} .pca-bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.15);z-index:99999;max-width:600px;margin:0 auto;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94)} .pca-bottom-sheet.active{transform:translateY(0)} .pca-sheet-handle{width:40px;height:4px;background:#cbd5e1;border-radius:999px;margin:12px auto 8px} .pca-sheet-product{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid #f1f5f9} .pca-product-image{width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid #e2e8f0} .pca-product-info{flex:1;min-width:0} .pca-product-name{font-size:14px;font-weight:600;color:#0f172a;margin:0 0 4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3} .pca-product-price{font-size:15px;font-weight:700;color:#0ea5e9;margin:0} .pca-product-stock{font-size:12px;color:#64748b;margin:2px 0 0 0} .pca-product-stock.in{color:#16a34a} .pca-product-stock.low{color:#ea580c} .pca-product-stock.out{color:#dc2626} .pca-sheet-actions{padding:8px 0 20px} .pca-action-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:transparent;border:0;width:100%;cursor:pointer;transition:background-color 0.15s ease;-webkit-tap-highlight-color:transparent} .pca-action-item:hover{background:#f8fafc} .pca-action-item:active{background:#f1f5f9} .pca-action-item:disabled{opacity:0.4;cursor:not-allowed} .pca-action-item:disabled:hover{background:transparent} .pca-action-icon{width:24px;height:24px;color:#475569;flex-shrink:0} .pca-action-content{flex:1;text-align:left} .pca-action-label{font-size:15px;font-weight:600;color:#0f172a;margin:0 0 2px 0} .pca-action-desc{font-size:12px;color:#64748b;margin:0} .pca-action-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:#0ea5e9;color:#fff;font-size:11px;font-weight:700;border-radius:999px;margin-left:auto} .pca-action-badge.compare{background:#8b5cf6} .pca-action-item.cart .pca-action-icon{color:#0ea5e9} .pca-action-item.compare .pca-action-icon{color:#8b5cf6} .pca-action-item.compare.active{background:rgba(139,92,246,0.05)} .pca-action-item.compare.active .pca-action-label{color:#8b5cf6} .pca-action-item.compare.active .pca-action-icon{color:#8b5cf6} .pca-action-item.share .pca-action-icon{color:#64748b} .pca-action-item.loading{pointer-events:none} .pca-action-item.loading .pca-action-icon{animation:spin 1s linear infinite} @keyframes spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} .pca-action-item.success .pca-action-icon{animation:checkmark 0.5s ease} @keyframes checkmark{0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)}} @supports (padding-bottom:env(safe-area-inset-bottom)){.pca-sheet-actions{padding-bottom:calc(20px+env(safe-area-inset-bottom))}} @media (max-width:640px){.pca-bottom-sheet{border-radius:16px 16px 0 0} .pca-sheet-product{padding:10px 16px} .pca-product-image{width:50px;height:50px} .pca-product-name{font-size:13px} .pca-product-price{font-size:14px} .pca-action-item{padding:14px 16px;gap:12px} .pca-action-icon{width:22px;height:22px} .pca-action-label{font-size:14px}} .flying-product{position:fixed;pointer-events:none;z-index:99999;animation:fadeOut 0.8s ease forwards} @keyframes fadeOut{to{opacity:0;transform:scale(0.5)}} @media (min-width:1024px){} @media print{.prod-card-actions-btn,.pca-overlay,.pca-bottom-sheet{display:none !important}} .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:all 0.2s ease} .modal-overlay.show{opacity:1;visibility:visible} .modal-dialog{background:white;border-radius:16px;box-shadow:0 25px 50px rgba(0,0,0,0.15);max-width:400px;width:90%;max-height:90vh;overflow-y:auto;transform:scale(0.95);transition:transform 0.2s ease} .modal-overlay.show .modal-dialog{transform:scale(1)} .modal-header{padding:24px 24px 16px;border-bottom:1px solid #f1f5f9} .modal-title{font-size:20px;font-weight:700;color:#0f172a;margin:0;display:flex;align-items:center;gap:12px} .modal-body{padding:16px 24px 24px} .modal-message{font-size:16px;line-height:1.5;color:#475569;margin:0} .modal-actions{display:flex;gap:12px;margin-top:24px} .modal-btn{flex:1;padding:12px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;text-align:center} .modal-btn-secondary{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0} .modal-btn-secondary:hover{background:#f1f5f9;border-color:#cbd5e1} .modal-btn-danger{background:#ef4444;color:white} .modal-btn-danger:hover{background:#dc2626} .modal-btn-primary{background:#3b82f6;color:white} .modal-btn-primary:hover{background:#2563eb} .modal-icon{font-size:24px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px} .modal-icon.danger{background:#fef2f2;color:#ef4444} .modal-icon.warning{background:#fffbeb;color:#f59e0b} .modal-icon.success{background:#f0fdf4;color:#22c55e} .modal-icon.info{background:#eff6ff;color:#3b82f6} @media (max-width:640px){.modal-dialog{margin:16px;max-width:none;width:auto} .modal-header,.modal-body{padding-left:20px;padding-right:20px} .modal-actions{flex-direction:column} .modal-btn{flex:none}}