/* ════════════════════════════════════════════════════════════════════
   Product modal · delivery animations — стили
   ───────────────────────────────────────────────────────────────────
   Блок вкладки «Доставка»: строка «Срок изготовления» + мини-карточки.
   Палитра берётся из base CSS (--pink, --white, --gray, --gray2, --border,
   --deep, --surface, --font-*).
   ════════════════════════════════════════════════════════════════════ */

/* ── строка «срок изготовления» (как характеристика) ── */
.dlv-spec-row{
    display: grid;
    grid-template-columns: 110px minmax(0,1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(122,122,138,0.16);
}
.dlv-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);
}
.dlv-spec-anim{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    min-width: 0;
    overflow: hidden;
}
.dlv-spec-anim svg{ max-width: 100%; height: auto; }
.dlv-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: 92px;
}
.dlv-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;
}

/* ── заголовок блока карточек ── */
.dlv-block-label{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--pink, #ff3d7f);
    margin: 18px 0 12px;
}

/* ── сетка мини-карточек ── */
.dlv-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dlv-card{
    background: var(--surface, #101014);
    border: 1px solid var(--border, #1e1e28);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .25s, transform .25s;
}
.dlv-card:hover{
    border-color: var(--pink, #ff3d7f);
    transform: translateY(-3px);
}
.dlv-card-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dlv-card-num{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    color: var(--gray2, #3a3a4a);
    letter-spacing: 0.1em;
}
.dlv-card-tag{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 7px;
    color: var(--gray, #7a7a8a);
    letter-spacing: 0.18em;
}
.dlv-card-art{ margin: 4px 0; }
.dlv-card-art svg{ width: 100%; height: auto; }
.dlv-card-name{
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--white, #f5f0f0);
    line-height: 1;
}
.dlv-card-time{ display: flex; align-items: baseline; gap: 4px; }
.dlv-card-time .big{
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 26px;
    color: var(--pink, #ff3d7f);
    letter-spacing: 0.03em;
    line-height: 1;
}
.dlv-card-time .unit{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    color: var(--gray, #7a7a8a);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.dlv-card-stat{
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    color: var(--gray, #7a7a8a);
    letter-spacing: 0.08em;
    line-height: 1.4;
}

/* ── мобилка: карточки в столбец ── */
@media (max-width: 480px){
    .dlv-cards{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .dlv-card{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
    }
    .dlv-card-head{ width: 100%; }
    .dlv-card-art{ width: 100px; flex-shrink: 0; }
    .dlv-spec-row{ grid-template-columns: 70px minmax(0,1fr) auto; gap: 10px; }
    .dlv-spec-label{ font-size: 8px; letter-spacing: 0.2em; }
    .dlv-spec-value{ font-size: 18px; }
}

/* ── reduced-motion ── */
@media (prefers-reduced-motion: reduce){
    .dlv-spec-anim *, .dlv-card-art *{
        transition: none !important;
        animation: none !important;
    }
}