:root {
                 --color-primary: #111827;
                 --color-secondary: #1e293b;
                 --color-text-primary: #eee;
                 --color-text-muted: #aaa;
                 --color-accent-orange: #f97316;
                 --color-accent-teal: #4ecdc4;
                 --color-border: #444;
                 --color-search-bg: #2c303a;
                 --color-search-text: #bbb;
                 --color-subtitle: #999;
                 --border-radius-lg: 8px;
                 --transition: all 0.3s ease;
                 --border-radius: 8px;
                 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                 --glow-teal: 0 0 20px rgba(6, 182, 212, 0.3);
                 --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
                 --glow-orange: 0 0 20px rgba(249, 115, 22, 0.3);
                 --border-color: 1px solid #394d6c;
             }

             * {
                 margin: 0;
                 padding: 0;
                 box-sizing: border-box;
             }

             body {
                 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
                 background-color: var(--color-primary);
                 color: var(--color-text-primary);
                 line-height: 1.6;
                 min-height: 100vh;
             }

             .setting--container {
                 max-width: 1200px;
                 margin: 0 auto;
                 padding: 2rem;
             }

             .setting--header {
                 margin-bottom: 2rem;
             }

             .setting--title {
                 font-size: 2.5rem;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 margin-bottom: 0.5rem;
             }

             .setting--subtitle {
                 font-size: 1.125rem;
                 color: var(--color-text-muted);
             }

             .setting--tabs {
                 display: flex;
                 gap: 0;
                 margin-bottom: 2rem;
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius-lg);
                 padding: 0.25rem;
             }

             .setting--tab {
                 flex: 1;
                 padding: 0.875rem 1.5rem;
                 background: transparent;
                 border: none;
                 color: var(--color-text-muted);
                 font-size: 1rem;
                 font-weight: 500;
                 cursor: pointer;
                 transition: var(--transition);
                 border-radius: var(--border-radius);
                 text-align: center;
             }

             .setting--tab:hover {
                 color: var(--color-text-primary);
                 background-color: rgba(255, 255, 255, 0.05);
             }

             .setting--tab.active {
                 background-color: var(--color-primary);
                 color: var(--color-text-primary);
                 box-shadow: var(--shadow-sm);
             }

             .setting--content {
                 display: none;
             }

             .setting--content.active {
                 display: block;
             }

             .setting--section {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius-lg);
                 padding: 2rem;
                 margin-bottom: 2rem;
             }

             .setting--section-title {
                 font-size: 1.5rem;
                 font-weight: 600;
                 color: var(--color-text-primary);
                 margin-bottom: 0.5rem;
             }

             .setting--section-description {
                 color: var(--color-text-muted);
                 margin-bottom: 2rem;
             }

             .setting--form {
                 display: flex;
                 flex-direction: column;
                 gap: 1.5rem;
             }

             .setting--form-row {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 1.5rem;
             }

             .setting--form-group {
                 display: flex;
                 flex-direction: column;
                 gap: 0.5rem;
             }

             .setting--form-group.full-width {
                 grid-column: 1 / -1;
             }

             .setting--label {
                 font-size: 0.875rem;
                 font-weight: 500;
                 color: var(--color-text-primary);
             }

             .setting--input,
             .setting--textarea,
             .setting--select {
                 padding: 0.75rem 1rem;
                 background-color: var(--color-primary);
                 border: var(--border-color);
                 border-radius: var(--border-radius);
                 color: var(--color-text-primary);
                 font-size: 1rem;
                 transition: var(--transition);
             }

             .setting--input:focus,
             .setting--textarea:focus,
             .setting--select:focus {
                 outline: none;
                 border-color: var(--color-accent-teal);
                 box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
             }

             .setting--textarea {
                 min-height: 100px;
                 resize: vertical;
             }

             .setting--select {
                 cursor: pointer;
                 appearance: none;
                 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
                 background-position: right 0.5rem center;
                 background-repeat: no-repeat;
                 background-size: 1.5em 1.5em;
                 padding-right: 2.5rem;
             }

             .setting--checkbox-group {
                 display: flex;
                 flex-direction: column;
                 gap: 1rem;
             }

             .setting--checkbox-item {
                 display: flex;
                 align-items: center;
                 gap: 0.75rem;
             }

             .setting--checkbox {
                 width: 1.25rem;
                 height: 1.25rem;
                 accent-color: var(--color-accent-teal);
             }

             .setting--checkbox-label {
                 font-size: 1rem;
                 color: var(--color-text-primary);
                 cursor: pointer;
             }

             .setting--interests {
                 display: flex;
                 align-items: center;
                 gap: 0.75rem;
                 flex-wrap: wrap;
             }

             .setting--interest-tag {
                 padding: 0.375rem 0.75rem;
                 background-color: var(--color-primary);
                 border: var(--border-color);
                 border-radius: 1.5rem;
                 font-size: 0.875rem;
                 color: var(--color-text-primary);
             }

             .setting--add-button {
                 display: flex;
                 align-items: center;
                 gap: 0.5rem;
                 padding: 0.375rem 0.75rem;
                 background: transparent;
                 border: 1px dashed var(--color-border);
                 border-radius: 1.5rem;
                 color: var(--color-text-muted);
                 font-size: 0.875rem;
                 cursor: pointer;
                 transition: var(--transition);
             }

             .setting--add-button:hover {
                 border-color: var(--color-accent-teal);
                 color: var(--color-accent-teal);
             }

             .setting--button {
                 padding: 0.75rem 1.5rem;
                 background: linear-gradient(135deg, #8b5cf6, #06b6d4);
                 border: none;
                 border-radius: var(--border-radius);
                 color: white;
                 font-size: 1rem;
                 font-weight: 500;
                 cursor: pointer;
                 transition: var(--transition);
                 align-self: flex-start;
             }

             .setting--button:hover {
                 transform: translateY(-1px);
                 box-shadow: var(--glow-purple);
             }

             .setting--button.secondary {
                 background: var(--color-primary);
                 border: var(--border-color);
                 color: var(--color-text-primary);
             }

             .setting--button.secondary:hover {
                 background-color: var(--color-secondary);
                 box-shadow: var(--shadow-md);
             }

             .setting--bank-info {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 padding: 1rem;
                 background-color: var(--color-primary);
                 border: var(--border-color);
                 border-radius: var(--border-radius);
                 margin-bottom: 1rem;
             }

             .setting--bank-number {
                 font-family: 'Courier New', monospace;
                 font-size: 1.125rem;
                 color: var(--color-text-primary);
             }

             .setting--bank-date {
                 font-size: 0.875rem;
                 color: var(--color-text-muted);
                 margin-top: 0.5rem;
             }

             .setting--button-group {
                 display: flex;
                 gap: 1rem;
                 margin-top: 1rem;
             }

             .setting--url-input {
                 display: flex;
                 align-items: center;
                 background-color: var(--color-primary);
                 border: var(--border-color);
                 border-radius: var(--border-radius);
                 overflow: hidden;
             }

             .setting--url-prefix {
                 padding: 0.75rem 1rem;
                 background-color: var(--color-secondary);
                 color: var(--color-text-muted);
                 font-size: 1rem;
                 border-right: var(--border-color);
             }

             /* .setting--url-input input {
                 flex: 1;
                 padding: 0.75rem 1rem;
                 background: transparent;
                 border: none;
                 color: var(--color-text-primary);
                 font-size: 1rem;
             } */

             .setting--url-input input:focus {
                 outline: none;
             }

             .setting--categories {
                 display: flex;
                 align-items: center;
                 gap: 0.75rem;
                 flex-wrap: wrap;
             }

             .setting--category-tag {
                 padding: 0.375rem 0.75rem;
                 background-color: var(--color-primary);
                 border: var(--border-color);
                 border-radius: 1.5rem;
                 font-size: 0.875rem;
                 color: var(--color-text-primary);
             }

             @media (max-width: 768px) {
                 .setting--container {
                     padding: 1rem;
                 }

                 .setting--title {
                     font-size: 2rem;
                 }

                 .setting--tabs {
                     flex-direction: column;
                     gap: 0.25rem;
                 }

                 .setting--tab {
                     text-align: left;
                 }

                 .setting--form-row {
                     grid-template-columns: 1fr;
                     gap: 1rem;
                 }

                 .setting--section {
                     padding: 1.5rem;
                 }

                 .setting--button-group {
                     flex-direction: column;
                 }

                 .setting--interests,
                 .setting--categories {
                     flex-direction: column;
                     align-items: flex-start;
                 }
             }

             @media (max-width: 480px) {
                 .setting--container {
                     padding: 0.5rem;
                 }

                 .setting--section {
                     padding: 1rem;
                 }

                 .setting--title {
                     font-size: 1.75rem;
                 }
             }

             :root {
                 --color-primary: #111827;
                 --color-secondary: #1e293b;
                 --color-text-primary: #eee;
                 --color-text-muted: #aaa;
                 --color-accent-orange: #f97316;
                 --color-accent-teal: #4ecdc4;
                 --color-border: #444;
                 --color-search-bg: #2c303a;
                 --color-search-text: #bbb;
                 --color-subtitle: #999;
                 --border-radius-lg: 8px;
                 --transition: all 0.3s ease;
                 --border-radius: 8px;
                 --border-radius-lg: 8px;
                 --transition: all 0.3s ease;
                 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                     0 2px 4px -1px rgba(0, 0, 0, 0.06);
                 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                     0 4px 6px -2px rgba(0, 0, 0, 0.05);
                 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                     0 10px 10px -5px rgba(0, 0, 0, 0.04);
                 --glow-teal: 0 0 20px rgba(6, 182, 212, 0.3);
                 --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
                 --glow-orange: 0 0 20px rgba(249, 115, 22, 0.3);
                 --border-color: 1px solid #394d6c;
             }

             * {
                 box-sizing: border-box;
                 margin: 0;
                 padding: 0;
             }

             body {
                 font-family: sans-serif;
                 background-color: var(--color-primary);
                 color: white;
             }

             /* Header Styles */
             .header {
                 display: flex;
                 flex-direction: column;
                 padding: 10px;
                 background-color: var(--color-secondary);
                 position: relative;
                 z-index: 10;
                 border-radius: 10px;
             }

             /* Mobile Top Row */
             .mobile-top-row {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 width: 100%;
                 order: 0;
             }

             .menu-toggle {
                 font-size: 24px;
                 background: none;
                 border: none;
                 color: var(--color-accent-orange);
                 cursor: pointer;
             }

             .logo-text {
                 display: flex;
                 justify-content: center;
             }

             .logo-text img {
                 height: 80px;
                 width: auto;
                 transition: all 0.3s ease;
             }

             .logo-text img:hover {
                 filter: drop-shadow(0 0 8px #06b6d4);
                 transform: scale(1.05);
                 cursor: pointer;
             }

             .mobile-profile-icons {
                 display: flex;
                 align-items: center;
             }

             .profile-icon {
                 width: 40px;
                 height: 40px;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
             }

             .profile-icon:hover {
                 border-color: var(--color-accent-teal);
             }

             .profile-icon {
                 background: none;
                 border: none;
                 color: var(--color-text-primary);
                 font-size: 20px;
                 cursor: pointer;
                 padding: 8px;
                 transition: var(--transition);
                 border-radius: 50%;
             }

             .cart-icon:hover,
             .profile-icon:hover {
                 color: var(--color-accent-orange);
                 background-color: rgba(255, 107, 53, 0.1);
             }

             .icon-btn {
                 background: none;
                 border: none;
                 color: var(--color-text-primary);
                 cursor: pointer;
                 font-size: 18px;
                 padding: 8px;
                 transition: var(--transition);
             }

             /* Mobile Search */
             .mobile-search {
                 width: 100%;
                 margin: 10px 0;
                 order: 1;
                 position: relative;
             }

             .search-input {
                 width: 100%;
                 background-color: var(--color-secondary);
                 /* border: 1px solid var(--color-accent-teal); */
                 border-radius: 9px;
                 padding: 12px 20px 12px 40px;
                 color: var(--color-text-primary);
                 font-size: 16px;
                 height: 47px;
             }

             .search-input::placeholder {
                 color: var(--color-text-muted);
             }

             .search-icon {
                 position: absolute;
                 left: 15px;
                 top: 50%;
                 transform: translateY(-50%);
                 color: var(--color-text-muted);
                 font-size: 16px;
             }

             /* Mobile Buttons - Equal Width */
             .mobile-buttons {
                 display: flex;
                 justify-content: space-between;
                 gap: 8px;
                 width: 100%;
                 order: 2;
             }

             .mobile-btn {
                 flex: 1;
                 min-width: 0;
                 height: 40px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 border-radius: var(--border-radius-lg);
                 font-weight: 600;
                 font-size: 12px;
                 cursor: pointer;
                 transition: var(--transition);
                 padding: 0 5px;
                 border: none;
                 text-decoration: none;
             }

             .mobile-btn.btn-cyphermind {
                 background: linear-gradient(135deg, #3559ec 0%, #7375bd 100%);
                 color: white;
             }

             .mobile-btn.btn-sell {
                 background: linear-gradient(135deg, var(--color-accent-orange), #ff8c42);
                 color: white;
             }

             .mobile-btn.cart-icon {
                 background: var(--color-secondary);
                 color: white;
                 box-shadow: 0px 0px 9px #667790;
                 font-size: 16px;
                 padding: 20px 0px;
             }

             /* Hide desktop elements on mobile */
             .desktop-layout {
                 display: none;
             }

             /* Profile Dropdown */
             .profile-dropdown {
                 display: none;
                 position: absolute;
                 top: 70px;
                 right: 10px;
                 width: 250px;
                 background-color: var(--color-secondary);
                 color: white;
                 border-radius: 8px;
                 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
                 padding: 10px;
                 z-index: 1000;
                 font-family: sans-serif;
             }

             .profile-dropdown hr {
                 margin: 8px 0;
                 border: none;
                 border-top: 1px solid #eee;
             }

             .user-info {
                 display: flex;
                 flex-direction: column;
                 gap: 2px;
                 font-size: 0.9rem;
             }

             .user-info small {
                 font-size: 0.8rem;
                 color: gray;
             }

             .progress-section {
                 display: flex;
                 flex-direction: column;
                 gap: 4px;
             }

             .progress-header {
                 display: flex;
                 justify-content: space-between;
                 font-weight: bold;
                 font-size: 0.8rem;
             }

             .tier {
                 font-size: 12px;
                 color: #3b82f6;
             }

             .progress-bar {
                 height: 6px;
                 background-color: #e5e7eb;
                 border-radius: 4px;
                 overflow: hidden;
             }

             .progress-fill {
                 width: 50%;
                 height: 100%;
                 background-color: #3b82f6;
             }

             .progress-info {
                 display: flex;
                 justify-content: space-between;
                 font-size: 12px;
                 color: gray;
             }

             .dropdown-options {
                 list-style: none;
                 padding: 0;
                 margin: 0;
             }

             .dropdown-options li {
                 display: flex;
                 align-items: center;
                 gap: 10px;
                 padding: 8px 0;
                 cursor: pointer;
                 transition: background 0.2s;
                 font-size: 1rem;
             }

             .help-center,
             .logout {
                 display: flex;
                 align-items: center;
                 gap: 10px;
                 cursor: pointer;
                 padding: 8px 0;
             }

             .help-center {
                 color: white;
             }

             .logout {
                 color: red;
             }

             /* Sidebar Styles */
             .sidebar {
                 position: fixed;
                 top: 0;
                 left: -100%;
                 width: 280px;
                 height: 100%;
                 background-color: var(--color-primary);
                 color: white;
                 box-shadow: 2px 0 8px rgba(0, 0, 0, 0.7);
                 overflow-y: auto;
                 transition: left 0.3s ease;
                 z-index: 9999;
                 padding: 20px 15px 40px 15px;
                 display: flex;
                 flex-direction: column;
             }

             .sidebar.open {
                 left: 0;
             }

             .sidebar button#closeSidebar {
                 background: none;
                 border: none;
                 color: var(--color-text-primary);
                 font-size: 24px;
                 cursor: pointer;
                 position: absolute;
                 top: 12px;
                 right: 15px;
             }

             .sidebar-title {
                 font-size: 1.8rem;
                 margin-bottom: 1px;
                 font-weight: 700;
                 user-select: none;
             }

             .sidebar-search {
                 position: relative;
                 margin-bottom: 20px;
             }

             .sidebar-search-input {
                 width: 100%;
                 padding: 10px 12px 10px 35px;
                 border: none;
                 border-radius: 6px;
                 background-color: var(--color-search-bg);
                 color: var(--color-search-text);
                 font-size: 14px;
             }

             .sidebar-search-input::placeholder {
                 color: var(--color-search-text);
             }

             .sidebar-search-icon {
                 position: absolute;
                 left: 10px;
                 top: 50%;
                 transform: translateY(-50%);
                 color: var(--color-search-text);
                 pointer-events: none;
             }

             .sidebar-menu {
                 list-style: none;
                 padding: 0;
                 margin: 0 0 20px 0;
             }

             .sidebar-menu li {
                 padding: 10px 12px;
                 cursor: pointer;
                 border-radius: 6px;
                 user-select: none;
                 font-size: 15px;
                 transition: background-color 0.2s ease;
             }

             .sidebar-menu-icons li {
                 display: flex;
                 align-items: center;
                 gap: 12px;
                 font-weight: 600;
             }

             .sidebar-menu-icons li i {
                 min-width: 20px;
                 font-size: 16px;
                 color: var(--color-accent-orange);
             }

             .sidebar hr {
                 border: none;
                 border-top: 1px solid var(--color-border);
                 margin: 15px 0;
             }

             .sidebar-subtitle {
                 font-weight: 400;
                 color: var(--color-subtitle);
                 font-size: 14px;
                 margin-bottom: 8px;
                 user-select: none;
             }

             /* Overlay */
             #overlay {
                 position: fixed;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 background-color: rgba(0, 0, 0, 0.4);
                 opacity: 0;
                 visibility: hidden;
                 transition: opacity 0.3s ease;
                 z-index: 9998;
             }

             #overlay.active {
                 opacity: 1;
                 visibility: visible;
             }

             /* Desktop Styles */
             @media (min-width: 769px) {
                 .header {
                     flex-direction: row;
                     align-items: center;
                     justify-content: space-between;
                     padding: 10px 20px;
                     gap: 20px;
                 }

                 /* Hide mobile elements on desktop */
                 .mobile-top-row,
                 .mobile-bottom-section {
                     display: none;
                 }

                 /* Show desktop layout */
                 .desktop-layout {
                     display: flex;
                     align-items: center;
                     flex: 1;
                     gap: 20px;
                 }

                 .logo-text img {
                     height: 110px;
                     margin-left: 2rem;
                 }

                 .search-container {
                     flex: 2;
                     max-width: 600px;
                     margin: 0 auto;
                     position: relative;
                     margin-left: 5rem;
                 }

                 .header-buttons {
                     display: flex;
                     align-items: center;
                     gap: 15px;
                     /* margin-right: 8rem; */
                 }

                 .btn-cyphermind,
                 .btn-sell {
                     padding: 10px 20px;
                     font-size: 14px;
                     height: auto;
                     width: auto;
                     border: none;
                     border-radius: var(--border-radius-lg);
                     color: white;
                     cursor: pointer;
                     transition: var(--transition);
                     font-weight: 600;
                     text-decoration: none;
                 }

                 .btn-cyphermind {
                     background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
                 }

                 .btn-sell {
                     background: linear-gradient(135deg, var(--color-accent-orange), #ff8c42);
                 }

                 .btn-cyphermind:hover,
                 .btn-sell:hover {
                     transform: translateY(-2px);
                 }

                 .btn-cyphermind:hover {
                     box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
                 }

                 .btn-sell:hover {
                     box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
                 }

                 .cart-icon {
                     font-size: 18px;
                     padding: 5px 12px;
                     border-radius: var(--border-radius-lg);
                     color: white;
                     background-color: var(--color-secondary);
                     box-shadow: 0px 0px 9px #667790;
                 }

                 .cart-icon:hover {
                     font-size: 18px;
                     padding: 5px 12px;
                     border-radius: var(--border-radius-lg);
                     color: white;
                     background-color: var(--color-secondary);
                     box-shadow: 0px 0px 9px var(--color-accent-orange);
                 }

                 .profile-dropdown * {
                     margin: 0;
                     padding: 0;
                     line-height: 1;
                     word-break: break-word;
                 }
             }

		.profile-dropdown a {
                     padding: 3px 0;
                     /* reduced from 6px to 3px */
                     text-decoration: none;
                     color: var(--color-text-primary);
                     display: block;
                     font-size: 0.75rem;
                     /* optional: reduce font size slightly */
                 }

             .category-nav {
                 background-color: black;
                 border-bottom: 1px solid var(--color-border);
             }

             .category-container {
                 /* max-width: 1600px; */
                 margin: 0 auto;
                 padding: 0 10px;
                 background: var(--color-primary);
                 width: 100%;
                 box-sizing: border-box;
             }

             .category-grid {
                 display: flex;
                 gap: 28px;
                 overflow-x: auto;
                 padding: 10px 0;
                 scrollbar-width: none;
                 -ms-overflow-style: none;
                 justify-content: center;
             }

             .category-grid::-webkit-scrollbar {
                 display: none;
             }

             .category-item {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 gap: 12px;
                 min-width: 80px;
                 cursor: pointer;
                 transition: var(--transition);
             }

             .category-item:hover {
                 transform: translateY(-3px);
             }

             .category-icon {
                 width: 84px;
                 height: 84px;
                 border-radius: 50%;
                 background-color: var(--color-secondary);
                 border: 2px solid var(--color-border);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 transition: var(--transition);
                 position: relative;
                 overflow: hidden;
             }

             .category-item:hover .category-icon {
                 border-color: var(--color-accent-teal);
                 box-shadow: 0 8px 25px rgba(78, 205, 196, 0.2);
             }

             .category-icon img {
                 width: 71px;
                 height: 45px;
                 object-fit: contain;
                 filter: brightness(1.1);
             }

             .category-name {
                 font-size: 13px;
                 font-weight: 500;
                 color: white;
                 text-align: center;
                 white-space: nowrap;
             }

             .category-item:hover .category-name {
                 color: var(--color-text-primary);
                 background-color: #1f2937;
             }

             .category-icon {
                 background: #33c3f033;
             }

             @media (max-width: 992px) {
                 .category-container {
                     padding: 0 40px;
                 }
             }

             /* Small Devices (Mobile) */
             @media (max-width: 768px) {
                 .category-container {
                     padding: 0 20px;
                 }
             }

             /* Extra Small Devices */
             @media (max-width: 480px) {
                 .category-container {
                     padding: 0 10px;
                 }
             }

             .hero-slide {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 min-height: 320px;
                 padding: 0em 3rem;
                 box-sizing: border-box;
                 width: 100%;
                 position: relative;
                 border-radius: 15px;
                 overflow: hidden;
             }

             .hero-text {
                 flex: 1;
                 max-width: 500px;
                 padding-right: 2rem;
                 color: #ffffff;
                 text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
             }

             .hero-text h1 {
                 font-size: 3rem;
                 margin-bottom: 1rem;
                 font-weight: 700;
                 line-height: 1.2;
             }

             .hero-text p {
                 font-size: 1.1rem;
                 line-height: 1.6;
                 margin-bottom: 1.5rem;
             }

             .hero-image-container {
                 flex: 1;
                 display: flex;
                 justify-content: flex-end;
                 align-items: center;
                 position: relative;
                 min-width: 300px;
             }

             /* .hero-image-container img {
                 max-height: 350px;
                 width: auto;
                 object-fit: contain;
                 border-radius: 10px;
                 display: block;
                 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
             } */

             .hero-banner-img-full {
    width: 100% !important;
    height: 300px !important;
}
.video-container iframe {
    width: 100%;height: 385px !important;
}
/*span.pokemon-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f97316;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 1px 1px 5px #fff;
    color: #ffffff;
}*/
span.pokemon-badge {
    background: #ea580c;
    padding: 3px 12px;
    border-radius: 15px;
    font-size: 14px;
    color: #ffffff;
    /* position: absolute; */
    /* right: 0; */
    /* margin-top: -50px; */
    /* margin-right: 18px; */
    /* border: 2px solid #fff; */
}
.availability {
    font-size: 15px !important;
}
.hero-image-container-banner-image img{
    height: 300px !important;
    object-fit: cover !important;
    width: 100% !important;
}


.carousel-inner{
    height: 300px !important;
}
             .new-release-btn {
                 position: absolute;
                 background-color: var(--color-accent-orange);
                 padding: 3px 17px;
                 color: white;
                 top: 19.5rem;
                 right: 1.5rem;
                 border-radius: 3px;
                 font-weight: 600;
                 text-transform: uppercase;
                 z-index: 10;
                 cursor: pointer;
                 box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px;
                 transition: background-color 0.2s;
             }

             .new-release-btn:hover {
                 background-color: #e0a800;
             }

             .slide-1 {
                 background: linear-gradient(135deg, #810000, #8f3100);
             }

             .slide-2 {
                 background: linear-gradient(135deg, #2c2c2c, #102657);
             }

             .slide-3 {
                 background: linear-gradient(135deg, #052196, #002e58);
             }

             .carousel-indicators [data-bs-target] {
                 background-color: rgba(255, 255, 255, 0.5);
             }

             .carousel-indicators .active {
                 background-color: #ffffff;
             }

             .carousel-control-prev-icon,
             .carousel-control-next-icon {
                 width: 2rem;
                 height: 2rem;
                 background-size: 100%, 100%;
                 filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
             }

             @media (max-width: 991.98px) {
                 .hero-slide {
                     flex-direction: column;
                     height: auto;
                     padding: 2rem 2rem;
                     text-align: center;
                 }

                 .hero-text {
                     max-width: 100%;
                     padding-right: 0;
                     margin-bottom: 2rem;
                 }

                 .hero-text .btn {
                     width: 100%;
                     max-width: 300px;
                     margin: 0 auto;
                 }

                 .hero-image-container {
                     justify-content: center;
                     margin-bottom: 1rem;
                     min-width: unset;
                 }

                 .hero-image-container img {
                     max-height: 250px;
                     max-width: 80%;
                 }

                 .new-release-btn {
                     top: 0.5rem;
                     right: 0.5rem;
                     padding: 4px 8px;
                     font-size: 0.7rem;
                 }
             }

             @media (max-width: 575.98px) {
                 .hero-slide {
                     padding: 1.5rem 1rem;
                 }

                 .hero-text h1 {
                     font-size: 2.2rem;
                 }

                 .hero-text p {
                     font-size: 1rem;
                 }

                 .hero-image-container img {
                     max-height: 180px;
                     max-width: 90%;
                 }
             }

             .sliderr {
                 width: 100%;
                 max-width: 100%;
                 padding: 0 0;
             }

             .buttonShop {
                 background-color: var(--color-accent-orange);
                 padding: 5px 12px;
                 color: white;
                 border-radius: 3px;
             }

             .buttonShop:hover {
                 background-color: rgb(229, 95, 0);
                 padding: 5px 12px;
                 color: white;
             }

             .trending-pokemon-section {
                 padding: 60px 0;
                 /* min-height: 100vh; */
                 color: #ffffff;
                 font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     sans-serif;
             }

             .section-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 40px;
                 padding: 0 15px;
             }

             .section-title {
                 font-size: 2.5rem;
                 font-weight: 700;
                 color: #ffffff;
                 margin: 0;
             }

             .view-all-link {
                 color: #ff6b35;
                 text-decoration: none;
                 font-weight: 600;
                 font-size: 1.1rem;
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 transition: all 0.3s ease;
             }

             .view-all-link:hover {
                 color: #ff8c42;
                 transform: translateX(5px);
             }

             .creator-highlights-card {
                 background: linear-gradient(to bottom, #042940, #3d2c2c);
                 border-radius: 16px;
                 padding: 24px;
                 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
                 height: fit-content;
                 position: sticky;
                 top: 20px;
             }

             .dailyCreator {
                 background-color: #06b6d4;
                 padding: 16px 9px 16px 9px;
                 border-radius: 11px;
             }

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

             .highlights-title {
                 font-size: 1.2rem;
                 font-weight: 700;
                 color: #ff6b35;
                 margin: 0;
             }

             .cypher-badge {
                 background: #4ecdc4;
                 color: #1a1f2e;
                 padding: 4px 12px;
                 border-radius: 8px;
                 font-size: 0.8rem;
                 font-weight: 700;
                 letter-spacing: 0.5px;
             }

             /* .featured-video {
            margin-bottom: 24px;
        } */

             .video-container {
                 position: relative;
                 border-radius: 12px;
                 overflow: hidden;
                 margin-bottom: 12px;
                 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
             }

             .video-thumbnail {
                 width: 100%;
                 height: 180px;
                 object-fit: cover;
                 display: block;
             }

             .play-button {
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 width: 50px;
                 height: 50px;
                 background: rgba(255, 255, 255, 0.95);
                 border: none;
                 border-radius: 50%;
                 color: #1a1f2e;
                 font-size: 1.2rem;
                 cursor: pointer;
                 transition: all 0.3s ease;
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
             }

             .play-button:hover {
                 background: #ffffff;
                 transform: translate(-50%, -50%) scale(1.1);
             }

             .video-duration {
                 position: absolute;
                 top: 12px;
                 right: 12px;
                 background: rgba(0, 0, 0, 0.8);
                 color: #ffffff;
                 padding: 4px 8px;
                 border-radius: 6px;
                 font-size: 0.8rem;
                 font-weight: 600;
             }

             .new-badge {
                 position: absolute;
                 top: 12px;
                 left: 12px;
                 background: #ff6b35;
                 color: #ffffff;
                 padding: 4px 8px;
                 border-radius: 6px;
                 font-size: 0.7rem;
                 font-weight: 700;
                 text-transform: uppercase;
                 letter-spacing: 0.5px;
             }

             .video-info {
                 /* padding: 0px 4px 12px 0px; */
                 padding: 13px 6px 13px 6px;
             }

             .video-title {
                 font-size: 1rem;
                 font-weight: 600;
                 color: #ffffff;
                 margin: 0 0 4px 0;
                 line-height: 1.3;
             }

             .video-channel {
                 font-size: 0.9rem;
                 color: rgba(255, 255, 255, 0.7);
                 margin: 0;
             }

             .category-selector {
                 margin-bottom: 8px;
             }

             .category-dropdown {
                 background: #1a1f2e;
                 border: 2px solid #4ecdc4;
                 border-radius: 8px;
                 color: #ffffff;
                 padding: 12px 16px;
                 font-weight: 600;
                 font-size: 1rem;
                 cursor: pointer;
                 transition: all 0.3s ease;
             }

             .category-dropdown:focus {
                 outline: none;
                 border-color: #ff6b35;
                 box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
             }

             .category-dropdown option {
                 background: #1a1f2e;
                 color: #ffffff;
             }

             .product-grid {
                 display: flex;
                 gap: 16px;
                 margin-bottom: 24px;
             }

             .product-item {
                 flex: 1;
                 background: rgb(0 0 0);
                 border-radius: 4px;
                 padding: 12px;
                 text-align: center;
                 transition: all 0.3s ease;
                 cursor: pointer;
                 border: 1px solid white;
             }

             .product-item:hover {
                 background: rgba(26, 31, 46, 0.8);
                 transform: translateY(-2px);
             }

             .product-image {
                 height: 200px;
                 object-fit: cover;
                 border-radius: 6px;
                 margin-bottom: 8px;
             }


             .product-name {
                 font-size: 0.9rem;
                 font-weight: 600;
                 color: #ffffff;
                 margin: 0 0 4px 0;
             }

             .product-price {
                 font-size: 0.8rem;
                 color: #ff6b35;
                 font-weight: 700;
             }

             .shop-button {
                 width: 100%;
                 background: #1a1f2e;
                 border: 2px solid #4ecdc4;
                 border-radius: 8px;
                 color: #ffffff;
                 padding: 7px 2px;
                 font-weight: 600;
                 font-size: 11px;
                 cursor: pointer;
                 transition: all 0.3s ease;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
                 text-decoration: none;
             }

             .shop-button:hover {
                 background: rgb(249 115 22);
                 color: #1a1f2e;
                 transform: translateY(-2px);
                 box-shadow: 0 4px 16px rgba(78, 205, 196, 0.3);
             }

             .local-pickup-sidebar {
                 /* background: linear-gradient(145deg, #000000 0%, #00284f 100%); */
                 background: #1f2937;
                 border-radius: 16px;
                 padding: 24px;
                 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
                 height: fit-content;
                 position: sticky;
                 top: 20px;
                 border: 1px solid rgba(255, 255, 255, 0.1);
             }

             .sidebar-title {
                 font-size: 1.3rem;
                 font-weight: 700;
                 color: #ffffff;
                 margin-bottom: 24px;
                 text-align: center;
             }

             .store-card {
                 background: rgba(26, 31, 46, 0.6);
                 border-radius: 12px;
                 padding: 20px;
                 margin-bottom: 20px;
                 border: 1px solid rgba(255, 255, 255, 0.1);
                 transition: all 0.3s ease;
             }

             .store-card:hover {
                 background: rgba(26, 31, 46, 0.8);
                 transform: translateY(-2px);
                 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
             }

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

             .store-avatar {
                 width: 40px;
                 height: 40px;
                 background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 color: #1a1f2e;
                 font-size: 1.1rem;
             }

             .store-info {
                 flex: 1;
             }

             .store-name {
                 font-size: 1.1rem;
                 font-weight: 600;
                 color: #ffffff;
                 margin: 0 0 4px 0;
             }

             .store-rating {
                 display: flex;
                 align-items: center;
                 gap: 4px;
                 font-size: 0.9rem;
             }

             .store-rating .fas.fa-star {
                 color: #ffd700;
                 font-size: 0.8rem;
             }

             .rating-score {
                 font-weight: 600;
                 color: #ffffff;
             }

             .rating-count {
                 color: rgba(255, 255, 255, 0.7);
             }

             .store-details {
                 margin-bottom: 16px;
             }

             .store-distance {
                 display: flex;
                 align-items: center;
                 gap: 6px;
                 margin-bottom: 8px;
                 font-size: 0.9rem;
                 color: rgba(255, 255, 255, 0.8);
             }

             .store-distance .fas.fa-map-marker-alt {
                 color: #ff6b35;
                 font-size: 0.8rem;
             }

             .store-categories {
                 font-size: 0.9rem;
                 color: rgba(255, 255, 255, 0.7);
                 font-weight: 500;
             }

             .view-shop-btn {
                 width: 100%;
                 background: transparent;
                 border: 2px solid rgba(255, 255, 255, 0.3);
                 border-radius: 8px;
                 color: #ffffff;
                 padding: 10px 16px;
                 font-weight: 600;
                 font-size: 0.9rem;
                 cursor: pointer;
                 transition: all 0.3s ease;
                 text-decoration: none;
             }

             .view-shop-btn:hover {
                 background: rgba(144, 144, 144, 0.1);
                 border-color: #3b3b3b;
                 color: #ffffff;
             }

             .find-more-link {
                 display: block;
                 text-align: center;
                 color: rgba(255, 255, 255, 0.7);
                 text-decoration: none;
                 font-size: 0.9rem;
                 font-weight: 500;
                 margin-top: 16px;
                 transition: all 0.3s ease;
             }

             .find-more-link:hover {
                 color: var(--color-accent-orange);
             }

             .trending-content {
                 padding-left: 20px;
             }

             .section-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 40px;
                 flex-wrap: wrap;
                 gap: 20px;
             }

             .section-title {
                 font-size: 2.2rem;
                 font-weight: 700;
                 color: #ffffff;
                 margin: 0;
             }

             .header-controls {
                 display: flex;
                 align-items: center;
                 gap: 24px;
             }

             .filter-tabs {
                 display: flex;
                 gap: 8px;
             }

             .filter-tab {
                 background: transparent;
                 border: none;
                 color: rgba(255, 255, 255, 0.6);
                 padding: 8px 16px;
                 border-radius: 6px;
                 font-weight: 500;
                 font-size: 0.9rem;
                 cursor: pointer;
                 transition: all 0.3s ease;
             }

             .filter-tab:hover,
             .filter-tab.active {
                 color: #ffffff;
                 background: rgba(255, 255, 255, 0.1);
             }

             .view-all-link {
                 color: #ff6b35;
                 text-decoration: none;
                 font-weight: 600;
                 font-size: 1rem;
                 display: flex;
                 align-items: center;
                 gap: 6px;
                 transition: all 0.3s ease;
             }

             .view-all-link:hover {
                 color: #ff8c42;
                 transform: translateX(3px);
             }

             .cards-grid {
                 margin-top: 20px;
             }

             .trading-card {
                 background: linear-gradient(135deg, #1a1f2e 0%, #2c3e50 50%, #34495e 100%);
                 border-radius: 12px;
                 /* padding: 16px; */
                 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                 transition: all 0.3s ease;
                 height: 100%;
                 border: 1px solid rgba(255, 255, 255, 0.1);
                 cursor: pointer;
             }

             .trading-card:hover {
                 transform: translateY(-4px);
                 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
                 border-color: rgba(255, 107, 53, 0.3);
             }

             .card-image-container {
                 position: relative;
                 text-align: center;
                 margin-bottom: 16px;
                 padding: 12px;
                 /* background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); */
                 background: #111923;
                 border-radius: 12px;
             }

             .card-image {
                 width: 100%;
                 max-width: 140px;
                 height: 180px;
                 object-fit: contain;
                 border-radius: 6px;
                 filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
             }

             .category-badge {
                 position: absolute;
                 top: 8px;
                 right: 8px;
                 padding: 4px 8px;
                 border-radius: 6px;
                 font-size: 0.7rem;
                 font-weight: 600;
                 text-transform: uppercase;
                 letter-spacing: 0.5px;
             }

             .category-badge.pokemon {
                 background: #3b82f6;
                 color: #ffffff;
             }

             .category-badge.yugioh {
                 background: #06b6d4;
                 color: #ffffff;
             }

             .card-content {
                 padding: 0px 8px;
             }

             .card-name {
                 font-size: 1.1rem;
                 font-weight: 600;
                 /* padding: 0px 0px 0px 5px; */
                 color: #ffffff;
                 margin: 0px 0 0px 0;
                 line-height: 1.3;
                 min-height: 1.6rem;
                 display: flex;
                 /* align-items: center;
            justify-content: center; */
                 font-size: 0.875rem;
                 font-weight: 500;
                 /* margin: 15px 0 30px 0; */
                 color: white;
             }

             .card-price {
                 font-size: 1.4rem;
                 font-weight: 700;
                 color: #ffffff;
                 margin-bottom: 12px;
             }

             .card-meta {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 8px;
                 font-size: 0.8rem;
                 padding: 0px 5px;
             }

             .card-set {
                 display: flex;
                 align-items: center;
                 gap: 4px;
                 color: #ffd700;
                 font-weight: 500;
             }

             .card-set .fas.fa-star {
                 font-size: 0.7rem;
             }

             .card-condition {
                 color: rgba(255, 255, 255, 0.7);
                 font-weight: 500;
             }

             .card-availability {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 4px;
                 font-size: 0.8rem;
                 color: rgba(255, 255, 255, 0.6);
             }

             .card-availability .fas.fa-clock {
                 font-size: 0.7rem;
             }

             @media (max-width: 1200px) {
                 .section-title {
                     font-size: 1.8rem;
                 }

                 .trending-content {
                     padding-left: 0;
                     margin-top: 30px;
                 }

                 .card-image {
                     max-width: 120px;
                     height: 160px;
                 }
             }

             @media (max-width: 992px) {
                 .local-pickup-sidebar {
                     margin-bottom: 40px;
                     position: static;
                 }

                 .section-header {
                     /* flex-direction: column; */
                     align-items: flex-start;
                     gap: 16px;
                 }

                 .header-controls {
                     width: 100%;
                     justify-content: space-between;
                 }

                 .store-card {
                     padding: 16px;
                 }

                 /* .trading-card {
                padding: 12px;
            } */
             }

             @media (max-width: 768px) {
                 .trending-singles-section {
                     padding: 40px 0;
                 }

                 .section-title {
                     font-size: 1.6rem;
                 }

                 .local-pickup-sidebar {
                     padding: 20px;
                 }

                 .sidebar-title {
                     font-size: 1.1rem;
                 }

                 .store-header {
                     gap: 8px;
                 }

                 .store-avatar {
                     width: 35px;
                     height: 35px;
                     font-size: 1rem;
                 }

                 .store-name {
                     font-size: 1rem;
                 }

                 .card-image {
                     max-width: 100px;
                     height: 140px;
                 }

                 .card-name {
                     font-size: 1rem;
                     min-height: 0;
                 }

                 .card-price {
                     font-size: 1.2rem;
                 }

                 .filter-tabs {
                     gap: 4px;
                 }

                 .filter-tab {
                     padding: 6px 12px;
                     font-size: 0.8rem;
                 }
             }

             @media (max-width: 576px) {
                 .header-controls {
                     flex-direction: column;
                     align-items: flex-start;
                     gap: 12px;
                 }

                 .store-card {
                     padding: 12px;
                 }

                 .store-details {
                     margin-bottom: 12px;
                 }

                 .view-shop-btn {
                     padding: 8px 12px;
                     font-size: 0.8rem;
                 }

                 .card-meta {
                     flex-direction: column;
                     gap: 4px;
                     align-items: center;
                 }

                 .trading-card {
                     padding: 10px;
                 }
             }

             @keyframes fadeInUp {
                 from {
                     opacity: 0;
                     transform: translateY(20px);
                 }

                 to {
                     opacity: 1;
                     transform: translateY(0);
                 }
             }

             .trading-card {
                 animation: fadeInUp 0.6s ease-out;
             }

             .trading-card:nth-child(1) {
                 animation-delay: 0.1s;
             }

             .trading-card:nth-child(2) {
                 animation-delay: 0.2s;
             }

             .trading-card:nth-child(3) {
                 animation-delay: 0.3s;
             }

             .view-shop-btn:focus,
             .filter-tab:focus,
             .trading-card:focus {
                 outline: 2px solid #ff6b35;
                 outline-offset: 2px;
             }

             .store-card:hover .store-avatar {
                 transform: scale(1.1);
             }

             .trading-card:hover .category-badge {
                 transform: scale(1.05);
             }

             .trading-card:hover .card-image {
                 transform: scale(1.02);
             }

             .local-pickup-sidebar::-webkit-scrollbar {
                 width: 6px;
             }

             .local-pickup-sidebar::-webkit-scrollbar-track {
                 background: rgba(255, 255, 255, 0.1);
                 border-radius: 3px;
             }

             .local-pickup-sidebar::-webkit-scrollbar-thumb {
                 background: rgba(255, 107, 53, 0.6);
                 border-radius: 3px;
             }

             .local-pickup-sidebar::-webkit-scrollbar-thumb:hover {
                 background: rgba(255, 107, 53, 0.8);
             }

             .creator-spotlight-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding-bottom: 20px;
                 border-bottom: 1px solid #716f6f;
                 /* A subtle separator */
                 margin-bottom: 30px;
             }

             .creator-spotlight-header h2 {
                 font-size: 1.8rem;
                 font-weight: bold;
                 color: #eee;
             }

             .creator-spotlight-header h2 i {
                 color: #dc3545;
                 /* Red color for the square icon */
                 margin-right: 10px;
             }

             .view-all-link {
                 color: #dc3545;
                 /* Red color for "View all >" */
                 text-decoration: none;
                 font-weight: bold;
             }

             .view-all-link:hover {
                 text-decoration: underline;
                 color: #ff4d4d;
             }

             .video-card {
                 background-color: #111323;
                 /* Darker background for each video card */
                 border-radius: 8px;
                 overflow: hidden;
                 /* Ensures image corners are rounded */
                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                 margin-bottom: 20px;
                 position: relative;
                 /* For play button positioning */
             }

             .video-thumbnail {
                 width: 100%;
                 height: 180px;
                 /* Adjust as needed */
                 object-fit: cover;
                 display: block;
             }

             .play-button-overlay {
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 color: white;
                 font-size: 3rem;
                 /* Large play icon */
                 opacity: 0.8;
                 pointer-events: none;
                 /* Allows clicks to pass through to the underlying link/element if any */
             }

             .video-duration {
                 position: absolute;
                 bottom: 8px;
                 right: 8px;
                 background-color: rgba(0, 0, 0, 0.7);
                 color: white;
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-size: 0.8rem;
             }

             /* .video-info {
            padding: 15px;
        } */

             .video-title {
                 font-size: 1.1rem;
                 font-weight: bold;
                 color: #eee;
                 margin-bottom: 5px;
                 line-height: 1.3;
             }

             .video-creator,
             .video-views {
                 font-size: 0.9rem;
                 color: #bbb;
             }

             .collectors-journal {
                 background-color: var(--color-primary);
                 font-family: var(--font-family-main);
             }

             .collectors-journal .section-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 2rem;
             }

             .collectors-journal .section-header h2 {
                 color: var(--color-text-primary);
                 font-weight: 700;
             }

             .collectors-journal .section-header .icon {
                 color: var(--color-accent-orange);
                 margin-right: 0.5rem;
             }

             .collectors-journal .view-all {
                 color: var(--color-accent-orange);
                 font-weight: 600;
                 text-decoration: none;
                 transition: var(--transition);
             }

             .collectors-journal .view-all:hover {
                 color: #ff8c42;
             }

             .blog-container {
                 /* background: #2c3341; */
                 padding: 20px;
                 box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
                 border-radius: 4px;
             }

             .article-card {
                 background-color: white;
                 border-radius: var(--border-radius);
                 overflow: hidden;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                 transition: var(--transition);
                 height: 100%;
                 display: flex;
                 flex-direction: column;
             }

             .article-card img {
                 width: 100%;
                 height: auto;
                 display: block;
             }

             .article-badge {
                 position: absolute;
                 top: 0.5rem;
                 left: 0.5rem;
                 background: var(--color-accent-orange);
                 color: white;
                 font-size: 0.75rem;
                 padding: 2px 8px;
                 border-radius: 12px;
                 font-weight: 600;
             }

             .article-content {
                 padding: 1rem;
                 color: var(--color-primary);
                 flex: 1;
             }

             .article-meta {
                 font-size: 0.875rem;
                 color: var(--color-text-muted);
                 margin-bottom: 0.5rem;
             }

             .article-title {
                 color: var(--color-primary);
                 font-weight: 700;
                 font-size: 1rem;
                 margin-bottom: 0.25rem;
                 text-decoration: none;
             }

             .article-summary {
                 font-size: 0.9rem;
                 color: var(--color-secondary);
                 margin-bottom: 0.5rem;
             }

             .article-read {
                 color: var(--color-accent-orange);
                 font-size: 0.9rem;
                 font-weight: 600;
                 text-decoration: none;
             }

             .cypher-section {
                 background-color: var(--color-secondary);
                 color: var(--color-text-primary);
                 padding: 30px 0;
                 min-height: 100vh;
                 font-family: var(--font-family-main);
             }

             /* Header Styles */
             .btn-container {
                 padding: 2px;
                 border-radius: 50px;
                 background: linear-gradient(to right, #ff6a00, #00cfff);
                 display: inline-block;
                 margin-bottom: 8px;
             }

             .gradient-border-btn {
                 background-color: #141c2b;
                 /* same as page bg */
                 border: none;
                 border-radius: 50px;
                 padding: 10px 28px;
                 font-weight: bold;
                 font-size: 18px;
                 cursor: pointer;
                 /* margin-bottom: 13px; */
             }

             .gradient-text {
                 background: linear-gradient(to right, #ff6a00, #00cfff);
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
             }

             .section-title {
                 font-size: 48px;
                 font-weight: 700;
                 /* margin: 30px 0 20px 0; */
                 color: var(--color-text-primary);
             }

             .flame-icon {
                 color: var(--color-accent-orange);
                 margin-right: 15px;
             }

             .section-subtitle {
                 font-size: 18px;
                 color: var(--color-text-secondary);
                 max-width: 700px;
                 margin: 0 auto 60px auto;
                 line-height: 1.6;
             }

             /* Feature Card Styles */
             .feature-card {
                 background-color: var(--color-primary);
                 border-radius: var(--border-radius-lg);
                 padding: 30px;
                 height: 100%;
                 border: 1px solid var(--color-border);
                 transition: var(--transition);
             }

             .feature-card:hover {
                 transform: translateY(-5px);
                 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
             }

             /* Gradient Bar */
             .gradient-bar {
                 background: linear-gradient(135deg,
                         var(--color-accent-orange) 0%,
                         var(--color-accent-teal) 100%);
                 height: 50px;
                 border-radius: 25px;
                 display: flex;
                 align-items: center;
                 justify-content: flex-start;
                 padding-left: 20px;
                 margin-bottom: 25px;
             }

             .gradient-bar i {
                 color: var(--color-text-primary);
                 font-size: 20px;
             }

             /* Feature Content */
             .feature-title {
                 font-size: 20px;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 margin-bottom: 15px;
                 line-height: 1.3;
             }

             .feature-description {
                 font-size: 15px;
                 color: var(--color-text-secondary);
                 line-height: 1.6;
                 margin-bottom: 20px;
             }

             .feature-highlight {
                 display: flex;
                 align-items: center;
                 font-size: 14px;
                 color: var(--color-accent-teal);
                 font-weight: 600;
                 cursor: pointer;
             }

             .feature-highlight i {
                 color: var(--color-accent-orange);
                 margin-right: 8px;
                 font-size: 12px;
             }

             /* Responsive Design */
             @media (max-width: 768px) {
                 .section-title {
                     font-size: 36px;
                 }

                 .section-subtitle {
                     font-size: 16px;
                 }

                 .feature-card {
                     padding: 25px;
                 }

                 /* .cypher-section {
                    padding: 60px 0;
                } */
             }

             @media (max-width: 576px) {
                 .section-title {
                     font-size: 28px;
                 }

                 .feature-title {
                     font-size: 18px;
                 }

                 .feature-description {
                     font-size: 14px;
                 }
             }

             /* Testimonial Section */
             .testimonial-section {
                 background-color: var(--color-primary);
                 padding: 80px 0;
             }

             .testimonial-carousel {
                 position: relative;
                 max-width: 1200px;
                 margin: 0 auto;
             }

             .testimonial-slide {
                 display: none;
                 opacity: 0;
                 transition: opacity 0.5s ease;
             }

             .testimonial-slide.active {
                 display: flex;
                 opacity: 1;
             }

             .carousel-arrow {
                 position: absolute;
                 top: 50%;
                 transform: translateY(-50%);
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 width: 50px;
                 height: 50px;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 cursor: pointer;
                 transition: var(--transition);
                 z-index: 10;
             }

             .carousel-arrow:hover {
                 background-color: var(--color-accent-teal);
                 border-color: var(--color-accent-teal);
             }

             .carousel-arrow-left {
                 left: -25px;
             }

             .carousel-arrow-right {
                 right: -25px;
             }

             .profile-card {
                 background-color: var(--color-card-bg);
                 border-radius: var(--border-radius-lg);
                 padding: 40px 30px;
                 border: 1px solid var(--color-border);
             }

             .profile-avatar {
                 width: 80px;
                 height: 80px;
                 background: linear-gradient(135deg,
                         var(--color-accent-orange) 0%,
                         var(--color-accent-teal) 100%);
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin: 0 auto 20px auto;
                 font-size: 32px;
             }

             .profile-name {
                 font-size: 24px;
                 font-weight: 700;
                 margin-bottom: 8px;
             }

             .profile-status {
                 color: var(--color-text-secondary);
                 margin-bottom: 20px;
             }

             .rating i {
                 color: #ffd700;
                 margin: 0 2px;
             }

             .testimonial-content {
                 padding-left: 40px;
             }

             .testimonial-quote {
                 font-size: 16px;
                 font-style: italic;
                 line-height: 1.5;
                 margin-bottom: 30px;
             }

             .achievement-item {
                 display: flex;
                 align-items: center;
                 margin-bottom: 12px;
                 color: var(--color-text-secondary);
             }

             .achievement-item i {
                 color: var(--color-accent-teal);
                 margin-right: 12px;
                 font-size: 16px;
             }

             /* Carousel Dots */
             .carousel-dots {
                 margin-top: 30px;
             }

             .dot {
                 height: 12px;
                 width: 12px;
                 margin: 0 5px;
                 background-color: var(--color-border);
                 border-radius: 50%;
                 display: inline-block;
                 cursor: pointer;
                 transition: var(--transition);
             }

             .dot.active,
             .dot:hover {
                 background-color: var(--color-accent-teal);
             }

             /* CTA Section */
             .cta-section {
                 background-color: var(--color-secondary);
                 padding: 80px 0;
             }

             .cta-card {
                 background: linear-gradient(to right, rgb(61, 44, 44), rgb(9 70 108));
                 border-radius: var(--border-radius-lg);
                 padding: 28px 20px;
                 max-width: 900px;

                 margin: 0 auto 37px auto;
             }

             .cta-title {
                 /* font-size: 36px; */
                 font-weight: 700;
                 margin-bottom: 20px;
                 font-size: 1.5rem;
                 line-height: 2rem;
             }

             .cta-title i {
                 color: #ffd700;
                 margin-right: 12px;
             }

             .cta-description {
                 font-size: 18px;
                 line-height: 1.6;
                 /* margin-bottom: 40px; */
             }

             .btn-cta {
                 background-color: #33c3f0;
                 color: var(--color-text-primary);
                 border: none;
                 padding: 16px 40px;
                 font-size: 18px;
                 font-weight: 600;
                 border-radius: 8px;
                 transition: var(--transition);
                 margin-bottom: 20px;
                 text-decoration: none;
             }

             .btn-cta:hover {
                 background-color: #3db8b8;
                 transform: translateY(-2px);
             }

             .cta-subtitle {
                 font-size: 16px;
                 margin: 0;
                 margin-top: 19px;
                 text-transform: uppercase;
                 word-spacing: 2px;
             }

             /* Responsive */
             @media (max-width: 768px) {
                 .carousel-arrow-left {
                     left: 10px;
                 }

                 .carousel-arrow-right {
                     right: 10px;
                 }

                 .testimonial-content {
                     padding-left: 0;
                     margin-top: 30px;
                 }

                 .testimonial-quote {
                     font-size: 20px;
                 }

                 .cta-title {
                     font-size: 21px;
                 }

                 .cta-card {
                     padding: 40px 20px;
                 }
             }

             /* Main Footer Section */
             .main-footer {
                 background-color: #08162a;
                 padding: 60px 0 40px 0;
             }

             .footer-title {
                 font-size: 20px;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 margin-bottom: 20px;
             }

             .footer-description {
                 color: var(--color-text-secondary);
                 line-height: 1.6;
                 margin-bottom: 25px;
             }

             .social-links {
                 display: flex;
                 gap: 15px;
             }

             .social-link {
                 width: 40px;
                 height: 40px;
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 color: var(--color-text-secondary);
                 text-decoration: none;
                 transition: var(--transition);
             }

             .social-link:hover {
                 background-color: var(--color-accent-teal);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
             }

             .footer-links {
                 list-style: none;
                 padding: 0;
                 margin: 0;
             }

             .footer-links li {
                 margin-bottom: 12px;
             }

             .footer-links a {
                 color: var(--color-text-secondary);
                 text-decoration: none;
                 transition: var(--transition);
             }

             .footer-links a:hover {
                 color: var(--color-accent-teal);
             }

             /* Newsletter Footer Section */
             .newsletter-footer {
                 background-color: var(--color-primary);
                 padding: 40px 0;
                 border-top: 1px solid var(--color-border);
             }

             .newsletter-title {
                 font-size: 24px;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 margin-bottom: 12px;
             }

             .newsletter-description {
                 color: var(--color-text-secondary);
                 margin-bottom: 25px;
             }

             .newsletter-form {
                 max-width: 400px;
             }

             .form-select,
             .form-control {
                 background-color: var(--color-primary);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 /* border-radius: 13px 0px 0px 13px; */
             }

             .newsletter-input {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 padding: 12px 16px;
                 /* border-radius: var(--border-radius) 0 0 var(--border-radius); */
                 border-radius: 13px;
             }

             .newsletter-input::placeholder {
                 color: var(--color-text-muted);
             }

             .newsletter-input:focus {
                 background-color: var(--color-card-bg);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
                 box-shadow: none;
             }

             .newsletter-btn {
                 background-color: var(--color-accent-teal);
                 border: 1px solid var(--color-accent-teal);
                 color: var(--color-text-primary);
                 padding: 12px 24px;
                 font-weight: 600;
                 /* border-radius: 0 var(--border-radius) var(--border-radius) 0; */
                 border-radius: 13px;
                 transition: var(--transition);
             }

             .newsletter-btn:hover {
                 background-color: #3db8b8;
                 border-color: #3db8b8;
                 color: var(--color-text-primary);
             }

             .payment-methods {
                 display: flex;
                 justify-content: flex-end;
                 gap: 12px;
                 flex-wrap: wrap;
             }

             .payment-icon {
                 height: 30px;
                 width: auto;
                 opacity: 0.7;
                 transition: var(--transition);
             }

             .payment-icon:hover {
                 opacity: 1;
             }

             .copyright-text {
                 color: var(--color-text-muted);
                 font-size: 14px;
                 margin: 0;
             }

             /* Responsive Design */
             @media (max-width: 768px) {
                 .newsletter-form {
                     max-width: 100%;
                 }

                 .payment-methods {
                     justify-content: center;
                     margin-bottom: 20px;
                 }

                 .copyright-text {
                     text-align: center;
                 }

                 .main-footer {
                     padding: 40px 0 20px 0;
                 }

                 .newsletter-footer {
                     padding: 30px 0;
                     text-align: center;
                 }

                 .mobile-tabs-section {
                     margin: 0px !important;
                     gap: 0px !important;
                 }
             }

             @media (max-width: 576px) {
                 .social-links {
                     justify-content: center;
                 }

                 .footer-links {
                     text-align: center;
                 }
             }

             .carousel-indicators button {
                 width: 10px;
                 height: 10px;
                 border-radius: 50%;
                 /* makes it circular */
                 background-color: #fff;
                 /* white dots */
                 opacity: 0.5;
                 transition: all 0.3s ease;
             }

             .carousel-indicators .active {
                 opacity: 1;
                 background-color: #fff;
                 /* active dot color */
             }

             .carousel-indicators button {
                 background-color: white;
                 box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
             }

             /* cards section 3 */
             .card-container {
                 background: transparent;
                 border: none;
                 position: relative;
                 border: 1px solid #515559;
                 border-radius: 9px;
                 box-shadow: 0px 0px 4px #00478c;
             }

             .pokemon-card-wrapper {
                 position: relative;
                 text-align: center;
                 background-color: #1f2937;
                 padding: 12px;
                 border-radius: 8px;
             }

             .pokemon-card {
                 width: 50%;
                 max-width: 280px;
                 height: auto;
             }

             .notification-bell {
                 position: absolute;
                 top: 10px;
                 right: 10px;
                 background: rgba(108, 117, 125, 0.8);
                 border: none;
                 border-radius: 50%;
                 width: 40px;
                 height: 40px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 color: white;
                 font-size: 16px;
             }

             .card-name {
                 font-size: 13px;
                 font-weight: bold;
                 /* margin: 15px 0 30px 0; */
                 color: white;
             }

             .star-icon {
                 color: #ffc107;
                 margin-left: 8px;
             }

             /* .price-section {
                        margin-bottom: 23px;
                } */

             .current-price {
                 font-size: 20px;
                 font-weight: 700;
                 color: white;
                 margin: 0;
             }

             .original-price {
                 font-size: 12px;
                 color: #cfcfcf;
                 text-decoration: line-through;
                 margin: 0;
                 /* float: right; */
                 margin-top: 8px;
             }

             .originall-price {
                 font-size: 10px;
                 color: #cfcfcf;
                 /* text-decoration: line-through; */
                 margin: 0;
                 float: right;
                 margin-top: 8px;
             }

             .status-section {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 10px;
             }

             .trending-badge {
                 color: #ffffff;
                 font-weight: 500;
                 font-size: 16px;
             }

             .availability {
                 color: #00a228;
                 font-size: 14px;
                 display: flex;
                 align-items: center;
                 gap: 5px;
             }

             .bottom-section {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
             }

             /* .view-details-btn {
                 background: white;
                 color: #2c3e50;
                 border: none;
                 padding: 5px 13px;
                 border-radius: 25px;
                 font-weight: 500;
                 font-size: 16px;
                 transition: all 0.3s ease;
                 text-decoration: none;
                 font-weight: 500;
             }

             .view-details-btn:hover {
                    filter: drop-shadow(rgb(6, 182, 212) 0px 0px 8px);
    transform: scale(1.05);
    cursor: pointer;
             } */

             .series-badge {
                 color: #6c757d;
                 font-size: 14px;
                 font-weight: 500;
                 text-transform: uppercase;
                 letter-spacing: 0.5px;
             }

             .cardwrapp {
                 padding: 0px 7px 9px 7px;
             }

             @media (max-width: 768px) {
                 .main-title {
                     font-size: 24px;
                 }

                 .pokemon-card {
                     max-width: 100%;
                 }

                 .current-price {
                     font-size: 28px;
                 }

                 .original-price {
                     font-size: 16px;
                 }

                 .card-name {
                     font-size: 20px;
                 }

                 .sidebar {
                     margin-bottom: 30px;
                 }
             }

             .pricingSection {
                 padding: 0px 5px;
             }

             .creatorSpotlight {
                 background-color: var(--color-secondary);
                 margin-top: 3rem;
             }

             .creator-spotlight {
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 font-size: 24px;
                 font-weight: bold;
                 color: white;
                 background-color: #1c2938;
                 /* Matching the navy background */
                 padding: 10px 20px;
                 border-radius: 8px;
             }

             .creator-spotlight i {
                 color: #ff7b00;
                 /* Orange color for the icon */
                 font-size: 26px;
             }

             .videoBio {
                 margin-bottom: 7px;
                 padding: 6px;
             }

             .creatorr-spotlight {
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 font-size: 24px;
                 font-weight: bold;
                 color: white;
                 /* background-color: #1c2938; Matching the navy background */
                 padding: 10px 20px;
                 border-radius: 8px;
             }

             .creatorr-spotlight i {
                 color: #ff7b00;
                 /* Orange color for the icon */
                 font-size: 26px;
             }

             .ctaSectionButton {
                 text-align: center;
             }

             /* pokemon page */
             .search-section {
                 background-color: var(--color-secondary);
                 padding: 2rem 1rem;
             }

             .search-bar {
                 max-width: 400px;
                 background-color: var(--color-card-bg);
                 border-radius: var(--border-radius);
                 border: 1px solid var(--color-border);
                 padding: 0.5rem 1rem;
                 display: flex;
                 align-items: center;
                 gap: 0.5rem;
                 transition: var(--transition);
             }

             .search-bar input {
                 background: transparent;
                 border: none;
                 color: var(--color-text-primary);
                 width: 100%;
                 outline: none;
             }

             .search-bar input::placeholder {
                 color: var(--color-text-muted);
             }

             .search-btn {
                 background-color: #0ea5e9;
                 color: white;
                 border: none;
                 padding: 0.5rem 1rem;
                 border-radius: var(--border-radius);
                 transition: var(--transition);
             }

             .breadcrumb-section {
                 background-color: var(--color-primary);
                 padding: 0.5rem 1rem;
             }

             .breadcrumb a {
                 color: var(--color-text-secondary);
                 text-decoration: none;
             }

             .breadcrumb .active {
                 color: white;
             }

             .logo {
                 width: 50px;
                 height: auto;
             }

             @media (max-width: 576px) {
                 .search-bar {
                     flex-direction: column;
                     align-items: stretch;
                 }

                 .search-btn {
                     width: 100%;
                     margin-top: 0.5rem;
                 }
             }

             .nav-pills .nav-link {
                 background: none;
                 border: none;
                 color: var(--color-text-muted);
                 border-radius: var(--border-radius);
             }

             .nav-pills .nav-link.active {
                 background-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
             }

             .sidebar-card {
                 background-color: var(--color-secondary);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
             }

             /* .form-select,
            .form-control {
                background-color: var(--color-primary);
                border: 1px solid var(--color-border);
                color: var(--color-text-primary);
            } */

             .form-check-input {
                 background-color: var(--color-primary);
                 border-color: var(--color-accent-orange);
             }

             .btn-orange {
                 background-color: var(--color-accent-orange);
                 border: none;
                 color: white;
             }

             .container-pokemon {
                 background-color: var(--color-secondary);
             }

             .product-card {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
             }

             .badge-new {
                 background-color: #10b981;
             }

             .badge-english {
                 background-color: var(--color-text-muted);
             }

             .price-text {
                 color: var(--color-accent-orange);
                 font-weight: 700;
             }

             .text-muted-custom {
                 color: var(--color-text-muted) !important;
             }

             .text-secondary-custom {
                 color: var(--color-text-secondary) !important;
             }

             .price-grid {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 8px;
             }

             .price-item {
                 background-color: var(--color-black);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
                 padding: 8px;
                 border-radius: var(--border-radius);
                 text-align: center;
                 font-size: 12px;
             }

             .grade-grid {
                 display: grid;
                 grid-template-columns: repeat(5, 1fr);
                 gap: 6px;
             }

             .price-item.active {
                 background-color: var(--color-accent-orange);
                 color: white;
             }

             .grade-item.active {
                 background-color: var(--color-accent-orange);
                 color: white;
             }

             .grade-item {
                 background-color: var(--color-black);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
                 padding: 6px;
                 border-radius: var(--border-radius);
                 text-align: center;
                 font-size: 12px;
             }

             .grade-itemm {
                 background-color: var(--color-black);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
                 padding: 6px;
                 border-radius: var(--border-radius);
                 text-align: center;
                 font-size: 12px;
             }

             .pagination .page-link {
                 background-color: var(--color-secondary);
                 border-color: var(--color-border);
                 color: var(--color-text-secondary);
             }

             .pagination .page-item.active .page-link {
                 background-color: var(--color-accent-teal);
                 border-color: var(--color-accent-teal);
             }

             .pagination .pages-item.active .page-link {
                 background-color: var(--color-accent-orange);
                 border-color: var(--color-accent-teal);
             }

             .filter-toggle {
                 cursor: pointer;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 border-bottom: 1px solid white;
                 padding-bottom: 14px;
             }

             .filter-togglee {
                 cursor: pointer;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 border-bottom: 1px solid white;
                 padding-bottom: 14px;
             }

             .filter-content {
                 max-height: 0;
                 overflow: hidden;
                 transition: max-height 0.3s ease;
             }

             .filter-contentt {
                 max-height: 0;
                 overflow: hidden;
                 transition: max-height 0.3s ease;
             }

             .filter-content.open {
                 max-height: 1000px;
             }

             .arrow-icon {
                 transition: transform 0.3s ease;
             }

             .arrow-icon.rotate {
                 transform: rotate(180deg);
             }

             .price-grid,
             .grade-grid {
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
                 gap: 6px;
             }

             .price-item,
             .grade-item {
                 padding: 6px;
                 background-color: #000000;
                 border-radius: 4px;
                 font-size: 14px;
                 text-align: center;
                 cursor: pointer;
             }

             @media (max-width: 768px) {
                 .price-grid {
                     grid-template-columns: 1fr;
                     /* Stack price items on smaller screens */
                 }

                 .grade-grid {
                     grid-template-columns: repeat(3, 1fr);
                     /* 5 -> 3 columns on small devices */
                 }

                 .product-card,
                 .sidebar-card {
                     padding: 12px;
                     margin-bottom: 16px;
                 }

                 .form-control,
                 .form-select {
                     font-size: 14px;
                 }

                 .price-item,
                 .grade-item {
                     font-size: 11px;
                     padding: 6px;
                 }

                 .pagination {
                     justify-content: center;
                     flex-wrap: wrap;
                 }

                 .pagination .page-link {
                     padding: 6px 10px;
                     font-size: 8px;
                 }

                 .btn-orange {
                     width: 60%;
                     display: block;
                     text-align: center;
                 }

                 .nav-pills {
                     flex-direction: column;
                     gap: 8px;
                 }

                 .nav-pills .nav-link {
                     width: 100%;
                     text-align: center;
                 }
             }

             .nav-link:hover {
                 color: black;
                 border: none;
             }

             /* Enhanced Product Images */
             .main-image-container {
                 /* background: linear-gradient(145deg, #1e293b, #334155);
          border-radius: var(--border-radius-lg);
          padding: 2rem;
          border: 1px solid var(--color-border);
          box-shadow: var(--shadow-xl); */
                 position: relative;
                 overflow: hidden;
                 text-align: center;
                 flex: 1;
             }

             .main-image-container::before {
                 content: "";
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 /* background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(6, 182, 212, 0.05) 50%,
            transparent 70%
          ); */
                 pointer-events: none;
             }

             .main-image {
                 width: 100%;
                 max-width: 400px;
                 height: auto;
                 border-radius: var(--border-radius);
                 box-shadow: var(--shadow-lg);
                 transition: var(--transition);
                 position: relative;
                 z-index: 1;
                 border: 1px solid white;
                 padding: 5px;
             }

             .main-image:hover {
                 transform: scale(1.02);
                 box-shadow: var(--shadow-xl), var(--glow-teal);
             }

             .thumbnail {
                 width: 60px;
                 height: 80px;
                 object-fit: cover;
                 border-radius: var(--border-radius);
                 border: 2px solid var(--color-border);
                 cursor: pointer;
                 transition: var(--transition);
                 box-shadow: var(--shadow-md);
                 position: relative;
                 overflow: hidden;
             }

             .thumbnail::before {
                 content: "";
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 background: linear-gradient(45deg, transparent, rgba(6, 182, 212, 0.1));
                 opacity: 0;
                 transition: var(--transition);
             }

             .thumbnail:hover::before {
                 opacity: 1;
             }

             .thumbnail:hover,
             .thumbnail.active {
                 border-color: var(--color-accent-teal);
                 transform: translateY(-2px);
                 box-shadow: var(--shadow-lg), var(--glow-teal);
             }

             /* Enhanced Product Details - Updated to match reference */
             .product-details {
                 background: transparent;
                 border-radius: 5px;
                 padding: 0;
                 border: none;
                 box-shadow: none;
                 backdrop-filter: none;
                 /* border: 1px solid var(--color-text-muted); */
                 padding: 5px;
             }

             .product-title {
                 font-size: 2rem;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 background: none;
                 -webkit-background-clip: unset;
                 -webkit-text-fill-color: unset;
                 background-clip: unset;
                 text-shadow: none;
                 margin-bottom: 0.5rem;
             }

             .rare-badge {
                 background: var(--color-accent-orange);
                 color: var(--color-text-primary);
                 padding: 0.25rem 0.75rem;
                 border-radius: var(--border-radius);
                 font-size: 0.75rem;
                 font-weight: 600;
                 box-shadow: none;
                 border: none;
                 animation: none;
             }

             .series-info {
                 color: var(--color-text-muted);
                 font-size: 0.875rem;
                 font-weight: 400;
                 margin-bottom: 0.5rem;
             }

             .rating-section {
                 margin-bottom: 1rem;
             }

             .rating-section .stars {
                 color: var(--color-accent-orange);
                 filter: none;
             }

             .rating-number {
                 color: var(--color-text-primary);
                 margin-left: 0.25rem;
                 font-weight: 400;
                 font-size: 0.875rem;
             }

             .sales-count {
                 color: var(--color-text-muted);
                 font-weight: 400;
                 font-size: 0.875rem;
             }

             /* .price-section {
                 margin-bottom: 1.5rem;
             } */

             .price {
                 font-size: 2rem;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 background: none;
                 -webkit-background-clip: unset;
                 -webkit-text-fill-color: unset;
                 background-clip: unset;
                 filter: none;
             }

             .seller-info {
                 color: var(--color-text-muted);
                 font-size: 0.875rem;
                 font-weight: 400;
                 margin-top: 0.25rem;
             }

             .seller-name {
                 color: var(--color-text-primary);
                 font-weight: 500;
             }

             .quantity-input {
                 width: 60px;
                 height: 40px;
                 background: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 text-align: center;
                 border-radius: var(--border-radius);
                 font-weight: 500;
                 box-shadow: none;
                 transform: none;
             }

             .quantity-input:focus {
                 background: var(--color-card-bg);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
                 box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.25);
                 transform: none;
             }

             .add-to-cart {
                 background: var(--color-accent-teal);
                 border: none;
                 color: white;
                 font-weight: 600;
                 padding: 0.5rem 1rem;
                 border-radius: var(--border-radius);
                 box-shadow: none;
                 transition: var(--transition);
                 position: relative;
                 overflow: hidden;
                 height: 40px;
                 font-size: 0.875rem;
             }

             .add-to-cart::before {
                 display: none;
             }

             .add-to-cart:hover {
                 background: #0891b2;
                 transform: none;
                 box-shadow: none;
             }

             .buy-now-btn {
                 background: var(--color-accent-orange);
                 border: none;
                 color: white;
                 font-weight: 600;
                 padding: 0.5rem 1rem;
                 border-radius: var(--border-radius);
                 transition: var(--transition);
                 height: 40px;
                 font-size: 0.875rem;
                 margin-left: 0.5rem;
             }

             .buy-now-btn:hover {
                 background: #ea580c;
             }

             .xp-info {
                 margin-bottom: 1.5rem;
             }

             .xp-info .xp-card {
				background: #ffffff14;
				color: #4ecdc4;
				padding: 1rem;
				border-radius: var(--border-radius);
				text-align: left;
				box-shadow: none;
				border: 1px solid #ffffff26;
				position: relative;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

             .xp-info .xp-card::before {
                 display: none;
             }

             .xp-amount {
                 font-weight: 700;
                 font-size: 1rem;
                 position: relative;
                 z-index: 1;
                 margin-right: 0.5rem;
             }

             .xp-rate {
                 display: inline;
                 margin-top: 0;
                 font-size: 0.875rem;
                 font-weight: 500;
                 position: relative;
                 z-index: 1;
                 margin-left: 0.5rem;
             }

             .info-section {
                 background: transparent;
                 padding: 0;
                 border-radius: 0;
                 border: none;
                 margin-bottom: 1rem;
                 backdrop-filter: none;
                 transition: none;
             }

             .info-section:hover {
                 background: transparent;
                 border-color: transparent;
                 box-shadow: none;
             }

             .info-section h6 {
                 color: var(--color-text-primary);
                 font-weight: 600;
                 margin-bottom: 0.5rem;
                 font-size: 0.875rem;
             }

             .info-section i {
                 color: var(--color-accent-teal);
                 filter: none;
                 margin-right: 0.5rem;
             }

             .shipping-type {
                 color: var(--color-text-primary);
                 font-weight: 600;
             }

             .shipping-time {
                 color: var(--color-text-muted);
                 font-weight: 400;
                 margin-left: 0.5rem;
             }

             .description {
                 color: var(--color-text-muted);
                 margin-bottom: 0;
                 font-weight: 400;
                 line-height: 1.5;
             }

             .cypher-xp-section {
                 margin-top: 1.5rem;
             }

             .cypher-xp-section .cypher-card {
                 background: #92400e;
                 color: #fef3c7;
                 padding: 1rem;
                 border-radius: var(--border-radius);
                 box-shadow: none;
                 border: none;
                 position: relative;
                 overflow: hidden;
             }

             .cypher-xp-section .cypher-card::before {
                 display: none;
             }

             .xp-calculation {
                 font-weight: 700;
                 color: var(--color-accent-orange);
                 filter: none;
                 position: relative;
                 z-index: 1;
             }

             .market-price-section {
                 background: var(--color-secondary);
             }

             .price-change.positive {
                 color: var(--bs-success);
             }

             .price-change.negative {
                 color: var(--bs-danger);
             }

             .chart-container {
                 position: relative;
                 height: 300px;
             }

             .time-filter-btn {
                 background: transparent;
                 border: 1px solid var(--color-border);
                 color: var(--color-text-muted);
                 transition: all 0.3s ease;
             }

             .time-filter-btn.active,
             .time-filter-btn:hover {
                 background: var(--color-accent-orange);
                 color: white;
                 border-color: var(--color-accent-orange);
             }

             /* Filter Sidebar - Optimized */
             .filter-sidebar {
                 position: fixed;
                 top: 0;
                 right: -400px;
                 width: 290px;
                 height: 100vh;
                 background-color: var(--color-primary);
                 border-left: 1px solid var(--color-border);
                 z-index: 1050;
                 transition: right 0.3s ease;
                 overflow-y: auto;
             }

             .filter-sidebar.show {
                 right: 0;
             }

             .filter-close-btn {
                 background: none;
                 border: none;
                 color: var(--color-text-muted);
                 font-size: 1.5rem;
                 cursor: pointer;
             }

             .filter-close-btn:hover {
                 color: var(--color-text-primary);
             }

             .sidebar-card {
                 background: var(--color-secondary);
                 border: 1px solid var(--color-border);
             }

             .filter-toggle.active .arrow-icon {
                 transform: rotate(180deg);
             }

             /* Responsive adjustments */
             @media (max-width: 768px) {
                 .filter-sidebar {
                     width: 100%;
                     right: -100%;
                 }
             }

             /* Button group styling for Add to Cart and Buy Now */
             .button-group {
                 display: flex;
                 gap: 0.5rem;
                 align-items: center;
             }

             @media (max-width: 576px) {
                 .button-group {
                     flex-direction: column;
                     width: 100%;
                 }

                 .add-to-cart,
                 .buy-now-btn {
                     width: 100%;
                     margin-left: 0;
                     margin-top: 0.5rem;
                 }

                 .buy-now-btn {
                     margin-top: 0.5rem;
                 }
             }

             .cypher-xp-section .cypher-card::before {
                 content: "";
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 background: linear-gradient(45deg, transparent, rgba(249, 115, 22, 0.1));
                 animation: pulse 2s infinite;
             }

             @keyframes pulse {

                 0%,
                 100% {
                     opacity: 0.5;
                 }

                 50% {
                     opacity: 1;
                 }
             }

             .xp-calculation {
                 font-weight: 800;
                 color: var(--color-accent-orange);
                 filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6));
                 position: relative;
                 z-index: 1;
             }

             /* Enhanced Seller Listings */
             .seller-listings {
                 background: linear-gradient(145deg,
                         rgba(30, 41, 59, 0.8),
                         rgba(51, 65, 85, 0.6));
                 border-radius: var(--border-radius-lg);
                 padding: 2rem;
                 border: 1px solid var(--color-border);
                 box-shadow: var(--shadow-xl);
                 backdrop-filter: blur(10px);
             }

             .seller-listings h3 {
                 color: var(--color-text-primary);
                 font-weight: 800;
                 font-size: 2rem;
                 background: linear-gradient(135deg, #ffffff, #cbd5e1);
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
                 background-clip: text;
             }

             .filter-dropdown {
                 background: linear-gradient(145deg, #1e293b, #334155);
                 border: 2px solid var(--color-border);
                 color: var(--color-text-primary);
                 width: auto;
                 min-width: 130px;
                 border-radius: var(--border-radius);
                 font-weight: 600;
                 box-shadow: var(--shadow-md);
                 transition: var(--transition);
             }

             .filter-dropdown:focus {
                 background: linear-gradient(145deg, #1e293b, #334155);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-secondary);
                 box-shadow: var(--shadow-lg), var(--glow-teal);
                 transform: scale(1.02);
             }

             .filter-dropdown:optional {
                 background: #1a1f2e;
                 color: #ffffff;
             }

             .seller-table {
                 background: linear-gradient(145deg, #1e293b, #334155);
                 border-radius: var(--border-radius-lg);
                 overflow: hidden;
                 box-shadow: var(--shadow-xl);
                 border: 1px solid var(--color-border);
             }

             .seller-table th {
                 background: linear-gradient(135deg, var(--color-secondary), #334155);
                 color: var(--color-text-secondary);
                 border: none;
                 padding: 1.5rem;
                 font-weight: 700;
                 font-size: 0.875rem;
                 text-transform: uppercase;
                 letter-spacing: 0.05em;
             }

             .seller-table td {
                 background: rgba(30, 41, 59, 0.8);
                 color: var(--color-text-primary);
                 border: none;
                 padding: 1.5rem;
                 border-top: 1px solid var(--color-border);
                 transition: var(--transition);
             }

             .seller-table tr:hover td {
                 background: rgba(30, 41, 59, 1);
                 box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.2);
             }

             .seller-table tr.selected {
                 background: linear-gradient(135deg,
                         rgba(6, 182, 212, 0.15),
                         rgba(6, 182, 212, 0.1));
                 box-shadow: inset 0 0 0 2px rgba(6, 182, 212, 0.3);
             }

             .seller-table tr.selected td {
                 background: linear-gradient(135deg,
                         rgba(6, 182, 212, 0.15),
                         rgba(6, 182, 212, 0.1));
             }

             .seller-name-cell {
                 color: var(--color-text-primary);
                 font-weight: 700;
                 font-size: 1rem;
             }

             .seller-rating {
                 color: var(--color-accent-orange);
                 font-size: 0.875rem;
                 font-weight: 600;
                 filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
             }

             .condition-badge {
                 padding: 0.5rem 0.75rem;
                 border-radius: var(--border-radius);
                 font-size: 0.75rem;
                 font-weight: 700;
                 text-transform: uppercase;
                 letter-spacing: 0.05em;
                 box-shadow: var(--shadow-sm);
                 border: 1px solid;
             }

             .condition-mint {
                 background: linear-gradient(135deg,
                         rgba(34, 197, 94, 0.2),
                         rgba(34, 197, 94, 0.1));
                 color: #22c55e;
                 border-color: rgba(34, 197, 94, 0.3);
                 box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
             }

             .condition-near-mint {
                 background: linear-gradient(135deg,
                         rgba(59, 130, 246, 0.2),
                         rgba(59, 130, 246, 0.1));
                 color: #3b82f6;
                 border-color: rgba(59, 130, 246, 0.3);
                 box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
             }

             .condition-played {
                 background: linear-gradient(135deg,
                         rgba(245, 158, 11, 0.2),
                         rgba(245, 158, 11, 0.1));
                 color: #f59e0b;
                 border-color: rgba(245, 158, 11, 0.3);
                 box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
             }

             .condition-excellent {
                 background: linear-gradient(135deg,
                         rgba(168, 85, 247, 0.2),
                         rgba(168, 85, 247, 0.1));
                 color: #a855f7;
                 border-color: rgba(168, 85, 247, 0.3);
                 box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
             }

             .condition-good {
                 background: linear-gradient(135deg,
                         rgba(6, 182, 212, 0.2),
                         rgba(6, 182, 212, 0.1));
                 color: #06b6d4;
                 border-color: rgba(6, 182, 212, 0.3);
                 box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
             }

             .select-seller-btn {
                 background: linear-gradient(135deg, var(--color-accent-teal), #0891b2);
                 border: none;
                 color: white;
                 font-weight: 700;
                 padding: 0.5rem 1.5rem;
                 font-size: 0.875rem;
                 border-radius: var(--border-radius);
                 box-shadow: var(--shadow-md);
                 transition: var(--transition);
                 position: relative;
                 overflow: hidden;
             }

             .select-seller-btn::before {
                 content: "";
                 position: absolute;
                 top: 0;
                 left: -100%;
                 width: 100%;
                 height: 100%;
                 background: linear-gradient(90deg,
                         transparent,
                         rgba(255, 255, 255, 0.2),
                         transparent);
                 transition: var(--transition);
             }

             .select-seller-btn:hover::before {
                 left: 100%;
             }

             .select-seller-btn:hover {
                 background: linear-gradient(135deg, #0891b2, var(--color-accent-teal));
                 transform: translateY(-2px);
                 box-shadow: var(--shadow-lg), 0 0 20px rgba(6, 182, 212, 0.4);
             }

             .selected-badge {
                 background: linear-gradient(135deg, #22c55e, #16a34a);
                 color: white;
                 padding: 0.5rem 1.5rem;
                 border-radius: var(--border-radius);
                 font-weight: 700;
                 font-size: 0.875rem;
                 box-shadow: var(--shadow-md), 0 0 15px rgba(34, 197, 94, 0.3);
                 border: 1px solid rgba(34, 197, 94, 0.3);
                 animation: selected-pulse 2s infinite;
             }

             @keyframes selected-pulse {

                 0%,
                 100% {
                     box-shadow: var(--shadow-md), 0 0 10px rgba(34, 197, 94, 0.3);
                 }

                 50% {
                     box-shadow: var(--shadow-md), 0 0 20px rgba(34, 197, 94, 0.5);
                 }
             }

             .shipping-info {
                 color: var(--color-text-secondary);
                 font-weight: 500;
             }

             .shipping-free {
                 color: #22c55e;
                 font-weight: 700;
                 filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
             }

             .shipping-paid {
                 color: var(--color-text-primary);
                 font-weight: 700;
             }

             /* Enhanced Mobile Seller Cards */
             .seller-card {
                 background: linear-gradient(145deg,
                         rgba(30, 41, 59, 0.9),
                         rgba(51, 65, 85, 0.7));
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
                 padding: 1.5rem;
                 margin-bottom: 1.5rem;
                 transition: var(--transition);
                 box-shadow: var(--shadow-lg);
                 backdrop-filter: blur(10px);
                 position: relative;
                 overflow: hidden;
             }

             .seller-card::before {
                 content: "";
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 background: linear-gradient(45deg,
                         transparent 30%,
                         rgba(6, 182, 212, 0.05) 50%,
                         transparent 70%);
                 opacity: 0;
                 transition: var(--transition);
             }

             .seller-card:hover::before {
                 opacity: 1;
             }

             .seller-card:hover {
                 transform: translateY(-4px);
                 box-shadow: var(--shadow-xl), 0 0 25px rgba(6, 182, 212, 0.2);
                 border-color: rgba(6, 182, 212, 0.3);
             }

             .seller-card.selected {
                 border-color: var(--color-accent-teal);
                 background: linear-gradient(145deg,
                         rgba(6, 182, 212, 0.15),
                         rgba(6, 182, 212, 0.1));
                 box-shadow: var(--shadow-xl), var(--glow-teal);
             }

             .seller-card-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 1rem;
                 position: relative;
                 z-index: 1;
             }

             .seller-card-price {
                 font-size: 1.75rem;
                 font-weight: 800;
                 background: linear-gradient(135deg, var(--color-accent-teal), #0891b2);
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
                 background-clip: text;
             }

             /* Enhanced Responsive Design */
             @media (max-width: 768px) {
                 .product-title {
                     font-size: 2rem;
                 }

                 .price {
                     font-size: 2rem;
                 }

                 .filter-section {
                     width: 100%;
                     text-align: center;
                 }

                 .filter-dropdown {
                     width: 100%;
                 }

                 .product-details {
                     padding: 1.5rem;
                 }

                 .seller-listings {
                     padding: 1.5rem;
                 }
             }

             @media (max-width: 576px) {
                 .thumbnails {
                     justify-content: center;
                 }

                 .thumbnail {
                     width: 60px;
                     height: 80px;
                 }

                 .add-to-cart {
                     width: 100%;
                     margin-top: 0.75rem;
                     /* padding: 1rem 2rem; */
                 }

                 .price-section .d-flex {
                     flex-direction: column;
                     align-items: flex-start !important;
                 }

                 .product-details {
                     padding: 1rem;
                 }

                 .seller-listings {
                     padding: 1rem;
                 }

                 .seller-card {
                     padding: 1rem;
                 }
             }

             /* Additional Visual Enhancements */
             .container-fluid {
                 position: relative;
                 z-index: 1;
             }

             /* Smooth scrolling */
             html {
                 scroll-behavior: smooth;
             }

             /* Custom scrollbar */
             ::-webkit-scrollbar {
                 width: 8px;
             }

             ::-webkit-scrollbar-track {
                 background: var(--color-primary);
             }

             ::-webkit-scrollbar-thumb {
                 background: linear-gradient(135deg, var(--color-accent-teal), #0891b2);
                 border-radius: 4px;
             }

             ::-webkit-scrollbar-thumb:hover {
                 background: linear-gradient(135deg, #0891b2, var(--color-accent-teal));
             }

             /* Loading animation for images */
             img {
                 transition: var(--transition);
             }

             img:not([src]) {
                 background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
                 background-size: 200% 100%;
                 animation: loading 1.5s infinite;
             }

             @keyframes loading {
                 0% {
                     background-position: 200% 0;
                 }

                 100% {
                     background-position: -200% 0;
                 }
             }

             /* Focus styles for accessibility */
             button:focus,
             input:focus,
             select:focus {
                 outline: 2px solid var(--color-secondary);
                 outline-offset: 2px;
             }

             /* Enhanced hover effects for interactive elements */
             .seller-table tr {
                 transition: var(--transition);
             }

             .seller-table tr:hover {
                 transform: scale(1.01);
             }

             /* Improved typography */
             h1,
             h2,
             h3,
             h4,
             h5,
             h6 {
                 letter-spacing: -0.025em;
             }

             p,
             span,
             div {
                 line-height: 1.6;
             }

             /* Enhanced button group styling */
             .btn-group .btn {
                 border-color: var(--color-border);
             }

             .btn-group .btn:hover {
                 z-index: 2;
             }

             .recommendation-card {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
                 transition: var(--transition);
             }

             .recommendation-card:hover {
                 transform: translateY(-4px);
                 border-color: var(--color-accent-teal);
             }

             .card-image-container {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius) var(--border-radius) 0 0;
                 padding: 1rem;
             }

             .condition-mint {
                 color: #22c55e;
             }

             .condition-near-mint {
                 color: #3b82f6;
             }

             .condition-excellent {
                 color: #a855f7;
             }

             .condition-good {
                 color: #06b6d4;
             }

             .condition-played {
                 color: #f59e0b;
             }

             .star-rating {
                 color: var(--color-accent-orange);
             }

             /* .series-info {
          color: var(--color-text-secondary);
          font-size: 0.875rem;
        } */

             .price-text {
                 color: var(--color-text-primary);
                 font-weight: 700;
                 font-size: 1.25rem;
             }

             *,
             *::before,
             *::after {
                 box-sizing: border-box;
             }

             /* Mobile first */
             .breadcrumb-container {
                 display: flex;
                 flex-direction: column;
                 gap: 0.5rem;
             }

             .breadcrumb-container nav[aria-label="breadcrumb"] ol {
                 display: flex;
                 gap: 6px;
                 padding-left: 0;
                 margin-bottom: 0;
                 list-style: none;
                 white-space: nowrap;
                 overflow-x: auto;
             }

             .breadcrumb-container nav[aria-label="breadcrumb"] li {
                 display: flex;
                 align-items: center;
                 padding: 0;
                 margin: 0;
                 flex-shrink: 0;
             }

             .breadcrumb-container nav[aria-label="breadcrumb"] li a {
                 color: #6c757d;
                 text-decoration: none;
                 font-size: 0.9rem;
             }

             .breadcrumb-container nav[aria-label="breadcrumb"] li.active {
                 color: white;
                 font-weight: 600;
                 font-size: 0.9rem;
             }

             .breadcrumb-container nav[aria-label="breadcrumb"] i {
                 font-size: 0.75rem;
                 margin-left: 4px;
                 color: #6c757d;
             }

             .search-bar {
                 position: relative;
                 max-width: 300px;
                 width: 100%;
             }

             .search-bar i {
                 position: absolute;
                 left: 10px;
                 top: 50%;
                 transform: translateY(-50%);
                 color: #6c757d;
                 font-size: 1rem;
                 pointer-events: none;
             }

             .search-bar input {
                 width: 100%;
                 height: 1rem;
                 padding: 0 8px 0 15px;
                 border-radius: 4px;
                 font-size: 0.8rem;
                 background-color: transparent;
                 color: #ffffff;
                 outline: none;
             }

             .search-btn {
                 width: 70px;
                 font-size: 0.7rem;
                 height: 1.9rem;
                 margin-left: 0.4rem;
                 margin-top: -0.1rem;
             }

             @media (min-width: 768px) {
                 .breadcrumb-container {
                     flex-direction: row;
                     justify-content: space-between;
                     align-items: center;
                 }

                 .search-bar {
                     max-width: 250px;
                 }
             }

             /* Hide filter button on laptop */
             .mobile-filter-toggle {
                 display: none;
                 padding: 8px 16px;
                 background-color: #007bff;
                 color: white;
                 border: none;
                 margin: 10px 0;
             }

             /* Default: show filter section */
             .filter-section {
                 display: block;
             }

             /* Mobile styles */
             @media screen and (max-width: 768px) {
                 .mobile-filter-toggle {
                     display: block;
                     /* Show button */
                 }

                 .filter-section {
                     display: none;
                     /* Hide section by default */
                     background: #f9f9f9;
                     padding: 10px;
                     margin-top: 10px;
                 }

                 .filter-section.active {
                     display: block;
                     /* Show section when active */
                 }
             }

             /* By default show desktop, hide mobile */
             .footer-desktop {
                 display: block;
             }

             .footer-mobile {
                 display: none;
             }

             /* On screens less than or equal to 768px, hide desktop and show mobile */
             @media (max-width: 768px) {
                 .footer-desktop {
                     display: none;
                 }

                 .footer-mobile {
                     display: block;
                 }
             }

             .custom-accordion .accordion-item {
                 background-color: transparent;
                 border: none;
                 margin-bottom: 1rem;
             }

             .accordion-button {
                 background-color: rgba(255, 255, 255, 0.05);
                 color: var(--color-accent-orange);
                 font-weight: 600;
                 font-size: 1.1rem;
                 border: none;
                 box-shadow: none;
                 border-radius: 8px;
                 padding: 10px 15px;
                 transition: background 0.3s ease;
             }

             .accordion-button:hover {
                 background-color: rgba(255, 255, 255, 0.1);
                 color: white;
             }

             .accordion-button::after {
                 filter: invert(1);
                 /* background-color: white; */
             }

             .accordion-body {
                 padding: 0.8rem 1.2rem;
             }

             .footer-links {
                 list-style: none;
                 padding: 0;
                 margin: 0;
             }

             .footer-links li {
                 margin-bottom: 6px;
             }

             .footer-links a {
                 color: #ccc;
                 text-decoration: none;
                 font-size: 0.95rem;
                 transition: color 0.3s;
             }

             .footer-links a:hover {
                 color: #ffce00;
                 padding-left: 5px;
             }

             .nav-tabs .nav-link {
                 /* border: 2px solid transparent; */
                 border-radius: 8px;
                 color: white;
             }

             .nav-tabs .nav-link.active {
                 background-color: var(--color-accent-teal) !important;
                 color: #fff !important;
                 border: none;
             }

             .nav-tabs .nav-link:hover {
                 box-shadow: 0 0 1px rgb(128, 53, 0), 0 0 10px teal;
                 transition: box-shadow 0.5s ease-in-out;
             }

             .scrollable-row {
                 display: flex;
                 flex-wrap: nowrap;
                 overflow-x: auto;
                 overflow-y: hidden;
                 gap: 10px !important;
                 padding: 12px;
                 padding-bottom: 10px;
                 scroll-behavior: smooth;
                 /* cursor:context-menu; */
                 -ms-overflow-style: none;
                 scrollbar-width: none;
                 /* cursor: none; */
                 user-select: none;
             }

             .scrollable-row::-webkit-scrollbar {
                 display: none;
             }

             .scrollable-row:active {
                 cursor: all-scroll;
             }

             .scrollable-row.dragging,
             .scrollable-row.dragging *:not(button) {
                 user-select: none;
                 -webkit-user-select: none;
                 -ms-user-select: none;
             }

             .form-check-input:checked {
                 background-color: var(--color-accent-orange) !important;
                 border-color: #ff0008 !important;
             }

             @media (min-width: 992px) {
                 .custom-all-products-section .col-lg-2 {
                     flex: 0 0 20%;
                     max-width: 20%;
                 }
             }

             /* order-history */

             /* after responsive */
             .stat-card {
                 padding: 1.5rem;
                 border-radius: var(--border-radius);
                 height: 100%;
                 transition: transform 0.3s ease;
             }

             .stat-card:hover {
                 transform: translateY(-5px);
             }

             .stat-title {
                 font-size: 1rem;
                 font-weight: 500;
                 margin-bottom: 0.5rem;
             }

             .stat-value {
                 font-size: 2rem;
                 font-weight: 700;
             }

             .purple-gradient {
                 background: linear-gradient(135deg, #6366f1 0%, #39236a 100%);
                 box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
             }

             .blue-gradient {
                 background: linear-gradient(135deg, #0ea5e9 0%, #0d265d 100%);
             }

             .orange-gradient {
                 background: linear-gradient(135deg, #f97316 0%, #903605 100%);
                 box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
             }

             .green-gradient {
                 background: linear-gradient(135deg, #10b981 0%, #036848 100%);
             }

             .orders-container {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius);
             }

             .section-title {
                 font-size: 1.25rem;
                 font-weight: 600;
                 color: var(--color-text-primary);
             }

             .search-box {
                 position: relative;
             }

             .search-box i {
                 position: absolute;
                 left: 10px;
                 top: 50%;
                 transform: translateY(-50%);
                 color: var(--color-text-muted);
             }

             .search-box input {
                 background-color: rgba(0, 0, 0, 0.2);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 padding-left: 2.25rem;
                 width: 200px;
             }

             .icon-btn {
                 background-color: rgba(0, 0, 0, 0.2);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
                 width: 36px;
                 height: 36px;
                 padding: 0;
                 display: flex;
                 align-items: center;
                 justify-content: center;
             }

             .icon-btn:hover {
                 background-color: rgba(255, 255, 255, 0.1);
                 color: var(--color-text-primary);
             }

             .order-tabs {
                 border-bottom: 1px solid var(--color-border);
             }

             .order-tabs .nav-link {
                 color: var(--color-text-secondary);
                 border: none;
                 padding: 0.5rem 1rem;
                 margin-right: 1rem;
                 border-bottom: 2px solid transparent;
             }

             .order-tabs .nav-link:hover,
             .order-tabs .nav-link.active {
                 color: var(--color-text-primary);
                 background: transparent;
                 border-bottom: 2px solid var(--color-accent-teal);
             }

             .table {
                 color: var(--color-text-primary) !important;
                 margin-bottom: 0;
             }

             .table th {
                 background-color: rgba(0, 0, 0, 0.2);
                 color: var(--color-text-secondary);
                 font-weight: 600;
                 border: none;
             }

             .table td {
                 border-color: var(--color-border);
             }

             .order-id {
                 color: var(--color-accent-teal);
                 font-weight: 600;
             }

             .badge {
                 padding: 0.4rem 0.75rem;
                 border-radius: 1rem;
                 font-weight: 500;
             }

             .status-delivered {
                 background-color: #059669;
             }

             .status-shipped {
                 background-color: #0ea5e9;
             }

             .status-processing {
                 background-color: #f59e0b;
             }

             .status-returned {
                 background-color: #ef4444;
             }

             .tracking-link {
                 color: var(--color-accent-teal);
                 text-decoration: none;
             }

             .tracking-link:hover {
                 color: var(--color-text-primary);
                 text-decoration: underline;
             }

             .btn-details {
                 background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
                 color: white;
                 border: none;
                 padding: 0.4rem 1rem;
                 font-weight: 500;
             }

             .btn-details:hover {
                 background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
                 color: white;
                 transform: translateY(-2px);
             }

             @media (max-width: 768px) {
                 .search-box input {
                     width: 150px;
                 }

                 .order-tabs .nav-link {
                     padding: 0.5rem 0.75rem;
                     margin-right: 0.5rem;
                     font-size: 0.9rem;
                 }
             }

             @media (max-width: 576px) {
                 .icon-btn {
                     width: 32px;
                     height: 32px;
                 }

                 .search-box input {
                     width: 120px;
                 }

                 .table {
                     font-size: 0.9rem;
                 }
             }

             /* binder page */
             /* binder */
             /* Header Styles */
             .app-title {
                 color: var(--color-accent-orange);
                 font-weight: 600;
                 font-size: 2.5rem;
                 margin-bottom: 0.25rem;
             }

             .app-subtitle {
                 color: var(--color-text-secondary);
                 font-size: 1.1rem;
                 font-weight: 400;
             }

             /* Card Styles */
             .metric-card,
             .chart-card,
             .game-section-card {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius-lg);
                 padding: 1.5rem;
                 box-shadow: var(--shadow-md);
                 transition: var(--transition);
                 height: 100%;
             }

             .metric-card:hover,
             .chart-card:hover,
             .game-section-card:hover {
                 box-shadow: var(--shadow-lg);
             }

             .metric-label,
             .section-title {
                 color: var(--color-text-secondary);
                 font-size: 1rem;
                 font-weight: 500;
             }

             .section-title {
                 font-size: 1.25rem;
                 margin-bottom: 0;
             }

             .metric-value {
                 font-size: 2rem;
                 font-weight: 600;
                 margin-bottom: 0;
             }

             /* Badge Styles */
             .growth-badge,
             .trend-badge,
             .game-badge {
                 padding: 1px 10px;
                 border-radius: 32px;
                 font-size: 0.875rem;
                 font-weight: 500;
                 display: inline-flex;
                 align-items: center;
             }

             .growth-badge.positive,
             .trend-badge {
                 background-color: rgba(78, 205, 196, 0.2);
                 color: var(--color-accent-teal);
             }

             .growth-badge.negative {
                 background-color: rgba(249, 115, 22, 0.2);
                 color: var(--color-accent-orange);
             }

             .game-badge {
                 background-color: rgba(99, 102, 241, 0.2);
                 color: var(--color-accent-orange);
             }

             /* Trend Graph */
             .trend-graph {
                 height: 40px;
                 position: relative;
                 overflow: hidden;
                 background: linear-gradient(to right,
                         rgba(99, 102, 241, 0.1),
                         rgba(99, 102, 241, 0.3));
                 border-radius: var(--border-radius);
             }

             .trend-line {
                 position: absolute;
                 bottom: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 background-size: 100% 100%;
             }

             /* Time Filter */
             .time-filter .time-btn {
                 background-color: transparent;
                 color: var(--color-text-secondary);
                 border: 1px solid var(--color-border);
                 transition: var(--transition);
             }

             .time-filter .time-btn:hover,
             .time-filter .time-btn.active {
                 background-color: var(--color-card-bg);
                 color: var(--color-text-primary);
             }

             .time-filter .time-btn.active {
                 box-shadow: var(--glow-purple);
             }

             /* Search and Filter */
             .search-container {
                 position: relative;
                 width: 240px;
             }

             .search-icon {
                 position: absolute;
                 left: 10px;
                 top: 50%;
                 transform: translateY(-50%);
                 color: var(--color-text-muted);
             }

             .search-input {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 padding-left: 35px;
                 border-radius: var(--border-radius);
             }

             .search-input::placeholder {
                 color: var(--color-text-muted);
             }

             .filter-btn,
             .view-btn {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
             }

             .view-btn.active {
                 background-color: rgba(99, 102, 241, 0.2);
                 color: var(--color-accent-orange);
             }

             /* Game Tabs */
             .game-tabs {
                 display: flex;
                 gap: 0.5rem;
                 overflow-x: auto;
                 padding-bottom: 0.5rem;
             }

             .game-tab {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 padding: 0.5rem 1rem;
                 color: var(--color-text-secondary);
                 white-space: nowrap;
                 display: flex;
                 align-items: center;
                 gap: 0.5rem;
                 transition: var(--transition);
             }

             .game-tab:hover,
             .game-tab.active {
                 background-color: rgba(99, 102, 241, 0.2);
                 color: var(--color-text-primary);
             }

             .game-tab.active {
                 border-color: var(--color-accent-orange);
             }

             .game-icon {
                 width: 20px;
                 height: 20px;
                 border-radius: 50%;
                 background-color: var(--color-secondary);
             }

             /* Game Cards */
             .game-card {
                 background-color: var(--color-card-bg);
                 border-radius: var(--border-radius-lg);
                 overflow: hidden;
                 transition: var(--transition);
                 height: 100%;
             }

             .game-card:hover {
                 transform: translateY(-5px);
                 box-shadow: var(--shadow-lg);
             }

             .game-card-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding: 1rem;
                 color: var(--color-text-primary);
             }

             .pokemon-bg, .game-card-header {
                 background-color: #a855f7;
             }

             .yugioh-bg {
                 background-color: #6366f1;
             }

             .magic-bg {
                 background-color: #0ea5e9;
             }

             .onepiece-bg {
                 background-color: #f97316;
             }

             .game-logo {
                 width: 40px;
                 height: 40px;
                 border-radius: 50%;
                 background-color: var(--color-secondary);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin-right: 0.75rem;
             }

             .game-name {
                 font-weight: 500;
                 white-space: nowrap;
             }

             .card-count-badge {
                 background-color: rgba(255, 255, 255, 0.2);
                 border-radius: var(--border-radius);
                 padding: 0.25rem 0.5rem;
                 font-size: 0.875rem;
             }

             .game-card-body {
                 padding: 1rem;
             }

             .game-value {
                 font-size: 1.5rem;
                 font-weight: 600;
                 margin-bottom: 0.5rem;
             }

             /* Progress Bars */
             .progress {
                 height: 4px;
                 background-color: var(--color-border);
                 border-radius: var(--border-radius);
                 overflow: hidden;
             }

             #valueChart {
                 height: 240px !important;
             }

             .progress-bar {
                 height: 100%;
                 border-radius: var(--border-radius);
             }

             .progress-bar.positive {
                 background-color: var(--color-accent-teal);
             }

             .progress-bar.negative {
                 background-color: var(--color-accent-orange);
             }

             /* Responsive Adjustments */
             @media (max-width: 768px) {
                 .app-title {
                     font-size: 2rem;
                 }

                 .metric-value {
                     font-size: 1.5rem;
                 }

                 .search-container {
                     width: 100%;
                 }

                 .game-tabs {
                     flex-wrap: nowrap;
                     scrollbar-width: none;
                     /* Firefox */
                     -ms-overflow-style: none;
                 }

                 .search-filter-section {
                     justify-content: center !important;
                 }
             }

             /* Animations */
             @keyframes pulse {
                 0% {
                     transform: scale(1);
                 }

                 50% {
                     transform: scale(1.05);
                 }

                 100% {
                     transform: scale(1);
                 }
             }

             .growth-badge.positive:hover,
             .trend-badge:hover {
                 animation: pulse 1s infinite;
             }

             .game-card:hover .progress-bar.positive {
                 box-shadow: var(--glow-teal);
             }

             .game-card:hover .progress-bar.negative {
                 box-shadow: var(--glow-orange);
             }

             /* cart page  */
             .cart-card {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
             }

             .cart-image {
                 border-radius: var(--border-radius);
                 width: 113px;
                 height: 159px;
                 object-fit: cover;
             }

             .text-secondary-custom {
                 color: var(--color-text-secondary) !important;
             }

             .text-muted-custom {
                 color: var(--color-text-muted) !important;
             }

             .text-orange {
                 color: var(--color-accent-orange) !important;
             }

             .text-teal {
                 color: var(--color-accent-teal) !important;
             }

             .btn-orange {
                 background-color: var(--color-accent-orange);
                 border-color: var(--color-accent-orange);
                 color: white;
             }

             .btn-orange:hover {
                 background-color: #ea580c;
                 border-color: #ea580c;
                 color: white;
             }

             .btn-dark-custom {
                 background-color: var(--color-secondary);
                 border-color: var(--color-border);
                 color: var(--color-text-primary);
             }

             .btn-dark-custom:hover {
                 background-color: var(--color-border);
                 border-color: var(--color-border);
                 color: var(--color-text-primary);
             }

             .form-control-dark {
                 background-color: var(--color-secondary);
                 border-color: var(--color-border);
                 color: var(--color-text-primary);
             }

             .form-control-dark:focus {
                 background-color: var(--color-secondary);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
                 box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
             }

             .form-control-dark::placeholder {
                 color: var(--color-text-muted);
             }

             .quantity-btn {
                 background-color: transparent;
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
                 width: 32px;
                 height: 40px;
                 border-radius: var(--border-radius);
                 transition: var(--transition);
             }

             .quantity-btn:hover {
                 background-color: var(--color-border);
                 color: var(--color-text-primary);
             }

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

             .quantity-input {
                 background-color: transparent;
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 text-align: center;
                 width: 60px;
                 border-radius: var(--border-radius);
             }

             .quantity-input:focus {
                 background-color: var(--color-secondary);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
                 box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
             }

             .xp-badge {
                 background-color: rgba(249, 115, 22, 0.1);
                 border: 1px solid var(--color-accent-orange);
                 border-radius: var(--border-radius);
                 padding: 4px 8px;
                 font-size: 0.875rem;
             }

             .cypher-xp-card {
                 background: linear-gradient(135deg,
                         rgba(249, 115, 22, 0.1),
                         rgba(78, 205, 196, 0.1));
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
             }

             .price-highlight {
                 color: var(--color-accent-teal);
                 font-weight: 700;
             }

             /* .form-control {
                 padding: 3px;
             } */

             .seller-accordion .accordion-item {
                 background-color: transparent;
                 border: none;
                 margin-bottom: 1rem;
             }

             .seller-accordion .accordion-button {
                 background-color: var(--color-secondary);
                 color: var(--color-text-primary);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius-lg);
                 padding: 1rem 1.5rem;
                 transition: var(--transition);
             }

             .seller-accordion .accordion-button:not(.collapsed) {
                 background-color: var(--color-secondary);
                 color: var(--color-accent-teal);
                 box-shadow: none;
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }

             .seller-accordion .accordion-button:focus {
                 box-shadow: var(--glow-teal);
             }

             .seller-accordion .accordion-button::after {
                 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                 background-repeat: no-repeat;
                 background-size: 1rem;
                 background-position: center;
                 width: 1.25rem;
                 height: 1.25rem;
                 content: "";
                 transition: transform 0.3s ease;
                 transform: rotate(0deg);
                 background-color: transparent;
                 margin-left: auto;
             }

             .seller-accordion .accordion-button:not(.collapsed)::after {
                 transform: rotate(180deg);
             }

             .seller-accordion .accordion-body {
                 background-color: var(--color-secondary);
                 border: 1px solid var(--color-border);
                 border-top: none;
                 border-bottom-left-radius: var(--border-radius-lg);
                 border-bottom-right-radius: var(--border-radius-lg);
                 padding: 0.5rem;
                 max-height: 600px;
                 overflow-y: auto;
             }

             .seller-accordion .accordion-body::-webkit-scrollbar {
                 width: 8px;
             }

             .seller-accordion .accordion-body::-webkit-scrollbar-track {
                 background: var(--color-primary);
                 border-radius: 4px;
             }

             .seller-accordion .accordion-body::-webkit-scrollbar-thumb {
                 background: var(--color-accent-teal);
                 border-radius: 4px;
             }

             .seller-badge {
                 background-color: var(--color-accent-teal);
                 color: white;
                 padding: 0.25rem 0.5rem;
                 border-radius: var(--border-radius);
                 font-size: 0.75rem;
                 font-weight: 500;
                 margin-left: 0.5rem;
             }

             .product-count {
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
                 margin-left: 0.5rem;
             }

             /* login signup */
             .auth-page-body {
                 background: linear-gradient(135deg,
                         var(--color-primary) 0%,
                         var(--color-secondary) 100%);
                 min-height: 100vh;
                 color: var(--color-text-primary);
             }

             .auth-main-container {
                 background: rgba(255, 255, 255, 0.1);
                 backdrop-filter: blur(10px);
                 border-radius: var(--border-radius);
                 border: 1px solid rgba(255, 255, 255, 0.2);
             }

             .input-group-text {
                 background-color: rgba(255, 255, 255, 0.1);
                 color: white;
                 border: none;
             }

             .auth-logo-circle {
                 /* background: var(--color-accent-teal); */
                 color: white;
                 width: 60px;
                 height: 60px;
                 border-radius: var(--border-radius);
                 font-size: 1.5rem;
             }

             .auth-logo-circle img {
                 width: 180px;
             }

             /* Custom Tab Styling */
             .auth-custom-tabs {
                 background: var(--color-search-bg);
                 border-radius: var(--border-radius);
                 padding: 4px;
                 gap: 8px;
             }

             .auth-custom-tabs .auth-tab-btn {
                 border: none;
                 border-radius: calc(var(--border-radius) - 2px);
                 color: var(--color-text-muted);
                 background: transparent;
                 transition: var(--transition);
             }

             .auth-custom-tabs .auth-tab-btn.auth-tab-active,
             .auth-custom-tabs .auth-tab-btn:hover {
                 background: var(--color-accent-teal);
                 color: white;
             }

             /* Form Styling */
             .auth-form-control {
                 background: var(--color-search-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 border-radius: var(--border-radius);
             }

             .auth-form-control:focus {
                 background: var(--color-search-bg);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
                 box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
             }

             .auth-form-control::placeholder {
                 color: var(--color-text-muted);
             }

             .auth-form-label {
                 color: var(--color-text-muted);
             }

             .auth-btn-primary {
                 background: var(--color-accent-teal);
                 border-color: var(--color-accent-teal);
                 border-radius: var(--border-radius);
             }

             .auth-btn-primary:hover {
                 background: #e5650e;
                 border-color: #e5650e;
             }

             .auth-form-check-input {
                 background: var(--color-search-bg);
                 border-color: var(--color-border);
             }

             .auth-form-check-input:checked {
                 background-color: var(--color-accent-teal);
                 border-color: var(--color-accent-teal);
             }

             .auth-form-check-label {
                 color: var(--color-text-muted);
             }

             .auth-user-type-section {
                 background: rgba(255, 255, 255, 0.05);
                 border-radius: var(--border-radius);
             }

             .auth-btn-google {
                 background: white;
                 color: #333;
                 border: 1px solid #ddd;
                 border-radius: var(--border-radius);
                 transition: var(--transition);
             }

             .auth-btn-google:hover {
                 background: #f8f9fa;
                 color: #333;
                 transform: translateY(-1px);
             }

             .auth-divider {
                 position: relative;
                 text-align: center;
                 margin: 1.5rem 0;
             }

             .auth-divider::before {
                 content: "";
                 position: absolute;
                 top: 50%;
                 left: 0;
                 right: 0;
                 height: 1px;
                 background: var(--color-border);
             }

             .auth-divider span {
                 background: var(--color-primary);
                 padding: 0 1rem;
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
             }

             /* sell page styling */
             .hero-section {
                 padding: 2rem 0 4rem 0;
                 min-height: auto;
             }

             .hero-content {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 4rem;
                 align-items: center;
                 /* padding: 2rem 0; */
             }

             .hero-badge {
                 display: inline-block;
                 padding: 8px 20px;
                 border: 1px solid var(--color-accent-orange);
                 border-radius: 25px;
                 color: var(--color-accent-orange);
                 font-size: 12px;
                 font-weight: 600;
                 letter-spacing: 1px;
                 margin-bottom: 2rem;
             }

             .hero-title {
                 font-size: 3.5rem;
                 font-weight: 800;
                 line-height: 1.1;
                 margin-bottom: 1.5rem;
             }

             /* .gradient-border-btn {
            display: inline-block;
            padding: 8px 20px;
            border: 1px solid var(--color-accent-orange);
            border-radius: 25px;
            background: transparent;
            color: var(--color-accent-orange);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition);
        } */

             /* .gradient-border-btn:hover {
            background-color: rgba(249, 115, 22, 0.1);
        } */

             /* .gradient-text {
            color: var(--color-accent-orange);
        }

        .gradient-text {
            background: linear-gradient(90deg, var(--color-accent-orange) 0%, var(--color-accent-teal) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        } */

             .hero-description {
                 font-size: 1.25rem;
                 color: var(--color-text-secondary);
                 margin-bottom: 2rem;
             }

             .hero-buttons {
                 display: flex;
                 gap: 1rem;
                 margin-bottom: 3rem;
             }

             .btn-primary-custom {
                 background-color: var(--color-accent-orange);
                 color: white;
                 padding: 1rem 2rem;
                 border: none;
                 border-radius: 25px;
                 font-weight: 600;
                 text-decoration: none;
                 transition: var(--transition);
             }

             .btn-primary-custom:hover {
                 background-color: #e86504;
                 transform: translateY(-2px);
                 color: white;
             }

             .btn-outline-custom {
                 background: transparent;
                 color: var(--color-text-primary);
                 padding: 1rem 2rem;
                 border: 1px solid var(--color-border);
                 border-radius: 25px;
                 font-weight: 600;
                 text-decoration: none;
                 transition: var(--transition);
             }

             .btn-outline-custom:hover {
                 background-color: rgba(255, 255, 255, 0.1);
                 color: var(--color-text-primary);
             }

             .video-section {
                 background-color: var(--color-card-bg);
                 border-radius: var(--border-radius);
                 padding: 4rem 2rem;
                 text-align: center;
                 min-height: 350px;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
             }

             .play-buttonn {
                 width: 80px;
                 height: 80px;
                 border-radius: 50%;
                 background: linear-gradient(135deg,
                         var(--color-accent-orange),
                         var(--color-accent-teal));
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin: 0 auto 1rem;
                 cursor: pointer;
                 transition: var(--transition);
             }

             .play-buttonn:hover {
                 transform: scale(1.05);
             }

             .play-iconn {
                 width: 0;
                 height: 0;
                 border-left: 20px solid white;
                 border-top: 12px solid transparent;
                 border-bottom: 12px solid transparent;
                 margin-left: 4px;
             }

             /* Stats Section */
             .stats-section {
                 background: var(--color-primary);
                 padding: 4rem 0;
                 color: #333;
                 border-top: 1px solid;
                 border-bottom: 1px solid;
             }

             .stats-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                 gap: 2rem;
                 text-align: center;
             }

             .stat-value {
                 font-size: 2.5rem;
                 font-weight: 700;
                 margin-bottom: 0.5rem;
             }

             .stat-label {
                 font-size: 1rem;
                 color: #666;
             }

             .text-orange {
                 color: var(--color-accent-orange);
             }

             .text-purple {
                 color: var(--color-accent-orange);
             }

             /* Features Section */
             .features-section {
                 padding: 4rem 0;
                 background-color: var(--color-secondary);
             }

             .cypher-section {
                 padding-top: 20px;
             }

             .section-badge {
                 background-color: var(--color-accent-orange);
                 color: white;
                 padding: 8px 20px;
                 border-radius: 20px;
                 font-size: 12px;
                 font-weight: 600;
                 text-transform: uppercase;
                 letter-spacing: 0.5px;
                 display: inline-block;
                 margin-bottom: 1rem;
             }

             .section-title {
                 font-size: 2.5rem;
                 font-weight: 700;
                 margin-bottom: 1rem;
             }

             .section-subtitle {
                 color: var(--color-text-secondary);
                 font-size: 1.1rem;
                 margin-bottom: 3rem;
             }

             /* .feature-card {
                    background: white;
                    border-radius: var(--border-radius);
                    padding: 2rem;
                    height: 100%;
                    color: #333;
                    transition: var(--transition);
                }

                .feature-card:hover {
                    transform: translateY(-5px);
                    box-shadow: var(--shadow-lg);
                } */

             .gradient-bar {
                 width: 100%;
                 height: 35px;
                 background: linear-gradient(90deg,
                         var(--color-accent-orange),
                         var(--color-accent-teal));
                 border-radius: 25px;
                 margin-bottom: 1.5rem;
             }

             .gradient-bar i {
                 color: var(--color-text-primary);
                 font-size: 1.2rem;
                 margin-top: -2px;
             }

             .feature-title {
                 font-size: 1.25rem;
                 font-weight: 600;
                 margin-bottom: 1rem;
                 color: var(--color-text-primary);
             }

             .feature-description {
                 color: var(--color-text-secondary);
                 margin-bottom: 1rem;
                 line-height: 1.6;
             }

             .feature-highlight {
                 color: var(--color-accent-orange);
                 font-weight: 600;
                 font-size: 0.9rem;
             }

             /* Testimonials Section */
             .testimonials-section {
                 padding: 4rem 0;
                 background-color: var(--color-secondary);
             }

             .testimonial-card {
                 background: white;
                 border-radius: var(--border-radius);
                 padding: 2rem;
                 height: 100%;
                 color: #333;
             }

             .profile-section {
                 display: flex;
                 align-items: center;
                 margin-bottom: 1rem;
             }

             .profile-avatarr {
                 width: 50px;
                 height: 50px;
                 border-radius: 50%;
                 background-color: #333;
                 color: white;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-weight: 600;
                 margin-right: 1rem;    object-fit: cover;
             }

             .profile-info h6 {
                 margin: 0;
                 font-weight: 600;
                 color: #333;
             }

             .profile-desc {
                 color: #666;
                 font-size: 0.875rem;
                 margin: 0;
             }

             .star-rating {
                 color: #fbbf24;
                 margin-bottom: 1rem;
             }

             /* .testimonial-quote {
            font-style: italic;
            color: #555;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        } */

             .achievement-list {
                 list-style: none;
                 padding: 0;
             }

             .achievement-list li {
                 color: #666;
                 font-size: 0.875rem;
                 margin-bottom: 0.5rem;
                 position: relative;
                 padding-left: 1.5rem;
             }

             .achievement-list li::before {
                 content: "✓";
                 color: var(--color-accent-teal);
                 font-weight: bold;
                 position: absolute;
                 left: 0;
             }

             /* Get Started Section */
             .get-started-section {
                 padding: 4rem 0;
                 background-color: #1a202c;
             }

             .step-card {
                 background: var(--color-primary);
                 border-radius: 3px;
                 padding: 2em;
                 height: 100%;
                 color: #333;
                 position: relative;
                 /* margin-top: 1rem; */
                 border: 1px solid var(--color-border);
                 box-shadow: 0 4px 8px rgba(16, 19, 46, 0.15);
             }

             .step-card:hover {
                 border: 1px solid var(--color-accent-teal);
                 transition: 0.4s;
             }

             .step-number {
                 position: absolute;
                 top: -20px;
                 left: -20px;
                 width: 45px;
                 height: 45px;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-weight: 700;
                 font-size: 1.2rem;
                 color: white;
                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
             }

             .step-1 {
                 background: linear-gradient(90deg,
                         var(--color-accent-orange),
                         var(--color-accent-teal));
             }

             .step-2 {
                 background: linear-gradient(90deg,
                         var(--color-accent-orange),
                         var(--color-accent-teal));
             }

             .step-3 {
                 background: linear-gradient(90deg,
                         var(--color-accent-orange),
                         var(--color-accent-teal));
             }

             .step-4 {
                 background: linear-gradient(90deg,
                         var(--color-accent-orange),
                         var(--color-accent-teal));
             }

             .step-title {
                 font-size: 1.25rem;
                 font-weight: 600;
                 color: #ffffff;
                 margin-bottom: 1rem;
             }

             .step-description {
                 color: #bdbdbd;
                 line-height: 1.6;
             }

             .card-wrapper {
                 padding: 25px 0 0 25px;
                 margin-bottom: 25px;
             }

             /* FAQ Section */
             .faq-section {
                 padding: 4rem 0;
                 background-color: var(--color-secondary);
             }

             .faq-card {
                 background: white;
                 border-radius: var(--border-radius);
                 padding: 1.5rem;
                 margin-bottom: 1rem;
                 color: #333;
             }

             .faq-question {
                 font-weight: 600;
                 color: #333;
                 margin-bottom: 1rem;
             }

             .faq-answer {
                 color: #666;
                 line-height: 1.6;
                 margin: 0;
             }

             /* Responsive Design */
             @media (max-width: 768px) {
                 .hero-content {
                     grid-template-columns: 1fr;
                     gap: 2rem;
                 }

                 .hero-title {
                     font-size: 2.5rem;
                 }

                 .hero-buttons {
                     flex-direction: column;
                 }

                 .stats-grid {
                     grid-template-columns: repeat(2, 1fr);
                 }

                 .section-title {
                     font-size: 2rem;
                 }

                 .card-wrapper {
                     padding: 20px 0 0 20px;
                 }

                 .step-number {
                     width: 40px;
                     height: 40px;
                     font-size: 1.1rem;
                     top: -18px;
                     left: -18px;
                 }
             }

             .start-selling-section {
                 background-color: var(--color-primary);
                 font-family: var(--font-family-main);
             }

             .section-heading {
                 color: var(--color-text-primary);
             }

             .highlighted-text {
                 color: var(--color-text-primary);
             }

             .section-subtext {
                 color: var(--color-text-secondary);
             }

             .section-muted {
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
             }

             /* chat page design */
             /* Custom component styles */
             .sidebar-section {
                 background-color: var(--color-secondary);
                 border-right: 1px solid var(--color-border);
             }

             .chat-area-section {
                 background-color: var(--color-primary);
             }

             .chat-header-section {
                 background-color: var(--color-secondary);
                 border-bottom: 1px solid var(--color-border);
             }

             .input-area-section {
                 background-color: var(--color-secondary);
                 border-top: 1px solid var(--color-border);
             }

             .btn-tab {
                 background-color: var(--color-accent-orange);
                 border: none;
                 transition: all 0.2s ease;
             }

             .btn-tab:hover {
                 background-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
             }

             .btn-tab.active {
                 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
             }

             .chat-item {
                 cursor: pointer;
                 transition: background-color 0.2s ease;
                 border-bottom: 1px solid var(--color-border);
             }

             .chat-item:hover {
                 background-color: var(--color-card-bg);
             }

             .chat-item.active {
                 background-color: var(--color-primary);
                 border-left: 3px solid var(--color-accent-orange);
                 color: var(--color-text-primary);
             }

             .message-bubble {
                 border-radius: 12px;
                 word-wrap: break-word;
                 display: inline-block;
                 max-width: 100%;
             }

             .message-bubble.received {
                 background-color: var(--color-card-bg);
                 color: var(--color-text-primary);
                 border: 1px solid var(--color-secondary);
             }

             .message-bubble.sent {
                 background-color: var(--color-accent-orange);
                 color: white;
             }

             .system-box {
                 background-color: var(--color-card-bg);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-secondary);
             }

             /* .message-input {
          background-color: var(--color-card-bg);
          border: 3px solid var(--color-accent-orange);

          color: var(--color-text-primary);
        } */

             .message-input::placeholder {
                 color: var(--color-text-muted);
             }

             .message-input:focus {
                 background-color: var(--color-card-bg);
                 border-color: var(--color-accent-orange);
                 box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
                 color: var(--color-text-primary);
             }

             .btn-send {
                 background-color: var(--color-accent-orange);
                 border: none;
                 transition: background-color 0.2s ease;
             }

             .btn-send:hover {
                 background-color: var(--color-accent-teal);
                 color: white;
             }

             .unread-badge {
                 background-color: var(--color-accent-orange);
                 color: white;
                 width: 20px;
                 height: 20px;
             }

             /* Mobile sidebar positioning */
             @media (max-width: 991.98px) {
                 .sidebar-col {
                     position: fixed;
                     top: 0;
                     left: -100%;
                     width: 100%;
                     height: 100vh;
                     z-index: 1050;
                     transition: left 0.3s ease;
                 }

                 .sidebar-col.show {
                     left: 0;
                 }
             }

             /* Custom scrollbar styling */
             .chat-list::-webkit-scrollbar,
             .messages-area::-webkit-scrollbar {
                 width: 6px;
             }

             .chat-list::-webkit-scrollbar-track,
             .messages-area::-webkit-scrollbar-track {
                 background: var(--color-secondary);
             }

             .chat-list::-webkit-scrollbar-thumb,
             .messages-area::-webkit-scrollbar-thumb {
                 background: var(--color-border);
                 border-radius: 3px;
             }

             .chat-list::-webkit-scrollbar-thumb:hover,
             .messages-area::-webkit-scrollbar-thumb:hover {
                 background: var(--color-text-muted);
             }

             /* Override Bootstrap text colors for dark theme */
             .text-muted {
                 color: var(--color-text-muted) !important;
             }

             /* ✅ Fixed height for scrollable chat list */
             .chat-list {
                 max-height: 300px;
                 /* Adjust this value as needed */
                 overflow-y: auto;
             }

             /* my store section */

             /* Header Section Styles */
             /* .header-bg-secondary {
                    background-color: var(--color-secondary) !important;
                } */
             /*
                .header-border-custom {
                    border-color: var(--color-border) !important;
                } */
             /*
                .header-text-muted {
                   color: var(--color-text-muted);
                } */

             .header-form-control {
                 background-color: var(--color-secondary);
                 border-color: var(--color-border);
                 color: white;
             }

             .header-form-control::placeholder {
                 color: var(--color-text-muted);
             }

             .header-form-control:focus {
                 background-color: var(--color-secondary);
                 border-color: var(--color-accent-orange);
                 color: white;
                 box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
             }

             .header-form-select {
                 background-color: var(--color-secondary);
                 border-color: var(--color-border);
                 color: white;
             }

             .header-form-select:focus {
                 border-color: var(--color-accent-orange);
                 box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
             }

             /* Store Profile Section Styles */
             /* .profile-bg-secondary {
                    background-color: var(--color-secondary) !important;
                } */

             /* .profile-border-custom {
                    border-color: var(--color-border) !important;
                } */

             .profile-text-muted {
                 color: var(--color-text-muted);
             }

             .profile-avatar {
                 width: 60px;
                 height: 60px;
                 background-color: white;
             }

             .profile-btn-orange {
                 background-color: var(--color-accent-orange);
                 border-color: var(--color-accent-orange);
                 color: white;
             }

             .profile-btn-orange:hover {
                 background-color: var(--color-accent-orange);
                 border-color: var(--color-accent-orange);
                 color: white;
                 transform: translateY(-1px);
             }

             .profile-btn-outline {
                 border-color: var(--color-border);
                 color: white;
             }

             .profile-btn-outline:hover {
                 background-color: var(--color-border);
                 border-color: var(--color-border);
                 color: white;
             }

             /* Listings Section Styles */
             .listings-scroll-container::-webkit-scrollbar {
                 /* height: 8px; */
                 display: none;
             }

             .listings-nav-btn {
                 border-color: var(--color-border);
                 color: white;
             }

             .listings-nav-btn:hover {
                 background-color: var(--color-border);
                 border-color: var(--color-border);
                 color: white;
             }

             .listings-product-card {
                 background-color: var(--color-card-bg) !important;
                 border-color: var(--color-border) !important;
                 transition: transform 0.3s ease;
             }

             .listings-product-card:hover {
                 transform: translateY(-4px);
                 /* border-color: var(--color-border) !important; */
             }

             /* .listings-product-card img:hover {
                    transform: scale(0.05);
                    animation-duration: 0.5s;

                } */

             .listings-text-muted {
                 color: #8892a0 !important;
             }

             .listings-btn-outline {
                 border-color: var(--color-border);
                 color: white;
             }

             .start-selling-btn {
                 /* border-color: var(--color-border); */
                 background: linear-gradient(to right, #ff6a00, #00cfff);
                 color: white;
             }

             .listings-btn-outline:hover {
                 background-color: var(--color-border);
                 border-color: var(--color-border);
                 color: white;
             }

             .listings-btn-orange {
                 background-color: var(--color-accent-orange);
                 border-color: var(--color-accent-orange);
                 color: white;
             }

             .listings-btn-orange:hover {
                 background-color: #ea580c;
                 border-color: #ea580c;
                 color: white;
                 transform: translateY(-1px);
             }

             /* Updates Section Styles */
             .updates-form-select {
                 background-color: var(--color-secondary);
                 border-color: var(--color-border);
                 color: white;
             }

             .updates-form-select:focus {
                 border-color: var(--color-accent-orange);
                 box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
             }

             .updates-card {
                 background-color: var(--color-card-bg) !important;
                 border-color: var(--color-border) !important;
             }

             /* .updates-stat-item:hover {
                    color: white !important;
                    background-color: var(--color-secondary) !important;
                    transform: translateY(-1px);
                } */

             .updates-stat-item.liked {
                 color: var(--color-accent-orange) !important;
             }

             .custom-image-mystore {
                 width: 200px;
                 height: 240px;
                 border-radius: var(--border-radius);
             }

             .listings-btn-orange {
                 padding: 8px 2rem;
             }

             @media (max-width: 768px) {
                 .custom-image-mystore {
                     width: 90px;
                     height: 110px;
                 }

                 .listings-btn-orange {
                     padding: 6px;
                 }
             }

             #toggle-content {
                 transition: all 0.7s ease-in-out;
             }

             /* about us section */
             .about-us-image img {
                 width: 100%;
                 height: auto;
                 display: block;
                 max-width: 100%;
             }

             .cardWrap {
                 padding: 30px 0px 0px 0px !important;
                 margin-left: 10px;
                 margin-right: 10px;
             }

             @media (max-width: 768px) {
                 .cardWrap {
                     padding: 13px 0 0 0;
                 }
             }

             /* faq section */
             .faq-item {
                 background: #1e293b;
                 border: 2px solid #444;
                 margin-bottom: 1rem;
             }

             .faq-item:hover {
                 border-color: var(--color-accent-teal);
                 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             }

             .faq-button {
                 background: transparent;
                 color: #eee;
                 border: none;
             }

             .faq-button:not(.collapsed) {
                 /* background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary)); */
                 color: #000000;
             }

             .faq-button:focus {
                 box-shadow: none;
             }

             .faq-content {
                 background: #111827;
                 color: #aaa;
                 border-top: 1px solid #444;
             }

             .faq-animation {
                 opacity: 0;
                 transform: translateY(20px);
                 animation: fadeInUp 0.6s ease forwards;
             }

             @keyframes fadeInUp {
                 to {
                     opacity: 1;
                     transform: translateY(0);
                 }
             }

             /* blog page */
             .blog-header {
                 background: var(--color-primary);
                 border-bottom: 1px solid #334155;
             }

             /* Search */
             .blog-search {
                 transition: all 0.3s;
                 color: white;
             }

             .blog-search:focus-within {
                 border-color: #06b6d4 !important;
                 box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
                 transform: translateY(-1px);
             }

             /* Tabs */
             .blog-tabs {
                 scrollbar-width: none;
             }

             .blog-tabs::-webkit-scrollbar {
                 display: none;
             }

             .blog-tab-link {
                 color: black;
                 font-weight: 600;
                 transition: all 0.3s;
                 border: none;
                 background: transparent;
                 white-space: nowrap;
                 text-decoration: none;
             }

             .blog-tab-link.active {
                 background: linear-gradient(to right, #ff6a00, #00cfff);
                 color: white;
                 font-weight: 700;
             }

             /* Cards */
             .blog-card {
                 transition: all 0.3s;
                 overflow: hidden;
                 background-color: var(--color-primary);
             }

             /* Tab Content */
             .blog-tab-content {
                 display: none;
                 animation: fadeIn 0.5s ease-out;
             }

             .blog-tab-content.active {
                 display: block;
             }

             @keyframes fadeIn {
                 from {
                     opacity: 0;
                     transform: translateY(20px);
                 }

                 to {
                     opacity: 1;
                     transform: translateY(0);
                 }
             }

             /* dashboard section css start */
             .bg-darkblue {
                 background-color: var(--color-secondary) !important;
                 color: var(--color-text-primary);
                 border: var(--border-color);
             }

             .sidebar-stretch {
                 min-height: 590px;
             }

             .text-muted.small {
                 color: var(--color-text-muted) !important;
             }

             .time-filters-wrapper {
                 background-color: var(--color-search-bg);
                 /* padding: 0.5rem; */
                 border-radius: var(--border-radius-lg);
                 display: inline-flex;
                 gap: 1rem;
                 overflow-y: auto;
                 scrollbar-width: none;
             }

             .time-btn {
                 background: transparent;
                 color: var(--color-text-primary);
                 border: none;
                 padding: 0.5rem 1.5rem;
                 border-radius: var(--border-radius-lg);
                 transition: var(--transition);
             }

             .time-btn.active {
                 background-color: var(--color-secondary);
             }

             .time-btn:hover {
                 background-color: var(--color-border);
             }

             .action-card {
                 color: var(--color-text-primary);
                 padding: 1rem;
                 border-radius: var(--border-radius);
                 min-width: 200px;
                 background-color: var(--color-secondary);
                 box-shadow: var(--shadow-md);
             }

             @media (max-width: 768px) {
  .action-card {
    width: 100% !important;
    min-width: unset; /* optional: remove fixed min-width */
  }
}

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

             .custom-card {
                 /* background-color: var(--color-primary); */
                 background-color: var(--color-secondary);
                 /* border: var(--border-color); */
                 border-radius: var(--border-radius-lg);
             }

             .custom-select,
             .custom-input {
                 background-color: var(--color-search-bg);
                 border: var(--border-color);
                 color: var(--color-text-primary);
                 border-radius: var(--border-radius);
             }

             .custom-select:focus,
             .custom-input:focus {
                 background-color: var(--color-search-bg);
                 border-color: var(--color-accent-orange);
                 color: var(--color-text-primary);
                 box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25);
             }

             .custom-select option {
                 background-color: var(--color-search-bg);
                 color: var(--color-text-primary);
             }

             .custom-input::placeholder {
                 color: white !important;
                 opacity: 0.5;
                 font-size: 15px;
                 letter-spacing: 1px;
                 margin-right: 2px;
             }

             .alert-info.bg-secondary {
                 background-color: var(--color-secondary) !important;
                 color: var(--color-text-primary);
                 border: var(--border-color) !important;
             }

             /* inventory */
             .InventoryCustomCard {
                 background-color: var(--color-secondary);
                 border: var(--border-color);
                 border-radius: var(--border-radius-lg);
             }

             .InventoryCustomInput {
                 background-color: var(--color-search-bg);
                 border: var(--border-color);
                 color: var(--color-text-primary);
                 border-radius: var(--border-radius);
             }

             .InventoryCustomInput:focus {
                 background-color: var(--color-search-bg);
                 border-color: var(--color-accent-teal);
                 color: var(--color-text-primary);
                 box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
             }

             .InventoryFilterItem {
                 display: flex;
                 align-items: center;
                 padding: 0.75rem 1rem;
                 margin-bottom: 0.5rem;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 text-decoration: none;
                 color: var(--color-text-primary);
                 background-color: var(--color-primary);
             }

             .InventoryFilterItem:hover {
                 background-color: rgba(255, 255, 255, 0.05);
                 color: var(--color-text-primary);
                 text-decoration: none;
             }

             .InventoryFilterItem.active {
                 background-color: rgba(78, 205, 196, 0.1);
                 color: var(--color-accent-teal);
             }

             .InventoryGameDot {
                 width: 12px;
                 height: 12px;
                 border-radius: 50%;
                 margin-right: 0.75rem;
             }

             .InventoryDotPokemon {
                 background-color: #ef4444;
             }

             .InventoryDotMagic {
                 background-color: #3b82f6;
             }

             .InventoryDotYugioh {
                 background-color: #eab308;
             }

             .InventoryDotOnepiece {
                 background-color: var(--color-accent-teal);
             }

             .InventoryDotLorcana {
                 background-color: var(--color-accent-purple);
             }

             .nav-pills .nav-link {
                 background-color: transparent;
                 border: var(--border-color);
                 color: var(--color-text-muted);
                 border-radius: var(--border-radius);
                 margin-right: 0.5rem;
             }

             .nav-pills .nav-link.active {
                 background-color: var(--color-accent-teal);
                 color: white;
             }

             .nav-pills .nav-link:hover {
                 background-color: var(--color-secondary);
                 color: var(--color-text-primary);
             }

             .InventoryTableDarkCustom {
                 background-color: var(--color-secondary);
                 color: var(--color-text-primary);
             }

             .InventoryTableDarkCustom th {
                 border-color: var(--color-border);
                 color: var(--color-text-muted);
                 font-weight: 500;
                 font-size: 0.875rem;
                 text-transform: uppercase;
                 letter-spacing: 0.05em;
             }

             .InventoryTableDarkCustom td {
                 border-color: var(--color-border);
                 vertical-align: middle;
                 background-color: var(--color-secondary);
                 color: white;
             }

             .InventoryBadgeGame {
                 font-size: 0.75rem;
                 padding: 0.25rem 0.75rem;
                 border-radius: 1rem;
             }

             .InventoryActionCard {
                 border-radius: var(--border-radius-lg);
                 padding: 2rem;
                 color: white;
                 text-decoration: none;
                 transition: var(--transition);
             }

             .InventoryActionCard:hover {
                 transform: translateY(-2px);
                 color: white;
                 text-decoration: none;
             }

             .InventoryCardPurple {
                 background-color: #431c6580;
             }

             .InventoryCardTeal {
                 background-color: #12576ab9;
             }

             .InventoryCardOrange {
                 background-color: #893d0896;
             }

             .InventoryTabContent {
                 display: none;
             }

             .InventoryTabContent.active {
                 display: block;
             }

             .InventoryStatusBadge {
                 font-size: 0.7rem;
                 padding: 0.2rem 0.6rem;
             }

             .InventoryTextSubtitle {
                 color: var(--color-subtitle);
             }

             .InventoryBtnTeal {
                 background-color: var(--color-accent-teal);
                 border-color: var(--color-accent-teal);
                 color: white;
             }

             /* storefront */
             .storefront-container {
                 max-width: 1200px;
                 margin: 0 auto;
                 padding: 1.5rem;
             }

             .storefront-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: flex-start;
                 margin-bottom: 1.5rem;
             }

             .storefront-title {
                 font-size: 1.875rem;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 margin-bottom: 0.25rem;
             }

             .storefront-subtitle {
                 font-size: 0.875rem;
                 color: var(--color-subtitle);
             }

             .preview-btn {
                 background-color: var(--color-accent-orange);
                 color: white;
                 padding: 0.5rem 1rem;
                 border: none;
                 border-radius: var(--border-radius);
                 font-weight: 600;
                 cursor: pointer;
                 transition: var(--transition);
                 font-size: 0.875rem;
             }

             .preview-btn:hover {
                 background-color: #ea580c;
             }

             .tab-navigation {
                 display: flex;
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius);
                 padding: 0.25rem;
                 margin-bottom: 1.5rem;
                 border: var(--border-color);
             }

             .tab-btn {
                 flex: 1;
                 padding: 0.75rem 1rem;
                 background: transparent;
                 border: none;
                 color: var(--color-text-muted);
                 cursor: pointer;
                 border-radius: 6px;
                 transition: var(--transition);
                 font-size: 0.875rem;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 0.5rem;
             }

             .tab-btn.active {
                 background-color: var(--color-primary);
                 color: var(--color-text-primary);
                 box-shadow: var(--shadow-sm);
             }

             .tab-btn:hover:not(.active) {
                 color: var(--color-text-primary);
                 background-color: rgba(255, 255, 255, 0.05);
             }

             .tab-content {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius);
                 padding: 1.5rem;
                 border: var(--border-color);
                 min-height: 500px;
             }

             .tab-panel {
                 display: none;
             }

             .tab-panel.active {
                 display: block;
             }

             .section-header {
                 display: flex;
                 align-items: center;
                 gap: 0.5rem;
                 margin-bottom: 0.75rem;
             }

             .section-title {
                 font-size: 1.25rem;
                 font-weight: 600;
                 color: var(--color-text-primary);
                 margin-top: 10px;
             }

             .section-description {
                 color: var(--color-text-muted);
                 margin-bottom: 1.5rem;
                 font-size: 0.875rem;
             }

             /* Featured Products Styles */
             .coming-soon {
                 text-align: center;
                 padding: 3rem 1rem;
             }

             .coming-soon h3 {
                 font-size: 1.125rem;
                 color: var(--color-text-primary);
                 margin-bottom: 0.5rem;
             }

             .coming-soon p {
                 font-size: 0.875rem;
                 color: var(--color-text-muted);
             }

             /* Store Updates Styles */
             .update-form {
                 margin-bottom: 1.5rem;
             }

             .update-textarea {
                 width: 100%;
                 min-height: 80px;
                 background-color: var(--color-search-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 padding: 0.75rem;
                 color: var(--color-text-primary);
                 font-size: 0.875rem;
                 resize: vertical;
                 margin-bottom: 0.75rem;
             }

             .update-textarea::placeholder {
                 color: var(--color-search-text);
             }

             .form-actions {
                 display: flex;
                 gap: 0.75rem;
                 justify-content: space-between;
                 align-items: center;
             }

             .add-image-btn {
                 background: transparent;
                 border: 1px solid var(--color-border);
                 color: var(--color-text-muted);
                 padding: 0.5rem 0.75rem;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 gap: 0.375rem;
                 font-size: 0.875rem;
             }

             .add-image-btn:hover {
                 border-color: var(--color-accent-orange);
                 color: var(--color-text-primary);
             }

             .post-update-btn {
                 background-color: var(--color-accent-orange);
                 color: white;
                 padding: 0.5rem 1rem;
                 border: none;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 gap: 0.375rem;
                 font-weight: 600;
                 font-size: 0.875rem;
             }

             .post-update-btn:hover {
                 background-color: #ea580c;
             }

             .updates-list {
                 display: flex;
                 flex-direction: column;
                 gap: 1rem;
             }

             .update-item {
                 background-color: var(--color-primary);
                 border-radius: var(--border-radius);
                 padding: 1rem;
                 border: 1px solid var(--color-border);
             }

             .update-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 0.75rem;
             }

             .update-date {
                 color: var(--color-text-muted);
                 font-size: 0.75rem;
             }

             .update-actions {
                 display: flex;
                 gap: 0.25rem;
             }

             .update-action-btn {
                 background: transparent;
                 border: none;
                 color: var(--color-text-muted);
                 cursor: pointer;
                 padding: 0.25rem;
                 border-radius: 4px;
                 transition: var(--transition);
             }

             .update-action-btn:hover {
                 color: var(--color-text-primary);
                 background-color: rgba(255, 255, 255, 0.1);
             }

             .update-content {
                 color: var(--color-text-primary);
                 margin-bottom: 0.75rem;
                 line-height: 1.5;
                 font-size: 0.875rem;
             }

             .update-image {
                 width: 100%;
                 max-width: 300px;
                 height: auto;
                 border-radius: var(--border-radius);
                 margin: 0.75rem 0;
             }

             .update-likes {
                 display: flex;
                 align-items: center;
                 gap: 0.375rem;
                 color: var(--color-text-muted);
                 font-size: 0.75rem;
             }

             /* Social Media Styles */
             .video-input-section {
                 margin-bottom: 1.5rem;
             }

             .video-input-container {
                 display: flex;
                 gap: 0.75rem;
                 align-items: center;
             }

             .video-url-input {
                 flex: 1;
                 background-color: var(--color-search-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 padding: 0.75rem;
                 color: var(--color-text-primary);
                 font-size: 0.875rem;
             }

             .video-url-input::placeholder {
                 color: var(--color-search-text);
             }

             .add-video-btn {
                 background-color: var(--color-accent-orange);
                 color: white;
                 padding: 0.75rem 1rem;
                 border: none;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 gap: 0.375rem;
                 font-weight: 600;
                 white-space: nowrap;
                 font-size: 0.875rem;
             }

             .add-video-btn:hover {
                 background-color: #ea580c;
             }

             .videos-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                 gap: 1rem;
             }

             .video-card {
                 background-color: var(--color-primary);
                 border-radius: var(--border-radius);
                 padding: 0.75rem;
                 border: 1px solid var(--color-border);
                 position: relative;
             }

             .video-card-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: flex-start;
                 margin-bottom: 0.75rem;
             }

             .video-title {
                 font-size: 0.875rem;
                 font-weight: 600;
                 color: var(--color-text-primary);
                 flex: 1;
                 margin-right: 0.75rem;
             }

             .video-actions {
                 display: flex;
                 gap: 0.25rem;
             }

             .video-action-btn {
                 background: transparent;
                 border: none;
                 color: var(--color-text-muted);
                 cursor: pointer;
                 padding: 0.25rem;
                 border-radius: 4px;
                 transition: var(--transition);
             }

             .video-action-btn:hover {
                 color: var(--color-text-primary);
                 background-color: rgba(255, 255, 255, 0.1);
             }

             .video-thumbnail {
                 width: 100%;
                 height: 160px;
                 background-color: var(--color-search-bg);
                 border-radius: var(--border-radius);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin-bottom: 0.75rem;
                 position: relative;
                 overflow: hidden;
             }

             .video-thumbnail img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
             }

             .play-button {
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 width: 48px;
                 height: 48px;
                 background-color: #ff0000;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 cursor: pointer;
                 transition: var(--transition);
             }

             .play-button:hover {
                 transform: translate(-50%, -50%) scale(1.1);
             }

             .play-icon {
                 width: 0;
                 height: 0;
                 border-left: 16px solid white;
                 border-top: 10px solid transparent;
                 border-bottom: 10px solid transparent;
                 margin-left: 3px;
             }

             .video-footer {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
             }

             .video-date {
                 color: var(--color-text-muted);
                 font-size: 0.75rem;
             }

             .share-btn {
                 background: transparent;
                 border: none;
                 color: var(--color-text-muted);
                 cursor: pointer;
                 display: flex;
                 align-items: center;
                 gap: 0.375rem;
                 padding: 0.375rem;
                 border-radius: var(--border-radius);
                 transition: var(--transition);
                 font-size: 0.75rem;
             }

             .share-btn:hover {
                 color: var(--color-text-primary);
                 background-color: rgba(255, 255, 255, 0.1);
             }

             .video-quality {
                 position: absolute;
                 bottom: 8px;
                 left: 8px;
                 background-color: rgba(0, 0, 0, 0.8);
                 color: white;
                 padding: 0.125rem 0.375rem;
                 border-radius: 4px;
                 font-size: 0.75rem;
                 font-weight: 600;
             }

             /* Icons */
             .icon {
                 width: 16px;
                 height: 16px;
                 fill: currentColor;
             }

             .icon-sm {
                 width: 14px;
                 height: 14px;
             }

             /* Responsive */
             @media (max-width: 768px) {
                 .storefront-container {
                     padding: 1rem;
                 }

                 .storefront-header {
                     flex-direction: column;
                     gap: 1rem;
                     align-items: flex-start;
                 }

                 .storefront-title {
                     font-size: 1.5rem;
                 }

                 .tab-navigation {
                     flex-direction: column;
                 }

                 .video-input-container {
                     flex-direction: column;
                 }

                 .videos-grid {
                     grid-template-columns: 1fr;
                 }
             }

             /* analytics */
             .analytics--container {
                 max-width: 1400px;
                 margin: 0 auto;
                 padding: 20px;
             }

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

             .analytics--title {
                 font-size: 32px;
                 font-weight: 700;
                 margin: 0 0 4px 0;
                 color: var(--color-text-primary);
             }

             .analytics--subtitle {
                 color: var(--color-subtitle);
                 font-size: 16px;
                 margin: 0;
             }

             .analytics--actions {
                 display: flex;
                 gap: 12px;
             }

             .analytics--btn {
                 background-color: var(--color-secondary);
                 border: 1px solid var(--color-border);
                 color: var(--color-text-primary);
                 padding: 10px 16px;
                 border-radius: var(--border-radius);
                 font-size: 14px;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 cursor: pointer;
             }

             .analytics--btn:hover {
                 background-color: var(--color-border);
                 color: var(--color-text-primary);
                 border-color: #4b5563;
             }

             .analytics--time-selector {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius);
                 padding: 4px;
                 margin-bottom: 24px;
                 display: inline-flex;
                 border: 1px solid var(--color-border);
             }

             .analytics--time-btn {
                 background: none;
                 border: none;
                 color: var(--color-text-muted);
                 padding: 8px 20px;
                 border-radius: 4px;
                 transition: var(--transition);
                 font-size: 14px;
                 cursor: pointer;
             }

             .analytics--time-btn.analytics--active {
                 background-color: var(--color-primary);
                 color: var(--color-text-primary);
             }

             .analytics--time-btn:hover {
                 color: var(--color-text-primary);
             }

             .analytics--card {
                 background-color: var(--color-secondary);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 padding: 24px;
                 height: 100%;
             }

             .analytics--grid {
                 display: grid;
                 gap: 20px;
                 margin-bottom: 24px;
             }

             .analytics--grid-4 {
                 grid-template-columns: repeat(4, 1fr);
             }

             .analytics--grid-2-1 {
                 grid-template-columns: 2fr 1fr;
             }

             .analytics--grid-3 {
                 grid-template-columns: repeat(3, 1fr);
             }

             .analytics--kpi-card {
                 position: relative;
             }

             .analytics--kpi-icon {
                 position: absolute;
                 top: 24px;
                 right: 24px;
                 width: 40px;
                 height: 40px;
                 border-radius: var(--border-radius);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-size: 18px;
             }

             .analytics--kpi-icon.analytics--revenue {
                 background-color: rgba(34, 197, 94, 0.15);
                 color: #22c55e;
             }

             .analytics--kpi-icon.analytics--orders {
                 background-color: rgba(59, 130, 246, 0.15);
                 color: #3b82f6;
             }

             .analytics--kpi-icon.analytics--customers {
                 background-color: rgba(168, 85, 247, 0.15);
                 color: #a855f7;
             }

             .analytics--kpi-icon.analytics--value {
                 background-color: rgba(6, 182, 212, 0.15);
                 color: #06b6d4;
             }

             .analytics--kpi-title {
                 color: var(--color-text-muted);
                 font-size: 14px;
                 margin-bottom: 8px;
                 font-weight: 500;
             }

             .analytics--kpi-value {
                 font-size: 32px;
                 font-weight: 700;
                 margin-bottom: 8px;
                 color: var(--color-text-primary);
                 line-height: 1.2;
             }

             .analytics--kpi-change {
                 font-size: 14px;
                 color: #22c55e;
                 display: flex;
                 align-items: center;
                 gap: 4px;
             }

             .analytics--section-title {
                 font-size: 18px;
                 font-weight: 600;
                 margin-bottom: 4px;
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 color: var(--color-text-primary);
             }

             .analytics--section-subtitle {
                 color: var(--color-text-muted);
                 font-size: 14px;
                 margin-bottom: 24px;
             }

             .analytics--chart-container {
                 position: relative;
                 height: 280px;
             }

             .analytics--chart-container-small {
                 position: relative;
                 height: 200px;
             }

             .analytics--chart-container-pie {
                 position: relative;
                 height: 180px;
                 margin-bottom: 20px;
             }

             .analytics--legend {
                 display: flex;
                 flex-direction: column;
                 gap: 8px;
             }

             .analytics--legend-item {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 font-size: 14px;
             }

             .analytics--legend-left {
                 display: flex;
                 align-items: center;
                 gap: 8px;
             }

             .analytics--legend-dot {
                 width: 12px;
                 height: 12px;
                 border-radius: 50%;
                 flex-shrink: 0;
             }

             .analytics--comparison {
                 margin-top: 20px;
             }

             .analytics--comparison-item {
                 margin-bottom: 20px;
             }

             .analytics--comparison-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 8px;
             }

             .analytics--comparison-label {
                 font-size: 14px;
                 color: var(--color-text-primary);
             }

             .analytics--comparison-value {
                 font-weight: 600;
                 color: var(--color-text-primary);
                 font-size: 14px;
             }

             .analytics--comparison-bar {
                 height: 6px;
                 background-color: var(--color-border);
                 border-radius: 3px;
                 overflow: hidden;
             }

             .analytics--comparison-fill {
                 height: 100%;
                 border-radius: 3px;
             }

             .analytics--savings {
                 margin-top: 20px;
                 padding-top: 20px;
                 border-top: 1px solid var(--color-border);
             }

             .analytics--savings-highlight {
                 background-color: rgba(34, 197, 94, 0.1);
                 border: 1px solid rgba(34, 197, 94, 0.2);
                 border-radius: var(--border-radius);
                 padding: 12px;
                 margin-bottom: 16px;
             }

             .analytics--savings-text {
                 color: #22c55e;
                 font-size: 13px;
                 margin: 0;
             }

             .analytics--total-savings {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 4px;
             }

             .analytics--total-savings-label {
                 font-weight: 600;
                 color: var(--color-text-primary);
                 font-size: 16px;
             }

             .analytics--total-savings-value {
                 font-size: 24px;
                 font-weight: 700;
                 color: #22c55e;
             }

             .analytics--vs-text {
                 color: var(--color-text-muted);
                 font-size: 13px;
             }

             .analytics--demographics {
                 background-color: var(--color-secondary);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 padding: 24px;
             }

             .analytics--demographics-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: flex-start;
                 margin-bottom: 24px;
             }

             .analytics--demographics-content {
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 gap: 40px;
             }

             .analytics--demographics-column h6 {
                 color: var(--color-text-primary);
                 font-size: 14px;
                 font-weight: 600;
                 margin-bottom: 16px;
             }

             .analytics--demographics-row {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 16px;
             }

             .analytics--demographics-label {
                 font-size: 14px;
                 color: var(--color-text-primary);
                 margin-bottom: 4px;
             }

             .analytics--demographics-value {
                 font-weight: 600;
                 color: var(--color-text-primary);
                 font-size: 14px;
             }

             .analytics--demographics-bar {
                 height: 4px;
                 background-color: var(--color-border);
                 border-radius: 2px;
                 overflow: hidden;
                 width: 120px;
             }

             .analytics--demographics-fill {
                 height: 100%;
                 border-radius: 2px;
             }

             .analytics--preferences-item {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 12px;
             }

             .analytics--tag {
                 background-color: var(--color-border);
                 color: var(--color-text-primary);
                 padding: 4px 8px;
                 border-radius: 4px;
                 font-size: 12px;
                 font-weight: 500;
             }

             .analytics--view-all {
                 color: var(--color-accent-teal);
                 text-decoration: none;
                 font-size: 14px;
                 display: flex;
                 align-items: center;
                 gap: 4px;
                 font-weight: 500;
             }

             .analytics--view-all:hover {
                 color: var(--color-accent-teal);
                 text-decoration: none;
             }

             /* Responsive Design */
             @media (max-width: 1200px) {
                 .analytics--grid-4 {
                     grid-template-columns: repeat(2, 1fr);
                 }

                 .analytics--grid-2-1 {
                     grid-template-columns: 1fr;
                 }

                 .analytics--grid-3 {
                     grid-template-columns: 1fr;
                 }

                 .analytics--demographics-content {
                     grid-template-columns: 1fr;
                     gap: 24px;
                 }
             }

             @media (max-width: 768px) {
                 /* body {
                     padding: 16px;
                 } */

                 .analytics--header {
                     flex-direction: column;
                     gap: 16px;
                 }

                 .analytics--actions {
                     width: 100%;
                 }

                 .analytics--btn {
                     flex: 1;
                     justify-content: center;
                 }

                 .analytics--grid-4 {
                     grid-template-columns: 1fr;
                 }
             }

             @media (max-width: 400px) {
                 .analytics--card {
                     max-width: 100%;
                 }
             }

             /* order management */
             .order--container {
                 padding: 2rem;
                 max-width: 100%;
             }

             .order--header {
                 display: flex;
                 justify-content: space-between;
                 align-items: flex-start;
                 margin-bottom: 2rem;
                 flex-wrap: wrap;
                 gap: 1rem;
             }

             .order--title {
                 font-size: 2rem;
                 font-weight: 700;
                 color: var(--color-text-primary);
                 margin-bottom: 0.5rem;
             }

             .order--subtitle {
                 color: var(--color-subtitle);
                 font-size: 1rem;
             }

             .order--actions {
                 display: flex;
                 gap: 1rem;
                 align-items: center;
             }

             .order--btn {
                 padding: 0.75rem 1.5rem;
                 border-radius: var(--border-radius);
                 border: none;
                 font-weight: 500;
                 cursor: pointer;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 gap: 0.5rem;
             }

             .order--btn-filter {
                 background-color: var(--color-secondary);
                 color: var(--color-text-primary);
                 border: var(--border-color);
             }

             .order--btn-export {
                 background-color: #8b5cf6;
                 color: white;
             }

             .order--btn:hover {
                 transform: translateY(-1px);
                 box-shadow: var(--shadow-md);
             }

             .order--stats {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                 gap: 1rem;
                 margin-bottom: 2rem;
             }

             .order--stat-card {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius-lg);
                 padding: 1.5rem;
                 border: var(--border-color);
                 transition: var(--transition);
                 cursor: pointer;
                 position: relative;
             }

             .order--stat-card.active {
                 border-color: var(--color-accent-teal);
                 box-shadow: var(--glow-teal);
             }

             .order--stat-card:hover {
                 transform: translateY(-2px);
                 box-shadow: var(--shadow-lg);
             }

             .order--stat-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 1rem;
             }

             .order--stat-title {
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
                 font-weight: 500;
             }

             .order--stat-icon {
                 font-size: 1.2rem;
                 opacity: 0.7;
             }

             .order--stat-number {
                 font-size: 2rem;
                 font-weight: 700;
                 color: var(--color-text-primary);
             }

             .order--alert {
                 background-color: rgba(249, 115, 22, 0.1);
                 border: 1px solid var(--color-accent-orange);
                 border-radius: var(--border-radius-lg);
                 padding: 1rem 1.5rem;
                 margin-bottom: 2rem;
                 display: flex;
                 align-items: center;
                 gap: 1rem;
             }

             .order--alert-icon {
                 color: var(--color-accent-orange);
                 font-size: 1.2rem;
             }

             .order--alert-content {
                 flex: 1;
             }

             .order--alert-title {
                 color: var(--color-accent-orange);
                 font-weight: 600;
                 margin-bottom: 0.25rem;
             }

             .order--alert-text {
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
             }

             .order--alert-btn {
                 background-color: transparent;
                 border: 1px solid var(--color-accent-orange);
                 color: var(--color-accent-orange);
                 padding: 0.5rem 1rem;
                 border-radius: var(--border-radius);
                 font-size: 0.9rem;
                 cursor: pointer;
                 transition: var(--transition);
             }

             .order--alert-btn:hover {
                 background-color: var(--color-accent-orange);
                 color: white;
             }

             .order--search-section {
                 margin-bottom: 2rem;
             }

             .order--search-bar {
                 background-color: var(--color-search-bg);
                 border: var(--border-color);
                 border-radius: var(--border-radius);
                 padding: 0.75rem 1rem;
                 color: var(--color-search-text);
                 width: 100%;
                 max-width: 500px;
                 margin-bottom: 1rem;
             }

             .order--search-bar::placeholder {
                 color: var(--color-text-muted);
             }

             .order--search-bar:focus {
                 outline: none;
                 border-color: var(--color-accent-teal);
                 box-shadow: var(--glow-teal);
             }

             .order--filter-tabs {
                 display: flex;
                 gap: 0.5rem;
                 /* flex-wrap: wrap; */
             }

             .order--filter-tab {
                 background-color: transparent;
                 border: none;
                 color: var(--color-text-muted);
                 padding: 0.5rem 1rem;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 font-size: 0.9rem;
             }

             .order--filter-tab.active,
             .order--filter-tab:hover {
                 background-color: var(--color-secondary);
                 color: var(--color-text-primary);
             }

             .order--table-section {
                 background-color: var(--color-secondary);
                 border-radius: var(--border-radius-lg);
                 overflow: hidden;
                 border: var(--border-color);
             }

             .order--table-header {
                 padding: 1.5rem;
                 border-bottom: var(--border-color);
             }

             .order--table-title {
                 display: flex;
                 align-items: center;
                 gap: 0.5rem;
                 font-size: 1.2rem;
                 font-weight: 600;
                 margin-bottom: 0.5rem;
             }

             .order--table-subtitle {
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
             }

             .order--table {
                 width: 100%;
                 border-collapse: collapse;
             }

             .order--table th {
                 background-color: var(--color-secondary);
                 color: var(--color-text-muted);
                 font-weight: 500;
                 font-size: 0.85rem;
                 text-transform: uppercase;
                 letter-spacing: 0.5px;
                 padding: 1rem;
                 text-align: left;
                 border-bottom: var(--border-color);
             }

             .order--table td {
                 padding: 1rem;
                 border-bottom: 1px solid #2a2a2a;
                 vertical-align: middle;
             }

             .order--table tr:hover {
                 background-color: rgba(255, 255, 255, 0.02);
             }

             .order--order-id {
                 color: var(--color-accent-teal);
                 font-weight: 600;
                 font-size: 0.9rem;
             }

             .order--customer-name {
                 color: var(--color-text-primary);
                 font-weight: 500;
                 margin-bottom: 0.25rem;
             }

             .order--customer-email {
                 color: var(--color-text-muted);
                 font-size: 0.8rem;
             }

             .order--date {
                 color: var(--color-text-muted);
                 font-size: 0.9rem;
             }

             .order--items {
                 color: var(--color-text-primary);
                 font-size: 0.9rem;
                 line-height: 1.4;
             }

             .order--total {
                 color: var(--color-text-primary);
                 font-weight: 600;
                 font-size: 1rem;
             }

             .order--status {
                 display: inline-flex;
                 align-items: center;
                 gap: 0.5rem;
                 padding: 0.4rem 0.8rem;
                 border-radius: 20px;
                 font-size: 0.8rem;
                 font-weight: 500;
             }

             .order--status.pending {
                 background-color: rgba(249, 115, 22, 0.2);
                 color: var(--color-accent-orange);
             }

             .order--status.shipped {
                 background-color: rgba(59, 130, 246, 0.2);
                 color: #60a5fa;
             }

             .order--status.delivered {
                 background-color: rgba(34, 197, 94, 0.2);
                 color: #4ade80;
             }

             .order--status.refunded {
                 background-color: rgba(239, 68, 68, 0.2);
                 color: #f87171;
             }

             .order--status.cancelled {
                 background-color: rgba(107, 114, 128, 0.2);
                 color: #9ca3af;
             }

             .order--actions-cell {
                 display: flex;
                 gap: 0.5rem;
                 align-items: center;
             }

             .order--action-btn {
                 background: none;
                 border: none;
                 color: var(--color-text-muted);
                 cursor: pointer;
                 padding: 0.5rem;
                 border-radius: var(--border-radius);
                 transition: var(--transition);
             }

             .order--action-btn:hover {
                 background-color: rgba(255, 255, 255, 0.1);
                 color: var(--color-text-primary);
             }

             .order--tracking-id {
                 color: var(--color-accent-teal);
                 font-size: 0.8rem;
                 margin-top: 0.25rem;
             }

             /* Responsive Design */
             @media (max-width: 768px) {
                 .order--container {
                     padding: 1rem;
                 }

                 .order--header {
                     flex-direction: column;
                     align-items: stretch;
                 }

                 .order--actions {
                     justify-content: stretch;
                 }

                 .order--btn {
                     flex: 1;
                     justify-content: center;
                 }

                 .order--stats {
                     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                 }

                 .order--table-section {
                     overflow-x: auto;
                 }

                 .order--table {
                     min-width: 800px;
                 }

                 .order--filter-tabs {
                             overflow-x: auto;
        scrollbar-width: none;
                 }
             }

             @media (max-width: 480px) {
                 .order--title {
                     font-size: 1.5rem;
                 }

                 .order--stats {
                     grid-template-columns: 1fr;
                 }

                 .order--stat-card {
                     padding: 1rem;
                 }

                 .order--table th,
                 .order--table td {
                     padding: 0.75rem 0.5rem;
                 }
             }

             .account-container {
                 min-height: 100vh;
             }

             /* Fixed sidebar to match image exactly */
             .account-sidebar {
                 background: var(--color-secondary);
                 min-height: 100vh;
                 padding: 2rem 0;
                 position: relative;
             }

             .account-nav {
                 padding: 0 1rem;
             }

             .account-nav-item {
                 display: flex;
                 align-items: center;
                 gap: 1rem;
                 padding: 1rem 1.5rem;
                 margin-bottom: 0.5rem;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 color: var(--color-text-muted);
                 font-weight: 500;
             }

             .account-nav-item:hover {
                 background: rgba(78, 205, 196, 0.1);
                 color: var(--color-accent-teal);
             }

             .account-nav-item.active {
                 background: rgba(78, 205, 196, 0.15);
                 color: var(--color-accent-teal);
                 border-left: 3px solid var(--color-accent-teal);
                 margin-left: -1px;
             }

             .account-nav-item i {
                 font-size: 1.1rem;
                 width: 20px;
                 text-align: center;
             }

             /* Fixed main content layout to match image */
             .account-main {
                 padding: 2rem;
                 background: var(--color-primary);
                 min-height: 100vh;
             }

             /* Redesigned profile header to match image layout exactly */
             .account-profile-header {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: 2rem;
                 padding: 0;
                 background: transparent;
                 border: none;
             }

             .account-profile-left {
                 display: flex;
                 align-items: center;
                 gap: 1.5rem;
             }

             .account-profile-right {
                 display: flex;
                 align-items: center;
             }

             .account-actions-row {
                 display: flex;
                 align-items: center;
                 gap: 2rem;
             }

             .account-divider {
                 width: 1px;
                 height: 40px;
                 background: var(--color-border);
             }

             .account-avatar {
                 width: 80px;
                 height: 80px;
                 border-radius: 100%;
                 background: transparent;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 border: 5px solid var(--color-accent-teal);
                 position: relative;
             }

             .account-avatar-text {
                 font-size: 2rem;
                 font-weight: bold;
                 color: var(--color-accent-teal);
             }

             .account-username {
                 font-size: 2rem;
                 margin-bottom: 0.5rem;
                 color: var(--color-accent-teal);
                 font-weight: 600;
             }

             .account-email {
                 color: var(--color-text-muted);
                 margin-bottom: 1rem;
                 display: flex;
                 align-items: center;
                 font-size: 1rem;
             }

             .account-badge {
                 background: linear-gradient(135deg, var(--color-accent-orange), #ff6b35);
                 color: white;
                 padding: 0.4rem 1rem;
                 border-radius: 20px;
                 font-size: 0.85rem;
                 font-weight: 600;
                 display: inline-block;
             }

             /* Fixed toggle and button styling to match image */
             .account-change-avatar {
                 background: transparent;
                 border: 1px solid var(--color-accent-teal);
                 color: var(--color-accent-teal);
                 padding: 0.6rem 1.2rem;
                 border-radius: var(--border-radius);
                 cursor: pointer;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 font-size: 0.9rem;
                 font-weight: 500;
             }


             @media (max-width: 768px) {
  /* Sidebar horizontally scrollable */
  .account-sidebar {
    min-height: auto !important;
    padding: 1rem 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    background: var(--color-secondary) !important;
  }

  /* Navigation horizontally aligned */
  .account-nav {
    display: flex !important;
    gap: 0.5rem !important;
    padding: 0 1rem !important;
  }

  /* Each nav item styled like scrollable button */
  .account-nav-item {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.8rem !important;
    min-width: 110px !important;
    border-radius: var(--border-radius) !important;
    text-align: center !important;
  }

  /* Icons adjusted */
  .account-nav-item i {
    font-size: 1.3rem !important;
    margin-bottom: 0.4rem !important;
  }
}


             .account-change-avatar:hover {
                 background: var(--color-accent-teal);
                 color: white;
             }

             .account-seller-toggle {
                 display: flex;
                 align-items: center;
                 gap: 1rem;
             }

             .account-toggle-label {
                 color: var(--color-text-primary);
                 font-weight: 500;
                 font-size: 1rem;
             }

             .account-toggle-switch {
                 position: relative;
             }

             .account-toggle-input {
                 display: none;
             }

             .account-toggle-slider {
                 display: block;
                 width: 60px;
                 height: 30px;
                 background: var(--color-border);
                 border-radius: 30px;
                 cursor: pointer;
                 transition: var(--transition);
                 position: relative;
             }

             .account-toggle-slider::before {
                 content: "";
                 position: absolute;
                 top: 3px;
                 left: 3px;
                 width: 24px;
                 height: 24px;
                 background: white;
                 border-radius: 50%;
                 transition: var(--transition);
             }

             .account-toggle-input:checked+.account-toggle-slider {
                 background: var(--color-accent-teal);
                 box-shadow: 0 0 10px rgba(78, 205, 196, 0.4);
             }

             .account-toggle-input:checked+.account-toggle-slider::before {
                 transform: translateX(30px);
             }

             /* Fixed account details section styling */
             .account-details-section {
                 background: var(--color-secondary);
                 padding: 2rem;
                 border-radius: var(--border-radius-lg);
                 border: 1px solid #374151;
             }

             .account-section-title {
                 font-size: 1.8rem;
                 margin-bottom: 0.5rem;
                 color: var(--color-text-primary);
                 font-weight: 600;
             }

             .account-section-subtitle {
                 color: var(--color-text-muted);
                 margin-bottom: 2rem;
                 font-size: 1rem;
             }

             .account-form-group {
                 margin-bottom: 1.5rem;
             }

             .account-label {
                 display: block;
                 margin-bottom: 0.5rem;
                 color: var(--color-text-primary);
                 font-weight: 500;
                 font-size: 0.95rem;
             }

             .account-input,
             .account-textarea {
                 width: 100%;
                 padding: 1rem;
                 background: var(--color-search-bg);
                 border: 1px solid var(--color-border);
                 border-radius: var(--border-radius);
                 color: var(--color-text-primary);
                 transition: var(--transition);
                 font-size: 1rem;
             }

             .account-input:focus,
             .account-textarea:focus {
                 outline: none;
                 border-color: var(--color-accent-teal);
                 box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
             }

             .account-input:disabled {
                 opacity: 0.6;
                 cursor: not-allowed;
                 background: #1a1f2e;
             }

             .account-help-text {
                 color: var(--color-text-muted);
                 font-size: 0.85rem;
                 margin-top: 0.5rem;
             }

             .account-save-btn {
                 background: linear-gradient(135deg, #8b5cf6, #06b6d4);
                 color: white;
                 border: none;
                 padding: 1rem 2rem;
                 border-radius: var(--border-radius);
                 font-weight: 600;
                 cursor: pointer;
                 transition: var(--transition);
                 display: flex;
                 align-items: center;
                 font-size: 1rem;
                 text-decoration: none;
             }

             .account-save-btn:hover {
                 transform: translateY(-2px);
                 box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
             }

             /* Enhanced celebration styles with better welcome board */
             .account-celebration-canvas {
                 position: fixed;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 pointer-events: none;
                 z-index: 9999;
             }

             /* Added overlay backdrop and fixed positioning for celebration message */
             .account-celebration-overlay {
                 position: fixed;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 background: rgba(0, 0, 0, 0.7);
                 backdrop-filter: blur(5px);
                 z-index: 9998;
                 opacity: 0;
                 visibility: hidden;
                 transition: all 0.3s ease;
             }

             .account-celebration-overlay.show {
                 opacity: 1;
                 visibility: visible;
             }

             .account-celebration-message {
                 position: fixed;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%) scale(0);
                 background: linear-gradient(135deg, #667eea 0%, #13084a 50%, #02124e 100%);
                 color: white;
                 padding: 3rem;
                 border-radius: 25px;
                 text-align: center;
                 z-index: 10000;
                 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
                 transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                 border: 2px solid rgba(255, 255, 255, 0.2);
                 backdrop-filter: blur(10px);
                 min-width: 500px;
                 max-width: 90vw;
                 position: fixed;
                 /* Ensure fixed positioning */
                 overflow: hidden;
                 max-height: 90vh;
                 /* overflow-y: auto; */
                 /* Ensure message stays in viewport */
                 top: 50vh;
                 left: 50vw;
                 margin: 0;
             }

             .account-celebration-message::before {
                 content: "";
                 position: absolute;
                 top: -50%;
                 left: -50%;
                 width: 200%;
                 height: 200%;
                 background: linear-gradient(45deg,
                         transparent,
                         rgba(255, 255, 255, 0.1),
                         transparent);
                 transform: rotate(45deg);
                 animation: shimmer 3s infinite;
             }

             .account-celebration-message.show {
                 transform: translate(-50%, -50%) scale(1);
                 animation: celebrationPulse 0.8s ease-out;
             }

             .account-celebration-icon {
                 font-size: 4rem;
                 margin-bottom: 1rem;
                 animation: iconBounce 2s ease-in-out infinite;
             }

             .account-celebration-title {
                 font-size: 2.5rem;
                 margin-bottom: 1.5rem;
                 font-weight: 700;
                 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
                 animation: titleGlow 2s ease-in-out infinite alternate;
             }

             .account-celebration-text {
                 font-size: 1.2rem;
                 margin-bottom: 1rem;
                 opacity: 0.95;
                 animation: textSlideIn 1s ease-out forwards;
             }

             .account-celebration-badges {
                 display: flex;
                 justify-content: center;
                 gap: 1rem;
                 flex-wrap: wrap;
                 margin: 2rem 0;
             }

             .account-celebration-badge {
                 background: rgba(255, 255, 255, 0.2);
                 padding: 0.6rem 1.2rem;
                 border-radius: 25px;
                 font-size: 0.95rem;
                 font-weight: 600;
                 border: 1px solid rgba(255, 255, 255, 0.3);
                 animation: badgeFloat 3s ease-in-out infinite;
                 backdrop-filter: blur(5px);
             }

             .account-welcome-board {
                 background: rgba(255, 255, 255, 0.1);
                 border-radius: 15px;
                 padding: 1.5rem;
                 margin-top: 2rem;
                 border: 1px solid rgba(255, 255, 255, 0.2);
                 backdrop-filter: blur(10px);
             }

             .account-welcome-title {
                 font-size: 1.3rem;
                 font-weight: 700;
                 margin-bottom: 1rem;
                 color: #ffd700;
                 text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
             }

             .account-welcome-features {
                 display: flex;
                 justify-content: space-around;
                 gap: 1rem;
                 flex-wrap: wrap;
             }

             .account-feature-item {
                 background: rgba(255, 255, 255, 0.15);
                 padding: 0.8rem 1rem;
                 border-radius: 20px;
                 font-size: 0.9rem;
                 font-weight: 600;
                 border: 1px solid rgba(255, 255, 255, 0.2);
                 animation: featureGlow 2s ease-in-out infinite alternate;
             }

             .account-celebration-sparkles {
                 position: absolute;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 pointer-events: none;
             }

             .account-sparkle {
                 position: absolute;
                 width: 8px;
                 height: 8px;
                 background: white;
                 border-radius: 50%;
                 animation: sparkleFloat 4s ease-in-out infinite;
             }

             .account-sparkle:nth-child(1) {
                 top: 15%;
                 left: 10%;
                 animation-delay: 0s;
             }

             .account-sparkle:nth-child(2) {
                 top: 25%;
                 right: 15%;
                 animation-delay: 1s;
             }

             .account-sparkle:nth-child(3) {
                 bottom: 30%;
                 left: 20%;
                 animation-delay: 2s;
             }

             .account-sparkle:nth-child(4) {
                 bottom: 40%;
                 right: 10%;
                 animation-delay: 1.5s;
             }

             .account-sparkle:nth-child(5) {
                 top: 40%;
                 left: 50%;
                 animation-delay: 0.5s;
             }

             .account-sparkle:nth-child(6) {
                 bottom: 20%;
                 right: 45%;
                 animation-delay: 2.5s;
             }

             /* Enhanced animation keyframes */
             @keyframes shimmer {
                 0% {
                     transform: translateX(-100%) translateY(-100%) rotate(45deg);
                 }

                 100% {
                     transform: translateX(100%) translateY(100%) rotate(45deg);
                 }
             }

             @keyframes celebrationPulse {
                 0% {
                     transform: translate(-50%, -50%) scale(0);
                 }

                 50% {
                     transform: translate(-50%, -50%) scale(1.1);
                 }

                 100% {
                     transform: translate(-50%, -50%) scale(1);
                 }
             }

             @keyframes iconBounce {

                 0%,
                 100% {
                     transform: translateY(0px) rotate(0deg);
                 }

                 25% {
                     transform: translateY(-10px) rotate(-5deg);
                 }

                 75% {
                     transform: translateY(-5px) rotate(5deg);
                 }
             }

             @keyframes titleGlow {
                 0% {
                     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
                 }

                 100% {
                     text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.6),
                         2px 2px 4px rgba(0, 0, 0, 0.3);
                 }
             }

             @keyframes textSlideIn {
                 0% {
                     opacity: 0;
                     transform: translateY(30px);
                 }

                 100% {
                     opacity: 0.95;
                     transform: translateY(0);
                 }
             }

             @keyframes badgeFloat {

                 0%,
                 100% {
                     transform: translateY(0px);
                 }

                 50% {
                     transform: translateY(-10px);
                 }
             }

             @keyframes featureGlow {
                 0% {
                     box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
                 }

                 100% {
                     box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
                 }
             }

             @keyframes sparkleFloat {

                 0%,
                 100% {
                     opacity: 0;
                     transform: scale(0) rotate(0deg);
                 }

                 50% {
                     opacity: 1;
                     transform: scale(1) rotate(180deg);
                 }
             }

             /* Improved responsive design */
             @media (max-width: 992px) {
                 .account-main {
                     padding: 1.5rem;
                 }

                 .account-profile-header {
                     flex-direction: column;    
                     gap: 2rem;
                     align-items: flex-start;
                 }

                 .account-actions-row {
                     flex-direction: column;
                     gap: 1rem;
                     align-items: flex-start;
                 }

                 .account-divider {
                     display: none;
                 }
             }

             @media (max-width: 768px) {
                 .account-sidebar {
                     min-height: auto;
                     padding: 1rem 0;
                 }

                 .account-main {
                     padding: 1rem;
                 }

                 .account-profile-header {
                     text-align: center;
                     align-items: center;
                 }

                 .account-profile-left {
                     flex-direction: column;
                     text-align: center;
                 }

                 .account-actions-row {
                     align-items: center;
                 }

                 /* Fixed mobile celebration message positioning */
                 .account-celebration-message {
                     margin: 1rem;
                     padding: 2rem;
                     min-width: auto;
                     width: calc(100vw - 2rem);
                     max-width: calc(100vw - 2rem);
                     top: 50vh;
                     left: 50vw;
                     transform: translate(-50%, -50%) scale(0);
                 }

                 .account-celebration-title {
                     font-size: 2rem;
                 }

                 .account-welcome-features {
                     flex-direction: column;
                     gap: 0.5rem;
                 }
             }

             @media (max-width: 576px) {
                 .account-nav-item span {
                     display: none;
                 }

                 .account-nav-item {
                     justify-content: center;
                     padding: 1rem;
                 }

                 .account-avatar {
                     width: 60px;
                     height: 60px;
                 }

                 .account-avatar-text {
                     font-size: 1.5rem;
                 }

                 .account-username {
                     font-size: 1.5rem;
                 }

                 .account-celebration-title {
                     font-size: 1.6rem;
                 }

                 /* Enhanced small screen celebration positioning */
                 .account-celebration-message {
                     padding: 1.5rem;
                     width: calc(100vw - 1rem);
                     max-width: calc(100vw - 1rem);
                     margin: 0.5rem;
                 }
             }




             .rating-stars {
                 display: flex;
                 flex-direction: row-reverse;
                 justify-content: flex-start;
                 justify-content: start;
             }

             .rating-stars input {
                 display: none;
             }

             .rating-stars label {
                 font-size: 24px;
                 color: #ccc;
                 cursor: pointer;
                 transition: color 0.2s;
             }

             .rating-stars input:checked~label,
             .rating-stars label:hover,
             .rating-stars label:hover~label {
                 color: #ffb400;
             }

             .review-input {
                 background: white;
                 border-radius: 3px;
                 padding: 7px;
                 font-size: 14px;
             }

             .review-textarea {
                 background: white;
                 border-radius: 5px;
                 padding: 10px;
                 font-size: 13px;
                 color: black;
             }

             .review-label {
                 font-size: 14px;
                 color: #000 !important;
                 font-weight: 600;
             }

             .modal-header .modal-title {
                 color: black;
             }

             .modal-header .close {
                 border: none;
                 background: none;
             }


             .sidebar-menu li a {
                 text-decoration: none !important;
                 color: white !important;
             }

             #productHtml .table td {
                 background-color: var(--color-primary);
                 /* apna color yahan change kar lo */
                 color: white;
                 /* optional - text color */
                 padding: 10px;
                 transition: background-color 0.3s ease;
                 /* smooth hover effect ke liye */
             }

             #productHtml .table td:hover {
                 background-color: var(--color-secondary);
                 color: white;
                 /* hover color (optional) */
             }

             #productHtml .table td a {
                 padding: 6px;
                 font-size: 14px;
                 height: auto;
                 width: auto;
                 border: none;
                 border-radius: var(--border-radius-lg);
                 color: white;
                 cursor: pointer;
                 transition: var(--transition);
                 font-weight: 600;
                 text-decoration: none;
                 background: linear-gradient(135deg, #3559ec 0%, #7375bd 100%);
             }



             /* Fixes CSS */

             .pokemon-card {
                 width: 100%;
                 border-radius: 10px;
                 max-width: 100%;
             }


             .status-section {
                 display: flex;
                 gap: 8px;
                 align-items: center;
                 flex-wrap: nowrap
             }

             .trending-badge {
                 display: inline-flex;
                 align-items: center;
                 background: #EA580C;
                 color: #fff;
                 padding: 3px 10px;
                 border-radius: 15px;
                 font-size: 12px;
                 font-weight: 500;
                 white-space: nowrap
             }

             /* Availability Text */
             .availability {
                 display: flex;
                 align-items: center;
                 gap: 4px;
                 color: #22c55e;
                 font-size: 12.5px;
                 font-weight: 500;
             }

             /* Optional: make icons align visually */
             .availability i {
                 font-size: 13px;
             }

             /* --- Existing parts retained --- */
             .cardwrapp {
                 padding: 10px 10px 10px 10px;
             }

             .card-name {
                 font-size: 15px;
                 font-weight: 400;
                 text-transform: uppercase;
                 color: white;
                 margin-bottom: 6px;
             }

             .price-section {
                 margin-bottom: 6px;
             }

             .current-price {
                 font-size: 21px;
                 font-weight: 700;
                 color: #EA580C;
                 margin: 0;
             }

             .original-price {
                 font-size: 14px;
                 color: #9ca3af;
                 text-decoration: line-through;
                 margin: 0;
             }

            .view-details-btn {
				background: #EA580C;
				color: #ffffff;
				border: none;
				padding: 5px 10px;
				border-radius: 25px;
				font-weight: 500;
				font-size: 13px;
				transition: all 0.2s ease-in-out;
				text-decoration: none;
				line-height: 15px;
			}

             .view-details-btn:hover {
                    filter: drop-shadow(rgb(6, 182, 212) 0px 0px 8px);
    transform: scale(1.05);
    cursor: pointer;
             }

             .bottom-section {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin-top: 10px;
             }

            .series-badge {
				font-size: 11px;
				color: #ffffff;
				border: 1px solid #ea580c;
				padding: 5px 10px;
				border-radius: 20px;
				line-height: 15px;
			}


             h2#sellerOneHeading label {
                 font-size: 20px;
             }

             h2#sellerOneHeading input {
                 margin-right: 20px;
                 width: 17px;
                 height: 17px;
                 position: relative;
                 top: 2px;
             }


             ul.searched-product-list {
                 max-height: 400px;
                 overflow-y: auto;
                 width: 100%;
             }



             .color-image-container {
                 position: relative;
                 width: 100px;
                 border: 1px solid grey;
                 padding: 4px;
                 display: inline-block;
                 margin-bottom: 10px;
             }

             .isdrop-fields {
                 width: 100%;
                 display: inline-block !important;
             }

             .isdrop-box {
                 width: 25%;
                 float: left;
                 padding-right: 5px;
                 box-sizing: border-box;
             }

             table input {
                 border-radius: 5px;
                 padding: 4px 5px;
             }

             /* table th {
                 background: var !important;
                 color: #000 !important;
             } */


             @media only screen and (max-width:767px) {
                 .cart-image {
                     border-radius: var(--border-radius);
                     width: 100%;
                     height: auto;
                     object-fit: cover;
                 }

                 .col-auto.text-end {
                     text-align: left !important;
                 }

                 .d-flex.align-items-center.justify-content-center.justify-content-md-start.gap-2 {
                     justify-content: start !important;
                 }

                 button.accordion-button {
                     margin: 10px 0;
                 }

                 .isdrop-box {
                     width: 85%;
                 }

                 .isdrop-box label {
                     display: block;
                 }
             }


             /* Stripe Payment Modal Styles */
             #stripeModal .modal-dialog {
                 max-width: 450px;
                 margin: 1.75rem auto;
             }

             #stripeModal .modal-content {
                 background: var(--color-secondary);
                 border-radius: 16px;
                 border: 4px solid rgb(255 255 255 / 40%);
                 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
                 overflow: hidden;
                 position: relative;
    			 top:20% !important;
             }

             #stripeModal .modal-header {
                 background: transparent;
                 border-bottom: 1px solid rgba(94, 82, 64, 0.08);
                 padding: 20px 24px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;    padding-bottom: 0 !important;padding-top: 0;
             }

             #stripeModal .modal-title {
                 font-size: 16px;
                 font-weight: 500;
                 color: #fff;
                 margin: 0;
             }

             #stripeModal .close {
                 background: transparent;
                 border: none;
                 padding: 8px;
                 cursor: pointer;
                 color: #999;
                 font-size: 20px;
                 line-height: 1;
                 opacity: 1;
                 transition: all 0.3s ease;
             }

             #stripeModal .close:hover {
                 color: #fb7c26;
                 transform: rotate(90deg);
             }

             #stripeModal .close i {
                 font-size: 20px;
             }

             #stripeModal .modal-body {
                 padding: 32px 24px;padding-top: 0;
             }

             /* Payment Amount Display */
             #stripeModal .modal-body h3,
             #stripeModal .modal-body .payment-title {
                 font-size: 20px;
                 font-weight: 600;
                 color: var(--color-text, #1f2121);
                 text-align: center;
                 margin-bottom: 24px;
             }

             /* Stripe Card Input Styles */
             #stripeModal #card-element,
             #stripeModal .card-input-wrapper {
                 background: var(--color-surface, #ffffff);
                 border: 1px solid rgba(94, 82, 64, 0.2);
                 border-radius: 8px;
                 padding: 14px 16px;
                 font-size: 14px;
                 transition: all 0.25s ease;
                 margin-bottom: 20px;
             }

             #stripeModal #card-element:focus,
             #stripeModal .card-input-wrapper:focus-within {
                 border-color: var(--color-primary, #21808d);
                 box-shadow: 0 0 0 3px rgba(33, 128, 141, 0.1);
                 outline: none;
             }

             /* Card placeholder styling */
             #stripeModal .StripeElement {
                 width: 100%;
             }

             #stripeModal .StripeElement--focus {
                 border-color: var(--color-primary, #21808d);
             }

             /* Pay Button */
             #stripeModal .btn-pay,
             #stripeModal button[type="submit"],
             #stripeModal .stripe-pay-btn {
                 width: 100%;
                 background: #5469ff;
                 color: #ffffff;
                 border: none;
                 border-radius: 8px;
                 padding: 14px 24px;
                 font-size: 16px;
                 font-weight: 500;
                 cursor: pointer;
                 transition: all 0.25s ease;
                 box-shadow: 0 4px 12px rgba(84, 105, 255, 0.2);
             }

             #stripeModal .btn-pay:hover,
             #stripeModal button[type="submit"]:hover,
             #stripeModal .stripe-pay-btn:hover {
                 background: #4159eb;
                 box-shadow: 0 6px 16px rgba(84, 105, 255, 0.3);
                 transform: translateY(-1px);
             }

             #stripeModal .btn-pay:active,
             #stripeModal button[type="submit"]:active,
             #stripeModal .stripe-pay-btn:active {
                 transform: translateY(0);
                 box-shadow: 0 2px 8px rgba(84, 105, 255, 0.2);
             }

             #stripeModal .btn-pay:disabled,
             #stripeModal button[type="submit"]:disabled,
             #stripeModal .stripe-pay-btn:disabled {
                 opacity: 0.6;
                 cursor: not-allowed;
                 transform: none;
             }

             /* Card Input Placeholder Styling */
             #stripeModal .form-control::placeholder,
             #stripeModal input::placeholder {
                 color: #999;
                 font-size: 14px;
             }

             /* Error Messages */
             #stripeModal .card-errors,
             #stripeModal #card-errors {
                 color: var(--color-error, #c0152f);
                 font-size: 13px;
                 margin-top: 8px;
                 min-height: 20px;
             }

             /* Loading State */
             #stripeModal .btn-pay.loading,
             #stripeModal button[type="submit"].loading {
                 position: relative;
                 color: transparent;
             }

             #stripeModal .btn-pay.loading::after,
             #stripeModal button[type="submit"].loading::after {
                 content: "";
                 position: absolute;
                 width: 20px;
                 height: 20px;
                 top: 50%;
                 left: 50%;
                 margin-left: -10px;
                 margin-top: -10px;
                 border: 2px solid rgba(255, 255, 255, 0.3);
                 border-top-color: #ffffff;
                 border-radius: 50%;
                 animation: spinner 0.6s linear infinite;
             }

             @keyframes spinner {
                 to {
                     transform: rotate(360deg);
                 }
             }

             /* Responsive Design */
             @media (max-width: 576px) {
                 #stripeModal .modal-dialog {
                     margin: 0.5rem;
                     max-width: calc(100% - 1rem);
                 }

                 #stripeModal .modal-body {
                     padding: 24px 16px;
                 }

                 #stripeModal .modal-header {
                     padding: 16px;
                 }
                 .stripe-payment-container{
                    background-color: var(--color-primary) !important;
                    box-shadow: var(--glow-teal) !important;
                 }
             }

             /* Dark Mode Support */
             @media (prefers-color-scheme: dark) {
                 #stripeModal .modal-content {
                     background: var(--color-secondary);
                     border-color: rgba(119, 124, 124, 0.2);
                 }

                 #stripeModal .modal-title {
                     color: var(--color-text, #f5f5f5);
                 }

                 #stripeModal .modal-header {
                     border-bottom-color: rgba(119, 124, 124, 0.15);
                 }

                 #stripeModal #card-element,
                 #stripeModal .card-input-wrapper {
                     background: var(--color-charcoal-800, #262828);
                     border-color: rgba(119, 124, 124, 0.3);
                     color: #f5f5f5;
                 }

                 #stripeModal .close {
                     color: #a7a9a9;
                 }

                 #stripeModal .close:hover {
                     color: #f5f5f5;
                 }
             }

             /* Search Modal Styles (keeping consistent) */
             .searchModal .modal-dialog {
                 max-width: 600px;
             }

             .searchModal .modal-content {
                 background: var(--color-surface, #ffffff);
                 border-radius: 16px;
                 border: 1px solid rgba(94, 82, 64, 0.12);
                 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
             }

             .searchModal .modal-header {
                 border-bottom: 1px solid rgba(94, 82, 64, 0.08);
                 padding: 20px 24px;
             }

             .searchModal .modal-body {
                 padding: 24px;
             }

             .searchModal #search {
                 border: 1px solid rgba(94, 82, 64, 0.2);
                 border-radius: 8px;
                 padding: 12px 16px;
                 font-size: 14px;
                 transition: all 0.25s ease;
             }

             .searchModal #search:focus {
                 border-color: var(--color-primary, #21808d);
                 box-shadow: 0 0 0 3px rgba(33, 128, 141, 0.1);
                 outline: none;
             }

             .searchModal .searched-product-list {
                 list-style: none;
                 padding: 0;
                 margin: 16px 0 0 0;
                 max-height: 400px;
                 overflow-y: auto;
             }

             @media (prefers-color-scheme: dark) {
                 .searchModal .modal-content {
                     background: var(--color-surface, #262828);
                     border-color: rgba(119, 124, 124, 0.2);
                 }

                 .searchModal .modal-header {
                     border-bottom-color: rgba(119, 124, 124, 0.15);
                 }

                 .searchModal #search {
                     background: var(--color-charcoal-800, #262828);
                     border-color: rgba(119, 124, 124, 0.3);
                     color: #f5f5f5;
                 }
             }

             @media (max-width: 768px) {
                 .creator-spotlight {
                     font-size: 16px;
                 }

                 .creatorr-spotlight {
                     font-size: 16px;
                 }
             }

             @media (max-width: 768px) {
                 .cypher-rewards-boost-tokens-available-counter {
                     font-size: 15px;
                     padding: 7px 12px;
                     border-radius: 16px;
                     min-width: 90px;
                 }
				 
				 .category-grid {
					justify-content: start !important;
				}
				
				.pokemon-card-wrapper{
					padding: 5px;
				}
				.cardwrapp {
					padding: 0 5px 7px 5px;
				}
				.trending-badge{
					padding: 3px 8px;
				}
             }

             /* Mobile (<=480px) */
             @media (max-width: 480px) {
                 .cypher-rewards-boost-tokens-available-counter {
                     font-size: 14px;
                     padding: 6px 10px;
                     border-radius: 14px;
                     min-width: 80px;
                 }

                 .cypher-rewards-activity-icon {
                     display: none;
                 }

                 /* #productHtml .table td a{
                    padding: 7px;
                 } */
             }

             /* Very small devices (<=430px like yours) */
             @media (max-width: 430px) {
                 .cypher-rewards-boost-tokens-available-counter {
                     font-size: 13px;
                     padding: 5px 8px;
                     border-radius: 12px;
                     min-width: 100px;
                 }

                 .cypher-rewards-activity-icon {
                     display: none;
                 }
             }

             .dropdown-options a {
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  transition: 0.3s ease;
}

.dropdown-options a:hover {
  color: #00bfff; /* optional hover color */
}

img#avatarPreview {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
}
.stripe-payment-container{
	margin:0 0!important;
}
button#submit {
    background: linear-gradient(135deg, var(--color-accent-orange), #ff8c42);
}
#data .pokemon-card-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.searched-product-list li:hover {
    background: black !important;
    color: white !important;
}
 /* .searched-product-list li.active {
    background: #111827 !important;
    color: #fff !important;
} */
.searched-product-list a{
	text-decoration:none !important;
}
/* .searched-product-list li:hover .search-card-title {
    color: white !important;
    background-color: black;
} */
.searchBtn {
    top: 1px !important;
    padding: 11px 20px !important;
    border-top: transparent !important;
    border-bottom: transparent !important;text-transform: capitalize;
}
.searchBtn:hover{
	box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}
