@layer components {
/* Receipt item row: one priced line on the transactional-document pages
   (receipt, invoice, estimate, gift, royalty, order, package). The leading
   48px avatar / 24px glyph comes from the markup's lg avatar, not from CSS
   resizing. */

.psw-receipts__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.psw-receipts__item-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
}

/* A title-only row (no subtitle, no description) centres against the 48px
   avatar instead of hugging its top. */
.psw-receipts__item-head--centered {
    align-items: center;
}

.psw-receipts__item-media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Avatar component's `--icon` modifier defaults to brand-blue (info-400 on
   info-100). Inside the receipt's item media, force the same gray scheme as
   the top-right ribbon. Photo avatars (rendered as <img>) are unaffected —
   the selector matches only --icon. */
.psw-receipts__item-media .psw-avatar--icon {
    background: var(--color-gray-200);    /* #F0F0F0 */
    color: var(--color-gray-600);         /* #545454 */
}

.psw-receipts__item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.psw-receipts__item-name {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);            /* bold 16/20 */
    line-height: var(--text-label-md--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
    overflow-wrap: anywhere;
}

.psw-receipts__item-meta {
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-sm);        /* regular 14/20, gray */
    line-height: var(--text-paragraph-sm--line-height);
    color: var(--color-gray-600);
}

.psw-receipts__item-price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: var(--text-label-md);            /* bold 16/20 */
    line-height: var(--text-label-md--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-receipts__item-description {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-sm);
    line-height: var(--text-paragraph-sm--line-height);
    color: var(--color-gray-600);
}

@media (min-width: 769px) {
    .psw-receipts__item {
        gap: var(--space-4);
    }
}
}