/* ==========================================
   DOGELEXUS UI FRAMEWORK v1.0
   ========================================== */

   :root{

    /* DOGELEXUS */

    --dx-primary:#6F2CFF;
    --dx-primary-light:#8B3DFF;
    --dx-primary-soft:#9B5CFF;

    /* Alias agar template lama ikut berubah */

    --brand-50:#F6F1FF;
    --brand-100:#EADFFF;
    --brand-500:var(--dx-primary-light);
    --brand-600:var(--dx-primary);

    /* Accent */
    --dx-accent: #FFD54A;

    /* Text */
    --dx-text: #FFFFFF;
    --dx-text-secondary: #D6CFFF;

    /* Border */
    --dx-border: rgba(120,70,255,.25);

    /* Glow */
    --dx-glow: rgba(111,44,255,.35);
    --dx-glow-strong: rgba(155,92,255,.45);

    /* Shadow */
    --dx-shadow:
    0 10px 24px rgba(0,0,0,.35);

    --dx-shadow-hover:
    0 14px 30px rgba(0,0,0,.45);

    /* Radius */
    --radius-sm:10px;
    --radius:14px;
    --radius-lg:18px;

    /* Transition */
    --transition:.3s ease;

    /* Typography */
    --font-primary:
    "ZCOOL QingKe HuangYou",
    "Segoe UI",
    Arial,
    sans-serif;
  }

  *{
    box-sizing:border-box;
  }

  html{
    scroll-behavior:smooth;
  }

  body{

    margin:0;

    padding-bottom:0;

    font-family:var(--font-primary);

    color:var(--dx-text);

    background:
    linear-gradient(
      180deg,
      var(--dx-bg) 0%,
      var(--dx-bg-secondary) 45%,
      var(--dx-surface) 75%,
      var(--dx-card) 100%
    );

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;

  }
  img { max-width:100%; display:block; }


/* ==========================================
   LAYOUT
========================================== */

.container{

  width:100%;

  max-width:1280px;

  margin:0 auto;

  padding:12px 16px;

}

/* ==========================================
   TOP BAR
========================================== */

.topbar{

  background:linear-gradient(
    180deg,
    #11071F 0%,
    #050505 100%
  );

  color:var(--dx-text);

  font-size:13px;

  border-bottom:1px solid var(--dx-border);

}

.topbar-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  min-height:38px;

}

.topbar a{

  color:var(--dx-text-secondary);

  text-decoration:none;

  margin-left:14px;

  transition:var(--transition);

}

.topbar a:hover{

  color:var(--dx-primary-soft);

}

/* ========== Desktop base (Glassmorphism Modern with Warm Gradient) ========== */
.navbar{
  background:linear-gradient(
    180deg,
    rgba(26,15,46,.98) 0%,
    rgba(17,7,31,.98) 55%,
    rgba(5,5,5,.99) 100%
  );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid var(--dx-border);

  box-shadow:
  0 8px 20px rgba(0,0,0,.35),
  0 0 16px rgba(111,44,255,.12);
  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(255,245,230,0.85) 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(228,231,235,0.6);
  box-shadow:0 2px 16px -4px rgba(0,0,0,0.08);
  position:sticky;
  top:0;
  z-index:500;
}

/* 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(255,245,230,0.9) 100%);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      box-shadow:0 2px 12px -3px rgba(0,0,0,0.08);
      border: 0;
    }

    /* 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:linear-gradient(
        180deg,
        #24123E,
        #1A0F2E
      );
      border:1px solid var(--dx-border);
      border-radius:14px;
      padding:0 12px;
      box-shadow:
      inset 0 1px rgba(255,255,255,.05),
      0 0 10px rgba(111,44,255,.12);
      transition:all .25s;
    }
    .nav-inner .search:focus-within {
      border-color:var(--dx-primary);
      box-shadow:
      0 0 0 3px rgba(111,44,255,.18);
    }

    .nav-inner .search-icon-btn {
      color:var(--dx-text-secondary);
      padding:4px;
      margin-right:4px;
    }
    
    .nav-inner .search-icon-btn svg {
      width:18px;
      height:18px;
    }

    .nav-inner .search input {
      color:var(--dx-text);
      flex:1;
      min-width:0;
      border:none;
      outline:none;
      background:transparent;
      font-size:14px;
      padding:0 8px;
      height:100%;
    }
    .nav-inner .search input::placeholder{

      color:var(--dx-text-secondary);

    }
    .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:16px;
      background:#1A0F2E;

      border:1px solid var(--dx-border);

      box-shadow:
      0 10px 26px rgba(0,0,0,.45),
      0 0 18px rgba(111,44,255,.15);
      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(255,245,230,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(36,18,62,.95);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      border:1px solid var(--dx-border);
      box-shadow:
      0 6px 16px rgba(0,0,0,.30),
      0 0 10px rgba(111,44,255,.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(26,15,46,.98);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      border:1px solid var(--dx-border);
      box-shadow:
      0 12px 28px rgba(0,0,0,.45),
      0 0 18px rgba(111,44,255,.16);
      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(26,15,46,1),

        rgba(26,15,46,.92),

        rgba(26,15,46,.72),

        transparent

      );
      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(--dx-primary);
      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:#24123E;

      color:var(--dx-text-secondary);

      border:1px solid var(--dx-border);
      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(--dx-border);
      background:#24123E;
      border-radius:10px;
      padding:6px 14px;
      font-size:18px;
      cursor:pointer;
    }
    .mega-cats-more.active > .mega-more-btn {
      background:var(--dx-primary);
      color:#fff;
      border-color:var(--dx-primary);
    }
    .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 - DOGELEXUS
============================================================== */

