/* Оплата картой онлайн: те же стили, что у «Доставки» и шаги из «Возврата» */
/* SHOPSTYLE — страница «Доставка и оплата» (/dostavka/, /oplata/), ТЗ п.9. Классы .ss-dlv-* только здесь.
   Разметка — Gutenberg: каждая секция = core/group с классами «ss-dlv ss-dlv-wrap [ss-dlv-hero|ss-dlv-faq|ss-dlv-cta]».
   ponytail: селекторы намеренно тяжёлые (.ss-dlv.ss-dlv-wrap …, не ниже 0,3,0): base.css темы грузится ПОСЛЕ этого файла
   и правилом :is(.entry-content,.is-layout-flow,…,.is-layout-constrained>.wp-block-group__inner-container)>* (спец. 0,2,0)
   ставит всем блокам margin 0 0 20px, а wp-includes/blocks/table/style.min.css рисует рамки ячеек. Одноклассовые margin здесь не работают. */
.ss-dlv.ss-dlv-wrap{max-width:860px;margin:0 auto}
/* 77px = отступ между секциями как в WPBakery-версии (35 колонка + 20 ряд + <br> 22) */
.ss-dlv.ss-dlv-wrap+.ss-dlv.ss-dlv-wrap{margin-top:77px}
.ss-dlv.ss-dlv-wrap.ss-dlv-hero{padding:48px 0 8px;text-align:center}
.ss-dlv.ss-dlv-wrap .ss-dlv-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ss-muted);margin:0 0 12px}
.ss-dlv.ss-dlv-wrap .ss-dlv-h1{font-size:34px;margin:0 0 18px}
.ss-dlv.ss-dlv-wrap .ss-dlv-lead{font-size:15px;line-height:1.7;max-width:620px;margin:0 auto 26px}
.ss-dlv.ss-dlv-wrap .ss-dlv-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin:0;padding-bottom:28px;border-bottom:1px solid var(--ss-line)}
.ss-dlv-nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.ss-dlv-nav a:hover{border-bottom-color:var(--ss-accent)}
.ss-dlv.ss-dlv-wrap:not(.ss-dlv-hero){padding:36px 0}
.ss-dlv.ss-dlv-wrap .ss-dlv-h2{font-size:20px;letter-spacing:.14em;margin:0 0 18px;scroll-margin-top:110px}
.ss-dlv.ss-dlv-wrap .ss-dlv-sub{color:var(--ss-muted);max-width:620px;margin:0 0 22px}
.ss-dlv.ss-dlv-wrap .ss-dlv-note{font-size:13px;color:var(--ss-muted);margin:14px 0 0}
.ss-dlv-note a{color:var(--ss-text);text-decoration:underline;text-underline-offset:3px}
/* плейсхолдеры — заметные, чтобы не уехали в прод; убрать класс после заполнения */
.ss-dlv-ph{font-style:normal;color:var(--ss-accent);background:rgba(196,89,58,.08);padding:0 4px}

/* таблица тарифов (core/table: класс на <figure>). 35px под таблицей = margin table из base.css в WPBakery-версии */
.ss-dlv.ss-dlv-wrap .ss-dlv-table{margin:0 0 35px}
.ss-dlv.ss-dlv-wrap .ss-dlv-table table{width:100%;margin:0;border-collapse:collapse;border:0;border-top:1px solid var(--ss-text)}
.ss-dlv.ss-dlv-wrap .ss-dlv-table thead,.ss-dlv.ss-dlv-wrap .ss-dlv-table tbody,.ss-dlv.ss-dlv-wrap .ss-dlv-table tr{border:0}
.ss-dlv.ss-dlv-wrap .ss-dlv-table th:first-child{width:36%}
.ss-dlv.ss-dlv-wrap .ss-dlv-table th{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-muted);text-align:left;padding:14px 12px 12px 0;border:0;border-bottom:1px solid var(--ss-line)}
.ss-dlv.ss-dlv-wrap .ss-dlv-table td{vertical-align:top;padding:18px 12px 18px 0;border:0;border-bottom:1px solid var(--ss-line);line-height:1.55;font-size:14px}
.ss-dlv.ss-dlv-wrap .ss-dlv-table td:last-child,.ss-dlv.ss-dlv-wrap .ss-dlv-table th:last-child{padding-right:0}
.ss-dlv-table strong{font-weight:500;display:block}
.ss-dlv-table td span{display:block;font-size:12px;color:var(--ss-muted);margin-top:3px}

