/* Посилання «Розмірна сітка» біля селектора розміру (Хвиля 2, п. 28)
   ------------------------------------------------------------------
   Підключається лише на сторінці товару і лише з увімкненим вимикачем
   «Акордеон на сторінці товару» (спільний з п. 27). Розмітка —
   inc/twins-size-link.php. Той самий кегль, рядок, регістр і трекінг, що в
   підпису розміру (th.label успадковує їх від рядка; кнопка — теж), колір
   --black і підкреслення — за макетом. Зона тапу ≥ 44 px — псевдоелементом,
   висота рядка не змінюється. */

.twins-szl {
  display: inline-block;
  position: relative;
  padding: 0;
  color: var(--black);
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  cursor: pointer;
}

/* Зона тапу 44 px заввишки по центру тексту; униз — не далі за проміжок до кнопок розмірів */
.twins-szl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  right: -8px;
  height: 44px;
  transform: translateY(-50%);
}

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

/* Variable: кнопка в td.value, на рядку підпису праворуч до краю колонки */
.variations_form table.variations tr {
  position: relative;
}

.twins-szl--variable {
  position: absolute;
  top: 0;
  right: 0;
}

/* Simple: окремий рядок над лічильником з тим самим ритмом, що в рядку підпису
   variable: відступ над ним — як у форми (.product_info .cart, main.css), під
   ним до лічильника — як від підпису до кнопок розмірів (16 px) */
.twins-szl-row {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 2.5vw, 40px);
}

.product_info .twins-szl-row + .cart {
  margin-top: 16px;
}

/* Попап «Розмірна сітка» за макетом дизайнера (п. 28)
   ------------------------------------------------------------------
   Розмітку дає розбір вмісту на виводі (inc/twins-size-link.php,
   twins_szp_*). Нерозпізнане лишається як є і цих класів не має. Кеглі,
   відступи й кольори — за заміром макета («Розмірна сітка_поп-ап»
   1740-1920 / 1200-1739 / 360-767; масштаб PNG 1,104 px на CSS-px).
   Панель, заголовок і × — як були (main.css). */

#size .pop_content_size {
  --szp-line: rgba(37, 37, 37, 0.3);
  --szp-fill: #F9F9F9;
  --szp-text: 16px;
  --szp-cell-lh: 1.2;
  --szp-head-h: 42px;
  --szp-row-h: 58px;
  --szp-label-pl: 20px;
  --szp-model-title: 19px;
  --szp-model-value: 18px;
}

/* Вміст — одразу під заголовком, як у макеті (перший абзац мав відступ 1em зверху) */
#size .pop_content_size > :first-child {
  margin-top: 0;
}

/* Таблиця на всю ширину вмісту; якщо колонок забагато — прокручується лише вона */
#size .pop_content_size .twins-szp-scroll {
  overflow-x: auto;
}

/* border-collapse: separate, а не collapse: у WebKit (iPhone, DPR 3) зведена межа
   між рядками малюється двічі з накладанням і виходить темнішою за рамку —
   лінія під шапкою «Розмір:» відрізнялась кольором від зовнішньої (Лана 15.10).
   Тут кожна лінія — рамка таблиці або border-top клітинки, і малюється раз. */
#size .pop_content_size .twins-szp-table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--szp-line);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--szp-text);
  line-height: var(--szp-cell-lh);
  font-weight: 300;
}

/* height і width — !important, бо main.css ставить їм !important (.pop_content_size table td) */
#size .pop_content_size .twins-szp-table td,
#size .pop_content_size .twins-szp-table th {
  height: var(--szp-row-h) !important;
  padding: 6px 4px;
  border: 0;
  border-top: 1px solid var(--szp-line);
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
  text-align: center;
  vertical-align: middle;
  color: var(--black);
  background-color: var(--white);
}

#size .pop_content_size .twins-szp-table tr:first-child > * {
  border-top: 0;
}

/* Перша колонка (назви мірок) і кожна друга колонка значень — заливка */
#size .pop_content_size .twins-szp-table td:nth-child(odd),
#size .pop_content_size .twins-szp-table th:nth-child(odd) {
  background-color: var(--szp-fill);
}

#size .pop_content_size .twins-szp-table td:first-child,
#size .pop_content_size .twins-szp-table th:first-child {
  width: 27.6% !important;
  padding-left: var(--szp-label-pl);
  text-align: left;
}

