/*
 * R7: оформление каталога, сравнения и виджета обращения.
 *
 * Адаптация авторской спецификации visual/catalog.css пакета
 * NOBLE-ASSETS-R7-CATALOG-CANDIDATE. Все правила ограничены корнем .na-r7.
 *
 * Осознанно НЕ перенесены:
 *   - глобальные правила html, body, *, :root и сбросы — они затронули бы весь сайт;
 *   - правила демонстрационной оболочки препросмотра (.review, .shell, .brand,
 *     .langs, .wrap) — глобальные шапка и подвал остаются существующими v1.
 *
 * Закреплённый основной CSS R6.1 не изменяется: этот файл добавляется отдельно.
 */

.na-r7{--ink:#142e27;--muted:#63716a;--green:#12624e;--deep:#102b24;--gold:#d3b56b;--line:#dce3dc;--paper:#f4f5ef;--white:#fff;--radius:18px}
.na-r7{font-family:Manrope,Arial,sans-serif;color:var(--ink);font-size:16px;line-height:1.6}
.na-r7 *{box-sizing:border-box}
.na-r7 button,.na-r7 input,.na-r7 select,.na-r7 textarea{font:inherit}
.na-r7 button{cursor:pointer;border:0}
.na-r7 button:disabled{cursor:default;opacity:.55}
.na-r7 a{color:var(--green);text-decoration:none}
.na-r7 img{max-width:100%;display:block}
.na-r7 h1,.na-r7 h2,.na-r7 h3,.na-r7 p{margin:0}
.na-r7 button:focus-visible,.na-r7 a:focus-visible,.na-r7 input:focus-visible,.na-r7 select:focus-visible,.na-r7 textarea:focus-visible,.na-r7 summary:focus-visible{outline:3px solid #b98120;outline-offset:3px}
.na-r7 .na-r7-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:900px){.na-r7 .na-r7-wrap{padding:0 22px}}
@media(max-width:680px){.na-r7 .na-r7-wrap{padding:0 18px}}

.na-r7 :root{--ink:#142e27;--muted:#63716a;--green:#12624e;--deep:#102b24;--gold:#d3b56b;--line:#dce3dc;--paper:#f4f5ef;--white:#fff;--radius:18px}
.na-r7 button, .na-r7 input, .na-r7 select, .na-r7 textarea{font:inherit}
.na-r7 button, .na-r7 a, .na-r7 input, .na-r7 select, .na-r7 summary{touch-action:manipulation}
.na-r7 button, .na-r7 a{-webkit-tap-highlight-color:transparent}
.na-r7 button{cursor:pointer}
.na-r7 a{color:var(--green);text-decoration:none}
.na-r7 button:focus-visible, .na-r7 a:focus-visible, .na-r7 input:focus-visible, .na-r7 select:focus-visible, .na-r7 textarea:focus-visible, .na-r7 summary:focus-visible{outline:3px solid #b98120;outline-offset:3px}
.na-r7 button:disabled{cursor:default;opacity:.55}
.na-r7 h1, .na-r7 h2, .na-r7 h3, .na-r7 p{margin:0}
.na-r7 button{border:0}
.na-r7 button svg{width:18px;height:18px}
.na-r7 img{max-width:100%;display:block}
.na-r7 .hero{background:var(--deep);color:white;padding:40px 0 58px}
.na-r7 .heroGrid{display:grid;grid-template-columns:1.65fr 1fr;gap:75px;align-items:end}
.na-r7 .kicker{font-size:14px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.na-r7 h1{font-size:clamp(32px,4vw,50px);line-height:1.13;letter-spacing:-.035em;max-width:750px}
.na-r7 .hero h1 em{font-style:normal;color:var(--gold)}
.na-r7 .hero .intro{color:#c7d7cd;font-size:17px;max-width:690px;margin-top:23px}
.na-r7 .heroAside{border-left:1px solid #496155;padding-left:30px}
.na-r7 .heroAside h2{font-size:20px;line-height:1.35;margin-bottom:12px}
.na-r7 .heroAside p{font-size:14px;color:#bdcfc4;margin-bottom:22px}
.na-r7 .btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;min-height:46px;padding:10px 17px;background:white;color:var(--ink);font-size:14px;font-weight:700;line-height:1.4;text-align:center}
.na-r7 .btn.primary{background:var(--green);border-color:var(--green);color:white}
.na-r7 .btn.gold{background:#e2c88a;border-color:#e2c88a;color:#172e25}
.na-r7 .btn.quiet{background:transparent;border-color:#728679;color:white}
.na-r7 .btn.small{min-height:40px;padding:8px 12px}
.na-r7 .btn.link{border:0;background:transparent;padding-left:0;padding-right:0;color:var(--green)}
.na-r7 .btn:hover{filter:brightness(.97)}
.na-r7 .regionRow{display:flex;flex-wrap:wrap;gap:9px;padding:24px 0}
.na-r7 .chip{border:1px solid var(--line);background:white;color:var(--ink);border-radius:30px;padding:10px 16px;min-height:44px;font-size:14px}
.na-r7 .chip[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}
.na-r7 .toolbar{display:flex;gap:10px;align-items:end;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.na-r7 .searchField{flex:1}
.na-r7 .field label, .na-r7 .searchField label{display:block;font-weight:700;font-size:14px;letter-spacing:.02em;margin-bottom:7px}
.na-r7 .searchField input, .na-r7 .field input, .na-r7 .field select, .na-r7 .field textarea, .na-r7 .sort{display:block;width:100%;min-height:47px;border:1px solid #cdd8cf;background:white;color:var(--ink);padding:10px 13px;border-radius:8px;font-size:15px}
.na-r7 .searchField input{padding-left:16px}
.na-r7 .sort{width:180px}
.na-r7 .viewSwitch{display:flex;border:1px solid var(--line);border-radius:9px;padding:3px;background:white;align-self:end}
.na-r7 .viewSwitch button{min-height:40px;background:white;color:var(--muted);padding:8px 12px;border-radius:6px;font-size:14px}
.na-r7 .viewSwitch button[aria-pressed=true]{background:#e5eee7;color:var(--green)}
.na-r7 .filters{padding:22px;background:#e9eee7;border-radius:12px;margin:18px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.na-r7 .filters .foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px}
.na-r7 .muted{color:var(--muted);font-size:14px}
.na-r7 .resultsHead{display:flex;align-items:center;justify-content:space-between;padding:26px 0 15px;font-size:14px}
.na-r7 .resultsHead strong{font-size:16px}
.na-r7 .selection{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid #bdd1c2;background:#e6eee5;padding:15px;border-radius:13px;margin-bottom:20px}
.na-r7 .selection p{font-size:14px}
.na-r7 .selection .push{margin-left:auto}
.na-r7 .selection .selectedChip{font-size:14px;background:white;border:1px solid #cbd9cf;border-radius:5px;padding:8px}
.na-r7 .cards{display:grid;gap:20px}
.na-r7 .projectCard{display:grid;grid-template-columns:290px minmax(0,1fr);border:1px solid var(--line);background:white;border-radius:var(--radius);overflow:hidden}
.na-r7 .projectCard.noPhoto{grid-template-columns:1fr}
.na-r7 .projectPhoto{height:100%;min-height:270px;object-fit:cover;width:100%}
.na-r7 .projectBody{padding:25px 29px}
.na-r7 .projectTop{display:flex;align-items:start;justify-content:space-between;gap:16px}
.na-r7 .projectBody h2{font-size:25px;letter-spacing:-.02em;line-height:1.3}
.na-r7 .place{color:var(--muted);font-size:14px;margin-top:4px}
.na-r7 .badge{display:inline-block;font-size:14px;background:#eef2ec;color:#415e4d;border-radius:5px;padding:5px 9px}
.na-r7 .rating{font-size:14px;color:var(--green);margin-top:6px}
.na-r7 .facts{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:18px;margin:22px 0}
.na-r7 .facts dt{font-size:14px;color:var(--muted);margin-bottom:4px}
.na-r7 .facts dd{margin:0;font-size:16px;font-weight:700}
.na-r7 .cardActions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.na-r7 .cardActions .selectionButton{margin-left:auto}
.na-r7 .selectionButton{background:white;border:1px solid #bed2c3;color:var(--green);border-radius:8px;min-height:44px;padding:10px;font-size:14px;white-space:nowrap}
.na-r7 .selectionButton[aria-pressed=true]{background:#e1eee3}
.na-r7 .footNote{padding:18px 0 0;font-size:14px;color:var(--muted);max-width:850px}
.na-r7 .help{display:grid;grid-template-columns:1.7fr 1fr;gap:35px;align-items:center;background:#e3ebdf;border:1px solid #d3dfd0;padding:32px;border-radius:var(--radius);margin:35px 0 42px}
.na-r7 .help h2{font-size:25px;line-height:1.3;margin-bottom:12px}
.na-r7 .help p{color:#4b6354;font-size:15px;max-width:650px}
.na-r7 .help .btn{justify-self:end}
.na-r7 .related h2{font-size:25px;margin-bottom:22px}
.na-r7 .relatedGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.na-r7 .relatedCard{border:1px solid var(--line);border-radius:13px;padding:23px;background:#fff;color:var(--ink);display:block}
.na-r7 .relatedCard span{font-size:14px;color:var(--green)}
.na-r7 .relatedCard h3{font-size:17px;line-height:1.4;margin:9px 0}
.na-r7 .relatedCard p{color:var(--muted);font-size:14px}
.na-r7 .bottom{margin-top:50px;padding:24px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.na-r7 .empty{padding:55px 28px;text-align:center;background:white;border:1px solid var(--line);border-radius:14px}
.na-r7 .empty h2{font-size:25px;margin-bottom:13px}
.na-r7 .empty p{max-width:620px;margin:0 auto 22px}
.na-r7 .compareHero{padding:34px 0}
.na-r7 .compareHero .intro{max-width:770px}
.na-r7 .compareHero .btn{margin-bottom:25px}
.na-r7 .compareActions{display:flex;flex-wrap:wrap;gap:12px;padding:25px 0}
.na-r7 .compareIntro{font-size:14px;color:var(--muted);margin-bottom:24px}
.na-r7 .comparison{border:1px solid var(--line);background:white;border-radius:16px;overflow:hidden}
.na-r7 .compareHeader, .na-r7 .compareRow{display:grid;grid-template-columns:170px repeat(var(--count),minmax(0,1fr));border-bottom:1px solid var(--line)}
.na-r7 .compareHeader{background:#e7eee4}
.na-r7 .compareHeader>div, .na-r7 .compareRow>div{padding:18px;border-right:1px solid var(--line)}
.na-r7 .compareHeader h2{font-size:17px;line-height:1.35}
.na-r7 .compareHeader .btn{margin-top:10px}
.na-r7 .compareRow:last-child{border-bottom:0}
.na-r7 .compareLabel{font-size:14px;color:var(--muted);font-weight:700}
.na-r7 .compareValue{font-size:15px}
.na-r7 .projectNameMobile{display:none}
.na-r7 .noteBox{padding:24px;background:#e5ece1;border-radius:14px}
.na-r7 .status{margin:15px 0;color:var(--green);font-size:14px}
/* Стык интеграции, а не изменение макета: в авторском preview.html глобальной
   оболочки нет, а на сайте баннер cookie закреплён снизу с z-index 50 и
   перекрывал кнопку отправки на телефоне. Модальное окно поднято над ним;
   оформление, размеры и порядок элементов диалога не менялись. */
.na-r7 .dialogBackdrop{position:fixed;inset:0;background:#0d251ed4;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.na-r7 .dialog{position:relative;background:#fafbf7;width:620px;max-height:calc(100dvh - 40px);overflow:auto;border-radius:20px;padding:34px;box-shadow:0 24px 90px #0005}
.na-r7 .dialog h2{font-size:29px;letter-spacing:-.03em;line-height:1.2;padding-right:45px;margin-bottom:14px}
.na-r7 .dialog>p{font-size:15px;color:var(--muted);margin-bottom:21px}
.na-r7 .closeBtn{position:absolute;right:16px;top:16px;min-height:44px;min-width:44px;background:transparent;color:var(--ink);font-size:27px;border-radius:8px}
.na-r7 .optionList{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 25px}
.na-r7 .optionList .chip{border-radius:9px;font-size:14px;padding:10px 12px}
.na-r7 .channels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 16px}
.na-r7 .channels .chip{border-radius:10px}
.na-r7 .dialog .field{margin-bottom:18px}
.na-r7 .dialog .field label{font-size:14px}
.na-r7 .dialog .field textarea{resize:vertical;min-height:115px}
.na-r7 .dialog details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:20px}
.na-r7 .dialog summary{font-size:14px;cursor:pointer;min-height:32px;padding:4px 0}
.na-r7 .dialog details[open] summary{margin-bottom:12px}
.na-r7 .formActions .btn{width:100%}
.na-r7 .privacy{font-size:14px;color:var(--muted);margin-top:12px}
.na-r7 .formNotice{background:#efe9d9;border:1px solid #d7c798;color:#63542f;border-radius:8px;padding:13px;font-size:14px;margin-bottom:15px}
.na-r7 .fieldError{color:#9a3029;font-size:14px;margin-top:5px}
.na-r7 .field [aria-invalid=true]{border-color:#ad5147}
.na-r7 .enquiryProjects{font-size:14px;padding:12px;background:#e3ece0;border-radius:8px;margin-bottom:18px}
.na-r7 .successPanel{text-align:center;padding:30px 0}
.na-r7 .successPanel h2{padding:0}
.na-r7 .successPanel p{margin:20px 0}
.na-r7 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:900px){
.na-r7 .heroGrid{gap:35px}
.na-r7 .projectCard{grid-template-columns:230px minmax(0,1fr)}
.na-r7 .facts{gap:10px}
.na-r7 .relatedGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.na-r7 .toolbar{flex-wrap:wrap}
.na-r7 .searchField{flex-basis:60%}
.na-r7 .compareHeader, .na-r7 .compareRow{grid-template-columns:130px repeat(var(--count),minmax(0,1fr))}
.na-r7 .compareHeader>div, .na-r7 .compareRow>div{padding:13px}
.na-r7 .sort{width:170px}
}
@media(max-width:680px){
.na-r7 .hero{padding:22px 0 31px}
.na-r7 .heroGrid{grid-template-columns:1fr;gap:25px}
.na-r7 .hero h1{font-size:37px;line-height:1.12}
.na-r7 .hero .intro{font-size:16px;margin-top:18px}
.na-r7 .heroAside{border-left:0;border-top:1px solid #496155;padding:20px 0 0}
.na-r7 .heroAside h2{font-size:18px}
.na-r7 .heroAside p{margin-bottom:16px}
.na-r7 .heroAside .btn{width:100%}
.na-r7 .regionRow{padding:18px 0 14px;gap:7px}
.na-r7 .chip{font-size:14px;padding:9px 13px}
.na-r7 .toolbar{gap:9px}
.na-r7 .searchField{flex-basis:100%}
.na-r7 .sort{width:100%;flex:1 1 48%}
.na-r7 .viewSwitch{margin-left:auto}
.na-r7 .filters{grid-template-columns:1fr 1fr;padding:15px;gap:13px}
.na-r7 .filters .foot{display:block}
.na-r7 .filters .foot .btn{margin-top:12px;width:100%}
.na-r7 .filters label{font-size:14px}
.na-r7 .field select{font-size:14px;padding:10px 8px}
.na-r7 .resultsHead{padding:21px 0 14px}
.na-r7 .resultsHead strong{font-size:15px}
.na-r7 .selection{gap:8px;padding:12px}
.na-r7 .selection .push{margin-left:0;width:100%}
.na-r7 .selection .btn.primary{width:100%}
.na-r7 .projectCard{display:block}
.na-r7 .projectPhoto{height:185px;min-height:0}
.na-r7 .projectBody{padding:21px}
.na-r7 .projectBody h2{font-size:23px}
.na-r7 .projectTop{display:block}
.na-r7 .projectTop .badge{margin-top:11px}
.na-r7 .facts{grid-template-columns:1fr 1fr;gap:13px;margin:18px 0}
.na-r7 .facts dt{font-size:14px}
.na-r7 .facts dd{font-size:15px}
.na-r7 .facts>div:last-child{grid-column:1/-1}
.na-r7 .cardActions .btn.primary{width:100%;order:0}
.na-r7 .cardActions>a{flex:1;order:1}
.na-r7 .cardActions .selectionButton{order:2;margin-left:0}
.na-r7 .help{display:block;padding:24px;margin:28px 0}
.na-r7 .help h2{font-size:23px}
.na-r7 .help .btn{width:100%;margin-top:21px}
.na-r7 .relatedGrid{grid-template-columns:1fr}
.na-r7 .relatedCard{padding:20px}
.na-r7 .bottom{margin-top:30px}
.na-r7 .compareHero h1{font-size:34px}
.na-r7 .compareActions .btn.primary{width:100%}
.na-r7 .compareHeader{display:flex;flex-wrap:wrap;padding:12px;gap:10px}
.na-r7 .compareHeader>div{border:0;padding:10px;flex:1 1 140px;background:white;border-radius:8px}
.na-r7 .compareHeader>.compareLabel{display:none}
.na-r7 .compareRow{display:block;padding:16px 18px}
.na-r7 .compareRow>div{border:0;padding:5px 0}
.na-r7 .compareRow>.compareLabel{color:var(--green);font-size:14px;margin-bottom:8px}
.na-r7 .compareValue{display:flex;justify-content:space-between;gap:20px;font-size:14px}
.na-r7 .projectNameMobile{display:block;color:var(--muted);max-width:52%}
.na-r7 .compareValue>span:last-child{text-align:right}
.na-r7 .dialogBackdrop{padding:10px}
.na-r7 .dialog{padding:27px 21px;max-height:calc(100dvh - 20px);border-radius:15px}
.na-r7 .dialog h2{font-size:25px}
.na-r7 .dialog .field input, .na-r7 .dialog .field textarea{font-size:16px}
.na-r7 .closeBtn{right:10px;top:10px}
.na-r7 .optionList .chip{font-size:14px}
.na-r7 .formNotice{font-size:14px}
.na-r7 .dialog .field label{font-size:14px}
}

/* Авторское дополнение ChatGPT к R7. Подключать после r7-catalog.css.
   Только корень страницы получает .na-r7-page, диалог его не получает. */
.na-r7.na-r7-page {
  background: var(--paper);
  color: var(--ink);
  border-top: 80px solid #1a1a1a;
  min-height: 100vh;
}
.na-r7-page .compareHero { background: var(--paper); color: var(--ink); }
.na-r7-page .compareHero .intro { color: var(--muted); margin-top: 18px; }
.na-r7-page .compareHeader > div,
.na-r7-page .compareRow > div { min-width: 0; overflow-wrap: anywhere; }
.na-r7-page .compareHeader .btn { white-space: normal; }
.na-r7 .attemptActions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.na-r7 .attemptActions .btn { flex: 1 1 180px; }
.na-r7 .lockedDraft { margin: 12px 0; color: var(--muted); font-size: 14px; }
.na-r7 .field input[readonly],
.na-r7 .field textarea[readonly] { background: #eef2ec; color: var(--ink); }
.na-r7 .privacy a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .na-r7-page .comparison { background: transparent; border: 0; overflow: visible; }
  .na-r7-page .compareHeader { display: flex; flex-direction: column; gap: 10px; background: transparent; border: 0; margin-bottom: 22px; }
  .na-r7-page .compareHeader > div { border: 1px solid var(--line); border-radius: 12px; background: #e7eee4; padding: 18px; }
  .na-r7-page .compareHeader > .compareCorner { display: none; }
  .na-r7-page .compareRow { display: block; background: white; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
  .na-r7-page .compareRow > .compareLabel { display: block; padding: 14px 18px; background: #e7eee4; color: var(--ink); border: 0; }
  .na-r7-page .compareRow > .compareValue { display: block; padding: 14px 18px; border: 0; border-top: 1px solid var(--line); }
  .na-r7-page .projectNameMobile { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
}