/* ==========================================================================
   Інформаційні сторінки: доставка і оплата, гарантія і повернення.
   ПК ≥1280: ліва панель (каталог) · текст · права панель (зміст + допомога).
   Менше — права панель ховається, текст на всю ширину (RULES.md П4–П20)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Верх сторінки: заголовок, короткий опис, головні факти
   -------------------------------------------------------------------------- */
.ihero {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.ihero__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ihero h1 {
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.ihero__lead {
  max-width: 760px;
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--c-text-2);
}

/* Головні факти — 4 плитки в ряд */
.ifacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.ifact {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}

.ifact__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
}

.ifact__ico img {
  display: block;
}

.ifact__ico--accent { background: var(--c-accent-soft); color: var(--c-accent); }
.ifact__ico--blue { background: var(--cat-blue-soft); color: var(--cat-blue); }
.ifact__ico--green { background: var(--c-success-soft); color: var(--c-success); }
.ifact__ico--violet { background: var(--cat-violet-soft); color: var(--cat-violet); }
.ifact__ico--np { background: var(--c-danger-soft); }

.ifact__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--c-text-3);
}

.ifact__text b {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Розділ сторінки
   -------------------------------------------------------------------------- */
.iblock {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--c-text-2);
}

.iblock h2 {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.iblock h3 {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--c-text);
}

.iblock b,
.iblock strong {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.iblock a:not(.btn) {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

.iblock a:not(.btn):hover {
  color: var(--c-accent);
}

/* Група всередині розділу: підзаголовок + текст */
.igroup {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Список з іконками-галочками / хрестиками */
.ilist {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ilist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Іконка — по центру першого рядка тексту */
.ilist li > svg.lucide {
  flex: none;
  margin-top: calc((1.6em - 16px) / 2);
  color: var(--c-success);
}

.ilist--no li > svg.lucide {
  color: var(--c-danger);
}

/* --------------------------------------------------------------------------
   Способи доставки — картки в ряд
   -------------------------------------------------------------------------- */
.iways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

.iway {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}

.iway__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.iway__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  color: var(--c-danger);
}

.iway__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-text);
}

.iway__rows {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-14);
}

.iway__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 7px 0;
  box-shadow: inset 0 -1px 0 var(--c-line);
}

.iway__row:last-child {
  box-shadow: none;
}

.iway__row dt {
  color: var(--c-text-3);
}

.iway__row dd {
  text-align: right;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.iway__note {
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   Кроки (як оформити повернення / гарантійний випадок)
   -------------------------------------------------------------------------- */
.isteps {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  counter-reset: step;
}

.isteps li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  counter-increment: step;
}

.isteps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-counter);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  line-height: 1;
  /* по центру першого рядка тексту */
  margin-top: calc((1.6em - 28px) / 2);
}

.isteps__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Примітка (правова довідка, важливе): лише кольоровий фон і текст, БЕЗ іконки (RULES.md П23)
   -------------------------------------------------------------------------- */
.inote {
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--c-info-soft);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--c-text-2);
}

.inote--warn {
  background: var(--c-warning-soft);
}

/* --------------------------------------------------------------------------
   Таблиця строків
   -------------------------------------------------------------------------- */
.iterms {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-14);
}

.iterms__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 10px 12px;
  border-radius: var(--r-sm);
}

.iterms__row:nth-child(odd) {
  background: var(--c-surface-2);
}

.iterms__row dt {
  color: var(--c-text-2);
}

.iterms__row dd {
  flex: none;
  text-align: right;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Питання та відповіді
   -------------------------------------------------------------------------- */
.ifaq {
  display: flex;
  flex-direction: column;
}

.ifaq .acc {
  box-shadow: inset 0 -1px 0 var(--c-line);
}

.ifaq .acc:last-child {
  box-shadow: none;
}

.ifaq .acc__head {
  min-height: 52px;
  padding: 12px 0;
  font-size: var(--fs-15);
  color: var(--c-text);
}

.ifaq .acc__head:hover {
  color: var(--c-accent-text);
}

.ifaq .acc__inner > p {
  padding-bottom: var(--s-4);
  font-size: var(--fs-14);
}

/* --------------------------------------------------------------------------
   Реквізити продавця і закони
   -------------------------------------------------------------------------- */
.ireq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.ireq__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  font-size: var(--fs-14);
  line-height: 1.45;
}

