/* ── Info Pages (Доставка, Оплата, Возврат, etc.) ── */
.sl-info { max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; color: #f0eeff; }
.sl-info h1 {
  font-family: var(--f-display, 'Unbounded', sans-serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.1;
}
.sl-info .sl-info__sub {
  font-size: 16px;
  color: rgba(240,238,255,.5);
  margin-bottom: 48px;
}

/* Section cards */
.sl-info__section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
}
.sl-info__section h2 {
  font-family: var(--f-display, 'Unbounded', sans-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sl-info__section h2 .sl-info__emoji {
  font-size: 28px;
  line-height: 1;
}
.sl-info__section h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: #c4a8ff;
}
.sl-info__section p,
.sl-info__section li {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(240,238,255,.75);
  margin: 0 0 12px;
}
.sl-info__section ul,
.sl-info__section ol {
  padding-left: 20px;
  margin: 0 0 16px;
}
.sl-info__section li { margin-bottom: 6px; }
.sl-info__section strong { color: #f0eeff; font-weight: 600; }

/* Accordion */
.sl-acc { border-top: 1px solid rgba(255,255,255,.06); }
.sl-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #f0eeff;
  cursor: pointer;
  list-style: none;
}
.sl-acc summary::-webkit-details-marker { display: none; }
.sl-acc summary::after {
  content: '+';
  font-size: 20px;
  color: rgba(240,238,255,.4);
  transition: transform .2s;
}
.sl-acc[open] summary::after { content: '−'; }
.sl-acc .sl-acc__body {
  padding: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(240,238,255,.7);
}
.sl-acc .sl-acc__body p { margin: 0 0 10px; }

/* Info grid (for contacts) — сетка карточек.
   Desktop: 2 одинаковые колонки (2×2 при 4 карточках, 2×1 при 3+wrap).
   Tablet/mobile: ниже в media-queries. */
.sl-info__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.sl-info__card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}
.sl-info__card-emoji { font-size: 32px; margin-bottom: 12px; }
.sl-info__card-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  color: #f0eeff;
}
.sl-info__card-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(240,238,255,.6);
}
.sl-info__card-text a {
  color: #c4a8ff;
  text-decoration: none;
}
.sl-info__card-text a:hover { text-decoration: underline; }

/* Highlight box */
.sl-info__highlight {
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(240,238,255,.8);
}
.sl-info__highlight strong { color: #c4a8ff; }

/* Warning box */
.sl-info__warning {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(240,238,255,.8);
}

/* CTA button */
.sl-info__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--grad, linear-gradient(135deg, #7c3aed, #d946a8));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity .2s;
}
.sl-info__cta:hover { opacity: .85; }

/* Tabs nav */
.sl-info__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.sl-info__tab {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(240,238,255,.6);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.sl-info__tab:hover,
.sl-info__tab.is-active {
  background: rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.4);
  color: #c4a8ff;
}

@media (max-width: 600px) {
  .sl-info { padding: 32px 16px 60px; }
  .sl-info__section { padding: 20px; }
  .sl-info__grid { grid-template-columns: 1fr; }
  /* Inline-grid внутри .sl-info секций (например про "Наш магазин"
     в about.html) — на mobile принудительно 1 колонка. */
  .sl-info__section > div[style*="grid"],
  .sl-info__section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
}

/* Скрываем дефолтный заголовок Astra на info-страницах,
   т.к. WP-заголовок страницы (h1) рендерится Astra автоматически,
   а мы хотим только один заголовок из контента */
.page:has(.sl-info) .entry-header,
.page:has(.sl-info) .ast-archive-description {
  display: none !important;
}

/* Защита от горизонтального переполнения на info-страницах.
   Если контент содержит длинную неразрывную строку (телефон, email,
   URL) — она расширяет родителя, и bnav (position:fixed) тоже растягивается.
   ВАЖНО: только на mobile — на desktop overflow:hidden на body ломает
   position:sticky хедера. */
@media (max-width: 1023px) {
  body:has(.sl-info) {
    overflow-x: hidden !important;
  }
}
.sl-info * {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.sl-info img,
.sl-info table {
  max-width: 100% !important;
  height: auto;
}
/* iframe (карта) — задаём max-width, но НЕ перебиваем height: у iframe нет
   "естественной" высоты, и height:auto даёт ~150px (карта становится плоской) */
.sl-info iframe {
  max-width: 100% !important;
}
