/* ==========================================================================
   VibeMart Pro UI Design System
   Modern, polished UI for all vendor-facing pages.
   Used by: registration, login, dashboard, upload, store, my-account.
   ========================================================================== */

:root {
  --vm-pro-bg: #f6f8fb;
  --vm-pro-card: #ffffff;
  --vm-pro-ink: #0f172a;
  --vm-pro-ink-soft: #475569;
  --vm-pro-ink-mute: #94a3b8;
  --vm-pro-line: #e2e8f0;
  --vm-pro-line-soft: #f1f5f9;
  --vm-pro-brand: #26a69a;
  --vm-pro-brand-dark: #00897b;
  --vm-pro-brand-soft: #e0f2f1;
  --vm-pro-red: #ef4444;
  --vm-pro-red-soft: #fee2e2;
  --vm-pro-green: #10b981;
  --vm-pro-green-soft: #d1fae5;
  --vm-pro-blue: #3b82f6;
  --vm-pro-blue-soft: #dbeafe;
  --vm-pro-yellow: #f59e0b;
  --vm-pro-yellow-soft: #fef3c7;
  --vm-pro-purple: #8b5cf6;
  --vm-pro-purple-soft: #ede9fe;
  --vm-pro-radius: 14px;
  --vm-pro-radius-sm: 10px;
  --vm-pro-radius-lg: 20px;
  --vm-pro-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --vm-pro-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --vm-pro-shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --vm-pro-shadow-xl: 0 20px 50px -12px rgba(15, 23, 42, 0.18);
  --vm-pro-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   Pro Buttons
   ------------------------------------------------------------------------- */
.vm-btn-pro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--vm-pro-card);
  color: var(--vm-pro-ink);
  border: 1.5px solid var(--vm-pro-line);
  padding: 10px 18px;
  border-radius: var(--vm-pro-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--vm-pro-transition);
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
}
.vm-btn-pro:hover {
  border-color: var(--vm-pro-brand);
  color: var(--vm-pro-brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--vm-pro-shadow);
}
.vm-btn-pro .vm-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 1;
}
.vm-btn-pro-primary {
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.25);
}
.vm-btn-pro-primary:hover {
  color: #fff;
  box-shadow: 0 6px 20px rgba(38, 166, 154, 0.35);
  transform: translateY(-2px);
}
.vm-btn-pro-danger {
  background: var(--vm-pro-red);
  color: #fff;
  border-color: transparent;
}
.vm-btn-pro-danger:hover {
  background: #dc2626;
  color: #fff;
  border-color: transparent;
}
.vm-btn-pro-ghost {
  background: transparent;
  border-color: var(--vm-pro-line);
  color: var(--vm-pro-ink-soft);
}
.vm-btn-pro-ghost:hover {
  background: var(--vm-pro-line-soft);
  color: var(--vm-pro-ink);
  border-color: var(--vm-pro-line);
}
.vm-btn-pro-light {
  background: rgba(255, 255, 255, 0.95);
  color: var(--vm-pro-brand-dark);
  border-color: rgba(255, 255, 255, 0.5);
}
.vm-btn-pro-light:hover {
  background: #fff;
  color: var(--vm-pro-brand-dark);
  border-color: #fff;
  box-shadow: var(--vm-pro-shadow);
}
.vm-btn-pro-ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.vm-btn-pro-ghost-light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.vm-btn-pro-sm { padding: 7px 12px; font-size: 12px; }
.vm-btn-pro-lg { padding: 14px 28px; font-size: 15px; }
.vm-btn-pro-block { display: flex; width: 100%; }
.vm-btn-pro-add {
  border-style: dashed;
  width: 100%;
  margin-top: 8px;
}

/* -------------------------------------------------------------------------
   Pro Form System
   ------------------------------------------------------------------------- */
.vm-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vm-field-full { grid-column: 1 / -1; }
.vm-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vm-pro-ink);
  letter-spacing: 0.01em;
}
.vm-req { color: var(--vm-pro-red); }
.vm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vm-input-ico {
  position: absolute;
  left: 14px;
  font-size: 15px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.vm-input-wrap input,
.vm-form input[type=text],
.vm-form input[type=email],
.vm-form input[type=password],
.vm-form input[type=number],
.vm-form input[type=search],
.vm-form input[type=tel],
.vm-form select,
.vm-form textarea {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--vm-pro-card);
  color: var(--vm-pro-ink);
  transition: all var(--vm-pro-transition);
}
.vm-form textarea {
  padding-left: 14px;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.vm-input-wrap input:focus,
.vm-form input:focus,
.vm-form select:focus,
.vm-form textarea:focus {
  outline: none;
  border-color: var(--vm-pro-brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.12);
}
.vm-input-wrap input::placeholder,
.vm-form textarea::placeholder {
  color: var(--vm-pro-ink-mute);
}
.vm-input-wrap-password .vm-pw-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
  padding: 4px;
  transition: opacity var(--vm-pro-transition);
}
.vm-input-wrap-password .vm-pw-toggle:hover { opacity: 1; }
.vm-help {
  font-size: 12px;
  color: var(--vm-pro-ink-mute);
  line-height: 1.5;
  margin: 0;
}
.vm-form-row-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -4px 0 4px;
}
.vm-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
}
.vm-checkbox input { margin: 0; accent-color: var(--vm-pro-brand); }
.vm-link-muted {
  font-size: 13px;
  color: var(--vm-pro-ink-mute);
  text-decoration: none;
  font-weight: 500;
}
.vm-link-muted:hover { color: var(--vm-pro-brand); text-decoration: underline; }
.vm-link-strong {
  color: var(--vm-pro-brand-dark);
  font-weight: 700;
  text-decoration: none;
}
.vm-link-strong:hover { text-decoration: underline; }
.vm-form-actions {
  margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Pro Notices
   ------------------------------------------------------------------------- */
.vm-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--vm-pro-radius-sm);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.vm-notice p { margin: 0; flex: 1; }
.vm-notice-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.vm-notice-success {
  background: var(--vm-pro-green-soft);
  color: #065f46;
  border-color: #a7f3d0;
}
.vm-notice-success .vm-notice-ico { background: var(--vm-pro-green); color: #fff; }
.vm-notice-error {
  background: var(--vm-pro-red-soft);
  color: #991b1b;
  border-color: #fecaca;
}
.vm-notice-error .vm-notice-ico { background: var(--vm-pro-red); color: #fff; }
.vm-notice-warning {
  background: var(--vm-pro-yellow-soft);
  color: #92400e;
  border-color: #fde68a;
}
.vm-notice-warning .vm-notice-ico { background: var(--vm-pro-yellow); color: #fff; }

/* -------------------------------------------------------------------------
   Auth Pages (registration + login)
   ------------------------------------------------------------------------- */
.vm-auth-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(38, 166, 154, 0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.06), transparent 50%),
    var(--vm-pro-bg);
}
.vm-auth-wrap-center { align-items: center; }
/* Registration page (NOT the centered login): go full-bleed so the two-column
   branding + form layout uses the whole viewport width instead of a narrow
   centered card with empty space on the sides. */
.vm-auth-wrap:not(.vm-auth-wrap-center) {
  padding: 32px 24px;
  align-items: stretch;
}
.vm-auth-wrap:not(.vm-auth-wrap-center) .vm-auth-card {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.vm-auth-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 980px;
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  box-shadow: var(--vm-pro-shadow-xl);
}
.vm-auth-card-single {
  grid-template-columns: 1fr;
  max-width: 460px;
}
.vm-auth-brand {
  background:
    linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 60%, #00695c 100%);
  color: #fff;
  padding: 48px 40px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.vm-auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.vm-auth-brand-inner { position: relative; z-index: 1; }
.vm-auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #fff;
  color: var(--vm-pro-brand-dark);
  font-weight: 900;
  font-size: 22px;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.02em;
}
.vm-auth-logo span { color: var(--vm-pro-red); margin-left: 2px; }
.vm-auth-logo-center { margin: 0 auto 16px; display: flex; }
.vm-auth-brand h1 {
  font-size: 28px;
  margin: 0 0 12px;
  font-weight: 800;
  line-height: 1.25;
}
.vm-auth-tagline {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.92;
  margin: 0 0 28px;
}
.vm-auth-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vm-auth-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.96;
}
.vm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.vm-auth-form-panel {
  padding: 48px 40px;
  display: flex;
  align-items: center;
}
.vm-auth-form-panel-single { padding: 40px 32px; }
.vm-auth-form-inner { width: 100%; }
.vm-auth-form-inner h2 {
  font-size: 24px;
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--vm-pro-ink);
}
.vm-auth-title-center { text-align: center; }
.vm-auth-subtitle {
  font-size: 14px;
  color: var(--vm-pro-ink-soft);
  margin: 0 0 24px;
  line-height: 1.5;
}
.vm-auth-subtitle-center { text-align: center; }
.vm-auth-foot {
  margin-top: 20px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  text-align: center;
}
.vm-auth-foot a {
  color: var(--vm-pro-brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.vm-auth-foot a:hover { text-decoration: underline; }
.vm-auth-foot-center { text-align: center; }
.vm-auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--vm-pro-ink-mute);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vm-auth-divider::before,
.vm-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vm-pro-line);
}
.vm-auth-divider span { padding: 0 12px; }