.ireq__item dt {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ireq__item dd {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.ilaws {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-14);
}

.ilaws li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ilaws li > svg.lucide {
  flex: none;
  margin-top: calc((1.6em - 16px) / 2);
  color: var(--c-text-3);
}

.iupdated {
  font-size: var(--fs-13);
  color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   Права панель: зміст сторінки + «Залишились питання?»
   -------------------------------------------------------------------------- */
.panel--toc .panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
}

.toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc__title {
  padding: 2px 10px 8px;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.toc a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 10px 6px 14px;
  border-radius: var(--r-control);
  font-size: var(--fs-14);
  line-height: 1.3;
  color: var(--c-text-2);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.toc a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background-color var(--t-fast);
}

.toc a:hover {
  background: var(--c-active);
  color: var(--c-text);
}

.toc a.is-active {
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.toc a.is-active::before {
  background: var(--c-accent);
}

.ihelp {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}

.ihelp__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.ihelp__text {
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--c-text-3);
}

.ihelp__phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ihelp__phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}

.ihelp__phone:hover {
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Вкладки довідки (чипи під крихтами) і панелі вкладок
   -------------------------------------------------------------------------- */
.help-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.help-panel[hidden] {
  display: none;
}

.help-tabs .chip svg.lucide {
  color: var(--c-text-3);
  transition: color var(--t-fast);
}

.help-tabs .chip.is-active svg.lucide {
  color: currentColor;
}

/* --------------------------------------------------------------------------
   Юридичні документи (оферта, політика): нумеровані розділи й пункти
   -------------------------------------------------------------------------- */
.idoc-hero {
  gap: var(--s-3);
}

.idoc__num {
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
}

.idoc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.idoc__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.idoc__n {
  flex: none;
  min-width: 36px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.chip[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Контакти: картки телефонів, месенджерів, пошти
   -------------------------------------------------------------------------- */
.icontacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

.icontact {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
  text-decoration: none;
  transition: background-color var(--t-fast), transform var(--t-fast);
}

.iblock a.icontact {
  text-decoration: none;
  color: inherit;
}

.icontact:hover {
  background: var(--c-active);
}

.icontact:active {
  transform: scale(0.98);
}

.icontact__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.icontact__ico.msg-dot--tg { background: #26a5e4; }
.icontact__ico.msg-dot--viber { background: #7360f2; }

.icontact__ico.msg-dot img {
  width: 20px;
  height: 20px;
}

.icontact__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--c-text-3);
}

.icontact__text b {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.icontact > .op-logo,
.icontact__go {
  flex: none;
}

.icontact__go {
  color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   Адаптивність
   -------------------------------------------------------------------------- */
/* Права панель ховається — текст на всю ширину */
@media (max-width: 1279px) {
  .shell--info .panel--toc {
    display: none;
  }
}

@media (max-width: 1199px) {
  .icontacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iways {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .ihero,
  .iblock {
    padding: var(--s-4);
  }

  .ihero {
    gap: var(--s-4);
  }

  .ihero h1 {
    font-size: var(--fs-22);
  }

  .iblock {
    gap: var(--s-3);
  }

  .iblock h2 {
    font-size: var(--fs-18);
  }

  .ifacts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .ireq,
  .icontacts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .help-panel {
    gap: var(--s-4);
  }

  .idoc__list li {
    gap: var(--s-2);
  }

  .idoc__n {
    min-width: 30px;
  }

  /* Строки: назва і значення одне під одним — довгі значення не стискають текст */
  .iterms__row {
    flex-direction: column;
    gap: 2px;
  }

  .iterms__row dd {
    text-align: left;
  }
}