/*
 * TESLASHOP.GE — EV HUB Design System v2.0
 * Dark + Light · Mobile-first · Vanilla CSS · isolated under .evx-app
 */

:root {
  --evx-red-50: #fff1f2;
  --evx-red-100: #ffe4e6;
  --evx-red-200: #fecdd3;
  --evx-red-400: #fb7185;
  --evx-red-500: #ef3340;
  --evx-red-600: #dc1f2b;
  --evx-red-700: #b91420;
  --evx-navy-950: #070c14;
  --evx-navy-900: #0d1522;
  --evx-navy-850: #121d2c;
  --evx-navy-800: #182638;
  --evx-navy-700: #24364d;
  --evx-slate-25: #fcfcfd;
  --evx-slate-50: #f7f8fa;
  --evx-slate-100: #eef1f5;
  --evx-slate-200: #dfe4eb;
  --evx-slate-300: #cbd3dd;
  --evx-slate-400: #98a3b2;
  --evx-slate-500: #687486;
  --evx-slate-600: #4d5969;
  --evx-slate-700: #344052;
  --evx-slate-800: #1f2938;
  --evx-slate-900: #111827;
  --evx-white: #ffffff;
  --evx-black: #05070a;
  --evx-green-500: #18b56b;
  --evx-green-600: #0b9655;
  --evx-blue-500: #2f80ed;
  --evx-blue-600: #1967d2;
  --evx-purple-500: #7c5ce7;
  --evx-purple-600: #6545d4;
  --evx-orange-500: #f29a38;
  --evx-orange-600: #d97813;
  --evx-teal-500: #12a6a6;
  --evx-coral-500: #ef6a5b;
  --evx-yellow-500: #f5b942;

  --evx-font: "Noto Sans Georgian", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --evx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --evx-space-0: 0;
  --evx-space-1: .25rem;
  --evx-space-2: .5rem;
  --evx-space-3: .75rem;
  --evx-space-4: 1rem;
  --evx-space-5: 1.25rem;
  --evx-space-6: 1.5rem;
  --evx-space-8: 2rem;
  --evx-space-10: 2.5rem;
  --evx-space-12: 3rem;
  --evx-space-16: 4rem;
  --evx-space-20: 5rem;

  --evx-radius-xs: .5rem;
  --evx-radius-sm: .75rem;
  --evx-radius-md: 1rem;
  --evx-radius-lg: 1.25rem;
  --evx-radius-xl: 1.5rem;
  --evx-radius-2xl: 2rem;
  --evx-radius-pill: 999rem;

  --evx-control-sm: 2.75rem;
  --evx-control: 3.25rem;
  --evx-control-lg: 3.75rem;
  --evx-header-height: 4.5rem;
  --evx-mobile-nav-height: 5rem;
  --evx-container: 94rem;
  --evx-gutter: 1rem;
  --evx-transition: 180ms cubic-bezier(.2, .8, .2, 1);
  --evx-transition-slow: 320ms cubic-bezier(.2, .8, .2, 1);
  --evx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --evx-safe-top: env(safe-area-inset-top, 0px);

  --evx-accent-products: var(--evx-red-500);
  --evx-accent-cars: #2f6fab;
  --evx-accent-parts: var(--evx-purple-500);
  --evx-accent-chargers: var(--evx-green-500);
  --evx-accent-services: var(--evx-blue-500);
  --evx-accent-shops: var(--evx-orange-500);
  --evx-accent-diy: var(--evx-teal-500);
  --evx-accent-orders: var(--evx-coral-500);
}

@media (min-width: 48rem) {
  :root { --evx-gutter: 1.5rem; }
}

@media (min-width: 75rem) {
  :root { --evx-gutter: 2rem; }
}

