
.mix-section { border-block:2px solid var(--ink,#101010); }
.mix-builder { border:2px solid var(--ink,#101010); background:var(--white,#fff); }
.mix-offer {
  max-width:none; margin:14px 14px 0; padding:12px 18px; background:var(--accent,#E4572E); color:#fff;
  font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; text-align:center;
}
.mix-columns {
  display:grid; grid-template-columns:minmax(170px,.85fr) minmax(0,1.2fr) 150px 168px 120px;
  gap:20px; padding:13px 20px; margin-top:14px; border-bottom:2px solid var(--ink,#101010);
  background:var(--ink,#101010); color:#fff; font-size:13px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
}
.mix-columns span:nth-child(4) { text-align:center; }
.mix-columns span:last-child { text-align:right; }
.mix-group { display:grid; grid-template-columns:minmax(170px,.85fr) minmax(0,2.6fr); border-bottom:1px solid var(--line-l,#DCDCD5); }
.mix-group h3 {
  padding:20px; font-family:var(--font-body,Arial,sans-serif); font-size:18px; line-height:1.3;
  font-weight:700; text-transform:none; letter-spacing:0;
}
.mix-lines { border-left:1px solid var(--line-l,#DCDCD5); }
.mix-line {
  display:grid; grid-template-columns:minmax(0,1fr) 150px 168px 120px;
  gap:20px; align-items:center; min-height:72px; padding:10px 20px;
  border-bottom:1px solid var(--line-l,#DCDCD5);
}
.mix-line:last-child { border-bottom:0; }
.mix-form { min-width:0; font-size:16px; }
.mix-price { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mix-price s { font-size:13px; color:#8B8F85; text-decoration:line-through; white-space:nowrap; }
.mix-price b { font-size:16px; font-weight:700; color:var(--accent-hover,#C9441C); white-space:nowrap; }
.mix-qty { display:flex; align-items:center; gap:8px; width:168px; }
.mix-qty__ctrl { display:inline-flex; align-items:stretch; border:1.5px solid var(--ink,#101010); background:var(--white,#fff); }
.mix-qty__ctrl button {
  width:42px; height:44px; border:none; background:var(--white,#fff); color:var(--ink,#101010);
  font:500 20px/1 var(--font-body,Arial,sans-serif); cursor:pointer; transition:background-color 160ms;
}
.mix-qty__ctrl button:hover { background:var(--base,#F0EFEA); }
.mix-qty__ctrl button:focus-visible { outline:3px solid rgb(228 87 46 / .35); outline-offset:-3px; }
.mix-qty__ctrl output { width:48px; display:flex; align-items:center; justify-content:center; font:600 17px/1 var(--font-body,Arial,sans-serif); }
.mix-qty__unit { width:24px; font-size:14px; font-weight:600; color:var(--muted-l,#585C51); }
.mix-sum { display:flex; flex-direction:column; gap:2px; text-align:right; min-width:0; }
.mix-sum s { font-size:12px; color:#8B8F85; text-decoration:line-through; white-space:nowrap; }
.mix-sum b { font-size:17px; font-weight:700; color:var(--accent-hover,#C9441C); white-space:nowrap; }
.mix-sum.is-zero s, .mix-sum.is-zero b { color:var(--line-l,#DCDCD5); }
.mix-sum.is-updating { animation:nm-price-pulse .42s cubic-bezier(.16,1,.3,1); }
@keyframes nm-price-pulse { 50% { transform:translateX(-3px); filter:brightness(.9); } }
.mix-summary {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center;
  padding:24px 20px; background:var(--base,#F0EFEA); border-top:2px solid var(--ink,#101010);
}
.mix-tline { font-size:22px; color:var(--muted-l,#585C51); margin-bottom:2px; }
.mix-tline s { color:#8B8F85; }
.mix-tline--save b { color:var(--ok,#3E7A3C); font-size:26px; }
.mix-total-label { display:block; margin-top:8px; margin-bottom:3px; font-size:22px; color:var(--muted-l,#585C51); }
.mix-summary strong { display:block; font-family:var(--font-display,var(--font-body,Arial,sans-serif)); font-size:30px; font-weight:300; line-height:1.25; color:var(--ink,#101010); }
.mix-hint { margin-top:7px; font-size:15.5px; color:var(--accent-hover,#C9441C); }
.mix-builder.is-ready .mix-hint { color:var(--ok,#3E7A3C); font-weight:600; }
.mix-summary .btn { min-width:210px; }
.mix-note { max-width:none; padding:15px 20px; border-top:1px solid var(--line-l,#DCDCD5); color:var(--muted-l,#585C51); font-size:14px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width:900px) {
  .mix-columns { display:none; }
  .mix-offer { margin:14px; }
  .mix-group { grid-template-columns:1fr; }
  .mix-group h3 { padding:18px 20px 10px; background:var(--base,#F0EFEA); }
  .mix-lines { border-left:0; }
}

@media (max-width:640px) {
  .mix-builder { margin-inline:0; }
  .mix-group h3 { font-size:17px; }
  .mix-line {
    grid-template-columns:minmax(0,1fr) 168px;
    grid-template-areas:'form qty' 'price qty' 'sum sum';
    gap:4px 12px; min-height:88px; padding:12px 14px;
  }
  .mix-form { grid-area:form; font-size:15px; }
  .mix-price { grid-area:price; flex-direction:row; align-items:baseline; gap:8px; }
  .mix-price s { font-size:12px; }
  .mix-price b { font-size:15px; }
  .mix-qty { grid-area:qty; justify-self:end; }
  .mix-sum { grid-area:sum; flex-direction:row; justify-content:flex-end; align-items:baseline; gap:10px; margin-top:6px; }
  .mix-summary { grid-template-columns:1fr; gap:18px; padding:20px 14px; }
  .mix-summary strong { font-size:25px; }
  .mix-summary .btn { width:100%; min-width:0; }
  .mix-note { padding:14px; }
}
