@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;
}

:root {
 --brand-50:#eafbef;
 --brand-100:#d3f8df;
 --brand-500:#9aefb4;
 --brand-600:#9aefb4;
 --gray-900:#1F1F23;
 --gray-700:#3D3F45;
 --gray-500:#6F737B;
 --gray-300:#C5C9CF;
 --gray-100:#f3f7f4;
 --border:#e4ebe6;
 --radius:8px;
 --transition: .18s ease;
 /* font-family: "Inter", system-ui, sans-serif; */
 font-family: 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { 
 margin:0; 
 padding-bottom: 0; /* Reset for desktop */
 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; }

/* ========== Desktop base (Glassmorphism Modern with Warm Gradient) ========== */
.navbar {
 background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(234,251,239,0.85) 100%);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(228,235,230,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;
}

/* Accent line gradient orange */
.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; }

/* Secara default (desktop) ikon login disembunyikan; teks muncul */
.login-btn .login-ico { display:none; }
.navbar-logo {
 display: none;
 background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(234,251,239,0.85) 100%);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(228,235,230,0.6);
 box-shadow:0 2px 16px -4px rgba(0,0,0,0.08);
 position:sticky;
 top:0;
 z-index:500;
}

/* Hide bottom navigation on desktop - only show on mobile */
.bottom-nav {
 display: none;
}

/* ==============================================================
 MOBILE (<=640px)
 ============================================================== */
@media (max-width:640px){
 .container { padding:10px 16px; }
 
 .topbar { display:none !important; }

 /* Add padding bottom for sticky bottom nav */
 body {
 padding-bottom: 68px; /* Height of bottom nav + safe area */
 }

 /* Mobile Top Navbar - Clean & Minimal */
 .navbar {
 background:linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(234,251,239,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;
 }

 /* Simple grid layout - Logo, Search, Category */
 .nav-inner {
 display:grid;
 grid-template-columns:1fr;
 gap:10px;
 padding:12px 16px 0 12px;
 min-height:auto;
 }

 /* Logo centered at top */
 .nav-inner .logo {
 justify-self:center;
 margin:0;
 display:flex;
 }
 .nav-inner .logo img { height:36px; }

 /* Search bar - full width */
 .nav-inner .search {
 position:relative;
 display:flex;
 align-items:center;
 gap:0;
 width:100%;
 height:44px;
 background:#fff;
 border:1.5px solid #e5ebe7;
 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:#9aefb4;
 box-shadow:0 0 0 3px rgba(84,227,128, 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;
 }

 /* Hide desktop nav actions but keep structure for userMenu */
 .nav-inner .nav-actions {
 display:flex !important; /* Keep flex to allow userMenu positioning */
 visibility:hidden; /* Hide visually but keep in DOM */
 pointer-events:none; /* Disable interactions with hidden elements */
 position:absolute; /* Remove from flow */
 right:0;
 top:0;
 }
 
 /* Re-enable userMenu for logged-in users */
 .nav-inner .nav-actions #userMenu {
 visibility:visible !important;
 pointer-events:auto !important;
 }
 
 .nav-inner .logo { display: none; }
 .navbar-logo {
 display: block;
 /* background:linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(234,251,239,0.9) 100%); */
 backdrop-filter:blur(16px);
 -webkit-backdrop-filter:blur(16px);
 position: static; /* Remove sticky on mobile */
 box-shadow: none;
 border-bottom: 0;
 padding-top: .6rem;
 }
 .nav-inner .logo-mobile { display: block; }
 
 /* Category menu wrapper will handle visibility */

 /* ==============================================================
 BOTTOM NAVIGATION - Styles moved to bottom-nav.css
 ============================================================== */
 /* All bottom-nav styles now in /assets/css/bottom-nav.css */

 /* Hide desktop elements that now moved to bottom nav */
 #wishlistBtn,
 #notifBtn,
 #loginBtn { display:none !important; }
 
 /* Hide desktop user menu on mobile - use bottom sheet instead */
 .navbar #userMenu { 
 display:none !important;
 }
 
 .nav-actions .cart-indicator,
 .nav-actions .compare-indicator {
 display:none !important;
 }

 /* Hide category button from bottom nav */
 #bottomCategoryBtn {
 display: none !important;
 }
 
 /* User menu button styling for mobile - scoped to navbar only */
 .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,235,230,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;
 }
 
 /* User dropdown positioning for mobile */
 .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,235,230,0.6);
 box-shadow:0 8px 24px -8px rgba(0,0,0,0.2);
 z-index:1002 !important;
 border-radius:12px;
 padding:8px 0;
 }
 
 /* Force visibility when not hidden attribute */
 .navbar #userMenu .user-dropdown:not([hidden]) {
 display:block !important;
 visibility:visible !important;
 opacity:1 !important;
 }

 /* Container untuk kategori dan tombol kategori sejajar */
 .navbar .container:last-child {
 display:flex !important;
 align-items:center !important;
 padding:4px 16px 6px !important;
 gap:5px;
 overflow:visible;
 }
 
 /* Wrapper untuk mega-cats dengan fade gradient (mobile only) */
 .mega-cats-wrapper {
 position:relative;
 flex:1;
 overflow:hidden;
 min-height:34px; /* Ensure content is visible */
 display:flex; /* Ensure wrapper is flex container */
 }
 
 /* Fade gradient indicator di ujung kanan (mobile only) */
 .mega-cats-fade {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 width:80px; /* Increased from 60px for better visibility */
 background:linear-gradient(to left, 
 rgba(234,251,239,1) 0%, 
 rgba(234,251,239,0.98) 15%,
 rgba(234,251,239,0.85) 35%, 
 transparent 100%);
 pointer-events:none;
 z-index:5; /* Increased z-index */
 transition:opacity 0.3s ease;
 }
 
 /* Kategori menu di mobile */
 .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; /* For z-index stacking */
 z-index:1; /* Below fade gradient */
 }
 .mega-cats.container::-webkit-scrollbar { display:none; }

 /* Styling untuk menu items di mobile */
 .mega-cats a {
 font-size:13px;
 padding:6px 10px;
 white-space:nowrap;
 flex-shrink:0;
 position:relative; /* Ensure proper stacking */
 }
 .mega-cats a.active {
 background:var(--brand-600);
 color:#fff;
 font-weight:600;
 border-radius:6px;
 }
 
 /* Tombol kategori di mobile */
 .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; }
 /* Tombol more kategori */
 .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 BOTTOM SHEET
 ============================================================== */
 .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 #e5ebe7;
 }
 
 .mobile-user-sheet-handle {
 width:40px;
 height:4px;
 background:#d1dbd4;
 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, #d3f8df, #b4f3c8);
 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:#112718;
 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:#37513f;
 font-size:15px;
 transition:background .2s;
 border:none;
 background:none;
 width:100%;
 text-align:left;
 cursor:pointer;
 }
 
 .mobile-user-sheet-item:active {
 background:#f3f6f4;
 }
 
 .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:#e5ebe7;
 margin:8px 0;
 }
}

/* END NAVBAR */

.logo img { display:block; }
.search {
 flex:1;
 position:relative;
 display:flex;
 align-items:center;
 gap:0;
 background:#fff;
 border:1.5px solid #e5ebe7;
 border-radius:12px;
 padding:0 16px;
 height:38px;
 transition:all 0.3s ease;
}
.search:focus-within {
 border-color:#9aefb4;
 box-shadow:0 0 0 3px rgba(84,227,128, 0.1);
}
.search input {
 flex:1;
 border:none;
 outline:none;
 background:transparent;
 font-size:15px;
 padding:0 12px;
 height:100%;
 color:#1f3726;
}
.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:#9aefb4;
}
.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,251,250,0.9));
 border:1px solid rgba(228,235,230,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,251,250,1), rgba(243,246,244,0.95));
 border-color:rgba(209,219,212,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, #9aefb4, #9aefb4);
 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(104,231,144, 0.35),
 0 0 0 2px #fff,
 0 0 12px -2px rgba(104,231,144, 0.35);
 transition:all 0.3s ease;
}
.icon-btn:hover .badge {
 transform:scale(1.08);
 box-shadow:
 0 4px 12px rgba(80,227,126,0.5),
 0 0 0 2px #fff,
 0 0 16px -2px rgba(80,227,126,0.7);
}
.badge.is-empty { display:none; }

/* User Menu Dropdown */
.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;
}

/* Ensure dropdown is visible when not hidden */
.user-dropdown:not([hidden]) {
 display:block !important;
 visibility:visible !important;
 opacity:1 !important;
}

/* Mobile: Force user dropdown to be visible above everything */
@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(234,251,239,0.8), rgba(211,248,223,0.6));
 border:1px solid rgba(47,221,101,0.2);
 color:var(--brand-700);
 max-width:200px; /* Prevent button from getting too wide */
 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(47,221,101,0.08),
 0 0 0 1px rgba(255,255,255,0.5) inset,
 0 0 12px -6px rgba(47,221,101,0.1);
 backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);
}
/* Subtle background glow effect */
.login-btn.logged-in::before {
 content:'';
 position:absolute;
 top:50%;
 left:0;
 width:32px;
 height:32px;
 background:radial-gradient(circle, rgba(47,221,101,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, #d3f8df 0%, #b4f3c8 50%, #92edae 100%);
 color:#9aefb4;
 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(47,221,101,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);
}
/* Ring gradient border */
.login-btn.logged-in .user-avatar::before {
 content:'';
 position:absolute;
 inset:-2px;
 border-radius:50%;
 padding:2px;
 background:linear-gradient(135deg, #9aefb4, #b4f3c8, #9aefb4);
 -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(47,221,101,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(234,251,239,0.95), rgba(211,248,223,0.85));
 border-color:rgba(47,221,101,0.3);
 box-shadow:
 0 4px 16px -4px rgba(47,221,101,0.25),
 0 0 0 1px rgba(47,221,101,0.1) inset,
 0 1px 2px rgba(0,0,0,0.05);
 transform:translateY(-1px);
}

/* Desktop: hide wrapper elements, show menu normally */
@media (min-width: 761px) {
 .mega-cats-wrapper {
 display:contents; /* Remove wrapper from layout */
 }
 .mega-cats-fade {
 display:none !important; /* Hide fade on desktop */
 }
}

.mega-cats {
 display:flex;
 gap:5px;
 /* padding:6px 16px 10px; */
 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::after {
 content:'';
 position:absolute;
 right:0;
 top:0;
 width:40px;
 height:100%;
 background:linear-gradient(to right,rgba(255,255,255,0),#fff);
 pointer-events:none;
}*/

/* Tambahan untuk tombol More & dropdown.
 Style dasar .mega-cats dan .mega-cats a tetap pakai definisi Anda. */

.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,#e3e9e5);
 border-radius:10px;
 padding:12px 14px 14px;
 min-width:400px;
 max-width:520px;
 max-height:420px;
 box-shadow:0 12px 32px -8px rgba(25,65,37,.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;
}

/* Link di dropdown mewarisi style .mega-cats a (warna, padding, radius).
 Kita tambahkan state active agar konsisten. */
.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);
 /* min-height:320px; */
 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,#fcfefc 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(47,221,101,.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(47,221,101,.35);
}

.usp-item:hover::before {
 background:radial-gradient(circle at 70% 40%, rgba(47,221,101,.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,#d3f8df,#b4f3c8);
 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:#9aefb4;
 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); }

/* ==== FOOTER COMPACT FIX PATCH (final) ==== */

/* 1. Pastikan grid aktif */

.site-footer.footer-compact .ft-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:30px 40px;
 align-items:start;
}

/* 2. Spacing atas bawah dipadatkan */
.site-footer.footer-compact .ft-top {
 padding:42px 0 26px;
}

/* 3. Judul & teks */
.site-footer.footer-compact .ft-title {
 margin:0 0 14px;
 font-size:14px;
 letter-spacing:.8px;
 text-transform:uppercase;
 font-weight:600;
 color:#82c998;
}

.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:#c6e0ce;
 max-width:330px;
}
.site-footer.footer-compact .ft-desc.sm-gap { margin-top:18px; }

/* 4. Reset ikon SVG agar tidak membesar */
.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; }

/* Jika ada aturan global svg { width:100%; } — paksa override */
svg { max-width:100%; }
.site-footer.footer-compact svg {
 width:20px !important;
 height:20px !important;
}

/* 5. Link list */
.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:#c6e0ce;
 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:#104621;
 color:#89cf9f;
 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:#9aefb4;
 color:#fff;
 transform:rotate(-4deg);
}

/* 6. WhatsApp button */
.site-footer.footer-compact .ft-wa-btn {
 display:inline-flex;
 align-items:center;
 gap:8px;
 background:#fff;
 color:#093416;
 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);
}

/* 7. Sosial */
.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:#c6e0ce;
 transition:.25s;
}
.site-footer.footer-compact .ft-social a:hover {
 background:#9aefb4;
 color:#fff;
}

/* 8. Alamat */
.site-footer.footer-compact .ft-address {
 font-size:12.5px;
 line-height:1.44;
 color:#8fb19a;
 max-width:330px;
 margin-top:12px;
}
.site-footer.footer-compact .ft-address .company {
 margin:0 0 4px;
 font-weight:600;
 color:#e5f7eb;
 font-size:12.8px;
}

/* 9. Payments kecil & rapi */
.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);
}

/* 10. Bottom bar */
.site-footer.footer-compact .ft-bottom {
 border-top:1px solid rgba(255,255,255,.08);
 background:#072e13;
 padding:12px 0 16px;
 margin-top:4px;
}
.site-footer.footer-compact .ft-copy {
 font-size:11.5px;
 color:#8fb59b;
 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:0px 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; }
}

/* === PLAZA IT DARK ORANGE FOOTER THEME === */
.site-footer.footer-compact {
 --ft-bg-0:#05220e;
 --ft-bg-1:#083315;
 --ft-bg-2:#0b401b;
 --ft-bg-3:#104e23;
 --ft-orange:#9aefb4;
 --ft-orange-dark:#9aefb4;
 --ft-text:#e9f6ed;
 --ft-text-sec:#b8d3c0;
 --ft-text-muted:#8fb19a;
 --ft-divider:rgba(255,255,255,0.08);
 --ft-glow:rgba(47,221,101,0.18);
 --ft-glow-fade:rgba(47,221,101,0);
 color:var(--ft-text);
}

/* BASE TEXT / LINKS (override sebelumnya jika perlu) */
.site-footer.footer-compact .ft-title { color:#9cd7ae; }
.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:#9abda5; }

/* ICON BACKGROUND (kubu gelap) */
.site-footer.footer-compact .ico-s {
 background:#0f4720;
 color:#9fdab1;
}
.site-footer.footer-compact .ft-links a:hover .ico-s {
 background:var(--ft-orange);
 color:#fff;
}

/* WhatsApp button biarkan putih agar kontras */
.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(47,221,101,0.25);
}

/* Payment cards border halus */
.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(47,221,101,0.4);
}

/* ========== VARIANT A: DIAGONAL EMBER (AKTIF) ========== */
.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);
}

/* ========== VARIANT B: TOP BAR ORANGE ========== */
.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:#062610;
}

/* ========== VARIANT C: RADIAL GLOW BAWAH ========== */
.site-footer.footer-compact.variant-radial {
 background:
 radial-gradient(circle at 70% 90%, rgba(47,221,101,0.22) 0%, rgba(47,221,101,0.04) 38%, rgba(47,221,101,0) 65%),
 linear-gradient(150deg,#082e14 0%, #0a3b19 50%, #06220f 100%);
}
.site-footer.footer-compact.variant-radial .ft-bottom {
 background:#062710;
}

/* ========== VARIANT D: LAYERED STRIPES ========== */
.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,#083315 0%, #093918 60%, #062610 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:#051f0d;
}

/* Garis aksen oranye tipis di atas bottom */
.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(47,221,101,0),rgba(47,221,101,.65),rgba(47,221,101,0));
}

/* ========== VARIANT E: GLASS PANEL ========== */
.site-footer.footer-compact.variant-glass {
 background:linear-gradient(145deg,#062811 0%, #051f0d 65%, #041a0b 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:#041b0b;
}

/* HOVER ACCENTS */
.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(47,221,101,0.55);
}
.site-footer.footer-compact .ft-social a {
 background:#0e451f;
 color:#bcddc6;
}
.site-footer.footer-compact .ft-social a:hover {
 background:var(--ft-orange);
 color:#fff;
 box-shadow:0 0 0 3px rgba(47,221,101,0.28);
}

/* Divider di atas footer (opsional) */
.footer-divider-top {
 height:1px;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
 width:100%;
 margin:0 0 4px;
}

/* ==== MOBILE FOOTER COLLAPSE (Non-Homepage Only) ==== */

/* Desktop: wrapper tidak mengganggu grid layout */
.ft-collapsible-content {
 display: contents;
}

@media (max-width: 768px) {
 /* Wrapper untuk konten yang bisa collapse */
 .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);
 }
 
 /* Fade gradient overlay */
 .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(11,64,27, 0.6) 40%, #0b401b 100%);
 pointer-events: none;
 opacity: 1;
 transition: opacity 0.3s ease;
 z-index: 1;
 }
 
 /* State: Expanded */
 .ft-top.ft-collapsible.expanded .ft-collapsible-content {
 max-height: 1500px;
 }
 
 .ft-top.ft-collapsible.expanded .ft-collapsible-content::after {
 opacity: 0;
 }
 
 /* Expand Button - Di luar collapsible, selalu visible */
 .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: #e5f7eb;
 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);
 }
}

/* Desktop: hide expand button */
@media (min-width: 769px) {
 .ft-expand-btn {
 display: none !important;
 }
}

/* RESPONSIVE (jika background panel butuh penyesuaian) */
@media (max-width:640px){
 .site-footer.footer-compact.variant-glass .ft-grid {
 padding:26px 18px;
 }
}



/* Mobile Bottom Navigation */
.bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background: #ffffff;
 border-top: 1px solid #e5ebe7;
 z-index: 9998; /* Below chat widget */
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 display: none; /* Hidden on desktop */
}

.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: #9aefb4;
}

.bottom-nav-item.active {
 flex-direction: row;
 gap: 8px;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 color: white;
 border-radius: 20px;
 padding: 8px 16px;
 box-shadow: 0 2px 8px rgba(47,221,101, 0.3);
}

.bottom-nav-item-icon {
 width: 24px;
 height: 24px;
 position: relative;
}

.bottom-nav-item-icon svg {
 width: 100%;
 height: 100%;
}

/* Icon variant switching */
.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;
}

/* Avatar styles for bottom-nav */
.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, #9aefb4 0%, #9aefb4 100%);
 color: white;
 font-size: 10px;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 line-height: 1;
 letter-spacing: 0.5px;
}

/* Hide SVG when avatar is shown */
.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;
}

/* Active state adjustments for avatar */
.bottom-nav-item.active .bottom-nav-avatar-initials {
 background: white;
 color: #9aefb4;
 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: #9aefb4;
 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;
}

/* Show on mobile only */
@media (max-width: 640px) {
 .bottom-nav {
 display: block;
 }
 
 /* Add bottom padding to body to prevent content being hidden */
 body {
 padding-bottom: 60px;
 }
}

/* Mobile User Sheet - Bottom Sheet for Profile Menu */
.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: #d1dbd4;
 border-radius: 2px;
 margin: 12px auto 16px;
}

.mobile-user-sheet-header {
 padding: 0 20px 16px;
 border-bottom: 1px solid #e5ebe7;
}

.mobile-user-info {
 display: flex;
 align-items: center;
 gap: 12px;
}

.mobile-user-avatar {
 width: 48px;
 height: 48px;
 background: linear-gradient(135deg, #d3f8df 0%, #b4f3c8 50%, #92edae 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 color: #9aefb4;
 font-weight: 600;
}

.mobile-user-details {
 flex: 1;
}

.mobile-user-name {
 font-weight: 600;
 font-size: 16px;
 color: #1f3726;
 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: #37513f;
 transition: background 0.2s;
}

.mobile-user-sheet-item:hover {
 background: #f9fbfa;
}

.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: #e5ebe7;
 margin: 8px 0;
}

@keyframes fadeIn {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

@keyframes slideUp {
 from {
 transform: translateY(100%);
 }
 to {
 transform: translateY(0);
 }
}

/* Ensure chat widget works well with bottom nav */
@media (max-width: 640px) {
 .chat-widget {
 bottom: 0 !important; /* Chat opens from bottom */
 }
 
 .chat-popup {
 /* Chat popup should be above bottom nav */
 z-index: 9999;
 }
}



.search { 
 position: relative; 
}

/* AI Bot Toggle Button */
.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: #9aefb4;
 animation: botPulse 2s ease-in-out infinite;
}

.ai-bot-toggle.active {
 background: rgba(84,227,128, 0.1);
}

.ai-bot-toggle.active:hover .bot-icon {
 color: #9aefb4;
}

@keyframes botPulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.12); }
}

/* Search Suggest Box */
.search-suggest {
 position: absolute;
 top: 100%; left: 0; right: 0;
 background: #fff;
 border: 1px solid #e1e8e3;
 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 #f1f9f3;
}

.suggest-item:last-child {
 border-bottom: none;
}

.suggest-item:hover,
.suggest-item.active {
 background: linear-gradient(90deg, #f8fcf9 0%, #f1f9f3 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: #9aefb4;
 font-size: 12px;
 margin-top: 2px;
}

/* AI Insights */
.suggest-ai-insight {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 12px;
 background: linear-gradient(135deg, #f2fdf5 0%, #e3fbeb 100%);
 border-bottom: 1px solid #c2f5d2;
 color: #178d3c;
 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 States */
.ai-progress-container {
 padding: 20px 16px;
 background: linear-gradient(135deg, #fbfefc 0%, #f6fef9 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, #69e790 0%, #4ba266 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: #1e3b27;
 font-size: 14px;
 margin-bottom: 2px;
}

.ai-progress-subtitle {
 font-size: 12px;
 color: #648b70;
}

/* Progress Steps */
.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 #e2f0e6;
 transition: all 0.3s ease;
}

.ai-progress-step.active {
 border-color: #69e790;
 background: #f9fefb;
 box-shadow: 0 2px 8px rgba(105,231,144, 0.1);
}

.ai-progress-step.completed {
 border-color: #1cad49;
 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: #69e790;
 color: #fff;
 animation: pulse 1.5s ease-in-out infinite;
}

.ai-progress-step.completed .ai-step-icon {
 background: #1cad49;
 color: #fff;
}

.ai-progress-step.pending .ai-step-icon {
 background: #e2f0e6;
 color: #94b89f;
}

.ai-step-text {
 flex: 1;
 font-size: 13px;
 color: #476952;
 font-weight: 500;
}

.ai-progress-step.completed .ai-step-text {
 color: #168538;
}

/* AI Analysis Result Banner */
.ai-result-banner {
 padding: 12px 16px;
 background: linear-gradient(135deg, #edfcf2 0%, #d3f8df 100%);
 border-bottom: 1px solid #89eca8;
 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: #0e5725;
 font-size: 13px;
 margin-bottom: 2px;
}

.ai-result-description {
 font-size: 12px;
 color: #116b2d;
 opacity: 0.9;
}

/* Product Items Section Header */
.suggest-section-header {
 padding: 10px 16px;
 background: linear-gradient(135deg, #f8fcf9 0%, #f1f9f3 100%);
 border-bottom: 1px solid #e2f0e6;
}

.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: #648b70;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.suggest-header-hint {
 font-size: 11px;
 color: #94b89f;
 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: #476952;
 background: #fff;
 border: 1px solid #cbe1d2;
 border-radius: 4px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 font-family: 'Segoe UI', monospace;
}

/* Footer Hint */
.suggest-footer-hint {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 12px 16px;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 border-top: 1px solid #9aefb4;
 color: #9aefb4;
 font-size: 12px;
 font-weight: 500;
 text-align: center;
 cursor: default;
}

.suggest-footer-hint svg {
 color: #9aefb4;
 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: #9aefb4;
 background: #fff;
 border: 1px solid #9aefb4;
 border-radius: 4px;
 box-shadow: 0 1px 3px rgba(37,219,93, 0.2);
 font-family: 'Segoe UI', monospace;
}

.suggest-footer-link {
 color: #9aefb4;
 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: #9aefb4;
 text-decoration-thickness: 2px;
 text-shadow: 0 0 8px rgba(31,193,81, 0.3);
}

/* Loading state */
.suggest-loading {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 16px 12px;
 color: #648b70;
 font-size: 13px;
}

@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}

.suggest-loading {
 animation: pulse 1.5s ease-in-out infinite;
}

/* Responsive Mobile Styles */
@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;
 }
 
 /* Mobile hint adjustments */
 .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;
 }
 
 /* Ultra-compact hints for small screens */
 .suggest-header-hint {
 display: none; /* Hide header hint on very small screens */
 }
 
 .suggest-footer-hint {
 padding: 8px 10px;
 font-size: 10px;
 flex-direction: column;
 gap: 4px;
 }
 
 .suggest-footer-hint svg {
 display: none; /* Hide icon to save space */
 }
 
 .suggest-footer-hint kbd {
 padding: 2px 4px;
 font-size: 9px;
 }
 
 .ai-progress-steps {
 gap: 8px;
 }
 
 .ai-step-text {
 font-size: 11px;
 }
}