.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;
  inset: 0;

  background: rgba(5,5,5,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  transition: opacity var(--transition);
}

.mobile-user-sheet.active .mobile-user-sheet-backdrop {
  opacity:1;
}

.mobile-user-sheet-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: linear-gradient(
    180deg,
    #24123E 0%,
    #1A0F2E 60%,
    #11071F 100%
  );

  border-top: 1px solid var(--dx-border);

  border-radius: 22px 22px 0 0;

  box-shadow:
  0 -10px 30px rgba(0,0,0,.45),
  0 0 20px rgba(111,44,255,.18);

  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,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: 18px 20px 14px;

 border-bottom: 1px solid var(--dx-border);
}

.mobile-user-sheet-handle {
 width: 48px;
 height: 5px;

 margin: 0 auto 16px;

 border-radius: 999px;

 background: linear-gradient(
  90deg,
  var(--dx-primary),
  var(--dx-primary-soft)
);

}

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

.mobile-user-avatar{

  width:52px;
  height:52px;

  border-radius:50%;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:24px;

  color:#fff;

  flex-shrink:0;

  box-shadow:
  0 0 16px rgba(111,44,255,.25);

}

.mobile-user-details {
  flex:1;
  min-width:0;
}

.mobile-user-name{

  font-size:16px;

  font-weight:700;

  color:var(--dx-text);

  margin-bottom:3px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

.mobile-user-email{

  font-size:13px;

  color:var(--dx-text-secondary);

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

.mobile-user-sheet-body {
 padding:10px 0;
}

.mobile-user-sheet-item{

  display:flex;

  align-items:center;

  gap:16px;

  width:100%;

  padding:15px 20px;

  border:none;

  background:transparent;

  text-decoration:none;

  text-align:left;

  cursor:pointer;

  color:var(--dx-text-secondary);

  font-size:15px;

  transition:var(--transition);

}

.mobile-user-sheet-item:hover{

  background:rgba(111,44,255,.10);

  color:var(--dx-text);

}

.mobile-user-sheet-item:active {
  background:rgba(111,44,255,.16);
}

.mobile-user-sheet-icon {
  width:26px;

  text-align:center;

  font-size:20px;

  color:var(--dx-primary-soft);

  flex-shrink:0;
}

.mobile-user-sheet-label {
  flex:1;
  font-weight:600;
}

.mobile-user-sheet-divider {
  height:1px;
  background:var(--dx-border);
  margin:8px 0;
}
}

/* ==========================================================
   SEARCH
========================================================== */

.logo img { display:block; }
.search{

  flex:1;

  position:relative;

  display:flex;

  align-items:center;

  gap:0;

  height:42px;

  padding:0 16px;

  background:linear-gradient(
    180deg,
    #24123E 0%,
    #1A0F2E 100%
  );

  border:1px solid var(--dx-border);

  border-radius:14px;

  box-shadow:
  inset 0 1px rgba(255,255,255,.05),
  0 0 12px rgba(111,44,255,.10);

  transition:var(--transition);

}
.search:focus-within{

  border-color:var(--dx-primary);

  box-shadow:
  0 0 0 3px rgba(111,44,255,.18),
  0 0 16px rgba(111,44,255,.18);

}
.search input{

  flex:1;

  height:100%;

  border:none;

  outline:none;

  background:transparent;

  padding:0 12px;

  font-size:15px;

  color:var(--dx-text);

}

.search input::placeholder{

  color:var(--dx-text-secondary);

}
.search-icon-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  padding:0;

  border:none;

  background:transparent;

  cursor:pointer;

  color:var(--dx-text-secondary);

  transition:var(--transition);

}

.search-icon-btn:hover{

  color:var(--dx-primary-soft);

}
.search-suggest{

  position:absolute;

  left:0;
  right:0;
  top:100%;

  margin-top:8px;

  padding:8px 0;

  max-height:280px;

  overflow:auto;

  font-size:14px;

  background:linear-gradient(
    180deg,
    #24123E,
    #1A0F2E
  );

  border:1px solid var(--dx-border);

  border-radius:16px;

  box-shadow:
  0 14px 30px rgba(0,0,0,.45),
  0 0 18px rgba(111,44,255,.18);

}

.search-suggest div{

  padding:8px 14px;

  cursor:pointer;

  color:var(--dx-text-secondary);

  transition:var(--transition);

}

.search-suggest div:hover{

  background:rgba(111,44,255,.12);

  color:var(--dx-text);

}

/* ==========================================================
   NAV ACTIONS
========================================================== */

.nav-actions{

  display:flex;

  align-items:center;

  gap:10px;

}

.icon-btn,
.login-btn{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  height:40px;

  padding:8px 14px;

  cursor:pointer;

  border-radius:14px;

  border:1px solid var(--dx-border);

  background:linear-gradient(
    180deg,
    #2B1749,
    #20123B
  );

  color:var(--dx-text);

  box-shadow:
  inset 0 1px rgba(255,255,255,.05),
  0 0 10px rgba(111,44,255,.10);

  transition:var(--transition);

}

