<section id="vb-p7q-root" class="vb-p7q" data-section-name="Всплывающее окно с памяткой" data-vibeblock-unique-section="yes" aria-hidden="true">
<style>
.vb-p7q,
.vb-p7q * { box-sizing: border-box; }
.vb-p7q input,
.vb-p7q textarea,
.vb-p7q select { font: inherit; }

.vb-p7q { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; font-family: var(--t-text-font, "Inter", "Helvetica Neue", Arial, sans-serif); }
.vb-p7q[data-state="open"] { pointer-events: auto; }

.vb-p7q__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 24, 18, 0.62);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 260ms ease;
}
.vb-p7q[data-state="open"] .vb-p7q__backdrop { opacity: 1; }
.vb-p7q[data-state="closing"] .vb-p7q__backdrop { opacity: 0; }

.vb-p7q__dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -46%) scale(0.96);
width: min(60vw, 800px);
max-height: min(80vh, 720px);
background: #ffffff;
color: #1f2a24;
border-radius: 18px;
box-shadow: 0 28px 64px rgba(15, 24, 18, 0.28), 0 4px 14px rgba(15, 24, 18, 0.12);
display: flex;
align-items: stretch;
overflow: hidden;
opacity: 0;
transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease;
}
.vb-p7q[data-state="open"] .vb-p7q__dialog {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.vb-p7q[data-state="closing"] .vb-p7q__dialog {
transform: translate(-50%, -46%) scale(0.96);
opacity: 0;
}

.vb-p7q__close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
color: #4b5b52;
transition: background-color 160ms ease, color 160ms ease;
z-index: 2;
}
.vb-p7q__close:hover,
.vb-p7q__close:focus-visible {
background: #eef3ee;
color: #1f2a24;
outline: none;
}
.vb-p7q__close svg { width: 18px; height: 18px; display: block; }

.vb-p7q__media {
flex: 0 0 38%;
min-width: 200px;
background: #d4e6d4;
display: flex;
align-items: stretch;
justify-content: center;
padding: 0;
overflow: hidden;
}
.vb-p7q__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
display: block;
}

