/**
 * Стили лендингов «Покупателям» и «Партнёрам» из файлов заказчика.
 *
 * Все правила ограничены классом .df-landing: в исходниках они висели на body
 * и на :root, то есть перекрасили бы весь сайт. Шрифт Manrope заменён на
 * Geologica — Manrope на сайте не подключён и заголовки падали на засечный.
 */

.df-landing{
      --bg:#f3efe8;
      --card:#fffdf8;
      --muted:#6b6b6b;
      --text:#1b2933;
      --accent:#244b66;
      --radius:16px;
      --soft-shadow:0 6px 20px rgba(20,30,40,.06);
    }.df-landing *{box-sizing:border-box}.df-landing{margin:0;font-family:Inter,Inter,system-ui;background:var(--bg);color:var(--text);line-height:1.5}.df-landing .container{width:min(1180px,100%);margin:0 auto;padding:0 20px}.df-landing header{padding:18px 0;position:sticky;top:0;background:#fffdf8c4;backdrop-filter:blur(6px);z-index:50}.df-landing .nav{display:flex;align-items:center;justify-content:space-between}.df-landing .logo{font-weight:800;display:flex;align-items:center;gap:10px;font-family:Geologica,sans-serif}.df-landing nav a{margin:0 10px;color:var(--muted);font-weight:600;text-decoration:none}.df-landing .cta{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:600}.df-landing .hero{margin-top:12px;border-radius:20px;overflow:hidden;box-shadow:var(--soft-shadow)}.df-landing .hero-media{background:url(/wp-content/themes/dreamfair/assets/img/landing/hero.jpg) center/cover;height:420px;display:flex;align-items:end}.df-landing .overlay{background:linear-gradient(180deg,transparent 30%,rgba(243,239,232,.9) 90%);width:100%;padding:40px}.df-landing h1{font-family:Geologica,sans-serif;font-size:40px;margin:0 0 10px}.df-landing .muted{color:var(--muted)}.df-landing .btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none}.df-landing section{padding:48px 0}.df-landing .section-title{margin-bottom:20px}.df-landing .section-title h2{font-family:Geologica,sans-serif;font-size:26px;margin:0}.df-landing .catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.df-landing .cat-card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:var(--soft-shadow)}.df-landing .cat-card img{width:100%;border-radius:10px;height:140px;object-fit:cover}.df-landing .foundation-card{display:flex;gap:18px;align-items:center;background:var(--card);padding:18px;border-radius:16px;box-shadow:var(--soft-shadow)}.df-landing .foundation-card img{width:180px;height:110px;object-fit:cover;border-radius:10px}.df-landing .steps, .df-landing .why-us{display:grid;gap:18px;margin-top:30px}.df-landing .steps{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.df-landing .step{background:var(--card);border-radius:12px;padding:18px;box-shadow:var(--soft-shadow)}.df-landing .why-us{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.df-landing .why-card{background:var(--card);padding:20px;border-radius:14px;box-shadow:var(--soft-shadow)}.df-landing .why-accent{background:var(--accent);color:#fff}.df-landing .review{background:var(--card);padding:20px;border-radius:14px;box-shadow:var(--soft-shadow)}.df-landing .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:20px}.df-landing footer{background:var(--accent);color:#fff;padding:30px 0;border-top-left-radius:20px;border-top-right-radius:20px}.df-landing .footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.df-landing{
      --bg:#f5f2ed;
      --card:#fffdf8;
      --muted:#6b6b6b;
      --text:#1b2933;
      --accent:#244b66;
      --radius:20px;
      --shadow:0 8px 28px rgba(20,30,40,0.06);
      --tile:#f9f8f4;
    }.df-landing *{box-sizing:border-box}.df-landing{
      margin:0;
      font-family:Inter,Inter,system-ui;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }.df-landing .container{
      width:min(1180px,100%);
      margin:0 auto;
      padding:60px 20px;
    }.df-landing .hero-card{
      background:var(--card);
      border-radius:var(--radius);
      padding:50px 40px;
      box-shadow:var(--shadow);
      border:1px solid rgba(0,0,0,0.04);
      text-align:center;
      margin-bottom:40px;
    }.df-landing .hero-card h2{
      font-family:Geologica,sans-serif;
      font-size:36px;
      margin:0 0 18px;
      color:var(--text);
    }.df-landing .hero-card p{
      color:var(--muted);
      font-size:18px;
      margin:0;
      max-width:820px;
      margin-inline:auto;
    }.df-landing .grid-3{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:22px;
      margin-bottom:20px;
    }.df-landing .tile{
      background:var(--tile);
      border-radius:16px;
      padding:24px 26px;
      box-shadow:0 4px 16px rgba(20,30,40,0.05);
    }.df-landing .tile h3{
      margin:0 0 10px;
      color:var(--accent);
      font-family:Geologica,sans-serif;
      font-size:18px;
    }.df-landing .tile p{
      margin:0;
      color:var(--muted);
      font-size:15px;
    }.df-landing section + section{ margin-top: 8px; }.df-landing .cta-section{
      text-align:center;
      padding:80px 20px;
      background:var(--card);
      border-top:1px solid rgba(0,0,0,0.04);
      box-shadow:var(--shadow);
    }.df-landing .cta-section h2{
      font-family:Geologica,sans-serif;
      font-size:32px;
      margin:0 0 16px;
      color:var(--text);
    }.df-landing .cta-section p{
      font-size:18px;
      color:var(--muted);
      margin:0 0 28px;
    }.df-landing .cta-button{
      display:inline-block;
      background:var(--accent);
      color:#fff;
      font-weight:600;
      padding:14px 32px;
      border-radius:50px;
      text-decoration:none;
      font-family:Geologica,sans-serif;
      font-size:17px;
      transition:all .3s ease;
    }.df-landing .cta-button:hover{
      background:#1c3d56;
      transform:translateY(-2px);
    }.df-landing .cta-link{
      display:block;
      margin-top:16px;
      font-size:15px;
      color:var(--accent);
      text-decoration:none;
    }.df-landing .cta-link:hover{text-decoration:underline;}
    @media(max-width:640px){.df-landing .hero-card{padding:32px 22px;}.df-landing .tile{padding:18px;}
    }
  