.icon-btn:hover,
.login-btn:hover{

  border-color:rgba(155,92,255,.50);

  background:linear-gradient(
    180deg,
    #34205A,
    #271644
  );

  box-shadow:
  0 0 18px rgba(111,44,255,.22);

  transform:translateY(-1px);

}
/* ==========================================================
   INDICATOR
========================================================== */

.cart-indicator,
.compare-indicator{

  position:relative;

}
/* ==========================================================
   BADGE
========================================================== */

.badge{

  position:absolute;

  top:-6px;

  right:-6px;

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:18px;

  height:18px;

  padding:2px 6px;

  border-radius:999px;

  font-size:10px;

  font-weight:700;

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  box-shadow:
  0 0 10px rgba(111,44,255,.35),
  0 0 0 2px #1A0F2E;

  transition:var(--transition);

}

.icon-btn:hover .badge{

  transform:scale(1.08);

  box-shadow:
  0 0 16px rgba(111,44,255,.50),
  0 0 0 2px #1A0F2E;

}

.badge.is-empty{

  display:none;

}

/* ==========================================================
   USER MENU
========================================================== */

.user-menu{
  position:relative;
}

.user-dropdown{

  position:absolute;

  top:calc(100% + 10px);

  right:0;

  min-width:220px;

  padding:8px 0;

  z-index:9999;

  background:linear-gradient(
    180deg,
    #24123E 0%,
    #1A0F2E 55%,
    #11071F 100%
  );

  border:1px solid var(--dx-border);

  border-radius:16px;

  box-shadow:
  0 14px 34px rgba(0,0,0,.45),
  0 0 18px rgba(111,44,255,.16);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

}

/* Keep JS Compatibility */

.user-dropdown:not([hidden]){

  display:block !important;

  visibility:visible !important;

  opacity:1 !important;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:640px){

  .user-dropdown:not([hidden]){

    position:fixed !important;

    top:60px !important;

    right:16px !important;

    z-index:9999 !important;

  }

}

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

.dropdown-item{

  display:flex;

  align-items:center;

  gap:12px;

  width:100%;

  padding:12px 16px;

  border:none;

  background:transparent;

  cursor:pointer;

  text-align:left;

  text-decoration:none;

  font-size:14px;

  color:var(--dx-text-secondary);

  transition:var(--transition);

}

.dropdown-item:hover{

  background:rgba(111,44,255,.10);

  color:var(--dx-text);

}

.dropdown-icon{

  width:20px;

  text-align:center;

  font-size:16px;

  color:var(--dx-primary-soft);

  opacity:1;

}

.dropdown-separator{

  height:1px;

  margin:8px 0;

  background:var(--dx-border);

}

/* ==========================================================
   LOGIN BUTTON (LOGGED IN)
========================================================== */

.login-btn.logged-in{

  position:relative;

  overflow:hidden;

  display:inline-flex;

  align-items:center;

  gap:10px;

  max-width:220px;

  padding:5px 14px 5px 5px;

  color:var(--dx-text);

  background:linear-gradient(
    180deg,
    #322055 0%,
    #24123E 100%
  );

  border:1px solid var(--dx-border);

  border-radius:16px;

  box-shadow:
  inset 0 1px rgba(255,255,255,.05),
  0 0 14px rgba(111,44,255,.18);

  transition:var(--transition);

}

.login-btn.logged-in:hover{

  border-color:rgba(155,92,255,.45);

  background:linear-gradient(
    180deg,
    #3A2562,
    #2B184B
  );

  box-shadow:
  0 0 18px rgba(111,44,255,.28);

  transform:translateY(-1px);

}
/* ==========================================================
   LOGIN BUTTON GLOW
========================================================== */

.login-btn.logged-in::before{

  content:"";

  position:absolute;

  top:50%;

  left:0;

  width:42px;

  height:42px;

  transform:translateY(-50%);

  background:radial-gradient(
    circle,

    rgba(111,44,255,.28),

    transparent 72%

  );

  opacity:0;

  transition:var(--transition);

}

.login-btn.logged-in:hover::before{

  opacity:1;

}

/* ==========================================================
   USER AVATAR
========================================================== */

.login-btn.logged-in .user-avatar{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  width:34px;

  height:34px;

  border-radius:50%;

  background:linear-gradient(
    135deg,

    var(--dx-primary),

    var(--dx-primary-soft)

  );

  color:#FFFFFF;

  font-size:12px;

  font-weight:700;

  letter-spacing:.3px;

  box-shadow:
  0 0 12px rgba(111,44,255,.28),
  inset 0 1px rgba(255,255,255,.15);

  transition:var(--transition);

}

/* ==========================================================
   AVATAR RING
========================================================== */

.login-btn.logged-in .user-avatar::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:50%;

  padding:2px;

  background:linear-gradient(
    135deg,

    var(--dx-primary),

    var(--dx-primary-soft),

    var(--dx-primary)

  );

  -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:var(--transition);

}

.login-btn.logged-in:hover .user-avatar::before{

  opacity:1;

}

.login-btn.logged-in:hover .user-avatar{

  transform:scale(1.08);

  box-shadow:
  0 0 18px rgba(111,44,255,.40),
  inset 0 1px rgba(255,255,255,.20);

}