@media (max-width: 860px) {
  .vm-auth-card { grid-template-columns: 1fr; max-width: 480px; }
  .vm-auth-brand { padding: 32px 28px; }
  .vm-auth-brand h1 { font-size: 22px; }
  .vm-auth-form-panel { padding: 32px 28px; }
}
@media (max-width: 540px) {
  .vm-form-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Pro Dashboard
   ------------------------------------------------------------------------- */
.vm-dash {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Dashboard hero header */
.vm-dash-header {
  position: relative;
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 60%, #00695c 100%);
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: var(--vm-pro-shadow-lg);
}
.vm-dash-header-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.vm-dash-header-content {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vm-dash-header-id {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vm-dash-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.2);
}
.vm-dash-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.vm-dash-header-info h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.vm-dash-header-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
.vm-dash-rating small { opacity: 0.75; }
.vm-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(4px);
}
.vm-status-pill.vm-status-publish,
.vm-status-pill.vm-status-approved,
.vm-status-pill.vm-status-released,
.vm-status-pill.vm-status-eligible { background: rgba(16, 185, 129, 0.4); }
.vm-status-pill.vm-status-pending { background: rgba(245, 158, 11, 0.4); }
.vm-status-pill.vm-status-suspended,
.vm-status-pill.vm-status-cancelled,
.vm-status-pill.vm-status-failed { background: rgba(239, 68, 68, 0.4); }
.vm-status-pill.vm-status-draft,
.vm-status-pill.vm-status-on-hold { background: rgba(148, 163, 184, 0.4); }
.vm-dash-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Stats grid */
.vm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.vm-stat-card {
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--vm-pro-shadow-sm);
  border: 1px solid var(--vm-pro-line);
  transition: all var(--vm-pro-transition);
}
.vm-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vm-pro-shadow);
}
.vm-stat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 22px;
  flex-shrink: 0;
}
.vm-stat-teal .vm-stat-ico { background: var(--vm-pro-brand-soft); }
.vm-stat-green .vm-stat-ico { background: var(--vm-pro-green-soft); }
.vm-stat-blue .vm-stat-ico { background: var(--vm-pro-blue-soft); }
.vm-stat-yellow .vm-stat-ico { background: var(--vm-pro-yellow-soft); }
.vm-stat-content { min-width: 0; }
.vm-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--vm-pro-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.vm-stat-label {
  font-size: 12px;
  color: var(--vm-pro-ink-mute);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
@media (max-width: 860px) {
  .vm-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vm-stats-grid { grid-template-columns: 1fr; }
}

/* Dashboard sections */
.vm-dash-section {
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--vm-pro-shadow-sm);
  border: 1px solid var(--vm-pro-line);
}
.vm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.vm-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vm-section-title h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--vm-pro-brand-soft);
  color: var(--vm-pro-brand-dark);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

/* Dashboard two-column layout */
.vm-dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.vm-dash-cols .vm-dash-section { margin-bottom: 0; }
@media (max-width: 860px) {
  .vm-dash-cols { grid-template-columns: 1fr; }
}

/* Carts grid (dashboard) */
.vm-carts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.vm-cart-card-pro {
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  overflow: hidden;
  transition: all var(--vm-pro-transition);
  display: flex;
  flex-direction: column;
}
.vm-cart-card-pro:hover {
  transform: translateY(-3px);
  box-shadow: var(--vm-pro-shadow-lg);
  border-color: var(--vm-pro-brand);
}
.vm-cart-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--vm-pro-line-soft);
  overflow: hidden;
}
.vm-cart-card-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.vm-cart-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.vm-cart-card-pro:hover .vm-cart-card-thumb img { transform: scale(1.05); }
.vm-cart-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vm-pro-ink-mute);
  font-size: 13px;
  font-style: italic;
}
.vm-status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.95);
  color: var(--vm-pro-ink-soft);
  backdrop-filter: blur(4px);
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-status-badge.vm-status-publish,
.vm-status-badge.vm-status-approved { background: var(--vm-pro-green); color: #fff; }
.vm-status-badge.vm-status-pending { background: var(--vm-pro-yellow); color: #fff; }
.vm-status-badge.vm-status-draft,
.vm-status-badge.vm-status-on-hold { background: var(--vm-pro-ink-mute); color: #fff; }
.vm-status-badge.vm-status-suspended,
.vm-status-badge.vm-status-cancelled { background: var(--vm-pro-red); color: #fff; }
.vm-cart-card-body {
  padding: 14px 16px;
  flex: 1;
}
.vm-cart-card-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
  line-height: 1.3;
}
.vm-cart-card-body h3 a {
  color: inherit;
  text-decoration: none;
}
.vm-cart-card-body h3 a:hover { color: var(--vm-pro-brand); }
.vm-cart-card-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--vm-pro-brand-dark);
  letter-spacing: -0.01em;
}
.vm-cart-card-actions {
  padding: 0 16px 16px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vm-cart-card-actions form { display: inline-flex; }

/* Empty state */
.vm-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius);
  border: 2px dashed var(--vm-pro-line);
}
.vm-empty-state-warning {
  background: var(--vm-pro-yellow-soft);
  border-color: #fde68a;
}
.vm-empty-ico {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.8;
}
.vm-empty-state h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-empty-state p {
  margin: 0 0 20px;
  color: var(--vm-pro-ink-soft);
  font-size: 14px;
  line-height: 1.5;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Selfie uploader */
.vm-selfie-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.vm-selfie-preview-wrap {
  flex-shrink: 0;
}
.vm-selfie-preview-wrap img,
.vm-selfie-placeholder {
  width: 100px;
  height: 160px;
  object-fit: contain;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius-sm);
  border: 2px dashed var(--vm-pro-line);
}
.vm-selfie-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--vm-pro-ink-mute);
}
.vm-selfie-placeholder span { font-size: 28px; opacity: 0.5; }
.vm-selfie-placeholder small { font-size: 11px; }
.vm-selfie-controls {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* -------------------------------------------------------------------------
   Vendor Upload (cart builder) page
   ------------------------------------------------------------------------- */
.vm-wizard-header {
  position: relative;
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 60%, #00695c 100%);
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--vm-pro-shadow-lg);
}
.vm-wizard-header-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.vm-wizard-header-content {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vm-wizard-step {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 10px;
  backdrop-filter: blur(4px);
}
.vm-wizard-header-info h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.vm-wizard-header-info p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
  max-width: 560px;
}

.vm-upload-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .vm-upload-layout { grid-template-columns: 1fr; }
}
.vm-upload-form {
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  padding: 24px;
  border: 1px solid var(--vm-pro-line);
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-upload-preview {
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  padding: 24px;
  border: 1px solid var(--vm-pro-line);
  box-shadow: var(--vm-pro-shadow-sm);
  position: sticky;
  top: 24px;
}
.vm-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.vm-preview-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--vm-pro-green-soft);
  color: #065f46;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vm-preview-tag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vm-pro-green);
  animation: vm-pulse 2s ease-in-out infinite;
}
@keyframes vm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Live preview canvas (preserved from old dashboard.css, scoped to vm-) */
.vm-preview-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: var(--vm-pro-radius-sm);
  overflow: hidden;
  border: 1px solid var(--vm-pro-line);
  margin-bottom: 10px;
}
.preview-frame {
  position: absolute;
  border: 1px dashed rgba(38, 166, 154, 0.35);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* v1.0.15 — frame-label debug text is removed from the HTML; hide any
   stale instances defensively. */
.preview-frame .frame-label {
  display: none !important;
}
.preview-frame .frame-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}
.preview-frame.has-image .frame-image { display: block; }
/* v1.0.31 — Selfie now uses CONTAIN (matches the PHP GD cart-builder
   v1.0.31 render). The ENTIRE selfie MUST fit inside the frame, never
   overflow, never crop, always fully visible — while still preserving
   aspect ratio. This matches the user's explicit requirement that the
   selfie "automatically fit inside the frame", "never overflow outside
   the frame", "maintain its aspect ratio", and "always be fully visible
   within the designated frame". The previous COVER behaviour cropped
   parts of the image. The transparent-padding auto-crop that the PHP GD
   renderer does is mirrored in JS (see vibemart-dashboard.js
   applySelfieCrop) so the live preview matches the final cart exactly. */
.preview-frame-selfie .frame-image {
  object-fit: contain;
  object-position: center center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Product slots list */
.vm-products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}
/* v1.0.20 — compliance status badge shown above the products list so the
   vendor knows whether AI image moderation is active or only the basic
   keyword check is running. */
