/* catalog.css — страница каталога: верх, панель выборки (тонкая, как у lacybird), сетка 3 в ряд, полоса доставки.
   Цвета и шрифты — только токены base.css; движение — transform/opacity. */

/* ── верх: крошки, заголовок, счётчик, сортировка, чипы ── */
.cat-top{padding-top:34px}
.crumbs{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current]{color:var(--ink-2)}
.cat-top__row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-top:44px}
.cat-top__l .eyebrow{margin:0 0 18px}
.cat-top__l .h-l.is-wait{opacity:0}
.cat-top__r{display:flex;align-items:center;gap:44px;padding-bottom:10px;flex:none}
.cat-found{margin:0;font:300 15px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.cat-found b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sortbar{display:flex;align-items:center}
.sortbar button{position:relative;padding:8px 0;font:400 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sortbar button+button{margin-left:34px}
.sortbar button+button::before{content:"·";position:absolute;left:-20px;top:8px;color:var(--mute);letter-spacing:0}
.sortbar button::after{content:"";position:absolute;left:0;right:.14em;bottom:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.sortbar button:hover{color:var(--blue)}
.sortbar button[aria-pressed=true]{color:var(--ink)}
.sortbar button[aria-pressed=true]::after{transform:scaleX(1);transform-origin:left}

.cat-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px}
.cat-chips[hidden]{display:none}
.cat-chip{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 13px 0 16px;border:1px solid var(--blue);border-radius:999px;color:var(--blue);font:400 14px/1 var(--sans);transition:transform .3s var(--ease)}
.cat-chip:hover{transform:translateY(-1px)}
.cat-chip svg{width:9px;height:9px;flex:none}
.cat-chips__reset{margin-left:10px;padding:6px 0;border-bottom:1px solid var(--line);font:400 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cat-chips__reset:hover{color:var(--blue)}

/* ── две колонки ── */
.cat-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start;margin-top:36px}

/* ── панель выборки ── */
.fpanel{--box:color-mix(in srgb,var(--ink) 55%,var(--white));position:sticky;top:100px;max-height:calc(100vh - 124px);overflow-y:auto;padding-right:14px;margin-right:-14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.fgroup{border-top:1px solid var(--line)}
.fgroup:last-of-type{border-bottom:1px solid var(--line)}
.fgroup__h{margin:0;font:inherit}
.fgroup__btn{display:flex;width:100%;align-items:center;justify-content:space-between;padding:19px 0;text-align:left}
.fgroup__btn .caps{color:var(--ink)}
.fgroup__btn:hover .caps{color:var(--blue)}
.pm{position:relative;width:11px;height:11px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:var(--ink)}
.pm::before{left:0;right:0;top:5px;height:1px}
.pm::after{top:0;bottom:0;left:5px;width:1px;transform:scaleY(0);transition:transform .35s var(--ease)}
.fgroup__btn[aria-expanded=false] .pm::after{transform:scaleY(1)}
.fgroup__body{padding:0 0 20px}
.fgroup__body[hidden]{display:none}

.fopts{display:grid;gap:1px}
.fopts[hidden]{display:none}
.fopt{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:31px;font:300 15px/1.3 var(--sans);color:var(--ink);cursor:pointer}
.fopt:hover .fopt__t{color:var(--blue)}
.fopt__n{font:400 12px/1 var(--sans);font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums}
.fopt input{appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;display:grid;place-content:center;border:1px solid var(--box);background:var(--white);cursor:pointer}
.fopt input[type=checkbox]{border-radius:2px}
.fopt input[type=checkbox]::before{content:"";width:10px;height:10px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);box-shadow:inset 1em 1em var(--white);transform:scale(0);transition:transform .2s var(--ease)}
.fopt input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
.fopt input[type=radio]{border-radius:50%}
.fopt input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .2s var(--ease)}
.fopt input[type=radio]:checked{border-color:var(--blue)}
.fopt input:checked::before{transform:scale(1)}
.fopt input:checked~.fopt__t{color:var(--ink);font-weight:400}
.fopt.is-zero{opacity:.38}
.fopt.is-zero:hover .fopt__t{color:var(--ink)}
.fopt input:disabled,.fopt.is-zero{cursor:default}
.fmore{margin-top:12px;padding-bottom:4px;border-bottom:1px solid currentColor;font:400 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fmore[hidden]{display:none}

.fprice__quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qbtn{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:999px;font:400 13px/1 var(--sans);color:var(--ink);white-space:nowrap;transition:transform .3s var(--ease)}
.qbtn i{font-style:normal;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.qbtn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.qbtn[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--white)}
.qbtn[aria-pressed=true] i{color:var(--white)}
.qbtn.is-zero{opacity:.38}
.qbtn:disabled{cursor:default;transform:none;border-color:var(--line);color:var(--ink)}
.fprice__fields{display:flex;align-items:center;gap:8px;margin-top:12px}
.fprice__f{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:4px;cursor:text}
.fprice__f:focus-within{border-color:var(--blue)}
.fprice__f span{font-size:13px;color:var(--mute)}
.fprice__f input{width:100%;min-width:0;border:0;outline:0;background:none;padding:0;font:300 15px/1 var(--sans);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.fprice__f input::-webkit-inner-spin-button,.fprice__f input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fprice__f input::placeholder{color:var(--ink-2);opacity:.45}
.fprice__dash,.fprice__cur{font-size:13px;color:var(--ink-2)}

/* ── сетка, пусто, «Показать ещё» ── */
.cat-list{min-width:0}
.cat-sk{aspect-ratio:3/4;border-radius:4px;background:var(--paper-2)}
.cat-empty{padding:92px 40px;border-radius:4px;background:var(--paper-2);text-align:center}
.cat-empty[hidden]{display:none}
.cat-empty .h-s{margin:0 0 30px}
.cat-more{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:76px}
.cat-more[hidden]{display:none}
.cat-more .btn[hidden]{display:none}
.cat-more__n{margin:0;font:400 13px/1 var(--sans);letter-spacing:.04em;color:var(--mute);font-variant-numeric:tabular-nums}

/* ── полоса доставки и доверия ── */
.cat-trust{margin-top:120px;padding:52px 0;background:var(--paper-2)}
.cat-trust__in{display:flex;align-items:center;gap:56px}
.cat-trust__dl{display:grid;gap:12px;flex:0 1 auto}
.cat-trust__i{display:flex;align-items:flex-start;gap:16px;margin:0;font:300 16px/1.5 var(--sans);color:var(--ink-2)}
.cat-trust__i[hidden]{display:none}
.cat-trust__i b{font-weight:500;color:var(--ink)}
.cat-trust__i svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--plum)}
.cat-trust__rate{align-self:stretch;align-items:center;padding-left:56px;border-left:1px solid var(--line)}
.cat-trust__rate b{font:500 30px/1 var(--serif);color:var(--ink);margin-right:4px}
.cat-trust__rate svg{margin-top:0}
.cat-trust__link{margin-left:auto;white-space:nowrap}

/* ── уже 1440: две колонки товаров, потом панель над сеткой ── */
@media (max-width:1180px){
  .cat-list .grid{grid-template-columns:repeat(2,1fr)}
  .cat-trust__in{flex-wrap:wrap;gap:28px 48px}
  .cat-trust__rate{padding-left:48px}
}
@media (max-width:860px){
  .cat-top__row{flex-direction:column;align-items:flex-start;gap:24px}
  .cat-top__r{flex-wrap:wrap;gap:20px 32px}
  .cat-body{grid-template-columns:1fr;gap:32px}
  .fpanel{position:static;max-height:none;overflow:visible;padding-right:0;margin-right:0}
  .cat-trust__in{flex-direction:column;align-items:flex-start}
  .cat-trust__rate{padding-left:0;border-left:0}
  .cat-trust__link{margin-left:0}
}

/* поиск по каталогу (O02: поиск приложения в ПК-версии) */
.cat-search{display:flex;align-items:center;gap:8px;width:340px;height:46px;padding:0 5px 0 18px;border:1px solid var(--line);border-radius:999px;background:#fff}
.cat-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 15px/1 var(--sans);color:var(--ink)}
.cat-search input::placeholder{color:var(--mute)}
.cat-search input::-webkit-search-cancel-button{cursor:pointer}
.cat-search button{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .3s var(--ease)}
.cat-search button:hover{transform:scale(1.06)}
.cat-search svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.cat-search:focus-within{border-color:var(--blue)}
.fwed{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding:6px 0;font:400 15px/1.3 var(--sans);color:var(--blue)}
.fwed i{font-style:normal;font-size:12px;color:var(--mute)}