/* AI Search Prompt Box */
.ai-search-prompt {
 padding: 24px;
 background: linear-gradient(135deg, #f2fdf5 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, #9aefb4 0%, #9aefb4 100%);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 box-shadow: 0 4px 12px rgba(84,227,128, 0.3);
}

.ai-prompt-text {
 flex: 1;
}

.ai-prompt-title {
 font-size: 16px;
 font-weight: 700;
 color: #1f3726;
 margin-bottom: 4px;
}

.ai-prompt-subtitle {
 font-size: 13px;
 color: #6b7280;
}

.ai-prompt-query {
 background: white;
 border: 2px solid #9aefb4;
 border-radius: 8px;
 padding: 12px 16px;
 margin-bottom: 16px;
}

.ai-query-label {
 font-size: 11px;
 font-weight: 600;
 color: #9aefb4;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-bottom: 4px;
}

.ai-query-text {
 font-size: 15px;
 font-weight: 600;
 color: #1f3726;
}

.ai-search-trigger-btn {
 width: 100%;
 padding: 14px 20px;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 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(31,193,81, 0.3);
}

.ai-search-trigger-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(31,193,81, 0.3);
}

.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;
}

/* ==================== TRENDING SEARCH STYLES ==================== */

.search-suggest.trending-mode {
 border-top: 3px solid #9aefb4;
 max-width: 900px;
 min-width: 600px;
}

/* Two-column container */
.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 #e2f0e6; padding: 0 !important;
}

/* Mobile: stack columns vertically */
@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 #e2f0e6;
 }
}

.trending-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 14px 16px;
 border-bottom: 1px solid #e2f0e6;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 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(84,227,128, 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 searches item */
.trending-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 cursor: pointer;
 transition: all 0.2s ease;
 border-bottom: 1px solid #f1f9f3;
 position: relative;
}

.trending-item:hover {
 background: linear-gradient(90deg, #f0fcf4 0%, #dbf9e4 100%);
 padding-left: 20px;
}

.trending-item:hover::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 4px;
 background: linear-gradient(180deg, #9aefb4 0%, #9aefb4 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: #1f3726;
 font-weight: 500;
 line-height: 1.4;
}

.trending-category {
 font-size: 11px;
 color: #9aefb4;
 background: #f0fcf4;
 padding: 3px 10px;
 border-radius: 12px;
 white-space: nowrap;
 font-weight: 500;
 border: 1px solid #b5f3c8;
}

/* Trending products item */
.trending-product-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 cursor: pointer;
 transition: all 0.2s ease;
 border-bottom: 1px solid #f1f9f3;
 position: relative;
}

.trending-product-item:hover {
 background: linear-gradient(90deg, #cef7db 0%, #99eeb3 100%);
 padding-left: 20px;
}

.trending-product-item:hover::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 4px;
 background: linear-gradient(180deg, #9aefb4 0%, #9aefb4 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 #e5ebe7;
 flex-shrink: 0;
 background: white;
}

.trending-product-info {
 flex: 1;
 min-width: 0;
}

.trending-product-name {
 font-size: 13px;
 font-weight: 400;
 color: #1f3726;
 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: #9aefb4;
 padding: 4px 0 !important;
}
.trending-product { padding: 0;}
/* ==================== END TRENDING STYLES ==================== */



/* === PRODUCT DETAIL v3 (Tokopedia-like) — Full stylesheet === */

/* Root / Container */
.product-single {
 --pd-gap: 2rem;
 --pd-border: #e2f0e6;
 --pd-bg: #ffffff;
 --pd-muted: #648b70;
 --pd-dark: #0f2a17;
 --pd-accent: #2ddd64; /* tema utama situs */
 --pd-radius: 12px;
 --pd-soft: #f8fcf9;
 --pd-soft-border: #e5ebe7;
 --pd-danger: #9aefb4;
 --pd-success-bg: #defae7;
 --pd-success-text: #16652e;
 --pd-danger-bg: #e5fbec;
 --pd-danger-text: #9aefb4;
 --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;
}

/* === Sticky Product Header Bar (muncul saat scroll) === */
.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,240,230, 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 #e2f0e6;
 overflow: hidden;
 background: #f8fcf9;
}

.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: #0f2a17;
 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: #2ddd64;
 line-height: 1;
}

.pd-sticky-price-original {
 font-size: 0.75rem;
 color: #94b89f;
 text-decoration: line-through;
 line-height: 1;
}

.pd-sticky-discount {
 background: #9aefb4;
 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 #e2f0e6;
 background: #fff;
 color: #648b70;
 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: #f8fcf9;
 border-color: #cbe1d2;
 color: #0f2a17;
 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: #2ddd64;
 border: 1px solid #2ddd64;
}

.pd-sticky-btn-cart:hover {
 background: rgba(45,221,100, 0.06);
}

.pd-sticky-btn-chat {
 background: #fff;
 color: #648b70;
 border: 1px solid #cbe1d2;
 flex: 0.8;
}

.pd-sticky-btn-chat:hover {
 background: #f8fcf9;
 border-color: #94b89f;
 color: #476952;
}

.pd-sticky-btn-buy {
 background: #2ddd64;
 color: #fff;
 border: 1px solid #2ddd64;
 box-shadow: 0 2px 8px -2px rgba(45,221,100, 0.4);
}

.pd-sticky-btn-buy:hover {
 filter: brightness(0.95);
}

.pd-sticky-btn:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

/* Hide on mobile (use existing FAB instead) */
@media (max-width: 880px) {
 .pd-sticky-header {
 display: none;
 }
}

/* === PRINT STYLES (for PDF Export) === */
@media print {
 /* Reset & Base */
 * {
 -webkit-print-color-adjust: exact !important;
 print-color-adjust: exact !important;
 }
 
 body {
 background: white !important;
 margin: 0;
 padding: 0;
 }
 
 /* Hide all navigation, buttons, and interactive elements */
 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-similar,
 .pd-similar-strip,
 .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;
 }
 
 /* Extra aggressive reset for any remaining borders */
 .pd-info-card *,
 .pd-meta-inline *,
 .pd-variants * {
 border: none !important;
 border-top: none !important;
 border-bottom: none !important;
 }
 
 /* Layout restructure */
 .product-single {
 max-width: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
 box-shadow: none !important;
 }
 
 /* Reset all shadows and borders for print */
 * {
 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;
 }
 
 /* Print header with logo - centered and larger */
 .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;
 }
 
 /* Media card - left column */
 .pd-media-card {
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
 text-align: center;
 page-break-inside: avoid;
 }
 
 /* Hide desktop image, use mobile slider for both desktop and mobile */
 .pd-main-image {
 display: none !important;
 }
 
 /* Mobile slider - show first image only in print */
 .pd-mobile-slider {
 display: block !important;
 overflow: visible !important;
 }
 
 .pd-mslide {
 display: none !important;
 }
 
 .pd-mslide:first-child {
 display: block !important;
 border: 1px solid #e2f0e6 !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;
 }
 
 /* Info card - right column */
 .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;
 }
 
 /* Title */
 .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;
 }
 
 /* Hide share button in print */
 .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;
 }
 
 /* Price and QR container - side by side */
 .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;
 }
 
 /* Price block - left side */
 .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;
 }
 
 /* Hide all empty or unnecessary elements in price row */
 .pd-price-row > span:empty,
 .pd-price-row > .sold-inline,
 #pd-sold-inline {
 display: none !important;
 }
 
 .pd-price-current {
 font-size: 18pt !important;
 color: #2ddd64 !important;
 }
 
 /* Show price range for variant products in print */
 .pd-price-current[data-price-range]::after {
 content: attr(data-price-range) !important;
 display: block !important;
 font-size: 11pt !important;
 color: #648b70 !important;
 margin-top: 4px !important;
 font-weight: normal !important;
 }
 
 /* Hide 'Range:' prefix text */
 .pd-price-current[data-price-range]::after {
 content: attr(data-price-range) !important;
 }
 
 .pd-price-original {
 font-size: 12pt !important;
 color: #648b70 !important;
 }
 
 .pd-discount-badge {
 font-size: 10pt !important;
 padding: 2px 6px !important;
 }
 
 /* QR Code section - right side beside price */
 .pd-qr-print {
 display: block !important;
 flex: 0 0 100px !important;
 margin: 0 !important;
 padding: 8px !important;
 background: #f8fcf9 !important;
 border-radius: 8px !important;
 text-align: center !important;
 page-break-inside: avoid !important;
 border: 1px solid #cbe1d2 !important;
 }
 
 .pd-qr-label {
 font-size: 6.5pt !important;
 color: #648b70 !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;
 }
 
 /* Meta info */
 .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;
 }
 
 /* Hide stock badge in print */
 .stock-badge,
 .stock-info-btn {
 display: none !important;
 }
 
 .sku {
 color: #648b70 !important;
 }
 
 /* Hide sold badge if empty/zero */
 .sold-inline {
 display: none !important;
 }
 
 /* Hide variant summary section in print */
 .pd-variant-combined,
 #pd-variant-combined,
 .pd-variant-summary,
 [data-role="sold-chip"] {
 display: none !important;
 }
 
 /* Hide compare section completely in print */
 .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;
 }
 
 /* Variants - show all options with selected highlighted */
 .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;
 }
 
 /* Add 'Variant:' label before variant groups */
 .pd-variants::before {
 content: "Variant:" !important;
 display: block !important;
 font-size: 11pt !important;
 font-weight: 700 !important;
 color: #0f2a17 !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: #476952 !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 #cbe1d2 !important;
 padding: 3px 10px !important;
 font-size: 9pt !important;
 background: #f8fcf9 !important;
 border-radius: 6px !important;
 display: inline-flex !important;
 align-items: center !important;
 page-break-inside: avoid !important;
 }
 
 /* Highlight selected variant with blue background */
 .v-chip.selected {
 background: #f1fdf5 !important;
 border-color: #32de67 !important;
 font-weight: 600 !important;
 }
 
 /* Hide radio inputs */
 .v-chip input[type="radio"] {
 display: none !important;
 }
 
 /* Hide "Habis" badge in print */
 .v-chip .chip-badge {
 display: none !important;
 }
 
 /* Short description - HIDDEN in print */
 .pd-short-desc {
 display: none !important;
 }
 
 /* QR Code section - right side beside price */
 .pd-qr-print {
 display: block !important;
 flex: 0 0 100px !important;
 margin: 0 !important;
 padding: 8px !important;
 background: #f8fcf9 !important;
 border-radius: 8px !important;
 text-align: center !important;
 page-break-inside: avoid !important;
 border: 1px solid #cbe1d2 !important;
 }
 
 .pd-qr-label {
 font-size: 6.5pt !important;
 color: #648b70 !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;
 }
 
 /* Full description - below 2 column layout */
 .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: #33553e !important;
 }
 
 .pd-full-desc-body img {
 max-height: 200px !important;
 width: auto !important;
 page-break-inside: avoid;
 display: none !important; /* Hide images in print to save space */
 }
 
 /* Also target #deskripsi img if exists */
 #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 #cbe1d2 !important;
 padding: 6px 8px !important;
 }
 
 /* Print footer */
 .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 #e2f0e6;
 font-size: 9pt;
 color: #648b70;
 text-align: center;
 }
 
 /* Page breaks */
 .pd-media-card,
 .pd-price-block,
 .pd-full-desc-title {
 page-break-after: avoid;
 }
 
 .pd-full-description {
 page-break-before: auto;
 }
}

/* === Breadcrumb (truncate last item) === */
.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;
}

/* === Top layout === */
.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;
}

/* === Media column === */
.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}

/* Gallery Thumbnails */
.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(45,221,100,.25)}
.pd-thumb-btn:focus-visible{outline:2px solid var(--pd-accent);outline-offset:2px}
.pd-thumb-btn:active{transform:scale(.96)}

/* === Info column === */
.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:#94b89f}
.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,#9aefb4 0%,#4ba266 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:#33553e;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}

/* Meta row for sold and rating badges */
.pd-meta-row {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 5px;
 margin-top: 8px;
 margin-bottom: 4px;
}

/* Sales (Terjual) badge inline */
.sold-inline{
 display:inline-block;font-size:.65rem;font-weight:600;color:#476952;
 background:#f1f9f3;padding:3px 8px 4px;border-radius:6px;letter-spacing:.4px;margin-left:0;
}

/* Price row divider */
.price-divider {
 display: inline-block;
 margin: 0 .4rem;
 color: #cbe1d2;
 font-weight: 400;
}

/* Rating badge inline */
.rating-inline {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 8px 4px;
 background: #f0fcf4;
 border-radius: 6px;
 font-size: .65rem;
 font-weight: 600;
 color: #9aefb4;
 text-decoration: none;
 transition: all .2s ease;
 cursor: pointer;
 margin-left: .5rem;
 white-space: nowrap;
}

.rating-inline:hover {
 background: #dbf9e4;
 transform: translateY(-1px);
 box-shadow: 0 2px 4px rgba(34,212,89, 0.1);
}

.rating-inline .star-icon {
 font-size: .75rem;
 color: #9aefb4;
 line-height: 1;
}

.rating-inline .rating-value {
 color: #9aefb4;
}

.rating-inline .rating-badge-count {
 color: #9aefb4;
 opacity: 0.85;
}

@media (max-width: 640px) {
 .rating-inline {
 font-size: .65rem;
 padding: 3px 8px 4px;
 }
 .rating-inline .star-icon {
 font-size: .7rem;
 }
}

/* Highlight animation for review section */
@keyframes highlightFlash {
 0%, 100% { background-color: transparent; }
 50% { background-color: rgba(84,227,128, 0.1); }
}

.highlight-flash {
 animation: highlightFlash 1.5s ease;
}

/* === Variant chips === */
.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:#32de67;background:#f1fdf5}
.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:#e5fbec;color:#9aefb4;border:1px solid #9aefb4}
.pd-variant-summary{margin-top:8px;color:#476952;font-size:.92rem}
.pd-variant-summary .vs-item{display:inline-flex;gap:4px;margin-right:10px}

/* === Buy form (di sidebar kanan untuk desktop) === */
.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}

/* Tombol senada tema */
.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(45,221,100,.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(45,221,100,.06)}
.btn-chat-icon{background:#fff;color:#9aefb4;border:2px solid #9aefb4;padding:0;width:44px;min-width:44px}
.btn-chat-icon:hover{background:rgba(84,227,128, 0.06);border-color:#9aefb4}
.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}

/* Buy with Voucher Button - Cleaner, more compact design */
.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, #46e176 0%, #3ee070 100%);
 color:#fff;
 box-shadow:0 3px 10px rgba(70,225,118,0.3);
 position:relative;
 overflow:hidden;
 flex:1 1 auto
}
.btn-buy-voucher:hover{
 transform:translateY(-2px);
 box-shadow:0 5px 16px rgba(70,225,118,0.4)
}
.btn-buy-voucher:active{
 transform:translateY(0);
 box-shadow:0 2px 6px rgba(70,225,118,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
}

/* Extra meta (opsional) */
.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}

/* === Sidebar === */
.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:#33553e}
.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}

/* Buy card hanya desktop (mobile pakai FAB) */
.pd-buy-card{display:block}
@media (max-width:880px){ .pd-buy-card{display:none} .pd-title-row {padding-right: 0 !important;}}

/* === Full Description === */
.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:#33553e;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 #cbe1d2;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;}

/* === Related (container) === */
.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)}

/* Related Grid (dirapikan: gabung selector agar tidak duplikat) */
.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;
}

/* Fallback jika grid tidak didukung */
@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)}
 }
}

/* Related Card */
.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:#f1f9f3;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:#9aefb4;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:#33553e;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:#476952;margin-top:2px;letter-spacing:.3px;background:#f1f9f3;padding:2px 6px 3px;border-radius:5px; width: max-content;}
.pd-related-card .price .final {font-size: .82rem; font-weight: 700; color: #2ddd64;}
.pd-related-card .price .ori {font-size: .6rem; text-decoration: line-through; color: #94b89f;font-weight: 500;}

/* === Mobile slider (scroll-snap) — gambar utama tetap tampil === */
.pd-mobile-slider{display:none}
.pd-mobile-slider img{width:100%;display:block;object-fit:contain;aspect-ratio:1/1}

/* Gallery counter badge */
.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} /* hide thumbnails on mobile */
}

/* === Mobile Floating Action Bar === */
.pd-mobile-fab{
 position:fixed;
 left:0;
 right:0;
 bottom:42px; /* Position above bottom-nav (60px min-height + 6px padding) */
 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,235,230,0.6);
 box-shadow:0 -4px 16px -4px rgba(0,0,0,0.12);
 z-index:999; /* Below bottom-nav (1000) */
 transition:bottom .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* When bottom-nav is hidden, move FAB to bottom */
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:#9aefb4;
 color:#fff;
 border:0;
 box-shadow:0 2px 8px rgba(84,227,128, 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:#9aefb4;
 border:2px solid #9aefb4;
 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:#9aefb4;border:2px solid #9aefb4;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:#9aefb4;
 border:2px solid #9aefb4;
 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;} /* Space for FAB + bottom-nav */
}

/* === Installment cards === */
.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:#30dd66;color:#fff;border-color:#30dd66}

.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:#30dd66;color:#fff;border-color:#30dd66;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:#648b70;margin-top:.2rem}
@media (max-width: 860px){
 .pd-installment-card{order:3}
 .inst-tabs .inst-tab,.inst-tenors .tenor-btn{font-size:.65rem}
 
 /* Voucher button responsive - make it simpler */
 .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
 }
}

/* Installment List v2 (eye-catching) */
.pd-installment-card2{
 background:linear-gradient(135deg,#ffffff 0%,#f3fdf6 65%,#ebfcf0 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(48,221,102,.18),rgba(48,221,102,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:#0f5424}
.pd-installment-card2 .inst-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.inst-head-badge{background:#30dd66;color:#fff;font-size:.55rem;font-weight:600;padding:.25rem .5rem;border-radius:20px;letter-spacing:.4px;box-shadow:0 2px 6px -2px rgba(48,221,102,.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:#30dd66;color:#fff;border-color:#30dd66;box-shadow:0 3px 10px -4px rgba(48,221,102,.6)}
.bank-tab:focus{outline:2px solid #30dd66;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(48,221,102,.08),rgba(48,221,102,0));transition:.25s}
.inst-month-item:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(17,103,44,.25)}
.inst-month-item:hover:before{opacity:1}
.tenor-badge{background:#30dd66;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(48,221,102,.6)}
.amount{flex:1;font-size:.8rem;font-weight:600;color:#0f5424;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:#1a9f43;color:#fff;box-shadow:0 2px 8px -3px rgba(27,169,71,.55)}

.inst-note{font-size:.6rem;font-weight:600;color:#0f5424;background:#e0f7e7;border:1px solid #b2ebc4;padding:.4rem .6rem;border-radius:8px;letter-spacing:.3px}
.inst-disclaimer{font-size:.52rem;line-height:1.25;color:#648b70;margin-top:-.2rem}

@media (max-width:860px){
 .pd-installment-card2{order:3}
 .tenor-badge{min-width:38px;font-size:.75rem}
 .amount{font-size:.78rem}
}

/* Alt Fintech Banner (compact) */
.inst-alt-banner--compact{
 background:linear-gradient(142deg,#30dd66 0%,#57e483 55%,#7cea9e 100%);
 color:#fff;border:0;padding:.95rem .95rem 1.05rem;border-radius:16px;
 box-shadow:0 6px 18px -6px rgba(22,138,58,.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:#116b2d;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}
}

/* === Scroll To Top (baru) === */
.pd-scroll-top{
 position:fixed;
 right:20px;
 bottom:90px;
 width:48px;
 height:48px;
 border-radius:50%;
 background:linear-gradient(135deg, #ffffff 0%, #f8fcf9 100%);
 color:#0f5424;
 border:1px solid rgba(226,240,230, 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,240,230, 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){
 /* Dynamic positioning via JavaScript */
 .pd-scroll-top{
 right:14px;
 bottom:var(--scroll-top-bottom, calc(68px + 18px + env(safe-area-inset-bottom)));
 }
}

/* === Responsive layout tweaks === */
@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}
 /* Other cards 2-per-row; buy card always takes full row to avoid height-mismatch gaps */
 .pd-side-card{flex:1 1 calc(50% - .5rem)}
 .pd-buy-card{flex:0 0 100%}
}
@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){
 /* Related: 2 kolom di mobile */
 .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}
}

/* === Modern Countdown (Product Detail) === */
.pd-countdown-modern{
 --cd-bg1:#23d45a; /* sky-500 */
 --cd-bg2:#6de793; /* indigo-500 */
 --cd-text:#0b2012;
 --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:#0f2a17;
 --cd-danger:#9aefb4;

 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,42,23,.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,#22c555,#3cdf6e);
 box-shadow: 0 2px 8px rgba(0,0,0,.25) inset;
 transition:width .35s ease;
}

/* State saat hampir habis */
.pd-countdown-modern.danger{
 --cd-bg1:#9aefb4; /* orange-500 */
 --cd-bg2:#9aefb4; /* red-500 */
}

/* Responsive */
@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}
}

/* === Modern Countdown polish (shine + compact) === */
.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%) }
}

/* Mode compact (aktifkan dengan data-mode="compact" di elemen) */
.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;
}

/* ============================================================
 Sidebar: shared refinements for medium + tablet (641px – 1250px)
 Buy card = form & paylater on the same row.
 Alt-fintech logos compact (no over-stretching).
 ============================================================ */
@media (min-width:641px) and (max-width:1250px) {
 /* Buy card: put qty/buy buttons and paylater promo inline */
 .pd-buy-card {
 display: flex !important;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 gap: .6rem .75rem;
 }
 .pd-buy-card .pd-buy-form { flex: 1 1 0; min-width: 0; }
 .pd-buy-card .paylater-promo {
 flex: 0 0 auto;
 align-self: center;
 margin: 0;
 max-width: 44%;
 }

 /* Alt-fintech banner: tighter logos */
 .iab-logos-compact {
 justify-content: center;
 gap: 1.25rem;
 }
 .iab-logos-compact .logo-fin {
 width: auto;
 max-height: 28px;
 object-fit: contain;
 }
}

/* ============================================================
 Tablet layout (641px – 880px)
 Restores 2-column grid + horizontal sidebar for mid-size screens.
 Overrides the generic ≤880px mobile-collapse rules above.
 ============================================================ */
@media (min-width:641px) and (max-width:880px) {
 /* 2-column grid: image-card | info-card */
 .pd-top-layout {
 grid-template-columns: minmax(260px, 40%) 1fr;
 gap: 1rem;
 }

 /* Sidebar: full-width horizontal flex row below the two main columns */
 .pd-sidebar {
 grid-column: 1 / -1;
 flex-direction: row;
 flex-wrap: wrap;
 gap: .75rem;
 padding: 0;
 }
 /* Banner cards fill 2-per-row */
 .pd-side-card { flex: 1 1 calc(50% - .375rem); }
 /* Buy card: full row (tallest card – avoids white-space gap if shared with shorter banners) */
 .pd-buy-card { display: block !important; flex: 0 0 100%; }

 /* Hide installment simulator + alt-fintech banner on tablet (too much vertical space) */
 .pd-installment-card2,
 .inst-alt-banner--compact { display: none !important; }

 /* Restore sticky add-to-cart header (hidden at ≤880px by default) */
 .pd-sticky-header { display: flex !important; }

 /* Typography – tighten slightly to fit the narrower info column */
 .pd-price-current { font-size: 1.65rem; }
 .pd-title { font-size: 1.1rem; }
 .pd-info-card { padding: 1.1rem 1.2rem 1.5rem; }
}


/* Product Grid (Firebird) */

.product-archive {
 max-width: 1320px;
 margin-inline: auto;
 padding: 0 0 3rem;
 /*font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;*/
}

.pa-toolbar {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 justify-content: space-between;
 align-items: flex-start;
}

.pa-title {
 font-size: 1.4rem;
 margin: 0;
 font-weight: 600;
 line-height: 1.2;
 color: #0f2a17;
}

.pa-left {
 display: flex;
 flex-wrap: wrap;
 gap: .75rem;
 align-items: center;
}

.pa-filter-badge {
 background: #f1f9f3;
 border: 1px solid #e2f0e6;
 padding: .45rem .6rem;
 border-radius: 8px;
 font-size: .7rem;
 display: flex;
 align-items: center;
 gap: .4rem;
 line-height: 1;
 color: #476952;
}
.pa-filter-badge strong { color: #0f2a17; }
.pa-filter-badge .clear {
 display:inline-block;
 text-decoration:none;
 background:#e2f0e6;
 color:#476952;
 font-weight:600;
 padding:0 .35rem .05rem;
 border-radius:4px;
 transition:.2s;
 font-size:.75rem;
 line-height:1;
}
.pa-filter-badge .clear:hover { background:#cbe1d2; color:#1e3b27; }

.pa-right {
 display:flex;
 gap:1rem;
 flex-wrap:wrap;
 align-items:flex-start;
 margin-bottom: 0.5rem;
}

.pa-search {
 display:flex;
 gap:.5rem;
 align-items:center;
 background:#fff;
 border:1px solid #e2f0e6;
 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:#2ddd64;
 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:#1db24b; }

.pa-sort {
 display:flex;
 gap:.4rem;
 align-items:center;
 font-size:.7rem;
 background:#fff;
 border:1px solid #e2f0e6;
 padding:.4rem .55rem;
 border-radius:8px;
}
.pa-sort select {
 font-size:.75rem;
 padding:.35rem .5rem;
 border:1px solid #cbe1d2;
 border-radius:6px;
 background:#fff;
 outline:none;
}

.pa-empty {
 border:1px dashed #cbe1d2;
 padding:3rem 1rem;
 text-align:center;
 border-radius:12px;
 background:#fff;
}
.pa-empty p {
 margin:0 0 1rem;
 font-size:.9rem;
 color:#476952;
}
.btn-reset {
 display:inline-block;
 background:#2ddd64;
 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:#1db44c; }

/* Grid */
.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 #e2f0e6;
 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:#dceae0;
}

.pa-card .thumb {
 aspect-ratio:1/1;
 background:#f1f9f3;
 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:#9aefb4;
 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:#1e3b27;
 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:#2ddd64;
}
.pa-card .prices .ori {
 font-size:.63rem;
 text-decoration:line-through;
 color:#94b89f;
 font-weight:500;
}

.pa-card .cat {
 margin-top:auto;
 font-size:.55rem;
 letter-spacing:.6px;
 text-transform:uppercase;
 background:#f1f9f3;
 border:1px solid #e2f0e6;
 padding:.28rem .45rem .25rem;
 border-radius:20px;
 font-weight:600;
 color:#476952;
 align-self:flex-start;
}
.pa-card .meta-line {
 margin-top:4px;
 font-size:.65rem;
 color:#476952;
}
.pa-card .meta-line .sold {
 display:inline-block;
 background:#f1f9f3;
 padding:2px 6px 3px;
 border-radius:4px;
 font-weight:600;
 letter-spacing:.3px;
 color:#33553e;
}

/* Pagination */
.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 #e2f0e6;
 background:#fff;
 color:#33553e;
 transition:.25s;
}
.pa-pagination a:hover {
 background:#f1f9f3;
 color:#0f2a17;
}
.pa-pagination .current {
 background:#2ddd64;
 color:#fff;
 border-color:#2ddd64;
}
.pa-pagination .gap {
 border:none;
 background:transparent;
 font-weight:400;
 color:#94b89f;
}

/* =============== Mobile Filter Bar (Tokopedia-like) =============== */
.pa-mobile-filterbar{display:none}
@media (max-width: 640px){
 /* sembunyikan tombol lama */
 .pa-btn-filter{display:none}

 .pa-mobile-filterbar{
 display:block;
 position:sticky;
 top:0; /* sesuaikan jika ada header fixed di atas */
 z-index:5;
 background:#fff;
 border-bottom:1px solid #e2f0e6;
 padding:.4rem .5rem;
 margin:-.4rem -1rem .6rem; /* full-bleed di container mobile */
 }
 .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:#33553e;
 text-decoration:none;
 border:1px solid #e2f0e6;
 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:#edfcf2;
 border-color:#2ddd64;
 color:#2ddd64;
 }

 .mf-filter-btn{
 position:relative;
 flex:0 0 auto;
 width:38px;height:38px;
 border-radius:50%;
 border:1.5px solid #2ddd64;
 background:#fff;
 display:inline-flex;align-items:center;justify-content:center;
 color:#2ddd64;
 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:#9aefb4;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(80,227,126,.6);
 }
}

/* Responsive */
@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; /* Firefox */
 flex: 1 1 auto; /* takes remaining width */
}
.pa-mobile-filterbar .mf-scroll::-webkit-scrollbar { display: none; } /* WebKit */
.pa-mobile-filterbar .mf-chip {
 flex: 0 0 auto; /* prevent shrinking, keep width based on content */
 white-space: nowrap;
}
.pa-mobile-filterbar .mf-filter-btn {
 flex: 0 0 auto; /* do not shrink */
 position: relative; /* keep in place, not inside scroller */
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

/* Optional: ensure on small screens the button stays visible with min width */
@media (max-width: 768px) {
 .pa-mobile-filterbar .mf-filter-btn {
 padding: 6px 10px;
 }
}

/* Product Specification Chips */
.pa-card .spec-chips {
 font-size: .6rem;
 color: #648b70;
 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: #94b89f;
 font-weight: 400;
 margin: 0 1px;
}


/**
 * Site Notice Banner - Reusable Notification System
 * Dismissible top bar for announcements, holidays, maintenance, etc.
 */

.holiday-notice {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 9999;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 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 padding adjustment when banner is visible */
body.has-holiday-notice {
 padding-top: 52px;
}

/* Tablet Styles */
@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;
 }
}

/* Mobile Styles */
@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;
 }
}