/* самовывоз — три магазина (core/columns) */
.ss-dlv.ss-dlv-wrap .ss-dlv-stores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;background:var(--ss-line);border:1px solid var(--ss-line)}
.ss-dlv.ss-dlv-wrap .ss-dlv-store{background:var(--ss-bg);margin:0;padding:24px 22px 22px}
.ss-dlv.ss-dlv-wrap .ss-dlv-store h3{font-size:14px;letter-spacing:.14em;margin:0 0 10px}
.ss-dlv.ss-dlv-wrap .ss-dlv-store p{margin:0 0 4px;line-height:1.5}
.ss-dlv-hours{font-size:12px;color:var(--ss-muted)}
/* 16px = 4 (margin часов) + 12 (margin ссылки) в WPBakery-версии, где ссылка была inline-block */
.ss-dlv.ss-dlv-wrap .ss-dlv-store .ss-dlv-link{margin:16px 0 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ss-dlv-link a{text-decoration:underline;text-underline-offset:4px}

/* оплата — пары абзацев «способ» / «пояснение» */
.ss-dlv.ss-dlv-wrap .ss-dlv-pay{margin:0;padding:0;border-top:1px solid var(--ss-text)}
.ss-dlv.ss-dlv-wrap .ss-dlv-pay-t{font-weight:500;margin:0;padding:16px 0 4px}
.ss-dlv.ss-dlv-wrap .ss-dlv-pay-d{margin:0;padding:0 0 16px;border-bottom:1px solid var(--ss-line);color:var(--ss-text);line-height:1.6;max-width:640px}

/* FAQ — core/details под общий стиль (тонкие линии, иконка +/× справа — как задумано в CSS WPBakery-версии;
   там её перебивала дефолтная иконка js_composer слева) */
.ss-dlv.ss-dlv-wrap.ss-dlv-faq .ss-dlv-h2{margin-bottom:71px}
.ss-dlv.ss-dlv-faq details{margin:0;padding:0;border:0;border-bottom:1px solid var(--ss-line)}
.ss-dlv.ss-dlv-faq details:first-of-type{border-top:1px solid var(--ss-text)}
.ss-dlv.ss-dlv-faq summary{position:relative;margin:0;padding:16px 36px 16px 0;cursor:pointer;font-size:14px;letter-spacing:.02em;list-style:none}
.ss-dlv-faq summary::-webkit-details-marker{display:none}
.ss-dlv-faq summary::before,.ss-dlv-faq summary::after{content:"";position:absolute;right:0;top:50%;width:11px;height:1px;margin-top:-.5px;background:var(--ss-text);transition:transform .2s}
.ss-dlv-faq summary::after{transform:rotate(90deg)}
.ss-dlv-faq details[open] summary::after{transform:rotate(0)}
.ss-dlv.ss-dlv-faq details>p{margin:0;padding:0 36px 18px 0;color:var(--ss-muted);line-height:1.65}

/* CTA внизу */
.ss-dlv.ss-dlv-wrap+.ss-dlv.ss-dlv-cta{margin-top:43px}
.ss-dlv.ss-dlv-wrap.ss-dlv-cta{text-align:center;border-top:1px solid var(--ss-line);margin-bottom:35px}
.ss-dlv.ss-dlv-wrap .ss-dlv-cta-title{font-size:18px;letter-spacing:.14em;text-transform:uppercase;font-weight:300;margin:0 0 8px}
.ss-dlv.ss-dlv-wrap .ss-dlv-cta-text{color:var(--ss-muted);margin:0 0 20px}
.ss-dlv.ss-dlv-wrap .ss-dlv-cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.ss-dlv-cta-btns .btn{text-transform:none;letter-spacing:.04em}
.ss-dlv-redirect{padding:60px 0;text-align:center;color:var(--ss-muted)}

/* телефон: таблица → карточки (ТЗ п.11/14 — без горизонтальной прокрутки) */
@media (max-width:768.98px){
	.ss-dlv.ss-dlv-wrap.ss-dlv-hero{padding-top:28px}
	.ss-dlv.ss-dlv-wrap .ss-dlv-h1{font-size:26px}
	.ss-dlv.ss-dlv-wrap:not(.ss-dlv-hero){padding:28px 0}
	.ss-dlv.ss-dlv-wrap .ss-dlv-h2{scroll-margin-top:80px}
	.ss-dlv.ss-dlv-wrap.ss-dlv-faq .ss-dlv-h2{margin-bottom:63px}
	.ss-dlv-table thead{display:none}
	.ss-dlv.ss-dlv-wrap .ss-dlv-table table,.ss-dlv-table tbody,.ss-dlv-table tr,.ss-dlv.ss-dlv-wrap .ss-dlv-table td{display:block;width:100%}
	.ss-dlv.ss-dlv-wrap .ss-dlv-table tr{border-bottom:1px solid var(--ss-line);padding:14px 0}
	.ss-dlv.ss-dlv-wrap .ss-dlv-table td{border:0;padding:4px 0}
	/* ponytail: подписи колонок на телефоне зашиты здесь; переименуешь шапку таблицы — поправь и тут */
	.ss-dlv-table td:nth-child(2):before{content:"Срок"}
	.ss-dlv-table td:nth-child(3):before{content:"Стоимость"}
	.ss-dlv-table td:not(:first-child):before{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-muted);margin-bottom:2px}
	.ss-dlv.ss-dlv-wrap .ss-dlv-stores{grid-template-columns:1fr}
	.ss-dlv-cta-btns .btn{width:100%}
}
/* после @media намеренно: в WPBakery-версии тогглы FAQ лежали вне .ss-dlv-wrap, снизу у секции отступа не было — иначе CTA уезжает на 36px (28 на телефоне) */
.ss-dlv.ss-dlv-wrap.ss-dlv-faq{padding-bottom:0}
                      внутри списки .ss-vz-steps / .ss-vz-list и абзацы. Без JS: нативный <details>;
.ss-vz-steps { list-style: none; margin: 0; padding: 0; counter-reset: ssvz; }
.ss-vz-steps li {
.ss-vz-steps li:first-child { border-top: 0; padding-top: 4px; }
.ss-vz-steps li::before {
.ss-vz-steps li strong {
.ss-vz-steps li span { color: var(--color-gray-700, #58524C); }