/*
 * Посадочная shop.yarkamp-ai.ru.
 *
 * Подключается ПОСЛЕ бандла магазина, поэтому перебивает его без !important.
 * Из темы магазина берём только шрифт (Inter Tight) и фирменный цвет
 * (--bulma-link = hsl(215,70%,32%)) — если магазин сменит тему, посадка поедет
 * вместе с ним, а не останется чужой по цвету. Фолбэки нужны на случай, если
 * бандл не загрузился: страница живёт с рекламы, и «поехавший» первый экран
 * дороже лишних четырёх строк.
 */

:root {
    --y-brand: hsl(var(--bulma-link-h, 215deg), var(--bulma-link-s, 70%), var(--bulma-link-l, 32%));
    --y-brand-dark: hsl(var(--bulma-link-h, 215deg), var(--bulma-link-s, 70%), 26%);
    --y-ink: #15243c;
    --y-muted: #64748b;
    --y-line: #e2e8f0;
    --y-tint: #f4f7fb;
    --y-ok: #1f8f4e;
    --y-radius: 12px;
}

.ylp {
    margin: 0;
    font-family: "Inter Tight", "Arial", sans-serif;
    color: var(--y-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.ylp *,
.ylp *::before,
.ylp *::after {
    box-sizing: border-box;
}

.ylp-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ylp h1,
.ylp h2 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.ylp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--y-radius);
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ylp-btn--main {
    width: 100%;
    background: var(--y-brand);
    color: #fff;
    padding: 16px 26px;
    font-size: 17px;
}

.ylp-btn--main:hover {
    background: var(--y-brand-dark);
}

.ylp-btn--main[disabled] {
    opacity: 0.6;
    cursor: default;
}

.ylp-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    padding: 11px 20px;
    font-size: 15px;
}

.ylp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.ylp-top {
    background: var(--y-brand);
    color: #fff;
    padding: 14px 0;
}

.ylp-top__in {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ylp-top__logo img {
    display: block;
    height: 38px;
    width: auto;
    /* Логотип магазина — тёмный, на синей шапке его не видно. */
    filter: brightness(0) invert(1);
}

.ylp-top__contacts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.ylp-top__city {
    opacity: 0.85;
}

.ylp-top__phone {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* ── Первый экран ───────────────────────────────────────────────────────── */
.ylp-hero {
    position: relative;
    background: var(--y-brand-dark);
    color: #fff;
    padding: 54px 0 60px;
    overflow: hidden;
    isolation: isolate;
}

/* Фото фона отдельным <img>, а не background-image — ради приоритетной
   загрузки (fetchpriority) и корректного object-fit на любой пропорции. */
.ylp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    z-index: -2;
}

/* Затемнение поверх фото: без него белый текст на светлом небе не читается,
   а форма справа теряет края. Градиент плотнее слева, где лежит текст. */
.ylp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            hsla(var(--bulma-link-h, 215deg), var(--bulma-link-s, 70%), 20%, 0.92) 0%,
            hsla(var(--bulma-link-h, 215deg), var(--bulma-link-s, 70%), 22%, 0.8) 42%,
            hsla(var(--bulma-link-h, 215deg), var(--bulma-link-s, 70%), 18%, 0.55) 100%);
}

.ylp-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 420px);
    gap: 48px;
    align-items: start;
}

.ylp-hero h1 {
    font-size: 42px;
    font-weight: 700;
    max-width: 16em;
}

.ylp-hero__lead {
    margin: 18px 0 22px;
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.92;
    max-width: 34em;
}

.ylp-hero__bul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.ylp-hero__bul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15.5px;
    line-height: 1.45;
}

.ylp-hero__bul i {
    margin-top: 3px;
    color: #8fd6a6;
}

.ylp-hero__phones {
    margin-top: 26px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ylp-hero__phones a {
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ylp-hero__phones span {
    font-size: 13.5px;
    opacity: 0.8;
}

/* ── Форма ──────────────────────────────────────────────────────────────── */
.ylp-form {
    background: #fff;
    color: var(--y-ink);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(10, 30, 65, 0.22);
    overflow: hidden;
}

.ylp-form__head {
    padding: 18px 24px;
    background: var(--y-tint);
    border-bottom: 1px solid var(--y-line);
}

.ylp-form__head b {
    display: block;
    font-size: 17px;
}

.ylp-form__head span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--y-muted);
}

