/* ==================================================================
   Логопрофистор — стили карточки товара и кнопки покупки в каталоге.
   Файл отдельный: lp-final.css правит другой агент, общая правка
   ломала бы работу обоих. Подключается <link> из шаблонов вывода
   товара (RecordTemplate.html и RecordTemplateFull.html).

   Правки Андрея:
     п.1 — кнопка купленного материала («Открыть материал»);
     п.3 — кнопка покупки терракотовая и крупнее;
     п.4 — вкладки разделов на странице товара.
   ================================================================== */

:root {
  /* дублируем фирменные значения: файл может подключиться раньше
     lp-final.css, а без переменной кнопка осталась бы прозрачной */
  --lp-terra-btn: #C4643A;   /* заливка кнопки */
  --lp-terra-btn-dark: #A9522C; /* наведение и нажатие */
}

/* ------------------------------------------------------------------
   п.3. Кнопка покупки — терракотовая и крупнее.
   Базовые правила стоят в Header.html с !important, поэтому берём
   специфичностью (два класса в селекторе), а не порядком подключения.
   ------------------------------------------------------------------ */
.item-card .item-card__cart-btn,
.item-card .item-card__cart-form button,
.item-full .item-full__cart-btn,
.lp-buy-box .item-full__cart-btn,
.lp-sticky-buy .lp-sticky-buy__btn {
  background: var(--lp-terra-btn, #C4643A) !important;
  border-color: var(--lp-terra-btn, #C4643A) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 12px !important;
}

.item-card .item-card__cart-btn:hover,
.item-card .item-card__cart-form button:hover,
.item-full .item-full__cart-btn:hover,
.lp-buy-box .item-full__cart-btn:hover,
.lp-sticky-buy .lp-sticky-buy__btn:hover {
  background: var(--lp-terra-btn-dark, #A9522C) !important;
  border-color: var(--lp-terra-btn-dark, #A9522C) !important;
  color: #fff !important;
}

/* «чуть крупнее»: в карточке каталога кнопка была 38px высотой */
.item-card .item-card__cart-btn,
.item-card .item-card__cart-form button {
  min-height: 44px;
  padding: 11px 18px !important;
  font-size: 15.5px !important;
}

/* на странице товара кнопка — главный элемент экрана покупки */
.lp-buy-box .item-full__cart-btn {
  min-height: 52px;
  padding: 14px 26px !important;
  font-size: 17.5px !important;
  letter-spacing: .01em;
}

.lp-sticky-buy .lp-sticky-buy__btn {
  min-height: 48px;
  font-size: 16px !important;
}

/* видимая обводка при фокусе с клавиатуры: заливка терракоты тёмная,
   стандартное синее кольцо на ней читается плохо */
.item-card .item-card__cart-btn:focus-visible,
.item-card .item-card__cart-form button:focus-visible,
.item-full .item-full__cart-btn:focus-visible,
.lp-sticky-buy .lp-sticky-buy__btn:focus-visible {
  outline: 3px solid #F0B49A;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   п.1. Материал уже куплен — вместо покупки вход в личный кабинет.
   Кнопка нарочно НЕ терракотовая: терракота = «заплатить», а здесь
   платить не надо, иначе человек решит, что списали второй раз.
   ------------------------------------------------------------------ */
.lp-btn-owned,
.item-card .item-card__cart-btn.lp-btn-owned,
.item-full .item-full__cart-btn.lp-btn-owned,
.lp-buy-box .item-full__cart-btn.lp-btn-owned,
.lp-sticky-buy .lp-btn-owned {
  background: #fff !important;
  border: 1.5px solid var(--lp-teal, #155E54) !important;
  color: var(--lp-teal, #155E54) !important;
  font-weight: 700;
  border-radius: 12px !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lp-btn-owned:hover,
.item-card .item-card__cart-btn.lp-btn-owned:hover,
.item-full .item-full__cart-btn.lp-btn-owned:hover,
.lp-buy-box .item-full__cart-btn.lp-btn-owned:hover {
  background: var(--tpl-color-brand-lightest, #E2EFE9) !important;
  color: var(--lp-teal-dark, #0F4A42) !important;
}

/* галочка перед подписью — статус «уже ваше» читается без чтения текста */
.lp-btn-owned::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  /* маска-галочка: не тянем иконочный шрифт ради одного символа */
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.3 2.3 8.4l1.4-1.4 2.5 2.5 6-6L13.6 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.3 2.3 8.4l1.4-1.4 2.5 2.5 6-6L13.6 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* подпись «куплено» над ценой: объясняет, почему нет кнопки покупки */
.lp-owned-note {
  display: block;
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lp-teal, #155E54);
}

/* ------------------------------------------------------------------
   п.4. Вкладки разделов страницы товара.
   Содержимое всех вкладок остаётся в разметке (поисковику нужен весь
   текст), скрытые панели прячем стилем.
   ------------------------------------------------------------------ */
.lp-tabs-wrap {
  margin: 34px 0 0;
}

.lp-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0 0 2px;
  border-bottom: 1px solid var(--lp-line, #DFD4C2);
  /* на телефоне вкладки не переносим, а прокручиваем: перенос давал
     три ряда кнопок и съедал первый экран */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lp-tabs::-webkit-scrollbar { display: none; }

.lp-tab {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lp-muted, #6B6154);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.lp-tab:hover {
  color: var(--lp-ink, #2E2A23);
  background: var(--lp-sand, #FBF7F0);
}

.lp-tab[aria-selected="true"] {
  color: var(--lp-terra-btn-dark, #A9522C);
  border-bottom-color: var(--lp-terra-btn-dark, #A9522C);
  font-weight: 700;
}

.lp-tab:focus-visible {
  outline: 2px solid var(--lp-terra-btn-dark, #A9522C);
  outline-offset: -2px;
}

/* панели: прячем стилем, а не атрибутом hidden — текст остаётся в HTML */
.lp-tabpanel { display: none; }
.lp-tabpanel.is-active { display: block; }

/* пока JS не отработал, показываем первую панель, чтобы страница
   не мигала пустотой */
.lp-tabs-wrap:not(.is-ready) .lp-tabpanel:first-of-type { display: block; }

/* заголовок раздела внутри панели дублировал бы подпись вкладки —
   оставляем его в разметке для структуры документа, но скрываем */
.lp-tabpanel > .item-full__section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lp-tabpanel.item-full__section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .lp-tabs { gap: 2px; margin-bottom: 18px; }
  .lp-tab { padding: 11px 13px; font-size: 15px; }
  .lp-tabs-wrap { margin-top: 26px; }
}

/* #4: убрать мёртвую зону под вкладками — панель не должна тащить свой верхний отступ, зазор задаёт только margin-bottom вкладок */
.lp-tabs-wrap .lp-tabpanel.item-full__section{margin-top:0 !important;padding-top:0 !important;border-top:0 !important}

/* #3: богатый текст программы (визуальный редактор) */
.lp-rich{line-height:1.6}
.lp-rich > *:first-child{margin-top:0}
.lp-rich > *:last-child{margin-bottom:0}
.lp-rich p{margin:0 0 12px}
.lp-rich ul,.lp-rich ol{margin:0 0 12px;padding-left:22px}
.lp-rich ul{list-style:disc}
.lp-rich ol{list-style:decimal}
.lp-rich li{margin:0 0 6px}
.lp-rich strong,.lp-rich b{font-weight:700}
.lp-rich em,.lp-rich i{font-style:italic}
.lp-rich a{color:var(--lp-terra-btn-dark,#A9522C);text-decoration:underline}
.lp-rich h3,.lp-rich h4{margin:16px 0 8px;font-weight:700;line-height:1.3}