/* ==========================================================================
   Правки лендингов по замечаниям 09.09.2026 (п.26, п.27)
   ========================================================================== */

/**
 * Карточки категорий: изображение подогнано под карточку.
 *
 * Обложками служат фотографии товаров — они разного размера и на белом фоне.
 * Из-за этого карточки получались разной высоты, а товар болтался в углу.
 * Задаём общий бокс и вписываем изображение в него.
 */
.df-landing .cat-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.df-landing .cat-card img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: center;
	background: #f4f1eb;
}

.df-landing .cat-card > *:not(img) {
	padding-inline: 18px;
}

.df-landing .cat-card h3,
.df-landing .cat-card p {
	margin: 14px 0 16px;
	font-size: 17px;
	font-weight: 600;
}

/**
 * П.27. Заголовок и подпись в карточках «Почему выбирают нас».
 *
 * Шли сплошным текстом одного размера: «Проверенные производители Документы
 * и реальные кейсы» читалось как одна фраза. Разделяем по начертанию.
 */
.df-landing .why-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.df-landing .why-card > *:first-child,
.df-landing .why-card b,
.df-landing .why-card strong,
.df-landing .why-card h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.df-landing .why-card p,
.df-landing .why-card .muted {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	line-height: 1.45;
}

/**
 * П.27. Нижний ряд блоков — на ту же ширину, что и верхний.
 *
 * «Гарантии» и «Бонусы» занимали половину ряда и обрывались посередине,
 * из-за чего секция выглядела недоделанной.
 */
