.pdp-info-card {
        background: var(--clr-surface-2);
        border-radius: var(--radius-card);
        padding: 12px;
    }
    .pdp-info-card-title {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 800;
        color: var(--clr-text-2);
        margin: 0 0 10px;
        padding: 0 2px;
        /* Title text follows UI direction (Arabic RTL is correct here) */
    }
    .pdp-info-card-title i { color: var(--clr-primary); font-size: 13px; }
    /* v5.84+: always one row per item — both on mobile and desktop.
       Labels align left in a fixed column; values align left after them. */
    .pdp-info-rows {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .pdp-info-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 9px 12px;
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-thumb);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--clr-text-2);
        cursor: pointer;
        /* Force LTR layout — rows contain technical codes (Réf/Barcode/RP)
           that must render identically regardless of the active UI direction.
           This keeps icon → label → value → copy-icon order in all languages. */
        direction: ltr;
        box-shadow: none;
        transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .15s;
        text-align: start;
    }
    .pdp-info-row-main {
        display: flex;
        align-items: center;
        gap: 0;
        min-width: 0;
        flex: 1;
        overflow: hidden;
        /* Fixed-column layout: icon + label share a fixed left column,
           value starts at the same offset on every row. */
    }
    /* Icon — fixed width, aligned left */
    .pdp-info-row-icon {
        flex-shrink: 0;
        width: 18px;
        color: var(--clr-text-3);
        transition: color .18s;
        direction: ltr;
        text-align: center;
    }
    /* Label — fixed width so all values start at same x-position */
    .pdp-info-row-label {
        flex-shrink: 0;
        width: 64px;           /* enough for "Barcode" */
        padding: 0 8px;
        color: var(--clr-text-3);
        font-weight: 800;
        direction: ltr;
        text-align: start;
    }
    .pdp-info-row:hover {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
        box-shadow: 0 6px 16px rgba(var(--clr-primary-rgb),.18);
    }
    .pdp-info-row:active { transform: scale(.99); }
    .pdp-info-row:hover .pdp-info-row-icon { color: var(--clr-primary); }
    /* v5.84+: values are codes/references — keep them LTR and
       non-mirrored regardless of the active UI direction.
       flex:1 + min-width:0 let the value fill remaining space
       and ellipsis if it overflows. */
    .pdp-info-row-val {
        direction: ltr;
        unicode-bidi: embed;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--clr-text);
        font-weight: 700;
        letter-spacing: .2px;
        flex: 1;
        min-width: 0;
    }
    .pdp-info-row-copy { flex-shrink: 0; font-size: 10px; color: var(--clr-text-3); transition: color .18s; }
    .pdp-info-row:hover .pdp-info-row-copy { color: var(--clr-primary); }