/* ═══════════════════════════════════════════════════════════════════════════
   CSD MCR — стилі блоку рекомендацій (ітерація 3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Загальний блок ────────────────────────────────────────────────────── */
.csd-mcr-block { margin: 20px 0; }
.csd-mcr-block__title { margin-bottom: 12px; font-size: 1.05em; }

/* ─── Базова картка (спільні властивості для всіх варіантів) ────────────── */
.csd-mcr-card {
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Код аналізу — дрібний, сірий (#6b7785 = 4.6:1 на білому, WCAG AA) */
.csd-mcr-card__code {
  font-size: 11px;
  color: #6b7785;
  letter-spacing: 0.03em;
}

.csd-mcr-card__title {
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
}

.csd-mcr-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef4ff;
  font-size: 12px;
  align-self: flex-start;
}

.csd-mcr-card__price {
  font-weight: 700;
  white-space: nowrap;
  margin-top: auto;
}

/* ─── Іконка кнопки «Додати» (патерн каталогу, дискавері Task 14) ────────── */
.csd-mcr-card .add {
  position: relative;
  cursor: pointer;
  background: url("/themes/personal/images/ico_add-4.svg?sdtg") no-repeat center;
  width: 37px;
  height: 38px;
  font-size: 0;
  display: inline-block;
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: 4px;
}

.csd-mcr-card .add:before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: -1px;
  left: -10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: url("/themes/personal/images/ico_add-2.svg") no-repeat center #89DC65;
}

/* hover лише на пристроях із курсором — на тачі стан «залипає» після тапу */
@media (hover: hover) {
  .csd-mcr-card .add:hover:before {
    background-image: url("/themes/personal/images/ico_add-3.svg");
    background-color: #201747;
  }
}

/* I3: клавіатурна доступність — видимий фокус для кнопки-іконки */
.csd-mcr-card .add:focus-visible {
  outline: 2px solid #201747;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRIP — горизонтальна стрічка 4 міні-карток (детальна сторінка analyzes)
   ═══════════════════════════════════════════════════════════════════════════ */

.csd-mcr-block--strip .csd-mcr-block__title {
  font-size: 1em;
  margin-bottom: 10px;
}

/* Горизонтальна сітка 4 рівних колонки */
.csd-mcr-cards--strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Міні-картка strip: компактна; висоту задає контент (grid вирівнює ряд).
   Без space-between: price притискається до низу через margin-top:auto —
   ціни сусідніх карток стають на одну лінію незалежно від висоти назви. */
.csd-mcr-card--strip {
  padding: 10px;
  gap: 4px;
  min-height: 140px;
}

.csd-mcr-card--strip .csd-mcr-card__code {
  font-size: 10px;
  flex-shrink: 0;
}

/* Назва: ≤3 рядки, line-clamp. БЕЗ flex-grow: розтяг бокса понад кліпнуті
   рядки змушує браузер домальовувати шматок наступного рядка (вертикальний
   «зріз» літер). */
.csd-mcr-card--strip .csd-mcr-card__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
}

/* Бейдж в strip — не показуємо */
.csd-mcr-card--strip .csd-mcr-card__badge {
  display: none;
}

.csd-mcr-card--strip .csd-mcr-card__price {
  font-size: 13px;
  margin-top: auto;
  flex-shrink: 0;
}

.csd-mcr-card--strip .add {
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: 0;
}

