/* tropa-fix.css — Дизайн 3 (2026-10-17): точечные скругления и мягкие линии там, где
   tropa.css их не покрывал (см. queue/evidence/dizajn-tropa-2026-10-17/02-nesootvetstviya.md).
   Подключается ПОСЛЕ tropa.css в header.twig. Переменные — те же, из tropa.css (:root там же).
   Только визуальные правки: тексты, цены, товары, письма, логика оформления не трогаются. */

/* ---------- п.4: всплывающие сообщения .alert ---------- */
.alert {
  --bs-alert-border-radius: 12px;
  border: 0;
}
.alert-success {
  --bs-alert-color: var(--dd-ink);
  --bs-alert-bg: var(--dd-badge);
  --bs-alert-border-color: var(--dd-line);
}
.alert-danger {
  --bs-alert-color: #8A2A1F;
  --bs-alert-bg: #FBEAEA;
  --bs-alert-border-color: #F0D4D4;
}
.alert-warning {
  --bs-alert-color: #6B4E12;
  --bs-alert-bg: #FBF1DD;
  --bs-alert-border-color: #F0E2BE;
}
.alert-info {
  --bs-alert-color: var(--dd-ink);
  --bs-alert-bg: var(--dd-soft);
  --bs-alert-border-color: var(--dd-line);
}

/* ---------- п.10: модальные окна (способ доставки и другие) ---------- */
.modal-content {
  --bs-modal-border-radius: 12px;
  border: 0;
  overflow: hidden;
}
.modal-header {
  background: var(--dd-soft);
  border-bottom: 1px solid var(--dd-line);
}

/* ---------- п.5: выпадающие меню шапки вне каталога («Ваш город?», «Личный кабинет», мини-корзина) ---------- */
.dropdown-menu {
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-border-color: var(--dd-line);
}

/* ---------- п.8–9: поля ввода и select вне строки поиска ---------- */
.form-control, .form-select {
  border-radius: 12px;
}

/* ---------- .card (где встречается на сайте) ---------- */
.card {
  --bs-card-border-radius: 12px;
}

/* ---------- .list-group (кроме #column-left/#column-right — у них свой радиус в tropa.css) ---------- */
.list-group {
  --bs-list-group-border-radius: 12px;
}

/* ---------- вкладки товара и прочие .nav-tabs ---------- */
.nav-tabs {
  --bs-nav-tabs-border-radius: 12px;
}

/* ---------- п.6: пагинация каталога/поиска — цвета «Тропы», отдельные скруглённые «таблетки» ---------- */
.pagination {
  gap: 4px;
}
.page-link {
  border-radius: 12px;
  margin-left: 0;
  border-color: var(--dd-line);
  color: var(--dd-ink);
}
.page-item.active .page-link {
  background: var(--dd-ink);
  border-color: var(--dd-ink);
  color: #fff;
}
.page-item.disabled .page-link {
  border-color: var(--dd-line);
  color: var(--dd-mut);
}

/* ---------- п.7: кнопки «−»/«+»/«убрать» в корзине — скругление в один ряд с «обновить» ---------- */
.btn-outline-secondary {
  --bs-btn-color: var(--dd-ink);
  --bs-btn-border-color: var(--dd-line);
  --bs-btn-hover-bg: var(--dd-soft);
  --bs-btn-hover-border-color: var(--dd-line);
  --bs-btn-hover-color: var(--dd-ink);
  border-radius: 12px;
}
.btn-danger {
  --bs-btn-bg: #D9534F;
  --bs-btn-border-color: #D9534F;
  --bs-btn-hover-bg: #C2413D;
  --bs-btn-hover-border-color: #C2413D;
  border-radius: 12px;
}

/* ---------- пп.1–2: таблицы — без «клетки», мягкие линии, фон шапки --dd-soft ----------
   Работает и там, где есть обёртка .table-responsive (корзина/оформление), и там, где
   таблица стоит прямо в выпадающей мини-корзине без обёртки (border-collapse:separate
   позволяет скруглить и клипнуть сам <table>, без правки twig). */