/**
 * Benchmark Section Styles
 * For product detail page benchmark display
 */

.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 #e5ebe7;
}

.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;
}

/* Preview Badges */
.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, #69e790 0%, #4ba266 100%);
 color: #fff;
 padding: 8px 16px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 500;
 box-shadow: 0 2px 6px rgba(105,231,144, 0.25);
 transition: all 0.2s ease;
}

.benchmark-badge:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(105,231,144, 0.35);
}

.benchmark-badge strong {
 font-weight: 600;
 opacity: 0.9;
}

/* Load Button */
.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, #69e790 0%, #4ba266 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(105,231,144, 0.3);
 margin: 0 auto;
}

.btn-load-benchmark:hover:not(:disabled) {
 transform: translateY(-2px);
 box-shadow: 0 6px 16px rgba(105,231,144, 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 */
.benchmark-content {
 margin-top: 24px;
 padding-top: 24px;
 border-top: 2px solid #f3f6f4;
}

.benchmark-loading {
 text-align: center;
 padding: 40px 20px;
 color: #6b7280;
}

.benchmark-loading-spinner {
 width: 48px;
 height: 48px;
 margin: 0 auto 16px;
 border: 4px solid #f3f6f4;
 border-top-color: #69e790;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

.benchmark-error {
 text-align: center;
 padding: 32px 20px;
 color: #9aefb4;
 background: #e5fbec;
 border-radius: 8px;
}

/* Benchmark Data Display */
.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 #e5ebe7;
 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(105,231,144, 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;
}

/* Spec Details */
.benchmark-specs {
 background: #f9fbfa;
 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 #e5ebe7;
}

.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;
}

/* Score Badges */
.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: #1cad49;
 color: #fff;
}

.benchmark-score-badge.good {
 background: #4fe27c;
 color: #fff;
}

.benchmark-score-badge.average {
 background: #25db5d;
 color: #fff;
}

.benchmark-score-badge.poor {
 background: #9aefb4;
 color: #fff;
}

/* Attribution */
.benchmark-attribution {
 text-align: center;
 margin-top: 24px;
 padding-top: 20px;
 border-top: 1px solid #e5ebe7;
 font-size: 13px;
 color: #9ca3af;
}

.benchmark-attribution a {
 color: #69e790;
 text-decoration: none;
 font-weight: 500;
}

.benchmark-attribution a:hover {
 text-decoration: underline;
}

/* Responsive */
@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;
 }
}



/* =========================================================
 Product Filters (Desktop + Mobile Drawer)
 Light Only + FIX:
 - Desktop: f-actions selalu tampil (static bottom)
 - Mobile: konten filter dapat discroll
 ========================================================= */

/* ========== Layout wrapper (tidak mengubah grid produk) ========== */
.product-archive.with-filters .pa-layout {
 display:flex;
 gap:24px;
 align-items:flex-start;
}
.pa-main { flex:1; min-width:0; }

/* =========================================================
 DESKTOP PANEL
 ========================================================= */
.pa-filters {
 width:300px;
 background:linear-gradient(145deg,#ffffff 0%,#f8fcf9 55%,#f1f9f3 100%);
 border:1px solid #e2f0e6;
 padding:18px 18px 12px; /* bottom dikurangi karena f-actions punya padding sendiri */
 border-radius:18px;
 position:sticky;
 top:80px;
 height:calc(100vh - 100px); /* tinggi stabil untuk inner scroll */
 font-size:14px;
 box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(15,42,23,.08);
 backdrop-filter:blur(3px);
 -webkit-backdrop-filter:blur(3px);
 transition:box-shadow .3s, background .4s;
 display:flex;
 flex-direction:column;
 overflow:hidden; /* cegah double scroll, inner yang scroll */
}
.pa-filters::before {
 content:"";
 position:absolute;
 inset:0 auto 0 0;
 width:7px;
 border-radius:18px 0 0 18px;
 background:linear-gradient(180deg,#25db5d 0%,#56e382 35%,#23da5c 100%);
}
.pa-filters.active { box-shadow:0 8px 32px -4px rgba(15,42,23,.35); }

/* Scroll area (desktop/mode shared) */
.filters-scroll {
 flex:1;
 min-height:0; /* wajib agar overflow terbaca dalam flex container */
 overflow:auto;
 padding-right:6px;
 margin-right:-6px; /* kompensasi scrollbar */
 scrollbar-width:thin;
 overscroll-behavior:contain;
}
.filters-scroll::-webkit-scrollbar { width:8px; }
.filters-scroll::-webkit-scrollbar-thumb {
 background:#cbe1d2;
 border-radius:20px;
 border:2px solid #f1f9f3;
}
.filters-scroll::-webkit-scrollbar-thumb:hover { background:#94b89f; }

/* Heading */
.pa-filters h2 {
 margin:0 0 14px;
 font-size:20px;
 font-weight:700;
 letter-spacing:.4px;
 line-height:1.15;
 background:linear-gradient(90deg,#0f2a17,#23da5c 60%,#0f2a17);
 -webkit-background-clip:text;
 color:transparent;
 background-size:200% 100%;
 animation:titleSheen 8s linear infinite;
}
@keyframes titleSheen {
 0%{background-position:0 0}
 50%{background-position:100% 0}
 100%{background-position:0 0}
}

/* Form groups */
.pa-filters .f-group { margin-bottom:18px; position:relative; }
.pa-filters label {
 display:block;
 font-weight:600;
 margin:0 0 6px;
 font-size:13px;
 color:#0f2a17;
 letter-spacing:.3px;
}

/* Inputs / selects */
.pa-filters input[type=text],
.pa-filters input[type=number],
.pa-filters select {
 width:100%;
 padding:7px 10px;
 border:1px solid #cbe1d2;
 border-radius:8px;
 font-size:13px;
 min-height:34px;
 background:#ffffff;
 box-sizing:border-box;
 color:#0f2a17;
 transition:border-color .25s, box-shadow .25s, background .25s;
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
}
.pa-filters select {
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230f172a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 10px center;
 background-size:12px;
 padding-right:32px;
}
.pa-filters input[type=text]:hover,
.pa-filters input[type=number]:hover,
.pa-filters select:hover { border-color:#94ecaf; }
.pa-filters input[type=text]:focus,
.pa-filters input[type=number]:focus,
.pa-filters select:focus {
 outline:none;
 border-color:#23da5c;
 box-shadow:0 0 0 3px rgba(35,218,92,.25);
 background:#f9fefb;
}
.pa-filters .range { display:flex; gap:10px; }
.pa-filters .range input { flex:1; }
.pa-filters .hint { font-size:11px; color:#648b70; margin-top:6px; }

/* Spec blocks */
.f-specs { margin-top:4px; }
.spec-attr {
 margin:0 0 14px;
 padding:12px 12px 10px;
 border:1px solid #e2f0e6;
 border-radius:14px;
 background:linear-gradient(130deg,#ffffff 0%,#f8fefa 85%);
 position:relative;
 transition:border-color .3s, box-shadow .3s, background .4s;
}
.spec-attr.collapsed { padding-bottom:8px; }
.spec-attr.has-selected {
 border-color:#23da5c;
 box-shadow:0 0 0 2px rgba(35,218,92,.15),0 2px 8px -2px rgba(35,218,92,.35);
 background:linear-gradient(135deg,#ffffff 0%,#ecfcf1 100%);
}
.spec-attr-title {
 font-weight:600;
 margin:0 0 8px;
 font-size:13px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 cursor:pointer;
 color:#0f2a17;
 user-select:none;
}
.spec-attr-title .chevron {
 font-size:10px;
 transition:transform .25s, opacity .25s;
 opacity:.65;
}
.spec-attr.collapsed .spec-attr-title .chevron {
 transform:rotate(-90deg);
 opacity:.5;
}

/* Spec options */
.spec-attr-options { display:flex; flex-wrap:wrap; gap:6px; }
.spec-attr-options label {
 display:inline-flex;
 align-items:center;
 gap:4px;
 font-weight:500;
 border:1px solid #d4e7da;
 padding:6px 9px;
 border-radius:30px;
 cursor:pointer;
 background:#f3faf5;
 font-size:12px;
 line-height:1.1;
 transition:background .25s, border-color .25s, color .25s, box-shadow .25s;
 position:relative;
}
.spec-attr-options label:hover { background:#ebfcf0; border-color:#b2f2c6; }
.spec-attr-options input {
 margin:0;
 position:absolute;
 inset:0;
 opacity:0;
 cursor:pointer;
}
.spec-attr-options label:has(input:checked) {
 background:linear-gradient(135deg,#23da5c 0%,#1db04a 100%);
 border-color:#23da5c;
 color:#ffffff;
 box-shadow:0 2px 6px -1px rgba(35,218,92,.55);
}
.spec-attr-options label:has(input:checked)::after {
 content:"";
 position:absolute;
 right:6px;
 top:6px;
 width:6px;
 height:6px;
 background:#fff;
 border-radius:50%;
 box-shadow:0 0 0 4px rgba(255,255,255,.25),0 0 0 7px rgba(35,218,92,.5);
 animation:pulseDot 1.9s ease-out infinite;
}
@keyframes pulseDot {
 0%{transform:scale(.8);opacity:.9}
 60%{transform:scale(1.4);opacity:.15}
 100%{transform:scale(.8);opacity:.9}
}

/* Badges */
.pa-filter-badges { margin:0 0 18px; display:flex; flex-wrap:wrap; gap:6px; }
.pa-filter-badge {
 display:inline-flex;
 gap:6px;
 align-items:center;
 background:linear-gradient(135deg,#f0fdf4 0%,#e4fbeb 100%);
 border:1px solid #b4f3c8;
 padding:5px 10px 5px 12px;
 border-radius:22px;
 margin:2px 4px 0 0;
 font-size:11px;
 font-weight:500;
 line-height:1;
 color:#0f2a17;
 position:relative;
 overflow:hidden;
}
.pa-filter-badge::before {
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));
 transform:translateX(-100%);
 animation:badgeSheen 6s linear infinite;
}
@keyframes badgeSheen {
 0%{transform:translateX(-100%)}
 55%{transform:translateX(120%)}
 100%{transform:translateX(120%)}
}
.pa-filter-badge a.clear {
 text-decoration:none;
 color:#28c057;
 font-weight:700;
 padding:0 3px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 line-height:1;
 transition:background .25s, color .25s;
}
.pa-filter-badge a.clear:hover { background:#f0fcf4; color:#178d3c; }
.pa-btn-filter { width: 100%;}

/* =========================================================
 ACTIONS (DESKTOP) - STATIC BOTTOM
 ========================================================= */
.f-actions {
 margin-top:10px;
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 padding:16px 0 4px;
 border-top:1px solid #e2f0e6;
 background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#f1f9f3 70%);
 flex-shrink:0;
}
.f-actions button {
 background:linear-gradient(135deg,#23da5c 0%,#1db04a 100%);
 color:#fff;
 border:none;
 padding:10px 20px;
 border-radius:12px;
 cursor:pointer;
 font-size:14px;
 font-weight:600;
 letter-spacing:.3px;
 display:inline-flex;
 align-items:center;
 gap:6px;
 box-shadow:0 4px 14px -2px rgba(35,218,92,.45);
 transition:transform .25s, box-shadow .3s;
}
.f-actions button:hover { transform:translateY(-3px); box-shadow:0 8px 26px -4px rgba(35,218,92,.6); }
.f-actions button:active { transform:translateY(-1px) scale(.98); box-shadow:0 4px 14px -4px rgba(35,218,92,.55); }
.f-actions .reset {
 font-size:12px;
 text-decoration:none;
 color:#9aefb4;
 align-self:center;
 font-weight:600;
 padding:4px 6px;
 border-radius:8px;
 transition:background .25s, color .25s;
}
.f-actions .reset:hover { background:#eafbef; color:#9aefb4; text-decoration:underline; }
.pa-filters .close-drawer { display: none; }

/* Form wrapper: flex container agar inner .filters-scroll bisa scroll di desktop */
.filter-form {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

/* =========================================================
 FILTER TOGGLE (MOBILE TRIGGER)
 ========================================================= */
.filter-toggle {
 display:none;
 margin:0 0 14px;
 background:linear-gradient(135deg,#23da5c 0%,#1db04a 100%);
 color:#fff;
 border:none;
 padding:11px 18px;
 font-size:14px;
 font-weight:600;
 border-radius:14px;
 cursor:pointer;
 letter-spacing:.4px;
 box-shadow:0 4px 14px -2px rgba(35,218,92,.55);
 position:relative;
 z-index:100;
 transition:box-shadow .3s, transform .25s;
}
.filter-toggle:hover { box-shadow:0 8px 26px -4px rgba(35,218,92,.6); transform:translateY(-2px); }
.filter-toggle:active { transform:translateY(0); box-shadow:0 4px 14px -4px rgba(35,218,92,.55); }
.filter-toggle .count-badge {
 display:inline-block;
 background:linear-gradient(135deg,#9aefb4 0%,#9aefb4 55%,#9aefb4 100%);
 color:#1d4429;
 font-size:11px;
 font-weight:700;
 padding:3px 7px 4px;
 border-radius:30px;
 margin-left:8px;
 box-shadow:0 0 0 2px #ffffff,0 0 0 4px #23da5c;
}

/* Overlay (mobile) */
.pa-filters-overlay { display:none; }

/* =========================================================
 MOBILE DRAWER
 ========================================================= */
@media (max-width:768px){
 .product-archive.with-filters .pa-layout { flex-direction:column; gap:12px; }
 .filter-toggle { display:inline-flex; align-items:center; gap:6px; }

 .pa-filters-overlay {
 position:fixed;
 inset:0;
 background:rgba(6,39,16,.55);
 z-index:998;
 opacity:0;
 transition:opacity .35s;
 display:block;
 pointer-events:none;
 backdrop-filter:blur(2px);
 }
 .pa-filters-overlay.active { opacity:1; pointer-events:auto; }

 .pa-filters {
 position:fixed;
 top:auto;
 left:0; right:0; bottom:0;
 max-height:92vh;
 height:auto;
 width:100%;
 border-radius:30px 30px 0 0;
 border:1px solid #dbefe1;
 padding:26px 22px 0;
 z-index:10000; /* di atas bottom-nav (9998) */
 transform:translateY(102%);
 transition:transform .55s cubic-bezier(.68,-0.35,.25,1);
 box-shadow:0 -4px 40px -6px rgba(15,42,23,.45);
 overflow:hidden; /* outer hidden, inner scroll */
 }
 .pa-filters.active { transform:translateY(0); }

 /* Drag handle indicator */
 .pa-filters::after {
 content:"";
 display:block;
 position:absolute;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 width:36px;
 height:4px;
 background:#cbe1d2;
 border-radius:4px;
 }
 body.filter-open { overflow:hidden; touch-action:none; }

 /* Restore mobile-friendly input sizes (prevent iOS zoom on focus) */
 .pa-filters input[type=text],
 .pa-filters input[type=number],
 .pa-filters select {
 font-size:16px;
 min-height:44px;
 padding:10px 12px;
 border-radius:10px;
 }
 .pa-filters select { padding-right:32px; }

 .filters-scroll {
 flex:1;
 overflow:auto;
 padding:0 0 120px; /* ruang di atas bar actions */
 margin:0;
 -webkit-overflow-scrolling:touch;
 }

 .pa-filters h2 { font-size:19px; margin-bottom:10px; }

 .pa-filters .close-drawer {
 display: block;
 position:absolute;
 right:14px; top:12px;
 background:linear-gradient(135deg,#9aefb4 0%,#9aefb4 100%);
 color:#fff;
 padding:7px 14px;
 border:none;
 border-radius:10px;
 font-size:12px;
 font-weight:600;
 cursor:pointer;
 box-shadow:0 3px 10px -2px rgba(31,193,81, 0.3);
 transition:transform .25s, box-shadow .3s;
 z-index: 99;
 }
 .pa-filters .close-drawer:hover { transform:translateY(-2px); box-shadow:0 6px 18px -4px rgba(31,193,81, 0.3); }

 .spec-attr { border-radius:18px; }
 .spec-attr-options label { font-size:11px; padding:5px 9px; }

 /* Actions fixed di viewport bawah */
 .f-actions {
 position:fixed;
 left:0; right:0; bottom:0;
 margin:0;
 border-top:1px solid #d6e8dc;
 padding:14px 16px calc(16px + env(safe-area-inset-bottom));
 background:#ffffffea;
 backdrop-filter:blur(6px);
 box-shadow:0 -4px 22px -6px rgba(15,42,23,.25);
 justify-content:space-between;
 z-index:10001; /* di atas pa-filters (10000) dan bottom-nav (9998) */
 }

 /* Sembunyikan bottom-nav saat filter drawer terbuka */
 body.filter-open .bottom-nav {
 display: none !important;
 }
 .f-actions button {
 flex:1 1 auto;
 justify-content:center;
 padding:14px 14px;
 font-size:15px;
 border-radius:14px;
 }
 .f-actions .reset {
 order:-1;
 font-size:12px;
 padding:2px 8px;
 }
}

/* Scrollbar (outer panel desktop only kept for compatibility) */
.pa-filters::-webkit-scrollbar { width:0; } /* disembunyikan karena inner yang scroll */

/* Utilities */
.hidden { display:none !important; }
.gradient-text {
 background:linear-gradient(90deg,#23da5c,#1db04a,#23da5c);
 -webkit-background-clip:text;
 color:transparent;
 animation:titleSheen 10s linear infinite;
}
.glow-focus:focus {
 outline:none !important;
 box-shadow:0 0 0 3px rgba(35,218,92,.4) !important;
 border-color:#23da5c !important;
}

/* Simple fade (opsional) */
@keyframes fadeIn {
 from { opacity:0; transform:translateY(8px); }
 to { opacity:1; transform:translateY(0); }
}


/* Tile Mega Menu — Modern E-commerce Enhanced (2025) */

/* Design Tokens */
:root {
 --mm2-bg: #ffffff;
 --mm2-surface: #ffffff;
 --mm2-surface-elevated: rgba(255,255,255,0.98);
 --mm2-muted: #f8fcf9;
 --mm2-border: #e2f0e6;
 --mm2-border-strong: #cbe1d2;
 --mm2-accent: #6de793;
 --mm2-accent-hover: #4ae179;
 --mm2-accent-10: rgba(109,231,147,.10);
 --mm2-accent-20: rgba(109,231,147,.20);
 --mm2-fg: #0f2a17;
 --mm2-fg-muted: #648b70;
 --mm2-fg-light: #94b89f;
 
 /* Enhanced Shadows - Multi-layer elevation */
 --mm2-shadow-sm: 0 2px 8px rgba(15,42,23,.06), 0 1px 2px rgba(15,42,23,.04);
 --mm2-shadow-md: 0 8px 24px rgba(15,42,23,.10), 0 2px 8px rgba(15,42,23,.06);
 --mm2-shadow-lg: 0 20px 60px rgba(15,42,23,.14), 0 8px 24px rgba(15,42,23,.08);
 --mm2-shadow-xl: 0 32px 80px rgba(15,42,23,.18), 0 12px 32px rgba(15,42,23,.10);
 --mm2-shadow-hover: 0 16px 40px rgba(15,42,23,.16), 0 6px 16px rgba(15,42,23,.08);
 
 /* Border Radius */
 --mm2-radius-xl: 20px;
 --mm2-radius-lg: 16px;
 --mm2-radius-md: 12px;
 --mm2-radius-sm: 10px;
 
 --mm2-z: 60;
 
 /* Animation Timing */
 --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); }

/* Trigger Button - Enhanced */
.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); }

/* Backdrop - Enhanced Glassmorphism */
.mm2-backdrop {
 position: fixed; 
 inset: 0;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(15,42,23,.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; }

/* Panel - Glassmorphism Enhanced */
.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);
}

/* View switcher */
.mm2-view { display: none; }
.mm2-open .mm2-view.is-active { display: block; }

/* Top grid (level-1 tiles) - Enhanced */
.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; } }

/* Stagger animation for cards */
.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,252,249,1));
 box-shadow: var(--mm2-shadow-hover);
 transform: translateY(-3px);
}
.mm2-card:active { transform: translateY(-1px); }

/* Icon with category-specific gradients */
.mm2-card .mm2-ico {
 width: 48px; height: 48px; border-radius: 12px;
 display: inline-flex; align-items: center; justify-content: center;
 background: linear-gradient(135deg, #e4fbeb, #fff);
 border: 1.5px solid #cef7db;
 color: #4ae179;
 flex-shrink: 0;
 transition: all var(--mm2-transition-fast);
 box-shadow: 0 2px 8px rgba(109,231,147,0.1);
}
.mm2-card:hover .mm2-ico {
 transform: scale(1.08) rotate(2deg);
 box-shadow: 0 4px 16px rgba(109,231,147,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;
}

/* Detail view (level-2 + level-3) - Enhanced */
.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;
}

/* Two-pane layout (desktop) - Enhanced */
.mm2-detail-layout {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 20px;
}

/* Left: subnav (level-2 list) - Enhanced */
.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: #cbe1d2; border-radius: 8px; }
.mm2-subnav::-webkit-scrollbar-thumb:hover { background: #94b89f; }

.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(109,231,147,0.08), rgba(109,231,147,0.04));
 border-color: var(--mm2-accent-20);
 color: var(--mm2-accent-hover);
 box-shadow: inset 0 0 0 1px rgba(109,231,147,0.1);
}
.mm2-subitem.active::before {
 height: 24px;
}

/* Right: subcontent (level-3 grid) - Enhanced */
.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;
}

/* Product Thumbnails */
.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(109,231,147,0.15);
 transform: scale(1.08);
}

/* Thumbnail Skeleton Loader */
.mm2-thumb-skeleton {
 width: 36px;
 height: 36px;
 border-radius: 8px;
 background: linear-gradient(90deg, #f1f9f3 25%, #e2f0e6 50%, #f1f9f3 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);
}

/* "See all" highlight card - Enhanced */
.mm2-seeall {
 border: 2px dashed var(--mm2-accent);
 background: linear-gradient(135deg, rgba(109,231,147,.08), rgba(109,231,147,.02));
 font-weight: 700;
}
.mm2-seeall:hover {
 background: linear-gradient(135deg, rgba(109,231,147,.14), rgba(109,231,147,.06));
 border-style: solid;
 transform: translateX(6px) scale(1.02);
}

/* Mobile panel styles - Enhanced with drag handle & better touch targets */
@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;
 }
 
 /* Enhanced backdrop for mobile */
 .mm2-backdrop {
 backdrop-filter: blur(6px) saturate(1.2);
 -webkit-backdrop-filter: blur(6px) saturate(1.2);
 }
 
 /* Mobile close button - Soft glassmorphism */
 .mm2-mobile-close {
 position: absolute;
 top: 4px;
 right: 8px;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 border: 1px solid rgba(226,240,230, 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,42,23, 0.08);
 z-index: 20;
 }
 .mm2-mobile-close:hover {
 background: rgba(243,253,246, 0.95);
 border-color: rgba(175,242,196, 0.8);
 color: #9aefb4;
 box-shadow: 0 4px 12px rgba(38,220,95, 0.15);
 }
 .mm2-mobile-close:active {
 transform: scale(0.92);
 }
 
 /* Drag handle indicator */
 .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: #94b89f;
 }
 
 .mm2-top {
 padding: 10px; 
 }
 
 .mm2-top, .mm2-detail { 
 max-height: min(82vh, 720px);
 padding-top: 8px;
 }

 /* Two-pane collapses: subnav becomes GRID (no horizontal scroll) */
 .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(109,231,147,0.3);
 font-weight: 700;
 }

 /* Level-3 grid tetap 2 kolom dengan spacing lebih baik */
 .mm2-links { 
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap: 10px;
 }
 
 /* Mobile: hide thumbnails untuk save space */
 .mm2-thumbs {
 display: none;
 }
 
 /* Larger touch targets for mobile */
 .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;
 }
 
 /* Grid spacing */
 .mm2-grid {
 gap: 10px;
 }
}


/* Product Compare Feature Styles */

/* Compare Button in Product Detail - Modern Chip Style */
.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 #cbe1d2;
 border-radius: 20px;
 background: #fff;
 color: #648b70;
 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: #4fe27c;
 color: #4fe27c;
 background: #f2fdf5;
 transform: translateY(-1px);
 box-shadow: 0 2px 6px rgba(79,226,124, 0.15);
}

.pd-compare-btn.added {
 border-color: #1a9f43;
 color: #1a9f43;
 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: #9aefb4 !important;
 opacity: 1 !important;
 visibility: visible !important;
 z-index: 1;
 position: relative;
}

.pd-compare-btn.added .compare-remove[hidden] {
 display: flex !important;
}

/* Force visibility for added state */
.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;
}