/* ==========================================================
   LOGIN TEXT
========================================================== */

.login-btn.logged-in .login-text{

  flex:1;

  min-width:0;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

  font-size:14px;

  font-weight:600;

  color:var(--dx-text);

  transition:var(--transition);

}

.login-btn.logged-in:hover .login-text{

  color:var(--dx-primary-soft);

}

/* ==========================================================
   BUTTON HOVER
========================================================== */

.login-btn.logged-in:hover{

  background:linear-gradient(
    180deg,

    #38205D,

    #2B184B

  );

  border-color:rgba(155,92,255,.45);

  box-shadow:
  0 0 18px rgba(111,44,255,.26),
  inset 0 1px rgba(255,255,255,.08);

  transform:translateY(-1px);

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:761px){

  .mega-cats-wrapper{

    display:contents;

  }

  .mega-cats-fade{

    display:none !important;

  }

}

/* ==========================================================
   MEGA CATEGORY
========================================================== */

.mega-cats{

  display:flex;

  gap:8px;

  position:relative;

  z-index:510;

  flex:1;

  overflow-x:auto;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;

}

.mega-cats::-webkit-scrollbar{

  display:none;

}

.mega-cats a{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  white-space:nowrap;

  text-decoration:none;

  font-size:14px;

  font-weight:500;

  color:var(--dx-text-secondary);

  border:1px solid transparent;

  border-radius:10px;

  transition:var(--transition);

}

.mega-cats a:hover{

  color:var(--dx-text);

  background:rgba(111,44,255,.12);

  border-color:var(--dx-border);

  box-shadow:

  0 0 12px rgba(111,44,255,.18);

}

.mega-cats a.active{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  border-color:rgba(155,92,255,.45);

  box-shadow:

  0 0 16px rgba(111,44,255,.28);

}

/* ==========================================================
   MORE BUTTON
========================================================== */

.mega-cats-more{

  position:relative;

  display:flex;

  align-items:center;

}

.mega-cats-more.active>.mega-more-btn{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  border-color:rgba(155,92,255,.45);

}

.mega-more-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  padding:8px 14px;

  font-size:16px;

  line-height:1;

  border-radius:10px;

  border:1px solid var(--dx-border);

  background:linear-gradient(
    180deg,
    #24123E,
    #1A0F2E
  );

  color:var(--dx-text-secondary);

  transition:var(--transition);

}

.mega-more-btn:hover{

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    #34205A,
    #2B184B
  );

  border-color:rgba(155,92,255,.45);

  box-shadow:

  0 0 16px rgba(111,44,255,.22);

}

/* ==========================================================
   DROPDOWN
========================================================== */

.mega-more-dropdown{

  position:absolute;

  top:100%;

  right:0;

  margin-top:10px;

  min-width:420px;

  max-width:520px;

  max-height:420px;

  padding:14px;

  z-index:3000;

  background:linear-gradient(
    180deg,
    #24123E,
    #1A0F2E,
    #11071F
  );

  border:1px solid var(--dx-border);

  border-radius:16px;

  box-shadow:

  0 14px 34px rgba(0,0,0,.45),

  0 0 20px rgba(111,44,255,.18);

}

/* ==========================================================
   GRID
========================================================== */

.mega-more-grid{

  display:grid;

  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));

  gap:10px;

  overflow-x:hidden;

  max-height:380px;

  overscroll-behavior:contain;

  scrollbar-width:thin;

  scrollbar-color:rgba(111,44,255,.45) transparent;

}

.mega-more-grid::-webkit-scrollbar{

  width:6px;

}

.mega-more-grid::-webkit-scrollbar-thumb{

  background:rgba(111,44,255,.45);

  border-radius:999px;

}

.mega-more-grid a{

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:40px;

  text-align:center;

  text-decoration:none;

  color:var(--dx-text-secondary);

  border-radius:10px;

  transition:var(--transition);

}

.mega-more-grid a:hover{

  background:rgba(111,44,255,.12);

  color:var(--dx-text);

}

.mega-more-grid a.active{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  font-weight:600;

  box-shadow:

  0 0 16px rgba(111,44,255,.22);

}
/* ==========================================================
   HERO SECTION
========================================================== */

.hero{

  position:relative;

  overflow:hidden;

  background:linear-gradient(
    180deg,
    #050505 0%,
    #0B0715 35%,
    #11071F 70%,
    #1A0F2E 100%
  );

  border-bottom:1px solid var(--dx-border);

}

/* Soft Glow */

.hero::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
  radial-gradient(circle at 20% 20%,
    rgba(111,44,255,.18),
    transparent 45%),

  radial-gradient(circle at 80% 30%,
    rgba(155,92,255,.14),
    transparent 40%);

}

.hero-inner{

  position:relative;

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

  gap:48px;

  align-items:center;

}

.hero-text h1{

  margin:0;

  font-size:48px;

  line-height:1.08;

  font-weight:700;

  color:var(--dx-text);

  font-family:var(--font-primary);

  text-shadow:

  0 0 14px rgba(111,44,255,.22);

}

.hero-text .text-brand{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

  background-clip:text;

}

.lead{

  margin-top:18px;

  font-size:18px;

  line-height:1.7;

  color:var(--dx-text-secondary);

}