.ylp-form__body {
    padding: 20px 24px 24px;
    display: grid;
    gap: 13px;
}

.ylp-field {
    display: block;
}

.ylp-field > span {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--y-muted);
}

.ylp-field i {
    color: #d0342c;
    font-style: normal;
}

.ylp-field input,
.ylp-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--y-line);
    border-radius: 9px;
    font: inherit;
    font-size: 15.5px;
    color: var(--y-ink);
    background: #fff;
    resize: vertical;
}

.ylp-field input:focus,
.ylp-field textarea:focus {
    outline: none;
    border-color: var(--y-brand);
    box-shadow: 0 0 0 3px hsla(var(--bulma-link-h, 215deg), var(--bulma-link-s, 70%), var(--bulma-link-l, 32%), 0.12);
}

.ylp-field--bad input,
.ylp-field--bad textarea {
    border-color: #d0342c;
    background: #fff7f7;
}

/* Файл: настоящий input прячем, кликом управляет вся плашка. */
.ylp-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed #b8c6da;
    border-radius: 9px;
    font-size: 14px;
    color: var(--y-muted);
    cursor: pointer;
    background: #fbfdff;
}

.ylp-file:hover {
    border-color: var(--y-brand);
    color: var(--y-ink);
}

.ylp-file input[type="file"] {
    display: none;
}

.ylp-file--set {
    border-style: solid;
    border-color: var(--y-ok);
    color: var(--y-ink);
    background: #f3fbf6;
}

/* Ловушка для ботов. Не display:none — часть ботов такие поля игнорирует. */
.ylp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ylp-check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--y-muted);
    cursor: pointer;
}

.ylp-check input {
    margin-top: 2px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--y-brand);
}

.ylp-check a {
    color: var(--y-brand);
}

.ylp-check--bad span {
    color: #d0342c;
}

.ylp-form__msg {
    padding: 11px 13px;
    border-radius: 9px;
    background: #fff3f3;
    color: #a3231c;
    font-size: 13.5px;
}

.ylp-form__done {
    padding: 42px 26px;
    text-align: center;
    display: grid;
    gap: 8px;
    justify-items: center;
}

/* Своё display перебивает браузерное [hidden]{display:none} — без этой строки
   экран «Заявка принята» видно сразу при загрузке. */
.ylp-form__done[hidden],
.ylp-form__msg[hidden] {
    display: none;
}

.ylp-form__done i {
    font-size: 42px;
    color: var(--y-ok);
}

.ylp-form__done b {
    font-size: 20px;
}

.ylp-form__done span {
    font-size: 14px;
    color: var(--y-muted);
    max-width: 26em;
}

.ylp-form__done a {
    color: var(--y-brand);
    white-space: nowrap;
    font-weight: 600;
}

/* ── Цифры ──────────────────────────────────────────────────────────────── */
.ylp-facts {
    border-bottom: 1px solid var(--y-line);
    background: #fff;
}

.ylp-facts__in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.ylp-fact b {
    display: block;
    font-size: 27px;
    font-weight: 700;
    color: var(--y-brand);
    line-height: 1.1;
}

.ylp-fact span {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--y-muted);
}

/* ── Секции ─────────────────────────────────────────────────────────────── */
.ylp-sec {
    padding: 56px 0;
}

.ylp-sec--tint {
    background: var(--y-tint);
}

.ylp-h2 {
    font-size: 31px;
    font-weight: 700;
}

.ylp-sub {
    margin: 10px 0 26px;
    font-size: 16.5px;
    color: var(--y-muted);
    max-width: 46em;
}

.ylp-models {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
}

.ylp-model {
    padding: 7px 14px;
    border: 1px solid var(--y-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
}

.ylp-grid {
    display: grid;
    gap: 16px;
}

.ylp-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ylp-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ylp-card {
    padding: 20px 22px;
    border: 1px solid var(--y-line);
    border-radius: var(--y-radius);
    background: #fff;
}

.ylp-card b {
    display: block;
    font-size: 16.5px;
    margin-bottom: 7px;
}

.ylp-card span {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--y-muted);
}

.ylp-card--b2b {
    border-left: 3px solid var(--y-brand);
}

.ylp-note {
    margin: 24px 0 0;
    padding: 16px 20px;
    border-radius: var(--y-radius);
    background: var(--y-tint);
    font-size: 15px;
    color: var(--y-ink);
}

