.eco-sec {
padding: 44px 0 24px;
scroll-margin-top: 84px;
--eco-water:      #2F80ED;
--eco-water-soft: rgba(47,128,237,.12);
--eco-warn:       #E0A400;
--eco-warn-soft:  rgba(224,164,0,.14);
}
[data-theme="dark"] .eco-sec {
--eco-water:      #5FA8FF;
--eco-water-soft: rgba(95,168,255,.16);
--eco-warn:       #F0C24B;
--eco-warn-soft:  rgba(240,194,75,.16);
}
.eco-intro-motto {
text-align: center; max-width: 640px; margin: 0 auto 22px;
font-size: clamp(16px, 2.4vw, 20px); font-weight: 700; font-style: italic;
line-height: 1.5; color: var(--mg-primary);
}
.eco-card {
position: relative;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: var(--mg-r-lg);
box-shadow: var(--mg-shadow);
padding: 34px;
overflow: hidden;
}
@media (max-width: 640px) { .eco-card { padding: 22px 18px; } }
.eco-card-watermark {
position: absolute; top: -22px; right: -16px;
font-size: 132px; line-height: 1;
color: var(--mg-primary); opacity: .05; pointer-events: none;
}
.eco-chip-head {
display: inline-flex; align-items: center; gap: 7px;
background: var(--mg-primary-soft);
border: 1px solid var(--mg-primary-border);
color: var(--mg-primary);
font-size: 12.5px; font-weight: 700;
padding: 5px 13px; border-radius: var(--mg-r-xl);
margin-bottom: 14px;
}
.eco-leaf { font-size: 1.05em; line-height: 1; }
.eco-title {
font-size: clamp(21px, 3.2vw, 27px); font-weight: 800;
letter-spacing: -.3px; color: var(--mg-text); margin: 0 0 10px;
}
.eco-lead {
font-size: 15px; line-height: 1.7; color: var(--mg-text-muted);
max-width: 700px; margin: 0 0 26px;
}
.eco-lead strong { color: var(--mg-text2); font-weight: 700; }
.eco-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
margin-bottom: 22px;
}
@media (max-width: 820px) { .eco-grid { grid-template-columns: 1fr; } }
.eco-product {
background: var(--mg-surface2);
border: 1px solid var(--mg-border);
border-radius: var(--mg-r); padding: 14px;
display: flex; flex-direction: column; gap: 12px;
align-self: start;
}
.eco-product-thumb {
height: 100px; border-radius: var(--mg-r-sm);
background: linear-gradient(135deg, var(--mg-primary-soft), var(--mg-bg-alt));
display: flex; align-items: center; justify-content: center;
font-size: 44px; line-height: 1;
}
.eco-product-top {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.eco-product-name { font-size: 15px; font-weight: 700; color: var(--mg-text); line-height: 1.3; }
.eco-product-price { font-size: 16px; font-weight: 800; color: var(--mg-primary); white-space: nowrap; }
.eco-metrics { display: flex; flex-wrap: wrap; gap: 7px; }
.eco-metric {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; color: var(--mg-text2);
padding: 4px 9px; border-radius: var(--mg-r-xl);
background: var(--mg-primary-soft);
}
.eco-metric--water { background: var(--eco-water-soft); }
.eco-metric--water i { color: var(--eco-water); }
.eco-product-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.eco-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 700;
padding: 4px 10px; border-radius: var(--mg-r-xl);
}
.eco-badge--eco { background: var(--mg-primary); color: #fff; }
.eco-badge--local {
background: transparent; color: var(--mg-text-muted);
border: 1px solid var(--mg-border-strong);
}
.eco-badge--local i { color: var(--mg-primary); }
.eco-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.eco-feats li { display: flex; align-items: flex-start; gap: 12px; }
.eco-feat-ico {
flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--mg-r-sm);
display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.eco-ico--green { background: var(--mg-primary-soft); color: var(--mg-primary); }
.eco-ico--blue  { background: var(--eco-water-soft);  color: var(--eco-water); }
.eco-ico--olive { background: var(--mg-primary-soft); color: var(--mg-primary-dark); }
.eco-ico--warn  { background: var(--eco-warn-soft);   color: var(--eco-warn); }
.eco-feats li > div { display: flex; flex-direction: column; gap: 2px; }
.eco-feats li strong { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }
.eco-feats li span { font-size: 13px; line-height: 1.5; color: var(--mg-text-muted); }
.eco-savings {
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, var(--mg-primary) 0%, var(--mg-primary-dark) 100%);
border-radius: var(--mg-r); padding: 18px 20px; margin-bottom: 24px;
box-shadow: 0 8px 24px rgba(45,106,79,.22);
}
.eco-savings-ico {
flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
background: rgba(255,255,255,.16); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.eco-savings-txt p { margin: 0 0 3px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.94); }
.eco-savings-txt p b { color: #D8F3DC; font-weight: 800; }
.eco-savings-sub { font-size: 12px; color: rgba(255,255,255,.72); }
.eco-prestige {
font-size: 14.5px; line-height: 1.7; color: var(--mg-text-muted);
max-width: 770px; margin: 0 0 16px;
}
.eco-prestige strong { color: var(--mg-primary); font-weight: 700; }
.eco-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.eco-tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; color: var(--mg-text2);
background: var(--mg-surface2); border: 1px solid var(--mg-border);
padding: 6px 13px; border-radius: var(--mg-r-xl);
}
.eco-tag i { color: var(--mg-primary); }
.eco-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; border-top: 1px solid var(--mg-border); padding-top: 16px;
}
.eco-foot-note {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; color: var(--mg-text-light);
}
.eco-method-link {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer;
font-size: 13px; font-weight: 700; color: var(--mg-primary);
padding: 4px 2px; transition: var(--ease);
}
.eco-method-link:hover { gap: 9px; color: var(--mg-primary-dark); }
.eco-modal {
position: relative;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: var(--mg-r-lg);
box-shadow: var(--mg-shadow-lg);
padding: 28px;
}
.eco-modal-close {
position: absolute; top: 16px; right: 16px;
width: var(--btn-icon-sm); height: var(--btn-icon-sm); border-radius: var(--mg-r-sm);
background: var(--mg-surface2); border: 1.5px solid var(--mg-border);
color: var(--mg-text-muted); cursor: pointer; font-size: 18px;
display: flex; align-items: center; justify-content: center; transition: var(--ease);
}
.eco-modal-close:hover { color: var(--mg-text); background: var(--mg-bg-alt); }
.eco-modal-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding-right: 34px; }
.eco-modal-ico {
flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--mg-r-sm);
background: var(--mg-primary-soft);
display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.eco-modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--mg-text); }
.eco-modal-intro { font-size: 14px; line-height: 1.65; color: var(--mg-text-muted); margin: 0 0 18px; }
.eco-modal-intro strong { color: var(--mg-text2); font-weight: 700; }
.eco-modal-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.eco-modal-list li { display: flex; align-items: flex-start; gap: 12px; }
.eco-modal-li-ico {
flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--mg-r-sm);
display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.eco-modal-list li > div { display: flex; flex-direction: column; gap: 3px; }
.eco-modal-list li strong { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }
.eco-modal-list li span { font-size: 13px; line-height: 1.55; color: var(--mg-text-muted); }
.eco-modal-info {
display: flex; align-items: flex-start; gap: 9px;
background: var(--mg-surface2); border: 1px solid var(--mg-border);
border-radius: var(--mg-r-sm); padding: 12px 14px; margin-bottom: 20px;
font-size: 12.5px; line-height: 1.55; color: var(--mg-text-muted);
}
.eco-modal-info i { color: var(--mg-text-light); margin-top: 1px; }
.eco-modal-foot { display: flex; justify-content: flex-end; }
.eco-modal-ok {
background: linear-gradient(135deg, var(--mg-primary) 0%, var(--mg-primary-dark) 100%);
color: #fff; border: none; cursor: pointer;
font-size: var(--btn-fs-m); font-weight: 700;
padding: var(--btn-pad-m); border-radius: var(--mg-r);
box-shadow: 0 4px 14px rgba(45,106,79,.30); transition: var(--ease);
}
.eco-modal-ok:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(45,106,79,.4); }