/* ═══════════════════════════════════════════════════════════
   1Rishe Product Highlights — v2.0.0
   RTL-first · UTF-8 · mobile-first · no inline styles
   Design: light beige card, green checkmark right-side, RTL
═══════════════════════════════════════════════════════════ */

/* ── Outer card ─────────────────────────────────────────── */
.product-highlights {
    background    : #f5f5f0;
    border-radius : 14px;
    padding       : 28px 32px;
    margin        : 24px 0;
    direction     : rtl;
    unicode-bidi  : embed;
    text-align    : right;
    font-family   : inherit;
    /* reset figure defaults */
    border        : none;
}

/* ── Section heading ────────────────────────────────────── */
.ph-section-title {
    font-size   : 1.25rem;
    font-weight : 700;
    color       : #1a1a1a;
    margin      : 0 0 6px 0;
    padding     : 0 0 16px 0;
    line-height : 1.4;
    text-align  : right;
    border-bottom : 1px solid rgba(0,0,0,.08);
    /* reset any theme h3 overrides */
    border-top    : none;
    border-left   : none;
    border-right  : none;
    background    : none;
    box-shadow    : none;
}

/* ── Items list wrapper ─────────────────────────────────── */
.ph-items-wrapper {
    display        : flex;
    flex-direction : column;
}

/* ── Single highlight row ───────────────────────────────── *
 * DOM order: [.ph-feature-icon] [.content]
 * With direction:rtl on parent, flex children mirror:
 *   → icon appears on the RIGHT
 *   → .content fills space to its LEFT
 * No row-reverse needed — RTL context handles it.
 * ─────────────────────────────────────────────────────── */
.highlight-item {
    display        : flex;
    flex-direction : row;
    align-items    : flex-start;
    gap            : 14px;
    padding        : 16px 0;
    border-bottom  : 1px solid rgba(0,0,0,.06);
}

.highlight-item:last-child {
    border-bottom : none;
}

/* ── Green checkmark icon ───────────────────────────────── */
.ph-feature-icon {
    flex-shrink     : 0;
    width           : 20px;
    height          : 20px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : #5a9e4b;
    margin-top      : 3px;
}

.ph-feature-icon svg {
    display : block;
}

/* ── Text block ─────────────────────────────────────────── */
.highlight-item .ph-content {
    flex         : 1;
    min-width    : 0;
    display      : flex;
    flex-direction : column;
    gap          : 3px;
    text-align   : right;
    unicode-bidi : plaintext; /* auto-detect per-string direction */
}

.highlight-item .ph-title {
    display     : block;
    font-size   : .95rem;
    font-weight : 700;
    color       : #1a1a1a;
    line-height : 1.55;
}

.highlight-item .ph-desc {
    display     : block;
    font-size   : .82rem;
    color       : #888;
    line-height : 1.55;
    font-weight : 400;
}

/* ── Trust section ──────────────────────────────────────── */
.ph-trust-section {
    margin-top  : 8px;
    padding-top : 8px;
    border-top  : 1px dashed rgba(0,0,0,.10);
}

.ph-trust-section .highlight-item:last-child {
    border-bottom : none;
}

/* ── LTR override for non-RTL sites ────────────────────── */
html:not([dir="rtl"]) .product-highlights {
    direction  : ltr;
    text-align : left;
}

html:not([dir="rtl"]) .ph-section-title,
html:not([dir="rtl"]) .highlight-item .ph-content {
    text-align : left;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .product-highlights {
        padding       : 20px 18px;
        border-radius : 10px;
    }

    .ph-section-title {
        font-size : 1.1rem;
    }

    .highlight-item {
        gap     : 10px;
        padding : 13px 0;
    }

    .highlight-item .ph-title {
        font-size : .9rem;
    }

    .highlight-item .ph-desc {
        font-size : .78rem;
    }

    .ph-feature-icon {
        width  : 18px;
        height : 18px;
    }
}