.boxSeparator {
    margin: 60px 0;
    height: 1px;
    background-color: #d4d4d4;
    display: inline-block;
}

.topPanel {
    position: relative;
    min-height: 600px;
    background: var(--sv-sand, #f3ecdf);
}

/* --- Home hero --- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 72vh, 680px);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: var(--sv-sand, #f3ecdf);
    transform: scale(1.04);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(125deg, rgba(17, 22, 19, 0.94) 0%, rgba(17, 22, 19, 0.78) 48%, rgba(31, 90, 72, 0.28) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 40px 15px 52px;
}

.hero__inner.container::before,
.hero__inner.container::after {
    display: none;
}

.hero__content {
    max-width: 540px;
}

.hero__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.hero__steps li {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(31, 90, 72, 0.45);
    background: rgba(31, 90, 72, 0.16);
    color: #cfe0d9;
    font-size: 13px;
    line-height: 1.2;
}

.hero__title {
    margin: 0 0 16px;
    color: #fff;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
}

.hero__subtitle {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.45;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.hero__cta {
    min-width: 168px;
    text-align: center;
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    line-height: 1.4;
}

.hero__trust-sep {
    opacity: 0.55;
}

.hero__showcase {
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroShowcase {
    position: relative;
    width: min(100%, 480px);
    height: 440px;
    background: none;
    perspective: 900px;
    perspective-origin: center center;
}

/* Карточка карусели = переиспользованный partial _design_card.html.twig
   (2026-09-17, "превью растягивается на всю карточку - теряя целостность
   макета, выглядит дёшево... может как-то в карусель запихивать обе
   стороны как в превью в списке шаблонов") - тот же изометрический стек
   лицо+оборот (.layoutCard__preview--stack), что на /designs/, вместо
   одной плоской <img>, растянутой object-fit:cover в чужой формат бокса.
   Селекторы намеренно СКОПИРОВАНЫ через `.heroShowcase .heroShowcase__card`
   (специфичность 0,2,0), а не голым `.heroShowcase__card` (0,1,0) - иначе
   общий `.itemSketch { margin-bottom: 30px }` (класс тоже висит на этом
   же <a>, т.к. это тот же partial) при равной специфичности отбивал бы
   margin-bottom обратно в 30px по порядку в файле, ломая центрирование
   через отрицательный margin ниже. */
.heroShowcase .heroShowcase__card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 320px;
    margin: -160px 0 0 -120px;
    border: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: none;
    outline: none;
    transform: translate3d(0, 8%, -30px) scale(0.72);
    transform-style: preserve-3d;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.6s;
    pointer-events: none;
}

/* Заполняем бокс карусели содержимым partial'а - у него своя раскладка
   (design > .layoutCard__preview--stack), рассчитанная на карточку сетки
   /designs/ высотой 200px, не на карусель героя. Подпись с именем
   макета тут не нужна - фокус на самой карточке, как было изначально. */
.heroShowcase .heroShowcase__card .design {
    width: 100%;
    height: 100%;
}

.heroShowcase .heroShowcase__card .layoutCard__preview {
    height: 100%;
    background: none;
    border: 0;
}

/* Пересчитываем ширину/высоту лицо+оборот-карточек явной формулой вместо
   штатных height:68%/max-width:58%/aspect-ratio из .layoutCard__preview--stack
   (2026-09-17, живой баг: "вижу белые линии сверху и снизу, если макет
   горизонтальный"). Причина настоящая, не мерещится: у штатного правила
   ВЫСОТА задана явным значением (68%), ШИРИНА - auto + max-width + aspect-
   ratio. Для портретных пропорций это работает (высота = ведущая ось), но
   для ландшафтных max-width обрезает ширину, а высота, будучи явно
   заданной, НЕ пересчитывается обратно под новое соотношение сторон - в
   .layoutCard__preview--stack (сетка /designs/, где карточка шире/ниже)
   это малозаметно, в героя (240×320 - гораздо уже и выше) даёт заметный
   зазор, в котором проступает светлый radial-gradient фон стека, отсюда
   "белые линии". min()-формула ниже даёт ширину/высоту, ВСЕГДА
   согласованные с реальным --preview-w/--preview-h, для любой ориентации -
   139.2px/217.6px это 58%/68% от ФИКСИРОВАННЫХ 240×320 карточки героя
   (единственного места, где .heroShowcase__card встречается - см. её же
   правило выше, .heroShowcase__card не меняет свой px-размер ни на одном
   брейкпоинте, меняется только контейнер/веер вокруг). Не трогаем базовое
   правило в .layoutCard__preview--stack - оно работает на /designs/, где
   контекст другой (карточка сетки шире/ниже, а не уже/выше), не хотим
   рисковать регрессией на протестированной странице ради героя. */
.heroShowcase .heroShowcase__card .layoutCard__preview .frontPreview,
.heroShowcase .heroShowcase__card .layoutCard__preview .backPreview {
    width: min(139.2px, 217.6px * var(--preview-w, 1) / var(--preview-h, 1));
    height: min(217.6px, 139.2px * var(--preview-h, 1) / var(--preview-w, 1));
    max-width: none;
    /* Штатный box-shadow (.layoutCard__preview--stack ниже по файлу) несёт
       ТРЕТЬЮ, инсетную тень `0 1px 0 rgba(255,255,255,.55) inset` - лёгкий
       "глянцевый" бортик сверху карточки, задуманный как деталь, а не баг.
       На маленькой карточке /designs/ (не трогаем) это незаметно; в героя
       карточке (крупнее) читается как настоящая белая полоска сверху
       (2026-09-17, живой репорт после того, как уже убрали 2 других
       источника той же жалобы - аспект-рейшо контента и оффсет оборотки).
       Оставляем обе теневые (глубина карточки), убираем только светлый инсет. */
    box-shadow:
        0 14px 28px rgba(31, 42, 36, 0.18),
        0 2px 6px rgba(31, 42, 36, 0.1);
}

/* Оборотная сторона в штатном .layoutCard__preview--stack смещена от
   лицевой на 14 процентных пунктов top (8%→22%) + 36px по X (±18px) - в
   карточке сетки /designs/ (200px высотой) это даёт деликатный "второй
   слой позади", в героя карточке (320px высотой, тот же % даёт куда
   больше пикселей смещения - 44.8px вместо 28px) тот же сдвиг иногда
   выталкивает цвет оборота заметным клином поверх лицевой стороны,
   особенно когда цвета сторон контрастны (2026-09-17, живой баг:
   "все равно вижу полосу сверху" - после фикса aspect-ratio выше стрип
   оказался именно этим, не геометрией бокса). Уменьшенное смещение здесь
   даёт тот же "виден второй слой" эффект, но деликатнее - подобрано и
   проверено вживую на самом контрастном случае (тёмно-синяя лицевая +
   светло-голубая оборотная). */
.heroShowcase .heroShowcase__card .layoutCard__preview .backPreview {
    top: 12%;
    transform: translate3d(calc(-50% - 8px), 0, -8px) rotateX(22deg) rotateY(-32deg) rotateZ(10deg);
}

.heroShowcase .heroShowcase__card .nameDesign {
    display: none;
}

.heroShowcase .heroShowcase__card.is-active {
    z-index: 30;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transform: translate3d(0, 0, 36px) rotate(-2deg) scale(1.12);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    pointer-events: auto;
}

.heroShowcase .heroShowcase__card.is-prev {
    z-index: 20;
    opacity: 0.42;
    visibility: visible;
    transform: translate3d(-46%, 10%, -70px) rotate(-12deg) scale(0.72);
}

.heroShowcase .heroShowcase__card.is-next {
    z-index: 10;
    opacity: 0.42;
    visibility: visible;
    transform: translate3d(46%, 12%, -70px) rotate(11deg) scale(0.72);
}

.heroShowcase .heroShowcase__card.is-prev2 {
    z-index: 8;
    opacity: 0.09;
    visibility: visible;
    filter: blur(0.5px);
    transform: translate3d(-42%, 9%, -145px) rotate(-11deg) scale(0.66);
}

.heroShowcase .heroShowcase__card.is-next2 {
    z-index: 7;
    opacity: 0.09;
    visibility: visible;
    filter: blur(0.5px);
    transform: translate3d(42%, 11%, -145px) rotate(10deg) scale(0.66);
}

@media screen and (max-width: 991px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 28px;
        padding-bottom: 36px;
    }

    .hero__content {
        max-width: none;
        text-align: center;
    }

    .hero__steps,
    .hero__actions,
    .hero__trust {
        justify-content: center;
    }

    .hero__showcase {
        order: 2;
    }

    .heroShowcase {
        width: min(100%, 360px);
        height: 370px;
    }

    .heroShowcase .heroShowcase__card.is-prev {
        transform: translate3d(-38%, 8%, -70px) rotate(-10deg) scale(0.74);
    }

    .heroShowcase .heroShowcase__card.is-next {
        transform: translate3d(38%, 10%, -70px) rotate(9deg) scale(0.74);
    }

    .heroShowcase .heroShowcase__card.is-prev2 {
        opacity: 0.08;
        transform: translate3d(-36%, 8%, -145px) rotate(-10deg) scale(0.66);
    }

    .heroShowcase .heroShowcase__card.is-next2 {
        opacity: 0.08;
        transform: translate3d(36%, 10%, -145px) rotate(9deg) scale(0.66);
    }
}