.evx-app,
.evx-app[data-evx-theme="light"] {
  color-scheme: light;
  --evx-bg: #f4f6f9;
  --evx-bg-deep: #e9edf3;
  --evx-surface: #ffffff;
  --evx-surface-2: #f8f9fb;
  --evx-surface-3: #eef2f6;
  --evx-surface-raised: #ffffff;
  --evx-overlay: rgba(8, 15, 25, .48);
  --evx-text: #111827;
  --evx-text-strong: #070c14;
  --evx-text-secondary: #4d5969;
  --evx-text-muted: #738095;
  --evx-border: #e0e5ec;
  --evx-border-strong: #cbd3dd;
  --evx-primary: var(--evx-red-500);
  --evx-primary-hover: var(--evx-red-600);
  --evx-primary-soft: var(--evx-red-50);
  --evx-link: #1967d2;
  --evx-focus: rgba(47, 128, 237, .32);
  --evx-success-bg: #eafaf1;
  --evx-success-text: #087443;
  --evx-warning-bg: #fff6e5;
  --evx-warning-text: #9a5a00;
  --evx-danger-bg: #fff0f1;
  --evx-danger-text: #b91420;
  --evx-info-bg: #edf5ff;
  --evx-info-text: #165eaf;
  --evx-shadow-card: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
  --evx-shadow-float: 0 18px 46px rgba(16, 24, 40, .14);
  --evx-shadow-modal: 0 28px 90px rgba(8, 15, 25, .26);
  --evx-glass: rgba(255, 255, 255, .88);
  --evx-chart-grid: rgba(52, 64, 82, .12);
  --evx-chart-fill: rgba(239, 51, 64, .14);
}

.evx-app[data-evx-theme="dark"] {
  color-scheme: dark;
  --evx-bg: #08101a;
  --evx-bg-deep: #050a11;
  --evx-surface: #0e1824;
  --evx-surface-2: #121f2d;
  --evx-surface-3: #182736;
  --evx-surface-raised: #132231;
  --evx-overlay: rgba(0, 0, 0, .72);
  --evx-text: #eef3f8;
  --evx-text-strong: #ffffff;
  --evx-text-secondary: #b5c0cd;
  --evx-text-muted: #7f8da0;
  --evx-border: #223346;
  --evx-border-strong: #34495f;
  --evx-primary: #f03a45;
  --evx-primary-hover: #ff5660;
  --evx-primary-soft: rgba(239, 51, 64, .12);
  --evx-link: #67a9ff;
  --evx-focus: rgba(103, 169, 255, .38);
  --evx-success-bg: rgba(24, 181, 107, .12);
  --evx-success-text: #58d596;
  --evx-warning-bg: rgba(245, 185, 66, .13);
  --evx-warning-text: #ffd374;
  --evx-danger-bg: rgba(239, 51, 64, .14);
  --evx-danger-text: #ff7a83;
  --evx-info-bg: rgba(47, 128, 237, .14);
  --evx-info-text: #7bb5ff;
  --evx-shadow-card: 0 1px 0 rgba(255, 255, 255, .02), 0 12px 34px rgba(0, 0, 0, .26);
  --evx-shadow-float: 0 20px 56px rgba(0, 0, 0, .46);
  --evx-shadow-modal: 0 32px 100px rgba(0, 0, 0, .72);
  --evx-glass: rgba(9, 17, 27, .88);
  --evx-chart-grid: rgba(181, 192, 205, .12);
  --evx-chart-fill: rgba(239, 51, 64, .18);
}

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

html:has(.evx-app) {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.evx-app {
  min-width: 20rem;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  color: var(--evx-text);
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--evx-primary) 10%, transparent), transparent 30rem),
    var(--evx-bg);
  font-family: var(--evx-font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color var(--evx-transition-slow), background var(--evx-transition-slow);
}

