{"html":"<!-- templates/p1/showcase_fragment.html -->\n\n<!-- ============================================================\n     Встраиваемая витрина StatusPraesens — widget.html\n     Это ЭТАЛОН поля \"html\" в ответе эндпоинта: Django-шаблон\n     должен генерировать ровно такую разметку (данные — Сочи-26).\n     Стили к ней — widget.css (поле \"css\").\n     Источник истины: vitrina.html (демо в сборе).\n     ============================================================ -->\n\n<div class=\"sp-lk-form-product\">\n    \n    <a class=\"sp-lk-card\"\n       href=\"https://lk.praesens.ru/form/rAWkd_TjTdigF4xdy483Nw/?pp=46dc7a60-1acd-4321-9b4c-0accd44d7887\"\n       aria-label=\"Часть 1 (16–17 ноября 2026 года) — Антиэйджинг в гинекологии, 0 ₽ - выбрать\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\">\n\n        \n\n        <span class=\"sp-lk-card__title\">Часть 1 (16–17 ноября 2026 года) — Антиэйджинг в гинекологии</span>\n\n        <span class=\"sp-lk-card__price\">\n            \n            0 ₽\n        </span>\n\n        <span class=\"sp-lk-card__btn\">Выбрать</span>\n\n        \n        <ul class=\"sp-lk-card__features\">\n            \n            <li>Доступ к трансляции открытых заседаний</li>\n            \n            <li>Баллы НМО (ЗЕТ)</li>\n            \n            <li>Доступ к записи открытых заседаний</li>\n            \n        </ul>\n        \n    </a>\n    \n</div>\n","css":"/* Витрина StatusPraesens, содержимое поля \"css\" из ответа эндпоинта.\n   Все селекторы сидят внутри .sp-lk-form-product, на принимающий сайт\n   ничего не протекает. Демо в сборе - vitrina.html.\n   Визуал повторяет карточку витрины ЛК (FormProductCard): белая карточка,\n   кнопка \"Выбрать\" сразу под ценой, ниже список \"что входит\" с галочками. */\n\n.sp-lk-form-product {\n    /* переменные темы, сайт-приемник может переопределить любую */\n    --sp-lk-accent:       #4d7bae;  /* синий ЛК: заголовки, цена, кнопки */\n    --sp-lk-accent-hover: #3a608f;\n    --sp-lk-on-accent:    #ffffff;  /* текст на акцентном фоне */\n    --sp-lk-card-bg:      #f8fafc;  /* bg-slate-50, как у карточки в ЛК */\n    --sp-lk-border:       #e4e4e7;  /* рамка карточки zinc-200, как в ЛК */\n    --sp-lk-text:         #3f3f46;  /* текст zinc-700, как в ЛК */\n    --sp-lk-muted:        #fca5a5;  /* зачеркнутая старая цена */\n    --sp-lk-badge-bg:     #fff1f2;\n    --sp-lk-badge-text:   #f43f5e;\n    --sp-lk-badge-border: #fecdd3;\n    --sp-lk-radius:       8px;\n    --sp-lk-gap:          24px;\n    --sp-lk-card-min:     230px;    /* минимальная ширина карточки */\n\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(var(--sp-lk-card-min), 1fr));\n    gap: var(--sp-lk-gap);\n    align-items: stretch;\n    font: inherit;   /* шрифт берем у сайта, чтобы виджет выглядел родным */\n    line-height: 1.45;\n    color: var(--sp-lk-text);\n}\n.sp-lk-form-product *,\n.sp-lk-form-product *::before,\n.sp-lk-form-product *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n/* карточка, она же целиком ссылка на форму ЛК */\n.sp-lk-card {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    background: var(--sp-lk-card-bg);\n    border: 1px solid var(--sp-lk-border);\n    border-radius: var(--sp-lk-radius);\n    /* сверху 40px у всех карточек одинаково - это полка под бейдж,\n       чтобы названия в ряду стояли на одной линии */\n    padding: 40px 20px 20px;\n    text-decoration: none;\n    color: inherit;\n    transition: box-shadow .18s ease, transform .18s ease;\n}\n.sp-lk-card:hover {\n    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);\n    transform: translateY(-2px);\n}\n.sp-lk-card:focus-visible {\n    outline: 3px solid var(--sp-lk-accent);\n    outline-offset: 3px;\n}\n\n/* бейдж (comment позиции), может отсутствовать. Пилюля сидит на верхней\n   рамке через absolute и растет вниз, в ту самую 40px-полку: строки до\n   трех названия не заденут */\n.sp-lk-card__badge {\n    position: absolute;\n    top: -13px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: max-content;\n    max-width: calc(100% - 24px);\n    overflow-wrap: break-word;\n    text-align: center;\n    background: var(--sp-lk-badge-bg);\n    color: var(--sp-lk-badge-text);\n    border: 1px solid var(--sp-lk-badge-border);\n    border-radius: 12px;\n    padding: 4px 12px;\n    font-size: 10px;\n    line-height: 1.4;\n    font-weight: 600;\n    letter-spacing: .02em;\n}\n\n/* название пакета: регистр не трогаем, приходит из базы как есть.\n   min-height выравнивает одну и две строки в ряду по одной линии */\n.sp-lk-card__title {\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    font-weight: 600;\n    text-align: center;\n    color: var(--sp-lk-accent);\n}\n\n.sp-lk-card__price {\n    margin-top: 8px;\n    text-align: center;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--sp-lk-accent);\n}\n.sp-lk-card__old-price {\n    margin-right: 12px;\n    color: var(--sp-lk-muted);\n    text-decoration: line-through;\n}\n\n/* кнопка сразу под ценой, как в ЛК, на всю ширину карточки;\n   кликабельна вся карточка, кнопка - визуальный акцент */\n.sp-lk-card__btn {\n    display: block;\n    width: 100%;\n    margin-top: 16px;\n    padding: 12px 16px;\n    background: var(--sp-lk-accent);\n    color: var(--sp-lk-on-accent);\n    border-radius: 999px;\n    font-size: 16px;\n    font-weight: 600;\n    text-align: center;\n    transition: background .15s ease;\n}\n.sp-lk-card:hover .sp-lk-card__btn { background: var(--sp-lk-accent-hover); }\n\n/* список \"что входит\", под кнопкой */\n.sp-lk-card__features {\n    margin-top: 20px;\n    list-style: none;\n}\n.sp-lk-card__features li {\n    position: relative;\n    padding-left: 22px;\n}\n.sp-lk-card__features li + li { margin-top: 8px; }\n/* галочка heroicons:check, как в ЛК; через mask красится в цвет текста */\n.sp-lk-card__features li::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: .2em;\n    width: 16px;\n    height: 16px;\n    background: currentColor;\n    -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E\") no-repeat center / contain;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E\") no-repeat center / contain;\n}\n\n@media (max-width: 480px) {\n    .sp-lk-form-product { --sp-lk-gap: 18px; }\n}\n"}