/* Палитра МузРейтинга: графит, бумага, фирменный оранжевый и приглушённый шалфей. */
:root {
  --link: #3e6258;
  --blue: var(--link);
  --award-main: #c45124;
  --award-context: #536960;
  --award-soft: #edf3ee;
  --pro: #36745a;
  --con: #aa6042;
}
html[data-theme=dark] {
  --link: #b0d1bd;
  --award-main: #ff9b6b;
  --award-context: #c5d7c9;
  --award-soft: #293a34;
  --pro: #9bd4ad;
  --con: #f0aa8c;
}

/* Быстрый выбор располагается в колонке текста, на одной оси с последующими блоками. */
.article-flow > .quick-picks { margin-top: 40px; }
.article-flow > .quick-picks .section-heading { margin-bottom: 22px; }
.article-flow > .quick-picks .eyebrow { margin-bottom: 8px; }
.quick-pick-grid { min-width: 0; }
.quick-pick { min-width: 0; }
.quick-pick > span { min-width: 0; }

/* Значки в узком содержании, расшифровка при наведении и фокусе. */
.toc-product { position: relative; }
.toc-product > span:first-child { flex: 1; min-width: 0; }
.toc-award {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--award-soft);
  color: var(--award-context);
  border: 1px solid #cddcd1;
  transition: transform .22s, background .22s, box-shadow .22s;
}
.toc-product > .toc-award { flex: none; min-width: 25px; overflow: visible; white-space: normal; }
.toc-award-editor { background: #fff0e7; color: var(--award-main); border-color: #edc4af; }
.toc-award svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toc-award-editor svg { fill: currentColor; stroke-width: 1.4; }
.toc-product:hover .toc-award,
.toc-product:focus-visible .toc-award { transform: scale(1.12); box-shadow: 0 3px 10px rgba(22, 36, 29, .15); }
.toc-tooltip {
  position: absolute;
  right: -4px;
  top: calc(100% + 7px);
  z-index: 7;
  width: max-content;
  max-width: 210px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #26312d;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  box-shadow: 0 9px 20px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.toc-product:hover .toc-tooltip,
.toc-product:focus-visible .toc-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
html[data-theme=dark] .toc-award-editor { background: #543222; border-color: #865338; }
html[data-theme=dark] .toc-award { border-color: #536c5c; }

/* Полный бейдж находится рядом с названием модели. */
.product-heading h3 { display: flex; align-items: center; flex-wrap: wrap; column-gap: 12px; row-gap: 7px; }
.product-badge {
  background: var(--award-soft);
  color: var(--award-context);
  border: 1px solid #cfddd3;
  border-radius: 30px;
  font-size: 11px;
  padding: 5px 10px;
  letter-spacing: .025em;
  white-space: normal;
  line-height: 1.2;
}
.product-badge-editor { background: #fff0e7; color: var(--award-main); border-color: #edc4af; }
html[data-theme=dark] .product-badge { border-color: #526c5c; }
html[data-theme=dark] .product-badge-editor { background: #543222; border-color: #865338; }

/* Обзор читается отдельной полосой между карточкой фактов и выводом. */
.product-long-review {
  margin-top: 25px;
  padding: 25px clamp(18px, 3vw, 34px) 20px;
  border: 1px solid #e9e6df;
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  background: linear-gradient(110deg, #fffaf5, #fff 38%);
}
.product-long-review .micro-heading { margin-bottom: 5px; }
.product-long-review h4 { font-size: 25px; margin: 0 0 15px; }
.product-long-review p:not(.micro-heading) { max-width: 80ch; line-height: 1.68; font-size: 16px; color: #424b49; margin: 0 0 13px; }
.product-long-review .review-source {
  border-top: 1px solid #e9e6df;
  margin-top: 19px !important;
  padding-top: 13px;
  color: #67726b !important;
  font-size: 13px !important;
}
.review-source a { color: var(--link); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.review-source a:hover { color: var(--orange-dark); }
html[data-theme=dark] .product-long-review { background: linear-gradient(110deg, #302d2a, #292f32 45%); border-color: var(--line); border-left-color: var(--orange); }
html[data-theme=dark] .product-long-review p:not(.micro-heading) { color: var(--text); }
html[data-theme=dark] .product-long-review .review-source { color: var(--muted) !important; border-color: var(--line); }

/* Сильные стороны и ограничения откликаются как нотные карточки. */
.product-proscons > div { border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-proscons > div:hover,
.product-proscons > div:focus-within { transform: translateY(-4px); box-shadow: 0 13px 26px rgba(33, 33, 29, .10); }
.product-proscons .pros { background: #eff6f0; border-color: #dbeadd; }
.product-proscons .cons { background: #fff2e9; border-color: #f2dbca; }
.product-proscons .pros:hover { border-color: #8ebda0; }
.product-proscons .cons:hover { border-color: #dda588; }
.product-proscons h4 span,
.product-proscons li span { display: inline-block; color: var(--pro); transition: transform .25s ease; }
.product-proscons .cons h4 span,
.product-proscons .cons li span { color: var(--con); }
.product-proscons > div:hover h4 span { transform: rotate(-10deg) scale(1.2); }
html[data-theme=dark] .product-proscons .pros { background: #263b30; border-color: #385544; }
html[data-theme=dark] .product-proscons .cons { background: #3e3029; border-color: #684a3b; }

/* Вопросы и ответы редакции. */
.comments-section { max-width: 1050px; }
.comments-section > p:not(.eyebrow) { max-width: 780px; }
.comment-demo-label { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 25px 0 13px; color: var(--ink); }
.comment-demo-label > span:first-child { display: grid; place-items: center; width: 31px; height: 31px; background: var(--orange-pale); color: var(--orange); border-radius: 50%; font-size: 21px; }
.comment-demo-label > span:last-child { font-size: 13px; color: var(--muted); }
.comment-demo-list, #comment-list { display: grid; gap: 14px; }
#comment-list:not(:empty) { margin-top: 17px; }
.comment-thread {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 21px;
  transition: border-color .24s, box-shadow .24s;
}
.comment-thread:hover { border-color: #e7b49a; box-shadow: 0 10px 24px rgba(25, 29, 25, .06); }
.comment-avatar, .editor-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.comment-avatar { width: 44px; height: 44px; background: #e9eee9; color: #4d685a; font-size: 19px; }
.comment-content { min-width: 0; }
.comment-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.comment-meta strong { color: var(--ink); }
.comment-meta span { color: var(--muted); font-size: 12px; }
.comment-content > p, .editor-reply p, .local-reply p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 10px; line-height: 1.5; }
.comment-reply-button { background: none; border: 0; padding: 3px 0; color: var(--link); font-size: 13px; font-weight: 800; cursor: pointer; }
.comment-reply-button:hover { color: var(--orange-dark); }
.editor-reply, .local-reply { display: flex; gap: 12px; margin: 15px 0 0; padding: 15px 17px; background: #fff3eb; border-left: 3px solid var(--orange); border-radius: 0 9px 9px 0; }
.editor-avatar { flex: none; width: 31px; height: 31px; color: #fff; background: var(--orange); font-size: 19px; }
.editor-reply p { margin-bottom: 0; }
.thread-replies:not(:empty) { margin-top: 13px; }
.local-reply { background: #f1f5f1; border-color: #8ba995; }
.local-reply .editor-avatar { background: #6f8c79; }
.comment-compose { max-width: 850px; margin-top: 29px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.comment-compose-heading > div { display: flex; align-items: center; gap: 11px; }
.comment-compose-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--orange-pale); color: var(--orange); display: grid; place-items: center; font-size: 23px; }
.comment-compose h3 { margin: 0; font-size: 24px; }
.comment-compose-heading p { color: var(--muted); margin: 7px 0 16px; }
.comments-section form { max-width: none; gap: 7px; }
.comment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.comments-section label { display: block; margin: 10px 0 6px; }
.comments-section :is(input, select, textarea) { width: 100%; border: 1px solid #d4dcd6; border-radius: 9px; background: #fff; color: var(--ink); padding: 12px 13px; font: inherit; }
.comments-section :is(input, select, textarea):focus-visible { outline: 3px solid #f8bc9b; border-color: var(--orange); }
.comment-editor { border: 1px solid #d4dcd6; border-radius: 10px; overflow: hidden; }
.comment-editor:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px #ffdbca; }
.comments-section .comment-editor textarea { border: 0; border-radius: 0; box-shadow: none; outline: 0; display: block; resize: vertical; }
.emoji-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 11px; background: #f7f8f6; border-bottom: 1px solid #dce3dd; }
.emoji-toolbar span { color: var(--muted); font-size: 13px; margin-right: 7px; }
.emoji-toolbar button { border: 1px solid transparent; border-radius: 7px; width: 31px; height: 30px; background: transparent; cursor: pointer; font-size: 18px; transition: transform .2s, background .2s; }
.emoji-toolbar button:hover, .emoji-toolbar button:focus-visible { background: var(--orange-pale); transform: translateY(-2px); }
.comment-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.comment-form-bottom > div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#comment-counter { color: var(--muted); font-size: 13px; }
.comment-preview-button { border: 0; background: none; color: var(--link); font-weight: 800; cursor: pointer; }
.comment-preview-button:hover { color: var(--orange-dark); }
.comments-section .button { margin: 0; }
.reply-context { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 9px; background: var(--orange-pale); color: var(--ink); padding: 7px 11px; }
.reply-context[hidden] { display: none; }
.reply-context button { background: none; border: 0; color: var(--orange-dark); font-size: 24px; cursor: pointer; }
.comment-preview { margin-top: 14px; border-radius: 9px; padding: 15px; background: #f4f7f3; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-preview[hidden] { display: none; }
.comment-privacy { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
html[data-theme=dark] :is(.comment-thread,.comment-compose) { background: var(--paper); border-color: var(--line); }
html[data-theme=dark] .comment-avatar { background: #3b4c40; color: #c7dbc9; }
html[data-theme=dark] .editor-reply { background: #3e3029; }
html[data-theme=dark] .local-reply, html[data-theme=dark] .comment-preview { background: #2c3d32; }
html[data-theme=dark] .emoji-toolbar { background: #30393a; border-color: var(--line); }
html[data-theme=dark] .comments-section :is(input,select,textarea) { background: #292f32; color: var(--ink); border-color: var(--line); }
html[data-theme=dark] .comment-editor { border-color: var(--line); }
html[data-theme=dark] .comment-editor textarea { border: 0; }

@media (max-width: 1100px) {
  .quick-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-pick:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .article-flow > .quick-picks { margin-top: 24px; }
  .quick-pick-grid { grid-template-columns: 1fr; }
  .quick-pick:last-child { grid-column: auto; }
  .product-heading h3 { font-size: 22px; }
  .product-badge { font-size: 10px; }
  .product-long-review { padding: 18px 16px; }
  .product-long-review h4 { font-size: 21px; }
  .product-long-review p:not(.micro-heading) { font-size: 15px; }
  .comment-thread { grid-template-columns: 34px minmax(0,1fr); padding: 14px; gap: 10px; }
  .comment-avatar { width: 34px; height: 34px; font-size: 15px; }
  .comment-fields { grid-template-columns: 1fr; gap: 0; }
  .comment-compose { padding: 17px; }
  .editor-reply, .local-reply { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-proscons > div:hover, .toc-product:hover .toc-award, .emoji-toolbar button:hover { transform: none; }
}

/* Подсказка живёт вне прокручиваемой панели и позиционируется рядом с бейджем. */
.toc-award-tooltip {
  position: fixed;
  z-index: 1200;
  display: block;
  max-width: 205px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #26312d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 9px 24px #18211c35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease;
}
.toc-award-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.toc-award-tooltip[hidden] { display: none; }
.toc-award-tooltip::after {
  content: "";
  position: absolute;
  left: var(--arrow-left, 50%);
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.toc-award-tooltip.is-below::after { top: -5px; bottom: auto; }

/* Локальные официальные фото: три ракурса и доступное увеличение. */
.product-gallery { min-width: 0; align-self: start; }
.gallery-main {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-main img { display: block; width: 100%; height: 300px; object-fit: contain; transition: transform .35s ease; }
.gallery-main:hover img, .gallery-main:focus-visible img { transform: scale(1.055); }
.gallery-main:focus-visible, .gallery-thumb:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.gallery-zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 5px 15px #18211c20; font-size: 28px; line-height: 1;
  transition: transform .2s ease, background .2s ease;
}
.gallery-main:hover .gallery-zoom { transform: scale(1.1); background: var(--orange-pale); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.gallery-thumb {
  padding: 3px; border: 2px solid var(--line); border-radius: 9px;
  background: #fff; cursor: pointer; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gallery-thumb img { display: block; width: 100%; height: 72px; object-fit: contain; }
.gallery-thumb:hover { transform: translateY(-3px); box-shadow: 0 6px 14px #18211c14; }
.gallery-thumb.is-active { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.gallery-caption { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 8px 0 0; }
html[data-theme=dark] :is(.gallery-main,.gallery-thumb) { background: #f9f9f7; }

.product-lightbox { width: min(960px,calc(100vw - 28px)); max-width: none; max-height: min(94vh,940px); padding: 13px 20px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px #0006; }
.product-lightbox::backdrop { background: #09100cbd; backdrop-filter: blur(6px); }
.lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 10px; }
.lightbox-head strong { font-size: 16px; }
.lightbox-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--orange-pale); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox-stage { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 8px; align-items: center; }
.lightbox-stage img { width: 100%; height: min(68vh,650px); object-fit: contain; border-radius: 10px; background: #fff; }
.lightbox-nav { border: 1px solid var(--line); border-radius: 50%; width: 42px; height: 42px; background: var(--paper); color: var(--ink); font-size: 28px; cursor: pointer; transition: border-color .2s, transform .2s; }
.lightbox-nav:hover, .lightbox-close:hover { border-color: var(--orange); transform: scale(1.07); }
.lightbox-caption { display: flex; justify-content: space-between; gap: 16px; margin: 11px 50px 0; color: var(--muted); font-size: 14px; }

/* Одни и те же подписанные параметры участвуют в карточке и полном сравнении. */
.product-review .spec-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.spec-list > .spec-row {
  display: block; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #f8f9f7; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.spec-list > .spec-row:hover { transform: translateY(-3px); border-color: #bdcfc2; background: #fff; box-shadow: 0 9px 18px #1a2d2114; }
.spec-row dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.spec-row dt svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.spec-row:hover dt svg { transform: translateY(-2px) scale(1.08); }
.spec-row dd { margin: 6px 0 0 24px; color: var(--ink); font-size: 13px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
html[data-theme=dark] .spec-list > .spec-row { background: #30383a; border-color: var(--line); }
html[data-theme=dark] .spec-list > .spec-row:hover { background: #35413b; border-color: #728f7c; }
.comparison-table { min-width: 1060px; }
.comparison-table th:first-child, .comparison-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 6px 0 10px #1a2d210d; }
.comparison-table th:first-child { z-index: 2; background: #f0f1ef; }
.comparison-table td { font-size: 13px; line-height: 1.45; }
.comparison-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
html[data-theme=dark] .comparison-table th:first-child { background: #30383b; }
.compare-dialog-table { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.compare-dialog-table table { width: 100%; min-width: 670px; border-collapse: collapse; text-align: left; }
.compare-dialog-table th,.compare-dialog-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.compare-dialog-table th { background: #f2f4f0; color: var(--ink); }
.compare-dialog-table th:first-child,.compare-dialog-table td:first-child { position: sticky; left: 0; background: var(--paper); min-width: 145px; z-index: 1; font-weight: 800; }
.compare-dialog-table th:first-child { background: #f2f4f0; z-index: 2; }
.compare-dialog-table tbody tr:hover td { background: #fff3eb; }
.compare-dialog-table tbody tr:hover td:first-child { background: #fff3eb; }
.compare-dialog-table td a { color: var(--link); font-weight: 800; }
.compare-dialog-table th img { display: block; width: 86px; height: 75px; object-fit: contain; margin: 0 0 6px; background: #fff; border-radius: 6px; }
html[data-theme=dark] .compare-dialog-table th,html[data-theme=dark] .compare-dialog-table th:first-child { background: #30383b; }
html[data-theme=dark] .compare-dialog-table tbody tr:hover td { background: #39423b; }

/* Гайд: длинный читаемый текст, компактные иллюстрации и действия читателя. */
.buyer-guide { font-size: 16px; line-height: 1.7; }
.buyer-guide > p { max-width: 82ch; }
.buyer-guide h3 { font-size: clamp(23px,2.2vw,29px); line-height: 1.18; margin: 6px 0 13px; }
.buyer-guide a { color: var(--link); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.buyer-guide a:hover { color: var(--orange-dark); }
.guide-jump { display: flex; gap: 7px; flex-wrap: wrap; margin: 26px 0 31px; }
.guide-jump a { border: 1px solid var(--line); border-radius: 25px; background: var(--paper); color: var(--ink); padding: 7px 12px; font-size: 13px; text-decoration: none; transition: background .2s, transform .2s, border-color .2s; }
.guide-jump a:hover { transform: translateY(-2px); border-color: var(--orange); background: var(--orange-pale); }
.guide-decision { border: 1px solid #e3dfd7; border-left: 4px solid var(--orange); border-radius: 12px; padding: 24px; background: #fffaf5; scroll-margin-top: 24px; }
.guide-decision > p { margin: 7px 0 16px; }
.guide-scenario-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 17px 0 18px; }
.guide-scenario-buttons button { border: 1px solid #d7dcd4; border-radius: 20px; padding: 9px 13px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 750; font-size: 13px; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.guide-scenario-buttons button:hover { transform: translateY(-2px); border-color: var(--orange); }
.guide-scenario-buttons button.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }
.guide-scenario-result { padding: 17px 18px; border-radius: 9px; background: var(--paper); line-height: 1.6; }
.buyer-guide .guide-reading { grid-template-columns: minmax(185px,28%) minmax(0,1fr); align-items: stretch; gap: 0; margin: 30px 0; scroll-margin-top: 24px; }
.buyer-guide .guide-reading img { display: block; width: 100%; height: 100%; max-height: 450px; object-fit: cover; }
.buyer-guide .guide-reading div { padding: 22px clamp(18px,3vw,30px); }
.buyer-guide .guide-reading p { margin: 0 0 13px; line-height: 1.68; }
.buyer-guide .guide-reading.reverse { grid-template-columns: minmax(0,1fr) minmax(185px,28%); }
.buyer-guide .guide-reading.reverse img { grid-column: 2; grid-row: 1; }
.buyer-guide .guide-reading.reverse div { grid-column: 1; grid-row: 1; }
.guide-callout, .guide-note { display: flex; gap: 14px; padding: 18px 21px; border-radius: 11px; background: #eef4ee; margin: 20px 0; }
.guide-callout > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #d7e6da; color: var(--link); font-size: 24px; }
.guide-callout p,.guide-note p { margin: 4px 0 0; }
.guide-note { display: block; background: var(--orange-pale); border-left: 4px solid var(--orange); }
.guide-table-wrap { margin: 24px 0 30px; }
.guide-table { min-width: 820px; }
.guide-table caption { text-align: left; padding: 13px 16px; font-weight: 850; font-size: 17px; color: var(--ink); }
.guide-table td { font-size: 14px; line-height: 1.5; }
.guide-table td:nth-last-child(2) { color: var(--text); font-weight: 400; }
.guide-fit-check { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,1fr); gap: 23px; background: #f2f5f1; border: 1px solid #dce5dc; border-radius: 12px; padding: 25px; }
.guide-fit-check h3 { margin-bottom: 10px; }
.guide-fit-items { display: grid; gap: 8px; }
.guide-fit-items label { display: flex; align-items: start; gap: 9px; padding: 9px 11px; border: 1px solid #dbe4dc; border-radius: 8px; background: var(--paper); cursor: pointer; line-height: 1.35; transition: border-color .2s, transform .2s, background .2s; }
.guide-fit-items label:hover { transform: translateX(3px); border-color: #8cb89a; }
.guide-fit-items label:has(input:checked) { border-color: #8cb89a; background: #e8f2e9; }
.guide-fit-items input { margin-top: 3px; accent-color: var(--pro); }
#guide-fit-progress { color: var(--link); font-size: 13px; font-weight: 800; }
.guide-final { scroll-margin-top: 24px; border-top: 1px solid var(--line); margin-top: 33px; padding-top: 27px; }
.guide-final ol { list-style: none; padding: 0; display: grid; gap: 9px; }
.guide-final li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.guide-final li b { color: var(--orange); font-size: 20px; }
html[data-theme=dark] .guide-decision { background: #312d29; border-color: var(--line); border-left-color: var(--orange); }
html[data-theme=dark] .guide-callout,html[data-theme=dark] .guide-fit-check { background: #2c3b31; border-color: var(--line); }
html[data-theme=dark] .guide-callout > span { background: #3e5945; }
html[data-theme=dark] .guide-fit-items label { background: var(--paper); border-color: var(--line); }
html[data-theme=dark] .guide-fit-items label:has(input:checked) { background: #34513e; }
html[data-theme=dark] .guide-note { background: #433124; }

@media (max-width: 1100px) {
  .product-review .spec-list { grid-template-columns: 1fr; }
  .spec-list > .spec-row { display: grid; grid-template-columns: minmax(95px,42%) minmax(0,1fr); align-items: center; }
  .spec-row dd { margin: 0; }
}
@media (max-width: 700px) {
  .gallery-main img { height: 260px; }
  .gallery-thumb img { height: 60px; }
  .product-review .spec-list { grid-template-columns: 1fr; }
  .spec-list > .spec-row { grid-template-columns: minmax(0,40%) minmax(0,1fr); padding: 10px; }
  .spec-row dd { font-size: 12px; }
  .product-lightbox { padding: 10px; }
  .lightbox-stage { grid-template-columns: 32px minmax(0,1fr) 32px; gap: 2px; }
  .lightbox-stage img { height: min(65vh,550px); }
  .lightbox-nav { width: 31px; height: 31px; font-size: 22px; }
  .lightbox-caption { margin: 10px 35px 0; }
  .guide-decision,.guide-fit-check { padding: 17px; }
  .buyer-guide .guide-reading,.buyer-guide .guide-reading.reverse { grid-template-columns: 1fr; }
  .buyer-guide .guide-reading img,.buyer-guide .guide-reading.reverse img { grid-column: 1; grid-row: 1; height: 180px; max-height: none; }
  .buyer-guide .guide-reading div,.buyer-guide .guide-reading.reverse div { grid-column: 1; grid-row: 2; padding: 17px; }
  .guide-fit-check { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-main img,.gallery-thumb,.spec-list > .spec-row,.guide-jump a,.guide-scenario-buttons button,.guide-fit-items label { transition: none; }
  .gallery-main:hover img,.gallery-thumb:hover,.spec-list > .spec-row:hover,.guide-jump a:hover,.guide-scenario-buttons button:hover,.guide-fit-items label:hover { transform: none; }
}

/* Персональный рейтинг, ограничения моделей и живое сравнение. */
.personalize-section { padding: clamp(20px,3vw,32px); border-radius: 18px; border: 1px solid #e8d1bf; background: linear-gradient(145deg,#fffaf5,#f3f6f0); }
.personalize-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.personalize-head h2 { margin-bottom: 8px; }
.personalize-head p:last-child { max-width: 70ch; margin: 0; color: var(--muted); line-height: 1.5; }
.personalize-eq { flex: none; font-size: 37px; line-height: 1; letter-spacing: -6px; color: var(--orange); padding-right: 9px; }
.priority-help { margin: 19px 0 12px; font-size: 13px; color: var(--muted); }
.priority-sliders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.priority-slider { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--paper); transition: box-shadow .22s,border-color .22s,transform .22s; }
.priority-slider:hover,.priority-slider:focus-within { border-color: var(--orange); box-shadow: 0 8px 21px #4a332219; transform: translateY(-2px); }
.priority-slider > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-weight: 750; }
.priority-slider output { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; background: var(--orange-pale); color: var(--orange-dark); }
.priority-slider input { width: 100%; accent-color: var(--orange); cursor: pointer; }
.personalize-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 19px; }
.personalize-actions .button { padding: 9px 15px; font-size: 14px; }
#personalize-status { color: var(--link); font-size: 13px; }
.share-url { display: block; width: 100%; margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); }
.share-url[hidden],.personalized-results[hidden] { display: none; }
.personalized-results { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.personalized-results h3 { font-size: 22px; margin: 0 0 4px; }
.personalized-results > p { margin: 0 0 15px; color: var(--muted); font-size: 14px; }
.personalized-results ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.personalized-results a { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); transition: border-color .2s,transform .2s,box-shadow .2s; }
.personalized-results a:hover,.personalized-results a:focus-visible { border-color: var(--orange); transform: translateX(3px); box-shadow: 0 5px 14px #bd7b4a22; }
.personalized-results a span,.personalized-results a b { color: var(--orange-dark); }
.personalized-results a strong { color: var(--ink); }
.not-for { margin-top: 16px; padding: 18px 20px; border: 1px solid #e7dacd; background: #fbf7f2; border-radius: 12px; transition: transform .22s,box-shadow .22s,border-color .22s; }
.not-for:hover { transform: translateY(-2px); border-color: #cc9d80; box-shadow: 0 9px 22px #30272012; }
.not-for > div { display: flex; align-items: center; gap: 9px; }
.not-for > div > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #f5e8db; color: #a75d3c; font-size: 24px; }
.not-for h4 { margin: 0; font-size: 18px; color: var(--ink); }
.not-for ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 18px; list-style: none; padding: 0; margin: 12px 0 0; }
.not-for li { display: flex; gap: 9px; color: var(--text); font-size: 14px; line-height: 1.45; }
.not-for li span { font-weight: 850; color: #a75d3c; }
.compare-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 17px 0; }
.compare-pick { cursor: pointer; border: 1px solid var(--line); border-radius: 22px; padding: 8px 11px; display: flex; gap: 7px; align-items: center; color: var(--text); font-size: 13px; background: var(--paper); transition: border-color .2s,background .2s,transform .2s; }
.compare-pick:hover { transform: translateY(-2px); border-color: var(--orange); }
.compare-pick:has(input:checked) { background: var(--orange-pale); border-color: var(--orange); color: var(--orange-dark); }
.compare-pick input,.compare-dialog-tools input { accent-color: var(--orange); }
.compare-controls .button { font-size: 13px; padding: 9px 14px; }
#compare-dialog { width: min(1050px,calc(100% - 22px)); }
.compare-dialog-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 12px; color: var(--text); font-size: 14px; }
.compare-dialog-tools label { cursor: pointer; font-weight: 750; }
.compare-dialog-tools span { color: var(--muted); }
.compare-dialog-table { max-height: min(62vh,670px); }
.compare-dialog-table thead th { position: sticky; top: 0; z-index: 2; min-width: 160px; }
.compare-dialog-table thead th:first-child { z-index: 4; }
.compare-dialog-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--paper); min-width: 145px; text-align: left; font-size: 14px; }
.compare-dialog-table tbody tr:hover th { background: #fff3eb; }
.compare-dialog-table .has-difference td { background: #fff9f3; }
.compare-dialog-table th,.compare-dialog-table td { border-right: 1px solid var(--line); }
.compare-dialog-table th:last-child,.compare-dialog-table td:last-child { border-right: 0; }
.compare-remove { display: block; padding: 5px 0; border: 0; background: none; color: var(--orange-dark); font-weight: 800; cursor: pointer; }
.compare-remove:hover { text-decoration: underline; }
.compare-empty { color: var(--muted); padding: 20px; }
html[data-theme=dark] .personalize-section { background: linear-gradient(145deg,#292e2e,#242c29); border-color: var(--line); }
html[data-theme=dark] .not-for { background: #342c28; border-color: #615047; }
html[data-theme=dark] .not-for > div > span { background: #563a2b; color: #f3ad87; }
html[data-theme=dark] .not-for li span { color: #f3ad87; }
html[data-theme=dark] .compare-dialog-table .has-difference td { background: #34352d; }
html[data-theme=dark] .compare-dialog-table tbody tr:hover th { background: #39423b; }

/* Доступная музыкальная проверка в демонстрационной форме комментариев. */
.rhythm-captcha { margin-top: 19px; padding: 19px; border: 1px solid #d6b49d; border-radius: 14px; background: #fff9f3; }
.rhythm-captcha[hidden],.captcha-text-alternative[hidden] { display: none; }
.captcha-heading { display: flex; gap: 11px; align-items: center; }
.captcha-icon { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border-radius: 11px; color: #fff; background: var(--orange); font-size: 25px; }
.captcha-heading strong,.captcha-heading small { display: block; }
.captcha-heading strong { color: var(--ink); font-size: 18px; }
.captcha-heading small { color: var(--muted); font-size: 12px; }
.captcha-refresh { margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 24px; cursor: pointer; }
.captcha-refresh:hover { border-color: var(--orange); color: var(--orange); transform: rotate(35deg); }
.rhythm-captcha > p { font-size: 14px; color: var(--text); margin: 13px 0; }
.captcha-sample { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 11px 14px; border-radius: 9px; background: #272c2b; color: #fff; }
.captcha-sample > span { font-size: 11px; letter-spacing: .08em; color: #c5d4ce; }
#captcha-pattern { display: flex; gap: 12px; font-size: 27px; line-height: 1; }
#captcha-pattern .beat-on { color: #ffa06f; }
#captcha-pattern .beat-off { color: #d5ded9; }
.captcha-pads { display: flex; gap: 9px; margin: 13px 0; }
.captcha-pad { width: 46px; height: 45px; border-radius: 9px; border: 1px solid #aab7af; background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 850; transition: transform .18s,box-shadow .18s,background .18s; }
.captcha-pad:hover,.captcha-pad:focus-visible { transform: translateY(-3px); box-shadow: 0 5px 12px #b9714b33; border-color: var(--orange); }
.captcha-pad[aria-pressed=true] { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: 0 0 0 3px #f0643223; }
.captcha-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.captcha-actions .button,.captcha-text-alternative .button { padding: 9px 15px; font-size: 13px; }
.captcha-text-alternative { margin-top: 15px; padding: 14px; border: 1px dashed #b7c4ba; border-radius: 9px; background: var(--paper); }
.captcha-text-alternative label { display: block; font-size: 14px; font-weight: 750; color: var(--ink); margin-bottom: 7px; }
.comments-section .captcha-text-alternative input { width: min(250px,100%); margin-right: 8px; padding: 9px; }
.rhythm-captcha .captcha-status { min-height: 20px; margin: 13px 0 0; font-weight: 700; color: var(--link); }
.rhythm-captcha .captcha-demo-note { margin-bottom: 0; color: var(--muted); font-size: 12px; }
html[data-theme=dark] .rhythm-captcha { background: #332c28; border-color: #775640; }
html[data-theme=dark] .captcha-text-alternative { background: var(--paper); }
@media(max-width:700px) {
  .priority-sliders,.not-for ul { grid-template-columns: 1fr; }
  .personalize-eq { display: none; }
  .personalize-section { padding: 19px; }
  .compare-controls .button { width: 100%; justify-content: center; }
  .compare-pick { max-width: 100%; }
  #compare-dialog { padding: 16px; max-height: 90vh; }
  .compare-dialog-table { max-height: 68vh; }
  .compare-dialog-table th,.compare-dialog-table td { padding: 10px 9px; font-size: 12px; }
  .compare-dialog-table tbody th,.compare-dialog-table thead th:first-child { min-width: 115px; }
  .captcha-pads { justify-content: space-between; }
}
@media(prefers-reduced-motion:reduce) {
  .priority-slider:hover,.priority-slider:focus-within,.not-for:hover,.personalized-results a:hover,.captcha-pad:hover,.captcha-refresh:hover { transform: none; }
}
.product-card.personalized-pick:not(.highlight) { border-color: #d7a778; box-shadow: 0 0 0 2px #f064321a, 0 9px 25px #2f241c0d; }
.compare-dialog-picks { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; }
.compare-dialog-picks .compare-pick { font-size: 12px; padding: 6px 9px; }