/* ═══════════════════════════════════════════════════════════════════════
   Darkshop Product Info — Frontend Styles v1.0.1
   Stijl: erft fonts/kleuren van thema, grijze/zwarte iconen, zebra-strepen
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --dpi-text-link: #c8880a;
    --dpi-border: #eeeeee;
    --dpi-bg-stripe: #f7f7f5;
    --dpi-icon-bg: #eeeeec;
    --dpi-icon-color: #333333;
}

/* ─── Container ─────────────────────────────────────────────────────── */

.dpi-info {
    margin: 0;
}

/* ─── Body (rows wrapper) ───────────────────────────────────────────── */

.dpi-info__body {
    border: 1px solid var(--dpi-border);
    border-radius: 4px;
    overflow: hidden;
}

/* ─── Rows ──────────────────────────────────────────────────────────── */

.dpi-info__row {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dpi-border);
}

.dpi-info__row:nth-child(even) {
    background: var(--dpi-bg-stripe);
}

.dpi-info__row:last-child {
    border-bottom: none;
}

/* ─── Icon block ────────────────────────────────────────────────────── */

.dpi-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--dpi-icon-bg);
    border-radius: 6px;
    flex-shrink: 0;
    margin-right: 12px;
}

.dpi-info__icon svg {
    color: var(--dpi-icon-color);
}

/* ─── Label & Value ─────────────────────────────────────────────────── */

.dpi-info__label {
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    min-width: 120px;
}

.dpi-info__value {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    opacity: 0.7;
    margin-left: auto;
    text-align: right;
}

.dpi-info__value--link {
    color: var(--dpi-text-link);
    opacity: 1;
    font-weight: 500;
}

/* ─── Responsive: tablet ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .dpi-info__row {
        gap: 10px;
        padding: 11px 14px;
    }

    .dpi-info__label {
        display: none;
    }

    .dpi-info__value {
        margin-left: 0;
        text-align: left;
    }
}