.evx-app :where(h1, h2, h3, h4, h5, h6, p) { overflow-wrap: anywhere; }
.evx-app :where(img, video, canvas, svg) { max-width: 100%; }
.evx-app img { height: auto; }
.evx-app :where(button, input, select, textarea) { font: inherit; }
.evx-app a { color: inherit; }
.evx-app [hidden] { display: none !important; }
.evx-app :focus-visible { outline: 3px solid var(--evx-focus); outline-offset: 2px; }
.evx-app :where(button, a, [role="button"]) { -webkit-tap-highlight-color: transparent; }
.evx-app :where(button, input, select, textarea):disabled,
.evx-app [aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

.evx-container {
  width: min(100% - (2 * var(--evx-gutter)), var(--evx-container));
  min-width: 0;
  margin-inline: auto;
}

.evx-page {
  min-width: 0;
  padding-block: var(--evx-space-5) calc(var(--evx-mobile-nav-height) + var(--evx-safe-bottom) + var(--evx-space-8));
}

.evx-stack { display: flex; flex-direction: column; min-width: 0; gap: var(--evx-stack-gap, var(--evx-space-4)); }
.evx-cluster { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: var(--evx-cluster-gap, var(--evx-space-3)); }
.evx-split { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; justify-content: space-between; gap: var(--evx-space-4); }
.evx-grid { display: grid; min-width: 0; grid-template-columns: repeat(var(--evx-grid-cols, 1), minmax(0, 1fr)); gap: var(--evx-grid-gap, var(--evx-space-4)); }
.evx-full { width: 100%; }
.evx-min-0 { min-width: 0; }
.evx-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.evx-display,
.evx-page-title,
.evx-section-title,
.evx-card-title { margin: 0; color: var(--evx-text-strong); font-weight: 800; letter-spacing: -.028em; }
.evx-display { font-size: clamp(2.15rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.048em; }
.evx-page-title { font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.1; }
.evx-section-title { font-size: clamp(1.25rem, 3vw, 1.85rem); line-height: 1.2; }
.evx-card-title { font-size: 1rem; line-height: 1.35; }
.evx-lead { margin: 0; color: var(--evx-text-secondary); font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.65; }
.evx-body { margin: 0; color: var(--evx-text-secondary); }
.evx-body-sm { margin: 0; color: var(--evx-text-secondary); font-size: .875rem; }
.evx-caption { margin: 0; color: var(--evx-text-muted); font-size: .75rem; line-height: 1.45; }
.evx-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--evx-primary); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.evx-kbd { display: inline-flex; min-width: 1.6rem; min-height: 1.55rem; align-items: center; justify-content: center; padding-inline: .4rem; border: 1px solid var(--evx-border-strong); border-bottom-width: 2px; border-radius: .4rem; color: var(--evx-text-secondary); background: var(--evx-surface-2); font: 700 .72rem/1 var(--evx-font-mono); }

.evx-surface {
  min-width: 0;
  border: 1px solid var(--evx-border);
  border-radius: var(--evx-radius-lg);
  background: var(--evx-surface);
  box-shadow: var(--evx-shadow-card);
}
.evx-surface--flat { box-shadow: none; }
.evx-surface--raised { background: var(--evx-surface-raised); box-shadow: var(--evx-shadow-float); }
.evx-surface__body { padding: var(--evx-space-5); }
.evx-surface__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--evx-space-3); padding: var(--evx-space-5); border-bottom: 1px solid var(--evx-border); }
.evx-surface__footer { padding: var(--evx-space-4) var(--evx-space-5); border-top: 1px solid var(--evx-border); }