.vm-compliance-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  border: 1px solid transparent;
}
.vm-compliance-status-active {
  background: #e7f7ef;
  color: #1a7d4f;
  border-color: #a7e3c5;
}
.vm-compliance-status-basic {
  background: #fff8e6;
  color: #8a6100;
  border-color: #ffe39e;
}
.vm-compliance-status-off {
  background: #f4f4f5;
  color: #6b6b70;
  border-color: #d4d4d8;
}
.vm-compliance-dot { font-size: 10px; line-height: 1; }
.vm-compliance-hint { font-weight: 400; opacity: 0.8; font-size: 11px; }
.vibemart-product-slot {
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius-sm);
  padding: 12px;
  background: var(--vm-pro-line-soft);
  position: relative;
  transition: border-color var(--vm-pro-transition);
}
.vibemart-product-slot:hover { border-color: var(--vm-pro-brand); }
.vibemart-product-slot .slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.vibemart-product-slot .slot-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--vm-pro-brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vibemart-product-slot .slot-remove {
  background: none;
  border: none;
  color: var(--vm-pro-red);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--vm-pro-transition);
}
.vibemart-product-slot .slot-remove:hover { opacity: 1; }
.vibemart-product-slot .slot-body {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
}
.vibemart-product-slot .slot-thumb {
  width: 80px;
  height: 100px;
  border: 1.5px dashed var(--vm-pro-ink-mute);
  border-radius: var(--vm-pro-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--vm-pro-card);
  position: relative;
  transition: border-color var(--vm-pro-transition);
}
.vibemart-product-slot .slot-thumb:hover { border-color: var(--vm-pro-brand); }
.vibemart-product-slot .slot-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.vibemart-product-slot .slot-thumb .thumb-placeholder {
  font-size: 11px;
  color: var(--vm-pro-ink-mute);
  text-align: center;
  padding: 4px;
}
.vibemart-product-slot .slot-thumb.processing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="%2326a69a" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M22 12a10 10 0 0 1-10 10"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path></svg>') center/24px no-repeat;
}
/* v1.0.29 — small fallback-warning badge shown on the product thumbnail
   when the AI bg remover fell back to the local GD remover. Hovering
   reveals the full Gemini failure reason via the title attribute. */
.vibemart-product-slot .slot-thumb .slot-fallback-warn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d97706;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  cursor: help;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 3;
}
.vibemart-product-slot .slot-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vibemart-product-slot input[type=text],
.vibemart-product-slot input[type=number],
.vibemart-product-slot textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--vm-pro-line);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--vm-pro-card);
  color: var(--vm-pro-ink);
  transition: border-color var(--vm-pro-transition);
}
.vibemart-product-slot input:focus,
.vibemart-product-slot textarea:focus {
  outline: none;
  border-color: var(--vm-pro-brand);
  box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.12);
}
.vibemart-product-slot textarea {
  resize: vertical;
  min-height: 40px;
}

/* Inline AI compliance moderation banner (per product slot). */
.vibemart-product-slot .slot-compliance {
  margin: 0 12px 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.vibemart-product-slot .slot-compliance[hidden] { display: none; }
.vibemart-product-slot .slot-compliance.is-checking {
  background: #eef4ff;
  color: #34507a;
  border: 1px solid #c9dbff;
}
.vibemart-product-slot .slot-compliance.is-ok {
  background: #e7f6ea;
  color: #1f7a37;
  border: 1px solid #b7e3c2;
}
.vibemart-product-slot .slot-compliance.is-warn {
  background: #fdecec;
  color: #a32424;
  border: 1px solid #f5c2c2;
}
.vibemart-product-slot .slot-compliance strong { font-weight: 700; }
.vibemart-product-slot .slot-compliance-source {
  opacity: 0.7;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Loading spinner */
.vm-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
}
.vm-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--vm-pro-line);
  border-top-color: var(--vm-pro-brand);
  border-radius: 50%;
  animation: vm-spin 0.8s linear infinite;
}
@keyframes vm-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Vendor Store page
   ------------------------------------------------------------------------- */
.vm-store-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 64px;
}
.vm-store-cover {
  position: relative;
  height: 200px;
  border-radius: 0 0 var(--vm-pro-radius-lg) var(--vm-pro-radius-lg);
  overflow: hidden;
  margin-bottom: -64px;
}
.vm-store-cover-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 50%, #00695c 100%);
}
.vm-store-cover-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.12), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 60%);
}
.vm-store-header {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  padding: 0 24px 24px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.vm-store-avatar-wrap {
  flex-shrink: 0;
}
.vm-store-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 5px solid #fff;
  object-fit: cover;
  background: var(--vm-pro-line-soft);
  box-shadow: var(--vm-pro-shadow-lg);
}
.vm-store-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
  color: var(--vm-pro-brand-dark);
  background: var(--vm-pro-brand-soft);
}
.vm-store-header-info {
  flex: 1;
  min-width: 280px;
  padding-bottom: 8px;
}
.vm-store-header-info h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 800;
  color: var(--vm-pro-ink);
  letter-spacing: -0.02em;
}
.vm-store-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  align-items: center;
}
.vm-store-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-store-rating small {
  color: var(--vm-pro-ink-mute);
  font-weight: 500;
}
.vm-store-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vm-store-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--vm-pro-ink-soft);
}
.vm-store-description p { margin: 0; }
.vm-store-carts-section {
  margin-top: 32px;
  padding: 0 8px;
}
.vm-store-carts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.vm-store-cart-card {
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  overflow: hidden;
  transition: all var(--vm-pro-transition);
  display: flex;
  flex-direction: column;
}
.vm-store-cart-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vm-pro-shadow-lg);
  border-color: var(--vm-pro-brand);
}
.vm-store-cart-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--vm-pro-line-soft);
  overflow: hidden;
}
.vm-store-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.vm-store-cart-card:hover .vm-store-cart-thumb img { transform: scale(1.05); }
.vm-store-cart-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
  opacity: 0.4;
}
.vm-store-cart-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.vm-store-cart-body h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--vm-pro-ink);
  line-height: 1.3;
}
.vm-store-cart-body h3 a {
  color: inherit;
  text-decoration: none;
}
.vm-store-cart-body h3 a:hover { color: var(--vm-pro-brand); }
.vm-store-cart-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--vm-pro-brand-dark);
  letter-spacing: -0.01em;
}
.vm-store-cart-body .vm-btn-pro { margin-top: auto; }

@media (max-width: 720px) {
  .vm-store-cover { height: 140px; margin-bottom: -56px; }
  .vm-store-avatar { width: 96px; height: 96px; }
  .vm-store-header-info h1 { font-size: 22px; }
  .vm-store-header { padding: 0 16px 16px; gap: 16px; }
}

/* -------------------------------------------------------------------------
   My Account vendor CTA
   ------------------------------------------------------------------------- */
.vm-account-vendor-cta {
  margin-top: 32px;
}
.vm-account-vendor-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, var(--vm-pro-brand-soft) 0%, #fff 100%);
  border: 1px solid var(--vm-pro-brand);
  border-radius: var(--vm-pro-radius);
  flex-wrap: wrap;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-account-vendor-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 100%);
  color: #fff;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(38, 166, 154, 0.3);
}
.vm-account-vendor-text {
  flex: 1;
  min-width: 240px;
}
.vm-account-vendor-text h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-account-vendor-text p {
  margin: 0;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.5;
}
.vm-account-vendor-inner .vm-btn-pro {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Info / fallback block
   ------------------------------------------------------------------------- */
.vm-info-pro {
  text-align: center;
  padding: 64px 24px;
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  border: 1px solid var(--vm-pro-line);
  max-width: 540px;
  margin: 40px auto;
}
.vm-info-ico {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.vm-info-pro h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-info-pro p {
  margin: 0;
  color: var(--vm-pro-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Responsive global tweaks
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .vm-dash-header-content,
  .vm-wizard-header-content { padding: 24px 20px; }
  .vm-dash-header-info h1,
  .vm-wizard-header-info h1 { font-size: 20px; }
  .vm-dash-avatar { width: 56px; height: 56px; }
  .vm-dash-section,
  .vm-upload-form,
  .vm-upload-preview { padding: 20px; }
  .vm-btn-pro-lg { padding: 12px 24px; font-size: 14px; }
}

/* ==========================================================================
   VibeMart Pro Dashboard v2 — sticky tabs, dropzone selfie uploader,
   polished hero, side panel.
   ========================================================================== */

/* Dashboard alert banner (e.g. "upload your selfie first") */
.vm-dash-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--vm-pro-radius);
  margin-bottom: 20px;
  border: 1px solid transparent;
  background: var(--vm-pro-card);
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-dash-alert-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #fbbf24;
}
.vm-dash-alert-ico {
  font-size: 28px;
  flex-shrink: 0;
}
.vm-dash-alert-content { flex: 1; min-width: 0; }
.vm-dash-alert-content h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-dash-alert-content p {
  margin: 0;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.5;
}
.vm-dash-alert .vm-btn-pro { flex-shrink: 0; }
@media (max-width: 640px) {
  .vm-dash-alert { flex-wrap: wrap; }
  .vm-dash-alert .vm-btn-pro { width: 100%; justify-content: center; }
}

/* Sticky tab nav */
.vm-dash-tabs {
  display: flex;
  gap: 4px;
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  padding: 6px;
  margin-bottom: 24px;
  border: 1px solid var(--vm-pro-line);
  box-shadow: var(--vm-pro-shadow-sm);
  position: sticky;
  top: 12px;
  z-index: 50;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--vm-pro-line) transparent;
}
.vm-dash-tabs::-webkit-scrollbar { height: 6px; }
.vm-dash-tabs::-webkit-scrollbar-track { background: transparent; }
.vm-dash-tabs::-webkit-scrollbar-thumb { background: var(--vm-pro-line); border-radius: 3px; }
.vm-dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--vm-pro-radius-sm);
  color: var(--vm-pro-ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  border: none;
  background: transparent;
  font-family: inherit;
  position: relative;
}
.vm-dash-tab:hover {
  background: var(--vm-pro-line-soft);
  color: var(--vm-pro-ink);
  transform: translateY(-1px);
}
.vm-dash-tab:focus-visible {
  outline: 2px solid var(--vm-pro-brand);
  outline-offset: 2px;
}
.vm-dash-tab.is-active {
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(38, 166, 154, 0.32), 0 1px 2px rgba(0,0,0,0.06);
}
.vm-dash-tab.is-active:hover { transform: translateY(-1px); }
.vm-dash-tab.is-active .vm-dash-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.vm-dash-tab-ico { font-size: 16px; line-height: 1; }
.vm-dash-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--vm-pro-line);
  color: var(--vm-pro-ink-soft);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .vm-dash-tab-label { display: none; }
  .vm-dash-tab { padding: 10px 14px; }
  .vm-dash-tab-ico { font-size: 18px; }
}