@media screen and (max-width: 575px) {
    .hero {
        min-height: 0;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__cta {
        width: 100%;
        min-width: 0;
    }

    .heroShowcase {
        width: min(100%, 320px);
        height: 330px;
    }

    .heroShowcase .heroShowcase__card.is-active {
        transform: translate3d(0, 0, 28px) rotate(-2deg) scale(1.06);
    }

    .heroShowcase .heroShowcase__card.is-prev {
        transform: translate3d(-34%, 8%, -70px) rotate(-10deg) scale(0.74);
    }

    .heroShowcase .heroShowcase__card.is-next {
        transform: translate3d(34%, 10%, -70px) rotate(9deg) scale(0.74);
    }

    .heroShowcase .heroShowcase__card.is-prev2,
    .heroShowcase .heroShowcase__card.is-next2 {
        opacity: 0.07;
    }

    .heroShowcase .heroShowcase__card.is-prev2 {
        transform: translate3d(-32%, 8%, -145px) rotate(-9deg) scale(0.66);
    }

    .heroShowcase .heroShowcase__card.is-next2 {
        transform: translate3d(32%, 10%, -145px) rotate(8deg) scale(0.66);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__bg {
        transform: none;
    }

    .heroShowcase .heroShowcase__card {
        transition: none;
    }

    .heroShowcase .heroShowcase__card.is-prev2,
    .heroShowcase .heroShowcase__card.is-next2 {
        filter: none;
    }
}

.topPanel #logoMenu {
    position: relative;
    z-index: 20;
}

.topPanel .mainInfo {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.topPanelInner .divLogo,
.topPanel .divLogo {
    width: 100%;
    margin: 40px auto;
    position: relative;
}

.topPanelInner .logoSlogan,
.topPanel .logoSlogan {
    width: 100%;
    text-align: center;
    position: absolute;
    font-size: 12px;
    color: var(--color-muted, #909090);
    bottom: -10px;
}

.cartItogo {
    border-top: 1px solid #1f5a48;
    font-size: 21px;
    margin: 20px 0 40px 0;
    padding-top: 10px;
}

.cartPage .pageIntro--accent {
    margin-bottom: 28px;
}

.cartPage__layout {
    align-items: flex-start;
}

.cartItems {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cartPage .itemSketch {
    margin-bottom: 0;
}

.cartItem {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    grid-template-areas: "preview content";
    gap: 24px;
    align-items: stretch;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #eae2d3;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

.cartItem--impositionOnly {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #eae2d3;
    border-radius: 10px;
    box-shadow: none;
}

.cartItem__previewLink {
    grid-area: preview;
    position: relative;
    display: block;
    text-decoration: none;
    align-self: center;
}

.cartItem .preview_img_click {
    width: 100%;
    height: 156px;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f5f4;
}

.cartItem--impositionOnly .preview_img_click {
    height: 72px;
    opacity: 0.85;
}

.cartItem .preview_img_click:hover {
    opacity: 1;
    border-color: var(--color-brand, #1f5a48);
}

.cartItem .preview_img_click .frontPreview,
.cartItem .preview_img_click .backPreview {
    height: 108px;
}

.cartItem--impositionOnly .preview_img_click .frontPreview,
.cartItem--impositionOnly .preview_img_click .backPreview {
    height: 52px;
}

.cartItem__content {
    grid-area: content;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "kind kind"
        "title price"
        "desc desc"
        ". remove";
    gap: 8px 24px;
    align-items: start;
    min-width: 0;
    min-height: 156px;
}

.cartItem--impositionOnly .cartItem__content {
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "kind price"
        "title title"
        ". remove";
    gap: 4px 16px;
    min-height: 0;
    align-items: center;
}

.cartItem__kind {
    grid-area: kind;
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #222;
}

.cartItem__title {
    grid-area: title;
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: 1.25;
}

.cartItem--impositionOnly .cartItem__title {
    font-size: 16px;
}

.cartItem__title a {
    color: #222;
    text-decoration: none;
}

.cartItem__title a:hover {
    color: var(--color-brand, #1f5a48);
}

.cartItem__badge {
    grid-area: badge;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f0f5f2;
    color: #4a5a50;
    font-size: 13px;
    line-height: 1.3;
}

.cartItem__desc {
    grid-area: desc;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #777;
}

.cartItem__price {
    grid-area: price;
    justify-self: end;
    align-self: start;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    color: #222;
    white-space: nowrap;
}

.cartItem--impositionOnly .cartItem__price {
    font-size: 18px;
    color: #245a73;
}

.cartItem__remove {
    grid-area: remove;
    justify-self: end;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #8a8a8a;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cartItem__remove:hover,
.cartItem__remove:focus-visible {
    color: #c0392b;
}

.cartItem__remove:focus:not(:focus-visible) {
    outline: none;
}

.cartItem__removeIcon {
    flex-shrink: 0;
}

.cartItem__breakdown {
    grid-area: desc;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cartItem__breakdownRow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #777;
}

.cartItem__breakdownRow--addon {
    margin-top: 2px;
    padding: 8px 10px;
    border: 1px solid #bce8f1;
    border-radius: 8px;
    background: #d9edf7;
    color: #31708f;
}

.cartItem__breakdownRow--addon .cartItem__breakdownPrice {
    color: #245a73;
}

.cartItem__breakdownRow--addon .cartItem__breakdownRemove {
    color: #a94442;
}

.cartItem__breakdownRow--addon .cartItem__breakdownRemove:hover,
.cartItem__breakdownRow--addon .cartItem__breakdownRemove:focus-visible {
    color: #a94442;
    background: #f2dede;
    box-shadow: inset 0 0 0 1px #ebccd1;
}

.cartItem__breakdownLabel {
    flex: 1 1 auto;
    min-width: 0;
}

.cartItem__breakdownPrice {
    flex: 0 0 auto;
    font-family: OpenSansSemiBold, sans-serif;
    color: #444;
    white-space: nowrap;
}

.cartItem__breakdownRemove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #8a8a8a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cartItem__breakdownRemove:hover,
.cartItem__breakdownRemove:focus-visible {
    color: #c0392b;
    background: #fbecec;
}

.cartSummary {
    position: sticky;
    top: calc(var(--site-header-height) + 24px);
    padding: 24px;
    background: #fff;
    border: 1px solid #eae2d3;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.cartSummary__alert {
    margin: 0 0 16px;
}

.cartPromo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #efe8da;
}

.cartPromo__label {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    color: #333;
}

.cartPromo__row {
    --cart-promo-control-h: 44px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: var(--cart-promo-control-h);
}

.cartPromo__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: 0 14px;
    font-size: 15px;
    line-height: normal;
    box-sizing: border-box;
    border-radius: 6px;
    border-color: #ccc;
    box-shadow: none;
    transition: none;
}

.cartPromo__input:focus {
    border-color: var(--color-brand);
    outline: none;
    box-shadow: none;
}

.cartPromo__input--error {
    border-color: #e4b4b4;
    background-color: #fffafa;
}

.cartPromo__feedback {
    min-height: 20px;
    margin: 0;
}

.cartPromo__message {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.cartPromo__message--error {
    color: #b94a48;
}

.cartPromo__message--success {
    color: #173f33;
}

.cartPromo__promoRemove {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cartPromo__promoRemove:hover {
    text-decoration: none;
}

.cartPromo__submit {
    flex: 0 0 var(--cart-promo-control-h, 44px);
    width: var(--cart-promo-control-h, 44px);
    height: 100%;
    min-width: var(--cart-promo-control-h, 44px);
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: none;
}

.cartPromo__submit:hover:not(:disabled) {
    box-shadow: none;
}

.cartPromo__submitIcon {
    display: block;
    flex-shrink: 0;
}

.cartSummary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.cartSummary__totalLabel {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    color: #333;
}

.cartSummary__totalValue {
    text-align: right;
}

.cartSummary__amount {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 28px;
    line-height: 1.1;
    color: #222;
}

.cartTotalSumWithoutPromo {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.2;
    color: #999;
    text-decoration: line-through;
}

.cartSummary__checkout {
    margin: 0;
}

.cartSummary__checkoutBtn {
    width: 100%;
}

@media (max-width: 991px) {
    .cartSummary {
        position: static;
        margin-top: 28px;
    }

    .cartItem {
        grid-template-columns: 148px minmax(0, 1fr);
        gap: 20px;
        padding: 18px 20px;
    }

    .cartItem--impositionOnly {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        padding: 12px 14px;
    }

    .cartItem__content {
        gap: 8px 18px;
        min-height: 140px;
    }

    .cartItem--impositionOnly .cartItem__content {
        min-height: 0;
        gap: 4px 12px;
    }

    .cartItem__title {
        font-size: 21px;
    }

    .cartItem--impositionOnly .cartItem__title {
        font-size: 15px;
    }

    .cartItem__price {
        font-size: 22px;
    }

    .cartItem--impositionOnly .cartItem__price {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .cartItem {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 14px 16px;
        padding: 16px;
    }

    .cartItem--impositionOnly {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .cartItem__previewLink {
        align-self: start;
    }

    .cartItem .preview_img_click {
        height: 132px;
    }

    .cartItem--impositionOnly .preview_img_click {
        height: 64px;
    }

    .cartItem .preview_img_click .frontPreview,
    .cartItem .preview_img_click .backPreview {
        height: 92px;
    }

    .cartItem--impositionOnly .preview_img_click .frontPreview,
    .cartItem--impositionOnly .preview_img_click .backPreview {
        height: 46px;
    }

    .cartItem__content {
        gap: 8px 12px;
        min-height: 132px;
    }

    .cartItem--impositionOnly .cartItem__content {
        min-height: 0;
    }

    .cartItem__title {
        font-size: 18px;
    }

    .cartItem--impositionOnly .cartItem__title {
        font-size: 15px;
    }

    .cartItem__price {
        font-size: 20px;
    }

    .cartItem--impositionOnly .cartItem__price {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .cartItem {
        grid-template-columns: 1fr;
        grid-template-areas:
            "preview"
            "content";
    }

    .cartItem--impositionOnly {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas: "preview content";
    }

    .cartItem .preview_img_click {
        height: 200px;
    }

    .cartItem--impositionOnly .preview_img_click {
        height: 64px;
    }

    .cartItem .preview_img_click .frontPreview,
    .cartItem .preview_img_click .backPreview {
        height: 138px;
    }

    .cartItem--impositionOnly .preview_img_click .frontPreview,
    .cartItem--impositionOnly .preview_img_click .backPreview {
        height: 46px;
    }

    .cartItem__content {
        min-height: 0;
    }
}

.smallLogo {
    width: 150px;
    border: 0;
}

.mainMenu {
    margin-top: 35px;
    position: relative;
    z-index: 1;
}

.mainMenu ul.parent {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 2px 0;
}

.mainMenu ul.parent > li {
    position: relative;
    font-size: 16px;
}

.mainMenu ul.parent > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-size: inherit;
    color: inherit;
    font-family: OpenSansSemiBold, sans-serif;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mainMenu ul.parent > li > a:hover {
    color: inherit;
    text-decoration: none;
}

.mainMenu ul.parent > li > a[aria-current="page"] {
    color: #1f5a48;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.mainMenu ul.parent > li > a:focus-visible,
.mainMenu .submenu > li > a:focus-visible {
    outline: 2px solid #1f5a48;
    outline-offset: 3px;
}

.mainMenu ul.parent > li > a:focus:not(:focus-visible),
.mainMenu .submenu > li > a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.mainMenu ul.parent > li.setSubmenu {
    padding-bottom: 14px;
    margin-bottom: -14px;
}

.mainMenu ul.parent > li.setSubmenu > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.mainMenu ul.parent > li.setSubmenu > a[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(1px);
}

/* --- Fixed site header bar --- */

:root {
    --site-header-height: 60px;
}

@media screen and (min-width: 1200px) {
    :root {
        --site-header-height: 64px;
    }
}

/* Прокручивается документ (окно), а не #pageShell: на iOS прячется адресная
   строка, работает «тап по статус-бару — наверх» и восстановление прокрутки
   при «Назад». Шапка .svHeader — position: sticky (svadba.css), поэтому
   у .pageShell нет padding-top; якоря не уходят под шапку за счёт
   scroll-padding-top. */
html {
    scroll-padding-top: var(--site-header-height);
}

body {
    margin: 0;
    padding: 0;
}

.pageShell {
    /* clip, а не hidden: hidden сделал бы .pageShell контейнером прокрутки
       и сломал sticky внутри (.cartSummary и т. п.). */
    overflow-x: clip;
}

/* Открытое мобильное меню блокирует прокрутку документа (site.js).
   overflow у body (при html без overflow) переходит на окно — как
   .modal-open у Bootstrap и body.is-sheet-open; сам body при этом
   контейнером прокрутки не становится, sticky-шапка не отрывается. */
body.is-menu-open {
    overflow: hidden;
    touch-action: none;
}

.siteHeaderBar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    box-sizing: border-box;
    width: 100%;
    height: var(--site-header-height);
    background: linear-gradient(180deg, #1e2522 0%, #171c19 100%);
    border-bottom: 1px solid rgba(31, 90, 72, 0.32);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.siteHeaderBar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

/* Bootstrap .container clearfix pseudo-elements break flex/grid in the header */
.siteHeaderBar__inner.container::before,
.siteHeaderBar__inner.container::after {
    display: none;
    content: none;
}

.siteHeaderBar__burger {
    flex: 0 0 auto;
}

.siteHeaderBar__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.siteHeaderBar__logo img {
    display: block;
    width: 100px;
    height: auto;
    max-height: 44px;
    object-fit: contain;
}

@media screen and (max-width: 1199px) {
    .siteHeaderBar {
        display: flex;
        align-items: center;
    }

    .siteHeaderBar__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "logo burger";
        align-items: center;
        column-gap: 12px;
    }

    .siteHeaderBar__logo {
        grid-area: logo;
        justify-self: start;
    }

    .siteHeaderBar__menu,
    .siteHeaderBar__utils {
        display: none !important;
    }

    .siteHeaderBar .mobileMainMenuBtn.siteHeaderBar__burger {
        grid-area: burger;
        justify-self: end;
        display: block !important;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        flex: 0 0 auto;
        margin: 0;
        box-shadow: none;
    }

    .topPanel .divLogo,
    .topPanelInner .divLogo {
        display: none;
    }

    .topPanelInner,
    .topPanel {
        position: relative;
        z-index: 1;
    }

    .topPanel .divLogo {
        margin: 0;
    }

    .topPanel .mainInfo {
        padding-top: 28px;
    }
}

@media screen and (min-width: 1200px) {
    .siteHeaderBar {
        display: flex;
        align-items: center;
    }

    .siteHeaderBar__inner {
        display: flex;
        gap: 24px;
    }

    .siteHeaderBar__logo img {
        max-height: 48px;
    }

    .topPanel .divLogo,
    .topPanelInner .divLogo {
        display: none;
    }

    .siteHeaderBar__menu {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .siteHeaderBar__menu .mainMenu {
        margin-top: 0;
        width: auto;
        max-width: 100%;
    }

    .siteHeaderBar__menu .mainMenu ul.parent {
        flex-wrap: nowrap;
        gap: 0 2px;
    }

    .siteHeaderBar__menu .mainMenu ul.parent > li {
        color: #eef3ef;
    }

    .siteHeaderBar__menu .mainMenu ul.parent > li > a {
        padding: 8px 12px;
        white-space: nowrap;
    }

    .siteHeaderBar__menu .mainMenu ul.parent > li > a:hover {
        color: #e6d3a8;
        background: rgba(255, 255, 255, 0.06);
    }

    .siteHeaderBar__menu .mainMenu ul.parent > li > a[aria-current="page"] {
        color: #e6d3a8;
    }

    .siteHeaderBar__utils {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .siteHeaderBar__utils .accountNav--desktop {
        flex: 0 0 auto;
    }

    .siteHeaderBar__utils .langPanel {
        position: static;
        right: auto;
        top: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding-left: 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        white-space: nowrap;
    }

    .siteHeaderBar__utils .langPanel a {
        display: inline-block;
        margin: 0;
        color: rgba(255, 255, 255, 0.88);
    }

    .siteHeaderBar__utils .langPanel a:hover,
    .siteHeaderBar__utils .langPanel a.active {
        color: #e6d3a8;
    }

    .siteHeaderBar .submenu {
        z-index: 1110;
    }

    .siteHeaderBar .accountNav__menu {
        z-index: 1110;
    }

    .siteHeaderBar .mobileMainMenuBtn.siteHeaderBar__burger {
        display: none !important;
    }
}

/* --- Account / auth utility bar (header top-right) --- */

.accountNav--desktop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accountNav__login,
.accountNav__signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 14px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--btn-radius);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.accountNav__login::before,
.accountNav__signup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );
    transform: translateX(-160%) skewX(-15deg);
    transition: transform 0.95s ease;
    pointer-events: none;
}

.accountNav__login:hover::before,
.accountNav__signup:hover::before {
    transform: translateX(280%) skewX(-15deg);
}

.accountNav__login {
    color: #fff;
    border: 1px solid transparent;
}

.accountNav__login:hover,
.accountNav__login.is-active {
    color: #1f5a48;
    background: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.accountNav__signup {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.accountNav__signup:hover,
.accountNav__signup.is-active {
    color: #1f5a48;
    background: #fff;
    border-color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.accountNav__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.accountNav__cart.is-bump {
    animation: accountCartBump 0.35s ease-out;
}

.accountNav__cart:hover,
.accountNav__cart.is-active {
    background: rgba(255, 255, 255, 0.95);
    border-color: #fff;
}

.accountNav__cart img {
    display: block;
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    transition: filter 0.15s ease;
}

.accountNav__cart:hover img,
.accountNav__cart.is-active img {
    filter: none;
}

.accountNav__cartCount {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f0c419;
    color: #3b2c00;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.accountNav__cartCount.is-hidden {
    display: none;
}

.accountNav__cartCount.is-bump {
    animation: accountCartBadgeBump 0.35s ease-out;
}

.accountNav__user {
    position: relative;
}

.accountNav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 12px 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--btn-radius);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.accountNav__user:hover .accountNav__toggle,
.accountNav__user:focus-within .accountNav__toggle,
.accountNav__toggle:hover,
.accountNav__toggle.is-active {
    background: rgba(255, 255, 255, 0.95);
    border-color: #fff;
    color: #333;
    text-decoration: none;
}

.accountNav__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.accountNav__user:hover .accountNav__toggle .accountNav__avatar,
.accountNav__user:focus-within .accountNav__toggle .accountNav__avatar,
.accountNav__toggle:hover .accountNav__avatar,
.accountNav__toggle.is-active .accountNav__avatar {
    background: rgba(31, 90, 72, 0.12);
    color: #1f5a48;
}

.accountNav__name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountNav__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 100;
    pointer-events: none;
}

.accountNav__menu::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 0;
    left: 0;
    height: 8px;
}

.accountNav__user:hover .accountNav__menu,
.accountNav__user:focus-within .accountNav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.accountNav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.accountNav__menu a {
    display: block;
    padding: 10px 16px;
    font-family: OpenSansRegular, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    color: #333;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.accountNav__menu a:hover,
.accountNav__menu a[aria-current="page"] {
    background: #f7f2e8;
    color: #1f5a48;
}

.accountNav__menu .accountNav__logout {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    color: #c0392b;
}

.accountNav__menu .accountNav__logout:hover {
    background: #fdf4f4;
    color: #a93226;
}

.accountNav--mobile {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.accountNav__heading {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
    padding: 20px 16px 8px;
}

.accountNav__mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.accountNav__mobile-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.accountNav__mobile-list li:last-child {
    border-bottom: 0;
}

.accountNav__mobile-list a {
    display: block;
    padding: 16px;
    min-height: 48px;
    box-sizing: border-box;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
}

.accountNav__mobile-list a[aria-current="page"] {
    color: #cfe0d9;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.accountNav__mobile-list .accountNav__logout {
    color: #ffc9c9;
}

.accountNav__mobile-actions {
    display: flex;
    gap: 10px;
    padding: 8px 16px 0;
}

.accountNav__mobile-login,
.accountNav__mobile-signup {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-min-height);
    padding: 12px 16px;
    border-radius: var(--btn-radius);
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.accountNav__mobile-login::before,
.accountNav__mobile-signup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );
    transform: translateX(-160%) skewX(-15deg);
    transition: transform 0.95s ease;
    pointer-events: none;
}

.accountNav__mobile-login:hover::before,
.accountNav__mobile-signup:hover::before {
    transform: translateX(280%) skewX(-15deg);
}

.accountNav__mobile-login {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.accountNav__mobile-signup {
    color: #1f5a48;
    background: #fff;
    border: 1px solid #fff;
}

@media (prefers-reduced-motion: reduce) {
    .accountNav__login::before,
    .accountNav__signup::before,
    .accountNav__mobile-login::before,
    .accountNav__mobile-signup::before {
        display: none;
    }
}

.mainInfo {
    display: table;
    min-height: 380px;
}

.mainInfo .info {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 43px;
    color: #fff;
    font-family: OpenSansSemiBold;
}

.mobileMainMenu {
    position: fixed;
    top: var(--site-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    padding: 0;
    margin: 0;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobileMainMenu.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

.mobileMainMenu__panel {
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 32px;
    background: linear-gradient(180deg, #1f5a48 0%, #1f5a48 100%);
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobileMainMenu__brand {
    display: none;
    justify-content: flex-start;
    margin: 0;
    padding: 16px 16px 12px;
    line-height: 0;
    text-decoration: none;
}

.mobileMainMenu__brand.is-visible {
    display: flex;
}

.mobileMainMenu__brand img {
    display: block;
    width: 120px;
    height: 60px;
    object-fit: contain;
}

.mobileMainMenu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobileMainMenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.mobileMainMenu li:last-child {
    border-bottom: 0;
}

.mobileMainMenu li > a {
    display: block;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    padding: 16px;
    min-height: 48px;
    box-sizing: border-box;
}

.mobileMainMenu li > a:active,
.mobileMainMenu li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.mobileMainMenu li > a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.14);
    font-family: OpenSansSemiBold, sans-serif;
}

.mobileMainMenu__lang {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 20px 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mobileMainMenu__lang-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.mobileMainMenu__lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.mobileMainMenu__lang a:hover,
.mobileMainMenu__lang a:active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    text-decoration: none;
}

.mobileMainMenu__lang a.active {
    background-color: #fff;
    color: var(--color-brand, #1f5a48);
    border-color: #fff;
}

.mobileMainMenuBtn {
    display: none;
    border: 0;
    background: var(--color-brand, #1f5a48);
    width: 44px;
    height: 44px;
    margin: 0;
    position: relative;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mobileMainMenuBtn:hover {
    background: var(--color-brand-hover, #173f33);
}

.mobileMainMenuBtn span {
    display: block;
    background-color: #fff;
    width: 22px;
    height: 2px;
    position: absolute;
    left: 11px;
    border-radius: 1px;
    transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
}

.mobileMainMenuBtn .line1 {
    top: 14px;
}

.mobileMainMenuBtn .line2 {
    top: 21px;
}

.mobileMainMenuBtn .line3 {
    top: 28px;
}

.mobileMainMenuBtn.mobileActive {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.mobileMainMenuBtn.mobileActive span {
    background-color: var(--color-brand, #1f5a48);
}

.mobileMainMenuBtn.mobileActive .line1 {
    top: 21px;
    transform: rotate(45deg);
}

.mobileMainMenuBtn.mobileActive .line2 {
    opacity: 0;
}

.mobileMainMenuBtn.mobileActive .line3 {
    top: 21px;
    transform: rotate(-45deg);
}

.divSlogan {
    padding: 27px 0;
    background-color: #1f5a48;
}

.slogan {
    display: inline-block;
}

.slogan ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.slogan ul>li {
    float: left;
    padding: 0 15px;
    font-size: 30px;
    color: #fff;
    position: relative;
}

.slogan ul>li.arrow::before {
    content: '';
    position: absolute;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    width: 15px;
    height: 15px;
    top: 15px;
    left: 10px;
    transform: rotate(135deg);
}

.section {
    padding-top: var(--section-py, 80px);
    padding-bottom: var(--section-py, 80px);
    background-color: #fff;
}

.section--dark {
    background-color: var(--color-dark-bg, #323232);
}

.section--dark .pageIntro__title,
.section--dark .pageIntro__subtitle {
    color: #fff;
}

.section > .container {
    padding-left: 15px;
    padding-right: 15px;
}

.section--band {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section--band-green {
    background-color: #1f5a48;
}

.section--band-green .col-xs-12,
.section--band-green .sharedText {
    font-size: 30px;
    color: #fff;
    font-family: OpenSansLight;
}

.section--band-mint {
    background-color: #73C9B8;
}

.section--band-mint .col-xs-12,
.section--band-mint .sharedText {
    font-size: 30px;
    color: #000;
    font-family: OpenSansLight;
}

.mainText {
    font-size: 16px;
}

/* --- /something_to_read/{slug}/ article page ---
   Scoped under .articlePage on purpose: .mainText is shared with
   designer_show/product_show/home/_seo_article, this typography must not
   leak into those. */


.articleEyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.articleChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 12.5px;
    color: var(--color-brand, #1f5a48);
    background: rgba(31, 90, 72, 0.1);
    padding: 6px 12px 6px 8px;
    border-radius: 100px;
}

/* --- /designer/{business_card,postcard,invitation}/: links to niche pages --- */

.nicheLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 40px;
}

.nicheLinks__item {
    display: inline-flex;
    align-items: center;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13.5px;
    color: #323232;
    background: #fff;
    border: 1px solid #e7dfcf;
    border-radius: 100px;
    padding: 9px 18px;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nicheLinks__item:hover,
.nicheLinks__item:focus-visible {
    border-color: var(--color-brand, #1f5a48);
    color: var(--color-brand, #1f5a48);
    box-shadow: 0 4px 14px rgba(31, 90, 72, 0.12);
    text-decoration: none;
}

.articleChip svg {
    width: 14px;
    height: 14px;
}

.articleReadTime {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--color-muted, #909090);
}

.articleReadTime svg {
    width: 13px;
    height: 13px;
}

.articlePage .mainText {
    line-height: 1.75;
    color: #3b453e;
}

.articlePage .mainText [itemprop="articleBody"] > p:first-child {
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e7dfcf;
}

.articlePage .mainText h2 {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 24px;
    line-height: 1.3;
    color: #232b26;
    margin: 44px 0 18px;
    padding-left: 16px;
    border-left: 4px solid var(--color-brand, #1f5a48);
}

.articlePage .mainText [itemprop="articleBody"] > h2:first-child {
    margin-top: 0;
}

.articlePage .mainText h3 {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    color: #232b26;
    margin: 32px 0 14px;
}

.articlePage .mainText p {
    margin: 0 0 20px;
}

.articlePage .mainText a {
    color: var(--color-brand, #1f5a48);
    font-family: OpenSansSemiBold, sans-serif;
    text-decoration: underline;
}

.articlePage .mainText strong {
    color: #232b26;
}

.articlePage .mainText code {
    background: rgba(31, 90, 72, 0.1);
    color: var(--color-brand, #1f5a48);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 14px;
}

.articlePage .mainText ul,
.articlePage .mainText ol {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.articlePage .mainText ol {
    counter-reset: articleOl;
}

.articlePage .mainText ul li,
.articlePage .mainText ol li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.articlePage .mainText ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand, #1f5a48);
}

.articlePage .mainText ol li {
    counter-increment: articleOl;
}

.articlePage .mainText ol li::before {
    content: counter(articleOl);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(31, 90, 72, 0.12);
    color: var(--color-brand, #1f5a48);
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.articlePage .mainText table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 0 0 28px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
}

.articlePage .mainText th {
    text-align: left;
    background: rgba(31, 90, 72, 0.08);
    color: var(--color-brand, #1f5a48);
    font-family: OpenSansSemiBold, sans-serif;
    padding: 12px 16px;
    white-space: nowrap;
}

.articlePage .mainText td {
    padding: 12px 16px;
    border-top: 1px solid #e7dfcf;
    vertical-align: top;
}

.articleFaq {
    margin: 0 0 14px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.articleFaq summary {
    list-style: none;
    padding: 16px 20px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15.5px;
    color: #232b26;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.articleFaq summary::-webkit-details-marker {
    display: none;
}

.articleFaq__icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(31, 90, 72, 0.1);
    color: var(--color-brand, #1f5a48);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.articleFaq__icon svg {
    width: 12px;
    height: 12px;
}

.articleFaq[open] .articleFaq__icon {
    transform: rotate(45deg);
}

.articleFaq__body {
    padding: 0 20px 18px;
    color: var(--color-muted, #909090);
    font-size: 15px;
    line-height: 1.65;
}

.articleCta {
    margin-top: 52px;
    padding-top: 40px;
    border-top: 1px solid #e7dfcf;
    text-align: center;
}

/* Только строка «Попробуйте бесплатно…» (прямой потомок): без «>» правило
   делало жирным и 17px текст вложенного баннера комплекта (_kit_banner). */
.articleCta > p {
    margin: 0 auto 20px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    max-width: 46ch;
    color: #232b26;
}

@media (max-width: 575px) {
    .articlePage .mainText [itemprop="articleBody"] > p:first-child {
        font-size: 16.5px;
    }

    .articlePage .mainText h2 {
        font-size: 20px;
    }
}

a.product-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* .reveal (public/css/reveal.css) sets `a.reveal { display: inline-block }` —
   same specificity as a.product-card--link, wins on source order, and makes
   the card shrink-wrap to its text instead of filling the grid column. */
a.product-card--link.reveal {
    display: block;
}

.product-card {
    padding: 30px 0 20px 0;
    border: 1px solid transparent;
}

.product-card--on-dark:hover {
    background-color: var(--color-panel-bg, #4c4c4c);
    border: 1px solid #fff;
    cursor: pointer;
}

.product-card--on-light:hover {
    cursor: pointer;
}

.product-card .productsIco {
    width: 100px;
    height: 64px;
    margin: 0 auto;
}

.product-card .cardIco {
    background: url("/tools/images/products/card.png") center center / contain no-repeat;
}

.product-card .postcardIco {
    background: url("/tools/images/products/postcard.png") center center / contain no-repeat;
}

.product-card .invitationIco {
    background: url("/tools/images/products/invitation.png") center center / contain no-repeat;
}

.product-card .calendarIco {
    background: url("/tools/images/products/calendar.png") center center / contain no-repeat;
}

.product-card .flyerIco {
    background: url("/tools/images/products/flyer.png") center center / contain no-repeat;
}

.product-card .certificateIco {
    background: url("/tools/images/products/certificate.png") center center / contain no-repeat;
}

.product-card .menuIco {
    background: url("/tools/images/products/menu.png") center center / contain no-repeat;
}

.product-card .priceListIco {
    background: url("/tools/images/products/price_list.png") center center / contain no-repeat;
}

.product-card .bookletIco {
    background: url("/tools/images/products/booklet.png") center center / contain no-repeat;
}

.product-card .infographicIco {
    background: url("/tools/images/products/infographic.png") center center / contain no-repeat;
}

.product-card .productsDescription {
    font-size: 13px;
    color: var(--color-muted, #909090);
    text-align: center;
    margin-top: 20px;
    min-height: 60px;
}

.product-card .productsName {
    font-size: 22px;
    text-align: center;
    margin-top: 20px;
}

.product-card--on-dark .productsName {
    color: #fff;
}

.product-card--on-light .productsName {
    color: #000;
}

/* --- Page intro (site-wide; replaces hatBlock) --- */

.pageIntro {
    max-width: 820px;
}

.pageIntro--accent {
    border-left: 8px solid var(--color-brand, #1f5a48);
    padding: 0 0 0 15px;
    margin: 0 0 60px 0;
}

.pageIntro--compact.pageIntro--accent {
    margin: 0 0 32px 0;
}

.cabinetPageHead__title.pageIntro--accent {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.pageIntro__title {
    margin: 0;
    padding: 0;
    font-size: 40px;
    line-height: 1.2;
    color: #323232;
}

.pageIntro h2.pageIntro__title {
    padding: 0 0 5px 0;
    font-size: 30px;
}

.pageIntro__subtitle {
    margin: 0;
    padding: 0;
    font-family: OpenSansLight, sans-serif;
    font-size: 20px;
    line-height: 1.45;
    color: #323232;
}

.section--dark .pageIntro__title,
.section--dark .pageIntro__subtitle {
    color: #fff;
}

.cartPage .pageIntro--accent {
    margin-bottom: 28px;
}

.section--product .pageIntro--accent {
    margin-bottom: 0;
}

.pageIntro--accent + .catalogPage__grid {
    margin-top: 0;
}

.pageIntro--accent + .product-page__article,
.pageIntro--accent + .product-templates {
    margin-top: 32px;
}

/* --- Catalog hub & category pages --- */

.catalogPage__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 48px;
}

.catalogCategoryCard {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px 24px 24px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(42, 35, 32, 0.06);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.catalogCategoryCard:hover,
.catalogCategoryCard:focus-visible {
    border-color: var(--color-brand, #1f5a48);
    box-shadow: 0 8px 28px rgba(31, 90, 72, 0.12);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.catalogCategoryCard__iconWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin: 0 0 16px;
}

.catalogCategoryCard__icon,
.catalogCategoryCard .productsIco {
    width: 100px;
    height: 64px;
    margin: 0;
}

.catalogCategoryCard .cardIco,
.product-card .cardIco {
    background: url("/tools/images/products/card.png") center center / contain no-repeat;
}

.catalogCategoryCard .postcardIco,
.product-card .postcardIco {
    background: url("/tools/images/products/postcard.png") center center / contain no-repeat;
}

.catalogCategoryCard .invitationIco,
.product-card .invitationIco {
    background: url("/tools/images/products/invitation.png") center center / contain no-repeat;
}

.catalogCategoryCard .calendarIco,
.product-card .calendarIco {
    background: url("/tools/images/products/calendar.png") center center / contain no-repeat;
}

.catalogCategoryCard .flyerIco,
.product-card .flyerIco {
    background: url("/tools/images/products/flyer.png") center center / contain no-repeat;
}

.catalogCategoryCard .certificateIco,
.product-card .certificateIco {
    background: url("/tools/images/products/certificate.png") center center / contain no-repeat;
}

.catalogCategoryCard .menuIco,
.product-card .menuIco {
    background: url("/tools/images/products/menu.png") center center / contain no-repeat;
}

.catalogCategoryCard .priceListIco,
.product-card .priceListIco {
    background: url("/tools/images/products/price_list.png") center center / contain no-repeat;
}

.catalogCategoryCard .bookletIco,
.product-card .bookletIco {
    background: url("/tools/images/products/booklet.png") center center / contain no-repeat;
}

.catalogCategoryCard .infographicIco,
.product-card .infographicIco {
    background: url("/tools/images/products/infographic.png") center center / contain no-repeat;
}

.catalogCategoryCard__title {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    color: #323232;
}

.catalogCategoryCard__desc {
    flex: 1 1 auto;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: var(--color-muted, #909090);
}

.catalogCategoryCard__cta {
    display: block;
    margin-top: auto;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-brand, #1f5a48);
}

.catalogSeo {
    margin: 0 0 8px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fafbfa;
}

.catalogSeo__summary {
    padding: 16px 20px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #323232;
    cursor: pointer;
    list-style: none;
}

.catalogSeo__summary::-webkit-details-marker {
    display: none;
}

.catalogSeo__summary::after {
    content: "+";
    float: right;
    font-size: 20px;
    line-height: 1;
    color: var(--color-brand, #1f5a48);
}

.catalogSeo[open] .catalogSeo__summary::after {
    content: "−";
}

.catalogSeo__body {
    padding: 0 20px 20px;
}

@media (max-width: 991px) {
    .catalogPage__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .catalogPage__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .catalogCategoryCard {
        padding: 24px 20px 20px;
    }
}

/* --- /something_to_read/ hub: article sections & cards --- */

.articleStats {
    display: flex;
    gap: 28px;
    margin: 32px 0 8px;
    flex-wrap: wrap;
}

.articleStat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.articleStat b {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 22px;
    line-height: 1.2;
    color: #323232;
}

.articleStat span {
    font-size: 12.5px;
    color: var(--color-muted, #909090);
}

.articleSection {
    margin-top: 48px;
}

.articleSection__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7dfcf;
}

.articleSectionIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(31, 90, 72, 0.1);
    color: var(--color-brand, #1f5a48);
}

.articleSectionIcon svg {
    width: 20px;
    height: 20px;
}

.articleSectionTitles h2 {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 19px;
    line-height: 1.3;
    color: #323232;
}

.articleSectionTitles p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--color-muted, #909090);
}

.articleSectionCount {
    margin-left: auto;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--color-muted, #909090);
}

.articleGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.articleGrid--cols1 {
    grid-template-columns: minmax(0, 1fr);
}

.articleGrid--cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.articleGrid--cols3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .articleGrid,
    .articleGrid--cols3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .articleGrid,
    .articleGrid--cols2,
    .articleGrid--cols3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.articleCard {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px 20px 18px;
    border: 1px solid #e7dfcf;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(42, 35, 32, 0.06);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.articleCard:hover,
.articleCard:focus-visible {
    border-color: var(--color-brand, #1f5a48);
    box-shadow: 0 10px 26px rgba(31, 90, 72, 0.14);
    transform: translateY(-3px);
    color: inherit;
    text-decoration: none;
}

.articleCard__title {
    margin: 0 0 8px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16.5px;
    line-height: 1.36;
    color: #323232;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.articleCard__desc {
    flex: 1 1 auto;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-muted, #909090);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.articleCard__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13.5px;
    color: var(--color-brand, #1f5a48);
}

.articleCard__cta svg {
    width: 13px;
    height: 13px;
    transition: transform 0.18s ease;
}

.articleCard:hover .articleCard__cta svg {
    transform: translateX(3px);
}

.formatFileIco {
    width: 100px;
    height: 130px;
    margin: 0 auto;
}

.formatPDF {
    background: url("/tools/images/formatFile/formatPdf.png") center center / contain no-repeat;
}

.formatJPEG {
    background: url("/tools/images/formatFile/formatJpeg.png") center center / contain no-repeat;
}

.formatPNG {
    background: url("/tools/images/formatFile/formatPng.png") center center / contain no-repeat;
}

.formatFileDescription {
    font-size: 16px;
    text-align: center;
    margin: 20px 0 40px 0
}

.footer {
    padding: 40px 0;
}

.footer .hatBlockFooter {
    font-family: OpenSansSemiBold;
    font-size: 18px;
    color: #fff;
    margin: 0 0 15px 0;
}

.footer a {
    font-family: OpenSansLight;
    font-size: 14px;
}

.footer a:hover {
    text-decoration: none;
}

.footer p {
    margin: 0 0 5px;
}

.copyright {
    font-size: 14px;
    color: #fff;
}

.submenu {
    position: absolute;
    min-width: 250px;
    padding: 0;
    list-style: none;
    top: 100%;
    left: 0;
    z-index: 777;
    display: none;
    margin: 0;
    overflow: hidden;
}

.mainMenu .submenu.is-open {
    display: block;
}

.submenu > li > a {
    width: 100%;
    display: block;
    font-size: 15px;
    padding: 8px 16px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.submenu > li > a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: OpenSansSemiBold, sans-serif;
}

.submenu > li > a:hover,
.submenu > li > a:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
    text-decoration: none;
}

.submenu > li > a[aria-current="page"]:hover,
.submenu > li > a[aria-current="page"]:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bread_crumbs {
    padding: 20px 0 16px 0;
}

.bread_crumbs ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bread_crumbs li {
    float: left;
    padding-right: 10px;
    font-size: 14px;
}

.bread_crumbs li>a {
    text-decoration: underline;
}

.bread_crumbs li>a:hover {
    text-decoration: none;
}

.cabinetCreateBar {
    margin: 16px 0 8px;
}

.cabinetCreateBar .container {
    display: flex;
    justify-content: flex-end;
}

.cabinetCreateBar__btn {
    white-space: nowrap;
}

.officeSketches__header {
    margin-bottom: 8px;
}

.officeSketches__create {
    margin: 0 0 24px;
}

/* --- Cabinet shell --- */

.cabinetSection--sketchView {
    padding-bottom: 88px;
}

.section.cabinetSection {
    padding-top: 40px;
}

.cabinetPageHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.cabinetPageHead__title {
    margin: 0;
    min-width: 0;
}

.cabinetPageHead__action {
    flex: 0 0 auto;
    margin: 0;
}

/* --- Auth pages (login / registration / recovery) --- */

.authPage__grid {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 960px;
}

.supportPage__grid {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    max-width: 1000px;
}

.supportAside__title {
    margin: 0 0 20px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: #323232;
}

.supportAside__links {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.supportAside__links a {
    color: var(--color-brand, #1f5a48);
    text-decoration: none;
}

.supportAside__links a:hover {
    text-decoration: underline;
}

.authCard {
    position: relative;
    background: #fff;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(42, 35, 32, 0.08);
    overflow: hidden;
}

.authCard__body {
    padding: 32px 28px 28px;
}

.authCard__title {
    margin: 0 0 8px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 28px;
    line-height: 1.25;
    color: #323232;
}

.authCard__subtitle {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #666;
}

.authCard__successIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 0 16px;
    border-radius: 50%;
    background: #f7f2e8;
    color: var(--color-brand, #1f5a48);
}

.authCard__footer {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid #ececec;
    font-size: 15px;
    color: #666;
    text-align: center;
}

.authCard__footer a {
    font-family: OpenSansSemiBold, sans-serif;
    color: var(--color-brand, #1f5a48);
    text-decoration: none;
}

.authCard__footer a:hover {
    text-decoration: underline;
}

.authAside {
    padding: 28px 0 0 8px;
}

.authAside__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.authAside__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.45;
    color: #323232;
}

.authAside__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f7f2e8;
    color: var(--color-brand, #1f5a48);
}

.authAside__trust {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #909090;
}

.authForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.authForm__submit {
    width: 100%;
    margin-top: 4px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.authForm__captchaBlock {
    padding-top: 4px;
}

.authAlert {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.authAlert a {
    color: inherit;
    font-family: OpenSansSemiBold, sans-serif;
}

.authAlert--danger {
    background: #fff5f5;
    border: 1px solid #f5c6c6;
    color: #a94442;
}

.authAlert--success {
    background: #f7f2e8;
    border: 1px solid #cfe0d9;
    color: #173f33;
}

.authField {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authField__labelRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.authField__label {
    font-size: 14px;
    font-family: OpenSansSemiBold, sans-serif;
    color: #444;
}

.authField__labelLink {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--color-brand, #1f5a48);
    text-decoration: none;
}

.authField__labelLink:hover {
    text-decoration: underline;
}

.authField__inputWrap {
    position: relative;
}

.authField__input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d8ddd9;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #323232;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.authField__inputWrap--password .authField__input {
    padding-right: 44px;
}

.authField__input::placeholder {
    color: #aaa;
}

.authField__input:hover {
    border-color: #b8c4bc;
}

.authField__input:focus {
    outline: none;
    border-color: var(--color-brand, #1f5a48);
    box-shadow: 0 0 0 3px rgba(31, 90, 72, 0.15);
}

.authField__textarea {
    height: auto;
    min-height: 160px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.authField--invalid .authField__input {
    border-color: #e08a8a;
}

.authField--invalid .authField__input:focus {
    box-shadow: 0 0 0 3px rgba(224, 138, 138, 0.2);
}

.authField__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.authField__toggle:hover {
    color: #555;
    background: #f3f5f4;
}

.authField__toggleIcon--hide {
    display: none;
}

.authField__toggle.is-visible .authField__toggleIcon--show {
    display: none;
}

.authField__toggle.is-visible .authField__toggleIcon--hide {
    display: block;
}

.authField__hint {
    margin: 0;
    font-size: 13px;
    color: #909090;
}

.authField__error {
    font-size: 13px;
    line-height: 1.4;
    color: #c0392b;
}

.authField__devNote {
    margin: 0;
    padding: 10px 14px;
    border: 1px dashed #d8ddd9;
    border-radius: 8px;
    font-size: 13px;
    color: #909090;
}

@media (max-width: 767px) {
    .authPage__grid,
    .supportPage__grid {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 520px;
        margin: 0 auto;
    }

    .authAside {
        display: none;
    }

    .authCard__body {
        padding: 24px 20px 20px;
    }

    .authCard__title {
        font-size: 24px;
    }
}

/* Выше siteHeaderBar (1100) и выпадающих меню (1110) */
.modal-backdrop {
    z-index: 1190;
}

.modal {
    z-index: 1200;
}

.cabinetModal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.cabinetModal__title {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: #222;
}

.cabinetModal .modal-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
}

.cabinetModal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid #efe8da;
}

.cabinetModal__confirmForm {
    margin: 0;
}

.cabinetToast--info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.cabinetToast--warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.cabinetToast--error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

/* --- Layout cards (Мои макеты) --- */

.layoutGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.layoutCard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eae2d3;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    /* Не анимируем box-shadow: в CSS grid это даёт глюк композитинга —
       соседние превью с background-size:cover визуально «искажаются». */
    transition: border-color 0.18s ease;
    isolation: isolate;
}

.layoutCard:hover {
    border-color: var(--color-brand, #1f5a48);
}

.layoutCard__previewLink {
    display: block;
    text-decoration: none;
}

.layoutCard__preview {
    height: 200px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #efe8da;
    border-radius: 0;
}

.layoutGrid .itemSketch {
    margin-bottom: 0;
}

.layoutCard__preview.preview_img_click {
    height: 200px;
    border: 0;
    border-bottom: 1px solid #efe8da;
    background: #f6f1e7;
    /* Отдельный compositing-layer на каждое превью — hover соседней карточки
       не пересчитывает background cover у остальных. */
    transform: translateZ(0);
}

.layoutCard__preview.preview_img_click:hover {
    /* Глобальный .preview_img_click:hover ставит border:1px !important — из-за
       этого превью «прыгает». В списке макетов обводку на hover не показываем. */
    border: 0 !important;
    border-bottom: 1px solid #efe8da !important;
    opacity: 1;
    cursor: pointer;
}

.layoutCard__preview.preview_img_click .frontPreview,
.layoutCard__preview.preview_img_click .backPreview {
    height: 130px;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/*
 * Прототип: компоновка сторон как у cover на /designs/
 * (изометрический стек). Без 3D-transform — остаётся плоский fallback выше.
 */
@supports (perspective: 1px) and (transform-style: preserve-3d) {
    .layoutCard__preview--stack.preview_img_click {
        perspective: 920px;
        perspective-origin: 50% 40%;
        overflow: hidden;
        background:
            radial-gradient(120% 90% at 50% 20%, #fbfcfb 0%, #eef2f0 58%, #e5ebe8 100%);
        /* Стороны ниже считают свои габариты через min() от ОБЕИХ осей
           этого бокса (cqw/cqh), а для этого он должен быть контейнером
           запросов с определённой высотой - высота задана рядом
           (.layoutCard__preview{height:200px}), так что size законен. */
        container-type: size;
    }

    /* ГАБАРИТЫ СТОРОНЫ. Раньше тут стояло height:68% + max-width:58% +
       aspect-ratio, и это СПЛЮЩИВАЛО ландшафтные макеты: высота задана
       явным значением, ширина - производная, и когда max-width обрезает
       ширину, высота обратно под новое соотношение НЕ пересчитывается.
       Ровно эту же поломку уже чинили у героя на главной (см. правило
       .heroShowcase ... .frontPreview ниже по файлу, "белые линии сверху
       и снизу, если макет горизонтальный") - там формулу зашили в
       пиксели, потому что бокс героя фиксированный 240x320.

       Здесь бокс резиновый (ширину карточки считает calcWidthDesign()
       в site.js), поэтому те же 58%/68% берутся в cqw/cqh. Замеры на
       этом же файле до правки, макет 90x60 (соотношение 1.500):
         колонка 170px (мобильные 2 колонки) -> 105.9x137.2 = 0.772,
             искажение 1.94x - текст на визитке растянут вдвое по высоте;
         колонка 406px (десктопные 3 колонки) -> 198.2x141.9 = 1.397,
             искажение 1.07x - заметно меньше, но тоже есть.
       min() выбирает ведущую ось сам, поэтому сторона держит реальные
       пропорции --preview-w/--preview-h при любой форме бокса.

       object-fit нужен, потому что стороны теперь <img> (статичные
       обложки вместо живого рендера, см. _design_card.html.twig); для
       карточек, где сторона осталась <div> с background-image, работает
       background-size ниже. */
    .layoutCard__preview--stack.preview_img_click .frontPreview,
    .layoutCard__preview--stack.preview_img_click .backPreview {
        width: min(58cqw, 68cqh * var(--preview-w, 1) / var(--preview-h, 1));
        height: min(68cqh, 58cqw * var(--preview-h, 1) / var(--preview-w, 1));
        max-width: none;
        left: 50%;
        right: auto;
        top: auto;
        bottom: auto;
        margin: 0;
        border-radius: 3px;
        object-fit: contain;
        background-color: transparent;
        background-position: center center;
        background-size: 100% 100%;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.55) inset,
            0 14px 28px rgba(31, 42, 36, 0.18),
            0 2px 6px rgba(31, 42, 36, 0.1);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition: transform 0.22s ease, filter 0.22s ease;
        transform-origin: center center;
    }

    /* Дальняя сторона — чуть левее и ниже от центра стека */
    .layoutCard__preview--stack.preview_img_click .backPreview {
        top: 22%;
        z-index: 1;
        filter: saturate(0.82) brightness(0.93);
        transform:
            translate3d(calc(-50% - 18px), 0, -18px)
            rotateX(22deg)
            rotateY(-32deg)
            rotateZ(10deg);
    }

    /* Ближняя сторона — чуть правее и выше от центра */
    .layoutCard__preview--stack.preview_img_click .frontPreview {
        top: 8%;
        z-index: 2;
        transform:
            translate3d(calc(-50% + 18px), 0, 28px)
            rotateX(22deg)
            rotateY(-32deg)
            rotateZ(10deg);
    }

    .layoutCard__previewLink:hover .layoutCard__preview--stack.preview_img_click .backPreview {
        transform:
            translate3d(calc(-50% - 34px), 8px, -28px)
            rotateX(18deg)
            rotateY(-28deg)
            rotateZ(8deg);
    }

    .layoutCard__previewLink:hover .layoutCard__preview--stack.preview_img_click .frontPreview {
        transform:
            translate3d(calc(-50% + 34px), -10px, 48px)
            rotateX(18deg)
            rotateY(-28deg)
            rotateZ(8deg);
    }

    /* Односторонний макет — одна «карточка» строго по центру */
    .layoutCard__preview--stack[data-preview-sides="1"].preview_img_click .backPreview {
        display: none;
    }

    /* Единственная сторона чуть крупнее (72% против 68%) - та же
       min()-формула, что и у двустороннего стека выше, иначе
       односторонние макеты сплющивало бы точно так же. */
    .layoutCard__preview--stack[data-preview-sides="1"].preview_img_click .frontPreview {
        top: 14%;
        width: min(58cqw, 72cqh * var(--preview-w, 1) / var(--preview-h, 1));
        height: min(72cqh, 58cqw * var(--preview-h, 1) / var(--preview-w, 1));
        max-width: none;
        transform:
            translate3d(-50%, 0, 28px)
            rotateX(22deg)
            rotateY(-32deg)
            rotateZ(10deg);
    }

    .layoutCard__previewLink:hover .layoutCard__preview--stack[data-preview-sides="1"].preview_img_click .frontPreview {
        transform:
            translate3d(-50%, -4px, 36px)
            rotateX(20deg)
            rotateY(-30deg)
            rotateZ(9deg);
    }
}

.layoutCard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.layoutCard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.layoutCard__title {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.3;
}

.layoutCard__title a {
    color: #222;
    text-decoration: none;
}

.layoutCard__title a:hover {
    color: var(--color-brand, #1f5a48);
}

.layoutCard__badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.layoutCard__badge--paid {
    color: #173f33;
    background: #eef4f1;
}

.layoutCard__badge--design {
    color: #31708f;
    background: #e8f4fa;
}

.layoutCard__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 1 auto;
    max-width: 55%;
}

.layoutCard__badge--cart,
.layoutCard__badge--order,
a.layoutCard__badge--cart,
a.layoutCard__badge--order,
a.layoutCard__badge--cart:link,
a.layoutCard__badge--order:link,
a.layoutCard__badge--cart:visited,
a.layoutCard__badge--order:visited {
    color: #a94442;
    background: #f2dede;
    border: 1px solid #ebccd1;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.layoutCard__badge--cart:hover,
a.layoutCard__badge--cart:focus,
a.layoutCard__badge--order:hover,
a.layoutCard__badge--order:focus {
    color: #a94442;
    background: #ebcccc;
    border-color: #e0b4b4;
    text-decoration: none;
    opacity: 1;
}

.layoutCard__action--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.layoutCard__meta {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #777;
}

.layoutCard__actions {
    display: flex;
    flex-wrap: nowrap; /* один ряд (2026-10-05): «Удалить» — крестиком справа */
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.layoutCard__actions .layoutCard__action {
    white-space: nowrap;
}

.layoutCard__actions .layoutCard__action--icon {
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
    margin-left: auto;
    color: #888;
}

.layoutCard__actions .layoutCard__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    /* Компактно: и у купленного макета («Редактировать», «Скачать PDF»,
       «Копия», ×) ряд помещается в карточку 333 px (2026-10-05). */
    padding: 8px 10px;
    border: 1px solid #d9e3dd;
    border-radius: 8px;
    background: #fff;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.layoutCard__actions .layoutCard__action:hover {
    border-color: var(--color-brand, #1f5a48);
    color: var(--color-brand, #1f5a48);
    text-decoration: none;
}

.layoutCard__actions .layoutCard__action--danger:hover {
    border-color: var(--color-danger, #c0392b);
    color: var(--color-danger, #c0392b);
}

.officePagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 24px;
}

.officePagination__status {
    min-width: 72px;
    font-size: 15px;
    text-align: center;
    color: #666;
}

.officePagination__nav.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* --- Order page --- */

.orderCheckout {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 28px 24px;
    border: 1px solid #eae2d3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

.orderCheckout__status {
    display: inline-block;
    margin: 0 0 20px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff8e6;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #9a6b00;
}

.orderCheckout__composition {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #efe8da;
    border-radius: 10px;
    background: #fafcfb;
    list-style: none;
}

.orderCheckout__compositionRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

.orderCheckout__compositionRow + .orderCheckout__compositionRow {
    margin-top: 6px;
}

.orderCheckout__compositionLabel {
    min-width: 0;
}

.orderCheckout__compositionPrice {
    flex: 0 0 auto;
    font-family: OpenSansSemiBold, sans-serif;
    color: #222;
    white-space: nowrap;
}

.orderCheckout__amount {
    margin: 0 0 24px;
}

.orderCheckout__amountLabel {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #777;
}

.orderCheckout__amountValue {
    display: block;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 36px;
    line-height: 1.1;
    color: #222;
}

.orderCheckout__payForm {
    margin: 0 0 20px;
}

.orderCheckout__payBtn {
    width: 100%;
    min-height: 48px;
}

.orderCheckout__payBtn:disabled {
    opacity: 0.72;
    cursor: wait;
    pointer-events: none;
}

.orderCheckout__hint {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

.orderCheckout__secure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #f7f2e8;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #1f5a48;
}

.orderCheckout__secure svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.orderCheckout__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #efe8da;
}

.orderCheckout__chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f7f2e8;
    font-size: 14px;
    line-height: 1.4;
    color: #1f5a48;
}

.orderCheckout__terms {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #777;
    text-align: center;
}

.orderCheckout__terms a {
    color: var(--color-brand, #1f5a48);
    text-decoration: underline;
}

.orderCheckout__back {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.orderCheckout__back a {
    color: var(--color-brand, #1f5a48);
    text-decoration: none;
}

.orderCheckout__back a:hover {
    text-decoration: underline;
}

.orderCheckout__status--paid {
    background: #f7f2e8;
    color: #1f5a48;
}

.orderCheckout--paid {
    max-width: 720px;
}

.orderCheckout--fail {
    text-align: center;
}

.orderCheckout__status--fail {
    background: #fff0f0;
    color: #b42318;
}

.orderSuccessHero {
    max-width: 640px;
    margin: 0 auto 32px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #eae2d3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

.orderSuccessHero__icon {
    margin: 0 0 16px;
    color: var(--color-brand, #1f5a48);
}

.orderSuccessHero__title {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 28px;
    line-height: 1.25;
    color: #222;
}

.orderSuccessHero__text {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
}

.orderSuccessHero__emailNote {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #777;
}

.orderPaidLayouts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.orderPaidLayouts--hidden {
    display: none;
}

.orderPaidLayouts__waiting {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 20px;
    padding: 20px;
    border-radius: 10px;
    background: #f8faf9;
}

.orderPaidLayouts__spinner {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 3px solid #e0e8e3;
    border-top-color: var(--color-brand, #1f5a48);
    border-radius: 50%;
    animation: orderPaidSpin 0.8s linear infinite;
}

@keyframes orderPaidSpin {
    to { transform: rotate(360deg); }
}

.orderPaidLayouts__waitingText {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

.orderPaidLayouts__card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #eae2d3;
    border-radius: 10px;
    background: #fff;
}

.orderPaidLayouts__preview img {
    display: block;
    width: 120px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #efe8da;
}

.orderPaidLayouts__body {
    flex: 1;
    min-width: 0;
}

.orderPaidLayouts__title {
    margin: 0 0 6px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #222;
}

.orderPaidLayouts__meta {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.4;
    color: #777;
}

.orderPaidLayouts__price {
    margin: -8px 0 14px;
    font-size: 13px;
    line-height: 1.4;
    color: #777;
}

.orderPaidLayouts__price strong {
    font-family: OpenSansSemiBold, sans-serif;
    color: #222;
}

.orderPaidLayouts__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.orderPaidLayouts__pending {
    font-size: 14px;
    color: #9a6b00;
}

.cartSummary__checkoutHint {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #777;
    text-align: center;
}

.layoutCard__badge--link {
    text-decoration: none;
}

.layoutCard__badge--paid.layoutCard__badge--link,
.layoutCard__badge--paid.layoutCard__badge--link:hover,
.layoutCard__badge--paid.layoutCard__badge--link:focus {
    color: #173f33;
    text-decoration: none;
}

.layoutCard__action--accent {
    font-family: OpenSansSemiBold, sans-serif;
    color: var(--color-brand, #1f5a48);
}

/* --- Orders list (/private_office/orders/) --- */

.ordersSection--spaced {
    margin-top: 36px;
}

.ordersSection__title {
    margin: 0 0 16px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: #333;
}

.ordersList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ordersList__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #eae2d3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.ordersList__item--pending {
    border-color: #f0e0b8;
    background: #fffdf8;
}

.ordersList__main {
    flex: 1 1 220px;
    min-width: 0;
}

.ordersList__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.ordersList__number {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #222;
}

.ordersList__badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.3;
}

.ordersList__badge--pending {
    background: #fff8e6;
    color: #9a6b00;
}

.ordersList__badge--paid {
    background: #f7f2e8;
    color: #1f5a48;
}

.ordersList__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: #666;
}

.ordersList__sum {
    font-family: OpenSansSemiBold, sans-serif;
    color: #333;
}

.ordersList__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.ordersList__note {
    flex: 1 1 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #909090;
}

@media (max-width: 575px) {
    .ordersList__item {
        flex-direction: column;
        align-items: stretch;
    }

    .ordersList__actions {
        width: 100%;
    }

    .ordersList__actions .button {
        flex: 1 1 auto;
    }
}

/* --- Sketch view sticky buy bar --- */

.sketchBuyBar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: none;
    justify-content: center;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #dfe8e1;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.sketchBuyBar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: min(100%, calc(100vw - 88px));
}

.sketchBuyBar__price {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #222;
    white-space: nowrap;
}

.sketchBuyBar__btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 16px;
}

.previewSkeleton {
    background: linear-gradient(90deg, #e8ece9 25%, #f6f1e7 50%, #e8ece9 75%);
    background-size: 200% 100%;
    animation: previewSkeletonShimmer 1.2s ease-in-out infinite;
}

.previewSkeleton.is-hidden {
    display: none;
}

@keyframes previewSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 991px) {
    .orderCheckout {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .cabinetPageHead {
        flex-direction: column;
        align-items: stretch;
    }

    .cabinetPageHead__action .button {
        width: 100%;
    }

    .layoutGrid {
        grid-template-columns: 1fr;
    }

    .layoutCard__actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .layoutCard__actions .layoutCard__action {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .sketchBuyBar {
        display: flex;
        justify-content: flex-start;
    }

    .cabinetModal__footer:has(> .button:only-child) {
        justify-content: center;
    }

    body:has(#sketchBuyBar) #goUp {
        display: none !important;
    }

    .cabinetSection--sketchView {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
}

@media screen and (max-width: 500px) {
    .sketchBuyBar__inner {
        gap: 6px;
        max-width: min(100%, calc(100vw - 92px));
    }

    .sketchBuyBar__price {
        font-size: 15px;
    }

    .sketchBuyBar__btn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    .sketchBuyBar {
        display: none !important;
    }
}

.officeEmpty {
    max-width: 480px;
    margin: 24px auto 40px;
    padding: 40px 24px;
    text-align: center;
    background: #f8fbf9;
    border: 1px solid #e2efe6;
    border-radius: 12px;
}

/* Кабинет: на всю ширину контейнера (текст — читаемой длины, см. __text). */
.officeEmpty--wide {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 24px 0 40px;
}

.officeEmpty__title {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 22px;
    line-height: 1.3;
    color: #333;
}

.officeEmpty__text {
    max-width: 560px;
    margin: 0 auto 24px;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
}

.officeEmpty__action {
    margin-bottom: 20px;
}

.officeEmpty__links {
    font-size: 15px;
    color: #888;
}

.officeEmpty__links a {
    color: #1f5a48;
    text-decoration: none;
}

.officeEmpty__links a:hover {
    text-decoration: underline;
}

.errorPage {
    padding: 8px 0 64px;
}

.errorPage__card {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 32px 36px;
    text-align: center;
    background: #fff;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(42, 35, 32, 0.08);
    overflow: hidden;
}

.errorPage__card--server {
    border-color: #f0dede;
    background: linear-gradient(180deg, #fff 0%, #fffaf9 100%);
}

.errorPage__code {
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 72px;
    line-height: 1;
    color: rgba(31, 90, 72, 0.1);
    user-select: none;
    pointer-events: none;
}

.errorPage__card--server .errorPage__code {
    color: rgba(192, 57, 43, 0.12);
}

.errorPage__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f7f2e8;
    color: var(--color-brand, #1f5a48);
}

.errorPage__icon--server {
    background: #fdf4f3;
    color: #c0392b;
}

.errorPage__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eef4f1;
    font-size: 13px;
    line-height: 1.4;
    color: #4a6b55;
}

.errorPage__card--server .errorPage__badge {
    background: #fceeed;
    color: #8f3f36;
}

.errorPage__title {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 28px;
    line-height: 1.25;
    color: #323232;
}

.errorPage__text {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.55;
    color: #666;
}

.errorPage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.errorPage__actions .button {
    min-width: 168px;
}

.errorPage__links {
    font-size: 15px;
    color: #888;
}

.errorPage__links a {
    color: var(--color-brand, #1f5a48);
    text-decoration: none;
}

.errorPage__links a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .errorPage__card {
        padding: 32px 20px 28px;
    }

    .errorPage__code {
        font-size: 56px;
    }

    .errorPage__title {
        font-size: 24px;
    }

    .errorPage__actions {
        flex-direction: column;
    }

    .errorPage__actions .button {
        width: 100%;
    }
}

.profileForm {
    width: 100%;
    max-width: 300px;
}

.accountSettings {
    max-width: 400px;
    margin-bottom: 32px;
}

.accountSettings__title {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    color: #333;
}

.accountSettings__email {
    max-width: 100%;
    background: #f5f5f5;
    cursor: default;
}

.accountSettings__hint {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

.accountSettings__hint a {
    color: #1f5a48;
}

.printMarginsHelp {
    max-width: 720px;
    margin: 0 0 24px;
    padding: 16px 18px;
    background: #f7faf8;
    border: 1px solid #d9e8de;
    border-radius: 10px;
}

.printMarginsHelp__title {
    margin: 0 0 10px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    color: #222;
}

.printMarginsHelp__lead {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

.printMarginsHelp__subtitle {
    margin: 0 0 8px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    color: #222;
}

.printMarginsHelp__list {
    margin: 0;
    padding-left: 20px;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}

.printMarginsHelp__list li + li {
    margin-top: 8px;
}

.printMarginsUpsell {
    max-width: 720px;
}

.printMarginsTabs {
    max-width: 900px;
}

.printMarginsTabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}

.printMarginsTabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid #d5ddd8;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.printMarginsTabs__tab:hover {
    border-color: #1f5a48;
    color: #1f5a48;
}

.printMarginsTabs__tab.is-active {
    border-color: #1f5a48;
    background: #eef4f1;
    color: #1f5a48;
}

.printMarginsTabs__tab:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 90, 72, 0.18);
}

.printMarginsTabs__count {
    min-width: 1.4em;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.printMarginsTabs__tab.is-active .printMarginsTabs__count {
    background: rgba(31, 90, 72, 0.18);
}

.printMarginsTabs__panel[hidden] {
    display: none;
}

.printMarginsList {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
}

.printMarginsCard {
    padding: 16px 18px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
}

.printMarginsCard.is-focused {
    border-color: #1f5a48;
    box-shadow: 0 0 0 3px rgba(31, 90, 72, 0.12);
}

.printMarginsCard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 12px;
}

.printMarginsCard__headMain {
    min-width: 0;
    flex: 1 1 220px;
}

.printMarginsCard__title {
    margin: 0 0 4px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    color: #222;
}

.printMarginsCard__meta {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.printMarginsCard__badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef4f1;
    color: #1f5a48;
    font-size: 12px;
    font-weight: 600;
}

.printMarginsCard__preset {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 200px;
}

.printMarginsCard__presetLabel {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.printMarginsCard__presetSelect {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 36px 8px 12px;
    border: 1px solid #1f5a48;
    border-radius: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231f5a48' d='M1.2 1.2 6 6l4.8-4.8 1.2 1.2L6 8.4 0 2.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    color: #2a2320;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 20, 0.06);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.printMarginsCard__presetSelect:hover {
    background-color: #eef4f1;
}

.printMarginsCard__presetSelect:focus {
    outline: none;
    border-color: #1f5a48;
    box-shadow: 0 0 0 3px rgba(31, 90, 72, 0.18);
}

.printMarginsCard__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.printMarginsCard__hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}

.printMarginsCard__hint--warn {
    color: #9a5b00;
}

.printMarginsCard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.printMarginsEmpty {
    color: #666;
}

@media (max-width: 640px) {
    .printMarginsCard__fields {
        grid-template-columns: 1fr;
    }

    .printMarginsCard__preset {
        width: 100%;
        min-width: 0;
    }
}

/* --- Imposition calibration profiles --- */

.calibrationPage {
    padding-bottom: 48px;
}

.printHub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 900px;
}

.printHubCalm {
    max-width: 900px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid #d9e8de;
    border-radius: 12px;
    background: #f7faf8;
}

.printHubCalm__lead {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

.printHubCalm__list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
}

.printHubCalm__list li + li {
    margin-top: 4px;
}

.printHub__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.printHub__card--muted {
    background: #fafbfa;
    border-style: dashed;
    color: #666;
    pointer-events: none;
}

.printHub__card:hover,
.printHub__card:focus-visible {
    border-color: #1f5a48;
    box-shadow: 0 0 0 3px rgba(31, 90, 72, 0.12);
    color: inherit;
    text-decoration: none;
}

.printHub__card--muted:hover,
.printHub__card--muted:focus-visible {
    border-color: #e7dfcf;
    box-shadow: none;
}

.printHub__eyebrow {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #173f33;
}

.printHub__card--muted .printHub__eyebrow {
    color: #7a8a80;
}

.printHub__title {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: #222;
}

.printHub__card--muted .printHub__title {
    color: #555;
}

.printHub__text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

.printSoftTip {
    margin: 14px 0 0;
    max-width: 640px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.printSoftTip a {
    color: #1f5a48;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.printMarginsHelpDetails {
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .printHub {
        grid-template-columns: 1fr;
    }
}

/* —— Хаб подписок: выгода + тарифы —— */
.planPitch {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px 20px;
    align-items: center;
    margin: 28px 0 24px;
    padding: 18px 22px;
    border: 1px solid #dce5df;
    border-radius: 14px;
    background: linear-gradient(90deg, #f7faf8 0%, #eef4f1 100%);
}

.planPitch__col {
    min-width: 0;
}

.planPitch__col--accent .planPitch__value {
    color: #1f5a48;
}

.planPitch__label {
    margin: 0 0 4px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a8580;
}

.planPitch__value {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: #2a2320;
}

.planPitch__hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}

.planPitch__divider {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    color: #1f5a48;
    line-height: 1;
}

.planPerks {
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px solid #dce5df;
    border-radius: 14px;
    background: #fff;
}

.planPerks__title {
    margin: 0 0 6px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    color: #2a2320;
}

.planPerks__lead {
    margin: 0 0 14px;
    max-width: 40rem;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
}

.planPerks__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

.planPerks__grid--cols {
    grid-template-columns: 1fr;
    max-width: 28rem;
}

.planPerks__grid li {
    position: relative;
    padding-left: 1.1em;
    font-size: 14px;
    line-height: 1.4;
    color: #2d3a34;
}

.planPerks__grid li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #1f5a48;
    font-family: OpenSansSemiBold, sans-serif;
}

.mySubscription {
    margin: 0 0 18px;
    border: 1px solid #dce5df;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(31, 42, 36, 0.04);
    overflow: hidden;
}

.mySubscription__summary {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 10px 16px;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    background: linear-gradient(180deg, #eef4f1 0%, #ffffff 100%);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mySubscription__summary::-webkit-details-marker {
    display: none;
}

.mySubscription__summary::marker {
    content: '';
}

.mySubscription__summary:hover {
    background: #eef4f1;
    box-shadow: inset 0 0 0 1px rgba(31, 90, 72, 0.2);
}

.mySubscription__title {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
    color: #2a2320;
}

.mySubscription__plan {
    font-family: OpenSansSemiBold, sans-serif;
    color: #1f5a48;
}

.mySubscription__period {
    font-size: 13px;
    color: #6b7280;
}

.mySubscription__chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.mySubscription[open] .mySubscription__chevron {
    transform: rotate(225deg);
}

.mySubscription__body {
    padding: 16px 18px 18px;
    border-top: 1px solid #e8eee9;
}

.mySubscription__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.mySubscription__stat {
    padding: 12px 14px;
    border: 1px solid #e4ebe7;
    border-radius: 10px;
    background: #eef4f1;
}

.mySubscription__statLabel {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #6b7280;
}

.mySubscription__statValue {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 24px;
    color: #2a2320;
    line-height: 1;
}

.mySubscription__statValue--date {
    font-size: 20px;
    line-height: 1.2;
}

.mySubscription__pending {
    margin: 0 0 8px;
    color: #4b5563;
}

.mySubscription__actions {
    margin-top: 12px;
}

.subscriptionDivider {
    margin: 32px 0 36px;
    border-top: 1px solid #e2e8e4;
}

.planCards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 8px 0 0;
}

.planCards__renew {
    margin: 0 0 20px;
}

.planCards__footnote {
    margin-top: 28px;
}

.planCard__fn {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;
}

.planCard__fn a {
    color: inherit;
    text-decoration: none;
}

.planCard__fn a:hover {
    text-decoration: underline;
}

.planNotes {
    margin: 36px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #e2e8e4;
}

.planNotes__title {
    margin: 0 0 8px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a8580;
}

.planNotes__lead {
    margin: 0 0 14px;
    max-width: none;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

.planNotes__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.planNotes__list li {
    display: grid;
    grid-template-columns: 1.25em 1fr;
    gap: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b7280;
}

.planNotes__mark {
    font-family: OpenSansSemiBold, sans-serif;
    color: #8a9490;
}

.planNotes__list strong {
    font-family: OpenSansSemiBold, sans-serif;
    color: #4b5563;
    font-weight: normal;
}

/* legacy class kept if referenced elsewhere */
.planLimits {
    margin: 32px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #e2e8e4;
}

.planCard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    padding: 28px 26px 24px;
    border: 1px solid #dce5df;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(31, 42, 36, 0.04);
}

.planCard--featured {
    border-color: #1f5a48;
    background: linear-gradient(180deg, #f7f2e8 0%, #fff 42%);
    box-shadow: 0 0 0 1px rgba(31, 90, 72, 0.18), 0 10px 28px rgba(31, 90, 72, 0.08);
}

.planCard--current {
    border-color: #cfe0d9;
}

.planCard__ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.planCard__ribbon--featured {
    background: #eef4f1;
    color: #173f33;
    border: 1px solid #cfe0d9;
}

.planCard__ribbon--current {
    background: #d9edf7;
    color: #31708f;
    border: 1px solid #bce8f1;
}

.planCard__header {
    padding-right: 96px;
}

.planCard__period {
    margin: 0 0 6px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #173f33;
}

.planCard__name {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 28px;
    line-height: 1.15;
    color: #2a2320;
}

.planCard__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: #2a2320;
}

.planCard__priceValue {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.planCard__priceCurrency {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    color: #4a5550;
}

.planCard__perLayout {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #5b6761;
}

.planCard__perLayoutRetail {
    display: inline;
    color: #8a9490;
}

.planCard__saving {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #eef4f1;
    color: #1f5a48;
    font-size: 14px;
    line-height: 1.35;
}

.planCard__saving strong {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.planCard__limitsTitle {
    margin: 0 0 4px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a8580;
}

.planCard__retailCompare {
    margin: -4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.planCard__features {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e8eee9;
}

.planCard__features li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e8eee9;
    font-size: 14px;
    line-height: 1.4;
}

.planCard__featureLabel {
    color: #6b7280;
}

.planCard__featureValue {
    font-family: OpenSansSemiBold, sans-serif;
    color: #222;
    text-align: right;
}

.planCard__action {
    margin-top: auto;
    padding-top: 4px;
}

.planCard__btn {
    width: 100%;
    min-height: 44px;
}

.planCard__status {
    margin: 0;
    padding: 12px 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    color: #1f5a48;
    text-align: center;
}

.planCard__status--muted {
    color: #8a9490;
    font-family: OpenSans, sans-serif;
}

@media (max-width: 960px) {
    .mySubscription__summary {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .mySubscription__chevron {
        justify-self: end;
        margin-top: 4px;
    }

    .mySubscription__stats {
        grid-template-columns: 1fr;
    }

    .planPitch {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: left;
    }

    .planPitch__divider {
        display: none;
    }

    .planPerks__grid {
        grid-template-columns: 1fr;
    }

    .planCards {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }

    .planCard--featured {
        order: -1;
    }

    .purchaseChoice__actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .purchaseChoice__grid {
        grid-template-columns: 1fr;
    }

    .purchaseChoice__divider {
        width: 100%;
        height: 1px;
    }
}

@media (min-width: 961px) and (max-width: 1100px) {
    .planCard__name {
        font-size: 24px;
    }

    .planCard__priceValue {
        font-size: 34px;
    }
}

.calibrationPage__alert {
    max-width: 720px;
    margin-bottom: 16px;
}

.calibrationPage__guideLink {
    margin: 10px 0 0;
}

.calibrationPage__guideLink a {
    font-family: OpenSansSemiBold, sans-serif;
}

.calibrationPage__empty,
.calibrationPage__limit {
    max-width: 720px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

.calibrationHelp {
    max-width: 720px;
    margin: 0 0 16px;
    border: 1px solid #e7dfcf;
    border-radius: 10px;
    background: #fafcfa;
}

.calibrationHelp__summary {
    padding: 10px 14px;
    cursor: pointer;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    color: #333;
    list-style: none;
}

.calibrationHelp__summary::-webkit-details-marker {
    display: none;
}

.calibrationHelp__summary::before {
    content: '+';
    display: inline-block;
    width: 1.1em;
    color: #1f5a48;
}

.calibrationHelp[open] .calibrationHelp__summary::before {
    content: '−';
}

.calibrationHelp__body {
    padding: 0 14px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

.calibrationHelp__body p {
    margin: 0 0 8px;
}

.calibrationHelp__body p:last-child {
    margin-bottom: 0;
}

.calibrationField {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    min-width: 0;
}

.calibrationField__label {
    font-size: 12px;
    line-height: 1.2;
    color: #666;
}

.calibrationToolbar {
    max-width: 900px;
    margin: 0 0 16px;
}

.calibrationToolbar .button {
    float: none;
}

.calibrationList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid #e7dfcf;
}

.calibrationList__title {
    margin: 0 0 4px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #222;
}

.calibrationList__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.calibrationRow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
}

.calibrationRow--default {
    border-color: #cfe0d9;
    background: #eef4f1;
}

.calibrationRow__info {
    flex: 1 1 70px;
    min-width: 0;
}

.calibrationRow__nameLine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.calibrationRow__name {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    color: #222;
}

.calibrationRow__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
    color: #666;
}

.calibrationRow__badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: #173f33;
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
}

.calibrationRow__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.calibrationRow__actions .button,
.calibrationRow__inlineForm .button {
    float: none;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.calibrationRow__inlineForm {
    margin: 0;
    display: block;
}

/* Fullscreen visual calibration editor */
.calibrationEditor.modal {
    padding: 0 !important;
    overflow: hidden;
}

.calibrationEditor__dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

.calibrationEditor.modal.fade .calibrationEditor__dialog {
    transform: translate(0, 0);
}

.calibrationEditor__content {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.calibrationEditor__form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    background: #f4f7f5;
}

.calibrationEditor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #e7dfcf;
}

.calibrationEditor__close {
    border: 0;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
}

.calibrationEditor__close:hover {
    color: #333;
}

.calibrationEditor__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 16px 40px;
    overflow: auto;
}

.calibrationEditor__fields {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) auto;
    gap: 12px 16px;
    align-items: end;
    width: 100%;
    max-width: 720px;
    padding: 14px 16px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
}

.calibrationEditor__default {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-bottom: 8px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

.calibrationEditor__formatValue {
    display: flex;
    align-items: center;
    min-height: 38px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    color: #222;
}

.calibrationEditor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    justify-content: flex-end;
}

.calibrationEditor__actions .button {
    float: none;
    min-width: 150px;
}

.calibrationEditor__stage {
    display: grid;
    grid-template-columns: 56px minmax(220px, 320px) 56px;
    grid-template-rows: 56px minmax(220px, 320px) 56px;
    gap: 8px;
    align-items: center;
    justify-items: center;
}

.calibrationEditor__sheet {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 16px;
    background:
        linear-gradient(45deg, #d5d9d7 25%, transparent 25%) -8px 0 / 16px 16px,
        linear-gradient(-45deg, #d5d9d7 25%, transparent 25%) -8px 0 / 16px 16px,
        linear-gradient(45deg, transparent 75%, #d5d9d7 75%) -8px 0 / 16px 16px,
        linear-gradient(-45deg, transparent 75%, #d5d9d7 75%) -8px 0 / 16px 16px,
        #ecefed;
    box-shadow: inset 0 0 0 1px #c5cbc8;
    overflow: hidden;
}

.calibrationEditor__square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    user-select: none;
    pointer-events: none;
}

.calibrationEditor__square--front {
    z-index: 1;
    background: #1f5a48;
    color: #fff;
    box-shadow: 0 2px 8px rgba(31, 90, 72, 0.35);
}

.calibrationEditor__square--back {
    z-index: 2;
    background: #e07a45;
    opacity: 0.8;
    color: #fff;
    box-shadow: 0 2px 10px rgba(224, 122, 69, 0.4);
    transition: transform 0.12s ease;
}

.calibrationEditor__arrow {
    width: 52px;
    height: 52px;
    border: 1px solid #cfe0d9;
    border-radius: 12px;
    background: #fff;
    color: #173f33;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.calibrationEditor__arrow:hover {
    background: #eef4f1;
    border-color: #1f5a48;
}

.calibrationEditor__arrow:active {
    background: #eef4f1;
}

.calibrationEditor__arrow--up { grid-column: 2; grid-row: 1; }
.calibrationEditor__arrow--left { grid-column: 1; grid-row: 2; }
.calibrationEditor__arrow--right { grid-column: 3; grid-row: 2; }
.calibrationEditor__arrow--down { grid-column: 2; grid-row: 3; }

.calibrationEditor__readout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.calibrationEditor__readoutItem {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e7dfcf;
    font-size: 14px;
    color: #555;
}

.calibrationEditor__readoutLabel {
    color: #888;
}

.calibrationEditor__readoutItem strong {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 18px;
    color: #222;
    min-width: 3.2em;
    text-align: right;
}

.calibrationEditor__hint {
    margin: 0;
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: #777;
}

@media (max-width: 720px) {
    .calibrationList__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calibrationEditor__fields {
        grid-template-columns: 1fr;
    }

    .calibrationEditor__default {
        white-space: normal;
        padding-bottom: 0;
    }

    .calibrationEditor__actions .button {
        min-width: 0;
        flex: 1 1 calc(50% - 8px);
    }

    .calibrationEditor__stage {
        grid-template-columns: 48px minmax(180px, 1fr) 48px;
        grid-template-rows: 48px minmax(180px, 260px) 48px;
        width: 100%;
        max-width: 360px;
    }

    .calibrationEditor__square {
        width: 96px;
        height: 96px;
        margin: -48px 0 0 -48px;
        font-size: 14px;
    }

    .calibrationEditor__arrow {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .calibrationRow__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .calibrationList__grid {
        grid-template-columns: 1fr;
    }

    .calibrationEditor__actions .button {
        flex-basis: 100%;
    }

    .calibrationRow__actions {
        grid-template-columns: 1fr;
    }
}

.calibrationGuide {
    padding-bottom: 48px;
}

.calibrationGuide__alert {
    width: 100%;
    margin-bottom: 24px;
}

.calibrationGuide__steps {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.calibrationGuide__step {
    margin: 0 0 28px;
    padding: 18px 20px 20px;
    border: 1px solid #e7dfcf;
    border-radius: 12px;
    background: #fff;
}

.calibrationGuide__stepTitle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 10px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.35;
    color: #222;
}

.calibrationGuide__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1f5a48;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

.calibrationGuide__text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #444;
}

.calibrationGuide__text:last-child {
    margin-bottom: 0;
}

.calibrationGuide__signs {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

.calibrationGuide__signs li + li {
    margin-top: 4px;
}

.calibrationGuide__figure {
    margin: 14px 0 0;
    padding: 12px 14px 10px;
    border-radius: 10px;
    background: #f7faf8;
    text-align: center;
}

.calibrationGuide__svg {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
}

.calibrationGuide__figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #777;
}

.calibrationGuide__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.calibrationGuide__footer .button {
    float: none;
}

.profileDanger {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e8e8e8;
    max-width: 480px;
}

.profileDanger__title {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    color: #c0392b;
}

.profileDanger__text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
}

.profileDanger__email {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #555;
    word-break: break-word;
}

.profileDanger__code {
    max-width: 160px;
    font-size: 20px;
    letter-spacing: 4px;
    text-align: center;
    font-family: OpenSansSemiBold, sans-serif;
}

.profileDanger__checkbox label {
    font-size: 14px;
    line-height: 1.45;
    font-weight: normal;
    cursor: pointer;
}

.profileDanger__checkbox input {
    margin-right: 8px;
}

.profileDanger__hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: #888;
}

.profileDanger__resend {
    margin-top: 16px;
}

.sketchActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


#typeProductDialog .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    width: calc(100% - 30px);
    max-width: 520px;
    transform: translate(-50%, -50%);
}

#typeProductDialog.modal.fade .modal-dialog {
    transform: translate(-50%, calc(-50% - 25px));
}

#typeProductDialog.modal.in .modal-dialog {
    transform: translate(-50%, -50%);
}




/* Плитки выбора физического размера одного дизайна (визитка - 2 размера,
   открытка - 3, листовка - 4) - до 3 в ряд, лишние переносятся строкой ниже
   (2026-09-17, замена вертикального списка по фидбеку пользователя: "смотря
   сколько у нас может быть размеров разных, чтобы смотрелось гормонично").
   Плитка - button, не ссылка: клик ВЫБИРАЕТ размер (.is-active), переход в
   редактор - только через отдельную CTA-кнопку ниже (designSizeDialog__cta),
   тоже по фидбеку - раньше явного "нажми, чтобы начать" не было. */
.designSizeOptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
}

.designSizeOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px 12px;
    border: 1.5px solid #e6eaee;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: #000;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.designSizeOption:hover,
.designSizeOption:focus-visible {
    border-color: #1f5a48;
    background-color: rgba(31, 90, 72, 0.06);
    outline: none;
}

.designSizeOption.is-active {
    border-color: #1f5a48;
    background-color: rgba(31, 90, 72, 0.08);
    box-shadow: 0 0 0 1px #1f5a48 inset;
}

.designSizeOption__swatch {
    flex: none;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.designSizeOption__swatch span {
    display: block;
    background: rgba(31, 90, 72, 0.12);
    border: 1.5px solid #1f5a48;
    border-radius: 2px;
}

.designSizeOption__text {
    min-width: 0;
}

.designSizeOption__name {
    display: block;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    color: #000;
}

.designSizeOption__dims {
    display: block;
    font-family: OpenSansRegular, sans-serif;
    font-size: 12.5px;
    color: #777;
    margin-top: 2px;
}

/* Превью лицевой/оборотной стороны в попапе выбора размера, с tilt-эффектом
   "разглядывания" и кнопкой переворота (2026-09-17, второй раунд фидбека -
   "верни имитацию разглядывания макета... крутой симбиоз обоих вариантов").
   Переиспользует .preview_3D/preview-carousel.js - тот же компонент, что на
   /private_office/view_sketch/ (клонируется из #designSizeDialogPreviewTemplate
   в base.html.twig, см. комментарий в site.js), но с --preview-max-w/
   --preview-max-h, уменьшенными под модалку компаунд-селектором ниже -
   значения по умолчанию из .preview-card/.preview-loading рассчитаны на
   полноэкранную страницу просмотра и были бы избыточно большими тут. */
/* 900px вместо 640px. Причина не «чтобы было просторнее»: в попапе
   появился блок «Ещё в этой категории», и на 640px его превью
   помещались только шириной 64px — на них буквально ничего не
   разобрать, а это единственный способ перейти к соседнему шаблону не
   закрывая окно. Заодно крупнее стало и само превью макета. */
@media (min-width: 768px) {
    #designSizeDialog .modal-dialog {
        width: 900px;
        max-width: calc(100vw - 32px);
    }
}

.designSizeDialog__name {
    min-height: 1em;
}

.designSizeDialog__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Верхний ряд попапа: превью слева, плитки размеров справа. Раньше они
   стояли друг под другом, и вертикальное превью (до 360px) плюс строка
   плиток съедали столько высоты, что блок «Ещё в этой категории»
   оказывался за нижним краем окна. Сдвинув размеры вбок, освобождаем
   низ под соседей в два ряда и покрупнее.

   260px справа — под самую широкую подпись размера («Евровизитка
   вертикальная», 90×60 мм) без переноса; остальное отдаём превью. */
.designSizeDialog__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    align-items: start;
}

/* В узкой правой колонке авто-сетка по 160px дала бы одну колонку с
   рваными переносами — задаём одну явно, плитки встают стопкой. */
.designSizeDialog__top .designSizeOptions {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
}

/* Левая колонка: превью и под ним цена с кнопкой. */
.designSizeDialog__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Отступы вокруг карточки - это не просто "воздух": mousemove-слушатель
   tilt-эффекта в preview-carousel.js повешен на весь .preview_3D (корень),
   а не только на .preview-card - значит зона, где движение курсора вообще
   влияет на наклон макета, буквально равна этому паддингу. Раньше (12px)
   она была слишком узкой, чтобы "распробовать" эффект без наведения точно
   на саму карточку (фидбек 2026-09-17: "область... где курсор влияет на
   смещение макета... довольно мелкое") - увеличена на всех сторонах. */
.preview_3D.designSizeDialog__preview {
    margin: 0 auto;
    padding: 40px 40px 48px;
    max-width: min(560px, 100%);
    min-height: 0;
    background-color: #f4f6f4;
    border-radius: 10px;
}

.designSizeDialog__preview .preview-stage {
    min-height: 0;
}

/* Потолок показа НЕ должен превышать собственный размер превью: оно
   рендерится при 96 dpi (правило про пиратство, см.
   LayoutAjaxController::getPreview()), и растянуть его дальше — значит
   получить мягкую картинку, а не подробную. Здесь стояло жёсткое
   `--preview-max-w: 100%`, которое перебивало нативный потолок из
   .preview-card своей большей специфичностью, и попап тянул евровизитку
   с 340 px источника до 480 px показа. */
.designSizeDialog__preview .preview-card,
.designSizeDialog__preview .preview-loading {
    --preview-max-w: min(100%, var(--preview-native-max-w, 560px));
    --preview-max-h: min(360px, 52vh, var(--preview-native-max-h, 620px));
}

/* Спиннер поверх скелетона. Одного мерцающего прямоугольника мало: при
   медленном превью он читается как «серый блок», а не как «идёт
   загрузка», и возникает ощущение поломки. Привязан к самому скелетону,
   а не к фазе запроса, — поэтому виден и пока идёт getPreview, и пока
   грузится сама картинка; карусель гасит его тем же .is-hidden. */
.designSizeDialog__preview .preview-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(47, 59, 54, 0.15);
    border-top-color: #1f5a48;
    border-radius: 50%;
    animation: designPreviewSpin 0.8s linear infinite;
}

@keyframes designPreviewSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .designSizeDialog__preview .preview-loading::after {
        animation-duration: 2.4s;
    }
}

/* Запрос не удался: гасим мерцание, иначе скелетон крутился бы вечно и
   читался как «всё ещё грузится». */
.designSizeDialog__preview.is-failed .preview-loading {
    animation: none;
    background: #f6f1e7;
}

.designSizeDialog__preview.is-failed .preview-loading::after {
    content: "Не удалось загрузить превью";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: none;
    color: #8a8a8a;
    font-size: 12.5px;
    text-align: center;
    padding: 0 12px;
}

/* Кнопка переворота - маленький круглый значок в углу карточки (не строка
   .preview-meta, как на полноэкранной странице - в урезанной разметке
   попапа её нет вовсе, см. designSizeDialogPreviewTemplate). Полностью
   прячется (не просто затемняется), когда сторона одна - для
   односторонних дизайнов переворачивать нечего, а фидбек прошлого раунда
   прямо просил не занимать место элементами без смысла. */
.designSizeDialog__flipBtn,
.templatePageView__flip {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.15s ease;
}

.designSizeDialog__flipBtn:hover:not(:disabled),
.templatePageView__flip:hover:not(:disabled) {
    background: #fff;
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.designSizeDialog__flipBtn:disabled,
.templatePageView__flip:disabled {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 479px) {
    .preview_3D.designSizeDialog__preview {
        padding: 24px 24px 36px;
    }

    .designSizeDialog__preview .preview-card,
    .designSizeDialog__preview .preview-loading {
        --preview-max-h: min(240px, 42vh);
    }
}

/* Цена + CTA - единый явный "конец пути" попапа (2026-09-17, фидбек:
   "нет явного понимания что надо сделать чтобы начать редактировать").
   Раньше цена была мелким серым текстом (13px/#777) без какой-либо кнопки
   рядом - теперь оба элемента в одной строке, кнопка - основной акцент. */
.designSizeDialog__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e6eaee;
}

.designSizeDialog__price {
    display: flex;
    flex-direction: column;
    font-family: OpenSansRegular, sans-serif;
    font-size: 13px;
    color: #777;
}

.designSizeDialog__price strong {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 22px;
    color: #000;
}

.designSizeDialog__more {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-brand, #1f5a48);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.designSizeDialog__ctaBtn {
    flex: none;
    min-width: 220px;
    white-space: nowrap;
}

@media (max-width: 479px) {
    .designSizeDialog__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .designSizeDialog__ctaBtn {
        min-width: 0;
        white-space: normal;
    }
}

.horizontally {
    background: url('/tools/images/horizontally_type.png') center center / contain no-repeat #FFFFFF;
}

.vertically {
    background: url('/tools/images/vertically_type.png') center center / contain no-repeat #FFFFFF;
}

.errorMessage {
    padding: 3px 0;
    color: #FF6F6F;
}

.divAuth {
    width: 100%;
    max-width: 400px;
}

.itemSketch {
    margin-bottom: 30px;
}

.itemSketch span {
    font-size: 14px;
}

.itemSketch a:not(.layoutCard__action):not(.layoutCard__previewLink):not(.layoutCard__badge) {
    font-size: 14px;
}

.itemSketch .control {
    margin-top: 10px;
}

.itemSketch .delHref {
    color: #ff0000;
}

.itemSketch .delHref:hover {
    color: #ff0000;
    text-decoration: underline;
    cursor: pointer;
}

.hatBox2,
.heading-line--page {
    font-size: 30px;
    margin: 15px 0 30px 0;
}

.preview_img_click {
    position: relative;
    border: 1px solid #D4D4D4;
    width: 100%;
    height: 225px;
    background: #ededed;
}

.preview_img_click:hover {
    border: 1px solid #74a5c5 !important;
    cursor: pointer;
    opacity: 0.8;
}

.preview_img_click .frontPreview {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 145px;
    z-index: 2;
    background: center bottom / contain no-repeat;
}

.preview_img_click .backPreview {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 145px;
    z-index: 1;
    background: center top / contain no-repeat;
}

.preview_img_click .loadingPreview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.controlPanelFonts {
    margin: 5px 0 30px 0;
}

.previewFont {
    width: 100%;
    height: 80px;
    background: center center / 150px no-repeat #e2e2e2;
    border: 1px solid #e2e2e2;
}

.previewFont:hover {
    border: 1px solid #1f5a48;
    opacity: 0.6;
}

.miniBtn {
    border: 1px solid #d4d4d4;
    padding: 5px;
    border-radius: 4px;
}

.miniBtn:hover {
    opacity: 0.6;
    cursor: pointer;
}

.deleteFont {
    width: 35px;
}

.textAreaFont {
    border: 1px solid #000;
    background-color: #fff;
    padding: 5px;
    width: 100%;
    font-size: 16px;
}

.textImageFont {
    margin: 5px 0 30px 0;
}

.preview_3D {
    position: relative;
    padding: 64px 16px 52px;
    margin: 20px 0;
    background-color: #D4D4D4;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    box-sizing: border-box;
    touch-action: pan-y;
    outline: none;
}

.preview_3D:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(31, 90, 72, 0.45);
}

.preview-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
}

.preview-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 440px;
    /* 820px вместо 1000px: чем меньше значение, тем ближе «камера» и тем
       заметнее сама перспектива при том же угле поворота. Понадобилось
       вместе с перенормировкой наклона в preview-carousel.js — карточка
       после перехода превью на 96 dpi стала втрое меньше поля, и эффект
       разглядывания читался слабо. */
    perspective: 820px;
}

.preview-loading {
    position: absolute;
    z-index: 2;
    border-radius: 2px;
    /* Match card box so skeleton covers the white face while images load. */
    --preview-max-w: min(560px, calc(100vw - 120px), var(--preview-native-max-w, 560px));
    --preview-max-h: min(620px, 68vh, var(--preview-native-max-h, 620px));
    aspect-ratio: var(--preview-w) / var(--preview-h);
    width: min(var(--preview-max-w), calc(var(--preview-max-h) * var(--preview-w) / var(--preview-h)));
    max-width: 100%;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.preview-card {
    /* Capped at the layout's own 96dpi pixel size (--preview-native-max-w/h,
       set inline per layout from canvas_width_mm/height_mm) so `cover`
       below never upscales past native resolution - a 96dpi source shown
       larger than its own pixels is what caused the original blur/pixelation
       report, not the dpi itself. */
    --preview-max-w: min(560px, calc(100vw - 120px), var(--preview-native-max-w, 560px));
    --preview-max-h: min(620px, 68vh, var(--preview-native-max-h, 620px));
    position: relative;
    display: block;
    aspect-ratio: var(--preview-w) / var(--preview-h);
    width: min(var(--preview-max-w), calc(var(--preview-max-h) * var(--preview-w) / var(--preview-h)));
    max-width: 100%;
    transition: transform 0.08s ease-out;
    transform-style: preserve-3d;
}

.preview-card__face {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: #fff center center / cover no-repeat;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.preview-card__face.is-awaiting-preview {
    visibility: hidden;
}

.preview-card__face.is-exit-left {
    opacity: 0;
    transform: translateX(-18px);
}

.preview-card__face.is-exit-right {
    opacity: 0;
    transform: translateX(18px);
}

.preview-card__face.is-enter-left {
    opacity: 0;
    transform: translateX(-18px);
}

.preview-card__face.is-enter-right {
    opacity: 0;
    transform: translateX(18px);
}

.preview-nav {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.15s ease;
}

.preview-nav span {
    display: block;
    margin-top: -6px;
}

.preview-nav:hover:not(:disabled) {
    background: #fff;
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.preview-nav:active:not(:disabled) {
    background: rgba(31, 90, 72, 0.08);
    border-color: var(--color-brand-hover);
    color: var(--color-brand-hover);
}

.preview-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.preview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    margin-top: 24px;
    font-size: 14px;
    color: #444;
}

.preview-page-label {
    font-family: OpenSansSemiBold, sans-serif;
}

.preview-counter {
    color: #666;
}

.preview-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.preview-dot.is-active {
    background: #1f5a48;
    transform: scale(1.15);
}

.preview-flip-btn {
    margin-left: 4px;
}

@media (max-width: 767px) {
    .preview_3D {
        padding: 48px 8px 36px;
        min-height: 420px;
    }

    .preview-carousel {
        gap: 6px;
    }

    .preview-nav {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 24px;
    }

    .preview-stage {
        min-height: 320px;
    }

    .preview-card,
    .preview-loading {
        --preview-max-w: min(calc(100vw - 88px), var(--preview-native-max-w, 100vw));
        --preview-max-h: min(500px, 58vh, var(--preview-native-max-h, 500px));
    }

    .preview-meta:has(.preview-flip-btn)::after {
        content: '';
        order: 4;
        flex-basis: 100%;
        width: 0;
        height: 0;
    }

    .preview-meta .preview-flip-btn {
        order: 5;
        flex: 0 0 auto;
        width: auto;
        margin-left: 0;
        margin-top: 4px;
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preview-card,
    .preview-card__face {
        transition: none;
    }
}

/* --- Sketch view: preview + download panels --- */

.sketchDownload {
    margin: 28px 0 40px;
}

.sketchDownload__formatsSection {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
}

.sketchDownload__previewCard {
    padding: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fafafa;
}

.sketchDownload__previewCard .preview_3D {
    margin: 0;
}

.sketchDownload__formatsCard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
}

.sketchDownload__heading {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 22px;
    line-height: 1.3;
    color: #333;
}

.impositionSection__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #666;
}

.impositionBuy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}

.impositionBuy .buyImpositionBtn {
    min-width: 220px;
}

.inCartDone {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    width: auto;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f3f7f4;
    border: 1px solid #d7e5dc;
    box-sizing: border-box;
}

.inCartDone__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1f5a48;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.inCartDone__status {
    flex: 0 1 auto;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    color: #24352b;
}

.inCartDone__cartBtn {
    white-space: nowrap;
}

.purchaseChoice__balance {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.purchaseChoice__balance--ok {
    background: #eef4f1;
    color: #1f5a48;
}

.purchaseChoice__balance--mid {
    background: #fff4d6;
    color: #9a6a00;
}

.purchaseChoice__balance--low {
    background: #fde9e9;
    color: #a33535;
}

.purchaseChoice__feedback {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
}

.purchaseChoice__feedback--success {
    background: #eef4f1;
    color: #1f5a48;
}

.purchaseChoice__feedback--warning {
    background: #fff7e6;
    color: #9a6a00;
}

.purchaseChoice__feedback--error {
    background: #fff0f0;
    color: #9c2f2f;
}

.purchaseChoice__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.purchaseChoice__section {
    padding: 14px;
    border: 1px solid #e3e8e5;
    border-radius: 14px;
    background: #f9fbfa;
}

.purchaseChoice__title {
    margin: 0 0 10px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 17px;
    line-height: 1.3;
}

.purchaseChoice__summary {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e3e8e5;
}

.purchaseChoice__summaryLabel {
    margin: 0 0 6px;
    font-size: 13px;
    color: #66746f;
}

.purchaseChoice__summaryPrice {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 22px;
    line-height: 1.2;
    color: #1e2d28;
}

.purchaseChoice__checkout {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

.purchaseChoice__actions {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
}

.purchaseChoice__actions > * {
    justify-self: start;
}

.purchaseChoice__actions form {
    margin: 0;
}

.purchaseChoice__btn,
.purchaseChoice__slot {
    width: auto;
    max-width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.purchaseChoice__checkout .purchaseChoice__btn {
    min-width: 200px;
}

.purchaseChoice__slot--notice {
    padding: 8px 10px;
    border: 1px dashed #e3c1c1;
    border-radius: 8px;
    font-size: 13px;
    color: #8a4d4d;
    background: #fff8f8;
}

.purchaseChoice__slot--success,
.purchaseChoice__slot--muted {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.purchaseChoice__slot--success {
    background: #eef4f1;
    color: #1f5a48;
}

.purchaseChoice__slot--muted {
    background: #f2f4f3;
    color: #66746f;
}

.purchaseChoice__upsell {
    margin: 10px 0 10px;
    font-size: 13px;
    color: #55635e;
}

.purchaseChoice__upsellBtn {
    width: 100%;
}

.purchaseChoice__divider {
    width: 1px;
    background: #e3e8e5;
}

@media (max-width: 960px) {
    .purchaseChoice__grid {
        grid-template-columns: 1fr;
    }
}

.cartFlyer {
    position: fixed;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe57f 0%, #f0c419 55%, #d59f00 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 1400;
    opacity: 0.95;
    transform: translate(0, 0) scale(1);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.15, 1), opacity 0.7s ease-out;
}

@keyframes accountCartBump {
    0% { transform: scale(1); }
    45% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes accountCartBadgeBump {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.sketchDownload__formatsCard .impositionToggle__text {
    color: #444;
}

.sketchDownload__paidNote {
    margin: 0;
}

.impositionDownloads {
    margin-top: 4px;
}

.impositionDownloads .sketchDownload-panel__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.impositionDownloads__action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 28px 10px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fbfa;
}

.impositionDownloads__action .button {
    width: 100%;
    text-align: center;
    margin: 8px 0;
}

.impositionDownloads__size {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 12px;
    line-height: 1.3;
    color: #888;
    text-align: right;
}

.impositionDownloads__defaultProfile {
    padding-left: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #4b5563;
}

.impositionDownloads__defaultProfile strong {
    font-family: OpenSansSemiBold, sans-serif;
    color: #1f2937;
}

.impositionDownloads__defaultProfileMeta {
    display: block;
}

.sketchDownload__browserNote {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #909090;
}

.sketchActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.sketchDownload-panel {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
}

.sketchDownload-panelGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sketchDownload-premiumGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.sketchDownload-premiumImages {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sketchDownload-panel--pdf {
    height: 100%;
}

.sketchDownload-panel--pdf .sketchDownload-panel__action {
    margin-top: auto;
}

.sketchDownload-panel__title {
    margin-bottom: 6px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
}

.sketchDownload-panel__text {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

.sketchDownload-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.sketchDownload-panel__action {
    align-self: flex-start;
}

.sketchDownload-panel__action--full {
    align-self: stretch;
    width: 100%;
    text-align: center;
}

.sketchDownload-offer {
    margin-top: 24px;
    margin-bottom: 0;
    padding: 20px 22px;
    border: 1px solid #cfe0d9;
    border-radius: 12px;
    background: linear-gradient(180deg, #eef4f1 0%, #eef4f1 100%);
    font-family: OpenSansRegular, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #2b4a35;
}

.sketchDownload-offer p,
.sketchDownload-offer li,
.sketchDownload-offer h3 {
    margin: 0;
    line-height: inherit;
}

.sketchDownload-offer > * + * {
    margin-top: 14px;
}

.sketchDownload-offer__eyebrow {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #173f33;
}

.sketchDownload-offer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sketchDownload-offer__title {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    line-height: 1.25;
    color: #173f33;
}

.sketchDownload-offer__price {
    flex: 0 0 auto;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 24px;
    line-height: 1.1;
    color: #173f33;
    white-space: nowrap;
}

.sketchDownload-offer__lead {
    font-size: 15px;
    line-height: 1.55;
    color: #3d5c47;
}

.sketchDownload-offer__lead strong {
    font-family: OpenSansSemiBold, sans-serif;
    color: #173f33;
}

.sketchDownload-offer__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sketchDownload-offer .sketchDownload-offer__benefits {
    margin-top: 20px;
    margin-bottom: 20px;
}

.sketchDownload-offer__benefit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid #cfe0d9;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.sketchDownload-offer__benefitFormat {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: #173f33;
}

.sketchDownload-offer__benefitText {
    font-size: 13px;
    line-height: 1.45;
    color: #4a6b56;
}

.sketchDownload-offer__note {
    font-size: 14px;
    line-height: 1.45;
    color: #5a7a66;
}

.sketchDownload-offer .sketchDownload-offer__buy {
    margin-top: 24px;
}

.sketchDownload-offer__buy {
    text-align: center;
}

.sketchDownload-offer__buyBtn {
    display: inline-block;
    min-width: 220px;
    width: auto;
}

@media (max-width: 767px) {
    .sketchDownload-offer {
        padding: 18px 16px;
    }

    .sketchDownload-offer__header {
        flex-direction: column;
        gap: 6px;
    }

    .sketchDownload-offer__price {
        font-size: 22px;
    }

    .sketchDownload-offer__benefits {
        grid-template-columns: 1fr;
    }

    .sketchDownload-offer__buyBtn {
        width: 100%;
        min-width: 0;
    }

    .sketchDownload-offer__addon .sketchDownload-offer__lead + .impositionToggle {
        margin-top: 16px;
    }
}

.sketchDownload-offer__inCartState {
    width: auto;
}

.sketchDownload-offer__addon {
    margin-top: 20px !important;
    padding-top: 20px;
    border-top: 1px dashed #cfe0d9;
}

.impositionToggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.impositionToggle__text {
    font-size: 15px;
    color: #2b4a35;
}

.impositionToggle__text strong {
    font-family: OpenSansSemiBold, sans-serif;
    color: #173f33;
}

.toggleSwitch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    cursor: pointer;
}

.impositionToggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggleSwitch__track {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 999px;
    background: #d4dcd7;
    transition: background 0.15s ease;
}

.toggleSwitch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.impositionToggle__input:checked ~ .toggleSwitch__track {
    background: #173f33;
}

.impositionToggle__input:checked ~ .toggleSwitch__track .toggleSwitch__thumb {
    transform: translateX(18px);
}

.impositionToggle__input:focus-visible ~ .toggleSwitch__track {
    outline: 2px solid #173f33;
    outline-offset: 2px;
}

.sketchDownload-offer__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #173f33;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #fff;
    vertical-align: middle;
}

.sketchDownload-offer__explainerLink {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: OpenSansRegular, sans-serif;
    font-size: 14px;
    color: #173f33;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sketchDownload-offer__explainerLink:hover {
    text-decoration: none;
}

.impositionExplainer .impositionExplainer__diagram {
    display: flex;
    align-items: center;
    gap: 16px;
}

.impositionExplainer__col {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.impositionExplainer__svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.impositionExplainer__caption {
    margin-top: 8px !important;
    font-size: 13px;
    color: #777;
}

.impositionExplainer__arrow {
    flex: 0 0 auto;
    font-size: 24px;
    color: #173f33;
}

.impositionExplainer__footnote {
    font-size: 13px;
    color: #888;
}

@media (max-width: 767px) {
    .impositionExplainer .impositionExplainer__diagram {
        flex-direction: column;
    }

    .impositionExplainer__arrow {
        transform: rotate(90deg);
    }
}

.cabinetModal .modal-dialog--wide {
    max-width: 640px;
}

@media (max-width: 767px) {
    .sketchDownload-panelGrid,
    .sketchDownload-premiumGrid {
        grid-template-columns: 1fr;
    }

    .impositionDownloads .sketchDownload-panel__actions {
        grid-template-columns: 1fr;
    }

    .sketchDownload__formatsSection {
        margin-top: 32px;
    }
}

.preview_basket {
    display: inline-block;
    width: 100%;
    height: 180px;
    border: 1px solid #D4D4D4;
    margin-bottom: 20px;
}

.successAddBasket {
    position: fixed;
    top: calc(var(--site-header-height, 60px) + 12px);
    right: max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: flex-start;
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    min-height: 56px;
    padding: 14px 20px;
    border: 1px solid #cfe0d9;
    border-radius: 10px;
    background-color: #eef4f1;
    color: #173f33;
    font-family: OpenSansSemiBold, OpenSans, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    opacity: 0;
    z-index: 1200; /* выше .siteHeaderBar (1100), иначе тост не виден */
    pointer-events: none;
}

.successAddBasket.cabinetToast--info {
    border-color: #bce8f1;
    background-color: #d9edf7;
    color: #31708f;
}

.successAddBasket.cabinetToast--warning {
    border-color: #faebcc;
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.successAddBasket.cabinetToast--error {
    border-color: #ebccd1;
    background-color: #f2dede;
    color: #a94442;
}

.basketSumItem {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    text-align: right;
}

.priceBasketItem {
    font-family: OpenSansSemiBold;
    font-size: 22px;
    float: left;
}

.delBasketItem {
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    background: url("/tools/images/btn_del.png") center center / contain no-repeat;
    background-color: transparent;
    float: right;
}

.delBasketItem:hover {
    opacity: 0.7;
    cursor: pointer;
}

.smartTextItems {
    display: none;
}

.footerLangPanel {
    color: #909090;
}

.footerLangPanel a.active {
    text-decoration: underline;
}

.footerLangPanel a.active:hover {
    text-decoration: underline;
}

.nameAvailableSize {
    font-size: 21px;
    font-family: OpenSansSemiBold;
}

.availableSizeImage {
    width: 100%;
    max-width: 360px;
    margin-bottom: 20px;
}

.availableSizeImage:hover {
    cursor: pointer;
}

.qualityImage {
    width: 100%;
    min-height: 300px;
    border: 1px solid #d4d4d4;
    margin-bottom: 30px;
}

.qualityPdf {
    background: url("/tools/images/qualityPdfImage.png") center center no-repeat;
}

.qualityIsNotPdf {
    background: url("/tools/images/qualityIsNotPdfImage.png") center center no-repeat;
}

.quality300 {
    background: url("/tools/images/qualityImage300.png") center center no-repeat;
}

.quality96 {
    background: url("/tools/images/qualityImage96.png") center center no-repeat;
}

.titleFormat {
    font-size: 28px;
    color: #1f5a48;
}

.titleFormatDesc {
    font-size: 18px;
    margin-bottom: 40px;
}

.titleFormatImage {
    font-family: OpenSansSemiBold;
    font-size: 16px;
    margin-bottom: 10px;
}

.icoControl {
    margin-right: 20px;
}

.icoControl:hover {
    opacity: 0.8;
    cursor: pointer;
}

.catDesignItems {
    display: inline-block;
}

.catDesignItems label {
    font-size: 16px;
    font-weight: normal;
    padding: 0 0 0 10px;
    margin: 0;
}

.catDesignItems label:hover {
    color: #1f5a48;
    cursor: pointer;
    text-decoration: underline;
}

.isDesign {
    position: absolute;
    background-color: #1f5a48;
    padding: 5px 20px;
    font-size: 14px;
    color: #fff;
    top: 60px;
    right: 15px;
    z-index: 5;
}

.categoryItems {
    width: 100%;
}

.categoryItem {
    position: relative;
    padding: 0 0 5px 30px;
    font-size: 16px;
}

.categoryItem:hover {
    cursor: pointer;
}

.checkboxItem {
    width: 22px;
    height: 22px;
    border: 2px solid #909090;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 1px;
}

.activeCheckbox {
    border: 2px solid #000 !important;
}

.activeCheckbox::before {
    content: '';
    position: absolute;
    border-right: 4px solid #1f5a48;
    border-bottom: 4px solid #1f5a48;
    width: 8px;
    height: 15px;
    top: 0;
    left: 5px;
    transform: rotate(45deg);
}

.previewCover {
    width: 150px;
    height: 181px;
    background: center center / contain no-repeat #e2e2e2;
    border: 1px solid #fcfcfc;
}

.design {
    position: relative;
}

.coverDesign {
    background: center center / 130% no-repeat #e2e2e2;
    transform: scale(1);
    transition: all 0.3s;
    overflow: hidden;
}

.coverDesign img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.coverDesign:hover {
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.3s;
}

.nameDesign {
    width: 100%;
    font-size: 16px;
    font-family: OpenSansSemiBold;
    color: #000;
    padding: 5px 0 0 0;
    /* Long titles must not expand the card width */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.containerDesign {
    min-height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.section--product .pageIntro--accent {
    margin-bottom: 0;
}

.product-page__article {
    margin-top: 32px;
    margin-bottom: 36px;
}

.product-cards {
    margin-top: 32px;
}

/* Базовый отступ блока с шаблонами. Раньше отступ задавали ТОЛЬКО
   соседние селекторы ниже, и на нишевых страницах конструктора
   (/designer/vizitki-*), где перед блоком стоит .box карточки продукции,
   не срабатывал ни один — заголовок «Готовые шаблоны для этой ниши»
   прилипал к предыдущему блоку вплотную. Сбросы ниже остаются главнее по
   специфичности (селектор с комбинатором), поэтому страницы, где отступ
   уже давал сосед, не меняются. */
.product-templates {
    margin-top: 40px;
}

.product-page__article + .product-templates,
.product-cards + .product-page__article + .product-templates {
    margin-top: 0;
}

.pageIntro--accent + .product-page__article,
.pageIntro--accent + .product-templates {
    margin-top: 32px;
}

.product-cards + .product-page__article {
    margin-top: 40px;
}

.product-templates .heading-line--page {
    margin-top: 0;
    margin-bottom: 12px;
}

.product-templates__empty {
    margin: 0 0 8px;
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    text-align: center;
    background: #f8f8f8;
    border: 1px dashed #d8d8d8;
    border-radius: 8px;
}

.product-page__cta {
    margin-top: 40px;
}

/* /designs/ — sidebar filters + grid */
/* Одна колонка: сайдбар с фильтрами заменён горизонтальной панелью
   (см. .templates-facets), и освободившиеся 230px ушли сетке —
   карточек в ряду стало четыре вместо трёх. */
.templates-layout {
    margin-top: 20px;
}

.templates-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.templates-filter {
    background: #f7f8f9;
    border: 1px solid #e6eaee;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.templates-filter__title {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #444;
    margin: 0;
    line-height: 1.3;
    background: none;
    border: 0;
    padding: 18px 20px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    min-height: 54px;
}

.templates-filter__title::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.templates-filter__title[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.templates-filter__title[aria-expanded="false"] {
    margin-bottom: 0;
}

.templates-filter .templates-filter__body {
    display: none;
}

.templates-filter .templates-filter__body.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 20px 20px;
}

.templates-filter .categoryItem {
    padding: 8px 0 8px 34px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.templates-filter .categoryItem:hover {
    background-color: rgba(31, 90, 72, 0.06);
}

.templates-filter .checkboxItem {
    top: 8px;
    left: 6px;
}

.templates-main {
    min-width: 0;
}

.templates-main .boxPaginator {
    position: static;
    width: 100%;
    text-align: center;
}

.templates-main .boxPaginator:has(.pagination) {
    min-height: 0;
    margin-top: 28px;
    margin-bottom: 0;
}

.templates-main .boxPaginator .paginator {
    position: static;
    display: inline-block;
    float: none;
}

.templates-main .boxPaginator .simple-pagination {
    display: inline-block;
}

#containerDesign > a {
    display: block;
    box-sizing: border-box;
}

/* Ширина карточек — та же, что ставит calcWidthDesign() (site.js), но с
   первого кадра: скрипт перестраивал сетку через ~1 с после загрузки, и
   карточки прыгали (CLS каталога 0.2–0.3 на десктопе, SEO-шлифовка
   2026-10-05). Скрипт остаётся — после выдачи фильтром. */
#containerDesign[data-column="3"] > a { width: calc(100% / 3 - 20px); margin: 0 10px 40px; }
#containerDesign[data-column="4"] > a { width: calc(25% - 20px); margin: 0 10px 40px; }
#containerDesign > a .design { width: 100%; margin: 0; }
#containerDesign > a .coverDesign { width: 100%; height: auto; aspect-ratio: 0.825; }
@media (max-width: 499px) {
    #containerDesign[data-column] > a { width: calc(50% - 10px); margin: 0 5px 20px; }
}

.hatFilter {
    font-family: OpenSansSemiBold;
    font-size: 16px;
    width: 100%;
    display: inline-block;
}

.video {
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}
.video iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.wrapper_counter {
    color: #fff;
}

.counter {
    font-size: 48px;
}

@media screen and (max-width: 1024px) {
    .mainInfo .info {
        font-size: 30px;
    }
}

@media screen and (max-width: 768px) {
    /* Без overflow-x у html/body: любое значение, кроме visible, делает
       body контейнером прокрутки (sticky-шапка уезжает) и не даёт
       overflow: hidden у body (.modal-open, is-menu-open, is-sheet-open)
       перейти на окно. Горизонталь режет .pageShell { overflow-x: clip }. */

    .topPanel {
        min-height: 0;
    }

    .mainInfo {
        display: block;
        padding: 10px 15px 24px;
    }

    .mainInfo .info {
        display: block;
        padding: 0 5px;
    }

    .divLogo {
        margin: 20px auto 30px auto;
    }
    .logo {
        width: 120px;
    }
    .smallLogo {
        width: 120px;
        border: 0;
    }
    .logoSlogan {
        font-size: 10px;
    }
    .mainMenu ul.parent>li {
        font-size: 14px;
    }
    .bread_crumbs {
        padding: 12px 0 9px 0;
    }
    .bread_crumbs li {
        font-size: 13px;
    }
    .cabinetCreateBar {
        margin: 12px 0 4px;
    }
    .cabinetCreateBar__btn {
        font-size: 13px;
        min-height: 32px;
        padding: 5px 12px;
    }
    .section {
        padding-top: var(--section-py-mobile, 50px);
        padding-bottom: var(--section-py-mobile, 50px);
    }
    .section.cabinetSection {
        padding-top: 30px;
    }
    .layoutCard__actions {
        gap: 6px;
    }
    .layoutCard__actions .layoutCard__action {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
        line-height: 1.2;
    }
    .section--band {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .pageIntro--accent {
        margin-bottom: 30px;
    }

    .pageIntro--compact.pageIntro--accent {
        margin-bottom: 24px;
    }

    .pageIntro__title {
        font-size: 28px;
    }

    .pageIntro h2.pageIntro__title {
        font-size: 24px;
    }

    .pageIntro__subtitle {
        font-size: 16px;
    }

    .section--product .pageIntro--accent {
        margin-bottom: 0;
    }

    .pageIntro--accent + .product-page__article,
    .pageIntro--accent + .product-templates {
        margin-top: 24px;
    }
    .product-page__article {
        margin-top: 20px;
        margin-bottom: 28px;
    }
    .product-cards {
        margin-top: 24px;
    }
    .product-cards + .product-page__article {
        margin-top: 32px;
    }
    .product-templates .heading-line--page {
        margin-bottom: 10px;
    }
    .templates-layout {
        margin-top: 16px;
    }
    .templates-sidebar {
        gap: 12px;
    }
    .templates-filter__title {
        padding: 16px;
        min-height: 50px;
    }

    .templates-filter .templates-filter__body.is-open {
        padding: 0 16px 16px;
    }
    .div_h1 {
        font-size: 28px;
    }
    .mainText {
        font-size: 14px;
    }
    .section--band-green .col-xs-12,
    .section--band-green .sharedText {
        font-size: 21px;
        padding: 0 12px;
    }
    .section--band-mint .col-xs-12,
    .section--band-mint .sharedText {
        font-size: 21px;
        padding: 0 12px;
        line-height: 1.35;
    }
    .titleFormat {
        font-size: 22px;
        padding: 0 10px;
    }
    .titleFormatDesc {
        font-size: 14px;
        margin-bottom: 24px;
        padding: 0 10px;
    }
    .titleFormatImage {
        font-size: 14px;
        padding: 0 10px;
    }
    .qualityImage {
        min-height: 220px;
        background-size: contain;
    }
    .section > .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .containerDesign {
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    .heading-line--page {
        font-size: 24px;
        padding: 0 0 10px 0;
    }
    .product-card {
        padding: 20px 0 0 0;
    }
    .product-card .productsIco {
        width: 80px;
        height: 51px;
    }
    .product-card .productsName {
        font-size: 18px;
        margin-top: 15px;
    }
    .product-card .productsDescription {
        font-size: 12px;
        margin-top: 15px;
    }
    .formatFileIco {
        width: 70px;
        height: 91px;
    }
    .formatFileDescription {
        font-size: 13px;
        margin: 10px 0 40px 0
    }
    .footer {
        padding: 20px 0;
    }
    .footer .hatBlockFooter {
        font-size: 20px;
        margin: 20px 0 5px 0;
    }
    .footer a {
        font-size: 16px;
    }
    .divSlogan {
        padding: 15px 0;
    }
    .divSlogan .arrow {
        width: 6px;
    }
    .slogan ul>li {
        padding: 0 12px;
        font-size: 18px;
    }
    .slogan ul>li.arrow::before {
        width: 10px;
        height: 10px;
        top: 9px;
        left: 6px;
    }
    .mainInfo .info {
        font-size: 24px;
    }
    .size16 {
        font-size: 14px;
    }
    .nameAvailableSize {
        font-size: 18px;
    }
    .boxSeparator {
        margin: 30px 0;
    }
    .copyright {
        margin: 20px 0 0 0;
        text-align: center;
    }
    .copyright .col-sm-6 {
        text-align: center !important;
        float: none;
        width: 100%;
        margin-bottom: 8px;
    }
    .copyright .text-right {
        text-align: center !important;
    }
    .divSmallLogo {
        text-align: center;
    }
    .nameDesign {
        font-size: 14px;
    }
}

@media screen and (max-width: 1199px) {
    .topPanelInner .col-xs-12:last-child {
        padding-bottom: 0 !important;
    }
}

@media screen and (max-width: 690px) {
    .hideMobile {
        display: none;
    }
    .mainInfo .info {
        font-size: 16px;
        line-height: 1.35;
    }
    .slogan ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 2px;
    }
    .slogan ul>li {
        float: none;
        padding: 0 7px;
        font-size: 14px;
    }
    .slogan ul>li.arrow::before {
        width: 8px;
        height: 8px;
        top: 7px;
        left: 2px;
    }
}

@media screen and (max-width: 500px) {
    .layoutCard__actions .layoutCard__action {
        min-height: 36px;
        padding: 7px 8px;
        font-size: 12px;
    }

    .layoutCard__actions .layoutCard__action--icon {
        width: 36px;
        padding: 0;
    }

    .nameDesign {
        font-size: 14px;
    }

    .section--band-green .col-xs-12,
    .section--band-green .sharedText,
    .section--band-mint .col-xs-12,
    .section--band-mint .sharedText {
        font-size: 18px;
    }

    .counter {
        font-size: 36px;
    }

    .wrapper_counter h3 {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------
   Счётчик выдачи и «Показать ещё» на /designs/ (серверная пагинация).
   Заменили номерной пагинатор (.paginatorDesign / simplePagination):
   тот на каждый клик очищал сетку и строил страницу заново из полного
   массива в памяти, а массив приезжал в HTML целиком. Теперь карточки
   дозагружаются в конец, уже показанные не трогаются.
   --------------------------------------------------------------------- */
.templates-count {
    margin-bottom: 14px;
    font-size: 14px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.templates-count b {
    font-family: OpenSansSemiBold, sans-serif;
    font-weight: 600;
    color: #323232;
}

.templates-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.templates-more[hidden] {
    display: none;
}

/* Номерные страницы подборки (?page=N) — под «Показать ещё», тихо:
   основной путь человека — докрутка, эти ссылки нужнее краулеру. */
.designsPager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 14px;
}

.designsPager__item,
.designsPager__step {
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid #e3e8e5;
    border-radius: 6px;
    color: #333;
    text-align: center;
    text-decoration: none;
}

.designsPager__item:hover,
.designsPager__step:hover {
    border-color: var(--color-brand, #1f5a48);
    color: var(--color-brand, #1f5a48);
}

.designsPager__item.is-current {
    border-color: var(--color-brand, #1f5a48);
    background: var(--color-brand, #1f5a48);
    color: #fff;
}

.designsPager__gap {
    color: #999;
}

.templates-more button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------------------------------------------------------------------
   Переключатель продукции и блок перелинковки на /designs/.
   Продукция — ссылки, а не чекбоксы: это уровень пути
   (/designs/vizitki/), см. докблок App\Design\DesignCatalogPages.
   --------------------------------------------------------------------- */
.templates-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 4px;
}

.templates-products a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #e7dfcf;
    border-radius: 999px;
    background: #fff;
    color: #4c5a52;
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.templates-products a:hover {
    border-color: #d8ccb4;
    color: #2a2320;
}

.templates-products a[aria-current="page"] {
    background: #f7f2e8;
    border-color: #1f5a48;
    color: #173f33;
    font-family: OpenSansSemiBold, sans-serif;
    font-weight: 600;
}

.templates-related {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e7dfcf;
}

.templates-related h2 {
    margin: 0 0 12px;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #323232;
}

.templates-related__list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.templates-related__list a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #e7dfcf;
    border-radius: 999px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
}

.templates-related__list a:hover {
    border-color: #1f5a48;
    color: #173f33;
}

/* Пара кнопок под размером на лендинге конструктора: «создать с нуля» и
   «выбрать шаблон». В ряд, пока помещаются, и в столбец на телефоне —
   две кнопки по 200px (btn--wide) в 400px экран не встают. */
.designerActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

@media (max-width: 480px) {
    .designerActions {
        flex-direction: column;
        align-items: stretch;
    }

    /* min-width от btn--wide в колонке распирал бы контейнер. */
    .designerActions .button {
        min-width: 0;
    }
}

/* Ссылка с лендинга на полную подборку каталога. Лендинг показывает
   выборку (12 у /products/*, 8 у нишевых /designer/*), полный список
   живёт на своей странице /designs/{продукция}/{категория}/. */
.product-templates__all {
    margin: 18px 0 0;
    text-align: center;
    font-size: 15px;
}

.product-templates__all a {
    color: #173f33;
    border-bottom: 1px solid rgba(31, 90, 72, 0.35);
    text-decoration: none;
}

.product-templates__all a:hover {
    border-bottom-color: #1f5a48;
}

/* =====================================================================
   ФИЛЬТРЫ КАТАЛОГА: горизонтальная панель чипов.
   Пришли на смену левому сайдбару с тремя аккордеонами. Сайдбар
   забирал 230px постоянной ширины ради списка, в который заглядывают
   один раз, и оставлял сетке три колонки; аккордеоны вдобавок были
   свёрнуты по умолчанию, то есть на входе не было видно ни одного
   фильтра. На мобильном он просто вставал НАД сеткой, и его надо было
   проскроллить, прежде чем увидеть первый шаблон.
   ===================================================================== */
.templates-toolbar {
    margin: 18px 0 4px;
}

/* Поиск и фасеты в один ряд. Раздельными рядами они занимали три
   полосы экрана под управление там, где хватает одной, и отодвигали
   первую карточку вниз. */
.templates-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.templates-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.facet {
    position: relative;
}

.facet__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #e7dfcf;
    border-radius: 999px;
    background: #fff;
    color: #4c5a52;
    font-size: 14px;
    cursor: pointer;
}

.facet__btn:hover {
    border-color: #d8ccb4;
    color: #2a2320;
}

.facet__btn[aria-expanded="true"] {
    border-color: #1f5a48;
    color: #2a2320;
}

.facet__btn.is-active {
    background: #f7f2e8;
    border-color: #1f5a48;
    color: #173f33;
    font-family: OpenSansSemiBold, sans-serif;
    font-weight: 600;
}

.facet__badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1f5a48;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.facet__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
}

.facet__pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    min-width: 250px;
    max-width: min(340px, 90vw);
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e7dfcf;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 29, 25, 0.06), 0 10px 28px -14px rgba(23, 29, 25, 0.3);
}

.facet__pop[hidden] {
    display: none;
}

.facet__opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #4c5a52;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.facet__opt:hover {
    background: #f6f1e7;
    color: #2a2320;
}

.facet__box {
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #d8ccb4;
    border-radius: 4px;
    background: #fff;
    position: relative;
}

.facet__opt[aria-checked="true"] .facet__box {
    background: #1f5a48;
    border-color: #1f5a48;
}

.facet__opt[aria-checked="true"] .facet__box::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.facet__opt[aria-checked="true"] {
    color: #2a2320;
    font-family: OpenSansSemiBold, sans-serif;
    font-weight: 600;
}

/* Категория, заданная путём: показываем отмеченной, но не кликаемой —
   это сама страница, а не фильтр поверх неё. */
.facet__opt.is-pinned {
    cursor: default;
    opacity: 0.75;
}

.facet__label {
    flex: 1 1 auto;
}

.facet__n {
    flex: none;
    color: #909090;
    font-size: 12px;
    font-family: OpenSansRegular, sans-serif;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* --- активные фильтры --- */
.templates-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.templates-active:empty {
    display: none;
}

.templates-active__label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #909090;
    font-family: OpenSansSemiBold, sans-serif;
}

.tagFilter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border: 1px solid #d8ccb4;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: #323232;
}

.tagFilter--pinned {
    padding-right: 12px;
    background: #f7f2e8;
    border-color: #1f5a48;
    color: #173f33;
}

.tagFilter__remove {
    border: 0;
    background: none;
    color: #909090;
    padding: 2px 5px;
    border-radius: 50%;
    line-height: 1;
    cursor: pointer;
}

.tagFilter__remove:hover {
    background: #f6f1e7;
    color: #c0392b;
}

.templates-active__reset {
    border: 0;
    background: none;
    color: #173f33;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 4px;
}

/* --- мобильная кнопка и нижний лист --- */
.templates-mobile-filters {
    display: none;
}

.filterSheet[hidden] {
    display: none;
}

.filterSheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

.filterSheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 12, 0.5);
}

.filterSheet__panel {
    position: relative;
    margin-top: auto;
    max-height: 86%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.filterSheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e7dfcf;
}

.filterSheet__title {
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 16px;
}

.filterSheet__close {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #909090;
    cursor: pointer;
    padding: 0 6px;
}

.filterSheet__body {
    overflow-y: auto;
    padding: 4px 10px 12px;
}

.filterSheet__group {
    padding: 10px 6px;
    border-bottom: 1px solid #e7dfcf;
}

.filterSheet__group:last-child {
    border-bottom: 0;
}

.filterSheet__group h3 {
    margin: 0 0 6px;
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #909090;
    font-family: OpenSansSemiBold, sans-serif;
}

.filterSheet__foot {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e7dfcf;
}

.filterSheet__reset {
    border: 1px solid #d8ccb4;
    border-radius: 9px;
    background: none;
    color: #4c5a52;
    padding: 12px 16px;
    cursor: pointer;
}

.filterSheet__apply {
    flex: 1;
}

body.is-sheet-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    /* На узком экране дропдауны заменяет нижний лист: раскрытый список
       на 19 пунктов поверх сетки читается хуже, чем полноэкранный. */
    .templates-facets {
        display: none;
    }

    .templates-search {
        flex: 1 1 100%;
    }

    .templates-mobile-filters {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 11px 14px;
        border: 1px solid #d8ccb4;
        border-radius: 9px;
        background: #fff;
        font-family: OpenSansSemiBold, sans-serif;
        font-size: 14px;
        color: #323232;
        cursor: pointer;
    }

    .templates-mobile-filters.is-active {
        border-color: #1f5a48;
        background: #f7f2e8;
        color: #173f33;
    }
}

/* Поиск по каталогу. Появился вместе с products.search_text: до него
   искать было нечем — имена шаблонов это бренд-неймы с самого макета
   («Студия Локон»), а ищут профессию («парикмахер»). */
.templates-search {
    position: relative;
    /* Не растягивается на всю строку: место нужно фасетам справа, а
       поисковому запросу вроде «стоматолог» 320px с запасом хватает. */
    flex: 0 1 320px;
    min-width: 220px;
}

/* Лупа: без неё поле читается как обычный ввод, и то, что это поиск,
   приходится угадывать по плейсхолдеру. */
.templates-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #909090;
    pointer-events: none;
}

.templates-search__input {
    width: 100%;
    padding: 9px 32px 9px 36px;
    border: 1px solid #e7dfcf;
    border-radius: 999px;
    font-size: 14px;
    color: #323232;
    background: #fff;
}

.templates-search__input:focus + .templates-search__clear,
.templates-search__input:focus ~ .templates-search__icon {
    color: #173f33;
}

.templates-search__input::placeholder {
    color: #909090;
}

.templates-search__input:focus {
    outline: none;
    border-color: #1f5a48;
    box-shadow: 0 0 0 3px rgba(31, 90, 72, 0.12);
}

.templates-search__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #909090;
    font-size: 20px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 6px;
    cursor: pointer;
}

.templates-search__clear[hidden] {
    display: none;
}

.templates-search__clear:hover {
    background: #f6f1e7;
    color: #323232;
}

/* Образцы цвета в фасете: словом «терракотовый» цвет не выберешь. */
.facet__swatch {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.facet__swatch--mono { background: linear-gradient(135deg, #fff 0 50%, #222 50% 100%); }
.facet__swatch--blue { background: #0072bc; }
.facet__swatch--teal { background: #009998; }
.facet__swatch--green { background: #00ab4e; }
.facet__swatch--yellow { background: #ffd400; }
.facet__swatch--red { background: #b8171c; }
.facet__swatch--pink { background: #ea368e; }
.facet__swatch--violet { background: #743c97; }
.facet__swatch--brown { background: #a57242; }
.facet__swatch--graphite { background: #465366; }
.facet__swatch--terracotta { background: #e56e5a; }

/* «Ещё в этой категории» в быстром просмотре. Следующий шаг после
   «этот не подошёл» — посмотреть соседний, не закрывая окно. */
.designSizeDialog__similar[hidden] {
    display: none;
}

.designSizeDialog__similar {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e7dfcf;
}

.designSizeDialog__similarTitle {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #909090;
    font-family: OpenSansSemiBold, sans-serif;
}

/* Одна строка-карусель вместо сетки: два ряда возвращали ту высоту,
   ради которой размеры уезжали вправо. Листается целыми страницами
   (три видно — клик — три новых), стрелки в заголовке блока.

   --similar-per-view — единственный источник правды о числе видимых
   плиток: от него считается и ширина плитки здесь, и шаг прокрутки в
   site.js (similarPerView). Зашивать «3» в скрипт нельзя — на
   телефоне в ряд влезает две. */
.designSizeDialog__similarHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.designSizeDialog__similarNavGroup {
    display: none;
    gap: 6px;
}

.designSizeDialog__similarHead.has-nav .designSizeDialog__similarNavGroup {
    display: flex;
}

/* 36px и заметный контур: при 28px и светло-сером контуре кнопки
   терялись на белом фоне попапа — глазу не за что было зацепиться. */
.designSizeDialog__similarNav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid #c3cdc7;
    border-radius: 50%;
    background: #f7f9f8;
    color: #2f3b36;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.designSizeDialog__similarNav:hover:not(:disabled),
.designSizeDialog__similarNav:focus-visible:not(:disabled) {
    border-color: #1f5a48;
    background: #fff;
    color: #1f5a48;
}

.designSizeDialog__similarNav:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Квадрат с двумя границами, повёрнутый на 45° — геометрическая
   галочка, которая центрируется сама, в отличие от символа «‹». */
.designSizeDialog__similarChevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.designSizeDialog__similarNav--prev .designSizeDialog__similarChevron {
    transform: rotate(135deg);
    margin-left: 3px;
}

.designSizeDialog__similarNav--next .designSizeDialog__similarChevron {
    transform: rotate(-45deg);
    margin-right: 3px;
}

.designSizeDialog__similarViewport {
    overflow: hidden;
}

.designSizeDialog__similarList {
    --similar-per-view: 3;
    --similar-gap: 14px;
    display: flex;
    gap: var(--similar-gap);
    transition: transform 0.25s ease;
}

/* Плитка занимает ровно 1/N видимой ширины с учётом зазоров — тогда
   сдвиг на 100% ширины области даёт ровно следующую страницу. */
.designSizeDialog__similarList > * {
    flex: 0 0 calc(
        (100% - (var(--similar-per-view) - 1) * var(--similar-gap)) / var(--similar-per-view)
    );
}

/* Кнопка, а не ссылка: клик подгружает шаблон в это же превью, а не
   уносит в конструктор. Уйти в редактор можно только осознанно —
   кнопкой «Выбрать» внизу, уже выбрав размер. */
.designSizeDialog__similarItem {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e7dfcf;
    border-radius: 8px;
    background: #f7f9f8;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
}

.designSizeDialog__similarItem:hover,
.designSizeDialog__similarItem:focus-visible {
    border-color: #1f5a48;
}

.designSizeDialog__similarItem.is-current {
    border-color: #1f5a48;
    background: #f7f2e8;
    cursor: default;
}

.designSizeDialog__similarItem img {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.designSizeDialog__similarName {
    font-size: 12.5px;
    line-height: 1.25;
    color: #6b7280;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 767px) {
    /* На телефоне два столбца в ряд возвращаются друг под друга: 260px
       под размеры рядом с превью там просто нет.

       display:contents у левой колонки нужен, чтобы её содержимое стало
       прямыми детьми ряда — иначе кнопка, вложенная в .__main, не может
       быть переставлена ПОСЛЕ размеров. А переставить надо: на узком
       экране «Выбрать» над плитками означало бы «нажми, не выбрав». */
    .designSizeDialog__top {
        display: flex;
        flex-direction: column;
        gap: 16px;
        /* Обязательно сбросить: на десктопе тут grid с `align-items: start`,
           и там это выравнивание ПО ВЕРТИКАЛИ. В колоночном флексе та же
           строчка означает поперечную ось, то есть ГОРИЗОНТАЛЬ, и каждый
           элемент сжимается по содержимому. Слот превью при этом получал
           нулевую ширину, а `.preview-card` считает свою ширину как
           `min(100%, ...)` от родителя — 100% от нуля даёт нуль, и превью
           пропадало целиком, хотя картинка уже была загружена. */
        align-items: stretch;
    }

    .designSizeDialog__main {
        display: contents;
    }

    .designSizeDialog__previewSlot {
        order: 1;
    }

    .designSizeDialog__top .designSizeOptions {
        order: 2;
    }

    .designSizeDialog__cta {
        order: 3;
    }

    .designSizeDialog__top .designSizeOptions {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    /* На телефоне в ряд помещается две — и ровно по две карусель и
       листает: шаг берётся из этой же переменной. */
    .designSizeDialog__similarList {
        --similar-per-view: 2;
        --similar-gap: 10px;
    }

    /* 110px вместо прежних 62px: те 62 были подобраны под три колонки по
       96px, а колонок теперь две и плитка вдвое шире — низкая картинка в
       ней смотрелась бы полоской. */
    .designSizeDialog__similarItem img {
        height: 110px;
    }
}

/* ---------------------------------------------------------------------
   ВЫСОТА ПРЕВЬЮ-БОКСА В СЕТКАХ ШАБЛОНОВ: 200 -> 260px.
   Базовые 200px оставлены как есть — на них завязан личный кабинет
   (.layoutGrid), где карточка решает другую задачу и её трогать незачем.

   Почему высота, а не только колонки: сторона считается как
   min(58cqw, 68cqh × пропорции), и у ВЕРТИКАЛЬНЫХ макетов ведущая ось —
   высота. Они упираются в 68% от высоты бокса и на ширину колонки не
   смотрят вовсе, а вертикальных в каталоге половина. Переключение
   /designs/ на три колонки без этой правки увеличило бы только
   горизонтальные.

   Цена известна и принята: при трёх колонках горизонтальная сторона
   выходит на ~204 CSS px, то есть 408 px на retina, тогда как обложка
   генерируется в потолке 96 dpi — 340 px для визитки (см.
   DesignCoverGenerator::COVER_DPI, ограничение против пиратства,
   поднять нельзя). Горизонтальные макеты будут мягче примерно на 20%.
   --------------------------------------------------------------------- */
.containerDesign .layoutCard__preview,
.containerDesign .layoutCard__preview.preview_img_click {
    height: 260px;
}

@media (max-width: 500px) {
    /* На узком экране calcWidthDesign() переключается на две колонки, и
       карточка становится ~175px шириной. Бокс в 260px при такой ширине
       читается как высокая пустая полоса, поэтому там остаются 200px. */
    .containerDesign .layoutCard__preview,
    .containerDesign .layoutCard__preview.preview_img_click {
        height: 200px;
    }
}

/* ------------------------------------------------------------------
   Страница шаблона /designs/{продукция}/{категория}/{слаг}/
   (docs/template-pages-plan.md). Та же карусель, что в попапе быстрого
   просмотра, только крупнее; формат — кнопки в стиле .designSizeOption.
   ------------------------------------------------------------------ */
.templatePageView { padding-top: 12px; padding-bottom: 48px; }
.templatePageView__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.templatePageView__preview { position: relative; }
.preview_3D.templatePageView__carousel { width: 100%; max-width: 720px; }
.templatePageView__carousel .preview-card,
.templatePageView__carousel .preview-loading {
    /* Крупные превью (app:designs:large-previews) — 96 dpi от размера
       макета, А4 около 813 px: окно выше попапного, чтобы вертикальный
       А4 не сжимался до 400 px. */
    --preview-max-w: min(100%, 720px, var(--preview-native-max-w, 720px));
    --preview-max-h: min(760px, 80vh, var(--preview-native-max-h, 760px));
}
.templatePageView__seed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.templatePageView__title { font-family: OpenSansSemiBold, sans-serif; font-size: 28px; line-height: 1.25; margin: 0 0 6px; text-wrap: balance; }
.templatePageView__kind { color: #777; font-size: 14px; margin: 0 0 20px; }
.templatePageView__formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 20px; }
.templatePageView__format {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left;
    border: 1.5px solid #e6eaee; border-radius: 10px; background: #fff; cursor: pointer;
    font-family: OpenSansSemiBold, sans-serif; font-size: 14px; color: #000;
}
.templatePageView__format small { font-family: OpenSansRegular, sans-serif; font-size: 12px; color: #777; }
.templatePageView__format:hover,
.templatePageView__format:focus-visible { border-color: #1f5a48; background-color: rgba(31, 90, 72, 0.06); outline: none; }
.templatePageView__format.is-active { border-color: #1f5a48; background-color: rgba(31, 90, 72, 0.08); box-shadow: 0 0 0 1px #1f5a48 inset; }
.templatePageView__buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; }
.templatePageView__price { display: flex; flex-direction: column; font-size: 13px; color: #777; }
.templatePageView__price strong { font-family: OpenSansSemiBold, sans-serif; font-size: 24px; color: #000; }
.templatePageView__note { font-size: 13px; color: #777; margin: 10px 0 18px; }
.templatePageView__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.templatePageView__chips li { font-size: 13px; padding: 5px 10px; border-radius: 999px; background: #f3f5f6; color: #333; }
.templatePageView__text,
.templatePageView__steps,
.templatePageView__similar { margin-top: 40px; max-width: 760px; }
.templatePageView__similar { max-width: none; }
.templatePageView__text h2,
.templatePageView__steps h2,
.templatePageView__similar h2 { font-family: OpenSansSemiBold, sans-serif; font-size: 20px; margin: 0 0 12px; }
.templatePageView__text p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.templatePageView__steps ol { padding-left: 20px; margin: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.templatePageView__similarGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.templatePageView__similarItem { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: #000; font-size: 14px; }
.templatePageView__similarItem img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #f3f5f6; border-radius: 8px; padding: 8px; }
.templatePageView__similarItem:hover span { color: #1f5a48; }
.templatePageView__more { margin-top: 16px; font-size: 14px; }
.templatePageView__more a { color: #1f5a48; }
@media (max-width: 767px) {
    .templatePageView__top { grid-template-columns: 1fr; gap: 24px; }
    .templatePageView__title { font-size: 22px; }
    .templatePageView__buy { flex-wrap: wrap; }
}

/* Кабинет: карточка проекта «Моя свадьба» над «Мои макеты» (аудит 2026-09-26). */
.cabinetWeddings {
    display: grid;
    gap: 12px;
    margin: 8px 0 28px;
}

.cabinetWedding {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid #e2efe6;
    border-radius: 12px;
    background: #f8fbf9;
}

.cabinetWedding__body {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cabinetWedding__eyebrow {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-brand, #1f5a48);
}

.cabinetWedding__title {
    margin: 0;
    font-family: OpenSansSemiBold, sans-serif;
    font-size: 20px;
    line-height: 1.3;
}

.cabinetWedding__title a {
    color: #222;
    text-decoration: none;
}

.cabinetWedding__title a:hover {
    color: var(--color-brand, #1f5a48);
}

.cabinetWedding__meta,
.cabinetWedding__status {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

.cabinetWedding__status {
    color: #333;
}

.cabinetWedding__action {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .cabinetWedding {
        padding: 16px;
    }

    .cabinetWedding__action {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Архив свадеб — одна свёрнутая строка под активной (решение владельца 2026-10-01). */
.cabinetArchive {
    margin: -8px 0 24px;
    font-size: 14px;
}

.cabinetArchive__summary {
    display: inline-block;
    cursor: pointer;
    color: #666;
    font-family: OpenSansSemiBold, sans-serif;
}

.cabinetArchive__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #ececec;
}

.cabinetArchive__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
}

.cabinetArchive__title {
    font-family: OpenSansSemiBold, sans-serif;
}

.cabinetArchive__status {
    color: #888;
}

.cabinetArchive__actions {
    display: flex;
    gap: 14px;
    margin-left: auto;
}

/* «Мои макеты» с активной свадьбой — одна тихая строка в раздел «Моя свадьба» (решение владельца 2026-10-01). */
.cabinetWeddingHint {
    margin: 0 0 12px;
    font-size: 14px;
}

.cabinetWeddingHint a {
    color: #666;
}

.cabinetWeddingHint a:hover,
.cabinetWeddingHint a:focus {
    color: inherit;
}

.cabinetWedding--archived {
    border-color: #ececec;
    background: #fafafa;
}

.cabinetWedding__more {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 4px 0 0;
}

.cabinetWedding__link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: #777;
    text-decoration: underline;
    text-decoration-color: transparent;
    cursor: pointer;
}

.cabinetWedding__link:hover,
.cabinetWedding__link:focus-visible {
    color: #333;
    text-decoration-color: currentColor;
}

/* Просмотр макета: «Копия» — форма POST внутри .sketchActions. */
.sketchActions__form {
    margin: 0;
}

/* Просмотр макета: срок правок оплаченного макета под кнопками. */
.sketchActions__note {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #777;
}

/* Просмотр макета: точки «Лицевая/Оборотная» — зона нажатия 44×44 px
   (прозрачная), видимая точка прежняя 10 px; отрицательный margin по
   вертикали, чтобы строка .preview-meta не выросла. */
.sketchDownload .preview-dots {
    gap: 0;
}

.sketchDownload .preview-dot,
.sketchDownload .preview-dot.is-active {
    position: relative;
    width: 44px;
    height: 44px;
    margin: -17px 0;
    background: transparent;
    transform: none;
}

.sketchDownload .preview-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.sketchDownload .preview-dot.is-active::before {
    background: #1f5a48;
    transform: translate(-50%, -50%) scale(1.15);
}

.sketchDownload .preview-dot:focus-visible {
    outline: 2px solid #1f5a48;
    outline-offset: -8px;
}

/* /registration/: согласие с условиями под кнопкой (как в мастере, шаг 3). */
.authForm__terms {
    margin: -6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #777;
    text-align: center;
}

/* Статья: кто и когда, оговорка, вопросы (аудит статей 2026-10-04). Таблицы — выше. */
.articleByline { margin: -8px 0 20px; font-size: 13px; color: var(--color-muted, #909090); }
.articleDisclaimer { margin-top: 24px; padding: 12px 14px; border-radius: 8px; background: #f6f5f2; font-size: 14px; color: var(--color-muted, #707070); }
.articlePage .mainText .templates-seo__faq dt { margin: 18px 0 4px; font-weight: 600; }
.articlePage .mainText .templates-seo__faq dd { margin: 0; }