.expacc-widget{
  --expacc-ink:#1c2b2e;
  --expacc-muted:#5b6b6d;
  --expacc-line:#dbe4e3;
  --expacc-surface:#ffffff;
  --expacc-accent:#1f7a6c;
  --expacc-accent-soft:#e5f2ef;
  --expacc-radius:10px;

  max-width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
}

.expacc-widget .expacc-item{
  background:var(--expacc-surface);
  border:1px solid var(--expacc-line);
  border-radius:var(--expacc-radius);
  overflow:hidden;
  box-sizing:border-box;
}

.expacc-widget .expacc-item *{
  box-sizing:border-box;
}

/* Заголовок-«шапка» — теперь div, а не button.
   display:flex, чтобы h2 и псевдоэлемент-стрелка встали по краям. */
.expacc-widget .expacc-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  user-select:none;
}

.expacc-widget .expacc-header:hover{
  background:var(--expacc-accent-soft);
}

.expacc-widget .expacc-header:focus-visible{
  outline:2px solid var(--expacc-accent);
  outline-offset:-2px;
}

.expacc-widget .expacc-title{
  margin:0;
  padding:0;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--expacc-ink);
}

/* Стрелка целиком на CSS через ::after — в разметке для неё
   вообще нет тега, поэтому санитайзеру CMS нечего вырезать. */
.expacc-widget .expacc-header::after{
  content:"";
  flex:0 0 auto;
  width:20px;
  height:20px;
  background-color:var(--expacc-accent);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  transition:transform 0.25s ease;
}

/* Состояние "открыто" переключается классом .is-open,
   который навешивает JS — никаких aria/data атрибутов в разметке не требуется. */
.expacc-widget .expacc-item.is-open .expacc-header::after{
  transform:rotate(180deg);
}

/* Раскрытие теперь через max-height, которым управляет JS (см. .js файл).
   Это не зависит от display:grid/block и не ломается, если стили сайта
   форсируют display:block !important на div-ах внутри контента. */
.expacc-widget .expacc-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height 0.3s ease;
}

.expacc-widget .expacc-title{
  text-align:left !important;
}

.expacc-widget .expacc-panel-inner{
  overflow:hidden;
}

.expacc-widget .expacc-body{
  padding:0 20px 20px;
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--expacc-muted);
}

@media (prefers-reduced-motion: reduce){
  .expacc-widget .expacc-header::after,
  .expacc-widget .expacc-panel{
    transition:none !important;
  }
}