/* ==========================================================================
   v76 — плитки каталога без обрезки, обменник на главной, баннер срока Premium.
   Грузится после v75.css; приём :root:not(#v).
   ========================================================================== */

/* 1. Раскрытая плитка каталога: высота списка — по содержимому (app.js ставит --sub-h).
      Было 280px: в узкой плитке текст плашек переносился, вторая плашка обрезалась. */
:root:not(#v) .tile--group.is-open .tile__sub{max-height:var(--sub-h,640px)}
/* описание не уходит под круглую кнопку раскрытия, стоящую справа внизу */
:root:not(#v) .tile--group .tile__head p{padding-right:48px}
/* кнопка раскрытия — нейтральное стекло, как остальные круглые кнопки (раньше красилась цветом товара) */
:root:not(#v) .tile__arrow{background:var(--lq-fill);border:0;box-shadow:var(--lq-rim);color:var(--text-dim)}
:root:not(#v) .tile--group.is-open .tile__arrow{border:0;color:var(--text);background:color-mix(in srgb,var(--text) 8%,var(--lq-fill))}
@media (hover:hover){:root:not(#v) .tile--group .tile__head:hover .tile__arrow{color:var(--text)}}
/* плашка: стрелка «перейти» тем же цветом, что текст, и не наезжает на него */
:root:not(#v) .tile__sub a.subp{grid-template-columns:40px minmax(0,1fr) 18px}
:root:not(#v) .subp__go{align-self:center;color:var(--text-mute)}

/* 2. Обменник на главной: калькулятор слева, заголовок справа (зеркало блока быстрой покупки) */
:root:not(#v) .xchband{display:grid;grid-template-columns:minmax(320px,480px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
:root:not(#v) .xchband__text .lede{margin-top:var(--s-5);max-width:36ch}
:root:not(#v) .xchband__text .quick__more{margin-top:var(--s-3)}
@media (max-width:900px){
  :root:not(#v) .xchband{grid-template-columns:1fr;gap:var(--s-6)}
  :root:not(#v) .xchband__text{order:-1}
  :root:not(#v) .xmini{max-width:520px}
}
:root:not(#v) .xmini{position:relative;display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-tile);min-width:0;
  border:1px solid var(--glass-edge);background:color-mix(in srgb,var(--bg) 46%,transparent);box-shadow:var(--glass-inner);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
:root:not(#v) .xmini.glass--refract{-webkit-backdrop-filter:var(--glass-filter) blur(3px) saturate(160%);backdrop-filter:var(--glass-filter) blur(3px) saturate(160%)}
:root:not(#v) .xmini__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
:root:not(#v) .xmini__name{display:inline-flex;align-items:center;gap:10px;min-width:0}
:root:not(#v) .xmini__glyph{position:relative;inset:auto;display:inline-block;flex:none;width:36px;height:36px;opacity:1}
:root:not(#v) .xmini__title{margin:0;font:500 18px/1.2 var(--f-sans);letter-spacing:-.012em}
:root:not(#v) .xmini__range{font:500 12px/1 var(--f-data);color:var(--text-mute);white-space:nowrap}
:root:not(#v) .xmini__pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px}
:root:not(#v) .xmini__side{display:grid;gap:8px;min-width:0}
:root:not(#v) .xmini__cap{font:600 12px/1.3 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
:root:not(#v) .xmini__field{display:flex;align-items:center;gap:8px;height:58px;padding:0 16px;border-radius:16px;cursor:text;
  background:color-mix(in srgb,var(--tone,var(--text)) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease}
:root:not(#v) .xmini__field:focus-within{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tone,var(--text)) 55%,transparent)}
:root:not(#v) .xmini__num{width:100%;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--text);
  font:700 26px/1 var(--f-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;-moz-appearance:textfield;appearance:textfield}
:root:not(#v) .xmini__num::-webkit-outer-spin-button,:root:not(#v) .xmini__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
:root:not(#v) .xmini__unit{font:600 15px/1 var(--f-sans);color:var(--text-dim)}
:root:not(#v) .xmini__field .xmini__unit{color:var(--c-stars)}
:root:not(#v) .xmini__arrow{display:grid;place-items:center;width:40px;height:40px;margin-bottom:9px;border-radius:50%;
  color:var(--text-dim);background:var(--lq-fill);box-shadow:var(--lq-rim)}
:root:not(#v) .xmini__out{display:flex;align-items:baseline;gap:8px;min-height:58px;align-items:center}
:root:not(#v) .xmini__out b{font:700 clamp(26px,2.6vw,34px)/1 var(--f-num);letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
:root:not(#v) .xmini__rub{font:500 13px/1.3 var(--f-sans);color:var(--text-dim);font-variant-numeric:tabular-nums}
:root:not(#v) .xmini__slider{margin:2px 0}
:root:not(#v) .xmini__chips{display:flex;flex-wrap:wrap;gap:8px}
:root:not(#v) .xmini__chips .chip{min-height:40px;padding:0 14px;font:600 14px/1 var(--f-sans);font-variant-numeric:tabular-nums;
  border:0;background:color-mix(in srgb,var(--tone,var(--text)) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
:root:not(#v) .xmini__chips .chip.is-on{background:color-mix(in srgb,var(--tone,var(--text)) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone,var(--text)) 40%,transparent)}
:root:not(#v) .xmini__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
:root:not(#v) .xmini__rate{margin:0;font:500 13px/1.45 var(--f-sans);color:var(--text-mute);font-variant-numeric:tabular-nums}
:root:not(#v) .xmini.is-off .xmini__go{opacity:.45;pointer-events:none}
@media (max-width:520px){
  :root:not(#v) .xmini{padding:var(--s-4) var(--s-4) var(--s-5)}
  :root:not(#v) .xmini__pair{grid-template-columns:1fr;gap:10px}
  :root:not(#v) .xmini__arrow{margin:0 auto;rotate:90deg}
  :root:not(#v) .xmini__go{width:100%}
}

/* 3. Баннер Telegram Premium: срок переключателем, двенадцать точек-месяцев, цена, «В корзину».
      Раньше — неактивные чипы «3 / 6 / 12 мес», похожие на кнопки, и пустое поле. */
:root:not(#v) .showcase-banner--term .term{gap:14px;justify-items:start}
:root:not(#v) .term__label{font:600 12px/1.3 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
:root:not(#v) .term__seg{width:min(100%,340px)}
:root:not(#v) .term__seg .pseg__opt{flex:1;padding:0 10px;font-variant-numeric:tabular-nums}
:root:not(#v) .term__ruler{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(6px,.9vw,9px);width:min(100%,300px);margin-top:4px}
:root:not(#v) .term__ruler i{display:block;aspect-ratio:1;border-radius:50%;scale:.62;
  background:color-mix(in srgb,var(--tone,var(--text)) 16%,transparent);
  transition:background-color .3s ease,scale .55s var(--spr-pop,cubic-bezier(.34,1.56,.64,1));transition-delay:calc(var(--i,0) * 24ms)}
:root:not(#v) .term__ruler i.is-on{scale:1;background:var(--c-premium)}
:root:not(#v) .term__cap{margin-top:-4px;font:500 13px/1.3 var(--f-sans);color:var(--text-mute);font-variant-numeric:tabular-nums}
:root:not(#v) .term__price{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;
  font:700 clamp(48px,5.4vw,76px)/1 var(--f-num);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums lining-nums}
:root:not(#v) .term__price small{font:500 20px/1 var(--f-sans);letter-spacing:0;color:var(--text-dim)}
:root:not(#v) .term__per{margin:0;font:500 14px/1.45 var(--f-sans);color:var(--text-dim)}
:root:not(#v) .term__add{margin-top:6px}
@media (prefers-reduced-motion:reduce){:root:not(#v) .term__ruler i{transition:none}}
@media (max-width:719px){
  :root:not(#v) .showcase-banner--term .term{justify-items:stretch}
  :root:not(#v) .term__seg,:root:not(#v) .term__ruler{width:100%}
  :root:not(#v) .term__add{width:100%}
}