/* Акордеон на сторінці товару (Хвиля 2, п. 27)
   ------------------------------------------------------------------
   Підключається лише на сторінці товару і лише з увімкненим вимикачем
   «Акордеон на сторінці товару». Розмітка — inc/twins-product-accordion.php.
   Стан пункту — aria-expanded кнопки: сервер віддає "true" (без JS усе
   розгорнуто), інлайн-скрипт після розмітки ставить "false" і клас
   twins-acc--js. Розміри — за макетом (розвідка п. 27, §9.3): рядок
   заголовка ≈ 54 px на десктопі, на мобільному 44 px (зона тапу; у макеті
   ≈ 38), відступ тексту від лінії 20 px, шеврон 16×8 за 11 px від краю.
   Кегль заголовків і вмісту — --medium (18 px на десктопі, 12 px на 375):
   за шириною слів у макеті («ОПИС» ≈ 54 / 35 CSS-px), не за висотою літер. */

.twins-acc {
  --twins-acc-inner: 20px;
  --twins-acc-line: clamp(17px, 1.53vw, 22px);
  /* Як у .product_bottom: ритм колонки не змінюється */
  margin-top: clamp(40px, 3.33vw, 52px);
}

.twins-acc__item {
  border-bottom: 1px solid var(--silver);
}

.twins-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 16px;
  width: 100%;
  min-height: clamp(44px, 3.75vw, 54px);
  padding: 8px 11px 8px var(--twins-acc-inner);
  color: var(--black);
  font-size: var(--medium);
  font-weight: 300;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
}

.twins-acc--js .twins-acc__head {
  cursor: pointer;
}

.twins-acc__head:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: -1px;
}

.twins-acc__icon {
  flex: none;
  width: 16px;
  height: 8px;
  transition: transform .4s;
}

.twins-acc__head[aria-expanded="true"] .twins-acc__icon {
  transform: rotate(180deg);
}

/* Без JS пункти не згортаються — шеврон нічого б не обіцяв */
.twins-acc:not(.twins-acc--js) .twins-acc__icon {
  display: none;
}

/* Висота анімується через grid-template-rows 0fr ↔ 1fr: однаково в Safari,
   вбудованому браузері Instagram і Chrome, без вимірювання висоти в JS.
   visibility прибирає згорнутий вміст із Tab і читалок екрана — після
   кінця анімації закриття. */
.twins-acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s ease, visibility 0s;
}

.twins-acc__head[aria-expanded="false"] + .twins-acc__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .4s ease, visibility 0s .4s;
}

.twins-acc__inner {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .twins-acc__icon,
  .twins-acc__panel,
  .twins-acc__head[aria-expanded="false"] + .twins-acc__panel {
    transition: none;
  }
}

/* Вміст */

.twins-acc__body {
  padding: clamp(2px, .55vw, 8px) var(--twins-acc-inner) clamp(20px, 2.1vw, 30px);
  font-size: var(--medium);
  line-height: var(--twins-acc-line);
}

/* .content робить p/h/ol «all: revert» (поля браузера по 1em) — тут
   відступ між блоками в один рядок, як у макеті */
.twins-acc__body p,
.twins-acc__body h2,
.twins-acc__body h3,
.twins-acc__body h4,
.twins-acc__body h5,
.twins-acc__body h6,
.twins-acc__body > ol,
.twins-acc__body > ul {
  margin: var(--twins-acc-line) 0 0;
}

.twins-acc__body > *:first-child {
  margin-top: 0;
}

/* Пункти нумерованого списку (догляд у ~80% товарів) — той самий проміжок
   в один рядок, що й між абзацами; у попапі було 1em */
.twins-acc__body li + li {
  margin-top: var(--twins-acc-line);
}

/* Вставлений з чату <section> успадковує `main section:last-child` (main.css:167) —
   поле під ним зсувало б відступ до таблиці */
.twins-acc__body section:last-child {
  margin-bottom: 0;
}

/* Порожній абзац (<p></p> у кінці сторінки «Доставка») не додає рядок */
.twins-acc__body p:empty {
  display: none;
}

/* ДОГЛЯД і ДОСТАВКА — як .pop_content.content у попапах (main.css, блок «Pop.») */

.twins-acc__body--care h2 {
  display: none;
}

.twins-acc__body--care h2 + * {
  margin-top: 0 !important;
}

.twins-acc__body--care ol,
.twins-acc__body--delivery ol {
  counter-reset: item;
  padding-left: 0;
}

.twins-acc__body--care li,
.twins-acc__body--delivery li {
  list-style-type: none;
}

.twins-acc__body--care ol li:before,
.twins-acc__body--delivery ol li:before {
  content: counters(item, '.') ".";
  counter-increment: item;
  padding-right: 10px;
  color: var(--primary);
}

/* СКЛАД (і рядки таблиці, якщо їх повернуто в ОПИС — twins_pacc_spec_map()):
   підпис ліворуч, значення праворуч в одному рядку (як
   .pop_content_composition на десктопі) — на всіх ширинах, без «стовпчика»
   на мобільному. Контент приходить з inline-стилями редактора (height: 24px
   на table/tr/td, width: 50% на td), тому height/width тут з !important. */

.twins-acc__body--description table,
.twins-acc__body--composition table {
  width: 100%;
  height: auto !important;
  margin-top: 24px;
  border-spacing: 0;
}

.twins-acc__body--description table tr,
.twins-acc__body--composition table tr,
.twins-acc__body--description table td,
.twins-acc__body--composition table td {
  height: auto !important;
}

/* baseline: підпис більшого кегля і перший рядок значення — на одній лінії */
.twins-acc__body--description table td,
.twins-acc__body--composition table td {
  width: auto !important;
  padding: 0;
  font-weight: 300;
  vertical-align: baseline;
  text-align: right;
}

/* Підпис не переноситься (width: 1% + nowrap — рівно за вмістом), довге
   значення переноситься у своїй колонці й не наїжджає на підпис */
.twins-acc__body--description table td:first-child,
.twins-acc__body--composition table td:first-child {
  width: 1% !important;
  padding-right: 16px;
  font-size: var(--h6);
  text-align: left;
  white-space: nowrap;
}

/* Рівний крок між рядками — 20 / 30 px (як нижній відступ панелі; на
   десктопі 30 px було й до цієї правки, у старому попапі — теж). Порожні
   рядки (обидві клітинки <td></td>, у кепок) і порожні клітинки місця не
   займають */
.twins-acc__body--description table tr + tr td:not(:empty),
.twins-acc__body--composition table tr + tr td:not(:empty) {
  padding-top: clamp(20px, 2.1vw, 30px);
}

/* Абзац у клітинці (<td><p>…, редактор Tilda) — без полів абзаців акордеона */
.twins-acc__body--description table p,
.twins-acc__body--composition table p {
  margin: 0;
}