.hero-cta{

  display:flex;

  gap:16px;

  margin-top:30px;

  flex-wrap:wrap;

}

.hero-bullets{

  display:flex;

  flex-wrap:wrap;

  gap:24px;

  margin-top:28px;

  font-size:14px;

  color:var(--dx-text-secondary);

}

.hero-box{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:12px;

  border-radius:18px;

  background:linear-gradient(
    180deg,
    #24123E 0%,
    #1A0F2E 100%
  );

  border:1px solid var(--dx-border);

  box-shadow:

  0 0 22px rgba(111,44,255,.16),

  inset 0 1px rgba(255,255,255,.05);

  transition:var(--transition);

}

.hero-box:hover{

  border-color:rgba(155,92,255,.45);

  box-shadow:

  0 0 30px rgba(111,44,255,.28),

  0 0 48px rgba(155,92,255,.12);

  transform:translateY(-2px);

}

.hero-box img{

  border-radius:14px;

  transition:var(--transition);

}

.hero-box:hover img{

  transform:scale(1.02);

}

@media (max-width:680px){

  .hero-inner{

    gap:28px;

  }

  .hero-text h1{

    font-size:36px;

  }

  .lead{

    font-size:16px;

  }

}
/* ==========================================================
   USP SECTION
========================================================== */

.usp-section{

  position:relative;

  padding:12px 0;

  background:linear-gradient(
    180deg,
    #0B0715 0%,
    #11071F 45%,
    #1A0F2E 100%
  );

  border-top:1px solid var(--dx-border);

  border-bottom:1px solid var(--dx-border);

}

.usp-list{

  list-style:none;

  margin:0;

  padding:0;

  display:grid;

  gap:24px;

}

.usp-list.variant-soft{

  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

}

/* ==========================================================
   USP CARD
========================================================== */

.usp-item{

  position:relative;

  isolation:isolate;

  overflow:hidden;

  display:flex;

  align-items:flex-start;

  gap:16px;

  padding:18px 18px 18px 16px;

  background:linear-gradient(
    180deg,
    #24123E 0%,
    #1A0F2E 100%
  );

  border:1px solid var(--dx-border);

  border-radius:18px;

  box-shadow:
  inset 0 1px rgba(255,255,255,.05),
  0 0 16px rgba(111,44,255,.12);

  transition:var(--transition);

}

.usp-item::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  opacity:.75;

  background:
  radial-gradient(
    circle at 18% 22%,
    rgba(111,44,255,.18),
    transparent 60%
  );

  transition:.35s;

}

.usp-item:hover{

  transform:translateY(-4px) scale(1.01);

  border-color:rgba(155,92,255,.45);

  box-shadow:
  0 0 24px rgba(111,44,255,.22),
  0 0 40px rgba(155,92,255,.12);

}

.usp-item:hover::before{

  background:
  radial-gradient(
    circle at 72% 38%,
    rgba(155,92,255,.22),
    transparent 68%
  );

}

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

.usp-icon{

  flex:0 0 56px;

  width:56px;

  height:56px;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  border-radius:16px;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  box-shadow:
  inset 0 1px rgba(255,255,255,.18),
  0 0 14px rgba(111,44,255,.22);

  transition:var(--transition);

}

.usp-item:hover .usp-icon{

  transform:scale(1.08);

  box-shadow:
  0 0 22px rgba(111,44,255,.35),
  inset 0 1px rgba(255,255,255,.22);

}

.usp-icon svg{

  width:28px;

  height:28px;

  display:block;

  color:#FFFFFF;

  filter:drop-shadow(0 0 6px rgba(255,255,255,.18));

}

/* ==========================================================
   TEXT
========================================================== */

.usp-text h3{

  margin:2px 0 6px;

  font-size:15px;

  font-weight:700;

  color:var(--dx-text);

  letter-spacing:.2px;

}

.usp-text p{

  margin:0;

  font-size:13px;

  line-height:1.55;

  color:var(--dx-text-secondary);

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:680px){

  .usp-section{

    padding:6px 0;

    margin-bottom:.75rem;

  }

  .usp-list{

    gap:12px;

  }

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

  }

}
/* ==========================================================
   FLASH SECTION
========================================================== */

.flash{

  padding:50px 0 32px;

  position:relative;

  background:linear-gradient(
    180deg,
    #050505 0%,
    #0B0715 45%,
    #11071F 100%
  );

  border-top:1px solid var(--dx-border);

  border-bottom:1px solid var(--dx-border);

}

.flash-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:22px;

}

.flash-head h2{

  margin:0;

  font-size:26px;

  font-weight:700;

  font-family:var(--font-primary);

  color:var(--dx-text);

  text-shadow:
  0 0 10px rgba(111,44,255,.18);

}

/* ==========================================================
   COUNTDOWN
========================================================== */

.flash .countdown{

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:92px;

  padding:8px 16px;

  font-family:monospace;

  font-size:16px;

  font-weight:700;

  letter-spacing:1px;

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  border:1px solid rgba(155,92,255,.40);

  border-radius:12px;

  box-shadow:
  0 0 16px rgba(111,44,255,.25);

}

/* ==========================================================
   PRODUCT SCROLL
========================================================== */

.flash-scroll{

  display:flex;

  gap:18px;

  overflow-x:auto;

  overflow-y:hidden;

  padding:4px 2px 8px;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;

}