/* Ensure the added state text is always visible */
.pd-compare-btn.added {
 border-color: #9aefb4 !important;
 color: #9aefb4 !important;
 background: #f3fdf6 !important;
}

.pd-compare-btn.added .compare-remove svg {
 color: #9aefb4 !important;
}

.pd-compare-btn.added:hover {
 border-color: #158036;
 color: #158036;
 background: #defae7;
 transform: translateY(-1px);
 box-shadow: 0 2px 6px rgba(26,159,67, 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: #94b89f;
 font-size: 0.7rem;
 font-weight: 500;
 transition: color 0.2s ease;
}

.pd-compare-btn.added + .pd-compare-info .compare-note {
 color: #1a9f43;
 font-weight: 600;
}

/* Compare Badge in Navigation */
.compare-indicator {
 position: relative;
}

.compare-indicator .badge {
 position: absolute;
 top: -8px;
 right: -8px;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 background: #9aefb4;
 color: white;
 border-radius: 9px;
 font-size: 11px;
 

/* Floating Compare Badge (Sticky) */
.compare-floating-badge {
 position: fixed;
 right: 16px;
 bottom: calc(20px + 60px); /* Above scroll-to-top button */
 width: auto;
 min-width: 56px;
 height: 56px;
 padding: 0 16px;
 border-radius: 28px;
 background: linear-gradient(135deg, #4fe27c 0%, #32de67 100%);
 color: #fff;
 box-shadow: 0 8px 24px -8px rgba(79,226,124, 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(79,226,124, 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 */
.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 #e2f0e6;
 background: #f8fcf9;
}

.compare-title {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 1rem;
 font-weight: 600;
 color: #1e3b27;
 margin: 0;
}

.compare-count {
 color: #648b70;
 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: #648b70;
 cursor: pointer;
 transition: all 0.2s ease;
}

.compare-close:hover {
 background: #e2f0e6;
 color: #37513f;
}

.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: #37513f;
}

.compare-empty p {
 color: #648b70;
 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 #e2f0e6;
 border-radius: 8px;
 background: #ffffff;
 transition: all 0.2s ease;
}

.compare-item:hover {
 border-color: #cbe1d2;
 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 #e2f0e6;
}

.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: #1e3b27;
 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: #168538;
}

.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: #9aefb4;
 cursor: pointer;
 transition: all 0.2s ease;
}

.compare-item-remove:hover {
 background: #f3fdf6;
 color: #1b9942;
}

.compare-actions {
 padding: 1rem;
 border-top: 1px solid #e2f0e6;
 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 #9aefb4;
 background: transparent;
 color: #9aefb4;
}

.btn-outline-danger:hover {
 background: #9aefb4;
 color: white;
}

.btn-primary {
 border: 1px solid #4fe27c;
 background: #4fe27c;
 color: white;
}

.btn-primary:hover {
 background: #32de67;
 border-color: #32de67;
}

.btn-primary:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

.btn-primary:disabled:hover {
 background: #4fe27c;
 border-color: #4fe27c;
}

/* AI Comparison Modal */
.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 #e2f0e6;
 background: #f8fcf9;
}

.modal-title {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 font-size: 1.25rem;
 font-weight: 600;
 color: #1e3b27;
 margin: 0;
}

.modal-close {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border: none;
 border-radius: 8px;
 background: transparent;
 color: #648b70;
 cursor: pointer;
 transition: all 0.2s ease;
}

.modal-close:hover {
 background: #e2f0e6;
 color: #37513f;
}

.modal-content {
 flex: 1;
 overflow-y: auto;
 padding: 2rem;
}

/* AI Loading State */
.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: #4fe27c;
 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: #1e3b27;
 margin-bottom: 0.5rem;
}

.ai-loading small {
 color: #648b70;
}

/* AI Error State */
.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: #9aefb4;
}

.ai-error p {
 color: #648b70;
 margin-bottom: 1.5rem;
}

/* AI Results */
.ai-results > div {
 margin-bottom: 2rem;
}

.ai-summary-card,
.ai-comparison-table,
.ai-detailed-analysis,
.ai-recommendations,
.ai-tips {
 background: #f8fcf9;
 border: 1px solid #e2f0e6;
 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: #1e3b27;
 margin-bottom: 1rem;
}

.summary-text {
 font-size: 1rem;
 line-height: 1.6;
 color: #37513f;
 margin-bottom: 1rem;
}

.winner-badge {
 padding: 1rem;
 background: linear-gradient(135deg, #1cad49 0%, #168538 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 Table */
.comparison-grid {
 display: grid;
 gap: 1rem;
 margin-top: 1rem;
}

.comparison-category {
 background: white;
 border: 1px solid #e2f0e6;
 border-radius: 8px;
 overflow: hidden;
}

.category-header {
 background: #f1f9f3;
 padding: 0.75rem 1rem;
 font-weight: 600;
 color: #1e3b27;
 border-bottom: 1px solid #e2f0e6;
}

.category-products {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 1px;
 background: #e2f0e6;
}

.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: #3fe071;
}

.score-note {
 font-size: 0.8rem;
 color: #648b70;
 line-height: 1.3;
}

/* Product name header in comparison table */
.product-name-header {
 margin-bottom: 0.5rem;
}

.product-name-header strong {
 font-size: .8rem; /* h5 size (18px) */
 font-weight: 600;
 color: #1e3b27;
 line-height: 1.3;
 display: block;
 word-break: break-word;
}

.product-price {
 font-size: 0.8rem;
 font-weight: 600;
 color: #168538;
}

/* Detailed Analysis */
.products-analysis {
 display: grid;
 gap: 1rem;
 margin-top: 1rem;
}

.product-analysis {
 background: white;
 border: 1px solid #e2f0e6;
 border-radius: 8px;
 padding: 1rem;
}

.product-analysis h5 {
 color: #1e3b27;
 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: #168538;
}

.analysis-section h6.weaknesses {
 color: #9aefb4;
}

.analysis-section h6.best-for {
 color: #46e176;
}

.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: #648b70;
 font-weight: bold;
 margin-top: 0.1rem;
}

.best-for-text {
 font-size: 0.875rem;
 color: #37513f;
 font-style: italic;
}

/* Recommendations */
.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 #e2f0e6;
 border-radius: 8px;
 padding: 1rem;
 text-align: center;
}

.recommendation-card h5 {
 font-size: 1rem;
 margin-bottom: 0.75rem;
 color: #1e3b27;
}

.recommendation-card p {
 font-size: 0.875rem;
 color: #37513f;
 line-height: 1.5;
}

/* Tips */
.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: #37513f;
}

.tips-list li:before {
 content: "💡";
 font-size: 1rem;
 margin-top: 0.1rem;
}

/* Modal Footer */
.modal-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.5rem 2rem;
 border-top: 1px solid #e2f0e6;
 background: #f8fcf9;
}

.btn-outline-secondary {
 border: 1px solid #648b70;
 background: transparent;
 color: #648b70;
 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: #648b70;
 color: white;
}

/* Responsive for chip button */
@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;
 }
}

/* Responsive Design */
@media (max-width: 768px) {
 .compare-sidebar {
 width: 100%;
 right: -100%;
 /* Fix for mobile viewport height changes */
 height: 100vh;
 height: 100dvh; /* Dynamic viewport height for modern browsers */
 }
 
 .compare-actions {
 /* Ensure actions are always visible */
 position: sticky;
 bottom: 0;
 background: white;
 border-top: 2px solid #e2f0e6;
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 z-index: 10;
 }
 
 .compare-actions .btn {
 /* Larger touch targets for mobile */
 min-height: 48px;
 font-size: 0.9rem;
 font-weight: 700;
 }
 
 .modal-container {
 width: 95%;
 max-height: 95vh;
 max-height: 95dvh; /* Dynamic viewport height */
 }
 
 .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%;
 }
 
 /* Ensure compare button is visible on mobile */
 .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; /* Minimum touch target for mobile */
 border: 2px solid #e2f0e6 !important;
 background: #fff !important;
 position: relative !important;
 z-index: 2 !important;
 box-sizing: border-box;
 white-space: normal !important; /* Allow text wrapping on mobile */
 flex-wrap: wrap;
 gap: 0.5rem;
 }
 
 .pd-compare-btn .compare-text {
 display: inline !important;
 visibility: visible !important;
 font-weight: 600;
 color: #476952 !important;
 }
 
 .pd-compare-btn .compare-remove {
 display: none !important; /* Hidden by default */
 }
 
 .pd-compare-btn.added .compare-remove {
 display: flex !important; /* Only show when added */
 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: #648b70 !important;
 }
}

/* iOS Safari specific fixes */
@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;
 }
 
 /* Fix sidebar height for iOS address bar */
 .compare-sidebar {
 /* Use fixed positioning that accounts for iOS address bar */
 height: 100vh;
 height: -webkit-fill-available; /* iOS Safari compatibility */
 min-height: 100vh;
 min-height: -webkit-fill-available;
 }
 
 /* Ensure compare actions stay at bottom */
 .compare-actions {
 position: sticky;
 bottom: 0;
 background: white;
 border-top: 2px solid #e2f0e6;
 box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
 padding: 1.25rem 1rem;
 z-index: 20;
 }
 
 .compare-actions .btn {
 min-height: 52px; /* Larger for easier tapping */
 font-size: 1rem;
 font-weight: 700;
 border-radius: 8px;
 }
 
 /* Adjust content padding to account for sticky actions */
 .compare-content {
 padding-bottom: 6rem; /* Extra space for sticky actions */
 }
}

/* High-resolution mobile devices (iPhone 12 Pro, etc.) */
@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; /* Prevent zoom on iOS */
 }
 
 /* Enhanced fixes for iPhone 12 Pro and similar devices */
 .compare-sidebar {
 /* Ensure full height coverage */
 height: 100vh;
 height: 100dvh; /* Dynamic viewport height */
 height: -webkit-fill-available; /* iOS fallback */
 max-height: 100vh;
 max-height: 100dvh;
 max-height: -webkit-fill-available;
 overflow: hidden; /* Prevent scroll issues */
 }
 
 .compare-content {
 /* Flexible content area */
 flex: 1;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 padding: 1rem 1rem 8rem 1rem; /* Extra bottom padding */
 }
 
 .compare-actions {
 /* Force actions to stay visible */
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 background: white;
 border-top: 2px solid #e2f0e6;
 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; /* Extra large for high-DPI screens */
 font-size: .8rem;
 font-weight: 600;
 border-radius: 12px;
 display: flex !important;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 }
 
 /* Ensure AI analyze button is always visible and prominent */
 #compareAnalyze {
 background: #4fe27c !important;
 border-color: #4fe27c !important;
 color: white !important;
 box-shadow: 0 4px 12px rgba(79,226,124, 0.3);
 }
 
 #compareAnalyze:not(:disabled) {
 background: #32de67 !important;
 border-color: #32de67 !important;
 transform: scale(1.02);
 }
 
 #compareAnalyze:disabled {
 opacity: 0.6 !important;
 background: #9ca3af !important;
 border-color: #9ca3af !important;
 }
}

/* AI Disclaimer Styles */
.ai-disclaimer {
 display: flex;
 align-items: flex-start;
 gap: 0.75rem;
 padding: 1rem;
 background: #cef7db;
 border: 1px solid #3fe071;
 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: #168a3a;
}

.disclaimer-text strong {
 color: #137431;
 font-weight: 600;
}

/* Compare Disclaimer in Sidebar */
.compare-disclaimer {
 margin-top: 1rem;
 padding: 1rem;
 background: #f2fdf5;
 border: 1px solid #23d45a;
 border-radius: 8px;
}

.compare-disclaimer h6 {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.875rem;
 font-weight: 600;
 color: #11692c;
 margin-bottom: 0.5rem;
}

.compare-disclaimer p {
 font-size: 0.8rem;
 line-height: 1.4;
 color: #147833;
 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: #147833;
}

.compare-disclaimer li:before {
 content: "•";
 color: #23d45a;
 font-weight: bold;
 margin-top: 0.1rem;
 flex-shrink: 0;
}

/* Mobile Browser Address Bar Fixes */
@supports (height: 100dvh) {
 /* Modern browsers with dynamic viewport support */
 @media (max-width: 768px) {
 .compare-sidebar {
 height: 100dvh !important;
 max-height: 100dvh !important;
 }
 
 .modal-container {
 max-height: 95dvh !important;
 }
 }
}

@supports (height: -webkit-fill-available) {
 /* iOS Safari specific support */
 @media (max-width: 768px) {
 .compare-sidebar {
 height: -webkit-fill-available !important;
 max-height: -webkit-fill-available !important;
 }
 }
}

/* Fallback for older browsers */
@media (max-width: 768px) and (orientation: portrait) {
 .compare-sidebar {
 /* Fixed height that works across different mobile browsers */
 min-height: 600px;
 height: calc(100vh - env(keyboard-inset-height, 0px));
 height: calc(100vh - env(safe-area-inset-bottom, 0px));
 }
 
 /* Ensure actions are always accessible */
 .compare-actions {
 position: sticky !important;
 bottom: env(safe-area-inset-bottom, 0px) !important;
 margin-bottom: 0 !important;
 padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
 }
}

/* PWA and fullscreen app support */
@media (display-mode: standalone) {
 .compare-sidebar {
 height: 100vh !important;
 height: 100dvh !important;
 }
}

/* Utilities */
.btn-sm {
 padding: 0.5rem 0.75rem;
 font-size: 0.8rem;
}

[hidden] {
 display: none !important;
}

/* ===== UX ENHANCEMENTS ===== */

/* Compare Button Highlight Animation */
.pulse-highlight {
 animation: pulse-glow 2s ease-in-out 3;
 box-shadow: 0 0 0 0 rgba(79,226,124, 0.7);
}

@keyframes pulse-glow {
 0% {
 box-shadow: 0 0 0 0 rgba(79,226,124, 0.7);
 }
 50% {
 box-shadow: 0 0 0 10px rgba(79,226,124, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(79,226,124, 0);
 }
}

/* Flying Product Animation */
.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);
}

/* Sticky Compare Bar - REMOVED (using only fly-to-navbar animation) */

/* Inline Compare Preview - REMOVED (keeping it simple and clean) */


/**
 * Product Card Quick Actions - 3 Dot Menu + Bottom Sheet
 * Tokopedia-inspired design
 */

/* ===== 3 Dot Button on Product Card ===== */
.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: #648b70;
 display: block;
}

/* Desktop: Show on hover */
@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;
 }
}

/* Mobile: Always visible but smaller */
@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;
 }
}

/* ===== Bottom Sheet Overlay ===== */
.pca-overlay {
 position: fixed;
 inset: 0;
 background: rgba(15,42,23, 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;
}

/* ===== Bottom Sheet Container ===== */
.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);
}

/* Drag Handle */
.pca-sheet-handle {
 width: 40px;
 height: 4px;
 background: #cbe1d2;
 border-radius: 999px;
 margin: 12px auto 8px;
}

/* Product Preview */
.pca-sheet-product {
 display: flex;
 gap: 12px;
 padding: 12px 20px;
 border-bottom: 1px solid #f1f9f3;
}

.pca-product-image {
 width: 60px;
 height: 60px;
 border-radius: 8px;
 object-fit: cover;
 flex-shrink: 0;
 border: 1px solid #e2f0e6;
}

.pca-product-info {
 flex: 1;
 min-width: 0;
}

.pca-product-name {
 font-size: 14px;
 font-weight: 600;
 color: #0f2a17;
 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: #23d45a;
 margin: 0;
}

.pca-product-stock {
 font-size: 12px;
 color: #648b70;
 margin: 2px 0 0 0;
}

.pca-product-stock.in {
 color: #1a9f43;
}

.pca-product-stock.low {
 color: #22d459;
}

.pca-product-stock.out {
 color: #9aefb4;
}

/* Action Menu */
.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: #f8fcf9;
}

.pca-action-item:active {
 background: #f1f9f3;
}

.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: #476952;
 flex-shrink: 0;
}

.pca-action-content {
 flex: 1;
 text-align: left;
}

.pca-action-label {
 font-size: 15px;
 font-weight: 600;
 color: #0f2a17;
 margin: 0 0 2px 0;
}

.pca-action-desc {
 font-size: 12px;
 color: #648b70;
 margin: 0;
}

.pca-action-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 20px;
 height: 20px;
 padding: 0 6px;
 background: #23d45a;
 color: #fff;
 font-size: 11px;
 font-weight: 700;
 border-radius: 999px;
 margin-left: auto;
}

.pca-action-badge.compare {
 background: #6be791;
}

/* Action Item Colors */
.pca-action-item.cart .pca-action-icon {
 color: #23d45a;
}

.pca-action-item.compare .pca-action-icon {
 color: #6be791;
}

.pca-action-item.compare.active {
 background: rgba(107,231,145, 0.05);
}

.pca-action-item.compare.active .pca-action-label {
 color: #6be791;
}

.pca-action-item.compare.active .pca-action-icon {
 color: #6be791;
}

.pca-action-item.share .pca-action-icon {
 color: #648b70;
}

/* Loading State */
.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); }
}

/* Success State Animation */
.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); }
}

/* ===== Safe Area for Mobile Devices ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
 .pca-sheet-actions {
 padding-bottom: calc(20px + env(safe-area-inset-bottom));
 }
}

/* ===== Responsive Tweaks ===== */
@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;
 }
}

/* ===== Animation for Flying Product ===== */
.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);
 }
}

/* ===== Desktop Dropdown (Alternative) ===== */
@media (min-width: 1024px) {
 /* Optional: Could add desktop dropdown menu here */
 /* For now, using bottom sheet for consistency */
}

/* ===== Print Styles ===== */
@media print {
 .prod-card-actions-btn,
 .pca-overlay,
 .pca-bottom-sheet {
 display: none !important;
 }
}



/* Modern Modal Dialog for Cart Operations */
.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 #f1f9f3;
}

.modal-title {
 font-size: 20px;
 font-weight: 700;
 color: #0f2a17;
 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: #476952;
 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: #f8fcf9;
 color: #648b70;
 border: 1px solid #e2f0e6;
}

.modal-btn-secondary:hover {
 background: #f1f9f3;
 border-color: #cbe1d2;
}

.modal-btn-danger {
 background: #9aefb4;
 color: white;
}

.modal-btn-danger:hover {
 background: #9aefb4;
}

.modal-btn-primary {
 background: #4fe27c;
 color: white;
}

.modal-btn-primary:hover {
 background: #32de67;
}

.modal-icon {
 font-size: 24px;
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 8px;
}

.modal-icon.danger {
 background: #f3fdf6;
 color: #9aefb4;
}

.modal-icon.warning {
 background: #eefcf2;
 color: #25db5d;
}

.modal-icon.success {
 background: #f0fdf4;
 color: #22c555;
}

.modal-icon.info {
 background: #f1fdf5;
 color: #4fe27c;
}

/* Mobile responsive */
@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;
 }
}


/**
 * Reviews & Points System - Styles
 * Product reviews, rating display, and point redemption UI
 */

/* ===================================
 PRODUCT REVIEWS
 =================================== */

.product-tabs {
 display: flex;
 border-bottom: 2px solid #e5ebe7;
 margin: 24px 0 16px;
 gap: 8px;
}

.tab-btn {
 padding: 12px 20px;
 border: none;
 background: none;
 cursor: pointer;
 font-size: 15px;
 font-weight: 500;
 color: #6b7280;
 border-bottom: 3px solid transparent;
 transition: all 0.2s ease;
 position: relative;
 top: 2px;
}

.tab-btn:hover {
 color: #112718;
}

.tab-btn.active {
 color: #32de67;
 border-bottom-color: #32de67;
}

.tab-content {
 padding: 20px 0;
}

/* Review Statistics */
.review-stats {
 display: grid;
 grid-template-columns: 200px 1fr;
 gap: 32px;
 padding: 24px;
 background: #f9fbfa;
 border-radius: 12px;
 margin-bottom: 24px;
}

.rating-summary {
 text-align: center;
}

.avg-rating {
 display: block;
 font-size: 48px;
 font-weight: 700;
 color: #112718;
 line-height: 1;
}

.rating-summary .stars {
 font-size: 24px;
 color: #3fe071;
 margin: 8px 0;
}

.total-reviews {
 display: block;
 font-size: 14px;
 color: #6b7280;
 margin-top: 4px;
}

