.jbm-card {
    --jbm-ink: #15284b;
    --jbm-muted: #788298;
    --jbm-border: #e5e9ef;
    --jbm-accent: #2b53a0;
    --jbm-radius: 12px;

    position: relative;
    isolation: isolate;
    container-type: inline-size;

    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--jbm-card-max-width, 100%);
    min-inline-size: 0;
    block-size: auto;

    margin: 0;
    padding: 0;
    overflow: hidden;

    border: 1px solid var(--jbm-border);
    border-radius: var(--jbm-radius);
    background: #fff;

    color: var(--jbm-ink);
    font-family: inherit;
    text-align: start;
}

.jbm-card *,
.jbm-card *::before,
.jbm-card *::after {
    box-sizing: border-box;
}

.jbm-card .jbm-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-inline-size: 0;
    block-size: auto;
    padding: 14px;
}

/* Special offer: title + countdown, with a thin line below. */

.jbm-card .jbm-card__offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 7px;

    min-inline-size: 0;
    margin: 0;
    padding: 0 0 2px;
}

.jbm-card .jbm-card__offer-title {
    color: #dc293b;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
}

.jbm-card .jbm-card__timer {
    display: block;
    justify-self: end;

    margin: 0;
    padding: 0;

    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;

    color: #b92335;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.8;
}

.jbm-card .jbm-card__offer-track {
    grid-column: 1 / -1;

    inline-size: 100%;
    block-size: 3px;
    overflow: hidden;

    border-radius: 999px;
    background: #f8dce2;
}

.jbm-card .jbm-card__offer-fill {
    display: block;
    inline-size: 100%;
    block-size: 100%;

    border-radius: inherit;
    background: #dc293b;
    transform-origin: right center;
}

/* Allow wrapping instead of shrinking text excessively. */
@container (max-width: 175px) {
    .jbm-card .jbm-card__offer {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }

    .jbm-card .jbm-card__timer {
        justify-self: start;
    }
}

/* Square image area with a very small internal inset. */

.jbm-card .jbm-card__media {
    position: relative;

    inline-size: 100%;
    min-inline-size: 0;
    aspect-ratio: 1 / 1;

    margin: 0;
    padding: 0;
    overflow: hidden;
}

.jbm-card .jbm-card__image {
    position: absolute;
    inset: 4px;

    display: block;
    inline-size: calc(100% - 8px);
    block-size: calc(100% - 8px);
    max-inline-size: none;
    max-block-size: none;

    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;

    object-fit: contain;
    box-shadow: none;
}

/* Labels overlay the image and do not increase card height. */

.jbm-card .jbm-card__labels {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;

    max-inline-size: 100%;
    margin: 0;
    padding: 0;

    pointer-events: none;
}

.jbm-card .jbm-card__badge {
    display: inline-block;
    max-inline-size: 100%;
    padding: 3px 8px;

    border: 1px solid #dfe5ec;
    border-radius: 20px;

    background: #f0f3f7;
    color: #40516b;

    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* رنگ قبلی ارسال رایگان، برای دست دوم */
.jbm-card .jbm-card__badge--used {
    border-color: #2b53a0;
    background: #2b53a0;
    color: #fff;
}

/* ناموجود: خنثی و خوانا */
.jbm-card .jbm-card__badge--unavailable {
    border-color: #303640;
    background: #303640;
    color: #fff;
}

/* Only the product title is inside the anchor. */

.jbm-card .jbm-card__title {
    position: static;
    display: block;

    min-inline-size: 0;
    block-size: 3.7em;

    margin: 0;
    padding: 0;
    overflow: visible;

    color: var(--jbm-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.85;
    text-align: start;
}

.jbm-card .jbm-card__link {
    position: static;
    display: block;

    margin: 0;
    padding: 0;
    border: 0;

    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    box-shadow: none;
}

.jbm-card .jbm-card__title-text {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Click target covers the card, including its image. */

.jbm-card .jbm-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    border-radius: var(--jbm-radius);
    cursor: pointer;
}

.jbm-card .jbm-card__link:focus-visible {
    outline: none;
}

.jbm-card .jbm-card__link:focus-visible::after {
    outline: 3px solid var(--jbm-accent);
    outline-offset: -4px;
}

/* Reserved for future independent controls such as wishlist. */

.jbm-card .jbm-card__action {
    position: relative;
    z-index: 3;
}

/* Left-aligned prices in this RTL card. */

.jbm-card .jbm-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 5px;

    min-inline-size: 0;
    min-block-size: 0;

    margin-block-start: 0;
    padding-block-start: 2px;
}

.jbm-card .jbm-card__old-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-end;
    gap: 8px;

    max-inline-size: 100%;
    direction: ltr;
}

.jbm-card .jbm-card__old-row del {
    color: var(--jbm-muted);
    font-size: 12px;
    line-height: 1.6;
}

.jbm-card .jbm-card__old-row .woocommerce-Price-currencySymbol {
    display: none;
}

.jbm-card .jbm-card__discount {
    display: inline-block;
    padding: 2px 8px;

    border-radius: 16px;
    background: #dc293b;
    color: #fff;

    direction: rtl;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.65;
}