.flash-scroll::-webkit-scrollbar{

  display:none;

}

/* ==========================================================
   PRODUCTS
========================================================== */

.products{

  padding:60px 0;

  background:linear-gradient(
    180deg,
    #050505 0%,
    #0B0715 40%,
    #11071F 100%
  );

  border-top:1px solid var(--dx-border);

}

.products-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:16px;

  margin-bottom:26px;

}

.products-head h2{

  margin:0;

  font-size:26px;

  font-weight:700;

  font-family:var(--font-primary);

  color:var(--dx-text);

  text-shadow:
  0 0 10px rgba(111,44,255,.18);

}

/* ==========================================================
   FILTER
========================================================== */

.product-filters input{

  width:220px;

  padding:9px 14px;

  font-size:14px;

  color:var(--dx-text);

  background:linear-gradient(
    180deg,
    #24123E,
    #1A0F2E
  );

  border:1px solid var(--dx-border);

  border-radius:12px;

  outline:none;

  transition:var(--transition);

}

.product-filters input::placeholder{

  color:var(--dx-text-secondary);

}

.product-filters input:focus{

  border-color:var(--dx-primary);

  box-shadow:
  0 0 0 3px rgba(111,44,255,.16);

}

/* ==========================================================
   GRID
========================================================== */

.product-grid{

  display:grid;

  gap:24px;

  grid-template-columns:
  repeat(auto-fill,minmax(180px,1fr));

}

/* ==========================================================
   PRODUCT CARD
========================================================== */

.prod-card{

  position:relative;

  display:flex;

  flex-direction:column;

  padding:14px;

  background:linear-gradient(
    180deg,
    #24123E,
    #1A0F2E
  );

  border:1px solid var(--dx-border);

  border-radius:16px;

  box-shadow:
  inset 0 1px rgba(255,255,255,.05),
  0 0 14px rgba(111,44,255,.12);

  transition:var(--transition);

}

.prod-card.small{

  min-width:160px;

}

.prod-card:hover{

  transform:translateY(-3px);

  border-color:rgba(155,92,255,.45);

  box-shadow:
  0 0 24px rgba(111,44,255,.24),
  0 0 42px rgba(155,92,255,.12);

}

/* ==========================================================
   IMAGE
========================================================== */

.prod-card .img-box{

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  aspect-ratio:1/1;

  border-radius:14px;

  background:linear-gradient(
    180deg,
    #2B184B,
    #20123B
  );

  border:1px solid rgba(120,70,255,.18);

}

.prod-card .img-box img{

  width:100%;

  height:100%;

  object-fit:contain;

  transition:var(--transition);

}

.prod-card:hover .img-box img{

  transform:scale(1.05);

}

/* ==========================================================
   PRODUCT NAME
========================================================== */

.prod-card .name{

  margin:12px 0 8px;

  min-height:38px;

  font-size:14px;

  font-weight:600;

  line-height:1.4;

  color:var(--dx-text);

}

/* ==========================================================
   PRICE
========================================================== */

.price{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:6px;

}

.price strong{

  font-size:15px;

  font-weight:700;

  color:var(--dx-primary-soft);

  text-shadow:
  0 0 8px rgba(111,44,255,.20);

}

.price .old{

  font-size:11px;

  color:var(--dx-text-secondary);

  text-decoration:line-through;

  opacity:.7;

}

/* ==========================================================
   DISCOUNT TAG
========================================================== */

.tag.discount{

  position:absolute;

  top:10px;

  left:10px;

  padding:5px 8px;

  font-size:11px;

  font-weight:700;

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  border-radius:8px;

  box-shadow:
  0 0 12px rgba(111,44,255,.28);

}
/* ==========================================================
   BUTTON SYSTEM
========================================================== */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  text-align:center;

  text-decoration:none;

  cursor:pointer;

  border:1px solid transparent;

  border-radius:14px;

  padding:12px 22px;

  font-size:14px;

  font-weight:600;

  color:var(--dx-text);

  background:linear-gradient(
    180deg,
    #24123E 0%,
    #1A0F2E 100%
  );

  box-shadow:
  inset 0 1px rgba(255,255,255,.05),
  0 0 12px rgba(111,44,255,.12);

  transition:var(--transition);

}

.btn:hover{

  transform:translateY(-2px) scale(1.02);

  border-color:rgba(155,92,255,.45);

  background:linear-gradient(
    180deg,
    #312053 0%,
    #24123E 100%
  );

  box-shadow:
  0 0 20px rgba(111,44,255,.28),
  0 0 36px rgba(155,92,255,.14);

}

/* ==========================================================
   PRIMARY
========================================================== */

.btn-primary{

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  border:1px solid rgba(155,92,255,.45);

  box-shadow:
  0 0 16px rgba(111,44,255,.25);

}

.btn-primary:hover{

  background:linear-gradient(
    135deg,
    var(--dx-primary-hover),
    var(--dx-primary-soft)
  );

  box-shadow:
  0 0 26px rgba(111,44,255,.40),
  0 0 42px rgba(155,92,255,.18);

}

/* ==========================================================
   OUTLINE
========================================================== */

.btn-outline{

  color:var(--dx-text);

  background:transparent;

  border:1px solid var(--dx-border);

}

