/* ===== Comparison block — modern, matches Aproduction3 theme ===== */
.b-compare {
--cmp-accent: var(--primary-color, #e85d04);
--cmp-accent-soft: color-mix(in srgb, var(--primary-color, #e85d04) 10%, #fff);
--cmp-gray: #f0f0f0;
--cmp-gray-dark: #e4e4e4;
--cmp-text: #1a1a1a;
--cmp-muted: #666;
--cmp-radius: 12px;
--cmp-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
padding: 48px 16px 56px;
background: #fff;
}
@media (min-width: 576px) {
.b-compare { padding: 56px 24px 64px; }
}
@media (min-width: 992px) {
.b-compare { padding: 72px 32px 80px; }
}
@media (min-width: 1280px) {
.b-compare { padding: 80px 40px 96px; }
}
.b-compare__inner { max-width: 1100px; margin: 0 auto; }
.b-compare__header { text-align: center; margin-bottom: 40px; }
.b-compare__title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--cmp-text);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.b-compare__title span { color: var(--cmp-accent); }
.b-compare__lead {
margin: 0 auto;
max-width: 640px;
font-size: 15px;
line-height: 1.55;
color: var(--cmp-muted);
}
@media (min-width: 768px) {
.b-compare__title { font-size: 26px; }
.b-compare__lead { font-size: 16px; }
}
.b-compare__table {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 768px) {
.b-compare__table {
grid-template-columns: 1fr auto 1fr;
gap: 0 16px;
align-items: stretch;
}
}
.b-compare__row { display: contents; }
@media (max-width: 767px) {
.b-compare__row {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: #fff;
border-radius: var(--cmp-radius);
overflow: hidden;
box-shadow: var(--cmp-shadow);
border: 1px solid #eee;
}
.b-compare__row_head { display: none; }
.b-compare__cell_mid {
order: -1;
background: #fafafa;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--cmp-muted);
padding: 10px 16px;
border-bottom: 1px solid #eee;
}
.b-compare__cell_left,
.b-compare__cell_right {
padding: 14px 16px;
font-size: 15px;
line-height: 1.4;
}
.b-compare__cell_left {
background: var(--cmp-accent);
color: #fff;
font-weight: 600;
}
.b-compare__cell_left::before {
content: "Механизированная: ";
font-weight: 500;
opacity: 0.85;
font-size: 13px;
}
.b-compare__cell_right {
background: var(--cmp-gray);
color: var(--cmp-text);
border-top: 1px solid #e8e8e8;
}
.b-compare__cell_right::before {
content: "Обычная: ";
font-weight: 500;
color: var(--cmp-muted);
font-size: 13px;
}
}
@media (min-width: 768px) {
.b-compare__cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px 20px;
font-size: 15px;
line-height: 1.4;
min-height: 56px;
}
.b-compare__cell_left {
background: var(--cmp-accent);
color: #fff;
font-weight: 600;
}
.b-compare__cell_right {
background: var(--cmp-gray);
color: var(--cmp-text);
}
.b-compare__cell_mid {
color: var(--cmp-muted);
font-size: 14px;
font-weight: 500;
padding-left: 8px;
padding-right: 8px;
min-width: 160px;
max-width: 200px;
}
.b-compare__cell_head {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding-top: 22px;
padding-bottom: 22px;
min-height: 72px;
}
.b-compare__cell_left.b-compare__cell_head {
border-radius: var(--cmp-radius) var(--cmp-radius) 0 0;
}
.b-compare__cell_right.b-compare__cell_head {
border-radius: var(--cmp-radius) var(--cmp-radius) 0 0;
background: #d9d9d9;
color: #333;
}
.b-compare__row:last-child .b-compare__cell_left {
border-radius: 0 0 var(--cmp-radius) var(--cmp-radius);
}
.b-compare__row:last-child .b-compare__cell_right {
border-radius: 0 0 var(--cmp-radius) var(--cmp-radius);
}
.b-compare__row:not(.b-compare__row_head) .b-compare__cell_left {
border-top: 1px solid color-mix(in srgb, #fff 22%, var(--cmp-accent));
}
.b-compare__row:not(.b-compare__row_head) .b-compare__cell_right {
border-top: 1px solid #e0e0e0;
}
.b-compare__vs {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f5f5f5;
color: var(--cmp-accent);
}
.b-compare__vs svg { display: block; }
}
@media (min-width: 768px) {
.b-compare__row:not(.b-compare__row_head):hover .b-compare__cell_left {
filter: brightness(1.05);
}
.b-compare__row:not(.b-compare__row_head):hover .b-compare__cell_right {
background: var(--cmp-gray-dark);
}
}
@media (min-width: 992px) {
.b-compare__cell { padding: 18px 24px; font-size: 15px; }
.b-compare__cell_head { font-size: 17px; padding-top: 24px; padding-bottom: 24px; }
.b-compare__cell_mid { min-width: 180px; font-size: 14px; }
}