/* Tab panels — only the active one is shown */
.vm-dash-panel { display: none; animation: vmFade 0.22s ease-out; }
.vm-dash-panel.is-active { display: block; }
@keyframes vmFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pro stat cards — with sub-label */
.vm-stats-grid-pro .vm-stat-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.vm-stats-grid-pro .vm-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.04;
  pointer-events: none;
}
.vm-stats-grid-pro .vm-stat-card { color: var(--vm-pro-brand); }
.vm-stats-grid-pro .vm-stat-green { color: var(--vm-pro-green); }
.vm-stats-grid-pro .vm-stat-blue { color: var(--vm-pro-blue); }
.vm-stats-grid-pro .vm-stat-yellow { color: var(--vm-pro-yellow); }
.vm-stats-grid-pro .vm-stat-ico {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 10px;
}
.vm-stats-grid-pro .vm-stat-num { font-size: 26px; margin-top: 4px; }
.vm-stats-grid-pro .vm-stat-label { font-size: 11px; }
.vm-stats-grid-pro .vm-stat-sub {
  font-size: 11px;
  color: var(--vm-pro-ink-mute);
  margin-top: 2px;
}

/* 7-3 dashboard layout (main + sidebar) */
.vm-dash-cols-7-3 {
  grid-template-columns: 7fr 3fr;
  gap: 20px;
  align-items: start;
}
.vm-dash-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vm-dash-section-sm { padding: 18px; }
.vm-section-head-sm { margin-bottom: 14px; }
.vm-section-head-sm h2 { font-size: 14px; }

/* Quick actions */
.vm-quick-actions { display: flex; flex-direction: column; gap: 8px; }
.vm-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius-sm);
  text-decoration: none;
  color: var(--vm-pro-ink);
  border: 1px solid transparent;
  transition: all var(--vm-pro-transition);
}
.vm-quick-action:hover {
  background: var(--vm-pro-card);
  border-color: var(--vm-pro-brand);
  transform: translateX(2px);
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-quick-action-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}
.vm-qa-teal { background: var(--vm-pro-brand-soft); color: var(--vm-pro-brand-dark); }
.vm-qa-blue { background: var(--vm-pro-blue-soft); color: var(--vm-pro-blue); }
.vm-qa-yellow { background: var(--vm-pro-yellow-soft); color: var(--vm-pro-yellow); }
.vm-quick-action-text { display: flex; flex-direction: column; min-width: 0; }
.vm-quick-action-text strong { font-size: 13px; font-weight: 700; color: var(--vm-pro-ink); }
.vm-quick-action-text small { font-size: 11px; color: var(--vm-pro-ink-mute); margin-top: 1px; }

/* Tip list */
.vm-tip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vm-tip-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.5;
}
.vm-tip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--vm-pro-green-soft);
  color: var(--vm-pro-green);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Smaller empty state for side panels */
.vm-empty-state-sm { padding: 32px 20px; }
.vm-empty-state-sm .vm-empty-ico { font-size: 36px; }
.vm-empty-state-sm h3 { font-size: 16px; }

/* Pro carts grid — with hover overlay */
.vm-carts-grid-pro .vm-cart-card-pro { position: relative; }
.vm-cart-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  opacity: 0;
  transition: opacity var(--vm-pro-transition);
  pointer-events: none;
}
.vm-cart-card-pro:hover .vm-cart-card-overlay {
  opacity: 1;
  pointer-events: auto;
}
.vm-cart-card-overlay .vm-btn-pro {
  pointer-events: auto;
}

/* ==========================================================================
   Pro Selfie Dropzone
   ========================================================================== */
.vm-selfie-dropzone {
  display: flex;
  gap: 20px;
  align-items: stretch;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: var(--vm-pro-radius);
  border: 2px dashed var(--vm-pro-line);
  transition: all var(--vm-pro-transition);
  flex-wrap: wrap;
}
.vm-selfie-dropzone.is-dragover {
  background: linear-gradient(135deg, var(--vm-pro-brand-soft) 0%, #d1faf0 100%);
  border-color: var(--vm-pro-brand);
  box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.12);
  transform: scale(1.005);
}
.vm-selfie-dropzone.is-uploading {
  opacity: 0.85;
  pointer-events: none;
}
.vm-selfie-preview-area {
  flex-shrink: 0;
  width: 160px;
  height: 220px;
  border-radius: var(--vm-pro-radius-sm);
  overflow: hidden;
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--vm-pro-transition);
}
.vm-selfie-preview-area:hover {
  border-color: var(--vm-pro-brand);
  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.18);
  transform: translateY(-1px);
}
.vm-selfie-preview-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
.vm-selfie-preview-area::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.vm-selfie-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  color: var(--vm-pro-ink-mute);
  text-align: center;
  padding: 12px;
}
.vm-selfie-placeholder-ico {
  font-size: 40px;
  opacity: 0.55;
  margin-bottom: 4px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
  animation: vmFloat 2.4s ease-in-out infinite;
}
@keyframes vmFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.vm-selfie-placeholder strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--vm-pro-ink-soft);
}
.vm-selfie-placeholder small {
  font-size: 11px;
  color: var(--vm-pro-ink-mute);
}
.vm-selfie-side {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.vm-selfie-status {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: var(--vm-pro-radius-sm);
  background: var(--vm-pro-line-soft);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.vm-selfie-status span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
}
.vm-selfie-status-ok   { color: var(--vm-pro-green); }
.vm-selfie-status-warn { color: #b45309; }
.vm-selfie-status-err  { color: var(--vm-pro-red); font-weight: 600; }
.vm-selfie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vm-selfie-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vm-selfie-progress-bar {
  height: 6px;
  background: var(--vm-pro-line);
  border-radius: 3px;
  overflow: hidden;
}
.vm-selfie-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 100%);
  border-radius: 3px;
  transition: width 0.3s ease-out;
  position: relative;
  overflow: hidden;
}
.vm-selfie-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  animation: vmShimmer 1.4s linear infinite;
}
@keyframes vmShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.vm-selfie-progress small {
  font-size: 11px;
  color: var(--vm-pro-ink-mute);
}
@media (max-width: 540px) {
  .vm-selfie-dropzone { flex-direction: column; align-items: center; }
  .vm-selfie-preview-area { width: 100%; max-width: 220px; }
  .vm-selfie-side { width: 100%; }
}

/* ==========================================================================
   Pro dashboard hero header
   ========================================================================== */
