/* VRplus.cz · úvodní stránka (redesign) · 1.0.0
 * Design a kód: Tadeáš Mikš (2026)
 *
 * Platí jen s třídou html.vp-hp (přidá ji řádek v Záhlaví jen na úvodní stránce). Všechny styly modulu jsou pod
 * #vp-home, aby je nepřebila šablona Apollo; písmo Poppins je z CDN Shoptetu (odkaz v Záhlaví, včetně češtiny). */

/* ------------------------------------------------------------------ 1) původní obsah úvodní stránky */
html.vp-hp body.in-index .before-carousel,
html.vp-hp body.in-index .products-group,
html.vp-hp body.in-index .news-block { display: none !important; }
html.vp-hp:not(.vp-ready) body.in-index #content { min-height: 1800px; }          /* místo pro sekce, dokud se nevloží */
html.vp-hp body.in-index .welcome__left-panel .h1 {
  font-family: 'Poppins', 'Open Sans', sans-serif; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, #e4005c, #a400bd 60%, #7b00f6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.vp-hp body.in-index .welcome__left-panel p { font-family: 'Poppins', 'Open Sans', sans-serif; color: #6b6582; }

/* ------------------------------------------------------------------ 2) základ */
#vp-home, #vp-top {
  --vp-pink: #e4005c; --vp-mag: #c7008a; --vp-pur: #a400bd; --vp-vio: #7b00f6;
  --vp-grad: linear-gradient(100deg, #ff2d6f 0%, #e4005c 18%, #c7008a 42%, #a400bd 64%, #7b00f6 100%);
  --vp-grad-l: linear-gradient(100deg, #ff5c93 0%, #ef3fd0 50%, #a26bff 100%);
  --vp-ink: #0b0716; --vp-text: #1d1630; --vp-muted: #6b6582; --vp-line: #ece8f4; --vp-soft: #f7f4fd;
  --vp-ok: #0c9b53; --vp-pre: #b26b00; --vp-out: #8a8499;
  --vp-r: 22px; --vp-rl: 34px; --vp-ease: cubic-bezier(.2, .7, .2, 1);
  --vp-font: 'Poppins', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--vp-font); font-size: 15px; line-height: 1.5; color: var(--vp-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#vp-home { display: flex; flex-direction: column; gap: 96px; margin: 72px 0 40px; }
:is(#vp-home, #vp-top) *, :is(#vp-home, #vp-top) *::before, :is(#vp-home, #vp-top) *::after { box-sizing: border-box; }
:is(#vp-home, #vp-top) :is(h2, h3, p, ul, li, dl, dt, dd) { margin: 0; padding: 0; font-family: inherit; color: inherit; letter-spacing: normal; text-transform: none; line-height: inherit; }
:is(#vp-home, #vp-top) ul { list-style: none; }
:is(#vp-home, #vp-top) a { color: inherit; text-decoration: none; }
:is(#vp-home, #vp-top) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: none; cursor: pointer; float: none; width: auto; height: auto; }
:is(#vp-home, #vp-top) img { display: block; max-width: 100%; height: auto; border: 0; }
:is(#vp-home, #vp-top) [hidden] { display: none !important; }
:is(#vp-home, #vp-top) .vp-nw { white-space: nowrap; }
:is(#vp-home, #vp-top) .vp-i { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(#vp-home, #vp-top) .vp-grad-t { background: var(--vp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* tlačítka */
:is(#vp-home, #vp-top) .vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent; font: 600 14.5px/1 var(--vp-font); white-space: nowrap;
  transition: transform .2s var(--vp-ease), box-shadow .25s, background-color .2s, color .2s, border-color .2s;
}
:is(#vp-home, #vp-top) .vp-btn .vp-i { width: 18px; height: 18px; transition: transform .2s var(--vp-ease); }
:is(#vp-home, #vp-top) .vp-btn:hover .vp-i:last-child { transform: translateX(3px); }
:is(#vp-home, #vp-top) .vp-btn--lg { min-height: 54px; padding: 0 26px; font-size: 15.5px; }
:is(#vp-home, #vp-top) .vp-btn--sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
:is(#vp-home, #vp-top) .vp-btn--grad { color: #fff; background: var(--vp-grad); box-shadow: 0 14px 34px -14px rgba(199, 0, 138, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
:is(#vp-home, #vp-top) .vp-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(164, 0, 189, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
:is(#vp-home, #vp-top) .vp-btn--glass { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:is(#vp-home, #vp-top) .vp-btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .36); }
:is(#vp-home, #vp-top) .vp-btn--buy { color: #fff; background: var(--vp-ink); }
:is(#vp-home, #vp-top) .vp-btn--buy:hover { background: var(--vp-grad); box-shadow: 0 12px 26px -12px rgba(164, 0, 189, .7); }
:is(#vp-home, #vp-top) .vp-btn--buy.is-busy { opacity: .7; cursor: progress; }
:is(#vp-home, #vp-top) .vp-btn--buy.is-done { background: var(--vp-ok); }
:is(#vp-home, #vp-top) .vp-btn--ghost { color: var(--vp-text); background: #fff; border-color: var(--vp-line); }
:is(#vp-home, #vp-top) .vp-btn--ghost:hover { color: var(--vp-pur); border-color: #d9c7ee; }
:is(#vp-home, #vp-top) :is(.vp-btn, .vp-tab, .vp-chip, .vp-model, .vp-rail-nav, .vp-hero-play, .vp-world, .vp-svc-i, .vp-more):focus-visible { outline: 3px solid rgba(164, 0, 189, .5); outline-offset: 3px; }
:is(#vp-home, #vp-top) .vp-hero :focus-visible, :is(#vp-home, #vp-top) .vp-meta :focus-visible { outline-color: #ff8fbc; }

/* cena, dostupnost, hvězdičky */
:is(#vp-home, #vp-top) .vp-price { font: 700 18px/1 var(--vp-font); letter-spacing: -.01em; white-space: nowrap; color: var(--vp-ink); }
:is(#vp-home, #vp-top) .vp-price small { margin-right: 2px; font-size: .58em; font-weight: 600; opacity: .7; }
:is(#vp-home, #vp-top) .vp-price--lg { font-size: 30px; }
:is(#vp-home, #vp-top) .vp-st { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.2 var(--vp-font); white-space: nowrap; }
:is(#vp-home, #vp-top) .vp-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
:is(#vp-home, #vp-top) .vp-st--in { color: var(--vp-ok); }
:is(#vp-home, #vp-top) .vp-st--pre, :is(#vp-home, #vp-top) .vp-st--soon { color: var(--vp-pre); }
:is(#vp-home, #vp-top) .vp-st--out { color: var(--vp-out); }
:is(#vp-home, #vp-top) .vp-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vp-muted); }
:is(#vp-home, #vp-top) .vp-stars-bar {
  width: 72px; height: 13px; background: linear-gradient(90deg, #ffb21e var(--v), #e2dcec var(--v));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") left center / 14.4px 13px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") left center / 14.4px 13px repeat-x;
}

/* nadpisy sekcí */
:is(#vp-home, #vp-top) .vp-sec { position: relative; }
:is(#vp-home, #vp-top) .vp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
:is(#vp-home, #vp-top) .vp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--vp-font); letter-spacing: .16em; text-transform: uppercase; color: var(--vp-mag); }
:is(#vp-home, #vp-top) .vp-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--vp-grad); }
:is(#vp-home, #vp-top) .vp-h2 { margin-top: 12px; font: 800 clamp(28px, 3vw, 44px)/1.08 var(--vp-font); letter-spacing: -.03em; color: var(--vp-ink); }
:is(#vp-home, #vp-top) .vp-sub { margin-top: 12px; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--vp-muted); }
:is(#vp-home, #vp-top) .vp-more { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 12px 0; font: 600 14px/1 var(--vp-font); color: var(--vp-text); transition: color .2s; }
:is(#vp-home, #vp-top) .vp-more .vp-i { width: 18px; height: 18px; transition: transform .2s var(--vp-ease); }
:is(#vp-home, #vp-top) .vp-more:hover { color: var(--vp-mag); }
:is(#vp-home, #vp-top) .vp-more:hover .vp-i { transform: translateX(4px); }

/* ------------------------------------------------------------------ 3) hlavní banner přes celou šířku (#vp-top) */
#vp-top { position: relative; z-index: 1; --lens: 440px; }
#vp-top .vp-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 30px; }
#vp-top .vp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 54px 0 34px; background: #07040f; color: #fff; }
#vp-top .vp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(70% 80% at 50% 115%, rgba(123, 0, 246, .38), transparent 70%), linear-gradient(180deg, #0d0619 0%, #07040f 62%, #0b0716 100%); }
#vp-top .vp-aur { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: vp-aur 18s ease-in-out infinite alternate; }
#vp-top .vp-aur--1 { left: -180px; top: -240px; width: 640px; height: 640px; background: #7b00f6; }
#vp-top .vp-aur--2 { right: 12%; top: -180px; width: 520px; height: 520px; background: #e4005c; opacity: .42; animation-duration: 22s; animation-delay: -7s; }
#vp-top .vp-aur--3 { right: -200px; bottom: -300px; width: 600px; height: 600px; background: #c7008a; opacity: .4; animation-duration: 26s; animation-delay: -13s; }
#vp-top .vp-floor {
  position: absolute; left: -25%; right: -25%; bottom: 0; height: 44%;
  background: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 100% 46px, linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px) 50% 0 / 76px 100%;
  transform: perspective(380px) rotateX(66deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%); mask-image: linear-gradient(to top, #000 8%, transparent 88%);
  animation: vp-fly 2.6s linear infinite;
}
#vp-top .vp-stars {
  position: absolute; inset: 0; animation: vp-twinkle 5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 22% 62%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.3px 1.3px at 36% 12%, #fff, transparent), radial-gradient(1px 1px at 47% 78%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 58% 30%, rgba(255, 255, 255, .9), transparent), radial-gradient(1px 1px at 71% 8%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 83% 44%, rgba(255, 255, 255, .8), transparent), radial-gradient(1.6px 1.6px at 93% 20%, #fff, transparent),
    radial-gradient(1px 1px at 14% 88%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.2px 1.2px at 64% 58%, rgba(255, 255, 255, .5), transparent);
}
#vp-top .vp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 24px; }
#vp-top .vp-hero-copy { display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
#vp-top .vp-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); font: 600 11.5px/1 var(--vp-font); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
#vp-top .vp-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vp-grad); box-shadow: 0 0 0 4px rgba(228, 0, 92, .2), 0 0 14px rgba(228, 0, 92, .8); animation: vp-pulse 2.4s ease-in-out infinite; }
#vp-top .vp-hero-t { font: 800 clamp(46px, 5.6vw, 88px)/.98 var(--vp-font); letter-spacing: -.04em; color: #fff; }
#vp-top .vp-hero-t .vp-grad-t { display: inline-block; padding-bottom: .08em; background: linear-gradient(100deg, #ff5c93 0%, #ef3fd0 25%, #a26bff 50%, #ef3fd0 75%, #ff5c93 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vp-sheen 7s linear infinite; }
#vp-top .vp-hero-p { max-width: 500px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
#vp-top .vp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
#vp-top .vp-intents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
#vp-top .vp-intents-h { flex-basis: 100%; margin-bottom: 2px; font: 600 11.5px/1 var(--vp-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
#vp-top .vp-intent { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); font: 600 13.5px/1 var(--vp-font); color: #fff; transition: background-color .2s, border-color .2s, transform .2s var(--vp-ease); }
#vp-top .vp-intent .vp-i { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #ff8fbc; }
#vp-top .vp-intent:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); }

#vp-top .vp-hero-stage { position: relative; display: grid; justify-items: center; align-content: start; min-height: 660px; --lc: calc(var(--lens) / 2); }
#vp-top .vp-hero[data-state="empty"] .vp-hero-stage { display: none; }
#vp-top .vp-hero[data-state="empty"] .vp-hero-in { grid-template-columns: minmax(0, 1fr); }
#vp-top .vp-slides { position: relative; display: grid; justify-items: center; width: 100%; }
#vp-top .vp-slide { display: grid; justify-items: center; gap: 22px; width: 100%; }
#vp-top .vp-slide-vis { position: relative; width: var(--lens); height: var(--lens); }
#vp-top .vp-lens {
  position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0 55%, #f7f0ff 70%, #eadcff 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 14px rgba(255, 255, 255, .035), 0 40px 90px -26px rgba(164, 0, 189, .8), 0 0 140px 30px rgba(123, 0, 246, .28);
}
#vp-top .vp-lens-ring { display: none; }
#vp-top .vp-lens-in { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
#vp-top .vp-lens-img { width: 86%; height: auto; mix-blend-mode: multiply; animation: vp-bob 6s ease-in-out infinite; }
#vp-top .vp-lens--skel { width: var(--lens); height: var(--lens); background: rgba(255, 255, 255, .06); box-shadow: none; animation: vp-shimmer 1.6s ease-in-out infinite; }
#vp-top .vp-prog { position: absolute; z-index: 3; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); transform: rotate(-90deg); pointer-events: none; }
#vp-top .vp-prog circle { fill: none; stroke: url(#vp-prog-g); stroke: #ff5c93; stroke-width: .9; stroke-linecap: round; stroke-dasharray: 305; stroke-dashoffset: 305; filter: drop-shadow(0 0 3px rgba(255, 92, 147, .9)); }
#vp-top .vp-slide:not([hidden]) .vp-prog circle { animation: vp-ring var(--vp-dur, 7s) linear forwards; }
#vp-top .vp-hero.is-paused .vp-prog circle { animation-play-state: paused; }
#vp-top .vp-float {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; /* nad miniaturami na dráze (z 1 / 4) */ padding: 0 16px 0 7px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(24, 14, 44, .66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 600 13.5px/1.2 var(--vp-font); color: #fff; white-space: nowrap; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .85);
}
#vp-top .vp-float .vp-i { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--vp-grad); color: #fff; stroke-width: 2; }
#vp-top .vp-float--0 { top: 4%; left: -16%; }
#vp-top .vp-float--1 { top: 42%; right: -22%; }
#vp-top .vp-float--2 { bottom: 6%; left: -12%; }
#vp-top .vp-slide-info { position: relative; z-index: 5; display: grid; gap: 10px; width: min(100%, 520px); padding: 18px 22px 20px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#vp-top .vp-slide-k { font: 600 11.5px/1.2 var(--vp-font); letter-spacing: .16em; text-transform: uppercase; color: #ff7fb0; }
#vp-top .vp-slide-t { font: 700 26px/1.15 var(--vp-font); letter-spacing: -.02em; color: #fff; }
#vp-top .vp-slide-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#vp-top .vp-slide-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
#vp-top .vp-price { color: #fff; }
#vp-top .vp-st--in { color: #3ee08f; }
#vp-top :is(.vp-st--pre, .vp-st--soon) { color: #ffc067; }
#vp-top .vp-st--out { color: rgba(255, 255, 255, .6); }
#vp-top .vp-btn--buy { color: var(--vp-ink); background: #fff; }
#vp-top .vp-btn--buy:hover { color: #fff; background: var(--vp-grad); }
#vp-top .vp-btn--ghost { color: var(--vp-ink); }
#vp-top .vp-slide.is-in .vp-lens { animation: vp-in-lens .8s var(--vp-ease) both; }
#vp-top .vp-slide.is-in .vp-float { animation: vp-in-pop .7s var(--vp-ease) both; }
#vp-top .vp-slide.is-in .vp-float--1 { animation-delay: .08s; }
#vp-top .vp-slide.is-in .vp-float--2 { animation-delay: .16s; }
#vp-top .vp-slide.is-in .vp-slide-info { animation: vp-in-up .6s .1s var(--vp-ease) both; }
/* oběžná dráha s ostatními modely */
#vp-top .vp-orbit { position: absolute; left: 50%; top: var(--lc); width: min(100%, 660px); aspect-ratio: 1 / .26; transform: translate(-50%, -50%); pointer-events: none; }
#vp-top .vp-orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .16); box-shadow: inset 0 0 40px rgba(164, 0, 189, .28), 0 0 34px rgba(164, 0, 189, .22); }
#vp-top .vp-sats { position: absolute; left: 50%; top: var(--lc); width: 0; height: 0; }
#vp-top .vp-sat { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border-radius: 50%; background: #fff; border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7), 0 0 0 6px rgba(255, 255, 255, .06); transition: border-color .2s, box-shadow .25s; will-change: transform; }
#vp-top .vp-sat img { width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; }
#vp-top .vp-sat:hover { border-color: #ff9cc3; }
#vp-top .vp-sat.is-on { border-color: #ff5c93; box-shadow: 0 0 0 4px rgba(255, 92, 147, .35), 0 0 26px rgba(255, 92, 147, .7); }
#vp-top .vp-sat:focus-visible { outline: 3px solid #ff8fbc; outline-offset: 3px; }
#vp-top .vp-hero-nav { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 16px; }
#vp-top .vp-hnav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); transition: background-color .2s, transform .2s var(--vp-ease); }
#vp-top .vp-hnav:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .16); }
#vp-top .vp-hnav .vp-i { width: 18px; height: 18px; stroke-width: 2.2; }
/* dlaždice kategorií a výhody */
#vp-top .vp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
#vp-top .vp-tile { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; padding: 13px 16px 13px 13px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; transition: background-color .2s, border-color .2s, transform .25s var(--vp-ease); }
#vp-top .vp-tile:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
#vp-top .vp-tile-img { display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden; border-radius: 18px; background: #fff; }
#vp-top .vp-tile-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#vp-top .vp-tile-tx { min-width: 0; }
#vp-top .vp-tile-tx b { display: block; font: 700 15.5px/1.2 var(--vp-font); }
#vp-top .vp-tile-tx small { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: rgba(255, 255, 255, .55); }
#vp-top .vp-tile-from { font: 700 14px/1 var(--vp-font); white-space: nowrap; }
#vp-top .vp-tile-from small { margin-right: 2px; font-size: 11px; font-weight: 600; opacity: .6; }
#vp-top .vp-tile > .vp-i { width: 18px; height: 18px; color: #ff8fbc; transition: transform .2s var(--vp-ease); }
#vp-top .vp-tile:hover > .vp-i { transform: translateX(3px); }
#vp-top .vp-hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-top: 26px; list-style: none; font-size: 13px; color: rgba(255, 255, 255, .6); }
#vp-top .vp-hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
#vp-top .vp-hero-trust .vp-i { width: 17px; height: 17px; color: #ff74a8; }
@keyframes vp-aur { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 40px) scale(1.15); } 100% { transform: translate(-40px, 80px) scale(.94); } }
@keyframes vp-fly { to { background-position: 0 46px, 50% 0; } }
@keyframes vp-twinkle { 50% { opacity: .45; } }
@keyframes vp-sheen { to { background-position: -200% 0; } }
@keyframes vp-ring { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ 4) tři světy */
#vp-home .vp-worlds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#vp-home .vp-world {
  --c: #7b00f6; position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 26px;
  border-radius: 28px; background: #fff; border: 1px solid var(--vp-line);
  transition: transform .35s var(--vp-ease), box-shadow .35s, border-color .3s;
}
#vp-home .vp-world::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; pointer-events: none; background: radial-gradient(80% 100% at 75% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 72%); }
#vp-home .vp-world:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 38%, transparent); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--c) 75%, transparent); }
#vp-home .vp-world--vr { --c: #7b00f6; }
#vp-home .vp-world--ar { --c: #0090f0; }
#vp-home .vp-world--smart { --c: #e4005c; }
#vp-home .vp-world-vis { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 112px; }
#vp-home .vp-world-ic { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 16px 30px -14px var(--c); }
#vp-home .vp-world-ic .vp-i { width: 34px; height: 34px; stroke-width: 1.6; }
#vp-home .vp-world-thumbs { display: flex; }
#vp-home .vp-world-thumbs img {
  width: 88px; height: 88px; margin-left: -24px; padding: 8px; object-fit: contain; border-radius: 50%; background: #fff;
  border: 3px solid #fff; box-shadow: 0 10px 24px -12px rgba(20, 10, 40, .4), 0 0 0 1px var(--vp-line);
  transition: transform .4s var(--vp-ease);
}
#vp-home .vp-world-thumbs img:first-child { margin-left: 0; }
#vp-home .vp-world:hover .vp-world-thumbs img { transform: translateY(-4px); }
#vp-home .vp-world:hover .vp-world-thumbs img:nth-child(2) { transition-delay: .05s; }
#vp-home .vp-world:hover .vp-world-thumbs img:nth-child(3) { transition-delay: .1s; }
#vp-home .vp-world-t { font: 700 23px/1.2 var(--vp-font); letter-spacing: -.02em; color: var(--vp-ink); }
#vp-home .vp-world-p { font-size: 14.5px; line-height: 1.6; color: var(--vp-muted); }
#vp-home .vp-world-list { display: grid; gap: 9px; }
#vp-home .vp-world-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--vp-text); }
#vp-home .vp-world-list .vp-i { width: 19px; height: 19px; padding: 3.5px; border-radius: 50%; color: #fff; background: var(--c); stroke-width: 2.8; }
#vp-home .vp-world-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--vp-line); }
#vp-home .vp-world-from { font: 700 18px/1 var(--vp-font); color: var(--vp-ink); }
#vp-home .vp-world-from small { margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--vp-muted); }
#vp-home .vp-world-go { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--vp-font); color: var(--c); }
#vp-home .vp-world-go .vp-i { width: 18px; height: 18px; transition: transform .2s var(--vp-ease); }
#vp-home .vp-world:hover .vp-world-go .vp-i { transform: translateX(4px); }

/* ------------------------------------------------------------------ 5) řady produktů a karty */
#vp-home .vp-rail { position: relative; }
#vp-home .vp-rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: -8px -4px -22px; padding: 8px 4px 22px;
}
#vp-home .vp-rail-track::-webkit-scrollbar { display: none; }
#vp-home .vp-rail-track:focus-visible { outline: 3px solid rgba(164, 0, 189, .35); outline-offset: 2px; border-radius: 22px; }
#vp-home .vp-rail-nav {
  position: absolute; z-index: 3; top: 34%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--vp-ink); background: #fff; border: 1px solid var(--vp-line); box-shadow: 0 12px 28px -12px rgba(20, 10, 40, .45);
  transition: opacity .2s, transform .2s var(--vp-ease);
}
#vp-home .vp-rail-nav--prev { left: -20px; }
#vp-home .vp-rail-nav--next { right: -20px; }
#vp-home .vp-rail-nav:hover { transform: scale(1.07); }
#vp-home .vp-rail-nav:disabled { opacity: 0; pointer-events: none; }
#vp-home .vp-empty { grid-column: 1 / -1; padding: 40px; border-radius: var(--vp-r); background: var(--vp-soft); text-align: center; color: var(--vp-muted); }
#vp-home .vp-empty a { color: var(--vp-mag); text-decoration: underline; }
#vp-home .vp-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-snap-align: start;
  border-radius: var(--vp-r); background: #fff; border: 1px solid var(--vp-line);
  transition: transform .3s var(--vp-ease), box-shadow .3s, border-color .3s;
}
#vp-home .vp-card:hover { transform: translateY(-4px); border-color: #ddd3ee; box-shadow: 0 24px 44px -28px rgba(60, 20, 110, .45); }
#vp-home .vp-card-img { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 14px; background: #fff; }
#vp-home .vp-card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--vp-ease); }
#vp-home .vp-card:hover .vp-card-img img { transform: scale(1.05); }
#vp-home .vp-card--out .vp-card-img img { opacity: .55; filter: grayscale(.4); }
#vp-home .vp-card-in { display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 4px 16px 16px; }
#vp-home .vp-card-t { display: -webkit-box; min-height: 2.7em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 14.5px/1.35 var(--vp-font); color: var(--vp-ink); }
#vp-home .vp-card-t a:hover { color: var(--vp-mag); }
#vp-home .vp-card-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: auto; }
#vp-home .vp-card .vp-btn { width: 100%; }
#vp-home .vp-card--skel { animation: vp-shimmer 1.6s ease-in-out infinite; }
#vp-home .vp-card--skel .vp-card-img { background: var(--vp-soft); }
#vp-home .vp-card--skel i { display: block; height: 12px; border-radius: 6px; background: var(--vp-soft); }
#vp-home .vp-card--skel i:nth-child(2) { width: 60%; }
#vp-home .vp-card--skel i:nth-child(3) { width: 100%; height: 40px; margin-top: 14px; border-radius: 999px; }

/* ------------------------------------------------------------------ 6) chytré brýle Meta */
#vp-home .vp-meta { position: relative; isolation: isolate; overflow: hidden; padding: 64px; border-radius: var(--vp-rl); background: #0d0818; color: #fff; }
#vp-home .vp-meta-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(48% 60% at 88% 12%, rgba(228, 0, 92, .34), transparent 70%), radial-gradient(44% 60% at 8% 100%, rgba(123, 0, 246, .4), transparent 70%); }
#vp-home .vp-meta .vp-h2 { color: #fff; }
#vp-home .vp-meta .vp-h2 .vp-grad-t { background: var(--vp-grad-l); -webkit-background-clip: text; background-clip: text; }
#vp-home .vp-meta .vp-sub { color: rgba(255, 255, 255, .66); }
#vp-home .vp-meta .vp-eyebrow { color: #ff7fb0; }
#vp-home .vp-meta .vp-more { color: #fff; }
#vp-home .vp-meta .vp-more:hover { color: #ff9cc3; }
#vp-home .vp-meta-box { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: stretch; }
#vp-home .vp-meta-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#vp-home .vp-model {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 12px; align-items: center; gap: 14px; padding: 9px 14px 9px 9px; text-align: left;
  border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: background-color .2s, border-color .2s, box-shadow .2s;
}
#vp-home .vp-model:hover { background: rgba(255, 255, 255, .08); }
#vp-home .vp-model[aria-pressed="true"] { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); box-shadow: inset 3px 0 0 #ff2d6f; }
#vp-home .vp-model-img { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 14px; background: #fff; }
#vp-home .vp-model-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#vp-home .vp-model-tx { min-width: 0; }
#vp-home .vp-model-tx b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14.5px/1.25 var(--vp-font); color: #fff; }
#vp-home .vp-model-tx small { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
#vp-home .vp-model-dot { width: 10px; height: 10px; border-radius: 50%; }
#vp-home .vp-model-dot--in { background: #3ee08f; box-shadow: 0 0 10px #3ee08f; }
#vp-home .vp-model-dot--pre, #vp-home .vp-model-dot--soon { background: #ffc067; }
#vp-home .vp-model-dot--out { background: rgba(255, 255, 255, .3); }
#vp-home .vp-model-used { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 16px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, .26); color: #fff; transition: border-color .2s, background-color .2s; }
#vp-home .vp-model-used b { display: block; font-size: 14px; }
#vp-home .vp-model-used small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
#vp-home .vp-model-used .vp-i { color: #ff7fb0; }
#vp-home .vp-model-used:hover { border-color: #ff7fb0; background: rgba(255, 255, 255, .04); }
#vp-home .vp-meta-card {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: 30px; min-height: 500px; padding: 30px;
  border-radius: 28px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
#vp-home .vp-meta-card > .vp-lens--skel { grid-column: 1 / -1; justify-self: center; width: min(100%, 340px); }
#vp-home .vp-meta-vis { display: grid; place-items: center; }
#vp-home .vp-meta-vis .vp-lens { width: min(100%, 360px); }
#vp-home .vp-meta-info { display: grid; gap: 12px; min-width: 0; }
#vp-home .vp-meta-t { font: 800 32px/1.1 var(--vp-font); letter-spacing: -.025em; color: #fff; }
#vp-home .vp-meta-claim { font-size: 16px; color: rgba(255, 255, 255, .72); }
#vp-home .vp-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0; }
#vp-home .vp-spec > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 7px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
#vp-home .vp-spec .vp-i { width: 16px; height: 16px; color: #ff7fb0; }
#vp-home .vp-spec dt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .58); }
#vp-home .vp-spec dd { grid-column: 1 / -1; font: 700 16px/1.25 var(--vp-font); color: #fff; }
#vp-home .vp-meta-extra { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #ffd2e4; }
#vp-home .vp-meta-extra .vp-i { width: 18px; height: 18px; color: #ff7fb0; }
#vp-home .vp-note { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .45); }
#vp-home .vp-meta-card.is-in .vp-meta-vis { animation: vp-in-lens .7s var(--vp-ease) both; }
#vp-home .vp-meta-card.is-in .vp-meta-info > * { animation: vp-in-up .55s var(--vp-ease) both; }
#vp-home .vp-meta-card.is-in .vp-meta-info > :nth-child(n+3) { animation-delay: .06s; }
#vp-home .vp-meta-card.is-in .vp-meta-info > :nth-child(n+5) { animation-delay: .12s; }

/* čočka, řádky a ceny v tmavé kartě Meta (stejné prvky jako v banneru) */
#vp-home .vp-lens {
  position: relative; display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0 55%, #f7f0ff 70%, #eadcff 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 12px rgba(255, 255, 255, .04), 0 34px 80px -24px rgba(164, 0, 189, .75), 0 0 120px 24px rgba(123, 0, 246, .26);
}
#vp-home .vp-lens-ring {
  position: absolute; inset: -14px; border-radius: 50%; padding: 2px; opacity: .8; pointer-events: none;
  background: conic-gradient(from 0deg, #ff2d6f, #a400bd, #7b00f6, rgba(123, 0, 246, 0) 70%, #ff2d6f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vp-spin 14s linear infinite;
}
#vp-home .vp-lens-in { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
#vp-home .vp-lens-img { width: 86%; height: auto; mix-blend-mode: multiply; animation: vp-bob 6s ease-in-out infinite; }
#vp-home .vp-lens--skel { background: rgba(255, 255, 255, .06); box-shadow: none; animation: vp-shimmer 1.6s ease-in-out infinite; }
#vp-home .vp-slide-k { font: 600 11.5px/1.2 var(--vp-font); letter-spacing: .16em; text-transform: uppercase; color: #ff7fb0; }
#vp-home .vp-slide-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#vp-home .vp-slide-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
#vp-home .vp-meta .vp-price { color: #fff; }
#vp-home .vp-meta .vp-st--in { color: #3ee08f; }
#vp-home .vp-meta :is(.vp-st--pre, .vp-st--soon) { color: #ffc067; }
#vp-home .vp-meta .vp-st--out { color: rgba(255, 255, 255, .6); }
#vp-home .vp-meta .vp-btn--buy { color: var(--vp-ink); background: #fff; }
#vp-home .vp-meta .vp-btn--buy:hover { color: #fff; background: var(--vp-grad); }

/* ------------------------------------------------------------------ 7) příslušenství podle zařízení */
#vp-home .vp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
#vp-home .vp-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--vp-line); font: 600 14px/1 var(--vp-font); color: var(--vp-text); white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
#vp-home .vp-chip small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--vp-soft); font-size: 11.5px; color: var(--vp-muted); }
#vp-home .vp-chip small:empty { display: none; }
#vp-home .vp-chip:hover { border-color: #cfc3e6; }
#vp-home .vp-chip[aria-pressed="true"] { color: #fff; background: var(--vp-ink); border-color: var(--vp-ink); }
#vp-home .vp-chip[aria-pressed="true"] small { color: #fff; background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------------ 8) služby */
#vp-home .vp-svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
#vp-home .vp-svc-i { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--vp-line); transition: border-color .2s, box-shadow .3s, transform .3s var(--vp-ease); }
#vp-home .vp-svc-i:hover { transform: translateY(-3px); border-color: #ddd3ee; box-shadow: 0 22px 40px -28px rgba(60, 20, 110, .45); }
#vp-home .vp-svc-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px; color: #fff; background: var(--vp-grad); box-shadow: 0 12px 24px -12px rgba(199, 0, 138, .7); }
#vp-home .vp-svc-ic .vp-i { width: 22px; height: 22px; }
#vp-home .vp-svc-t { font: 700 15.5px/1.3 var(--vp-font); color: var(--vp-ink); }
#vp-home .vp-svc-p { font-size: 13.5px; line-height: 1.55; color: var(--vp-muted); }

/* ------------------------------------------------------------------ 9) animace */
@keyframes vp-pulse { 50% { box-shadow: 0 0 0 7px rgba(228, 0, 92, .08), 0 0 22px rgba(164, 0, 189, .9); } }
@keyframes vp-spin { to { transform: rotate(1turn); } }
@keyframes vp-bob { 50% { transform: translateY(-8px); } }
@keyframes vp-shimmer { 50% { opacity: .55; } }
@keyframes vp-prog { to { width: 100%; } }
@keyframes vp-in-lens { from { opacity: 0; transform: scale(.9) rotate(-4deg); filter: blur(8px); } }
@keyframes vp-in-pop { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@keyframes vp-in-up { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  :is(#vp-home, #vp-top) *, :is(#vp-home, #vp-top) *::before, :is(#vp-home, #vp-top) *::after { animation: none !important; transition: none !important; }
  #vp-top .vp-prog { display: none; }
}

/* ------------------------------------------------------------------ 10) menší obrazovky */
@media (max-width: 1280px) {
  #vp-home { gap: 84px; }
  #vp-top { --lens: 400px; }
  #vp-top .vp-float--0 { left: -10%; }
  #vp-top .vp-float--1 { right: -12%; }
  #vp-top .vp-float--2 { left: -6%; }
  #vp-home .vp-rail-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  #vp-home .vp-meta { padding: 52px 44px; }
  #vp-home .vp-meta-box { grid-template-columns: 280px minmax(0, 1fr); }
  #vp-home .vp-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #vp-top .vp-tile { grid-template-columns: 56px minmax(0, 1fr) 18px; }
  #vp-top .vp-tile-img { width: 56px; height: 56px; }
  #vp-top .vp-tile-from { display: none; }
}
@media (max-width: 1100px) {
  #vp-home .vp-meta-card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #vp-home .vp-meta-info { width: 100%; }
  #vp-home .vp-meta-vis { width: 100%; }
  #vp-home .vp-meta-vis .vp-lens { width: min(100%, 300px); }
}
@media (max-width: 991px) {
  #vp-top { --lens: 360px; }
  #vp-top .vp-hero { padding: 40px 0 28px; }
  #vp-top .vp-hero-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  #vp-top .vp-hero-copy { max-width: none; }
  #vp-top .vp-hero-stage { min-height: 0; }
  #vp-top .vp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vp-top .vp-tile { grid-template-columns: 56px minmax(0, 1fr) auto 18px; }
  #vp-top .vp-tile-from { display: block; }
  #vp-home .vp-worlds-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  #vp-home .vp-rail-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  #vp-home .vp-meta-box { grid-template-columns: minmax(0, 1fr); }
  #vp-home .vp-meta-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  #vp-home .vp-meta-list::-webkit-scrollbar { display: none; }
  #vp-home .vp-model { flex: 0 0 250px; }
  #vp-home .vp-model-used { flex: 0 0 250px; margin-top: 0; }
}
@media (max-width: 767px) {
  #vp-home { gap: 64px; margin: 56px 0 30px; }
  #vp-top { --lens: min(74vw, 290px); }
  #vp-top .vp-wrap { padding: 0 16px; }
  #vp-top .vp-hero { padding: 30px 0 22px; }
  #vp-top .vp-hero-t { font-size: 42px; }
  #vp-top .vp-hero-p { font-size: 15.5px; }
  #vp-top .vp-hero-cta .vp-btn { flex: 1 1 auto; }
  #vp-top .vp-intents { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  #vp-top .vp-intents::-webkit-scrollbar { display: none; }
  #vp-top .vp-intents-h { display: none; }
  #vp-top .vp-intent { flex: none; }
  #vp-top .vp-float { min-height: 34px; gap: 7px; padding: 0 11px 0 5px; font-size: 11.5px; }
  #vp-top .vp-float .vp-i { width: 24px; height: 24px; padding: 4.5px; }
  #vp-top .vp-float--0 { top: 0; left: -6%; }
  #vp-top .vp-float--1 { top: 44%; right: -8%; }
  #vp-top .vp-float--2 { bottom: 0; left: -4%; }
  #vp-top .vp-sats { display: none; } /* na úzkém displeji by se křížily s parametry – modely přepíná posun prstem a šipky */
  #vp-top .vp-prog { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
  #vp-top .vp-slide-info { padding: 16px 16px 18px; }
  #vp-top .vp-slide-t { font-size: 22px; }
  #vp-top .vp-price--lg { font-size: 25px; }
  #vp-top .vp-slide-btns .vp-btn { flex: 1 1 auto; }
  #vp-top .vp-tiles { gap: 10px; margin-top: 26px; }
  #vp-top .vp-tile { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 18px; }
  #vp-top .vp-tile-img { width: 44px; height: 44px; border-radius: 13px; }
  #vp-top .vp-tile-tx b { font-size: 14px; }
  #vp-top .vp-tile-tx small, #vp-top .vp-tile-from, #vp-top .vp-tile > .vp-i { display: none; }
  #vp-top .vp-hero-trust { justify-content: flex-start; gap: 8px 18px; font-size: 12.5px; }
  #vp-home .vp-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; }
  #vp-home .vp-sub { font-size: 15px; }
  #vp-home .vp-world { padding: 22px; }
  #vp-home .vp-world-thumbs img { width: 72px; height: 72px; margin-left: -20px; }
  #vp-home .vp-rail-track { grid-auto-columns: 72%; gap: 12px; }
  #vp-home .vp-rail-nav { display: none; }
  #vp-home .vp-meta { padding: 32px 18px; border-radius: 26px; }
  #vp-home .vp-meta-card { padding: 20px 16px; min-height: 0; }
  #vp-home .vp-meta-t { font-size: 26px; }
  #vp-home .vp-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vp-home .vp-model { flex-basis: 230px; }
  #vp-home .vp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #vp-home .vp-chips::-webkit-scrollbar { display: none; }
  #vp-home .vp-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #vp-home .vp-svc-i { padding: 18px; }
  #vp-home .vp-svc-i:last-child { grid-column: 1 / -1; }
}