.evx-btn {
  --evx-btn-bg: var(--evx-primary);
  --evx-btn-color: #fff;
  --evx-btn-border: transparent;
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: var(--evx-control);
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .78rem 1.05rem;
  border: 1px solid var(--evx-btn-border);
  border-radius: var(--evx-radius-sm);
  color: var(--evx-btn-color);
  background: var(--evx-btn-bg);
  font-size: .9375rem;
  font-weight: 780;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--evx-transition), background var(--evx-transition), border-color var(--evx-transition), box-shadow var(--evx-transition), color var(--evx-transition);
}
.evx-btn:hover { transform: translateY(-1px); background: var(--evx-primary-hover); box-shadow: 0 8px 20px color-mix(in srgb, var(--evx-primary) 24%, transparent); }
.evx-btn:active { transform: translateY(0); }
.evx-btn--secondary { --evx-btn-bg: var(--evx-text-strong); --evx-btn-color: var(--evx-bg); }
.evx-btn--outline { --evx-btn-bg: transparent; --evx-btn-color: var(--evx-text); --evx-btn-border: var(--evx-border-strong); }
.evx-btn--outline:hover { background: var(--evx-surface-2); box-shadow: none; }
.evx-btn--ghost { --evx-btn-bg: transparent; --evx-btn-color: var(--evx-text-secondary); --evx-btn-border: transparent; }
.evx-btn--ghost:hover { background: var(--evx-surface-3); color: var(--evx-text); box-shadow: none; }
.evx-btn--danger { --evx-btn-bg: var(--evx-red-600); --evx-btn-color: #fff; }
.evx-btn--success { --evx-btn-bg: var(--evx-green-600); --evx-btn-color: #fff; }
.evx-btn--sm { min-height: var(--evx-control-sm); padding: .62rem .85rem; font-size: .8125rem; }
.evx-btn--lg { min-height: var(--evx-control-lg); padding: .9rem 1.25rem; font-size: 1rem; border-radius: var(--evx-radius-md); }
.evx-btn--block { width: 100%; }
.evx-btn[data-loading="true"] { color: transparent; pointer-events: none; }
.evx-btn[data-loading="true"]::after { content: ""; position: absolute; width: 1.15rem; height: 1.15rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; animation: evx-spin .75s linear infinite; }

.evx-icon-btn {
  display: inline-grid;
  width: var(--evx-control);
  height: var(--evx-control);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--evx-border);
  border-radius: var(--evx-radius-sm);
  color: var(--evx-text-secondary);
  background: var(--evx-surface);
  cursor: pointer;
  transition: color var(--evx-transition), background var(--evx-transition), border-color var(--evx-transition), transform var(--evx-transition);
}
.evx-icon-btn:hover { color: var(--evx-text-strong); background: var(--evx-surface-2); border-color: var(--evx-border-strong); transform: translateY(-1px); }
.evx-icon-btn--plain { border-color: transparent; background: transparent; }

.evx-field { display: flex; min-width: 0; flex-direction: column; gap: .5rem; }
.evx-label { color: var(--evx-text); font-size: .875rem; font-weight: 730; }
.evx-label__required { color: var(--evx-primary); }
.evx-help { color: var(--evx-text-muted); font-size: .78rem; line-height: 1.45; }
.evx-error { color: var(--evx-danger-text); font-size: .8rem; font-weight: 650; }
.evx-input,
.evx-select,
.evx-textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--evx-control);
  padding: .78rem .95rem;
  border: 1px solid var(--evx-border-strong);
  border-radius: var(--evx-radius-sm);
  color: var(--evx-text);
  background: var(--evx-surface);
  font-size: 1rem;
  line-height: 1.3;
  appearance: none;
  transition: border-color var(--evx-transition), box-shadow var(--evx-transition), background var(--evx-transition);
}
.evx-input::placeholder,
.evx-textarea::placeholder { color: var(--evx-text-muted); }
.evx-input:hover,
.evx-select:hover,
.evx-textarea:hover { border-color: var(--evx-text-muted); }
.evx-input:focus,
.evx-select:focus,
.evx-textarea:focus { border-color: var(--evx-link); box-shadow: 0 0 0 4px var(--evx-focus); outline: 0; }
.evx-textarea { min-height: 8rem; resize: vertical; }
.evx-field.is-error :where(.evx-input, .evx-select, .evx-textarea) { border-color: var(--evx-red-500); }
.evx-field.is-error :where(.evx-input, .evx-select, .evx-textarea):focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--evx-red-500) 28%, transparent); }
.evx-select-wrap { position: relative; min-width: 0; }
.evx-select-wrap::after { content: ""; position: absolute; top: 50%; right: 1rem; width: .55rem; height: .55rem; border-right: 2px solid var(--evx-text-muted); border-bottom: 2px solid var(--evx-text-muted); pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.evx-check { display: inline-flex; min-width: 0; align-items: flex-start; gap: .7rem; color: var(--evx-text-secondary); cursor: pointer; }
.evx-check input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: .12rem; accent-color: var(--evx-primary); }
.evx-switch { position: relative; display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; }
.evx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.evx-switch__track { position: relative; width: 3rem; height: 1.75rem; border: 1px solid var(--evx-border-strong); border-radius: 999px; background: var(--evx-surface-3); transition: background var(--evx-transition), border-color var(--evx-transition); }
.evx-switch__track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--evx-white); box-shadow: 0 2px 5px rgba(0,0,0,.22); transition: transform var(--evx-transition); }
.evx-switch input:checked + .evx-switch__track { border-color: var(--evx-primary); background: var(--evx-primary); }
.evx-switch input:checked + .evx-switch__track::after { transform: translateX(1.22rem); }

.evx-input-group { position: relative; min-width: 0; }
.evx-input-group .evx-input { padding-left: 3rem; }
.evx-input-group__icon { position: absolute; top: 50%; left: 1rem; display: grid; place-items: center; color: var(--evx-text-muted); pointer-events: none; transform: translateY(-50%); }

