:root {
  --vp-accent: var(--accent, #28e0b5);
  --vp-accent-2: #8b5cf6;
  --vp-ink: #f2f6f5;
  --vp-soft: #b5c0bd;
  --vp-muted: #84918e;
  --vp-bg: #080d0c;
  --vp-bg-raised: #0d1412;
  --vp-surface: #111a17;
  --vp-surface-2: #15211d;
  --vp-line: rgba(224, 244, 235, .11);
  --vp-line-strong: rgba(224, 244, 235, .2);
  --vp-danger: #ff7f87;
  --vp-success: #4de4ad;
  --vp-radius: 20px;
  --vp-radius-sm: 13px;
  --vp-shadow: 0 28px 72px -38px rgba(0, 0, 0, .9);
  --vp-ease: cubic-bezier(.2, .7, .2, 1);
  --vp-max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--vp-ink);
  background:
    radial-gradient(circle at 90% -10%, rgba(45, 223, 176, .12), transparent 29rem),
    radial-gradient(circle at 3% 22%, rgba(139, 92, 246, .10), transparent 25rem),
    var(--vp-bg);
  font-family: Tahoma, Arial, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: .4;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { color: var(--vp-ink); letter-spacing: -.035em; line-height: 1.45; text-wrap: balance; }
:focus-visible { outline: 3px solid rgba(45, 223, 176, .52); outline-offset: 3px; }

.vp-wrap { width: min(100%, var(--vp-max)); margin: 0 auto; padding-inline: 24px; }
.vp-page { min-height: 55vh; padding: 52px 0 80px; }
.vp-section { padding: 82px 0; }
.vp-section--tight { padding-top: 18px; }
.vp-shell { position: relative; isolation: isolate; }
.vp-shell::after {
  position: absolute;
  z-index: -1;
  top: 440px;
  right: 0;
  width: min(44vw, 560px);
  height: 560px;
  content: '';
  border-radius: 50%;
  background: rgba(45, 223, 176, .035);
  filter: blur(20px);
}
.vp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--vp-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.vp-kicker::before { width: 26px; height: 1px; content: ''; background: currentColor; }
.vp-title { margin: 0; font-size: clamp(26px, 3.8vw, 42px); font-weight: 900; }
.vp-lead { max-width: 620px; margin: 11px 0 0; color: var(--vp-soft); font-size: 15px; }
.vp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 30px; }
.vp-section-head--center { display: block; max-width: 630px; margin-inline: auto; text-align: center; }
.vp-section-head--center .vp-lead { margin-inline: auto; }
.vp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--vp-accent);
  font-size: 13px;
  font-weight: 800;
  transition: color .2s ease, transform .2s ease;
}
.vp-link:hover { color: #fff; transform: translateX(-3px); }

.vp-btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  transition: transform .22s var(--vp-ease), box-shadow .22s var(--vp-ease), border-color .22s ease, background .22s ease, color .22s ease;
}
.vp-btn:hover { transform: translateY(-2px); }
.vp-btn:disabled { cursor: not-allowed; opacity: .46; transform: none; }
.vp-btn-primary, .vp-btn-dark {
  color: #05100c;
  background: linear-gradient(135deg, var(--vp-accent), #8ff1ca);
  box-shadow: 0 14px 34px -18px rgba(45, 223, 176, .72);
}
.vp-btn-primary:hover, .vp-btn-dark:hover { box-shadow: 0 20px 38px -17px rgba(45, 223, 176, .85); }
.vp-btn-secondary, .vp-btn-line {
  color: var(--vp-ink);
  border-color: var(--vp-line-strong);
  background: rgba(255, 255, 255, .025);
}
.vp-btn-secondary:hover, .vp-btn-line:hover { color: var(--vp-accent); border-color: var(--vp-accent); background: rgba(45, 223, 176, .07); }
.vp-btn-accent { color: #07110e; background: var(--vp-accent); }
.vp-btn-accent:hover { box-shadow: 0 16px 34px -20px rgba(45, 223, 176, .8); }

/* Header */
.vp-announce {
  position: relative;
  z-index: 65;
  padding: 8px 18px;
  overflow: hidden;
  color: #07110d;
  background: linear-gradient(90deg, #63f0c3, var(--vp-accent), #7e9cff);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
.vp-announce::after {
  position: absolute;
  inset: 0;
  content: '';
  opacity: .28;
  background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,.7) 16px 17px);
  pointer-events: none;
}
.vp-header {
  position: sticky;
  z-index: 60;
  top: 0;
  border-bottom: 1px solid transparent;
  background: rgba(8, 13, 12, .82);
  backdrop-filter: blur(18px) saturate(135%);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.vp-header.scrolled { border-color: var(--vp-line); background: rgba(8, 13, 12, .94); box-shadow: 0 15px 44px -30px #000; }
.vp-nav { display: flex; min-height: 76px; align-items: center; gap: 24px; }
.vp-brand { display: inline-flex; min-width: max-content; align-items: center; gap: 10px; }
.vp-brand__mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: #06100d;
  background: linear-gradient(145deg, var(--vp-accent), #96f6d0);
  box-shadow: 0 9px 26px -17px var(--vp-accent);
  font-size: 17px;
  font-weight: 900;
}
.vp-brand__name { max-width: 190px; overflow: hidden; color: #fff; font-size: 18px; font-weight: 900; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.vp-brand__logo { width: auto; max-width: 174px; height: 40px; object-fit: contain; }
.vp-menu { display: flex; align-items: center; gap: 3px; margin-right: 10px; }
.vp-menu a {
  position: relative;
  padding: 8px 11px;
  color: var(--vp-soft);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}
.vp-menu a:hover, .vp-menu a.is-active { color: #fff; background: rgba(255,255,255,.055); }
.vp-menu a.is-active::after { position: absolute; right: 50%; bottom: -11px; width: 18px; height: 2px; content: ''; border-radius: 999px; background: var(--vp-accent); transform: translateX(50%); }
.vp-spacer { flex: 1; }
.vp-actions { display: flex; align-items: center; gap: 3px; }
.vp-ic {
  position: relative;
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--vp-soft);
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--vp-ease);
}
.vp-ic:hover { color: var(--vp-accent); border-color: var(--vp-line); background: rgba(255,255,255,.045); transform: translateY(-1px); }
.vp-ic svg { width: 19px; height: 19px; }
.vp-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  color: #07110d;
  border: 2px solid var(--vp-bg);
  border-radius: 999px;
  background: var(--vp-accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.vp-burger { display: none; }
.vp-mobile-menu {
  display: none;
  padding: 8px max(20px, calc((100vw - var(--vp-max)) / 2 + 24px)) 17px;
  border-top: 1px solid var(--vp-line);
  background: #0a100e;
}
.vp-mobile-menu.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vp-mobile-menu a { padding: 10px 11px; color: var(--vp-soft); border: 1px solid var(--vp-line); border-radius: 10px; font-size: 13px; font-weight: 700; }
.vp-mobile-menu a:hover { color: var(--vp-accent); border-color: rgba(45, 223, 176, .35); }

/* Home */
.vp-hero { position: relative; min-height: 570px; overflow: hidden; border-bottom: 1px solid var(--vp-line); }
.vp-hero::before, .vp-hero::after { position: absolute; content: ''; pointer-events: none; }
.vp-hero::before { top: -170px; right: -90px; width: 530px; height: 530px; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,255,255,.017), 0 0 0 112px rgba(255,255,255,.012); }
.vp-hero::after { bottom: -84px; left: 13%; width: 280px; height: 280px; border: 1px solid rgba(45, 223, 176, .17); border-radius: 50%; filter: blur(.1px); }
.vp-hero__slide { display: none; min-height: 570px; align-items: center; gap: clamp(28px, 7vw, 96px); }
.vp-hero__slide.active { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(330px, .98fr); }
.vp-hero__copy { position: relative; z-index: 1; padding: 74px 0; }
.vp-hero__title { max-width: 610px; margin: 0 0 17px; font-size: clamp(38px, 5.5vw, 65px); font-weight: 900; letter-spacing: -.065em; line-height: 1.22; }
.vp-hero__title em { color: var(--vp-accent); font-style: normal; }
.vp-hero__copy p { max-width: 530px; margin: 0 0 27px; color: var(--vp-soft); font-size: clamp(14px, 1.5vw, 17px); line-height: 2.1; }
.vp-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-hero__stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 38px; }
.vp-stat { min-width: 100px; padding-left: 18px; border-left: 1px solid var(--vp-line-strong); }
.vp-stat:last-child { padding-left: 0; border-left: 0; }
.vp-stat b { display: block; color: #fff; font-size: 17px; font-weight: 900; line-height: 1.35; }
.vp-stat span { color: var(--vp-muted); font-size: 11.5px; }
.vp-hero__visual { position: relative; min-height: 438px; }
.vp-hero__frame {
  position: absolute;
  inset: 40px 0 35px 5%;
  overflow: hidden;
  border: 1px solid var(--vp-line-strong);
  border-radius: 38% 62% 56% 44% / 38% 43% 57% 62%;
  background: linear-gradient(145deg, rgba(45, 223, 176, .22), rgba(139,92,246,.16) 55%, rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--vp-shadow);
}
.vp-hero__frame::after { position: absolute; inset: 13px; content: ''; border: 1px solid rgba(255,255,255,.13); border-radius: inherit; }
.vp-hero__frame img { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(87%, 430px); height: min(87%, 430px); object-fit: cover; filter: drop-shadow(0 32px 25px rgba(0,0,0,.38)); transform: translate(-50%, -50%) rotate(-6deg); }
.vp-orb { position: absolute; border-radius: 50%; filter: blur(.2px); }
.vp-orb--one { top: 4px; left: 4%; width: 66px; height: 66px; border: 1px solid rgba(45,223,176,.45); box-shadow: inset 0 0 20px rgba(45,223,176,.18); }
.vp-orb--two { right: -8px; bottom: 14px; width: 104px; height: 104px; background: rgba(139,92,246,.2); box-shadow: 0 0 42px rgba(139,92,246,.24); }
.vp-hero__caption { position: absolute; z-index: 2; bottom: 4%; left: -3%; display: flex; align-items: center; gap: 9px; padding: 11px 14px; color: var(--vp-ink); border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(9,14,12,.72); backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; }
.vp-hero__caption i { width: 8px; height: 8px; border-radius: 50%; background: var(--vp-success); box-shadow: 0 0 0 5px rgba(77,228,173,.12); }
.vp-dots { position: absolute; z-index: 4; right: max(24px, calc((100vw - var(--vp-max)) / 2 + 24px)); bottom: 28px; display: flex; align-items: center; gap: 7px; }
.vp-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.28); transition: width .22s ease, background .22s ease; }
.vp-dot.active { width: 28px; background: var(--vp-accent); }
.vp-promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.vp-promo {
  position: relative;
  min-height: 234px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-radius);
  background: linear-gradient(125deg, #13231e, #111a17 54%, #211b34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.vp-promo:nth-child(2n) { background: linear-gradient(125deg, #201b2f, #121a18 58%, #122c28); }
.vp-promo__image { position: absolute; inset: 0 0 0 auto; width: 47%; opacity: .78; }
.vp-promo__image::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, var(--vp-surface) 0%, rgba(17,26,23,.72) 34%, transparent 100%); }
.vp-promo__image img { width: 100%; height: 100%; object-fit: cover; }
.vp-promo__body { position: relative; z-index: 1; max-width: 60%; }
.vp-promo__body h3 { margin-bottom: 7px; font-size: clamp(20px,2.3vw,27px); font-weight: 900; }
.vp-promo__body p { margin-bottom: 17px; color: var(--vp-soft); font-size: 13px; line-height: 1.85; }
.vp-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vp-category {
  display: flex;
  min-height: 130px;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  padding: 15px;
  overflow: hidden;
  color: var(--vp-ink);
  border: 1px solid var(--vp-line);
  border-radius: 16px;
  background: var(--vp-surface);
  transition: border-color .25s ease, background .25s ease, transform .25s var(--vp-ease);
}
.vp-category:hover { border-color: rgba(45,223,176,.46); background: var(--vp-surface-2); transform: translateY(-4px); }
.vp-category__name { position: relative; z-index: 1; max-width: 90px; font-size: 13px; font-weight: 800; line-height: 1.7; }
.vp-category img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--vp-line); border-radius: 50%; opacity: .9; transition: transform .35s var(--vp-ease); }
.vp-category:hover img { transform: scale(1.09) rotate(-5deg); }
.vp-feature-strip { border-block: 1px solid var(--vp-line); background: rgba(255,255,255,.018); }
.vp-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.vp-feature { display: flex; min-height: 126px; align-items: center; gap: 14px; padding: 22px; border-left: 1px solid var(--vp-line); }
.vp-feature:first-child { border-left: 0; }
.vp-feature__icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: var(--vp-accent); border: 1px solid rgba(45,223,176,.22); border-radius: 13px; background: rgba(45,223,176,.075); }
.vp-feature__icon svg { width: 21px; height: 21px; }
.vp-feature b { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 900; }
.vp-feature span { display: block; color: var(--vp-muted); font-size: 11.5px; line-height: 1.7; }
.vp-testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.vp-testimonial { padding: 25px; border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.014)); }
.vp-testimonial__quote { margin: 0 0 16px; color: var(--vp-soft); font-size: 14px; line-height: 2; }
.vp-testimonial__name { display: flex; align-items: center; gap: 9px; color: var(--vp-ink); font-size: 12px; font-weight: 900; }
.vp-testimonial__name::before { width: 26px; height: 1px; content: ''; background: var(--vp-accent); }

