/* ============================================================
   Страница «Программа лояльности» (/loyalty/) — ts-дизайн.
   Всё скоупится под .lty; содержимое приходит из моделей
   приложения stroykerbox.apps.loyaltypage (правится в админке).
   Палитра и приёмы — как в lk-ts.css / delivery-ts.css.
   Размеры шрифтов с !important: custom-styles.css прода их перебивает.
   ============================================================ */
.lty {
  --ink: #2b2522; --ink2: #5b524d; --ink3: #6b625d; --ink4: #b9aea8;
  --green: #3e5b4b; --green-d: #2f4739; --green-bg: #edf1ec; --green-bg2: #f5f7f4;
  --beige: #f7f3ee; --line: #f0e8e4; --line2: #ede4df; --pink: #fdeef1;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Lato', system-ui, sans-serif;
  --pad: clamp(24px, 4vw, 56px);
  /* внутри страницы синий акцент темы переводим в ts-зелёный */
  --accent-color-400: #3e5b4b; --accent-color-500: #2f4739;
  --main-elements-color: #3e5b4b; --custom-accent-color-400: #3e5b4b;
  max-width: 1320px; margin: 0 auto; padding: 8px 0 72px;
  color: var(--ink); font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.lty * { box-sizing: border-box; }
.lty a { text-decoration: none; }
/* :where — нулевая специфичность, чтобы отступы классов не перебивались */
:where(.lty) p { margin: 0; }
/* custom-styles.css прода: .inner-page h1 { margin-left: 50px }, h1 { padding-bottom: 30px } — гасим */
:where(.lty) h1, :where(.lty) h2, :where(.lty) h3 { margin: 0; padding: 0 !important; margin-left: 0 !important; text-align: left !important; }

/* фон: белый сверху в фирменный розовый, как в макете */
body.lty-page main { background: linear-gradient(180deg, #fff 0%, #fdeef1 18%, #f8c3cf 100%) !important; }
.lty-section { background: transparent !important; }
.lty-section > .container { padding-top: 0; padding-bottom: 0; }

/* ===== хлебные крошки ===== */
.lty .page-head { width: auto; margin: 0; padding: 0; background: transparent; display: block; }
.lty .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px !important; color: var(--ink3); margin: 16px 0 0; }
.lty .breadcrumbs a { color: var(--green); transition: color .15s; }
.lty .breadcrumbs a:hover { color: var(--ink); }
.lty .breadcrumbs__sep { display: block !important; width: 12px; height: 12px; margin: 0; opacity: .5; transform: rotate(-90deg); color: var(--ink4) !important; }

/* ===== типографика ===== */
.lty .lty__h1 {
  font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(36px, 5.4vw, 68px) !important;
  line-height: 1.05 !important; color: var(--ink); text-wrap: balance;
}
.lty .lty__h2 {
  font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(28px, 3.6vw, 46px) !important;
  line-height: 1.1 !important; color: var(--ink); text-wrap: balance;
}
.lty .lty__h2_light { color: #fff; }
.lty__pill {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line2); background: #fff; font-size: 14px !important; font-weight: 500; color: var(--green); line-height: 1.2;
}
.lty__head { display: flex; flex-direction: column; gap: 12px; position: relative; }
.lty__head_row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.lty__head-main { display: flex; flex-direction: column; gap: 12px; }
.lty__aside { font-size: 15px !important; color: var(--ink2); }
.lty__prose { font-size: 15px !important; line-height: 1.6; color: var(--ink2); }
.lty__prose p { margin: 0 0 10px; }
.lty__prose p:last-child { margin-bottom: 0; }
.lty__prose ul, .lty__prose ol { margin: 0 0 10px; padding-left: 20px; }
.lty__prose a { color: var(--green) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ===== кнопки ===== */
.lty .lty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff !important; padding: 17px 30px; border-radius: 999px;
  font-family: var(--sans) !important; font-size: 16px !important; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--green); transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.lty .lty__btn:hover { background: var(--green-d); border-color: var(--green-d); color: #fff !important; }
.lty .lty__btn_ghost { background: #fff; color: var(--ink) !important; border-color: var(--line2); }
.lty .lty__btn_ghost:hover { background: #fff; border-color: var(--green); color: var(--green) !important; }
.lty .lty__btn_light {
  background: #fff; color: var(--green) !important; border-color: #fff; padding: 18px 32px; font-weight: 600;
  position: relative; box-shadow: 0 12px 30px -10px rgba(0,0,0,.35);
}
.lty .lty__btn_light:hover { background: var(--pink); border-color: var(--pink); color: var(--green) !important; }

/* ===== белая карточка-секция ===== */
.lty__card {
  position: relative; overflow: hidden; isolation: isolate; background: #fff; border-radius: 32px;
  padding: var(--pad); margin-top: 24px; display: flex; flex-direction: column; gap: 36px;
}
.lty__leaves { position: absolute; top: -80px; right: -80px; width: 340px; height: 340px; pointer-events: none; z-index: -1; }
.lty__leaves_flip { top: -90px; right: -90px; width: 300px; height: 300px; transform: scaleX(-1) rotate(90deg); }
.lty__leaves_tilt { right: -60px; width: 320px; height: 320px; transform: rotate(15deg); }

/* ===== 1. Первый экран ===== */
.lty__hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 48px; align-items: center; padding: 40px 0 64px;
}
.lty__hero_noimg { grid-template-columns: 1fr; }
.lty__hero-body { display: flex; flex-direction: column; gap: 24px; }
.lty .lty__hero-text { font-size: 19px !important; line-height: 1.55; color: var(--ink2); max-width: 520px; text-wrap: pretty; }
.lty__hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.lty__hero-btns:empty { display: none; }
.lty__hero-note { display: flex; gap: 10px; align-items: center; font-size: 15px !important; color: var(--ink2); }
.lty__hero-badge {
  flex-shrink: 0; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 999px; background: var(--green-bg); color: var(--green);
  display: grid; place-items: center; font-weight: 600; font-size: 12px !important; line-height: 1;
}
.lty__hero-media { background: #fff; border-radius: 32px; padding: 14px; box-shadow: 0 30px 60px -30px rgba(120,60,70,.35); }
.lty__hero-media img { width: 100%; height: auto; display: block; border-radius: 22px; }

/* ===== 2. Что даёт личный кабинет ===== */
.lty__benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.lty__benefit { border: 1px solid #efe7e2; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.lty__bg_green { background: var(--green-bg); }
.lty__bg_white { background: #fff; }
.lty__bg_beige { background: var(--beige); }
.lty .lty__benefit-title { font-size: 18px !important; font-weight: 600; line-height: 1.3; }
.lty .lty__benefit-text { font-size: 15px !important; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }

/* ===== 3–4. Уровни и калькулятор ===== */
.lty__levels-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; margin-top: 24px; }
.lty__levels-row > .lty__card { margin-top: 0; gap: 28px; }
.lty__levels { display: flex; flex-direction: column; }
.lty__level { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.lty .lty__level-pct { font-family: var(--serif) !important; font-size: 40px !important; line-height: 1; white-space: nowrap; }
.lty__level-body { display: flex; flex-direction: column; gap: 4px; }
.lty .lty__level-from { font-size: 17px !important; font-weight: 600; }
.lty .lty__level-note { font-size: 14px !important; color: var(--ink3); }
.lty .lty__footnote { background: var(--beige); border-radius: 18px; padding: 18px 22px; font-size: 14px !important; line-height: 1.55; color: var(--ink2); }

.lty__calc { background: var(--green-bg); border-radius: 32px; padding: var(--pad); display: flex; flex-direction: column; gap: 28px; }
.lty__calc-range { display: flex; flex-direction: column; gap: 14px; }
.lty .lty__calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px !important; font-weight: 400; color: #4f5a52; margin: 0; }
.lty__calc-row b { font-weight: 600; color: var(--ink); }
.lty__calc-scale { display: flex; justify-content: space-between; font-size: 12px !important; color: #7d877f; }
.lty__calc input[type=range] {
  width: 100%; margin: 0; accent-color: var(--green); height: 22px; cursor: pointer; background: transparent;
}
.lty__calc-result { background: #fff; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.lty__calc-pct-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lty .lty__calc-pct { font-family: var(--serif) !important; font-size: clamp(56px, 6vw, 72px) !important; line-height: 1; color: var(--green); white-space: nowrap; }
.lty .lty__calc-caption { font-size: 15px !important; color: var(--ink2); }
.lty__calc-bar { height: 8px; background: #eef0ec; border-radius: 8px; overflow: hidden; }
.lty__calc-bar > div { height: 100%; width: 0; background: var(--green); border-radius: 8px; transition: width .2s; }
.lty .lty__calc-next { font-size: 16px !important; line-height: 1.5; }
.lty .lty__calc-save { font-size: 14px !important; color: var(--ink3); border-top: 1px solid var(--line); padding-top: 16px; }

/* ===== 5. Шаги ===== */
.lty__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.lty__step { position: relative; overflow: hidden; background: var(--beige); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.lty__step::before { content: none !important; }
.lty .lty__step-n {
  position: absolute; top: 20px; right: 26px; font-family: var(--serif) !important; font-size: 48px !important; line-height: .9;
  color: var(--green); opacity: .35; font-variant-numeric: lining-nums; pointer-events: none;
}
.lty .lty__step-title { font-size: 18px !important; font-weight: 600; padding-right: 52px; line-height: 1.3; }
.lty .lty__step-text { font-size: 15px !important; line-height: 1.55; color: var(--ink2); text-wrap: pretty; padding-right: 20px; }

/* ===== 6. Разделы кабинета ===== */
.lty__guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: start; }
.lty__guide-list { display: flex; flex-direction: column; gap: 8px; }
.lty .lty__guide-item {
  appearance: none; -webkit-appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, background .15s;
}
.lty .lty__guide-item:hover { border-color: #cfd8d1; }
.lty .lty__guide-item.is-active { background: var(--green-bg2); border-color: #dfe6e0; }
.lty__guide-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 17px !important; font-weight: 600; }
.lty__guide-item.is-active .lty__guide-title { color: var(--green); }
.lty__guide-sign { font-size: 18px; color: var(--green); font-weight: 400; }
.lty__guide-sign::before { content: '+'; }
.lty__guide-item.is-active .lty__guide-sign::before { content: '—'; }
.lty .lty__guide-text { display: none; font-size: 15px !important; font-weight: 400; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.lty__guide-item.is-active .lty__guide-text { display: block; }
.lty__guide-media { background: var(--beige); border-radius: 28px; padding: 16px; }
.lty__guide-media:empty { display: none; }
.lty__guide-media img { width: 100%; height: auto; display: block; border-radius: 18px; background: #fff; }
.lty__guide-media img[hidden] { display: none; }

/* ===== 7. Частые вопросы ===== */
.lty__faq-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px; }
.lty .lty__faq-text { font-size: 15px !important; line-height: 1.55; color: var(--ink2); margin-top: 8px; }
.lty__faq-text a { color: var(--green); }
.lty__faq-branch {
  order: 9; flex: 1 1 0; min-height: 160px; width: calc(100% + var(--pad)); margin-left: calc(-1 * var(--pad));
  margin-top: 16px; pointer-events: none; transform: scaleX(-1);
}
.lty__faq { display: flex; flex-direction: column; }
.lty__faq-item { border-top: 1px solid var(--line); }
.lty .lty__faq-q {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0;
  font-size: 17px !important; font-weight: 500; line-height: 1.4;
}
.lty__faq-q::-webkit-details-marker { display: none; }
.lty__faq-q::marker { content: ''; }
.lty__faq-sign { color: var(--green); font-size: 22px; line-height: 1; }
.lty__faq-sign::before { content: '+'; }
.lty__faq-item[open] .lty__faq-sign::before { content: '−'; }
.lty .lty__faq-a { padding: 0 40px 22px 0; text-wrap: pretty; }
@media (max-width: 760px) { .lty__faq-branch { display: none; } }

/* ===== 8. Зелёный блок внизу ===== */
.lty__cta {
  position: relative; overflow: hidden; background: var(--green); color: #fff; border-radius: 32px;
  padding: clamp(32px, 5vw, 64px); margin-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.lty__cta_img { padding-left: clamp(180px, 17vw, 230px); }
.lty__cta-leaves { position: absolute; top: -70px; right: -70px; width: 340px; height: 340px; pointer-events: none; }
.lty__cta-img {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; max-height: 340px;
  aspect-ratio: 300 / 564; width: auto; object-fit: cover; object-position: right center; pointer-events: none;
}
.lty__cta-body { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 640px; flex: 1 1 300px; }
.lty .lty__cta-text { font-size: 17px !important; line-height: 1.55; color: #e3ebe5; }
@media (max-width: 760px) {
  .lty__cta_img { padding-left: clamp(32px, 5vw, 64px); }
  .lty__cta-img { display: none; }
}

/* ===== мобильные ===== */
@media (max-width: 600px) {
  .lty__hero { padding: 24px 0 40px; gap: 32px; }
  .lty .lty__hero-text { font-size: 17px !important; }
  .lty__hero-btns .lty__btn { flex: 1 1 100%; }
  .lty__card, .lty__calc, .lty__cta { border-radius: 24px; }
  .lty__level { grid-template-columns: 76px 1fr; gap: 14px; }
  .lty .lty__level-pct { font-size: 32px !important; }
  .lty__benefit, .lty__step, .lty__calc-result { padding: 22px; }
  .lty .lty__btn_light { width: 100%; }
}