/* Mobile ≤768px: горизонтальний скрол */
@media (max-width: 768px) {
  .csd-mcr-cards--strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
  }
  /* Ширина від контейнера (42%): на будь-якому в'юпорті 3-тя картка
     частково видима — скрол-аффорданс (на 390px рівно 2×160px давали
     нульовий «визир» — список виглядав як 2 картки без скролу). */
  .csd-mcr-card--strip {
    flex: 0 0 clamp(140px, 42%, 160px);
    min-height: 130px;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROWS + POPUP — компактні рядки (спільні стилі)
   rows: кошик /basket; popup: попап add_to_basket
   ═══════════════════════════════════════════════════════════════════════════ */

.csd-mcr-block--rows .csd-mcr-block__title,
.csd-mcr-block--popup .csd-mcr-block__title {
  font-size: 0.95em;
  margin-bottom: 10px;
}

/* Вертикальний список рядків */
/* Без max-width: у кошику рядки займають усю ліву колонку двоколонки
   (як таблиця кошика вище); у попапі ширину природно обмежує сам попап. */
.csd-mcr-cards--rows,
.csd-mcr-cards--popup {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Компактний рядок: [код | назва | ціна | іконка].
   Вертикальний ритм = рядок таблиці кошика (~50px): 5px паддінг + іконка 38px. */
.csd-mcr-card--rows,
.csd-mcr-card--popup {
  border: none;
  border-bottom: 1px solid #e3e6ea;
  border-radius: 0;
  padding: 5px 4px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.csd-mcr-card--rows:last-child,
.csd-mcr-card--popup:last-child {
  border-bottom: none;
}

/* Код — фіксована ширина, не стискається */
.csd-mcr-card--rows .csd-mcr-card__code,
.csd-mcr-card--popup .csd-mcr-card__code {
  flex: 0 0 48px;
  font-size: 11px;
  color: #6b7785;
}

/* Назва — займає залишок, обрізається ellipsis */
.csd-mcr-card--rows .csd-mcr-card__title,
.csd-mcr-card--popup .csd-mcr-card__title {
  flex: 1 1 auto;
  font-weight: 500;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Бейдж — не показуємо (місця мало) */
.csd-mcr-card--rows .csd-mcr-card__badge,
.csd-mcr-card--popup .csd-mcr-card__badge {
  display: none;
}

/* Ціна — фіксована ширина праворуч від назви */
.csd-mcr-card--rows .csd-mcr-card__price,
.csd-mcr-card--popup .csd-mcr-card__price {
  flex: 0 0 auto;
  font-size: 0.9em;
  margin-top: 0;
  white-space: nowrap;
}

/* Іконка в рядку. margin-left компенсує :before-плюсик (left:-10px),
   щоб він не наїжджав на ціну. */
.csd-mcr-card--rows .add,
.csd-mcr-card--popup .add {
  flex: 0 0 37px;
  align-self: center;
  margin-top: 0;
  margin-left: 12px;
}

/* Mobile ≤600px: grid 2 ряди — назва на всю ширину зверху, під нею
   метарядок [код | ціна | іконка]. Попередній flex-wrap гарантовано
   (сума basis > 100%) переносив іконку на окремий рядок зліва.
   Чому 600, а не 480: попап обмежений в'юпортом до ~570px (вище —
   фіксовані ~560px = затверджені desktop-умови), тож у смузі 481–600
   однорядковий патерн різав назву ellipsis'ом до ~30 символів. */
@media (max-width: 600px) {
  .csd-mcr-card--rows,
  .csd-mcr-card--popup {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "title title title"
      "code  price add";
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 8px 4px;
    /* Тема центрує текст у попапі (успадковано) — багаторядкові назви
       читабельніші зліва; у кошику й так зліва (no-op). */
    text-align: left;
  }

  .csd-mcr-card--rows .csd-mcr-card__title,
  .csd-mcr-card--popup .csd-mcr-card__title {
    grid-area: title;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
  }

  .csd-mcr-card--rows .csd-mcr-card__code,
  .csd-mcr-card--popup .csd-mcr-card__code {
    grid-area: code;
  }

  .csd-mcr-card--rows .csd-mcr-card__price,
  .csd-mcr-card--popup .csd-mcr-card__price {
    grid-area: price;
    justify-self: end;
  }

  /* Іконка праворуч. margin-left:12px зі спільного правила діє й тут:
     12 (margin) + 10 (column-gap) = 22px від ціни, плюсик :before
     звисає на 10px вліво → 12px кліренсу, наїзду на ціну немає. */
  .csd-mcr-card--rows .add,
  .csd-mcr-card--popup .add {
    grid-area: add;
    justify-self: end;
    align-self: center;
  }

  /* Кнопка «Замінити» в банері комплексу — повноцінний touch-target */
  .csd-mcr-subs__btn {
    padding: 8px 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   БЛОК ЗАМІН НА КОМПЛЕКС — «Можливо, варто комплекс?»
   .csd-mcr-subs — секція всередині слота, після списку карток.
   ═══════════════════════════════════════════════════════════════════════════ */

.csd-mcr-subs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #d8e6d2;
}

.csd-mcr-subs__title {
  font-size: 0.9em;
  font-weight: 600;
  color: #2e5e22;
  margin: 0 0 8px;
}

/* Банер одного комплексу. text-align:left — у попапі тема центрує текст
   (успадковано): назва-лінк центрувалась, а flex-діти лишались зліва. */
.csd-mcr-subs__banner {
  background: #f4f9f1;
  border: 1px solid #c8e0be;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
  text-align: left;
}

.csd-mcr-subs__banner:last-child {
  margin-bottom: 0;
}

/* Назва комплексу — посилання */
.csd-mcr-subs__complex-title {
  font-weight: 600;
  font-size: 0.92em;
  text-decoration: none;
  color: #201747;
  line-height: 1.3;
}

.csd-mcr-subs__complex-title:hover {
  text-decoration: underline;
}

/* Рядок «M з N досліджень уже в кошику» */
.csd-mcr-subs__coverage {
  font-size: 0.82em;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Chip-і кодів компонентів */
.csd-mcr-subs__chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e0e4e8;
  color: #444;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Бейдж вигоди */
.csd-mcr-subs__savings-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #89DC65;
  color: #1a3a10;
  font-weight: 700;
  font-size: 0.85em;
  align-self: flex-start;
}

/* Кнопка «Замінити» — секондарі-стиль (бордер + hover) */
.csd-mcr-subs__btn {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #3e7e2a;
  border-radius: 6px;
  background: transparent;
  color: #2e5e22;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}

.csd-mcr-subs__btn:hover {
  background: #2e5e22;
  color: #fff;
}

.csd-mcr-subs__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Попап: компактний банер (~80-100 px висоти) ── */
/* Відступ між нашим слотом і кнопками попапа («Продовжити»/«Оформити»). */
.csd-mcr-slot--popup {
  margin-bottom: 22px;
}

.csd-mcr-subs--popup .csd-mcr-subs__banner {
  padding: 8px 10px;
  gap: 4px;
}

.csd-mcr-subs--popup .csd-mcr-subs__complex-title {
  font-size: 0.88em;
}

.csd-mcr-subs--popup .csd-mcr-subs__coverage {
  font-size: 0.78em;
}

.csd-mcr-subs--popup .csd-mcr-subs__savings-badge {
  font-size: 0.8em;
  padding: 1px 6px;
}

.csd-mcr-subs--popup .csd-mcr-subs__btn {
  font-size: 0.8em;
  padding: 4px 10px;
}

/* Банери займають всю ширину секції */
.csd-mcr-subs--rows .csd-mcr-subs__banner {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .csd-mcr-subs--rows .csd-mcr-subs__banner {
    padding: 8px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ДВОКОЛОНКА КОШИКА
   .basket_page_wrapper.csd-mcr-two-col — CSS grid 2 колонки.
   .items_wrapper і .links_wrapper — на всю ширину.
   .csd-mcr-slot (MCR, ліво) + .csd-mcr-basket-right (сума/кнопки, право) — ряд 3.
   Тільки наш CSS — файли теми Глянця не змінено.
   ═══════════════════════════════════════════════════════════════════════════ */

.basket_page_wrapper.csd-mcr-two-col {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 32px;
  align-items: start;
}

/* items_wrapper і links_wrapper займають обидві колонки */
.basket_page_wrapper.csd-mcr-two-col .items_wrapper,
.basket_page_wrapper.csd-mcr-two-col .links_wrapper {
  grid-column: 1 / -1;
}

/* MCR слот — ліва колонка (col 1), рядок 3 */
.basket_page_wrapper.csd-mcr-two-col .csd-mcr-slot {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;  /* дозволяє стискатись */
}

/* Правий блок (сума + кнопки Глянця) — права колонка (col 2), рядок 3 */
.basket_page_wrapper.csd-mcr-two-col .csd-mcr-basket-right {
  grid-column: 2;
  grid-row: 3;
}

/* Mobile ≤768px: стек — кнопки/сума ВИЩЕ, рекомендації нижче */
@media (max-width: 768px) {
  .basket_page_wrapper.csd-mcr-two-col {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .basket_page_wrapper.csd-mcr-two-col .csd-mcr-basket-right {
    grid-column: 1;
    grid-row: 3;
  }
  .basket_page_wrapper.csd-mcr-two-col .csd-mcr-slot {
    grid-column: 1;
    grid-row: 4;
  }
}