.evx-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-sm); background: var(--evx-surface-2); }
.evx-segmented__item { min-height: 2.45rem; padding: .55rem .8rem; border: 0; border-radius: .55rem; color: var(--evx-text-secondary); background: transparent; font-size: .82rem; font-weight: 720; cursor: pointer; }
.evx-segmented__item.is-active { color: var(--evx-text-strong); background: var(--evx-surface); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.evx-badge { display: inline-flex; min-height: 1.7rem; align-items: center; gap: .4rem; padding: .25rem .55rem; border: 1px solid transparent; border-radius: 999px; color: var(--evx-text-secondary); background: var(--evx-surface-3); font-size: .72rem; font-weight: 750; line-height: 1; }
.evx-badge--primary { color: var(--evx-primary); background: var(--evx-primary-soft); }
.evx-badge--success { color: var(--evx-success-text); background: var(--evx-success-bg); }
.evx-badge--warning { color: var(--evx-warning-text); background: var(--evx-warning-bg); }
.evx-badge--danger { color: var(--evx-danger-text); background: var(--evx-danger-bg); }
.evx-badge--info { color: var(--evx-info-text); background: var(--evx-info-bg); }

.evx-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: 1rem; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-md); color: var(--evx-info-text); background: var(--evx-info-bg); }
.evx-alert--success { color: var(--evx-success-text); background: var(--evx-success-bg); }
.evx-alert--warning { color: var(--evx-warning-text); background: var(--evx-warning-bg); }
.evx-alert--danger { color: var(--evx-danger-text); background: var(--evx-danger-bg); }
.evx-alert__title { margin: 0 0 .15rem; color: currentColor; font-size: .9rem; font-weight: 800; }
.evx-alert__text { margin: 0; color: currentColor; font-size: .82rem; opacity: .9; }

.evx-chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.evx-chip { display: inline-flex; min-height: 2.45rem; align-items: center; gap: .45rem; padding: .55rem .8rem; border: 1px solid var(--evx-border); border-radius: 999px; color: var(--evx-text-secondary); background: var(--evx-surface); font-size: .82rem; font-weight: 680; text-decoration: none; cursor: pointer; }
.evx-chip:hover,
.evx-chip.is-active { border-color: color-mix(in srgb, var(--evx-primary) 55%, var(--evx-border)); color: var(--evx-primary); background: var(--evx-primary-soft); }

.evx-module-card {
  --evx-module-accent: var(--evx-primary);
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 13rem;
  overflow: hidden;
  border: 1px solid var(--evx-border);
  border-radius: var(--evx-radius-xl);
  color: #fff;
  background: var(--evx-navy-900);
  box-shadow: var(--evx-shadow-card);
  text-decoration: none;
  isolation: isolate;
}
.evx-module-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,7,12,.06) 15%, rgba(3,7,12,.88) 100%); }
.evx-module-card__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--evx-transition-slow); }
.evx-module-card__body { align-self: end; padding: 1.15rem; }
.evx-module-card__icon { display: grid; width: 2.6rem; height: 2.6rem; margin-bottom: .75rem; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; color: #fff; background: color-mix(in srgb, var(--evx-module-accent) 70%, transparent); backdrop-filter: blur(8px); }
.evx-module-card__title { margin: 0; font-size: 1.12rem; font-weight: 820; letter-spacing: -.02em; }
.evx-module-card__text { margin: .25rem 0 0; color: rgba(255,255,255,.76); font-size: .8rem; }
.evx-module-card:hover .evx-module-card__media { transform: scale(1.045); }
.evx-module-card:hover { border-color: color-mix(in srgb, var(--evx-module-accent) 58%, transparent); }

.evx-product-card { min-width: 0; overflow: hidden; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-lg); background: var(--evx-surface); box-shadow: var(--evx-shadow-card); transition: transform var(--evx-transition), border-color var(--evx-transition), box-shadow var(--evx-transition); }
.evx-product-card:hover { transform: translateY(-3px); border-color: var(--evx-border-strong); box-shadow: var(--evx-shadow-float); }
.evx-product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--evx-surface-3); }
.evx-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--evx-transition-slow); }
.evx-product-card:hover .evx-product-card__media img { transform: scale(1.035); }
.evx-product-card__top { position: absolute; inset: .75rem .75rem auto; display: flex; justify-content: space-between; gap: .5rem; }
.evx-product-card__body { display: flex; flex-direction: column; gap: .65rem; padding: 1rem; }
.evx-product-card__title { margin: 0; min-height: 2.7em; color: var(--evx-text-strong); font-size: .95rem; font-weight: 780; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.evx-product-card__meta { display: flex; flex-wrap: wrap; gap: .45rem .8rem; color: var(--evx-text-muted); font-size: .75rem; }
.evx-product-card__price { color: var(--evx-text-strong); font-size: 1.22rem; font-weight: 850; letter-spacing: -.02em; }
.evx-product-card__old-price { margin-left: .35rem; color: var(--evx-text-muted); font-size: .78rem; text-decoration: line-through; }

.evx-stat { min-width: 0; padding: 1rem; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-md); background: var(--evx-surface); }
.evx-stat__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.evx-stat__icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .8rem; color: var(--evx-primary); background: var(--evx-primary-soft); }
.evx-stat__value { margin: .8rem 0 .15rem; color: var(--evx-text-strong); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 850; letter-spacing: -.035em; }
.evx-stat__label { margin: 0; color: var(--evx-text-muted); font-size: .78rem; }