.vm-dash-header-pro {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
  border-radius: var(--vm-pro-radius-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 20px 50px -12px rgba(15, 118, 110, 0.35);
}
.vm-dash-header-pro .vm-dash-header-bg {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1), transparent 40%);
}
.vm-dash-header-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px, 48px 48px;
  background-position: 0 0, 16px 24px;
  pointer-events: none;
}
.vm-dash-header-pro .vm-dash-header-content {
  padding: 32px 36px;
  position: relative;
  z-index: 1;
}
.vm-dash-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.vm-dash-header-pro .vm-dash-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.5);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.vm-dash-header-pro .vm-dash-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
}
.vm-dash-verified {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  background: var(--vm-pro-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  border: 3px solid #fff;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-dash-header-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.vm-dash-header-pro .vm-dash-header-info h1 {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.vm-dash-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .vm-dash-header-pro .vm-dash-header-content { padding: 24px 20px; }
  .vm-dash-header-pro .vm-dash-header-info h1 { font-size: 22px; }
  .vm-dash-header-pro .vm-dash-avatar {
    width: 64px;
    height: 64px;
  }
  .vm-dash-verified { width: 20px; height: 20px; font-size: 10px; }
}

/* vm-btn-pro-ghost-light: a translucent white ghost button for dark headers */
.vm-btn-pro-ghost-light {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  backdrop-filter: blur(6px);
}
.vm-btn-pro-ghost-light:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

/* vm-btn-pro-light: solid white button for dark headers */
.vm-btn-pro-light {
  background: #fff;
  color: var(--vm-pro-brand-dark);
  border-color: #fff;
}
.vm-btn-pro-light:hover {
  background: #f8fafc;
  color: var(--vm-pro-brand-dark);
}

/* Responsive: collapse 7-3 layout on narrow screens */
@media (max-width: 860px) {
  .vm-dash-cols-7-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PRO Shop page — clean modern marketplace grid
   ========================================================================== */
.vm-shop-pro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Hero */
.vm-shop-hero {
  position: relative;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 20px 50px -12px rgba(15, 118, 110, 0.35);
}
.vm-shop-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
}
.vm-shop-hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px, 48px 48px;
  background-position: 0 0, 16px 24px;
  pointer-events: none;
}
.vm-shop-hero-content {
  position: relative;
  z-index: 1;
  padding: 48px 40px;
  text-align: center;
}
.vm-shop-hero-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.vm-shop-hero-content h1 {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.vm-shop-hero-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .vm-shop-hero-content { padding: 32px 20px; }
  .vm-shop-hero-content h1 { font-size: 24px; }
  .vm-shop-hero-content p { font-size: 14px; }
}

/* Toolbar */
.vm-shop-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--vm-pro-card);
  border-radius: var(--vm-pro-radius);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--vm-pro-line);
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-shop-search-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.vm-shop-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.vm-shop-search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
  pointer-events: none;
}
.vm-shop-search-input-wrap input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1.5px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius-sm);
  font-size: 14px;
  font-family: inherit;
  transition: all var(--vm-pro-transition);
  background: var(--vm-pro-card);
  color: var(--vm-pro-ink);
}
.vm-shop-search-input-wrap input:focus {
  outline: none;
  border-color: var(--vm-pro-brand);
  box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.12);
}
.vm-shop-select {
  padding: 11px 14px;
  border: 1.5px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--vm-pro-card);
  color: var(--vm-pro-ink);
  cursor: pointer;
  transition: all var(--vm-pro-transition);
}
.vm-shop-select:focus {
  outline: none;
  border-color: var(--vm-pro-brand);
  box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.12);
}
.vm-shop-result-count {
  font-size: 13px;
  color: var(--vm-pro-ink-mute);
  padding-left: 4px;
}

/* Featured strip */
.vm-shop-featured-strip {
  margin-bottom: 24px;
}
.vm-shop-featured-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vm-pro-ink-mute);
  margin-bottom: 10px;
}
.vm-shop-featured-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.vm-shop-featured-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: 40px;
  text-decoration: none;
  color: var(--vm-pro-ink);
  transition: all var(--vm-pro-transition);
  flex-shrink: 0;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-shop-featured-chip:hover {
  border-color: var(--vm-pro-brand);
  transform: translateY(-2px);
  box-shadow: var(--vm-pro-shadow);
}
.vm-shop-featured-chip img,
.vm-shop-featured-chip-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vm-pro-brand-soft);
  color: var(--vm-pro-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.vm-shop-featured-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.vm-shop-featured-chip-text strong {
  font-size: 13px;
  font-weight: 700;
}
.vm-shop-featured-chip-text small {
  font-size: 11px;
  color: var(--vm-pro-ink-mute);
  margin-top: 2px;
}

/* Shop grid (uses .vm-carts-grid-pro which is already defined) */
.vm-shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Shop card — uses base .vm-cart-card-pro + extensions */
.vm-shop-card .vm-cart-card-thumb {
  position: relative;
}
.vm-shop-card-price-burst {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--vm-pro-yellow);
  color: var(--vm-pro-ink);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--vm-pro-shadow);
  border: 2px solid #fff;
}
.vm-cart-card-desc {
  font-size: 12px;
  color: var(--vm-pro-ink-mute);
  line-height: 1.5;
  margin: 4px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vm-shop-card-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--vm-pro-ink-mute);
}
.vm-shop-card-vendor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius-sm);
  text-decoration: none;
  color: var(--vm-pro-ink);
  transition: all var(--vm-pro-transition);
  border: 1px solid transparent;
}
.vm-shop-card-vendor:hover {
  background: var(--vm-pro-card);
  border-color: var(--vm-pro-brand);
}
.vm-shop-card-vendor-avatar-wrap {
  flex-shrink: 0;
}
.vm-shop-card-vendor-avatar,
.vm-shop-card-vendor-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vm-pro-brand-soft);
  color: var(--vm-pro-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.vm-shop-card-vendor-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.vm-shop-card-vendor-info small {
  font-size: 10px;
  color: var(--vm-pro-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vm-shop-card-vendor-info strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--vm-pro-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vm-shop-card-rating {
  font-size: 12px;
  font-weight: 700;
  color: var(--vm-pro-yellow);
  flex-shrink: 0;
}

/* Pagination */
.vm-shop-pagination {
  margin-top: 32px;
  text-align: center;
}
.vm-shop-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  margin: 0 3px;
  border-radius: var(--vm-pro-radius-sm);
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  color: var(--vm-pro-ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--vm-pro-transition);
}
.vm-shop-pagination .page-numbers:hover {
  border-color: var(--vm-pro-brand);
  color: var(--vm-pro-brand-dark);
}
.vm-shop-pagination .page-numbers.current {
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.25);
}

/* ==========================================================================
   PRO Vendor Store page
   ========================================================================== */
.vm-store-pro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Cover banner */
.vm-store-cover {
  position: relative;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 20px 50px -12px rgba(15, 118, 110, 0.35);
}
.vm-store-cover-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
}
.vm-store-cover-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px, 48px 48px;
  background-position: 0 0, 16px 24px;
  pointer-events: none;
}
.vm-store-cover-content {
  position: relative;
  z-index: 1;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.vm-store-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.vm-store-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.5);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.vm-store-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
}
.vm-store-verified {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  background: var(--vm-pro-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  border: 3px solid #fff;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-store-header-info {
  flex: 1;
  min-width: 240px;
}
.vm-store-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.vm-store-header-info h1 {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.vm-store-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  align-items: center;
}
.vm-store-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.vm-store-rating small {
  font-weight: 400;
  opacity: 0.85;
}
.vm-store-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* About card */
.vm-store-about {
  display: flex;
  gap: 16px;
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-store-about-ico {
  font-size: 28px;
  flex-shrink: 0;
}
.vm-store-about-text {
  flex: 1;
}
.vm-store-about-text h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-store-about-text p {
  margin: 0;
  color: var(--vm-pro-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* Store carts grid inherits from .vm-carts-grid-pro */
.vm-store-carts-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ==========================================================================
   PRO Cart Detail page
   ========================================================================== */
.vm-detail-pro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}

/* Breadcrumb */
.vm-breadcrumb-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  flex-wrap: wrap;
}
.vm-breadcrumb-pro a {
  color: var(--vm-pro-ink-soft);
  text-decoration: none;
  transition: color var(--vm-pro-transition);
}
.vm-breadcrumb-pro a:hover {
  color: var(--vm-pro-brand-dark);
}
.vm-breadcrumb-sep {
  color: var(--vm-pro-ink-mute);
  opacity: 0.5;
}
.vm-breadcrumb-current {
  color: var(--vm-pro-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

/* Hero 2-column */
.vm-detail-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
  align-items: start;
}
.vm-detail-image-col {
  position: relative;
}
.vm-detail-image-wrap {
  position: relative;
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  background: var(--vm-pro-line-soft);
  border: 1px solid var(--vm-pro-line);
  box-shadow: var(--vm-pro-shadow-lg);
  aspect-ratio: 16 / 10;
}
.vm-detail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 24px 24px;
}
.vm-detail-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--vm-pro-ink-mute);
}
.vm-detail-image-placeholder span { font-size: 64px; opacity: 0.5; }
.vm-detail-image-placeholder small { font-size: 13px; }
.vm-detail-image-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--vm-pro-radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(6px);
  box-shadow: var(--vm-pro-shadow);
}
.vm-detail-image-badge-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--vm-pro-yellow);
}
.vm-detail-image-badge-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Buy box */
.vm-detail-buy-col {
  position: relative;
}
.vm-detail-buy-box {
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius-lg);
  padding: 24px;
  box-shadow: var(--vm-pro-shadow);
  position: sticky;
  top: 80px;
}
.vm-detail-verified-row {
  margin-bottom: 10px;
}
.vm-detail-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--vm-pro-blue-soft);
  color: var(--vm-pro-blue);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vm-detail-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--vm-pro-ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.vm-detail-description {
  color: var(--vm-pro-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.vm-detail-description p { margin: 0 0 8px; }
.vm-detail-description p:last-child { margin-bottom: 0; }

/* Vendor mini-card */
.vm-detail-vendor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius);
  text-decoration: none;
  color: var(--vm-pro-ink);
  transition: all var(--vm-pro-transition);
  border: 1px solid transparent;
  margin-bottom: 20px;
}
.vm-detail-vendor-card:hover {
  background: var(--vm-pro-card);
  border-color: var(--vm-pro-brand);
  transform: translateX(2px);
}
.vm-detail-vendor-avatar-wrap { flex-shrink: 0; }
.vm-detail-vendor-avatar,
.vm-detail-vendor-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vm-pro-brand-soft);
  color: var(--vm-pro-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-detail-vendor-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.vm-detail-vendor-info small {
  font-size: 11px;
  color: var(--vm-pro-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vm-detail-vendor-info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-detail-vendor-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--vm-pro-ink-mute);
  margin-top: 2px;
  flex-wrap: wrap;
}
.vm-detail-vendor-arrow {
  color: var(--vm-pro-ink-mute);
  font-size: 16px;
  flex-shrink: 0;
}

/* Price block */
.vm-detail-buy-row {
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--vm-pro-radius);
  border: 1px solid #fbbf24;
}
.vm-detail-price-block small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400e;
  margin-bottom: 2px;
}
.vm-detail-price-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--vm-pro-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vm-detail-price-sub {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #92400e !important;
  margin-top: 4px !important;
  display: block;
}

