:root{
  --bg:#f5f6f7; --panel:#ffffff; --ink:#0b0b0b; --line:#e6e7eb; --soft:#f3f4f6;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --f-desktop-h1: inherit; --f-desktop-h2: inherit; --f-desktop-div: inherit; --f-desktop-a: inherit;
  --f-phone-h1: inherit;   --f-phone-h2: inherit;   --f-phone-div: inherit;   --f-phone-a: inherit;
  --f-book-h1: inherit;    --f-book-h2: inherit;    --f-book-div: inherit;    --f-book-a: inherit;
  --f-card-h1: inherit;    --f-card-h2: inherit;    --f-card-div: inherit;    --f-card-a: inherit;
  --var-settings-desktop: normal;
  --var-settings-phone: normal;
  --var-settings-book: normal;
  --var-settings-card: normal;
}
*{box-sizing:border-box}
html,body{height:100%}
/*html:not(.fonts-ready) body{visibility:hidden}*/
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,system-ui,sans-serif;
  line-height:1.45; font-size:14px;
}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.site-header__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.site-logo{font-weight:700}
.site-nav a{display:inline-block;margin-left:14px;color:#111;text-decoration:none;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:#111}
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:20px}
.site-footer__inner{max-width:1200px;margin:0 auto;padding:12px 14px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.app{display:flex; min-height:100dvh; overflow:visible}
.sidebar{width:72px; background:var(--panel); border-right:1px solid var(--line); padding:10px; display:flex; flex-direction:column; gap:10px; position:sticky; top:0; height:100dvh}
.nav{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.nav a{display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:1px solid var(--line); border-radius:14px; color:#111; background:#fff; text-decoration:none}
.nav a[aria-current="page"]{outline:2px solid #111; outline-offset:2px}
.sidebar-help{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  cursor:pointer;
  text-decoration:none;
}

/* Иконка по стилю как макеты */
.sidebar-help svg{
  width:26px;
  height:26px;
  stroke:#111;
  fill:none;
  stroke-width:1.5;
}

/* Фокус как у активного макета */
.sidebar-help:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
}

.nav svg{width:26px; height:26px; stroke:#111; fill:none; stroke-width:1.5}
.spacer{flex:1}
.contentgrid{display:grid; grid-template-columns: 70% 30%; gap:16px; flex:1; padding:14px; min-width:0; overflow:visible}
@media(max-width:1200px){ .contentgrid{ grid-template-columns: 1fr; } }
.main{min-width:0; overflow:visible}
.wrapper{max-width:1200px; margin:0 auto; overflow:visible}
.page{display:none}
.page.active{display:block}
/* Выровнять визитку по вертикали относительно панели шрифтов (только десктоп) */
@media (min-width:1201px){
  .contentgrid main:has(#card.page.active){
    display:flex;
    align-items:center; /* центр по вертикали относительно панели шрифтов */
  }
}
.editable h1,.editable h2,.editable div,.editable p,.editable a{margin:0}
.device{position:relative; border:1px solid var(--line); border-radius:20px; background:#fff;aspect-ratio:16/10; overflow:hidden; box-shadow:0 2px 0 #d1d5db inset, 0 8px 24px rgba(0,0,0,.08); max-height:80vh; margin:0 auto}
.browser-chrome{position:absolute; top:0; left:0; right:0; height:34px; background:#f3f4f6; border-bottom:1px solid var(--line)}
.dots{position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; gap:6px}
.dot{width:8px; height:8px; border-radius:50%; background:#e5e7eb; border:1px solid #d1d5db}
.urlbar{position:absolute; left:60px; right:12px; top:6px; height:22px; border:1px solid var(--line); border-radius:10px; background:#fff}
.screen{position:absolute; left:0; right:0; bottom:0; top:34px; padding:22px; overflow:auto; display:flex; justify-content:flex-start; align-items:flex-start}
.col{width:100%; display:flex; flex-direction:column; gap:10px}
.editable[data-scope="desktop"]{ font-variation-settings: var(--var-settings-desktop); }
.editable[data-scope="desktop"] h1{font-size:var(--fs-desktop-h1, clamp(28px,4vw,48px)); font-family: var(--f-desktop-h1); line-height:1.1}
.editable[data-scope="desktop"] h2{font-size:var(--fs-desktop-h2, clamp(16px,1.9vw,18px)); line-height:1.28; color:#111; font-family: var(--f-desktop-h2)}
.editable[data-scope="desktop"] div,.editable[data-scope="desktop"] p{font-size:var(--fs-desktop-div, clamp(13px,1.3vw,15px)); line-height:1.58; color:#111827; font-family: var(--f-desktop-div)}
.editable[data-scope="desktop"] a:not(.btn){font-size:var(--fs-desktop-a, clamp(13px,1.3vw,15px)); text-decoration:none; border-bottom:1px solid #9ca3af; color:#111827; align-self:flex-start; font-family: var(--f-desktop-a)}
.editable[data-scope="desktop"] .btn {
  font-size: var(--fs-desktop-a, clamp(13px, 1.3vw, 15px));
  font-family: var(--f-desktop-a);
}
.editable[data-scope="desktop"] .footer-link{
  font-size:var(--fs-desktop-div, clamp(13px,1.3vw,15px));
  font-family: var(--f-desktop-div);
  text-decoration: underline;
  text-decoration-color:#9ca3af;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  color:#111827;
  align-self:flex-start;
  display:inline;
}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:0 12px; height:36px; border-radius:999px; text-decoration:none; border:1px solid #111; cursor:pointer; line-height:1.1; -webkit-tap-highlight-color:transparent}
.btn.dark, .btn.dark:link, .btn.dark:visited{background:linear-gradient(180deg,#111 0%,#1f1f1f 100%); color:#fff}
.btn.dark:hover,.btn.dark:focus{background:#fff; color:#111; border-color:#111}
.btn.dark:active{background:#f9fafb; color:#111; border-color:#111}
.btn.ghost{background:#fff; color:#111; border:1px solid #d1d5db}
/* removed: button underline reset to avoid clipping borders */
/* removed: let .btn.dark:hover set color */
a.muted{color:#6b7280; border-bottom-color:transparent}
a.muted:hover{color:#111827; border-bottom-color:#cbd5e1}
.footer-link.muted{color:#6b7280;}
.footer-link.muted:hover{color:#111827; text-decoration-color:#cbd5e1}
.header{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.header .logo{display:inline-flex; align-items:center; gap:10px}
.header .logo svg{width:22px; height:22px}
.header nav{display:flex; gap:20px; align-items:center}
.header nav a{display:inline-flex; align-items:center; height:36px}
.hero{max-width:80%; margin:0 auto; text-align:center; padding:40px 0}
.phones{display:grid; grid-template-columns: repeat(2, minmax(260px, 320px)); gap:26px; padding:10px 10px 20px; justify-content:center; align-content:start;}
@media(max-width:900px){ .phones{ grid-template-columns: minmax(260px, 320px); } }
.phone{width:100%; aspect-ratio:9/19.5; border:1px solid var(--line); border-radius:28px; background:#fff; position:relative; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:86vh; min-height:260px;}
.phone .notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:44%; height:20px; background:#111827; border-bottom-left-radius:12px; border-bottom-right-radius:12px; margin-top:4px}
.phone .inner{position:absolute; top:0; left:18px; right:18px; bottom:0; display:flex; flex-direction:column; gap:16px; min-height:100%; padding-top:24px; padding-bottom:88px;}
.phone .inner > .row:first-child{ margin-top:20px }
.editable[data-scope="phone"]{ font-variation-settings: var(--var-settings-phone); }
.phone h1{font-size:var(--fs-phone-h1,20px); line-height:1.25; margin:0; font-weight:700; font-family: var(--f-phone-h1)}
.phone h2{font-size:var(--fs-phone-h2,14px); line-height:1.35; margin:0; color:#111; font-family: var(--f-phone-h2)}
.phone .text,.phone .d{font-size:var(--fs-phone-div,13px); color:#4b5563; font-family: var(--f-phone-div)}
.phone a{font-size:var(--fs-phone-a,11px); text-decoration:none; border-bottom:1px solid #cbd5e1; color:#111; font-family: var(--f-phone-a)}
.row{display:flex; align-items:center; gap:10px}
.card{border:1px solid #e6e7eb; border-radius:14px; padding:12px; background:#fff; display:flex; gap:12px}
.card .thumb{width:48px; height:48px; border-radius:10px; background:#e5e7eb; border:1px solid #d1d5db}
.bottomnav{position:absolute; left:18px; right:18px; bottom:10px; border-top:1px solid var(--line); padding:8px 0 10px; display:flex; justify-content:space-between; background:#fff; border-radius:12px;}
.bottomnav .navit{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:#111}
.bottomnav .navit .dot{width:12px; height:12px; border:1px solid #d1d5db; border-radius:999px; background:#fff}
.bottomnav a{font-size:var(--fs-phone-a,11px); text-decoration:none; color:#111; font-family: var(--f-phone-a)}
.book{aspect-ratio:16/10; border:1px solid var(--line); border-radius:16px; background:linear-gradient(90deg,#fff 49.5%,#f9fafb 50.5%); position:relative; box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden; max-height:72vh; margin:0 auto}
.book:before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:#e5e7eb; transform:translateX(-50%)}
.pageL,.pageR{position:absolute; top:0; bottom:0; width:50%; padding:22px; z-index:1}
.pageL{left:0; padding-right:18px} .pageR{right:0; padding-left:18px}
.pageL .col,.pageR .col{width:100%; display:flex; flex-direction:column; gap:10px}
.editable[data-scope="book"]{ font-variation-settings: var(--var-settings-book); }
.book h1{font-size:var(--fs-book-h1,32px); font-family: var(--f-book-h1)}
.book h2{font-size:var(--fs-book-h2,20px); font-family: var(--f-book-h2)}
.book p,.book .pageL div[contenteditable]{font-size:var(--fs-book-div,16px); font-family: var(--f-book-div)}
.page-ind{position:absolute; left:50%; transform:translateX(-50%); bottom:10px; font-size:var(--fs-book-a,12px); padding:4px 8px; background:#fff; border:1px solid #e5e7eb; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:4; font-family: var(--f-book-a); pointer-events:none; color:#111}

/* === Card mockup styles === */
.card-mockup{
  position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  background:#ffffff;
  box-shadow:var(--shadow);
  padding:24px 28px;
  max-width:420px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card-mockup .card-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.card-mockup .card-body{
  margin-top:8px;
}
/* Абзац с описанием — выравнивание по ширине */
.card-mockup .card-body > div{
  text-align: justify;
}
/* Общая ширина текста и контактов внутри визитки */
.card-mockup .card-body,
.card-mockup .card-footer{
  width:100%;
  max-width:364px; /* 420 (ширина карточки) - 2*28 (паддинги) = 364 */
}
.card-mockup .card-footer{
  margin-top:14px;
}
.editable[data-scope="card"]{
  font-variation-settings: var(--var-settings-card);
}
.card-mockup h1{
  font-size:var(--fs-card-h1,24px);
  line-height:1.2;
  font-family: var(--f-card-h1);
  font-weight:600;
}
.card-mockup h2{
  font-size:var(--fs-card-h2,16px);
  line-height:1.4;
  font-family: var(--f-card-h2);
  font-weight:500;
  color:#4b5563;
}
.card-mockup div{
  font-size:var(--fs-card-div,14px);
  line-height:1.6;
  font-family: var(--f-card-div);
  color:#4b5563;
}
.card-mockup a{
  font-size:var(--fs-card-a,14px);
  font-family: var(--f-card-a);
  color:#111827;
  text-decoration:none;
}
.card-mockup a:hover{
  text-decoration:underline;
}
.card-footer .card-contact-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
  margin-bottom:4px;
}
.card-footer .card-contact-row{
  display:flex;
  justify-content:space-between; /* email слева, телефон справа */
  align-items:center;
  gap:16px;
  flex-wrap:wrap; /* чтобы на узких ширинах аккуратно переносилось */
}
.card-footer .card-contact-row a{
  flex:0 1 auto;
}
.card-footer .card-contact-row a:last-child{
  text-align:right; /* визуально выравниваем номер по правому краю */
}
.edge-switch{position:absolute; bottom:10px; width:32px; height:32px; border:1px solid #d1d5db; background:#fff; color:#111;border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); display:grid; place-items:center; user-select:none; z-index:5; pointer-events:auto}
.edge-left{left:10px} .edge-right{right:10px}
[contenteditable="true"]{outline:1px dashed transparent}
[contenteditable="true"]:focus{outline-color:#9ca3af; outline-offset:2px; background:rgba(0,0,0,0.02)}
.footergrid{display:grid; grid-template-columns: 1fr 1fr 1fr; align-items:start; column-gap:24px; padding:20px 0; border-top:1px solid var(--line); font-size:14px;}
.footergrid > :nth-child(1){ justify-self:start; }
.footergrid > :nth-child(2){ justify-self:center; }
.footergrid > :nth-child(3){ justify-self:end; }
.settings{background:var(--panel); margin-right: 8px; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:12px; align-self:start; position:sticky; top:14px; z-index:5000; overflow:visible;}
.settings h4{margin:0 0 2px 0; font-size:14px; color:#111}
.settings .small{margin:0 0 8px 0; font-size:12px; color:#6b7280}

.settings__mobile-head{
  display:none;
  margin-bottom:4px;
}

.settings__mobile-toggle{
  width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  cursor:pointer;
}

.settings__mobile-title{
  font-weight:600;
}

.settings__mobile-scope{
  margin-left:8px;
  font-size:12px;
  color:#6b7280;
}

.settings__mobile-icon{
  margin-left:auto;
  font-size:10px;
  opacity:.7;
  transition:transform .2s ease;
}

.settings--expanded .settings__mobile-icon{
  transform:rotate(180deg);
}

.set-group{border:1px solid var(--line); border-radius:12px; padding:8px; margin-bottom:8px; overflow:visible; position:relative}
.set-title{font-size:12px; font-weight:600; color:#111; margin:2px 0 6px}
.set-row{display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin:6px 0}
.set-row.set-3{grid-template-columns: 56px 1fr 92px; align-items:center}
.set-row.set-3 > label{ text-align:left; padding-left:0; }

.set-row label{font-size:13px; color:#111; align-self:center}
input[type="number"]{width:100%; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:14px; background:#fff; position:relative; z-index:6000}
.divider{border:0; border-top:1px solid var(--line); margin:10px -8px}
.btnbar{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.note{font-size:12px; color:#6b7280; margin-top:6px}
.dimmed{opacity:.45; pointer-events:none}
.filter-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.filter-row .chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:#fff}
.filter-row .chip input{margin:0}
.subsets-extra{margin-top:8px; display:none}
.subsets-extra.show{display:block}
.filter-controls{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.details-toggle{display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:6px 8px; border-radius:8px}
.details-toggle:hover{background:#f5f5f5}
.details-body{display:none; padding:8px; border:1px dashed var(--line); border-radius:12px; margin-top:8px}
.details.open .details-body{display:block}
.fontselect{position:relative}
.fs-control{width:100%; border:1px solid var(--line); border-radius:10px; height:36px; padding:0 10px; background:#fff; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none}
.fs-value{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fs-caret{opacity:.7}
.fontselect.open .fs-caret{transform:rotate(180deg)}
.fs-menu{position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:280px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:6500; display:none;}
.fontselect.open .fs-menu{display:block}
.fs-sep{height:1px; background:#e5e7eb; margin:6px 0}
.fs-group{font-size:12px; font-weight:600; color:#6b7280; padding:6px 10px; position:sticky; top:0; background:#fff; z-index:1}
.fs-item{padding:8px 10px; cursor:pointer}
.fs-item[aria-selected="true"], .fs-item:hover{background:#f9fafb}
.fs-item[aria-disabled="true"]{opacity:.5; pointer-events:none}


/* Prevent fallback flash: when applying a new font, temporarily hide the specimen text */
.font-hide {
  visibility: hidden;
}

.font-fade-in {
  opacity: 0;
  transition: opacity 160ms ease;
}
.font-fade-in.font-ready {
  opacity: 1;
}

/* === Рейка пресетов слева от панели === */
#presetRail{
  z-index: 30; /* выше контента, ниже дропдаунов если нужно подстроить */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.preset-rail-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preset-rail-plus{
  width: 36px; height: 36px;
  border-radius: 9999px;
  border: 1px dashed var(--line);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
}
.preset-rail-plus:hover{ border-style: solid; }

/* === Кружки-пресеты 1,2,3… === */
.preset-dot{
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
  user-select: none;
}
.preset-dot.active{
  outline: 2px solid #111; outline-offset: 2px;
}

/* Мелкий крестик удаления — только при наведении */
.preset-dot .preset-del{
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff; border: 1px solid #d1d5db;
  display: none; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.preset-dot:hover .preset-del{ display: inline-flex; }
.preset-dot .preset-del:hover{ background:#fef2f2; border-color:#fecaca; }

/* ------- Мобильные корректировки (до 600px) ------- */
@media (max-width: 600px){
  /* Общий layout под смартфон */
  .app{
    flex-direction: column;
  }

  .sidebar{
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    z-index: 5500;
  }

  .nav{
    flex-direction: row;
    margin-top: 0;
	justify-content: center;
    gap: 8px;
  }

  .nav a{
	flex: 0 0 auto;
    width: 52px;
    height: 52px;
  }

  .contentgrid{
    grid-template-columns: 1fr;
    padding: 10px;
    padding-bottom: 100px; /* запас под панель шрифтов */
  }

  .device{
    max-height: none;
  }

  /* Рекомендации по шрифтам — на всю ширину */
  #reco-panel{
    width:100%;
    margin:12px 0;
    box-sizing:border-box;
  }

  /* Панель шрифтов: "шторка" снизу */
  .settings{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    top: auto;
    margin: 0;
    max-width: none;
    border-radius: 18px;
    padding: 8px 10px 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.20);
    z-index: 6000;
  }

  .settings__mobile-head{
    display: block;
  }

  .settings__body{
    margin-top: 6px;
  }

  /* Свернутая панель: показываем только глобальный блок и скрываем заголовок */
  .settings--collapsed h4,
  .settings--collapsed #currentScopeText{
    display: none;
  }

  .settings--collapsed .settings__body > :not(#globalSet){
    display: none;
  }

  /* Развернутая панель: всё содержимое + прокрутка */
  .settings--expanded{
    max-height: 80vh;
    overflow: auto;
  }

  /* Сетка и размеры контролов под палец */
  .set-row.set-3{
    grid-template-columns:48px 1fr 80px;
  }

  .fs-control{
    height:40px;
  }

  input[type="number"]{
    height:40px;
    font-size:16px; /* без зума на iOS */
  }

  .fs-menu{
    max-height:60vh;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  .fontselect input[type="text"]{
    font-size:16px;
  }
}
/* === Categories header styled like GF filters toggle === */
.filter-group--categories > summary {
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; padding:6px 8px; border-radius:8px;
  font-size:12px; line-height:1.2; list-style:none;
}
.filter-group--categories > summary:hover { background:#f5f5f5; }
.filter-group--categories > summary::-webkit-details-marker { display:none; }
.filter-group--categories > summary::after {
  content:'▾'; opacity:.7; margin-left:auto; transition: transform .2s ease;
}
.filter-group--categories[open] > summary::after { transform: rotate(180deg); }
.filter-group--categories .cat-wrap { margin-top:8px; }

/* === unify headers for filters / pairs / categories to match .details-toggle === */
.details-toggle,
details.filter-group > summary,
details.filter-group--categories > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
  padding:6px 8px;
  border-radius:8px;
  line-height:1.2;
  list-style:none;
}
details.filter-group > summary::-webkit-details-marker,
details.filter-group--categories > summary::-webkit-details-marker { display:none; }

details.filter-group > summary:hover,
details.filter-group--categories > summary:hover { background:#f5f5f5; }

details.filter-group > summary::after,
details.filter-group--categories > summary::after {
  content:'▾'; opacity:.7; margin-left:auto; transition: transform .2s ease;
}
details.filter-group[open] > summary::after,
details.filter-group--categories[open] > summary::after { transform: rotate(180deg); }

/* режем гориз. скролл */
.app, .contentgrid, .wrapper { overflow-x: clip; }