.table {
  --bs-table-border-color: var(--dd-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
}
.table-responsive {
  border-radius: 12px;
  overflow: hidden;
}
.table > thead > tr > th,
.table > thead > tr > td {
  background: var(--dd-soft);
  border-bottom: 1px solid var(--dd-line);
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0;
}
.table-bordered > :not(caption) > *:last-child > * {
  border-bottom-width: 0;
}

/* ---------- Итоги корзины и оформления — карточкой, как блоки на главной ---------- */
#output-cart tfoot#checkout-total,
#cart .dropdown-menu table.table-sm.table-bordered {
  background: var(--dd-soft);
}
#output-cart tfoot#checkout-total td,
#cart .dropdown-menu table.table-sm.table-bordered td {
  border-color: var(--dd-line);
  padding: 10px 14px;
}
#output-cart tfoot#checkout-total tr:last-child td,
#cart .dropdown-menu table.table-sm.table-bordered tr:last-child td {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--dd-ink);
}

/* 2026-10-17: мини-корзина — узкая карточка вместо широкой таблицы (cart.twig: .dd-mc) */
#cart .dd-mc { width: 380px; max-width: calc(100vw - 16px); padding: 12px; border-radius: 16px; box-shadow: 0 12px 32px rgba(23,32,27,.16); }
#cart .dd-mc-list { max-height: 52vh; overflow-y: auto; margin: -2px -4px 0; padding: 0 4px; }
#cart .dd-mc-item { display: grid; grid-template-columns: 56px 1fr auto 28px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--dd-line); }
#cart .dd-mc-item:first-child { padding-top: 2px; }
#cart .dd-mc-img { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--dd-soft); }
#cart .dd-mc-img img { width: 100%; height: 100%; object-fit: contain; }
#cart .dd-mc-info { min-width: 0; }
#cart .dd-mc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.3; color: var(--dd-text); text-decoration: none; }
#cart .dd-mc-name:hover { color: var(--dd-cta); }
#cart .dd-mc-meta { font-size: 12px; color: var(--dd-mut); margin-top: 2px; }
#cart .dd-mc-price { font-weight: 700; font-size: 14px; color: var(--dd-ink); white-space: nowrap; }
#cart .dd-mc-del { margin: 0; }
#cart .dd-mc-del button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--dd-soft); color: var(--dd-mut); font-size: 18px; line-height: 1; padding: 0; cursor: pointer; }
#cart .dd-mc-del button:hover { background: #FBE3D6; color: var(--dd-cta); }
#cart .dd-mc-totals { background: var(--dd-soft); border-radius: 12px; padding: 8px 12px; margin-top: 10px; }
#cart .dd-mc-total { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--dd-mut); padding: 2px 0; }
#cart .dd-mc-grand { font-size: 16px; font-weight: 700; color: var(--dd-ink); padding-top: 4px; }
#cart .dd-mc .btn-primary { border-radius: 12px; padding: 10px; font-weight: 700; }
#cart .dd-mc-cart { color: var(--dd-mut); padding: 4px 0 0; }
#cart .dd-mc-cart:hover { color: var(--dd-ink); }
@media (max-width: 575.98px) {
  #cart .dd-mc { width: calc(100vw - 16px); }
  /* на телефоне цена под названием — названию вся ширина */
  #cart .dd-mc-item { grid-template-columns: 48px 1fr 28px; grid-template-areas: "img info del" "img price del"; gap: 2px 10px; }
  #cart .dd-mc-img { grid-area: img; width: 48px; height: 48px; align-self: start; }
  #cart .dd-mc-info { grid-area: info; }
  #cart .dd-mc-price { grid-area: price; font-size: 13.5px; }
  #cart .dd-mc-del { grid-area: del; align-self: center; }
  #cart .dd-mc-name { -webkit-line-clamp: 3; }
}

