/* ==========================================================================
   CIDKEYS - MASTER LIGHT DESIGN SYSTEM & COMPLETE COMPONENT STYLESHEET
   Keysoft modern, minimalist aesthetic. Pure light theme, zero visual clutter.
   ========================================================================== */

:root {
  --bg-primary: #f8f9fa;
  --bg-body: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-subtle: #f1f5f9;
  
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --border-focus: #0284c7;
  
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --text-light: #94a3b8;
  
  --accent-primary: #0284c7;
  --accent-primary-hover: #0369a1;
  --accent-secondary: #0ea5e9;
  --accent-cyan: #38bdf8;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #ef4444;
  --accent-purple: #8b5cf6;
  
  --dark-btn-bg: #1e293b;
  --dark-btn-hover: #0f172a;
  
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-focus-border: #0284c7;
  --input-focus-glow: rgba(2, 132, 199, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  color: #1e293b !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  color: #1e293b !important;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
}

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

/* Page Views */
.page-view {
  display: none;
  width: 100%;
}
.page-view.active {
  display: block;
}

/* ==========================================================================
   1. SITE HEADER (Clean White Bar, Brand CIDKeys, 2 Dark Buttons, Avatar Ring)
   ========================================================================== */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 20px;
}

.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  gap: 11px !important;
  cursor: pointer !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.brand-logo-badge {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 18px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-logo-badge i {
  color: #ffffff !important;
  font-size: 18px !important;
  transform: rotate(-10deg) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-group:hover .brand-logo-badge {
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.brand-group:hover .brand-logo-badge i {
  transform: rotate(-30deg) scale(1.15) !important;
  color: #ffffff !important;
}

.brand-group:active .brand-logo-badge i {
  transform: rotate(20deg) scale(0.95) !important;
  color: #ffffff !important;
  transition: transform 0.12s ease-out !important;
}

.brand-name {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  letter-spacing: -0.6px !important;
  color: #0f172a !important;
  line-height: 40px !important;
  white-space: nowrap !important;
}

.brand-name span {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 60%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 850 !important;
  margin-left: 1px !important;
}

.header-center-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 640px;
}

.btn-header-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-header-dark:hover {
  background: #0f172a;
  transform: translateY(-1px);
}

.btn-header-dark.active {
  background: #0284c7;
}

.header-search-wrap {
  position: relative;
  flex: 1;
  max-width: 280px;
}

.header-search-input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #f8fafc;
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.header-search-input:focus {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.header-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 14px;
  pointer-events: none;
}

.header-actions-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-action-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.header-action-item:hover, .header-action-item.active {
  background: var(--bg-subtle);
  color: #0f172a;
}

/* User avatar ring with circular blue border when logged in (no email displayed) */
.user-profile-item.user-logged-in .header-user-avatar-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284c7;
  background: #f0f9ff;
  transition: all 0.2s;
}

.user-profile-item.user-logged-in #headerUserEmail {
  display: none !important;
}

.cart-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  padding: 2px 6px;
  margin-left: 2px;
}

.btn-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s;
}

.btn-lang-pill:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}

/* ==========================================================================
   2. PROMO BANNER (Office 2024 Pastel Gradient)
   ========================================================================== */
.hero-promo-banner {
  background: linear-gradient(90deg, #ecfeff 0%, #eff6ff 40%, #ffedd5 100%);
  border: 1px solid #cffafe;
  border-radius: 12px;
  padding: 16px 28px;
  margin: 20px 0 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.promo-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.promo-banner-title {
  font-size: 20px;
  font-weight: 700;
  color: #0369a1;
}

.promo-banner-title span {
  color: #0284c7;
}

.promo-badge-pill {
  background: #0284c7;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
}

.promo-banner-right {
  font-size: 13.5px;
  color: #475569;
}

.promo-banner-right strong {
  color: #0f172a;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  margin-left: 4px;
}

/* ==========================================================================
   3. CATALOG (Sidebar Accordions + Product Grid + Keysoft Cards)
   ========================================================================== */
.catalog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

.catalog-sidebar {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 14px;
  box-shadow: var(--shadow-sm);
}

.catalog-sidebar-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-left: 8px;
}

.cat-accordion-group {
  margin-bottom: 6px;
  border-radius: 8px;
  overflow: hidden;
}

.cat-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  transition: background 0.15s, color 0.15s;
}

.cat-accordion-header:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.chevron-icon {
  font-size: 12px;
  color: #94a3b8;
  transition: transform 0.2s;
}

.cat-accordion-group.open .chevron-icon {
  transform: rotate(180deg);
}

.cat-accordion-body {
  display: none;
  padding: 4px 0 6px 0 !important;
  flex-direction: column;
  gap: 3px;
}

.cat-accordion-group.open .cat-accordion-body {
  display: flex !important;
}

.cat-version-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
}

.cat-version-pill:hover {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}

.cat-version-pill.active {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.cat-version-name {
  white-space: nowrap !important;
}

.cat-version-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #0284c7 !important;
  border: 1px solid #e2e8f0 !important;
  letter-spacing: -0.2px !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}

.cat-version-pill:hover .cat-version-badge {
  background: #ffffff !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}

.cat-version-pill.active .cat-version-badge {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.cat-all-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}

.cat-all-pill.active {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.catalog-breadcrumbs {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-page-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.catalog-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.catalog-filter-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.catalog-filter-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  font-size: 13.5px;
  color: var(--text-main);
  outline: none;
}

.catalog-sort-select {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  font-size: 13.5px;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
}

/* Products Grid */
.products-grid-keysoft {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 60px;
}

.card-keysoft {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card-keysoft:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.card-ks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.card-ms-logo-svg {
  width: 18px;
  height: 18px;
}

.card-ks-cat-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}

.card-ks-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.25;
}

.card-ks-specs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.card-ks-specs-list li {
  font-size: 11.5px;
  color: #64748b;
  position: relative;
  padding-left: 12px;
}

.card-ks-specs-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #94a3b8;
}

