/* Закрывающий каркас карточки товара: цена, боль, три шага, доверие,
   пригодность, один честный отказ. Подключается только на products/*.html.

   Палитра и ширина совпадают с .slx (sl-rw-css внутри карточек), чтобы новые
   блоки не читались как чужая вставка:
   cream #faf7f2, hairline #eee7db, ink #1c1b19, forest #14322b,
   gold #d8a548, rust #b4400f.

   Правило вёрстки здесь одно: мысль = строка. Ни один пункт не переносится
   хвостом в два слова, поэтому везде text-wrap:balance и короткие формулировки. */

.slpdp{box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;
padding:30px 20px 0;font-family:'Assistant',Helvetica,Arial,sans-serif;color:#1c1b19}
.slpdp *{box-sizing:border-box}
.slpdp__h{margin:0 0 14px;font-family:'Satoshi-Bold','Assistant',Helvetica,Arial,sans-serif;
font-size:27px;line-height:1.18;font-weight:700;color:#14322b;text-wrap:balance}
/* Заголовки этих блоков короткие и обязаны стоять одной строкой на десктопе. */
@media(min-width:900px){.slpdp__h{white-space:nowrap}}
.slpdp__note{margin:12px 0 0;font-size:13px;line-height:1.45;color:#8a8378;
text-wrap:balance}

/* 1. Цена. Одно число, один абзац, и строка про HSA под ним. */
.slpdp--price .slpdp__box{display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:10px 28px;padding:18px 22px;
border:1px solid #eee7db;border-left:4px solid #d8a548;border-radius:14px;
background:#faf7f2}
.slpdp__price{margin:0;max-width:72ch;font-size:19px;line-height:1.45;
font-weight:600;color:#1c1b19;text-wrap:balance}
.slpdp__price b{font-family:'Satoshi-Bold','Assistant',Helvetica,Arial,sans-serif;
color:#14322b}
.slpdp__hsa{margin:0;flex:0 0 auto;font-size:14.5px;line-height:1.4;font-weight:700;
color:#14322b;white-space:nowrap}

/* 2. Боль. Четыре строки, ни слова о товаре. Две колонки, потому что
   четыре коротких строки в столбик на десктопе оставляют пустое поле справа. */
.slpdp__pain{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:10px 14px}
.slpdp__pain li{position:relative;padding:14px 16px 14px 34px;
border:1px solid #eee7db;border-radius:14px;background:#fff;
font-size:16.5px;line-height:1.4;color:#1c1b19;text-wrap:balance}
.slpdp__pain li::before{content:'';position:absolute;left:16px;top:21px;
width:7px;height:7px;border-radius:50%;background:#b4400f}

/* 3. Три шага, по одной строке каждый. */
.slpdp__steps{list-style:none;counter-reset:slpdp;margin:0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:12px}
.slpdp__steps li{counter-increment:slpdp;padding:15px 17px 15px 17px;
border:1px solid #eee7db;border-radius:14px;background:#faf7f2;
font-size:15.5px;line-height:1.45;color:#1c1b19;text-wrap:balance}
.slpdp__steps li::before{content:counter(slpdp);display:block;margin-bottom:6px;
font-size:12px;font-weight:700;color:#d8a548}

/* 4. Тройка доверия. Одна строка на десктопе, три строки на телефоне. */
.slpdp--trust{padding-top:22px}
.slpdp__trust{list-style:none;margin:0;padding:15px 20px;display:flex;
flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;
border:1px solid #eee7db;border-radius:14px;background:#14322b}
.slpdp__trust li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.35;
font-weight:700;color:#faf7f2}
.slpdp__trust li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;
border-radius:50%;background:#d8a548}

/* 5. Пригодность. Шесть пунктов в две колонки. */
.slpdp__fit{list-style:none;margin:0;padding:18px 20px;display:grid;
grid-template-columns:1fr 1fr;gap:9px 30px;border:1px solid #eee7db;
border-radius:14px;background:#faf7f2}
.slpdp__fit li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;
color:#1c1b19;text-wrap:balance}
.slpdp__fit li::before{content:'';position:absolute;left:4px;top:5px;width:11px;height:6px;
border-left:2px solid #14322b;border-bottom:2px solid #14322b;transform:rotate(-45deg)}

/* 6. Один честный отказ. Не больше трёх строк, и это единственный
   отрицательный блок на странице. */
.slpdp__not{list-style:none;margin:0;padding:16px 20px;display:grid;gap:8px;
border:1px solid #eee7db;border-radius:14px;background:#fff}
.slpdp__not li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.5;
color:#5f5a52;text-wrap:balance}
.slpdp__not li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:2px;
background:#b4400f}

/* 7. Плашка очереди в конце страницы. Повторяет вид .sl-oos из sl-design.css,
   но на всю ширину, потому что стоит не в колонке покупки. */
.slpdp--wait{padding-bottom:6px}
.slpdp__wait{padding:20px 22px;border:1px solid #eee7db;border-left:4px solid #d8a548;
border-radius:14px;background:#faf7f2}
.slpdp__wait .sl-oos{margin:0;padding:0;border:0;background:none}
.slpdp__wait .sl-oos__head{margin:0 0 6px;font-family:'Satoshi-Bold','Assistant',Helvetica,Arial,sans-serif;
font-size:clamp(16px,4.3vw,20px);line-height:1.25;font-weight:700;color:#14322b;
white-space:normal;text-wrap:balance}

/* Канон-заголовок плашки очереди длиннее прежнего, а .sl-oos__head в
   sl-design.css переносить запрещает. На 390px строка вылезала за рамку
   карточки, поэтому на карточках товара кегль сжимается сильнее. */
.sl-oos__head{font-size:clamp(12.5px,3.45vw,17px)}
.slpdp__wait .sl-oos__note{margin:0 0 12px;max-width:68ch;font-size:15px;line-height:1.5;
color:#5f5a52;text-wrap:balance}

@media(max-width:899px){
.slpdp__h{font-size:22px}
}
@media(max-width:749px){
.slpdp{padding:24px 16px 0}
.slpdp__pain,.slpdp__steps,.slpdp__fit{grid-template-columns:1fr}
.slpdp--price .slpdp__box{display:block}
.slpdp__price{font-size:17.5px}
.slpdp__hsa{margin-top:10px;white-space:normal}
.slpdp__trust{justify-content:flex-start;gap:8px 14px}
}