/* ─────────────────────────────────────────────────────────────
   Общие стили справочных страниц сайта «Рыбная тема» (/help/*)
   Используется: /help/order/, /help/delivery/
   ───────────────────────────────────────────────────────────── */

@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --yellow:#FFDD2D; --black:#1A1A1A; --gray-bg:#F5F5F5; --gray-light:#EBEBEB;
  --gray-text:#7A7A7A; --white:#fff; --red:#FF3B30; --green:#34C759; --accent:#FF6B00;
  --radius:16px; --shadow:0 4px 24px rgba(0,0,0,.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
       color:var(--black); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
/* Телефон и почта — ОДНИМ куском: перенос строки внутри номера рвал его пополам
   («+7» уезжало на строку выше) и мешал попасть по ссылке пальцем на телефоне. */
a[href^="tel:"], a[href^="mailto:"] { white-space:nowrap; }

/* ── ШАПКА ── */
.hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--gray-light); }
.hdr-in { max-width:940px; margin:0 auto; padding:12px 20px; display:flex; align-items:center;
          justify-content:space-between; gap:16px; }
.hdr-logo img { height:36px; width:auto; display:block; }
.back-btn { display:inline-flex; align-items:center; gap:7px; background:var(--yellow); color:var(--black);
            border-radius:12px; padding:9px 16px; font-size:14px; font-weight:700; text-decoration:none;
            white-space:nowrap; transition:transform .15s; }
.back-btn:hover { transform:translateY(-1px); }

.wrap { max-width:940px; margin:0 auto; padding:0 20px 80px; }

/* ── ГЕРОЙ ── */
.hero { padding:44px 0 12px; }
.hero .kicker { display:inline-block; background:#FFF4E5; color:var(--accent); font-size:12px;
                font-weight:800; letter-spacing:.4px; text-transform:uppercase;
                padding:6px 12px; border-radius:99px; }
.hero h1 { font-size:40px; line-height:1.15; font-weight:800; margin:14px 0 12px; letter-spacing:-1px; }
.hero p.lead { font-size:17px; color:#4a4a4a; max-width:640px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip { display:flex; align-items:center; gap:8px; background:var(--gray-bg); border-radius:12px;
        padding:10px 14px; font-size:14px; font-weight:600; }
.chip b { font-weight:800; }

/* ── ОГЛАВЛЕНИЕ ── */
.toc { margin:30px 0 10px; border:1px solid var(--gray-light); border-radius:var(--radius);
       padding:18px 20px; background:#FCFCFC; }
.toc-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
             color:var(--gray-text); margin-bottom:12px; }
.toc ol { list-style:none; counter-reset:t; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px; }
.toc li { counter-increment:t; }
.toc a { display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--black);
         font-size:15px; font-weight:600; padding:4px 0; }
.toc a:hover { color:var(--accent); }
.toc a::before { content:counter(t); flex:none; width:22px; height:22px; border-radius:7px;
                 background:var(--yellow); font-size:12px; font-weight:800; display:grid;
                 place-items:center; align-self:center; }

/* ── СЕКЦИЯ «ТЕКСТ + МАКЕТ» ── */
.step { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;
        padding:44px 0; border-top:1px solid var(--gray-light); }
.step:first-of-type { border-top:none; }
/* Секция во всю ширину + подчинённая двухколоночная строка внутри неё */
.step.full { grid-template-columns:1fr; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:24px; }
.step-txt h2 { font-size:25px; font-weight:800; line-height:1.25; letter-spacing:-.4px; margin-bottom:12px;
               display:flex; gap:12px; align-items:flex-start; }
.num { flex:none; width:34px; height:34px; border-radius:11px; background:var(--black); color:#fff;
       font-size:16px; font-weight:800; display:grid; place-items:center; margin-top:1px; }