.vb-p7q__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px 32px 28px 26px;
gap: 12px;
min-width: 0;
}
.vb-p7q__title {
font-family: var(--t-headline-font, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 22px;
font-weight: 600;
line-height: 1.25;
color: #1f2a24;
margin: 0;
padding-right: 36px;
}
.vb-p7q__text {
font-size: 15px;
line-height: 1.5;
color: #4b5b52;
margin: 0;
}
.vb-p7q__action { margin-top: 8px; }

.vb-p7q__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
min-height: 44px;
font-family: var(--t-text-font, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
color: #ffffff;
background: #2f7d4f;
border: 0;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
box-shadow: 0 4px 12px rgba(47, 125, 79, 0.22);
white-space: nowrap;
}
.vb-p7q__btn:hover,
.vb-p7q__btn:focus-visible {
background: #266a42;
box-shadow: 0 6px 16px rgba(47, 125, 79, 0.28);
outline: none;
}
.vb-p7q__btn:active { transform: translateY(1px); }

@media (max-width: 640px) {
.vb-p7q__dialog {
width: calc(100vw - 24px);
max-height: calc(100vh - 24px);
flex-direction: column;
border-radius: 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.vb-p7q__media {
flex: 0 0 auto;
height: 180px;
padding: 0;
background: #d4e6d4;
}
.vb-p7q__media img { max-height: 180px; }
.vb-p7q__body {
padding: 16px 22px 24px;
gap: 10px;
}
.vb-p7q__title {
font-size: 20px;
padding-right: 44px;
}
.vb-p7q__text { font-size: 15px; }
.vb-p7q__btn { width: auto; align-self: flex-start; }
.vb-p7q__close { top: 8px; right: 8px; }
}

@media (max-width: 360px) {
.vb-p7q__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
.vb-p7q__backdrop,
.vb-p7q__dialog { transition: none; }
.vb-p7q[data-state="open"] .vb-p7q__dialog { transform: translate(-50%, -50%); }
}

html.vb-p7q-lock,
body.vb-p7q-lock { overflow: hidden !important; }
</style>

<div class="vb-p7q__backdrop" data-vb-p7q-close="" aria-hidden="true"></div>

<div class="vb-p7q__dialog" role="dialog" aria-modal="true" aria-labelledby="vb-p7q-title" aria-describedby="vb-p7q-text">
<button class="vb-p7q__close" type="button" data-vb-p7q-close="" aria-label="Закрыть окно">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="6" y1="6" x2="18" y2="18"></line>
<line x1="18" y1="6" x2="6" y2="18"></line>
</svg>
</button>

<div class="vb-p7q__media">
<img src="https://static.tildacdn.com/tila3731-6361-4535-b232-623732303766/photo-1680717762678-.jpg" alt="Комнатное растение в горшке" loading="lazy">
</div>

<div class="vb-p7q__body">
<h2 class="vb-p7q__title" id="vb-p7q-title">Пусть ваши растения будут здоровыми</h2>
<p class="vb-p7q__text" id="vb-p7q-text">Заберите короткую памятку с базовыми правилами ухода за популярными комнатными растениями.</p>
<div class="vb-p7q__action">
<a class="vb-p7q__btn" href="/#care-guide">Открыть памятку</a>
</div>
</div>
</div>

<script>
(function () {
var DELAY_MS = 20000;
var STORAGE_KEY = 'vb-p7q-shown';
var GUARD_HASH = '#care-guide';
var root = document.getElementById('vb-p7q-root');
if (!root) return;
if (root.dataset.vbP7qInit === '1') return;
root.dataset.vbP7qInit = '1';

var storage;
try {
storage = window.sessionStorage;
} catch (e) {
storage = null;
}
if (storage && storage.getItem(STORAGE_KEY) === '1') return;

var onCareGuide = false;
try {
var hash = window.location && window.location.hash ? window.location.hash : '';
var path = window.location && window.location.pathname ? window.location.pathname.toLowerCase() : '';
if (hash === GUARD_HASH || hash.indexOf('care-guide') !== -1) onCareGuide = true;
if (path.indexOf('care-guide') !== -1) onCareGuide = true;
} catch (e) {
onCareGuide = false;
}
if (onCareGuide) return;

var reduceMotion = false;
try {
reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
} catch (e) {
reduceMotion = false;
}

var closeTimer = null;
var openTimer = setTimeout(show, DELAY_MS);

function lockScroll(on) {
var b = document.body;
var h = document.documentElement;
if (on) {
if (!b.classList.contains('vb-p7q-lock')) {
b.classList.add('vb-p7q-lock');
h.classList.add('vb-p7q-lock');
}
} else {
b.classList.remove('vb-p7q-lock');
h.classList.remove('vb-p7q-lock');
}
}

function show() {
if (!root || root.dataset.state === 'open' || root.dataset.state === 'closing') return;
if (storage) {
try { storage.setItem(STORAGE_KEY, '1'); } catch (e) { /* ignore */ }
}
root.setAttribute('data-state', 'open');
root.setAttribute('aria-hidden', 'false');
lockScroll(true);
if (reduceMotion) {
var dlg = root.querySelector('.vb-p7q__dialog');
var bd = root.querySelector('.vb-p7q__backdrop');
if (dlg) dlg.style.transition = 'none';
if (bd) bd.style.transition = 'none';
}
var focusable = root.querySelector('.vb-p7q__close');
if (focusable && typeof focusable.focus === 'function') {
try { focusable.focus({ preventScroll: true }); } catch (e) { focusable.focus(); }
}
}

function hide() {
if (!root || root.dataset.state !== 'open') return;
root.setAttribute('data-state', 'closing');
root.setAttribute('aria-hidden', 'true');
var duration = reduceMotion ? 0 : 260;
clearTimeout(closeTimer);
closeTimer = setTimeout(finish, duration);
}

function finish() {
if (!root) return;
root.removeAttribute('data-state');
lockScroll(false);
var dlg = root.querySelector('.vb-p7q__dialog');
var bd = root.querySelector('.vb-p7q__backdrop');
if (dlg) dlg.style.transition = '';
if (bd) bd.style.transition = '';
}

root.addEventListener('click', function (e) {
var t = e.target;
if (t && t.closest && t.closest('[data-vb-p7q-close]')) {
e.preventDefault();
hide();
}
});

document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' || e.keyCode === 27) {
if (root.getAttribute('data-state') === 'open') hide();
}
});

window.addEventListener('beforeunload', function () {
lockScroll(false);
});
})();
</script>
</section>