/* ════════════════════════════════════════════════════════════════════
   Product modal · specs animations
   ───────────────────────────────────────────────────────────────────
   Стили иконок-карточек анимированных характеристик.
   Используется внутри модалки товара (.pm-specs-grid).
   Палитра берётся из base CSS (--pink, --white, --gray, --border).
   ════════════════════════════════════════════════════════════════════ */

.pm-specs-grid{
    /* переопределяем простую label/value сетку под новую раскладку:
       3 колонки — лейбл слева, анимация в центре, значение справа */
    display: grid;
    grid-template-columns: 110px minmax(0,1fr) auto;
    gap: 0;
    row-gap: 0;
}

.pm-spec-row{
    display: contents;
}
.pm-spec-row > *{
    padding: 14px 0;
    border-bottom: 1px dashed rgba(122,122,138,0.16);
    align-self: center;
}
.pm-spec-row:last-child > *{
    border-bottom: none;
}

.pm-spec-label{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--pink, #ff3d7f);
}

.pm-spec-anim{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 0;        /* позволяет колонке сжиматься ниже ширины SVG */
    overflow: hidden;
}
/* SVG-анимации масштабируются под ширину колонки (viewBox сохраняет пропорции) */
.pm-spec-anim svg{
    max-width: 100%;
    height: auto;
}

.pm-spec-value{
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--white, #f5f0f0);
    line-height: 1;
    text-align: right;
    min-width: 88px;
    font-variant-numeric: tabular-nums;
}
.pm-spec-value sup{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    color: var(--gray, #7a7a8a);
    letter-spacing: 0.15em;
    margin-left: 4px;
    vertical-align: baseline;
    font-weight: 400;
}

/* На мобилке — компактнее */
@media (max-width: 480px){
    .pm-specs-grid{
        grid-template-columns: 70px minmax(0,1fr) auto;
    }
    .pm-spec-label{
        font-size: 8px;
        letter-spacing: 0.2em;
    }
    .pm-spec-value{
        font-size: 18px;
    }
    .pm-spec-anim{
        min-height: 84px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* prefers-reduced-motion: отключить все анимации внутри */
@media (prefers-reduced-motion: reduce){
    .pm-spec-anim *{
        transition: none !important;
        animation: none !important;
    }
}