.highlights-header span.cypher-badge {
    display: none;
}
#desktopMenuToggle:hover i {
    box-shadow: 0 8px 25px rgb(107 228 231 / 50%);
}
.blog-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.blog-card h3 {
    line-height: 28px;
    min-height: 57px;
}

#select2-featuredSelect-results, .select2-selection__choice, .select2-results__options, .select2-selection .select2-selection--single {
    background-color: var(--color-primary) !important;
}

.select2-selection__rendered {
    color: var(--color-text-primary);
}

.select2-selection--single, .select2-container {
    background-color: var(--color-search-bg) !important;
    border: var(--border-color) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius) !important;
}

.select2-selection__rendered {
    color: var(--color-text-primary) !important;
}

#seller-card .pokemon-card-wrapper img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

button#desktopProfileBtn i {
    font-size: 18px !important;
}

.blog-container {
    font-size: 18px !important; 
    max-width: 1200px !important;
    width: 100% !important;
}
.blog-container p {
    color: #000000 !important;
	font-size:16px !important;
}
.blog-container h3 {
    color: #ff8100 !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    margin-top: 35px !important;
    letter-spacing: 1px !important;
}
.blog-container h2 {
    color: #fff !important;
    font-size: 34px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: .3px !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}
.blog-container img {
    height: 225px !important;
    object-fit: cover !important;
    width: 100% !important;
    object-position: center !important;
}
.blog-container h1 {
    font-size: 36px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}