.btn-outline:hover{

  background:rgba(111,44,255,.12);

  border-color:rgba(155,92,255,.45);

  color:#FFFFFF;

}

/* ==========================================================
   SIZE
========================================================== */

.btn-sm{

  padding:8px 14px;

  font-size:13px;

}

.btn-mini{

  padding:6px 10px;

  font-size:12px;

}

/* ==========================================================
   ADD CART
========================================================== */

.add-cart{

  margin-top:auto;

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  border:1px solid rgba(155,92,255,.40);

  box-shadow:
  0 0 16px rgba(111,44,255,.22);

}

.add-cart:hover{

  background:linear-gradient(
    135deg,
    var(--dx-primary-hover),
    var(--dx-primary-soft)
  );

  box-shadow:
  0 0 24px rgba(111,44,255,.38),
  0 0 40px rgba(155,92,255,.18);

}

/* ==========================================================
   FOOTER - DOGELEXUS
========================================================== */

/* GRID */

.site-footer.footer-compact .ft-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

  gap:32px 42px;

  align-items:start;

}

/* TOP */

.site-footer.footer-compact .ft-top{

  padding:42px 0 28px;

  background:linear-gradient(
    180deg,
    #11071F,
    #0B0715,
    #050505
  );

}

/* TITLE */

.site-footer.footer-compact .ft-title{

  margin:0 0 14px;

  font-size:14px;

  font-weight:700;

  letter-spacing:.8px;

  text-transform:uppercase;

  color:var(--dx-primary-soft);

  text-shadow:

  0 0 10px rgba(111,44,255,.25);

}

/* TEXT */

.site-footer.footer-compact .ft-desc,

.site-footer.footer-compact .ft-text{

  margin:0 0 16px;

  max-width:330px;

  font-size:13.5px;

  line-height:1.6;

  color:var(--dx-text-secondary);

}

.site-footer.footer-compact .ft-desc.sm-gap{

  margin-top:18px;

}

/* SVG */

svg{

  max-width:100%;

}

.site-footer.footer-compact svg{

  width:20px !important;

  height:20px !important;

  flex:0 0 20px;

}

/* LINKS */

.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 li{

  margin:0;

}

.site-footer.footer-compact .ft-links a{

  display:flex;

  align-items:center;

  gap:10px;

  padding:8px 10px;

  text-decoration:none;

  color:var(--dx-text-secondary);

  border-radius:10px;

  transition:var(--transition);

}

.site-footer.footer-compact .ft-links a:hover{

  color:#FFFFFF;

  background:rgba(111,44,255,.12);

  box-shadow:

  0 0 12px rgba(111,44,255,.15);

}

/* ICON */

.site-footer.footer-compact .ico-s{

  width:28px;

  height:28px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 28px;

  border-radius:8px;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  box-shadow:

  0 0 12px rgba(111,44,255,.18);

  transition:var(--transition);

}

.site-footer.footer-compact .ft-links a:hover .ico-s{

  transform:scale(1.08);

  box-shadow:

  0 0 18px rgba(111,44,255,.30);

}

/* WHATSAPP */

.site-footer.footer-compact .ft-wa-btn{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:10px 20px;

  border-radius:24px;

  text-decoration:none;

  font-size:13.5px;

  font-weight:600;

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  box-shadow:

  0 0 18px rgba(111,44,255,.22);

  transition:var(--transition);

}

.site-footer.footer-compact .ft-wa-btn:hover{

  transform:translateY(-2px);

  box-shadow:

  0 0 28px rgba(111,44,255,.35);

}

/* SOCIAL */

.site-footer.footer-compact .ft-social{

  display:flex;

  gap:12px;

  margin-top:6px;

}

.site-footer.footer-compact .ft-social a{

  width:36px;

  height:36px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:10px;

  color:var(--dx-text-secondary);

  background:rgba(111,44,255,.10);

  border:1px solid rgba(120,70,255,.20);

  transition:var(--transition);

}

.site-footer.footer-compact .ft-social a:hover{

  color:#FFFFFF;

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  box-shadow:

  0 0 16px rgba(111,44,255,.28);

}

/* ADDRESS */

.site-footer.footer-compact .ft-address{

  margin-top:12px;

  max-width:330px;

  font-size:12.5px;

  line-height:1.6;

  color:var(--dx-text-secondary);

}

.site-footer.footer-compact .ft-address .company{

  margin:0 0 4px;

  font-size:13px;

  font-weight:700;

  color:#FFFFFF;

}

/* PAYMENTS */

.site-footer.footer-compact .ft-payments{

  margin-top:16px;

  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:48px;

  height:34px;

  padding:4px;

  object-fit:contain;

  border-radius:8px;

  background:#FFFFFF;

  transition:var(--transition);

}

.site-footer.footer-compact .ft-payments img:hover{

  transform:translateY(-2px);

  box-shadow:

  0 0 14px rgba(111,44,255,.18);

}

/* BOTTOM */

.site-footer.footer-compact .ft-bottom{

  margin-top:4px;

  padding:14px 0 18px;

  background:#050505;

  border-top:1px solid var(--dx-border);

}

.site-footer.footer-compact .ft-copy{

  margin:0;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:12px;

  font-size:11.5px;

  line-height:1.4;

  color:var(--dx-text-secondary);

}

