/*
 * База составов: вкладка «Состав», блок сравнения на карточке, страницы /sravnenie/.
 * Оформление — по теме herbbook: TT Norms, текст #182311 / #4d5058, подписи #9a9fad, линии #f0f2fa,
 * зелёный #78c2a4 / #5aa687, строки «подпись ....... значение» как в «Характеристиках», рамки 10px.
 */

/* ---------- Вкладка «Состав» ---------- */
.hbc { color: #4d5058; font-size: 16px; line-height: 1.5; }
.hbc p { margin: 0 0 16px; }
.hbc a { color: #5aa687; }
.hbc a:hover { color: #78c2a4; }
.hbc-lead { color: #4d5058; }
.hbc-foot { color: #9a9fad; font-size: 14px; line-height: 1.45; }
.hbc-h { margin: 40px 0 20px !important; color: #182311; font-size: 18px; font-weight: 500; }

.hbc-table { width: 100%; margin: 0 0 12px; border-collapse: collapse; }
.hbc-table th { padding: 0 16px 12px 0; border-bottom: 1px solid #f0f2fa; color: #9a9fad; font-size: 14px; font-weight: 400; text-align: left; }
.hbc-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid #f0f2fa; vertical-align: top; }
.hbc-table th:last-child, .hbc-table td:last-child { padding-right: 0; }
.hbc-table td:not(:first-child), .hbc-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.hbc-name { color: #182311; font-weight: 500; }
.hbc-sub { display: block; margin-top: 3px; color: #9a9fad; font-size: 14px; line-height: 1.4; }
.hbc-sub [lang="en"] { font-style: normal; }
.hbc-amount { color: #182311; font-variant-numeric: tabular-nums; }
.hbc-dv { font-variant-numeric: tabular-nums; }
.hbc-row--child td:first-child { position: relative; padding-left: 22px; }
.hbc-row--child td:first-child::before { content: ''; position: absolute; top: 25px; left: 4px; width: 10px; border-top: 1px solid #d9dadf; }
.hbc-group td { padding-top: 26px; color: #182311; font-weight: 500; }
.hbc-blend { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; }

/* Прочие ингредиенты, аллергены, «не содержит» — строками как в «Характеристиках». */
.hbc-specs { width: 100%; margin: 40px 0 12px; }
.hbc-specs .product__specs-value { color: #4d5058; }
.hbc-flagged { white-space: nowrap; }
.hbc-flagged::after { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 0 2px 5px; border-radius: 50%; vertical-align: middle; }
.hbc-flagged--caution::after { background: #e8b931; }
.hbc-flagged--avoid::after { background: #ea8181; }
.hbc-dot { display: inline-block; width: 8px; height: 8px; margin: 0 4px 2px 0; border-radius: 50%; vertical-align: middle; }
.hbc-dot--caution { background: #e8b931; }
.hbc-dot--avoid { background: #ea8181; }

.hbc-explain { margin: 30px 0 0; padding: 30px; border: 1px solid #f0f2fa; border-radius: 10px; }
.hbc-explain .hbc-h { margin-top: 0 !important; }
.hbc-explain ul { margin: 0; padding: 0; list-style: none; }
.hbc-explain li { margin: 0; }
.hbc-explain li:not(:last-child) { margin-bottom: 14px; }
.hbc-explain li::before { display: none !important; }

/* Раскрывающиеся блоки: пищевая ценность, оригинал этикетки, «как мы считали». */
.hbc-more, .hbc-original, .hbc-macro { margin: 24px 0 0; }
.hbc-more summary, .hbc-original summary, .hbc-macro summary { display: inline-block; color: #5aa687; font-weight: 500; list-style: none; cursor: pointer; }
.hbc-more summary::-webkit-details-marker, .hbc-original summary::-webkit-details-marker, .hbc-macro summary::-webkit-details-marker { display: none; }
.hbc-more summary::after, .hbc-original summary::after, .hbc-macro summary::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: .2s; }
.hbc-more[open] summary::after, .hbc-original[open] summary::after, .hbc-macro[open] summary::after { margin-bottom: -1px; transform: rotate(-135deg); }
.hbc-more summary:hover, .hbc-original summary:hover, .hbc-macro summary:hover { color: #78c2a4; }
.hbc-more > :not(summary), .hbc-macro > :not(summary) { margin-top: 16px; }
.hbc-original__body { margin-top: 16px; padding: 20px; border: 1px solid #f0f2fa; border-radius: 10px; color: #4d5058; font-size: 14px; overflow-x: auto; }
.hbc-original__body table { width: 100%; border-collapse: collapse; }
.hbc-original__body td, .hbc-original__body th { padding: 4px 8px; border: 1px solid #f0f2fa; }
.hbc-source { margin-top: 30px !important; }

/* ---------- Блок сравнения на карточке товара ---------- */
.hbc-profile { margin: 0 0 60px; padding: 40px; border: 1px solid #f0f2fa; border-radius: 10px; color: #4d5058; font-size: 16px; line-height: 1.5; }
.hbc-profile__title { margin: 0 0 14px; color: #182311; font-size: 24px; font-weight: 500; line-height: 1.25; }
.hbc-profile__lead { margin: 0 0 30px; }
.hbc-profile a { color: #5aa687; }
.hbc-profile a:hover { color: #78c2a4; }
.hbc-crit-list { width: 100%; }
.hbc-crit-list .product__specs-value { color: #4d5058; }
.hbc-mark { display: inline-block; width: 10px; height: 10px; margin: 0 10px 2px 0; border-radius: 50%; background: #d9dadf; vertical-align: middle; }
.hbc-mark--good { background: #78c2a4; }
.hbc-mark--mid { background: #e8b931; }
.hbc-mark--low { background: #ea8181; }
.hbc-flags { margin: 0 0 30px; padding: 0; list-style: none; }
.hbc-flags li { margin: 0; padding: 16px 20px !important; border: 1px solid #f6e3b4; border-radius: 10px; }
.hbc-flags li:not(:last-child) { margin-bottom: 10px; }
.hbc-flags li::before { display: none !important; }
.hbc-flags li.hbc-flag--red { border-color: #f9d9da; }
.hbc-note { margin: 0 0 30px; padding: 16px 20px; border: 1px solid #d7ece3; border-radius: 10px; }

/* Похожие товары — списком, как «Популярные товары» в боковой колонке. */
.hbc-analogs { margin-top: 40px; }
.hbc-analogs__title { margin: 0 0 20px; color: #182311; font-size: 20px; font-weight: 500; }
.hbc-analogs__list { margin: 0; padding: 0; list-style: none; }
.hbc-analog { display: flex; align-items: center; gap: 20px; margin: 0; padding: 16px 0 !important; border-bottom: 1px solid #f0f2fa; }
.hbc-analog:first-child { border-top: 1px solid #f0f2fa; }
.hbc-analog::before { display: none !important; }
.hbc-analog__image { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 58px; }
.hbc-analog__image img { width: auto; max-width: 100%; height: auto; max-height: 100%; }
.hbc-analog__body { flex-grow: 1; flex-basis: 0; min-width: 0; }
.hbc-analog__name { display: block; color: #151515 !important; font-weight: 500; line-height: 1.35; text-decoration: none !important; }
.hbc-analog__name:hover { color: #78c2a4 !important; }
.hbc-analog__meta { display: block; margin-top: 4px; color: #9a9fad; font-size: 14px; }

/* Кнопки — как на сайте: заливка (Купить на iHerb) и контур (Подробнее). */
.hbc-btn { display: inline-block; padding: 15px 25px; border: none; border-radius: 6px; background: #78c2a4; color: #fff !important; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none !important; transition: .2s; cursor: pointer; }
.hbc-btn:hover, .hbc-btn:focus { outline: none; background: #5aa687; }
.hbc-btn--ghost { padding: 12px 22px; border: 1px solid #78c2a4; border-radius: 10px; background: #fff; color: #5aa687 !important; font-size: 14px; white-space: nowrap; }
.hbc-btn--ghost:hover, .hbc-btn--ghost:focus { background: #78c2a4; color: #fff !important; }
.hbc-btn--outline { padding: 13px 30px; border: 1px solid #5aa687; border-radius: 5px; background: #fff; color: #5aa687 !important; }
.hbc-btn--outline:hover, .hbc-btn--outline:focus { background: #5aa687; color: #fff !important; }
.hbc-all { margin-top: 30px; }

/* ---------- Страницы сравнения /sravnenie/ ---------- */
.hbc-verdict { margin: 0 0 40px; padding: 30px; border: 1px solid #d7ece3; border-radius: 10px; font-size: 18px; line-height: 1.5; }
.hbc-verdict p { margin: 0 0 12px; }
.hbc-verdict p:first-child { color: #182311; font-size: 20px; font-weight: 500; }
.hbc-verdict p:last-child { margin-bottom: 0; }
.hbc-cmp { margin: 0 0 40px; }
.hbc-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hbc-cmp table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.hbc-cmp th, .hbc-cmp td { padding: 14px 16px 14px 0; border-bottom: 1px solid #f0f2fa; vertical-align: top; text-align: left; }
.hbc-cmp thead th { padding-bottom: 20px; border-bottom: 0; font-weight: 500; }
.hbc-cmp tbody th { width: 26%; color: #9a9fad; font-weight: 400; }
.hbc-cmp tbody th small { display: block; margin-top: 3px; font-size: 14px; }
.hbc-cmp td { color: #4d5058; }
.hbc-cmp td.hbc-win { color: #182311; font-weight: 500; }
.hbc-cmp td.hbc-win::before { content: ''; display: inline-block; width: 12px; height: 10px; margin-right: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 10'%3E%3Cpath stroke='%2378C2A4' stroke-width='3' d='M1 4l4.14 3.5L10.5 1'/%3E%3C/svg%3E") no-repeat 0 0/12px 10px; }
.hbc-cmp__prod img { display: block; width: 90px; height: 90px; margin-bottom: 12px; object-fit: contain; }
.hbc-cmp__prod a:not(.hbc-btn) { color: #151515; font-weight: 500; line-height: 1.3; text-decoration: none; }
.hbc-cmp__prod a:not(.hbc-btn):hover { color: #78c2a4; }
.hbc-cmp__prod .hbc-btn { margin-top: 14px; padding: 10px 18px; font-size: 14px; }
.hbc-cmp__score { display: inline-block; margin-top: 8px; color: #5aa687; font-size: 14px; font-weight: 500; }
.hbc-cmp__section th { padding-top: 40px; color: #182311 !important; font-size: 20px; font-weight: 500 !important; }
.hbc-none { color: #d9dadf; }
.hbc-hub { width: 100%; border-collapse: collapse; font-size: 16px; }
.hbc-hub th { white-space: nowrap; padding: 0 16px 12px 0; border-bottom: 1px solid #f0f2fa; color: #9a9fad; font-size: 14px; font-weight: 400; text-align: left; }
.hbc-hub td { padding: 14px 16px 14px 0; border-bottom: 1px solid #f0f2fa; vertical-align: top; color: #4d5058; }
.hbc-hub td:first-child { width: 28px; }
.hbc-hub td a { color: #151515; font-weight: 500; text-decoration: none; }
.hbc-hub td a:hover { color: #78c2a4; }
.hbc-hub .hbc-sub { font-weight: 400; }
.hbc-pick { margin: 20px 0 0; }
.hbc-pick input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: #78c2a4; }
.hbc-pick__bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #f0f2fa; background: #fff; }
.hbc-pick__bar .hbc-foot { margin: 0; }
.hbc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; }
.hbc-groups li { margin: 0; padding: 0 !important; }
.hbc-groups li::before { display: none !important; }
.hbc-groups a { display: block; height: 100%; padding: 24px; border: 1px solid #f0f2fa; border-radius: 10px; color: #151515 !important; font-size: 18px; font-weight: 500; text-decoration: none !important; transition: .2s; }
.hbc-groups a:hover { border-color: #78c2a4; }
.hbc-groups small { display: block; margin-top: 6px; color: #9a9fad; font-size: 14px; font-weight: 400; }

@media (max-width: 767px) {
	/* Строки «подпись ....... значение» на узком экране — подпись над значением, без точечной линии. */
	.hbc-crit-list, .hbc-crit-list tbody, .hbc-crit-list .product__specs-item,
	.hbc-specs, .hbc-specs tbody, .hbc-specs .product__specs-item { display: block; width: auto; }
	.hbc-crit-list .product__specs-item:not(:last-child), .hbc-specs .product__specs-item:not(:last-child) { margin-bottom: 16px; }
	.hbc-crit-list .product__specs-caption, .hbc-specs .product__specs-caption { display: block; width: auto; margin-bottom: 4px; }
	.hbc-crit-list .product__specs-caption::after, .hbc-specs .product__specs-caption::after { display: none; }
	.hbc-crit-list .product__specs-value, .hbc-specs .product__specs-value { display: block; }
	.hbc-profile { padding: 25px 20px; }
	.hbc-profile__title { font-size: 20px; }
	.hbc-explain { padding: 20px; }
	.hbc-verdict { padding: 20px; }
	.hbc-analog { flex-wrap: wrap; }
	.hbc-analog__action { width: 100%; padding-left: 72px; }
	.hbc-table td:not(:first-child), .hbc-table th:not(:first-child) { white-space: normal; }
}