/* =========================================================
   KUMBANG4D - Global & Layout Styles
   Theme: Pure White-Pink-Purple (NO BLACK, NO RED)
========================================================= */

@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 {
  /* KUMBANG4D Brand Colors */
  --brand-50:  #fdf4ff; /* Soft Pink Background */
  --brand-100: #fae8ff; /* Pink Hover */
  --brand-500: #c026d3; /* Magenta Pink (Primary) */
  --brand-600: #9333ea; /* Deep Purple (Secondary/Hover) */
  
  /* Purples Replacing All Grays & Blacks */
  --gray-900: #2e1065; /* Very Deep Purple (Untuk Teks Utama) */
  --gray-700: #4c1d95; /* Dark Purple (Untuk Teks Sekunder) */
  --gray-500: #7e22ce; /* Medium Purple (Untuk Ikon) */
  --gray-300: #d8b4fe; /* Light Purple (Untuk Border Halus) */
  --gray-100: #f3e8ff; /* Very Light Purple (Untuk Background Halus) */
  
  --border: #fbcfe8; /* Soft Pink Border */
  --radius: 12px;
  --transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { 
  margin:0; 
  padding-bottom: 0; 
  color:var(--gray-900); 
  background:#ffffff; 
}
img { max-width:100%; display:block; }

.container { width:100%; max-width:1280px; margin:0 auto; padding:10px 0; }

/* Topbar - Ungu Pekat ke Magenta (Tanpa Hitam) */
.topbar { background:linear-gradient(135deg, var(--gray-900), var(--brand-600)); color:#ffffff; font-size:13px; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; min-height:36px; }
.topbar a { color:#e0c3ff; text-decoration:none; margin-left:12px; transition: var(--transition); }
.topbar a:hover { color: #ffffff; }

/* ========== NAVBAR DESKTOP (Glassmorphism) ========== */
.navbar {
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(251, 207, 232, 0.6);
  box-shadow:0 4px 20px rgba(192, 38, 211, 0.08);
  position:sticky;
  top:0;
  z-index:500;
  transition:all .3s ease;
}

/* Accent Line Pink-Purple */
.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.8;
}

.nav-inner { display:flex; align-items:center; gap:24px; min-height:70px; }
.nav-inner .search .m-search-ico { display: none; }
.login-btn .login-ico { display:none; }

.navbar-logo { display: none; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); box-shadow:0 2px 16px rgba(192,38,211,0.05); position:sticky; top:0; z-index:500; }
.bottom-nav { display: none; }

/* ========== SEARCH BAR ========== */
.search {
  flex:1; position:relative; display:flex; align-items:center; gap:0;
  background:#ffffff; border:1.5px solid #e0c3ff; border-radius:12px; padding:0 16px; height:42px; transition:all 0.3s ease;
}
.search:focus-within { border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(192, 38, 211, 0.1); background:#fdf4ff; }
.search input { flex:1; border:none; outline:none; background:transparent; font-size:15px; padding:0 12px; height:100%; color:var(--gray-900); }
.search input::placeholder { color:var(--gray-500); }
.search-icon-btn { background:transparent; border:none; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--gray-500); transition:0.2s; flex-shrink:0; }
.search-icon-btn:hover { color:var(--brand-500); transform: scale(1.1); }

/* Search Suggest */
.search-suggest { position:absolute; left:0; right:0; top:100%; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:var(--radius); padding:8px 0; box-shadow:0 10px 30px rgba(192,38,211,0.1); margin-top:4px; font-size:14px; max-height:260px; overflow:auto; }
.search-suggest div { padding:8px 16px; cursor:pointer; transition: 0.2s;}
.search-suggest div:hover { background:var(--brand-50); color: var(--brand-600); padding-left: 20px;}

/* ========== NAV ACTIONS & BUTTONS ========== */
.nav-actions { display:flex; gap:10px; align-items:center; }
.icon-btn, .login-btn {
  background:rgba(255,255,255,0.8); border:1px solid #e0c3ff; padding:8px 12px; border-radius:var(--radius); cursor:pointer; font-size:14px; transition:all 0.3s ease; height:42px; position:relative; color: var(--brand-600);
}
.icon-btn:hover, .login-btn:hover { background:var(--brand-50); border-color:var(--brand-500); transform:translateY(-2px); box-shadow: 0 4px 10px rgba(192,38,211,0.15); }

/* Badges - Hot Pink to Magenta (Tanpa Merah) */
.cart-indicator, .compare-indicator { position:relative; }
.badge {
  background:linear-gradient(135deg, #f472b6, #c026d3); color:#ffffff; font-size:10.5px; font-weight:800; 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(192,38,211,0.4), 0 0 0 2px #ffffff; transition:all 0.3s ease;
}
.icon-btn:hover .badge { transform:scale(1.1); box-shadow: 0 4px 12px rgba(192,38,211,0.6), 0 0 0 2px #ffffff; }
.badge.is-empty { display:none; }

/* Logged In Button */
.login-btn.logged-in {
  background:linear-gradient(135deg, var(--brand-50), #ffffff); border:1px solid var(--border); color:var(--brand-600); max-width:200px; display:inline-flex; align-items:center; gap:10px; padding:4px 12px 4px 4px; box-shadow: 0 2px 10px rgba(192,38,211,0.05);
}
.login-btn.logged-in .user-avatar {
  width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--brand-100), var(--brand-50)); color:var(--brand-500); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; border: 1px solid var(--brand-500); transition:all 0.3s ease;
}
.login-btn.logged-in:hover .user-avatar { transform:scale(1.1) rotate(-5deg); background: var(--brand-500); color: #ffffff;}
.login-btn.logged-in .login-text { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.login-btn.logged-in:hover { background:var(--brand-100); border-color:var(--brand-500); transform:translateY(-2px); }

/* Dropdown */
.user-menu { position:relative; }
.user-dropdown {
  position:absolute; top:calc(100% + 12px); right:0; background:rgba(255,255,255,0.98); backdrop-filter: blur(10px); border:1px solid var(--border); border-radius:16px; box-shadow:0 15px 40px rgba(192,38,211,0.15); min-width:220px; padding:8px 0; z-index:9999;
}
.user-dropdown:not([hidden]) { display:block !important; visibility:visible !important; opacity:1 !important; }
.dropdown-item { display:flex; align-items:center; gap:12px; padding:12px 20px; color:var(--gray-700); font-size:14px; font-weight:600; border:none; background:none; width:100%; text-align:left; cursor:pointer; transition: 0.2s; }
.dropdown-item:hover { background:var(--brand-50); color:var(--brand-600); padding-left: 24px; }
.dropdown-icon { font-size:18px; color: var(--brand-500); }
.dropdown-separator { height:1px; background:var(--border); margin:8px 0; }

/* ========== MEGA MENU KATEGORI ========== */
@media (min-width: 761px) { .mega-cats-wrapper { display:contents; } .mega-cats-fade { display:none !important; } }
.mega-cats { display:flex; gap:6px; position:relative; z-index:510; overflow-x:auto; flex:1; scrollbar-width:none; }
.mega-cats::-webkit-scrollbar { display:none; }
.mega-cats a { text-decoration:none; font-size:14px; font-weight: 600; color:var(--gray-700); padding:8px 14px; border-radius:8px; white-space:nowrap; transition:var(--transition); }
.mega-cats a:hover, .mega-cats a.active { background:var(--brand-100); color:var(--brand-600); }

.mega-cats-more { position:relative; display:flex; align-items:center; }
.mega-more-btn { cursor:pointer; border:1px solid #e0c3ff; background:var(--brand-50); color:var(--brand-600); padding:8px 14px; font-size:16px; border-radius:8px; display:flex; align-items:center; transition:var(--transition); }
.mega-more-btn:hover, .mega-cats-more.active > .mega-more-btn { background:var(--brand-600); color:#ffffff; border-color: var(--brand-600); }

.mega-more-dropdown { position:absolute; top:100%; right:0; margin-top:12px; background:rgba(255,255,255,0.98); backdrop-filter: blur(15px); border:1px solid var(--border); border-radius:16px; padding:16px; min-width:400px; box-shadow:0 15px 40px rgba(192,38,211,0.15); z-index:3000; }
.mega-more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; max-height:380px; overflow-y: auto; scrollbar-width:thin; }

/* ========== HERO SECTION ========== */
.hero { background:linear-gradient(135deg, var(--brand-50), #ffffff); padding: 40px 0; }
.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.2; margin:0; font-weight:800; color: var(--gray-900); }
.hero-text .text-brand { color:var(--brand-500); text-shadow: 0 2px 10px rgba(192,38,211,0.2); }
.lead { font-size:18px; color:var(--gray-700); margin-top:16px; font-weight: 500; }
.hero-cta { margin-top:28px; display:flex; gap:16px; }
.hero-bullets { margin-top:28px; display:flex; gap:28px; font-size:14px; color:var(--gray-700); font-weight: 600;}
.hero-box { background:rgba(255,255,255,0.5); backdrop-filter: blur(10px); padding:10px; border-radius:24px; border: 1px solid #ffffff; box-shadow:0 15px 35px rgba(192,38,211,0.1); display:flex; align-items:center; justify-content:center; }
.hero-box img { border-radius:16px; }

/* ========== USP SECTION ========== */
.usp-section { position:relative; background:linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:20px 0; }
.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:rgba(255,255,255,0.8); backdrop-filter: blur(5px); padding:20px; border:1px solid var(--border); border-radius:20px; position:relative; overflow:hidden; box-shadow:0 4px 15px rgba(192,38,211,0.05); transition:all 0.4s ease; }
.usp-item::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 22%, rgba(192,38,211,0.08), transparent 60%); transition:.5s; z-index:-1; }
.usp-item:hover { transform:translateY(-8px); box-shadow:0 12px 30px rgba(192,38,211,0.15); border-color:var(--brand-500); }
.usp-item:hover::before { background:radial-gradient(circle at 70% 40%, rgba(147,51,234,0.1), 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, var(--brand-100), var(--brand-50)); position:relative; box-shadow: 0 4px 10px rgba(192,38,211,0.1); border: 1px solid var(--brand-500); transition:0.4s; color: var(--brand-500); }
.usp-item:hover .usp-icon { transform:rotate(-10deg) scale(1.1); background: var(--brand-500); color: #ffffff; box-shadow: 0 8px 20px rgba(192,38,211,0.3); }
.usp-icon svg { width:28px; height:28px; display:block; filter:drop-shadow(0 2px 4px rgba(147, 51, 234, 0.2)); }

.usp-text h3 { font-size:16px; font-weight:800; margin:2px 0 6px; color: var(--brand-600); }
.usp-text p { font-size:13px; line-height:1.4; margin:0; color:var(--gray-700); font-weight: 500;}

/* ========== GLOBAL COMPONENTS ========== */
.btn { border:none; cursor:pointer; font-weight:700; font-size:14px; padding:12px 24px; border-radius:12px; background:var(--brand-600); color:#ffffff; transition:all 0.3s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow: 0 4px 15px rgba(147, 51, 234, 0.15); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(147, 51, 234, 0.25); background:var(--brand-500); }
.btn-primary { background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: 0 4px 15px rgba(192,38,211,0.3); }
.btn-primary:hover { box-shadow: 0 8px 25px rgba(192,38,211,0.4); background:linear-gradient(135deg, var(--brand-600), var(--brand-500)); }
.btn-outline { background:#ffffff; color:var(--brand-600); border:2px solid var(--brand-500); box-shadow: none; }
.btn-outline:hover { background:var(--brand-50); color:var(--brand-600); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(192,38,211,0.1); }
.btn-sm { padding:8px 16px; font-size:13px; }

/* Flash & Products Section */
.flash { padding:50px 0 30px; background:#ffffff; }
.products { padding:60px 0; background:#ffffff; }
.flash-head, .products-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:16px; }
.flash-head h2, .products-head h2 { margin:0; font-size:28px; font-weight:800; color: var(--brand-600); }
.flash .countdown { font-family:monospace; background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); color:#ffffff; padding:8px 16px; border-radius:10px; font-size:18px; font-weight: bold; box-shadow: 0 4px 12px rgba(192,38,211,0.3); }

/* ==============================================================
   KUMBANG4D VIP PURPLE FOOTER THEME (BEBAS HITAM)
   ============================================================== */
.site-footer.footer-compact {
  --ft-bg-0: #1a0b2e; /* Very Deep Purple (Not Black) */
  --ft-bg-1: #2d1345; /* Dark Purple */
  --ft-bg-2: #431a6b; /* Medium Purple */
  --ft-bg-3: #5b218f; /* Lighter Purple */
  --ft-accent: #c026d3; /* Pink Magenta */
  --ft-accent-dark: #9333ea; /* Purple */
  
  --ft-text: #fdf4ff;
  --ft-text-sec: #e9d5ff;
  --ft-text-muted: #d8b4fe;
  --ft-glow: rgba(192, 38, 211, 0.2);
  
  color: var(--ft-text);
  background: var(--ft-bg-1);
}

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

.site-footer.footer-compact .ft-title { margin:0 0 16px; font-size:15px; letter-spacing:1px; text-transform:uppercase; font-weight:800; color: #fbcfe8; }
.site-footer.footer-compact .ft-desc, .site-footer.footer-compact .ft-text { margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--ft-text-sec); max-width:330px; }

svg { max-width:100%; }
.site-footer.footer-compact svg { width:20px !important; height:20px !important; flex:0 0 20px; display:inline-block; }

.site-footer.footer-compact .ft-links { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.site-footer.footer-compact .ft-links a { display:flex; align-items:center; gap:10px; font-size:14px; padding:6px 4px; text-decoration:none; color:var(--ft-text-sec); border-radius:8px; transition:all .3s ease; font-weight: 500; }
.site-footer.footer-compact .ft-links a:hover { background:rgba(255,255,255,.08); padding-left:10px; color:#ffffff; }

.site-footer.footer-compact .ico-s { width:26px; height:26px; background:rgba(255,255,255,0.1); color:#fbcfe8; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 26px; font-size:14px; transition:.3s; }
.site-footer.footer-compact .ft-links a:hover .ico-s { background:var(--ft-accent); color:#ffffff; transform:rotate(-8deg) scale(1.1); box-shadow: 0 4px 10px rgba(192,38,211,0.4); }

.site-footer.footer-compact .ft-wa-btn { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--ft-accent), var(--ft-accent-dark)); color:#ffffff; padding:10px 20px; font-size:14px; border-radius:24px; font-weight:700; text-decoration:none; box-shadow:0 4px 15px rgba(192,38,211,.4); transition:.3s; border: 1px solid rgba(255,255,255,0.2); }
.site-footer.footer-compact .ft-wa-btn:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(192,38,211,.6); background:linear-gradient(135deg, #d946ef, #a855f7); }

.site-footer.footer-compact .ft-social { display:flex; gap:12px; margin-top:8px; }
.site-footer.footer-compact .ft-social a { width:38px; height:38px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--ft-text-sec); transition:.3s; border: 1px solid rgba(255,255,255,0.05); }
.site-footer.footer-compact .ft-social a:hover { background:var(--ft-accent); color:#ffffff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(192,38,211,0.4); border-color: var(--ft-accent); }

.site-footer.footer-compact .ft-address { font-size:13px; line-height:1.5; color:var(--ft-text-muted); max-width:330px; margin-top:12px; }
.site-footer.footer-compact .ft-address .company { margin:0 0 6px; font-weight:700; color:#ffffff; font-size:14px; }

.site-footer.footer-compact .ft-payments { margin-top:16px; display:flex; flex-direction:column; gap:10px; max-width:350px; }
.site-footer.footer-compact .ft-payments .pay-row { display:flex; gap:10px; flex-wrap:wrap; }
.site-footer.footer-compact .ft-payments img { width:50px; height:34px; padding:4px 6px; background:#ffffff; border-radius:8px; object-fit:contain; box-shadow:0 4px 10px rgba(147,51,234,.2); transition:.3s; }
.site-footer.footer-compact .ft-payments img:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(192,38,211,.4); }

.site-footer.footer-compact .ft-bottom { border-top:1px solid rgba(255,255,255,.1); background:var(--ft-bg-0); padding:16px 0; margin-top:10px; }
.site-footer.footer-compact .ft-copy { font-size:13px; color:var(--ft-text-muted); display:flex; flex-wrap:wrap; gap:12px; justify-content:center; line-height:1.4; margin:0; font-weight: 500; }
.site-footer.footer-compact .ft-copy span { position:relative; padding:0 12px; }
.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,.2); transform:translateY(-50%); }

/* Footer Variants Overrides for VIP Theme */
.site-footer.footer-compact.variant-ember { background: radial-gradient(circle at 80% 80%, rgba(192,38,211,0.2) 0%, transparent 50%), linear-gradient(140deg, var(--ft-bg-1) 0%, var(--ft-bg-2) 100%); }
.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:4px; background:linear-gradient(90deg, var(--ft-accent-dark), var(--ft-accent)); box-shadow:0 0 15px var(--ft-accent); }
.site-footer.footer-compact.variant-radial { background: radial-gradient(circle at 70% 90%, rgba(192,38,211,0.25) 0%, rgba(147,51,234,0.1) 40%, transparent 65%), linear-gradient(150deg, var(--ft-bg-1) 0%, var(--ft-bg-2) 100%); }
.site-footer.footer-compact.variant-stripes { background: repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 38px, transparent 38px 76px), linear-gradient(130deg, var(--ft-bg-1) 0%, var(--ft-bg-3) 100%); }
.site-footer.footer-compact.variant-glass { background:linear-gradient(145deg, var(--ft-bg-1) 0%, var(--ft-bg-0) 100%); }
.site-footer.footer-compact.variant-glass .ft-grid { position:relative; padding:32px 24px; border-radius:24px; background:linear-gradient(140deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.1); box-shadow:0 15px 35px rgba(45, 19, 69,0.5), inset 0 0 0 1px rgba(255,255,255,0.05); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ==== MOBILE FOOTER COLLAPSE ==== */
.ft-collapsible-content { display: contents; }
@media (max-width: 768px) {
  .ft-top.ft-collapsible .ft-collapsible-content { display: block; max-height: 80px; overflow: hidden; position: relative; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  .ft-top.ft-collapsible .ft-collapsible-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(to bottom, transparent 0%, var(--ft-bg-1) 80%); pointer-events: none; opacity: 1; transition: 0.3s; z-index: 1; }
  .ft-top.ft-collapsible.expanded .ft-collapsible-content { max-height: 2000px; }
  .ft-top.ft-collapsible.expanded .ft-collapsible-content::after { opacity: 0; }
  .ft-expand-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: -8px 0 0; padding: 12px 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s; position: relative; z-index: 10; }
  .ft-expand-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
  .ft-expand-btn svg { width: 18px; height: 18px; transition: transform 0.3s; fill: currentColor; }
  .ft-top.ft-collapsible.expanded .ft-expand-btn { margin-top: 15px; }
  .ft-top.ft-collapsible.expanded .ft-expand-btn svg { transform: rotate(180deg); }
}
@media (min-width: 769px) { .ft-expand-btn { display: none !important; } }

/* ==============================================================
   MOBILE STYLES (<=640px)
   ============================================================== */
@media (max-width:680px) {
  .hero-text h1 { font-size:38px; }
  .hero { padding:0px 0 30px; }
  .hero-inner { gap: 25px; }
  .usp-section { padding: 5px 0; 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-list { gap: 10px; }
}

@media (max-width:640px){
  .container { padding:10px 16px; }
  .topbar { display:none !important; }
  body { padding-bottom: 68px; }

  /* Mobile Top Navbar */
  .navbar { background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 4px 15px rgba(192,38,211,0.08); border: 0; }
  .nav-inner { display:grid; grid-template-columns:1fr; gap:12px; padding:12px 16px 0 12px; min-height:auto; }
  .nav-inner .logo { justify-self:center; margin:0; display:flex; }
  .nav-inner .logo img { height:36px; }

  /* Mobile Search */
  .nav-inner .search { width:100%; height:46px; background:#fdf4ff; border:1.5px solid #fbcfe8; border-radius:14px; padding:0 14px; }
  .nav-inner .search:focus-within { border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(192,38,211,0.1); background:#ffffff; }
  .nav-inner .search-icon-btn svg { width:20px; height:20px; color: var(--brand-500); }
  
  .nav-inner .search-suggest { left:0; right:0; width:calc(100vw - 32px); margin-top:8px; border-radius:16px; max-height:70vh; }

  .nav-inner .nav-actions { display:flex !important; visibility:hidden; pointer-events:none; position:absolute; right:0; top:0; }
  .nav-inner .nav-actions #userMenu { visibility:visible !important; pointer-events:auto !important; }
  .nav-inner .logo { display: none; }
  .navbar-logo { display: block; backdrop-filter:blur(16px); position: static; box-shadow: none; border-bottom: 0; padding-top: .6rem; }
  .nav-inner .logo-mobile { display: block; }
  
  /* Hidden Desktop Elements */
  #wishlistBtn, #notifBtn, #loginBtn, #bottomCategoryBtn, .navbar #userMenu { display:none !important; }
  .nav-actions .cart-indicator, .nav-actions .compare-indicator { display:none !important; }
  
  /* Category Menu Mobile */
  .navbar .container:last-child { display:flex !important; align-items:center !important; padding:8px 16px 10px !important; gap:8px; overflow:visible; }
  .mega-cats-wrapper { position:relative; flex:1; overflow:hidden; min-height:36px; display:flex; }
  .mega-cats-fade { position:absolute; top:0; right:0; bottom:0; width:80px; background:linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 30%, transparent 100%); pointer-events:none; z-index:5; }
  .mega-cats.container { display:flex !important; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex:1; padding:0 !important; margin:0 !important; z-index:1; }
  .mega-cats a { font-size:13px; padding:8px 12px; background: var(--brand-50); border: 1px solid var(--border); }
  .mega-cats a.active { background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); color:#ffffff; border-color: var(--brand-600); }
  
  .mm-wp { flex-shrink:0; }
  .mm2-trigger { display:flex; align-items:center; gap:6px; padding:8px 14px; background:var(--brand-50); color:var(--brand-600); border: 1px solid var(--border); border-radius:8px; font-size:13px; font-weight: 700;}
  .mm2-trigger .label-cat { display: none; }

  /* Mobile User Bottom Sheet */
  .mobile-user-sheet { position:fixed; inset:0; z-index:10000; pointer-events:none; }
  .mobile-user-sheet.active { pointer-events:auto; }
  .mobile-user-sheet-backdrop { position:absolute; inset:0; background:rgba(46,16,101,0.6); backdrop-filter: blur(5px); opacity:0; transition:0.3s; }
  .mobile-user-sheet.active .mobile-user-sheet-backdrop { opacity:1; }
  
  .mobile-user-sheet-content { position:absolute; bottom:0; left:0; right:0; background:#ffffff; border-radius:24px 24px 0 0; box-shadow:0 -10px 40px rgba(192,38,211,0.2); transform:translateY(100%); transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1); padding-bottom:calc(68px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .mobile-user-sheet.active .mobile-user-sheet-content { transform:translateY(0); }
  
  .mobile-user-sheet-header { padding:20px 24px 16px; border-bottom:1px dashed var(--border); background: var(--brand-50); border-radius: 24px 24px 0 0;}
  .mobile-user-sheet-handle { width:48px; height:5px; background:var(--border); border-radius:3px; margin:0 auto 20px; }
  .mobile-user-info { display:flex; align-items:center; gap:16px; }
  
  .mobile-user-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #ffffff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight: 800; border: 2px solid #ffffff; box-shadow: 0 4px 15px rgba(192,38,211,0.3); }
  .mobile-user-details { flex:1; min-width:0; }
  .mobile-user-name { font-size:18px; font-weight:800; color:var(--brand-600); margin-bottom:2px; }
  .mobile-user-email { font-size:13px; font-weight: 600; color:var(--gray-500); }
  
  .mobile-user-sheet-body { padding:12px 0; }
  .mobile-user-sheet-item { display:flex; align-items:center; gap:16px; padding:16px 24px; color:var(--gray-700); font-size:15px; font-weight: 600; transition:0.2s; border:none; background:none; width:100%; text-align:left; }
  .mobile-user-sheet-item:active { background:var(--brand-50); color: var(--brand-600); }
  .mobile-user-sheet-icon { font-size:22px; width:24px; text-align:center; color: var(--brand-500); }
  .mobile-user-sheet-label { flex:1; }
  .mobile-user-sheet-divider { height:1px; background:var(--border); margin:8px 0; }

  /* Footer Adjustments */
  .site-footer.footer-compact .ft-top { padding:40px 0 20px; }
  .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; }
  .site-footer.footer-compact.variant-glass .ft-grid { padding:26px 18px; }
}