/* Buy actions */
.vm-detail-buy-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.vm-detail-buy-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vm-pro-ink-soft);
  margin-bottom: 2px;
}
.vm-detail-buy-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--vm-pro-ink-mute);
  text-align: center;
  line-height: 1.5;
}
.vm-detail-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.vm-detail-buy-notice {
  padding: 14px 16px;
  background: var(--vm-pro-yellow-soft);
  border: 1px solid #fde68a;
  border-radius: var(--vm-pro-radius-sm);
  color: var(--vm-pro-ink);
}
.vm-detail-buy-notice strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.vm-detail-buy-notice p {
  margin: 0;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.5;
}

/* Trust badges */
.vm-detail-trust {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  padding: 14px;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius-sm);
}
.vm-detail-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.vm-detail-trust-ico { font-size: 18px; }
.vm-detail-trust-item small {
  font-size: 11px;
  color: var(--vm-pro-ink-soft);
  font-weight: 500;
}

/* Contents grid */
.vm-detail-contents {
  margin-bottom: 32px;
}
.vm-detail-contents-footnote {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--vm-pro-line-soft);
  border-radius: var(--vm-pro-radius-sm);
  font-size: 12.5px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.55;
  text-align: center;
}
.vm-detail-contents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.vm-detail-content-item {
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  overflow: hidden;
  transition: all var(--vm-pro-transition);
}
.vm-detail-content-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--vm-pro-shadow);
  border-color: var(--vm-pro-brand);
}
.vm-detail-content-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 20px 20px;
  overflow: hidden;
}
.vm-detail-content-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vm-detail-content-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
  opacity: 0.3;
}
.vm-detail-content-num {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  background: var(--vm-pro-brand-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-detail-content-body {
  padding: 14px 16px;
}
.vm-detail-content-body h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-detail-content-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--vm-pro-brand-dark);
  margin-bottom: 6px;
}
.vm-detail-content-body p {
  margin: 0;
  font-size: 13px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.5;
}

/* Bottom actions */
.vm-detail-bottom-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive detail */
@media (max-width: 860px) {
  .vm-detail-hero { grid-template-columns: 1fr; }
  .vm-detail-buy-box { position: static; }
}

/* ==========================================================================
   PRO Account page
   ========================================================================== */
.vm-account-pro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}
.vm-account-wc {
  margin-bottom: 24px;
}
.vm-account-wc .woocommerce {
  max-width: 100%;
}

/* Hero */
.vm-account-hero {
  position: relative;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
  border-radius: var(--vm-pro-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 20px 50px -12px rgba(15, 118, 110, 0.35);
}
.vm-account-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
}
.vm-account-hero-content {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vm-account-avatar-wrap { flex-shrink: 0; }
.vm-account-avatar,
.vm-account-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.5);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.vm-account-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
}
.vm-account-hero-info { flex: 1; min-width: 240px; }
.vm-account-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.vm-account-hero-info h1 {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.vm-account-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}
.vm-account-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vm-account-hero-actions {
  flex-shrink: 0;
}

/* Account cards */
.vm-account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.vm-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  text-decoration: none;
  color: var(--vm-pro-ink);
  transition: all var(--vm-pro-transition);
  box-shadow: var(--vm-pro-shadow-sm);
  position: relative;
  overflow: hidden;
}
.vm-account-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--vm-pro-brand);
}
.vm-account-card-teal::before { background: var(--vm-pro-brand); }
.vm-account-card-blue::before { background: var(--vm-pro-blue); }
.vm-account-card-yellow::before { background: var(--vm-pro-yellow); }
.vm-account-card-purple::before { background: var(--vm-pro-purple); }
.vm-account-card-red::before { background: var(--vm-pro-red); }
.vm-account-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vm-pro-shadow-lg);
  border-color: var(--vm-pro-brand);
}
.vm-account-card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
}
.vm-account-card-teal .vm-account-card-ico { background: var(--vm-pro-brand-soft); }
.vm-account-card-blue .vm-account-card-ico { background: var(--vm-pro-blue-soft); }
.vm-account-card-yellow .vm-account-card-ico { background: var(--vm-pro-yellow-soft); }
.vm-account-card-purple .vm-account-card-ico { background: var(--vm-pro-purple-soft); }
.vm-account-card-red .vm-account-card-ico { background: var(--vm-pro-red-soft); }
.vm-account-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.vm-account-card-body strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-account-card-body small {
  font-size: 12px;
  color: var(--vm-pro-ink-mute);
  margin-top: 2px;
  line-height: 1.4;
}
.vm-account-card-arrow {
  color: var(--vm-pro-ink-mute);
  font-size: 18px;
  flex-shrink: 0;
}

/* Shop CTA */
.vm-account-shop-cta {
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  padding: 24px;
  box-shadow: var(--vm-pro-shadow-sm);
}
.vm-account-shop-cta-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vm-account-shop-cta-ico {
  font-size: 36px;
  flex-shrink: 0;
}
.vm-account-shop-cta-text {
  flex: 1;
  min-width: 240px;
}
.vm-account-shop-cta-text h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--vm-pro-ink);
}
.vm-account-shop-cta-text p {
  margin: 0;
  font-size: 14px;
  color: var(--vm-pro-ink-soft);
  line-height: 1.5;
}
.vm-account-shop-cta .vm-btn-pro { flex-shrink: 0; }

/* ==========================================================================
   PRO Cart/Checkout frame (wraps the WC shortcodes in a polished container)
   ========================================================================== */
.vm-pro-frame {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}
.vm-pro-frame-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  border-radius: var(--vm-pro-radius-lg);
  margin-bottom: 20px;
  color: #fff;
  box-shadow: var(--vm-pro-shadow-lg);
  position: relative;
  overflow: hidden;
}
.vm-pro-frame-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.vm-pro-frame-header-blue {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
}
.vm-pro-frame-header-green {
  background: linear-gradient(135deg, #064e3b 0%, #10b981 50%, #34d399 100%);
}
.vm-pro-frame-ico {
  font-size: 36px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.vm-pro-frame-text {
  position: relative;
  z-index: 1;
}
.vm-pro-frame-text h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.vm-pro-frame-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
.vm-pro-frame-body {
  background: var(--vm-pro-card);
  border: 1px solid var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
  padding: 24px;
  box-shadow: var(--vm-pro-shadow-sm);
}

/* ==========================================================================
   Misc — empty-state-warning variant
   ========================================================================== */
.vm-empty-state-warning {
  background: var(--vm-pro-yellow-soft) !important;
  border-color: #fde68a !important;
}

/* ==========================================================================
   v1.0.8 — Pro UI polish
   Extra refinements for buttons, dropzone, tabs, status pills, and cards
   to make the dashboard feel more premium.
   ========================================================================== */

/* Buttons — softer shadow, refined hover lift */
.vm-btn-pro {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.vm-btn-pro:hover {
  box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}
.vm-btn-pro:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.vm-btn-pro-primary {
  background: linear-gradient(135deg, var(--vm-pro-brand) 0%, var(--vm-pro-brand-dark) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.28), 0 1px 2px rgba(38, 166, 154, 0.18);
}
.vm-btn-pro-primary:hover {
  box-shadow: 0 6px 18px rgba(38, 166, 154, 0.38), 0 2px 4px rgba(38, 166, 154, 0.20);
}
.vm-btn-pro-block {
  width: 100%;
}
.vm-btn-pro-lg {
  padding: 14px 24px;
  font-size: 15px;
}
.vm-btn-pro-sm {
  padding: 7px 13px;
  font-size: 13px;
}
.vm-btn-pro-light {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.vm-btn-pro-light:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.45);
}
.vm-btn-pro-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.vm-btn-pro-ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
}
.vm-btn-pro-ghost {
  background: transparent;
  border-color: var(--vm-pro-line);
  color: var(--vm-pro-ink-soft);
}
.vm-btn-pro-ghost:hover {
  background: var(--vm-pro-line-soft);
  color: var(--vm-pro-ink);
}
.vm-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
}

