/* Размерная линия: линия 1px тушью со стрелками и засечками на концах, подпись курсивом по центру
   на фоне бумаги; цифра в подписи (b) — 600 без курсива. Срок под ценой, «от 2 недель» над цепочкой.
   Разметка: <div class="dim"><span class="dim__text">от <b>2</b> недель</span></div>
   .dim--v — вертикальная: вдоль цепочки, вставшей столбцом, слева; подпись повёрнута на −90° (читается снизу
   вверх). Высота — по соседу (align-self: stretch в сетке строки); показывает и прячет её страница
   в своём @container, где цепочка встаёт столбцом. */

.dim {
  --dim-h: 40px;           /* высота: подпись над линией */
  --dim-fs: var(--fs-body);

  position: relative;
  height: var(--dim-h);
  border-left: 1px solid var(--thin); border-right: 1px solid var(--thin);
}
/* линия — на 10px выше низа, стрелки на ней */
.dim::before { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; border-top: 1px solid var(--ink); }
.dim::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5 14 0v9z' fill='%231d2229'/%3E%3C/svg%3E") left center / 14px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M14 4.5 0 0v9z' fill='%231d2229'/%3E%3C/svg%3E") right center / 14px 9px no-repeat;
}
.dim__text {
  position: absolute; left: 50%; top: 0; z-index: 1;
  transform: translateX(-50%);
  padding: 0 10px;
  background: var(--sheet, var(--paper));
  font: italic 400 var(--dim-fs)/1.3 var(--sans);
  white-space: nowrap;
}
.dim__text b { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }

/* вертикальная: засечки сверху и снизу, линия со стрелками справа, подпись слева от линии.
   Селекторы с .dim.dim--v — сильнее страничных правок горизонтальной линии (top у ::before и подписи) */
.dim.dim--v {
  --dim-w: 36px;           /* ширина: подпись и линия */

  width: var(--dim-w); height: auto; min-height: 120px;
  align-self: stretch;
  border: 0; border-top: 1px solid var(--thin); border-bottom: 1px solid var(--thin);
}
.dim.dim--v::before { left: auto; right: 9px; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--ink); }
.dim.dim--v::after {
  left: auto; right: 5px; top: 0; bottom: 0; width: 9px; height: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M4.5 0 9 14H0z' fill='%231d2229'/%3E%3C/svg%3E") center top / 9px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M4.5 14 0 0h9z' fill='%231d2229'/%3E%3C/svg%3E") center bottom / 9px 14px no-repeat;
}
.dim.dim--v .dim__text {
  left: 0; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: 10px 0;
  line-height: 1.2;
}

@media (max-width: 719px) {
  .dim { --dim-fs: var(--fs-label); }
}