.rating-breakdown {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.rating-bar {
 display: flex;
 align-items: center;
 gap: 12px;
}

.rating-label {
 font-size: 14px;
 color: #37513f;
 width: 32px;
 text-align: right;
}

.bar-container {
 flex: 1;
 height: 8px;
 background: #e5ebe7;
 border-radius: 4px;
 overflow: hidden;
}

.bar-fill {
 height: 100%;
 background: linear-gradient(90deg, #3fe071 0%, #25db5d 100%);
 transition: width 0.3s ease;
}

.rating-count {
 font-size: 14px;
 color: #6b7280;
 width: 40px;
 text-align: right;
}

/* Review Filters */
.review-filters {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
}

.review-sort {
 padding: 8px 12px;
 border: 1px solid #d1dbd4;
 border-radius: 8px;
 font-size: 14px;
 background: white;
}

.write-review-btn {
 padding: 10px 20px;
 background: #32de67;
 color: white;
 border: none;
 border-radius: 8px;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.2s;
}

.write-review-btn:hover {
 background: #22d359;
}

/* Review List */
.reviews-list {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.review-item {
 padding: 20px;
 background: white;
 border: 1px solid #e5ebe7;
 border-radius: 12px;
 transition: box-shadow 0.2s;
}

.review-item:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.review-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 8px;
}

.review-author {
 display: flex;
 align-items: center;
 gap: 8px;
}

.review-author strong {
 font-size: 15px;
 color: #112718;
}

.verified-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 12px;
 color: #168538;
 background: #d3f8df;
 padding: 2px 8px;
 border-radius: 4px;
 font-weight: 500;
}

.anonymous-badge {
 display: inline-flex;
 align-items: center;
 font-size: 12px;
 color: #6b7280;
 background: #f3f6f4;
 padding: 2px 6px;
 border-radius: 4px;
 margin-left: 4px;
 cursor: help;
}

.review-rating .stars {
 font-size: 16px;
 color: #3fe071;
}

.review-date {
 font-size: 13px;
 color: #9ca3af;
 margin-bottom: 12px;
}

.review-text {
 font-size: 15px;
 line-height: 1.6;
 color: #37513f;
 margin-bottom: 12px;
}

.review-images {
 display: flex;
 gap: 8px;
 margin-bottom: 12px;
 flex-wrap: wrap;
}

.review-img {
 width: 80px;
 height: 80px;
 object-fit: cover;
 border-radius: 8px;
 cursor: pointer;
 transition: transform 0.2s;
}

.review-img:hover {
 transform: scale(1.05);
}

.review-actions {
 display: flex;
 gap: 12px;
 padding-top: 12px;
 border-top: 1px solid #f3f6f4;
}

.btn-helpful {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 background: #f9fbfa;
 border: 1px solid #e5ebe7;
 border-radius: 6px;
 font-size: 13px;
 color: #6b7280;
 cursor: pointer;
 transition: all 0.2s;
}

.btn-helpful:hover {
 background: #f3f6f4;
 color: #112718;
 border-color: #d1dbd4;
}

.btn-helpful.voted {
 background: #dffae7;
 color: #22d359;
 border-color: #a0f0b9;
}

.helpful-icon {
 font-size: 14px;
}

.no-reviews {
 text-align: center;
 padding: 60px 20px;
 color: #9ca3af;
 font-size: 15px;
}

.load-more-btn {
 display: block;
 margin: 24px auto 0;
 padding: 12px 32px;
 background: white;
 border: 1px solid #d1dbd4;
 border-radius: 8px;
 font-size: 14px;
 font-weight: 500;
 color: #37513f;
 cursor: pointer;
 transition: all 0.2s;
}

.load-more-btn:hover {
 background: #f9fbfa;
 border-color: #9ca3af;
}

/* ===================================
 POINT BALANCE WIDGET (LEGACY - kept for backward compatibility)
 =================================== */

.point-balance-card {
 background: linear-gradient(135deg, #69e790 0%, #4ba266 100%);
 color: white;
 padding: 24px;
 border-radius: 16px;
 margin-bottom: 24px;
 box-shadow: 0 10px 25px rgba(105,231,144, 0.3);
}

.point-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 12px;
}

.point-header h3 {
 font-size: 18px;
 font-weight: 600;
 margin: 0;
 display: flex;
 align-items: center;
 gap: 8px;
}

.point-header .balance {
 font-size: 32px;
 font-weight: 700;
}

.point-value {
 font-size: 14px;
 opacity: 0.9;
 margin: 8px 0 16px;
}

.point-stats {
 display: flex;
 gap: 20px;
 font-size: 13px;
 opacity: 0.85;
 margin-bottom: 16px;
}

.btn-view-history {
 display: inline-block;
 padding: 10px 20px;
 background: rgba(255, 255, 255, 0.2);
 color: white;
 text-decoration: none;
 border-radius: 8px;
 font-size: 14px;
 font-weight: 500;
 transition: background 0.2s;
}

.btn-view-history:hover {
 background: rgba(255, 255, 255, 0.3);
}

/* ===================================
 CHECKOUT POINT REDEMPTION
 =================================== */

.checkout-points {
 padding: 16px;
 background: #cef7db;
 border: 2px solid #3fe071;
 border-radius: 12px;
 margin-bottom: 16px;
}

.points-header {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 12px;
}

.points-header input[type="checkbox"] {
 width: 18px;
 height: 18px;
 cursor: pointer;
}

.points-header label {
 font-size: 15px;
 color: #137431;
 cursor: pointer;
 margin: 0;
}

#points-slider {
 padding: 16px;
 background: white;
 border-radius: 8px;
 margin-top: 12px;
}

#points-slider label {
 display: block;
 font-size: 14px;
 color: #37513f;
 margin-bottom: 8px;
 font-weight: 500;
}

#points-amount {
 width: 100%;
 margin-bottom: 8px;
}

#points-display {
 display: flex;
 justify-content: space-between;
 font-size: 14px;
 color: #112718;
 margin-top: 8px;
}

#points-display .discount-amount {
 color: #168538;
 font-weight: 600;
}

.price-row.point-discount {
 color: #168538;
 font-weight: 500;
}

/* ===================================
 REVIEWABLE ORDERS
 =================================== */

.reviewable-orders {
 background: white;
 border: 1px solid #e5ebe7;
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 24px;
}

.reviewable-orders h3 {
 font-size: 18px;
 margin-bottom: 16px;
 color: #112718;
}

.order-card {
 display: flex;
 gap: 16px;
 padding: 16px;
 background: #f9fbfa;
 border-radius: 8px;
 margin-bottom: 12px;
}

.order-card:last-child {
 margin-bottom: 0;
}

.order-card img {
 width: 80px;
 height: 80px;
 object-fit: cover;
 border-radius: 8px;
}

.order-info {
 flex: 1;
}

.order-info h4 {
 font-size: 15px;
 margin: 0 0 4px;
 color: #112718;
}

.order-info p {
 font-size: 13px;
 color: #6b7280;
 margin: 0 0 12px;
}

.btn-review {
 padding: 8px 16px;
 background: #168538;
 color: white;
 border: none;
 border-radius: 6px;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.2s;
}

.btn-review:hover {
 background: #116b2d;
}

/* ===================================
 TOAST NOTIFICATIONS
 =================================== */

.review-toast {
 position: fixed;
 bottom: 24px;
 right: 24px;
 padding: 14px 20px;
 background: #112718;
 color: white;
 border-radius: 8px;
 font-size: 14px;
 line-height: 1.4;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 transform: translateY(100px);
 opacity: 0;
 transition: all 0.3s ease;
 z-index: 10000;
 max-width: 400px;
 word-wrap: break-word;
}

.review-toast.show {
 transform: translateY(0);
 opacity: 1;
}

/* Mobile: Position above bottom-nav */
@media (max-width: 768px) {
 .review-toast {
 bottom: 80px; /* Above bottom-nav (50px height + padding + safe margin) */
 right: 16px;
 left: 16px;
 max-width: calc(100% - 32px);
 }
}

.review-toast.toast-success {
 background: #168538;
}

.review-toast.toast-error {
 background: #9aefb4;
}

.review-toast.toast-info {
 background: #32de67;
}

/* ===================================
 RESPONSIVE
 =================================== */

@media (max-width: 768px) {
 .point-balance-card {
 border-radius: 0;
 }
 
 .review-stats {
 grid-template-columns: 70px 1fr;
 gap: 20px;
 padding: 16px;
 }

 .rating-summary {
 text-align: center;
 }
 
 .rating-summary .avg-rating {
 font-size: 32px;
 }
 
 .rating-summary .stars {
 font-size: 18px;
 margin: 4px 0;
 }
 
 .total-reviews {
 font-size: 11px;
 }
 
 /* Rating breakdown - more compact */
 .rating-breakdown {
 gap: 2px;
 }
 
 .rating-breakdown .rating-bar {
 gap: 4px;
 }
 
 .rating-breakdown .rating-label {
 font-size: 11px;
 width: 16px;
 min-width: 16px;
 text-align: left;
 }
 
 .rating-breakdown .bar-container {
 height: 6px;
 }
 
 .rating-breakdown .rating-count {
 font-size: 11px;
 width: 16px;
 min-width: 16px;
 }
 
 .review-header {
 flex-direction: column;
 gap: 8px;
 align-items: flex-start;
 }
 
 .review-rating {
 order: -1;
 margin-bottom: 4px;
 }
 
 .review-rating .stars {
 font-size: 14px;
 }

 .review-filters {
 flex-direction: column;
 gap: 12px;
 align-items: stretch;
 }

 .review-sort {
 width: 100%;
 }

 .point-header .balance {
 font-size: 24px;
 }

 .point-stats {
 flex-direction: column;
 gap: 8px;
 }

 .order-card {
 flex-direction: column;
 }

 .order-card img {
 width: 100%;
 height: 200px;
 }
}

/* ===================================
 LOADING & ERROR STATES
 =================================== */

.review-loading {
 text-align: center;
 padding: 40px;
 color: #9ca3af;
 font-size: 14px;
}

.review-error {
 text-align: center;
 padding: 40px;
 color: #9aefb4;
 font-size: 14px;
 background: #e5fbec;
 border-radius: 8px;
}

.review-empty {
 text-align: center;
 padding: 10px;
 color: #6b7280;
 font-size: 14px;
}

/* ===================================
 REVIEWABLE ORDERS LIST
 =================================== */

.reviewable-orders-list {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.reviewable-order-item {
 display: grid;
 grid-template-columns: 80px 1fr auto;
 gap: 16px;
 padding: 16px;
 background: #fff;
 border: 1px solid #e5ebe7;
 border-radius: 12px;
 align-items: center;
 transition: box-shadow 0.2s;
}

.reviewable-order-item:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.reviewable-order-item .roi-image {
 width: 80px;
 height: 80px;
 object-fit: cover;
 border-radius: 8px;
 border: 1px solid #e5ebe7;
}

.reviewable-order-item .roi-info {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.reviewable-order-item .roi-info h4 {
 margin: 0;
 font-size: 15px;
 font-weight: 600;
 color: #112718;
 line-height: 1.4;
}

.reviewable-order-item .roi-meta {
 margin: 0;
 font-size: 13px;
 color: #6b7280;
}

.reviewable-order-item .btn-write-review {
 white-space: nowrap;
 padding: 10px 20px;
 font-size: 14px;
}

@media (max-width: 640px) {
 .reviewable-order-item {
 grid-template-columns: 60px 1fr;
 gap: 12px;
 }
 
 .reviewable-order-item .roi-image {
 width: 60px;
 height: 60px;
 }
 
 .reviewable-order-item .btn-write-review {
 grid-column: 1 / -1;
 width: 100%;
 }
}

/* ===================================
 REVIEW SUBMISSION MODAL
 =================================== */

/* Modal Overlay Background */
#review-modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.6) !important;
 backdrop-filter: blur(8px);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 99999 !important;
 padding: 20px;
}

.review-modal {
 max-width: 600px !important;
 width: 90% !important;
 background: white;
 border-radius: 16px !important;
 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
 max-height: 90vh;
 display: flex;
 flex-direction: column;
 overflow: hidden !important;
}

#review-modal-overlay .modal-content,
.review-modal .modal-content {
 padding: 0 !important;
 flex: initial !important;
 overflow-y: visible !important;
}

.review-modal .modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 20px 24px;
 border-bottom: 1px solid #e5ebe7;
}

.review-modal .modal-title {
 margin: 0;
 font-size: 20px;
 font-weight: 700;
 color: #112718;
}

.review-modal .modal-close {
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
 color: #6b7280;
 transition: color 0.2s;
 display: flex;
 align-items: center;
 justify-content: center;
}

.review-modal .modal-close:hover {
 color: #112718;
}

.review-modal .modal-body {
 padding: 24px;
 max-height: calc(90vh - 140px);
 overflow-y: auto;
}

/* Custom Scrollbar for Modal */
.review-modal .modal-body::-webkit-scrollbar {
 width: 8px;
}

.review-modal .modal-body::-webkit-scrollbar-track {
 background: #f1f9f3;
 border-radius: 4px;
}

.review-modal .modal-body::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, #4fe27c 0%, #32de67 100%);
 border-radius: 4px;
}

.review-modal .modal-body::-webkit-scrollbar-thumb:hover {
 background: linear-gradient(180deg, #32de67 0%, #22d359 100%);
}

/* Firefox Scrollbar */
.review-modal .modal-body {
 scrollbar-width: thin;
 scrollbar-color: #4fe27c #f1f9f3;
}

.review-modal .modal-footer {
 display: flex;
 gap: 12px;
 margin-top: 24px;
 padding-top: 20px;
 border-top: 1px solid #f1f9f3;
}

.review-product-info {
 display: flex;
 gap: 16px;
 padding: 16px;
 background: #f9fbfa;
 border-radius: 8px;
 margin-bottom: 24px;
}

.review-product-thumb {
 width: 80px;
 height: 80px;
 object-fit: cover;
 border-radius: 6px;
 border: 1px solid #e5ebe7;
}

.review-product-details h4 {
 margin: 0 0 8px 0;
 font-size: 16px;
 font-weight: 600;
 color: #112718;
}

.review-product-details p {
 margin: 0;
 font-size: 13px;
 color: #6b7280;
}

/* Star Rating Input */
.star-rating-input {
 display: inline-flex;
 gap: 8px;
 margin-right: 12px;
 vertical-align: middle;
}

.star-btn {
 background: none;
 border: none;
 font-size: 32px;
 color: #d1dbd4;
 cursor: pointer;
 transition: all 0.2s;
 padding: 0;
 line-height: 1;
}

.star-btn:hover,
.star-btn.active {
 color: #3fe071;
 transform: scale(1.1);
}

.rating-label {
 display: inline-block;
 font-size: 15px;
 color: #6b7280;
 margin: 0;
 vertical-align: middle;
 min-width: 150px;
}

/* Form Elements */
.review-form .form-group {
 margin-bottom: 20px;
}

.review-form .form-label {
 display: block;
 font-size: 14px;
 font-weight: 600;
 color: #37513f;
 margin-bottom: 8px;
}

.review-form .form-control {
 width: 100%;
 padding: 12px;
 border: 1px solid #d1dbd4;
 border-radius: 8px;
 font-size: 14px;
 font-family: inherit;
 transition: border-color 0.2s;
}

.review-form .form-control:focus {
 outline: none;
 border-color: #32de67;
 box-shadow: 0 0 0 3px rgba(50,222,103, 0.1);
}

.review-form .form-hint {
 font-size: 13px;
 color: #6b7280;
 margin-top: 8px;
}

/* Image Upload */
.btn-upload-trigger {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 background: #f9fbfa;
 border: 2px dashed #d1dbd4;
 border-radius: 8px;
 color: #37513f;
 cursor: pointer;
 font-size: 14px;
 font-weight: 500;
 transition: all 0.2s;
}

.btn-upload-trigger:hover {
 background: #f3f6f4;
 border-color: #32de67;
 color: #32de67;
}

.image-preview-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 gap: 12px;
 margin-top: 16px;
}

.image-preview-item {
 position: relative;
 aspect-ratio: 1;
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid #e5ebe7;
}

.image-preview-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.remove-image {
 position: absolute;
 top: 4px;
 right: 4px;
 background: rgba(0, 0, 0, 0.7);
 border: none;
 color: white;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s;
}

.remove-image:hover {
 background: rgba(0, 0, 0, 0.9);
}

/* Point Reward Info */
.point-reward-info {
 background: linear-gradient(135deg, #cef7db 0%, #99eeb3 100%);
 border: 2px solid #3fe071;
 border-radius: 12px;
 padding: 16px;
 margin: 20px 0;
}

.pri-header {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 16px;
 font-weight: 700;
 color: #168a3a;
 margin-bottom: 12px;
}

.pri-list {
 list-style: none;
 padding: 0;
 margin: 0 0 12px 0;
}

.pri-list li {
 padding: 6px 0;
 font-size: 14px;
 color: #137431;
 transition: opacity 0.2s;
}

.pri-total {
 padding-top: 12px;
 border-top: 2px solid rgba(63,224,113, 0.3);
 font-size: 16px;
 color: #168a3a;
 font-weight: 600;
}

.form-error {
 background: #e5fbec;
 border: 1px solid #7feaa0;
 color: #1b9942;
 padding: 12px;
 border-radius: 8px;
 font-size: 14px;
 margin-top: 16px;
}

/* Buttons */
.review-form .btn {
 padding: 12px 24px;
 border: none;
 border-radius: 8px;
 font-size: 15px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s;
}

.review-form .btn-primary {
 background: #32de67;
 color: white;
}

.review-form .btn-primary:hover {
 background: #22d359;
}

.review-form .btn-primary:disabled {
 background: #94b89f;
 cursor: not-allowed;
}

.review-form .btn-secondary {
 background: #f1f9f3;
 color: #648b70;
}

.review-form .btn-secondary:hover {
 background: #e2f0e6;
 color: #476952;
}

@media (max-width: 768px) {
 #review-modal-overlay { padding: 0; }
 .review-modal { max-width: 100%; width: 100% !important; }
}

/* ===================================
 POINT SUMMARY GRID (Profile Page)
 =================================== */

.point-summary-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 12px;
 margin-bottom: 32px;
}

.point-summary-card {
 background: linear-gradient(135deg, #f9fbfa 0%, #ffffff 100%);
 border: 1px solid #e5ebe7;
 border-radius: 12px;
 padding: 16px 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 transition: all 0.2s;
}

.point-summary-card:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 transform: translateY(-2px);
}

