/* Тихие, но заметные фильтры: материал считывается с первого взгляда и не слипается на мобильном. */
.slice-filters,.color-filters{display:grid;gap:8px;margin-top:12px}
.slice-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
.color-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
.slice-filter,.color-swatch{position:relative;display:grid;align-items:center;min-width:0;border:1px solid #cfdacf;border-radius:11px;background:#fff;color:#24382a;text-align:left;cursor:pointer;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.slice-filter{grid-template-columns:25px minmax(0,1fr);gap:7px;min-height:64px;padding:9px 7px}
.color-swatch{grid-template-columns:22px minmax(0,1fr);gap:7px;min-height:48px;padding:8px 7px}
.slice-filter:hover,.color-swatch:hover{border-color:#8fbd87;background:#f3f9f0;transform:translateY(-1px)}
.slice-filter:focus-visible,.color-swatch:focus-visible{outline:3px solid rgba(85,194,44,.35);outline-offset:2px}
.slice-filter.is-selected,.color-swatch.is-selected{border-color:#075d20;background:#e8f5e3;box-shadow:inset 0 0 0 1px #075d20;color:#075d20}
.slice-filter__copy,.color-swatch b{display:block;min-width:0}
.slice-filter__copy b{display:block;font-size:11px;line-height:1.15;white-space:nowrap}
.slice-filter__copy small{display:block;margin-top:3px;color:#6a786e;font-size:9px;line-height:1.1}
.slice-filter em,.color-swatch em{position:absolute;right:6px;top:5px;display:block;color:#526158;font-size:9px;font-style:normal;font-weight:800;line-height:1}
.slice-filter.is-selected em,.color-swatch.is-selected em{color:#075d20}
.panel-slice{position:relative;display:block;width:22px;height:29px;border:1px solid #9baa9c;border-radius:4px;background:linear-gradient(135deg,#e3e9e0,#c7d1c6);box-shadow:inset 0 -4px 0 rgba(7,93,32,.13)}
.panel-slice:before,.panel-slice:after,.panel-slice i{content:"";position:absolute;left:3px;right:3px;height:2px;border-radius:2px;background:#8a998b}
.panel-slice:before{top:7px}.panel-slice i{top:13px}.panel-slice:after{top:19px}
.panel-slice--25{transform:scaleY(.72);transform-origin:center}.panel-slice--50{transform:scaleY(.88);transform-origin:center}.panel-slice--100{transform:scaleY(1.05);transform-origin:center}
.slice-filter.is-selected .panel-slice{border-color:#3b8d36;background:linear-gradient(135deg,#e1f2d9,#b8dfae)}
.color-swatch>span{display:block;width:22px;height:22px;border:1px solid rgba(17,35,20,.2);border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.color-swatch b{min-width:0;padding-right:10px;font-size:11px;line-height:1.15;overflow:hidden;overflow-wrap:normal;word-break:normal;hyphens:none;text-overflow:ellipsis;white-space:nowrap}
.color-swatch.is-selected>span{outline:2px solid #55c22c;outline-offset:2px}
@media(max-width:760px){.slice-filters,.color-filters{gap:7px}.slice-filter{min-height:60px}.color-swatch{min-height:47px}.slice-filter__copy b,.color-swatch b{font-size:10px}}
@media(max-width:580px){.color-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.color-swatch b{font-size:11px}}
@media(max-width:360px){.slice-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.color-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.slice-filter{min-height:58px;padding-inline:9px}.color-swatch{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.slice-filter,.color-swatch{transition:none}}