/* ==========================================================================
   v58 — плашки каталога, карточки «Почему eroot», корзина, смена темы,
   правовые страницы. Грузится после v57.css; приём специфичности :root:not(#v).
   ========================================================================== */

/* 1. Плашки «Stars / Premium / PS Store / PS Plus» — один стиль:
      нейтральное стекло, знак товара из точек (цвет только в нём),
      название, пояснение, стрелка. Без цветных заливок и разных кантов. */
:root:not(#v) .tile__sub{gap:8px}
:root:not(#v) .tile__sub a.subp{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;
  padding:9px 14px 9px 9px;border:0;border-radius:18px;color:var(--text);text-decoration:none;
  background:var(--lq-fill);box-shadow:var(--lq-rim);transform:none;
  transition:background .25s ease,box-shadow .25s ease}
:root:not(#v) .tile__sub a.subp:hover{transform:none;background:color-mix(in srgb,var(--text) 6%,var(--lq-fill))}
:root:not(#v) .subp__mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone,var(--text)) 4%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
:root:not(#v) .subp__mark .dot-glyph{display:block;position:relative;inset:auto;width:30px;height:30px;margin:0}
:root:not(#v) .tile__sub .subp__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:none;font:inherit}
:root:not(#v) .tile__sub .subp__txt b{font:600 14.5px/1.2 var(--f-sans);letter-spacing:-.005em;text-transform:none;color:var(--text)}
:root:not(#v) .tile__sub .subp__txt small{font:500 12.5px/1.35 var(--f-sans);color:var(--text-dim)}
:root:not(#v) .subp__go{color:var(--text-mute);transition:transform .3s var(--spr,cubic-bezier(.22,1,.36,1)),color .2s ease}
:root:not(#v) .tile__sub a.subp:hover .subp__go{color:var(--text);transform:translate(2px,-2px)}

/* 2. «Почему eroot» — карточки стекла с иконкой (раньше текст висел в воздухе,
      а пятно света выходило за край без рамки) */
:root:not(#v) .why-grid{gap:16px}
:root:not(#v) .why-grid .card{padding:22px 22px 24px;border-radius:24px;border:0;
  background:var(--lq-fill);box-shadow:var(--lq-drop),var(--lq-rim)}
:root:not(#v) .why-grid .card__head{display:flex;flex-direction:row;align-items:center;gap:12px}
:root:not(#v) .card__icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  color:var(--violet-hi);background:color-mix(in srgb,var(--violet) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 30%,transparent)}
:root:not(#v) .why-grid .card:nth-child(even) .card__icon{color:var(--pink);
  background:color-mix(in srgb,var(--pink) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pink) 28%,transparent)}
:root[data-theme="light"]:not(#v) .card__icon{color:var(--violet)}
:root[data-theme="light"]:not(#v) .why-grid .card:nth-child(even) .card__icon{color:var(--pink-deep,#db2777)}
@media (max-width:899px){:root:not(#v) .why-grid{row-gap:16px}}

/* 3. «В корзине»: галочка 18px и подпись в одну строку на любых кнопках —
      в выборе карт PS общий стиль svg растягивал галочку на всю кнопку */
:root:not(#v) .btn.is-added{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
:root:not(#v) .btn.is-added svg.i{width:18px;height:18px;min-width:18px;max-width:18px;flex:0 0 18px}
:root:not(#v) .btn.is-added span{white-space:nowrap}

/* 4. Крестик меню: без кольца фокуса при работе мышью (кольцо — только с клавиатуры) */
:root:not(.kb-nav):not(#v) .menu__close:focus-visible{outline:none}

/* 5. Смена темы: круг новой темы раскрывается от кнопки (theme.js);
      на время снимка CSS-переходы выключены */
html.theme-snap *,html.theme-snap *::before,html.theme-snap *::after{transition:none !important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(root){animation-duration:.62s}

/* 5b. Подвал: четвёртая колонка «Документы» */
:root:not(#v) .hwf__top{grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:1099px){:root:not(#v) .hwf__top{grid-template-columns:repeat(4,minmax(0,1fr))}:root:not(#v) .hwf__brand{grid-column:1/-1}}
@media (max-width:899px){:root:not(#v) .hwf__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){:root:not(#v) .hwf__top{grid-template-columns:1fr}}

/* 6. Правовые страницы: читаемая колонка */
:root:not(#v) .legal{max-width:760px;margin:0 auto}
:root:not(#v) .legal__head{padding-top:clamp(32px,6vw,72px);margin-bottom:clamp(24px,4vw,40px)}
:root:not(#v) .legal__head h1{font:300 clamp(34px,5.4vw,60px)/1.05 var(--f-sans);letter-spacing:-.03em;margin:0}
:root:not(#v) .legal__head p{margin-top:14px;color:var(--text-dim);font:500 14px/1.5 var(--f-sans)}
:root:not(#v) .legal__body{font:400 16px/1.7 var(--f-sans);color:var(--text)}
:root:not(#v) .legal__body h2{font:600 20px/1.3 var(--f-sans);letter-spacing:-.01em;margin:40px 0 12px}
:root:not(#v) .legal__body h3{font:600 16px/1.4 var(--f-sans);margin:24px 0 8px}
:root:not(#v) .legal__body p,:root:not(#v) .legal__body li{color:var(--text)}
:root:not(#v) .legal__body p{margin:0 0 12px}
:root:not(#v) .legal__body ul,:root:not(#v) .legal__body ol{margin:0 0 14px;padding-left:22px}
:root:not(#v) .legal__body li{margin:4px 0}
:root:not(#v) .legal__body a{color:var(--violet-hi);text-decoration:underline;text-underline-offset:3px}
:root[data-theme="light"]:not(#v) .legal__body a{color:var(--violet)}
:root:not(#v) .legal__card{margin:18px 0 22px;padding:18px 20px;border-radius:20px;background:var(--lq-fill);box-shadow:var(--lq-drop),var(--lq-rim)}
:root:not(#v) .legal__row{display:contents}
:root:not(#v) .legal__card dl{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:8px 18px;margin:0}
:root:not(#v) .legal__card dt{color:var(--text-dim);font:500 14px/1.5 var(--f-sans)}
:root:not(#v) .legal__card dd{margin:0;font:500 15px/1.5 var(--f-sans);overflow-wrap:anywhere}
@media (max-width:560px){:root:not(#v) .legal__card dl{grid-template-columns:1fr;gap:2px}:root:not(#v) .legal__card dd{margin-bottom:10px}}
:root:not(#v) .legal__nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
:root:not(#v) .legal__nav a{padding:8px 14px;border-radius:999px;font:600 13px/1 var(--f-sans);color:var(--text-dim);text-decoration:none;
  background:var(--lq-fill);box-shadow:var(--lq-rim)}
:root:not(#v) .legal__nav a[aria-current="page"]{color:var(--text);box-shadow:var(--lq-rim),inset 0 0 0 1px var(--violet-hi)}
:root:not(#v) .legal__note{font-size:13px;color:var(--text-mute);margin-top:32px}
:root:not(#v) [data-legal-empty]{display:none}