/* Колонки значень рівні: решта ширини порівну */
#size .pop_content_size .twins-szp-table--cols-3 td:not(:first-child) { width: calc(72.4% / 2) !important; }
#size .pop_content_size .twins-szp-table--cols-4 td:not(:first-child) { width: calc(72.4% / 3) !important; }
#size .pop_content_size .twins-szp-table--cols-5 td:not(:first-child) { width: calc(72.4% / 4) !important; }
#size .pop_content_size .twins-szp-table--cols-6 td:not(:first-child) { width: calc(72.4% / 5) !important; }
#size .pop_content_size .twins-szp-table--cols-7 td:not(:first-child) { width: calc(72.4% / 6) !important; }

/* «підпис | значення» — навпіл */
#size .pop_content_size .twins-szp-table--cols-2 td {
  width: 50% !important;
}

/* Шапка «Розмір: S M L XL» — заливка на весь рядок, «Розмір:» приглушено */
#size .pop_content_size .twins-szp-table .twins-szp-head > * {
  height: var(--szp-head-h) !important;
  background-color: var(--szp-fill);
}

#size .pop_content_size .twins-szp-head > :first-child {
  color: var(--gray);
}

/* Значення в рядку не переносяться (84-88, 112-120) */
#size .pop_content_size .twins-szp-table--sizes td:not(:first-child) {
  white-space: nowrap;
}

/* main.css робить <strong> у клітинці блоком ліворуч */
#size .pop_content_size .twins-szp-table td strong,
#size .pop_content_size .twins-szp-table td b {
  display: inline;
  font-weight: inherit;
  text-align: inherit;
}

/* «Довжина / по спині (см)» — перше слово окремим рядком, як у макеті */
#size .pop_content_size .twins-szp-w1 {
  display: block;
}

#size .pop_content_size .twins-szp-help {
  margin: 20px 0 0;
  font-size: var(--szp-text);
  font-weight: 300;
  line-height: 1.25;
  text-align: right;
}

#size .pop_content_size .twins-szp-help a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

#size .pop_content_size .twins-szp-help a:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 2px;
}

/* «Параметри моделі на фото:» — підписи в рядок, лінія, значення в рядок */
#size .pop_content_size .twins-szp-model {
  margin-top: 32px;
}

#size .pop_content_size .twins-szp-model__title {
  margin: 0;
  font-size: var(--szp-model-title);
  font-weight: 300;
  line-height: 1.25;
}

#size .pop_content_size .twins-szp-model__list {
  --szp-dt-lh: 20px;
  --szp-line-gap: 15px;
  --szp-dd-gap: 31px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  margin: 19px 0 0;
}

#size .pop_content_size .twins-szp-model__list::before {
  content: "";
  position: absolute;
  top: calc(var(--szp-dt-lh) + var(--szp-line-gap));
  left: 0;
  right: 0;
  border-top: 1px solid var(--szp-line);
}

#size .pop_content_size .twins-szp-model__item {
  white-space: nowrap;
}

#size .pop_content_size .twins-szp-model dt {
  padding-bottom: var(--szp-dd-gap);
  font-size: var(--szp-text);
  font-weight: 300;
  line-height: var(--szp-dt-lh);
}

#size .pop_content_size .twins-szp-model dd {
  margin: 0;
  font-size: var(--szp-model-value);
  font-weight: 300;
  line-height: 1.25;
}

/* SVG/PNG-сітки — на всю ширину вмісту, не більше за свій розмір */
#size .pop_content_size img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 1739px) {
  #size .pop_content_size {
    --szp-model-title: 17px;
  }

  #size .pop_content_size .twins-szp-model {
    margin-top: 30px;
  }

  #size .pop_content_size .twins-szp-model__list {
    margin-top: 21px;
  }
}

@media only screen and (max-width: 767px) {
  #size .pop_content_size {
    --szp-text: 11px;
    --szp-cell-lh: 1.5;
    --szp-head-h: 33px;
    --szp-row-h: 50px;
    --szp-label-pl: 5px;
    --szp-model-title: 12px;
    --szp-model-value: 12px;
  }

  #size .pop_content_size .twins-szp-table td,
  #size .pop_content_size .twins-szp-table th {
    padding: 4px 2px;
  }

  #size .pop_content_size .twins-szp-help {
    margin-top: 19px;
  }

  #size .pop_content_size .twins-szp-model {
    margin-top: 31px;
  }

  #size .pop_content_size .twins-szp-model__title {
    text-transform: uppercase;
  }

  #size .pop_content_size .twins-szp-model__list {
    --szp-dt-lh: 14px;
    --szp-line-gap: 14px;
    --szp-dd-gap: 32px;
    margin-top: 18px;
  }
}