.point-summary-card .psc-left {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.point-summary-card .psc-icon {
 font-size: 24px;
 margin-bottom: 4px;
}

.point-summary-card .psc-label {
 font-size: 13px;
 color: #6b7280;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.point-summary-card .psc-value {
 font-size: 26px;
 font-weight: 700;
 color: #112718;
 flex-shrink: 0;
}

/* Point History Section */
.point-history-section {
 margin-top: 32px;
}

.point-history-section h3 {
 font-size: 18px;
 font-weight: 600;
 color: #112718;
 margin-bottom: 16px;
}

.point-history-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.point-history-item {
 display: grid;
 grid-template-columns: 40px 1fr auto;
 gap: 16px;
 padding: 16px;
 background: white;
 border: 1px solid #e5ebe7;
 border-radius: 10px;
 align-items: center;
 transition: all 0.2s;
}

.point-history-item:hover {
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.point-history-item.credit {
 border-left: 3px solid #1cad49;
}

.point-history-item.debit {
 border-left: 3px solid #25db5d;
}

.point-history-item .phi-icon {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 border-radius: 50%;
 background: #f9fbfa;
}

.point-history-item.credit .phi-icon {
 background: #d3f8df;
}

.point-history-item.debit .phi-icon {
 background: #cef7db;
}

.point-history-item .phi-details {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.point-history-item .phi-desc {
 font-size: 15px;
 font-weight: 500;
 color: #112718;
}

.point-history-item .phi-date {
 font-size: 13px;
 color: #9ca3af;
}

.point-history-item .phi-amount {
 font-size: 18px;
 font-weight: 700;
}

.point-history-item .phi-amount.credit {
 color: #1cad49;
}

.point-history-item .phi-amount.debit {
 color: #25db5d;
}

@media (max-width: 640px) {
 .point-summary-grid {
 grid-template-columns: 1fr;
 }
 
 .point-summary-card .psc-value {
 font-size: 22px;
 }

 .point-history-item {
 grid-template-columns: 36px 1fr;
 gap: 12px;
 }
 
 .point-history-item .phi-amount {
 grid-column: 2;
 text-align: right;
 margin-top: 8px;
 }
}

/* ── Pending points: compact widget indicator ── */
.pbc-pending {
 font-size: 12px;
 opacity: 0.85;
 margin-top: 4px;
 color: #99eeb3;
}

/* ── Pending points: summary card ── */
.point-summary-card.psc-pending-card {
 background: linear-gradient(135deg, #eefcf2 0%, #cef7db 100%);
 border-color: #63e68c;
}

.point-summary-card.psc-pending-card .psc-value {
 color: #1aa345;
}

.point-summary-card .psc-sub {
 font-size: 11px;
 color: #9ca3af;
 margin-top: 4px;
}

/* ── Pending points: history item ── */
.point-history-item.phi-pending {
 opacity: 0.75;
 border-left-color: #63e68c;
 background: #eefcf2;
}

.point-history-item.phi-pending .phi-icon {
 background: #cef7db;
}

.phi-pending-badge {
 display: inline-block;
 font-size: 11px;
 font-weight: 600;
 padding: 2px 7px;
 border-radius: 10px;
 background: #cef7db;
 color: #168a3a;
 border: 1px solid #63e68c;
 margin-left: 8px;
 vertical-align: middle;
}

/* ── Reversed points: history item ── */
.point-history-item.phi-reversed {
 opacity: 0.55;
 border-left-color: #d1dbd4;
 background: #f9fbfa;
}

.point-history-item.phi-reversed .phi-icon {
 background: #f3f6f4;
}

.point-history-item.phi-reversed .phi-amount {
 text-decoration: line-through;
 color: #9ca3af !important;
}

.phi-reversed-badge {
 display: inline-block;
 font-size: 11px;
 font-weight: 600;
 padding: 2px 7px;
 border-radius: 10px;
 background: #9aefb4;
 color: #9aefb4;
 border: 1px solid #9aefb4;
 margin-left: 8px;
 vertical-align: middle;
}



/* PlazaIT Product Lightbox (vanilla, no CDN) — v4 */
.pd-lb {
 position: fixed; inset: 0; z-index: 99999;
 background: rgba(0,0,0,.95);
 display: none;
 color: #fff;
 /* Transition untuk swipe-down feedback */
 transition: transform .18s ease, opacity .18s ease;
}
.pd-lb.show { display: block; }

/* Canvas di bawah (z:1), Controls di atas (z:2) */
.pd-lb-canvas {
 position: absolute; inset: 56px 0 56px 0;
 display: flex; align-items: center; justify-content: center;
 overflow: hidden;
 touch-action: none;
 z-index: 1;
}

.pd-lb-img {
 max-width: 96vw; max-height: 86vh;
 will-change: transform;
 user-select: none;
 pointer-events: none;
 transform-origin: 50% 50%;
}

.pd-lb-close, .pd-lb-prev, .pd-lb-next, .pd-lb-counter {
 position: absolute;
 z-index: 2;
}

.pd-lb-close, .pd-lb-prev, .pd-lb-next {
 background: rgba(17,39,24,.7);
 color: #fff; border: 0; cursor: pointer;
 width: 40px; height: 40px; border-radius: 999px;
 display: inline-flex; align-items: center; justify-content: center;
 transition: background-color .15s ease, transform .05s ease;
 -webkit-tap-highlight-color: transparent;
}
.pd-lb-close:hover, .pd-lb-prev:hover, .pd-lb-next:hover { background: rgba(31,55,38,.85); }
.pd-lb-close:active, .pd-lb-prev:active, .pd-lb-next:active { transform: translateY(.5px); }

.pd-lb-close { top: max(12px, env(safe-area-inset-top, 12px)); right: max(12px, env(safe-area-inset-right, 12px)); }
.pd-lb-prev { top: 50%; left: 10px; transform: translateY(-50%); }
.pd-lb-next { top: 50%; right: 10px; transform: translateY(-50%); }

.pd-lb-counter {
 top: max(16px, env(safe-area-inset-top, 16px)); left: 50%;
 transform: translateX(-50%);
 font-weight: 700; font-size: 13px; letter-spacing: .4px;
 background: rgba(17,39,24,.65);
 padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 640px){
 .pd-lb-img { max-width: 98vw; max-height: 80vh; }
 .pd-lb-prev, .pd-lb-next { width: 36px; height: 36px; }
 .pd-lb-close { width: 38px; height: 38px; }
}

.paylater-promo{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f0fdf4 0,#defae7 100%);border:1px solid #89eca8;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.4;margin:8px 0}.paylater-promo-sm{padding:6px 10px;font-size:11px;gap:6px}.paylater-promo-md{padding:8px 12px;font-size:13px;gap:8px}.paylater-promo-lg{padding:10px 16px;font-size:14px;gap:10px}.paylater-icon{font-size:1.2em;flex-shrink:0}.paylater-text{display:flex;flex-direction:column;gap:2px}.paylater-text strong{color:#158036;font-weight:600}.paylater-text small{color:#1a9f43;font-size:.85em;opacity:.9}.paylater-desktop-only{display:none}.paylater-mobile-only{display:flex}@media (min-width:641px){.paylater-desktop-only{display:flex}.paylater-mobile-only{display:none}}@media (max-width:640px){.paylater-promo{font-size:12px;padding:7px 10px}.paylater-promo-lg{font-size:13px;padding:8px 12px}}@media print{.paylater-promo{display:none!important}}.paylater-compact{display:inline-block;font-size:11px;font-weight:600;color:#168538;background:#d3f8df;padding:3px 8px;border-radius:4px;margin:6px 0 4px;line-height:1.3}@media (max-width:640px){.paylater-compact{font-size:10px;padding:2px 6px;margin:5px 0 3px}}@media print{.paylater-compact{display:none!important}}
.pd-voucher-minimal{margin:10px 0;display:flex;flex-direction:column;gap:6px}.pdv-min-item{display:flex;align-items:center;gap:8px;padding:0;height:32px;transition:all .2s ease}.pdv-min-hidden{display:none}.pdv-min-disabled{opacity:.5}.pdv-badge-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#69e790 0,#4ba266 100%);border:none;border-radius:8px;padding:3px;cursor:pointer;transition:all .2s ease;width:auto}.pdv-badge-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(105,231,144,.3)}.pdv-badge-btn:disabled{opacity:.6;cursor:not-allowed}.pdv-badge-icon{color:#fff;flex-shrink:0}.pdv-badge-text{font-size:14px;font-weight:700;color:#fff;white-space:nowrap}.pdv-badge-code{font-family:'Courier New',monospace;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.2);padding:4px 8px;border-radius:4px;border:none;white-space:nowrap}.pdv-min-copy,.pdv-min-more{padding:4px 12px;font-size:12px;font-weight:600;border-radius:5px;border:1px solid #e2f0e6;background:#fff;color:#69e790;cursor:pointer;transition:all .2s ease;white-space:nowrap}.pdv-min-copy:hover:not(:disabled),.pdv-min-more:hover{background:#69e790;color:#fff;border-color:#69e790}.pdv-min-copy:disabled{opacity:.4;cursor:not-allowed}.pdv-min-copy.copied{background:#22c555;color:#fff;border-color:#22c555}.pdv-min-more{margin-left:auto}.modal-close{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;color:#648b70;padding:4px;transition:color .2s ease}.modal-close:hover{color:#1e3b27}.modal-body{margin-bottom:8px}.voucher-modal-content{text-align:center}.voucher-modal-badge{display:inline-flex;flex-direction:row;align-items:center;gap:6px;background:linear-gradient(135deg,#69e790 0,#4ba266 100%);border-radius:10px;padding:8px 16px;margin-bottom:12px}.vmb-value{font-size:18px;font-weight:700;color:#fff;line-height:1}.vmb-label{font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px}.voucher-modal-code{font-family:'Courier New',monospace;font-size:14px;font-weight:700;color:#69e790;background:rgba(105,231,144,.1);padding:6px 12px;border-radius:6px;border:2px dashed rgba(105,231,144,.3);display:inline-block;margin-bottom:10px}.voucher-modal-name{font-size:14px;font-weight:600;color:#1e3b27;margin-bottom:16px}.voucher-modal-details{text-align:left;background:#f8fcf9;border-radius:8px;padding:12px;margin-bottom:16px}.vmd-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:13px;color:#648b70;border-bottom:1px solid #e2f0e6}.vmd-item:last-child{border-bottom:none}.vmd-item svg{color:#69e790;flex-shrink:0;margin-top:2px}.vmd-item strong{color:#1e3b27}.modal-actions{padding:20px}.modal-btn-primary{background:linear-gradient(135deg,#69e790 0,#4ba266 100%);color:#fff}.modal-btn-primary:hover{opacity:.9;transform:translateY(-1px)}@media (max-width:640px){.pdv-min-item{gap:6px}.pdv-badge-btn{padding:3px;gap:6px}.pdv-badge-text{font-size:13px}.pdv-badge-code{font-size:12px;padding:3px 6px}.pdv-min-copy,.pdv-min-more{padding:3px 10px;font-size:11px}.modal-dialog{max-width:95%;margin:20px}.vmb-value{font-size:16px}.vmb-label{font-size:16px}.voucher-modal-code{font-size:13px;padding:5px 10px}}
.promo-endyear-mini-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(47,221,101,.2);border-radius:12px;margin:16px 0;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:all .3s ease}.promo-endyear-mini-banner:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12);border-color:rgba(47,221,101,.4)}.pey-icon{font-size:32px;line-height:1;flex-shrink:0}.pey-content{flex:1;min-width:0}.pey-content strong{display:block;font-size:14px;font-weight:700;color:#9aefb4;margin-bottom:2px}.pey-content span{display:block;font-size:13px;color:#648b70;line-height:1.4}.pey-link{flex-shrink:0;padding:8px 16px;background:linear-gradient(135deg,#9aefb4,#66e68e);color:#fff;text-decoration:none;font-size:13px;font-weight:700;border-radius:8px;white-space:nowrap;transition:all .2s ease;box-shadow:0 2px 8px rgba(47,221,101,.25)}.pey-link:hover{transform:translateX(2px);box-shadow:0 4px 12px rgba(47,221,101,.35)}@media(max-width:640px){.promo-endyear-mini-banner{flex-wrap:wrap;gap:8px;padding:10px 12px}.pey-icon{font-size:28px;align-self:flex-start}.pey-content{flex:1;min-width:0}.pey-content strong{font-size:12px}.pey-content span{font-size:11px;line-height:1.3}.pey-link{width:100%;flex-basis:100%;font-size:11px;padding:6px 12px;text-align:center}}@media print{.promo-endyear-mini-banner{display:none!important}}

.pd-title-row{position:relative;margin-bottom:12px;padding-right:52px}.pd-title{margin:0!important}.pd-share-btn{position:absolute;top:0;right:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #e2f0e6;background:#fff;color:#648b70;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.pd-share-btn:hover{background:#f8fcf9;border-color:#cbe1d2;color:#0f2a17;transform:translateY(-1px)}.pd-share-btn:active{transform:translateY(0)}.pd-share-btn svg{display:block}

.pd-share-modal-overlay{position:fixed;inset:0;background:rgba(15,42,23,.75);backdrop-filter:blur(4px);z-index:99999;display:none;align-items:center;justify-content:center;padding:0;animation:fadeIn .2s ease}.pd-share-modal-overlay.show{display:flex}.pd-share-modal{background:#fff;border-radius:20px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-width:480px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

.pd-share-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #f1f9f3}.pd-share-title{font-size:18px;font-weight:700;color:#0f2a17;margin:0}.pd-share-close{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:#648b70;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.pd-share-close:hover{background:#f1f9f3;color:#0f2a17}.pd-share-body{padding:24px;overflow-y:auto}

.pd-share-preview{display:flex;gap:12px;padding:16px;background:#f8fcf9;border-radius:12px;margin-bottom:24px}.pd-share-preview-img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid #e2f0e6}.pd-share-preview-info{flex:1;min-width:0}.pd-share-preview-name{font-size:14px;font-weight:600;color:#0f2a17;margin:0 0 4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pd-share-preview-price{font-size:16px;font-weight:700;color:#23d45a;margin:0}

.pd-share-label{font-size:13px;font-weight:600;color:#476952;margin:0 0 12px 0;text-transform:uppercase;letter-spacing:.5px}.pd-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.pd-share-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1.5px solid #e2f0e6;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s ease;text-decoration:none;color:inherit}.pd-share-option:hover{border-color:#94b89f;background:#f8fcf9;transform:translateY(-2px)}.pd-share-option:active{transform:translateY(0)}

.pd-share-icon{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;position:relative}.pd-share-icon svg{width:24px;height:24px;display:block}.pd-share-icon-whatsapp{background:linear-gradient(135deg,#25d35b 0%,#168839 100%);color:#fff}.pd-share-icon-facebook{background:linear-gradient(135deg,#2ddd64 0%,#1fc151 100%);color:#fff}.pd-share-icon-twitter{background:linear-gradient(135deg,#31de67 0%,#20c654 100%);color:#fff}.pd-share-icon-telegram{background:linear-gradient(135deg,#1daf4a 0%,#199a41 100%);color:#fff}.pd-share-icon-email{background:linear-gradient(135deg,#3fe071 0%,#20c453 100%);color:#fff}.pd-share-icon-copy{background:linear-gradient(135deg,#6de793 0%,#4ae179 100%);color:#fff}.pd-share-icon-pdf{background:linear-gradient(135deg,#9aefb4 0%,#9aefb4 100%);color:#fff}.pd-share-name{font-size:12px;font-weight:600;color:#476952;text-align:center}

.pd-share-copy-section{background:#f8fcf9;padding:16px;border-radius:12px}.pd-share-copy-input-wrap{display:flex;gap:8px}.pd-share-copy-input{flex:1;padding:12px 14px;border:1px solid #e2f0e6;border-radius:10px;font-size:14px;color:#0f2a17;background:#fff;font-family:'Segoe UI',system-ui,sans-serif}.pd-share-copy-input:focus{outline:0;border-color:#23d45a;box-shadow:0 0 0 3px rgba(35,212,90,.1)}.pd-share-copy-btn{padding:12px 20px;border:0;border-radius:10px;background:linear-gradient(135deg,#23d45a 0%,#1cad49 100%);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.pd-share-copy-btn:hover{background:linear-gradient(135deg,#1cad49 0%,#178d3c 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(35,212,90,.3)}.pd-share-copy-btn:active{transform:translateY(0)}.pd-share-copy-btn svg{width:16px;height:16px}.pd-share-copy-btn.copied{background:linear-gradient(135deg,#22c555 0%,#1a9f43 100%);pointer-events:none}

@media(max-width:640px){.pd-share-modal{border-radius:20px 20px 0 0;margin-top:auto;max-height:85vh}.pd-share-grid{grid-template-columns:repeat(3,1fr)}.pd-share-header{padding:16px 20px}.pd-share-body{padding:20px}.pd-share-btn{width:36px;height:36px}.pd-share-btn svg{width:18px;height:18px}}@media(max-width:480px){.pd-share-grid{grid-template-columns:repeat(3,1fr);gap:10px}.pd-share-option{padding:12px 6px}.pd-share-icon{width:36px;height:36px}.pd-share-icon svg{width:20px;height:20px}.pd-share-name{font-size:11px}}

.mf-share{background:#fff;color:#9aefb4;border:2px solid #9aefb4;display:inline-flex;align-items:center;justify-content:center}.mf-share:active{transform:scale(.95)}.mf-share svg{display:block}

@media(max-width:640px){.pd-share-btn{display:none!important}}

.stock-badge.in{background:#e6f9ec;color:#158036;border-radius:999px;padding:4px 10px;font-weight:700}.stock-badge.out{background:#9aefb4;color:#21ca55;border-radius:999px;padding:4px 10px;font-weight:700}

.stock-info-btn{--c:#23d45a;--b:#c2f5d2;--bg:#f2fdf5;--bg-h:#e3fbeb;--b-h:#23d45a;margin-left:0;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:4px 10px;border-radius:999px;border:1.5px solid var(--b);background:var(--bg);color:var(--c);cursor:pointer;font-size:12px;font-weight:600;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.stock-info-btn:hover{background:var(--bg-h);border-color:var(--b-h);color:#1cad49;transform:translateY(-1px);box-shadow:0 2px 8px rgba(35,212,90,.15)}.stock-info-btn:active{transform:translateY(0)}.stock-info-btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(35,212,90,.2)}.stock-info-btn svg{width:14px;height:14px;flex-shrink:0}.stock-info-btn .btn-text{white-space:nowrap}

.stock-popover{position:absolute;z-index:9999;min-width:280px;max-width:92vw;background:#0b2012;color:#f0fdf4;border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 20px 40px rgba(12,20,14,.45);padding:12px 12px 8px;display:none}.stock-popover.show{display:block}.stock-popover::before{content:"";position:absolute;top:-8px;left:24px;width:14px;height:14px;background:#0b2012;border-left:1px solid rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08);transform:rotate(45deg)}.sp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.sp-title{font-weight:800;font-size:14px}.sp-close{background:transparent;border:0;color:#98b3a0;cursor:pointer}

.sp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.sp-item{display:grid;grid-template-columns:1fr auto 32px;column-gap:12px;align-items:center;padding:10px 10px;min-height:44px;border-radius:10px;background:rgba(255,255,255,.03)}.sp-left{display:flex;align-items:center;gap:10px}.sp-dot{width:10px;height:10px;border-radius:999px;background:var(--dot,#72e897);display:inline-block}.sp-label{font-weight:600;font-size:13px}


.sp-qty{grid-column:2;justify-self:end;min-width:40px;text-align:right;font-weight:800;font-size:13px;color:#d6f8e0;font-variant-numeric:tabular-nums}

.sp-wa{
 grid-column:3; justify-self:end;
 width:32px; height:32px; min-width:32px; min-height:32px;
 box-sizing:border-box;
 padding:0; line-height:0; text-decoration:none; outline:0;
 display:inline-flex; align-items:center; justify-content:center;
 border-radius:999px; border:1px solid rgba(37,211,91,.60); /* 1px untuk hasil "crisp" */
 background:rgba(37,211,91,.08); color:#25d35b;
 transition:background-color .15s ease, border-color .15s ease, transform .05s ease;
 -webkit-tap-highlight-color:transparent;
}
.sp-wa:hover{background:rgba(37,211,91,.16);border-color:rgba(37,211,91,.75)}
.sp-wa:active{transform:translateY(.5px) scale(.98)}

.sp-wa svg{width:18px;height:18px;display:block;vertical-align:middle}
.stock-popover a{text-decoration:none}

#deskripsi img{max-width:450px!important;height:unset!important}@media(max-width:640px){.stock-popover{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom,12px));margin:0 10px;padding:14px 12px 10px;border-radius:16px}.stock-popover::before{display:none}.stock-info-btn{padding:4px 8px;gap:4px;border:0;background:transparent}.stock-info-btn:hover{background:transparent;box-shadow:none;transform:none}.stock-info-btn .btn-text{display:none}.stock-info-btn svg{width:16px;height:16px}.sp-item{grid-template-columns:1fr auto 36px}.sp-wa{width:36px;height:36px;min-width:36px;min-height:36px}.sp-wa svg{width:19px;height:19px}}

.stock-dot{position:absolute;bottom:8px;right:8px;width:8px;height:8px;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.4);z-index:2;cursor:help}.stock-dot.ready{background:#1cad49}.stock-dot.low{background:#25db5d}.stock-dot.out{background:#9aefb4}.stock-dot:hover{transform:scale(1.2);transition:transform 0.2s ease}@media(max-width:640px){.stock-dot{width:7px;height:7px;bottom:6px;right:6px}}

.pd-related-card .spec-chips{font-size:11px;color:#648b70;margin:4px 0 6px 0;line-height:1.3;font-weight:500}.pd-related-card .spec-chips .spec-divider{margin:0 4px;opacity:0.6}@media(max-width:640px){.pd-related-card .spec-chips{font-size:10px;margin:3px 0 5px 0}#deskripsi img{max-width:300px!important;height:unset!important;justify-self:center!important}}

.pwp-trigger-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 4px;background:linear-gradient(135deg,#3fe071 0%,#25db5d 100%);color:#137431;border-radius:6px;font-size:.65rem;font-weight:600;border:0}.pwp-trigger-badge svg{flex-shrink:0;width:12px;height:12px}
.pwp-deals-section{margin:0;padding:12px;background:linear-gradient(135deg,#cef7db 0%,#99eeb3 100%);border-radius:12px;border:2px solid #3fe071}.pwp-deals-header{display:flex;gap:10px;margin-bottom:10px}.pwp-icon{flex-shrink:0;color:#25db5d;width:18px;height:18px}.pwp-text .pwp-title{margin:0 0 2px 0;font-size:14px;font-weight:700;color:#137431}.pwp-text .pwp-subtitle{margin:0;font-size:11px;color:#168a3a;opacity:0.9}.pwp-deals-loading{text-align:center;padding:40px 0;color:#168a3a}.pwp-spinner{width:40px;height:40px;border:3px solid #3fe071;border-top-color:#25db5d;border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}
.pwp-deals-grid{display:flex;flex-direction:column;gap:6px}.pwp-deal-card{background:#fff;border-radius:6px;overflow:hidden;border:1px solid #3fe071;display:flex;align-items:center;padding:8px;gap:10px}.pwp-deal-card:hover{background:#cef7db}.pwp-deal-thumb{flex-shrink:0;width:50px;height:50px;background:#f8fcf9;overflow:hidden;border-radius:4px}.pwp-deal-thumb img{width:100%;height:100%;object-fit:cover}.pwp-deal-badge{background:#9aefb4;color:#fff;padding:2px 5px;border-radius:3px;font-size:9px;font-weight:700;margin-left:auto}.pwp-deal-info{flex:1;display:flex;flex-direction:column;gap:4px}.pwp-deal-name{font-size:12px;font-weight:600;color:#0f2a17;margin:0;line-height:1.2}.pwp-deal-prices{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pwp-deal-price{font-size:14px;font-weight:800;color:#9aefb4;white-space:nowrap}.pwp-deal-original{font-size:11px;color:#648b70;text-decoration:line-through;white-space:nowrap}.pwp-cart-note{margin-top:8px;padding:6px 10px;background:#e3fbeb;border-left:2px solid#23d45a;font-size:11px;color:#11692c;border-radius:4px}
@media(max-width:640px){.pwp-deals-section{margin:12px 0;padding:10px;border-radius:10px}.pwp-deals-header{gap:8px}.pwp-text .pwp-title{font-size:13px}.pwp-text .pwp-subtitle{font-size:10px}.pwp-deal-card{padding:6px;gap:8px}.pwp-deal-thumb{width:45px;height:45px}.pwp-deal-name{font-size:11px}.pwp-deal-price{font-size:13px}.pwp-deal-original{font-size:10px}}

.preorder-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:linear-gradient(135deg,#6be791 0%,#46e176 100%);color:#fff;border-radius:8px;font-size:13px;font-weight:700;border:0;box-shadow:0 2px 8px rgba(107,231,145,.25)}.preorder-badge svg{width:16px;height:16px;flex-shrink:0}.preorder-info{margin:12px 0;padding:14px;background:linear-gradient(135deg,#f5fdf7 0%,#ebfcf0 100%);border:1.5px solid #bef4cf;border-radius:12px}.preorder-info-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.preorder-info-icon{width:20px;height:20px;color:#46e176;flex-shrink:0}.preorder-info-title{font-size:14px;font-weight:700;color:#21b64f;margin:0}.preorder-info-items{display:flex;flex-direction:column;gap:8px}.preorder-info-row{display:flex;align-items:center;justify-content:space-between;font-size:13px}.preorder-info-label{color:#21a84b;font-weight:600}.preorder-info-value{color:#21b64f;font-weight:700}.preorder-info-value.highlight{color:#9aefb4;font-size:14px}.preorder-info-note{margin-top:10px;padding:8px 10px;background:#cef7db;border-left:2px solid #25db5d;font-size:12px;color:#137431;border-radius:6px;line-height:1.4}@media(max-width:640px){.preorder-badge{font-size:12px;padding:5px 10px}.preorder-info{margin:10px 0;padding:12px}.preorder-info-title{font-size:13px}.preorder-info-row{font-size:12px}.preorder-info-note{font-size:11px;padding:6px 8px}}


 @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&display=swap");

 /* ===============================
 WRAPPER
================================ */
 .togel-container-v3 {
 display: flex;
 justify-content: center;
 padding: 16px 10px;
 font-family: "Orbitron", "Poppins", system-ui, sans-serif;
 }

 /* ===============================
 MACHINE CORE (RED ELEGANT)
================================ */
 .togel-machine-v3 {
 position: relative;
 width: 100%;
 max-width: 520px;
 padding: 16px;
 border-radius: 16px;
 overflow: hidden;
 isolation: isolate;
 background: radial-gradient(circle at 15% 0%, rgba(31,193,81, 0.3), transparent 48%), radial-gradient(circle at 85% 100%, rgba(25,155,65, 0.18), transparent 55%), linear-gradient(123deg, #000000, #000000);
 border: 1px solid rgba(31,193,81, 0.3);
 box-shadow: inset 0 0 18px rgba(31,193,81, 0.3), 0 0 18px rgba(31,193,81, 0.3);
 color: #dbdbdb;
 }

 /* HUD SWEEP */
 .togel-machine-v3::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(120deg, transparent 40%, rgba(31,193,81, 0.3), transparent 65%);
 animation: hudSweep 7s linear infinite;
 pointer-events: none;
 opacity: .8;
 }

 /* ===============================
 TITLE
================================ */
 .togel-title-v3 {
 text-align: center;
 margin: 0 0 12px;
 font-size: 15px;
 font-weight: 900;
 letter-spacing: 1px;
 text-shadow: 0 0 6px rgba(18, 131, 206, 0.3/ 90%);
 }

 /* ===============================
 CONTROLS
================================ */
 .togel-controls-v3 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 padding: 12px;
 border-radius: 14px;

 background: rgba(0, 0, 0, 0.4);
 border: 1px solid rgba(31,193,81, 0.3);
 box-shadow: inset 0 0 14px rgba(18, 131, 206, 0.3 / 22%);
 }

 .togel-controls-v3 label {
 display: grid;
 gap: 6px;
 font-size: 10px;
 letter-spacing: .8px;
 text-transform: uppercase;
 color: #9aefb4;
 }

 .togel-controls-v3 select,
 .togel-controls-v3 input {
 background: rgba(0 0 0 / 92%);
 color: #c5c5c5;
 border: 1px solid rgba(31,193,81, 0.3);
 border-radius: 10px;
 padding: 7px 9px;
 font-weight: 700;
 font-size: 12px;
 outline: none;
 box-shadow: inset 0 0 10px rgba(31,193,81, 0.3);
 }

 /* BUTTON */
 #btnTogelRandom {
 grid-column: span 2;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;

 background: linear-gradient(145deg, #9aefb4, #9aefb4);
 border: none;
 color: #000000;
 font-weight: 900;
 letter-spacing: .8px;
 border-radius: 14px;
 cursor: pointer;
 padding: 10px 12px;
 font-size: 12px;

 box-shadow: 0 0 16px rgba(31,193,81, 0.3);
 transition: .2s ease;
 }

 #btnTogelRandom:active {
 transform: scale(.98);
 }

 #btnTogelRandom:disabled {
 opacity: .75;
 cursor: not-allowed;
 }

 /* ===============================
 MAIN RESULT
================================ */
 .togel-main-result-v3 {
 margin-top: 12px;
 padding: 12px;
 border-radius: 14px;

 background: rgba(4,26,11, 0.78);
 border: 1px solid rgba(31,193,81, 0.3);
 box-shadow: inset 0 0 16px rgba(31,193,81, 0.3);
 }

 .togel-status-v3 {
 text-align: center;
 font-weight: 800;
 letter-spacing: .8px;
 color: #9aefb4;
 margin-bottom: 10px;
 font-size: 11px;
 }

 .togel-highlight-box {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding-bottom: 10px;
 margin-bottom: 10px;
 border-bottom: 1px dashed rgba(31,193,81, 0.3);
 }

 .k,
 .k-rtp {
 font-size: 10px;
 color: #c7c7c7;
 text-transform: uppercase;
 }

 .v-game {
 font-size: 14px;
 font-weight: 900;
 color: #ffffff;
 margin-top: 6px;
 line-height: 1.2;
 }

 .provider-info {
 margin-top: 8px;
 font-size: 11px;
 color: #d9d9d9;
 opacity: .95;
 }

 .k-small {
 color: #9aefb4;
 font-size: 10px;
 }

 .v-small {
 color: #f2fdf5;
 font-weight: 900;
 }

 .v-rtp-huge {
 font-size: 2.4em;
 font-weight: 900;
 color: #9aefb4;
 text-shadow: 0 0 10px rgba(0 0 0);
 line-height: 1;
 letter-spacing: 1px;
 }

 /* DETAILS */
 .togel-details-v3 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
 background: rgba(0, 0, 0, .30);
 padding: 10px;
 border-radius: 12px;
 }

 .k-detail {
 font-size: 9px;
 color: #9aefb4;
 text-transform: uppercase;
 }

 .v-detail {
 font-size: 12px;
 font-weight: 800;
 color: #ffffff;
 margin-top: 4px;
 letter-spacing: .8px;
 }

 .togel-tip-v3 {
 margin-top: 10px;
 font-size: 10px;
 color: #d9d9d9;
 opacity: .9;
 text-align: center;
 }

 /* ALTS */
 .togel-alts-v3 {
 margin-top: 12px;
 padding: 12px;
 border-radius: 14px;
 background: rgba(0, 0, 0, .40);
 border: 1px solid rgba(31,193,81, 0.3);
 }

 .togel-alts-title-v3 {
 font-weight: 900;
 color: #9aefb4;
 margin-bottom: 10px;
 font-size: 12px;
 }

 .togel-alt-list-v3 {
 display: grid;
 grid-template-columns: 1fr;
 gap: 8px;
 }

 .togel-alt-item {
 background: rgba(4,26,11, .86);
 border-radius: 12px;
 padding: 10px;
 border-left: 3px solid rgba(18, 131, 206, 0.3 / 90%);
 }

 .togel-alt-item .g {
 font-weight: 900;
 color: #c5c5c5;
 font-size: 12px;
 }

 .togel-alt-item .p {
 font-size: 10px;
 color: #9aefb4;
 margin-top: 4px;
 }

 .togel-alt-item .r {
 margin-top: 6px;
 font-weight: 900;
 color: #9aefb4;
 letter-spacing: .8px;
 font-size: 12px;
 }

 .togel-note-v3 {
 margin-top: 10px;
 font-size: 10px;
 color: #d9d9d9;
 opacity: .85;
 text-align: center;
 }

 /* MOBILE */
 @media(max-width:420px) {
 .togel-highlight-box {
 flex-direction: column
 }

 .togel-details-v3 {
 grid-template-columns: 1fr
 }
 }

 /* ANIM */
 @keyframes hudSweep {
 0% {
 transform: translateX(-110%)
 }

 100% {
 transform: translateX(110%)
 }
 }

 @keyframes pulse {
 0% {
 opacity: .55
 }

 50% {
 opacity: 1
 }

 100% {
 opacity: .55
 }
 }
 

body{background:#ebfcf0; font-family:Poppins,sans-serif; color:white;}
.-container{
max-width: 520px;
 margin: auto;
 padding: 15px;
 border-radius: 12px;
 background: #9aefb4;
 border: 2px solid #9aefb4;
 box-shadow: 0 0 20px #9aefb4;
}

.Cheat Slot-header{
 font-weight:900;
 text-align:center;
 color:#9aefb4;
 text-shadow:0 0 12px #5fd985;
 margin-bottom:12px;
}

.Cheat Slot-controls{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-bottom:12px;
}
.Cheat Slot-controls label{
 display:flex; flex-direction:column;
 font-size:11px; color:#9aefb4;
}
.Cheat Slot-controls select,
.Cheat Slot-controls input{
 padding:8px;
 border-radius:8px;
 border:1px solid #9aefb4;
 background:#062510;
 color:white;
}
#btnGenerate{
 grid-column:span 2;
 padding:12px;
 background:#5fd985;
 border:none;
 color:black;
 font-weight:900;
 cursor:pointer;
 margin-top:5px;
 box-shadow:0 0 15px #9aefb4;
}

.Cheat Slot-result{
 margin-top:12px;
 padding:12px;
 border-radius:10px;
 background:rgba(36,219,93,0.05);
 border:1px solid #9aefb4;
}

.Cheat Slot-main div, .Cheat Slot-details div{
 margin:5px 0;
}

#rPrediction{
 font-size:24px;
 font-weight:900;
 color:#5fd985;
}

.Cheat Slot-alts{
 margin-top:10px;
}
.Cheat Slot-alts h4{margin-bottom:6px;}
#Cheat SlotAltList div{
 background:#062510;
 padding:6px 10px;
 margin:3px 0;
 border-radius:8px;
 border-left:3px solid #5fd985;
}
 .bank-tab.active, .bank-tab:hover {
 background: #9aefb4;
 color: #fff;
 border-color: #9aefb4;
 box-shadow: 0 3px 8adeff -4px rgb(18, 131, 206, 0.3 / 60%);
}

.Cheat Slot-disclaimer{
 font-size:10px;
 margin-top:8px;
 text-align:center;
 color:#9aefb4;
}


.qoala-banner-card{padding:0;overflow:hidden}

.qoala-banner{
 background:linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 padding:12px 16px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 color:white;
 text-decoration:none;
 min-height:60px;
}

.qoala-banner-content{
 display:flex;
 align-items:center;
 gap:12px;
}

.qoala-icon{
 display:flex;
 align-items:center;
 justify-content:center;
}

.qoala-shield-img{
 width:36px;
 height:36px;
 object-fit:contain;
 opacity:0.9;
}

.qoala-title{
 font-weight:600;
 font-size:14px;
 line-height:1.2;
}

.qoala-subtitle{
 font-size:12px;
 opacity:0.9;
 line-height:1.2;
}

.qoala-cta{
 background:rgba(31,193,81, 0.3);
 color:white;
 padding:6px 12px;
 border-radius:6px;
 font-size:12px;
 font-weight:600;
 text-decoration:none;
 transition:background 0.2s ease;
 border:1px solid rgba(31,193,81, 0.3);
}

.qoala-cta:hover{
 background:rgba(31,193,81, 0.3);
 color:white;
}

@media(max-width:768px){
 .qoala-banner{padding:10px 12px}
 .qoala-title{font-size:17px}
 .qoala-subtitle{font-size:11px}
}


.tnt-review-mecha{
 background: radial-gradient(circle at center, #9aefb4, #9aefb4);
 border: 2px solid #9aefb4;
 border-radius: 14px;
 padding: 20px;
 color: #dbdbdb;
 font-family: 'Orbitron', sans-serif;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 25px #9aefb4, inset 0 0 20px rgba(31,193,81, 0.3);
}

/* scanline */
.tnt-review-mecha::before{
 content:"";
 position:absolute;
 inset:0;
 background: repeating-linear-gradient(
 to bottom,
 rgba(31,193,81, 0.3),
 rgba(31,193,81, 0.3) 1px,
 transparent 2px,
 transparent 4px
 );
 pointer-events:none;
}.bank-tab.active, .bank-tab:hover
 

.tnt-header h2{
 font-size: 18px;
 color:#000000;
 text-shadow:0 0 10px #9aefb4, 0 0 20px #9aefb4;
 margin-bottom:5px;
}

.tnt-header p{
 font-size:12px;
 opacity:0.85;
 margin-bottom:15px;
}

.tnt-slider{
 position:relative;
 height:90px;
}

.tnt-slide{
 position:absolute;
 width:100%;
 opacity:0;
 transform:translateX(40px);
 transition:all .6s ease;
}
 .tenor-badge {
 background: #9aefb4;
 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 rgb(31,193,81, 0.3);
}

.tnt-slide.active{
 opacity:1;
 transform:translateX(0);
}

.tnt-name{
font-size: 14px;
 color: #000000;
 margin-bottom: 5px;
 text-shadow: 0 0 6px #06230f;
}

.tnt-comment{
 font-size:13px;
 line-height:1.5;
}

/* glowing border animation */
@keyframes pulseGlow{
 0%{box-shadow:0 0 10px #9aefb4;}
 50%{box-shadow:0 0 25px #9aefb4;}
 100%{box-shadow:0 0 10px #9aefb4;}
}

.tnt-review-mecha{
 animation:pulseGlow 2.5s infinite;
}


.artikel-glow-KT{
 max-width: 820px;
 margin: 40px auto;
 padding: 36px;
 box-sizing: border-box;
 position: relative;
 overflow: hidden;
 border-radius: 30px;
 font-family: Arial, sans-serif;
 color: #ffffff;
 background: radial-gradient(circle at top left, rgba(31,193,81, 0.3), transparent 20%), radial-gradient(circle at bottom right, rgb(31,193,81, 0.3), transparent 28%), linear-gradient(135deg, #9aefb4, #9aefb4, #9aefb4);
 border: 2px solid rgba(255, 255, 255, .55);
 box-shadow: 0 0 25px rgb(31,193,81, 0.3), 0 0 55px rgb(31,193,81, 0.3), 0 20px 45px rgba(0, 0, 0, .25), inset 0 0 35px rgba(31,193,81, 0.3);
}

.artikel-glow-KT:before{
 content:"";
 position:absolute;
 inset:10px;
 border-radius:24px;
 border:1px solid rgba(255,255,255,.32);
 pointer-events:none;
}

.artikel-shine{
 position:absolute;
 top:-120px;
 left:-180px;
 width:280px;
 height:650px;
 background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
 transform:rotate(25deg);
 animation:artikelShine 4.5s infinite;
 pointer-events:none;
}

@keyframes artikelShine{
 0%{left:-220px;}
 55%{left:110%;}
 100%{left:110%;}
}

.artikel-glow-KT h1,
.artikel-glow-KT h2{
 position:relative;
 color:#000000;
 text-align:center;
 line-height:1.35;
 text-shadow:
 0 0 8px rgba(18, 131, 206, 0.3 / 95%),
 0 0 18px rgba(31,193,81, 0.3),
 0 2px 8px rgba(31,193,81, 0.3);
}

.artikel-glow-KT h1{
 font-size:31px;
 margin:0 0 20px;
}

.artikel-glow-KT h2{
 font-size:24px;
 margin:28px 0 14px;
}

.artikel-glow-KT p{
 position:relative;
 margin:0 0 16px;
 color:#f9fefb;
 font-size:15px;
 line-height:1.85;
 text-align:justify;
 text-shadow:0 1px 4px rgba(0,0,0,.28);
}

.artikel-glow-KT a{
 color:#000000;
 font-weight:800;
 text-shadow:0 0 8px rgba(31,193,81, 0.3);
}

.artikel-glow-KT img{
 position:relative;
 display:block;
 max-width:100%;
 margin:16px auto 24px;
 border-radius:16px;
 border:1px solid rgba(255,255,255,.55);
 box-shadow:
 0 0 18px rgba(255,255,255,.55),
 0 12px 28px rgba(0,0,0,.28);
}

.artikel-highlight{
 position:relative;
 margin:24px 0;
 padding:22px;
 border-radius:22px;
 background:rgba(255,255,255,.20);
 border:1px solid rgba(255,255,255,.45);
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,.65),
 inset 0 0 22px rgba(255,255,255,.14),
 0 10px 25px rgba(0,0,0,.18);
 backdrop-filter:blur(8px);
}

.artikel-highlight:before{
 content:"";
 position:absolute;
 left:0;
 right:0;
 top:0;
 height:45%;
 border-radius:22px 22px 0 0;
 background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.04));
 pointer-events:none;
}

.artikel-glow-KT ul{
 position:relative;
 margin:15px 0 0 20px;
 padding:0;
}

.artikel-glow-KT li{
 margin-bottom:11px;
 padding:10px 12px;
 border-radius:12px;
 background:rgba(255,255,255,.16);
 color:#ffffff;
 line-height:1.6;
 box-shadow:inset 0 0 10px rgba(255,255,255,.08);
}

@media(max-width:600px){
 .artikel-glow-KT{
 margin:25px 12px;
 padding:25px;
 border-radius:24px;
 }

 .artikel-glow-KT h1{
 font-size:24px;
 }

 .artikel-glow-KT h2{
 font-size:21px;
 }
}


.KT-faq-rainbow{
 max-width: 760px;
 margin: 40px auto;
 padding: 30px;
 box-sizing: border-box;
 position: relative;
 overflow: hidden;
 border-radius: 32px;
 font-family: Arial, sans-serif;
 background: radial-gradient(circle at 15% 10%, rgba(31,193,81, 0.3), transparent 18%), radial-gradient(circle at 85% 15%, rgb(31,193,81, 0.3), transparent 25%), radial-gradient(circle at 20% 90%, rgb(31,193,81, 0.3), transparent 25%), linear-gradient(135deg, #9aefb4, #9aefb4, #9aefb4, #9aefb4);
 border: 2px solid rgba(31,193,81, 0.3);
 box-shadow: 0 0 25px rgb(31,193,81, 0.3), 0 0 55px rgba(31,193,81, 0.3), inset 0 0 35px rgba(31,193,81, 0.3);
}

.KT-shine{
 position:absolute;
 top:-90px;
 left:-120px;
 width:260px;
 height:520px;
 background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
 transform:rotate(25deg);
 animation:KTShine 4s infinite;
 pointer-events:none;
}

@keyframes KTShine{
 0%{left:-180px;}
 55%{left:110%;}
 100%{left:110%;}
}

.KT-faq-top{
 position:relative;
 text-align:center;
 margin-bottom:24px;
}

.KT-faq-top span{
 display:inline-block;
 padding:8px 22px;
 border-radius:999px;
 background:rgba(185 0 0 / 0%);
 color:#dbdbdb;
 font-size:12px;
 font-weight:900;
 letter-spacing:2px;
 border:1px solid rgba(215 215 215 / 62%);
 box-shadow:inset 0 0 14px rgba(255,255,255,.25);
}

.KT-faq-top h2{
 margin:16px 0 8px;
 color:#000000;
 font-size:34px;
 line-height:1.15;
 text-shadow:
 0 0 10px rgba(31,193,81, 0.3),
 0 0 22px rgba(31,193,81, 0.3);
}

.KT-faq-top p{
 margin:0;
 color:#f5fdf7;
 font-size:14px;
}

.KT-rainbow-item{
 position:relative;
 overflow:hidden;
 margin-bottom:14px;
 border-radius:20px;
 background:rgba(255,255,255,.20);
 border:1px solid rgba(255,255,255,.48);
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,.6),
 0 10px 25px rgba(0,0,0,.18);
 backdrop-filter:blur(10px);
}

.KT-rainbow-item:before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:45%;
 background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.04));
 pointer-events:none;
}

.KT-rainbow-item button{
 width:100%;
 padding:18px 58px 18px 20px;
 border:0;
 background: #9aefb4;
 color:#dbdbdb;
 text-align:left;
 cursor:pointer;
 font-size:15px;
 font-weight:900;
 position:relative;
 z-index:2;
 text-shadow:0 2px 6px rgba(0,0,0,.35);
}

.KT-rainbow-item button:after{
 content:"+";
 position:absolute;
 right:18px;
 top:50%;
 transform:translateY(-50%);
 width:34px;
 height:34px;
 border-radius:50%;
 background:linear-gradient(135deg,#9aefb4, #9aefb4);
 color:#d1d1d1;
 text-align:center;
 line-height:34px;
 font-size:24px;
 font-weight:900;
 box-shadow:
 0 0 14px rgba(255,255,255,.8),
 inset 0 -4px 8px rgba(0,0,0,.18);
}

.KT-rainbow-item.active button:after{
 content:"−";
 background:linear-gradient(135deg,#9aefb4, #9aefb4);
}

.KT-rainbow-answer{
 max-height:0;
 overflow:hidden;
 transition:max-height .35s ease;
 position:relative;
 z-index:2;
}

.KT-rainbow-item.active .KT-rainbow-answer{
 max-height:170px;
}

.KT-rainbow-answer p{
 margin:0;
 padding:0 20px 18px;
 color:#dbdbdb;
 font-size:14px;
 line-height:1.7;
 text-shadow:0 2px 5px rgba(0 0 0);
}

@media(max-width:600px){
 .KT-faq-rainbow{
 margin:25px 12px;
 padding:22px;
 border-radius:24px;
 }

 .KT-faq-top h2{
 font-size:26px;
 }
}


@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

.cyber-mecha {
 max-width: 800px;
 margin: 40px auto;

 /* deep luxury red */
 background: radial-gradient(circle at top, #21ca55, #21ca55 70%);

 border-radius: 16px;
 border: 1px solid rgba(31,193,81, 0.3);

 box-shadow:
 0 0 25px rgba(31,193,81, 0.3),
 inset 0 0 20px rgba(31,193,81, 0.3);

 padding: 25px;
 font-family: 'Orbitron', sans-serif;
 color: #e6f7eb;
 position: relative;
 overflow: hidden;
}

/* scanline overlay */
.cyber-mecha::before {
 content: "";
 position: absolute;
 inset: 0;
 background: repeating-linear-gradient(
 to bottom,
 rgba(113,232,150,0.03),
 rgba(113,232,150,0.03) 1px,
 transparent 1px,
 transparent 3px
 );
 pointer-events: none;
}

.pd-full-desc-title {
 text-align: center;
 font-size: 22px;

 /* elegant muted red */
 color: #9aefb4;

 letter-spacing: 2px;
 text-shadow: 0 0 10px rgba(31,193,81, 0.3);
 margin-bottom: 20px;
}

.mecha-header h3 {
 text-align: center;
 font-size: 18px;
 color: #9aefb4;
 text-shadow: 0 0 8px rgba(31,193,81, 0.3);
 margin-bottom: 15px;
}

.mecha-image img {
 width: 100%;
 border-radius: 10px;
 border: 1px solid rgba(31,193,81, 0.3);
 box-shadow: 0 0 20px rgba(31,193,81, 0.3);
 margin-bottom: 20px;
}

.mecha-content p {
 font-size: 14px;
 line-height: 1.8;
 margin-bottom: 14px;
 color: #9aefb4;
}

.glow {
 color: #9aefb4;
 text-shadow: 0 0 6px rgba(31,193,81, 0.3);
 font-weight: 600;
}

.glow-strong {
 color: #9aefb4;
 text-shadow:
 0 0 10px rgba(31,193,81, 0.3),
 0 0 20px rgba(31,193,81, 0.3);
 font-weight: 700;
}

.final-line {
 margin-top: 18px;
 padding: 10px;
 border: 1px solid rgba(31,193,81, 0.3);
 background: rgba(8,52,22, 0.25);
 border-radius: 8px;
 text-align: center;
 color: #9aefb4;
}

.toast-root{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:99999;pointer-events:none;max-width:min(92vw,540px)}.toast{display:grid;grid-template-columns:28px 1fr auto;gap:12px;background:#0b2012;color:#f0fdf4;border:1px solid rgba(255,255,255,.08);padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(10,20,13,.35);pointer-events:auto;overflow:hidden}.toast .ico{align-self:start;margin-top:2px}.toast .ttl{font-weight:700;line-height:1.25;font-size:14px;margin-bottom:4px}.toast .msg{opacity:.95;line-height:1.45;font-size:13px}.toast .actions{display:flex;gap:8px;align-self:center}.toast .btn{background:#23d45a;color:#fff;border:0;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}.toast .btn.alt{background:transparent;color:#9fefb8;border:1px solid rgba(159,239,184,.35)}.toast .close{background:transparent;border:0;color:#98b3a0;cursor:pointer;padding:4px;margin-left:6px}.toast.success{border-left:4px solid #22c555}.toast.info{border-left:4px solid #23d45a}.toast.warn{border-left:4px solid #25db5d}.toast .progress{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#72e897,#22c555);width:100%;transform-origin:left;animation:toastBar linear forwards}@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:640px){.toast{grid-template-columns:24px 1fr auto;padding:12px}.toast .btn{padding:7px 10px}}

.toast .msg { word-break: break-word; overflow-wrap: anywhere; }

.toast-root { bottom: max(12px, env(safe-area-inset-bottom, 12px)); }

@media (max-width: 540px) {
 .toast-root {
 left: 0; right: 0; transform: none;
 padding: 0 12px;
 bottom: calc(max(12px, env(safe-area-inset-bottom, 12px)) + var(--fab-offset, 72px));
 max-width: none;
 }
 .toast {
 grid-template-columns: 1fr; /* 1 kolom */
 position: relative;
 padding: 14px 14px 12px 14px;
 border-radius: 16px;
 }
 .toast .ico {
 position: absolute; left: 14px; top: 14px;
 margin: 0; transform: translateY(1px);
 }
 .toast .cnt { padding-left: 34px; }
 .toast .ttl { font-size: 15px; margin-bottom: 6px; }
 .toast .msg { font-size: 13px; opacity: .96; }
 .toast .actions {
 margin-top: 12px; gap: 10px; width: 100%;
 display: grid; grid-template-columns: 1fr 1fr;
 }
 .toast .btn { width: 100%; min-width: 0; padding: 10px 0; }
 .toast .close { position: absolute; right: 6px; top: 6px; }
}


 /* Chat Widget Styles - Lightweight & Minimal */
 .chat-widget {
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 9999;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 /* Hide floating button on mobile - use bottom nav instead */
 @media (max-width: 640px) {
 .chat-toggle-btn {
 display: none !important;
 }
 
 /* Ensure popup is still visible on mobile even when button is hidden */
 .chat-widget {
 display: block !important;
 }
 
 .chat-popup {
 display: none; /* Hidden by default, shown via JS */
 }
 
 .chat-popup[style*="display: block"],
 .chat-popup[style*="display:block"] {
 display: block !important;
 }
 }
 
 .chat-toggle-btn {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 border: none;
 color: white;
 cursor: pointer;
 box-shadow: 0 4px 12px rgba(47,221,101, 0.3);
 position: relative;
 transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .chat-toggle-btn:hover {
 transform: scale(1.05);
 box-shadow: 0 6px 20px rgba(47,221,101, 0.4);
 }
 
 #chat-toggle-btn .chat-icon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 28px !important;
 height: 28px !important;
 }
 
 .chat-unread-badge {
 position: absolute;
 top: -5px;
 right: -5px;
 background: #9aefb4;
 color: white;
 border-radius: 12px;
 padding: 2px 6px;
 font-size: 11px;
 font-weight: 600;
 min-width: 20px;
 text-align: center;
 }
 
 .chat-popup {
 position: absolute;
 bottom: 80px;
 right: 0;
 width: 380px;
 max-width: calc(100vw - 40px);
 height: 500px;
 max-height: calc(100vh - 120px);
 background: white;
 border-radius: 12px;
 box-shadow: 0 10px 40px rgba(0,0,0,0.2);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 }
 
 .chat-popup-header {
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 color: white;
 padding: 16px 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-shrink: 0;
 }
 
 .chat-header-title {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-height: 0;
 }
 
 .chat-popup-header h3 {
 margin: 0;
 font-size: 18px;
 font-weight: 600;
 line-height: 1.2;
 }
 
 .chat-operating-hours {
 font-size: 11px;
 opacity: 0.9;
 font-weight: 400;
 display: flex;
 align-items: center;
 gap: 4px;
 line-height: 1.2;
 }
 
 .chat-operating-hours svg {
 width: 12px;
 height: 12px;
 opacity: 0.8;
 flex-shrink: 0;
 }
 
 .chat-header-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 }
 
 /* Notification Toggle Button */
 .btn-notif-toggle {
 background: none;
 border: none;
 color: white;
 font-size: 18px;
 cursor: pointer;
 padding: 4px 8px;
 transition: all 0.2s;
 opacity: 0.8;
 }
 
 .btn-notif-toggle:hover {
 opacity: 1;
 transform: scale(1.1);
 }
 
 /* Icon states */
 .btn-notif-toggle[data-status="not-subscribed"] svg {
 opacity: 0.7;
 }
 
 .btn-notif-toggle[data-status="not-subscribed"]:hover svg {
 opacity: 1;
 }
 
 .btn-notif-toggle[data-status="subscribed"] svg {
 opacity: 1;
 animation: bellRing 2s ease-in-out;
 }
 
 .btn-notif-toggle[data-status="blocked"] svg {
 color: #80eaa1;
 }
 
 .btn-notif-toggle[data-status="not-supported"] {
 display: none !important;
 }
 
 @keyframes bellRing {
 0%, 100% { transform: rotate(0deg); }
 10%, 30% { transform: rotate(-10deg); }
 20%, 40% { transform: rotate(10deg); }
 }
 
 /* Notification Info Bar */
 .chat-notif-info-bar {
 position: absolute;
 top: 64px;
 left: 0;
 right: 0;
 background: linear-gradient(to right, #e5fbec, #f5f5f5);
 border-bottom: 1px solid #c1f5d1;
 padding: 8px 12px;
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 color: #616161;
 z-index: 10;
 animation: slideDown 0.3s ease;
 }
 
 .chat-notif-info-bar svg {
 flex-shrink: 0;
 }
 
 .chat-notif-info-bar .small {
 flex: 1;
 line-height: 1.4;
 }
 
 .chat-notif-info-bar .btn-dismiss {
 background: none;
 border: none;
 color: #9e9e9e;
 cursor: pointer;
 padding: 0 4px;
 font-size: 16px;
 transition: color 0.2s;
 }
 
 .chat-notif-info-bar .btn-dismiss:hover {
 color: #616161;
 }
 
 @keyframes slideDown {
 from {
 max-height: 0;
 opacity: 0;
 }
 to {
 max-height: 50px;
 opacity: 1;
 }
 }
 
 .chat-close-btn {
 background: none;
 border: none;
 color: white;
 font-size: 28px;
 line-height: 1;
 cursor: pointer;
 padding: 0;
 width: 30px;
 height: 30px;
 }
 
 .chat-popup-body {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-height: 0;
 overflow: hidden;
 height: calc(100% - 64px);
 position: relative;
 transition: padding-top 0.3s ease;
 }
 
 /* Add padding when info bar is visible */
 .chat-popup-body.has-info-bar {
 padding-top: 40px;
 }
 
 .chat-view {
 flex: 1 1 auto;
 display: none;
 flex-direction: column;
 min-height: 0;
 overflow: hidden;
 }
 
 #chat-list-view {
 display: flex;
 }
 
 #chat-messages-view {
 display: none;
 }
 
 #chat-messages-view.active {
 display: flex;
 flex-direction: column;
 }
 
 #chat-new-view {
 display: none;
 }
 
 #chat-new-view.active {
 display: flex;
 }
 
 .chat-conversations-list {
 flex: 1;
 overflow-y: auto;
 padding: 0;
 background: white;
 }
 
 /* Custom Scrollbar for Conversations List */
 .chat-conversations-list::-webkit-scrollbar {
 width: 6px;
 }
 
 .chat-conversations-list::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
 
 .chat-conversations-list::-webkit-scrollbar-thumb {
 background: #9aefb4;
 border-radius: 3px;
 }
 
 .chat-conversations-list::-webkit-scrollbar-thumb:hover {
 background: #9aefb4;
 }
 
 /* Firefox */
 .chat-conversations-list {
 scrollbar-width: thin;
 scrollbar-color: #9aefb4 #f1f1f1;
 }
 
 .chat-conversation-item {
 padding: 12px 16px;
 cursor: pointer;
 display: flex;
 gap: 12px;
 align-items: flex-start;
 transition: background 0.15s ease;
 color: #9aefb4;
 border-bottom: 1px solid #f0f0f0;
 }
 
 .chat-conversation-item:hover {
 background: #f5f5f5;
 }
 
 .chat-conversation-item.active {
 background: #eefcf2;
 }
 
 /* WhatsApp-like Avatar */
 .conversation-avatar {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-weight: 600;
 font-size: 18px;
 }
 
 .conversation-avatar svg {
 width: 24px;
 height: 24px;
 }
 
 /* WhatsApp-like Content */
 .conversation-content {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
 }
 
 .conversation-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 8px;
 }
 
 .conversation-name {
 font-weight: 600;
 font-size: 15px;
 color: #111;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 
 .conversation-time {
 font-size: 12px;
 color: #7d8166;
 flex-shrink: 0;
 }
 
 .conversation-preview {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 8px;
 }
 
 .conversation-message {
 font-size: 14px;
 color: #667781;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin: 0;
 flex: 1;
 }
 
 .conversation-unread {
 background: #25d35b;
 color: white;
 border-radius: 12px;
 padding: 2px 8px;
 font-size: 12px;
 font-weight: 600;
 min-width: 20px;
 text-align: center;
 flex-shrink: 0;
 }
 
 /* Active item styling */
 .chat-conversation-item.active .conversation-name {
 color: #9aefb4;
 }
 
 .chat-conversation-item.active .conversation-time {
 color: #9aefb4;
 }
 
 .chat-new-btn {
 margin: 12px;
 padding: 12px;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 color: white;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 500;
 font-size: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 transition: all 0.2s;
 flex-shrink: 0;
 }
 
 .chat-new-btn:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(47,221,101, 0.3);
 }
 
 .chat-conversation-title {
 flex: 1;
 font-weight: 600;
 font-size: 16px;
 color: #1f3726;
 }
 
 .chat-messages-container {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-height: 0;
 background: #d5e5da;
 }
 
 /* Custom Scrollbar for Messages Container */
 .chat-messages-container::-webkit-scrollbar {
 width: 6px;
 }
 
 .chat-messages-container::-webkit-scrollbar-track {
 background: rgba(0, 0, 0, 0.05);
 }
 
 .chat-messages-container::-webkit-scrollbar-thumb {
 background: rgba(47,221,101, 0.6);
 border-radius: 3px;
 }
 
 .chat-messages-container::-webkit-scrollbar-thumb:hover {
 background: #9aefb4;
 }
 
 /* Firefox */
 .chat-messages-container {
 scrollbar-width: thin;
 scrollbar-color: rgba(47,221,101, 0.6) rgba(0, 0, 0, 0.05);
 }
 
 /* WhatsApp Group-like Messages */
 .chat-message {
 display: flex;
 margin-bottom: 4px;
 animation: fadeIn 0.2s ease;
 }
 
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 
 .chat-message.mine {
 justify-content: flex-end;
 }
 
 .chat-message-bubble {
 max-width: 80%;
 padding: 6px 8px 8px 10px;
 border-radius: 8px;
 position: relative;
 box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
 }
 
 /* Bubble from others (Admin/CS) */
 .chat-message:not(.mine) .chat-message-bubble {
 background: #FFFFFF;
 border-radius: 0 8px 8px 8px;
 }
 
 /* Bubble tail for others */
 .chat-message:not(.mine) .chat-message-bubble::before {
 content: '';
 position: absolute;
 top: 0;
 left: -8px;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 8px 13px 0;
 border-color: transparent #FFFFFF transparent transparent;
 }
 
 /* Bubble from user (mine) */
 .chat-message.mine .chat-message-bubble {
 background: #d0f5db; /* Light blue for user messages */
 border-radius: 8px 0 8px 8px;
 }
 
 /* Bubble tail for mine */
 .chat-message.mine .chat-message-bubble::before {
 content: '';
 position: absolute;
 top: 0;
 right: -8px;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 0 13px 8px;
 border-color: transparent transparent transparent #d0f5db;
 }
 
 .message-sender {
 font-size: 12.5px;
 font-weight: 600;
 color: #9aefb4 !important;
 margin-bottom: 4px;
 }
 
 .chat-message.mine .message-sender {
 display: none;
 }
 
 /* Message text */
 .message-text {
 font-size: 14px;
 line-height: 19px;
 color: #ffffff !important;
 word-wrap: break-word;
 white-space: pre-wrap;
 margin-bottom: 4px;
 }
 
 /* Message metadata (time + status) */
 .message-meta {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 4px;
 margin-top: 2px;
 }
 
 .message-time {
 font-size: 11px;
 color: #728166 !important;
 line-height: 15px;
 }
 
 /* Use multiple selectors to override global styles */
 .chat-message-bubble .message-status,
 .message-meta .message-status,
 .chat-message .message-status {
 width: 16px !important;
 height: 16px !important;
 min-width: 16px !important;
 min-height: 16px !important;
 max-width: 16px !important;
 max-height: 16px !important;
 flex-shrink: 0;
 color: #728166 !important;
 fill: currentColor !important;
 }
 
 .chat-message:not(.mine) .message-status {
 display: none;
 }
 
 /* Loading dots animation */
 @keyframes loadingDots {
 0%, 20% { content: '.'; }
 40% { content: '..'; }
 60%, 100% { content: '...'; }
 }
 
 .message-status.loading::after {
 content: '...';
 animation: loadingDots 1.5s infinite;
 font-size: 16px;
 line-height: 16px;
 }
 
 .message-status.loading path {
 display: none;
 }
 
 .message-status.failed {
 color: #9aefb4 !important;
 cursor: pointer;
 }
 
 .message-status.sent {
 color: #667781 !important;
 }
 
 .chat-new-form {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 }
 
 .chat-new-form form {
 display: flex;
 flex-direction: column;
 gap: 16px;
 flex: 1;
 }
 
 .chat-new-form .form-group {
 display: flex;
 flex-direction: column;
 gap: 6px;
 }
 
 .chat-new-form label {
 font-size: 14px;
 font-weight: 500;
 color: #37513f;
 }
 
 .chat-new-form .form-control {
 width: 100%;
 padding: 10px 12px;
 border: 1px solid #d1dbd4;
 border-radius: 8px;
 font-size: 14px;
 font-family: inherit;
 transition: border-color 0.2s;
 box-sizing: border-box;
 }
 
 .chat-new-form .form-control:focus {
 outline: none;
 border-color: #9aefb4;
 box-shadow: 0 0 0 3px rgba(47,221,101, 0.1);
 }
 
 .chat-new-form textarea.form-control {
 resize: vertical;
 min-height: 100px;
 }
 
 .chat-new-form .btn {
 padding: 12px 20px;
 border: none;
 border-radius: 8px;
 font-size: 15px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 text-align: center;
 }
 
 .chat-new-form .btn-primary {
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 color: white;
 }
 
 .chat-new-form .btn-primary:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(47,221,101, 0.3);
 }
 
 .chat-new-form .btn-primary:active {
 transform: scale(0.98);
 }
 
 .chat-new-form .btn-block {
 width: 100%;
 margin-top: auto;
 }
 
 .chat-message-form {
 padding: 12px;
 border-top: 1px solid #e5ebe7;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: flex-end;
 flex-shrink: 0;
 background: white;
 }
 
 .chat-product-card {
 flex: 1 1 100%;
 max-width: 100%;
 display: flex;
 gap: 12px;
 padding: 12px;
 background: #f3f6f4;
 border-radius: 8px;
 margin-bottom: 4px;
 border: 1px solid #e5ebe7;
 }
 
 .chat-product-card img {
 width: 60px;
 height: 60px;
 object-fit: cover;
 border-radius: 6px;
 flex-shrink: 0;
 }
 
 .chat-product-card-content {
 flex: 1;
 min-width: 0;
 }
 
 .chat-product-card-name {
 font-weight: 500;
 font-size: 14px;
 color: #1f3726;
 margin-bottom: 4px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 
 .chat-product-card-variant {
 font-size: 12px;
 color: #74806b;
 margin-bottom: 4px;
 }
 
 .chat-product-card-price {
 font-size: 13px;
 color: #69e790;
 font-weight: 600;
 }
 
 .chat-product-card-remove {
 align-self: flex-start;
 background: none;
 border: none;
 color: #9ca3af;
 cursor: pointer;
 padding: 4px;
 font-size: 18px;
 line-height: 1;
 transition: color 0.2s;
 }
 
 .chat-product-card-remove:hover {
 color: #9aefb4;
 }
 
 /* Product card in messages (read-only display) */
 .message-product-card {
 display: flex;
 gap: 10px;
 padding: 10px;
 background: rgba(255, 255, 255, 0.5);
 border-radius: 8px;
 margin-bottom: 6px;
 border: 1px solid rgba(0, 0, 0, 0.08);
 align-items: center;
 }
 
 .chat-message.mine .message-product-card {
 background: rgba(255, 255, 255, 0.7);
 }
 
 .message-product-card img {
 width: 50px;
 height: 50px;
 object-fit: cover;
 border-radius: 6px;
 flex-shrink: 0;
 }
 
 .message-product-info {
 flex: 1;
 min-width: 0;
 }
 
 .message-product-name {
 font-weight: 500;
 font-size: 13px;
 color: #9aefb4;
 margin-bottom: 2px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 line-height: 1.3;
 }
 
 .message-product-variant {
 font-size: 11px;
 color: #78806b;
 margin-bottom: 2px;
 }
 
 .message-product-price {
 font-size: 12px;
 color: #69e790;
 font-weight: 600;
 }
 
 .message-product-link {
 flex-shrink: 0;
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(105,231,144, 0.1);
 border-radius: 6px;
 color: #69e790;
 text-decoration: none;
 transition: all 0.2s;
 }
 
 .message-product-link:hover {
 background: #69e790;
 color: white;
 }
 
 .message-product-link svg {
 width: 16px;
 height: 16px;
 }
 
 .chat-message-input {
 flex: 1;
 border: 1px solid #d1dbd4;
 border-radius: 20px;
 padding: 10px 16px;
 resize: none;
 max-height: 100px;
 font-family: inherit;
 font-size: 14px;
 line-height: 1.5;
 box-sizing: border-box;
 overflow-y: hidden;
 }
 
 .chat-message-input:focus {
 outline: none;
 border-color: #9aefb4;
 box-shadow: 0 0 0 3px rgba(47,221,101, 0.1);
 }
 
 .chat-send-btn {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: linear-gradient(135deg, #9aefb4 0%, #9aefb4 100%);
 border: none;
 color: white;
 cursor: pointer;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 }
 
 .chat-send-btn:hover {
 transform: scale(1.05);
 box-shadow: 0 2px 8px rgba(47,221,101, 0.3);
 }
 
 .chat-send-btn:active {
 transform: scale(0.95);
 }
 
 .chat-loading {
 text-align: center;
 padding: 20px;
 color: #6b7280;
 }
 
 /* Date Separator (WhatsApp-style) */
 .date-separator {
 display: flex;
 align-items: center;
 gap: 12px;
 margin: 24px 0 16px;
 opacity: 0;
 animation: fadeInSeparator 0.3s ease forwards;
 }

 @keyframes fadeInSeparator {
 from {
 opacity: 0;
 transform: translateY(-10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }

 .date-separator-line {
 flex: 1;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 50%, transparent);
 }

 .date-separator-text {
 flex-shrink: 0;
 padding: 4px 12px;
 background: #e9efeb;
 color: #6c757d;
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 border-radius: 12px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 /* Mobile responsive */
 @media (max-width: 640px) {
 .chat-popup {
 position: fixed !important; /* Override absolute positioning */
 bottom: 45px !important; /* Above bottom nav */
 right: 0 !important;
 left: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 /* Use dvh (dynamic viewport height) for browser UI awareness */
 height: calc(100dvh - 45px) !important;
 max-height: calc(100dvh - 45px) !important;
 /* Fallback for browsers that don't support dvh */
 height: calc(var(--viewport-height, 100vh) - 45px) !important;
 max-height: calc(var(--viewport-height, 100vh) - 45px) !important;
 border-radius: 0 !important;
 z-index: 9999 !important;
 }
 
 .chat-popup-header {
 border-radius: 0;
 }
 
 .chat-messages-container,
 .chat-conversations-list {
 /* Adjust for mobile keyboard using dynamic viewport */
 max-height: calc(100dvh - 190px);
 /* Fallback for browsers that don't support dvh */
 max-height: calc(var(--viewport-height, 100vh) - 190px);
 }
 }
 

/* =========================================================
 ⚡ FIXED FOOTER – RED ELEGANT MODE
========================================================= */

.sbo-top-fixed-footer{
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 999;
 display: flex;
 align-items: center;
 justify-content: space-around;
 gap: 8px;
 padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
 overflow: hidden;
 background: radial-gradient(circle at 50% 0%, #000000, rgb(0 0 0 / 92%) 58%, rgb(0 0 0 / 98%)), linear-gradient(180deg, rgba(4,21,9, 0.92), rgb(0 0 0 / 98%));
 backdrop-filter: blur(12px);
 border-top: 1px solid rgb(31,193,81, 0.3);
 border-radius: 18px 18px 0 0;
 box-shadow: 0 -12px 30px #093818, inset 0 1px 0 rgba(255, 255, 255, .05);
 font-family: "Orbitron", "Poppins", system-ui, sans-serif;
}

/* scanline */
.sbo-top-fixed-footer::before{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
 repeating-linear-gradient(
 0deg,
 rgba(255,255,255,.015),
 rgba(255,255,255,.015) 1px,
 transparent 1px,
 transparent 6px
 );
 opacity:.85;
 mix-blend-mode:overlay;
}

/* shine sweep */
.sbo-top-fixed-footer::after{
 content:"";
 position:absolute;
 top:0;
 left:-160%;
 width:60%;
 height:100%;
 background: linear-gradient(120deg, transparent, rgba(31,193,81, 0.3), transparent);
 transform: skewX(-25deg);
 animation: footerFinalShine 3.8s infinite;
 mix-blend-mode: screen;
 pointer-events:none;
}

@keyframes footerFinalShine{
 0%{left:-160%;}
 68%{left:160%;}
 100%{left:160%;}
}

/* =========================================================
 ITEM
========================================================= */

.sbo-top-fixed-footer a{
 flex:1;
 max-width:110px;

 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:6px;

 padding: 8px 6px;

 text-decoration:none;
 text-align:center;

 color: rgba(31,193,81, 0.3);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .25px;

 border-radius: 14px;
 position:relative;
 z-index:1;

 transition: all .18s ease;
}

.sbo-top-fixed-footer a:hover{
 color:#ffffff;
 background: rgba(104,231,144, 0.35);
 filter: drop-shadow(0 0 12px rgba(31,193,81, 0.35));
 transform: translateY(-1px);
}

.sbo-top-fixed-footer a:active{
 transform: translateY(0) scale(.99);
}

/* =========================================================
 ICON
========================================================= */

.sbo-top-fixed-footer img{
 width:26px;
 height:26px;
 transition: .18s ease;
 filter: drop-shadow(0 0 8px rgba(31,193,81, 0.3));
}

.sbo-top-fixed-footer a:hover img{
 transform: scale(1.08);
 filter: drop-shadow(0 0 16px rgba(104,231,144, 0.35);
}

/* =========================================================
 HUD CORNERS
========================================================= */

.sbo-top-fixed-footer .hud-corner{
 position:absolute;
 width:18px;height:18px;
 pointer-events:none;
 border: 1px solid rgba(104,231,144, 0.35);
 filter: drop-shadow(0 0 10px rgba(104,231,144, 0.35));
 opacity:.85;
}

.sbo-top-fixed-footer .hud-tl{top:8px;left:10px;border-right:none;border-bottom:none;border-radius:10px 0 0 0;}
.sbo-top-fixed-footer .hud-tr{top:8px;right:10px;border-left:none;border-bottom:none;border-radius:0 10px 0 0;}
.sbo-top-fixed-footer .hud-bl{bottom:8px;left:10px;border-right:none;border-top:none;border-radius:0 0 0 10px;}
.sbo-top-fixed-footer .hud-br{bottom:8px;right:10px;border-left:none;border-top:none;border-radius:0 0 10px 0;}

/* =========================================================
 CENTER CTA
========================================================= */

.sbo-top-fixed-footer .tada{
 color: #ffffff;
 background: radial-gradient(circle at 50% 0%, #9aefb4, rgba(0, 0, 0, 0) 70%), rgba(104,231,144, 0.35);
 border: 1px solid rgba(104,231,144, 0.35);
 box-shadow: 0 0 18px #9aefb4, inset 0 0 16px rgba(104,231,144, 0.35);
}

.sbo-top-fixed-footer .tada img{
 width:30px;
 height:30px;
 filter: drop-shadow(0 0 16px rgba(104,231,144, 0.35));
}

/* pulse */
.sbo-top-fixed-footer .tada::before{
 content:"";
 position:absolute;
 inset:-12px;
 border-radius:999px;
 background:
 radial-gradient(circle, #000000, transparent 70%),
 radial-gradient(circle, rgba(31,193,81, 0.3), transparent 72%);
 filter: blur(12px);
 opacity:.55;
 animation: corePulse 2.9s ease-in-out infinite;
 z-index:-1;
}

@keyframes corePulse{
 0%,100%{opacity:.35; transform:scale(.99);}
 50%{opacity:.75; transform:scale(1.02);}
}

/* ACTIVE */
.sbo-top-fixed-footer a.is-active{
 color:#ffffff;
 background: rgba(31,193,81, 0.3);
 box-shadow: inset 0 0 0 1px rgba(31,193,81, 0.3);
}

.sbo-top-fixed-footer a.is-active img{
 filter: drop-shadow(0 0 18px rgba(31,193,81, 0.3));
}

/* RESPONSIVE */
@media (max-width:500px){
 .sbo-top-fixed-footer{
 padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
 border-radius: 16px 16px 0 0;
 gap:6px;
 }
 .sbo-top-fixed-footer a{
 font-size:11px;
 padding:7px 5px;
 gap:5px;
 max-width:104px;
 }
 .sbo-top-fixed-footer img{width:22px;height:22px;}
 .sbo-top-fixed-footer .tada img{width:26px;height:26px;}
}


  html.lp-pp-open,
  body.lp-pp-open {
    overflow: hidden !important;
    touch-action: none;
  }
  #popupOverlay.popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2147483000 !important;
    overflow: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #popupOverlay.popup-overlay,
  #popupOverlay.popup-overlay * {
    visibility: visible !important;
  }
  #popupOverlay .SEOMAYA {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Playfair Display', 'Segoe UI', serif !important;
    background-color: transparent !important;
    color: #46e176 !important;
    overflow: hidden !important;
  }
  #popupOverlay .popup-container {
    position: relative !important;
    width: 90% !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.9), rgba(16,26,19, 0.85)) !important;
    border-radius: 20px !important;
    text-align: center !important;
    animation: lpPpRotateScaleIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), lpPpGoldPulse 3.5s infinite ease-in-out !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(55,212,104, 0.2) !important;
    padding-bottom: 20px !important;
    border: 1px solid rgba(55,212,104, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box !important;
  }
  @keyframes lpPpGoldPulse {
    0%, 100% {
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(55,212,104, 0.3), 0 0 0 1px rgba(55,212,104, 0.2);
    }
    50% {
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(22,136,57, 0.55), 0 0 0 1px rgba(55,212,104, 0.3);
    }
  }
  #popupOverlay .popup-container::before {
    content: "" !important;
    position: absolute !important;
    top: -100% !important;
    left: -100% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(36,219,93, 0.15) 50%,
      rgba(255, 255, 255, 0) 55%
    ) !important;
    animation: lpPpShineDiagonal 5s linear infinite !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  @keyframes lpPpShineDiagonal {
    0% { transform: translate(-100%, -100%) rotate(30deg); }
    100% { transform: translate(100%, 100%) rotate(30deg); }
  }
  @keyframes lpPpRotateScaleIn {
    0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
    50% { transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  #popupOverlay .popup-image {
    width: 100% !important;
    display: block !important;
    border-bottom: 1px solid rgba(55,212,104, 0.15) !important;
    border: 0 !important;
    max-height: min(62dvh, 460px) !important;
    object-fit: cover !important;
    object-position: center 42% !important;
    background: #111 !important;
  }
  #popupOverlay .clk-btn-sgp {
    --blade-cut: 12px;
    width: 97% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  #popupOverlay .clk-btn-sgp::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 30px) !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #46e176, #46e176, #46e176, transparent) !important;
    opacity: 0.4 !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
  }
  #popupOverlay .clk-btn-sgp a {
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 16px 12px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 2px solid transparent !important;
    box-shadow: 0 8px 0 #000 !important;
    clip-path: polygon(var(--blade-cut) 0%, 100% 0%, 100% calc(100% - var(--blade-cut)), calc(100% - var(--blade-cut)) 100%, 0% 100%, 0% var(--blade-cut)) !important;
    z-index: 1 !important;
    text-decoration: none !important;
    display: block !important;
    font-size: inherit !important;
  }
  #popupOverlay .clk-btn-sgp a::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, #46e176, #46e176, #46e176, #46e176, #46e176) !important;
    border-radius: 16px !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }
  #popupOverlay .clk-btn-sgp a:hover::after {
    opacity: 1 !important;
  }
  #popupOverlay .clk-btn-sgp a:hover {
    transform: translateY(-6px) scale(1.03) !important;
    border-color: #46e176 !important;
  }
  #popupOverlay .clk-btn-sgp a.login {
    color: #46e176 !important;
    background: linear-gradient(145deg, #168839, #000) !important;
    border: 2px solid #46e176 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }
  #popupOverlay .clk-btn-sgp a.login:hover {
    background: linear-gradient(145deg, #222, #1a1a1a) !important;
    box-shadow: 0 12px 0 #000, 0 20px 40px rgba(55,212,104, 0.4), 0 0 30px rgba(36,219,93, 0.2) !important;
    color: #e1fae9 !important;
  }
  #popupOverlay .clk-btn-sgp a.register {
    color: #000 !important;
    background: linear-gradient(145deg, #46e176, #46e176) !important;
    border: 2px solid #000 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  }
  #popupOverlay .clk-btn-sgp a.register:hover {
    background: linear-gradient(145deg, #46e176, #46e176) !important;
    box-shadow: 0 12px 0 #000, 0 20px 40px rgba(22,136,57, 0.45), 0 0 35px rgba(36,219,93, 0.3) !important;
    color: #000 !important;
    border-color: #000 !important;
  }
  #popupOverlay .popup-footer {
    font-size: 13px !important;
    color: #fff !important;
    padding: 20px 10px !important;
    position: relative !important;
    z-index: 3 !important;
    line-height: 1.6 !important;
    font-family: 'Playfair Display', serif !important;
  }
  #popupOverlay .popup-footer .lp-pp-title {
    margin: 0 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  #popupOverlay .popup-footer .lp-pp-copy {
    color: #fff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 5px rgb(0, 0, 0) !important;
  }
  #popupOverlay .gold-particle {
    position: absolute !important;
    background: radial-gradient(circle, rgba(36,219,93, 0.8) 0%, rgba(55,212,104, 0.4) 100%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    animation: lpPpFloatGold 10s infinite ease-in-out !important;
    box-shadow: 0 0 10px rgba(36,219,93, 0.6) !important;
  }
  @keyframes lpPpFloatGold {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-120px) translateX(40px); opacity: 0; }
  }
  #popupOverlay .luxury-border {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 1px solid rgba(55,212,104, 0.2) !important;
    border-radius: 20px !important;
    pointer-events: none !important;
    z-index: 4 !important;
    background: linear-gradient(135deg, rgba(55,212,104, 0) 0%, rgba(55,212,104, 0.1) 50%, rgba(55,212,104, 0) 100%) !important;
  }
  #popupOverlay button.close-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  #popupOverlay.popup-overlay.lp-pp-closed,
  #popupOverlay.popup-overlay.lp-pp-closed * {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #popupOverlay.popup-overlay.lp-pp-closed {
    display: none !important;
    opacity: 0 !important;
  }
  #popupOverlay .close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(55,212,104, 0.45) !important;
    -webkit-tap-highlight-color: transparent;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  #popupOverlay .close-btn:hover {
    background: rgba(55,212,104, 0.8) !important;
    transform: rotate(90deg) !important;
  }
  #popupOverlay .close-btn::before,
  #popupOverlay .close-btn::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 2px !important;
    background: #46e176 !important;
  }
  #popupOverlay .close-btn::before { transform: rotate(45deg); }
  #popupOverlay .close-btn::after { transform: rotate(-45deg); }
  @media (max-width: 768px) {
    #popupOverlay .clk-btn-sgp {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    #popupOverlay .clk-btn-sgp a {
      padding: 18px 12px !important;
    }
    #popupOverlay .popup-container {
      width: 95% !important;
      max-width: 350px !important;
      padding-bottom: 20px !important;
      border-radius: 20px !important;
    }
    #popupOverlay .close-btn {
      width: 28px !important;
      height: 28px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #popupOverlay .popup-container,
    #popupOverlay .popup-container::before,
    #popupOverlay .gold-particle {
      animation: none !important;
    }
  }