/* VRplus.cz · rámec webu – hlavička, menu, mobilní menu a patička · 1.0.1 (1.0.1: logo v hlavičce bez bílého okraje)
 * Design a kód: Tadeáš Mikš (2026)
 *
 * Platí s třídou html.vp-hd (přidá ji řádek v Záhlaví; vypnutí pro porovnání ?vh=0). Původní hlavička a patička
 * šablony Apollo se jen skryjí – jejich okna (košík, přihlášení) a funkce Shoptetu zůstávají. */

/* ------------------------------------------------------------------ 1) původní hlavička a patička */
html.vp-hd .top-navigation-bar, html.vp-hd #header, html.vp-hd #footer, html.vp-hd .menu-helper { display: none !important; }
html.vp-hd #content-wrapper { padding-top: 0 !important; }
html.vp-hd .overall-wrapper { padding-top: 0 !important; } /* Apollo na ≤767 px odsazuje pod svou pevnou hlavičku (110–150 px) */
html.vp-hd:not(.vp-hd-ready) .overall-wrapper::before { content: ""; display: block; height: 118px; background: #fff; box-shadow: 0 1px 0 #ece8f4; }
@media (max-width: 991px) { html.vp-hd:not(.vp-hd-ready) .overall-wrapper::before { height: 98px; } }
html.vp-hd body { --vp-hd-h: 82px; }
html.vp-hd.vp-menu-open, html.vp-hd.vp-menu-open body { overflow: hidden; }

/* ------------------------------------------------------------------ 2) základ (sdílený s úvodní stránkou) */
#vp-bar, #vp-hd, #vp-drawer, #vp-ft {
  --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-mag: #c7008a; --vp-pur: #a400bd;
  --vp-ok: #0c9b53; --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: 14px; line-height: 1.5; color: var(--vp-text); -webkit-font-smoothing: antialiased;
}
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) *, :is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) *::before, :is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) *::after { box-sizing: border-box; }
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) :is(h2, h3, h4, p, ul, li, dl, dt, dd, form, fieldset) { margin: 0; padding: 0; border: 0; font-family: inherit; color: inherit; letter-spacing: normal; text-transform: none; line-height: inherit; }
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) ul { list-style: none; }
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) a { color: inherit; text-decoration: none; }
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) 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-bar, #vp-hd, #vp-drawer, #vp-ft) img { display: block; max-width: 100%; height: auto; border: 0; }
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) [hidden] { display: none !important; }
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) .vp-i { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Apollo dává fokusu i bílý stín 8 px (input:focus-visible) – za zaobleným hledáním z něj byl bílý obdélník */
:is(#vp-bar, #vp-hd, #vp-drawer, #vp-ft) :focus-visible { outline: 3px solid rgba(164, 0, 189, .5); outline-offset: 2px; border-radius: 10px; box-shadow: none; }
.vp-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 30px; }
@media (max-width: 767px) { .vp-wrap { padding: 0 16px; } }

/* ------------------------------------------------------------------ 3) horní lišta */
#vp-bar { position: relative; z-index: 1001; background: #0b0716; color: rgba(255, 255, 255, .78); font-size: 12.5px; }
#vp-bar .vp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 36px; }
#vp-bar .vp-bar-msgs { position: relative; flex: 1; min-width: 0; height: 36px; overflow: hidden; }
#vp-bar .vp-bar-msg { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform .5s var(--vp-ease), opacity .5s; }
#vp-bar .vp-bar-msg.is-on { opacity: 1; transform: none; }
#vp-bar .vp-bar-msg.is-out { opacity: 0; transform: translateY(-100%); }
#vp-bar .vp-bar-msg > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#vp-bar .vp-bar-msg em { font-style: normal; }
@media (max-width: 640px) { #vp-bar .vp-bar-msg em { display: none; } }
#vp-bar .vp-bar-msg b { color: #fff; font-weight: 600; }
#vp-bar .vp-bar-msg .vp-i { width: 16px; height: 16px; color: #ff74a8; }
#vp-bar .vp-bar-msg:hover b { text-decoration: underline; text-underline-offset: 3px; }
#vp-bar .vp-bar-side { display: flex; flex: none; align-items: center; gap: 22px; }
#vp-bar .vp-bar-side a { display: inline-flex; align-items: center; gap: 7px; transition: color .15s; }
#vp-bar .vp-bar-side a:hover { color: #fff; }
#vp-bar .vp-bar-side .vp-i { width: 15px; height: 15px; color: #ff74a8; }
#vp-bar .vp-bar-side small { color: rgba(255, 255, 255, .5); font-size: 12px; }
#vp-bar #google_translate_element { display: flex; align-items: center; }
#vp-bar .goog-te-gadget-simple { display: inline-flex !important; align-items: center; gap: 4px; padding: 3px 9px !important; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 999px; background: transparent !important; font-size: 12px !important; line-height: 1 !important; }
#vp-bar .goog-te-gadget-simple a, #vp-bar .goog-te-gadget-simple span { color: rgba(255, 255, 255, .8) !important; border-color: transparent !important; }
#vp-bar .goog-te-gadget-icon { display: none !important; }

/* ------------------------------------------------------------------ 4) hlavička */
#vp-hd { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--vp-line); transition: box-shadow .3s, background-color .3s; }
#vp-hd.is-stuck { background: rgba(255, 255, 255, .86); box-shadow: 0 12px 34px -22px rgba(30, 10, 60, .45); }
#vp-hd .vp-hd-in { display: flex; align-items: center; gap: 26px; height: 82px; transition: height .3s var(--vp-ease); }
#vp-hd.is-stuck .vp-hd-in { height: 68px; }
#vp-hd .vp-logo { display: block; flex: none; }
#vp-hd .vp-logo img { width: auto; height: 46px; transition: height .3s var(--vp-ease); }
#vp-hd.is-stuck .vp-logo img { height: 40px; }
/* logo je JPG s bílým okrajem → na průsvitné hlavičce byl při posunu vidět bílý obdélník. Ořez přesně podle odznaku
 * (obrázek 600 × 308: odznak 9–591 × 9–299 px, levý horní a pravý dolní roh ostrý, ostatní poloměr 140 px), o 1,5 px
 * dovnitř kvůli světlému vyhlazenému okraji JPG. Jen pro tento soubor loga – jiné logo z administrace zůstane celé. */
:is(#vp-hd .vp-logo, #vp-drawer .vp-dr-head a) img[src*="vr-logo-full-color"] { clip-path: inset(3.4% 1.75% round 0 23.4% 0 23.4% / 0 45.5% 0 45.5%); }
#vp-hd .vp-ibtn.vp-burger { display: none; }
#vp-hd .vp-nav { display: flex; align-items: center; gap: 2px; height: 100%; }
#vp-hd .vp-nav-i { position: relative; display: flex; align-items: center; height: 100%; }
#vp-hd .vp-nav-a { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 999px; font: 600 14.5px/1 var(--vp-font); color: var(--vp-text); white-space: nowrap; transition: background-color .2s, color .2s; }
#vp-hd .vp-nav-a .vp-i { width: 15px; height: 15px; stroke-width: 2.2; transition: transform .25s var(--vp-ease); }
#vp-hd .vp-nav-a:hover, #vp-hd .vp-nav-i.is-open > .vp-nav-a { background: var(--vp-soft); color: var(--vp-pur); }
#vp-hd .vp-nav-i.is-open > .vp-nav-a .vp-i { transform: rotate(180deg); }
#vp-hd .vp-nav-a.is-cur { color: var(--vp-pur); }
#vp-hd .vp-nav-a.is-cur::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 18px; height: 3px; border-radius: 3px; background: var(--vp-grad); transform: translateX(-50%); }
#vp-hd .vp-tools { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }

/* vyhledávání */
#vp-hd .vp-search { position: relative; flex: 1 1 260px; max-width: 360px; margin-left: auto; }
#vp-hd .vp-search + .vp-tools { margin-left: 0; }
#vp-hd .vp-search form { position: relative; display: flex; align-items: center; height: 46px; border-radius: 999px; background: var(--vp-soft); border: 1px solid transparent; transition: border-color .2s, background-color .2s, box-shadow .2s; }
#vp-hd .vp-search form:focus-within { background: #fff; border-color: #d8c6ef; box-shadow: 0 0 0 4px rgba(164, 0, 189, .12); }
#vp-hd .vp-search .vp-i { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--vp-muted); pointer-events: none; }
#vp-hd .vp-search input { width: 100%; height: 100%; padding: 0 44px 0 44px; border: 0; background: none; outline: 0; font: 500 14px/1 var(--vp-font); color: var(--vp-text); -webkit-appearance: none; appearance: none; }
#vp-hd .vp-search input::placeholder { color: #8e88a3; }
#vp-hd .vp-search kbd { position: absolute; right: 12px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: #fff; border: 1px solid var(--vp-line); font: 600 11px/1 var(--vp-font); color: var(--vp-muted); }
#vp-hd .vp-search form:focus-within kbd { display: none; }
#vp-hd .vp-sugg { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 3; min-width: 380px; padding: 8px; border-radius: 22px; background: #fff; border: 1px solid var(--vp-line); box-shadow: 0 30px 70px -30px rgba(30, 10, 60, .45); }
#vp-hd .vp-sugg-h { padding: 8px 10px 6px; font: 600 11px/1 var(--vp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--vp-muted); }
#vp-hd .vp-sugg a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 14px; }
#vp-hd .vp-sugg a.is-act, #vp-hd .vp-sugg a:hover { background: var(--vp-soft); }
#vp-hd .vp-sugg-img { display: grid; place-items: center; width: 52px; height: 40px; overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid var(--vp-line); }
#vp-hd .vp-sugg-img img { width: 100%; height: 100%; object-fit: contain; }
#vp-hd .vp-sugg b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; color: var(--vp-ink); }
#vp-hd .vp-sugg small { font-size: 12px; color: var(--vp-muted); }
#vp-hd .vp-sugg em { font: 700 13.5px/1 var(--vp-font); font-style: normal; color: var(--vp-ink); white-space: nowrap; }
#vp-hd .vp-sugg .vp-sugg-all { display: flex; justify-content: center; gap: 8px; margin-top: 4px; padding: 11px; font-weight: 600; color: var(--vp-pur); }
#vp-hd .vp-sugg .vp-sugg-all .vp-i { position: static; width: 16px; height: 16px; color: currentColor; }
#vp-hd .vp-sugg-none { padding: 14px 12px; font-size: 13.5px; color: var(--vp-muted); }

/* účet a košík */
#vp-hd .vp-ibtn { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--vp-text); transition: background-color .2s, color .2s; }
#vp-hd .vp-ibtn:hover { background: var(--vp-soft); color: var(--vp-pur); }
#vp-hd .vp-ibtn .vp-i { width: 22px; height: 22px; }
#vp-hd .vp-ibtn.is-in::after { content: ""; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--vp-ok); }
#vp-hd .vp-cart { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--vp-ink); color: #fff; font: 600 14px/1 var(--vp-font); white-space: nowrap; transition: transform .2s var(--vp-ease), box-shadow .25s; }
#vp-hd .vp-cart:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(164, 0, 189, .8); background: var(--vp-grad); }
#vp-hd .vp-cart .vp-i { width: 20px; height: 20px; }
#vp-hd .vp-cart.is-full .vp-cart-dot { display: block; }
#vp-hd .vp-cart-dot { display: none; width: 8px; height: 8px; margin-left: -2px; border-radius: 50%; background: #ff5c93; box-shadow: 0 0 0 3px rgba(255, 92, 147, .25); }
#vp-hd .vp-cart.is-bump { animation: vp-bump .6s var(--vp-ease); }
@keyframes vp-bump { 30% { transform: scale(1.08); } 60% { transform: scale(.97); } }

/* mega menu */
#vp-hd .vp-mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 2; padding: 28px 0 32px; background: #fff; border-top: 1px solid var(--vp-line);
  box-shadow: 0 40px 80px -40px rgba(30, 10, 60, .45); opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s, transform .3s var(--vp-ease), visibility 0s .3s;
}
#vp-hd .vp-mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .3s var(--vp-ease), visibility 0s; }
#vp-hd .vp-mega-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 34px; }
#vp-hd .vp-mega-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#vp-hd .vp-mega-h b { font: 700 20px/1.2 var(--vp-font); letter-spacing: -.02em; color: var(--vp-ink); }
#vp-hd .vp-mega-h a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--vp-pur); }
#vp-hd .vp-mega-h a .vp-i { width: 16px; height: 16px; transition: transform .2s var(--vp-ease); }
#vp-hd .vp-mega-h a:hover .vp-i { transform: translateX(3px); }
#vp-hd .vp-mega-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#vp-hd .vp-sub { display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; border: 1px solid var(--vp-line); background: #fff; transition: border-color .2s, box-shadow .25s, transform .25s var(--vp-ease); }
#vp-hd .vp-sub:hover { transform: translateY(-2px); border-color: #ddd0ef; box-shadow: 0 18px 34px -24px rgba(60, 20, 110, .5); }
#vp-hd .vp-sub-img { display: grid; place-items: center; width: 64px; height: 52px; overflow: hidden; border-radius: 13px; background: var(--vp-soft); color: var(--vp-pur); }
#vp-hd .vp-sub-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#vp-hd .vp-sub-img .vp-i { width: 26px; height: 26px; }
#vp-hd .vp-sub b { font-size: 14.5px; font-weight: 600; color: var(--vp-ink); }
#vp-hd .vp-sub > .vp-i { width: 16px; height: 16px; color: var(--vp-muted); transition: transform .2s var(--vp-ease), color .2s; }
#vp-hd .vp-sub:hover > .vp-i { transform: translateX(3px); color: var(--vp-pur); }
#vp-hd .vp-mega-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
#vp-hd .vp-mega-feat-h { grid-column: 1 / -1; font: 600 11px/1 var(--vp-font); letter-spacing: .16em; text-transform: uppercase; color: var(--vp-muted); }
#vp-hd .vp-fc { display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 12px; border-radius: 20px; background: var(--vp-soft); transition: background-color .2s, transform .25s var(--vp-ease); }
#vp-hd .vp-fc:hover { transform: translateY(-2px); background: #f1ebfb; }
#vp-hd .vp-fc-img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #fff; }
#vp-hd .vp-fc-img img { width: 100%; height: 100%; object-fit: contain; }
#vp-hd .vp-fc b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--vp-ink); }
#vp-hd .vp-fc span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--vp-ok); }
#vp-hd .vp-fc em { font: 700 14px/1 var(--vp-font); font-style: normal; color: var(--vp-ink); }
#vp-hd .vp-fc--skel { min-height: 190px; animation: vp-shim 1.5s ease-in-out infinite; }
@keyframes vp-shim { 50% { opacity: .5; } }
#vp-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(11, 7, 22, .3); opacity: 0; pointer-events: none; transition: opacity .25s; }
html.vp-mega-open #vp-scrim { opacity: 1; pointer-events: auto; }
@media (max-width: 991px) { #vp-scrim { display: none; } }

/* ------------------------------------------------------------------ 5) mobilní menu */
#vp-drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; transition: visibility 0s .35s; }
#vp-drawer.is-open { visibility: visible; transition: visibility 0s; }
#vp-drawer .vp-dr-scrim { position: absolute; inset: 0; background: rgba(11, 7, 22, .5); opacity: 0; transition: opacity .3s; }
#vp-drawer.is-open .vp-dr-scrim { opacity: 1; }
#vp-drawer .vp-dr-panel { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(88vw, 400px); overflow-y: auto; background: #fff; transform: translateX(-100%); transition: transform .35s var(--vp-ease); }
#vp-drawer.is-open .vp-dr-panel { transform: none; }
#vp-drawer .vp-dr-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--vp-line); }
#vp-drawer .vp-dr-head img { height: 36px; width: auto; }
#vp-drawer .vp-dr-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vp-soft); }
#vp-drawer .vp-dr-search { padding: 14px 16px 6px; }
#vp-drawer .vp-dr-search form { position: relative; display: flex; align-items: center; height: 48px; border-radius: 999px; background: var(--vp-soft); }
#vp-drawer .vp-dr-search .vp-i { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--vp-muted); }
#vp-drawer .vp-dr-search form:focus-within { background: #fff; box-shadow: inset 0 0 0 1px #d8c6ef, 0 0 0 4px rgba(164, 0, 189, .12); }
#vp-drawer .vp-dr-search input { width: 100%; height: 100%; padding: 0 18px 0 44px; border: 0; background: none; outline: 0; font: 500 15px/1 var(--vp-font); color: var(--vp-text); }
#vp-drawer .vp-dr-nav { padding: 6px 10px; }
#vp-drawer .vp-dr-i { border-bottom: 1px solid var(--vp-line); }
#vp-drawer .vp-dr-row { display: flex; align-items: center; }
#vp-drawer .vp-dr-row > a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 15px 8px; font: 600 16px/1.2 var(--vp-font); color: var(--vp-ink); }
#vp-drawer .vp-dr-row > a .vp-i { width: 22px; height: 22px; color: var(--vp-pur); }
#vp-drawer .vp-dr-tog { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--vp-muted); }
#vp-drawer .vp-dr-tog .vp-i { transition: transform .25s var(--vp-ease); }
#vp-drawer .vp-dr-i.is-open .vp-dr-tog .vp-i { transform: rotate(180deg); }
#vp-drawer .vp-dr-subs { display: none; padding: 0 0 12px 42px; }
#vp-drawer .vp-dr-i.is-open .vp-dr-subs { display: grid; gap: 2px; }
#vp-drawer .vp-dr-subs a { padding: 10px 8px; border-radius: 12px; font-size: 15px; color: var(--vp-text); }
#vp-drawer .vp-dr-subs a:hover { background: var(--vp-soft); }
#vp-drawer .vp-dr-links { display: grid; gap: 2px; padding: 12px 18px; }
#vp-drawer .vp-dr-links a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14.5px; color: var(--vp-text); }
#vp-drawer .vp-dr-links .vp-i { width: 18px; height: 18px; color: var(--vp-mag); }
#vp-drawer .vp-dr-contact { margin: auto 16px 18px; padding: 18px; border-radius: 20px; background: #0b0716; color: rgba(255, 255, 255, .75); font-size: 13.5px; }
#vp-drawer .vp-dr-contact b { display: block; margin-bottom: 8px; font-size: 15px; color: #fff; }
#vp-drawer .vp-dr-contact a { display: flex; align-items: center; gap: 9px; padding: 5px 0; color: #fff; }
#vp-drawer .vp-dr-contact .vp-i { width: 17px; height: 17px; color: #ff74a8; }

/* ------------------------------------------------------------------ 6) patička */
#vp-ft { position: relative; isolation: isolate; overflow: hidden; margin-top: 70px; padding: 0 0 0; background: #0b0716; color: rgba(255, 255, 255, .66); font-size: 14px; }
#vp-ft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 70% at 12% 0%, rgba(123, 0, 246, .32), transparent 70%), radial-gradient(36% 60% at 92% 10%, rgba(228, 0, 92, .26), transparent 70%); }
#vp-ft .vp-ft-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; padding: 46px 0 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
#vp-ft .vp-ft-cta h2 { font: 800 clamp(26px, 2.6vw, 36px)/1.12 var(--vp-font); letter-spacing: -.03em; color: #fff; }
#vp-ft .vp-ft-cta h2 span { background: var(--vp-grad-l); -webkit-background-clip: text; background-clip: text; color: transparent; }
#vp-ft .vp-ft-cta p { margin-top: 8px; color: rgba(255, 255, 255, .62); }
#vp-ft .vp-ft-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
#vp-ft .vp-ft-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); font: 600 15px/1 var(--vp-font); color: #fff; white-space: nowrap; transition: background-color .2s, border-color .2s, transform .2s var(--vp-ease); }
#vp-ft .vp-ft-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); }
#vp-ft .vp-ft-btn--grad { border-color: transparent; background: var(--vp-grad); box-shadow: 0 16px 34px -16px rgba(199, 0, 138, .8); }
#vp-ft .vp-ft-btn--grad:hover { background: var(--vp-grad); }
#vp-ft .vp-ft-btn .vp-i { width: 19px; height: 19px; }
#vp-ft .vp-ft-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 34px; padding: 46px 0; }
#vp-ft .vp-ft-logo { display: inline-block; padding: 8px 12px; border-radius: 16px; background: #fff; }
#vp-ft .vp-ft-logo img { height: 40px; width: auto; }
#vp-ft .vp-ft-about { margin-top: 16px; max-width: 320px; line-height: 1.65; }
#vp-ft .vp-ft-contact { display: grid; gap: 8px; margin-top: 18px; }
#vp-ft .vp-ft-contact a, #vp-ft .vp-ft-contact span { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
#vp-ft .vp-ft-contact small { color: rgba(255, 255, 255, .5); }
#vp-ft .vp-ft-contact .vp-i { width: 17px; height: 17px; color: #ff74a8; }
#vp-ft h3 { margin-bottom: 14px; font: 700 15px/1.3 var(--vp-font); color: #fff; }
#vp-ft .vp-ft-list { display: grid; gap: 9px; }
#vp-ft .vp-ft-list a { transition: color .15s; }
#vp-ft .vp-ft-list a:hover { color: #fff; }
#vp-ft .vp-ft-point p { line-height: 1.65; }
#vp-ft .vp-ft-point a { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-weight: 600; color: #ff8fbc; }
#vp-ft .vp-ft-point .vp-i { width: 16px; height: 16px; }
#vp-ft .vp-ft-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
#vp-ft .vp-ft-tags span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; color: rgba(255, 255, 255, .72); }
#vp-ft .vp-ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: rgba(255, 255, 255, .5); }
#vp-ft .vp-ft-bottom-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
#vp-ft .vp-ft-bottom a { color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 3px; }
#vp-ft .vp-ft-bottom a:hover { color: #fff; }
/* podpis Shoptetu: text i barevné logo beze změny (VOP Shoptetu čl. 10.3 – označení tvůrce se nesmí měnit ani zakrývat) */
#vp-ft .vp-ft-sig { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
#vp-ft #signature { display: inline-flex !important; align-items: center; gap: 6px; }
#vp-ft #signature a { color: rgba(255, 255, 255, .72); text-decoration: none; opacity: 1; }
#vp-ft #signature a:hover { color: #fff; }
#vp-ft #signature img { display: inline-block; width: 17px; height: 17px; margin: 0; opacity: 1; }
#vp-ft #signature a.title { margin: 0 7px 0 0 !important; padding: 0 !important; }
#vp-ft #signature a.image { margin: 0 !important; }
#vp-ft #signature .apollo { display: none !important; }
#vp-ft .vp-ft-design { color: rgba(255, 255, 255, .72); }
#vp-ft .vp-ft-design b { font-weight: 600; color: #fff; }

/* ------------------------------------------------------------------ 7) menší obrazovky */
@media (max-width: 1280px) {
  #vp-hd .vp-hd-in { gap: 18px; }
  #vp-hd .vp-nav-a { padding: 0 11px; font-size: 14px; }
  #vp-hd .vp-search { max-width: 280px; }
  #vp-ft .vp-ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #vp-ft .vp-ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 1140px) {
  #vp-hd .vp-search kbd { display: none; }
  #vp-hd .vp-cart-sum { display: none; }
  #vp-hd .vp-cart { padding: 0 14px; }
}
@media (max-width: 991px) {
  html.vp-hd body { --vp-hd-h: 64px; }
  #vp-bar .vp-wrap { height: 32px; justify-content: center; }
  #vp-bar .vp-bar-msgs { height: 32px; }
  #vp-bar .vp-bar-msg { justify-content: center; }
  #vp-bar .vp-bar-side { display: none; }
  #vp-hd .vp-hd-in, #vp-hd.is-stuck .vp-hd-in { height: 64px; gap: 6px; }
  #vp-hd .vp-ibtn.vp-burger { display: inline-grid; margin-left: -8px; }
  #vp-hd .vp-logo { margin-right: auto; }
  #vp-hd .vp-logo img, #vp-hd.is-stuck .vp-logo img { height: 36px; }
  #vp-hd .vp-nav, #vp-hd .vp-mega, #vp-hd .vp-search { display: none; }
  #vp-hd .vp-tools { margin-left: 0; gap: 2px; }
  #vp-hd .vp-ibtn--search { display: inline-grid; }
  #vp-hd .vp-cart { height: 44px; padding: 0 14px 0 12px; }
  #vp-ft .vp-ft-cta { grid-template-columns: minmax(0, 1fr); }
  #vp-ft .vp-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
}
@media (min-width: 1280px) { #vp-hd .vp-ibtn--search { display: none; } }
@media (min-width: 992px) and (max-width: 1279px) {
  #vp-hd .vp-hd-in { position: relative; gap: 12px; }
  #vp-hd .vp-logo img, #vp-hd.is-stuck .vp-logo img { height: 40px; }
  #vp-hd .vp-nav-a { padding: 0 9px; font-size: 13.5px; }
  #vp-hd .vp-search { display: none; }
  #vp-hd .vp-tools, #vp-hd .vp-search + .vp-tools { margin-left: auto; gap: 4px; }
  #vp-hd .vp-ibtn--search { display: inline-grid; }
  #vp-hd.is-search .vp-ibtn--search { color: var(--vp-pur); background: var(--vp-soft); }
  #vp-hd.is-search .vp-search { position: absolute; top: calc(100% + 10px); right: 24px; z-index: 40; display: block; width: min(560px, calc(100% - 48px)); max-width: none; margin: 0; }
  #vp-hd.is-search .vp-search form { height: 52px; background: #fff; border-color: #d8c6ef; box-shadow: 0 22px 50px -18px rgba(30, 10, 60, .45); }
}
@media (max-width: 767px) {
  #vp-bar { font-size: 12px; }
  #vp-hd .vp-ibtn { width: 42px; height: 42px; }
  #vp-hd .vp-cart-sum { display: none; }
  #vp-ft { margin-top: 50px; }
  #vp-ft .vp-ft-cta { padding: 36px 0 30px; }
  #vp-ft .vp-ft-cta-btns .vp-ft-btn { flex: 1 1 auto; justify-content: center; }
  #vp-ft .vp-ft-cols { grid-template-columns: minmax(0, 1fr); padding: 34px 0; }
  #vp-ft .vp-ft-brand { grid-column: auto; }
  #vp-ft .vp-ft-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #vp-bar *, #vp-hd *, #vp-drawer *, #vp-ft * { animation: none !important; transition: none !important; }
}