.ecomStockStatus {
    --ecomStockStatusBg: rgba(102, 168, 48, 0.1);
    --ecomStockStatusColor: #66a830;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 5px;
    background-color: var(--ecomStockStatusBg);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    color: var(--ecomColorTextStrong);
    transition: background-color 200ms ease;
}

@media (min-width: 1024px) {
    .ecomStockStatus {
        font-size: 16px;
        line-height: 16px;
    }
}

.ecomStockStatus[data-state="out-of-stock"] {
    --ecomStockStatusBg: rgba(200, 57, 55, 0.1);
    --ecomStockStatusColor: #c83937;
}

.ecomStockStatus[data-state="on-backorder"] {
    --ecomStockStatusBg: rgba(255, 105, 0, 0.1);
    --ecomStockStatusColor: #ff6900;
}

.ecomStockStatusIndicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ecomStockStatusDot {
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--ecomStockStatusColor);
    transition: background-color 200ms ease;
}

.ecomStockStatusLabel {
    font-weight: 600;
    line-height: 1;
    color: var(--ecomStockStatusColor);
    transition: color 200ms ease;
}

.ecomStockStatusSeparator {
    color: var(--ecomColorTextStrong);
}

.ecomStockStatusDelivery {
    color: var(--ecomColorTextStrong);
    font-weight: 400;
}

.ecomStockStatusDelivery strong {
    font-weight: 600;
    line-height: 1;
    color: #073B4A;
}

.ecomStockStatus:not([data-state="in-stock"]) .ecomStockStatusSeparator,
.ecomStockStatus:not([data-state="in-stock"]) .ecomStockStatusDelivery {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ecomStockStatus,
    .ecomStockStatusDot,
    .ecomStockStatusLabel {
        transition: none;
    }
}