.jbm-card .jbm-card__current {
    max-inline-size: 100%;

    color: var(--jbm-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.7;
}

.jbm-card .woocommerce-Price-amount {
    color: inherit;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}

.jbm-card .woocommerce-Price-currencySymbol {
    color: var(--jbm-muted);
    font-size: 0.64em;
    font-weight: 400;
}

.jbm-card .jbm-card__status {
    color: var(--jbm-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* Adapt to the card's available width. */

@container (max-width: 200px) {
    .jbm-card .jbm-card__body {
        padding: 10px;
    }

    .jbm-card .jbm-card__title {
        font-size: 12px;
    }

    .jbm-card .jbm-card__current {
        font-size: 16px;
    }

    .jbm-card .jbm-card__badge,
    .jbm-card .jbm-card__timer {
        font-size: 10px;
    }

    .jbm-card .jbm-card__old-row {
        gap: 5px;
    }
}

@container (min-width: 300px) {
    .jbm-card .jbm-card__body {
        padding: 18px;
    }

    .jbm-card .jbm-card__title {
        font-size: 15px;
    }

    .jbm-card .jbm-card__current {
        font-size: 21px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .jbm-card:hover {
        border-color: #b5c7df;
    }
}

@media (forced-colors: active) {
    .jbm-card {
        border-color: CanvasText;
    }

    .jbm-card .jbm-card__badge,
    .jbm-card .jbm-card__discount {
        border: 1px solid CanvasText;
    }

    .jbm-card .jbm-card__link:focus-visible::after {
        outline-color: Highlight;
    }
}

.jbm-card .jbm-card__sku {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px;

    min-inline-size: 0;
    margin: 0;
    margin-block-start: 0px;
    padding: 0;

    color: #667085;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    text-align: start;
}

.jbm-card .jbm-card__sku bdi {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* لیبل و تصویر در جریان طبیعی؛ بدون هم‌پوشانی */
.jbm-card .jbm-card__media {
    display: flex;
    flex-direction: column;
    gap: 6px;

    aspect-ratio: auto;
    block-size: auto;
    padding: 0;
}

/* حفظ کادر مربع و نمایش کامل تصویر */
.jbm-card .jbm-card__image {
    position: static;
    inset: auto;

    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1 / 1;

    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 4px;

    object-fit: contain;
}

/* انتقال لیبل‌ها به بالای تصویر */
.jbm-card .jbm-card__labels {
    position: static;
    inset: auto;
    order: -1;

    inline-size: 100%;
}

/* برش نمایشی ملایم، فقط برای محصولات دسته used */
.jbm-card--used-image .jbm-card__image {
    padding: 0;
    clip-path: inset(4%);
    transform: scale(1.087);
    transform-origin: center;
}

.jbm-card .jbm-card__purchase-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;

    inline-size: 100%;
    min-inline-size: 0;
}

/* قیمت ابتدا، با تمام عرض کارت */
.jbm-card .jbm-card__purchase-row .jbm-card__current {
    order: 0;
    flex: none;

    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;

    margin: 0;
    text-align: left;
}

/* پیام اقساطی زیر قیمت، سمت راست */
.jbm-card .jbm-card__purchase-row .jbm-card__installment {
    order: 1;
    align-self: flex-start;
}

.jbm-card .jbm-card__installment {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 3px;

    margin: 0;
    padding: 0;

    color: #2b53a0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    white-space: nowrap;
}

.jbm-card .jbm-card__installment-icon {
    display: block;
    flex: 0 0 14px;

    inline-size: 14px;
    block-size: 14px;
}


/* Compact presentation: standard cards remain unchanged. */
.jbm-card--compact .jbm-card__body { padding: 10px; gap: 5px; }
.jbm-card--compact .jbm-card__image { aspect-ratio: 5 / 4; max-block-size: 150px; }
.jbm-card--compact .jbm-card__title { font-size: 12px; line-height: 1.7; block-size: 3.4em; }
.jbm-card--compact .jbm-card__current { font-size: 15px; }
.jbm-card--compact .jbm-card__old-row del { font-size: 11px; }
.jbm-card--compact .jbm-card__action { margin-block-start: auto; padding-block-start: 8px; }
.jbm-card--compact .jbm-card__buy { display: flex; justify-content: center; align-items: center; min-block-size: 36px; padding: 6px 8px; border: 1px solid var(--jbm-accent); border-radius: 8px; background: #fff; color: var(--jbm-accent); font-size: 12px; text-decoration: none; text-align: center; box-shadow: none; }
.jbm-card--compact .jbm-card__buy:hover { background: #f3f6fb; color: var(--jbm-accent); }
.jbm-card--compact .jbm-card__buy:focus-visible { outline: 2px solid var(--jbm-accent); outline-offset: 2px; }




/* Hide the WooCommerce view-cart link */
.jbm-card--compact .jbm-card__action .added_to_cart {
    display: none !important;
}

/* AJAX loading indicator */
.jbm-card--compact .jbm-card__buy.loading {
    position: relative;
    opacity: .75;
    cursor: wait;
    pointer-events: none;
}

.jbm-card--compact .jbm-card__buy.loading::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline-end: 10px;
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: jbm-compact-spin .65s linear infinite;
}

@keyframes jbm-compact-spin {
    to { transform: rotate(360deg); }
}