.df-landing .why-us + div,
.df-landing .why-extra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.df-landing .why-us + div > div,
.df-landing .why-extra > div {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
}

/**
 * П.27. Блок консультации.
 *
 * Карточка формы была уже колонки и сливалась с фоном страницы.
 */
.df-landing .cta-section,
.df-landing .consult {
	width: 100%;
	padding: 28px;
	border: 1px solid #e4e0d6;
	border-radius: 14px;
	background: #fff;
}

.df-landing .cta-section .js_callback_form,
.df-landing .consult .js_callback_form {
	max-width: 100%;
	padding: 0;
	background: transparent;
}

/**
 * П.26. Блок «Партнёру» был слишком бледным.
 *
 * Секции шли одна за другой на одном кремовом фоне без границ:
 * взгляд не цеплялся ни за что. Даём карточкам белый фон и мягкую тень,
 * а чередующимся секциям — чуть другой оттенок подложки.
 */
.df-landing .section-title {
	margin-bottom: 4px;
	font-size: 26px;
}

.df-landing .step,
.df-landing .review,
.df-landing .foundation-card {
	border: 1px solid #e8e4da;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(27, 41, 51, .05);
}

.df-landing section:nth-of-type(even) {
	padding-block: 8px;
}

@media (max-width: 767.5px) {
	.df-landing .cat-card img {
		height: 160px;
	}

	.df-landing .cta-section,
	.df-landing .consult {
		padding: 18px;
	}
}

/**
 * П.27. Форма консультации на лендинге.
 *
 * Секция идёт без класса, а форма получала кремовую подложку — на кремовом
 * фоне страницы карточка не читалась вовсе. Делаем белой, с рамкой и тенью,
 * и растягиваем на всю ширину колонки, как соседние блоки.
 */
.df-landing .js_callback_form,
main .df-landing .js_callback_form {
	max-width: 100%;
	padding: 26px 28px;
	border: 1px solid #e4e0d6;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(27, 41, 51, .05);
}

/* Поля в две колонки: форма во всю ширину со столбиком полей смотрится пусто */
@media (min-width: 768px) {
	.df-landing .js_callback_form .login__scroll {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
		align-items: start;
	}

	.df-landing .js_callback_form .login__consents,
	.df-landing .js_callback_form .login__note {
		grid-column: 1 / -1;
	}

	.df-landing .js_callback_form button[type="submit"] {
		width: auto;
		min-width: 220px;
	}
}

@media (max-width: 767.5px) {
	.df-landing .js_callback_form,
	main .df-landing .js_callback_form {
		padding: 18px;
	}
}

/**
 * П.26. Лендинг «Партнёру» был слишком бледным.
 *
 * Плитки шли без границ на кремовом фоне страницы: девять одинаковых
 * прямоугольников почти сливались, взгляду не за что зацепиться.
 * Даём белый фон, тонкую рамку и отклик на курсор — как на карточках
 * каталога, чтобы страницы выглядели из одного набора.
 */
.df-landing .tile {
	border: 1px solid #e8e4da;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(27, 41, 51, .05);
	transition: transform .18s ease, box-shadow .18s ease;
}

.df-landing .tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(27, 41, 51, .09);
}

/* Заголовок плитки отделяем от текста — иначе читается одной фразой */
.df-landing .tile > *:first-child,
.df-landing .tile b,
.df-landing .tile strong,
.df-landing .tile h3 {
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.df-landing .tile p {
	margin: 0;
	color: #4a4a4a;
	line-height: 1.5;
}

/* Ряды плиток одинаковой высоты */
.df-landing .grid-3 {
	align-items: stretch;
}

.df-landing .grid-3 > * {
	height: 100%;
}

/* Верхняя карточка-герой не должна теряться на общем фоне */
.df-landing .hero-card {
	border: 1px solid #e8e4da;
	border-radius: 16px;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.df-landing .tile:hover {
		transform: none;
	}
}