/* Калькулятор систем материалов (/prices/, 29.10.2026), шаблон plasters-v8: токены --hx-*, переключатели hx-chip,
   вкладки hx-tabs/hx-tab; варианты выбора — рамка 1.5px var(--hx-line), у выбранного тёмно-синий контур, без теней. */
.pcx{margin:0 0 40px}
.pcx-lead{margin:0 0 24px;max-width:var(--hx-measure);color:var(--hx-txt);font-size:var(--hx-fs);line-height:1.5}
.pcx-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
.pcx-grid[hidden]{display:none}
.pcx-setup{min-width:0}
.pcx-step{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--hx-line)}
.pcx-step:last-child{border-bottom:0;margin-bottom:0}
.pcx-step[hidden]{display:none}
.pcx-h{margin:0 0 12px;font-size:var(--hx-h3);font-weight:600;line-height:1.25;color:var(--hx-ink)}
.pcx-groups{margin:0 0 14px}
.pcx-desc{margin:12px 0 0;color:var(--hx-txt);font-size:14px}

/* материалы: список вариантов */
.pcx-mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.pcx-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:52px;padding:5px 10px 5px 5px;border:1.5px solid var(--hx-line);border-radius:var(--hx-r);background:#fff;font-size:14px;line-height:1.25;color:var(--hx-ink)}
.pcx-opt img,.pcx-opt i{flex:none;display:block;width:40px;height:40px;object-fit:cover;border-radius:var(--hx-r);background:var(--hx-paper)}
.pcx-opt:hover{border-color:var(--hx-navy)}
.pcx-opt:focus-visible{box-shadow:var(--hx-focus)}
.pcx-opt.is-on{border-color:var(--hx-navy);box-shadow:0 0 0 1px var(--hx-navy)}

.pcx-sub{margin:14px 0 0}
.pcx-sub[hidden]{display:none}
.pcx-sub .hx-label{margin:0 0 8px}

/* размеры */
.pcx-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px;margin:14px 0 0}
.pcx-fields--one{grid-template-columns:minmax(0,240px)}
.pcx-fields[hidden],.pcx-fields .hx-field[hidden]{display:none}
.pcx-fields .hx-field{margin:0}
.pcx-sum{margin:10px 0 0;font-size:14px;color:var(--hx-txt)}
.pcx-skill{max-width:320px;margin:14px 0 0}

/* цвет */
.pcx-cur{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.pcx-cur b{display:block;font-weight:600;color:var(--hx-ink)}
.pcx-cur small{display:block;font-size:13px;color:var(--hx-mute)}
.pcx-cur-sw{flex:none;width:44px;height:44px;border:1.5px solid var(--hx-line);border-radius:var(--hx-r);background-size:cover;background-position:center}
.pcx-cur-sw.is-empty{background:repeating-linear-gradient(45deg,#fff 0 6px,var(--hx-paper) 6px 12px)}
.pcx-sw{display:flex;flex-wrap:wrap;gap:6px}
.pcx-chip-c{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border:1.5px solid var(--hx-line);border-radius:var(--hx-r);background-size:cover;background-position:center}
.pcx-chip-c:hover{border-color:var(--hx-navy)}
.pcx-chip-c:focus-visible{box-shadow:var(--hx-focus)}
.pcx-chip-c.is-on{border-color:var(--hx-navy);box-shadow:0 0 0 1px var(--hx-navy)}
.pcx-cbtn{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pcx-cbtn [hidden]{display:none}

/* итог */
.pcx-out{position:sticky;top:84px;min-width:0} /* под закреплённой шапкой сайта */
.pcx-out-in{padding:20px;border:1.5px solid var(--hx-line);border-radius:var(--hx-r);background:#fff}
.pcx-for{margin:-4px 0 12px;font-size:14px;color:var(--hx-mute)}
.pcx-rows{border-top:1px solid var(--hx-line)}
.pcx-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--hx-line);font-size:14px;line-height:1.35}
.pcx-row.is-off .pcx-row-l b,.pcx-row.is-off .pcx-row-r{color:var(--hx-mute)}
.pcx-row-l{min-width:0;display:flex;flex-direction:column;gap:2px}
.pcx-row-l small{font-size:12px;color:var(--hx-mute)}
.pcx-row-l b{font-weight:600;color:var(--hx-ink);overflow-wrap:anywhere}
.pcx-row-l b a{color:inherit;text-decoration:underline;text-decoration-color:var(--hx-line);text-underline-offset:3px}
.pcx-row-l b a:hover{text-decoration-color:currentColor}
.pcx-row-l span{color:var(--hx-txt)}
.pcx-row-l .pcx-row-n{color:var(--hx-mute);font-size:13px}
.pcx-row-r{flex:none;max-width:48%;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;color:var(--hx-txt)}
.pcx-row-r b{font-weight:600;color:var(--hx-ink);white-space:nowrap}
.pcx-optb{align-self:flex-start;margin:4px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--hx-ink);text-decoration:underline;text-decoration-color:var(--hx-line);text-underline-offset:3px;cursor:pointer}
.pcx-optb:hover{text-decoration-color:currentColor}
.pcx-optb:focus-visible,.pcx-reset:focus-visible{outline:2px solid var(--hx-ink);outline-offset:2px}
.pcx-reset{display:block;margin:10px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--hx-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pcx-reset[hidden]{display:none}
.pcx-why{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--hx-mute)}
.pcx-why:empty{display:none}
.pcx-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16px 0}
.pcx-total span{color:var(--hx-txt)}
.pcx-total b{font-size:var(--hx-h3);font-weight:600;color:var(--hx-ink);text-align:right}
.pcx-msg{margin:10px 0 0;font-size:14px;color:var(--hx-txt)}
.pcx-msg:empty{display:none}
.pcx-msg a{color:var(--hx-navy)}
/* «расчёт на почту» в блоке итога (11.11.2026): форма PlastersSaveMail, стили полей у неё свои */
.pcx-mail{margin:14px 0 0;padding:4px 0 0;border-top:1px solid var(--hx-line)}
.pcx-mail[hidden]{display:none}
.pcx-note{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--hx-mute)}

/* цены за упаковку */
.pcx-list{margin:36px 0 0}
.pcx-list-lead{margin:0 0 12px;color:var(--hx-txt)}
.pcx-list-h{margin:20px 0 8px;font-size:16px;font-weight:600}
.pcx-table td{vertical-align:top}

@media (max-width:1100px){
  .pcx-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
  .pcx-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .pcx-grid{grid-template-columns:minmax(0,1fr)}
  .pcx-out{position:static}
  .pcx-out-in{padding:16px}
}
@media (max-width:520px){
  .pcx-mats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .pcx-opt{gap:8px;min-height:46px;padding:4px 8px 4px 4px;font-size:13px}
  .pcx-opt img,.pcx-opt i{width:34px;height:34px}
  .pcx-fields{gap:0 10px}
  .pcx-row-r{max-width:52%}
}