/* ── Шаги ───────────────────────────────────────────────────────────────── */
.ylp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ylp-step {
    padding: 22px;
    border-radius: var(--y-radius);
    background: var(--y-tint);
}

.ylp-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--y-brand);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.ylp-step b {
    display: block;
    font-size: 16.5px;
    margin-bottom: 6px;
}

.ylp-step__t {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--y-muted);
}

/* ── Финальный блок ─────────────────────────────────────────────────────── */
.ylp-final {
    background: var(--y-brand);
    color: #fff;
}

.ylp-final__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 48px;
    align-items: center;
}

.ylp-final .ylp-sub {
    color: rgba(255, 255, 255, 0.85);
}

.ylp-final__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px;
}

.ylp-final__phone {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ylp-final__mail {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.ylp-foot {
    padding: 26px 0;
    background: #0f1b2e;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
}

.ylp-foot__in {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ylp-foot__co {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.ylp-foot__addr {
    margin-top: 4px;
}

.ylp-foot__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}

.ylp-foot__links a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.ylp-foot__links a:hover {
    color: #fff;
}

/* ── Адаптив ────────────────────────────────────────────────────────────────
   Пороги замкнутые сверху вниз: на планшете форма уходит под текст, на
   телефоне всё в одну колонку. Первый экран на 390px обязан помещаться
   вместе с формой — с рекламы больше половины заходов с телефона. */
@media (max-width: 1023px) {
    .ylp-hero__in,
    .ylp-final__in {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .ylp-hero h1 {
        font-size: 34px;
    }

    .ylp-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ylp-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .ylp-facts__in {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ylp-top__in {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ylp-top__contacts {
        margin-left: auto;
        gap: 12px;
    }

    .ylp-top__city,
    .ylp-top__cta {
        display: none;
    }

    .ylp-hero {
        padding: 32px 0 38px;
    }

    .ylp-hero h1 {
        font-size: 27px;
    }

    .ylp-hero__lead {
        font-size: 16px;
    }

    .ylp-hero__phones a {
        font-size: 23px;
    }

    .ylp-sec {
        padding: 38px 0;
    }

    .ylp-h2 {
        font-size: 24px;
    }

    .ylp-grid--3,
    .ylp-grid--2,
    .ylp-steps,
    .ylp-facts__in {
        grid-template-columns: minmax(0, 1fr);
    }

    .ylp-form__body {
        padding: 16px 16px 20px;
    }

    .ylp-foot__in {
        flex-direction: column;
    }

    .ylp-foot__links {
        text-align: left;
    }
}

/* ── Карточки групп с фотографией товара ────────────────────────────────── */
.ylp-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.ylp-card--photo {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Снимки товаров сняты в разных пропорциях (одни 4:3, другие вертикальные),
   поэтому рамка фиксированная, а фото вписывается целиком — contain, не cover:
   обрезать деталь по краям хуже, чем оставить поля. */
/* Высота ФИКСИРОВАННАЯ, а не aspect-ratio: пропорция задаёт лишь желаемый
   размер, и вертикальный снимок 420×560 всё равно распирал рамку — плитки
   в ряду разъезжались по высоте. overflow нужен по той же причине. */
.ylp-card__pic {
    height: 190px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--y-line);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.ylp-card__pic img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply; /* у части снимков фон не идеально белый */
}

.ylp-card--photo b {
    padding: 16px 18px 0;
}

.ylp-card--photo span {
    padding: 0 18px 18px;
}

/* ── Сюжетные фотографии: склад, доставка, дилерство ────────────────────── */
.ylp-scene {
    margin: 0;
    border: 1px solid var(--y-line);
    border-radius: var(--y-radius);
    overflow: hidden;
    background: #fff;
}

.ylp-scene img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ylp-scene figcaption {
    padding: 16px 18px 18px;
}

.ylp-scene b {
    display: block;
    font-size: 16.5px;
    margin-bottom: 6px;
}

.ylp-scene span {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--y-muted);
}

@media (max-width: 1023px) {
    .ylp-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .ylp-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Фото товара на телефоне — ниже, чтобы плитка не превращалась в столбик. */
    .ylp-card__pic {
        height: 130px;
        padding: 8px;
    }

    .ylp-card--photo b {
        padding: 12px 12px 0;
        font-size: 15px;
    }

    .ylp-card--photo span {
        padding: 0 12px 14px;
        font-size: 13px;
    }
}