.step-txt p { color:#4a4a4a; margin-bottom:10px; font-size:15.5px; }
.step-txt ul { list-style:none; margin:10px 0; }
.step-txt li { position:relative; padding-left:22px; margin-bottom:8px; font-size:15px; color:#4a4a4a; }
.step-txt li::before { content:'—'; position:absolute; left:0; color:var(--accent); font-weight:800; }
.step-txt b { color:var(--black); font-weight:700; }

.note { background:#FFF9E6; border-left:3px solid var(--yellow); border-radius:0 10px 10px 0;
        padding:11px 14px; font-size:14.5px; margin:14px 0 0; }
.note.warn { background:#FFF1EF; border-left-color:var(--red); }
.note.tip  { background:#EFFBF2; border-left-color:var(--green); }

/* ── МАКЕТЫ ЭКРАНОВ ── */
.shot { background:var(--gray-bg); border:1px solid var(--gray-light); border-radius:20px;
        padding:20px; position:sticky; top:80px; }
.shot-cap { font-size:12px; font-weight:700; color:var(--gray-text); text-align:center;
            margin-top:14px; letter-spacing:.2px; }
.ui { background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:14px; }
.spot { outline:2.5px dashed var(--accent); outline-offset:3px; border-radius:12px; }

.u-search { display:flex; align-items:center; gap:10px; background:var(--gray-bg); border-radius:12px;
            padding:11px 14px; font-size:14px; color:var(--gray-text); }
.u-search .txt { flex:1; color:var(--black); font-weight:500; }
.u-sug { margin-top:8px; border-top:1px solid var(--gray-light); padding-top:8px; }
.u-sug-row { display:flex; align-items:center; gap:10px; padding:7px 4px; border-radius:9px; font-size:13.5px; }
.u-sug-row.on { background:#FFFBEB; }
.u-sug-row .em { font-size:20px; }
.u-sug-row .nm { flex:1; font-weight:600; }
.u-sug-row .pr { font-weight:800; font-size:13px; }

.u-cats { display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.u-cats div { padding:7px 10px; border-radius:9px; color:#3d3d3d; display:flex; justify-content:space-between; }
.u-cats div.on { background:var(--gray-bg); font-weight:700; }

.u-card { width:100%; background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:12px; position:relative; }
.u-badges { position:absolute; top:10px; left:10px; display:flex; gap:5px; z-index:2; }
.bdg { font-size:10.5px; font-weight:800; color:#fff; background:var(--red); border-radius:7px; padding:3px 7px; letter-spacing:.2px; }
.bdg.hit { background:#FF3B30; }
.bdg.low { background:#FFB300; color:#fff; }
.u-fav { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:9px;
         background:var(--gray-bg); display:grid; place-items:center; font-size:14px; z-index:2; }
.u-img { height:120px; display:grid; place-items:center; font-size:60px; background:#FAFAFA; border-radius:10px; }
.u-meta { font-size:10.5px; color:var(--accent); font-weight:700; margin-top:10px; }
.u-name { font-size:14px; font-weight:700; line-height:1.3; margin:3px 0 8px; }
.u-toggle { display:flex; background:var(--gray-bg); border-radius:10px; padding:3px; gap:3px; }
.u-toggle span { flex:1; text-align:center; font-size:12px; font-weight:700; padding:6px 4px;
                 border-radius:8px; color:var(--gray-text); }
.u-toggle span.on { background:#fff; color:var(--black); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.u-price-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:10px; }
.u-price { font-size:20px; font-weight:800; color:var(--red); line-height:1.1; }
.u-price.plain { color:var(--black); }
.u-old { font-size:12px; color:var(--gray-text); text-decoration:line-through; }
.u-w { font-size:11px; color:var(--gray-text); }
.u-plus { width:38px; height:38px; border-radius:12px; background:var(--yellow); display:grid;
          place-items:center; font-size:20px; font-weight:700; flex:none; }
.u-step { display:flex; align-items:center; gap:2px; background:var(--yellow); border-radius:12px;
          padding:4px; font-weight:800; }
.u-step b { width:30px; height:30px; display:grid; place-items:center; font-size:18px; }
.u-step .q { min-width:34px; text-align:center; font-size:15px; }

.u-bar { background:var(--gray-bg); border-radius:11px; padding:10px 12px; }
.u-bar-top { display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:7px; }
.u-bar-track { height:6px; background:var(--gray-light); border-radius:99px; overflow:hidden; }
.u-bar-fill { height:100%; background:var(--yellow); border-radius:99px; }
.u-item { display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--gray-light); }
.u-item .em { width:40px; height:40px; border-radius:10px; background:var(--gray-bg); display:grid;
              place-items:center; font-size:22px; flex:none; }
.u-item .nm { flex:1; font-size:13px; font-weight:600; line-height:1.3; }
.u-item .nm small { display:block; color:var(--gray-text); font-weight:500; font-size:11px; }
.u-item .pr { font-size:13.5px; font-weight:800; white-space:nowrap; }
.u-total { display:flex; justify-content:space-between; align-items:center; padding:12px 0 10px; }
.u-total .l { font-size:13px; color:var(--gray-text); font-weight:600; }
.u-total .v { font-size:20px; font-weight:800; }
.u-btn { display:block; text-align:center; background:var(--yellow); border-radius:13px; padding:13px;
         font-size:15px; font-weight:800; }
.u-btn.dark { background:var(--black); color:#fff; }

.u-field { margin-bottom:11px; }
.u-field label { display:block; font-size:11.5px; font-weight:700; color:var(--gray-text); margin-bottom:5px; }
.u-field label i { color:var(--red); font-style:normal; }
.u-input { background:var(--gray-bg); border-radius:11px; padding:11px 13px; font-size:13.5px; color:#3d3d3d; }
.u-input.ph { color:#B0B0B0; }
.u-radio { display:flex; align-items:center; gap:9px; border:1.5px solid var(--gray-light); border-radius:11px;
           padding:10px 12px; font-size:13px; margin-bottom:7px; font-weight:600; }
.u-radio.on { border-color:var(--black); background:#FFFDF2; }
.u-radio .dot { width:15px; height:15px; border-radius:50%; border:2px solid var(--gray-light); flex:none; }
.u-radio.on .dot { border-color:var(--black); background:radial-gradient(circle,var(--black) 0 42%,#fff 46%); }
.u-ok { text-align:center; padding:14px 6px; }
.u-ok .ic { font-size:46px; }
.u-ok h3 { font-size:19px; font-weight:800; margin:8px 0 6px; }
.u-ok .onum { font-weight:800; color:var(--accent); }
.u-ok p { font-size:13px; color:var(--gray-text); }

.u-promo { background:linear-gradient(135deg,#FFF4D6,#FFE9A8); border-radius:12px; padding:12px; }
.u-promo-h { font-size:13px; font-weight:800; margin-bottom:9px; }
.u-promo-row { display:flex; gap:8px; }
.u-promo-opt { flex:1; background:#fff; border-radius:10px; padding:9px 6px; text-align:center; font-size:11px; font-weight:700; }
.u-promo-opt .em { font-size:22px; display:block; margin-bottom:3px; }

.arrow { text-align:center; font-size:13px; font-weight:700; color:var(--accent); margin:10px 0 2px; }

/* ── ВОПРОСЫ И ФИНАЛЬНЫЙ БЛОК ── */
.faq { border-top:1px solid var(--gray-light); padding-top:38px; margin-top:10px; }
.faq h2, .final h2 { font-size:27px; font-weight:800; letter-spacing:-.5px; margin-bottom:20px; }
.qa { border:1px solid var(--gray-light); border-radius:14px; padding:16px 18px; margin-bottom:10px; background:#FCFCFC; }
.qa h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.qa p { font-size:15px; color:#4a4a4a; }
.final { margin-top:44px; background:var(--black); color:#fff; border-radius:22px; padding:32px 30px; }
.final h2 { color:#fff; }
.final p { color:#C9C9C9; font-size:15.5px; max-width:560px; }
.final .cts { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.final a.cta { background:var(--yellow); color:var(--black); border-radius:13px; padding:13px 22px;
               font-weight:800; text-decoration:none; font-size:15px; }
.final a.cta.ghost { background:rgba(255,255,255,.1); color:#fff; }
.contacts { display:flex; flex-wrap:wrap; gap:26px; margin-top:26px; font-size:15px; }
.contacts div span { display:block; font-size:12px; color:#8E8E8E; font-weight:600;
                     text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; }
.contacts a { color:var(--yellow); text-decoration:none; font-weight:600; }
.foot { text-align:center; color:var(--gray-text); font-size:13px; margin-top:34px; }

/* ── ФОРМА (заявка поставщика и т.п.) ── */
.form { background:#fff; border:1px solid var(--gray-light); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow); }
.form h3 { font-size:18px; font-weight:800; margin-bottom:4px; }
.form .sub { font-size:14px; color:var(--gray-text); margin-bottom:16px; }
.form label { display:block; font-size:11.5px; font-weight:700; color:var(--gray-text);
              text-transform:uppercase; letter-spacing:.3px; margin:0 0 5px; }
.form label i { color:var(--red); font-style:normal; }
.form input, .form textarea { width:100%; font:inherit; font-size:15px; color:var(--black);
  background:var(--gray-bg); border:1.5px solid transparent; border-radius:11px;
  padding:11px 13px; margin-bottom:13px; outline:none; transition:border-color .15s, background .15s; }
.form input:focus, .form textarea:focus { border-color:var(--black); background:#fff; }
.form textarea { resize:vertical; min-height:96px; }
.form .req-note { font-size:12.5px; color:var(--gray-text); margin-bottom:12px; }
.form button { width:100%; font:inherit; font-size:15px; font-weight:800; color:var(--black);
  background:var(--yellow); border:none; border-radius:13px; padding:14px; cursor:pointer;
  transition:transform .15s, opacity .15s; }
.form button:hover:not(:disabled) { transform:translateY(-1px); }
.form button:disabled { opacity:.6; cursor:default; }
.form .status { font-size:14px; margin-top:11px; min-height:1px; }
.form .status.err { color:#dc2626; }
.form-done { text-align:center; padding:26px 8px; }
.form-done .ic { font-size:46px; }
.form-done h3 { font-size:19px; font-weight:800; margin:10px 0 6px; }
.form-done p { font-size:14.5px; color:var(--gray-text); }

/* ── ДОКУМЕНТ (соглашение, оферта) ── */
.doc { max-width:760px; }
.doc .lead-box { background:var(--gray-bg); border-radius:14px; padding:18px 20px; margin-bottom:30px; font-size:15px; }
.doc h2 { font-size:21px; font-weight:800; letter-spacing:-.3px; margin:34px 0 12px;
          padding-top:22px; border-top:1px solid var(--gray-light); }
.doc h2:first-of-type { border-top:none; padding-top:0; margin-top:26px; }
.doc p { font-size:15.5px; color:#3d3d3d; margin-bottom:12px; }
.doc p b.n { color:var(--black); font-weight:700; }
.doc .tldr { border:1px solid var(--gray-light); border-radius:14px; padding:18px 20px; background:#FCFCFC; margin-bottom:8px; }
.doc .tldr ul { list-style:none; margin-top:10px; }
.doc .tldr li { position:relative; padding-left:24px; margin-bottom:8px; font-size:15px; color:#4a4a4a; }
.doc .tldr li::before { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:800; }

/* Реквизиты продавца — обязательная информация для потребителя (ЗоЗПП) */
.requisites { margin-top:40px; }
.requisites h2 { font-size:20px; margin-bottom:14px; }
.req-card { background:var(--gray-bg,#F5F5F5); border-radius:16px; padding:20px 22px; }
.req-row { display:grid; grid-template-columns:190px 1fr; gap:12px; padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,.06); font-size:14.5px; }
.req-row:last-child { border-bottom:none; }
.req-row span { color:#8E8E8E; font-weight:600; font-size:13px; }
.req-row b { font-weight:600; }
.req-row a { color:inherit; }
.req-links { margin-top:14px; font-size:13.5px; color:#8E8E8E; }
.req-links a { color:#8E8E8E; }
.req-links a:hover { color:var(--accent,#FF6B00); }

@media (max-width:860px) {
  .req-row { grid-template-columns:1fr; gap:2px; }
  .step { grid-template-columns:1fr; gap:22px; padding:34px 0; }
  .split { grid-template-columns:1fr; gap:18px; margin-top:16px; }
  .shot { position:static; padding:16px; }
  .hero { padding:30px 0 6px; }
  .hero h1 { font-size:29px; }
  .toc ol { grid-template-columns:1fr; }
  .final { padding:26px 20px; border-radius:18px; }
  .step-txt h2 { font-size:21px; }
}