.evx-chart {
  position: relative;
  min-height: 17rem;
  overflow: hidden;
  border: 1px solid var(--evx-border);
  border-radius: var(--evx-radius-lg);
  background:
    linear-gradient(var(--evx-chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--evx-chart-grid) 1px, transparent 1px),
    var(--evx-surface);
  background-size: 100% 3.25rem, 4.5rem 100%;
}
.evx-chart__line { position: absolute; inset: 18% 4% 12%; width: 92%; height: 70%; }
.evx-chart__line path { vector-effect: non-scaling-stroke; }

.evx-table-wrap { width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-lg); background: var(--evx-surface); }
.evx-table { width: 100%; border-collapse: collapse; }
.evx-table th,
.evx-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--evx-border); text-align: left; vertical-align: middle; }
.evx-table th { color: var(--evx-text-muted); background: var(--evx-surface-2); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.evx-table td { color: var(--evx-text-secondary); font-size: .84rem; }
.evx-table tr:last-child td { border-bottom: 0; }
.evx-table strong { color: var(--evx-text-strong); }

.evx-nav-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding-bottom: .15rem; border-bottom: 1px solid var(--evx-border); }
.evx-nav-tab { position: relative; min-height: 2.9rem; padding: .7rem .85rem; border: 0; color: var(--evx-text-muted); background: transparent; font-size: .84rem; font-weight: 720; cursor: pointer; }
.evx-nav-tab::after { content: ""; position: absolute; right: .65rem; bottom: -.2rem; left: .65rem; height: 2px; border-radius: 99px; background: transparent; }
.evx-nav-tab.is-active { color: var(--evx-text-strong); }
.evx-nav-tab.is-active::after { background: var(--evx-primary); }

.evx-shell-preview { display: grid; min-height: 34rem; overflow: hidden; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-xl); background: var(--evx-bg-deep); box-shadow: var(--evx-shadow-float); }
.evx-shell-preview__sidebar { display: none; padding: 1rem; border-right: 1px solid var(--evx-border); background: var(--evx-surface); }
.evx-shell-preview__main { min-width: 0; }
.evx-shell-preview__header { display: flex; min-height: 4.2rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--evx-border); background: var(--evx-glass); backdrop-filter: blur(14px); }
.evx-shell-preview__content { padding: 1rem; }
.evx-side-link { display: flex; min-height: 2.85rem; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: .7rem; color: var(--evx-text-secondary); text-decoration: none; font-size: .84rem; font-weight: 680; }
.evx-side-link:hover,
.evx-side-link.is-active { color: var(--evx-text-strong); background: var(--evx-primary-soft); }
.evx-side-link.is-active { color: var(--evx-primary); }

