/* ============================================================
   Pet Diet — редизайн блоков главной (порт из Claude Design Home.jsx).
   Всё скоупится под .pd-hm, чтобы не конфликтовать со старыми блоками
   главной. Токены и классы-компоненты — из colors_and_type.css + app.css макета.
   Блоки: About / Consult / Why / Feeding / Tariffs / Buy / FAQ.
   Мобильный брейкпоинт = isMobile макета (≈768px).
   ============================================================ */

.pd-hm {
    --cream:#F5EEE2; --cream-deep:#EADFCD; --tan:#CBA786; --surface:#FFFFFF; --surface-warm:#FCF8F1;
    --ink:#211F1A; --ink-soft:#423E36; --muted:#6E695E; --faint:#9C9486;
    --line:#E6DDCD; --line-soft:#F0E8DA;
    --green:#1F5B42; --green-700:#164230; --green-500:#2E7355; --green-tint:#E3EDE7; --green-tint-2:#C8DDD2;
    --blue:#A9D1DE; --blue-deep:#5E9FB5; --blue-tint:#E8F2F6; --blue-tint-2:#CFE6EC;
    --warm:#E8852E; --warm-600:#CC7120; --warm-tint:#FBE7D2; --warm-tint-2:#F5D2AC;
    --display:'Nunito', system-ui, -apple-system, sans-serif;
    --sans:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
    --sh-1:0 1px 2px rgba(33,31,26,.05), 0 1px 3px rgba(33,31,26,.04);
    --sh-2:0 4px 12px rgba(33,31,26,.06), 0 2px 4px rgba(33,31,26,.04);
    --sh-3:0 12px 32px rgba(33,31,26,.10), 0 4px 10px rgba(33,31,26,.05);
    --ease:cubic-bezier(.22,.61,.36,1); --dur:200ms;
    background: var(--cream);
    font-family: var(--sans);
    color: var(--ink);
}
.pd-hm * { box-sizing: border-box; }

/* ---- layout primitives (из app.css макета) ---- */
/* Уменьшено с 56px: между соседними блоками было 56+56=112px — слишком много. */
.pd-hm .section-sm { padding: 34px 0; }
@media (max-width: 768px) { .pd-hm .section-sm { padding: 24px 0; } }
.pd-hm .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; width: 100%; }
.pd-hm .wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 28px; width: 100%; }
.pd-hm .center { text-align: center; }

.pd-hm .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pd-hm .card-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pd-hm .card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