/* Tabs — refined active indicator */
.vm-dash-tab.is-active {
  position: relative;
}
.vm-dash-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 1px;
}

/* Stat cards — gradient sheen */
.vm-stat-card {
  position: relative;
  overflow: hidden;
}
.vm-stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 200%;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  pointer-events: none;
  transform: rotate(15deg);
}

/* Selfie dropzone — improved checkerboard for transparency preview */
.vm-selfie-preview-area img {
  background:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #fff;
}

/* Status pill — softer background tints */
.vm-selfie-status-ok,
.vm-selfie-status-warn,
.vm-selfie-status-err {
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-block;
  line-height: 1.4;
}
.vm-selfie-status-ok   { background: var(--vm-pro-green-soft); }
.vm-selfie-status-warn { background: var(--vm-pro-yellow-soft); }
.vm-selfie-status-err  { background: var(--vm-pro-red-soft); }

/* Sticky tabs — smoother backdrop */
.vm-dash-tabs {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Forms — refined focus rings */
.vm-form input[type="text"]:focus,
.vm-form input[type="email"]:focus,
.vm-form input[type="number"]:focus,
.vm-form input[type="password"]:focus,
.vm-form input[type="tel"]:focus,
.vm-form input[type="url"]:focus,
.vm-form textarea:focus,
.vm-form select:focus {
  outline: none;
  border-color: var(--vm-pro-brand);
  box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.14);
}
.vm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vm-input-ico {
  position: absolute;
  left: 12px;
  font-size: 15px;
  opacity: 0.6;
  pointer-events: none;
}
.vm-input-wrap input {
  padding-left: 36px !important;
}

/* Empty state — pro style */
.vm-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--vm-pro-card);
  border: 1.5px dashed var(--vm-pro-line);
  border-radius: var(--vm-pro-radius);
}
.vm-empty-state-ico {
  font-size: 48px;
  opacity: 0.6;
  margin-bottom: 12px;
}
.vm-empty-state h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--vm-pro-ink);
}
.vm-empty-state p {
  margin: 0 0 16px;
  color: var(--vm-pro-ink-soft);
  font-size: 14px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Quick action cards — lift on hover */
.vm-quick-action {
  transition: all var(--vm-pro-transition);
}
.vm-quick-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--vm-pro-shadow-lg);
  border-color: var(--vm-pro-brand);
}

/* Cart grid cards — subtle hover */
.vm-cart-card-pro {
  transition: all var(--vm-pro-transition);
}
.vm-cart-card-pro:hover {
  transform: translateY(-2px);
  box-shadow: var(--vm-pro-shadow-lg);
}

/* ==========================================================================
   v1.0.9 — New template preview text overlays + info cards
   ========================================================================== */

/* --- Live preview frame text overlays ----------------------------------- */
/* v1.0.15 — the preview now mirrors the final PHP GD cart-builder output.
   Frame positions use percentages derived from cart-frames.json pixel
   coordinates, so what you see in the preview is what gets generated. */
.preview-frame {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed rgba(38, 166, 154, 0.35);
  border-radius: 4px;
  overflow: hidden;
}
/* Text-only frames (title_1..4) have no image, no border, no background —
   they are transparent overlays on the product header bars. */
.preview-frame-text-only {
  border: none !important;
  background: transparent !important;
  pointer-events: none;
}
/* The old .frame-label debug text is no longer rendered in the HTML (v1.0.15),
   but we hide it defensively in case any stale markup remains. */
.preview-frame .frame-label {
  display: none !important;
}
.preview-frame .frame-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
  position: relative;
  z-index: 2;
}
.preview-frame.has-image .frame-image { display: block; }
.preview-frame .frame-text {
  position: relative;
  z-index: 4;
  text-align: center;
  pointer-events: none;
  padding: 0 4px;
  line-height: 1.2;
  font-family: 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif;
}

/* v1.0.25 — product title is now HIDDEN. The .frame-text-title class is
   kept for backwards compat but should not be used. The teal header bars
   in the preview are blank (matching the PHP GD render). */
.frame-text-title {
  display: none;
}

/* v1.0.24 — kraft-brown price tag. The price frame now has a brown
   background (see .preview-frame-price_* below) holding BOTH the price
   (large, bold, black) and the description (smaller, black). */
.frame-text-price {
  font-weight: 700;
  font-size: 15px;
  color: #1c1c1c;
  font-family: 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif;
  line-height: 1.2;
  display: block;
  text-align: center;
  width: 100%;
}
.frame-text-price-desc {
  font-weight: 400;
  font-size: 9px;
  color: #1c1c1c;
  font-family: 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif;
  line-height: 1.25;
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 3px;
  padding: 0 4px;
  word-wrap: break-word;
}
/* v1.0.29 — business name: bold SANS-SERIF, title-case (the vendor's
   actual store name as entered — no longer force-uppercased), black,
   matching the v1.0.27 PHP GD cart-builder render. The yellow banner
   background is painted on the parent .preview-frame-business_name
   below so the text sits on the bright #F2D725 banner. */
.frame-text-business {
  font-weight: 700;
  font-size: 16px;
  color: #1c1c1c;
  letter-spacing: 0.02em;
  font-family: 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif;
}

/* Vendor info panel — v1.0.18: "Hi I'm [Name]!" (red, bold) at top, then
   the bio paragraph below. Matches the PHP GD layout (screenshot 1). */
.frame-text-vendor-name {
  font-weight: 700;
  font-size: 14px;
  color: #a02828;
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  width: 100%;
  text-align: center;
  font-family: 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif;
}
.frame-text-vendor-bio {
  font-size: 11px;
  color: #1c1c1c;
  margin-bottom: 0;
  font-family: 'Liberation Sans', 'DejaVu Sans', sans-serif;
  display: block;
  width: 94%;
  text-align: center;
  line-height: 1.35;
}
/* Vendor ambition paragraph — v1.0.18: separate frame, NO heading, just the
   paragraph the vendor wrote (screenshot 2). */
.frame-text-vendor-amb {
  font-size: 12px;
  color: #1c1c1c;
  margin-bottom: 0;
  font-family: 'Liberation Sans', 'DejaVu Sans', sans-serif;
  display: block;
  width: 94%;
  text-align: center;
  line-height: 1.4;
}

/* Stats panel — v1.0.18: pitch number (bold, no label) on top, then a row
   with a red location pin + city on the left and a light products box on the
   right. Matches screenshot 3. */