.evx-hero { position: relative; display: grid; min-height: clamp(26rem, 68vw, 42rem); overflow: hidden; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-2xl); background: var(--evx-navy-950); box-shadow: var(--evx-shadow-float); isolation: isolate; }
.evx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,7,13,.94) 0%, rgba(3,7,13,.72) 44%, rgba(3,7,13,.1) 100%); }
.evx-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.evx-hero__content { align-self: end; max-width: 43rem; padding: clamp(1.3rem, 5vw, 4rem); color: #fff; }
.evx-hero .evx-display { color: #fff; }
.evx-hero .evx-lead { color: rgba(255,255,255,.72); }
.evx-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.2rem; }
.evx-hero__stat { padding: .75rem; border: 1px solid rgba(255,255,255,.16); border-radius: .8rem; background: rgba(5,10,17,.48); backdrop-filter: blur(10px); }
.evx-hero__stat strong { display: block; color: #fff; font-size: 1rem; }
.evx-hero__stat span { color: rgba(255,255,255,.62); font-size: .7rem; }

.evx-theme-toggle { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--evx-border); border-radius: 999px; background: var(--evx-surface-2); }
.evx-theme-toggle button { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 0; border-radius: 50%; color: var(--evx-text-muted); background: transparent; cursor: pointer; }
.evx-theme-toggle button.is-active { color: var(--evx-text-strong); background: var(--evx-surface); box-shadow: 0 2px 7px rgba(0,0,0,.12); }

.evx-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; visibility: hidden; padding: 1rem; place-items: center; background: var(--evx-overlay); opacity: 0; transition: opacity var(--evx-transition), visibility var(--evx-transition); }
.evx-overlay.is-open { visibility: visible; opacity: 1; }
.evx-modal { width: min(100%, 36rem); max-height: min(90dvh, 48rem); overflow: auto; border: 1px solid var(--evx-border-strong); border-radius: var(--evx-radius-xl); background: var(--evx-surface-raised); box-shadow: var(--evx-shadow-modal); transform: translateY(1rem) scale(.98); transition: transform var(--evx-transition-slow); }
.evx-overlay.is-open .evx-modal { transform: translateY(0) scale(1); }
.evx-modal__header,
.evx-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.evx-modal__header { border-bottom: 1px solid var(--evx-border); }
.evx-modal__footer { border-top: 1px solid var(--evx-border); }
.evx-modal__body { padding: 1rem; }

.evx-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; background: var(--evx-overlay); opacity: 0; transition: opacity var(--evx-transition), visibility var(--evx-transition); }
.evx-drawer.is-open { visibility: visible; opacity: 1; }
.evx-drawer__panel { position: absolute; inset: auto 0 0; max-height: min(88dvh, 48rem); overflow: auto; border: 1px solid var(--evx-border-strong); border-radius: 1.35rem 1.35rem 0 0; background: var(--evx-surface-raised); box-shadow: var(--evx-shadow-modal); transform: translateY(100%); transition: transform var(--evx-transition-slow); padding-bottom: var(--evx-safe-bottom); }
.evx-drawer.is-open .evx-drawer__panel { transform: translateY(0); }
.evx-drawer__handle { width: 2.75rem; height: .28rem; margin: .7rem auto .15rem; border-radius: 999px; background: var(--evx-border-strong); }

.evx-toast-region { position: fixed; z-index: 1200; right: 1rem; bottom: calc(var(--evx-mobile-nav-height) + var(--evx-safe-bottom) + 1rem); display: grid; width: min(calc(100% - 2rem), 24rem); gap: .65rem; }
.evx-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .85rem; border: 1px solid var(--evx-border-strong); border-radius: var(--evx-radius-md); background: var(--evx-surface-raised); box-shadow: var(--evx-shadow-float); animation: evx-toast-in .24s ease-out; }
.evx-toast__dot { width: .65rem; height: .65rem; margin-top: .35rem; border-radius: 50%; background: var(--evx-blue-500); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--evx-blue-500) 18%, transparent); }
.evx-toast--success .evx-toast__dot { background: var(--evx-green-500); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--evx-green-500) 18%, transparent); }
.evx-toast--warning .evx-toast__dot { background: var(--evx-yellow-500); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--evx-yellow-500) 18%, transparent); }
.evx-toast--error .evx-toast__dot { background: var(--evx-red-500); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--evx-red-500) 18%, transparent); }
.evx-toast__title { margin: 0; color: var(--evx-text-strong); font-size: .85rem; font-weight: 780; }
.evx-toast__text { margin: .15rem 0 0; color: var(--evx-text-secondary); font-size: .78rem; }
.evx-toast__close { width: 2rem; height: 2rem; border: 0; border-radius: .55rem; color: var(--evx-text-muted); background: transparent; cursor: pointer; }

.evx-skeleton { position: relative; overflow: hidden; border-radius: .55rem; background: var(--evx-surface-3); }
.evx-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--evx-white) 14%, transparent), transparent); transform: translateX(-100%); animation: evx-shimmer 1.4s infinite; }
.evx-empty { display: grid; min-height: 16rem; place-items: center; padding: 2rem; text-align: center; }
.evx-empty__icon { display: grid; width: 4.5rem; height: 4.5rem; margin-inline: auto; place-items: center; border-radius: 1.35rem; color: var(--evx-primary); background: var(--evx-primary-soft); }