.blog-banner {
    background: url(https://testing.ainextify.com/upload/banner/176249778398511.png);
    background-size: cover;
    min-height: 350px;
    align-items: center;
    display: flex;
    margin-bottom: 50px;
}
.blog-banner .overlay {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    background: #000000e8;
}
.blog-banner .blog-date{
	text-align:left !important;
}
@media only screen and (max-width:767px){
	.carousel-inner, .hero-banner-img-full, .hero-image-container-banner-image img {
		height: auto !important;
	}
	.creator-highlights-card{
		display:none;
	}
	.about-box h5 span {
		color: var(--color-accent-orange) !important;
	}
	.btn-arrow {
		padding: 2px;
	}
	.btn-arrow i {
		font-size: 13px !important;
	}
	button#submit {
    background: linear-gradient(135deg, var(--color-accent-orange), #ff8c42);
    padding: 10px;
    border: none;
    border-radius: 5px;
}
}
.detail-side-box {
    border: 1px solid #ffffff4a;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 1200px) {
    .cypher-rewards-right-sidebar {
        order: 0 !important;
	}
}

#desktopProfileBtn img {
    object-fit: cover;
}
#pok-box {
    height: 440px !important;
    align-items: center;
    display: flex;
    /* background: #fff; */
    margin: 10px;
    padding: 0;
}