.frame-text-stats-pitch {
  font-size: 14px;
  color: #1c1c1c;
  font-family: 'Liberation Sans', 'DejaVu Sans', sans-serif;
  font-weight: 700;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 4px;
}
.frame-text-stats-locrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
  margin-top: 2px;
}
.frame-text-stats-locrow .vm-pin-ico {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: #a02828;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: inline-block;
  box-shadow: inset 0 0 0 2px #f0e7d6;
}
.frame-text-stats-loc {
  font-size: 12px;
  color: #1c1c1c;
  font-weight: 700;
  font-family: 'Liberation Sans', 'DejaVu Sans', sans-serif;
  flex: 0 1 auto;
}
.frame-text-stats-prodbox {
  font-size: 11px;
  color: #1c1c1c;
  font-weight: 700;
  font-family: 'Liberation Sans', 'DejaVu Sans', sans-serif;
  background: #ebe8e1;
  border: 1px solid #beb9ad;
  border-radius: 3px;
  padding: 3px 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Legacy stats-row classes (v1.0.15..v1.0.17) kept for backward compat but
   hidden — the new stats panel uses the classes above. */
.frame-text-stats-row1,
.frame-text-stats-row2,
.frame-text-stats-row3,
.frame-text-stats-row4 {
  display: none;
}
/* Keep the old .frame-text-stats class for backward compat */
.frame-text-stats {
  font-size: 9px;
  color: #ffffff;
  font-family: 'Liberation Sans', 'DejaVu Sans', sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Frame role-specific styling */
/* v1.0.29 — business_name frame now paints the bright #F2D725 yellow
   banner background (matching the v1.0.27 PHP GD cart-builder render)
   so the preview matches the final generated cart image. The vendor's
   store name sits on top in bold black sans-serif, title-case. */
.preview-frame-business_name {
  background: #F2D725;
  border: 1px solid rgba(160, 130, 30, 0.35);
  border-radius: 2px;
}
/* Vendor info panel — v1.0.18: "Hi I'm [Name]!" (red, top) + bio paragraph
   below. Matches the PHP GD render (screenshot 1). The whole frame is
   covered with a cream background in the final image, so the preview
   mirrors that with a matching fill. */
.preview-frame-vendor_info {
  background: #f0e7d6;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 10px 8px 10px;
  border-color: rgba(180, 150, 100, 0.35);
}
/* Vendor ambition panel — v1.0.18: separate frame below vendor_info,
   showing ONLY the ambition paragraph (no heading). */
.preview-frame-vendor_ambition {
  background: #f0e7d6;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-color: rgba(180, 150, 100, 0.35);
}
/* Vendor stats panel — v1.0.18: pitch number (top) + location pin row +
   products box. No business name / member-since / rating. */
.preview-frame-vendor_stats {
  background: #f0e7d6;
  justify-content: flex-start;
  padding: 10px 8px;
  border-color: rgba(180, 150, 100, 0.35);
}
.preview-frame-selfie {
  background: transparent;
  border-color: transparent;
}
.preview-frame-price_1, .preview-frame-price_2,
.preview-frame-price_3, .preview-frame-price_4 {
  /* v1.0.29 — sync preview with the v1.0.27 PHP GD cart-builder render:
     warm-brown #8F755D background (pixel-sampled from the reference
     screenshot) with a darker #6B5640 border. Previously the preview
     used the older #C9A876 / #8A6A3C colours which no longer match
     the final generated cart image. The brown rectangle fully covers
     the template's baked-in yellow starburst so the tag looks clean. */
  background: #8F755D;
  border: 2px solid #6B5640;
  border-radius: 4px;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6px;
}
/* Product frames — transparent so the template's white interior shows
   through; the product image is placed inside. */
.preview-frame-product_1, .preview-frame-product_2,
.preview-frame-product_3, .preview-frame-product_4 {
  background: transparent;
  border-color: transparent;
}
/* v1.0.25 — title frames: cover the template's baked-in "PRODUCT 1..4"
   text with a solid teal rectangle so the bars are blank (matching the
   PHP GD render which no longer renders product titles). */
.preview-frame-title_1, .preview-frame-title_2,
.preview-frame-title_3, .preview-frame-title_4 {
  background: #26A69A;
  border: none;
}

/* --- Vendor info / hint cards on upload page ---------------------------- */
.vm-info-card {
  border-radius: 12px;
  padding: 16px 18px;
  margin: 14px 0 22px;
  border: 1px solid;
  position: relative;
}
.vm-info-card-teal {
  background: linear-gradient(135deg, rgba(38,166,154,0.08), rgba(38,166,154,0.02));
  border-color: rgba(38,166,154,0.35);
}
.vm-info-card-yellow {
  background: linear-gradient(135deg, rgba(255,209,89,0.18), rgba(255,209,89,0.05));
  border-color: rgba(220,170,50,0.5);
}
.vm-info-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--vm-pro-ink, #1c1c1c);
}
.vm-info-card-ico {
  font-size: 18px;
  line-height: 1;
}
.vm-info-card-body p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft, #555);
  line-height: 1.5;
}
.vm-info-card-body p strong {
  color: var(--vm-pro-ink, #1c1c1c);
  font-weight: 600;
}
.vm-info-card-hint {
  margin-top: 8px !important;
  font-size: 12px !important;
  color: var(--vm-pro-brand, #26a69a) !important;
}
.vm-info-card-hint a {
  color: var(--vm-pro-brand, #26a69a);
  text-decoration: underline;
  font-weight: 600;
}

/* --- Store profile bio/ambition fields ---------------------------------- */
#vendor_bio, #vendor_ambition {
  font-family: inherit;
  resize: vertical;
  min-height: 70px;
}

/* --- Wizard header pro polish ------------------------------------------- */
.vm-wizard-header-info p {
  font-size: 14px;
  line-height: 1.55;
  max-width: 580px;
  color: var(--vm-pro-ink-soft, #555);
}

/* =========================================================================
   v1.0.22 — Withdraw tab styles
   ========================================================================= */
.vm-withdraw-balance {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  border-radius: var(--vm-pro-radius, 12px);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.10);
}
.vm-withdraw-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vm-withdraw-balance-row + .vm-withdraw-balance-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(16, 185, 129, 0.35);
}
.vm-withdraw-balance-label {
  font-size: 13px;
  font-weight: 600;
  color: #065f46;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vm-withdraw-balance-amt {
  font-size: 28px;
  font-weight: 800;
  color: #064e3b;
  line-height: 1;
}
.vm-withdraw-balance-sub span {
  font-size: 13px;
  color: #047857;
}
.vm-withdraw-balance-sub span:last-child {
  font-weight: 600;
}

.vm-withdraw-nomethod {
  margin-bottom: 20px;
}

.vm-withdraw-request {
  background: var(--vm-pro-card, #fff);
  border: 1px solid var(--vm-pro-line, #e5e7eb);
  border-radius: var(--vm-pro-radius, 12px);
  padding: 20px;
  margin-bottom: 28px;
  text-align: center;
}
.vm-withdraw-request .vm-help {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft, #555);
}
.vm-withdraw-request .vm-btn-pro {
  display: inline-flex;
}
.vm-help-warn {
  margin-top: 10px !important;
  color: #b45309 !important;
  font-weight: 600;
}

.vm-withdraw-method {
  background: var(--vm-pro-card, #fff);
  border: 1px solid var(--vm-pro-line, #e5e7eb);
  border-radius: var(--vm-pro-radius, 12px);
  padding: 22px;
  margin-bottom: 28px;
}
.vm-withdraw-method > h3,
.vm-withdraw-history > h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--vm-pro-ink, #111);
}
.vm-withdraw-method > .vm-help {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--vm-pro-ink-soft, #555);
}

/* Radio card toggle for payout method */
.vm-withdraw-method-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vm-wm-opt {
  cursor: pointer;
  margin: 0;
}
.vm-wm-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vm-wm-opt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--vm-pro-line, #e5e7eb);
  border-radius: var(--vm-pro-radius-sm, 10px);
  background: #fff;
  transition: all 0.16s ease;
}
.vm-wm-opt-ico {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.vm-wm-opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vm-wm-opt-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--vm-pro-ink, #111);
}
.vm-wm-opt-text small {
  font-size: 12px;
  color: var(--vm-pro-ink-soft, #777);
}
.vm-wm-opt:hover .vm-wm-opt-card {
  border-color: var(--vm-pro-brand, #26a69a);
  transform: translateY(-1px);
}
.vm-wm-opt input[type="radio"]:checked + .vm-wm-opt-card {
  border-color: var(--vm-pro-brand, #26a69a);
  background: linear-gradient(135deg, rgba(38,166,154,0.08) 0%, rgba(38,166,154,0.03) 100%);
  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.18);
}
@media (max-width: 560px) {
  .vm-withdraw-method-toggle { grid-template-columns: 1fr; }
}

.vm-wm-fields {
  margin-top: 18px;
}

/* Withdrawal history list */
.vm-withdraw-history {
  background: var(--vm-pro-card, #fff);
  border: 1px solid var(--vm-pro-line, #e5e7eb);
  border-radius: var(--vm-pro-radius, 12px);
  padding: 22px;
}
.vm-withdraw-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.vm-wh-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--vm-pro-radius-sm, 10px);
  border: 1px solid var(--vm-pro-line, #e5e7eb);
  background: #fff;
}
.vm-wh-amt {
  font-size: 18px;
  font-weight: 800;
  color: var(--vm-pro-ink, #111);
  min-width: 90px;
}
.vm-wh-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.vm-wh-method {
  font-size: 12px;
  font-weight: 700;
  color: var(--vm-pro-ink-soft, #555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vm-wh-date {
  font-size: 12px;
  color: var(--vm-pro-ink-soft, #888);
}
.vm-wh-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 20px;
}
.vm-wh-pending .vm-wh-status {
  background: #fef3c7;
  color: #92400e;
}
.vm-wh-pending {
  border-left: 4px solid #f59e0b;
}
.vm-wh-released .vm-wh-status {
  background: #d1fae5;
  color: #065f46;
}
.vm-wh-released {
  border-left: 4px solid #10b981;
}
.vm-wh-cancelled .vm-wh-status {
  background: #fee2e2;
  color: #991b1b;
}
.vm-wh-cancelled {
  border-left: 4px solid #ef4444;
  opacity: 0.75;
}
@media (max-width: 560px) {
  .vm-wh-row { flex-wrap: wrap; }
  .vm-wh-amt { min-width: 0; }
}