.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(155,92,255,.25);

  transform:translateY(-50%);

}

/* COPYRIGHT */

.copy{

  margin-top:40px;

  padding:18px 0;

  text-align:center;

  font-size:12px;

  color:var(--dx-text-secondary);

  border-top:1px solid var(--dx-border);

  background:#050505;

}

/* MOBILE */

@media (max-width:760px){

  .hero-text h1{

    font-size:38px;

  }

  .hero{

    padding:0 0 30px;

  }

  .topbar-inner{

    flex-direction:column;

    gap:4px;

    padding:6px 0;

  }

  .nav-inner{

    flex-wrap:wrap;

  }

  .mega-cats{

    gap:10px;

  }

  .product-grid{

    gap:16px;

  }

  .prod-card{

    padding:10px;

  }

}

@media (max-width:580px){

  .site-footer.footer-compact .ft-top{

    padding:34px 0 20px;

  }

  .site-footer.footer-compact .ft-grid{

    gap:24px 20px;

  }

  .site-footer.footer-compact .ft-copy span{

    padding:0;

  }

  .site-footer.footer-compact .ft-copy span+span::before{

    display:none;

  }

}
/* ==========================================================
   DOGELEXUS FOOTER THEME
========================================================== */

.site-footer.footer-compact{

  color:var(--dx-text);

  background:
  radial-gradient(circle at top right,
    rgba(111,44,255,.18),
    transparent 45%),

  radial-gradient(circle at bottom left,
    rgba(155,92,255,.12),
    transparent 45%),

  linear-gradient(
    180deg,
    #1A0F2E 0%,
    #11071F 45%,
    #0B0715 70%,
    #050505 100%
  );

}

/* ==========================================================
   TOP
========================================================== */

.site-footer.footer-compact .ft-top{

  position:relative;

  overflow:hidden;

}

.site-footer.footer-compact .ft-top::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

  radial-gradient(circle at 20% 20%,
    rgba(111,44,255,.10),
    transparent 45%);

}

/* ==========================================================
   TITLES
========================================================== */

.site-footer.footer-compact .ft-title{

  color:var(--dx-primary-soft);

  text-shadow:

  0 0 10px rgba(111,44,255,.20);

}

/* ==========================================================
   TEXT
========================================================== */

.site-footer.footer-compact .ft-desc,

.site-footer.footer-compact .ft-text,

.site-footer.footer-compact .ft-address,

.site-footer.footer-compact .ft-copy{

  color:var(--dx-text-secondary);

}

/* ==========================================================
   LINKS
========================================================== */

.site-footer.footer-compact .ft-links a{

  color:var(--dx-text-secondary);

}

.site-footer.footer-compact .ft-links a:hover{

  color:#FFFFFF;

}

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

.site-footer.footer-compact .ico-s{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  box-shadow:

  0 0 12px rgba(111,44,255,.18);

}

.site-footer.footer-compact .ft-links a:hover .ico-s{

  transform:scale(1.08);

  box-shadow:

  0 0 20px rgba(111,44,255,.35);

}

/* ==========================================================
   SOCIAL
========================================================== */

.site-footer.footer-compact .ft-social a{

  background:rgba(111,44,255,.10);

  border:1px solid var(--dx-border);

  color:var(--dx-text-secondary);

}

.site-footer.footer-compact .ft-social a:hover{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  box-shadow:

  0 0 18px rgba(111,44,255,.28);

}

/* ==========================================================
   WA BUTTON
========================================================== */

.site-footer.footer-compact .ft-wa-btn{

  background:linear-gradient(
    135deg,
    var(--dx-primary),
    var(--dx-primary-soft)
  );

  color:#FFFFFF;

  border:none;

  box-shadow:

  0 0 20px rgba(111,44,255,.22);

}

.site-footer.footer-compact .ft-wa-btn:hover{

  transform:translateY(-2px);

  box-shadow:

  0 0 30px rgba(111,44,255,.35);

}

/* ==========================================================
   PAYMENTS
========================================================== */

.site-footer.footer-compact .ft-payments img{

  border:1px solid rgba(120,70,255,.15);

}

.site-footer.footer-compact .ft-payments img:hover{

  box-shadow:

  0 0 14px rgba(111,44,255,.22);

}

/* ==========================================================
   BOTTOM
========================================================== */

.site-footer.footer-compact .ft-bottom{

  background:#050505;

  border-top:1px solid var(--dx-border);

}

/* ==========================================================
   DIVIDER
========================================================== */

.footer-divider-top{

  height:1px;

  background:linear-gradient(

    90deg,

    transparent,

    rgba(111,44,255,.35),

    transparent

  );

}

/* ==========================================================
   MOBILE COLLAPSE
========================================================== */

@media (max-width:768px){

  .ft-top.ft-collapsible .ft-collapsible-content::after{

    background:linear-gradient(

      to bottom,

      transparent,

      rgba(11,7,21,.65),

      #050505

    );

  }

  .ft-expand-btn{

    color:#FFFFFF;

    background:rgba(111,44,255,.12);

    border:1px solid rgba(120,70,255,.25);

  }

  .ft-expand-btn:hover{

    background:rgba(111,44,255,.20);

    border-color:rgba(155,92,255,.40);

  }

}

@media (min-width:769px){

  .ft-expand-btn{

    display:none !important;

  }

}