/* product-dims.css — схема размеров поверх фото товара.
   Блок всегда влезает в высоту экрана (max-width считается из высоты viewport). */

.pp-dims {
    position: relative;
    width: 100%;
    /* Сохраняем пропорции SVG (2000×1440). Ширина ограничивается так,
       чтобы высота блока не превысила высоту viewport минус отступы. */
    max-width: calc((100dvh - 160px) * 2000 / 1440);
    aspect-ratio: 2000 / 1440;
    margin: 32px auto;
    background: #ffffff;
}

/* Fallback для браузеров без dvh */
@supports not (height: 100dvh) {
    .pp-dims { max-width: calc((100vh - 160px) * 2000 / 1440); }
}

/* SVG — верхний слой, растянут на весь контейнер */
.pp-dims__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.pp-dims__overlay svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Фото — 80% от контейнера, по центру */
.pp-dims__photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    z-index: 1;
    line-height: 0;
    pointer-events: none;
}
.pp-dims__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- ЛИНИИ ---------- */
.pp-dims__overlay .pp-dim-line {
    stroke-dasharray: var(--len, 2000);
    stroke-dashoffset: var(--len, 2000);
    transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1);
}
.pp-dims.is-visible .pp-dim-line { stroke-dashoffset: 0; }

/* ---------- СТРЕЛКИ ---------- */
.pp-dims__overlay .pp-dim-cap {
    opacity: 0;
    transform: scale(.6);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity .25s ease .75s, transform .25s ease .75s;
}
.pp-dims.is-visible .pp-dim-cap { opacity: 1; transform: scale(1); }

/* ---------- ЛЕЙБЛЫ ---------- */
.pp-dims__overlay .pp-dim-label {
    opacity: 0;
    transition: opacity .25s ease .15s;
}
.pp-dims.is-visible .pp-dim-label { opacity: 1; }

.pp-dims__overlay .pp-dim-label__title {
    fill: #111111;
    font-family: 'Capture', 'Capture Smallz', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
}
.pp-dims__overlay .pp-dim-label__val {
    fill: #111111;
    font-family: 'Capture', 'Capture Smallz', Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
}
.pp-dims__overlay .pp-dim-label__sub {
    fill: #0c0c0c;
    font-family: 'Capture', 'Capture Smallz', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
}

/* ---------- ВЕС ---------- */
.pp-dims__overlay .pp-dim-weight__badge { fill: #fed500; stroke: none; }
.pp-dims__overlay .pp-dim-weight__hole  { fill: #ffffff; stroke: none; }
.pp-dims__overlay .pp-dim-weight__string,
.pp-dims__overlay .pp-dim-weight__icon {
    stroke: #111111;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
}
.pp-dims__overlay .pp-dim-weight__title {
    fill: #0c0c0c;
    font-family: 'Capture', 'Capture Smallz', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}
.pp-dims__overlay .pp-dim-weight__val {
    fill: #0c0c0c;
    font-family: 'Capture', 'Capture Smallz', Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
}

/* ---------- Отключение transition на момент сброса ---------- */
.pp-dims.no-transition .pp-dim-line,
.pp-dims.no-transition .pp-dim-cap,
.pp-dims.no-transition .pp-dim-label {
    transition: none !important;
}

@media (max-width: 640px) {
    .pp-dims__overlay .pp-dim-label__title { font-size: 13px; }
    .pp-dims__overlay .pp-dim-label__val   { font-size: 17px; }
    .pp-dims__overlay .pp-dim-label__sub   { font-size: 11px; }
}

/* === pp-pack (упаковка) === */
.pp-pack {
    position: relative;
    width: 100%;
    max-width: calc((100dvh - 200px) * 1072 / 797);
    aspect-ratio: 1072 / 797;
    margin: 24px auto 32px;
    background: #ffffff;
}
@supports not (height: 100dvh) {
    .pp-pack { max-width: calc((100vh - 200px) * 1072 / 797); }
}
.pp-pack__photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    z-index: 1;
    line-height: 0;
    pointer-events: none;
}
.pp-pack__photo img {
    display: block; width: 100%; height: 100%; object-fit: contain;
}
.pp-pack__overlay {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.pp-pack__overlay svg {
    display: block; width: 100%; height: 100%;
}
.pp-pack__overlay .pp-dim-line {
    stroke-dasharray: var(--len, 2000);
    stroke-dashoffset: var(--len, 2000);
    transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1);
}
.pp-pack.is-visible .pp-dim-line { stroke-dashoffset: 0; }
.pp-pack__overlay .pp-dim-cap {
    opacity: 0;
    transform: scale(.6);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity .25s ease .75s, transform .25s ease .75s;
}
.pp-pack.is-visible .pp-dim-cap { opacity: 1; transform: scale(1); }
.pp-pack__overlay .pp-dim-label,
.pp-pack__overlay .pp-vol__icon {
    opacity: 0;
    transition: opacity .25s ease .15s;
}
.pp-pack.is-visible .pp-dim-label,
.pp-pack.is-visible .pp-vol__icon { opacity: 1; }
.pp-pack.no-transition .pp-dim-line,
.pp-pack.no-transition .pp-dim-cap,
.pp-pack.no-transition .pp-dim-label,
.pp-pack.no-transition .pp-vol__icon { transition: none !important; }
/* Тексты в блоке упаковки */
.pp-pack .pp-dim-label__val { fill: #111; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 22px; font-weight: 800; }
.pp-pack .pp-dim-label__sub { fill: #0c0c0c; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.pp-pack .pp-dim-weight__badge { fill: #fed500; }
.pp-pack .pp-dim-weight__hole { fill: #ffffff; }
.pp-pack .pp-dim-weight__string, .pp-pack .pp-dim-weight__icon { stroke: #111; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.pp-pack .pp-dim-weight__title { fill: #0c0c0c; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 15px; font-weight: 600; }
.pp-pack .pp-dim-weight__val { fill: #0c0c0c; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 30px; font-weight: 800; }
.pp-pack .pp-vol__val { fill: #0c0c0c; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 28px; font-weight: 800; }

/* Лейбл плашки упаковки — как у техники */
.pp-pack .pp-dim-label rect { fill: #fed500; stroke: none; }
.pp-pack .pp-dim-label__val { fill: #111111; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.pp-pack .pp-dim-label__sub { fill: #0c0c0c; font-family: 'Capture','Capture Smallz',Arial,sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .1em; }