.pd-hm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: 1rem; border-radius: 12px; padding: 14px 24px; line-height: 1; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); white-space: nowrap; border: none; cursor: pointer; text-decoration: none; }
.pd-hm .btn:active { opacity: .9; }
.pd-hm .btn-green { background: var(--green); color: #fff; }
.pd-hm .btn-green:hover { background: var(--green-700); color: #fff; }
.pd-hm .btn-soft { background: var(--green-tint); color: var(--green-700); }
.pd-hm .btn-soft:hover { background: var(--green-tint-2); color: var(--green-700); }
.pd-hm .btn-lg { padding: 17px 30px; font-size: 1.08rem; border-radius: 13px; }
.pd-hm .btn-block { width: 100%; }

.pd-hm .input { width: 100%; padding: 14px 15px; border-radius: 11px; border: 1.5px solid transparent; background: var(--cream-deep); font-family: var(--sans); font-size: 1rem; color: var(--ink); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pd-hm .input:focus { outline: none; border-color: var(--green-500); background: #fff; }
.pd-hm .input::placeholder { color: var(--faint); }

/* общий заголовок блока */
.pd-hm-h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-size: 2.4rem; line-height: 1.12; }
@media (max-width: 768px) { .pd-hm-h2 { font-size: 1.8rem; } }

/* Заголовок блока продуктов «Уникальное питание…» в стиле .pd-hm-h2.
   Он ВНЕ .pd-hm (рендерится в index.php), поэтому значения заданы явно, без var(). */
.pd-products-heading-section--hm { height: auto; padding: 34px 0 6px; background: #fff; }
.pd-products-title--hm {
    display: block; width: auto; max-width: 820px; margin: 0 auto;
    font-family: 'Nunito', system-ui, -apple-system, sans-serif; font-weight: 800;
    font-size: 2.4rem; line-height: 1.12; letter-spacing: -.02em; color: #211F1A;
    text-align: center; text-transform: none;
}
@media (max-width: 768px) { .pd-products-title--hm { font-size: 1.8rem; } }

/* Грид рационов на главной = карточки со страницы /ratcioni-dlya-koshek/ (.prc card),
   но без кремового фона .pd-sets-rb — сидят на белой секции продуктов. */
.pd-home-rations.pd-sets-rb { background: transparent; }
.pd-home-rations .pd-sets-rb__wrap { padding: 0 28px; }
@media (max-width: 768px) { .pd-home-rations .pd-sets-rb__wrap { padding: 0 18px; } }

/* ================= About ================= */
.pd-hm-about__p { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.6; margin-top: 16px; max-width: 62ch; margin-left: auto; margin-right: auto; }
.pd-hm-about__p + .pd-hm-about__p { margin-top: 14px; }
.pd-hm-about__rating { display: inline-block; margin-top: 22px; }
.pd-hm-about__rating img { height: 45px; width: auto; display: block; }
@media (max-width: 768px) { .pd-hm-about__p { font-size: 1rem; } }

/* ================= Consult ================= */
.pd-hm .pd-hm-consult { padding: 44px 48px; border: none; color: #fff; box-shadow: var(--sh-3);
    background: radial-gradient(620px 300px at 82% 12%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%), linear-gradient(122deg, var(--green-700) 0%, var(--green) 100%); }
.pd-hm-consult__h2 { font-family: var(--display); font-weight: 800; font-size: 2rem; color: #fff; text-align: center; }
.pd-hm-consult__form { margin-top: 24px; display: grid; gap: 14px; max-width: 460px; margin-left: auto; margin-right: auto; }
.pd-hm-consult__form .input { background: #fff; }
.pd-hm-consult__agree { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: rgba(255,255,255,.85); line-height: 1.45; }
.pd-hm-consult__agree input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--warm); }
.pd-hm-consult__agree a { color: #fff; text-decoration: underline; }
.pd-hm-consult__submit { background: var(--warm); color: #fff; justify-self: center; min-width: 200px; }
.pd-hm-consult__submit:hover { background: var(--warm-600); color: #fff; }
.pd-hm-consult__status { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.92); font-size: .98rem; }
.pd-hm-consult__status:empty { display: none; }
@media (max-width: 768px) { .pd-hm .pd-hm-consult { padding: 26px; } .pd-hm-consult__h2 { font-size: 1.5rem; } }

/* ================= Why ================= */
.pd-hm-why__head { margin-bottom: 40px; }
.pd-hm-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pd-hm-why__card { padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.pd-hm-why__top { display: flex; align-items: center; gap: 14px; }
.pd-hm-why__ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; flex: 0 0 auto; }
.pd-hm-why__ic .ms { font-size: 28px; }
.pd-hm-why__title { font-family: var(--display); font-weight: 800; font-size: 1.22rem; line-height: 1.15; }
.pd-hm-why__lead { font-weight: 700; font-size: 1rem; line-height: 1.4; }
.pd-hm-why__body { display: flex; flex-direction: column; gap: 10px; }
.pd-hm-why__body p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.pd-hm-why__bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.pd-hm-why__bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
.pd-hm-why__check { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; flex: 0 0 auto; margin-top: 2px; }
.pd-hm-why__check .ms { font-size: 13px; font-weight: 700; }
.pd-hm-tone-a .pd-hm-why__ic { background: var(--green-tint); color: var(--green-700); }
.pd-hm-tone-a .pd-hm-why__lead { color: var(--green-700); }
.pd-hm-tone-a .pd-hm-why__check { background: var(--green-tint); color: var(--green-700); }
.pd-hm-tone-b .pd-hm-why__ic { background: var(--blue-tint); color: var(--blue-deep); }
.pd-hm-tone-b .pd-hm-why__lead { color: var(--blue-deep); }
.pd-hm-tone-b .pd-hm-why__check { background: var(--blue-tint); color: var(--blue-deep); }
.pd-hm-tone-c .pd-hm-why__ic { background: var(--warm-tint); color: var(--warm-600); }
.pd-hm-tone-c .pd-hm-why__lead { color: var(--warm-600); }
.pd-hm-tone-c .pd-hm-why__check { background: var(--warm-tint); color: var(--warm-600); }
@media (max-width: 768px) { .pd-hm-why__head { margin-bottom: 26px; } .pd-hm-why__grid { grid-template-columns: 1fr; gap: 14px; } .pd-hm-why__card { padding: 24px; } }

/* ================= Buy (как купить) ================= */
.pd-hm .pd-hm-buy { padding: 44px 48px; text-align: center;
    background: radial-gradient(560px 300px at 88% 8%, var(--warm-tint) 0%, rgba(251,231,210,0) 62%), linear-gradient(150deg, var(--surface-warm) 0%, var(--cream-deep) 100%); }
.pd-hm-buy__h2 { font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -.02em; line-height: 1.14; }
.pd-hm-buy__p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.65; margin-top: 18px; max-width: 58ch; margin-left: auto; margin-right: auto; }
.pd-hm-buy__slogan { font-family: var(--display); color: var(--green-700); font-size: 1.25rem; font-weight: 800; margin-top: 20px; }
@media (max-width: 768px) { .pd-hm .pd-hm-buy { padding: 26px; } .pd-hm-buy__h2 { font-size: 1.6rem; } .pd-hm-buy__p { font-size: 1rem; } .pd-hm-buy__slogan { font-size: 1.1rem; } }

/* ================= FAQ (аккордеон на <details>, эксклюзивный по name) ================= */
.pd-hm-faq__head { margin-bottom: 32px; }
.pd-hm-faq__list { display: flex; flex-direction: column; gap: 10px; }
.pd-hm-faq__item { padding: 0; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.pd-hm-faq__item[open] { border-color: var(--green); box-shadow: var(--sh-2); }
.pd-hm-faq__q { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; gap: 14px; cursor: pointer; list-style: none; }
.pd-hm-faq__q::-webkit-details-marker { display: none; }
.pd-hm-faq__qtext { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.pd-hm-faq__item[open] .pd-hm-faq__qtext { color: var(--green-700); }
.pd-hm-faq__toggle { width: 30px; height: 30px; border-radius: 99px; flex: 0 0 auto; display: grid; place-items: center; background: var(--cream-deep); color: var(--muted); transition: all .2s; }
.pd-hm-faq__item[open] .pd-hm-faq__toggle { background: var(--green); color: #fff; }
.pd-hm-faq__toggle .ms { font-size: 21px; transition: transform .22s; }
.pd-hm-faq__item[open] .pd-hm-faq__toggle .ms { transform: rotate(180deg); }
.pd-hm-faq__a { padding: 0 22px 20px; }
.pd-hm-faq__a p { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
@media (max-width: 768px) { .pd-hm-faq__head { margin-bottom: 22px; } .pd-hm-faq__q { padding: 16px 18px; } .pd-hm-faq__qtext { font-size: .98rem; } .pd-hm-faq__a { padding: 0 18px 18px; } }