.evx-bottom-nav { position: fixed; z-index: 900; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(var(--evx-mobile-nav-height) + var(--evx-safe-bottom)); padding: .45rem .5rem calc(.45rem + var(--evx-safe-bottom)); border-top: 1px solid var(--evx-border); background: var(--evx-glass); box-shadow: 0 -12px 32px rgba(0,0,0,.12); backdrop-filter: blur(16px); }
.evx-bottom-nav__item { position: relative; display: flex; min-width: 0; min-height: 3.8rem; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; border-radius: .7rem; color: var(--evx-text-muted); font-size: .64rem; font-weight: 720; text-decoration: none; }
.evx-bottom-nav__item.is-active { color: var(--evx-primary); }
.evx-bottom-nav__add { align-self: start; width: 3.55rem; height: 3.55rem; margin: -.9rem auto 0; border: .28rem solid var(--evx-bg); border-radius: 50%; color: #fff; background: var(--evx-primary); box-shadow: 0 10px 25px color-mix(in srgb, var(--evx-primary) 35%, transparent); }

.evx-logo { display: inline-flex; align-items: center; gap: .25rem; color: var(--evx-text-strong); font-size: 1rem; font-weight: 900; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.evx-logo span { color: var(--evx-primary); }

.evx-preview-header { position: sticky; z-index: 800; top: 0; border-bottom: 1px solid var(--evx-border); background: var(--evx-glass); backdrop-filter: blur(16px); }
.evx-preview-header__inner { display: flex; min-height: var(--evx-header-height); align-items: center; justify-content: space-between; gap: .75rem; }
.evx-preview-search { display: none; min-width: 18rem; max-width: 34rem; flex: 1 1 auto; }

@media (min-width: 40rem) {
  .evx-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .evx-module-grid { --evx-grid-cols: 2; }
  .evx-product-grid { --evx-grid-cols: 2; }
  .evx-stat-grid { --evx-grid-cols: 2; }
}

@media (min-width: 48rem) {
  .evx-page { padding-block: var(--evx-space-8) var(--evx-space-16); }
  .evx-surface__body,
  .evx-surface__header { padding: var(--evx-space-6); }
  .evx-preview-search { display: block; }
  .evx-bottom-nav { display: none; }
  .evx-toast-region { bottom: 1rem; }
  .evx-product-grid { --evx-grid-cols: 3; }
  .evx-stat-grid { --evx-grid-cols: 4; }
  .evx-drawer__panel { inset: 0 0 0 auto; width: min(100%, 28rem); max-height: 100%; border-radius: 0; transform: translateX(100%); }
  .evx-drawer.is-open .evx-drawer__panel { transform: translateX(0); }
  .evx-drawer__handle { display: none; }
}

@media (min-width: 64rem) {
  .evx-module-grid { --evx-grid-cols: 4; }
  .evx-product-grid { --evx-grid-cols: 4; }
  .evx-shell-preview { grid-template-columns: 14rem minmax(0, 1fr); }
  .evx-shell-preview__sidebar { display: block; }
}

@media (max-width: 47.999rem) {
  .evx-table-wrap { border: 0; background: transparent; }
  .evx-table,
  .evx-table tbody,
  .evx-table tr,
  .evx-table td { display: block; width: 100%; }
  .evx-table thead { display: none; }
  .evx-table tbody { display: grid; gap: .75rem; }
  .evx-table tr { padding: .8rem; border: 1px solid var(--evx-border); border-radius: var(--evx-radius-md); background: var(--evx-surface); box-shadow: var(--evx-shadow-card); }
  .evx-table td { display: grid; grid-template-columns: minmax(6.5rem, .8fr) minmax(0, 1.2fr); gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--evx-border); }
  .evx-table td:last-child { border-bottom: 0; }
  .evx-table td::before { content: attr(data-label); color: var(--evx-text-muted); font-size: .72rem; font-weight: 780; }
  .evx-hero::after { background: linear-gradient(180deg, rgba(3,7,13,.14) 12%, rgba(3,7,13,.92) 78%); }
  .evx-hero__media { object-position: 62% 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .evx-app *,
  .evx-app *::before,
  .evx-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .evx-btn,
  .evx-icon-btn,
  .evx-surface,
  .evx-input,
  .evx-select,
  .evx-textarea { border: 1px solid ButtonText; }
}

@keyframes evx-spin { to { transform: rotate(360deg); } }
@keyframes evx-shimmer { to { transform: translateX(100%); } }
@keyframes evx-toast-in { from { opacity: 0; transform: translateY(.7rem); } }