/* 2026-10-18: «В корзину» в узких карточках (корзина → «С этим товаром покупают», 220px) переносилась на 2 строки и наезжала на название и цвета. Текст в одну строку; в карточке уже 260px прячем «Сравнить». */
.product-thumb{container-type:inline-size}
.product-thumb .button button:first-child{white-space:nowrap;min-width:0}
@container (max-width:260px){.product-thumb .button button:last-child:not(:first-child){display:none}}

/* 2026-10-19: карточки «Почему покупают у нас» — ссылки: подсветка при наведении */
a.dd-why-i{transition:box-shadow .15s,transform .15s}
a.dd-why-i:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-2px)}
a.dd-why-i:hover .dd-why-t{text-decoration:underline}
/* 2026-10-19: страница «Доставка и оплата» — визуальный вид (карточки, шаги, «Подробнее») */
.dd-g{margin:0 0 24px}
.dd-g *{box-sizing:border-box}
.dd-g-hero{background:var(--dd-ink);color:#fff;border-radius:16px;padding:28px 28px 26px;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.dd-g-hero h2{color:#fff;font-size:28px;line-height:1.15;margin:0 0 6px;font-weight:800}
.dd-g-hero p{margin:0;color:#D5E3D8;font-size:16px}
.dd-g-btn{display:inline-block;background:var(--dd-cta);color:#fff!important;font-weight:700;font-size:16px;padding:13px 24px;border-radius:12px;text-decoration:none!important;white-space:nowrap}
.dd-g-btn:hover{background:var(--dd-cta-hover)}
.dd-g h3.dd-g-h{font-size:24px;font-weight:800;color:var(--dd-ink);margin:30px 0 14px;scroll-margin-top:90px}
.dd-g-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 16px}
.dd-g-step{background:var(--dd-soft);border-radius:14px;padding:16px 16px 14px;position:relative}
.dd-g-num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--dd-acc);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:8px}
.dd-g-step b{display:block;color:var(--dd-ink);font-size:17px;line-height:1.25;margin-bottom:2px}
.dd-g-step span{color:var(--dd-mut);font-size:14px;line-height:1.4}
.dd-g-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 8px}
.dd-g-card{background:#fff;border:1px solid var(--dd-line);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px}
.dd-g-ico{width:48px;height:48px;border-radius:12px;background:var(--dd-ink);display:flex;align-items:center;justify-content:center}
.dd-g-ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dd-g-card:nth-child(2) .dd-g-ico{background:var(--dd-cta)}
.dd-g-card b.dd-g-t{font-size:19px;line-height:1.2;color:var(--dd-ink)}
.dd-g-card .dd-g-s{color:var(--dd-mut);font-size:14.5px;line-height:1.4;margin:0}
.dd-g-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.dd-g-tag{background:var(--dd-badge);color:var(--dd-ink);font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px}
.dd-g-tag.hot{background:#FDE7D6;color:#9A3412}
.dd-g-note{background:var(--dd-badge);border-radius:12px;padding:12px 16px;color:var(--dd-ink);font-size:15px;margin:10px 0 0}
.dd-g-more{border:1px solid var(--dd-line);border-radius:12px;margin:18px 0 0;background:#fff}
.dd-g-more summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--dd-ink);font-size:16px;list-style:none}
.dd-g-more summary::after{content:" ▾";color:var(--dd-acc)}
.dd-g-more[open] summary::after{content:" ▴"}
.dd-g-more .dd-g-in{padding:0 18px 14px;font-size:15px}
.dd-g-more table{width:100%;border-collapse:collapse;margin:8px 0}
.dd-g-more th,.dd-g-more td{border:1px solid var(--dd-line);padding:6px 8px;vertical-align:top;font-size:14px}
.dd-g-more th{background:var(--dd-soft)}
.dd-g-end{text-align:center;margin:30px 0 8px}
.dd-g-fine{color:var(--dd-mut);font-size:13px;text-align:center;border-top:1px solid var(--dd-line);padding-top:12px;margin-top:20px}
@media (max-width:991.98px){.dd-g-cards,.dd-g-steps{grid-template-columns:1fr}.dd-g-hero{padding:20px}.dd-g-hero h2{font-size:23px}}
.dd-g-step .dd-g-num{color:#fff;font-size:16px;line-height:1}
.dd-g-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-22px;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--dd-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/16px no-repeat;z-index:2;box-shadow:0 0 0 3px #fff}
@media (max-width:991.98px){.dd-g-step:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:-22px;margin:0 0 0 -15px;transform:rotate(90deg)}.dd-g-steps{gap:26px}}
#content:has(.dd-g)>h1{display:none}

/* 2026-10-19 (2): шаги — «дорожка» с пунктирной линией вместо карточек со стрелками; таблица «Подробнее» со скруглением */
.dd-g-step{background:none;border-radius:0;padding:0 20px 0 0}
.dd-g-step .dd-g-num{width:46px;height:46px;font-size:20px;margin-bottom:12px;box-shadow:0 0 0 6px #FDE7D6}
.dd-g-step:not(:last-child)::after{content:"";position:absolute;top:23px;left:64px;right:6px;width:auto;height:0;margin:0;border:0;border-top:3px dotted #F2A56B;border-radius:0;background:none;box-shadow:none;transform:none}
.dd-g-step b{font-size:18px}
.dd-g-more table{border-collapse:separate;border-spacing:0;border:1px solid var(--dd-line);border-radius:14px;overflow:hidden;margin:10px 0 14px}
.dd-g-more th,.dd-g-more td{border:0;border-bottom:1px solid var(--dd-line);padding:11px 14px}
.dd-g-more tbody tr:last-child td{border-bottom:0}
.dd-g-more th{background:var(--dd-badge);color:var(--dd-ink);font-weight:700;text-align:left}
.dd-g-more tbody tr:nth-child(even) td{background:var(--dd-soft)}
@media (max-width:991.98px){
 .dd-g-steps{gap:6px}
 .dd-g-step{padding:0 0 22px 64px;min-height:46px}
 .dd-g-step .dd-g-num{position:absolute;left:0;top:0;margin:0}
 .dd-g-step:not(:last-child)::after{top:52px;bottom:4px;left:22px;right:auto;width:0;height:auto;border-top:0;border-left:3px dotted #F2A56B}
 .dd-g-more table{display:block;overflow-x:auto}
}
/* 2026-10-19: полоска «Как заказать» на главной */
.dd-g-home{margin:0 0 26px;padding:18px 20px 6px;background:#fff;border:1px solid var(--dd-line);border-radius:16px}
.dd-g-home .dd-g-steps{margin:0 0 6px}
.dd-g-home .dd-g-step b{font-size:16px}
.dd-g-home .dd-g-step .dd-g-num{width:40px;height:40px;font-size:18px}
.dd-g-home .dd-g-step:not(:last-child)::after{top:20px;left:58px}
.dd-g-homelink{margin:4px 0 10px;text-align:right;font-weight:600}
.dd-g-homelink a{color:var(--dd-cta)}
@media(max-width:991.98px){.dd-g-home .dd-g-step:not(:last-child)::after{top:46px;left:19px}.dd-g-homelink{text-align:left}}

/* 2026-10-20: страница «О нас» — свидетельство на товарный знак */
.dd-g-cert{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;background:var(--dd-soft);border-radius:16px;padding:20px}
.dd-g-cert img{display:block;width:320px;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--dd-line);box-shadow:0 4px 16px rgba(0,0,0,.12);background:#fff}
.dd-g-cert>div{flex:1 1 280px}
.dd-g .dd-why{margin:0 0 6px}