/* Лендинг и страницы темы «Журнал о маме». Сначала телефон, на ПК от 900 px — две колонки. */
:root { --accent: #8e2f2f; --accent-dark: #6f2323; --bg: #fbf6ec; --card: #fffdf8; --line: #e9dcc7; }
body.oniq { background: var(--bg); }
.o-brand { font-family: "Playfair Display", Georgia, serif; }

.mj, .o-top, .o-foot { max-width: 1040px; }
.mj-hero { display: grid; gap: 20px; padding-top: 4px; }
.mj-hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 8vw, 52px); }
.mj-hero__img { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 18px 40px rgba(60, 30, 20, 0.18); }
.mj-timer { display: inline-block; margin: 14px 0 0; padding: 6px 14px; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; }
.mj-timer:empty { display: none; }
.mj-hero .o-btn { margin-top: 4px; }

.gal { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 2px 12px; margin: 0 -20px; padding-inline: 20px; scrollbar-width: thin; }
.gal__item { flex: 0 0 min(76vw, 300px); margin: 0; scroll-snap-align: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(60, 30, 20, 0.1); }
.gal__item img { display: block; width: 100%; height: auto; }
.gal__item figcaption { padding: 10px 12px; font-size: 14px; font-weight: 700; }

.mj-cards { display: grid; gap: 12px; }
.mj-cards article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.mj-cards b { display: block; font-size: 18px; margin-bottom: 6px; color: var(--accent); }
.mj-cards p { margin: 0; }

.mj-steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.mj-steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 60px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; min-height: 56px; }
.mj-steps li::before { content: counter(s); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; }

.mj-collect { display: grid; gap: 20px; background: #f3e7d3; border-radius: 20px; padding: 22px 20px; }
.mj-collect h2 { margin-top: 0; }
.mj-phone { width: min(260px, 80%); margin: 0 auto; background: #fff; border: 6px solid #2b2420; border-radius: 28px; padding: 16px 14px 18px; display: grid; gap: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2); }
.mj-phone__bar { width: 50px; height: 5px; border-radius: 9px; background: #2b2420; margin: 0 auto 4px; }
.mj-phone span { color: #6f625a; font-size: 12px; }
.mj-phone__field { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 13px; color: #8a7d73; }
.mj-phone__field--big { min-height: 70px; }
.mj-phone__btn { background: var(--accent); color: #fff; border-radius: 10px; text-align: center; padding: 10px; font-weight: 800; font-size: 13px; }

.mj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mj-list li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }

.mj-guarantee { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.mj-guarantee h2 { margin-top: 0; }
.mj-final { text-align: center; padding: 26px 18px; border-radius: 20px; background: var(--accent); color: #fff; }
.mj-final h2, .mj-final p { color: #fff; }
.mj-final .o-btn { background: #fff; color: var(--accent); border-color: #fff; }

.o-prices .price-tier--full { border-width: 2px; }
.o-form-wrap .o-form { box-shadow: 0 10px 30px rgba(60, 30, 20, 0.08); }
.o-btn--main { background: var(--accent); border-color: var(--accent); }
.o-btn--main:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.o-btn:not(.o-btn--main):not(.o-btn--ghost) { color: var(--accent); border-color: var(--accent); }

@media (min-width: 900px) {
  .mj-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; padding-top: 24px; }
  .gal { margin: 0; padding-inline: 2px; }
  .gal__item { flex-basis: 260px; }
  .mj-cards { grid-template-columns: repeat(3, 1fr); }
  .mj-steps { grid-template-columns: repeat(3, 1fr); }
  .mj-steps li { padding: 62px 16px 16px; }
  .mj-steps li::before { left: 16px; top: 16px; transform: none; }
  .mj-collect { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 34px; }
  .mj-list { grid-template-columns: repeat(3, 1fr); }
  .mj-final { padding: 44px; }
  .o-form-wrap .o-form { max-width: 640px; margin: 0 auto; }
}