.card-ks-art-box {
  width: 100%;
  height: 110px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.card-ks-art-box.green-theme {
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
}

.card-ks-art-box.orange-theme {
  background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
}

.card-ks-art-box.purple-theme {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
}

.card-ks-art-text {
  font-size: 40px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -1px;
  user-select: none;
}

.card-ks-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.card-ks-price-cur {
  font-size: 18px;
  font-weight: 800;
  color: #f25022;
}

.card-ks-price-old {
  font-size: 13px;
  color: #94a3b8;
  text-decoration: line-through;
}

.card-ks-product-name {
  font-size: 13px;
  color: #475569;
  margin-bottom: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-ks-buy-btn {
  margin-top: auto;
  width: 100%;
  padding: 10px;
  background: #1e293b;
  color: #ffffff;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, transform 0.15s;
}

.card-ks-buy-btn:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

/* ==========================================================================
   4. ACTIVATION CID (Minimalist Light, 2-Column, Steps Bottom-to-Top!)
   ========================================================================== */
.activation-layout-new {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
  margin: 24px 0 60px 0;
}

.act-card-left {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.act-card-header {
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .act-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Checkout page header extra top padding */
.checkout-page-header.act-card-header {
  padding-top: 8px;
  padding-bottom: 20px;
  margin-bottom: 0;
}

.act-main-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.act-main-desc {
  font-size: 14px;
  color: var(--text-muted);
}

.act-mode-selector {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  gap: 6px;
  margin-bottom: 20px;
}

.act-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.15s;
}

.act-mode-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.act-key-box {
  margin-bottom: 20px;
}

.act-field-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.act-key-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: #f8fafc;
  font-size: 15px;
  font-family: monospace;
  letter-spacing: 1.5px;
  color: #0f172a;
  outline: none;
}

.act-key-input:focus {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.act-iid-box {
  margin-bottom: 24px;
}

.act-iid-input {
  width: 100%;
  height: 100px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: #f8fafc;
  font-size: 14px;
  font-family: monospace;
  letter-spacing: 1px;
  color: #0f172a;
  outline: none;
  resize: vertical;
}

.act-iid-input:focus {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.btn-act-submit {
  width: 100%;
  padding: 14px;
  background: #1e293b;
  color: #ffffff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: background 0.15s, transform 0.15s;
}

.btn-act-submit:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

.cid-results-card {
  margin-top: 24px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 20px;
}

.cid-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cid-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.cid-block-item {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.cid-block-item:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

.cid-block-letter {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 2px;
}

.cid-block-val {
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: #14532d;
}

/* Right Column Instructions Window (Steps Bottom-to-Top!) */
.act-card-right {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.act-steps-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.act-steps-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.act-btt-container {
  display: flex;
  flex-direction: column-reverse; /* Orders elements bottom to top! */
  gap: 14px;
  position: relative;
}

.act-step-card {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s;
}

.step-1-card {
  border-left: 4px solid #0284c7;
  background: #f0f9ff;
}

.step-2-card {
  border-left: 4px solid #f59e0b;
}

.step-3-card {
  border-left: 4px solid #10b981;
}

.act-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.act-step-num-pill {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.step-1-card .act-step-num-pill { color: #0284c7; }
.step-2-card .act-step-num-pill { color: #d97706; }
.step-3-card .act-step-num-pill { color: #16a34a; }

.act-step-flow-indicator {
  font-size: 11px;
  color: #94a3b8;
}

.act-step-heading {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.act-step-text {
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}

/* ==========================================================================
   5. MODALS (Universal Modal Window, Backdrop, Header & Body)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.active {
  display: flex !important;
}

.modal-window, .glass-card {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
}

.modal-window {
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 18px;
  transition: all 0.15s;
}

.modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ==========================================================================
   6. BUY TOKENS MODAL (#buyModal - Screenshot 3 Fix)
   ========================================================================== */
.modal-tokens-compact {
  max-width: 520px;
  width: 100%;
  padding: 24px;
}

.pricing-grid.tokens-grid-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.package-card {
  position: relative;
  display: block;
  background: #ffffff;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.package-card:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}

.package-card.selected {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.package-card input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  accent-color: #0284c7;
}

.package-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.package-name {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.package-price {
  font-size: 18px;
  font-weight: 800;
  color: #0284c7;
}

.package-unit {
  font-size: 12px;
  color: #64748b;
}

/* ==========================================================================
   7. CHECKOUT & CART MODAL (#productCheckoutModal)
   ========================================================================== */
.modal-checkout-cart {
  max-width: 820px !important;
  width: 95% !important;
  padding: 24px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  color: #0f172a !important;
}

.checkout-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #0284c7;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cart-checkout-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 360px) !important;
  gap: 22px !important;
  align-items: start !important;
  margin-top: 14px !important;
}

.cart-left-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.cart-col-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.cart-col-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cart-count-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.btn-clear-cart {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.15s !important;
}

.btn-clear-cart:hover {
  color: #ef4444 !important;
}

.cart-items-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.cart-item-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.cart-item-card:hover {
  background: #ffffff !important;
  border-color: #93c5fd !important;
}

.cart-item-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}


.cart-item-icon-emblem img,
.cart-item-icon-emblem svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.cart-item-icon-emblem.is-win {
  background: #f0f7ff !important;
  border-color: #dbeafe !important;
}

.cart-item-icon-emblem.is-office {
  background: #fff7ed !important;
  border-color: #ffedd5 !important;
}

.cart-item-icon-emblem {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cart-item-header-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cart-item-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.cart-item-title-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.cart-item-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cart-item-sub {
  font-size: 12px !important;
  color: #64748b !important;
}

.cart-item-remove-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 2px !important;
  transition: color 0.15s !important;
}

.cart-item-remove-btn:hover {
  color: #ef4444 !important;
}

.cart-item-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.cart-item-type-badge {
  background: #eff6ff !important;
  color: #0284c7 !important;
  border: 1px solid #bfdbfe !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

.cart-item-price-unit {
  font-size: 12px !important;
  color: #64748b !important;
}

.cart-item-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
}

.cart-qty-picker {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  gap: 8px !important;
}

.cart-qty-btn {
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.cart-qty-btn:hover {
  color: #0284c7 !important;
}

.cart-qty-num {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  min-width: 16px !important;
  text-align: center !important;
}

.cart-item-total-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

.cart-right-col {
  min-width: 0 !important;
}

.order-summary-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.order-summary-top {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 20px !important;
}

.summary-pay-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}

.summary-pay-lbl {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.summary-pay-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

.checkout-email-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.checkout-section-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.checkout-section-title i {
  color: #64748b !important;
}

.checkout-email-bar {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

.checkout-email-bar:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.checkout-email-field {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.checkout-email-field:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background: #ffffff !important;
}

.checkout-change-email-btn {
  background: transparent !important;
  border: none !important;
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.checkout-payment-methods {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.checkout-payment-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.checkout-pay-method-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  user-select: none !important;
}

.checkout-pay-method-pill:hover {
  border-color: #93c5fd !important;
  background: #f0f9ff !important;
}

.checkout-pay-method-pill.active {
  border-color: #0284c7 !important;
  background: #eff6ff !important;
}

.checkout-pay-method-pill input[type="radio"] {
  display: none !important;
}

.checkout-pay-method-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.checkout-pay-method-icon.is-card-sbp {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.checkout-pay-method-icon.is-crypto {
  background: #f59e0b !important;
  color: #ffffff !important;
}

.checkout-pay-method-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.checkout-pay-method-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.checkout-pay-method-sub {
  font-size: 11px !important;
  color: #64748b !important;
}

.checkout-pay-radio-mark {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  color: transparent !important;
}

.checkout-pay-method-pill.active .checkout-pay-radio-mark {
  border-color: #0284c7 !important;
  background: #0284c7 !important;
  color: #ffffff !important;
}

.btn-pay-submit {
  width: 100% !important;
  height: 44px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: none !important;
  transition: background 0.15s !important;
}

.btn-pay-submit:hover {
  background: #1e293b !important;
}

.checkout-security-notice {
  font-size: 11.5px !important;
  color: #64748b !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

@media (max-width: 768px) {
  .cart-checkout-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   8. PRODUCT DETAILS MODAL (#productDetailsModal)
   ========================================================================== */
.product-details-modal-window {
  max-width: 860px;
  width: 100%;
  padding: 28px;
}

.pdm-header-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdm-content-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin-bottom: 24px;
}

.pdm-emblem-box {
  width: 100%;
  height: 180px;
  background: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdm-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.pdm-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 16px;
}

.pdm-specs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.pdm-specs-list li {
  font-size: 13px;
  color: #475569;
}

.pdm-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}

.pdm-price-val {
  font-size: 26px;
  font-weight: 800;
  color: #f25022;
}

/* ==========================================================================
   9. AUTH VIEW (#pageAuth - Screenshot 2 Fix)
   ========================================================================== */
.auth-container {
  max-width: 440px;
  margin: 40px auto;
  padding: 0 16px;
}

.auth-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  gap: 6px;
  margin-bottom: 22px;
}

.auth-tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.15s;
}

.auth-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: var(--shadow-sm);
}

.settings-group {
  margin-bottom: 16px;
}

.settings-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
}

.main-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 14px;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.main-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-primary, .btn-auth-submit {
  width: 100%;
  padding: 13px;
  background: #1e293b;
  color: #ffffff;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
}

.btn-primary:hover, .btn-auth-submit:hover {
  background: #0284c7;
}

/* ==========================================================================
   10. HISTORY VIEW (#pageHistory - Screenshot 4 Fix)
   ========================================================================== */
.history-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.history-search-wrap {
  flex: 1;
  min-width: 240px;
}

.history-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary, .btn-sm {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-secondary:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}

.history-tabs-group, .history-filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.history-filter-pill {
  padding: 6px 14px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.history-filter-pill.active {
  background: #e0f2fe;
  color: #0284c7;
}

.history-item-card, .history-row {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.history-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ==========================================================================
   11. LEGAL VIEW (#pageLegal - Screenshot 1 Fix)
   ========================================================================== */
.legal-section, .legal-container {
  max-width: 1000px;
  margin: 30px auto 60px auto;
}

.legal-header-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.legal-breadcrumbs {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legal-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.legal-page-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.legal-page-subtitle {
  font-size: 14px;
  color: #64748b;
}

.legal-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
}

.legal-tabs-nav {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  overflow-x: auto;
}

.legal-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  transition: all 0.15s;
}

.legal-tab-btn:hover, .legal-tab-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.legal-doc-card, .legal-content-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  line-height: 1.7;
  color: #334155;
}

.legal-doc-card h2, .legal-doc-card h3 {
  color: #0f172a;
  margin: 24px 0 10px 0;
  font-weight: 800;
}

.legal-doc-card p {
  margin-bottom: 14px;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  background: #ffffff;
  border-top: 1px solid var(--border-color);
  padding: 48px 0 28px 0;
  margin-top: auto;
}

.footer-grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 36px;
  margin-bottom: 36px;
}

.footer-brand-desc {
  font-size: 13.5px;
  color: #64748b;
  margin-top: 8px;
  margin-bottom: 14px;
}

.footer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-weight: 600;
  color: #15803d;
  margin-bottom: 14px;
}

.status-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}

.footer-col-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list li a {
  font-size: 13.5px;
  color: #64748b;
  transition: color 0.15s;
}

.footer-links-list li a:hover {
  color: #0284c7;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
  font-size: 12.5px;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .activation-layout-new { grid-template-columns: 1fr; }
  .footer-grid-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .header-container { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .header-center-nav { width: 100%; order: 3; max-width: 100%; flex-wrap: wrap; }
  .header-search-wrap { max-width: 100%; order: 2; }
  .hero-promo-banner { flex-direction: column; align-items: flex-start; padding: 18px; }
  .products-grid-keysoft { grid-template-columns: 1fr; }
  .pricing-grid.tokens-grid-6 { grid-template-columns: 1fr; }
  .footer-grid-container { grid-template-columns: 1fr; }
}


/* ==========================================================================
   USER REDESIGN - CENTERED HEADER, SEARCH MODAL, CABINET, AND CLEAN MODALS
   ========================================================================== */

/* Centered Header Navigation */
.header-center-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

.header-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  position: relative !important;
}

.header-nav-btn:hover {
  color: #0284c7 !important;
  background: #f0f9ff !important;
}

.header-nav-btn.active {
  color: #0284c7 !important;
  background: #e0f2fe !important;
  font-weight: 700 !important;
}

.header-nav-btn i {
  font-size: 14px !important;
}

.header-cart-nav-btn .cart-badge {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

.header-cart-nav-btn.has-items .cart-badge {
  display: inline-flex !important;
}

.header-cart-icon-btn:not(.has-items) .cart-badge {
  display: none !important;
}

.header-cart-icon-btn.has-items .cart-badge {
  display: flex !important;
}

/* Search Icon Button */
.header-search-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.header-search-icon-btn:hover {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: scale(1.05) !important;
}

/* Login Button */
.header-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.header-login-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0284c7 !important;
}

/* Logged-in Personal Cabinet Pill with Crisp Blue Frame */
.header-cabinet-pill.is-logged-in {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid #0284c7 !important;
  background: #eff6ff !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
  transition: all 0.15s ease !important;
}

.header-cabinet-pill.is-logged-in:hover {
  background: #dbeafe !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Site Search Modal */
.site-search-modal-window {
  max-width: 620px !important;
  width: 95% !important;
  padding: 24px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-color) !important;
  color: #0f172a !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

.site-search-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}

.site-search-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.site-search-sub {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 2px 0 0 !important;
}

.site-search-input-wrap {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.search-field-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
}

.site-search-modal-input {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 0 40px 0 44px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.site-search-modal-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.site-search-clear-btn {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px !important;
}

.site-search-status-bar {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
  padding-left: 2px !important;
}

.site-search-results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.site-search-item-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.site-search-item-card:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  transform: translateY(-1px) !important;
}

.site-search-item-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.site-search-item-meta {
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.site-search-item-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.site-search-item-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.site-search-item-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

.site-search-item-btn {
  padding: 6px 14px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.site-search-item-btn:hover {
  background: #0369a1 !important;
}

/* Sidebar All Products Pill */
.cat-all-pill {
  width: 100% !important;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
}

.cat-all-pill:hover, .cat-all-pill.active {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #0284c7 !important;
}

/* Cabinet Dashboard Modular Windows */
.cabinet-layout-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  max-width: 1040px !important;
  margin: 24px auto !important;
}

.cab-window-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

.cab-profile-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.cab-hero-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.cab-avatar-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
}

.cab-hero-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.cab-status-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
}

.cab-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
}

.cab-status-txt {
  color: #10b981 !important;
  font-weight: 600 !important;
}

.cab-role-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-left: 6px !important;
}

.cab-user-email-heading {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.cab-hero-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.cab-balance-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cab-balance-label {
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.cab-balance-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

.cab-balance-val .tk-unit {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.cab-actions-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-cab-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.btn-cab-primary:hover {
  background: #0369a1 !important;
}

.btn-cab-seller {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.btn-cab-logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.btn-cab-logout:hover {
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}

/* Stats 3-Grid */
.cab-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

.cab-stat-tile {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.cab-stat-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.cab-stat-icon.blue { background: #eff6ff !important; color: #0284c7 !important; }
.cab-stat-icon.green { background: #ecfdf5 !important; color: #10b981 !important; }
.cab-stat-icon.orange { background: #fffbeb !important; color: #f59e0b !important; }

.cab-stat-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.cab-stat-label {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.cab-stat-num {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.cab-stat-btn {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  cursor: pointer !important;
}

.cab-stat-btn:hover {
  background: #e2e8f0 !important;
}

.cab-card-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.cab-header-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cab-header-icon {
  font-size: 17px !important;
  color: #0284c7 !important;
}

.cab-window-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.cab-counter-badge {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-radius: 12px !important;
  padding: 3px 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.cab-empty-state {
  padding: 36px 20px !important;
  text-align: center !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 12px !important;
}

.cab-empty-state i {
  font-size: 32px !important;
  color: #94a3b8 !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.cab-empty-state h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 4px !important;
}

.cab-empty-state p {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 0 14px !important;
}

/* History Cards Modern Light Style */
.history-item-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.history-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.history-card-top-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.history-type-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.history-type-icon.purchase { background: #eff6ff !important; color: #0284c7 !important; }
.history-type-icon.cid { background: #ecfdf5 !important; color: #10b981 !important; }
.history-type-icon.tokens { background: #fffbeb !important; color: #f59e0b !important; }

.history-type-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.history-card-date {
  font-size: 12px !important;
  color: #64748b !important;
}

.history-card-email {
  font-size: 12px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.history-card-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.history-product-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.history-key-code {
  font-family: monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  letter-spacing: 0.5px !important;
}

.history-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.btn-history-action {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
}

.btn-history-action:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* Activation Page - Buy Tokens Button */
.btn-buy-tokens-act {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  background: #15803d !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
}

.btn-buy-tokens-act:hover {
  background: #166534 !important;
}

/* Custom Tokens Picker */
.custom-tokens-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}

.custom-tokens-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.custom-tokens-picker {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
  gap: 8px !important;
}

.custom-tokens-btn {
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.custom-tokens-btn:hover {
  color: #0284c7 !important;
}

.custom-tokens-input {
  width: 48px !important;
  border: none !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  outline: none !important;
}

/* Single line security box in checkout */
.checkout-security-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  white-space: nowrap !important;
}

.checkout-security-box i {
  color: #10b981 !important;
  font-size: 13px !important;
}

.checkout-btn-pay-now {
  width: 100% !important;
  height: 46px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: none !important;
  transition: background 0.15s !important;
}

.checkout-btn-pay-now:hover {
  background: #0369a1 !important;
}

@media (max-width: 900px) {
  .cab-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .header-center-nav {
    display: none !important;
  }
}


/* ==========================================================================
   FINAL POLISH: BUTTONS, SINGLE-LINE SECURITY BOX, AUTH PILL, CUSTOM STEPPER
   ========================================================================== */

/* Header Login vs Cabinet Pill */
.header-cabinet-pill {
  display: none !important;
}

.header-cabinet-pill.is-logged-in {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 8px !important;
  border: 1.5px solid #0284c7 !important;
  background: #eff6ff !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
  transition: all 0.15s ease !important;
}

.header-cabinet-pill.is-logged-in:hover {
  background: #dbeafe !important;
  border-color: #0369a1 !important;
}

/* Buy Tokens & Checkout Buttons: Clean standard radius (not pill) */
.checkout-btn-pay-now,
.btn-buy-tokens-act,
.cab-buy-tokens-btn,
#checkoutBtn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

/* Single-line sleek security box */
.checkout-security-footnote,
.pay-secure-hint,
.checkout-security-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  margin-top: 10px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #166534 !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.checkout-security-footnote i,
.pay-secure-hint i,
.checkout-security-box i {
  color: #16a34a !important;
  font-size: 15px !important;
}

/* Custom Tokens Stepper Box (Screenshot 3 Fix) */
.custom-tokens-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

.custom-tokens-stepper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

.btn-token-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  color: #334155 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.btn-token-step:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

.custom-token-input-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.custom-token-input-wrap input {
  width: 44px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  outline: none !important;
}

.custom-token-input-suffix {
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* Payment Methods single line title without description */
.checkout-pay-method-name,
.pay-pill-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.checkout-pay-method-sub,
.pay-pill-desc {
  display: none !important;
}


/* ==========================================================================
   USER REFINEMENTS: CARDS (SCREENSHOT 5), SPACING, ACCORDION HEADERS, ADMIN & STEPS
   ========================================================================== */

/* 1. Spacing: Breathing room above Catalog */
.catalog-two-col {
  margin-top: 24px !important;
}
#pageStore .catalog-main-content {
  margin-top: 0 !important;
}

/* Remove icons next to categories/versions in catalog sidebar */
.catalog-sidebar .cat-group-icon,
.catalog-sidebar .cat-all-pill i:not(.chevron-icon),
.catalog-sidebar .cat-accordion-header i:not(.chevron-icon) {
  display: none !important;
}

/* 2. Sidebar Category Headers with Icons & Blue Active State */
.cat-accordion-group {
  margin-bottom: 6px !important;
}

.cat-accordion-header {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cat-accordion-header:hover {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
}

.cat-accordion-header.active {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border-color: #38bdf8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
}

.cat-header-title-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cat-group-icon {
  font-size: 15px !important;
}

/* Category Colors */
.text-blue { color: #0284c7 !important; }
.text-orange { color: #ea580c !important; }
.text-purple { color: #7c3aed !important; }
.text-cyan { color: #0891b2 !important; }
.text-amber { color: #d97706 !important; }
.text-teal { color: #0d9488 !important; }
.text-green { color: #16a34a !important; }

/* 3. Modern Product Cards (Matching Screenshot 5 & User Prompt) */
.card-keysoft {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 250px !important;
  cursor: pointer !important;
  position: relative !important;
}

.card-keysoft:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12) !important;
  transform: translateY(-2px) !important;
}

.card-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.card-brand-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

.card-act-green-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.card-product-name {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 6px 0 2px 0 !important;
  line-height: 1.25 !important;
}

.card-version-sub {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.card-specs-list-modern {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.card-spec-item {
  font-size: 12.5px !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.card-spec-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
}

/* Bottom Row (Screenshot 5: Left Price, Right Choose Button) */
.card-bottom-row-modern {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: auto !important;
}

.card-price-col-modern {
  display: flex !important;
  flex-direction: column !important;
}

.card-price-lbl-modern {
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.card-price-val-modern {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.card-select-btn-modern {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.card-select-btn-modern:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
}

/* 4. Activation Stepped Locked Hints & OCR Dropzone */
.act-step-locked-hint {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.act-step-locked-hint i {
  color: #94a3b8 !important;
  font-size: 18px !important;
}

.btn-ocr-upload {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: #f0f9ff !important;
  border: 1.5px dashed #38bdf8 !important;
  border-radius: 8px !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  width: 100% !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-ocr-upload:hover {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
}

/* 5. Personal Cabinet: Single-Line Clickable Balance & Admin Button */
.cab-balance-single-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  margin-top: 14px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cab-balance-single-row:hover {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
}

.cab-balance-single-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14.5px !important;
  color: #334155 !important;
}

.cab-balance-single-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.cab-balance-topup-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.cab-actions-btns-vertical {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-end !important;
}

.btn-cab-admin {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-cab-admin:hover {
  background: #1e293b !important;
}

.cab-unified-tabs {
  display: flex !important;
  gap: 6px !important;
}

.cab-tab-btn {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cab-tab-btn:hover {
  background: #e2e8f0 !important;
}

.cab-tab-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* 6. Admin Panel Clean Styling */
#pageSeller .card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  padding: 20px 24px !important;
}

#sellerProfileCard {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
}

.admin-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.admin-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* 7. Checkout Modal Clean Polish */
.checkout-title-lg {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.btn-change-email {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 6px !important;
  color: #1d4ed8 !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-change-email:hover {
  background: #dbeafe !important;
}


/* ==========================================================================
   USER SPECIFIC POLISH: CABINET, ADMIN, STEPPED ACTIVATION & CUSTOM TOKENS
   ========================================================================== */

/* Header Cabinet Pill: Blue frame when logged in with text 'Кабинет' */
.header-cabinet-pill.is-logged-in,
.header-cabinet-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid #0284c7 !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
  transition: all 0.15s ease !important;
}

.header-cabinet-pill:hover {
  background: #e0f2fe !important;
  border-color: #0369a1 !important;
  color: #0369a1 !important;
}

/* Personal Cabinet: Single-line Balance Box */
.cab-balance-box-singleline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: 12px !important;
}

.cab-balance-box-singleline:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1) !important;
}

.cab-balance-single-icon {
  font-size: 18px !important;
  color: #0284c7 !important;
  margin-right: 10px !important;
}

.cab-balance-single-txt {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  flex: 1 !important;
}

.cab-balance-single-txt strong {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 2px !important;
}

.cab-balance-single-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
}

.cab-balance-box-singleline:hover .cab-balance-single-badge {
  background: #0369a1 !important;
}

.cab-actions-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.btn-cab-admin-panel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-cab-admin-panel:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* Cabinet Unified History Tabs */
.cab-history-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.cab-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cab-tab-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.cab-tab-btn.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Admin Panel Clean Modern Styling */
.admin-profile-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.admin-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.admin-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

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

.admin-stat-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

.admin-stat-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  font-size: 16px !important;
}

.admin-stat-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.admin-stat-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.admin-tabs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
}

.admin-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

.admin-tab-btn:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

.admin-tab-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.admin-tab-badge {
  background: rgba(0,0,0,0.08) !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.admin-tab-btn.active .admin-tab-badge {
  background: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
}

/* Custom Tokens Box (Screenshot 3 Polish) */
.custom-tokens-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-top: 18px !important;
}

.custom-tokens-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.custom-tokens-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.custom-tokens-discount-tag {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.custom-tokens-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

.custom-tokens-stepper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  padding: 4px !important;
}

.btn-token-step {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.btn-token-step:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.custom-token-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 6px !important;
}

.custom-token-input-wrap input {
  width: 50px !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-align: center !important;
}

.custom-token-input-suffix {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

.custom-tokens-price-summary {
  text-align: right !important;
}

.custom-tokens-total {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.custom-tokens-unit {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}


/* ==========================================================================
   FINAL POLISH FIXES: STEPPED ACTIVATION, SECURITY FOOTNOTE & PILLS
   ========================================================================== */

/* Header Cabinet Pill: strictly hidden when logged out, visible when logged in */
.header-cabinet-pill {
  display: none !important;
}

.header-cabinet-pill.is-logged-in {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid #0284c7 !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
  transition: all 0.15s ease !important;
}

/* Stepped Activation Locked Boxes */
.act-step-locked-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-top: 14px !important;
  line-height: 1.4 !important;
}

.act-step-locked-box i {
  font-size: 18px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

/* OCR Upload Button */
.btn-ocr-upload {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 6px !important;
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-ocr-upload:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
}

/* Checkout Modal Security Box Polish */
.checkout-security-footnote,
.pay-secure-hint,
.checkout-security-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  margin-top: 10px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #166534 !important;
  white-space: nowrap !important;
}

/* Checkout Change Email Button */
.checkout-change-email-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 6px !important;
  color: #1d4ed8 !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.checkout-change-email-btn:hover {
  background: #dbeafe !important;
}

/* History Page Filter Tabs */
.history-tabs-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hist-filter-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hist-filter-tab:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.hist-filter-tab:focus,
.hist-filter-tab:focus-visible,
.hist-filter-tab:active {
  outline: none !important;
  box-shadow: none !important;
}

.hist-filter-tab.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.tab-count-badge {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  color: inherit !important;
}

.hist-filter-tab.active .tab-count-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.hist-filter-tab *,
.hist-filter-tab::selection,
.hist-filter-tab *::selection {
  user-select: none !important;
  -webkit-user-select: none !important;
  background: transparent !important;
}

.act-step-locked-box.is-hidden {
  display: none !important;
}


/* Strict Header Auth Visibility */
.header-auth-wrap.logged-in #headerLoginBtn {
  display: none !important;
}

.header-auth-wrap:not(.logged-in) #headerCabinetPill {
  display: none !important;
}

.header-auth-wrap.logged-in #headerCabinetPill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid #0284c7 !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
  transition: all 0.15s ease !important;
}

/* For customer, hide admin panel button */
body:not(.is-admin-user) #cabSellerPanelBtn {
  display: none !important;
}


/* ==========================================================================
   PHOTO 2 / KEYSOFT ALIGNMENT & 8PX WINDOW SYSTEM (USER REQUEST UPDATE)
   ========================================================================== */

/* 1. Global Container & Header Max-Width: 1200px (Centered) */
.container,
.site-header .container,
.header-container,
.catalog-layout,
.activation-layout-new,
.footer-grid-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Header Nav Centered */
.header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  gap: 20px !important;
}

.header-center-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

/* Header buttons corner format: strictly 8px rectangular */
.header-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.header-nav-btn:hover {
  color: #0284c7 !important;
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
}

.header-nav-btn.active {
  color: #0284c7 !important;
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  font-weight: 700 !important;
}

/* Cabinet & Search buttons: strictly 8px border-radius, icon-only */
.header-search-icon-btn,
.header-login-btn,
.header-cabinet-pill {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.header-search-icon-btn:hover,
.header-login-btn:hover,
.header-cabinet-pill:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

.header-cabinet-pill.is-logged-in {
  display: inline-flex !important;
  background: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
}

.header-cabinet-pill.is-logged-in:hover {
  background: #e0f2fe !important;
}

/* 2. Catalog Top Alignment & Search Bar Inside Icon */
.catalog-layout {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  margin-top: 18px !important;
}

.catalog-sidebar {
  margin-top: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 16px 14px !important;
}

.catalog-sidebar-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 12px 6px !important;
}

.cat-version-pill {
  border-radius: 8px !important;
}

.cat-accordion-header {
  border-radius: 8px !important;
}

.catalog-main-content {
  margin-top: 0 !important;
}

.catalog-breadcrumbs {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  color: #64748b !important;
}

.catalog-breadcrumbs a {
  color: #64748b !important;
  text-decoration: none !important;
}

.catalog-breadcrumbs a:hover {
  color: #0284c7 !important;
}

.catalog-header-row {
  margin-bottom: 12px !important;
}

.catalog-page-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
}

/* Search bar with icon embedded INSIDE */
.catalog-controls-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  gap: 16px !important;
}

.catalog-filter-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 340px !important;
}

.catalog-filter-search i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

.catalog-filter-search input {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 14px 8px 36px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.catalog-filter-search input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

.catalog-sort-select {
  height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  outline: none !important;
  cursor: pointer !important;
}

/* 3. Three-column Product Cards Grid (Photo 2 / 3 Layout) */
.products-grid-keysoft {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
}

@media (max-width: 992px) {
  .products-grid-keysoft {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .products-grid-keysoft {
    grid-template-columns: 1fr !important;
  }
}

/* Modern Card Box */
.card-keysoft-v3 {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  cursor: pointer !important;
  position: relative !important;
}

.card-keysoft-v3:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  border-color: #93c5fd !important;
}

/* ==========================================================================
/* ==========================================================================
   CATALOG PRODUCT CARDS & MODAL: MODERN SOFTWARE BOX COVER ARTWORK
   (Authentic Microsoft Fluent Wave Box Design matching User Screenshot)
   ========================================================================== */

/* 1. Card Cover Banner (In Catalog Grid) */
.card-ks-art-banner,
.card-ks-art-cover {
  width: 100% !important;
  height: 168px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #edf2f7 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: all 0.25s ease !important;
}

.card-keysoft-v3:hover .card-ks-art-banner,
.card-keysoft-v3:hover .card-ks-art-cover {
  background: #fcfdfe !important;
}

/* 2. Modal Cover Box (In Product Details Modal) */
.pdm-ks-media-box {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pdm-ks-cover-box {
  width: 100% !important;
  height: 360px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 24px 26px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 3. Microsoft 4-Color Brand Row */
.ks-cover-ms-brand {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  z-index: 2 !important;
  position: relative !important;
}

.ks-ms-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 6.5px) !important;
  gap: 2px !important;
}

.ks-ms-grid.modal-grid {
  grid-template-columns: repeat(2, 8px) !important;
  gap: 2.5px !important;
}

.ms-sq {
  width: 100% !important;
  aspect-ratio: 1 !important;
  border-radius: 0.5px !important;
}
.ms-sq-r { background: #f25022 !important; }
.ms-sq-g { background: #7fba00 !important; }
.ms-sq-b { background: #00a4ef !important; }
.ms-sq-y { background: #ffb900 !important; }

.ks-ms-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5f6368 !important;
  letter-spacing: -0.2px !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

.ks-ms-text.modal-text {
  font-size: 15px !important;
  color: #475569 !important;
}

/* 4. Large Typography Stack (Wordmark + Colored Version + Subtitle) */
.ks-cover-titles {
  z-index: 2 !important;
  position: relative !important;
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

.ks-cover-titles.modal-titles {
  margin-top: 14px !important;
}

.ks-cover-wordmark {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
}

.ks-cover-wordmark.modal-wordmark {
  font-size: 32px !important;
  letter-spacing: -0.5px !important;
}

.ks-cover-version {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
  margin-top: 2px !important;
}

.ks-cover-version.modal-version {
  font-size: 32px !important;
  letter-spacing: -0.5px !important;
}

.ks-cover-sub {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

.ks-cover-sub.modal-sub {
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* 5. Background Fluid Waves SVG */
.ks-cover-waves {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.card-keysoft-v3:hover .ks-cover-waves {
  transform: scale(1.05) translate(1%, -1%) !important;
}

/* Activation Pill Badge on Light Cover (Refined & Smaller) */
.card-ks-act-badge {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px) !important;
  color: #0284c7 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  letter-spacing: 0px !important;
  z-index: 3 !important;
}

.card-ks-act-badge.badge-online,
.card-ks-act-badge.badge-digital {
  color: #10b981 !important;
  border-color: #a7f3d0 !important;
}

.card-ks-act-badge.badge-online {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

.card-ks-act-badge i {
  font-size: 8.5px !important;
}

/* Card Body Content */
.card-ks-content {
  padding: 10px 14px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.card-ks-brand-tag {
  display: none !important;
}

.card-ks-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  margin: 2px 0 4px 0 !important;
  line-height: 1.25 !important;
  min-height: unset !important;
}

.card-ks-subtitle {
  display: none !important;
}

/* Footer: Plain Price + Buy Button */
.card-ks-footer {
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.card-ks-price-box {
  display: flex !important;
  flex-direction: column !important;
}

.card-ks-price-val {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1 !important;
}

.btn-card-buy-direct {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-card-buy-direct:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

.btn-card-buy-direct:active {
  transform: translateY(0) !important;
}

.btn-card-buy-direct.added {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3) !important;
}

/* 4. History Modular Text Windows (User Request: "сделай все красиво в окнах текста") */
.history-item-window {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

.history-item-window:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.hist-win-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.hist-win-meta-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.hist-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.hist-tag-badge.badge-tokens {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

.hist-tag-badge.badge-key {
  background: #dcfce7 !important;
  color: #15803d !important;
}

.hist-tag-badge.badge-account {
  background: #e0e7ff !important;
  color: #4338ca !important;
}

.hist-tag-badge.badge-activation {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

.hist-win-date {
  font-size: 12.5px !important;
  color: #64748b !important;
}

.hist-win-email {
  font-size: 12px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.hist-win-product-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.hist-win-prod-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.hist-win-prod-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
}

/* Gray Code/Data Window Box */
.hist-win-code-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.hist-win-code-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 13px !important;
  word-break: normal !important;
}

.hist-win-code-label {
  font-weight: 600 !important;
  color: #64748b !important;
  min-width: 45px !important;
  user-select: none !important;
}

.hist-win-code-val {
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  user-select: all !important;
}

.hist-win-code-val.val-cid {
  color: #0284c7 !important;
}

.hist-win-code-val.val-key {
  color: #0f766e !important;
}

/* History Actions Toolbar */
.hist-win-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.btn-hist-tool {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
}

.btn-hist-tool:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.btn-hist-tool.btn-tool-primary {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.btn-hist-tool.btn-tool-primary:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* 5. Product Details Modal (Keysoft Style) */
.keysoft-pdm-window {
  max-width: 920px !important;
  width: 95vw !important;
  border-radius: 8px !important;
  padding: 24px 28px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.pdm-ks-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.pdm-ks-breadcrumbs {
  font-size: 13px !important;
  color: #64748b !important;
}

.pdm-ks-breadcrumbs span {
  margin: 0 4px !important;
}

.pdm-ks-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

.pdm-ks-close-btn * {
  pointer-events: none !important;
}

.pdm-ks-close-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.pdm-ks-hero-grid {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  gap: 28px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 768px) {
  .pdm-ks-hero-grid {
    grid-template-columns: 1fr !important;
  }
}

.pdm-ks-media-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.pdm-ks-icon-wrap {
  width: 120px !important;
  height: 120px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 54px !important;
  margin-bottom: 16px !important;
}

.pdm-ks-trust-badges {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.pdm-ks-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #475569 !important;
}

.pdm-ks-trust-item i {
  color: #10b981 !important;
  font-size: 13px !important;
}

.pdm-ks-info-box {
  display: flex !important;
  flex-direction: column !important;
}

.pdm-ks-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
}

.pdm-ks-stars {
  color: #f59e0b !important;
  display: inline-flex !important;
  gap: 2px !important;
}

.pdm-ks-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}

.pdm-ks-sub {
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
}

/* Key Type Radio / Selector Pill */
.pdm-ks-option-group {
  margin-bottom: 16px !important;
}

.pdm-ks-option-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
}

.pdm-ks-option-pills {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.pdm-ks-pill {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.pdm-ks-pill.active {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
}

/* Price & Buy Buttons */
.pdm-ks-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.pdm-ks-price {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.pdm-ks-old-price {
  font-size: 16px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

.pdm-ks-discount {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.pdm-ks-actions-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.btn-pdm-cart {
  flex: 1 !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.btn-pdm-cart:hover {
  background: #0369a1 !important;
}

.btn-pdm-buy-now {
  flex: 1 !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  background: #1e293b !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-pdm-buy-now:hover {
  background: #0f172a !important;
}

/* Tabs & Specs */
.pdm-ks-tabs-bar {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 6px !important;
}

.pdm-ks-tab-btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  cursor: pointer !important;
}

.pdm-ks-tab-btn.active {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.pdm-ks-tab-panel {
  display: none !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
}

.pdm-ks-tab-panel.active {
  display: block !important;
}

.pdm-ks-specs-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.pdm-ks-spec-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

.pdm-ks-spec-label {
  font-size: 12px !important;
  color: #64748b !important;
  margin-bottom: 2px !important;
}

.pdm-ks-spec-val {
  font-weight: 600 !important;
  color: #0f172a !important;
}



/* ==========================================================================
   VERSION 27: COMPACT 1040PX CONTAINERS, NARROW CARDS, 2 TABS, 3 PARAMS ROW
   ========================================================================== */

/* Compact Container System: 1040px max-width across all pages */
.container,
.site-header .container,
.header-container,
.catalog-layout,
.activation-layout-new,
.footer-grid-container,
.history-container,
#pageHistory .card,
.card-keysoft-container {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Catalog Sidebar & Main Layout Alignment */
.catalog-layout {
  display: grid !important;
  grid-template-columns: 215px 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  margin-top: 14px !important;
}

.catalog-sidebar {
  padding: 14px 12px !important;
  margin-top: 0 !important;
}

.catalog-main-content {
  margin-top: 0 !important;
}

.catalog-sidebar-title {
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 0 10px 4px !important;
  font-size: 14px !important;
}

.catalog-breadcrumbs {
  margin: 0 0 4px 0 !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.catalog-header-row {
  margin-bottom: 10px !important;
}

.catalog-page-title {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Product Cards Grid: 3 columns matching photo dimensions */
.products-grid-keysoft {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

.card-keysoft-v3 {
  max-width: 100% !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

.card-ks-art-banner {
  height: 145px !important;
}

.card-ks-content {
  padding: 16px 18px !important;
}

.card-ks-title {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 0 3px 0 !important;
}

.card-ks-subtitle {
  font-size: 13.5px !important;
  margin-bottom: 14px !important;
}

.card-ks-footer {
  padding-top: 12px !important;
}

.card-ks-price-val {
  font-size: 21px !important;
  font-weight: 800 !important;
}

.btn-card-buy-direct {
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* Product Details Modal Styling */
.keysoft-pdm-window {
  max-width: 820px !important;
  width: 95vw !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16) !important;
  box-sizing: border-box !important;
}

.pdm-ks-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.pdm-ks-hero-grid {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 26px !important;
  margin-bottom: 20px !important;
  align-items: stretch !important;
}

@media (max-width: 768px) {
  .pdm-ks-hero-grid {
    grid-template-columns: 1fr !important;
  }
}

.pdm-ks-media-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
}

.pdm-ks-pretitle {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

.pdm-ks-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.3 !important;
}

.pdm-ks-option-group {
  margin-bottom: 14px !important;
}

.pdm-ks-option-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

.pdm-ks-pill {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid #0284c7 !important;
  background: #f0f9ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pdm-ks-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.pdm-ks-price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.pdm-ks-old-price {
  font-size: 15px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

.pdm-ks-discount {
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.pdm-ks-actions-row {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.btn-pdm-cart {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.btn-pdm-cart:hover {
  background: #0369a1 !important;
}

.btn-pdm-buy-now {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  background: #1e293b !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-pdm-buy-now:hover {
  background: #0f172a !important;
}

/* 3 Parameter Boxes in One Row with Circular Blue Icons (Matching User Screenshot) */
.pdm-params-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 650px) {
  .pdm-params-row-3 {
    grid-template-columns: 1fr !important;
  }
}

.pdm-param-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.pdm-param-circle-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.pdm-param-texts {
  display: flex !important;
  flex-direction: column !important;
}

.pdm-param-label {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
}

.pdm-param-value {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
}

/* Description Card with Left Circular Icon (Matching User Screenshot) */
.pdm-desc-card-wrap {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 12px !important;
}

.pdm-desc-circle-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.pdm-desc-content {
  flex: 1 !important;
}

.pdm-desc-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
}

.pdm-desc-p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin: 0 0 10px 0 !important;
}

.pdm-apps-bar {
  padding: 9px 14px !important;
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}

.pdm-apps-bar i {
  color: #0284c7 !important;
  font-size: 14px !important;
}
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

.pdm-desc-heading {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
}

.pdm-desc-text {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
}

.pdm-desc-text p {
  margin: 0 0 6px 0 !important;
}

.pdm-desc-text p:last-child {
  margin-bottom: 0 !important;
}

.pdm-desc-text ul {
  margin: 6px 0 8px 18px !important;
  padding: 0 !important;
}

.pdm-desc-text li {
  margin-bottom: 3px !important;
}

/* Instruction Step Items */
.pdm-instructions-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pdm-step-card-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.pdm-step-badge-num {
  min-width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.pdm-step-content-wrap {
  flex: 1 !important;
}

.pdm-step-title-text {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 3px !important;
}

.pdm-step-desc-text {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}

.pdm-step-desc-text code {
  background: #e2e8f0 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: monospace !important;
  font-size: 12px !important;
  color: #0f172a !important;
}




/* ==========================================================================
   DATE PICKER MODAL (ФИЛЬТР ПО ДАТЕ В ИСТОРИИ)
   ========================================================================== */
#histDatePickerModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#histDatePickerModal.active,
#histDatePickerModal.open {
  display: flex !important;
}

#histDatePickerModal .modal-datepicker,
.modal-datepicker {
  width: 100% !important;
  max-width: 340px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: auto !important;
}

#histDatePickerModal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

#histDatePickerModal .modal-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#histDatePickerModal .modal-title-group i {
  color: #0284c7 !important;
  font-size: 16px !important;
}

#histDatePickerModal .modal-title-group h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

#histDatePickerModal .modal-close {
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

#histDatePickerModal .modal-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

#histDatePickerModal .modal-body {
  padding: 16px 18px !important;
  background: #ffffff !important;
}

/* Year Navigator */
.hist-year-selector {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
}

.hist-year-selector strong,
#histPickerYearVal {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.hist-year-selector button,
#histPickerPrevYearBtn,
#histPickerNextYearBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

.hist-year-selector button:hover:not(:disabled) {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* 12 Months Grid */
.hist-months-grid,
#histPickerMonthsGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.hist-month-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 7px 2px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.hist-month-btn:hover:not(.disabled) {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

.hist-month-btn.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
}

.hist-month-btn.is-current:not(.active) {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

.hist-month-btn.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  border-color: #f1f5f9 !important;
}

/* Calendar Days Section */
.hist-calendar-section {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.hist-days-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}

.hist-days-weekdays span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
}

.hist-days-grid,
#histPickerDaysGrid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}

.hist-day-cell {
  aspect-ratio: 1 !important;
  height: 32px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.hist-day-cell:hover:not(.disabled):not(.empty-pad) {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

.hist-day-cell.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

.hist-day-cell.is-today:not(.active) {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.hist-day-cell.disabled {
  opacity: 0.22 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
}

.hist-day-cell.empty-pad {
  pointer-events: none !important;
  visibility: hidden !important;
  background: transparent !important;
}

/* Action Buttons inside Date Picker */
#histPickerResetBtn,
#histPickerAllMonthBtn {
  flex: 1 !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#histPickerResetBtn:hover,
#histPickerAllMonthBtn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

#histPickerApplyBtn {
  flex: 1 !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #0284c7 !important;
  border: 1px solid #0284c7 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#histPickerApplyBtn:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* Filter Button on Toolbar */
#histDateFilterBtn.has-filter {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

#histResetDateBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  width: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #ef4444 !important;
  cursor: pointer !important;
}

#histResetDateBtn:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
}

/* ==========================================================================
   HISTORY PAGE REFINED SPACING & COMPACT WINDOWS
   ========================================================================== */
#pageHistory {
  width: 100% !important;
  min-height: calc(100vh - 160px) !important;
  padding-top: 10px !important;
  padding-bottom: 60px !important;
  overflow: visible !important;
}

#pageHistory .card {
  max-width: 1040px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

#pageHistory .card-body,
#historyList {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

#pageHistory .card-header {
  padding: 24px 28px 16px 28px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#pageHistory .card-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

#pageHistory .card-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

#pageHistory .card-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

#pageHistory .card-desc {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
}

#pageHistory .card-body {
  padding: 20px 28px 24px 28px !important;
}

/* History Compact Item Windows */
.history-item-window {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.15s ease !important;
}

.history-item-window:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
}

.hist-win-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
  gap: 8px !important;
}

.hist-win-meta-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.hist-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.hist-win-date {
  font-size: 12px !important;
  color: #64748b !important;
}

.hist-win-email {
  font-size: 11.5px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
}

.hist-win-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.hist-win-prod-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
}

.hist-win-status-badge {
  font-size: 12px !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.hist-win-product-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.hist-win-prod-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Integrated compact data box with button on right */
.hist-win-compact-databox {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 5px 8px 5px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.hist-win-data-content {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.hist-win-data-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
}

.hist-win-data-val {
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  user-select: all !important;
}

.hist-win-data-val.val-key {
  color: #0f766e !important;
}

.hist-win-data-val.val-cid {
  color: #0284c7 !important;
}

.btn-compact-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  border-radius: 5px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-compact-copy:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

.btn-compact-copy.btn-compact-act {
  background: #0284c7 !important;
}

/* Dual databox for activations (CID + IID) */
.hist-win-dual-databox {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.hist-win-data-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 4px 8px 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* ==========================================================================
   ACTIVATION PAGE REFINEMENTS (KEY VERIFICATION & FULL-WIDTH DROPZONE)
   ========================================================================== */
.act-key-btns-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.btn-act-check-key {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 0 16px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
}

.btn-act-check-key:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

.btn-act-buy-key {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 0 16px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-act-buy-key:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* Full-width photo dropzone - Hidden in key mode, visible only where IID is input (tokens mode) */
.target-step2-dropzone {
  width: 100% !important;
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  display: none !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  margin-bottom: 4px !important;
}

#activationCardLeft.mode-tokens .target-step2-dropzone,
.mode-tokens .target-step2-dropzone {
  display: flex !important;
}

.target-step2-dropzone:hover,
.target-step2-dropzone.dragover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
}

.target-dropzone-inner {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.dropzone-cloud-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.dropzone-text-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.dropzone-main-text {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.dropzone-sub-text {
  font-size: 12px !important;
  color: #64748b !important;
}

/* Hide CID locked hint completely if present */
#cidLockedHint {
  display: none !important;
}

/* Catalog Promo Banner (Windows + Office 3D, -CDK26 Promo) */
.catalog-promo-banner {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 20px 36px !important;
  margin-top: 28px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

.promo-banner-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 270px !important;
}

.promo-banner-line1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
}

.promo-discount-num {
  color: #ef4444 !important;
  font-weight: 800 !important;
}

.promo-banner-line2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
}

.promo-banner-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}

.promo-banner-3d-img {
  height: 54px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)) !important;
  transition: transform 0.25s ease !important;
}

.promo-banner-3d-img:hover {
  transform: scale(1.06) !important;
}

.promo-banner-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.promo-code-badge {
  background: #ffffff !important;
  border: 1.5px solid #0f172a !important;
  border-radius: 9999px !important;
  padding: 7px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.promo-code-badge:hover {
  background: #0f172a !important;
}

.promo-code-badge:hover .promo-code-text {
  color: #ffffff !important;
}

.promo-code-text {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.5px !important;
  transition: color 0.15s ease !important;
}

.promo-code-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  display: flex !important;
  flex-direction: column !important;
  white-space: nowrap !important;
}

@media (max-width: 860px) {
  .catalog-promo-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    margin-top: 18px !important;
  }
  .promo-banner-center {
    width: 100% !important;
    justify-content: center !important;
  }
  .promo-banner-right {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
}

/* Catalog Sidebar & Header Alignment */
.catalog-breadcrumbs {
  display: none !important;
}

.catalog-layout {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  margin-top: 26px !important;
  margin-bottom: 40px !important;
}

.catalog-sidebar {
  margin-top: 0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 12px 14px 16px 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.catalog-sidebar-title {
  margin: 0 0 10px 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.catalog-main-content {
  margin-top: 0 !important;
}

.catalog-header-row {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#catalogSectionTitle,
.catalog-page-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

/* ==========================================================================
   TOAST NOTIFICATIONS (Compact Blue Window Style on Right)
   ========================================================================== */
.toast-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  pointer-events: none !important;
  max-width: calc(100vw - 32px) !important;
}

.toast {
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  width: 320px !important;
  max-width: 100% !important;
  padding: 13px 15px 14px 15px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1.5px solid #0284c7 !important; /* Signature site blue border */
  box-shadow: 0 12px 30px -4px rgba(2, 132, 199, 0.22), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
  font-family: inherit !important;
  animation: toastSlideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, opacity 0.2s ease !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.toast:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px -4px rgba(2, 132, 199, 0.28), 0 6px 16px -2px rgba(15, 23, 42, 0.1) !important;
}

.toast-hiding {
  opacity: 0 !important;
  transform: translateX(40px) scale(0.95) !important;
}

.toast-shake {
  animation: toastShake 0.35s ease !important;
}

@keyframes toastSlideInRight {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.toast-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.toast-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.toast-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #0284c7 !important;
}

.toast-icon-wrap svg {
  display: block;
}

.toast-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  letter-spacing: 0.2px !important;
}

.toast-close-btn {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 4px !important;
  margin: -4px -4px 0 0 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.toast-close-btn:hover {
  color: #0284c7 !important;
  background: #f0f9ff !important;
}

.toast-message {
  font-size: 13px !important;
  line-height: 1.48 !important;
  color: #1e293b !important;
  font-weight: 500 !important;
  word-break: break-word !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.toast-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #0284c7, #38bdf8) !important;
  transform-origin: left !important;
  animation: toastProgress linear forwards !important;
}

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 640px) {
  .toast-container {
    bottom: 74px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
    align-items: center !important;
  }
  .toast {
    width: 100% !important;
    max-width: 380px !important;
  }
}

/* =============================================================================
   CRYPTO PAYMENT BOX (PREMIUM FINTECH AESTHETICS)
   ============================================================================= */

.crypto-pay-box {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
  animation: fadeInDown 0.22s ease-out !important;
}

.crypto-pay-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 15px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="dark"] .crypto-pay-card {
  background: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

.crypto-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.crypto-select-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

[data-theme="dark"] .crypto-select-label {
  color: #cbd5e1 !important;
}

.crypto-net-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
}

[data-theme="dark"] .crypto-net-pill {
  background: rgba(2, 132, 199, 0.15) !important;
  border-color: rgba(2, 132, 199, 0.4) !important;
  color: #38bdf8 !important;
}

/* Coin Selector Tabs */
.crypto-coin-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.crypto-tab-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 9px 6px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  text-align: center !important;
  user-select: none !important;
}

[data-theme="dark"] .crypto-tab-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.crypto-tab-btn:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  transform: translateY(-1px) !important;
}

[data-theme="dark"] .crypto-tab-btn:hover {
  border-color: #38bdf8 !important;
  background: #1e293b !important;
}

.crypto-tab-btn.active {
  border-color: #0284c7 !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="dark"] .crypto-tab-btn.active {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

.crypto-coin-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.crypto-coin-icon.coin-usdt {
  background: linear-gradient(135deg, #26a17b 0%, #16a34a 100%) !important;
}

.crypto-coin-icon.coin-usdt-bep20 {
  background: linear-gradient(135deg, #f59e0b 0%, #10b981 100%) !important;
}

.crypto-coin-icon.coin-ton {
  background: linear-gradient(135deg, #0098ea 0%, #0284c7 100%) !important;
}

.crypto-coin-icon.coin-btc {
  background: linear-gradient(135deg, #f7931a 0%, #d97706 100%) !important;
}

.crypto-coin-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1.15 !important;
}

.crypto-coin-sym {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .crypto-coin-sym {
  color: #f1f5f9 !important;
}

.crypto-coin-desc {
  font-size: 9.5px !important;
  color: #64748b !important;
}

.crypto-coin-badge {
  display: none !important;
}

/* Amount Banner */
.crypto-amount-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
}

[data-theme="dark"] .crypto-amount-banner {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.crypto-amount-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.crypto-amount-caption {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.crypto-amount-display {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.crypto-amount-digits {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  letter-spacing: -0.2px !important;
}

[data-theme="dark"] .crypto-amount-digits {
  color: #38bdf8 !important;
}

.btn-copy-tiny {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 5px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  padding: 0 !important;
}

[data-theme="dark"] .btn-copy-tiny {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #cbd5e1 !important;
}

.btn-copy-tiny:hover {
  background: #e2e8f0 !important;
  color: #0284c7 !important;
}

.crypto-amount-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  line-height: 1.25 !important;
}

.crypto-rate-equiv {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .crypto-rate-equiv {
  color: #f1f5f9 !important;
}

.crypto-rate-hint {
  font-size: 10px !important;
  color: #10b981 !important;
  font-weight: 700 !important;
}

/* Wallet Block */
.crypto-wallet-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.crypto-wallet-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.crypto-wallet-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

[data-theme="dark"] .crypto-wallet-title {
  color: #cbd5e1 !important;
}

.crypto-qr-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

[data-theme="dark"] .crypto-qr-toggle-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

.crypto-qr-toggle-btn:hover {
  background: #e2e8f0 !important;
  color: #0284c7 !important;
}

/* Address Bar */
.crypto-address-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 4px 5px 4px 10px !important;
  transition: border-color 0.15s !important;
}

[data-theme="dark"] .crypto-address-bar {
  background: #090e17 !important;
  border-color: #334155 !important;
}

.crypto-address-bar:focus-within {
  border-color: #0284c7 !important;
}

.crypto-address-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  outline: none !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .crypto-address-input {
  color: #38bdf8 !important;
}

.btn-crypto-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 11px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}

.btn-crypto-copy:hover {
  background: #0369a1 !important;
}

.btn-crypto-copy.copied {
  background: #10b981 !important;
}

/* QR Drawer */
.crypto-qr-drawer {
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  display: flex !important;
  justify-content: center !important;
  animation: fadeInDown 0.2s ease-out !important;
}

[data-theme="dark"] .crypto-qr-drawer {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.crypto-qr-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  text-align: center !important;
}

.crypto-qr-img {
  width: 150px !important;
  height: 150px !important;
  border-radius: 8px !important;
  padding: 6px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

.crypto-qr-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.crypto-qr-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .crypto-qr-title {
  color: #f1f5f9 !important;
}

.crypto-qr-sub {
  font-size: 10px !important;
  color: #64748b !important;
  max-width: 250px !important;
}

/* Security Guidance Note */
.crypto-guidance-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #047857 !important;
}

[data-theme="dark"] .crypto-guidance-note {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
}

.crypto-guidance-note i {
  font-size: 13px !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
}

/* Confirm Button */
.checkout-btn-crypto {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 46px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.checkout-btn-crypto:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Single line Amount */
.crypto-amount-single-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
}

[data-theme="dark"] .crypto-amount-single-line {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.crypto-amount-single-line .crypto-amount-caption {
  font-size: 12px !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .crypto-amount-single-line .crypto-amount-caption {
  color: #cbd5e1 !important;
}

.crypto-amount-single-line .crypto-amount-display {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.crypto-amount-single-line .crypto-amount-digits {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  letter-spacing: -0.2px !important;
}

[data-theme="dark"] .crypto-amount-single-line .crypto-amount-digits {
  color: #38bdf8 !important;
}

/* ==========================================================================
   Order Success Modal Refined Styling (Compact & Native Site Style)
   ========================================================================== */
.modal-checkout-cart.is-success {
  max-width: 480px !important;
  width: 92% !important;
  padding: 24px 26px !important;
  margin: auto !important;
  border-radius: 16px !important;
  transition: max-width 0.25s ease, padding 0.25s ease !important;
}

[data-theme="dark"] .modal-checkout-cart.is-success {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.modal-checkout-cart.is-success .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .modal-checkout-cart.is-success .modal-header {
  border-bottom-color: #334155 !important;
}

.modal-checkout-cart .modal-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.modal-checkout-cart .modal-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .modal-checkout-cart .modal-close:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}

.modal-checkout-cart.is-success .checkout-brand-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

.checkout-success-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.checkout-success-box .success-icon-badge {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
  margin: 0 auto !important;
}

.checkout-success-box .success-icon-badge i {
  color: #ffffff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.success-order-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  font-family: var(--font-code, monospace) !important;
}

[data-theme="dark"] .success-order-meta-pill {
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
}

.order-success-details-card {
  width: 100% !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .order-success-details-card {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.success-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .success-card-title {
  color: #f1f5f9 !important;
}

.success-card-title i {
  color: #10b981 !important;
  font-size: 16px !important;
}

.success-email-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  word-break: normal !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .success-email-box {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #38bdf8 !important;
}

.success-email-box i {
  color: #0284c7 !important;
  font-size: 15px !important;
}

[data-theme="dark"] .success-email-box i {
  color: #38bdf8 !important;
}

.success-history-notice {
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding-top: 2px !important;
}

[data-theme="dark"] .success-history-notice {
  color: #94a3b8 !important;
}

.success-history-notice i {
  color: #0284c7 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .success-history-notice i {
  color: #38bdf8 !important;
}

.success-actions {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.success-actions .btn {
  width: 100% !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.success-actions #goToHistorySuccessBtn {
  padding: 12px 20px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

.success-actions #closeCheckoutSuccessBtn {
  padding: 10px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="dark"] .success-actions #closeCheckoutSuccessBtn {
  border-color: #475569 !important;
  color: #94a3b8 !important;
}

.success-actions #closeCheckoutSuccessBtn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .success-actions #closeCheckoutSuccessBtn:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}




/* =============================================================================
   BEAUTIFUL EMPTY CART STATE (KEYSOFT / SITE STYLE)
   ============================================================================= */

.cart-empty-state {
  padding: 44px 20px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 16px !important;
  margin: 12px 0 20px 0 !important;
  transition: all 0.25s ease !important;
}

[data-theme="dark"] .cart-empty-state,
body.dark-theme .cart-empty-state {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.empty-cart-badge {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: rgba(2, 132, 199, 0.08) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px auto !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="dark"] .empty-cart-badge,
body.dark-theme .empty-cart-badge {
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.empty-cart-badge i {
  font-size: 28px !important;
  color: #0284c7 !important;
}

[data-theme="dark"] .empty-cart-badge i,
body.dark-theme .empty-cart-badge i {
  color: #38bdf8 !important;
}

.cart-empty-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.01em !important;
}

[data-theme="dark"] .cart-empty-title,
body.dark-theme .cart-empty-title {
  color: #f1f5f9 !important;
}

.cart-empty-desc {
  font-size: 0.92rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 auto 22px auto !important;
  max-width: 320px !important;
}

[data-theme="dark"] .cart-empty-desc,
body.dark-theme .cart-empty-desc {
  color: #94a3b8 !important;
}

.btn-cart-empty-store {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 24px !important;
  font-size: 0.93rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-cart-empty-store:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.42) !important;
}

.btn-cart-empty-store:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}



/* =============================================================================
   ADMIN PANEL & WAREHOUSE / ADD KEYS WINDOWS (FULL KEYSOFT AESTHETICS)
   Constrained to header max-width (1280px) and formatted into modular window cards.
   ============================================================================= */

/* 1. CONTAINER & CARD LAYOUT CONSTRAINTS */
#pageSeller {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px 20px 60px 20px !important;
  box-sizing: border-box !important;
}

#pageSeller .card.glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #pageSeller .card.glass-card,
body.dark-theme #pageSeller .card.glass-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Header row of admin panel */
.seller-page-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
}

[data-theme="dark"] .seller-page-header,
body.dark-theme .seller-page-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* 2. ADMIN PROFILE HERO CARD */
.admin-profile-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 22px !important;
  flex-wrap: wrap !important;
}

[data-theme="dark"] .admin-profile-card,
body.dark-theme .admin-profile-card {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.cabinet-avatar-lg {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.cabinet-user-info {
  flex: 1 !important;
  min-width: 220px !important;
}

.cabinet-email {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .cabinet-email,
body.dark-theme .cabinet-email {
  color: #f8fafc !important;
}

.badge-role-admin {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.cabinet-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 13px !important;
  color: #64748b !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}

[data-theme="dark"] .cabinet-meta,
body.dark-theme .cabinet-meta {
  color: #94a3b8 !important;
}

.badge-status-active {
  color: #10b981 !important;
  font-weight: 600 !important;
}

/* 3. CID STATS CARDS */
.admin-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.admin-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] .admin-stat-card,
body.dark-theme .admin-stat-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.admin-stat-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.admin-stat-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

[data-theme="dark"] .admin-stat-label,
body.dark-theme .admin-stat-label {
  color: #94a3b8 !important;
}

.admin-stat-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

.admin-stat-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .admin-stat-value,
body.dark-theme .admin-stat-value {
  color: #f8fafc !important;
}

.admin-stat-sub {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 4. ADMIN TABS NAVIGATION */
.admin-tabs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
}

[data-theme="dark"] .admin-tabs-nav,
body.dark-theme .admin-tabs-nav {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.admin-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .admin-tab-btn,
body.dark-theme .admin-tab-btn {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

.admin-tab-btn:hover {
  color: #0284c7 !important;
  border-color: #38bdf8 !important;
}

.admin-tab-btn.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}

.admin-tab-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

.admin-tab-btn:not(.active) .admin-tab-badge {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="dark"] .admin-tab-btn:not(.active) .admin-tab-badge {
  background: #334155 !important;
  color: #94a3b8 !important;
}

/* 5. WAREHOUSE TOP BAR */
.wh-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="dark"] .wh-top-bar,
body.dark-theme .wh-top-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.wh-top-bar-info {
  max-width: 600px !important;
}

.wh-top-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

[data-theme="dark"] .wh-top-title,
body.dark-theme .wh-top-title {
  color: #f8fafc !important;
}

.wh-top-sub {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
}

[data-theme="dark"] .wh-top-sub,
body.dark-theme .wh-top-sub {
  color: #94a3b8 !important;
}

.wh-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Master CID Toggle Card */
.wh-cid-toggle-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

[data-theme="dark"] .wh-cid-toggle-card,
body.dark-theme .wh-cid-toggle-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.wh-cid-toggle-title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .wh-cid-toggle-title,
body.dark-theme .wh-cid-toggle-title {
  color: #f8fafc !important;
}

.wh-cid-toggle-status {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #10b981 !important;
}

.wh-cid-toggle-status.off {
  color: #ef4444 !important;
}

/* iOS Toggle switch */
.wh-switch {
  position: relative !important;
  display: inline-block !important;
  width: 42px !important;
  height: 24px !important;
  margin: 0 !important;
}

.wh-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.wh-switch-slider {
  position: absolute !important;
  cursor: pointer !important;
  inset: 0 !important;
  background-color: #cbd5e1 !important;
  transition: 0.3s !important;
  border-radius: 34px !important;
}

.wh-switch-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: 0.3s !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.wh-switch input:checked + .wh-switch-slider {
  background-color: #10b981 !important;
}

.wh-switch input:checked + .wh-switch-slider:before {
  transform: translateX(18px) !important;
}

/* 6. KPI COUNTER TILES */
.wh-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 900px) {
  .wh-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.wh-kpi-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] .wh-kpi-card,
body.dark-theme .wh-kpi-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.wh-kpi-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  flex-shrink: 0 !important;
}

.wh-kpi-icon.blue { background: rgba(2, 132, 199, 0.1) !important; color: #0284c7 !important; }
.wh-kpi-icon.green { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.wh-kpi-icon.orange { background: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; }
.wh-kpi-icon.purple { background: rgba(139, 92, 246, 0.1) !important; color: #8b5cf6 !important; }

.wh-kpi-content {
  display: flex !important;
  flex-direction: column !important;
}

.wh-kpi-label {
  font-size: 11px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}

[data-theme="dark"] .wh-kpi-label,
body.dark-theme .wh-kpi-label {
  color: #94a3b8 !important;
}

.wh-kpi-val {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin: 2px 0 !important;
}

[data-theme="dark"] .wh-kpi-val,
body.dark-theme .wh-kpi-val {
  color: #f8fafc !important;
}

.wh-kpi-sub {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
}

/* 7. SEARCH BAR & CATEGORY PILLS */
.wh-filter-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.wh-search-wrap {
  position: relative !important;
  flex: 1 !important;
  min-width: 260px !important;
  max-width: 380px !important;
}

.wh-search-wrap i.fa-magnifying-glass {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  pointer-events: none !important;
}

.wh-search-input {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 36px 8px 38px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .wh-search-input,
body.dark-theme .wh-search-input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.wh-search-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.wh-category-pills {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.wh-pill {
  padding: 8px 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .wh-pill,
body.dark-theme .wh-pill {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

.wh-pill:hover {
  border-color: #38bdf8 !important;
  color: #0284c7 !important;
}

.wh-pill.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
}

/* 8. WAREHOUSE PRODUCTS GRID */
.wh-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 30px !important;
}

.wh-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
}

[data-theme="dark"] .wh-card,
body.dark-theme .wh-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.wh-card:hover {
  transform: translateY(-2px) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 24px -4px rgba(2, 132, 199, 0.15) !important;
}

.wh-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.wh-card-emblem {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.wh-card-emblem.emblem-win { background: rgba(0, 120, 212, 0.1) !important; color: #0078d4 !important; }
.wh-card-emblem.emblem-office-365,
.wh-card-emblem.emblem-office-modern,
.wh-card-emblem.emblem-office-classic { background: rgba(235, 60, 0, 0.1) !important; color: #eb3c00 !important; }
.wh-card-emblem.emblem-server { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.wh-card-emblem.emblem-gemini,
.wh-card-emblem.emblem-neural { background: rgba(139, 92, 246, 0.1) !important; color: #8b5cf6 !important; }

.wh-card-badges {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 5px !important;
}

.wh-badge-stock {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.wh-badge-stock.in-stock {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.wh-badge-stock.out-of-stock {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.wh-badge-delivery {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.wh-badge-delivery.auto {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.2) !important;
}

.wh-badge-delivery.bot {
  background: rgba(139, 92, 246, 0.1) !important;
  color: #8b5cf6 !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

.wh-card-body {
  margin-bottom: 14px !important;
}

.wh-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.35 !important;
}

[data-theme="dark"] .wh-card-title,
body.dark-theme .wh-card-title {
  color: #f8fafc !important;
}

.wh-card-version {
  font-size: 12px !important;
  color: #64748b !important;
  margin-bottom: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .wh-card-version,
body.dark-theme .wh-card-version {
  color: #94a3b8 !important;
}

.wh-card-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.wh-badge-activation {
  font-size: 11.5px !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

[data-theme="dark"] .wh-badge-activation,
body.dark-theme .wh-badge-activation {
  color: #94a3b8 !important;
}

.wh-badge-activation i {
  color: #0284c7 !important;
  font-size: 10px !important;
}

.wh-card-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

.wh-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 12.5px !important;
  color: #64748b !important;
}

[data-theme="dark"] .wh-card-footer,
body.dark-theme .wh-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

.wh-card-action-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
}

.wh-card:hover .wh-card-action-text {
  color: #0284c7 !important;
}

.wh-card-btn-add {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

[data-theme="dark"] .wh-card-btn-add,
body.dark-theme .wh-card-btn-add {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.wh-card-btn-add:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* 9. MODALS BACKDROP & DIALOGS (PRODUCT & ADD KEYS MODAL) */
.modal-backdrop-custom {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 2500 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.modal-backdrop-custom.open,
.modal-backdrop-custom.active,
.modal-backdrop-custom[style*="display: block"],
.modal-backdrop-custom[style*="display: flex"] {
  display: flex !important;
}

.modal-dialog-custom {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.22) !important;
  max-width: 880px !important;
  width: 100% !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  margin: auto !important;
  animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .modal-dialog-custom,
body.dark-theme .modal-dialog-custom {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6) !important;
}

@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal Header */
.wh-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

[data-theme="dark"] .wh-modal-header,
body.dark-theme .wh-modal-header {
  background: #0f172a !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.wh-modal-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.wh-modal-emblem {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  flex-shrink: 0 !important;
}

.wh-modal-title-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.modal-custom-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

[data-theme="dark"] .modal-custom-title,
body.dark-theme .modal-custom-title {
  color: #f8fafc !important;
}

.wh-modal-version {
  font-size: 13px !important;
  color: #64748b !important;
}

[data-theme="dark"] .wh-modal-version,
body.dark-theme .wh-modal-version {
  color: #94a3b8 !important;
}

.wh-modal-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}

.wh-modal-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  margin-left: 4px !important;
}

.wh-modal-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal-custom-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}

[data-theme="dark"] .modal-custom-close,
body.dark-theme .modal-custom-close {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

.modal-custom-close:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

.wh-modal-body {
  padding: 22px 24px !important;
  overflow-y: auto !important;
  max-height: calc(88vh - 120px) !important;
}

/* Modal Search & Add Keys Bar */
.wh-keys-action-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap !important;
}

.wh-key-search-box {
  position: relative !important;
  flex: 1 !important;
  max-width: 340px !important;
}

.wh-key-search-box i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
}

.wh-key-search-box input {
  width: 100% !important;
  height: 38px !important;
  padding: 6px 12px 6px 36px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .wh-key-search-box input,
body.dark-theme .wh-key-search-box input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* 10. DEDICATED ADD KEYS WINDOW BOX (#whAddKeysBox) */
.wh-add-keys-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  animation: fadeInDown 0.2s ease-out !important;
}

[data-theme="dark"] .wh-add-keys-box,
body.dark-theme .wh-add-keys-box {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.wh-add-keys-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.wh-add-keys-header h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[data-theme="dark"] .wh-add-keys-header h5,
body.dark-theme .wh-add-keys-header h5 {
  color: #f8fafc !important;
}

.wh-close-subpanel {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  padding: 4px !important;
}

.wh-close-subpanel:hover {
  color: #ef4444 !important;
}

.wh-add-keys-hint {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.45 !important;
}

[data-theme="dark"] .wh-add-keys-hint,
body.dark-theme .wh-add-keys-hint {
  color: #94a3b8 !important;
}

.form-textarea-custom,
.wh-add-keys-box textarea {
  width: 100% !important;
  min-height: 105px !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  outline: none !important;
  resize: vertical !important;
}

[data-theme="dark"] .form-textarea-custom,
[data-theme="dark"] .wh-add-keys-box textarea,
body.dark-theme .form-textarea-custom,
body.dark-theme .wh-add-keys-box textarea {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.form-textarea-custom:focus,
.wh-add-keys-box textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.wh-add-keys-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.wh-copies-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.wh-copies-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

[data-theme="dark"] .wh-copies-label,
body.dark-theme .wh-copies-label {
  color: #cbd5e1 !important;
}

.copies-counter-input {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

[data-theme="dark"] .copies-counter-input,
body.dark-theme .copies-counter-input {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.copies-btn {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: none !important;
  color: #0f172a !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s !important;
}

[data-theme="dark"] .copies-btn,
body.dark-theme .copies-btn {
  color: #f8fafc !important;
}

.copies-btn:hover {
  background: rgba(2, 132, 199, 0.12) !important;
  color: #0284c7 !important;
}

.copies-val-input {
  width: 44px !important;
  height: 32px !important;
  border: none !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: transparent !important;
  outline: none !important;
}

[data-theme="dark"] .copies-val-input,
body.dark-theme .copies-val-input {
  color: #f8fafc !important;
}

#whSubmitKeysBtn {
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#whSubmitKeysBtn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.42) !important;
}

/* 11. KEYS TABLE WINDOW */
.seller-keys-table-wrap.wh-table-scroll {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
}

[data-theme="dark"] .seller-keys-table-wrap.wh-table-scroll,
body.dark-theme .seller-keys-table-wrap.wh-table-scroll {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.wh-keys-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
}

.wh-keys-table th {
  background: #f8fafc !important;
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
  letter-spacing: 0.3px !important;
}

[data-theme="dark"] .wh-keys-table th,
body.dark-theme .wh-keys-table th {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
  color: #94a3b8 !important;
}

.wh-keys-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13px !important;
  color: #0f172a !important;
  vertical-align: middle !important;
}

[data-theme="dark"] .wh-keys-table td,
body.dark-theme .wh-keys-table td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: #f8fafc !important;
}

.wh-keys-table code.key-code {
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(2, 132, 199, 0.15) !important;
}

.wh-copies-stepper {
  display: inline-flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

[data-theme="dark"] .wh-copies-stepper,
body.dark-theme .wh-copies-stepper {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.wh-stepper-btn {
  width: 26px !important;
  height: 26px !important;
  background: transparent !important;
  border: none !important;
  color: #0f172a !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .wh-stepper-btn,
body.dark-theme .wh-stepper-btn {
  color: #f8fafc !important;
}

.wh-stepper-btn:hover {
  background: rgba(2, 132, 199, 0.18) !important;
  color: #0284c7 !important;
}

.wh-stepper-val {
  min-width: 28px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .wh-stepper-val,
body.dark-theme .wh-stepper-val {
  color: #f8fafc !important;
}

/* 12. PRODUCT EDIT MODAL & FORM CONTROLS */
.wh-edit-dialog {
  max-width: 680px !important;
}

.form-row-custom {
  display: flex !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.form-group-custom {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
  min-width: 200px !important;
}

.form-label-custom {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

[data-theme="dark"] .form-label-custom,
body.dark-theme .form-label-custom {
  color: #cbd5e1 !important;
}

.form-input-custom,
.form-select-custom {
  height: 40px !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

[data-theme="dark"] .form-input-custom,
[data-theme="dark"] .form-select-custom,
body.dark-theme .form-input-custom,
body.dark-theme .form-select-custom {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.form-input-custom:focus,
.form-select-custom:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* 13. USERS MANAGEMENT TAB (#adminUsersSection) */
.admin-users-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.admin-users-table-wrap {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

[data-theme="dark"] .admin-users-table-wrap,
body.dark-theme .admin-users-table-wrap {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.admin-users-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.admin-users-table th {
  background: #f8fafc !important;
  padding: 11px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="dark"] .admin-users-table th,
body.dark-theme .admin-users-table th {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
  color: #94a3b8 !important;
}

.admin-users-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13.5px !important;
}

[data-theme="dark"] .admin-users-table td,
body.dark-theme .admin-users-table td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}


/* Extra Keysoft Table Button Polish */
.btn-copy-inline {
  background: transparent !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  color: #64748b !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 12px !important;
  padding: 0 !important;
}

.btn-copy-inline:hover {
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

[data-theme="dark"] .btn-copy-inline,
body.dark-theme .btn-copy-inline {
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .btn-copy-inline:hover,
body.dark-theme .btn-copy-inline:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

.btn-del-key-inline {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #ef4444 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 13px !important;
  padding: 0 !important;
}

.btn-del-key-inline:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #dc2626 !important;
}


/* =============================================================================
   PRODUCT DETAILS MODAL V4 - ENHANCED USER REQUIREMENTS
   ============================================================================= */

.pdm-ks-version-sub {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-top: 4px !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

[data-theme="dark"] .pdm-ks-version-sub,
body.dark-theme .pdm-ks-version-sub {
  color: #94a3b8 !important;
}

.pdm-ks-actions-row.single-action {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.pdm-ks-actions-row.single-action .btn-pdm-cart {
  width: 100% !important;
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.pdm-ks-actions-row.single-action .btn-pdm-cart:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;
}

/* Beautiful Green Payment Note Box */
.pdm-ks-payment-badge-green {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #10b981 !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .pdm-ks-payment-badge-green,
body.dark-theme .pdm-ks-payment-badge-green {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

/* Package Apps with Logos for Microsoft Office */
.pdm-apps-box {
  margin-top: 18px !important;
  padding: 16px 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .pdm-apps-box,
body.dark-theme .pdm-apps-box {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.pdm-apps-box-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[data-theme="dark"] .pdm-apps-box-title,
body.dark-theme .pdm-apps-box-title {
  color: #f8fafc !important;
}

.pdm-package-list {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.pdm-package-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 58px !important;
}

.pdm-app-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.18s ease !important;
}

.pdm-package-item:hover .pdm-app-logo {
  transform: translateY(-2px) !important;
}

.pdm-app-word { background: linear-gradient(135deg, #2b579a 0%, #185abd 100%) !important; }
.pdm-app-excel { background: linear-gradient(135deg, #217346 0%, #107c41 100%) !important; }
.pdm-app-powerpoint { background: linear-gradient(135deg, #d24726 0%, #c43e1c 100%) !important; }
.pdm-app-outlook { background: linear-gradient(135deg, #0072c6 0%, #0078d4 100%) !important; }
.pdm-app-onenote { background: linear-gradient(135deg, #80397b 0%, #7719aa 100%) !important; }
.pdm-app-access { background: linear-gradient(135deg, #a4373a 0%, #8b2b2e 100%) !important; }
.pdm-app-publisher { background: linear-gradient(135deg, #087570 0%, #055450 100%) !important; }
.pdm-app-teams { background: linear-gradient(135deg, #505ac9 0%, #464eb8 100%) !important; }

.pdm-app-name {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

[data-theme="dark"] .pdm-app-name,
body.dark-theme .pdm-app-name {
  color: #cbd5e1 !important;
}

/* Header Admin Navigation Button */
#headerAdminNavBtn {
  color: #0284c7 !important;
  font-weight: 600 !important;
}
#headerAdminNavBtn i {
  color: #0284c7 !important;
}
#headerAdminNavBtn:hover {
  background: rgba(2, 132, 199, 0.08) !important;
  color: #0369a1 !important;
}
#headerAdminNavBtn.active {
  background: rgba(2, 132, 199, 0.12) !important;
  color: #0284c7 !important;
}
[data-theme="dark"] #headerAdminNavBtn,
body.dark-theme #headerAdminNavBtn {
  color: #38bdf8 !important;
}
[data-theme="dark"] #headerAdminNavBtn i,
body.dark-theme #headerAdminNavBtn i {
  color: #38bdf8 !important;
}
[data-theme="dark"] #headerAdminNavBtn:hover,
body.dark-theme #headerAdminNavBtn:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #7dd3fc !important;
}
[data-theme="dark"] #headerAdminNavBtn.active,
body.dark-theme #headerAdminNavBtn.active {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
}


/* ==========================================================================
   USER FIXES: SINGLE-LINE ICONS & HEADER NAV ACTIVATION CID
   ========================================================================== */

/* 1. Header Navigation - Single Line Items & No Wrap */
.header-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#navActivationLink,
#navActivationLink span,
#headerCatalogBtn span,
#navHistoryLink span,
#headerCartBtn span {
  white-space: nowrap !important;
}

.header-center-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* 2. Global Single-line Icon + Text Alignment */
.card-title-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}

.card-title-group > div {
  min-width: 0 !important;
}

.card-title-group .card-title {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

/* 3. Legal Documents Header & Highlight Boxes (Single line with icons) */
.legal-doc-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.legal-doc-header .legal-doc-title {
  margin: 0 0 4px 0 !important;
}

.legal-doc-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.legal-highlight-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
}

.legal-highlight-box i {
  font-size: 18px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

.legal-highlight-box > div {
  flex: 1 !important;
}

/* 4. Product Details Modal & Custom Activations Headers */
.pdm-card-title-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

.pdm-card-title-wrap .pdm-card-title {
  margin: 0 !important;
}

.custom-tokens-title-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 5. Headings with icons across the entire site */
h1 > i, h2 > i, h3 > i, h4 > i, h5 > i, h6 > i {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

.modal-title-group,
.cab-header-title-group,
.modal-header-title-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}


/* ==========================================================================
   USER FIXES: 3 PACKAGES PER ROW & CONTACTS AND SUPPORT PAGE
   ========================================================================== */

/* 1. Modal Packages Grid - 3 items per line */
.modal-tokens-compact {
  max-width: 640px !important;
  width: 100% !important;
  padding: 24px !important;
}

.pricing-grid.tokens-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 600px) {
  .pricing-grid.tokens-grid-6 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .package-card {
    padding: 10px 8px !important;
  }
  .package-card .package-name {
    font-size: 12px !important;
  }
  .package-card .package-price {
    font-size: 15px !important;
  }
  .package-card .package-unit {
    font-size: 10px !important;
  }
}

.package-card {
  position: relative !important;
  display: block !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.package-card:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
}

.package-card.selected {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
}

.package-card input[type="radio"] {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  accent-color: #0284c7 !important;
  margin: 0 !important;
}

.package-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.package-card .package-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding-right: 16px !important;
}

.package-card .package-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  line-height: 1.2 !important;
}

.package-card .package-unit {
  font-size: 11px !important;
  color: #64748b !important;
}

[data-theme="dark"] .package-card,
body.dark-theme .package-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .package-card .package-name,
body.dark-theme .package-card .package-name {
  color: #f8fafc !important;
}

[data-theme="dark"] .package-card .package-price,
body.dark-theme .package-card .package-price {
  color: #38bdf8 !important;
}

[data-theme="dark"] .package-card.selected,
body.dark-theme .package-card.selected {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

/* Slider removed completely */
.custom-tokens-slider-wrap {
  display: none !important;
}

/* 2. Contacts & Support Page Styles */
.contacts-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

@media (max-width: 680px) {
  .contacts-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

.contact-channel-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.contact-channel-card:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.08) !important;
}

[data-theme="dark"] .contact-channel-card,
body.dark-theme .contact-channel-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.contact-requisites-card {
  grid-column: 1 / -1 !important;
  background: #f8fafc !important;
  border: 1.5px solid #bae6fd !important;
  padding: 22px !important;
  margin-bottom: 4px !important;
}

[data-theme="dark"] .contact-requisites-card,
body.dark-theme .contact-requisites-card {
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

.channel-card-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.channel-title-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.channel-icon-box {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.channel-icon-box.req-icon {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.channel-icon-box.tg-icon {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.channel-icon-box.mail-icon {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

.channel-icon-box.time-icon {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.channel-icon-box.news-icon {
  background: #f3e8ff !important;
  color: #9333ea !important;
}

[data-theme="dark"] .channel-icon-box.req-icon { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; border-color: rgba(56, 189, 248, 0.3) !important; }
[data-theme="dark"] .channel-icon-box.tg-icon { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; }
[data-theme="dark"] .channel-icon-box.mail-icon { background: rgba(148, 163, 184, 0.15) !important; color: #38bdf8 !important; }
[data-theme="dark"] .channel-icon-box.time-icon { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .channel-icon-box.news-icon { background: rgba(168, 85, 247, 0.15) !important; color: #c084fc !important; }

.channel-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  width: fit-content !important;
}

.channel-badge.badge-blue { background: #e0f2fe !important; color: #0284c7 !important; }
.channel-badge.badge-neutral { background: #f1f5f9 !important; color: #475569 !important; }
.channel-badge.badge-green { background: #dcfce7 !important; color: #15803d !important; }
.channel-badge.badge-purple { background: #f3e8ff !important; color: #7e22ce !important; }

[data-theme="dark"] .channel-badge.badge-blue { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; }
[data-theme="dark"] .channel-badge.badge-neutral { background: rgba(148, 163, 184, 0.15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .channel-badge.badge-green { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .channel-badge.badge-purple { background: rgba(168, 85, 247, 0.15) !important; color: #c084fc !important; }

.channel-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

[data-theme="dark"] .channel-title { color: #f8fafc !important; }

.channel-desc {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 0 16px 0 !important;
  flex: 1 !important;
}

[data-theme="dark"] .channel-desc { color: #94a3b8 !important; }

.channel-action-btn {
  width: 100% !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.channel-subtext {
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  margin-top: 8px !important;
}

.requisites-details {
  font-size: 13.5px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
}

[data-theme="dark"] .requisites-details { color: #cbd5e1 !important; }

.req-row { margin-bottom: 4px !important; }
.req-name { font-size: 14.5px !important; color: #0f172a !important; font-weight: 700 !important; }
[data-theme="dark"] .req-name { color: #f8fafc !important; }
.req-meta { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.req-links { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.req-dot { color: #94a3b8 !important; }
.req-links a { color: #0284c7 !important; text-decoration: underline !important; font-weight: 600 !important; }
.code-font { font-family: 'JetBrains Mono', monospace !important; color: #0284c7 !important; }
[data-theme="dark"] .code-font, [data-theme="dark"] .req-links a { color: #38bdf8 !important; }

.schedule-pill-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
  margin-bottom: 4px !important;
}

[data-theme="dark"] .schedule-pill-box {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.schedule-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  color: #334155 !important;
}

[data-theme="dark"] .schedule-item { color: #cbd5e1 !important; }
.schedule-item strong { color: #0f172a !important; font-weight: 600 !important; }
[data-theme="dark"] .schedule-item strong { color: #f8fafc !important; }
.schedule-item span { color: #16a34a !important; font-weight: 600 !important; }
[data-theme="dark"] .schedule-item span { color: #4ade80 !important; }

.step-sym {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #1e293b !important;
  display: inline-block !important;
  pointer-events: none !important;
}

[data-theme="dark"] .step-sym {
  color: #f8fafc !important;
}

.btn-token-step:hover .step-sym {
  color: #0284c7 !important;
}

/* ==========================================================================
   ACTIVATION PAGE WORKFLOW: DIMMED IID, VERIFIED KEY PILL & DROPZONE ORDER
   ========================================================================== */
.act-iid-box.is-dimmed {
  opacity: 0.45 !important;
  filter: grayscale(0.5) !important;
  pointer-events: none !important;
  user-select: none !important;
  position: relative !important;
  cursor: not-allowed !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.iid-locked-overlay-hint {
  display: none !important;
}

.act-iid-box.is-dimmed .iid-locked-overlay-hint {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f1f5f9 !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

[data-theme="dark"] .act-iid-box.is-dimmed .iid-locked-overlay-hint {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* Verified Key Compact Pill */
.verified-key-compact-box {
  margin-bottom: 16px !important;
}

.verified-key-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] .verified-key-pill {
  background: rgba(22, 101, 52, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.verified-key-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #166534 !important;
}

[data-theme="dark"] .verified-key-info {
  color: #86efac !important;
}

.btn-change-verified-key {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
}

.btn-change-verified-key:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

[data-theme="dark"] .btn-change-verified-key {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-change-verified-key:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* Ensure Dropzone displays when active */
#activationCardLeft.mode-tokens .target-step2-dropzone,
.mode-tokens .target-step2-dropzone,
#activationCardLeft.key-verified .target-step2-dropzone,
.key-verified .target-step2-dropzone {
  display: flex !important;
}

/* ==========================================================================
   CID RESULTS CARD HEADER & ACTIONS
   ========================================================================== */
.cid-results-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.cid-results-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.cid-results-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #14532d !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .cid-results-title {
  color: #86efac !important;
}

.cid-results-subtitle {
  font-size: 13px !important;
  color: #166534 !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .cid-results-subtitle {
  color: #bbf7d0 !important;
}

.cid-results-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.btn-cid-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 220px !important;
  min-width: 220px !important;
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.btn-cid-copy {
  background: #15803d !important;
  color: #ffffff !important;
  border: 1.5px solid #15803d !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.25) !important;
}

.btn-cid-copy:hover {
  background: #166534 !important;
  border-color: #166534 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(21, 128, 61, 0.35) !important;
}

.btn-cid-reset {
  background: #ffffff !important;
  color: #166534 !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.btn-cid-reset:hover {
  background: #dcfce7 !important;
  color: #14532d !important;
  border-color: #4ade80 !important;
  transform: translateY(-1px) !important;
}

/* Dark mode for CID action buttons & card */
[data-theme="dark"] .cid-results-card {
  background: rgba(22, 101, 52, 0.18) !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
}

[data-theme="dark"] .cid-block-item {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .cid-block-val {
  color: #86efac !important;
}

[data-theme="dark"] .btn-cid-reset {
  background: #1e293b !important;
  color: #86efac !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .btn-cid-reset:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

@media (max-width: 640px) {
  .cid-results-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .cid-results-actions {
    width: 100% !important;
    align-items: stretch !important;
    margin-left: 0 !important;
  }
  .btn-cid-action {
    width: 100% !important;
    min-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .catalog-layout {
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }
}



/* ==========================================================================
   PHOTO 2 STYLE: CATEGORY ACCORDIONS & SINGLE-LINE CLEAN TITLES
   ========================================================================== */

/* 1. PRODUCT CARDS: Single Line, Non-Bold Title, No Subtitle / Brand Tag */
.card-ks-brand-tag {
  display: none !important;
}

.card-ks-subtitle {
  display: none !important;
}

.card-ks-content {
  padding: 10px 14px 10px 14px !important;
}

.card-ks-title {
  font-size: 14px !important;
  font-weight: 500 !important; /* Non-bold clean typography as requested */
  color: #1e293b !important;
  white-space: normal !important;
  word-break: break-word !important;
  min-height: unset !important;
  margin: 2px 0 4px 0 !important;
  line-height: 1.25 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.card-ks-footer {
  margin-top: 4px !important;
  padding-top: 8px !important;
}

[data-theme="dark"] .card-ks-title {
  color: #f1f5f9 !important;
}

/* 2. CATALOG SIDEBAR (PHOTO 2 DESIGN) */
.catalog-sidebar {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

.catalog-sidebar-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 2px 0 10px 6px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.cat-accordion-group {
  margin-bottom: 7px !important;
  border: none !important;
  background: transparent !important;
}

.cat-accordion-header,
.cat-all-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8fafc !important; /* Light-gray rounded card */
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.cat-accordion-header:hover,
.cat-all-pill:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.cat-accordion-header.active,
.cat-all-pill.active {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

.cat-accordion-group.open .cat-accordion-header {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

.cat-accordion-header .chevron-icon,
.cat-all-pill .chevron-icon {
  font-size: 12px !important;
  color: #64748b !important;
  transition: transform 0.2s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.cat-accordion-group.open .chevron-icon {
  transform: rotate(180deg) !important;
  color: #0284c7 !important;
}

/* Sub-items Inside Accordion (NO Prices, Clean Design) */
.cat-accordion-body {
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 5px 4px 6px 12px !important;
}

.cat-accordion-group.open .cat-accordion-body {
  display: flex !important;
}

.cat-version-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
}

.cat-version-pill:hover {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

.cat-version-pill.active {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

/* Remove all price badges and ТОП pills */
.cat-version-badge {
  display: none !important;
}

/* Dark Theme Support */
[data-theme="dark"] .catalog-sidebar {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .catalog-sidebar-title {
  color: #64748b !important;
}

[data-theme="dark"] .cat-accordion-header,
[data-theme="dark"] .cat-all-pill {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .cat-accordion-header:hover,
[data-theme="dark"] .cat-all-pill:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .cat-accordion-header.active,
[data-theme="dark"] .cat-all-pill.active,
[data-theme="dark"] .cat-accordion-group.open .cat-accordion-header {
  background: #1e293b !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .cat-accordion-header .chevron-icon,
[data-theme="dark"] .cat-all-pill .chevron-icon {
  color: #94a3b8 !important;
}

[data-theme="dark"] .cat-version-pill {
  color: #94a3b8 !important;
}

[data-theme="dark"] .cat-version-pill:hover {
  background: #0f172a !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .cat-version-pill.active {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}



/* Ensure chevron icon in catalog sidebar is clearly visible matching Photo 2 */
.cat-accordion-header .chevron-icon,
.cat-all-pill .chevron-icon {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-left: auto !important;
  transition: transform 0.2s ease, color 0.18s ease !important;
}

.cat-accordion-group.open .chevron-icon {
  transform: rotate(180deg) !important;
  color: #0284c7 !important;
}

[data-theme="dark"] .cat-accordion-header .chevron-icon,
[data-theme="dark"] .cat-all-pill .chevron-icon {
  color: #94a3b8 !important;
}



.ks-cover-wordmark.wordmark-long {
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
}
.ks-cover-wordmark.wordmark-long.modal-wordmark {
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
}


/* --- REFINED MODAL TYPOGRAPHY & UNIFIED SECTIONS (USER REQUEST) --- */
.pdm-ks-title-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 4px 0 12px 0 !important;
}

.pdm-ks-title-main {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.pdm-ks-title-sub {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.pdm-unified-details-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.pdm-instructions-card-wrap {
  margin-bottom: 0 !important;
  border-left: 3px solid #0284c7 !important;
}

.pdm-instructions-circle-icon {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.pdm-instruction-text {
  line-height: 1.65 !important;
  color: #334155 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
}

/* Cover titles: Expand width and remove empty vacuum on the right */
.ks-cover-titles {
  width: 100% !important;
  max-width: 82% !important;
}

.ks-cover-titles.modal-titles {
  margin-top: 14px !important;
  max-width: 86% !important;
}

.ks-cover-wordmark.modal-wordmark {
  font-size: 30px !important;
  letter-spacing: -0.4px !important;
  white-space: nowrap !important;
}

.ks-cover-version.modal-version {
  font-size: 26px !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
}

.pdm-ks-media-box {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}


/* ==========================================================================
   HEADER BRAND LOGO & CABINET BUTTON POLISH (Single line, matched height, 8px radius)
   ========================================================================== */
.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  gap: 11px !important;
  cursor: pointer !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.brand-logo-badge {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 18px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-logo-badge i {
  color: #ffffff !important;
  font-size: 18px !important;
  transform: rotate(-10deg) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-group:hover .brand-logo-badge {
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.brand-group:hover .brand-logo-badge i {
  transform: rotate(-30deg) scale(1.15) !important;
  color: #ffffff !important;
}

.brand-group:active .brand-logo-badge i {
  transform: rotate(20deg) scale(0.95) !important;
  color: #ffffff !important;
  transition: transform 0.12s ease-out !important;
}

.brand-name {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  letter-spacing: -0.6px !important;
  color: #0f172a !important;
  line-height: 40px !important;
  white-space: nowrap !important;
}

.brand-name span {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 60%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 850 !important;
  margin-left: 1px !important;
}

/* Cabinet and Search Buttons: Strictly identical 38x38px with 8px border-radius (not round) */
.header-search-icon-btn,
.header-login-btn,
.header-cabinet-pill,
.header-cabinet-pill.is-logged-in,
.header-auth-wrap.logged-in #headerCabinetPill,
.header-auth-wrap:not(.logged-in) #headerLoginBtn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important; /* Strictly 8px, not 20px, not 50% */
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.header-search-icon-btn:hover,
.header-login-btn:hover,
.header-cabinet-pill:hover,
.header-cabinet-pill.is-logged-in:hover,
.header-auth-wrap.logged-in #headerCabinetPill:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15) !important;
}

/* Logged-in state accent border while maintaining identical 38x38px 8px-radius shape */
.header-cabinet-pill.is-logged-in,
.header-auth-wrap.logged-in #headerCabinetPill {
  background: #f0f9ff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   MINIMALIST & COMPACT ADMIN PANEL, WAREHOUSE & CABINET REFURBISHMENT
   ========================================================================== */

/* 1. Personal Cabinet: 2-Line Clickable Balance Box */
.cab-balance-box-2line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: 12px !important;
}

.cab-balance-box-2line:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12) !important;
  transform: translateY(-1px) !important;
}

.cab-balance-lines-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cab-balance-line-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.cab-balance-line-val {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

.cab-balance-line-val strong {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

/* 2. Compact Minimalist Admin Panel Header & Stats */
.admin-profile-card {
  padding: 12px 18px !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
}

.admin-stats-grid {
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.admin-stat-card {
  padding: 12px 16px !important;
  border-radius: 10px !important;
}

.admin-stat-header {
  margin-bottom: 6px !important;
}

.admin-stat-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}

.admin-stat-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

.admin-tabs-nav {
  gap: 6px !important;
  margin-bottom: 18px !important;
  padding: 4px !important;
  background: #f1f5f9 !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
}

.admin-tab-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* 3. Compact Minimalist Warehouse Product Windows (Окошки с версией товара) */
.wh-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 16px !important;
}

.wh-admin-product-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}

.wh-admin-product-box:hover {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.1) !important;
  transform: translateY(-2px) !important;
}

.wh-box-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.wh-box-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.wh-box-icon.office {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #ea580c !important;
}

.wh-box-icon.server {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
}

.wh-box-icon.visio {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #16a34a !important;
}

.wh-box-icon.project {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

.wh-box-header-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.wh-box-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wh-box-version {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.2 !important;
}

.wh-box-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border: 1px solid #f1f5f9 !important;
}

.wh-box-price-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.wh-box-price-val {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.wh-box-old-price {
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

.wh-box-stock-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.wh-box-stock-badge.in-stock {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.wh-box-stock-badge.empty {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

.wh-box-actions {
  display: flex !important;
  gap: 8px !important;
}

.btn-wh-action {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-wh-add {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
}

.btn-wh-add:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

.btn-wh-edit {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

.btn-wh-edit:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* 4. Warehouse Product Modal Tabs */
.wh-modal-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 16px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.wh-modal-tab-btn.active {
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.wh-modal-tab-btn:hover:not(.active) {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

/* 5. Users Table Legibility Polish */
.admin-user-row td {
  color: #0f172a !important;
}

.admin-user-row div[style*="font-weight: 600; color: #f8fafc"] {
  color: #0f172a !important;
}

/* 6. Settings Window Panels (SMTP & Payments) */
.smtp-form-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.smtp-panel-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}


/* ==========================================================================
   MINIMALIST UNIFIED HISTORY CARD (Clean, Single Window, No Nested Box)
   ========================================================================== */
.history-item-window {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.history-item-window:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.hist-win-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.hist-win-meta-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.hist-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3.5px 9px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

.hist-tag-badge.badge-activation {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.hist-tag-badge.badge-key {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
}

.hist-tag-badge.badge-tokens {
  background: #fefce8 !important;
  color: #ca8a04 !important;
  border: 1px solid #fef08a !important;
}

.hist-tag-badge.badge-account {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}

.hist-win-date {
  font-size: 12px !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.hist-user-email-btn {
  font-size: 12px !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 2.5px 8px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.hist-user-guest-badge {
  font-size: 11.5px !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.hist-win-status-badge {
  font-size: 12px !important;
  color: #16a34a !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.hist-win-product-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.hist-win-prod-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.hist-win-prod-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
}

/* Unified Code Row (No Nested Box, Copy Button on Right) */
.hist-win-code-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.hist-win-code-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.hist-win-code-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  font-size: 13px !important;
}

.hist-win-code-label {
  font-weight: 600 !important;
  color: #64748b !important;
  width: 36px !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  font-size: 12.5px !important;
}

.hist-win-code-val {
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  word-break: normal !important;
  user-select: all !important;
  letter-spacing: 0.2px !important;
}

.hist-win-code-val.val-cid {
  color: #0284c7 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  letter-spacing: 0.1px !important;
}

.hist-win-code-val.val-key {
  color: #0f766e !important;
  font-weight: 700 !important;
}

.hist-win-code-action {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Minimalist Clean Copy Button */
.btn-copy-cid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.15) !important;
}

.btn-copy-cid:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25) !important;
  transform: translateY(-1px) !important;
}

.btn-copy-cid:active {
  transform: translateY(0) scale(0.98) !important;
}

.btn-copy-cid.copied {
  background: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}

.btn-copy-cid.btn-to-act {
  background: #0284c7 !important;
}

/* Suppress legacy nested box and legacy bottom actions */
.hist-win-code-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.hist-win-actions {
  display: none !important;
}

@media (max-width: 600px) {
  .hist-win-code-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hist-win-code-action {
    width: 100% !important;
  }
  .btn-copy-cid {
    width: 100% !important;
  }
}


/* =========================================================================
   Hide Cryptocurrency Payment Everywhere
   ========================================================================= */
#payMethodPillCrypto,
#tokenPayMethodPillCrypto,
#cryptoPayDetailsBox,
#tokenCryptoPayDetailsBox,
#payCryptoConfirmBtn,
#tokenPayCryptoConfirmBtn,
.checkout-pay-method-pill:has(#payMethodPillCrypto),
.crypto-pay-box {
  display: none !important;
}


/* =========================================================================
   COMPREHENSIVE MOBILE OPTIMIZATION & RESPONSIVE ADAPTATION
   Tailored for smartphones (iOS / Android) and tablets (< 768px & < 480px)
   ========================================================================= */

/* Prevent any accidental horizontal scroll on mobile viewport */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  /* 1. Header & Navigation */
  .header-container {
    height: auto !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .header-center-nav {
    width: 100% !important;
    order: 3 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    padding: 2px 2px 6px 2px !important;
    gap: 6px !important;
  }
  .header-center-nav::-webkit-scrollbar {
    display: none !important;
  }
  .header-nav-btn {
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  /* 2. Admin / Seller Main Page Layout */
  #pageSeller {
    padding: 12px 10px 40px 10px !important;
  }
  #pageSeller .card.glass-card {
    padding: 14px 14px 20px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  /* Seller Header */
  .seller-page-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    gap: 10px !important;
  }
  .card-title-group .card-title {
    font-size: 16px !important;
  }
  .card-title-group .card-desc {
    font-size: 12px !important;
  }

  /* Admin Profile Card */
  .admin-profile-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }
  .cabinet-email {
    font-size: 15px !important;
    word-break: normal !important;
  }

  /* Admin Stat Cards Grid */
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .admin-stat-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .admin-stat-value {
    font-size: 20px !important;
  }
  .admin-stat-label {
    font-size: 11px !important;
  }

  /* Admin Tabs Navigation (Keys, Users, SMTP, Payment) */
  .admin-tabs-nav {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  .admin-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }
  .admin-tab-btn {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  /* 3. Warehouse Top Bar (Header & 2 Action Buttons) */
  .wh-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }
  .wh-top-bar-info {
    max-width: 100% !important;
    width: 100% !important;
  }
  .wh-top-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }
  .wh-top-title i {
    font-size: 17px !important;
  }
  .wh-top-sub {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .wh-top-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .wh-top-actions .btn-add-prod,
  .wh-top-actions .btn-add-keys {
    flex: 1 1 0 !important;
    width: 50% !important;
    padding: 10px 10px !important;
    font-size: 13px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* 4. Warehouse KPI Grid (4 Cards) */
  .wh-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .wh-kpi-card {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  .wh-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  .wh-kpi-val {
    font-size: 19px !important;
  }
  .wh-kpi-label {
    font-size: 9.5px !important;
  }
  .wh-kpi-sub {
    font-size: 10px !important;
  }

  /* 5. Warehouse Search & Category Filter Pills */
  .wh-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .wh-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  .wh-category-pills {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
  }
  .wh-category-pills::-webkit-scrollbar {
    display: none !important;
  }
  .wh-pill {
    flex-shrink: 0 !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
  }

  /* 6. Warehouse Product Grid & Cards */
  .wh-products-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .wh-admin-product-box {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* 7. Tables Responsive Scrolling */
  .wh-table-scroll,
  .seller-keys-table-wrap,
  .admin-users-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  /* 8. Admin Modals (Add Keys, Edit Product, Key Details) */
  .modal-dialog-custom {
    width: 95% !important;
    max-width: 95% !important;
    margin: 12px auto !important;
    border-radius: 14px !important;
  }
  .wh-modal-header {
    padding: 12px 14px !important;
  }
  .wh-modal-body {
    padding: 12px 14px !important;
  }
  .wh-modal-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .modal-custom-title {
    font-size: 16px !important;
  }
  .wh-keys-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .wh-copies-control {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .wh-add-keys-box {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .wh-add-keys-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .wh-add-keys-footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 9. SMTP & Payment Settings Panel */
  .smtp-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .smtp-actions-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .smtp-actions-bar .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Extra compact styling for small smartphones (iPhone SE, etc.) */
  .wh-top-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .wh-top-actions .btn-add-prod,
  .wh-top-actions .btn-add-keys {
    width: 100% !important;
    flex: none !important;
  }
  .wh-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .wh-kpi-card {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .wh-kpi-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  .wh-kpi-val {
    font-size: 17px !important;
  }
  .seller-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .seller-header-logout {
    align-self: flex-end !important;
    margin-top: -38px !important;
  }
}



/* === MOBILE & RESPONSIVE PERFECTION (MAX-WIDTH: 768px) === */

/* --- 1. UNIVERSAL BRAND LOGO (Matching Softes Example) --- */
.brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.brand-logo-badge,
.brand-logo {
  background: #2563eb !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  flex-shrink: 0 !important;
  border: none !important;
  transition: transform 0.2s ease !important;
}

.brand-name,
.brand-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.brand-name .brand-dot,
.brand-title .brand-dot {
  color: #2563eb !important;
  font-weight: 900 !important;
  margin-left: 1px !important;
}

.header-menu-toggle-btn {
  display: none;
}

/* --- 2. MOBILE SPECIFIC (MAX-WIDTH: 768px) --- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* TOP HEADER */
  .site-header {
    height: 54px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  .site-header .header-container {
    height: 54px !important;
    padding: 0 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Hamburger Menu Toggle Button (Left of Logo) */
  .header-menu-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }

  .brand-group {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
  }

  .brand-logo-badge {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
  }

  .brand-name {
    font-size: 18px !important;
  }

  /* Strictly HIDE center nav on mobile */
  .header-center-nav {
    display: none !important;
  }

  /* Right Action Items: Search, Cart, Profile */
  .header-actions-right {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-search-icon-btn,
  .header-cart-icon-btn,
  .header-login-btn,
  .header-cabinet-pill {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 14px !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
  }

  .header-cart-icon-btn {
    color: #0284c7 !important;
  }

  .header-cart-icon-btn .cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 1.5px solid #ffffff !important;
  }

  .header-cabinet-pill {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
  }

  /* --- 3. CATALOG & PRODUCT CARDS (MOBILE) --- */
  .catalog-sidebar {
    display: none !important;
  }

  .catalog-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 20px auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .catalog-main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .catalog-header-row {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .catalog-page-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  .mobile-catalog-bar {
    display: block !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
  }

  .btn-mob-open-drawer {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  }

  .btn-mob-open-drawer i {
    color: #0284c7 !important;
  }

  .catalog-controls-bar {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .catalog-filter-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative !important;
  }

  .catalog-filter-search input {
    width: 100% !important;
    height: 38px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    padding: 0 10px 0 32px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .catalog-filter-search i {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
  }

  .catalog-sort-select {
    width: 135px !important;
    flex-shrink: 0 !important;
    height: 38px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    padding: 0 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
  }

  /* Two Columns Centered */
  .products-grid-keysoft {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 auto 30px auto !important;
    box-sizing: border-box !important;
  }

  .card-keysoft-v3 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  /* Card Cover: Taller height (130px), clean Microsoft on line 1, version on line 2, subtle electronic key on bottom-left */
  .card-ks-art-banner,
  .card-ks-art-cover {
    width: 100% !important;
    height: 130px !important;
    padding: 10px 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .card-ks-act-badge {
    display: none !important;
  }

  .ks-cover-ms-brand {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    z-index: 2 !important;
  }

  .ks-ms-grid {
    width: 10px !important;
    height: 10px !important;
    gap: 1.5px !important;
  }

  .ks-ms-text {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
  }

  .ks-cover-titles {
    z-index: 2 !important;
    margin-top: 0 !important;
  }

  .ks-cover-wordmark {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #0f172a !important;
  }

  .ks-cover-version {
    font-size: 14.5px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }

  .card-ks-electronic-key-text {
    position: absolute !important;
    bottom: 8px !important;
    left: 10px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3.5px !important;
    z-index: 2 !important;
  }

  .ks-cover-waves {
    position: absolute !important;
    bottom: -6px !important;
    right: -8px !important;
    width: 85% !important;
    height: 80% !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
  }

  .card-ks-content {
    padding: 8px 8px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .card-ks-brand-tag,
  .card-ks-subtitle {
    display: none !important;
  }

  .card-ks-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    height: 30px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
  }

  .card-ks-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    gap: 4px !important;
    margin-top: auto !important;
  }

  .card-ks-price-box {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  .card-ks-price-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .btn-card-buy-direct {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* --- 4. PRODUCT DETAILS: FULL PAGE (NOT FLOATING MODAL) --- */
  #productDetailsModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 10500 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .product-details-modal-window,
  .keysoft-pdm-window {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    padding: 0 14px 70px 14px !important;
    margin: 0 !important;
  }

  .pdm-ks-top-bar {
    position: sticky !important;
    top: 0 !important;
    background: #ffffff !important;
    z-index: 10 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 10px !important;
  }

  /* Compact Artwork Cover in Details (so title is immediately visible) */
  .pdm-ks-media-box,
  .pdm-ks-cover-box {
    height: 110px !important;
    max-height: 110px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  .pdm-ks-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .pdm-ks-title-main {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .pdm-ks-title-sub {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  /* Two Equal Action Buttons (Купить сейчас & В корзину) */
  .pdm-ks-actions-row.pdm-dual-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 !important;
  }

  .btn-pdm-buy-now {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
  }

  .pdm-dual-actions .btn-pdm-cart {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 9px !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    width: 100% !important;
  }

  /* Single-line Green Box: Безопасная оплата */
  .pdm-ks-payment-badge-green {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    color: #166534 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
  }

  .pdm-ks-payment-badge-green span {
    white-space: nowrap !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  /* 3 Characteristics in single line each */
  .pdm-params-row-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .pdm-param-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  .pdm-param-circle-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }

  .pdm-param-texts {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .pdm-param-label {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .pdm-param-label::after {
    content: ":" !important;
  }

  .pdm-param-value {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
  }

  /* --- 5. CHECKOUT: FULL PAGE (NOT FLOATING MODAL) --- */
  #productCheckoutModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 10600 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .modal-checkout-cart {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    padding: 0 14px 70px 14px !important;
    margin: 0 !important;
  }

  /* Reorder: Payment on TOP (order 1), Added items on BOTTOM (order 2) */
  .cart-checkout-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .cart-right-col {
    order: 1 !important;
  }

  .cart-left-col {
    order: 2 !important;
  }

  /* Integrated "Изменить" button inside Email Field */
  .checkout-email-section {
    margin-bottom: 12px !important;
  }

  .checkout-email-bar {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    box-shadow: none !important;
  }

  .checkout-email-field {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
  }

  .checkout-change-email-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 30px !important;
    padding: 0 10px !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 6px !important;
    color: #0284c7 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 2 !important;
    white-space: nowrap !important;
  }
}

/* --- 6. MOBILE SIDE NAVIGATION DRAWER (LEFT-SLIDING) --- */
.mobile-side-drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10200 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.28s ease, visibility 0.28s ease !important;
  display: flex !important;
}

.mobile-side-drawer-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-side-drawer {
  background: #ffffff !important;
  width: 290px !important;
  max-width: 85vw !important;
  height: 100% !important;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(-100%) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow-y: auto !important;
}

.mobile-side-drawer-overlay.is-open .mobile-side-drawer {
  transform: translateX(0) !important;
}

.mobile-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.mobile-drawer-close {
  background: #f1f5f9 !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.mobile-drawer-menu {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

.mobile-drawer-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.mobile-drawer-item:hover,
.mobile-drawer-item:active {
  background: #f8fafc !important;
  color: #0284c7 !important;
}

.drawer-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.drawer-item-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

.drawer-item-icon.blue { background: #e0f2fe; color: #0284c7; }
.drawer-item-icon.sky { background: #e0f2fe; color: #0284c7; }
.drawer-item-icon.purple { background: #f3e8ff; color: #7c3aed; }
.drawer-item-icon.orange { background: #ffedd5; color: #ea580c; }
.drawer-item-icon.green { background: #dcfce7; color: #16a34a; }
.drawer-item-icon.gray { background: #f1f5f9; color: #64748b; }

.drawer-chevron {
  font-size: 11px !important;
  color: #cbd5e1 !important;
}

.mobile-drawer-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 6px 0 !important;
}

.mobile-drawer-footer {
  padding: 14px 16px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.drawer-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  color: #10b981 !important;
  font-weight: 600 !important;
}

/* --- 7. BOTTOM NAVIGATION DOCK (FIXED AT BOTTOM) --- */
.mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 58px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.05) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 0 4px calc(env(safe-area-inset-bottom, 0px)) 4px !important;
  box-sizing: border-box !important;
}

.mobile-bottom-nav .mobile-nav-link {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 100% !important;
  text-decoration: none !important;
  color: #64748b !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  font-family: inherit !important;
}

.mobile-bottom-nav .mobile-nav-link i {
  font-size: 17px !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}

.mobile-bottom-nav .mobile-nav-link span:not(.mobile-cart-badge) {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.mobile-bottom-nav .mobile-nav-link.active {
  color: #0284c7 !important;
}

.mobile-bottom-nav .mobile-nav-link.active span:not(.mobile-cart-badge) {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.mobile-bottom-nav .mobile-cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -9px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 1.5px solid #ffffff !important;
  line-height: 1 !important;
}

/* --- 8. BOTTOM SHEET CATEGORY DRAWER --- */
.mob-cat-drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10050 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.28s ease, visibility 0.28s ease !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.mob-cat-drawer-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.mob-cat-drawer {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 500px !important;
  max-height: 82vh !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 8px) !important;
}

.mob-cat-drawer-overlay.is-open .mob-cat-drawer {
  transform: translateY(0) !important;
}

.mob-cat-drawer-pull-tab {
  display: flex !important;
  justify-content: center !important;
  padding: 10px 0 4px 0 !important;
  cursor: grab !important;
}

.mob-cat-drawer-pill {
  width: 36px !important;
  height: 4px !important;
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}

.mob-cat-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.mob-cat-drawer-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mob-cat-drawer-title i {
  color: #0284c7 !important;
  font-size: 17px !important;
}

.mob-cat-drawer-close {
  background: #f1f5f9 !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 15px !important;
  cursor: pointer !important;
}

.mob-cat-drawer-body {
  padding: 12px 16px 20px 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(82vh - 65px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mob-cat-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.mob-cat-item:active,
.mob-cat-item.active {
  background: #f0f9ff !important;
  border-color: #38bdf8 !important;
}

.mob-cat-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mob-cat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.mob-cat-icon.blue { background: #e0f2fe; color: #0284c7; }
.mob-cat-icon.sky { background: #e0f2fe; color: #0284c7; }
.mob-cat-icon.purple { background: #f3e8ff; color: #7c3aed; }
.mob-cat-icon.orange { background: #ffedd5; color: #ea580c; }
.mob-cat-icon.green { background: #dcfce7; color: #16a34a; }

.mob-cat-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.mob-cat-chevron {
  font-size: 12px !important;
  color: #94a3b8 !important;
  transition: transform 0.25s ease !important;
}

.mob-cat-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mob-cat-accordion.open .mob-cat-chevron {
  transform: rotate(180deg) !important;
}

.mob-cat-accordion .mob-cat-sub-items {
  display: none !important;
  padding: 6px 6px 6px 12px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  background: #f1f5f9 !important;
  border-radius: 10px !important;
  margin-top: 2px !important;
}

.mob-cat-accordion.open .mob-cat-sub-items {
  display: flex !important;
}

.mob-cat-sub-pill {
  padding: 7px 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.mob-cat-sub-pill:active,
.mob-cat-sub-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* --- 9. DESKTOP RESET --- */
@media (min-width: 769px) {
  .header-menu-toggle-btn {
    display: none !important;
  }
  .mobile-side-drawer-overlay {
    display: none !important;
  }
  .mobile-bottom-nav {
    display: none !important;
  }
  .mobile-catalog-bar {
    display: none !important;
  }
  .mob-cat-drawer-overlay {
    display: none !important;
  }
}


/* === SPA PAGES & REFINED MOBILE/PC DESIGN (v120) === */

/* 1. Remove mobile bottom nav completely */
.mobile-bottom-nav {
  display: none !important;
}

/* 2. On PC / Desktop: Product Card Title strictly in ONE single line */
@media (min-width: 769px) {
  .card-ks-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.35 !important;
    font-size: 13.5px !important;
    height: auto !important;
  }
}

/* 3. Cover Artwork: 1-line Microsoft brand, prominent versions, 3-line Enterprise */
.ks-cover-ms-brand {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 5px 0 !important;
  white-space: nowrap !important;
}

.ks-ms-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  width: 11px !important;
  height: 11px !important;
  gap: 1.5px !important;
  flex-shrink: 0 !important;
}

.ks-ms-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Prominent title on standard Windows */
.titles-prominent .ks-cover-wordmark {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #0f172a !important;
}

.titles-prominent .ks-cover-version {
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

/* Enterprise: Windows 10 & Корпоративная equal size, font-weight 600 */
.titles-enterprise .ks-cover-wordmark {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: #22252a !important;
  letter-spacing: -0.3px !important;
}

.titles-enterprise .ks-cover-version {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin-top: 3px !important;
}

.titles-enterprise .ks-cover-sub {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.15 !important;
  margin-top: 4px !important;
}

/* 4. CID Page: Button text line 1 & line 2 */
.act-mode-btn-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

.act-mode-btn-text .mode-line1 {
  font-weight: 700 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.act-mode-btn-text .mode-line2 {
  font-weight: 500 !important;
  font-size: 11px !important;
  opacity: 0.85 !important;
  white-space: nowrap !important;
}

/* 5. Search Results: Pretitle + Price on top, Title + Buy on bottom */
.site-search-item-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  margin-bottom: 8px !important;
  transition: all 0.15s ease !important;
}

.site-search-item-card:hover {
  border-color: #38bdf8 !important;
  background: #f8fafc !important;
}

.site-search-row-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.site-search-pretitle {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.site-search-item-price {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.site-search-row-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.site-search-item-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.site-search-item-btn {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* 6. STANDALONE SPA PRODUCT DETAILS PAGE (#pageProduct) */
.product-page-standalone {
  max-width: 680px !important;
  margin: 16px auto 50px auto !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

.page-back-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.btn-page-back {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pdp-standalone-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.pdp-standalone-media .pdm-ks-cover-box {
  height: 160px !important;
  max-height: 160px !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Characteristics: strictly 1-line, comfortable height */
.pdm-params-row-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.pdm-param-box {
  display: flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  min-height: 44px !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.pdm-param-circle-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  font-size: 13px !important;
}

.pdm-param-texts {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-size: 13px !important;
}

.pdm-param-label {
  color: #64748b !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.pdm-param-value {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* 7. STANDALONE SPA CHECKOUT PAGE (#pageCheckout) */
.checkout-page-standalone {
  max-width: 580px !important;
  margin: 16px auto 50px auto !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

.checkout-page-heading {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.checkout-page-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.checkout-section-payment {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
}

.checkout-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f8fafc !important;
}

.checkout-total-label {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.checkout-total-value {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0284c7 !important;
}

.checkout-field-block {
  margin-bottom: 14px !important;
}

.checkout-field-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.checkout-email-bar-embedded {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  height: 44px !important;
  overflow: hidden !important;
}

.checkout-email-input {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  padding: 0 100px 0 12px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background: transparent !important;
}

.btn-inline-change-email {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 6px !important;
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.btn-page-checkout-pay {
  width: 100% !important;
  height: 46px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.checkout-secure-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

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

.checkout-items-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.items-count-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

.btn-clear-cart-text {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.btn-clear-cart-text:hover {
  color: #ef4444 !important;
}

.checkout-page-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f8fafc !important;
}

.item-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.item-icon-emblem {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

.item-icon-emblem.is-win { background: #e0f2fe; color: #0284c7; }
.item-icon-emblem.is-office { background: #ffedd5; color: #ea580c; }

.item-info-col {
  display: flex !important;
  flex-direction: column !important;
}

.item-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.item-sub {
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-bottom: 4px !important;
}

.item-stepper {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  height: 24px !important;
}

.btn-step {
  width: 24px !important;
  height: 100% !important;
  border: none !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.step-val {
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.item-row-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}

.btn-item-del {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 2px !important;
}

.btn-item-del:hover {
  color: #ef4444 !important;
}

.item-cost {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* 8. MOBILE REFINEMENTS (MAX-WIDTH: 768px) */
@media (max-width: 768px) {
  /* Reset body padding bottom since bottom nav is removed */
  body {
    padding-bottom: 20px !important;
  }

  /* Hide catalog header title (leave only dropdown bar) */
  /* .catalog-header-row visible with blue icon badge */

  /* CID page without outer border frame */
  .act-card-left,
  .activation-layout-new {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .act-card-header {
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  /* Two equal action buttons in product details */
  .pdm-ks-actions-row.pdm-dual-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
}


/* === V122 STANDALONE SPA PRODUCT & CHECKOUT FIXES === */
#pageProduct.active,
#pageCheckout.active {
  display: block !important;
  width: 100% !important;
  min-height: 80vh !important;
  margin: 0 auto !important;
}

.product-page-standalone {
  max-width: 680px !important;
  margin: 16px auto 50px auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.checkout-page-standalone {
  max-width: 580px !important;
  margin: 16px auto 50px auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* 1-line Characteristics with comfortable height */
.pdm-params-row-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 14px 0 !important;
}

.pdm-param-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.pdm-param-circle-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.pdm-param-texts {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pdm-param-label {
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.pdm-param-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

/* Safe payment green badge: strictly 1-line */
.pdm-ks-payment-badge-green {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #166534 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  margin: 12px 0 6px 0 !important;
}

/* Product details cover: 160px height to ensure version is visible without cutting */
.pdp-standalone-media .pdm-ks-cover-box {
  height: 160px !important;
  max-height: 160px !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Embedded "Изменить" button inside Email Input */
.checkout-email-bar-embedded {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.checkout-email-bar-embedded .checkout-email-input {
  width: 100% !important;
  padding-right: 105px !important;
  box-sizing: border-box !important;
}

.checkout-email-bar-embedded .btn-inline-change-email {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
  cursor: pointer !important;
}


/* === V123 FULL SCREEN PRODUCT & CHECKOUT (NO OUTER WINDOW CARD) === */
.product-page-standalone,
.checkout-page-standalone {
  width: 100% !important;
  max-width: 600px !important;
  margin: 10px auto 40px auto !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

/* Remove outer enclosing window frame from product details */
.pdp-standalone-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Remove outer enclosing window frame from checkout page */
.checkout-page-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Individual clean cards for checkout sections */
.checkout-section-payment {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 16px !important;
}

.checkout-section-items {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Top Back Bar: Clean single line button, hide long breadcrumbs on mobile */
.page-back-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  border: none !important;
}

.btn-page-back {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.btn-page-back span {
  white-space: nowrap !important;
  display: inline-block !important;
}

.page-breadcrumbs {
  font-size: 12px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
  .page-breadcrumbs {
    display: none !important;
  }
  .product-page-standalone,
  .checkout-page-standalone {
    padding: 0 12px !important;
    margin: 6px auto 30px auto !important;
  }
  .page-back-bar {
    margin-bottom: 10px !important;
  }
}

/* === V129 MASTER REDESIGN: COMPACT 1040px HEADER & PDP (KEYSOFT REFERENCE), BEAUTIFUL VERTICAL COVER BOX === */

/* 1. Global Container & Header Max-Width: Restored strictly to 1040px (Desktop) */
.container,
.site-header .container,
.header-container,
.catalog-layout,
.activation-layout-new,
.footer-grid-container,
.history-container,
#pageHistory .card,
.card-keysoft-container,
.product-page-standalone,
.checkout-page-standalone {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (min-width: 769px) {
  .catalog-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin-top: 18px !important;
  }

  .products-grid-keysoft {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
  }
}

/* 2. Mobile Catalog: Comfortable Spacing & Compact Sized Cards */
@media (max-width: 768px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .catalog-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 24px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .catalog-main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Spacious 2-Column Catalog Grid with Room to Breathe */
  .products-grid-keysoft {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Compact, Neater Product Card on Mobile */
  .card-keysoft-v3 {
    width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  /* Compact 115px Height Artwork Cover on Mobile (Reduced from 180px) */
  .card-ks-art-banner,
  .card-ks-art-cover {
    width: 100% !important;
    height: 115px !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .card-ks-art-banner .ks-cover-ms-brand,
  .card-ks-art-cover .ks-cover-ms-brand {
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .card-ks-art-banner .ks-ms-text,
  .card-ks-art-cover .ks-ms-text {
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  .card-ks-art-banner .ks-ms-grid,
  .card-ks-art-cover .ks-ms-grid {
    width: 11px !important;
    height: 11px !important;
  }

  .card-ks-art-banner .ks-cover-wordmark,
  .card-ks-art-cover .ks-cover-wordmark {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  .card-ks-art-banner .ks-cover-version,
  .card-ks-art-cover .ks-cover-version {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  .card-ks-art-banner .ks-cover-sub,
  .card-ks-art-cover .ks-cover-sub {
    font-size: 10px !important;
    margin-top: 3px !important;
  }

  .card-ks-content {
    padding: 8px 9px 10px 9px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
  }

  .card-ks-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    min-height: 30px !important;
    color: #1e293b !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin: 0 0 4px 0 !important;
  }

  .card-ks-bottom-row,
  .card-ks-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    gap: 4px !important;
    padding-top: 4px !important;
  }

  .card-ks-price,
  .card-ks-price-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  .card-ks-buy-btn,
  .btn-card-buy-direct {
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: none !important;
    cursor: pointer !important;
  }
}

/* 3. Product Details Page Breadcrumbs (Shared) */
.pdp-breadcrumbs-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 4px 0 !important;
}

.pdp-breadcrumbs-bar::-webkit-scrollbar {
  display: none !important;
}

.pdp-crumb-link,
.pdm-crumb-link {
  color: #0284c7 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

.pdp-crumb-link:hover,
.pdm-crumb-link:hover {
  text-decoration: underline !important;
  color: #0369a1 !important;
}

.pdp-crumb-sep,
.pdm-crumb-sep {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

.pdp-crumb-active,
.pdm-crumb-current {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* 4. Desktop Product Details Page (Exact Keysoft Reference Layout & User Styling):
   - Left side: Single Clean Retail Box Cover (No side thumbnails)
   - Background of cover: #f6f7fb (soft gray from user reference)
   - Height of cover: Aligned with the right column (align-items: stretch)
   - Larger title and larger SVG fluid artwork on the cover
   - Title: 2 lines: "Электронный ключ активации" / "для: [Название] ([Подзаголовок])"
     Font-weight: 600 (thinner, not overly bold), color: #2f2f35 (dark gray matching header)
   - 3 characteristics boxes: Equal size (1fr 1fr 1fr, 52px height)
     "Тип активации: Онлайн" / "Срок действия: Бессрочно" / "Платформа: Windows 11"
   - Button "Добавить в корзину": Background #2f2f35 matching user's photo
   - NO "Характеристики" specifications table (removed per request)
   - NO Yandex reviews */
@media (min-width: 769px) {
  .product-page-standalone {
    max-width: 1040px !important;
    width: 100% !important;
    margin: 16px auto 40px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .pdp-standalone-wrap {
    width: 100% !important;
    max-width: 1040px !important;
    box-sizing: border-box !important;
  }

  /* 2-Column Hero Grid: Left Cover + Right Info */
  .pdp-hero-grid {
    display: grid !important;
    grid-template-columns: 290px 1fr !important;
    gap: 32px !important;
    align-items: stretch !important; /* Stretches both columns to identical height! */
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pdp-hero-media {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 290px !important;
  }

  .pdm-ks-cover-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* Clean Grayish Retail Box Cover (#f6f7fb) matching Right Column Height */
  .pdp-hero-media .pdm-ks-cover-box {
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important; /* User photo color */
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 24px 22px !important;
    box-sizing: border-box !important;
  }

  .pdp-hero-media .ks-cover-ms-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 3 !important;
    position: relative !important;
  }

  .pdp-hero-media .modal-grid {
    width: 16px !important;
    height: 16px !important;
  }

  .pdp-hero-media .modal-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    letter-spacing: 0.2px !important;
  }

  .pdp-hero-media .ks-cover-titles {
    margin-top: 18px !important;
    z-index: 3 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 95% !important;
  }

  /* Larger Title on Cover */
  .pdp-hero-media .ks-cover-wordmark {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.15 !important;
  }

  .pdp-hero-media .ks-cover-version {
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
  }

  .pdp-hero-media .ks-cover-sub {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 10px !important;
    display: block !important;
    letter-spacing: 0.2px !important;
  }

  /* Larger Wave Art in Lower Right */
  .pdp-hero-media .ks-cover-waves {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 75% !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Right Column Info */
  .pdp-hero-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-top: 2px !important;
  }

  /* Title: 2 lines, font-weight 600, color #2f2f35 */
  .pdm-ks-title-main {
    margin: 0 0 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    line-height: 1.25 !important;
  }

  .pdm-ks-title-l1 {
    font-size: 25px !important;
    font-weight: 700 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.3px !important;
  }

  .pdm-ks-title-l2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.3px !important;
  }

  .pdm-ks-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
  }

  .pdm-ks-star-gold {
    color: #f59e0b !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .pdm-ks-dot {
    color: #cbd5e1 !important;
  }

  .pdm-ks-reviews-link {
    color: #475569 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
  }

  .pdm-ks-sales {
    color: #64748b !important;
  }

  .pdm-ks-stock-tag {
    color: #16a34a !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* THREE COMPACT PILLS - REDUCED WIDTH TO FIT CONTENT */
  .pdm-feat-row-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .pdm-feat-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 16px 8px 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
    width: auto !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  .pdm-feat-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  .pdm-feat-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pdm-feat-label {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  .pdm-feat-val {
    font-size: 13px !important;
    color: #2f2f35 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  /* Price & Instant Delivery Line */
  .pdm-ks-price-block {
    margin-bottom: 14px !important;
  }

  .pdm-ks-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin: 0 0 4px 0 !important;
  }

  .pdm-ks-price {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.5px !important;
  }

  .pdm-ks-old-price {
    font-size: 18px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
  }

  .pdm-ks-discount {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    background: #fee2e2 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
  }

  .pdm-ks-instant-delivery {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    font-weight: 600 !important;
  }

  /* Action Buttons: Cart Button in #2f2f35 */
  .pdp-hero-actions-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .pdm-ks-actions-row.pdm-dual-actions {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .btn-pdm-primary-cart {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #2f2f35 !important; /* Exact color from User Photo 2 */
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    flex: 1.2 !important;
    transition: background 0.2s ease !important;
  }

  .btn-pdm-primary-cart:hover {
    background: #404048 !important;
  }

  .btn-pdm-secondary-buy {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    flex: 1 !important;
    transition: background 0.2s ease !important;
  }

  .btn-pdm-secondary-buy:hover {
    background: #0369a1 !important;
  }

  .pdm-ks-payment-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    padding: 9px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 2px 0 0 0 !important;
  }

  /* Description & Instruction in 1 row side-by-side */
  .pdp-details-row-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 1040px !important;
    box-sizing: border-box !important;
    margin-top: 24px !important;
  }

  .pdp-details-row-grid .pdm-desc-card-wrap {
    margin-bottom: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 22px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
  }
}

/* 5. Mobile Product Details Page */
@media (max-width: 768px) {
  .product-page-standalone {
    padding: 0 14px !important;
    margin: 8px auto 30px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pdp-breadcrumbs-bar {
    margin-bottom: 12px !important;
    font-size: 13px !important;
  }

  .pdp-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .pdp-hero-media {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .pdm-ks-cover-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Mobile Proportional Retail Box Cover (#f6f7fb) */
  .pdp-hero-media .pdm-ks-cover-box {
    width: 215px !important;
    max-width: 215px !important;
    height: 275px !important;
    max-height: 275px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    padding: 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.03) !important;
    background: #ffffff !important; /* User photo color */
    border: 1px solid #e5e7eb !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .pdp-hero-media .ks-cover-ms-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    z-index: 3 !important;
  }

  .pdp-hero-media .modal-grid {
    width: 13px !important;
    height: 13px !important;
  }

  .pdp-hero-media .modal-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
  }

  .pdp-hero-media .ks-cover-titles {
    z-index: 3 !important;
    position: relative !important;
    margin-top: 12px !important;
  }

  .pdp-hero-media .ks-cover-wordmark {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #2f2f35 !important;
  }

  .pdp-hero-media .ks-cover-version {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
  }

  .pdp-hero-media .ks-cover-sub {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 6px !important;
    display: block !important;
  }

  .pdp-hero-media .ks-cover-waves {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70% !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .pdp-hero-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .pdm-ks-title-main {
    margin-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.25 !important;
  }

  .pdm-ks-title-l1 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2f2f35 !important;
  }

  .pdm-ks-title-l2 {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #2f2f35 !important;
  }

  .pdm-ks-rating-row {
    font-size: 12.5px !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Three Characteristics in One Line on Mobile */
  .pdm-feat-row-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
  }

  .pdm-feat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    min-height: 56px !important;
    gap: 2px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .pdm-feat-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  .pdm-feat-label {
    font-size: 9.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .pdm-feat-val {
    font-size: 11px !important;
    color: #2f2f35 !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .pdm-ks-price-block {
    margin-bottom: 12px !important;
  }

  .pdm-ks-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 0 0 4px 0 !important;
  }

  .pdm-ks-price {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #2f2f35 !important;
  }

  .pdm-ks-old-price {
    font-size: 15px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
  }

  .pdm-ks-discount {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    background: #fee2e2 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
  }

  .pdm-ks-instant-delivery {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    font-weight: 600 !important;
  }

  .pdp-hero-actions-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .pdm-ks-actions-row.pdm-dual-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .btn-pdm-primary-cart {
    height: 44px !important;
    width: 100% !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    background: #2f2f35 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
  }

  .btn-pdm-secondary-buy {
    height: 44px !important;
    width: 100% !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
  }

  .pdm-ks-payment-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    color: #64748b !important;
    padding: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 4px 0 12px 0 !important;
    text-align: center !important;
  }

  .pdp-details-row-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  .pdp-details-row-grid .pdm-desc-card-wrap {
    padding: 16px 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
  }
}


/* 6. Desktop Cart Header: Hide cart icon near cabinet profile pill on PC */
@media (min-width: 769px) {
  #headerTopCartBtn {
    display: none !important;
  }
}

/* 7. Catalog Covers & Titles on PC:
   - Server version font-size match (20px)
   - Enterprise LTSC 2021 on bottom line */
@media (min-width: 769px) {
  .titles-prominent .ks-cover-wordmark {
    font-size: 20px !important;
    font-weight: 700 !important;
  }
  .titles-prominent .ks-cover-version {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .card-ks-title {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    min-height: 38px !important;
  }
}

.titles-enterprise .ks-cover-sub {
  display: block !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

/* 8. CID Page on PC: Mode switcher tabs in STRICTLY 1 line */
@media (min-width: 769px) {
  .act-mode-selector {
    gap: 12px !important;
  }

  .act-mode-btn {
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .act-mode-btn-text {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  .act-mode-btn-text .mode-line1,
  .act-mode-btn-text .mode-line2 {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: 1 !important;
  }
}

/* 9. IID Code Style Input matching Product Key */
.act-iid-code-input {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace !important;
  letter-spacing: 1.2px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--border-color) !important;
}

.act-iid-code-input:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

.act-iid-code-input::placeholder {
  color: #94a3b8 !important;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace !important;
  font-size: 12.5px !important;
  letter-spacing: 1px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
}


/* Guaranteed #2f2f35 Dark Color for Primary Cart Button across Desktop & Mobile */
button.btn-pdm-primary-cart,
.btn-pdm-cart.btn-pdm-primary-cart,
#pdmModalAddToCartBtn {
  background: #2f2f35 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

button.btn-pdm-primary-cart:hover,
.btn-pdm-cart.btn-pdm-primary-cart:hover,
#pdmModalAddToCartBtn:hover {
  background: #404048 !important;
  color: #ffffff !important;
}



/* =========================================================
   USER REQUEST BATCH 4 REFINEMENTS:
   - Windows 7, 10, 11 Cover Large Titles (matching Server & Office)
   - Mobile 3 Characteristic Boxes: No icons, compact height
   - Mobile Available Balance: Inline quantity right after label
   - Mobile Enlarged IID input
   - Responsive photo dropzone text
   ========================================================= */

/* Desktop & General PDP Cover Typography: Windows 7, 10, 11 Large */
.pdp-hero-media .ks-cover-wordmark,
.pdp-hero-media .ks-cover-titles .ks-cover-wordmark,
.pdp-hero-media .titles-prominent .ks-cover-wordmark {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #2f2f35 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.15 !important;
}

.pdp-hero-media .ks-cover-version,
.pdp-hero-media .ks-cover-titles .ks-cover-version,
.pdp-hero-media .titles-prominent .ks-cover-version {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-top: 2px !important;
}

/* Larger Waves Illustration on Cover */
.pdp-hero-media .ks-cover-waves {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 82% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Tokens Mode Balance Layout on Desktop */
.act-tokens-inner-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.act-tokens-balance-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.act-tokens-label {
  font-size: 13.5px !important;
  color: #166534 !important;
  font-weight: 600 !important;
}

.act-tokens-amount {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #15803d !important;
}

.act-tokens-unit {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #166534 !important;
}

/* Responsive Dropzone text */
.dropzone-text-desktop {
  display: inline !important;
}
.dropzone-text-mobile {
  display: none !important;
}

/* IID Code Input styling */
.act-iid-code-input {
  min-height: 48px !important;
  padding: 12px 14px !important;
  font-size: 14.5px !important;
}

/* MOBILE REFINEMENTS (<768px) */
@media (max-width: 768px) {
  /* 1. Mobile Three Characteristic Boxes: No icons, compact height */
  .pdm-feat-icon {
    display: none !important;
  }

  .pdm-feat-box {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 4px 2px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .pdm-feat-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  .pdm-feat-label {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .pdm-feat-val {
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* 2. Cover Titles on Mobile: Windows 7, 10, 11 Large */
  .pdp-hero-media .ks-cover-wordmark,
  .pdp-hero-media .ks-cover-titles .ks-cover-wordmark,
  .pdp-hero-media .titles-prominent .ks-cover-wordmark {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #2f2f35 !important;
  }

  .pdp-hero-media .ks-cover-version,
  .pdp-hero-media .ks-cover-titles .ks-cover-version,
  .pdp-hero-media .titles-prominent .ks-cover-version {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
  }

  .pdp-hero-media .ks-cover-waves {
    width: 100% !important;
    height: 80% !important;
  }

  /* 3. Available Balance on Mobile: Inline right after label with just number */
  #actTokensInfoContainer {
    padding: 10px 14px !important;
  }

  .act-tokens-inner-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .act-tokens-balance-row {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .act-tokens-label {
    font-size: 13px !important;
    color: #166534 !important;
    font-weight: 600 !important;
  }

  .act-tokens-amount {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #15803d !important;
  }

  .act-tokens-unit {
    display: none !important; /* Hide 'активаций' on mobile, show only number inline */
  }

  .btn-buy-tokens-act {
    padding: 6px 11px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* 4. Enlarged IID Code Input on Mobile */
  .act-iid-code-input {
    min-height: 52px !important;
    padding: 14px 12px !important;
    font-size: 14.5px !important;
    border-radius: 10px !important;
    letter-spacing: 0.8px !important;
  }

  .act-iid-code-input::placeholder {
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
  }

  /* 5. Mobile Photo Dropzone Text */
  .dropzone-text-desktop {
    display: none !important;
  }
  .dropzone-text-mobile {
    display: inline !important;
  }

  .target-step2-dropzone {
    padding: 12px 14px !important;
  }

  .dropzone-cloud-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 17px !important;
  }

  .dropzone-main-text {
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  .dropzone-sub-text {
    font-size: 12px !important;
    color: #64748b !important;
  }
}


/* =========================================================
   USER REQUEST: STANDALONE CHECKOUT PAGE (PHOTO 2 STYLE)
   - Desktop: 2 Columns (Items left, Summary right)
   - Mobile: Refined stacked layout, no 'В каталог',
     blue icon on left of title, spacing top & bottom,
     no 'Изменить' button, no 'Защищённый платёж' on mobile.
   ========================================================= */

.checkout-standalone-page-wrap {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 24px 20px 60px 20px !important;
  box-sizing: border-box !important;
}

.checkout-standalone-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  margin-bottom: 22px !important;
}

.checkout-brand-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  box-shadow: none !important;
  filter: none !important;
}

.checkout-page-heading {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

/* STANDALONE CHECKOUT: NO 'ОБЩЕЕ ОКНО' (TRANSPARENT BACKGROUND, NO OUTER CARD) */
.checkout-standalone-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* RIGHT COLUMN: ORDER SUMMARY CARD (CLEAN WHITE CARD DIRECTLY ON PAGE) */
.order-summary-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
}

/* LEFT COLUMN: PRODUCT CARDS (CLEAN WHITE CARDS DIRECTLY ON PAGE) */
.cart-item-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}

.cart-item-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}

/* EMAIL INPUT: PERFECT SINGLE INPUT FIELD (NO DOUBLE BOXES) */
.checkout-email-bar {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

.checkout-email-bar:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.checkout-email-field,
#pageCheckoutEmailInput,
#checkoutBuyerEmail {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.checkout-email-field:focus,
#pageCheckoutEmailInput:focus,
#checkoutBuyerEmail:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background: #ffffff !important;
}

.checkout-email-field::placeholder,
#pageCheckoutEmailInput::placeholder,
#checkoutBuyerEmail::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Hide 'Изменить' button everywhere */
#changeCheckoutEmailBtn,
#pageCheckoutChangeEmailBtn,
.btn-inline-change-email,
.checkout-change-email-btn {
  display: none !important;
}


/* PAY BUTTON & SECURITY BADGE STYLING (MATCHING PHOTO 2) */
.btn-checkout-pay,
#pageCheckoutPayBtn {
  width: 100% !important;
  height: 48px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-checkout-pay:hover,
#pageCheckoutPayBtn:hover {
  background: #0369a1 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4) !important;
}

.btn-checkout-pay:active,
#pageCheckoutPayBtn:active {
  transform: translateY(1px) !important;
}

.btn-checkout-pay:disabled,
#pageCheckoutPayBtn:disabled {
  background: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

.checkout-pay-action-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 6px !important;
}

.checkout-secure-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #16a34a !important;
  font-weight: 600 !important;
}

.checkout-secure-badge i {
  font-size: 14px !important;
  color: #16a34a !important;
}

/* MOBILE CHECKOUT REFINEMENTS (<768px) */
@media (max-width: 768px) {
  .checkout-standalone-page-wrap {
    padding: 14px 12px 40px 12px !important;
  }

  .checkout-standalone-header {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    gap: 10px !important;
  }

  .checkout-brand-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  .checkout-page-heading {
    font-size: 21px !important;
  }

  .checkout-standalone-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .cart-checkout-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .cart-right-col {
    order: 1 !important;
    width: 100% !important;
  }

  .order-summary-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  }

  .cart-left-col {
    order: 2 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  }

  .cart-items-list {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* User requirement: на мобильном устройстве убери надпись защищеный платеж */
  .checkout-secure-badge,
  .pay-secure-hint,
  .checkout-security-box,
  .checkout-security-footnote {
    display: none !important;
  }
}


/* =============================================================================
   CATALOG OVERHAUL: COVERS MATCHING PRODUCT DETAILS & HARMONIZED CARD FOOTER
   ============================================================================= */

/* Catalog Category Title Row & Blue Icon Badge */
.catalog-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.catalog-category-icon-badge {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  box-shadow: none !important;
  filter: none !important;
}

.catalog-page-title,
#catalogSectionTitle {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* Card Container: transparent, no outer border around cover */
.card-keysoft-v3 {
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.18s ease !important;
  cursor: pointer !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.card-keysoft-v3:hover {
  transform: translateY(-3px) !important;
}

.card-keysoft-v3:hover .card-ks-framed-body {
  border-color: #93c5fd !important;
  box-shadow: 0 10px 22px -3px rgba(15, 23, 42, 0.08) !important;
}

/* 1. Artwork Cover: NO border, rounded top corners */
.card-ks-art-cover {
  width: 100% !important;
  height: 285px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px 14px 0 0 !important;
  background: #ffffff !important; /* Premium soft grayish background */
  position: relative !important;
  overflow: hidden !important;
  padding: 20px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.card-ks-art-cover .ks-cover-ms-brand {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  z-index: 2 !important;
}

.card-ks-art-cover .ks-ms-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 6.5px) !important;
  grid-template-rows: repeat(2, 6.5px) !important;
  gap: 2px !important;
  width: 15px !important;
  height: 15px !important;
}

.card-ks-art-cover .ks-ms-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  letter-spacing: 0.2px !important;
}

.card-ks-art-cover .ks-cover-titles {
  z-index: 2 !important;
  margin-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Requirement: Version title on cover NOT so bold (font-weight: 600) */
.card-ks-art-cover .ks-cover-wordmark {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: #22252a !important;
  letter-spacing: -0.4px !important;
}

.card-ks-art-cover .ks-cover-version {
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin-top: 3px !important;
}

.card-ks-art-cover .ks-cover-sub {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-top: 5px !important;
}

/* Also make modal cover not so bold */
.pdm-ks-cover-box .ks-cover-wordmark,
.pdm-ks-cover-box .ks-cover-version {
  font-weight: 600 !important;
}

.card-ks-art-cover .ks-cover-waves {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 90% !important;
  height: 85% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 2. Framed Lower Section: Frame starts from bottom of cover around version and price/button */
.card-ks-framed-body {
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-radius: 0 0 14px 14px !important;
  background: #ffffff !important;
  padding: 12px 14px 14px 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.card-ks-version {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
  min-height: 38px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 3. Footer: Price & Details button */
.card-ks-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 2px !important;
}

.card-ks-price-box {
  display: flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
}

.card-ks-price-val {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.btn-card-details {
  height: 33px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-card-details:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35) !important;
}

.btn-card-details:active {
  transform: translateY(0) !important;
}

/* Mobile Catalog Refinements (<768px) */
@media (max-width: 768px) {
  .catalog-header-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 16px 0 14px 0 !important;
    padding: 0 4px !important;
  }

  .catalog-category-icon-badge {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .catalog-page-title,
  #catalogSectionTitle {
    font-size: 22px !important;
    font-weight: 650 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .card-keysoft-v3 {
    border-radius: 12px !important;
  }

  .card-ks-art-cover {
    height: 195px !important;
    padding: 12px 10px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .card-ks-art-cover .ks-cover-ms-brand {
    gap: 4px !important;
  }

  .card-ks-art-cover .ks-ms-grid {
    grid-template-columns: repeat(2, 5px) !important;
    grid-template-rows: repeat(2, 5px) !important;
    gap: 1.5px !important;
    width: 11.5px !important;
    height: 11.5px !important;
  }

  .card-ks-art-cover .ks-ms-text {
    font-size: 11px !important;
  }

  .card-ks-art-cover .ks-cover-titles {
    margin-top: 10px !important;
  }

  .card-ks-art-cover .ks-cover-wordmark {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .card-ks-art-cover .ks-cover-version {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
  }

  .card-ks-art-cover .ks-cover-sub {
    font-size: 10px !important;
    margin-top: 3px !important;
  }

  .card-ks-art-cover .ks-cover-waves {
    width: 95% !important;
    height: 85% !important;
  }

  /* Enterprise on mobile: same size for Windows 10 and Корпоративная */
  .titles-enterprise .ks-cover-wordmark {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  .titles-enterprise .ks-cover-version {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
  }
  .titles-enterprise .ks-cover-sub {
    font-size: 10px !important;
    margin-top: 3px !important;
  }

  .card-ks-framed-body {
    padding: 9px 10px 10px 10px !important;
    border-radius: 0 0 12px 12px !important;
  }

  .card-ks-version {
    font-size: 12.5px !important;
    margin: 0 0 6px 0 !important;
    min-height: 32px !important;
    line-height: 1.25 !important;
  }

  .card-ks-price-val {
    font-size: 14.5px !important;
  }

  .btn-card-details {
    height: 29px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
  }
}


/* ====================================================================
   LATEST ENHANCEMENTS: EDGE SHADOWS / DARKENING & MATCHING COVER FONTS
   ==================================================================== */

/* 1. Catalog Card Container: distinct border & ambient depth so cover never blends with background */
.card-keysoft-v3 {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #d8e1ea !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.card-keysoft-v3:hover {
  transform: translateY(-4px) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

/* 2. Catalog Card Cover: edge darkening / vignette / inset shadows */
.card-ks-art-cover {
  width: 100% !important;
  height: 285px !important;
  border-radius: 13px 13px 0 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 20px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 3. Framed Lower Body */
.card-ks-framed-body {
  border: none !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 12px 14px 14px 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  box-shadow: none !important;
}

/* 4. Two-line formatted Version Titles in Catalog */
.card-ks-version {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin: 0 0 10px 0 !important;
  min-height: 42px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
}

.card-ks-title-main {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.card-ks-sub-bracket {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.25 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* 5. Product Details Modal & Page Cover: edge shadows + matching font */
.pdm-ks-cover-box,
.pdp-hero-media .pdm-ks-cover-box {
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Matching Cover Fonts upon opening: same weight 600, elegant styling */
.pdm-ks-cover-box .ks-cover-wordmark,
.pdp-hero-media .ks-cover-wordmark,
.pdp-hero-media .ks-cover-titles .ks-cover-wordmark,
.pdp-hero-media .titles-prominent .ks-cover-wordmark {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #22252a !important;
  letter-spacing: -0.4px !important;
  line-height: 1.15 !important;
}

.pdm-ks-cover-box .ks-cover-version,
.pdp-hero-media .ks-cover-version,
.pdp-hero-media .ks-cover-titles .ks-cover-version,
.pdp-hero-media .titles-prominent .ks-cover-version {
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin-top: 3px !important;
}

.pdm-ks-cover-box .ks-cover-sub,
.pdp-hero-media .ks-cover-sub {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-top: 5px !important;
  display: block !important;
}

/* Enterprise modal titles match */
.pdm-ks-cover-box .titles-enterprise .ks-cover-wordmark,
.pdp-hero-media .titles-enterprise .ks-cover-wordmark {
  font-size: 24px !important;
  font-weight: 600 !important;
}

.pdm-ks-cover-box .titles-enterprise .ks-cover-version,
.pdp-hero-media .titles-enterprise .ks-cover-version {
  font-size: 24px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

.pdm-ks-cover-box .titles-enterprise .ks-cover-sub,
.pdp-hero-media .titles-enterprise .ks-cover-sub {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* 6. Mobile Responsiveness */
@media (max-width: 768px) {
  .card-keysoft-v3 {
    border-radius: 12px !important;
    border: 1px solid #d8e1ea !important;
    box-shadow: 0 3px 12px -1px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  }

  .card-ks-art-cover {
    height: 195px !important;
    padding: 12px 10px !important;
    border-radius: 11px 11px 0 0 !important;
    box-shadow: none !important;
  }

  .card-ks-framed-body {
    padding: 8px 10px 10px 10px !important;
  }

  .card-ks-version {
    min-height: 34px !important;
    margin: 0 0 5px 0 !important;
  }

  .card-ks-title-main {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.35px !important;
  }

  .card-ks-sub-bracket {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
  }

  .pdm-ks-cover-box,
  .pdp-hero-media .pdm-ks-cover-box {
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }

  .pdm-ks-cover-box .ks-cover-wordmark,
  .pdp-hero-media .ks-cover-wordmark,
  .pdp-hero-media .ks-cover-titles .ks-cover-wordmark,
  .pdp-hero-media .titles-prominent .ks-cover-wordmark {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .pdm-ks-cover-box .ks-cover-version,
  .pdp-hero-media .ks-cover-version,
  .pdp-hero-media .ks-cover-titles .ks-cover-version,
  .pdp-hero-media .titles-prominent .ks-cover-version {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
  }

  .pdm-ks-cover-box .ks-cover-sub,
  .pdp-hero-media .ks-cover-sub {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
  }
}


/* ====================================================================
   CID ACTIVATION: TARGET BALANCE WIDGET (PHOTO 2 EXACT REPLICA)
   ==================================================================== */

.act-tokens-card-v2,
#actTokensInfoContainer.act-tokens-card-v2 {
  background: #ffffff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.act-tokens-card-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.act-tokens-shield-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.act-tokens-shield-svg {
  width: 38px !important;
  height: 42px !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(0, 108, 230, 0.25)) !important;
}

.act-tokens-vsep {
  width: 1px !important;
  height: 40px !important;
  background: #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.act-tokens-label-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

.act-tokens-label-line1,
.act-tokens-label-line2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  display: block !important;
}

.act-tokens-amount-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  min-width: 100px !important;
}

.act-tokens-big-num,
#actTokensInfoContainer .act-tokens-big-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #006ce6 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  display: block !important;
}

.act-tokens-unit-sub {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1 !important;
  margin-top: 3px !important;
  display: block !important;
}

.act-tokens-action-col {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.btn-buy-tokens-act,
#actTokensInfoContainer .btn-buy-tokens-act {
  background: #006ce6 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 108, 230, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-buy-tokens-act:hover,
#actTokensInfoContainer .btn-buy-tokens-act:hover {
  background: #0056b3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 108, 230, 0.35) !important;
}

.btn-buy-tokens-act:active,
#actTokensInfoContainer .btn-buy-tokens-act:active {
  transform: translateY(0) !important;
}

.btn-buy-plus-sym {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: inline-block !important;
}

.btn-buy-text-stack {
  display: flex !important;
  flex-direction: column !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.btn-buy-chev {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-left: 2px !important;
}

/* Mobile Responsive (<768px) */
@media (max-width: 768px) {
  .act-tokens-card-v2,
  #actTokensInfoContainer.act-tokens-card-v2 {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .act-tokens-card-body {
    gap: 8px !important;
  }

  .act-tokens-shield-svg {
    width: 28px !important;
    height: 32px !important;
  }

  .act-tokens-vsep {
    height: 28px !important;
  }

  .act-tokens-label-line1,
  .act-tokens-label-line2 {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .act-tokens-amount-col {
    min-width: 60px !important;
  }

  .act-tokens-big-num,
  #actTokensInfoContainer .act-tokens-big-num {
    font-size: 18px !important;
  }

  .act-tokens-unit-sub {
    font-size: 10.5px !important;
    margin-top: 2px !important;
  }

  .btn-buy-tokens-act,
  #actTokensInfoContainer .btn-buy-tokens-act {
    padding: 6px 10px !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }

  .btn-buy-plus-sym {
    font-size: 15px !important;
  }

  .btn-buy-text-stack {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .btn-buy-chev {
    font-size: 10px !important;
    margin-left: 0 !important;
  }
}


/* COMPLETELY SUPPRESS MODAL CHECKOUT CART BODY */
#checkoutOrderBody {
  display: none !important;
}


/* USER REQUEST: BRAND LOGO KEY ICON & CLEANUP */
.brand-dot {
  display: none !important;
}

.footer-lang-wrap {
  display: none !important;
}

.brand-logo-badge,
.brand-logo {
  background: #0284c7 !important;
  color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
  flex-shrink: 0 !important;
  border: none !important;
  transition: transform 0.2s ease !important;
}

.brand-logo-badge i,
.brand-logo i,
.brand-key-icon {
  color: #ffffff !important;
  font-size: 17px !important;
  transform: rotate(-15deg) !important;
}

/* RESPONSIVE CID ACTIVATION BALANCE WIDGET */
.act-tokens-card-v2,
#actTokensInfoContainer.act-tokens-card-v2 {
  background: #ffffff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.act-tokens-card-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.act-tokens-shield-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.act-tokens-shield-svg {
  width: 34px !important;
  height: 38px !important;
  display: block !important;
  filter: drop-shadow(0 2px 4px rgba(0, 108, 230, 0.2)) !important;
}

.act-tokens-vsep {
  width: 1px !important;
  height: 34px !important;
  background: #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.act-tokens-label-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

.act-tokens-label-line1,
.act-tokens-label-line2 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.act-tokens-amount-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  min-width: 65px !important;
}

.act-tokens-big-num,
#actTokensInfoContainer .act-tokens-big-num {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #006ce6 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
}

.act-tokens-unit-sub {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

.act-tokens-action-col {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.btn-tokens-buy-act,
.btn-buy-tokens-act,
#actTokensInfoContainer .btn-tokens-buy-act,
#actTokensInfoContainer .btn-buy-tokens-act {
  background: #006ce6 !important;
  color: #ffffff !important;
  border-radius: 9px !important;
  border: none !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0, 108, 230, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-tokens-buy-act .plus-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

.btn-tokens-buy-act .arrow-icon {
  font-size: 11px !important;
  margin-left: 2px !important;
}

@media (max-width: 768px) {
  .brand-logo-badge,
  .brand-logo {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
  }

  .brand-logo-badge i,
  .brand-logo i,
  .brand-key-icon {
    font-size: 14px !important;
  }

  .act-tokens-card-v2,
  #actTokensInfoContainer.act-tokens-card-v2 {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .act-tokens-card-body {
    gap: 8px !important;
  }

  .act-tokens-shield-svg {
    width: 26px !important;
    height: 30px !important;
  }

  .act-tokens-vsep {
    height: 26px !important;
  }

  .act-tokens-label-line1,
  .act-tokens-label-line2 {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .act-tokens-amount-col {
    min-width: 45px !important;
  }

  .act-tokens-big-num,
  #actTokensInfoContainer .act-tokens-big-num {
    font-size: 19px !important;
  }

  .act-tokens-unit-sub {
    font-size: 9.5px !important;
  }

  .btn-tokens-buy-act,
  .btn-buy-tokens-act,
  #actTokensInfoContainer .btn-tokens-buy-act,
  #actTokensInfoContainer .btn-buy-tokens-act {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .btn-tokens-buy-act .plus-icon {
    font-size: 14px !important;
  }

  .btn-tokens-buy-act .arrow-icon {
    font-size: 9px !important;
  }
}


.btn-buy-text-single {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  .btn-buy-text-single {
    font-size: 12.5px !important;
  }
  .btn-buy-tokens-act,
  #actTokensInfoContainer .btn-buy-tokens-act {
    padding: 7px 11px !important;
    gap: 6px !important;
  }
  .btn-buy-plus-sym {
    font-size: 16px !important;
  }
  .btn-buy-chev {
    font-size: 10.5px !important;
  }
}


/* SUCCESS MODAL FIXES */
#productCheckoutModal.open,
#productCheckoutModal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10600 !important;
}

#productCheckoutModal .modal-window.is-success {
  display: flex !important;
  flex-direction: column !important;
  max-width: 620px !important;
  width: 95% !important;
  margin: auto !important;
  padding: 24px !important;
}

#checkoutSuccessBody {
  display: block !important;
}


/* === USER REQUEST: LOGO NO COLOR CHANGE ON HOVER/CLICK, KEY MOVES ONLY === */
.brand-group,
.brand-group:hover,
.brand-group:active,
.brand-group:focus {
  background: transparent !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.brand-group .brand-name,
.brand-group:hover .brand-name,
.brand-group:active .brand-name {
  color: #0f172a !important;
}

.brand-logo-badge,
.brand-logo,
.brand-group:hover .brand-logo-badge,
.brand-group:active .brand-logo-badge {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.brand-logo-badge i,
.brand-logo i,
.brand-key-icon {
  color: #ffffff !important;
  display: inline-block !important;
  transform-origin: center center !important;
  transform: rotate(-15deg) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-group:hover .brand-logo-badge i,
.brand-group:hover .brand-logo i,
.brand-group:hover .brand-key-icon {
  transform: rotate(-30deg) scale(1.15) !important;
  color: #ffffff !important;
}

.brand-group:active .brand-logo-badge i,
.brand-group:active .brand-logo i,
.brand-group:active .brand-key-icon {
  transform: rotate(20deg) scale(0.95) !important;
  color: #ffffff !important;
  transition: transform 0.12s ease-out !important;
}


/* === AUTH CARD HEADER: ICON ON LEFT, TEXT ON RIGHT === */
.auth-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  text-align: left !important;
}

.auth-header-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 12px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  box-shadow: none !important;
  filter: none !important;
  flex-shrink: 0 !important;
}

.auth-header-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.auth-header-text h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.auth-header-text p {
  font-size: 14px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}


/* HIDE USER ROLE BADGE IN PROFILE */
.cab-role-badge,
#cabUserRoleBadge {
  display: none !important;
}


/* === USER REQUIREMENT: SINGLE-LINE HISTORY NOTICE & HIDE KEYS IN SUCCESS MODAL === */
.modal-checkout-cart.is-success {
  max-width: 580px !important;
}

.success-history-notice {
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-top: 4px !important;
  white-space: nowrap !important;
}

.success-history-notice i {
  color: #0284c7 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.issued-keys-container,
#issuedKeysContainer {
  display: none !important;
}

@media (max-width: 580px) {
  .success-history-notice {
    font-size: 11px !important;
    white-space: normal !important;
    text-align: left !important;
  }
}


/* === REVIEWS COMPONENT STYLES === */
.pdp-reviews-wrap {
  margin-top: 36px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
  text-align: left !important;
}

[data-theme="dark"] .pdp-reviews-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.pdp-reviews-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="dark"] .pdp-reviews-header {
  border-bottom-color: #334155 !important;
}

.pdp-reviews-heading {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
}

[data-theme="dark"] .pdp-reviews-heading {
  color: #f8fafc !important;
}

.pdp-reviews-sub {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 14px !important;
  color: #64748b !important;
}

.btn-write-review {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.btn-write-review:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
}

/* === HERO RATING GOLDEN STAR (MOBILE & DESKTOP) === */
.pdm-ks-star-gold,
.pdm-ks-star-gold i,
#pdpHeroRatingRow .pdm-ks-star-gold,
#pdpHeroRatingRow .pdm-ks-star-gold i,
#pdpHeroRatingRow .fa-star,
.pdm-ks-stars,
.pdm-ks-stars i {
  color: #f59e0b !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .pdm-ks-star-gold,
  .pdm-ks-star-gold i,
  #pdpHeroRatingRow .pdm-ks-star-gold,
  #pdpHeroRatingRow .pdm-ks-star-gold i,
  #pdpHeroRatingRow .fa-star {
    color: #f59e0b !important;
    font-weight: 700 !important;
  }
}

.pdp-reviews-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.review-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .review-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.review-card-row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.review-author-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.review-author-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.review-author-email {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .review-author-email {
  color: #f1f5f9 !important;
}

.review-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 20px !important;
  padding: 2.5px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .review-verified-badge {
  background: rgba(5, 150, 105, 0.15) !important;
  border-color: #059669 !important;
  color: #34d399 !important;
}

.review-card-row2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.review-stars {
  color: #f59e0b !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2.5px !important;
}

.review-stars i {
  color: #f59e0b !important;
}

.review-date {
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.review-product-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #475569 !important;
  margin-bottom: 10px !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .review-product-row {
  background: #0f172a !important;
  color: #94a3b8 !important;
}

.review-product-row i {
  color: #0284c7 !important;
  font-size: 11.5px !important;
  flex-shrink: 0 !important;
}

.review-product-row strong {
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .review-product-row strong {
  color: #f1f5f9 !important;
}

.review-comment-text {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  word-break: break-word !important;
}

[data-theme="dark"] .review-comment-text {
  color: #cbd5e1 !important;
}

@media (max-width: 640px) {
  .pdp-reviews-wrap {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    margin-top: 24px !important;
  }
  .pdp-reviews-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  .pdp-reviews-heading {
    font-size: 19px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
  }
  .pdp-reviews-sub {
    font-size: 13px !important;
    gap: 6px !important;
  }
  .btn-write-review {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
  }
  .pdp-reviews-list {
    gap: 10px !important;
  }
  .review-card {
    padding: 12px 12px !important;
    border-radius: 12px !important;
  }
  .review-author-avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 11.5px !important;
  }
  .review-author-email {
    font-size: 13px !important;
  }
  .review-verified-badge {
    padding: 2px 6px !important;
    font-size: 10.5px !important;
    gap: 3px !important;
  }
  .review-stars {
    font-size: 12px !important;
    gap: 2px !important;
  }
  .review-date {
    font-size: 11.5px !important;
  }
  .review-comment-text {
    font-size: 13px !important;
  }
}


/* === CATALOG COVERS (MATCHING PRODUCT CARD PROPORTIONS) & COMPACT RATING ROW === */
.card-ks-art-banner,
.card-ks-art-cover {
  height: 285px !important;
  padding: 20px 18px !important;
}

@media (max-width: 768px) {
  .card-ks-art-banner,
  .card-ks-art-cover {
    height: 195px !important;
    padding: 14px 12px !important;
  }
}

.card-ks-version {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin: 0 0 2px 0 !important;
  min-height: auto !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
}

.card-ks-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  margin: 2px 0 8px 0 !important;
  color: #64748b !important;
}

[data-theme="dark"] .card-ks-rating-row {
  color: #94a3b8 !important;
}

.card-ks-star {
  color: #f59e0b !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.card-ks-sales {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .card-ks-sales {
  color: #94a3b8 !important;
}

/* === CART EMPTY BUTTON COMPACT === */
.btn-empty-cart-catalog {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 280px !important;
  margin: 14px auto 0 auto !important;
  padding: 10px 22px !important;
}

/* === SIMPLIFIED ACTIVATION BALANCE WIDGET (3-SECTION WITH DIVIDERS) === */
#actTokensInfoContainer,
.act-tokens-simple-box {
  display: none;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  margin-bottom: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  gap: 12px !important;
}

/* Strictly hide when display: none inline style is set or not in tokens mode */
#actTokensInfoContainer[style*="display: none"],
#actTokensInfoContainer[style*="display:none"] {
  display: none !important;
}

/* Display only when mode-tokens class is on leftCard or container has is-visible */
.mode-tokens #actTokensInfoContainer,
#actTokensInfoContainer.is-visible {
  display: flex !important;
}

[data-theme="dark"] .act-tokens-simple-box,
[data-theme="dark"] #actTokensInfoContainer.act-tokens-simple-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Section 1: Icon and Label */
.act-tokens-sec-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.act-tokens-logo-badge {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: #0284c7 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 16px !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28) !important;
}

.act-tokens-logo-badge i {
  color: #ffffff !important;
  transform: none !important;
}

.act-tokens-simple-label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .act-tokens-simple-label {
  color: #f1f5f9 !important;
}

/* Vertical Divider Lines */
.act-tokens-v-sep {
  width: 1px !important;
  height: 28px !important;
  background: #e2e8f0 !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important;
}

[data-theme="dark"] .act-tokens-v-sep {
  background: #334155 !important;
}

/* Section 2: Actual Balance Value */
.act-tokens-sec-count {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-grow: 1 !important;
  justify-content: center !important;
}

.act-tokens-count-val {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

.act-tokens-count-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

[data-theme="dark"] .act-tokens-count-text {
  color: #94a3b8 !important;
}

/* Section 3: Buy Button */
.act-tokens-sec-btn {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.btn-buy-tokens-simple {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-buy-tokens-simple:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
}

.btn-buy-tokens-simple:active {
  transform: translateY(0) !important;
}

@media (max-width: 580px) {
  .act-tokens-simple-box,
  #actTokensInfoContainer.act-tokens-simple-box {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .act-tokens-logo-badge {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 13px !important;
  }
  .act-tokens-simple-label {
    font-size: 12px !important;
  }
  .act-tokens-v-sep {
    height: 24px !important;
    margin: 0 2px !important;
  }
  .act-tokens-count-val {
    font-size: 14px !important;
  }
  .act-tokens-count-text {
    font-size: 11.5px !important;
  }
  .btn-buy-tokens-simple {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
}

/* === DEDICATED TOKENS SPA PAGE STYLES === */
.tokens-standalone-wrap {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 24px 16px 40px 16px !important;
}

.tokens-standalone-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

[data-theme="dark"] .tokens-standalone-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.tokens-brand-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.tokens-brand-icon i {
  color: #ffffff !important;
  font-size: 22px !important;
}

.tokens-page-heading {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

[data-theme="dark"] .tokens-page-heading {
  color: #f8fafc !important;
}

.tokens-page-sub {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 4px 0 0 0 !important;
}

.tokens-standalone-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="dark"] .tokens-standalone-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

@media (max-width: 640px) {
  .act-tokens-simple-box,
  #actTokensInfoContainer.act-tokens-simple-box {
    padding: 10px 12px !important;
  }
  .act-tokens-simple-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .tokens-standalone-card {
    padding: 16px 14px !important;
  }
}


/* ==========================================================================
   ALIGN HISTORY, AUTH, CABINET TOP MARGINS WITH CATALOG & CID ACTIVATION
   ========================================================================== */
#pageHistory {
  padding-top: 12px !important;
  margin-top: 0 !important;
}
#pageHistory .card {
  margin-top: 0 !important;
}

#pageAuth {
  padding-top: 12px !important;
  margin-top: 0 !important;
}
#pageAuth .card,
#pageAuth .auth-container,
.auth-container {
  margin-top: 10px !important;
  margin-bottom: 30px !important;
}

#pageCabinet {
  padding-top: 12px !important;
  margin-top: 0 !important;
}
.cabinet-layout-grid {
  margin-top: 0 !important;
}


/* === USER POLISH: PLAIN COINS ICON WITHOUT FRAME & FOOTER VISIBILITY GUARANTEE === */
.act-tokens-plain-icon,
.act-tokens-sec-label .fa-coins,
.act-tokens-logo-badge,
.act-tokens-logo-badge i {
  color: #0284c7 !important;
  font-size: 21px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-theme="dark"] .act-tokens-plain-icon,
[data-theme="dark"] .act-tokens-sec-label .fa-coins {
  color: #38bdf8 !important;
}

.act-tokens-sec-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Footer visibility and responsive polish */
.site-footer {
  display: block !important;
  width: 100% !important;
  margin-top: auto !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 40px 0 24px 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

[data-theme="dark"] .site-footer {
  background: #0b1322 !important;
  border-top-color: #1e293b !important;
}

[data-theme="dark"] .footer-col-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .footer-brand-desc,
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-links-list li a,
[data-theme="dark"] .footer-meta-schedule {
  color: #94a3b8 !important;
}

[data-theme="dark"] .footer-links-list li a:hover {
  color: #38bdf8 !important;
}


/* ==========================================================================
   USER CUSTOMIZATION: HEADER FORMAT (PHOTO 3), UNIFIED TOP SPACING, & HEADINGS (PHOTO 2)
   ========================================================================== */

/* 1. SITE HEADER (Clean Minimalist Bar matching Photo 3) */
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.header-container {
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Brand Logo (Left) */
.brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.brand-logo-badge {
  width: 36px !important;
  height: 36px !important;
  background: #0284c7 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 16px !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.22) !important;
}

.brand-name {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  letter-spacing: -0.4px !important;
}

/* Center Nav (Clean Text Links with Underline matching Photo 3) */
.header-center-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 2px 10px 2px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #475569 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.15s ease !important;
  white-space: nowrap !important;
}

.header-nav-btn i {
  display: none !important; /* Hide icons in header links to match Photo 3 clean text */
}

.header-nav-btn:hover {
  color: #0284c7 !important;
  background: transparent !important;
}

.header-nav-btn.active {
  color: #0284c7 !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* Active Blue Bottom Underline Indicator (matches Photo 3) */
.header-nav-btn.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2.5px !important;
  background: #0284c7 !important;
  border-radius: 2px !important;
}

/* Cart Badge Pill (Soft sky blue background with blue text matching Photo 3) */
.header-cart-badge-pill,
.header-cart-nav-btn .cart-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 5px !important;
  line-height: 1 !important;
}

/* Right Action Buttons: Search [Q] and Profile [👤] matching Photo 3 */
.header-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.header-action-icon-box,
.header-search-icon-btn,
.header-login-btn,
.header-cabinet-pill {
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  padding: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.header-action-icon-box:hover,
.header-search-icon-btn:hover,
.header-login-btn:hover,
.header-cabinet-pill:hover {
  border-color: #cbd5e1 !important;
  color: #0284c7 !important;
  background: #f8fafc !important;
}

.header-login-btn,
.header-cabinet-pill {
  color: #0284c7 !important;
}

#headerTopCartBtn {
  display: none !important; /* Cart is already prominently displayed in Center Nav */
}

/* Mobile Header Adaptations */
@media (max-width: 768px) {
  .header-container {
    height: 58px !important;
    padding: 0 16px !important;
  }
  .header-center-nav {
    display: none !important;
  }
  #headerTopCartBtn {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
  }
  .header-action-icon-box,
  .header-search-icon-btn,
  .header-login-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

/* 2. UNIFIED TOP SPACING ON ALL PAGES (Identical Breathing Room) */
.site-header + .container,
body > .container {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

#pageStore,
#pageActivation,
#pageHistory,
#pageCabinet,
#pageAuth,
#pageProduct,
#pageTokens,
#pageCheckout,
#pageLegal {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.catalog-layout,
.activation-layout-new,
#pageHistory .card,
#pageAuth .card,
#pageAuth .auth-container,
.cabinet-layout-grid,
.checkout-standalone-card,
.tokens-page-container {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .site-header + .container,
  body > .container {
    padding-top: 20px !important;
  }
}

/* 3. HEADINGS: SOFT CHARCOAL COLOR (#2f2f35) & LESS HEAVY WEIGHT (MATCHING PHOTO 2) */
.catalog-page-title,
#catalogSectionTitle,
.card-ks-art-cover .ks-cover-wordmark,
.card-ks-title-main,
.catalog-sidebar-title,
.cat-accordion-header span,
.card-title,
.auth-card-title,
.cab-window-title,
.modal-title,
.step2-title,
.step-title,
.summary-title,
.pdm-title {
  color: #2f2f35 !important;
  font-weight: 650 !important;
  letter-spacing: -0.2px !important;
}

/* Section Main Heading: soft, clean, elegant */
#catalogSectionTitle,
.catalog-page-title {
  font-size: 24px !important;
  font-weight: 650 !important;
  color: #2f2f35 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Product Card Artwork Cover Titles */
.card-ks-art-cover .ks-cover-wordmark {
  color: #2f2f35 !important;
  font-weight: 600 !important;
  font-size: 19px !important;
}

.card-ks-art-cover .ks-cover-version {
  font-weight: 650 !important;
}

/* Product Card Lower Title */
.card-ks-title-main {
  color: #2f2f35 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Sidebar Title */
.catalog-sidebar-title {
  color: #2f2f35 !important;
  font-weight: 650 !important;
  font-size: 15px !important;
}

/* Dark Theme overrides */
[data-theme="dark"] .catalog-page-title,
[data-theme="dark"] #catalogSectionTitle,
[data-theme="dark"] .card-ks-art-cover .ks-cover-wordmark,
[data-theme="dark"] .card-ks-title-main,
[data-theme="dark"] .catalog-sidebar-title,
[data-theme="dark"] .cat-accordion-header span,
[data-theme="dark"] .card-title,
[data-theme="dark"] .auth-card-title,
[data-theme="dark"] .cab-window-title,
[data-theme="dark"] .modal-title {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .site-header {
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

[data-theme="dark"] .header-nav-btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .header-nav-btn:hover {
  color: #38bdf8 !important;
}

[data-theme="dark"] .header-nav-btn.active {
  color: #38bdf8 !important;
}

[data-theme="dark"] .header-nav-btn.active::after {
  background: #38bdf8 !important;
}

[data-theme="dark"] .header-action-icon-box,
[data-theme="dark"] .header-search-icon-btn,
[data-theme="dark"] .header-login-btn,
[data-theme="dark"] .header-cabinet-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}


/* === USER POLISH: REMOVE ALL BULLET DOTS FROM LEGAL TEXT === */
.legal-clause-body ul,
.legal-modal-body ul,
.legal-clause ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.legal-clause-body ul li,
.legal-modal-body ul li,
.legal-clause ul li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  position: relative !important;
  margin-bottom: 6px !important;
}

.legal-clause-body ul li::before,
.legal-modal-body ul li::before,
.legal-clause ul li::before {
  content: none !important;
  display: none !important;
}

.legal-dash-item {
  margin: 4px 0 !important;
  padding-left: 2px !important;
  line-height: 1.55 !important;
  color: inherit !important;
}


/* === USER POLISH: HEADER BACKGROUND SAME AS SITE BACKGROUND (#f6f8fc) WITH BARELY NOTICEABLE LINE === */
html,
body {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
}

.site-header {
  background: #f6f8fc !important;
  background-color: #f6f8fc !important;
  border-bottom: 1px solid #e9ecf2 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .site-header {
    background: #f6f8fc !important;
    background-color: #f6f8fc !important;
    border-bottom: 1px solid #e9ecf2 !important;
    box-shadow: none !important;
  }
}

[data-theme="dark"] html,
[data-theme="dark"] body {
  background: #0b1322 !important;
  background-color: #0b1322 !important;
}

[data-theme="dark"] .site-header {
  background: #0b1322 !important;
  background-color: #0b1322 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}


/* ==========================================================================
   USER REFERENCE MATCH: SEAMLESS MODERN PRODUCT CARDS (1:1 REFERENCE MOCKUP)
   ========================================================================== */

/* 1. Grid */
.products-grid-keysoft {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 16px !important;
  align-items: stretch !important;
}

@media (max-width: 1024px) {
  .products-grid-keysoft {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  .products-grid-keysoft {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* 2. Unified Card Container (Clean white box, rounded 20px, soft shadow) */
.card-keysoft-v3 {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.75) !important;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.card-keysoft-v3:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(186, 230, 253, 0.95) !important;
  box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.03) !important;
}

/* 3. Top Artwork Cover: Aspect ratio matching reference mockup, rounded top */
.card-ks-art-cover {
  width: 100% !important;
  aspect-ratio: 230 / 242 !important;
  border-radius: 20px 20px 0 0 !important;
  background: #f8fafc !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.card-ks-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px 20px 0 0 !important;
  transition: transform 0.25s ease !important;
}

.card-keysoft-v3:hover .card-ks-cover-img {
  transform: scale(1.015) !important;
}

/* 4. Lower Framed Body: Immediately follows cover without extra margin/lines */
.card-ks-framed-body {
  border: none !important;
  border-top: none !important;
  background: #ffffff !important;
  padding: 14px 18px 18px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  box-shadow: none !important;
}

/* Omit redundant version text in lower body */
.card-ks-version {
  display: none !important;
}

/* 5. Rating Row: ★ 5.0 · 100+ продаж */
.card-ks-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  margin: 0 0 14px 0 !important;
  color: #64748b !important;
  line-height: 1 !important;
}

.card-ks-star {
  color: #f59e0b !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.card-ks-star i {
  font-size: 12.5px !important;
}

.card-ks-star .global-rating-val {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.card-ks-dot {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.card-ks-sales {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* 6. Footer: Price & Vibrant Blue Pill Button */
.card-ks-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 0 !important;
}

.card-ks-price-box {
  display: flex !important;
  align-items: baseline !important;
}

.card-ks-price-val {
  font-size: 23px !important;
  font-weight: 800 !important;
  color: #2f2f35 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

.btn-card-details {
  height: 38px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  background: #0066ff !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.22) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-card-details:hover {
  background: #0052cc !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35) !important;
}

.btn-card-details:active {
  transform: translateY(0) !important;
}

/* Product Details Modal Cover Box */
.pdm-ks-cover-box {
  width: 100% !important;
  aspect-ratio: 230 / 242 !important;
  max-height: 280px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #f8fafc !important;
}

.pdm-ks-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
}

/* Dark Theme Support */
[data-theme="dark"] .card-keysoft-v3 {
  background: #111c30 !important;
  border-color: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .card-keysoft-v3:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .card-ks-art-cover {
  background: #111c30 !important;
}

[data-theme="dark"] .card-ks-framed-body {
  background: #111c30 !important;
}

[data-theme="dark"] .card-ks-star .global-rating-val {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .card-ks-sales {
  color: #94a3b8 !important;
}

[data-theme="dark"] .card-ks-price-val {
  color: #f8fafc !important;
}

[data-theme="dark"] .btn-card-details {
  background: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

[data-theme="dark"] .btn-card-details:hover {
  background: #0369a1 !important;
}

/* ==========================================================================
   USER REFINEMENT: PRODUCT DETAILS TYPOGRAPHY, COMPACT PILLS & SOFT PRICE
   ========================================================================== */
.pdm-ks-title-main {
  margin: 0 0 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  line-height: 1.25 !important;
}

.pdm-ks-title-l1 {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: #2f2f35 !important;
  letter-spacing: -0.3px !important;
}

.pdm-ks-title-l2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #2f2f35 !important;
  letter-spacing: -0.3px !important;
}

@media (max-width: 768px) {
  .pdm-ks-title-l1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2f2f35 !important;
  }
  .pdm-ks-title-l2 {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #2f2f35 !important;
  }
}

/* Compact characteristics columns - no wasted space on right */
.pdm-feat-row-3 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 16px 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.pdm-feat-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 16px 8px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

.pdm-feat-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

.pdm-feat-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.pdm-feat-label {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.pdm-feat-val {
  font-size: 13.5px !important;
  color: #2f2f35 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Soft price color - matching title, not pitch black */
.pdm-ks-price {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #2f2f35 !important;
  letter-spacing: -0.5px !important;
}

.card-ks-price-val {
  color: #2f2f35 !important;
}

[data-theme="dark"] .pdm-ks-title-l1,
[data-theme="dark"] .pdm-ks-title-l2,
[data-theme="dark"] .pdm-feat-val,
[data-theme="dark"] .pdm-ks-price,
[data-theme="dark"] .card-ks-price-val {
  color: #f8fafc !important;
}

[data-theme="dark"] .pdm-feat-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}


/* ==========================================================================
   V183: CARD TITLES, COMPACT LOGO-COLORED "ВЫБРАТЬ" BUTTON & PDP BUTTON WIDTH
   ========================================================================== */

/* 1. Neatly styled card product title above rating - 2 lines so full version is always 100% visible */
.card-ks-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 0 5px 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word !important;
  min-height: 38px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Ensure cover images never crop the Microsoft logo or product titles */
.card-ks-art-cover {
  width: 100% !important;
  aspect-ratio: 1 / 1.15 !important;
  border-radius: 14px 14px 0 0 !important;
  background: #f5f6f8 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.card-ks-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border-radius: 14px 14px 0 0 !important;
  transition: transform 0.25s ease !important;
}

[data-theme="dark"] .card-ks-title {
  color: #f1f5f9 !important;
}

/* 2. Compact, symmetrical "Выбрать" button matching CIDKEYS logo icon color */
.btn-card-details {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.22) !important;
  letter-spacing: 0.1px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.btn-card-details:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.32) !important;
}

.btn-card-details:active {
  transform: translateY(0) !important;
}

[data-theme="dark"] .btn-card-details {
  background: #0284c7 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-card-details:hover {
  background: #0369a1 !important;
}

/* 3. PDP: Three feature boxes and Action buttons aligned at exact same width */
.pdm-feat-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.pdm-feat-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Action buttons match full width of right column, exactly aligning with bottom instruction card */
.pdp-hero-actions-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.pdm-ks-actions-row.pdm-dual-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.pdm-ks-payment-note,
.pdm-ks-payment-badge-green {
  display: none !important;
}

@media (max-width: 768px) {
  .pdm-feat-row-3 {
    max-width: 100% !important;
  }
  .pdp-hero-actions-wrap,
  .pdm-ks-actions-row.pdm-dual-actions,
  .pdm-ks-payment-note {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   V501: RESTORE ORIGINAL COMPACT 1040px LAYOUT & AUTHENTIC MINIMAL COVERS
   ========================================================================== */

/* 1. Strictly restore original container widths across the site (Desktop 1040px) */
.container,
.site-header .container,
.header-container,
.catalog-layout,
.catalog-main-content,
.card-keysoft-container,
#pageStore .container,
#pageProduct .container,
.activation-layout-new,
.footer-grid-container {
  max-width: 1040px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 2. Standard 3-column catalog grid on desktop, 2-column on mobile */
.products-grid-keysoft {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .products-grid-keysoft {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .products-grid-keysoft {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 3. Minimal Software Box Cover (Matching User's Original Reference Exactly) */
.card-keysoft-v3 {
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}

.card-keysoft-v3:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.card-ks-art-cover {
  width: 100% !important;
  height: 168px !important;
  aspect-ratio: unset !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  border-radius: 14px 14px 0 0 !important;
  transition: all 0.25s ease !important;
}

@media (max-width: 600px) {
  .card-ks-art-cover {
    height: 152px !important;
    padding: 12px 14px !important;
  }
  .ks-cover-wordmark {
    font-size: 17px !important;
  }
  .ks-cover-version {
    font-size: 17px !important;
  }
}

/* 4. Microsoft Brand row */
.ks-cover-ms-brand {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  z-index: 2 !important;
  position: relative !important;
}

.ks-ms-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 6.5px) !important;
  gap: 2px !important;
}

.ms-sq {
  width: 100% !important;
  aspect-ratio: 1 !important;
  border-radius: 0.5px !important;
}
.ms-sq-r { background: #f25022 !important; }
.ms-sq-g { background: #7fba00 !important; }
.ms-sq-b { background: #00a4ef !important; }
.ms-sq-y { background: #ffb900 !important; }

.ks-ms-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5f6368 !important;
  letter-spacing: -0.2px !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

/* 5. Cover Titles */
.ks-cover-titles {
  z-index: 2 !important;
  position: relative !important;
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ks-cover-wordmark {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
}

.ks-cover-wordmark.wordmark-long {
  font-size: 15px !important;
}

.ks-cover-version {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
}

.ks-cover-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

/* 6. Fluid Waves SVG */
.ks-cover-waves {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.card-keysoft-v3:hover .ks-cover-waves {
  transform: scale(1.04) translate(1%, -1%) !important;
}

/* 7. Card Lower Body */
.card-ks-framed-body,
.card-ks-content {
  padding: 12px 14px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  background: #ffffff !important;
}

.card-ks-title-wrap {
  margin: 0 0 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-height: 38px !important;
}

.card-ks-title-l1 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-ks-title-l2 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-ks-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
}

.card-ks-price-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
}

.btn-card-buy-direct {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.22) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.btn-card-buy-direct:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.32) !important;
}

.btn-card-buy-direct:active {
  transform: translateY(0) !important;
}

/* 8. PDP Product Details Modal Minimal Cover */
.pdp-hero-grid {
  grid-template-columns: 340px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}

.pdp-hero-media {
  width: 340px !important;
}

.pdm-ks-cover-box {
  width: 100% !important;
  max-width: 340px !important;
  height: 360px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 24px 26px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  aspect-ratio: unset !important;
}

.ks-cover-ms-brand.modal-brand {
  gap: 8px !important;
}

.ks-ms-grid.modal-grid {
  grid-template-columns: repeat(2, 8px) !important;
  gap: 2.5px !important;
}

.ks-ms-text.modal-text {
  font-size: 15px !important;
  color: #475569 !important;
}

.ks-cover-titles.modal-titles {
  margin-top: 14px !important;
  gap: 4px !important;
}

.ks-cover-wordmark.modal-wordmark {
  font-size: 28px !important;
}

.ks-cover-version.modal-version {
  font-size: 28px !important;
}

.ks-cover-sub.modal-sub {
  font-size: 13px !important;
}

@media (max-width: 768px) {
  .pdp-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .pdp-hero-media {
    width: 100% !important;
  }
  .pdm-ks-cover-box {
    max-width: 100% !important;
    height: 300px !important;
  }
}


/* --- V502 REFINEMENTS: NARROW PDP COVER & COMPACT VERSION LABELS --- */

/* 1. Long version titles on card covers (Корпоративная, Pro Plus LTSC) */
.ks-cover-version.version-compact {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.15px !important;
  line-height: 1.2 !important;
}

/* 2. Narrow PDP Cover (Sleek Retail Box Proportions) */
.pdp-hero-grid {
  grid-template-columns: 250px 1fr !important;
  gap: 36px !important;
  align-items: start !important;
}

.pdp-hero-media {
  width: 250px !important;
  max-width: 250px !important;
}

.pdm-ks-cover-box {
  width: 100% !important;
  max-width: 250px !important;
  height: 330px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 22px 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  aspect-ratio: unset !important;
}

.ks-cover-wordmark.modal-wordmark {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.ks-cover-version.modal-version {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.ks-cover-version.modal-version.version-compact {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#pageProduct .container {
  max-width: 980px !important;
}

@media (max-width: 768px) {
  .pdp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pdp-hero-media {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pdm-ks-cover-box {
    max-width: 100% !important;
    height: 280px !important;
  }
}

/* ==========================================================================
   V503 FIXES (USER REQUEST)
   1. Cover typography smaller on 7, 11, 10 Home/Pro and Server Standard/Datacenter
   2. Responsive card titles (Windows Corporate, Server, Visio, Project, Office)
   3. Card footer: price and button perfectly aligned horizontally & compact mobile button
   4. Activation balance: smaller and matching 'активаций' text styling
   5. Mobile PDP: hide icons from 3 spec boxes without changing box sizes
   6. Privacy policy title: prevent overflow on mobile
   ========================================================================== */

/* 1. COVER TYPOGRAPHY */
.ks-cover-wordmark {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  letter-spacing: -0.25px !important;
}

.ks-cover-version {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
}

.ks-cover-version.version-compact {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.15px !important;
  line-height: 1.2 !important;
}

@media (max-width: 640px) {
  .ks-cover-wordmark {
    font-size: 14.5px !important;
  }
  .ks-cover-version {
    font-size: 13.5px !important;
  }
  .ks-cover-version.version-compact {
    font-size: 11.5px !important;
  }
}

/* 2. RESPONSIVE TITLE SPANS */
.hide-mobile {
  display: inline !important;
}
.show-mobile {
  display: none !important;
}
.paren-desktop {
  display: inline !important;
}
@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
  .show-mobile {
    display: inline !important;
  }
  .paren-desktop {
    display: none !important;
  }
}

/* 3. CARD FOOTER: PRICE & BUTTON PERFECT ALIGNMENT */
.card-ks-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.card-ks-price-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.card-ks-price-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-card-buy-direct {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.btn-card-buy-direct i {
  font-size: 12px !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  .card-ks-footer {
    gap: 4px !important;
    margin-top: 6px !important;
    align-items: center !important;
  }
  .card-ks-price-val {
    font-size: 15.5px !important;
    line-height: 1 !important;
  }
  .btn-card-buy-direct {
    height: 28px !important;
    padding: 0 9px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    line-height: 1 !important;
  }
  .btn-card-buy-direct i {
    font-size: 10.5px !important;
  }
}

/* 4. ACTIVATION BALANCE FONT STYLING */
.act-tokens-count-val,
.act-tokens-count-val strong,
#actTokensBalanceDigits {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}

.act-tokens-count-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .act-tokens-count-val,
[data-theme="dark"] .act-tokens-count-val strong,
[data-theme="dark"] #actTokensBalanceDigits,
[data-theme="dark"] .act-tokens-count-text {
  color: #94a3b8 !important;
}

@media (max-width: 580px) {
  .act-tokens-count-val,
  .act-tokens-count-val strong,
  #actTokensBalanceDigits,
  .act-tokens-count-text {
    font-size: 11.5px !important;
  }
}

/* 5. MOBILE PDP: HIDE ICONS FROM 3 SPEC BOXES, KEEP BOX SIZES */
@media (max-width: 768px) {
  .pdm-feat-box .pdm-feat-icon,
  .pdm-param-box .pdm-param-circle-icon {
    display: none !important;
  }

  .pdm-feat-box,
  .pdm-param-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
  }

  .pdm-feat-text,
  .pdm-param-texts {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
  }

  .pdm-feat-label,
  .pdm-param-label {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .pdm-feat-val,
  .pdm-param-value {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

/* 6. PRIVACY POLICY TITLE MOBILE OVERFLOW FIX */
@media (max-width: 768px) {
  .legal-doc-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .legal-doc-header > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .legal-doc-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }

  .legal-doc-title {
    font-size: 16.5px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    margin: 0 0 4px 0 !important;
    max-width: 100% !important;
  }

  .legal-doc-meta {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .legal-page-container,
  .legal-doc-card,
  .legal-tab-content {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* ==========================================================================
   V504 FIX: ENSURE ALL COVER VERSIONS (Standard, Datacenter, Pro Plus, 11 Pro, 10 Pro, 7 Pro, Home) ARE 100% UNIFORMLY COMPACT
   ========================================================================== */
.card-ks-art-cover .ks-cover-version,
.ks-cover-version,
.ks-cover-version.version-compact {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.15px !important;
  margin-top: 2px !important;
}

@media (max-width: 640px) {
  .card-ks-art-cover .ks-cover-version,
  .ks-cover-version,
  .ks-cover-version.version-compact {
    font-size: 11.5px !important;
    margin-top: 1px !important;
  }
}

/* ==========================================================================
   V505 REFINEMENTS (USER REQUEST):
   1. Cover versions:
      - win pro, home, and office pro plus made slightly bigger (16px)
      - pro plus ltsc width matches wordmark 'office 2021' (15px)
      - corporate matches windows 11 (13.5px)
      - server standard (14px) and datacenter (13.5px)
   2. CID Activation Balance Box:
      - 'Баланс активаций' label has EXACT same font, weight (600), and color (#64748b) as '0 активаций'
      - Box divided into 3 EXACTLY EQUAL thirds (33.333% each) so divider lines are completely symmetrical
   ========================================================================== */

/* 1. COVER VERSION TYPOGRAPHY */
.card-ks-art-cover .ks-cover-version,
.ks-cover-version,
.ks-cover-version.version-md {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
  margin-top: 2px !important;
}

/* Office Pro Plus LTSC: 15px perfectly matches the width of 'Office 2021' above it */
.card-ks-art-cover .ks-cover-version.version-office-ltsc,
.ks-cover-version.version-office-ltsc {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.15px !important;
  margin-top: 2px !important;
}

/* Windows Corporate: 13.5px matches width of 'Windows 11' */
.card-ks-art-cover .ks-cover-version.version-corporate,
.ks-cover-version.version-corporate {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.15px !important;
  margin-top: 2px !important;
}

/* Server Standard: 14px */
.card-ks-art-cover .ks-cover-version.version-server-std,
.ks-cover-version.version-server-std {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.15px !important;
  margin-top: 2px !important;
}

/* Server Datacenter: 13.5px */
.card-ks-art-cover .ks-cover-version.version-server-dc,
.ks-cover-version.version-server-dc {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.15px !important;
  margin-top: 2px !important;
}

/* Visio/Project Professional: 13.5px */
.card-ks-art-cover .ks-cover-version.version-pro-full,
.ks-cover-version.version-pro-full {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.15px !important;
  margin-top: 2px !important;
}

@media (max-width: 640px) {
  .card-ks-art-cover .ks-cover-version,
  .ks-cover-version,
  .ks-cover-version.version-md {
    font-size: 13.5px !important;
  }
  .card-ks-art-cover .ks-cover-version.version-office-ltsc,
  .ks-cover-version.version-office-ltsc {
    font-size: 12.5px !important;
  }
  .card-ks-art-cover .ks-cover-version.version-corporate,
  .ks-cover-version.version-corporate {
    font-size: 11.5px !important;
  }
  .card-ks-art-cover .ks-cover-version.version-server-std,
  .ks-cover-version.version-server-std {
    font-size: 12px !important;
  }
  .card-ks-art-cover .ks-cover-version.version-server-dc,
  .ks-cover-version.version-server-dc {
    font-size: 11.5px !important;
  }
  .card-ks-art-cover .ks-cover-version.version-pro-full,
  .ks-cover-version.version-pro-full {
    font-size: 11.5px !important;
  }
}

/* 2. CID ACTIVATION BALANCE BOX: 3 EXACTLY EQUAL THIRDS & UNIFIED LABEL */
/* Balance box: strictly hidden in key mode, flex in tokens mode */
#actTokensInfoContainer,
.act-tokens-simple-box {
  display: none !important;
}

#activationCardLeft.mode-tokens #actTokensInfoContainer,
#activationCardLeft.mode-tokens .act-tokens-simple-box,
#actTokensInfoContainer.is-visible {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

/* Section 1: exactly 1/3 */
.act-tokens-sec-label {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

/* Label text exactly matching '0 активаций' styling */
.act-tokens-simple-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .act-tokens-simple-label {
  color: #94a3b8 !important;
}

.act-tokens-plain-icon,
.act-tokens-sec-label .fa-coins {
  font-size: 15px !important;
  color: #0284c7 !important;
}

/* Symmetrical Vertical Dividers placed at exactly 33.3% and 66.6% */
.act-tokens-v-sep {
  width: 1px !important;
  height: 26px !important;
  background: #e2e8f0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

[data-theme="dark"] .act-tokens-v-sep {
  background: #334155 !important;
}

/* Section 2: exactly 1/3 */
.act-tokens-sec-count {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.act-tokens-count-val,
.act-tokens-count-val strong,
#actTokensBalanceDigits,
.act-tokens-count-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .act-tokens-count-val,
[data-theme="dark"] .act-tokens-count-val strong,
[data-theme="dark"] #actTokensBalanceDigits,
[data-theme="dark"] .act-tokens-count-text {
  color: #94a3b8 !important;
}

/* Section 3: exactly 1/3 */
.act-tokens-sec-btn {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.btn-buy-tokens-simple {
  padding: 6px 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .act-tokens-simple-box,
  #actTokensInfoContainer.act-tokens-simple-box {
    padding: 8px 6px !important;
  }
  .act-tokens-sec-label,
  .act-tokens-sec-count,
  .act-tokens-sec-btn {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 0 2px !important;
  }
  .act-tokens-simple-label {
    font-size: 11px !important;
  }
  .act-tokens-plain-icon,
  .act-tokens-sec-label .fa-coins {
    font-size: 13px !important;
  }
  .act-tokens-count-val,
  .act-tokens-count-val strong,
  #actTokensBalanceDigits,
  .act-tokens-count-text {
    font-size: 11px !important;
  }
  .btn-buy-tokens-simple {
    padding: 5px 8px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }
}

/* ==========================================================================
   V506: REMOVE PAYMENT NOTE & ALIGN TOP HERO SECTION WITH BOTTOM DETAILS ROW
   ========================================================================== */
.pdm-ks-payment-note,
.pdm-ks-payment-badge-green {
  display: none !important;
}

.pdm-feat-row-3,
.pdp-hero-actions-wrap,
.pdm-ks-actions-row.pdm-dual-actions {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   V507 REFINEMENT: HARMONIZE PDP CARD (860px CONTAINER, COMPACT BUTTONS,
   SLIGHTLY LARGER 280px COVER, EQUAL LENGTH TOP & BOTTOM SECTIONS)
   ========================================================================== */

@media (min-width: 769px) {
  .product-page-standalone {
    max-width: 860px !important;
    width: 100% !important;
    margin: 16px auto 40px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .pdp-standalone-wrap {
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .pdp-hero-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    align-items: start !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pdp-hero-media {
    width: 280px !important;
    max-width: 280px !important;
  }

  .pdm-ks-cover-box {
    width: 100% !important;
    max-width: 280px !important;
    height: 350px !important;
  }

  .pdm-feat-row-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pdm-feat-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .pdp-hero-actions-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pdm-ks-actions-row.pdm-dual-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-pdm-primary-cart,
  .btn-pdm-secondary-buy {
    height: 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  /* Bottom description & instructions cards equal in length (860px total width) */
  .pdp-details-row-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 24px auto 0 auto !important;
    box-sizing: border-box !important;
  }

  .pdp-reviews-wrap {
    max-width: 860px !important;
    margin: 32px auto 0 auto !important;
  }
}

/* Hide safe payment note everywhere */
.pdm-ks-payment-note,
.pdm-ks-payment-badge-green {
  display: none !important;
}

/* ==========================================================================
   V508 REFINEMENTS (USER REQUEST):
   1. PDP top spacing reduced to match catalog top distance (higher up)
   2. Catalog sidebar: no outer enclosing white card window, individual
      category pills in soft gray (#f1f3f6)
   3. Search input & Sort dropdown in soft gray (#f1f3f6) matching example
   4. Activation balance box strictly removed from "Ввести ключ активации" tab
   ========================================================================== */

/* 1. PDP TOP DISTANCE MATCHING CATALOG */
@media (min-width: 769px) {
  .product-page-standalone {
    margin: 6px auto 40px auto !important;
    padding-top: 0 !important;
  }
  .pdp-breadcrumbs-bar {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
}

/* 2. CATALOG SIDEBAR WITHOUT OUTER CARD */
.catalog-sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

.catalog-sidebar-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 0 14px 4px !important;
  padding: 0 !important;
}

.cat-accordion-group {
  margin-bottom: 8px !important;
  border: none !important;
  background: transparent !important;
}

/* Category pills in soft gray (#f1f3f6) */
.cat-accordion-header,
.cat-all-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f1f3f6 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

.cat-accordion-header:hover,
.cat-all-pill:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}

.cat-accordion-header.active,
.cat-all-pill.active {
  background: #e5e7eb !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

.cat-accordion-header .chevron-icon,
.cat-all-pill .chevron-icon {
  color: #4b5563 !important;
  font-size: 12px !important;
}

/* 3. SEARCH & SORT WINDOWS IN SOFT GRAY (#f1f3f6) */
.catalog-filter-search input {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 14px 8px 36px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: #f1f3f6 !important;
  color: #1f2937 !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  outline: none !important;
}

.catalog-filter-search input:focus {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

.catalog-sort-select {
  height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: #f1f3f6 !important;
  color: #374151 !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}

.btn-mob-open-drawer {
  background: #f1f3f6 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

/* Dark theme overrides */
[data-theme="dark"] .cat-accordion-header,
[data-theme="dark"] .cat-all-pill,
[data-theme="dark"] .catalog-filter-search input,
[data-theme="dark"] .catalog-sort-select,
[data-theme="dark"] .btn-mob-open-drawer {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .catalog-sidebar-title {
  color: #f1f5f9 !important;
}

/* 4. CID ACTIVATION: STRICTLY HIDE BALANCE IN KEY MODE */
#actTokensInfoContainer,
.act-tokens-simple-box {
  display: none !important;
}

#activationCardLeft.mode-tokens #actTokensInfoContainer,
#activationCardLeft.mode-tokens .act-tokens-simple-box,
#actTokensInfoContainer.is-visible {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   V509 REFINEMENT (USER REQUEST):
   1. PDP Title: Do not wrap Windows Pro & Corporate to 3rd line (keep on 2 lines
      like Windows 7 Pro where everything fits)
   2. Windows Corporate named "Windows 11 Enterprise LTSC 2024"
   ========================================================================== */
@media (min-width: 769px) {
  .pdm-ks-title-main {
    margin: 0 0 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    line-height: 1.25 !important;
  }

  .pdm-ks-title-l1 {
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
  }

  .pdm-ks-title-l2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   V510 REFINEMENT (USER REQUEST):
   1. Category catalog text: regular / normal (not bold, font-weight: 400)
   2. Site background slightly lighter (#fafbfc)
   3. Product covers darker matching user image color (#f6f7fb)
   ========================================================================== */

/* 1. Site background slightly lighter & header matching */
html,
body,
.site-header {
  background: #fafbfc !important;
  background-color: #fafbfc !important;
}

/* 2. Product covers darker matching user image color #f6f7fb */
.card-ks-art-cover,
.pdm-ks-cover-box,
.pdp-hero-media .pdm-ks-cover-box {
  background: #f6f7fb !important;
  background-color: #f6f7fb !important;
}

/* 3. Category catalog text regular / normal (not bold) */
.catalog-sidebar-title {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: #1e293b !important;
}

.cat-accordion-header,
.cat-accordion-header span,
.cat-accordion-header .cat-title-text,
.cat-all-pill,
.cat-all-pill span,
.cat-version-pill,
.cat-version-pill span,
.cat-accordion-title,
.btn-mob-open-drawer,
.btn-mob-open-drawer span {
  font-weight: 400 !important;
}

.cat-accordion-header.active,
.cat-accordion-header.active span,
.cat-all-pill.active,
.cat-all-pill.active span,
.cat-version-pill.active,
.cat-version-pill.active span {
  font-weight: 400 !important;
  color: #0284c7 !important;
}

/* ==========================================================================
   V511 REFINEMENTS (USER REQUEST):
   1. Category list text: slightly thicker (font-weight: 500)
   2. "Каталог" heading: bigger & prominent header style (font-size: 20px, font-weight: 700)
   3. Product covers background lighter, matching site background (#ffffff)
   4. Rating row: ★ 5.0 · 100+ продаж below version and above footer
   5. Version labels without parentheses
   ========================================================================== */

/* 1. Site background clean & bright #ffffff */
html,
body,
.site-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* 2. Product covers lighter, matching site background #ffffff */
.card-ks-art-cover,
.pdm-ks-cover-box,
.pdp-hero-media .pdm-ks-cover-box {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* 3. "Каталог" heading bigger & prominent */
.catalog-sidebar-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: none !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 16px 2px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* 4. Category list text slightly thicker (font-weight: 500) */
.cat-accordion-header,
.cat-accordion-header span,
.cat-accordion-header .cat-title-text,
.cat-all-pill,
.cat-all-pill span,
.cat-version-pill,
.cat-version-pill span,
.cat-accordion-title,
.btn-mob-open-drawer,
.btn-mob-open-drawer span {
  font-weight: 500 !important;
  font-size: 14px !important;
}

.cat-accordion-header.active,
.cat-accordion-header.active span,
.cat-all-pill.active,
.cat-all-pill.active span,
.cat-version-pill.active,
.cat-version-pill.active span {
  font-weight: 600 !important;
  color: #0284c7 !important;
}

/* 5. Rating row below version */
.card-ks-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12.5px !important;
  margin: 4px 0 10px 0 !important;
  color: #64748b !important;
  line-height: 1 !important;
}

.card-ks-star {
  color: #f59e0b !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
}

.card-ks-star i {
  font-size: 12px !important;
}

.card-ks-star .global-rating-val {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

.card-ks-dot {
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.card-ks-sales {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* 6. Card title wrap spacing */
.card-ks-title-wrap {
  margin: 0 0 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-height: 38px !important;
}

.paren-desktop {
  display: none !important;
}

/* Mobile card title & rating sizing for perfect fit */
@media (max-width: 640px) {
  .card-ks-title-l1 {
    font-size: 12.5px !important;
    letter-spacing: -0.2px !important;
  }
  .card-ks-title-l2 {
    font-size: 11.5px !important;
    letter-spacing: -0.1px !important;
  }
  .card-ks-rating-row {
    font-size: 11px !important;
    gap: 3px !important;
    margin: 3px 0 8px 0 !important;
  }
}

/* ==========================================================================
   V512 REFINEMENTS (USER REQUEST):
   1. Remove blue highlight and blue outline/border completely from catalog.
   2. When clicked, simply opens/drops down the list in a clean container 
      matching background color (#ffffff), exactly as shown in User Photo 2.
   3. Make the #f1f3f6 color on the site slightly lighter (#f6f8fa), matching User Photo 3 request.
   ========================================================================== */

/* 1. LIGHTER ELEMENT COLOR (#f6f8fa instead of #f1f3f6) */
.cat-accordion-header,
.cat-all-pill,
.catalog-filter-search input,
.catalog-sort-select,
.btn-mob-open-drawer {
  background: #f6f8fa !important;
  background-color: #f6f8fa !important;
}

.catalog-filter-search input:focus {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05) !important;
}

/* 2. COMPLETELY REMOVE BLUE HIGHLIGHT / OUTLINE / BORDER FROM ACCORDIONS & PILLS */
.cat-accordion-header,
.cat-all-pill,
.cat-version-pill,
.cat-accordion-header *,
.cat-all-pill *,
.cat-version-pill * {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.cat-accordion-header:focus,
.cat-accordion-header:active,
.cat-all-pill:focus,
.cat-all-pill:active,
.cat-version-pill:focus,
.cat-version-pill:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Neutral text colors - NO BLUE TEXT */
.cat-accordion-header,
.cat-accordion-header span,
.cat-accordion-header .cat-title-text,
.cat-all-pill,
.cat-all-pill span,
.cat-version-pill,
.cat-version-pill span,
.cat-accordion-title,
.btn-mob-open-drawer,
.btn-mob-open-drawer span {
  color: #0f172a !important;
}

/* Overriding any previous blue active states */
.cat-accordion-header.active,
.cat-accordion-header.active span,
.cat-all-pill.active,
.cat-all-pill.active span,
.cat-version-pill.active,
.cat-version-pill.active span {
  color: #0f172a !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3. CLOSED ACCORDION PILLS (Smooth rounded pills with lighter color) */
.cat-accordion-group {
  margin-bottom: 7px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.cat-accordion-header,
.cat-all-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: #f6f8fa !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.cat-accordion-header:hover,
.cat-all-pill:hover {
  background: #edf1f5 !important;
  color: #0f172a !important;
}

.cat-accordion-header .chevron-icon,
.cat-all-pill .chevron-icon {
  color: #4b5563 !important;
  font-size: 12px !important;
  transition: transform 0.25s ease, color 0.15s ease !important;
}

/* 4. OPEN ACCORDION CONTAINER (Clean White Box Matching Photo 2) */
.cat-accordion-group.open {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
  padding: 2px 2px 6px 2px !important;
}

.cat-accordion-group.open .cat-accordion-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #edf2f7 !important;
  border-radius: 0 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  padding: 10px 12px 11px 12px !important;
  margin-bottom: 3px !important;
  box-shadow: none !important;
  outline: none !important;
}

.cat-accordion-group.open .cat-accordion-header .chevron-icon {
  transform: rotate(180deg) !important;
  color: #334155 !important;
}

.cat-accordion-body {
  padding: 4px 6px !important;
  background: transparent !important;
}

/* 5. SUBITEMS IN DROPDOWN LIST (Photo 2 style: clean vertical list) */
.cat-version-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  text-align: left !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.cat-version-pill:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.cat-version-pill.active {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Mobile drawer consistency */
.mob-cat-item:active,
.mob-cat-item.active {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}


/* ==============================================================================
   SOFTZON BRAND LOGO COMPONENT
   ============================================================================== */
.brand-logo-img {
  height: 34px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
  display: block !important;
  user-select: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

.brand-group:hover .brand-logo-img {
  transform: translateY(-1px) scale(1.025) !important;
}

.brand-group:active .brand-logo-img {
  transform: scale(0.98) !important;
}

.brand-logo-light {
  display: block !important;
}
.brand-logo-dark {
  display: none !important;
}

[data-theme="dark"] .brand-logo-light,
body.dark-theme .brand-logo-light,
.dark .brand-logo-light {
  display: none !important;
}

[data-theme="dark"] .brand-logo-dark,
body.dark-theme .brand-logo-dark,
.dark .brand-logo-dark {
  display: block !important;
}


/* ==============================================================================
   SOFTZON MASTER HIGH-RES BRAND LOGO (EXACT USER SPECIFICATION)
   - Left: Beautiful glowing key icon matching site icons (#0284c7 / #38bdf8)
   - SOFT: Pure crisp white (#ffffff)
   - ZON: Vivid gradient blue matching site badges & accent icons
   - Obsidian pill capsule container for flawless contrast on any header
   ============================================================================== */
.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: #0f172a !important;
  padding: 5px 16px 5px 7px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  height: 42px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.brand-group:hover {
  transform: translateY(-1px) scale(1.025) !important;
  border-color: rgba(2, 132, 199, 0.55) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.28) !important;
}

.brand-group:active {
  transform: scale(0.98) !important;
}

.brand-group .brand-logo-badge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.5) !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.brand-group .brand-logo-badge i {
  color: #ffffff !important;
  font-size: 15px !important;
  transform: rotate(-15deg) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-group:hover .brand-logo-badge i {
  transform: rotate(-30deg) scale(1.15) !important;
}

.brand-group .brand-name {
  display: inline-flex !important;
  align-items: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.4px !important;
  white-space: nowrap !important;
}

.brand-group .brand-soft {
  color: #ffffff !important;
  font-weight: 850 !important;
  letter-spacing: -0.3px !important;
}

.brand-group .brand-zon {
  color: #38bdf8 !important;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  margin-left: 1px !important;
}

/* Mobile header sizing */
@media (max-width: 640px) {
  .brand-group {
    height: 38px !important;
    padding: 4px 12px 4px 6px !important;
    gap: 8px !important;
  }
  .brand-group .brand-logo-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
  }
  .brand-group .brand-logo-badge i {
    font-size: 13px !important;
  }
  .brand-group .brand-name {
    font-size: 18px !important;
  }
}


/* ==============================================================================
   SOFTZON MASTER BRAND LOGO (EXACT 1:1 REFERENCE MATCH TO PHOTO 2)
   - Background: 100% transparent (NO black background)
   - Badge: Royal blue squircle (#2563eb / rgb(37,99,235)) with white key icon
   - Font: Modern bold sans-serif, weight 850
   - Text color: Exact dark navy (#182b4d / rgb(24,43,77))
   - Dot: Royal blue square dot (#2563eb)
   ============================================================================== */
.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-group:hover {
  transform: translateY(-1px) scale(1.02) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-group:active {
  transform: scale(0.98) !important;
}

.brand-logo-badge {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  background: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  border: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-logo-badge i {
  color: #ffffff !important;
  font-size: 17px !important;
  transform: rotate(-15deg) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-group:hover .brand-logo-badge {
  background: #1d4ed8 !important;
}

.brand-group:hover .brand-logo-badge i {
  transform: rotate(-30deg) scale(1.15) !important;
  color: #ffffff !important;
}

.brand-name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  letter-spacing: -0.5px !important;
  color: #182b4d !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.brand-dot {
  color: #2563eb !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  margin-left: 1px !important;
  display: inline-block !important;
}

/* Dark theme support */
[data-theme="dark"] .brand-name,
body.dark-theme .brand-name {
  color: #f8fafc !important;
}

[data-theme="dark"] .brand-dot,
body.dark-theme .brand-dot {
  color: #38bdf8 !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .brand-group {
    gap: 8px !important;
  }
  .brand-logo-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
  }
  .brand-logo-badge i {
    font-size: 14px !important;
  }
  .brand-name {
    font-size: 20px !important;
  }
}


/* ==============================================================================
   SOFTZON MASTER BRAND LOGO (PERFECT 1:1 MATCH TO REFERENCE)
   - Large, bold, perfectly proportioned
   - NO dot
   - Exact text color #182b4d (rgb(24, 43, 77)) - not pure black
   - Font: Plus Jakarta Sans / Inter / system-ui, weight 850
   - Badge: #2563eb with white key icon
   - On hover: NO color change (stays #2563eb)
   ============================================================================== */
.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

.brand-group:hover,
.brand-group:active,
.brand-group:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.brand-group:active {
  transform: scale(0.98) !important;
}

/* Badge: Blue squircle #2563eb with white key */
.brand-logo-badge,
.brand-logo {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  background: #2563eb !important;
  background-color: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  border: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

.brand-logo-badge i,
.brand-logo i,
.brand-key-icon {
  color: #ffffff !important;
  font-size: 19px !important;
  transform: rotate(-15deg) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ON HOVER: DO NOT CHANGE BADGE COLOR! Stays #2563eb */
.brand-group:hover .brand-logo-badge,
.brand-group:active .brand-logo-badge {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4) !important;
}

.brand-group:hover .brand-logo-badge i,
.brand-group:hover .brand-logo i,
.brand-group:hover .brand-key-icon {
  transform: rotate(-30deg) scale(1.15) !important;
  color: #ffffff !important;
}

/* Text: softzon (Plus Jakarta Sans, size 27px, weight 850, color #182b4d) */
.brand-name,
.brand-title {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 850 !important;
  letter-spacing: -0.6px !important;
  color: #182b4d !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: lowercase !important;
  transition: color 0.2s ease !important;
}

.brand-group:hover .brand-name,
.brand-group:hover .brand-title,
.brand-group:active .brand-name,
.brand-group:active .brand-title {
  color: #182b4d !important;
}

/* NO DOT */
.brand-dot {
  display: none !important;
}

/* Dark theme support */
[data-theme="dark"] .brand-name,
body.dark-theme .brand-name,
[data-theme="dark"] .brand-title,
body.dark-theme .brand-title {
  color: #f8fafc !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .brand-group {
    gap: 9px !important;
    height: 38px !important;
  }
  .brand-logo-badge,
  .brand-logo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }
  .brand-logo-badge i,
  .brand-logo i,
  .brand-key-icon {
    font-size: 15px !important;
  }
  .brand-name,
  .brand-title {
    font-size: 22px !important;
  }
}


/* ==============================================================================
   SOFTZON MASTER BRAND LOGO (EXACT USER PROPORTIONS & COLOR)
   - Badge: Compact 35x35 squircle #2563eb with white key
   - Logo Text: Large, bold, thick 30px 'Plus Jakarta Sans', 'Inter', weight 900
   - Color: Exact #182b4d (rgb(24, 43, 77)) from reference image (not black)
   - No dot, no color shift on hover
   ============================================================================== */
.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

.brand-group:hover,
.brand-group:active,
.brand-group:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.brand-group:active {
  transform: scale(0.98) !important;
}

/* Badge: Compact 35x35px #2563eb */
.brand-logo-badge,
.brand-logo {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  border-radius: 10px !important;
  background: #2563eb !important;
  background-color: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28) !important;
  border: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

.brand-logo-badge i,
.brand-logo i,
.brand-key-icon {
  color: #ffffff !important;
  font-size: 16px !important;
  transform: rotate(-15deg) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ON HOVER: NO COLOR CHANGE! Stays #2563eb */
.brand-group:hover .brand-logo-badge,
.brand-group:active .brand-logo-badge {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38) !important;
}

.brand-group:hover .brand-logo-badge i,
.brand-group:hover .brand-logo i,
.brand-group:hover .brand-key-icon {
  transform: rotate(-30deg) scale(1.12) !important;
  color: #ffffff !important;
}

/* Text: softzon (Large 30px, Extra Bold 900, Exact Navy #182b4d) */
.brand-name,
.brand-title {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
  color: #182b4d !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: lowercase !important;
  transition: color 0.2s ease !important;
}

.brand-group:hover .brand-name,
.brand-group:hover .brand-title,
.brand-group:active .brand-name,
.brand-group:active .brand-title {
  color: #182b4d !important;
}

/* NO DOT */
.brand-dot {
  display: none !important;
}

/* Dark theme support */
[data-theme="dark"] .brand-name,
body.dark-theme .brand-name,
[data-theme="dark"] .brand-title,
body.dark-theme .brand-title {
  color: #f8fafc !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .brand-group {
    gap: 8px !important;
    height: 38px !important;
  }
  .brand-logo-badge,
  .brand-logo {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
  }
  .brand-logo-badge i,
  .brand-logo i,
  .brand-key-icon {
    font-size: 13px !important;
  }
  .brand-name,
  .brand-title {
    font-size: 24px !important;
  }
}


/* ==============================================================================
   SOFTZON MASTER BRAND LOGO (PERFECT 1:1 MATCH TO USER REQUIREMENTS)
   - Badge: #0284c7 (exact uploaded blue), size 38x38px, radius 11px
   - Key: 17px white key, stays #0284c7 on hover
   - Text: 30px 'Plus Jakarta Sans' weight 900, color #182b4d
   - Vertical alignment: dead-center with badge (transform: translateY(-1.5px))
   ============================================================================== */
.brand-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

.brand-group:hover,
.brand-group:active,
.brand-group:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.brand-logo-badge,
.brand-logo {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 11px !important;
  background: #0284c7 !important;
  background-color: #0284c7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35) !important;
  border: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-logo-badge i,
.brand-logo i,
.brand-key-icon {
  color: #ffffff !important;
  font-size: 17px !important;
  transform: rotate(-15deg) !important;
  display: inline-block !important;
}

/* NO COLOR CHANGE ON HOVER */
.brand-group:hover .brand-logo-badge,
.brand-group:hover .brand-logo,
.brand-group:active .brand-logo-badge,
.brand-group:active .brand-logo {
  background: #0284c7 !important;
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

.brand-group:hover .brand-logo-badge i,
.brand-group:hover .brand-logo i,
.brand-group:hover .brand-key-icon {
  transform: rotate(-30deg) scale(1.12) !important;
  color: #ffffff !important;
}

.brand-name,
.brand-title {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
  color: #182b4d !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: lowercase !important;
  transform: translateY(-1.5px) !important;
}

.brand-group:hover .brand-name,
.brand-group:hover .brand-title,
.brand-group:active .brand-name,
.brand-group:active .brand-title {
  color: #182b4d !important;
}

.brand-dot {
  display: none !important;
}

[data-theme="dark"] .brand-name,
body.dark-theme .brand-name,
[data-theme="dark"] .brand-title,
body.dark-theme .brand-title {
  color: #f8fafc !important;
}


/* ==============================================================================
   CART CHECKOUT HEADER SUBTITLE & COMPACT SIZING
   ============================================================================== */
.checkout-standalone-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}

.checkout-header-text-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.checkout-page-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.25 !important;
}

.checkout-page-subtitle,
.checkout-modal-subtitle {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.checkout-title-lg {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

[data-theme="dark"] .checkout-page-heading,
[data-theme="dark"] .checkout-title-lg,
body.dark-theme .checkout-page-heading,
body.dark-theme .checkout-title-lg {
  color: #f8fafc !important;
}

[data-theme="dark"] .checkout-page-subtitle,
[data-theme="dark"] .checkout-modal-subtitle,
body.dark-theme .checkout-page-subtitle,
body.dark-theme .checkout-modal-subtitle {
  color: #94a3b8 !important;
}

@media (max-width: 768px) {
  .checkout-standalone-header {
    gap: 11px !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
  .checkout-page-heading {
    font-size: 17.5px !important;
  }
  .checkout-page-subtitle {
    font-size: 12.5px !important;
  }
}

/* ==============================================================================
   LIGHT BLUE ICON BADGES (#e0f2fe background, #0284c7 icon)
   Exact match to uploaded history icon reference badge.
   LOGO BADGE (#brandLogoBadge, .brand-logo-badge) IS EXPLICITLY PRESERVED AS SOLID #0284c7!
   ============================================================================== */
.catalog-category-icon-badge,
.checkout-brand-icon,
.tokens-brand-icon,
.auth-header-icon,
.card-icon,
.card-icon.code,
.channel-icon-box.req-icon,
.channel-icon-box.tg-icon,
.channel-icon-box.mail-icon,
.checkout-pay-method-icon.is-card-sbp,
.cab-avatar-icon {
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
  box-shadow: none !important;
  border: none !important;
}

.catalog-category-icon-badge i,
.checkout-brand-icon i,
.tokens-brand-icon i,
.auth-header-icon i,
.card-icon i,
.channel-icon-box.req-icon i,
.channel-icon-box.tg-icon i,
.channel-icon-box.mail-icon i,
.checkout-pay-method-icon.is-card-sbp i,
.cab-avatar-icon i {
  color: #0284c7 !important;
}

[data-theme="dark"] .catalog-category-icon-badge,
[data-theme="dark"] .checkout-brand-icon,
[data-theme="dark"] .tokens-brand-icon,
[data-theme="dark"] .auth-header-icon,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .card-icon.code,
[data-theme="dark"] .channel-icon-box.req-icon,
[data-theme="dark"] .channel-icon-box.tg-icon,
[data-theme="dark"] .checkout-pay-method-icon.is-card-sbp,
[data-theme="dark"] .cab-avatar-icon,
body.dark-theme .catalog-category-icon-badge,
body.dark-theme .checkout-brand-icon,
body.dark-theme .tokens-brand-icon,
body.dark-theme .auth-header-icon,
body.dark-theme .card-icon {
  background: rgba(2, 132, 199, 0.16) !important;
  background-color: rgba(2, 132, 199, 0.16) !important;
  color: #38bdf8 !important;
  box-shadow: none !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

[data-theme="dark"] .catalog-category-icon-badge i,
[data-theme="dark"] .checkout-brand-icon i,
[data-theme="dark"] .tokens-brand-icon i,
[data-theme="dark"] .auth-header-icon i,
[data-theme="dark"] .card-icon i,
body.dark-theme .catalog-category-icon-badge i,
body.dark-theme .checkout-brand-icon i,
body.dark-theme .tokens-brand-icon i,
body.dark-theme .auth-header-icon i {
  color: #38bdf8 !important;
}

/* REINFORCE BRAND LOGO BADGE SOLID #0284c7 (PRESERVED) */
#brandLogoBadge,
.brand-group .brand-logo-badge,
.brand-logo-badge {
  background: #0284c7 !important;
  background-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35) !important;
}

#brandLogoBadge i,
.brand-group .brand-logo-badge i,
.brand-logo-badge i {
  color: #ffffff !important;
}


/* ==============================================================================
   UNIFIED PAGE HEADERS: HISTORY, CHECKOUT, ACTIVATION (EXACT 1:1 SIZING MATCH)
   - Badge: 44x44px, radius 10px, background #e0f2fe, icon #0284c7 (font-size 20px)
   - Title: font-size 18px !important, font-weight 800, color #0f172a, margin 0 0 4px 0, line-height 1.2
   - Subtitle: font-size 13px !important, font-weight 400, color #64748b, margin 0, line-height 1.4
   - Layout: flex row, gap 14px, align-items center, text-align left
   ============================================================================== */
.checkout-standalone-header,
.act-card-header .act-header-title-group,
#pageHistory .card-title-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.checkout-standalone-header {
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}

.act-card-header {
  text-align: left !important;
  margin-bottom: 24px !important;
}

/* Badges */
.checkout-brand-icon,
.act-header-icon-badge,
#pageHistory .card-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 10px !important;
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.checkout-brand-icon i,
.act-header-icon-badge i,
#pageHistory .card-icon i {
  color: #0284c7 !important;
  font-size: 20px !important;
}

/* Titles */
.checkout-page-heading,
.act-main-title,
#pageHistory .card-title,
#checkoutProductModalTitle {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;
  text-align: left !important;
}

/* Subtitles */
.checkout-page-subtitle,
.act-main-desc,
#pageHistory .card-desc,
.checkout-modal-subtitle {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Dark Theme Overrides */
[data-theme="dark"] .checkout-brand-icon,
[data-theme="dark"] .act-header-icon-badge,
[data-theme="dark"] #pageHistory .card-icon,
body.dark-theme .checkout-brand-icon,
body.dark-theme .act-header-icon-badge,
body.dark-theme #pageHistory .card-icon {
  background: rgba(2, 132, 199, 0.16) !important;
  background-color: rgba(2, 132, 199, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

[data-theme="dark"] .checkout-brand-icon i,
[data-theme="dark"] .act-header-icon-badge i,
[data-theme="dark"] #pageHistory .card-icon i {
  color: #38bdf8 !important;
}

[data-theme="dark"] .checkout-page-heading,
[data-theme="dark"] .act-main-title,
[data-theme="dark"] #pageHistory .card-title,
[data-theme="dark"] #checkoutProductModalTitle,
body.dark-theme .checkout-page-heading,
body.dark-theme .act-main-title,
body.dark-theme #pageHistory .card-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .checkout-page-subtitle,
[data-theme="dark"] .act-main-desc,
[data-theme="dark"] #pageHistory .card-desc,
[data-theme="dark"] .checkout-modal-subtitle,
body.dark-theme .checkout-page-subtitle,
body.dark-theme .act-main-desc,
body.dark-theme #pageHistory .card-desc {
  color: #94a3b8 !important;
}

/* Mobile responsive match */
@media (max-width: 768px) {
  .checkout-standalone-header,
  .act-card-header .act-header-title-group,
  #pageHistory .card-title-group {
    gap: 12px !important;
    text-align: left !important;
  }
  .act-card-header {
    text-align: left !important;
    margin-bottom: 16px !important;
  }
  .checkout-page-heading,
  .act-main-title,
  #pageHistory .card-title,
  #checkoutProductModalTitle {
    font-size: 16px !important;
    text-align: left !important;
  }
  .checkout-page-subtitle,
  .act-main-desc,
  #pageHistory .card-desc,
  .checkout-modal-subtitle {
    font-size: 12px !important;
    text-align: left !important;
  }
  .checkout-brand-icon,
  .act-header-icon-badge,
  #pageHistory .card-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 17px !important;
  }
  .checkout-brand-icon i,
  .act-header-icon-badge i,
  #pageHistory .card-icon i {
    font-size: 17px !important;
  }
}


/* ==============================================================================
   UNIFIED PAGE HEADERS: HISTORY, CHECKOUT, ACTIVATION (REFINED THIN SUBTITLES)
   - Badge: 44x44px, radius 10px, background #e0f2fe, icon #0284c7 (font-size 20px)
   - Title: font-size 18px !important, font-weight 800, color #0f172a, margin 0 0 4px 0, line-height 1.2
   - Subtitle: font-size 12px !important, font-weight 400 (thin clean font as in original history), color #64748b
   - Activation CID subtitle: strict single line (white-space: nowrap !important, no wrapping)
   - Activation CID icon: fa-globe (browser / planet round icon)
   ============================================================================== */
.checkout-standalone-header,
.act-card-header .act-header-title-group,
#pageHistory .card-title-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.checkout-standalone-header {
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}

.act-card-header {
  text-align: left !important;
  margin-bottom: 24px !important;
}

/* Badges */
.checkout-brand-icon,
.act-header-icon-badge,
#pageHistory .card-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 10px !important;
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.checkout-brand-icon i,
.act-header-icon-badge i,
#pageHistory .card-icon i {
  color: #0284c7 !important;
  font-size: 20px !important;
}

/* Titles */
.checkout-page-heading,
.act-main-title,
#pageHistory .card-title,
#checkoutProductModalTitle {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;
  text-align: left !important;
}

/* Subtitles: thin, clean system font, exactly matching original history & "Очистить корзину" */
.checkout-page-subtitle,
.act-main-desc,
#pageHistory .card-desc,
.checkout-modal-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-align: left !important;
}

/* Strict single line without wrapping for CID activation */
.act-main-desc {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Dark Theme Overrides */
[data-theme="dark"] .checkout-brand-icon,
[data-theme="dark"] .act-header-icon-badge,
[data-theme="dark"] #pageHistory .card-icon,
body.dark-theme .checkout-brand-icon,
body.dark-theme .act-header-icon-badge,
body.dark-theme #pageHistory .card-icon {
  background: rgba(2, 132, 199, 0.16) !important;
  background-color: rgba(2, 132, 199, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

[data-theme="dark"] .checkout-brand-icon i,
[data-theme="dark"] .act-header-icon-badge i,
[data-theme="dark"] #pageHistory .card-icon i {
  color: #38bdf8 !important;
}

[data-theme="dark"] .checkout-page-heading,
[data-theme="dark"] .act-main-title,
[data-theme="dark"] #pageHistory .card-title,
[data-theme="dark"] #checkoutProductModalTitle,
body.dark-theme .checkout-page-heading,
body.dark-theme .act-main-title,
body.dark-theme #pageHistory .card-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .checkout-page-subtitle,
[data-theme="dark"] .act-main-desc,
[data-theme="dark"] #pageHistory .card-desc,
[data-theme="dark"] .checkout-modal-subtitle,
body.dark-theme .checkout-page-subtitle,
body.dark-theme .act-main-desc,
body.dark-theme #pageHistory .card-desc {
  color: #94a3b8 !important;
}

/* Mobile responsive match */
@media (max-width: 768px) {
  .checkout-standalone-header,
  .act-card-header .act-header-title-group,
  #pageHistory .card-title-group {
    gap: 11px !important;
    text-align: left !important;
  }
  .act-card-header {
    text-align: left !important;
    margin-bottom: 14px !important;
  }
  .checkout-page-heading,
  .act-main-title,
  #pageHistory .card-title,
  #checkoutProductModalTitle {
    font-size: 16px !important;
    text-align: left !important;
  }
  .checkout-page-subtitle,
  .act-main-desc,
  #pageHistory .card-desc,
  .checkout-modal-subtitle {
    font-size: 11.5px !important;
    text-align: left !important;
  }
  .checkout-brand-icon,
  .act-header-icon-badge,
  #pageHistory .card-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 17px !important;
  }
  .checkout-brand-icon i,
  .act-header-icon-badge i,
  #pageHistory .card-icon i {
    font-size: 17px !important;
  }
}


/* ==============================================================================
   COMPLETELY STATIC BRAND LOGO (NO GLOW, NO HOVER MOVEMENT/ROTATION/SCALE)
   - Badge: #0284c7, 38x38px, radius 11px, box-shadow: NONE, filter: NONE
   - Icon: white key rotated -15deg, NO ROTATION on hover
   - Text: softzon 30px, #182b4d, translateY(-1.5px), NO COLOR CHANGE on hover
   ============================================================================== */
.brand-group,
#brandGroup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  transform: none !important;
  transition: none !important;
}

.brand-group:hover,
.brand-group:active,
.brand-group:focus,
#brandGroup:hover,
#brandGroup:active,
#brandGroup:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  transform: none !important;
}

.brand-logo-badge,
.brand-logo,
#brandLogoBadge {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 11px !important;
  background: #0284c7 !important;
  background-color: #0284c7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}

.brand-group:hover .brand-logo-badge,
.brand-group:hover .brand-logo,
.brand-group:active .brand-logo-badge,
.brand-group:active .brand-logo,
#brandGroup:hover #brandLogoBadge,
#brandGroup:active #brandLogoBadge,
#brandLogoBadge:hover {
  background: #0284c7 !important;
  background-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.brand-logo-badge i,
.brand-logo i,
.brand-key-icon,
#brandLogoBadge i {
  color: #ffffff !important;
  font-size: 17px !important;
  transform: rotate(-15deg) !important;
  display: inline-block !important;
  transition: none !important;
}

.brand-group:hover .brand-logo-badge i,
.brand-group:hover .brand-logo i,
.brand-group:hover .brand-key-icon,
.brand-group:active .brand-logo-badge i,
#brandGroup:hover #brandLogoBadge i,
#brandGroup:active #brandLogoBadge i {
  transform: rotate(-15deg) !important;
  color: #ffffff !important;
  transition: none !important;
}

.brand-name,
.brand-title,
#brandNameText {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
  color: #182b4d !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: lowercase !important;
  transform: translateY(-1.5px) !important;
  transition: none !important;
}

.brand-group:hover .brand-name,
.brand-group:hover .brand-title,
.brand-group:active .brand-name,
.brand-group:active .brand-title,
#brandGroup:hover #brandNameText,
#brandGroup:active #brandNameText {
  color: #182b4d !important;
  transform: translateY(-1.5px) !important;
}

[data-theme="dark"] .brand-name,
body.dark-theme .brand-name,
[data-theme="dark"] #brandNameText,
body.dark-theme #brandNameText {
  color: #f8fafc !important;
}


/* ==============================================================================
   DEAD-CENTER HEADER NAVIGATION (CSS GRID 1fr auto 1fr)
   - Left: #brandGroup (grid-column: 1, justify-self: start)
   - Center: .header-center-nav (grid-column: 2, justify-self: center) -> Mathematically Dead Center!
   - Right: .header-actions-right (grid-column: 3, justify-self: end)
   ============================================================================== */
@media (min-width: 769px) {
  .site-header .container,
  .site-header .header-container,
  .header-container {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    height: 68px !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  .header-menu-toggle-btn {
    display: none !important;
  }

  #brandGroup,
  .brand-group {
    grid-column: 1 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .header-center-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-actions-right {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin: 0 !important;
  }
}

/* ==============================================================================
   CART PERIMETER BORDER: MATCHING ACTIVATION CID (1px solid #e2e8f0, radius 14px)
   ============================================================================== */
.cart-empty-state {
  padding: 44px 20px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin: 12px 0 20px 0 !important;
  transition: all 0.25s ease !important;
}

[data-theme="dark"] .cart-empty-state,
body.dark-theme .cart-empty-state {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ==============================================================================
   UNIFIED TOP DISTANCE: ACTIVATION CID, CART/CHECKOUT, TOKENS PURCHASE (28px)
   ============================================================================== */
.site-header + .container,
body > .container {
  padding-top: 28px !important;
  padding-bottom: 48px !important;
}

.activation-layout-new,
.checkout-standalone-page-wrap,
.tokens-standalone-wrap,
.catalog-layout,
#pageHistory .card,
.card-keysoft-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.checkout-standalone-header,
.tokens-standalone-header {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

@media (max-width: 768px) {
  .site-header + .container,
  body > .container {
    padding-top: 18px !important;
  }
}


/* ==============================================================================
   CHECKOUT OVERALL FRAME MATCHING ACTIVATION CID (.act-card-left style)
   ============================================================================== */
.cart-left-col.act-card-left,
#checkoutLeftCard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .cart-left-col.act-card-left,
[data-theme="dark"] #checkoutLeftCard {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.cart-left-col.act-card-left .act-card-header {
  margin-bottom: 8px !important;
}


/* ==============================================================================
   CHECKOUT OVERALL FRAME MATCHING ACTIVATION CID (.act-card-left style)
   ============================================================================== */
.cart-left-col.act-card-left,
#checkoutLeftCard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .cart-left-col.act-card-left,
[data-theme="dark"] #checkoutLeftCard {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.cart-left-col.act-card-left .act-card-header {
  margin-bottom: 8px !important;
}

#checkoutLeftCard .cart-empty-state {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 36px 16px !important;
}

[data-theme="dark"] #checkoutLeftCard .cart-empty-state {
  background: #1e293b !important;
  border-color: #334155 !important;
}


/* ==============================================================================
   MOBILE HEADER & ACTIVATION & SINGLE-LINE TITLES FIXES (MAX-WIDTH: 768px)
   ============================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  /* 1. Mobile Header (Spacious 64px, exact match to Photo 2 softes reference) */
  .site-header {
    height: 64px !important;
    min-height: 64px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .site-header .container,
  .site-header .header-container,
  .header-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
  }

  /* Hamburger Menu Button */
  .header-menu-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
  }

  /* Logo: Shifted directly to the left next to hamburger button */
  #brandGroup,
  .brand-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 auto 0 0 !important; /* Pushes remaining space to right */
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Logo icon badge: same size as left icon (36x36px) */
  .brand-logo-badge,
  .brand-logo,
  #brandLogoBadge {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 10px !important;
    background: #0284c7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .brand-logo-badge i,
  .brand-logo i,
  #brandLogoBadge i {
    font-size: 15px !important;
    color: #ffffff !important;
  }

  /* Logo text: compact 22px, bold lowercase */
  .brand-name,
  .brand-title,
  #brandNameText {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #182b4d !important;
    transform: translateY(-1px) !important;
    line-height: 1 !important;
  }

  /* Strictly HIDE search button from header on mobile */
  .header-search-icon-btn,
  #openSearchModalBtn {
    display: none !important;
  }

  /* Strictly HIDE center nav on mobile */
  .header-center-nav {
    display: none !important;
  }

  /* Right Action items: Cart & Profile */
  .header-actions-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  #headerTopCartBtn,
  .header-cart-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0284c7 !important;
    font-size: 16px !important;
    position: relative !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }

  .header-login-btn,
  .header-cabinet-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0284c7 !important;
    font-size: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }

  /* 2. Container & Page Top Padding on Mobile */
  .site-header + .container,
  body > .container,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 16px !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
  }

  /* 3. Activation CID on Mobile: Strictly stay inside viewport, no horizontal overflow */
  .activation-layout-new {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .act-card-left,
  .act-card-right {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .act-mode-selector {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    padding: 4px !important;
    margin-bottom: 16px !important;
  }

  .act-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .act-mode-btn-text {
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
  }

  .act-mode-btn-text .mode-line1 {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .act-mode-btn-text .mode-line2 {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .act-key-input,
  .act-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13.5px !important;
    padding: 10px 12px !important;
  }

  .act-key-btns-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-act-check-key,
  .btn-act-buy-key {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* 4. Headings & Subtitles on Mobile: STRICTLY 1 LINE (No Wrapping onto a 2nd line) */
  .act-main-title,
  .checkout-page-heading,
  .card-title,
  .tokens-page-heading {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin: 0 0 3px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .act-main-desc,
  .checkout-page-subtitle,
  .card-desc,
  .tokens-page-sub {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: block !important;
  }

  .card-title-group > div:last-child,
  .act-header-title-group > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  /* Checkout on Mobile */
  .checkout-standalone-page-wrap {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cart-checkout-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cart-left-col.act-card-left,
  #checkoutLeftCard,
  .order-summary-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  /* Tokens on Mobile */
  .tokens-standalone-wrap {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==============================================================================
   54-FZ ELECTRONIC FISCAL RECEIPT BADGE / BOX
   ============================================================================== */
.checkout-fiscal-receipt-box {
  margin-top: 14px !important;
  padding: 12px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

[data-theme="dark"] .checkout-fiscal-receipt-box,
body.dark-theme .checkout-fiscal-receipt-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.fiscal-receipt-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

[data-theme="dark"] .fiscal-receipt-header,
body.dark-theme .fiscal-receipt-header {
  color: #f8fafc !important;
}

.fiscal-receipt-header i {
  color: #0284c7 !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

.fiscal-receipt-desc {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  margin: 5px 0 0 0 !important;
  font-weight: 400 !important;
}

[data-theme="dark"] .fiscal-receipt-desc,
body.dark-theme .fiscal-receipt-desc {
  color: #94a3b8 !important;
}

/* Payment Method Name Responsive adjustments */
.checkout-pay-method-name,
.pay-pill-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

[data-theme="dark"] .checkout-pay-method-name,
[data-theme="dark"] .pay-pill-name,
body.dark-theme .checkout-pay-method-name,
body.dark-theme .pay-pill-name {
  color: #f8fafc !important;
}

@media (max-width: 768px) {
  .checkout-pay-method-name,
  .pay-pill-name {
    font-size: 12.5px !important;
  }
  .fiscal-receipt-header {
    font-size: 12.5px !important;
  }
  .fiscal-receipt-desc {
    font-size: 11px !important;
  }
}


/* ==============================================================================
   CHECKOUT EMAIL HINT & LEGAL DISCLAIMER BOX
   ============================================================================== */
.checkout-email-hint {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  margin: 6px 0 0 0 !important;
  font-weight: 400 !important;
}

[data-theme="dark"] .checkout-email-hint,
body.dark-theme .checkout-email-hint {
  color: #94a3b8 !important;
}

.checkout-legal-notice-box {
  margin-top: 14px !important;
  padding: 10px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .checkout-legal-notice-box,
body.dark-theme .checkout-legal-notice-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.checkout-legal-notice-text {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

[data-theme="dark"] .checkout-legal-notice-text,
body.dark-theme .checkout-legal-notice-text {
  color: #94a3b8 !important;
}

.checkout-legal-notice-text a {
  color: #0284c7 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.checkout-legal-notice-text a:hover {
  color: #0369a1 !important;
}


/* ==============================================================================
   REFINEMENTS V550: TOKENS (2 COLS, NARROWER), HISTORY (CARD WIDTH),
   MOBILE BALANCE BOX (NO OVERFLOW/CLIPPING), CHECKOUT HEADING POSITION
   ============================================================================== */

/* 1. Tokens Page: Narrower Container & 2 Cards Per Row */
.tokens-standalone-wrap {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 24px 16px 40px 16px !important;
  box-sizing: border-box !important;
}

.pricing-grid.tokens-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 640px) {
  .tokens-standalone-wrap {
    max-width: 100% !important;
    padding: 16px 12px 30px 12px !important;
  }
  .pricing-grid.tokens-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .package-card {
    padding: 12px 10px !important;
  }
  .package-card .package-name {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .package-card .package-price {
    font-size: 16px !important;
  }
  .package-card .package-unit {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }
}

/* 2. History Page: Wider Card so CID fits on one line */
#pageHistory .card {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. Mobile Activation Balance Box: Balanced Widths, No Squishing or Clipping */
@media (max-width: 640px) {
  .act-tokens-simple-box,
  #actTokensInfoContainer.act-tokens-simple-box,
  #activationCardLeft.mode-tokens .act-tokens-simple-box,
  #actTokensInfoContainer.is-visible {
    padding: 8px 12px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .act-tokens-sec-label {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .act-tokens-simple-label {
    font-size: 13px !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }

  .act-tokens-plain-icon,
  .act-tokens-sec-label .fa-coins {
    font-size: 14px !important;
    color: #0284c7 !important;
    flex-shrink: 0 !important;
  }

  .act-tokens-v-sep {
    width: 1px !important;
    height: 22px !important;
    background: #e2e8f0 !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
  }

  [data-theme="dark"] .act-tokens-v-sep {
    background: #334155 !important;
  }

  .act-tokens-sec-count {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    padding: 0 4px !important;
    font-size: 12px !important;
  }

  .act-tokens-count-val,
  .act-tokens-count-val strong,
  #actTokensBalanceDigits,
  .act-tokens-count-text {
    font-size: 12px !important;
  }

  .act-tokens-sec-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }

  .btn-buy-tokens-simple {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    height: 30px !important;
    white-space: nowrap !important;
    gap: 4px !important;
  }
}

/* 4. Checkout Page Header (Above Summary and Payment Form) */
.checkout-page-header {
  margin-bottom: 20px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .checkout-page-header {
    margin-bottom: 14px !important;
  }
}

/* 5. Password Visibility & Forgot Password Buttons */
.btn-toggle-password {
  transition: color 0.15s ease !important;
}
.btn-toggle-password:hover {
  color: #0284c7 !important;
}
.btn-forgot-password {
  transition: color 0.15s ease !important;
}
.btn-forgot-password:hover {
  color: #0369a1 !important;
}


/* ==============================================================================
   REFINEMENTS V551: CHECKOUT HEADING IN RIGHT WINDOW ABOVE PAYMENT TEXT
   ============================================================================== */
.order-summary-card .checkout-page-header {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  width: 100% !important;
}

[data-theme="dark"] .order-summary-card .checkout-page-header {
  border-bottom-color: #334155 !important;
}

.order-summary-card .act-main-title {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .order-summary-card .act-main-title {
  color: #f8fafc !important;
}

.order-summary-card .act-main-desc {
  font-size: 11px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .order-summary-card .act-main-desc {
  color: #94a3b8 !important;
}

.order-summary-card .act-header-icon-badge {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  font-size: 17px !important;
}

@media (min-width: 769px) {
  .cart-checkout-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(350px, 390px) !important;
    gap: 22px !important;
    align-items: start !important;
    margin-top: 0 !important;
  }
}


/* ==============================================================================
   REFINEMENTS V560:
   1. Checkout: Header moved higher up with semi-transparent divider matching CID activation
   2. Tokens: Returned coin icon (light blue badge #e0f2fe / #0284c7 icon), moved window higher with free bottom space matching CID
   3. Auth modal: Privacy notice wrapped neatly to second line
   ============================================================================== */

/* 1. Checkout Page: Heading higher & semi-transparent divider */
#pageCheckout {
  padding-top: 10px !important;
  margin-top: 0 !important;
}

.checkout-standalone-page-wrap {
  padding-top: 6px !important;
  margin-top: 0 !important;
}

.order-summary-card {
  padding: 16px 22px 20px 22px !important;
  gap: 12px !important;
}

.order-summary-card .checkout-page-header {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  padding-bottom: 14px !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  width: 100% !important;
}

[data-theme="dark"] .order-summary-card .checkout-page-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.order-summary-top {
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Tokens Page: Window higher, coin icon badge restored, free bottom space like CID */
#pageTokens {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.tokens-standalone-wrap {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 0 16px 20px 16px !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
}

.tokens-standalone-card {
  padding: 18px 22px !important;
  border-radius: 14px !important;
}

.tokens-standalone-card .tokens-standalone-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding: 0 0 20px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

[data-theme="dark"] .tokens-standalone-card .tokens-standalone-header,
body.dark-theme .tokens-standalone-card .tokens-standalone-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.tokens-standalone-card .tokens-brand-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.tokens-standalone-card .tokens-brand-icon i {
  color: #0284c7 !important;
  font-size: 18px !important;
}

[data-theme="dark"] .tokens-standalone-card .tokens-brand-icon {
  background: rgba(2, 132, 199, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .tokens-standalone-card .tokens-brand-icon i {
  color: #38bdf8 !important;
}

.tokens-standalone-card .tokens-page-heading {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .tokens-standalone-card .tokens-page-heading {
  color: #f8fafc !important;
}

.tokens-standalone-card .tokens-page-sub {
  font-size: 11px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .tokens-standalone-card .tokens-page-sub {
  color: #94a3b8 !important;
}

.tokens-standalone-card .pricing-grid.tokens-grid-6 {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.tokens-standalone-card .package-card {
  padding: 8px 10px !important;
}

.tokens-standalone-card .package-card .package-name {
  font-size: 12.5px !important;
}

.tokens-standalone-card .package-card .package-price {
  font-size: 15.5px !important;
}

.tokens-standalone-card .package-card .package-unit {
  font-size: 10.5px !important;
}

#pageCustomTokensBar.custom-tokens-bar {
  margin-top: 10px !important;
  padding: 10px 14px !important;
}

.tokens-pay-btn-wrap {
  margin-top: 12px !important;
}

#pageTokensPayBtn {
  padding: 11px 16px !important;
  font-size: 15px !important;
}

@media (max-width: 768px) {
  #pageCheckout {
    padding-top: 10px !important;
  }
  .checkout-standalone-page-wrap {
    padding-top: 6px !important;
  }
  .tokens-standalone-wrap {
    padding-top: 0 !important;
  }
}


/* ==============================================================================
   REFINEMENTS V553: ABOUT STORE PAGE & CARDS (REQUISITES & 54-FZ SHOWCASE)
   ============================================================================== */

/* Hero Section */
.about-hero-section {
  margin-bottom: 24px !important;
  text-align: left !important;
}

.about-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.1px !important;
}

[data-theme="dark"] .about-eyebrow-badge {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #38bdf8 !important;
}

.about-hero-heading {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.4px !important;
}

[data-theme="dark"] .about-hero-heading {
  color: #f8fafc !important;
}

.about-hero-paragraph {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
  max-width: 860px !important;
}

[data-theme="dark"] .about-hero-paragraph {
  color: #94a3b8 !important;
}

/* Two Cards Grid */
.about-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 20px !important;
}

@media (max-width: 768px) {
  .about-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .about-hero-heading {
    font-size: 20px !important;
  }
  .about-hero-paragraph {
    font-size: 13.5px !important;
  }
}

.about-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .about-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.about-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.about-card-icon-box {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.req-icon-box {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.law-icon-box {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

[data-theme="dark"] .req-icon-box {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .law-icon-box {
  background: rgba(22, 163, 74, 0.2) !important;
  color: #4ade80 !important;
}

.about-tag {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  margin-bottom: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.tag-blue {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.tag-green {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
}

[data-theme="dark"] .tag-blue {
  background: rgba(2, 132, 199, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .tag-green {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
}

.about-window-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .about-window-title {
  color: #f8fafc !important;
}

/* Left Window: Requisites Table */
.about-req-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  font-size: 13px !important;
}

.about-req-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px dashed #f1f5f9 !important;
}

[data-theme="dark"] .about-req-row {
  border-bottom-color: #334155 !important;
}

.about-req-k {
  color: #64748b !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
  font-size: 12.5px !important;
}

[data-theme="dark"] .about-req-k {
  color: #94a3b8 !important;
}

.about-req-v {
  color: #0f172a !important;
  font-weight: 600 !important;
  text-align: right !important;
  font-size: 12.5px !important;
  word-break: normal !important;
}

[data-theme="dark"] .about-req-v {
  color: #f8fafc !important;
}

.highlight-acc {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .highlight-acc {
  color: #38bdf8 !important;
}

/* Right Window: Legal Description & Fiscal Receipt Showcase */
.about-law-text {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  margin: 0 0 16px 0 !important;
}

[data-theme="dark"] .about-law-text {
  color: #94a3b8 !important;
}

.fiscal-receipt-showcase {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: auto !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .fiscal-receipt-showcase {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.receipt-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="dark"] .receipt-header-row {
  border-bottom-color: #334155 !important;
}

.receipt-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

[data-theme="dark"] .receipt-title-wrap {
  color: #f8fafc !important;
}

.receipt-title-wrap i {
  color: #0284c7 !important;
}

.receipt-fns-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #ecfdf5 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

[data-theme="dark"] .receipt-fns-pill {
  background: rgba(22, 163, 74, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
}

.receipt-meta-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  font-size: 11.5px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 480px) {
  .receipt-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.r-lbl {
  display: block !important;
  font-size: 10.5px !important;
  color: #64748b !important;
  margin-bottom: 2px !important;
}

[data-theme="dark"] .r-lbl {
  color: #94a3b8 !important;
}

.r-val {
  display: block !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .r-val {
  color: #f8fafc !important;
}

.receipt-footer-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-top: 10px !important;
  border-top: 1px dashed #cbd5e1 !important;
}

[data-theme="dark"] .receipt-footer-row {
  border-top-color: #334155 !important;
}

.receipt-qr-illustration {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  color: #0f172a !important;
}

[data-theme="dark"] .receipt-qr-illustration {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

.receipt-badge-info strong {
  display: block !important;
  font-size: 12px !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .receipt-badge-info strong {
  color: #f8fafc !important;
}

.receipt-badge-info p {
  margin: 0 !important;
  font-size: 10.5px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

[data-theme="dark"] .receipt-badge-info p {
  color: #94a3b8 !important;
}

@media (max-width: 520px) {
  .about-card {
    padding: 18px 16px !important;
  }
  .about-req-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding-bottom: 7px !important;
  }
  .about-req-k {
    font-size: 11.5px !important;
  }
  .about-req-v {
    text-align: left !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-break: normal !important;
  }
}


/* Payment Security Box inside About Page Right Card */
.about-payment-security-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin-top: 14px !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .about-payment-security-box {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(56, 189, 248, 0.2) !important;
}

.payment-security-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.payment-security-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-theme="dark"] .payment-security-icon {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

.payment-security-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
}

[data-theme="dark"] .payment-security-title {
  color: #f8fafc !important;
}

.payment-security-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.pay-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.pay-pill svg {
  color: #16a34a !important;
}

[data-theme="dark"] .pay-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .pay-pill svg {
  color: #4ade80 !important;
}

.payment-security-desc {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  margin: 0 !important;
}

[data-theme="dark"] .payment-security-desc {
  color: #94a3b8 !important;
}

/* Mobile: page header subtitles — keep in one line */
@media (max-width: 600px) {
  .act-main-desc,
  .tokens-page-sub,
  .checkout-modal-subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* History page header subtitle */
  #pageHistory .act-main-desc,
  #pageTokens .tokens-page-sub {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ==============================================================================
   STANDARDIZED MOBILE PAGE HEADERS & SPACING (V562)
   ============================================================================== */

/* 1. Desktop: completely hide mobile-only headers */
.mob-only-header {
  display: none !important;
}

/* 2. Mobile devices (phones & small tablets) */
@media (max-width: 768px) {
  /* Zero out container top padding so margin on header row controls the top distance directly */
  .site-header + .container,
  body > .container,
  .container {
    padding-top: 0 !important;
  }

  /* Show outer mobile header row */
  .catalog-header-row,
  .mob-only-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 20px 0 20px 0 !important; /* EXACTLY EQUAL: 20px ABOVE, 20px BELOW */
    padding: 0 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Elements immediately below header row reset top margin to preserve exact 20px gap */
  .mobile-catalog-bar,
  #mobileCatalogBar,
  .tokens-standalone-card,
  .checkout-standalone-card,
  #activationCardLeft,
  #pageHistory .card,
  .cabinet-layout-grid {
    margin-top: 0 !important;
  }

  /* Catalog header badge & title standard styles */
  .mob-only-header .catalog-category-icon-badge {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  [data-theme="dark"] .mob-only-header .catalog-category-icon-badge {
    background: rgba(2, 132, 199, 0.22) !important;
    color: #38bdf8 !important;
  }

  .mob-only-header .catalog-page-title,
  .catalog-page-title,
  #catalogSectionTitle,
  .auth-header-text h2,
  .tokens-page-heading,
  .checkout-page-heading,
  #pageAuth h2 {
    font-size: 22px !important;
    font-weight: 650 !important;
    color: #2f2f35 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  [data-theme="dark"] .mob-only-header .catalog-page-title {
    color: #f8fafc !important;
  }

  /* History page header: fit "История активаций и покупок" in one line without wrapping */
  #pageHistory .mob-only-header .catalog-page-title {
    font-size: clamp(15px, 4.4vw, 18px) !important;
    white-space: nowrap !important;
  }

  /* Hide inner redundant headers with descriptions on mobile */
  .tokens-standalone-card .tokens-standalone-header,
  .checkout-page-header,
  #pageCheckout .act-card-header,
  #pageActivation #activationCardLeft > .act-card-header,
  #pageHistory .card > .card-header {
    display: none !important;
  }

  /* Unified top spacing across all pages */
  #pageStore,
  #pageCheckout,
  .checkout-standalone-page-wrap,
  #pageTokens,
  .tokens-standalone-wrap,
  #pageActivation,
  .activation-layout-new,
  #pageHistory,
  #pageCabinet,
  #pageLegal {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Page Auth (Login/Register): Move higher to match catalog distance (20px), keep title & desc inside window */
  #pageAuth {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #pageAuth .card,
  #pageAuth .glass-card,
  #pageAuth .auth-container {
    margin-top: 20px !important;
    margin-bottom: 24px !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }

  /* Tokens Page Mobile Polish */
  .tokens-standalone-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .tokens-standalone-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 14px 18px 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  }

  [data-theme="dark"] .tokens-standalone-card {
    background: #1e293b !important;
    border-color: #334155 !important;
  }

  .tokens-standalone-card .pricing-grid.tokens-grid-6 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .tokens-standalone-card .package-card {
    padding: 10px 10px !important;
    border-radius: 10px !important;
    position: relative !important;
  }

  .tokens-standalone-card .package-card input[type="radio"] {
    top: 10px !important;
    right: 10px !important;
  }

  .tokens-standalone-card .package-card .package-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  .tokens-standalone-card .package-card .package-price {
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .tokens-standalone-card .package-card .package-unit {
    font-size: 10.5px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
  }

  #pageCustomTokensBar.custom-tokens-bar {
    margin-top: 10px !important;
    padding: 11px 13px !important;
    border-radius: 12px !important;
  }

  .tokens-pay-btn-wrap {
    margin-top: 14px !important;
  }

  #pageTokensPayBtn {
    padding: 12px 16px !important;
    font-size: 15.5px !important;
    border-radius: 12px !important;
  }
}