:root{
  --graphite:#2E3438; --surface:#FBF9F5; --surface-2:#EFEBE1;
  --terracotta:#BE6A42; --terracotta-ink:#A85835;
  --line-1:rgba(46,52,56,.1); --line-14:rgba(46,52,56,.14); --line-2:rgba(46,52,56,.2);
  --ink-45:rgba(46,52,56,.45); --ink-55:rgba(46,52,56,.55); --ink-65:rgba(46,52,56,.65);
  --ff-sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --r-lg:20px; --r-md:12px; --r-sm:8px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:400 15px/1.45 var(--ff-sans); color:var(--graphite);
  background:var(--bg,#888572); transition:background .45s ease;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer;color:inherit}
svg{display:block}

/* ================= верх ================= */
.top{
  position:fixed; inset:12px 12px auto; z-index:30;
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  pointer-events:none;
}
.top>*{pointer-events:auto}
.brand{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  background:var(--surface); border-radius:999px; box-shadow:0 2px 8px rgba(46,52,56,.14);
  font:600 13px var(--ff-sans);
}
.brand .tag{font:500 9.5px var(--ff-mono); letter-spacing:.12em; color:var(--ink-55)}
.ctx{
  height:40px; display:flex; align-items:center; padding:0 14px;
  background:var(--surface); border-radius:999px;
  box-shadow:0 2px 8px rgba(46,52,56,.14); font:500 11px var(--ff-mono); letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw;
}
.close{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--surface); border:0; border-radius:999px;
  box-shadow:0 2px 8px rgba(46,52,56,.14);
}

/* ================= фото-сцена ================= */
.scene{position:fixed; inset:0; z-index:2; display:none; background:#E9E3D6}
.scene.on{display:block}
.scene canvas{width:100%; height:100%; object-fit:cover; display:block}
.scene.card{background:var(--bg); transition:background .45s ease}
@media (min-width:761px){
  .scene.card canvas{
    position:absolute; left:7vw; top:50%; transform:translateY(-50%);
    width:auto; height:82vh; max-width:42vw; object-fit:contain;
    border-radius:18px; box-shadow:0 30px 70px rgba(20,24,26,.4);
  }
}
.scene .flag{display:flex; gap:10px; align-items:center;
  position:fixed; left:50%; top:64px; transform:translateX(-50%);
  font:500 10px var(--ff-mono); letter-spacing:.08em; color:rgba(251,249,245,.95);
  background:rgba(46,52,56,.55); padding:6px 12px; border-radius:8px; white-space:nowrap; z-index:6;
  max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}

.scene .flag .swap{
  border:0; background:rgba(251,249,245,.22); color:#fff; border-radius:6px;
  font:600 10px var(--ff-mono); letter-spacing:.05em; padding:3px 8px; cursor:pointer;
}

/* ================= имя цвета ================= */
.bigname{
  position:fixed; left:5vw; top:38vh; z-index:5; color:var(--fg,#fff);
  font:300 clamp(26px,5.5vw,64px)/1.05 var(--ff-sans);
  opacity:.3; user-select:none; pointer-events:none; transition:color .45s;
}
.bigname .code{display:block; font:400 clamp(11px,1.4vw,16px) var(--ff-mono); letter-spacing:.14em; margin-top:10px}
.bigname.hidden{display:none}

/* ================= сравнение ================= */
.compare{position:fixed; inset:0; z-index:7; display:none}
.compare.on{display:flex}
.compare .band{flex:1; position:relative; cursor:pointer; transition:flex .25s}
.compare .band:hover{flex:1.3}
.compare .band .lbl{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
  font:500 11.5px var(--ff-mono); letter-spacing:.06em; white-space:nowrap;
  padding:6px 10px; border-radius:8px; background:rgba(251,249,245,.88); color:var(--graphite);
}

/* ================= чип ================= */
.chip{
  position:fixed; left:16px; bottom:16px; z-index:20;
  display:flex; gap:10px; align-items:center;
  background:var(--surface); border-radius:14px; padding:8px 10px;
  box-shadow:0 14px 32px rgba(46,52,56,.2); max-width:min(460px,calc(100vw - 32px));
}
.chip .sw{width:44px;height:44px;border-radius:10px;flex:none;background:var(--bg);transition:background .45s}
.chip .nm{font:600 15px/1.2 var(--ff-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip .mt{font:400 10.5px var(--ff-mono); color:var(--ink-55); white-space:nowrap}
.chip .add{
  margin-left:6px; flex:none; width:40px; height:40px; display:grid; place-items:center;
  border:1.5px solid var(--terracotta); background:transparent;
  color:var(--terracotta-ink); border-radius:10px;
}
.chip .add.in{background:var(--terracotta); color:#fff}

/* ================= панель ================= */
.panel{
  position:fixed; right:12px; top:60px; bottom:12px; width:400px; z-index:25;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:0 18px 44px rgba(46,52,56,.22);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s;
}
/* свернуть на десктопе — уехать вправо */
.collapse{
  position:absolute; top:11px; left:10px; z-index:6; width:30px; height:30px;
  display:grid; place-items:center; border:0; border-radius:999px;
  background:var(--surface-2); color:var(--ink-65); box-shadow:0 1px 3px rgba(46,52,56,.1);
}
.collapse:hover{background:var(--line-14); color:var(--graphite)}
.panel.collapsed{transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none}
.reopen{
  position:fixed; right:0; top:50%; transform:translateY(-50%) translateX(101%); z-index:26;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border:0; border-radius:14px 0 0 14px; padding:14px 10px;
  background:var(--terracotta); color:#fff; box-shadow:0 8px 22px rgba(46,52,56,.28);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.reopen span{font:600 11px var(--ff-sans); writing-mode:vertical-rl; letter-spacing:.06em}
.reopen.show{transform:translateY(-50%) translateX(0)}
.mock-note{
  background:#F4E3C8; color:#7A5A1F; font:500 10px var(--ff-mono);
  padding:6px 10px; letter-spacing:.04em; text-align:center; flex:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.mock-note button{
  border:1px solid #C9A76B; background:#FBF3E4; color:#7A5A1F; border-radius:7px;
  font:600 10px var(--ff-mono); padding:3px 8px; letter-spacing:.03em; white-space:nowrap;
}
.handle{display:none}

/* --- что красим: иконки-категории --- */
.cats{
  display:flex; gap:2px; padding:10px 10px 0 48px; overflow-x:auto; scrollbar-width:none; flex:none;
}
.cats::-webkit-scrollbar{display:none}
.cat{
  flex:1 0 auto; min-width:56px; border:0; background:transparent; border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 7px;
  color:var(--ink-65);
}
.cat svg{stroke:currentColor}
.cat .t{font:500 9.5px var(--ff-sans); letter-spacing:.01em}
.cat:hover{background:var(--surface-2)}
.cat.on{background:var(--graphite); color:#fff}

/* --- ряд материалов (что за поверхность) --- */
.mats{display:flex; align-items:center; gap:9px; padding:9px 12px 0}
.mats .mlabel{flex:none; font:500 9.5px var(--ff-mono); letter-spacing:.1em; color:var(--ink-55); text-transform:uppercase}
.mrow{display:flex; gap:6px; flex:1}
.mchip{
  flex:1; display:flex; align-items:center; justify-content:center; height:34px;
  border:1.5px solid var(--line-2); border-radius:9px; padding:0 12px; background:transparent;
}
.mchip .mt{font:600 12.5px var(--ff-sans); color:var(--graphite)}
.mchip.on{border-color:var(--graphite); background:var(--graphite)}
.mchip.on .mt{color:#fff}

/* --- строка: поиск + коллекции --- */
.tools{display:flex; gap:8px; padding:10px 12px 0; flex:none}
.search{
  flex:1; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); border-radius:10px; padding:0 12px; height:40px; background:#fff;
}
.search input{border:0;outline:0;flex:1;font:400 13px var(--ff-sans);background:transparent;min-width:0}
.colbtn{
  flex:none; display:flex; align-items:center; gap:7px; height:40px;
  border:1px solid var(--line-2); background:transparent; border-radius:10px; padding:0 11px;
}
.colbtn .mini{display:flex; border-radius:5px; overflow:hidden}
.colbtn .mini span{width:9px;height:18px}
.colbtn .car{font-size:8px; opacity:.5}
.colbtn .cnt{font:500 10px var(--ff-mono); color:var(--ink-55)}

/* --- сетка --- */
.gridwrap{flex:1; overflow-y:auto; padding:4px 12px 10px}
.glabel{
  font:500 9.5px var(--ff-mono); letter-spacing:.12em; color:var(--ink-55);
  margin:12px 2px 6px; text-transform:uppercase; display:flex; justify-content:space-between; align-items:baseline;
}
.glabel .cnt{opacity:.65}
.grid{display:grid; grid-template-columns:repeat(8,1fr); gap:5px}
.grid .c{aspect-ratio:1; border-radius:7px; border:0; padding:0; position:relative}
.grid .c:hover{transform:scale(1.14); z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.25)}
.grid .c.sel{outline:2px solid var(--graphite); outline-offset:2px}
.grid .c.tray::before{
  content:""; position:absolute; right:2px; top:2px; width:7px; height:7px; border-radius:50%;
  background:var(--terracotta); box-shadow:0 0 0 1.5px #fff;
}
.grid .c.dis{opacity:.18}
.empty{padding:18px 6px; font:400 12.5px var(--ff-sans); color:var(--ink-65)}
.hint{
  margin:10px 2px 0; padding:9px 11px; background:var(--surface-2); border-radius:10px;
  font:400 11.5px/1.4 var(--ff-sans); color:var(--ink-65);
}
.srow{display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:7px 4px; border-radius:8px; text-align:left}
.srow:hover{background:var(--surface-2)}
.srow .sw{width:28px;height:28px;border-radius:7px;flex:none}
.srow .cd{font:500 12px var(--ff-mono); flex:none}
.srow .nm2{font:400 12px var(--ff-sans); color:var(--ink-65); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.srow .col{margin-left:auto; flex:none; font:500 9px var(--ff-mono); letter-spacing:.06em; color:var(--ink-45); text-transform:uppercase}

/* --- лоток подборки --- */
.tray{border-top:1px solid var(--line-14); padding:8px 14px 0; flex:none; background:var(--surface); display:none}
.tray.on{display:block}
.tray .tl{font:500 9.5px var(--ff-mono); letter-spacing:.12em; color:var(--ink-55); text-transform:uppercase; display:flex; justify-content:space-between; align-items:center}
.tray .cmp{border:0;background:transparent;font:600 11px var(--ff-sans);color:var(--terracotta-ink);text-decoration:underline;padding:2px 0}
.tray .row{display:flex; gap:7px; padding:7px 0 2px; flex-wrap:wrap}
.tray .ts{width:32px;height:32px;border-radius:8px;border:0;position:relative;flex:none}
.tray .ts .x{
  position:absolute; right:-5px; top:-5px; width:15px;height:15px;border-radius:50%;
  background:var(--graphite); color:#fff; font:600 8.5px/15px var(--ff-sans); text-align:center;
  opacity:0; transition:opacity .15s;
}
.tray .ts:hover .x{opacity:1}

/* --- покупка --- */
.buy{border-top:1px solid var(--line-14); padding:10px 14px 14px; flex:none; background:var(--surface)}
.blabel{font:500 9.5px var(--ff-mono); letter-spacing:.12em; color:var(--ink-55); margin:2px 0 7px; text-transform:uppercase}
/* переключатель выкрас ⇄ колеровка */
.modeswitch{display:flex; gap:5px; margin:0 0 10px; padding:4px; background:var(--surface-2); border-radius:11px}
.msbtn{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; border:0; background:transparent;
  border-radius:8px; padding:7px 6px; color:var(--ink-55); transition:background .15s}
.msbtn .mst{font:600 13px var(--ff-sans)}
.msbtn .mss{font:500 9.5px var(--ff-mono); letter-spacing:.03em; opacity:.8}
.msbtn.on{background:var(--surface); color:var(--graphite); box-shadow:0 1px 3px rgba(46,52,56,.12)}
.msbtn.on .mst{color:var(--graphite)}
/* компактный выбор породы (только для лессир-дерева) */
.woodrow{margin-bottom:9px}
.wlabel{display:block; font:500 9.5px var(--ff-mono); letter-spacing:.12em; color:var(--ink-55); text-transform:uppercase; margin-bottom:6px}
.wchips{display:flex; gap:6px}
.pchip{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:34px;
  border:1.5px solid var(--line-2); border-radius:9px; background:transparent; font:600 11.5px var(--ff-sans);
  color:var(--graphite);
}
.pchip .dot{width:14px;height:14px;border-radius:4px;flex:none}
.pchip.on{border-color:var(--graphite); background:var(--graphite); color:#fff}
.buysub{display:flex; gap:6px; align-items:center; justify-content:center; margin-top:8px;
  font:500 10px var(--ff-sans); color:var(--ink-55)}
.buysub .credit-i{color:var(--terracotta-ink); font-weight:700}
/* выбор товара под колеровку: цвет → в какой продукт колеруем → его фасовка */
.prodlist{display:flex; flex-direction:column; gap:5px; margin-bottom:10px; max-height:172px; overflow:auto}
.prodlist .prod{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%;
  padding:8px 10px; border:1.5px solid var(--line-2); background:transparent; border-radius:10px;
  text-align:left; cursor:pointer; transition:border-color .12s, background .12s;
}
.prodlist .prod:hover{border-color:var(--line-35)}
.prodlist .prod.on{border-color:var(--graphite); background:var(--graphite)}
.prodlist .prod .pn{font:600 12.5px/1.25 var(--ff-sans); color:var(--graphite)}
.prodlist .prod .pm{font:500 9.5px var(--ff-mono); letter-spacing:.06em; color:var(--ink-55); text-transform:uppercase}
.prodlist .prod.on .pn{color:#fff}
.prodlist .prod.on .pm{color:rgba(255,255,255,.65)}
.prodlist .empty{font:400 12px var(--ff-sans); color:var(--ink-55); padding:6px 2px}
.packs{display:flex; gap:6px; margin-bottom:8px}
.packs button{
  flex:1; height:36px; border:1.5px solid var(--line-2); background:transparent; border-radius:9px;
  font:600 12px var(--ff-sans);
}
.packs button.on{border-color:var(--graphite); background:var(--graphite); color:#fff}
.price{display:flex; justify-content:space-between; align-items:baseline; margin:2px 2px 8px}
.price .sum{font:600 20px var(--ff-sans)}
.price .det{font:400 10px var(--ff-mono); color:var(--ink-55)}
.agree{display:flex; gap:8px; align-items:flex-start; font:400 11px/1.4 var(--ff-sans); color:var(--ink-65); margin-bottom:8px}
.agree input{margin-top:1px}
.cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:0; border-radius:var(--r-md); height:46px;
  background:var(--terracotta); color:#fff; font:600 14px var(--ff-sans);
}
.cta:disabled{opacity:.45; cursor:not-allowed}
.cta2{
  display:block; width:100%; border:0; background:transparent; padding:8px 4px 0;
  font:500 11.5px var(--ff-sans); color:var(--terracotta-ink); text-decoration:underline;
}
.credit{display:flex; gap:6px; align-items:center; justify-content:center; margin-top:7px;
  font:500 9.5px var(--ff-mono); letter-spacing:.1em; color:var(--terracotta-ink)}
.lessir{
  margin:0 0 8px; padding:8px 10px; background:var(--surface-2); border-radius:9px;
  font:400 11px/1.4 var(--ff-sans); color:var(--ink-65);
}

/* --- оверлей коллекций --- */
.colsheet{position:absolute; inset:0; z-index:8; background:var(--surface); display:none; flex-direction:column}
.colsheet.on{display:flex}
.colsheet .head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px 6px}
.colsheet .head .t{font:600 15px var(--ff-sans)}
.colsheet .head button{border:0;background:transparent;font:600 12px var(--ff-sans);color:var(--ink-55)}
.colsheet .list{flex:1; overflow-y:auto; padding:4px 10px 12px}
.colrow{
  display:flex; align-items:center; gap:12px; width:100%;
  border:0; background:transparent; padding:10px 8px; border-radius:12px; text-align:left;
}
.colrow:hover{background:var(--surface-2)}
.colrow.on{background:var(--surface-2); outline:1.5px solid var(--graphite)}
.colrow .pv{display:flex; flex:none; border-radius:8px; overflow:hidden}
.colrow .pv span{width:12px;height:32px}
.colrow .t{font:600 13px var(--ff-sans)}
.colrow .s{font:400 10.5px var(--ff-sans); color:var(--ink-55)}
.colrow .scope{
  margin-left:auto; flex:none; font:500 8.5px var(--ff-mono); letter-spacing:.08em;
  padding:4px 7px; border-radius:6px; background:var(--surface-2); color:var(--ink-65); text-transform:uppercase;
}
.colrow.dim{opacity:.4}

/* --- toast --- */
.toast{
  position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(8px); z-index:60;
  background:var(--graphite); color:#fff; padding:10px 16px; border-radius:11px;
  font:500 12px/1.4 var(--ff-sans); box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:84vw; text-align:center;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ================= мобайл ================= */
@media (max-width:760px){
  .ctx{display:none}
  .bigname{display:none}
  .toast{bottom:auto; top:104px}
  /* чип цвета — компактная строка сверху */
  .chip{
    left:10px; right:10px; bottom:auto; top:56px; max-width:none; padding:6px 8px; border-radius:12px;
  }
  .chip .sw{width:34px;height:34px;border-radius:8px}
  .chip .nm{font-size:13px}
  .chip .mt{font-size:9px}
  .chip .add{width:34px;height:34px}
  .compare .band .lbl{bottom:auto; top:108px}

  /* сцена: занимает верх до шторки; флаг-пилюля по центру над шторкой */
  .scene .flag{
    display:inline-flex; gap:8px; align-items:center; flex-wrap:nowrap;
    left:50%; transform:translateX(-50%); top:auto; bottom:calc(62vh + 8px);
    font-size:8.5px; padding:5px 9px; max-width:calc(100vw - 24px);
  }
  .scene .flag .swap{font-size:8.5px; padding:3px 7px}

  /* нижняя шторка: по умолчанию высокая, чтобы сетка цветов была видна */
  .panel{
    left:0; right:0; top:auto; bottom:0; width:auto; border-radius:var(--r-lg) var(--r-lg) 0 0;
    height:62vh; transition:height .28s ease; box-shadow:0 -8px 30px rgba(46,52,56,.18);
  }
  .panel.peek{height:118px}
  .panel.full{height:93vh}
  .handle{display:block; width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 2px;flex:none}
  .mock-note{font-size:9px; padding:5px 8px}
  .collapse{display:none}   /* на мобиле сворачивание — через ручку-шторку */
  .reopen{display:none}

  /* категории — компактный скролл-ряд */
  .cats{padding:6px 8px 0; gap:0}
  .cat{min-width:58px; padding:6px 3px 6px}
  .cat .t{font-size:9px}
  .cat svg{width:20px;height:20px}

  /* материалы — компактный ряд */
  .mats{padding:8px 10px 0; gap:7px}
  .mats .mlabel{display:none}
  .mchip{height:36px}
  .mchip .mt{font-size:12.5px}

  .tools{padding:8px 10px 0; gap:7px}
  .search{height:38px}
  .colbtn{height:38px; padding:0 9px}

  /* подсказка достижимости — компактнее на мобиле */
  .hint{margin:6px 2px 0; padding:7px 9px; font-size:10.5px; line-height:1.35}
  /* сетка — главный скролл-контент */
  .gridwrap{padding:2px 10px 6px}
  .grid{grid-template-columns:repeat(8,1fr); gap:6px}
  .grid .c{border-radius:8px}
  .glabel{margin:9px 2px 5px}

  /* компактный низ покупки */
  .buy{padding:9px 12px calc(10px + env(safe-area-inset-bottom))}
  .cta{height:48px; font-size:14.5px}
  .pchip{height:36px}
}

/* Выбранный цвет в списке результатов поиска: список не закрывается после
   фиксации, поэтому текущий выбор должен быть виден. */
.srow.sel{background:rgba(190,106,66,.12);box-shadow:inset 0 0 0 1.5px var(--terracotta,#BE6A42)}
.srow.sel .cd{font-weight:700}

/* Поиск по списку товаров под колеровку — появляется, когда позиций больше шести. */
.prodsearch{padding:0 0 8px}
.prodsearch__input{
  width:100%;box-sizing:border-box;height:38px;padding:0 12px;
  border:1px solid rgba(46,52,56,.18);border-radius:10px;background:#fff;
  font:500 16px var(--ff-golos,inherit);color:#2E3438;
}
.prodsearch__input:focus{outline:none;border-color:#BE6A42}

/* ---- Визард: плашка зафиксированного цвета ----
   Компактная строка, а не заливка во всю ширину: панель узкая, и большой
   полупрозрачный блок упирался в края острова и перетягивал внимание с шага
   покупки. Достаточно образца, кода и тихой кнопки возврата. */
.picked{
  /* Горизонтальный отступ 14px — ровно как padding .buy: края плашки должны
     совпадать с краями поиска товара под ней. Без него плашка была прямым
     ребёнком .panel, прижималась к краям и оказывалась шире всех соседей.
     Вертикальные отступы симметричны: столько же сверху от чипов материалов,
     сколько снизу до линии блока покупки. */
  display:flex;align-items:center;gap:10px;
  margin:12px 14px;padding:7px 10px;
  background:#fff;border:1px solid rgba(46,52,56,.14);border-radius:12px;
}
.picked__sw{
  width:30px;height:30px;border-radius:8px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(46,52,56,.16);
}
.picked__txt{display:flex;align-items:baseline;gap:7px;min-width:0;flex:1}
.picked__code{
  font:600 13.5px var(--ff-golos,inherit);color:#2E3438;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.picked__coll{
  font:500 9.5px var(--ff-mono,monospace);color:#9AA0A3;
  text-transform:uppercase;letter-spacing:.03em;flex:none;
}
.picked__edit{
  flex:none;border:0;background:none;padding:4px 2px;cursor:pointer;
  font:600 12px var(--ff-golos,inherit);color:#A85835;
  border-bottom:1px solid rgba(168,88,53,.35);line-height:1.1;
  transition:color .15s,border-color .15s;
}
.picked__edit:hover{color:#BE6A42;border-color:#BE6A42}

/* Поиск по товарам — в языке острова, а не системный инпут. */
.prodsearch{position:relative;padding:0 0 10px}
.prodsearch__input{
  width:100%;box-sizing:border-box;height:42px;padding:0 14px 0 36px;
  border:1px solid rgba(46,52,56,.16);border-radius:12px;background:#fff;
  font:500 16px var(--ff-golos,inherit);color:#2E3438;
  -webkit-appearance:none;appearance:none;
}
.prodsearch__input::-webkit-search-cancel-button{-webkit-appearance:none}
.prodsearch__input::placeholder{color:#9AA0A3}
.prodsearch__input:focus{outline:none;border-color:#BE6A42;box-shadow:0 0 0 3px rgba(190,106,66,.14)}
.prodsearch::before{
  content:"";position:absolute;left:13px;top:13px;width:15px;height:15px;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%232E3438' stroke-width='1.5'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5 13 13'/%3E%3C/svg%3E");
  opacity:.55;
}

/* Атрибут hidden проигрывает display:flex/grid по специфичности — без этих
   правил поиск цвета и палитра оставались на экране после фиксации выбора. */
.tools[hidden],.gridwrap[hidden],.buy[hidden],.picked[hidden]{display:none!important}