/* Product cards */
.vp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vp-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-radius);
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .28s ease, transform .28s var(--vp-ease), box-shadow .28s ease;
}
.vp-card:hover { z-index: 1; border-color: rgba(45,223,176,.43); box-shadow: 0 30px 55px -37px #000, inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(-5px); }
.vp-card-media { position: relative; display: grid; aspect-ratio: 1 / .87; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 33%, rgba(45,223,176,.13), transparent 48%), #0e1512; }
.vp-card-media::after { position: absolute; inset: 0; content: ''; opacity: .55; background: linear-gradient(180deg, transparent 53%, rgba(5,10,8,.45)); pointer-events: none; }
.vp-card-media > a { display: block; width: 100%; height: 100%; }
.vp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--vp-ease), filter .5s ease; }
.vp-card:hover .vp-card-media img { filter: saturate(1.1); transform: scale(1.055); }
.vp-tag { position: absolute; z-index: 2; top: 11px; right: 11px; padding: 4px 8px; color: #08110d; border-radius: 8px; background: var(--vp-accent); font-size: 10.5px; font-weight: 900; line-height: 1.5; }
.vp-wish { position: absolute; z-index: 2; top: 10px; left: 10px; display: grid; width: 33px; height: 33px; place-items: center; color: #c5d1cc; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(6,12,9,.52); backdrop-filter: blur(7px); transition: color .2s ease, background .2s ease, transform .2s var(--vp-ease); }
.vp-wish:hover { color: #ff8897; background: rgba(255,136,151,.13); transform: scale(1.08); }
.vp-wish svg { width: 17px; height: 17px; }
.vp-card-body { display: flex; min-height: 139px; flex: 1; flex-direction: column; padding: 15px; }
.vp-card-body h3 { display: -webkit-box; min-height: 48px; margin: 0; overflow: hidden; color: var(--vp-ink); font-size: 13.5px; font-weight: 800; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vp-card-body > a:hover h3 { color: var(--vp-accent); }
.vp-card-foot { display: flex; align-items: end; justify-content: space-between; gap: 9px; margin-top: auto; padding-top: 12px; }
.vp-price { color: #fff; font-size: 15px; font-weight: 900; line-height: 1.5; white-space: nowrap; }
.vp-price small { color: var(--vp-muted); font-size: 10.5px; font-weight: 500; }
.vp-price-old { display: block; margin-bottom: 1px; color: var(--vp-muted); font-size: 11px; text-decoration: line-through; }
.vp-add { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #08110d; border: 0; border-radius: 11px; background: var(--vp-accent); transition: transform .22s var(--vp-ease), background .22s ease, box-shadow .22s ease; }
.vp-add:hover { background: #a0f6d3; box-shadow: 0 11px 25px -13px var(--vp-accent); transform: rotate(90deg); }
.vp-add:disabled { cursor: not-allowed; opacity: .36; transform: none; }
.vp-add svg { width: 18px; height: 18px; }

/* Footer */
.vp-footer { margin-top: 48px; overflow: hidden; border-top: 1px solid var(--vp-line); background: #0a100e; }
.vp-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--vp-line); }
.vp-footer__top p { max-width: 530px; margin: 0; color: var(--vp-soft); font-size: 13px; }
.vp-footer__grid { display: grid; grid-template-columns: 1.45fr repeat(3, .8fr); gap: 28px; padding: 46px 0 34px; }
.vp-footer h4 { margin: 0 0 13px; color: #fff; font-size: 13px; font-weight: 900; }
.vp-footer__about { max-width: 330px; margin: 14px 0 0; color: var(--vp-muted); font-size: 12.5px; line-height: 2; }
.vp-footer__grid a { display: block; padding: 4px 0; color: var(--vp-soft); font-size: 12.5px; transition: color .2s ease, transform .2s var(--vp-ease); }
.vp-footer__grid a:hover { color: var(--vp-accent); transform: translateX(-3px); }
.vp-socials { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.vp-socials a { display: grid !important; width: 32px; height: 32px; padding: 0 !important; place-items: center; color: var(--vp-soft); border: 1px solid var(--vp-line); border-radius: 9px; background: rgba(255,255,255,.025); font-size: 10.5px !important; font-weight: 900; }
.vp-socials a:hover { color: #08110d !important; border-color: var(--vp-accent); background: var(--vp-accent); transform: translateY(-2px) !important; }
.vp-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 0; border-top: 1px solid var(--vp-line); color: var(--vp-muted); font-size: 11.5px; }

/* Inner pages & forms */
.vp-page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.vp-h1 { margin: 0; font-size: clamp(25px, 3.3vw, 36px); font-weight: 900; }
.vp-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; color: var(--vp-muted); font-size: 12px; }
.vp-breadcrumb a:hover { color: var(--vp-accent); }
.vp-panel { border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.vp-panel--pad { padding: clamp(18px, 3vw, 29px); }
.vp-panel + .vp-panel { margin-top: 18px; }
.vp-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; color: #fff; font-size: 16px; font-weight: 900; }
.vp-panel-title small { color: var(--vp-muted); font-size: 11.5px; font-weight: 500; }
.vp-shop { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.vp-filter { position: sticky; top: 96px; padding: 20px; }
.vp-field { margin-bottom: 15px; }
.vp-label { display: block; margin-bottom: 6px; color: var(--vp-soft); font-size: 12px; font-weight: 800; }
.vp-input {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  color: var(--vp-ink);
  border: 1px solid var(--vp-line-strong);
  border-radius: 11px;
  outline: none;
  background: rgba(0,0,0,.19);
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea.vp-input { min-height: auto; resize: vertical; }
.vp-input::placeholder { color: var(--vp-muted); }
.vp-input:focus { border-color: var(--vp-accent); background: rgba(0,0,0,.29); box-shadow: 0 0 0 3px rgba(45,223,176,.1); }
.vp-divider { height: 1px; margin: 17px 0; background: var(--vp-line); }
.vp-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vp-flex { display: flex; align-items: center; gap: 10px; }
.vp-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vp-error { margin-top: 5px; color: var(--vp-danger); font-size: 11.5px; }
.vp-chip { display: inline-flex; align-items: center; padding: 4px 9px; color: var(--vp-accent); border: 1px solid rgba(45,223,176,.2); border-radius: 7px; background: rgba(45,223,176,.08); font-size: 11px; font-weight: 800; line-height: 1.55; }
.vp-empty { padding: 54px 20px; text-align: center; }
.vp-empty__icon { display: grid; width: 58px; height: 58px; margin: 0 auto 13px; place-items: center; color: var(--vp-accent); border: 1px solid rgba(45,223,176,.22); border-radius: 17px; background: rgba(45,223,176,.08); font-size: 24px; }
.vp-empty p { margin: 0; color: var(--vp-muted); }
.vp-sorts { display: flex; flex-wrap: wrap; gap: 7px; }
.vp-sort {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  color: var(--vp-soft);
  border: 1px solid var(--vp-line);
  border-radius: 9px;
  background: rgba(255,255,255,.018);
  font-size: 11.5px;
  font-weight: 800;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.vp-sort:hover, .vp-sort.active { color: #08110d; border-color: var(--vp-accent); background: var(--vp-accent); }
.vp-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--vp-soft); font-size: 12.5px; font-weight: 700; }
.vp-check input { width: 16px; height: 16px; accent-color: var(--vp-accent); }
.vp-pagination { margin-top: 28px; }
.vp-pagination nav { display: flex; justify-content: center; }
.vp-pagination .pagination { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0; list-style: none; }
.vp-pagination .page-link, .vp-pagination span { display: grid; min-width: 35px; height: 35px; padding: 0 8px; place-items: center; color: var(--vp-soft); border: 1px solid var(--vp-line); border-radius: 9px; background: var(--vp-surface); font-size: 12px; }
.vp-pagination .active .page-link { color: #08110d; border-color: var(--vp-accent); background: var(--vp-accent); }

/* Product view */
.vp-product { display: grid; grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr); gap: clamp(24px, 4.4vw, 56px); padding: clamp(18px, 3vw, 31px); }
.vp-product__gallery { min-width: 0; }
.vp-product__image { position: relative; display: grid; aspect-ratio: 1 / .92; place-items: center; overflow: hidden; border: 1px solid var(--vp-line); border-radius: 17px; background: radial-gradient(circle at 50% 34%, rgba(45,223,176,.14), transparent 48%), #0e1512; }
.vp-product__image img { width: 100%; height: 100%; object-fit: cover; }
.vp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vp-thumbs img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--vp-line); border-radius: 9px; opacity: .78; transition: border-color .2s ease, opacity .2s ease; }
.vp-thumbs img:hover { border-color: var(--vp-accent); opacity: 1; }
.vp-product__content { padding: 6px 0; }
.vp-product__title { margin: 13px 0 16px; font-size: clamp(25px, 3vw, 37px); font-weight: 900; line-height: 1.5; }
.vp-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-choice { cursor: pointer; }
.vp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vp-choice__label { display: inline-flex; min-height: 37px; align-items: center; gap: 7px; padding: 7px 11px; color: var(--vp-soft); border: 1px solid var(--vp-line-strong); border-radius: 10px; font-size: 12px; font-weight: 800; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.vp-choice input:checked + .vp-choice__label { color: #08110d; border-color: var(--vp-accent); background: var(--vp-accent); }
.vp-color-dot { width: 13px; height: 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; }
.vp-price-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 20px 0; padding: 17px 0; border-block: 1px solid var(--vp-line); }
.vp-price--big { font-size: clamp(23px, 3vw, 30px); }
.vp-price--big small { font-size: 11px; }
.vp-discount { padding: 4px 8px; color: #08110d; border-radius: 7px; background: var(--vp-accent); font-size: 11px; font-weight: 900; }
.vp-product-details { display: grid; grid-template-columns: 1.08fr .92fr; gap: 35px; margin-top: 34px; padding: clamp(19px, 3vw, 31px); }
.vp-prose { color: var(--vp-soft); font-size: 13.5px; line-height: 2.2; }
.vp-detail-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vp-detail-table td { padding: 9px 0; border-bottom: 1px solid var(--vp-line); }
.vp-detail-table tr:last-child td { border-bottom: 0; }
.vp-detail-table td:first-child { width: 40%; color: var(--vp-muted); }

/* Cart and checkout */
.vp-cols-2-1 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .9fr); gap: 22px; align-items: start; }
.vp-cart-list { padding: 0 21px; }
.vp-line { display: flex; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--vp-line); }
.vp-line:last-child { border-bottom: 0; }
.vp-line__image { width: 88px; height: 88px; flex: 0 0 88px; object-fit: cover; border: 1px solid var(--vp-line); border-radius: 13px; background: var(--vp-bg-raised); }
.vp-line__title { color: #fff; font-size: 13px; font-weight: 900; }
.vp-line__title:hover { color: var(--vp-accent); }
.vp-line__meta { margin-top: 2px; color: var(--vp-muted); font-size: 11.5px; }
.vp-line__bottom { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.vp-quantity { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--vp-line); border-radius: 10px; background: rgba(0,0,0,.15); }
.vp-qty { display: grid; width: 29px; height: 29px; padding: 0; place-items: center; color: var(--vp-soft); border: 0; border-radius: 7px; background: transparent; font-size: 16px; font-weight: 900; transition: color .2s ease, background .2s ease; }
.vp-qty:hover { color: #08110d; background: var(--vp-accent); }
.vp-quantity__count { min-width: 27px; text-align: center; color: #fff; font-size: 12px; font-weight: 900; }
.vp-remove { min-height: unset; padding: 4px 8px; color: var(--vp-danger); border: 0; background: transparent; font-size: 11px; }
.vp-remove:hover { color: #fff; background: rgba(255,127,135,.12); }
.vp-summary { position: sticky; top: 96px; padding: 21px; }
.vp-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--vp-soft); font-size: 12.5px; }
.vp-summary__row--discount span:last-child { color: var(--vp-danger); }
.vp-summary__total { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid var(--vp-line); color: #fff; font-size: 14px; font-weight: 900; }
.vp-summary__total b { color: var(--vp-accent); font-size: 16px; }
.vp-coupon { display: flex; gap: 7px; margin: 16px 0; }
.vp-coupon .vp-input { min-width: 0; }
.vp-checkout-info { padding: clamp(18px, 3vw, 28px); }
.vp-checkout-summary { padding: 22px; }
.vp-order-item { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: var(--vp-soft); font-size: 12px; line-height: 1.6; }
.vp-order-item span:last-child { flex: 0 0 auto; color: var(--vp-muted); }

/* Auth, success and static pages */
.vp-centered { width: min(100%, 460px); margin-inline: auto; }
.vp-auth { position: relative; padding: clamp(23px, 5vw, 39px); overflow: hidden; }
.vp-auth::before { position: absolute; top: -100px; left: -80px; width: 230px; height: 230px; content: ''; border-radius: 50%; background: rgba(45,223,176,.11); filter: blur(18px); }
.vp-auth > * { position: relative; }
.vp-auth__mark { display: grid; width: 50px; height: 50px; margin: 0 auto 16px; place-items: center; color: #08110d; border-radius: 16px; background: var(--vp-accent); font-size: 20px; font-weight: 900; box-shadow: 0 16px 36px -20px var(--vp-accent); }
.vp-auth__title { margin: 0 0 5px; text-align: center; font-size: 25px; font-weight: 900; }
.vp-auth__lead { margin: 0 0 25px; color: var(--vp-muted); font-size: 12.5px; text-align: center; }
.vp-alert { margin-bottom: 15px; padding: 10px 12px; border: 1px solid rgba(45,223,176,.23); border-radius: 11px; color: var(--vp-accent); background: rgba(45,223,176,.075); font-size: 12px; }
.vp-alert--error { color: var(--vp-danger); border-color: rgba(255,127,135,.23); background: rgba(255,127,135,.075); }
.vp-success-card { padding: clamp(26px, 5vw, 44px); text-align: center; }
.vp-success-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 16px; place-items: center; color: #08110d; border-radius: 22px; background: var(--vp-success); font-size: 28px; box-shadow: 0 19px 42px -25px var(--vp-success); }
.vp-order-overview { margin: 24px 0; padding: 17px; text-align: right; border: 1px solid var(--vp-line); border-radius: 14px; background: rgba(0,0,0,.14); }
.vp-static { width: min(100%, 870px); margin-inline: auto; padding: clamp(22px, 4vw, 42px); }
.vp-static__title { margin: 0 0 18px; font-size: clamp(27px,4vw,40px); font-weight: 900; }
.vp-prose--page { color: var(--vp-soft); font-size: 14px; line-height: 2.35; }
.vp-contact-list { display: grid; gap: 10px; }
.vp-contact-item { display: flex; align-items: center; gap: 11px; padding: 13px; color: var(--vp-soft); border: 1px solid var(--vp-line); border-radius: 12px; background: rgba(255,255,255,.018); font-size: 13px; }
.vp-contact-item b { min-width: 45px; color: var(--vp-accent); font-size: 11px; }
.vp-faq { border-top: 1px solid var(--vp-line); }
.vp-faq details { border-bottom: 1px solid var(--vp-line); }
.vp-faq summary { padding: 16px 28px 16px 0; cursor: pointer; color: #fff; font-size: 13px; font-weight: 900; }
.vp-faq summary::marker { color: var(--vp-accent); }
.vp-faq p { padding-bottom: 17px; margin: 0; color: var(--vp-soft); font-size: 13px; }

/* Customer profile */
.vp-profile { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 22px; align-items: start; }
.vp-profile-nav { position: sticky; top: 96px; padding: 17px; }
.vp-profile-user { display: flex; align-items: center; gap: 10px; padding: 3px 0 17px; margin-bottom: 10px; border-bottom: 1px solid var(--vp-line); }
.vp-profile-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: #08110d; border-radius: 13px; background: linear-gradient(135deg, var(--vp-accent), #a1f7d5); font-size: 16px; font-weight: 900; }
.vp-profile-user b { display: block; overflow: hidden; color: #fff; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.vp-profile-user span { display: block; color: var(--vp-muted); font-size: 10.5px; }
.vp-profile-links { display: grid; gap: 4px; }
.vp-profile-link { display: flex; align-items: center; gap: 9px; padding: 9px 10px; color: var(--vp-soft); border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 800; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.vp-profile-link::before { width: 6px; height: 6px; content: ''; border-radius: 50%; background: currentColor; opacity: .45; }
.vp-profile-link:hover, .vp-profile-link.is-active { color: var(--vp-accent); border-color: rgba(45,223,176,.2); background: rgba(45,223,176,.07); }
.vp-profile-link--logout { width: 100%; margin-top: 5px; color: var(--vp-danger); border: 0; background: transparent; text-align: right; }
.vp-profile-link--logout:hover { color: #fff; background: rgba(255,127,135,.11); }
.vp-profile-body { min-width: 0; }
.vp-profile-hero { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vp-profile-hero p { margin: 7px 0 0; color: var(--vp-muted); font-size: 12.5px; }
.vp-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.vp-profile-stat { padding: 17px; border: 1px solid var(--vp-line); border-radius: 14px; background: rgba(255,255,255,.025); }
.vp-profile-stat span { display: block; color: var(--vp-muted); font-size: 11.5px; }
.vp-profile-stat b { display: block; margin-top: 4px; color: var(--vp-accent); font-size: 23px; font-weight: 900; line-height: 1.2; }
.vp-profile-section { padding: 21px; }
.vp-profile-section + .vp-profile-section { margin-top: 18px; }
.vp-order-list { display: grid; gap: 8px; }
.vp-order-link { display: grid; grid-template-columns: minmax(100px,1.2fr) 1fr auto; align-items: center; gap: 13px; padding: 13px; color: var(--vp-soft); border: 1px solid var(--vp-line); border-radius: 12px; background: rgba(0,0,0,.09); font-size: 12px; transition: border-color .2s ease, transform .2s var(--vp-ease), background .2s ease; }
.vp-order-link:hover { color: #fff; border-color: rgba(45,223,176,.43); background: rgba(45,223,176,.045); transform: translateX(-3px); }
.vp-order-code { display: block; color: #fff; font-size: 12px; font-weight: 900; }
.vp-order-date { display: block; color: var(--vp-muted); font-size: 10.5px; }
.vp-order-amount { color: var(--vp-accent); font-weight: 900; white-space: nowrap; }
.vp-status { display: inline-flex; justify-content: center; padding: 3px 7px; color: var(--vp-accent); border: 1px solid rgba(45,223,176,.18); border-radius: 7px; background: rgba(45,223,176,.07); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.vp-profile-form { display: grid; gap: 13px; }
.vp-empty--small { padding: 30px 15px; }
.vp-empty--small .vp-empty__icon { width: 45px; height: 45px; margin-bottom: 10px; border-radius: 13px; font-size: 18px; }
.vp-order-detail { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px 18px; color: var(--vp-soft); font-size: 12.5px; }
.vp-order-detail span { color: var(--vp-muted); }
.vp-order-detail .vp-order-detail__wide { grid-column: 1 / -1; }
.vp-course { padding: 19px 0; border-bottom: 1px solid var(--vp-line); }
.vp-course:first-child { padding-top: 0; }
.vp-course:last-child { padding-bottom: 0; border-bottom: 0; }
.vp-course__top { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.vp-course h3 { margin: 9px 0 4px; font-size: 17px; font-weight: 900; }
.vp-course p { margin: 0; color: var(--vp-muted); font-size: 12px; }
.vp-course-sessions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.vp-course-session { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 8px; overflow: hidden; color: var(--vp-accent); border: 1px solid rgba(45,223,176,.18); border-radius: 8px; background: rgba(45,223,176,.07); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vp-course-session:hover { color: #08110d; background: var(--vp-accent); }

/* Blog partials come from a shared view; make them part of Vapor without changing shared templates. */
.vp-shell .bh, .vp-shell .bx, .vp-shell .bxs { max-width: var(--vp-max) !important; padding-inline: 24px !important; color: var(--vp-ink) !important; }
.vp-shell .bh { padding-top: 12px !important; padding-bottom: 76px !important; }
.vp-shell .bx, .vp-shell .bxs { padding-top: 52px !important; padding-bottom: 80px !important; }
.vp-shell .bh-head, .vp-shell .bx-head { margin-bottom: 28px !important; }
.vp-shell .bh-head h2, .vp-shell .bx-head h1, .vp-shell .bxs h1, .vp-shell .bxs-rel h2 { color: var(--vp-ink) !important; font-weight: 900 !important; }
.vp-shell .bh-head h2 { font-size: clamp(24px,3.2vw,34px) !important; }
.vp-shell .bx-head p, .vp-shell .bxs-date { color: var(--vp-muted) !important; }
.vp-shell .bh-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 16px !important; }
.vp-shell .bx-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 17px !important; }
.vp-shell .bh-card, .vp-shell .bx-card, .vp-shell .bxs-rel-card { border-color: var(--vp-line) !important; border-radius: var(--vp-radius) !important; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; }
.vp-shell .bh-card:hover, .vp-shell .bx-card:hover { border-color: rgba(45,223,176,.43) !important; box-shadow: 0 25px 48px -35px #000 !important; }
.vp-shell .bh-thumb, .vp-shell .bx-thumb, .vp-shell .bxs-hero, .vp-shell .bxs-rel-card .t { background: radial-gradient(circle at 50% 35%,rgba(45,223,176,.14),transparent 48%),#0e1512 !important; }
.vp-shell .bh-body h3, .vp-shell .bx-body h3, .vp-shell .bxs-rel-card h3 { color: var(--vp-ink) !important; font-weight: 800 !important; }
.vp-shell .bh-body, .vp-shell .bx-body { padding: 15px !important; }
.vp-shell .bx-body p, .vp-shell .bxs-body { color: var(--vp-soft) !important; }
.vp-shell .bh-date, .vp-shell .bx-date { color: var(--vp-muted) !important; }
.vp-shell .bh-all, .vp-shell .bx-more, .vp-shell .bxs-back { color: var(--vp-accent) !important; }
.vp-shell .bx-empty { color: var(--vp-muted) !important; border-color: var(--vp-line) !important; border-radius: var(--vp-radius) !important; background: rgba(255,255,255,.025) !important; }
.vp-shell .bx-pager a, .vp-shell .bx-pager span { color: var(--vp-soft) !important; border-color: var(--vp-line) !important; border-radius: 10px !important; background: var(--vp-surface) !important; }
.vp-shell .bxs-hero { border: 1px solid var(--vp-line); }
.vp-shell .bxs-rel { border-color: var(--vp-line) !important; }

/* Light mode: the dark Vapor palette is replaced as a whole so cards, forms,
   profile pages and shared blog fragments retain readable contrast. */
:root[data-vp-theme="light"] {
  color-scheme: light;
  --vp-accent: #087f70;
  --vp-accent: color-mix(in srgb, var(--accent, #087f70) 58%, #075e54);
  --vp-accent-2: #6d4cc5;
  --vp-ink: #13211d;
  --vp-soft: #405751;
  --vp-muted: #697d76;
  --vp-bg: #f7fbf9;
  --vp-bg-raised: #eef6f2;
  --vp-surface: #ffffff;
  --vp-surface-2: #f1f8f4;
  --vp-line: rgba(25, 67, 55, .14);
  --vp-line-strong: rgba(25, 67, 55, .25);
  --vp-danger: #c9374b;
  --vp-success: #16805a;
  --vp-shadow: 0 25px 60px -42px rgba(20, 57, 46, .36);
}
:root[data-vp-theme="light"] body {
  background:
    radial-gradient(circle at 90% -10%, rgba(26, 163, 132, .13), transparent 29rem),
    radial-gradient(circle at 3% 22%, rgba(109, 76, 197, .09), transparent 25rem),
    var(--vp-bg);
}
:root[data-vp-theme="light"] body::before { opacity: .6; background-image: linear-gradient(rgba(17, 54, 44, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 54, 44, .045) 1px, transparent 1px); }
:root[data-vp-theme="light"] .vp-link:hover { color: var(--vp-ink); }
:root[data-vp-theme="light"] .vp-btn-secondary,
:root[data-vp-theme="light"] .vp-btn-line { background: rgba(255,255,255,.76); }
:root[data-vp-theme="light"] .vp-header { background: rgba(247, 251, 249, .82); }
:root[data-vp-theme="light"] .vp-header.scrolled { background: rgba(247, 251, 249, .96); box-shadow: 0 15px 44px -30px rgba(20,57,46,.38); }
:root[data-vp-theme="light"] .vp-brand__name,
:root[data-vp-theme="light"] .vp-menu a:hover,
:root[data-vp-theme="light"] .vp-menu a.is-active,
:root[data-vp-theme="light"] .vp-stat b,
:root[data-vp-theme="light"] .vp-price,
:root[data-vp-theme="light"] .vp-footer h4,
:root[data-vp-theme="light"] .vp-panel-title,
:root[data-vp-theme="light"] .vp-line__title,
:root[data-vp-theme="light"] .vp-quantity__count,
:root[data-vp-theme="light"] .vp-summary__total,
:root[data-vp-theme="light"] .vp-faq summary,
:root[data-vp-theme="light"] .vp-profile-user b,
:root[data-vp-theme="light"] .vp-order-code { color: var(--vp-ink); }
:root[data-vp-theme="light"] .vp-menu a:hover,
:root[data-vp-theme="light"] .vp-menu a.is-active { background: rgba(20, 67, 55, .07); }
:root[data-vp-theme="light"] .vp-ic:hover { background: rgba(20, 67, 55, .06); }
:root[data-vp-theme="light"] .vp-mobile-menu,
:root[data-vp-theme="light"] .vp-footer { background: var(--vp-bg-raised); }
:root[data-vp-theme="light"] .vp-hero::before { border-color: rgba(23, 78, 63, .12); box-shadow: 0 0 0 56px rgba(23,78,63,.025), 0 0 0 112px rgba(23,78,63,.018); }
:root[data-vp-theme="light"] .vp-hero__frame { background: linear-gradient(145deg, rgba(32, 174, 140, .18), rgba(109,76,197,.11) 55%, rgba(255,255,255,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--vp-shadow); }
:root[data-vp-theme="light"] .vp-hero__frame::after { border-color: rgba(20, 67, 55, .14); }
:root[data-vp-theme="light"] .vp-hero__caption { border-color: var(--vp-line-strong); background: rgba(255,255,255,.82); }
:root[data-vp-theme="light"] .vp-dot { background: rgba(20,67,55,.24); }
:root[data-vp-theme="light"] .vp-promo { background: linear-gradient(125deg, #e3f5ed, #f8fcfa 54%, #efeafb); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
:root[data-vp-theme="light"] .vp-promo:nth-child(2n) { background: linear-gradient(125deg, #f0ebfc, #f8fcfa 58%, #e1f5ee); }
:root[data-vp-theme="light"] .vp-promo__image { opacity: .58; }
:root[data-vp-theme="light"] .vp-promo__image::after { background: linear-gradient(270deg, var(--vp-surface) 0%, rgba(255,255,255,.92) 46%, transparent 100%); }
:root[data-vp-theme="light"] .vp-promo__body { max-width: 62%; }
:root[data-vp-theme="light"] .vp-promo__body h3 { color: #142d25; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
:root[data-vp-theme="light"] .vp-promo__body p { color: #38584d; font-weight: 600; }
:root[data-vp-theme="light"] .vp-promo .vp-btn-secondary { color: #124d42; border-color: rgba(18,77,66,.28); background: rgba(255,255,255,.9); box-shadow: 0 7px 18px -15px rgba(20,57,46,.4); }
:root[data-vp-theme="light"] .vp-promo .vp-btn-secondary:hover { color: #fff; border-color: var(--vp-accent); background: var(--vp-accent); }
:root[data-vp-theme="light"] .vp-feature-strip { background: rgba(255,255,255,.55); }
:root[data-vp-theme="light"] .vp-testimonial,
:root[data-vp-theme="light"] .vp-card,
:root[data-vp-theme="light"] .vp-panel,
:root[data-vp-theme="light"] .vp-profile-stat,
:root[data-vp-theme="light"] .vp-shell .bh-card,
:root[data-vp-theme="light"] .vp-shell .bx-card,
:root[data-vp-theme="light"] .vp-shell .bxs-rel-card { background: linear-gradient(145deg, #ffffff, #f6fbf8) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
:root[data-vp-theme="light"] .vp-card:hover,
:root[data-vp-theme="light"] .vp-shell .bh-card:hover,
:root[data-vp-theme="light"] .vp-shell .bx-card:hover { box-shadow: 0 25px 48px -35px rgba(20,57,46,.42), inset 0 1px 0 rgba(255,255,255,.9) !important; }
:root[data-vp-theme="light"] .vp-card-media,
:root[data-vp-theme="light"] .vp-product__image,
:root[data-vp-theme="light"] .vp-shell .bh-thumb,
:root[data-vp-theme="light"] .vp-shell .bx-thumb,
:root[data-vp-theme="light"] .vp-shell .bxs-hero,
:root[data-vp-theme="light"] .vp-shell .bxs-rel-card .t { background: radial-gradient(circle at 50% 33%, rgba(32,174,140,.12), transparent 48%), var(--vp-bg-raised) !important; }
:root[data-vp-theme="light"] .vp-card-media::after { background: linear-gradient(180deg, transparent 53%, rgba(237,247,242,.38)); }
:root[data-vp-theme="light"] .vp-wish { color: var(--vp-ink); border-color: var(--vp-line); background: rgba(255,255,255,.78); }
:root[data-vp-theme="light"] .vp-input,
:root[data-vp-theme="light"] .vp-quantity,
:root[data-vp-theme="light"] .vp-order-overview,
:root[data-vp-theme="light"] .vp-order-link { background: rgba(255,255,255,.82); }
:root[data-vp-theme="light"] .vp-input:focus { background: #fff; }
:root[data-vp-theme="light"] .vp-order-link:hover { color: var(--vp-ink); background: rgba(30,157,125,.07); }
:root[data-vp-theme="light"] .vp-remove:hover,
:root[data-vp-theme="light"] .vp-profile-link--logout:hover { color: #fff; }
:root[data-vp-theme="light"] .vp-theme-icon--sun { display: block; }
:root[data-vp-theme="light"] .vp-theme-icon--moon { display: none; }
:root[data-vp-theme="dark"] .vp-theme-icon--sun { display: none; }

.vp-theme-toggle { flex: 0 0 auto; }
.vp-theme-icon--sun { display: none; }

:root[data-vp-theme="dark"] .vp-announce {
  color: #f7fffc;
  background: linear-gradient(90deg, #0f766e, var(--vp-accent), #4338ca);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
:root[data-vp-theme="dark"] .vp-announce::after { opacity: .14; }

@media (prefers-reduced-motion: no-preference) {
  [data-vp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--vp-ease), transform .65s var(--vp-ease); transition-delay: var(--vp-delay, 0ms); }
  [data-vp-reveal].is-visible { opacity: 1; transform: none; }
  .vp-hero__frame img { animation: vp-float 6s ease-in-out infinite; }
  @keyframes vp-float { 50% { transform: translate(-50%, calc(-50% - 9px)) rotate(-3deg); } }
}

@media (max-width: 1080px) {
  .vp-menu { gap: 0; }
  .vp-menu a { padding-inline: 8px; }
  .vp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vp-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vp-nav { min-height: 68px; gap: 10px; }
  .vp-menu { display: none; }
  .vp-burger { display: inline-grid; }
  .vp-hero { min-height: auto; }
  .vp-hero__slide, .vp-hero__slide.active { min-height: auto; grid-template-columns: 1fr; }
  .vp-hero__copy { padding: 54px 0 20px; }
  .vp-hero__visual { min-height: 340px; }
  .vp-hero__frame { inset: 8px 13% 20px; }
  .vp-hero__caption { left: 5%; }
  .vp-dots { position: static; justify-content: center; padding: 0 0 20px; }
  .vp-promo-grid, .vp-product, .vp-product-details, .vp-cols-2-1, .vp-shop { grid-template-columns: 1fr; }
  .vp-profile { grid-template-columns: 1fr; }
  .vp-profile-nav { position: static; }
  .vp-profile-links { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vp-profile-link { justify-content: center; }
  .vp-profile-link::before { display: none; }
  .vp-filter, .vp-summary { position: static; }
  .vp-feature-grid { grid-template-columns: 1fr 1fr; }
  .vp-feature:nth-child(2n) { border-left: 0; }
  .vp-feature:nth-child(-n+2) { border-bottom: 1px solid var(--vp-line); }
  .vp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .vp-footer__grid > :last-child { grid-column: 2; }
  .vp-shell .bh-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .vp-wrap { padding-inline: 16px; }
  .vp-page { padding: 33px 0 56px; }
  .vp-section { padding: 56px 0; }
  .vp-brand__name { max-width: 125px; font-size: 16px; }
  .vp-brand__logo { max-width: 126px; height: 34px; }
  .vp-actions { gap: 0; }
  .vp-ic { width: 35px; height: 35px; }
  .vp-mobile-menu { padding-inline: 16px; }
  .vp-hero__title { font-size: clamp(34px,11.2vw,47px); }
  .vp-hero__copy { padding-top: 43px; }
  .vp-hero__visual { min-height: 290px; }
  .vp-hero__frame { inset: 2px 8% 25px; }
  .vp-hero__stats { gap: 12px; margin-top: 27px; }
  .vp-stat { min-width: 85px; padding-left: 11px; }
  .vp-section-head, .vp-page-head, .vp-footer__top, .vp-foot-bottom { align-items: flex-start; flex-direction: column; }
  .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vp-card { border-radius: 15px; }
  .vp-card-body { min-height: 128px; padding: 11px; }
  .vp-card-body h3 { min-height: 44px; font-size: 12px; }
  .vp-card-media { aspect-ratio: 1 / .94; }
  .vp-price { font-size: 12.5px; }
  .vp-price small { display: none; }
  .vp-add { width: 34px; height: 34px; flex-basis: 34px; }
  .vp-promo { min-height: 218px; padding: 23px; }
  .vp-promo__body { max-width: 70%; }
  .vp-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vp-feature-grid, .vp-testimonials { grid-template-columns: 1fr; }
  .vp-feature { min-height: auto; border: 0 !important; border-bottom: 1px solid var(--vp-line) !important; }
  .vp-feature:last-child { border-bottom: 0 !important; }
  .vp-footer__grid { grid-template-columns: 1fr 1fr; gap: 25px 16px; }
  .vp-footer__grid > :first-child { grid-column: 1 / -1; }
  .vp-footer__grid > :last-child { grid-column: auto; }
  .vp-line { gap: 11px; }
  .vp-line__image { width: 70px; height: 70px; flex-basis: 70px; }
  .vp-line__bottom { align-items: flex-start; flex-direction: column; }
  .vp-coupon { flex-direction: column; }
  .vp-coupon .vp-btn { width: 100%; }
  .vp-inline-fields { grid-template-columns: 1fr; }
  .vp-product { padding: 13px; }
  .vp-product-details { gap: 24px; padding: 18px; }
  .vp-profile-links { grid-template-columns: 1fr 1fr; }
  .vp-profile-stats { grid-template-columns: 1fr; }
  .vp-order-link { grid-template-columns: 1fr auto; }
  .vp-order-link > :nth-child(2) { display: none; }
  .vp-order-detail { grid-template-columns: 1fr; }
  .vp-order-detail .vp-order-detail__wide { grid-column: auto; }
  .vp-course__top { align-items: flex-start; flex-direction: column; }
  .vp-shell .bh, .vp-shell .bx, .vp-shell .bxs { padding-inline: 16px !important; }
  .vp-shell .bh-grid, .vp-shell .bx-grid, .vp-shell .bxs-rel-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 390px) {
  .vp-search-link { display: none; }
}